/* ============================================================
   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-nohushow.css — override brand cho nohu.show (Martech G, top cổng nổ hũ)
   Palette Bruce chốt (trích PIL từ logo-nohu-show.webp):
     --brand2 #fb381d (cam đỏ, decorative) · --bg #1d020e (mận đen) · --brand #fec40a (vàng)
     --heading #fec40a (= --brand, đã đo contrast) · #600001 (đỏ mận, CHỈ nền nút/badge/viền).
   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, xem báo cáo B1):
     --heading #fec40a / --bg #1d020e        = 12.29:1  (AAA)
     --heading #fec40a / nền nút #600001     =  8.76:1  (AAA)
     --brand2 #fb381d  / --bg #1d020e        =  5.33:1  (AA, chữ thường)
     trắng      / nền nút #600001            = 14.02:1  (AAA)
     trắng      / brand2 #fb381d (nền đặc)   =  3.69:1  (CHỈ đạt chữ lớn/đậm ≥18px — KHÔNG dùng chữ nhỏ)
   -> --brand đã đủ tương phản để giữ NGUYÊN cách lib.css dùng var(--brand) làm màu chữ/link/heading
      (khác các site trước phải đổi hết sang --heading) — không cần override R-45 diện rộng ở đây. */

:root{
  --bg:#1d020e;
  --panel:#2a0716;
  --panel2:#34081b;
  --line:#4a0f22;
  --line-soft:rgba(255,255,255,.08);
  --ink:#f5ece9;
  --mut:#c9a8ab;
  --brand:#fec40a;        /* vàng — text/link/heading, contrast 12.29:1 trên --bg (AAA) */
  --brand2:#fb381d;       /* cam đỏ — border/badge/gradient trang trí, KHÔNG dùng chữ nhỏ đặc */
  --on:#1d020e;           /* chữ trên nút vàng (btn-main) = mận đen, 12.29:1 (AAA) */
  --heading:#fec40a;      /* = --brand (đã đủ tương phản, không cần tách riêng) */
  --panel-grad:linear-gradient(160deg,#2a0716,#160108);
  --panel-grad2:linear-gradient(160deg,#4a0f22,#1d020e);
  --brand-grad:linear-gradient(135deg,#ffdc4d,#fec40a);
  --glow:0 0 0 1px rgba(254,196,10,.35),0 8px 26px -8px rgba(254,196,10,.45);
}

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

/* nút CTA phụ (.ns-cta2) — dùng nền #600001 đỏ mận theo chỉ định Bruce (CHỈ nền nút/badge/viền) */
.btn.ns-cta2{background:#600001;border-color:transparent;color:#fff}
.btn.ns-cta2:hover{background:#7a0002;border-color:transparent;color:#fff;transform:translateY(-2px)}

/* logo to hơn (header 64px desktop / 48px mobile, footer 80px) — lib.css có rule trùng tên đè */
.lh .logo img{max-height:64px!important;width:auto}
@media(max-width:640px){.lh .logo img{max-height:48px!important}}
.lf .logo img{max-height:80px!important;width:auto}

/* 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) + menu — B2 tinh chỉnh responsive thêm */
@media(max-width:640px){
  .lf .bio a,.lh-nav a,.drawer nav a{min-height:40px;display:inline-flex;align-items:center}
}

/* trang chủ Section [12] full-width — không rail mục lục bên phải */
.lay-center.home-full{max-width:1080px}

/* ============================================================
   CATFISH (banner đáy 4 gif) — lib.css KHÔNG có sẵn CSS cho .catfish/.cf-*
   (đã verify grep = 0 dòng trong lib.css/mobile.css) -> B1 PHẢI tự cấp, nếu không
   catfish tràn full-width dưới footer thay vì nổi cố định đáy màn hình (đã bắt lỗi
   qua screenshot smoke-test). Cấu trúc/số đo giống 2 site cùng họ Martech G. */
.catfish{position:fixed;left:0;right:0;bottom:8px;z-index:190;pointer-events:none;display:flex;justify-content:center}
.cf-grid{position:relative;display:grid;grid-template-columns:repeat(2,430px);gap:6px}
.lib .cf-item,.cf-x{pointer-events:auto}
.lib .cf-item{display:block;line-height:0}
.lib .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))}
.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(20,2,10,.9);color:#fff;font-size:14px;line-height:1;cursor:pointer}
body.cf-closed .catfish{display:none}
@media(max-width:900px){.cf-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 16px)}.cf-x{right:10px}}
@media(max-width:640px){
  /* B2 fix (verify CDP getBoundingClientRect 390px): bottom:62px giả định sticky-cta cao 62px
     nhưng đo THẬT = ~67.4px (btn min-height 44 + padding 9+9 top/bottom + border-top 1, xem
     lib.css .sticky-cta ≤640). 62px làm catfish đè ~5px lên sticky-CTA. Nâng lên 76px = hết đè,
     dư ~8-9px khoảng thở an toàn nếu font-size hệ thống lớn hơn làm nút cao thêm. */
  .catfish{bottom:76px}
  .cf-grid{grid-template-columns:1fr;gap:4px;width:calc(100% - 12px)}
  .cf-x{right:8px}
}

/* ============================================================
   DRAWER (mobile ☰ menu) — 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" — mobile.css chỉ có class KHÁC ".m-drawer" cho 1 component khác). Site này
   dùng class "drawer" (đúng theo _shell.py của B1) nên B2 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).
   -> BÁO BRUCE: đây là gap dùng chung nhiều site (đã có trong memory reference_libcss_drawer_
   open_missing) — nên bổ sung .drawer.open{{display:block}} + nav/cta layout vào lib.css NGUỒN
   để các site sau khỏi phải chép lại đoạn này. B2 KHÔNG tự sửa lib.css theo đúng ràng buộc task. */
.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(--brand);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, giống kỹ thuật taixiufyi/style-taixiufyi.css, KHÔNG sửa
   lib.css nguồn dùng chung). */
.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 ≤640px: hàng menu ngang (lh-nav) đã bị lib.css ẩn hẳn (display:none) thay bằng
   drawer — ĐÚNG chủ đích thiết kế h2-left-sticky (logo trái · ☰ phải), không cần hàng cuộn
   ngang song song. Giữ hàng cuộn ngang MƯỢT cho dải tablet 641–1024px (trước khi burger xuất
   hiện) để lh-nav không bọc dòng xấu khi nhiều mục dài. */
@media(min-width:641px) and (max-width:1024px){
  .lh-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .lh-nav::-webkit-scrollbar{display:none}
  .lh-nav a{white-space:nowrap}
}

/* ============================================================
   TOPLIST Section 1 (D1, home.yaml section1_toplist) — KIỂU THỨ BA: lưới 5×2 thẻ vuông
   (chống trùng footprint: taixiufyi=list dọc 1 cột .tl-row, gamebaidoithuongfyi=1 cột viền
   trái). Mỗi thẻ = 1 <a> DUY NHẤT bọc badge hạng + logo + tên + nhãn CTA (KHÔNG nested anchor). */
.tl-grid5{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:14px}
.tl-sq{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:8px;padding:20px 10px 16px;background:var(--panel-grad);border:1px solid var(--line);
  border-radius:var(--rad);text-decoration:none;box-shadow:var(--shadow);
  transition:transform var(--ease),border-color var(--ease)}
.tl-sq:hover{transform:translateY(-4px);border-color:rgba(254,196,10,.45);box-shadow:var(--shadow-lg)}
.tl-sq.tl-top3{border-color:rgba(254,196,10,.5)}
.tl-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);min-width:28px;height:28px;
  padding:0 6px;border-radius:14px;background:var(--brand-grad);color:var(--on);font-weight:800;
  font-size:12.5px;display:flex;align-items:center;justify-content:center;box-shadow:var(--glow)}
.tl-sq img{width:60px;height:60px;object-fit:contain;border-radius:10px;background:#fff;margin-top:6px}
.tl-nm{color:var(--heading);font-size:14px;line-height:1.3}
.tl-go{font-size:12px;font-weight:700;color:var(--mut)}
.tl-sq:hover .tl-go{color:var(--brand)}
@media(max-width:900px){.tl-grid5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.tl-grid5{grid-template-columns:repeat(2,1fr);gap:10px}.tl-sq{padding:18px 8px 14px}}

/* Thẻ 2 chuyên mục (sub_blocks category_cards) — KHÔNG có ảnh riêng cho chuyên mục (chỉ có
   ảnh bài viết, dùng lại sẽ trùng ảnh với khối "bài mới") -> dùng icon emoji thay placeholder
   ảnh, ĐÚNG note home.yaml "không có ảnh riêng thì dùng placeholder icon, đừng bịa ảnh". */
.cc-icon{font-size:34px;line-height:1;margin-bottom:6px}
.cc-count{display:inline-block;margin-top:8px;font-size:12px;color:var(--mut);font-weight:600}

/* Header + footer = tông nền logo #1a040e (lib.css hardcode navy rgba(24,30,46,.85) / #1a2030) — Bruce 2026-09-24 */
.lh,.lh.sticky{background:#1a040e;box-shadow:0 2px 14px rgba(0,0,0,.55)}
.lf{background:#1a040e;border-top:1px solid var(--line)}
.drawer{background:#1a040e}
@media(max-width:640px){.lh .lh-nav,.ns-scrollnav{background:#1a040e}}

/* H1 trang chủ căn giữa (Bruce 2026-09-24) — chỉ trang chủ, H1 bài viết vẫn căn trái */
.ns-h1-center{text-align:center}
/* Nút hero trang chủ căn giữa (Bruce 2026-09-24) */
.lib .btn.ns-hero-cta{display:flex;width:fit-content;margin:18px auto 0}

/* Header Bruce chốt 2026-09-24: bỏ 2 nút CTA, logo TO + căn giữa, menu căn giữa */
.ns-head .lh-main{justify-content:center;position:relative;padding:10px 16px}
.lib .ns-head .logo img{max-height:104px!important;width:auto}
.ns-head .lh-nav{justify-content:center;gap:26px}
.ns-head .burger{position:absolute;right:12px;top:50%;transform:translateY(-50%)}
@media(max-width:640px){
  .lib .ns-head .logo img{max-height:72px!important}
  .ns-head .lh-nav{justify-content:flex-start}
}
/* Khối "Đánh giá người dùng" cách footer cho thoáng (Bruce 2026-09-24) */
#reviews{padding-bottom:52px}
@media(max-width:640px){#reviews{padding-bottom:34px}}