/* 4 biến thể bố cục: l-center, l-tabs, l-dark, l-portal (class gắn lên <body> theo site-config.json). */

/* ===== A. center — header căn giữa, hero 1+2, thanh bên phải ===== */
.l-center .hd-main .wrap{flex-direction:column;gap:10px;padding-bottom:0}
.l-center .brand{flex-direction:column;text-align:center;gap:4px}
.l-center .brand-t b{font-size:30px}
.l-center .nav{margin:0;width:100%;justify-content:center;border-top:1px solid rgba(255,255,255,.18);padding:6px 0}
.l-center .menu{justify-content:center}
.l-center .hero3{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:14px;height:460px}
.l-center .hero3 .ov{min-height:0}.l-center .hero3 .ov-big{grid-row:span 2}
.l-center .sec-t span{border-left:0;padding-left:0;border-bottom:3px solid var(--accent);padding-bottom:4px}

/* ===== B. tabs — thanh tab môn thể thao dính trên cùng, mosaic 4 ô cao, làn cuộn ngang ===== */
.l-tabs .hd{position:sticky;top:0;box-shadow:0 2px 14px rgba(0,0,0,.25)}
.l-tabs .hd-top{display:none}
.l-tabs .hd-main .wrap{padding-top:0;padding-bottom:0}
.l-tabs .brand{padding:12px 0}
.l-tabs .brand-t b{text-transform:uppercase;letter-spacing:1px;font-size:24px}
.l-tabs .menu{gap:0}
.l-tabs .menu a{border-radius:0;padding:22px 16px;text-transform:uppercase;font-size:14px;letter-spacing:.5px;border-bottom:3px solid transparent}
.l-tabs .menu a:hover,.l-tabs .menu .current-menu-item>a,.l-tabs .menu .current-cat>a{background:transparent;border-bottom-color:var(--primary);color:#fff}
.l-tabs .mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:34px}
.l-tabs .mosaic .ov{min-height:360px}
.l-tabs .mosaic .ov-big .ov-title{font-size:19px}
.l-tabs .card.row-card .card-title{font-size:20px}
.l-tabs .lane-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px}
.l-tabs .lane-track .card{flex:0 0 290px;scroll-snap-align:start}
.l-tabs .sec-t{text-transform:uppercase;letter-spacing:.8px}
.l-tabs .sec-t span{border-left:0;padding-left:0;background:var(--primary);color:var(--primary-ink);padding:5px 14px;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 100%,0 100%);padding-right:26px}
.l-tabs .sec-t a{color:inherit}

/* ===== C. dark — tạp chí tối, tiêu đề serif, không thanh bên ===== */
.l-dark .hd{border-bottom:1px solid rgba(212,168,67,.35)}
.l-dark .hd-top{border-bottom-color:rgba(255,255,255,.08)}
.l-dark .brand-t b{font-weight:700;font-style:italic;font-size:26px}
.l-dark .menu a{font-weight:500;letter-spacing:.4px}
.l-dark .menu a:hover,.l-dark .menu .current-menu-item>a{background:transparent;color:var(--primary)}
.l-dark .lead{display:grid;grid-template-columns:1fr 1.1fr;gap:40px;align-items:center;padding:20px 0 10px}
.l-dark .lead-title{font-size:clamp(30px,4vw,46px);font-weight:700;margin:6px 0 14px}
.l-dark .lead-title a{color:var(--ink)}.l-dark .lead-title a:hover{color:var(--primary);text-decoration:none}
.l-dark .lead-txt p{color:var(--muted);font-size:18px}
.l-dark .lead-img{display:block;aspect-ratio:16/10;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.l-dark .lead-img img,.l-dark .lead-img .ph{width:100%;height:100%;object-fit:cover}
.l-dark .picks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.l-dark .picks li{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}
.l-dark .pick-n{font:italic 700 44px/1 var(--font-head);color:var(--primary);opacity:.9;min-width:62px}
.l-dark .pick-t{display:block;font:700 20px/1.35 var(--font-head);color:var(--ink);margin-bottom:6px}
.l-dark .card{border-radius:4px}
.l-dark .chip{border-radius:2px;background:transparent;color:var(--primary);padding:0;font-size:11.5px;letter-spacing:1.4px}
.l-dark .sec-t span{border-left:0;padding-left:0;color:var(--primary);font-style:italic;font-size:24px}
.l-dark .sec-t::after{content:"";flex:1;height:1px;background:var(--line)}
.l-dark .entry h2{border-left:0;padding-left:0;border-bottom:1px solid var(--line);padding-bottom:8px}
.l-dark .entry{font-size:19px}
.l-dark .notice{background:rgba(212,168,67,.08)}
.l-dark .sf{background:rgba(255,255,255,.08)}

/* ===== D. portal — cổng tin tức: dải tin chạy, 3 cột, nhãn đỏ ===== */
.l-portal .hd{border-top:4px solid var(--primary);box-shadow:0 1px 0 var(--line)}
.l-portal .hd-top{border-bottom-color:var(--line)}
.l-portal .brand-t b{font-size:30px;text-transform:uppercase;font-weight:800;letter-spacing:-.5px}
.l-portal .brand-t small{opacity:.6}
.l-portal .menu a{text-transform:uppercase;font-size:14px;font-weight:700;border-radius:0}
.l-portal .menu a:hover,.l-portal .menu .current-menu-item>a,.l-portal .menu .current-cat>a{background:var(--primary);color:var(--primary-ink)}
.l-portal .sf{background:var(--soft)}
.ticker{background:#111;color:#fff;font-size:14px}
.ticker .wrap{display:flex;align-items:center;gap:14px;height:40px}
.ticker-l{background:var(--primary);color:var(--primary-ink);padding:0 12px;height:100%;display:flex;align-items:center;font:800 13px var(--font-head);letter-spacing:1px;flex:none}
.ticker-v{overflow:hidden;flex:1;white-space:nowrap}
.ticker-t{display:inline-block;animation:tk 80s linear infinite}
.ticker-t:hover{animation-play-state:paused}
.ticker-t a{color:#fff;margin-right:44px}.ticker-t a::before{content:"●";color:var(--primary);margin-right:10px;font-size:10px}
@keyframes tk{to{transform:translateX(-50%)}}
.l-portal .portal3{display:grid;grid-template-columns:260px minmax(0,1fr) 300px;gap:28px;align-items:start}
.l-portal .headline-img{display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:12px}
.l-portal .headline-img img,.l-portal .headline-img .ph{width:100%;height:100%;object-fit:cover}
.l-portal .headline-t{font-size:clamp(26px,3vw,36px);font-weight:700;margin:2px 0 10px;text-transform:none}
.l-portal .headline-t a{color:var(--ink)}.l-portal .headline-t a:hover{color:var(--primary);text-decoration:none}
.l-portal .headlines{list-style:none;margin-top:14px;border-top:3px solid var(--ink)}
.l-portal .headlines li{padding:11px 0;border-bottom:1px solid var(--line);font-weight:700;font-size:17px;line-height:1.4}
.l-portal .headlines a{color:var(--ink)}.l-portal .headlines .chip{margin:0 8px 0 0;font-size:11px;vertical-align:2px}
.l-portal .card{border-radius:0}.l-portal .chip{border-radius:0}
.l-portal .rank .row-n{color:var(--primary);font-size:24px}
.l-portal .sec-t{border-top:3px solid var(--ink);padding-top:8px;text-transform:uppercase;font-size:17px}
.l-portal .sec-t span{border-left:0;padding-left:0;color:var(--primary)}
.l-portal .box,.l-portal .toc,.l-portal .notice{border-radius:0}

@media(max-width:960px){
 .l-center .hero3{grid-template-columns:1fr;grid-template-rows:auto;height:auto}
 .l-center .hero3 .ov,.l-center .hero3 .ov-big{min-height:240px;grid-row:auto}
 .l-tabs .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}.l-tabs .hd{position:relative}
 .l-tabs .menu a{padding:12px 14px}
 .l-dark .lead,.l-dark .picks{grid-template-columns:1fr}.l-dark .lead{gap:18px}
 .l-portal .portal3{grid-template-columns:1fr}.l-portal .p-center{order:-1}
 .l-center .nav{border-top:0}
}
@media(max-width:600px){.l-tabs .mosaic{grid-template-columns:1fr}.l-tabs .mosaic .ov{min-height:240px}}