.blog-hero { padding: 60px 0; background: linear-gradient(135deg, #f0f4f8 0%, #e8f5e9 100%); }
.blog-hero h1 { font-size: 2.2rem; font-weight: 800; color: #1a1a2e; margin-bottom: 10px; }
.blog-hero p { color: #666; font-size: 1.08rem; line-height: 1.7; max-width: 560px; }
.blog-hero img { max-width: 100%; border-radius: 12px; }
.blog-stats { display: flex; gap: 32px; margin-top: 20px; }
.blog-stat { text-align: center; }
.blog-stat .num { font-size: 1.6rem; font-weight: 800; color: #2cc671; }
.blog-stat .label { font-size: 0.82rem; color: #999; }
.articles-section { padding: 50px 0; background: #fff; }
.articles-section .container { max-width: 1140px; }
.section-title-wrap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; flex-wrap: wrap; gap: 12px; }
.section-title-wrap h2 { font-size: 1.6rem; font-weight: 800; color: #1a1a2e; margin: 0; }
.section-title-wrap h2 i { color: #2cc671; margin-right: 8px; }
.section-title-wrap .result-count { font-size: 0.88rem; color: #999; }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; }
.article-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.06); transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
.article-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
.article-card .card-img-wrap { position: relative; overflow: hidden; height: 200px; background: #f0f4f8; }
.article-card .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.article-card:hover .card-img-wrap img { transform: scale(1.08); }
.article-card .card-img-wrap .card-cat { position: absolute; top: 14px; left: 14px; background: #2cc671; color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; }
.article-card .card-body { padding: 20px 22px 22px; flex: 1; display: flex; flex-direction: column; }
.article-card .card-body h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.45; margin-bottom: 8px; }
.article-card .card-body h3 a { color: #1a1a2e; text-decoration: none; transition: color 0.2s; }
.article-card .card-body h3 a:hover { color: #2cc671; }
.article-card .card-body .card-excerpt { font-size: 0.88rem; color: #777; line-height: 1.65; flex: 1; margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #f0f0f0; font-size: 0.8rem; color: #aaa; }
.article-card .card-footer .read-more { color: #2cc671; font-weight: 600; text-decoration: none; font-size: 0.82rem; transition: color 0.2s; }
.article-card .card-footer .read-more:hover { color: #1a8f4e; }
.recommended-section { padding: 50px 0; background: #f8fafc; }
.recommended-section .container { max-width: 940px; }
.recommended-section .section-title-wrap h2 i { color: #e65100; }
.rec-item { display: flex; align-items: center; gap: 16px; background: #fff; border-radius: 14px; padding: 18px 22px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: all 0.25s; border-left: 4px solid transparent; }
.rec-item:hover { border-left-color: #2cc671; box-shadow: 0 6px 20px rgba(0,0,0,0.08); transform: translateX(4px); }
.rec-num { font-size: 1.5rem; font-weight: 800; color: #2cc671; min-width: 32px; text-align: center; flex-shrink: 0; }
.rec-info { flex: 1; min-width: 0; }
.rec-info .rec-title { font-size: 0.98rem; font-weight: 600; margin-bottom: 4px; }
.rec-info .rec-title a { color: #1a1a2e; text-decoration: none; transition: color 0.2s; }
.rec-info .rec-title a:hover { color: #2cc671; }
.rec-info .rec-meta { font-size: 0.78rem; color: #aaa; }
.rec-info .rec-meta i { margin-right: 4px; }
.pagination-wrap { display: flex; justify-content: center; margin-top: 40px; }
.pagination-wrap .pages { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.pagination-wrap .pages a,
.pagination-wrap .pages span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 10px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.2s; }
.pagination-wrap .pages a { background: #f2f2f2; color: #555; }
.pagination-wrap .pages a:hover { background: #2cc671; color: #fff; }
.pagination-wrap .pages .active span { background: #2cc671; color: #fff; }
.pagination-wrap .pages .disabled span { background: #f5f5f5; color: #ccc; cursor: not-allowed; }
@media (max-width: 768px) {
    .blog-hero { padding: 40px 0 30px; }
    .blog-hero h1 { font-size: 1.7rem; }
    .blog-stats { gap: 20px; }
    .blog-stat .num { font-size: 1.3rem; }
    .articles-section, .recommended-section { padding: 35px 0; }
    .article-grid { grid-template-columns: 1fr; }
    .section-title-wrap h2 { font-size: 1.3rem; }
    .article-card .card-img-wrap { height: 170px; }
}