/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTPYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgEM86xRbPQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/nuFiD-vYSZviVYUb_rj3ij__anPXDTzYgEM86xQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3OUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBHMdazTgWw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3yUBHMdazQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================
   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 đề */
  .subcards{grid-template-columns:1fr}   /* mảnh nội dung về 1 cột — hết chật/tràn trên mobile */
  .lf--2 .lf-cols,.lf--3 .lf-cols,.lf--4 .lf-cols{grid-template-columns:1fr;text-align:center;justify-items:center}
  .sticky-cta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:200;gap:8px;padding:9px 12px;background:rgb(20,24,34);border-top:1px solid var(--line);box-shadow:0 -8px 24px -10px rgba(0,0,0,.7)}
  /* nền ĐẶC 100% (không rgba mờ) — nếu để hở, nút phụ (background trong suốt rgba(255,255,255,.03)) cộng dồn với độ mờ của thanh sẽ làm chữ nội dung cuộn phía dưới "rỉ" qua nút, đọc lem nhem (đã verify bằng screenshot ẩn/hiện thanh) */
  .sticky-cta .btn{flex:1;justify-content:center;padding:12px;min-height:44px;font-size:14px;background:var(--panel,#1a1f2b)}
  .sticky-cta .btn-main{background:var(--brand-grad)}
  /* overflow-x:CLIP (không phải hidden) — hidden biến html/body thành scroll container và PHÁ position:sticky của header/CTA con cháu (đã gặp lỗi, xem feedback_mobile_first). clip vẫn chặn tràn ngang nhưng không tạo scroll container mới nên sticky vẫn dính. */
  body{padding-bottom:68px;overflow-x:clip}
  html{overflow-x:clip;scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  /* chặn text dài tràn viewport ở mobile */
  .h1,.h2,.read h2,.read h3,p,li,td,th{word-break:break-word;overflow-wrap:break-word}
  /* ảnh không tràn container */
  img{max-width:100%!important;height:auto}
  /* section overflow-x clip */
  section{overflow-x:clip}
  /* rail (TOC sidebar) ẩn trên mobile — không hiện dưới bài làm trang dài thừa */
  .rail{display:none}
  /* cta-block nút full width trên mobile */
  .cta-block .btn{display:flex;width:100%;justify-content:center;box-sizing:border-box}
  /* footer links: tăng padding để tap target ≥ 40px chiều cao */
  .lf a{padding:9px 0}
  /* disclaimer links cuối footer: ép tap target ≥44px (override .lf-bottom a base) */
  .lf-bottom a{min-height:44px;display:inline-flex;align-items:center;padding:2px 4px}
  /* breadcrumb không cần min-height (nav pattern, không primary action) */
}

/* ============================================================
   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}


/* ===== token override rikvip957 — TÍM (R-41, KHÔNG navy/đỏ mặc định, đúng bảng màu Bruce chốt).
   ⚠️ Đo contrast thật (WCAG relative luminance, 2026-08-24):
     --brand  #45145c vs --bg #0f0b27  = 1.37:1  → KHÔNG BAO GIỜ dùng làm text (đã cấm ở prompt).
     --brand2 #7d19ca vs --bg #0f0b27  = 2.61:1  → DƯỚI AA dù prompt gợi ý dùng cho text/link nhỏ
       (đo thực tế fail cả ngưỡng large-text 3:1) → route TOÀN BỘ text/link nhỏ sang --heading.
     --heading #eac259 vs --bg #0f0b27 = 11.26:1 → PASS AA thoải mái, dùng cho H1/H2 + link/text nhỏ.
     --accent #c98cf5 (tím sáng phái sinh brand2, KHÔNG phải brand2 gốc) vs --bg = 7.79:1 → PASS AA,
       dùng cho hover (giữ tinh thần "tím" mà vẫn đọc được).
   --brand/--brand2 CHỈ dùng làm NỀN khối lớn (nút .btn-main = gradient brand2→brand, chữ TRẮNG
   #fff — contrast 7.33:1 & 13.93:1 ở 2 đầu gradient, an toàn hơn chữ gold/tối vốn chỉ ~4.3:1). ===== */
:root{
  --brand:#45145c; --brand2:#7d19ca; --accent:#c98cf5;
  --heading:#eac259; --bg:#0f0b27;
  --panel:#170f34; --panel2:#1f1444; --line:#3c2a63; --line-soft:rgba(234,194,89,.14);
  --ink:#ece6f5; --mut:#b3a6d6; --on:#ffffff;
  --panel-grad:linear-gradient(160deg,#1c1140,#100a28);
  --panel-grad2:linear-gradient(160deg,#241850,#150c34);
  --shadow:0 6px 18px -8px rgba(0,0,0,.7);
  --shadow-lg:0 16px 40px -14px rgba(0,0,0,.85);
  --glow:0 0 0 1px rgba(234,194,89,.35),0 8px 26px -8px rgba(125,25,202,.55);
  --brand-grad:linear-gradient(135deg,var(--brand2),var(--brand));
  --brand-grad2:linear-gradient(160deg,var(--brand),#26083a);
  --ease:.22s cubic-bezier(.4,.2,.2,1);
  --overlay-dark:rgba(255,255,255,.10);
  --accent-line:rgba(125,25,202,.35);
}


/* logo — kích thước cố định desktop/mobile. inline style="height:56px" trên <img> có specificity
   cao hơn class rule external stylesheet không !important -> media query dưới sẽ vô hiệu nếu
   thiếu !important (bài học go88-vin). */
.lh .lh-main .logo img{height:96px!important;max-height:96px!important;width:auto!important}
@media (max-width:860px){ .lh .lh-main .logo img{height:68px!important;max-height:68px!important} }

/* ===== Menu ẨN sau ☰ CẢ TRÊN DESKTOP (đúng mã prompt "menu ẩn ☰, không menu ngang lộ hết").
   !important vì specificity media-query lib.css KHÔNG tự cộng khi so với rule không-media
   (bài học go88-vin) — ép thắng ở MỌI viewport. ===== */
.lh nav.lh-nav{display:none!important}
.lh .burger{display:flex!important;min-width:44px;min-height:44px;align-items:center;justify-content:center}
#drawer-open{display:flex!important}

/* ===== fix contrast NỀN TỐI TÍM (lib.css thiết kế dark-navy-first, hardcode nhiều #fff/gold nhạt).
   Text/link nhỏ route sang --heading (KHÔNG --brand/--brand2, xem ghi chú contrast ở SITE_CSS_TOKENS). ===== */
.lib a{color:var(--heading)}
.lib a:hover{color:var(--accent)}
.tabs .tab:hover{color:var(--accent)}
.pager a:hover{color:var(--accent)}
.filter .chip:hover{color:var(--accent)}
.lf a{color:var(--ink)}
.lf a:hover{color:var(--accent)}
.lf h4{color:var(--heading)}
.read h3{color:var(--heading)}
.author .role,.rv-role{color:var(--accent)}
.gcard .nm,.acc summary,.faq summary,.author b,.rv-top b,.cmt-name{color:var(--heading)}
.acc .acc-body,.faq .a,.toc a,.read p,.sapo{color:var(--ink)}
.trust span::before{color:var(--heading)}
/* header sticky blur + thanh CTA đáy mobile: lib.css hardcode nền navy -> đổi nền tím-đen khớp theme */
.lh.sticky{background:rgba(15,11,39,.90)}
.sticky-cta{background:#130c2c;border-top:1px solid var(--line)}
/* footer: lib.css hardcode gradient navy -> đổi nền tím đen (KHÔNG navy, R-41) */
.lf{background:linear-gradient(180deg,#1a1240,var(--bg));border-top:1px solid var(--line)}
/* .lib/.hero nền mặc định có tint xanh dương (không khớp brand tím-gold) -> đổi ấm/tím hơn */
.lib{background:radial-gradient(900px 420px at 85% -120px,rgba(234,194,89,.09),transparent 60%),radial-gradient(700px 500px at -10% 0,rgba(125,25,202,.16),transparent 55%),var(--bg)}
.hero{background:radial-gradient(900px 360px at 80% -60px,rgba(234,194,89,.14),transparent 60%),radial-gradient(600px 300px at 0% 120%,rgba(125,25,202,.18),transparent 55%),var(--panel-grad2)}
.trust span{background:rgba(236,230,245,.04)}

/* ===== bổ sung riêng rikvip957 (không sửa lib.css gốc) ===== */
figure{margin-left:auto;margin-right:auto;text-align:center}
figure>img{margin-left:auto;margin-right:auto}
body{font-family:'Roboto',-apple-system,Segoe UI,Arial,sans-serif}
.h1,.h2,.card .t,.box h3{font-family:'Playfair Display',Georgia,serif}
.lh .logo img{display:block}
/* drawer (mở qua ☰ ở CẢ desktop lẫn mobile) — panel trượt trái, full-screen (mặc định lib.css) */
.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;color:var(--heading)}
.drawer nav{display:flex;flex-direction:column;padding:6px 0;overflow-y:auto}
.drawer nav a{color:var(--ink);font-weight:600;font-size:15px;padding:14px 18px;border-bottom:1px solid var(--line-soft);min-height:44px;display:flex;align-items:center}
.drawer-cta{padding:16px}
/* trang chủ [3|6|3] — KHÔNG dùng .rail (auto-hide mobile) vì cột trái/phải có nội dung THẬT
   (CTA/bài mới) phải hiện trên mobile */
.home-3663{display:grid;grid-template-columns:3fr 6fr 3fr;gap:22px;max-width:1200px;margin:0 auto;padding:0 0 8px;align-items:start}
.home-3663>.home-col{display:grid;gap:16px;align-content:start;min-width:0}
.home-3663>.home-col>*{min-width:0}
/* FIX overflow (2026-08-24, loop-back D1): .wrap gốc (lib.css) có margin:0 auto (--maxw:1200px).
   margin auto TRÁI/PHẢI vô hiệu hoá justify-self:stretch mặc định của CSS Grid -> .wrap (item của
   .home-col{display:grid}) không còn co theo track (578px giữa) mà tự sizing kiểu fit-content, bị
   kẹp bởi max-width:1200px riêng của nó -> đoạn text/subcards dài (muốn nằm 1 dòng khi tính
   max-content) kéo .wrap phồng lên gần 1200px, TRÀN khỏi track 578px, đè sang cột phải (đã đo bằng
   CDP: .wrap giữa = 1200px trong khi track .home-col chỉ 578px). Fix: ép width:100% + max-width:100%
   + margin ngang 0 CHỈ trong ngữ cảnh .home-col (không đụng .wrap toàn site — nơi khác không phải
   grid item nên không bị bug này). */
.home-3663>.home-col>.wrap{width:100%;max-width:100%;margin-left:0;margin-right:0;box-sizing:border-box;min-width:0}
/* phòng hờ: grid con (.subcards/.grid-2) dùng 1fr trần (không minmax(0,1fr)) -> item vẫn có
   min-width:auto(min-content) mặc định, chữ dài không khoảng trắng có thể ép track nở dù .wrap đã
   đúng width. Ép min-width:0 trên item để chữ được phép wrap thay vì đẩy tràn. */
.subcards>*,.grid-2>*{min-width:0}
.home-blk+.home-blk{border-top:1px solid var(--line-soft);padding-top:22px;margin-top:22px}
@media(max-width:1024px){
  .home-3663{grid-template-columns:1fr}
  /* mobile: cột GIỮA (nội dung chính, H1+hero) lên TRƯỚC, 2 cột sidebar xuống dưới */
  .home-3663>.home-col:nth-child(1){order:2}
  .home-3663>.home-col:nth-child(2){order:1}
  .home-3663>.home-col:nth-child(3){order:3}
}
/* TODO slot (D1 sẽ thay bằng nội dung thật) — viền đứt chỉ để B1 tự-kiểm khung, KHÔNG lộ ra
   sau khi D1 render (mỗi .home-todo sẽ bị D1 xoá/ghi đè hoàn toàn) */
.home-todo{border:1px dashed var(--line);border-radius:10px;padding:14px;color:var(--mut);font-size:12.5px;min-height:36px}
.banner-vert{min-height:150px;display:flex;flex-direction:column;justify-content:center;color:var(--ink)}
.banner-vert h3{color:var(--heading);font-family:'Playfair Display',Georgia,serif}
.banner-vert:hover{border-color:rgba(234,194,89,.45)}
.lf-badges img{height:28px;width:auto;object-fit:contain}
/* bảng Word còn sót (nếu có) trong bài — bọc scroll ngang, không tràn viewport */
.tbl-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 16px}
.tbl-wrap .tbl{min-width:480px}

/* ===== khối trang chủ D1 — kho game / stat-strip / timeline / feature-card (bổ sung riêng site) ===== */
.subcards a.box{text-decoration:none;color:inherit;display:block}
.subcards .box .qty{font-size:11px;color:var(--heading);font-weight:700;margin:2px 0 6px}
.subcards .box p{margin:0;font-size:13.5px;color:var(--mut)}
.marquee .stat-chip{min-width:150px;background:var(--panel-grad);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.marquee .stat-chip .lbl{font-size:11px;color:var(--mut);min-height:14px}
.marquee .stat-chip .val{font-weight:800;color:var(--heading);font-size:13.5px;margin-top:4px}
.timeline{position:relative;margin:14px 0 4px;padding-left:22px;border-left:2px solid var(--line)}
.timeline .t-item{position:relative;padding:0 0 20px 14px}
.timeline .t-item:last-child{padding-bottom:0}
.timeline .t-item::before{content:"";position:absolute;left:-21px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--brand-grad);box-shadow:0 0 0 3px var(--bg)}
.timeline .t-period{font-weight:800;color:var(--heading);font-size:13px;letter-spacing:.3px}
.timeline .t-desc{color:var(--ink);font-size:14px;margin-top:4px}
.grid-2 .box ul{margin:8px 0;padding-left:18px;color:var(--ink);font-size:13.5px}
.grid-2 .box ul li{margin-bottom:6px}