/* ============================================================
   lib.css — HỆ THỐNG CSS DÙNG CHUNG cho thư viện giao diện (code thật).
   Mọi component trong library.html chỉ dùng class ở đây (không tự chế CSS).
   Palette đổi qua [data-palette] (mặc định casino tối). Mobile-first.
   v2 (2026-06): NÂNG VISUAL — gradient/shadow/glow/hover. KHÔNG đổi cấu trúc/class.
   ============================================================ */
:root{
  --bg:#0b0e16; --panel:#161b27; --panel2:#1e2536; --line:#2b3346;
  --ink:#eaeefb; --mut:#9aa5bf; --brand:#ffc83d; --brand2:#e0a92a; --on:#15110a;
  --heading:#fff; /* màu chữ heading chính (h1/h2 bài/tiêu đề box·card) — per-site override được */
  --ok:#34d399; --warn:#fbbf24; --rad:12px; --maxw:1200px;
  /* v2 tokens (mới — chỉ phục vụ visual) */
  --panel-grad:linear-gradient(160deg,#1b2233,#141925);
  --panel-grad2:linear-gradient(160deg,#222a3e,#171d2c);
  --line-soft:rgba(255,255,255,.06);
  --shadow:0 6px 18px -8px rgba(0,0,0,.55);
  --shadow-lg:0 16px 40px -14px rgba(0,0,0,.65);
  --glow:0 0 0 1px rgba(255,200,61,.35),0 8px 26px -8px rgba(255,200,61,.45);
  --brand-grad:linear-gradient(135deg,#ffd564,#e0a92a);
  --ease:.22s cubic-bezier(.4,.2,.2,1);
}
[data-palette="rikvip"]{--brand:#ff3d7f;--brand2:#c01f5b;--brand-grad:linear-gradient(135deg,#ff6fa3,#c01f5b);--glow:0 0 0 1px rgba(255,61,127,.35),0 8px 26px -8px rgba(255,61,127,.45)}
[data-palette="ocean"]{--brand:#39a0ff;--brand2:#1f6fd0;--brand-grad:linear-gradient(135deg,#6cbcff,#1f6fd0);--glow:0 0 0 1px rgba(57,160,255,.35),0 8px 26px -8px rgba(57,160,255,.45)}
[data-palette="forest"]{--brand:#46c66a;--brand2:#2c8f47;--brand-grad:linear-gradient(135deg,#6fe08e,#2c8f47);--glow:0 0 0 1px rgba(70,198,106,.35),0 8px 26px -8px rgba(70,198,106,.45)}
*{margin:0;padding:0;box-sizing:border-box}
.lib{font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-size:16px;line-height:1.6;color:var(--ink);
  background:
    radial-gradient(900px 420px at 85% -120px,rgba(255,200,61,.07),transparent 60%),
    radial-gradient(700px 500px at -10% 0,rgba(57,120,255,.06),transparent 55%),
    var(--bg)}
.lib img{max-width:100%;height:auto!important;display:block}
.lib a{color:var(--brand);text-decoration:none;transition:color var(--ease)}
.lib a:hover{color:#ffdf86}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.h1{font-size:clamp(24px,5vw,34px);line-height:1.2;margin:0 0 12px;letter-spacing:-.01em;color:var(--heading)}
.h2{font-size:clamp(20px,4vw,26px);margin:24px 0 12px;border-left:4px solid var(--brand);padding-left:12px;
  background:linear-gradient(90deg,rgba(255,200,61,.10),transparent 40%);border-radius:0 8px 8px 0;padding-top:4px;padding-bottom:4px}
.sapo{color:#cdd5ec;font-size:16px;margin:0 0 16px}
/* nút */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:700;font-size:15px;cursor:pointer;border:1.5px solid var(--line);color:var(--ink);background:rgba(255,255,255,.03);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease),background var(--ease)}
/* hover nút OUTLINE (không phải btn-main): nền gold mờ + chữ gold — KHÔNG đè nền nút gold */
.btn:not(.btn-main):hover{transform:translateY(-2px);border-color:var(--brand);background:rgba(255,200,61,.12)}
.btn-main{background:var(--brand-grad);color:var(--on);border-color:transparent;box-shadow:0 6px 18px -6px rgba(255,200,61,.5)}
/* hover nút GOLD: GIỮ nền gold (rực hơn) + chữ đậm — tương phản tốt, không bị tối */
.btn-main:hover{background:linear-gradient(135deg,#ffe27a,#e0a92a);box-shadow:0 0 0 1px rgba(255,200,61,.55),0 12px 30px -8px rgba(255,200,61,.6);transform:translateY(-2px)}
/* nút là <a> -> phải đè màu link gold của .lib a (nếu không chữ trùng màu nền) */
.lib a.btn{color:var(--ink)}
.lib a.btn-main,.lib a.btn-main:hover{color:var(--on)}
.lib a.btn:not(.btn-main):hover{color:var(--brand)}
.btn-lg{padding:15px 30px;font-size:17px}
/* HEADER — số hàng (rows-1/2/3) × căn logo (a-left/a-center/a-right) × sticky */
.lh{background:var(--panel-grad2);border-bottom:1px solid var(--line);box-shadow:0 2px 0 rgba(0,0,0,.2)}
.lh.sticky{position:sticky;top:0;z-index:90;backdrop-filter:blur(10px);background:rgba(24,30,46,.85);box-shadow:var(--shadow)}
.lh-topbar{background:rgba(0,0,0,.25);color:var(--mut);font-size:13px;text-align:center;padding:6px 16px;border-bottom:1px solid var(--line-soft)}
.lh-main{display:flex;align-items:center;gap:16px;max-width:var(--maxw);margin:0 auto;padding:11px 16px}
.lh-main>nav,.lh-main>.lh-sp{flex:1}
.lh-nav{display:flex;gap:18px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;padding:9px 16px;border-top:1px solid var(--line-soft)}
.lh .logo{font-weight:800;color:var(--brand);font-size:20px;white-space:nowrap;text-shadow:0 0 18px rgba(255,200,61,.4)}
.lh nav{display:flex;gap:18px;flex-wrap:wrap}
.lh nav a{color:var(--ink);font-weight:600;font-size:14.5px;position:relative;padding:2px 0;transition:color var(--ease)}
.lh nav a:hover{color:var(--brand)}
.lh nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--brand);transition:right var(--ease);border-radius:2px}
.lh nav a:hover::after{right:0}
.lh .cta{display:flex;gap:8px}
.lh .burger{display:none;font-size:24px;color:var(--brand);cursor:pointer}
/* căn logo */
.lh.a-right .lh-main .logo{order:3}
.lh.a-right .lh-main .cta{order:2}
.lh.a-right .lh-main>nav,.lh.a-right .lh-main>.lh-sp{order:1}
.lh.a-center .lh-main{justify-content:center}
.lh.a-center .lh-main .logo{order:1}
.lh.a-center .lh-main>nav,.lh.a-center .lh-main>.lh-sp{order:0;flex:1}
.lh.a-center .lh-main .cta{order:2;flex:1;justify-content:flex-end}
/* FOOTER */
.lf{background:linear-gradient(180deg,#1a2030,#10141e);border-top:1px solid var(--line);padding:36px 0 0;font-size:14px;color:var(--mut)}
.lf-cols{display:grid;gap:26px;max-width:var(--maxw);margin:0 auto;padding:0 16px}
.lf--1 .lf-cols{grid-template-columns:1fr;text-align:center;justify-items:center}
.lf--1 .lf-cols>div{display:flex;flex-direction:column;align-items:center}
.lf--1 .bio{margin-left:auto;margin-right:auto}
.lf--1 .lf-badges{justify-content:center}
.lf--2 .lf-cols{grid-template-columns:1fr 1fr}
.lf--3 .lf-cols{grid-template-columns:1fr 1fr 1fr}
.lf--4 .lf-cols{grid-template-columns:repeat(4,1fr)}
.lf h4{color:var(--brand);font-size:14px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.5px}
.lf a{color:var(--mut);display:block;padding:2px 0;transition:color var(--ease)}
.lf a:hover{color:var(--brand)}
.lf .bio{color:var(--mut);font-size:13.5px;margin:6px 0 10px;max-width:340px}
.lf-badges{display:flex;gap:14px;padding:6px 0;flex-wrap:wrap;align-items:center}
.lf-bottom{border-top:1px solid var(--line-soft);text-align:center;padding:14px;font-size:13px;margin-top:18px;color:var(--mut)}
.lf-bottom a{display:inline;padding:0}
/* HERO */
.hero{background:
    radial-gradient(900px 360px at 80% -60px,rgba(255,200,61,.22),transparent 60%),
    radial-gradient(600px 300px at 0% 120%,rgba(57,120,255,.12),transparent 55%),
    var(--panel-grad2);
  border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.15));pointer-events:none}
.hero-in{padding:48px 16px;max-width:var(--maxw);margin:0 auto;position:relative;z-index:1}
.hero-split{display:grid;grid-template-columns:6fr 5fr;gap:30px;align-items:center}
.trust{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--mut);margin-top:14px}
.trust span{background:rgba(255,255,255,.04);border:1px solid var(--line-soft);padding:4px 12px;border-radius:20px}
.trust span::before{content:"✓ ";color:var(--brand);font-weight:800}
/* LAYOUT body */
.lay{display:grid;gap:26px;max-width:var(--maxw);margin:0 auto;padding:30px 16px;align-items:start}
/* B2 fix#1: grid item mặc định min-width:auto → bảng/ảnh rộng trong .main ép giãn cột, sidebar bị teo (89/11 thay vì 9-3).
   min-width:0 cho phép track tôn trọng tỉ lệ fr đã khai (9fr/3fr...) ở MỌI viewport, không chỉ ≤1024 (đã có sẵn ở mobile). */
.lay>*{min-width:0}
.lay-363{grid-template-columns:3fr 6fr 3fr}
.lay-93{grid-template-columns:9fr 3fr}
.lay-mag{grid-template-columns:8fr 4fr}
.lay-v2{grid-template-columns:3fr 9fr}
.lay-center{max-width:760px}
.rail{position:sticky;top:80px;display:grid;gap:16px}
/* b7grid: layout 3-6-3 cho body big7 E (rail-main-rail), max 1200px */
.b7grid{display:grid;grid-template-columns:3fr 6fr 3fr;gap:20px;max-width:1200px;margin:0 auto;padding:24px 16px;align-items:start}
.b7grid .rail{position:sticky;align-self:start}
.box{background:var(--panel-grad);border:1px solid var(--line);border-radius:var(--rad);padding:16px;box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.box:hover{border-color:rgba(255,200,61,.3);box-shadow:var(--shadow-lg)}
.box h3{font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--heading);border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}
/* grids + cards */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.game-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
/* B2 fix#3: cat-grid — lưới N-thẻ "chuyên mục nổi bật" (thường 5 thẻ) cân đối theo breakpoint,
   tránh kiểu auto-fit/minmax co giãn tự do tạo hàng lệch (3+2 xấu hoặc 4+1 mồ côi 1 thẻ).
   Desktop: 1 hàng đều (5 cột) · Tablet ≤1024: 3 cột · Mobile ≤640: 1 cột. */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:1024px){.cat-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr}}
.card{background:var(--panel-grad);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.card:hover{transform:translateY(-4px);border-color:rgba(255,200,61,.35);box-shadow:var(--shadow-lg)}
.card img{transition:transform .4s ease}
.card:hover img{transform:scale(1.04)}
.card .pad{padding:12px}
.card .t{font-weight:700;color:var(--heading);font-size:14px}
.gcard{background:var(--panel-grad);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:center;box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.gcard:hover{transform:translateY(-4px) scale(1.02);border-color:rgba(255,200,61,.4);box-shadow:var(--glow)}
.gcard .nm{font-weight:700;font-size:13px;color:#fff;margin-top:6px}
/* marquee */
.marquee{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
.marquee>*{flex:0 0 auto;scroll-snap-align:start}
/* tabs — nhóm nội dung vào 1 khu vực (bấm nhãn hiện 1 pane). Cần JS nhỏ toggle .on. */
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:var(--panel-grad);cursor:pointer;font-weight:600;font-size:14px;transition:all var(--ease);white-space:nowrap;flex:0 0 auto}
.tabs .tab:hover{border-color:var(--brand);color:var(--brand)}
.tabs .tab.on{background:var(--brand-grad);color:var(--on);border-color:transparent;box-shadow:0 6px 16px -6px rgba(255,200,61,.5)}
.tabpane{display:none}
.tabpane.on{display:block;margin-top:14px;animation:tabfade .25s ease}
@keyframes tabfade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* accordion — băm nội dung thành nhiều mảnh, mỗi mảnh 1 thanh mở/đóng. NATIVE <details>, KHÔNG cần JS. Hợp mobile. */
.acc{display:grid;gap:10px;margin:12px 0}
.acc details{background:var(--panel-grad);border:1px solid var(--line);border-radius:10px;overflow:hidden;transition:border-color var(--ease),box-shadow var(--ease)}
.acc details[open]{border-color:rgba(255,200,61,.35);box-shadow:var(--shadow)}
.acc summary{padding:14px 46px 14px 16px;cursor:pointer;font-weight:700;color:#fff;list-style:none;position:relative}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";position:absolute;right:16px;top:12px;color:var(--brand);font-weight:800;font-size:22px;line-height:1}
.acc details[open] summary::after{content:"−"}
.acc .acc-body{padding:0 16px 14px;color:#dce3f5}
.acc .acc-body p{margin:0 0 10px}
.acc .acc-body img{border-radius:10px;margin:8px 0}
/* subcards — lưới thẻ con trong 1 section (khi không dùng tab/accordion) */
.subcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0}
.subcards .box{background:var(--panel-grad);border:1px solid var(--line);border-radius:12px;padding:16px}
.subcards .box h3{margin-top:0;color:var(--brand);font-size:16px}
/* table: top nhà cái + kèo */
.tbl{width:100%;border-collapse:collapse;background:var(--panel-grad);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow)}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-soft);text-align:left;font-size:14px}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background var(--ease)}
.tbl tbody tr:hover{background:rgba(255,200,61,.05)}
.tbl th{background:var(--panel2);color:var(--brand);font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
.tbl .rank{font-weight:800;color:var(--brand)}
.tbl .star{color:var(--brand)}
/* keo-wrap — khung bọc widget vendor bên thứ 3 (vd keobongvip bảng kèo/livescore/BXH, xem
   MARTECH_S_WIDGETS.md). Vendor table KHÔNG tự co theo viewport hẹp -> verify thật bằng CDP
   390px cho thấy trang bị đẩy tràn ngang tới ~500px. Fix: overflow-x:auto (KHÔNG hidden, hidden
   sẽ CẮT MẤT cột phải thay vì cho cuộn) + max-width:100% chặn khung phình theo con, cuộn NGANG
   xảy ra TRONG khung thay vì vỡ cả trang. KHÔNG đụng CSS vendor (đúng rule "không sửa CSS vendor"). */
.keo-wrap{border-radius:14px;box-shadow:var(--shadow-lg);overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
/* steps / faq / toc / author / related */
.steps{counter-reset:s;list-style:none;display:grid;gap:10px}
.steps li{counter-increment:s;position:relative;padding:12px 14px 12px 48px;background:var(--panel-grad);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.steps li::before{content:counter(s);position:absolute;left:12px;top:12px;width:26px;height:26px;background:var(--brand-grad);color:var(--on);border-radius:50%;display:grid;place-items:center;font-weight:800;box-shadow:0 4px 12px -4px rgba(255,200,61,.6)}
.faq details{background:var(--panel-grad);border:1px solid var(--line);border-radius:10px;margin-bottom:8px;transition:border-color var(--ease)}
.faq details[open]{border-color:rgba(255,200,61,.3)}
.faq summary{padding:13px 16px;cursor:pointer;font-weight:700;color:#fff;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--brand);font-weight:800}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 16px 14px;color:#cdd5ec}
.toc{background:var(--panel-grad);border:1px solid var(--line);border-radius:var(--rad);padding:14px;box-shadow:var(--shadow)}
.toc a{display:block;color:#cdd5ec;padding:4px 0;font-size:14px}
/* author box — 4 KIỂU (modifier trên .author, cùng markup: <img> + <div><b>+<span class=role>+<div class=bio>) */
.author{display:flex;gap:14px;background:var(--panel-grad);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--rad);padding:14px;margin:16px 0;box-shadow:var(--shadow)}
.author img{width:64px;height:64px;border-radius:50%;flex:none;object-fit:cover}
.author b{color:#fff}
.author .role{color:var(--brand);font-size:13.5px;font-weight:600}
.author .bio{color:var(--mut);font-size:14px;margin-top:3px}
/* kiểu 2 — thẻ căn giữa (cuối bài) */
.author--2{flex-direction:column;align-items:center;text-align:center;border-left:1px solid var(--line);border-radius:16px;padding:22px 20px}
.author--2 img{width:74px;height:74px;box-shadow:0 0 0 3px var(--bg),0 0 0 5px var(--brand)}
.author--2 b{font-size:17px}
.author--2 .role{margin:2px 0 8px}
.author--2 .bio{max-width:520px}
/* kiểu 3 — byline gọn (dưới H1, 1 dòng, KHÔNG bio) */
.author--3{align-items:center;gap:10px;background:none;border:0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);border-radius:0;padding:10px 0;margin:12px 0;box-shadow:none;font-size:14px;color:var(--mut)}
.author--3 img{width:38px;height:38px}
.author--3 .bio{display:none}
/* kiểu 4 — panel trang trọng (avatar VUÔNG + nhãn VỀ TÁC GIẢ) */
.author--4{flex-wrap:wrap;border-left:1px solid var(--line);border-radius:16px;padding:18px;background:var(--panel-grad2)}
.author--4::before{content:"VỀ TÁC GIẢ";flex-basis:100%;color:var(--brand);font-size:11px;font-weight:800;letter-spacing:1.5px;margin-bottom:2px}
.author--4 img{width:82px;height:82px;border-radius:14px}
.author--4 .role{display:inline-block;background:rgba(255,200,61,.14);padding:2px 10px;border-radius:6px;margin:5px 0 8px;font-size:12px}
/* reviews — đánh giá người dùng (sinh từ scripts/gen-reviews.py) */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rv{background:var(--panel-grad);border:1px solid var(--line);border-radius:var(--rad);padding:14px;box-shadow:var(--shadow)}
.rv-top{display:flex;flex-direction:column;gap:1px;margin-bottom:4px}
.rv-top b{color:#fff}
.rv-role{color:var(--brand);font-size:12.5px;font-weight:600}
.rv-stars{color:var(--brand);font-size:13px;letter-spacing:1px;margin:2px 0 6px}
.rv-text{color:var(--mut);font-size:14px;margin:0}
@media(max-width:900px){.reviews{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.reviews{grid-template-columns:1fr}}
/* comments — bình luận người dùng TĨNH (sinh từ scripts/gen-comments.py). TĨNH = chỉ hiển thị, KHÔNG form nhập thật · KHÔNG hover (Bruce chốt) · theme theo brand token */
.comments-h{font-size:20px;font-weight:800;color:var(--heading);margin:0 0 6px;display:flex;align-items:center;gap:8px}
.cmt{display:flex;gap:12px;padding:14px 0;border-top:1px solid var(--line-soft)}
.cmt:first-of-type{border-top:0}
.cmt-av{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:16px;background:linear-gradient(135deg,var(--brand),var(--brand2))}
.cmt-body{flex:1;min-width:0}
.cmt-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.cmt-name{color:#fff;font-weight:700;font-size:14.5px}
.cmt-time{color:var(--mut);font-size:12.5px}
.cmt-text{color:var(--mut);font-size:14px;margin:2px 0 6px;line-height:1.55}
.cmt-act{display:flex;gap:16px;font-size:12.5px;color:var(--mut);font-weight:600}
/* reply lồng — 1 người khác vào confirm */
.cmt-reply{border-top:0;margin-top:10px;padding:0 0 0 14px;border-left:2px solid var(--line)}
.cmt-reply .cmt-av{width:34px;height:34px;font-size:14px}
/* admin — tên = domain chính thức, badge Quản trị viên.
   B2 fix#5: thụt lề giống .cmt-reply (padding-left + border-left màu brand) để đọc RÕ đây là admin
   đang TRẢ LỜI comment phía trên, không phải 1 comment gốc ngang hàng. */
.cmt--admin{padding-left:16px;border-left:2px solid var(--brand)}
.cmt--admin .cmt-av{background:linear-gradient(135deg,var(--brand2),var(--brand))}
.cmt-badge{display:inline-block;background:var(--brand);color:#12151f;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:5px;letter-spacing:.3px}
@media(max-width:600px){.cmt-av{width:34px;height:34px;font-size:14px}}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.breadcrumb{font-size:13px;color:var(--mut);margin-bottom:8px}
.read p{margin:0 0 12px;color:#dce3f5}
.read h2{font-size:22px;margin:22px 0 10px;color:var(--heading)}
.read h3{font-size:18px;margin:16px 0 8px;color:var(--brand)}
.read img{border-radius:var(--rad);box-shadow:var(--shadow)}
.cta-block{background:
    radial-gradient(400px 120px at 50% -20px,rgba(255,200,61,.15),transparent),var(--panel-grad2);
  border:1px solid rgba(255,200,61,.25);border-radius:var(--rad);padding:22px 18px;text-align:center;margin:18px 0;box-shadow:var(--shadow)}
.archive-list{display:grid;gap:12px}
/* archive — kiểu liệt kê bài */
.arc-masonry{column-count:3;column-gap:16px}
.arc-masonry>.card{break-inside:avoid;margin-bottom:16px;display:inline-block;width:100%}
.arc-rows{display:grid;gap:14px}
.arc-row{display:grid;grid-template-columns:220px 1fr;background:var(--panel-grad);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.arc-row:hover{transform:translateY(-3px);border-color:rgba(255,200,61,.3);box-shadow:var(--shadow-lg)}
.arc-row .thumb{aspect-ratio:16/10;background:var(--panel2)}
.arc-row .pad{padding:12px 16px}
@media(max-width:900px){.arc-masonry{column-count:2}}
@media(max-width:640px){.arc-masonry{column-count:1}.arc-row{grid-template-columns:1fr}}
.pager{display:flex;gap:8px;justify-content:center;margin:18px 0}
.pager a{padding:11px 14px;min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:8px;color:var(--ink);transition:all var(--ease)}
.pager a:hover{border-color:var(--brand);color:var(--brand);background:rgba(255,200,61,.06)}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.filter .chip{padding:6px 13px;min-height:40px;display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:20px;font-size:13px;cursor:pointer;background:var(--panel-grad);transition:all var(--ease)}
.filter .chip:hover{border-color:var(--brand);color:var(--brand)}
/* sticky mobile + drawer */
.sticky-cta{display:none}
.drawer{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;background:var(--panel);overflow-y:auto;box-shadow:4px 0 24px rgba(0,0,0,.5)}
/* nút đóng drawer (span #drawer-close, ký tự ✕/× do site tự render) — ép tap target ≥44px, tránh còn 18×38px (dưới ngưỡng chạm Apple HIG) */
#drawer-close{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-sizing:border-box}
@media(max-width:1024px){.lay-363,.lay-93,.lay-mag,.lay-v2{grid-template-columns:1fr!important}.lay{width:100%;max-width:100%!important}.lay>*{min-width:0;width:100%;max-width:100%;overflow-x:hidden}.rail{position:static}.hero-split{grid-template-columns:1fr}.b7grid{grid-template-columns:1fr}.b7grid .rail{position:static}}
@media(max-width:900px){.game-grid{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}.subcards{grid-template-columns:repeat(2,1fr)}.related-grid{grid-template-columns:1fr}.lf--4 .lf-cols{grid-template-columns:repeat(2,1fr)}}
/* B2 fix#6: lf--3 (3 cột lẻ) → 2 cột ở ≤900 luôn để lại 1 cột mồ côi rớt hàng dưới, so le xấu (báo cáo Bruce
   tablet 641-1024). Gộp về 1 cột NGAY tại ≤1024 (bao trọn dải tablet) thay vì 2 cột — hết mồ côi, gọn hơn. */
@media(max-width:1024px){
  .lf--3 .lf-cols{grid-template-columns:1fr;text-align:center;justify-items:center}
  .lf--3 .lf-cols>div{display:flex;flex-direction:column;align-items:center}
  .lf--3 .bio{margin-left:auto;margin-right:auto}
  .lf--3 .lf-badges{justify-content:center}
}
@media(max-width:640px){
  .lh nav,.lh .cta{display:none}
  .lh .burger{display:block;min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
  /* mobile: luôn logo TRÁI · ☰ PHẢI (override a-center/a-right để khỏi đẩy logo lệch) */
  .lh .lh-main,.lh.a-center .lh-main,.lh.a-right .lh-main{justify-content:space-between}
  .lh .lh-main>.lh-sp{display:none}
  .lh .lh-main .logo,.lh.a-center .lh-main .logo,.lh.a-right .lh-main .logo{order:0;flex:0 0 auto}
  .lh .lh-main .burger{order:9}
  /* logo image: giảm size ở mobile để header gọn, tap target burger ≥44px */
  .lh .lh-main .logo img{max-height:40px;width:auto}
  .game-grid{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}   /* archiveB (card 3 cột desktop) về 1 cột — 2 cột ở 390px quá chật để đọc title+sapo card (đã verify: hitclub-vin từng phải vá riêng, nay đưa fix về NGUỒN) */
  .grid-2{grid-template-columns:1fr}   /* archiveA (danh sách bài) về 1 cột — 2 cột ở 390px quá chật để đọc tiêu đề */
  .subcards{grid-template-columns:1fr}   /* mảnh nội dung về 1 cột — hết chật/tràn trên mobile */
  .lf--2 .lf-cols,.lf--3 .lf-cols,.lf--4 .lf-cols{grid-template-columns:1fr;text-align:center;justify-items:center}
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;gap:8px;padding:9px 12px;background:rgb(20,24,34);border-top:1px solid var(--line);box-shadow:0 -8px 24px -10px rgba(0,0,0,.7)}
  /* nền ĐẶC 100% (không rgba mờ) — nếu để hở, nút phụ (background trong suốt rgba(255,255,255,.03)) cộng dồn với độ mờ của thanh sẽ làm chữ nội dung cuộn phía dưới "rỉ" qua nút, đọc lem nhem (đã verify bằng screenshot ẩn/hiện thanh) */
  .sticky-cta .btn{flex:1;justify-content:center;padding:12px;min-height:44px;font-size:14px;background:var(--panel,#1a1f2b)}
  .sticky-cta .btn-main{background:var(--brand-grad)}
  /* overflow-x:CLIP (không phải hidden) — hidden biến html/body thành scroll container và PHÁ position:sticky của header/CTA con cháu (đã gặp lỗi, xem feedback_mobile_first). clip vẫn chặn tràn ngang nhưng không tạo scroll container mới nên sticky vẫn dính. */
  body{padding-bottom:68px;overflow-x:clip}
  html{overflow-x:clip;scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  /* chặn text dài tràn viewport ở mobile */
  .h1,.h2,.read h2,.read h3,p,li,td,th{word-break:break-word;overflow-wrap:break-word}
  /* ảnh không tràn container */
  img{max-width:100%!important;height:auto}
  /* section overflow-x clip */
  section{overflow-x:clip}
  /* rail (TOC sidebar) ẩn trên mobile — không hiện dưới bài làm trang dài thừa */
  .rail{display:none}
  /* cta-block nút full width trên mobile */
  .cta-block .btn{display:flex;width:100%;justify-content:center;box-sizing:border-box}
  /* footer links: tăng padding để tap target ≥ 40px chiều cao */
  .lf a{padding:9px 0}
  /* disclaimer links cuối footer: ép tap target ≥44px (override .lf-bottom a base) */
  .lf-bottom a{min-height:44px;display:inline-flex;align-items:center;padding:2px 4px}
  /* breadcrumb không cần min-height (nav pattern, không primary action) */
}