:root{
  --accent:#d4111e;        /* MÀU THƯƠNG HIỆU — đổi tại đây */
  --accent-2:#b00d15;
  --bg:#eef0f3;
  --surface:#ffffff;
  --surface-2:#f5f6f8;
  --ink:#17181c;
  --muted:#5c636d;
  --faint:#9aa0a6;
  --line:#e2e4e8;
  --img:#e6e8ec;
  --radius:6px;
  --maxw:1180px;
  --head-h:100px;          /* chiều cao header (cho sticky) */
}
[data-theme="dark"]{
  --bg:#0d0f13;--surface:#171a20;--surface-2:#1f232b;--ink:#e7e9ec;--muted:#9aa0a6;--faint:#6b7178;--line:#262b33;--img:#232830;
}
*{box-sizing:border-box;}
html{font-size:16px;}
body{margin:0;font-family:-apple-system,"Segoe UI",Roboto,Arial,"Helvetica Neue",sans-serif;background:var(--bg);color:var(--ink);line-height:1.5;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px;}

/* ===== Header (cố định khi cuộn) ===== */
.site-header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);}
.header-top{display:flex;align-items:center;gap:18px;height:62px;}
.brand{font-size:1.7rem;font-weight:800;color:var(--accent);letter-spacing:-1px;white-space:nowrap;}
.brand span{color:var(--ink);}
.header-search{flex:1;max-width:430px;display:flex;}
.header-search input{flex:1;height:38px;padding:0 14px;border:1px solid var(--line);border-right:none;border-radius:var(--radius) 0 0 var(--radius);background:var(--surface);color:var(--ink);font-size:.95rem;}
.header-search button{width:46px;border:none;background:var(--accent);color:#fff;border-radius:0 var(--radius) var(--radius) 0;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.header-actions{display:flex;align-items:center;gap:4px;margin-left:auto;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:var(--radius);font-size:1.2rem;line-height:1;}
.icon-btn:hover{background:var(--surface-2);color:var(--accent);}
.search-icon-m{display:none;}
.nav-bar{background:var(--accent);}
.nav-bar .container{display:flex;overflow-x:auto;scrollbar-width:none;}
.nav-bar .container::-webkit-scrollbar{display:none;}
.nav-bar a{color:#fff;font-weight:600;font-size:.92rem;padding:11px 15px;white-space:nowrap;border-bottom:3px solid transparent;}
.nav-bar a:hover{background:var(--accent-2);}

/* ===== Layout ===== */
main.container{padding-top:18px;padding-bottom:40px;}
.layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;}
.main-col{min-width:0;}
.home-top{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;margin-bottom:6px;}
.home-feature{min-width:0;}
.home-top .side-box{position:static;}

.block-head{margin:26px 0 14px;border-bottom:2px solid var(--accent);}
.block-head h2{display:inline-block;background:var(--accent);color:#fff;font-size:1rem;font-weight:700;padding:7px 16px;border-radius:var(--radius) var(--radius) 0 0;margin:0;}
.block-head h2 a{color:#fff;}
.main-col > section:first-child .block-head,.main-col > section:first-child.hero{margin-top:0;}

/* Hero */
.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;margin-bottom:8px;}

/* Lead card */
.lead-card img,.lead-card .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);display:block;}
.lead-card h2{font-size:1.55rem;line-height:1.24;margin:11px 0 7px;}
.lead-card h3{font-size:1.18rem;line-height:1.3;margin:10px 0 6px;}
.lead-card p{color:var(--muted);font-size:.95rem;margin:0;}
.lead-card a:hover h2,.lead-card a:hover h3{color:var(--accent);}

/* Headline list */
.hl-list{display:flex;flex-direction:column;}
.hl-item{padding:11px 0;border-bottom:1px solid var(--line);}
.hl-item:last-child{border-bottom:none;}
.hl-item a{display:flex;gap:11px;align-items:flex-start;}
.hl-item img,.hl-item .ph{width:104px;height:68px;flex:none;object-fit:cover;border-radius:var(--radius);background:var(--img);}
.hl-item .hl-text{min-width:0;}
.hl-item h3{font-size:.97rem;line-height:1.34;margin:0;font-weight:600;}
.hl-item p{display:none;}
.hl-item time{display:block;color:var(--faint);font-size:.76rem;margin-top:5px;}
.hl-item a:hover h3{color:var(--accent);}

.block-inner{display:grid;grid-template-columns:1.3fr 1fr;gap:22px;}

/* Feed (chuyên mục / tìm kiếm) — 2 cột để lấp đầy chiều ngang */
.feed{display:grid;grid-template-columns:1fr 1fr;column-gap:34px;}
.feed .hl-item{padding:16px 0;}
.feed .hl-item img,.feed .hl-item .ph{width:176px;height:99px;}
.feed .hl-item h3{font-size:1.2rem;}
.feed .hl-item p{display:block;color:var(--muted);font-size:.92rem;margin:7px 0 0;}

/* Sidebar */
.sidebar{min-width:0;}
.side-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.side-box.sticky{position:sticky;top:108px;}
.side-head{font-size:1rem;font-weight:700;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:8px;margin-bottom:6px;}
.rank{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line);}
.rank:last-child{border-bottom:none;}
.rank .num{font-size:1.45rem;font-weight:800;color:var(--accent);line-height:1;width:22px;flex:none;}
.rank h3{font-size:.92rem;line-height:1.4;margin:0;font-weight:600;}
.rank a:hover h3{color:var(--accent);}
.side-list a{display:block;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;font-weight:600;line-height:1.4;}
.side-list a:last-child{border-bottom:none;}
.side-list a:hover{color:var(--accent);}

/* Trang chuyên mục */
.page-title{font-size:1.6rem;margin:4px 0 16px;padding-left:12px;border-left:4px solid var(--accent);}
.breadcrumb{font-size:.82rem;color:var(--muted);margin-bottom:14px;}
.breadcrumb a:hover{color:var(--accent);}
.pagination{display:flex;gap:16px;align-items:center;justify-content:center;margin-top:28px;}
.pagination a{color:var(--accent);font-weight:600;}
.pagination span{color:var(--muted);font-size:.9rem;}
.empty{color:var(--muted);padding:40px 0;text-align:center;}

/* Trang bài */
/* align-items:stretch -> cột phải cao bằng bài viết, nhờ đó side-box sticky bám theo
   suốt chiều dài bài (không còn khoảng trống lớn bên phải ở bài dài). */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:32px;align-items:stretch;}
.article{min-width:0;}
.article-side{min-width:0;}
.article-side .side-box.sticky{position:sticky;top:calc(var(--head-h) + 8px);}
.article-title{font-size:2rem;line-height:1.24;margin:0 0 14px;}
.article-meta{color:var(--muted);font-size:.85rem;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.article-sapo{font-weight:700;font-size:1.15rem;line-height:1.6;margin:0 0 18px;}
.article-body{font-size:1.12rem;line-height:1.85;}
.article-body p{margin:0 0 18px;}
.article-body img{border-radius:var(--radius);margin:8px 0;}
.article-body h2{font-size:1.4rem;line-height:1.35;margin:26px 0 12px;}
.img-credit{color:var(--faint);font-size:.82rem;font-style:italic;margin-top:-8px;}
figure{margin:0 0 18px;}
/* Ảnh đại diện bài: khung 16:9 cố định -> trình duyệt chừa sẵn chỗ, không nhảy layout (CLS) */
.article-hero{margin:0 0 18px;}
.article-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);display:block;background:var(--img);}
figcaption{color:var(--muted);font-size:.82rem;text-align:center;margin-top:7px;}
.tags{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap;}
.tag{background:var(--surface-2);border:1px solid var(--line);padding:5px 12px;border-radius:16px;font-size:.84rem;}
a.tag:hover{border-color:var(--accent);color:var(--accent);}
.tag-count{color:var(--muted);font-size:1rem;font-weight:400;}

/* Liên kết thực thể trong thân bài (semantic SEO) */
.entity-link{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px dotted var(--accent);}
.entity-link:hover{border-bottom-style:solid;}
.author-link{color:var(--accent);font-weight:600;}
.author-link:hover{text-decoration:underline;}

/* Trang tác giả */
.author-head{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:22px;}
.author-avatar{width:64px;height:64px;flex:none;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;}
.author-name{margin:0 0 6px;font-size:1.45rem;}
.author-bio{margin:0 0 6px;color:var(--muted);}
.author-stats{margin:0;color:var(--faint);font-size:.88rem;}

/* Trang tĩnh (giới thiệu / liên hệ / chính sách) + footer */
.static-page{max-width:760px;font-size:1.05rem;line-height:1.8;}
.static-page h2{font-size:1.25rem;margin:24px 0 10px;}
.static-page a{color:var(--accent);}
.footer-links{display:flex;gap:18px;justify-content:center;padding:14px 0 4px;}
.footer-links a{color:var(--muted);font-size:.9rem;font-weight:600;}
.footer-links a:hover{color:var(--accent);}
/* Tin liên quan — dải card full-width dưới bài (lấp đầy chiều ngang, không để trống) */
.related-wide{margin-top:34px;}
.related-wide .feed .hl-item p{display:block;}

/* Tìm kiếm */
.search-box{display:flex;gap:8px;margin:6px 0 24px;max-width:600px;}
.search-box input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font-size:1rem;}
.search-box button{padding:0 22px;border:none;background:var(--accent);color:#fff;border-radius:var(--radius);font-weight:600;cursor:pointer;}

/* ===== Trang chuyên mục kiểu CNN section ===== */
.section-title-lg{font-size:2.1rem;font-weight:800;letter-spacing:-.5px;margin:6px 0 2px;}
.subnav{display:flex;gap:2px;flex-wrap:nowrap;border-bottom:2px solid var(--accent);margin:10px 0 24px;overflow-x:auto;scrollbar-width:none;position:sticky;top:var(--head-h);z-index:40;background:var(--surface);}
.subnav::-webkit-scrollbar{display:none;}
.subnav a{padding:11px 16px;font-weight:600;font-size:.95rem;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px;color:var(--muted);}
.subnav a:hover{color:var(--accent);}
.subnav a.active{color:var(--accent);border-color:var(--accent);}
.section-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:26px 24px;}
.section-lead{grid-column:1/-1;display:grid;grid-template-columns:1.5fr 1fr;gap:26px;align-items:center;padding-bottom:24px;border-bottom:1px solid var(--line);}
.section-lead img,.section-lead .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);}
.section-lead h2{font-size:1.9rem;line-height:1.2;font-weight:800;margin:0 0 10px;}
.section-lead p{color:var(--muted);font-size:1rem;margin:0;}
.section-lead a:hover h2{color:var(--accent);}
.s-card img,.s-card .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);margin-bottom:10px;}
.s-card h3{font-size:1.12rem;line-height:1.3;font-weight:700;margin:0 0 6px;}
.s-card p{color:var(--muted);font-size:.88rem;margin:0;}
.s-card a:hover h3{color:var(--accent);}
.cat-tag{display:inline-block;color:var(--accent);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;}

/* Tin lead chuyên mục: ảnh + (tiêu đề + tóm tắt + danh sách tin phụ) — lấp đầy chiều cao */
.sec-lead{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch;padding-bottom:24px;margin-bottom:10px;border-bottom:1px solid var(--line);}
.sec-lead-img{display:block;border-radius:var(--radius);overflow:hidden;min-height:230px;}
.sec-lead-img img,.sec-lead-img .ph{width:100%;height:100%;object-fit:cover;display:block;}
.sec-lead-body h2{font-size:1.7rem;line-height:1.22;font-weight:800;margin:0 0 10px;}
.sec-lead-body > a:hover h2{color:var(--accent);}
.sec-lead-body p{color:var(--muted);font-size:.98rem;margin:0 0 12px;}
.sec-lead-more{list-style:none;padding:0;margin:0;border-top:1px solid var(--line);}
.sec-lead-more li{padding:9px 0;border-bottom:1px solid var(--line);}
.sec-lead-more li:last-child{border-bottom:none;}
.sec-lead-more a{font-weight:600;font-size:.95rem;line-height:1.35;}
.sec-lead-more a:hover{color:var(--accent);}
.feed .hl-item a{align-items:center;}

/* Footer */
.site-footer{background:#14161a;color:#9aa0a6;padding:24px 0;font-size:.85rem;text-align:center;}
[data-theme="dark"] .site-footer{background:#08090b;}

.ph{background:var(--img);display:block;}

/* Ô quảng cáo (chỉ hiện khi ADS_ENABLED + có banner/AdSense) */
.ad-slot{margin:20px 0;text-align:center;}
.ad-slot .ad-label{display:block;font-size:.68rem;color:var(--faint);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;}
.ad-slot img{max-width:100%;height:auto;margin:0 auto;border-radius:4px;}
.ad-header,.ad-footer{min-height:90px;}
.ad-sidebar{min-height:250px;margin-top:22px;}
.ad-in_article{min-height:250px;max-width:728px;margin-left:auto;margin-right:auto;}

/* ===== MOBILE: kiểu CNN — thẻ ảnh lớn, 1 cột ===== */
@media(max-width:768px){
  .header-search{display:none;}
  .search-icon-m{display:inline-flex;}
  .header-top{height:56px;gap:10px;}
  .brand{font-size:1.4rem;}
  .nav-bar a{padding:10px 13px;}

  .layout,.home-top,.article-layout,.block-inner,.hero,.feed{grid-template-columns:1fr;gap:0;}

  .hl-item a{flex-direction:column;gap:0;}
  .hl-item img,.hl-item .ph,.feed .hl-item img,.feed .hl-item .ph{width:100%;height:auto;aspect-ratio:16/9;margin-bottom:10px;}
  .hl-item h3,.feed .hl-item h3{font-size:1.3rem;font-weight:700;line-height:1.28;}
  .hl-item{padding:18px 0;}
  .hl-item p,.feed .hl-item p,.hl-item time{display:none;}
  .hl-list{margin-top:6px;}
  .block-inner .hl-list{margin-top:14px;}

  .lead-card h2{font-size:1.6rem;font-weight:800;}
  .lead-card h3{font-size:1.3rem;font-weight:700;}
  .lead-card p{display:none;}
  .hero{margin-bottom:0;}

  /* sidebar xuống cuối, không sticky; ảnh trong sidebar nhỏ lại */
  .sidebar{margin-top:6px;}
  .side-box.sticky{position:static;}
  .side-list a{font-size:1rem;}

  /* section page */
  .section-grid{grid-template-columns:1fr;gap:22px;}
  .section-lead{grid-template-columns:1fr;gap:12px;padding-bottom:18px;}
  .section-lead h2{font-size:1.55rem;}
  .section-title-lg{font-size:1.7rem;}
  .sec-lead{grid-template-columns:1fr;gap:14px;}
  .sec-lead-body h2{font-size:1.5rem;}
  .s-card p{display:none;}
  .subnav{top:102px;}   /* mobile: không cố định cho thoáng */

  .article-title{font-size:1.6rem;}
  .article-body{font-size:1.08rem;}
}
@media(max-width:480px){
  .page-title{font-size:1.4rem;}
}