/* ============================================================
   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;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)}
/* tbl-wrap — bọc bảng nhiều cột (vd bảng Word import từ docx/outline) để cuộn NGANG trong khung,
   không đẩy tràn viewport (tràn ngang toàn trang). Dùng khi <table class="tbl"> có >=3 cột hẹp
   khó co lại ở 390px. min-width giữ layout bảng đọc được, overflow-x:auto cho khung cha co 100%. */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px}
.tbl-wrap .tbl{min-width:480px}
/* 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 đề */
  .grid-4{grid-template-columns:1fr}   /* archive/related 4 cột desktop: @900px đã rớt về 2 cột nhưng ở 390px vẫn 2 cột (không có rule riêng) → thumbnail+title bị bóp cực chật, đọc khó. Về 1 cột giống grid-2/grid-3 (đã verify: bomwin957 review-games archive) */
  .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}
  /* B2 fix: .tbl-wrap (bảng nhiều cột, .tbl bên trong min-width:480px) LUÔN tràn viewport ≤640px
     -> cuộn ngang trong khung là ĐÚNG THIẾT KẾ (tránh vỡ layout) nhưng KHÔNG có gợi ý nhìn thấy được,
     nên cột cuối bị cắt trông như bảng hỏng (verify bằng screenshot 390px, cột "Cách xử lý" mất hẳn).
     Thêm dòng gợi ý cuộn phía trên mỗi bảng rộng — nguồn lib.css vì .tbl-wrap dùng chung mọi site. */
  .tbl-wrap{position:relative}
  .tbl-wrap::before{content:"⟷ Vuốt ngang để xem đủ bảng";display:block;font-size:11.5px;
    color:var(--mut);text-align:right;margin-bottom:6px}
  /* 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) */
}

/* ============================================================
   mobile.css — THƯ VIỆN GIAO DIỆN MOBILE (code thật).
   Bổ sung cho lib.css — KHÔNG ghi đè lib.css.
   Mọi class namespace .m-* . Dùng lại biến màu của lib.css:
   var(--bg/--panel/--panel2/--line/--ink/--mut/--brand/--brand2/--on/--rad).
   Mobile-first, dark casino, tap target >=40px, không tràn ngang.
   JS vanilla (drawer/sheet) toggle class — xem mobile.html.
   ============================================================ */

/* khung điện thoại để xem dáng mobile (chỉ là vỏ preview, không phải component) */
.m-phone{max-width:390px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:22px;overflow:hidden;position:relative;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.m-phone .m-screen{position:relative;height:auto}

/* ---------- mHeader: logo trái + ☰ phải, sticky ---------- */
.m-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:10px 14px;background:var(--panel2);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.m-header .m-logo{font-weight:800;color:var(--brand);font-size:19px;white-space:nowrap}
.m-header .m-burger{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);color:var(--brand);font-size:22px;cursor:pointer}

/* ---------- mDrawer: menu trượt từ phải ---------- */
.m-drawer-mask{position:absolute;inset:0;z-index:60;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease}
.m-drawer-mask.open{opacity:1;visibility:visible}
.m-drawer{position:absolute;top:0;right:0;bottom:0;z-index:61;width:78%;max-width:300px;background:var(--panel);
  border-left:1px solid var(--line);transform:translateX(100%);transition:transform .25s ease;
  display:flex;flex-direction:column}
.m-drawer.open{transform:translateX(0)}
.m-drawer .m-drawer-top{display:flex;align-items:center;justify-content:space-between;padding:14px;
  border-bottom:1px solid var(--line)}
.m-drawer .m-drawer-top .m-logo{font-weight:800;color:var(--brand);font-size:18px}
.m-drawer .m-close{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:10px;background:var(--panel2);color:var(--ink);font-size:20px;cursor:pointer}
.m-drawer nav{display:flex;flex-direction:column;padding:8px 0;overflow-y:auto}
.m-drawer nav a{color:var(--ink);font-weight:600;font-size:15px;padding:14px 18px;border-bottom:1px solid var(--line)}
.m-drawer nav a:active{background:var(--panel2)}
.m-drawer .m-drawer-cta{padding:14px}
.m-drawer .m-drawer-cta .btn{width:100%;justify-content:center}

/* ---------- mBottomNav: nav dính đáy kiểu app ---------- */
.m-bnav{display:flex;background:var(--panel2);border-top:1px solid var(--line)}
.m-bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:54px;padding:7px 2px;color:var(--mut);font-size:11px;font-weight:600;text-align:center}
.m-bnav a .ic{font-size:20px;line-height:1}
.m-bnav a.on{color:var(--brand)}
.m-bnav a:active{background:var(--panel)}

/* ---------- mStickyCTA: 2 nút lớn dính đáy ---------- */
.m-cta{display:flex;gap:8px;padding:10px 12px;background:rgba(20,24,34,.97);border-top:1px solid var(--line)}
.m-cta .btn{flex:1;justify-content:center;min-height:48px}

/* ---------- mGameScroll: dải game cuộn ngang (scroll-snap) ---------- */
.m-gscroll{display:flex;gap:10px;overflow-x:auto;padding:4px 14px 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.m-gscroll::-webkit-scrollbar{height:6px}
.m-gscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
.m-gcard{flex:0 0 auto;width:108px;scroll-snap-align:start;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;overflow:hidden}
.m-gcard .thumb{aspect-ratio:1;background:var(--panel2)}
.m-gcard .nm{padding:7px 8px;font-size:12px;font-weight:700;color:#fff;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- mCardList: danh sách bài dọc (ảnh trái + chữ phải) ---------- */
.m-list{display:flex;flex-direction:column;gap:10px;padding:0 14px}
.m-item{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);
  padding:10px;align-items:center}
.m-item .thumb{flex:0 0 92px;width:92px;aspect-ratio:4/3;background:var(--panel2);border-radius:8px;overflow:hidden}
.m-item .thumb img{width:100%;height:100%;object-fit:cover}
.m-item .body{min-width:0}
.m-item .t{font-weight:700;color:#fff;font-size:14px;line-height:1.35;margin-bottom:4px}
.m-item .d{color:var(--mut);font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- mAccordion: FAQ mở/đóng (dùng <details>) ---------- */
.m-acc{display:flex;flex-direction:column;gap:8px;padding:0 14px}
.m-acc details{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.m-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 16px;font-weight:700;color:#fff;font-size:14px;min-height:48px}
.m-acc summary::-webkit-details-marker{display:none}
.m-acc summary::after{content:"+";color:var(--brand);font-size:22px;font-weight:800;line-height:1}
.m-acc details[open] summary::after{content:"\2212"} /* − */
.m-acc .a{padding:0 16px 14px;color:#cdd5ec;font-size:13.5px;line-height:1.55}

/* ---------- mFilterSheet: bottom-sheet lọc (trượt từ đáy) ---------- */
.m-sheet-mask{position:absolute;inset:0;z-index:70;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;
  transition:opacity .25s ease,visibility .25s ease}
.m-sheet-mask.open{opacity:1;visibility:visible}
.m-sheet{position:absolute;left:0;right:0;bottom:0;z-index:71;background:var(--panel);
  border-top:1px solid var(--line);border-radius:18px 18px 0 0;transform:translateY(100%);
  transition:transform .25s ease;max-height:80%;display:flex;flex-direction:column}
.m-sheet.open{transform:translateY(0)}
.m-sheet .m-sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line);margin:10px auto 4px}
.m-sheet .m-sheet-top{display:flex;align-items:center;justify-content:space-between;padding:6px 16px 12px;
  border-bottom:1px solid var(--line)}
.m-sheet .m-sheet-top b{color:#fff;font-size:15px}
.m-sheet .m-sheet-top .m-close{background:none;border:0;color:var(--mut);font-size:20px;cursor:pointer;
  width:40px;height:40px}
.m-sheet .m-sheet-body{padding:14px 16px;overflow-y:auto}
.m-sheet .m-chips{display:flex;flex-wrap:wrap;gap:8px}
.m-sheet .m-chip{padding:9px 15px;border:1px solid var(--line);border-radius:20px;font-size:13px;
  background:var(--panel2);color:var(--ink);cursor:pointer;min-height:40px;display:inline-flex;align-items:center}
.m-sheet .m-chip.on{background:var(--brand);color:var(--on);border-color:var(--brand)}
.m-sheet .m-sheet-foot{padding:12px 16px;border-top:1px solid var(--line)}
.m-sheet .m-sheet-foot .btn{width:100%;justify-content:center}
/* nút mở sheet */
.m-filter-btn{display:inline-flex;align-items:center;gap:8px;margin:0 14px;padding:10px 16px;min-height:44px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font-weight:600;
  font-size:14px;cursor:pointer}

/* ---------- mTableCard: bảng top nhà cái / kèo → thẻ dọc ---------- */
.m-tcards{display:flex;flex-direction:column;gap:12px;padding:0 14px}
.m-tcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:12px 14px}
.m-tcard .head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.m-tcard .rank{flex:none;width:30px;height:30px;border-radius:8px;background:var(--brand);color:var(--on);
  font-weight:800;display:grid;place-items:center;font-size:14px}
.m-tcard .nm{font-weight:800;color:#fff;font-size:15px}
.m-tcard .star{color:var(--brand);font-size:14px;margin-left:auto}
.m-tcard .rows{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.m-tcard .row{display:flex;justify-content:space-between;gap:12px;font-size:13px;
  border-bottom:1px dashed var(--line);padding-bottom:6px}
.m-tcard .row:last-child{border-bottom:0;padding-bottom:0}
.m-tcard .row .k{color:var(--mut)}
.m-tcard .row .v{color:var(--ink);font-weight:600;text-align:right}
.m-tcard .btn{width:100%;justify-content:center;min-height:46px}

/* style-bancavoto.css — override brand cho bancadoithuong.voto (Martech G, cổng bắn cá)
   Palette Bruce chốt TRỰC TIẾP trong prompt (2026-09-24, KHÔNG trích PIL):
     --brand #0684f7 (xanh) · --brand2 #fe7021 (cam) · --bg #040f3d (navy đại dương)
     --heading #772716 GIỮ trong :root cho đủ 4 biến R-45 nhưng KHÔNG dùng hiển thị chữ thật.
   File này CHỈ override biến/rule cụ thể — KHÔNG sửa design/library/lib.css (nguồn dùng chung).

   Contrast đo (WCAG 2.1, công thức luminance chuẩn):
     --heading #772716 / --bg #040f3d          =  1.83:1  (FAIL mọi cỡ chữ) -> KHÔNG dùng để hiển thị
     --heading-fg #ffb37a / --bg #040f3d        = 10.50:1  (AAA) -> DÙNG cho .h1/.read h2/.box h3/
                                                              .card .t/.comments-h (override bên dưới)
     --brand #0684f7 / --bg #040f3d (chữ thường)=  4.97:1  (AA) -> đủ cho link/text nhỏ trang trí
     trắng / --brand #0684f7 (nền nút xanh đặc) =  3.72:1  (CHỈ đạt chữ ĐẬM ≥18px — KHÔNG an toàn
                                                              cho nút CTA cỡ thường/mobile)
     --on #040f3d / --brand2 #fe7021 (nền nút cam)= 7.08:1 (AAA) -> CHỌN PHƯƠNG ÁN NÀY cho .btn-main
   -> Quyết định: .btn-main đổi nền sang CAM (--brand2) + chữ TỐI (--on:#040f3d) thay vì xanh+trắng.
      --brand (xanh) vẫn giữ làm màu link/viền/accent trang trí (đạt 4.97:1 cho chữ thường). */

:root{
  --bg:#040f3d;
  --panel:#0a1c5e;
  --panel2:#0f2470;
  --line:#1c3a86;
  --line-soft:rgba(255,255,255,.08);
  --ink:#eef2fb;
  --mut:#a9bbe8;
  --brand:#0684f7;        /* xanh — link/viền/accent, 4.97:1 trên --bg (AA, chữ thường) */
  --brand2:#fe7021;        /* cam — nền nút chính + badge/gradient trang trí */
  --on:#040f3d;             /* chữ trên nút cam (btn-main) = navy đậm, 7.08:1 (AAA) */
  --heading:#772716;       /* GIỮ NGUYÊN theo Bruce chốt (R-45 đủ biến) — KHÔNG dùng hiển thị chữ */
  --heading-fg:#ffb37a;    /* DÙNG THẬT cho heading hiển thị — 10.50:1 (AAA) trên --bg */
  --panel-grad:linear-gradient(160deg,#0a1c5e,#061142);
  --panel-grad2:linear-gradient(160deg,#0f2470,#040f3d);
  --brand-grad:linear-gradient(135deg,#ff9a52,#fe7021);
  --glow:0 0 0 1px rgba(254,112,33,.35),0 8px 26px -8px rgba(254,112,33,.45);
}

/* nền trang: glow xanh/cam thay vì gold mặc định lib.css (chống "đảo tối") */
.lib{background:
    radial-gradient(900px 420px at 85% -120px, rgba(6,132,247,.12), transparent 60%),
    radial-gradient(700px 500px at -10% 0, rgba(254,112,33,.10), transparent 55%),
    var(--bg)}
.hero{background:
    radial-gradient(900px 360px at 80% -60px, rgba(254,112,33,.20), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(6,132,247,.18), transparent 55%),
    var(--panel-grad2)}

/* ============================================================
   R-45: HEADING dùng --heading-fg (đọc được) thay --heading (fail contrast) — override đích
   danh 5 selector lib.css đang dùng color:var(--heading) trực tiếp.
   ============================================================ */
.h1,.read h2,.box h3,.card .t,.comments-h{color:var(--heading-fg)}

/* hover nút CAM: GIỮ nền cam (rực hơn) — lib.css .btn-main:hover hardcode gradient gold, đè lại
   để đồng bộ theme cam (KHÔNG phải bug tương phản, chỉ đồng bộ màu thương hiệu) */
.btn-main:hover{background:linear-gradient(135deg,#ffb37a,#fe7021);
  box-shadow:0 0 0 1px rgba(254,112,33,.55),0 12px 30px -8px rgba(254,112,33,.6)}

/* nút CTA phụ (.bc-cta2) — outline xanh trên nền tối, đủ tương phản viền/chữ */
.btn.bc-cta2{background:rgba(6,132,247,.12);border-color:var(--brand);color:var(--ink)}
.btn.bc-cta2:hover{background:rgba(6,132,247,.22);border-color:var(--brand);color:#fff;transform:translateY(-2px)}

/* footer bio: link trong đoạn mô tả hiển thị INLINE (bẫy lib.css mặc định block/padding) */
.lf .bio a{display:inline;padding:0}

/* touch target mobile ≥40px cho link liên hệ (tel/mailto) + drawer nav — B2 tinh chỉnh thêm */
@media(max-width:640px){
  .lf .bio a,.drawer nav a{min-height:40px;display:inline-flex;align-items:center}
}

/* ============================================================
   DRAWER (mobile ☰ menu, dùng CHUNG cho cả desktop vì header này KHÔNG hiện nav ngang) —
   lib.css có sẵn .drawer{display:none;position:fixed;inset:0;...} và #drawer-close (tap target
   44px) NHƯNG KHÔNG có .drawer.open (verify grep 2026-09-24: design/library/lib.css + mobile.css
   = 0 dòng ".drawer.open"/".drawer-top"/".drawer nav a"/".drawer-cta" — đã ghi trong memory
   reference_libcss_drawer_open_missing). B1 PHẢI tự cấp toàn bộ CSS mở/đóng + layout nội dung ở
   ĐÂY (site override), KHÔNG sửa lib.css nguồn (ảnh hưởng site khác).
   ============================================================ */
.drawer.open{display:block}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line)}
.drawer-top .logo{font-weight:800;color:var(--heading-fg);font-size:18px}
.drawer nav{display:flex;flex-direction:column;padding:8px 0}
.drawer nav a{color:var(--ink);font-weight:600;font-size:15.5px;padding:13px 18px;min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line-soft)}
.drawer nav a:active{background:var(--panel2)}
.drawer-cta{padding:16px;display:flex;flex-direction:column;gap:10px}
.drawer-cta.cta-pair{flex-direction:column}
.drawer-cta .btn{width:100%;justify-content:center;min-height:44px}

/* ảnh nội dung bài — figure/figcaption CĂN GIỮA (verify grep: lib.css/mobile.css KHÔNG có sẵn
   .img-cap -> tự cấp ở site override, cùng kỹ thuật site mẫu cùng ngành, KHÔNG sửa lib.css nguồn). */
.lib figure.img-cap{margin:20px auto;text-align:center}
.lib figure.img-cap img{display:block;margin-inline:auto;max-width:min(100%,800px)}
.lib figure.img-cap figcaption{margin:8px auto 0;max-width:800px;font-size:13.5px;line-height:1.5;color:var(--mut);text-align:center}

/* ============================================================
   HEADER "h1-center-sticky" ĐẶC BIỆT (Bruce chốt 2026-09-24): logo GIỮA to, KHÔNG bao giờ hiện
   nav ngang (menu CHỈ trong drawer) — cả desktop cũng dùng ☰. 2 nút CTA hiện desktop, burger
   LUÔN hiện mọi độ rộng.
   ============================================================ */
/* burger: LUÔN hiện mọi breakpoint (đè rule mặc định lib.css .lh .burger{display:none} desktop) —
   KHÔNG bọc media, vì đây là hành vi giống nhau ở MỌI độ rộng, không phải riêng desktop. */
.bc-head .burger{display:flex!important;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;font-size:26px;color:var(--heading-fg);cursor:pointer}
.bc-head .logo img{height:140px!important;width:auto;display:block}

/* Layout desktop CHỈ áp ≥641px — tránh đè rule mobile lib.css (bug đã gặp: rule không-media đè
   media query khiến mobile kẹt sai vị trí — xem memory feedback_build_visual_spec_gaps /
   bài học gem88-vin). Mobile 100% do B2 (mobile-specialist) tinh chỉnh sau. */
/* Kỹ thuật: .lh-main chỉ còn 1 flex-item thật sự trong luồng (logo) -> justify-content:center
   căn logo CHÍNH GIỮA tuyệt đối; .lh-side (cta+burger) tách khỏi luồng bằng position:absolute
   ghim phải, không phá canh giữa của logo. (Đã thử grid-template-columns trước — Chrome đẩy 2
   item auto-row vào 2 HÀNG khác nhau dù cột khác nhau, verify bằng CDP getBoundingClientRect —
   ĐỔI sang kỹ thuật flex+absolute này cho chắc, tránh bug auto-placement khó đoán.) */
@media(min-width:641px){
  .bc-head .lh-main{position:static;display:flex;align-items:center;justify-content:center;padding:14px 20px}
  .bc-head .lh-side{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:16px}
  .bc-head .cta{display:flex;gap:10px}
}

/* Mobile ≤640: logo VẪN GIỮA (đúng spec h1-center-sticky riêng site này) — lib.css có rule CHUNG
   ép mọi header về "logo trái · ☰ phải" ở ≤640 (.lh .lh-main{justify-content:space-between} +
   .logo{order:0;flex:0 0 auto}, xem lib.css dòng ~296-300) — ĐÚNG cho site khác nhưng SAI cho
   site này. Dùng lại kỹ thuật flex+absolute như desktop (logo center trong luồng, burger tách
   khỏi luồng bằng absolute) — !important trên justify-content/order vì phải thắng chắc rule
   chung cùng độ đặc thù đang nằm trong cùng 1 file (không dựa vào thứ tự nạp cho chắc ăn).
   Logo giảm còn 68px (so 100px desktop) — dùng max-height (không phải height) để không đụng
   inline style="height:100px" trên <img> (inline luôn thắng stylesheet nếu cùng thuộc tính). */
@media(max-width:640px){
  .bc-head .lh-main{justify-content:center!important;position:relative;padding:10px 54px}
  .bc-head .lh-main .logo{order:0!important;flex:0 0 auto!important}
  .bc-head .lh-side{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center}
  .bc-head .logo img{max-height:68px!important}
  .bc-head .burger{order:9!important}
}

/* Header + footer + drawer = tông nền panel đậm hơn nền trang (Bruce chốt cùng quy ước site
   trước — tránh header/footer chìm lẫn vào --bg) */
.lh,.lh.sticky{background:#061243;box-shadow:0 2px 14px rgba(0,0,0,.55)}
.lf{background:#061243;border-top:1px solid var(--line)}
.drawer{background:#061243}

/* H1 trang chủ căn giữa (đồng bộ header logo giữa) — chỉ trang chủ, H1 bài viết vẫn căn trái */
.bc-h1-center{text-align:center}
.lib .btn.bc-hero-cta{display:flex;width:fit-content;margin:18px auto 0}

/* ============================================================
   TOPLIST (Section 1 trang chủ, id=toplist) — G-H1 (tech-seo-builder) — lưới 5×2 thẻ bo tròn
   lớn + viền gradient cam/xanh nổi bật, badge hạng góc trái — kiểu riêng site này (chống trùng
   footprint với site cùng ngành G khác).
   ============================================================ */
.bc-tl-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:16px}
.bc-tl-card{display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;
  padding:18px 10px 14px;border-radius:16px;background:var(--panel-grad);
  border:1px solid var(--line);text-align:center;text-decoration:none;transition:transform .15s,box-shadow .15s}
.bc-tl-card:hover{transform:translateY(-3px);box-shadow:0 10px 24px -8px rgba(254,112,33,.45);border-color:var(--brand2)}
.bc-tl-card.bc-tl-top{border-color:var(--brand2);box-shadow:0 0 0 1px rgba(254,112,33,.35)}
.bc-tl-rank{position:absolute;top:8px;left:10px;font-size:11px;font-weight:800;color:var(--on);
  background:var(--brand2);border-radius:20px;padding:2px 8px;line-height:1.4}
.bc-tl-card img{width:56px;height:56px;object-fit:contain;border-radius:12px;margin-top:6px}
.bc-tl-nm{color:var(--heading-fg);font-size:14.5px;font-weight:800}
.bc-tl-go{font-size:12.5px;color:var(--brand);font-weight:600}
@media(max-width:900px){.bc-tl-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.bc-tl-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .bc-tl-card{padding:14px 8px 10px}.bc-tl-card img{width:46px;height:46px}}

/* ============================================================
   CATFISH (banner đáy 4 gif) — lib.css/mobile.css KHÔNG có sẵn CSS cho .bc-catfish/.bc-cf-* —
   nền TRONG SUỐT (không lớp đen) + drop-shadow từng banner, pointer-events chỉ ở item/nút để
   không chặn click vùng trống. Mobile: đặt TRÊN sticky-cta (không che 2 nút CTA đáy).
   ============================================================ */
.bc-catfish{position:fixed;left:0;right:0;bottom:8px;z-index:190;pointer-events:none;display:flex;justify-content:center}
.bc-cf-grid{position:relative;display:grid;grid-template-columns:repeat(2,430px);gap:6px}
.bc-cf-item,.bc-cf-x{pointer-events:auto}
.bc-cf-item{display:block;line-height:0}
.bc-cf-item img{width:100%!important;height:auto!important;display:block;border-radius:6px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.bc-cf-x{position:absolute;right:calc(50% - 440px);top:-30px;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(4,15,61,.92);color:#fff;font-size:14px;
  line-height:1;cursor:pointer}
body.cf-closed .bc-catfish{display:none}
@media(max-width:900px){.bc-cf-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 16px)}.bc-cf-x{right:10px}}
@media(max-width:640px){
  /* sticky-cta (lib.css) cao ~62-76px ở mobile -> đặt catfish TRÊN nó, không đè 2 nút CTA */
  .bc-catfish{bottom:76px}
  .bc-cf-grid{grid-template-columns:1fr;gap:4px;width:calc(100% - 12px)}
  .bc-cf-x{right:8px}
  .lf{padding-bottom:150px}
}

/* Bruce 2026-09-24: header bỏ 2 nút CTA, logo giữa, ☰ dời hẳn mép phải */
.bc-head{position:relative}
.bc-head .lh-main{justify-content:center;position:static}
.bc-head .burger{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex!important;z-index:5}
.bc-head .lh-side,.bc-head .cta{display:none!important}

/* Logo to hơn + ☰ luôn ghim góc phải (Bruce 2026-09-24 lần 2) */
.lib .bc-head .logo img{max-height:140px!important;height:140px!important;width:auto}
@media(max-width:640px){.lib .bc-head .logo img{max-height:96px!important;height:96px!important}}