/* ══ CATEGORY TABS ══ */
.cta-banner {background: linear-gradient(135deg, #1a6b2f 0%, #22a045 100%);}
.cat-tab { display:inline-flex; align-items:center; padding:8px 18px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:all .18s; border:none; white-space:nowrap; background:transparent; color:#6b7280; }
.cat-tab:hover { background:var(--green-light); color:var(--green); }
.cat-tab.active { background:var(--green); color:#fff; }

/* ══ SEARCH INPUT ══ */
.search-input { border:1.5px solid #e5e7eb; border-radius:10px; padding:8px 40px 8px 14px; font-size:13px; outline:none; transition:border-color .2s; font-family:inherit; width:100%; background:#fff; }
.search-input:focus { border-color:var(--green); }
.search-input::placeholder { color:#aab; }

/* ══ CATEGORY BADGE ══ */
.cat-badge { font-size:10px; font-weight:800; letter-spacing:.5px; padding:3px 10px; border-radius:4px; display:inline-block; }
.cat-thi-truong { background:#dbeafe; color:#1d4ed8; }
.cat-du-an { background:#dcfce7; color:#166534; }
.cat-quy-hoach { background:#fef9c3; color:#854d0e; }
.cat-kinh-nghiem { background:#fce7f3; color:#9d174d; }
.cat-chinh-sach { background:#ede9fe; color:#5b21b6; }
.cat-phong-thuy { background:#ffedd5; color:#9a3412; }
.cat-kien-thuc { background:#f1f5f9; color:#475569; }

/* ══ HERO CARD (featured) ══ */
.hero-card { position:relative; border-radius:16px; overflow:hidden; cursor:pointer; }
.hero-card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.hero-card:hover img { transform:scale(1.04); }
.hero-card-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.05) 100%); }
.hero-card-body { position:absolute; bottom:0; left:0; right:0; padding:20px; }
.hero-card-date { font-size:12px; color:rgba(255,255,255,.75); display:flex; align-items:center; gap:5px; margin-bottom:8px; }
.hero-card-title { font-size:clamp(18px,2.5vw,24px); font-weight:900; color:#fff; line-height:1.25; margin-bottom:8px; }
.hero-card-desc { font-size:13px; color:rgba(255,255,255,.8); line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ══ SIDE NEWS CARD ══ */
.side-news { display:flex; gap:12px; cursor:pointer; padding:12px; border-bottom:1px solid #f0f0f0; }
.side-news:last-child { border-bottom:none; }
.side-news:hover .side-news-title { color:var(--green); }
.side-news-img { width:100px; height:76px; border-radius:10px; overflow:hidden; flex-shrink:0; }
@media(max-width:480px) { .side-news-img { width:80px; height:62px; } }
.side-news-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.side-news:hover .side-news-img img { transform:scale(1.06); }
.side-news-title { font-size:13.5px; font-weight:700; color:#111827; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
.side-news-meta { font-size:11px; color:#9ca3af; display:flex; align-items:center; gap:4px; margin-top:5px; }

/* ══ NEWS LIST CARD ══ */
.news-row { display:flex; gap:14px; background:#fff; border-radius:14px; overflow:hidden; cursor:pointer; transition:box-shadow .22s, transform .22s; }
.news-row:hover { box-shadow:0 8px 28px rgba(0,0,0,.1); transform:translateY(-2px); }
.news-row-img { width:160px; flex-shrink:0; overflow:hidden; position:relative; }
@media(max-width:479px) { .news-row-img { width:100px; } }
.news-row-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; }
.news-row:hover .news-row-img img { transform:scale(1.06); }
.news-row-body { flex:1; padding:14px 14px 14px 0; display:flex; flex-direction:column; justify-content:space-between; }
.news-row-title { font-size:15px; font-weight:800; color:#111827; line-height:1.3; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
.news-row:hover .news-row-title { color:var(--green); }
.news-row-desc { font-size:12.5px; color:#6b7280; line-height:1.55; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.news-row-meta { display:flex; align-items:center; gap:12px; margin-top:8px; font-size:11.5px; color:#9ca3af; }
.news-row-meta span { display:flex; align-items:center; gap:4px; }

/* ══ SIDEBAR ══ */
.sidebar-section { background:#fff; border-radius:14px; padding:18px; border:1px solid #eee; }
.sidebar-title { font-size:15px; font-weight:800; color:#111827; margin-bottom:14px; padding-bottom:10px; border-bottom:2px solid var(--green-light); }

/* Hot news rank */
.hot-row { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f3f4f6; cursor:pointer; }
.hot-row:last-child { border-bottom:none; }
.hot-row:hover .hot-row-title { color:var(--green); }
.hot-num { width:26px; height:26px; border-radius:8px; background:var(--green-light); color:var(--green); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.hot-num.top { background:var(--green); color:#fff; }
.hot-row-img { width:64px; height:50px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.hot-row-img img { width:100%; height:100%; object-fit:cover; }
.hot-row-title { font-size:12.5px; font-weight:700; color:#1f2937; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; }
.hot-row-date { font-size:10.5px; color:#9ca3af; margin-top:3px; display:flex; align-items:center; gap:3px; }

/* Newsletter */
.nl-input { width:100%; border:1.5px solid #e5e7eb; border-radius:9px; padding:9px 13px; font-size:13px; outline:none; transition:border-color .2s; font-family:inherit; }
.nl-input:focus { border-color:var(--green); }
.nl-input::placeholder { color:#bbb; }

/* Topic tags */
.topic-tag { display:inline-flex; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:500; background:#f3f4f6; color:#374151; cursor:pointer; transition:all .15s; border:none; }
.topic-tag:hover { background:var(--green-light); color:var(--green); }

/* ══ PAGINATION ══ */
.page-btn { width:36px; height:36px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:600; border:1.5px solid #e5e7eb; background:#fff; color:#374151; cursor:pointer; transition:all .15s; }
.page-btn:hover { border-color:var(--green); color:var(--green); }
.page-btn.active { background:var(--green); color:#fff; border-color:var(--green); }
.page-btn.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ══ FADE ══ */
.fade-up { opacity:0; transform:translateY(18px); transition:opacity .42s ease, transform .42s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ══ SINGLE NEWS (chi-tiet-tin-tuc) ══ */
.article-body { font-size:15px; line-height:1.88; color:#374151; }
.article-body p { margin-bottom:14px; }
.article-lead { font-size:15.5px; font-weight:700; color:#1f2937; line-height:1.8; margin-bottom:22px; }
.art-h2 { font-size:17px; font-weight:800; color:var(--green); margin:26px 0 12px; }
.art-quote { border-left:4px solid var(--green); background:var(--green-light); border-radius:0 10px 10px 0; padding:13px 16px; margin:18px 0; display:flex; gap:10px; align-items:flex-start; }
.art-quote-icon { font-size:20px; color:var(--green); flex-shrink:0; margin-top:1px; }
.art-quote-text { font-size:14px; font-style:italic; color:#166534; line-height:1.7; font-weight:500; }
.opp-item, .chal-item { display:flex; gap:12px; margin-bottom:16px; }
.opp-icon { width:26px; height:26px; border-radius:50%; background:var(--green); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:3px; }
.chal-icon { width:26px; height:26px; border-radius:50%; background:#fee2e2; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:3px; }
.opp-title, .chal-title { font-size:14.5px; font-weight:700; color:#111827; margin-bottom:3px; }
.opp-desc, .chal-desc { font-size:13px; color:#6b7280; line-height:1.65; }
.art-img { border-radius:12px; overflow:hidden; margin:18px 0; }
.art-img img { width:100%; height:260px; object-fit:cover; display:block; }
@media(min-width:640px) { .art-img img { height:340px; } }
.art-img-caption { background:#f9fafb; padding:7px 14px; font-size:11.5px; color:#9ca3af; font-style:italic; display:flex; align-items:center; gap:5px; }
.inline-cta { background:linear-gradient(135deg, #1a6b2f 0%, #22a045 100%); border-radius:14px; padding:18px 20px; display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:24px 0; }
.inline-cta-icon { width:44px; height:44px; background:rgba(255,255,255,.18); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.inline-cta-text h4 { font-size:14.5px; font-weight:800; color:#fff; margin:0 0 2px; }
.inline-cta-text p { font-size:12px; color:rgba(255,255,255,.82); margin:0; }
.inline-cta-btn { margin-left:auto; background:#fff; color:var(--green); font-weight:700; font-size:13px; padding:9px 20px; border-radius:9px; border:none; cursor:pointer; white-space:nowrap; transition:background .2s; }
.inline-cta-btn:hover { background:#f0fdf4; }
.bottom-share { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:14px 0; border-top:1px solid #f0f0f0; }
.share-icon { width:32px; height:32px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; transition:opacity .2s; border:none; flex-shrink:0; }
.share-icon:hover { opacity:.8; }
.si-fb { background:#1877f2; color:#fff; }
.si-zalo { background:#0068ff; color:#fff; font-size:11px; font-weight:800; }
.si-link { background:#f1f5f9; color:#374151; }
.si-link:hover { background:#e2e8f0; }
.prev-next { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
@media(max-width:480px) { .prev-next { grid-template-columns:1fr; } }
.pn-card { background:#fff; border-radius:12px; border:1.5px solid #e5e7eb; display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer; transition:border-color .2s, box-shadow .2s; text-decoration:none; }
.pn-card:hover { border-color:var(--green); box-shadow:0 4px 16px rgba(0,0,0,.08); }
.pn-card img { width:56px; height:44px; object-fit:cover; border-radius:7px; flex-shrink:0; }
.pn-label { font-size:10px; color:#9ca3af; font-weight:600; margin-bottom:2px; }
.pn-title { font-size:12px; font-weight:700; color:#1f2937; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.pn-next { text-align:right; justify-content:flex-end; }
.pn-arrow { color:var(--green); font-size:16px; flex-shrink:0; }
.sidebar-card { background:#fff; border-radius:14px; border:1px solid #eee; padding:18px; }
.rel-row { display:flex; gap:10px; padding:10px 0; border-bottom:1px solid #f5f5f5; cursor:pointer; }
.rel-row:last-child { border-bottom:none; }
.rel-row:hover .rel-title { color:var(--green); }
.rel-img { width:72px; height:56px; border-radius:8px; overflow:hidden; flex-shrink:0; }
.rel-img img { width:100%; height:100%; object-fit:cover; transition:transform .3s; display:block; }
.rel-row:hover .rel-img img { transform:scale(1.06); }
.rel-title { font-size:12.5px; font-weight:700; color:#1f2937; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .2s; margin-top:3px; }
.rel-date { font-size:10.5px; color:#9ca3af; margin-top:4px; display:flex; align-items:center; gap:3px; }