/* ============================================================
   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-gamebaidoithuongfyi.css — override brand cho gamebaidoithuong.fyi (Martech G, top nhà cái)
   Palette lấy từ logo thật: tím đậm + đỏ + vàng kim + nền xám than tối.
   File này CHỈ override biến/rule cụ thể — KHÔNG sửa design/library/lib.css (nguồn dùng chung). */

:root{
  --bg:#333231;
  --panel:#3d3a35;
  --panel2:#46423c;
  --line:#57524a;
  --line-soft:rgba(255,255,255,.08);
  --ink:#f3ede2;
  --mut:#c9c2b6;
  --brand:#30034b;      /* tím đậm — dùng cho border/accent trang trí */
  --brand2:#c80404;      /* đỏ — dùng cho nút/nhấn mạnh */
  --on:#ffffff;          /* chữ trên nút brand-grad = trắng (đủ tương phản trên đỏ/tím) */
  --heading:#fcd454;     /* vàng kim — h1/h2/heading + mọi chỗ dùng --brand làm TEXT (đổi bên dưới) */
  --link:#d9a8ff;        /* tím sáng — link trong bài, ĐỌC ĐƯỢC trên nền #333231 (tím gốc #30034b thì không) */
  --panel-grad:linear-gradient(160deg,#3d3a35,#2b2926);
  --panel-grad2:linear-gradient(160deg,#3a1450,#4a0808);
  --brand-grad:linear-gradient(135deg,#6b1090,#c80404);
  --glow:0 0 0 1px rgba(200,4,4,.35),0 8px 26px -8px rgba(200,4,4,.45);
}

/* nền trang: glow ấm tím/đỏ thay vì gold mặc định (chống "đảo tối" — feedback_dark_bg_atmosphere) */
.lib{background:
    radial-gradient(900px 420px at 85% -120px, rgba(200,4,4,.09), transparent 60%),
    radial-gradient(700px 500px at -10% 0, rgba(48,3,75,.14), transparent 55%),
    var(--bg)}
.hero{background:
    radial-gradient(900px 360px at 80% -60px, rgba(200,4,4,.20), transparent 60%),
    radial-gradient(600px 300px at 0% 120%, rgba(48,3,75,.28), transparent 55%),
    var(--panel-grad2)}

/* R-45-safe fix: mọi nơi lib.css dùng var(--brand) làm MÀU CHỮ/ICON trên nền tối —
   --brand=#30034b (tím rất đậm) không đủ tương phản WCAG trên --bg tối -> đổi sang
   --heading (vàng) hoặc --link (tím sáng) tuỳ ngữ cảnh. border/nền trang trí GIỮ --brand nguyên. */
.lib a{color:var(--link)}
.lib a:hover{color:var(--heading)}
.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(--heading)}
.btn:not(.btn-main):hover{border-color:var(--heading);background:rgba(252,212,84,.12)}
.btn-main:hover{background:linear-gradient(135deg,#8a1fb8,#e60505);box-shadow:0 0 0 1px rgba(200,4,4,.55),0 12px 30px -8px rgba(200,4,4,.6)}
.lh .logo{color:var(--heading)}
.lh nav a:hover{color:var(--heading)}
.lh nav a::after{background:var(--heading)}
.lh .burger{color:var(--heading)}
.h2{border-left-color:var(--heading)}
.tbl th{color:var(--heading)}
.tbl .rank{color:var(--heading)}
.tbl .star{color:var(--heading)}
.acc summary::after{color:var(--heading)}
.faq summary::after{color:var(--heading)}
.trust span::before{color:var(--heading)}
.tabs .tab:hover{color:var(--heading);border-color:var(--heading)}
.subcards .box h3{color:var(--heading)}
.lf h4{color:var(--heading)}
.lf a:hover{color:var(--heading)}
.pager a:hover{border-color:var(--heading);color:var(--heading)}
.filter .chip:hover{border-color:var(--heading);color:var(--heading)}
.author .role{color:var(--heading)}
.author--4::before{color:var(--heading)}
.drawer-top .logo{color:var(--heading)}
.steps li::before{background:var(--brand-grad);color:var(--on)}

/* ranking table Section1 — thêm CTA cột cuối mỗi hàng */
.tbl .rank-cta{white-space:nowrap;text-align:right}
.tbl .rank-cta .btn{padding:8px 14px;font-size:13px}

/* logo to hơn — Bruce hay chê logo bé (header ~64px desktop/48px mobile, footer ~80px) */
.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}

/* arc-row (chuyên mục listing) — lib.css chưa định màu .t/.sg-desc riêng nên kế thừa
   màu link (--link) của thẻ <a> bao ngoài, làm tiêu đề+mô tả trông giống hệt nhau.
   Tách rõ: tiêu đề = --heading (vàng, nổi bật) · mô tả = --mut (xám, phụ). */
.arc-row .t{color:var(--heading)}
.arc-row .sg-desc{color:var(--mut);font-size:13.5px;margin-top:4px}

/* fix soi mắt: h3 bài dùng --brand (#30034b) tím đậm trên nền tối = không đọc được → hồng-đỏ sáng (tone brand2) */
.read h3{color:#ffb3a8}
/* trang chủ Section [12] full-width */
.lay-center.home-full{max-width:1080px}

/* ============================================================
   NGÀNH G (2026-09-14): TOPLIST · 2 nút header · banner đáy
   ============================================================ */
/* Toplist — 1 cột, hàng ngang: #hạng · logo · tên · (Xem đánh giá) · Vào game */
.gtop h2{margin-bottom:14px}
.gt-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:none}
.gt-row{display:flex;align-items:center;gap:14px;padding:10px 16px;border-radius:12px;background:var(--panel-grad);border:1px solid var(--line);border-left:4px solid var(--line)}
.gt-row.gt-m1{border-left-color:#fcd454;background:linear-gradient(90deg,rgba(252,212,84,.14),transparent 60%),var(--panel)}
.gt-row.gt-m2{border-left-color:#cfd3da}
.gt-row.gt-m3{border-left-color:#c8733a}
.gt-no{flex:0 0 42px;font-size:20px;font-weight:800;color:var(--heading)}
.lib .gt-logo{width:52px!important;height:52px!important;object-fit:contain;border-radius:10px;flex:0 0 52px}
.gt-name{flex:1;min-width:0;font-size:17px;color:var(--ink)}
.gt-act{display:flex;gap:8px;align-items:center}
.lib .gt-act .btn{padding:9px 16px;font-size:14px;white-space:nowrap}
@media(max-width:640px){
  .gt-row{gap:10px;padding:10px 12px}
  .gt-no{flex-basis:30px;font-size:17px}
  .lib .gt-logo{width:44px!important;height:44px!important;flex-basis:44px}
  .gt-name{font-size:16px}
  .lib .gt-act .btn{padding:9px 14px}
}

/* 2 nút header/drawer/sticky: nút 1 chính · nút 2 viền vàng */
.lib .btn.btn-alt{color:var(--heading);border-color:var(--heading);background:rgba(252,212,84,.08)}
.lib .btn.btn-alt:hover{color:#1d1a15;background:var(--heading)}
.lh .cta .btn{white-space:nowrap}
.drawer-cta.cta-duo{display:flex;flex-direction:column;gap:10px}
.drawer-cta.cta-duo .btn{width:100%;justify-content:center}

/* Banner đáy (catfish) — nền trong suốt, vùng trống không chặn click */
.ftb{position:fixed;left:0;right:0;bottom:8px;z-index:190;pointer-events:none;display:flex;justify-content:center}
.ftb-grid{position:relative;display:grid;grid-template-columns:repeat(2,430px);gap:6px}
.lib .ftb-item,.ftb-x{pointer-events:auto}
.lib .ftb-item{display:block;line-height:0}
.lib .ftb-item img{width:100%!important;height:auto!important;display:block;border-radius:6px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.ftb-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(29,26,21,.92);color:#fff;font-size:14px;line-height:1;cursor:pointer}
.lf{padding-bottom:150px}
.ftb-off .lf{padding-bottom:0}
#toplist{scroll-margin-top:140px}
@media(max-width:900px){.ftb-grid{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% - 16px)}.ftb-x{right:10px}}
@media(max-width:640px){
  .ftb{bottom:62px}
  .ftb-grid{grid-template-columns:1fr;gap:4px;width:calc(100% - 12px)}
  .ftb-x{right:8px}
  .lf{padding-bottom:300px}
  .sticky-cta .btn{font-size:13.5px;padding:10px 8px;line-height:1.25;text-align:center}
  #toplist{scroll-margin-top:80px}
}

/* Ảnh nội dung toàn site: căn giữa + hiện ALT làm chú thích dưới ảnh (Bruce chốt 2026-09-14) */
.lib figure.fig-c{margin:18px auto;text-align:center}
.lib figure.fig-c img{display:block;margin-inline:auto;max-width:min(100%,800px)}
.lib figure.fig-c figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--mut);font-style:italic;text-align:center}

/* Trang chủ: nút dưới ảnh hero căn giữa (Bruce 2026-09-14) */
.hero-gb .hero-in>.btn{display:flex;width:fit-content;margin:18px auto 0}

/* Menu phẳng 11 mục (Bruce 2026-09-14) — gọn để vừa 1 hàng desktop */
@media(min-width:1025px){
  .lh .lh-nav{flex-wrap:nowrap;gap:0 2px;overflow:visible}
  .lh .lh-nav a{padding:12px 9px;font-size:14px;white-space:nowrap}
}

/* Menu mobile ☰ (drawer) — lib.css chỉ có .drawer{display:none}, KHÔNG có .drawer.open → JS thêm class
   "open" nhưng không hiện gì. Site tự định nghĩa panel (fix 2026-09-14, Bruce báo menu mobile không hiện). */
.drawer{background:var(--panel);flex-direction:column}
.drawer.open{display:flex}
.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}
.drawer nav{display:flex;flex-direction:column;padding:6px 0}
.drawer nav a{color:var(--ink);font-weight:600;font-size:15px;padding:12px 18px;border-bottom:1px solid var(--line-soft,rgba(255,255,255,.08));min-height:44px;display:flex;align-items:center}
.drawer nav a:active{background:rgba(255,255,255,.06)}
.drawer-cta{padding:16px}

/* Hover nút "Xem bóng đá miễn phí": rule chung `.lib a.btn:not(.btn-main):hover{color:vàng}` mạnh hơn
   → chữ vàng trên nền vàng = mất chữ. Ép chữ tối (Bruce 2026-09-14). */
.lib a.btn.btn-alt:hover{color:#1d1a15!important;background:var(--heading);border-color:var(--heading)}

/* Nav menu hiện trên MOBILE: 1 hàng cuộn ngang dưới logo (lib.css ẩn .lh nav ≤640px) — Bruce 2026-09-14 */
@media(max-width:640px){
  .lh .lh-nav{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:8px 12px;border-top:1px solid var(--line-soft);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .lh .lh-nav::-webkit-scrollbar{display:none}
  .lh .lh-nav a{flex:0 0 auto;white-space:nowrap;font-size:13.5px;padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04)}
  .lh .lh-nav a::after{display:none}
}