.news-hero{height:280px;display:flex;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:var(--white)}
.news-hero h1{font-size:var(--text-4xl);font-weight:900;letter-spacing:-0.02em;margin-bottom:var(--space-3)}
.news-hero p{font-size:var(--text-lg);opacity:0.85}
@media(max-width:576px){.news-hero h1{font-size:var(--text-2xl)}}
.cat-bar{display:flex;justify-content:center;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-8)}
.cat-btn{padding:var(--space-2) var(--space-5);border-radius:48px;font-size:var(--text-sm);font-weight:600;background:var(--white);border:1px solid var(--gray-200);color:var(--gray-600);cursor:pointer;transition:all var(--duration-fast)}
.cat-btn:hover{border-color:var(--primary);color:var(--primary)}
.cat-btn.active{background:var(--primary);color:var(--white);border-color:var(--primary)}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.article-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gray-100);transition:all var(--duration-normal);display:flex;flex-direction:column}
.article-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.article-img{width:100%;aspect-ratio:16/9;object-fit:cover}
.article-body{padding:var(--space-4) var(--space-5);flex:1;display:flex;flex-direction:column}
.article-meta{display:flex;gap:var(--space-3);font-size:var(--text-xs);color:var(--gray-400);margin-bottom:var(--space-2)}
.article-body h3{font-size:var(--text-base);font-weight:700;color:var(--gray-900);margin-bottom:var(--space-2);line-height:1.4}
.article-body p{font-size:var(--text-sm);color:var(--gray-600);line-height:1.6;flex:1;margin-bottom:var(--space-3)}
.article-link{font-size:var(--text-sm);font-weight:600;color:var(--primary);margin-top:auto}
@media(max-width:992px){.articles-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:576px){.articles-grid{grid-template-columns:1fr}}
.pagination{display:flex;justify-content:center;gap:var(--space-2);margin-top:var(--space-8)}
.page-btn{width:40px;height:40px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:600;background:var(--white);border:1px solid var(--gray-200);color:var(--gray-600);cursor:pointer;transition:all var(--duration-fast)}
.page-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-btn.active{background:var(--primary);color:var(--white);border-color:var(--primary)}