/* ============================================================
   G24.CSS v2 — Design System Game Center · Tiếng Trung 24G
   ============================================================
   REDESIGN 2026 theo bộ mockup minh họa chính thức:
   - App bar đỏ đậm chữ vàng, nav dạng pill có icon.
   - Chip chỉ số nền KEM viền vàng nhạt (mockup mọi game).
   - Banner tiêu đề ruy-băng đỏ + mây vàng hai bên.
   - Khung vàng trang trí (border-image gold-frame.svg).
   - Cửa hang đá (stone-frame.svg) + khay gỗ (wood.svg).
   - Nền trang đổi theo màn: body[data-g24-bg=...] (art.js đặt).
   - Mọi class tiền tố g24- · KHÔNG đụng CSS app cũ.
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Màu thương hiệu */
  --g24-red:        #E60012;
  --g24-red-dark:   #B3000E;
  --g24-red-deep:   #8F000B;
  --g24-gold:       #F5B301;
  --g24-gold-deep:  #C98F00;
  --g24-gold-soft:  #FFE9A8;
  /* Bảng kem (mockup: panel giấy kem, chip ngà) */
  --g24-cream:      #FFF6E3;
  --g24-cream-2:    #FFFBF0;
  --g24-cream-line: #F0D9A8;
  /* Nền & chữ */
  --g24-bg:         #FFF7F5;
  --g24-card:       #FFFFFF;
  --g24-ink:        #2B2226;
  --g24-muted:      #97848B;
  --g24-line:       #F4DFDF;
  /* Gỗ & đá (game) */
  --g24-wood:       #7A4A26;
  --g24-wood-dark:  #59371B;
  /* Trạng thái */
  --g24-good:       #2E9E5B;
  --g24-good-bg:    #E6F6EC;
  /* Hình khối */
  --g24-radius:     18px;
  --g24-radius-sm:  12px;
  --g24-shadow:     0 6px 18px rgba(179,0,14,.10);
  --g24-shadow-lg:  0 14px 34px rgba(179,0,14,.16);
  /* Chữ */
  --g24-font-head:  'Baloo 2','Be Vietnam Pro',system-ui,sans-serif;
  --g24-font-body:  'Be Vietnam Pro',system-ui,sans-serif;
  --g24-font-zh:    "Noto Sans SC","Microsoft YaHei",sans-serif;
}

/* ---------- 2. NỀN TẢNG + NỀN TRANG THEO MÀN ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--g24-font-body);
  background:
    radial-gradient(1200px 500px at 85% -10%, #FFECEC 0%, transparent 60%),
    radial-gradient(900px 420px at -10% 30%, #FFF3D6 0%, transparent 55%),
    var(--g24-bg);
  color:var(--g24-ink);
  min-height:100vh;
  transition:background .3s ease;
}
/* art.js đặt data-g24-bg — mỗi màn một không khí (SVG tự vẽ, vài KB) */
body[data-g24-bg="hub"]{
  background:url('../assets/bg/hub.svg') center/cover fixed no-repeat, #A50313;
}
body[data-g24-bg="stage"]{
  background:url('../assets/bg/stage.svg') center/cover fixed no-repeat, #EAD1A8;
}
body[data-g24-bg="memory-card"]{
  background:url('../assets/bg/temple.svg') center/cover fixed no-repeat, #F3D9BD;
}
body[data-g24-bg="word-puzzle"]{
  /* S23 (mockup): thêm mảng hoa đào hồng 2 góc + quầng đèn lồng ấm trên nền hoàng hôn */
  background:
    radial-gradient(360px 240px at 96% 6%, rgba(255,150,170,.32) 0%, transparent 70%),
    radial-gradient(320px 220px at 2% 12%, rgba(255,140,160,.26) 0%, transparent 70%),
    radial-gradient(150px 150px at 5% 42%, rgba(255,160,60,.3) 0%, transparent 70%),
    radial-gradient(130px 130px at 97% 55%, rgba(255,160,60,.24) 0%, transparent 70%),
    url('../assets/bg/dusk.svg') center/cover fixed no-repeat, #8E1E33;
}
body[data-g24-bg="gold-miner"]{
  /* S18: nền hang mỏ chính thức nếu có file (assets/kyky/bg-mine.jpg), fallback gradient */
  background:
    url('../assets/kyky/bg-mine.jpg') center/cover fixed no-repeat,
    linear-gradient(180deg,#C60F1E 0%,#8F000B 45%,#5B3A22 100%) fixed;
}
body[data-g24-bg="bubble-shooter"] .g24-panel{background:rgba(255,255,255,.94)}
body[data-g24-bg="snake"]{
  background:
    radial-gradient(900px 460px at 50% -8%, rgba(255,90,99,.5) 0%, transparent 60%),
    linear-gradient(180deg,#C60F1E 0%,#9C0313 55%,#5E2C10 100%) fixed;
}
body[data-g24-bg="runner"]{
  background:
    radial-gradient(900px 480px at 50% -10%, rgba(255,140,80,.4) 0%, transparent 60%),
    linear-gradient(180deg,#C6301A 0%,#8F1210 55%,#3E1E3A 100%) fixed;
}
body[data-g24-bg="millionaire"]{
  background:
    radial-gradient(1000px 520px at 50% -12%, rgba(198,32,44,.55) 0%, transparent 62%),
    linear-gradient(180deg,#4A0E20 0%,#2E0A1B 55%,#1A0510 100%) fixed;
}
body[data-g24-bg="millionaire"] .g24-footer{color:rgba(255,255,255,.8)}
body[data-g24-bg="millionaire"] .g24-footer__back{color:var(--g24-gold-soft)}
body[data-g24-bg="millionaire"] .g24-back{color:#fff}
body[data-g24-bg="bubble-shooter"]{
  background:
    radial-gradient(1000px 480px at 80% -10%, #FFD9DC 0%, transparent 60%),
    radial-gradient(800px 400px at -10% 40%, #FFEFD6 0%, transparent 55%),
    #FFF4F0;
}
/* chữ sáng trên nền đậm */
body[data-g24-bg="hub"] .g24-section-title,
body[data-g24-bg="word-puzzle"] .g24-footer,body[data-g24-bg="hub"] .g24-footer,
body[data-g24-bg="snake"] .g24-footer,
body[data-g24-bg="gold-miner"] .g24-footer{color:rgba(255,255,255,.85)}
body[data-g24-bg="hub"] .g24-footer__back,body[data-g24-bg="word-puzzle"] .g24-footer__back,
body[data-g24-bg="snake"] .g24-footer__back,
body[data-g24-bg="gold-miner"] .g24-footer__back{color:var(--g24-gold-soft)}
body[data-g24-bg="word-puzzle"] .g24-back,body[data-g24-bg="gold-miner"] .g24-back,
body[data-g24-bg="snake"] .g24-back{color:#fff}

.g24-app{max-width:1180px;margin:0 auto;padding:0 16px;display:flex;flex-direction:column;min-height:100vh}
.g24-root{flex:1;padding:18px 0 40px}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none}
img{max-width:100%}

/* ---------- 3. APP BAR (mockup: bar đỏ, logo ô tối, 24G vàng) ---------- */
.g24-appbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;margin:12px -4px 6px;
  background:linear-gradient(180deg,#D5111F 0%,var(--g24-red-dark) 78%,#9C000C 100%);
  color:#fff;border-radius:var(--g24-radius);
  box-shadow:0 10px 26px rgba(120,0,10,.35), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -3px 0 rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.14);
}
.g24-appbar__brand{display:flex;align-items:center;gap:10px}
.g24-appbar__logo{
  font-size:24px;width:46px;height:46px;display:grid;place-items:center;
  background:linear-gradient(160deg,#3A3134,#171214);border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.3);
  animation:g24-float 3.2s ease-in-out infinite;
}
.g24-appbar__title{
  font-family:var(--g24-font-head);font-weight:800;font-size:20px;letter-spacing:.3px;
  text-shadow:0 2px 0 rgba(0,0,0,.22);
}
.g24-appbar__title b{color:var(--g24-gold);text-shadow:0 2px 0 rgba(0,0,0,.28)}
.g24-appbar__nav{display:flex;gap:4px;margin-left:auto}
.g24-navlink{
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  padding:8px 14px;border-radius:999px;font-weight:700;font-size:14px;
  color:rgba(255,255,255,.92);transition:background .2s, transform .15s;
}
.g24-appbar__nav .g24-navlink::before{font-size:15px;line-height:1}
/* ⚠️ S55 SỬA NỐT LỖI S47: dòng này trước đây KHÔNG giới hạn trong
 * .g24-appbar__nav như 3 dòng dưới → mục "Sảnh" ở THANH DƯỚI bị dính
 * thêm emoji 🎮 chồng lên icon SVG (chỉ lộ ra khi Sảnh không phải mục
 * đang mở, nên lâu nay không ai để ý). */
.g24-appbar__nav .g24-navlink[data-nav="hub"]::before{content:'🎮'}
/* ⚠️ S47 SỬA LỖI: các luật emoji này dành cho THANH TRÊN (appbar).
 * Mục ở thanh dưới cũng mang class .g24-navlink (để đánh dấu mục đang
 * mở), nên trước đây bị dính emoji này → mỗi mục hiện HAI icon chồng
 * nhau: emoji ở trên, icon SVG ở dưới. Đã giới hạn lại đúng appbar. */
.g24-appbar__nav .g24-navlink[data-nav="review"]::before{content:'📋'}
.g24-appbar__nav .g24-navlink[data-nav="achievements"]::before{content:'🏆'}
.g24-appbar__nav .g24-navlink[data-nav="leaderboard"]::before{content:'🥇'}
.g24-appbar__nav .g24-navlink:hover{background:rgba(255,255,255,.15)}
/* ⚠️ S55: cũng phải giới hạn trong .g24-appbar__nav — mục ở THANH DƯỚI
 * cùng mang class .g24-navlink nên trước đây bị dính thêm một gạch vàng
 * thò ra ngoài đáy viên thuốc đỏ. */
.g24-appbar__nav .g24-navlink.is-active{
  position:relative;
  background:#fff;color:var(--g24-red);
  box-shadow:0 0 14px rgba(255,211,77,.5), 0 4px 10px rgba(0,0,0,.22), inset 0 -2px 0 rgba(230,0,18,.15);
}
.g24-appbar__nav .g24-navlink.is-active::after{
  content:'';position:absolute;left:22%;right:22%;bottom:-7px;height:3px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--g24-gold),transparent);
}
/* nút cài đặt ⚙️ trên header (S16) */
.g24-appbar__gear{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:17px;color:#fff;background:rgba(255,255,255,.14);
  border:1.5px solid rgba(255,255,255,.25);
  transition:transform .3s, background .2s;
}
.g24-appbar__gear:hover{background:rgba(255,255,255,.24);transform:rotate(60deg)}
.g24-appbar__user{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600}
.g24-appbar__avatar{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#FFD34D,var(--g24-gold));
  color:var(--g24-red-deep);font-weight:800;font-size:15px;
  border:2px solid #fff;box-shadow:0 3px 8px rgba(0,0,0,.25);
}

/* ---------- 3b. BANNER TIÊU ĐỀ RUY-BĂNG (mockup: LẬT THẺ GHI NHỚ) ---------- */
.g24-banner{
  display:flex;align-items:center;justify-content:center;gap:12px;
  margin:4px auto 14px;user-select:none;
}
.g24-banner__ribbon{
  position:relative;
  background:linear-gradient(180deg,#F03B2E 0%,#D01120 55%,var(--g24-red-dark) 100%);
  color:#fff;font-family:var(--g24-font-head);font-weight:800;
  font-size:clamp(17px,3vw,22px);letter-spacing:1px;
  padding:9px 26px;border-radius:14px;
  border:2px solid #F3C860;
  box-shadow:0 6px 16px rgba(143,0,11,.4), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.22);
  text-shadow:0 2px 0 rgba(0,0,0,.25);
  white-space:nowrap;
}
/* mây vàng hai bên (vẽ thuần CSS) */
.g24-banner__cloud{position:relative;width:44px;height:20px;flex:0 0 auto;opacity:.95}
.g24-banner__cloud::before,.g24-banner__cloud::after{
  content:'';position:absolute;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#FBDF9A,#E9B33B);
  box-shadow:0 2px 4px rgba(143,0,11,.25);
}
.g24-banner__cloud::before{width:26px;height:16px;left:2px;top:2px}
.g24-banner__cloud::after{width:20px;height:13px;right:0;top:6px}

/* ---------- 3c. THANH MẸO (mockup: 💡 Mẹo: ... dưới cùng) ---------- */
.g24-tipbar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  max-width:640px;margin:14px auto 4px;padding:10px 18px;
  background:var(--g24-cream);border:2px solid var(--g24-cream-line);
  border-radius:999px;font-size:13.5px;font-weight:600;color:#6B5138;
  box-shadow:0 4px 12px rgba(143,0,11,.12), inset 0 1px 0 #fff;
  text-align:center;
}
.g24-tipbar b{color:var(--g24-red-dark)}
.g24-tipbar .ic{font-size:17px;flex:0 0 auto}

/* ---------- 4. HERO (sảnh game) ---------- */
.g24-hero{
  position:relative;overflow:hidden;
  background:linear-gradient(115deg,var(--g24-red) 0%,var(--g24-red-dark) 60%,var(--g24-red-deep) 100%);
  color:#fff;border-radius:24px;
  box-shadow:var(--g24-shadow-lg), inset 0 1px 0 rgba(255,255,255,.2);
  border:2px solid rgba(245,179,1,.5);
  padding:28px 26px;margin-bottom:22px;
  display:flex;align-items:center;gap:20px;
}
.g24-hero__mascot{
  font-size:64px;line-height:1;flex:0 0 auto;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.3));
  animation:g24-float 3.2s ease-in-out infinite;
}
.g24-hero__mascot img{width:104px;height:auto;display:block}
.g24-hero h1{font-family:var(--g24-font-head);font-size:clamp(22px,4vw,32px);line-height:1.15;text-shadow:0 2px 0 rgba(0,0,0,.2)}
.g24-hero p{margin-top:6px;font-size:14.5px;color:rgba(255,255,255,.92)}
.g24-hero__slogan{
  display:inline-block;margin-top:12px;padding:6px 14px;border-radius:999px;
  background:linear-gradient(180deg,#FFD34D,var(--g24-gold));color:var(--g24-red-deep);
  font-family:var(--g24-font-head);font-weight:800;font-size:13px;letter-spacing:.4px;
  box-shadow:0 3px 8px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.5);
}
.g24-hero::after{
  content:'游 戏 · 学 习';
  position:absolute;right:-10px;bottom:-26px;font-size:96px;font-weight:800;
  color:rgba(255,255,255,.06);pointer-events:none;font-family:var(--g24-font-head);
}

/* ---------- 5. LƯỚI CARD GAME (mockup: ô minh họa viền vàng) ---------- */
.g24-section-title{
  font-family:var(--g24-font-head);font-size:20px;font-weight:700;
  margin:22px 2px 12px;display:flex;align-items:center;gap:8px;
}
.g24-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g24-gamecard{
  position:relative;background:var(--g24-card);border-radius:var(--g24-radius);
  box-shadow:var(--g24-shadow), inset 0 -3px 0 rgba(143,0,11,.06);
  padding:12px 12px 14px;text-align:center;
  border:2px solid #F6E7C8;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s;
  animation:g24-pop-in .38s ease both;
}
.g24-gamecard:hover{transform:translateY(-5px) scale(1.02);box-shadow:var(--g24-shadow-lg);border-color:var(--g24-gold)}
.g24-gamecard:active{transform:translateY(-1px) scale(.99)}
/* ARTWORK riêng từng game (S16) — mini thế giới của game bằng CSS */
.g24-gamecard__art{
  position:relative;display:grid;place-items:center;overflow:hidden;
  height:92px;border-radius:14px;margin-bottom:10px;
  border:2px solid rgba(243,200,96,.8);
  box-shadow:inset 0 -8px 16px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.35);
  background:linear-gradient(160deg,#FFE7E8,#FFD0D4);
}
.g24-gamecard__art .ic{
  font-size:44px;line-height:1;z-index:2;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.35));
  transition:transform .25s;
}
.g24-gamecard:hover .g24-gamecard__art .ic{transform:rotate(-8deg) scale(1.18)}
.g24-gamecard__art .shine{
  position:absolute;top:-40%;left:-70%;width:55%;height:190%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.4), transparent);
  transform:rotate(10deg);transition:left .55s ease;
}
.g24-gamecard:hover .g24-gamecard__art .shine{left:130%}
/* thế giới từng game */
.g24-gamecard[data-key="gold-miner"] .g24-gamecard__art{
  background:linear-gradient(180deg,#7EC4F2 0%,#A9DBF8 34%,#7CC44A 34%,#5FA332 44%,#5B3A22 44%,#3A2313 100%);
}
.g24-gamecard[data-key="gold-miner"] .g24-gamecard__art::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 22% 72%, #F5B301 0 5px, transparent 6px),
    radial-gradient(circle at 76% 82%, #F5B301 0 4px, transparent 5px),
    radial-gradient(circle at 55% 62%, rgba(255,224,130,.9) 0 3px, transparent 4px);
}
.g24-gamecard[data-key="memory-card"] .g24-gamecard__art{
  background:linear-gradient(180deg,#F6E3C8,#E9C39B);
}
.g24-gamecard[data-key="memory-card"] .g24-gamecard__art::before{
  content:'中';position:absolute;right:10px;bottom:2px;
  font-family:var(--g24-font-zh);font-size:40px;font-weight:700;color:rgba(178,20,34,.28);
  transform:rotate(12deg);
}
.g24-gamecard[data-key="bubble-shooter"] .g24-gamecard__art{
  background:linear-gradient(180deg,#4FA8E8 0%,#8ACBF4 60%,#BFE58F 88%,#7CC44A 100%);
}
.g24-gamecard[data-key="bubble-shooter"] .g24-gamecard__art::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(circle at 20% 26%, rgba(255,255,255,.95) 0 7px, transparent 8px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0 5px, transparent 6px),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.85) 0 6px, transparent 7px);
}
.g24-gamecard[data-key="word-puzzle"] .g24-gamecard__art{
  background:linear-gradient(180deg,#8E1E33 0%,#C24A3A 70%,#5E2C4C 100%);
}
.g24-gamecard[data-key="word-puzzle"] .g24-gamecard__art::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 74% 32%, rgba(255,184,77,.75) 0 9px, rgba(255,138,61,.3) 14px, transparent 22px);
}
.g24-gamecard[data-key="snake"] .g24-gamecard__art{
  background:
    repeating-conic-gradient(#A9D96E 0% 25%, #9CCE60 0% 50%) 0 0/28px 28px,
    #A9D96E;
}
.g24-gamecard[data-key="runner"] .g24-gamecard__art{
  background:linear-gradient(180deg,#3D6FB4 0%,#7FA8D9 40%,#F5D9A8 58%,#9C3A26 58%,#B0482E 100%);
}
.g24-gamecard[data-key="runner"] .g24-gamecard__art::before{
  content:'';position:absolute;left:50%;bottom:0;width:3px;height:42%;
  background:repeating-linear-gradient(180deg,#F5B301 0 6px, transparent 6px 12px);
  transform:translateX(-50%);
}
.g24-gamecard[data-key="millionaire"] .g24-gamecard__art{
  background:
    radial-gradient(120px 70px at 50% 0%, rgba(255,220,130,.4), transparent 70%),
    linear-gradient(180deg,#4A0E20,#230514);
}
.g24-gamecard[data-key="millionaire"] .g24-gamecard__art::before{
  content:'1.000.000';position:absolute;bottom:6px;left:0;right:0;
  font-family:var(--g24-font-head);font-size:12px;font-weight:800;color:rgba(245,179,1,.85);
}
.g24-gamecard[data-key="arena"] .g24-gamecard__art{
  background:linear-gradient(180deg,#5A2C7E,#3A1C52);
}
.g24-gamecard__name{font-family:var(--g24-font-head);font-weight:700;font-size:16.5px}
.g24-gamecard__desc{font-size:12.5px;color:var(--g24-muted);margin-top:4px;min-height:32px}
.g24-gamecard__meta{display:flex;justify-content:center;gap:6px;margin-top:8px}
.g24-gamecard__play{
  display:inline-block;margin-top:9px;padding:7px 16px;border-radius:999px;
  font-family:var(--g24-font-head);font-weight:800;font-size:13px;color:#fff;
  background:linear-gradient(180deg,#FF4A45 0%,var(--g24-red) 45%,var(--g24-red-dark) 100%);
  box-shadow:0 4px 10px rgba(230,0,18,.3), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.2);
  transition:transform .15s, filter .15s;
}
.g24-gamecard:hover .g24-gamecard__play{filter:brightness(1.08);transform:scale(1.05)}
.g24-gamecard.is-soon .g24-gamecard__art{filter:grayscale(.5) brightness(.92)}
.g24-gamecard.is-soon .g24-gamecard__play{
  background:linear-gradient(180deg,#B9AEB0,#97848B);box-shadow:0 3px 8px rgba(0,0,0,.15);
}

/* ---------- 6. BADGE / CHIP (mockup: chip kem viền vàng nhạt) ---------- */
.g24-badge{
  display:inline-block;padding:3px 10px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.2px;
}
.g24-badge--soon{background:#F3EDEE;color:var(--g24-muted)}
.g24-badge--beta{background:var(--g24-gold-soft);color:#8a6400}
.g24-badge--mode{background:#FFE3E5;color:var(--g24-red-dark)}
.g24-badge--good{background:var(--g24-good-bg);color:var(--g24-good)}
.g24-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:999px;
  background:linear-gradient(180deg,var(--g24-cream-2),var(--g24-cream));
  border:2px solid var(--g24-cream-line);font-size:13px;font-weight:700;color:#4A3A2A;
  box-shadow:0 3px 8px rgba(143,0,11,.10), inset 0 1px 0 #fff;
}

/* ---------- 7. NÚT (mockup: nút 3D đáy sẫm) ---------- */
.g24-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:999px;font-weight:700;font-size:15px;
  font-family:var(--g24-font-head);letter-spacing:.2px;
  /* S44 (anh Tiền báo "ấn không nhạy"): touch-action:manipulation BỎ ĐỘ TRỄ
     ~300ms mà trình duyệt điện thoại chờ xem có phải double-tap-to-zoom
     không. Đây là nguyên nhân chính khiến nút cảm giác lag trên máy học
     sinh. Thêm tap-highlight trong suốt + phản hồi nhấn nhanh hơn. */
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .09s ease-out, box-shadow .12s, filter .12s;
}
.g24-btn:active{transform:scale(.95) translateY(1px);transition-duration:.02s}
.g24-btn--primary{
  background:linear-gradient(180deg,#FF4A45 0%,var(--g24-red) 45%,var(--g24-red-dark) 100%);
  color:#fff;
  box-shadow:0 8px 18px rgba(230,0,18,.32), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.22);
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}
.g24-btn--primary:hover{filter:brightness(1.06);box-shadow:0 10px 24px rgba(230,0,18,.4), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.22)}
.g24-btn--ghost{
  background:linear-gradient(180deg,#fff,var(--g24-cream-2));
  border:2px solid var(--g24-cream-line);color:#4A3A2A;
  box-shadow:0 3px 8px rgba(143,0,11,.08), inset 0 1px 0 #fff;
}
.g24-btn--ghost:hover{border-color:var(--g24-red);color:var(--g24-red)}
.g24-btn--gold{
  background:linear-gradient(180deg,#FFD34D,var(--g24-gold) 60%,var(--g24-gold-deep));
  color:var(--g24-red-deep);
  box-shadow:0 6px 14px rgba(201,143,0,.4), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -3px 0 rgba(0,0,0,.15);
}
.g24-btn--success{
  background:linear-gradient(180deg,#4CC272 0%,#2E9E5B 55%,#1F7A42 100%);color:#fff;
  box-shadow:0 6px 14px rgba(46,158,91,.35), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.2);
}
.g24-btn--danger{
  background:linear-gradient(180deg,#8F5A5A 0%,#6E3A3A 100%);color:#fff;
  box-shadow:0 5px 12px rgba(80,30,30,.3), inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 0 rgba(0,0,0,.22);
}
.g24-btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.g24-btn--sm{padding:8px 16px;font-size:13.5px}

/* ---------- 7b. KHUNG VÀNG TRANG TRÍ (border-image) ---------- */
.g24-goldframe{
  border:14px solid transparent;
  border-image:url('../assets/bg/gold-frame.svg') 40 round;
  background:var(--g24-cream-2);
  border-radius:8px;
  box-shadow:0 10px 28px rgba(143,0,11,.22);
}

/* ---------- 8. TRANG CHI TIẾT GAME ---------- */
.g24-detail{display:grid;grid-template-columns:340px 1fr;gap:20px;align-items:start}
.g24-detail__poster{
  background:
    radial-gradient(circle at 50% 24%, #FFE9A8 0%, transparent 60%),
    linear-gradient(150deg,#FFF1F1,#FFD9DC);
  border:2px solid #F3C860;
  border-radius:24px;box-shadow:var(--g24-shadow);
  display:grid;place-items:center;padding:36px 20px;text-align:center;
}
.g24-detail__poster .icon{font-size:96px;line-height:1;animation:g24-float 3s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(143,0,11,.25))}
.g24-detail__poster .hanzi{
  margin-top:14px;font-family:var(--g24-font-head);
  font-size:15px;color:var(--g24-red-dark);font-weight:700;opacity:.75;
}
.g24-panel{background:var(--g24-card);border-radius:var(--g24-radius);box-shadow:var(--g24-shadow);padding:22px}
.g24-panel--cream{background:linear-gradient(180deg,var(--g24-cream-2),var(--g24-cream));border:2px solid var(--g24-cream-line)}
.g24-detail__title{font-family:var(--g24-font-head);font-size:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g24-detail__desc{margin-top:10px;color:#5d4f55;font-size:14.5px;line-height:1.6}
.g24-detail__facts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.g24-stars{color:var(--g24-gold);letter-spacing:2px}
.g24-detail__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.g24-back{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;
  font-weight:700;font-size:14px;color:var(--g24-red-dark);
}
.g24-back:hover{text-decoration:underline}

/* ---------- 9. WIZARD CHỌN NGUỒN CÂU HỎI ---------- */
.g24-wizard{max-width:640px;margin:0 auto}
.g24-steps{display:flex;gap:8px;margin:6px 0 18px}
.g24-steps__dot{flex:1;height:6px;border-radius:99px;background:#F0E4E6;transition:background .3s}
.g24-steps__dot.is-done{background:var(--g24-gold)}
.g24-steps__dot.is-current{background:var(--g24-red)}
.g24-field{margin-bottom:16px}
.g24-field>label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.g24-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.g24-opt{
  position:relative;display:flex;align-items:center;gap:10px;
  background:#fff;border:2px solid var(--g24-line);border-radius:var(--g24-radius-sm);
  padding:12px 14px;font-weight:600;font-size:14px;cursor:pointer;
  transition:border-color .15s, background .15s, transform .15s;
}
.g24-opt:hover{transform:translateY(-2px)}
.g24-opt input{position:absolute;opacity:0;pointer-events:none}
.g24-opt .ic{font-size:20px}
.g24-opt.is-selected{border-color:var(--g24-red);background:#FFF3F3;color:var(--g24-red-dark)}
.g24-select,.g24-input{
  width:100%;padding:12px 14px;border-radius:var(--g24-radius-sm);
  border:2px solid var(--g24-line);background:#fff;font:inherit;font-weight:600;
  color:var(--g24-ink);outline:none;transition:border-color .15s;
}
.g24-select:focus,.g24-input:focus{border-color:var(--g24-red)}
.g24-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g24-wizard__nav{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.g24-summary{
  background:#FFF9EC;border:1.5px dashed var(--g24-gold);
  border-radius:var(--g24-radius-sm);padding:14px 16px;font-size:14px;line-height:1.7;
}

/* ---------- 10. THÀNH TÍCH (stat tiles) ---------- */
.g24-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:22px}
.g24-stat{
  background:linear-gradient(180deg,#fff,var(--g24-cream-2));
  border:2px solid var(--g24-cream-line);
  border-radius:var(--g24-radius);box-shadow:var(--g24-shadow);
  padding:18px 14px;text-align:center;animation:g24-pop-in .4s ease both;
}
.g24-stat__icon{font-size:26px}
.g24-stat__value{font-family:var(--g24-font-head);font-size:24px;font-weight:800;color:var(--g24-red);margin-top:4px}
.g24-stat__label{font-size:12px;color:var(--g24-muted);margin-top:2px;font-weight:600}
.g24-achv-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.g24-achv{
  display:flex;align-items:center;gap:12px;background:var(--g24-card);
  border-radius:var(--g24-radius-sm);box-shadow:var(--g24-shadow);padding:13px 15px;
}
.g24-achv.is-locked{opacity:.55;filter:grayscale(.6)}
.g24-achv__icon{font-size:28px}
.g24-achv__name{font-weight:700;font-size:14px}
.g24-achv__desc{font-size:12px;color:var(--g24-muted)}
.g24-achv__state{margin-left:auto;font-size:18px}

/* ---------- 11. BẢNG XẾP HẠNG (mockup: bục vinh quang) ---------- */
.g24-lb-head{
  text-align:center;margin:2px 0 16px;
}
.g24-lb-head__title{
  font-family:var(--g24-font-head);font-weight:800;font-size:clamp(24px,4.6vw,34px);
  color:var(--g24-red);letter-spacing:1.5px;
  text-shadow:0 2px 0 #fff, 0 4px 10px rgba(143,0,11,.2);
}
.g24-lb-head__title .leaf{color:var(--g24-gold-deep);font-size:.8em}
.g24-lb-head__top{
  display:inline-block;margin-top:6px;padding:5px 22px;
  background:linear-gradient(180deg,#F03B2E,var(--g24-red-dark));color:#fff;
  font-family:var(--g24-font-head);font-weight:800;font-size:14px;letter-spacing:2px;
  border-radius:999px;border:2px solid #F3C860;
  box-shadow:0 4px 10px rgba(143,0,11,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.g24-podium{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:26px 0 24px;position:relative}
.g24-podium__title,.g24-podium__name,.g24-podium__score{position:relative;z-index:3}
/* Kỳ Kỳ đứng cổ vũ cạnh bục (S16) */
.g24-podium__kyky{
  position:absolute;left:calc(50% - 372px);bottom:-6px;width:84px;height:auto;
  pointer-events:none;
  filter:drop-shadow(0 6px 10px rgba(90,40,10,.35));
  animation:g24-float 2.8s ease-in-out infinite;
}
@media (max-width:700px){ .g24-podium__kyky{display:none} }   /* mobile: nhường chỗ cho triều đình */
/* ngai vàng sau lưng hạng 1 (S16) */
.g24-podium__throne{
  position:absolute;left:50%;top:-8px;transform:translateX(-50%);
  width:96px;height:92px;border-radius:22px 22px 8px 8px;z-index:0;
  background:
    radial-gradient(circle at 50% 18%, #FFE9A8 0 9px, transparent 10px),
    linear-gradient(180deg,#FFD95E 0%,var(--g24-gold) 45%,#C98F00 100%);
  border:3px solid #A66E00;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.5), inset 0 -10px 16px rgba(120,70,0,.35), 0 8px 18px rgba(90,40,10,.3);
}
.g24-podium__throne::before,.g24-podium__throne::after{
  content:'';position:absolute;top:8px;width:20px;height:78px;border-radius:12px;
  background:linear-gradient(180deg,#FFD95E,#C98F00);
  border:2.5px solid #A66E00;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.45);
}
.g24-podium__throne::before{left:-16px}
.g24-podium__throne::after{right:-16px}
.g24-podium__col{text-align:center;animation:g24-pop-in .5s ease both;position:relative}
.g24-podium__avatar{
  width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;
  font-family:var(--g24-font-head);font-weight:800;font-size:22px;color:#fff;
  border:3px solid var(--g24-gold);box-shadow:var(--g24-shadow);
  position:relative;z-index:2;
}
.g24-podium__col.rank-1 .g24-podium__avatar{width:84px;height:84px;font-size:28px;border-width:4px}
/* S19 · TRIỀU ĐÌNH: nhân vật vua/hoàng hậu/thái giám trên bục */
.g24-podium__chara{
  position:relative;z-index:2;display:inline-block;
  font-size:68px;line-height:1;
  filter:drop-shadow(0 6px 8px rgba(90,40,10,.35));
  animation:g24-float 3s ease-in-out infinite;
}
.g24-podium__col.rank-1 .g24-podium__chara{font-size:96px}
.g24-podium__col.rank-3 .g24-podium__chara{transform:rotate(10deg) translateY(4px)}
.g24-podium__title{
  font-family:var(--g24-font-head);font-weight:800;font-size:12px;letter-spacing:2px;
  color:var(--g24-gold-deep);margin-top:2px;
}
.g24-podium__col.rank-1 .g24-podium__title{color:var(--g24-red);font-size:14px}
/* avatar chữ cái thu nhỏ nằm trong pill tên */
.g24-podium__name .g24-lb__avatar{
  width:20px;height:20px;font-size:11px;vertical-align:-5px;margin-right:2px;
}
.g24-podium__crown{
  position:absolute;top:-25px;left:50%;transform:translateX(-50%) rotate(-8deg);
  font-size:26px;z-index:3;filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
/* S23 (mockup 14/08): TRỤ BỤC hình trống 3D — số hạng + TÊN + ĐIỂM ngay trên trụ */
.g24-podium__base{
  position:relative;margin-top:6px;
  border-radius:16px 16px 8px 8px;color:#fff;font-family:var(--g24-font-head);font-weight:800;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding-top:14px;gap:0;
  background:linear-gradient(180deg,#EDF1F5 0%,#B9C3CC 30%,#8B97A2 78%,#6E7A85 100%);
  box-shadow:inset 0 4px 0 rgba(255,255,255,.55), inset 12px 0 18px rgba(255,255,255,.18),
    inset -12px 0 18px rgba(0,0,0,.16), inset 0 -10px 16px rgba(0,0,0,.22),
    0 12px 22px rgba(70,40,10,.3);
  text-shadow:0 2px 2px rgba(0,0,0,.25);
}
.g24-podium__base::before{
  content:'';position:absolute;top:-7px;left:-3px;right:-3px;height:16px;border-radius:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.25));
  box-shadow:0 2px 4px rgba(0,0,0,.12);
}
.g24-podium__base .num{font-size:30px;line-height:1;opacity:.95}
/* S24: tên + LỚP + điểm trong pill sẫm mờ — RÕ CHỮ trên mọi màu trụ, không bị che */
.g24-podium__base .nm,.g24-podium__base .lop,.g24-podium__base .sc{
  background:rgba(60,20,5,.34);border-radius:999px;padding:1.5px 9px;margin-top:2.5px;
  max-width:96%;line-height:1.3;
}
.g24-podium__base .nm{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g24-podium__base .lop{font-size:11px;font-weight:800;color:#FFE9A8}
.g24-podium__base .sc{font-size:12.5px;color:#FFF3DC}
.g24-podium__col.rank-1 .g24-podium__base{
  height:146px;width:152px;
  background:linear-gradient(180deg,#FFE99C 0%,#FFD95E 26%,var(--g24-gold) 58%,#B87E00 100%);
}
.g24-podium__col.rank-1 .g24-podium__base .num{font-size:42px}
.g24-podium__col.rank-1 .g24-podium__base .nm{font-size:14.5px}
.g24-podium__col.rank-2 .g24-podium__base{height:122px;width:128px}
.g24-podium__col.rank-3 .g24-podium__base{
  height:110px;width:128px;
  background:linear-gradient(180deg,#EBB985 0%,#D89A5C 30%,#B5762F 75%,#8F5C22 100%);
}
.g24-podium__name{font-weight:700;font-size:13.5px}
.g24-podium__score{font-size:12.5px}
/* nhân vật 3D chính thức trên bục (assets/kyky/lb-<hạng>.png) */
img.g24-podium__chara--img{width:96px;height:auto;font-size:0}
img.g24-podium__chara--img.rank-1{width:150px}
img.g24-podium__chara--img.rank-3{transform:none}
/* ĐẠI SẢNH: rèm đỏ 2 bên + thảm đỏ + tường kem + vương miện */
.g24-lb-hall{
  position:relative;border-radius:22px;overflow:hidden;margin:0 0 16px;
  padding:16px 46px 14px;
  background:
    linear-gradient(180deg, rgba(179,0,14,.16) 0 46px, transparent 46px),
    radial-gradient(140% 90% at 50% 0%, #F8EFE2 0%, #EFE0C9 58%, #E4CFAF 100%);
  border:2px solid #E2CBA4;
  box-shadow:inset 0 -70px 60px -50px rgba(143,0,11,.5), var(--g24-shadow);
}
.g24-lb-hall::before,.g24-lb-hall::after{
  content:'';position:absolute;top:0;bottom:0;width:44px;z-index:1;
  background:
    repeating-linear-gradient(90deg,#C41220 0 9px,#8F000B 9px 15px,#A80E1A 15px 22px);
  box-shadow:inset 0 -40px 30px rgba(0,0,0,.25);
}
.g24-lb-hall::before{left:0;border-radius:20px 60% 0 0/20px 100% 0 0}
.g24-lb-hall::after{right:0;border-radius:60% 20px 0 0/100% 20px 0 0}
.g24-lb-hall__crown{position:absolute;top:10px;font-size:20px;opacity:.55;z-index:2;filter:sepia(1) saturate(3)}
.g24-lb-hall__crown.l{left:56px}
.g24-lb-hall__crown.r{right:56px}
.g24-lb-hall__spark{position:absolute;z-index:2;font-size:15px;animation:g24-float 2.6s ease-in-out infinite}
.g24-lb-hall__spark.s1{left:26%;top:34px}
.g24-lb-hall__spark.s2{right:24%;top:60px;animation-delay:1.2s}
.g24-lb-subject .rk{
  font-family:var(--g24-font-head);font-weight:800;font-size:15px;color:#8B97A2;line-height:1;
}
.g24-lb-subject img.bow{
  width:64px;height:auto;display:inline-block;
  transform-origin:50% 92%;animation:g24-bow 2.4s ease-in-out infinite;
}
@media (max-width:640px){
  .g24-lb-hall{padding:12px 26px 10px}
  .g24-lb-hall::before,.g24-lb-hall::after{width:22px}
  .g24-lb-hall__crown{display:none}
  .g24-podium__col.rank-1 .g24-podium__base{width:120px;height:132px}
  .g24-podium__col.rank-2 .g24-podium__base{width:102px;height:112px}
  .g24-podium__col.rank-3 .g24-podium__base{width:102px;height:104px}
  img.g24-podium__chara--img{width:72px}
  img.g24-podium__chara--img.rank-1{width:108px}
}
/* S23: tên + điểm đã nằm TRÊN TRỤ bục (chữ trắng bóng đổ) — bỏ pill kem cũ của nền stage */
/* S19 · THẦN DÂN hạng 4-8 quỳ lạy Top 3 */
.g24-lb-subjects__label{
  text-align:center;font-family:var(--g24-font-head);font-weight:800;font-size:14px;
  color:var(--g24-red-dark);margin:2px 0 8px;letter-spacing:.5px;
}
body[data-g24-bg="stage"] .g24-lb-subjects__label{
  display:inline-block;left:50%;position:relative;transform:translateX(-50%);
  background:rgba(255,251,240,.92);border-radius:999px;padding:4px 16px;
  box-shadow:0 2px 6px rgba(90,40,10,.2);
}
.g24-lb-subjects{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 20px;
}
.g24-lb-subject{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:88px;padding:8px 10px 7px;border-radius:14px;
  background:linear-gradient(180deg,var(--g24-cream-2),var(--g24-cream));
  border:2px solid var(--g24-cream-line);
  box-shadow:0 4px 10px rgba(90,40,10,.18), inset 0 1px 0 #fff;
  font-size:12px;color:#6B5138;
}
/* S24: tên + lớp GHI RÕ — cho xuống dòng, không cắt chữ */
.g24-lb-subject b{font-size:12.5px;color:var(--g24-ink);max-width:132px;text-align:center;line-height:1.25}
.g24-lb-subject .role{font-size:9.5px;font-weight:800;letter-spacing:1.2px;color:var(--g24-gold-deep)}
.g24-lb-subject .lop{font-size:11px;font-weight:800;color:#8A5B2B}
.g24-lb-subject .bow{
  font-size:30px;line-height:1;display:inline-block;
  transform-origin:50% 92%;
  animation:g24-bow 2.4s ease-in-out infinite;
}
@keyframes g24-bow{
  0%,55%,100%{transform:rotate(0)}
  20%,35%{transform:rotate(16deg) translateY(2px)}
}

.g24-lb-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;justify-content:center}
.g24-lb-filters .g24-chip{cursor:pointer;transition:all .15s}
.g24-lb-filters .g24-chip.is-selected{
  background:linear-gradient(180deg,#FF4A45,var(--g24-red-dark));
  border-color:#F3C860;color:#fff;
  box-shadow:0 4px 10px rgba(143,0,11,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.g24-lb{background:var(--g24-card);border-radius:var(--g24-radius);box-shadow:var(--g24-shadow);overflow:hidden;border:2px solid var(--g24-cream-line)}
.g24-lb__row{
  display:grid;grid-template-columns:52px 44px 1fr auto auto;gap:10px;align-items:center;
  padding:11px 16px;border-bottom:1px solid #FBF0F0;font-size:14px;
}
.g24-lb__row:last-child{border-bottom:0}
.g24-lb__row.is-me{background:#FFF9EC}
/* S22: TÊN LỚP cạnh tên học sinh (yêu cầu anh Tiền) */
.g24-lb__lop{font-size:11.5px;color:var(--g24-muted);font-weight:700;margin-top:2px}
.g24-lb__lop--inline{margin:0;font-size:11.5px}
.g24-lb__rank{font-family:var(--g24-font-head);font-weight:800;color:var(--g24-muted);text-align:center}
.g24-lb__rank.top{color:var(--g24-red);font-size:16px}
.g24-lb__avatar{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:14px;
}
.g24-lb__name{font-weight:700}
.g24-lb__game{font-size:12px;color:var(--g24-muted)}
.g24-lb__score{font-family:var(--g24-font-head);font-weight:800;color:var(--g24-red)}

/* ---------- 12. TOAST + MODAL ---------- */
.g24-toast-layer{position:fixed;left:0;right:0;bottom:24px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:200;pointer-events:none}
.g24-toast{
  background:#2B2226;color:#fff;padding:12px 20px;border-radius:999px;
  font-size:14px;font-weight:600;box-shadow:0 10px 26px rgba(0,0,0,.25);
  animation:g24-toast-in .3s ease;display:flex;gap:8px;align-items:center;
}
.g24-modal-layer{
  position:fixed;inset:0;z-index:150;display:grid;place-items:center;
  background:rgba(43,20,25,.45);backdrop-filter:blur(3px);padding:20px;
}
.g24-modal-layer[hidden]{display:none}
.g24-modal{
  background:linear-gradient(180deg,#FFFDF6,var(--g24-cream-2));
  border:2px solid var(--g24-cream-line);
  border-radius:22px;box-shadow:var(--g24-shadow-lg);
  max-width:460px;width:100%;padding:26px 24px;animation:g24-pop-in .3s ease;
  max-height:82vh;overflow:auto;
}
.g24-modal__title{font-family:var(--g24-font-head);font-size:20px;display:flex;gap:8px;align-items:center}
.g24-modal__body{margin-top:10px;font-size:14.5px;line-height:1.65;color:#5d4f55}
.g24-modal__actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ---------- 13. TRẠNG THÁI RỖNG ---------- */
.g24-empty{text-align:center;padding:48px 16px;color:var(--g24-muted)}
.g24-empty .ic{font-size:52px;display:block;margin-bottom:10px}

/* ---- S21: màn KHÓA đăng nhập (Game Center yêu cầu tài khoản app) ---- */
.g24-gate{
  max-width:420px;margin:48px auto;text-align:center;
  background:linear-gradient(180deg,#FFFDF6,var(--g24-cream-2));
  border:2px solid var(--g24-cream-line);border-radius:22px;
  padding:30px 24px;box-shadow:var(--g24-shadow-lg);animation:g24-pop-in .4s ease;
}
.g24-gate__kyky{width:110px;margin:0 auto 6px;display:block;animation:g24-float 2.8s ease-in-out infinite;filter:drop-shadow(0 8px 12px rgba(143,0,11,.3))}
.g24-gate__title{font-family:var(--g24-font-head);font-weight:800;font-size:21px;color:var(--g24-red);margin:4px 0 8px}
.g24-gate__text{font-size:14.5px;color:#5d4f55;margin:0 0 16px;line-height:1.5}
.g24-gate__hint{font-size:12px;color:var(--g24-muted);margin-top:12px}

/* ---- S22: KHU GIÁO VIÊN + ĐẤU TRƯỜNG ---- */
.g24-tch-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.g24-tch-head b{font-family:var(--g24-font-head);font-size:16px;color:var(--g24-red-dark)}
.g24-tch-sub{font-size:11.5px;color:var(--g24-muted)}
.g24-tch-list{display:flex;flex-direction:column;gap:4px;margin-top:10px;max-height:340px;overflow:auto}
.g24-tch-row{
  display:grid;grid-template-columns:26px 40px 1fr auto auto;gap:8px;align-items:center;
  padding:7px 10px;border-radius:10px;background:#FFF9F5;border:1px solid var(--g24-cream-line);font-size:13.5px;
}
.g24-tch-row.is-me{background:#FFF9EC;border-color:var(--g24-gold)}
.g24-tch-row .dot{width:10px;height:10px;border-radius:50%;background:#C9BDB4;justify-self:center}
.g24-tch-row .dot.is-on{background:#2E9E5B;box-shadow:0 0 8px rgba(46,158,91,.8)}
.g24-tch-row .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g24-tch-row .act{font-size:12px;color:#5d4f55;white-space:nowrap}
.g24-tch-row .tm{font-size:11.5px;color:var(--g24-muted);white-space:nowrap}
.g24-tch-row .sc{font-family:var(--g24-font-head);font-weight:800;color:var(--g24-red)}
.g24-tch-row .team{justify-self:center;font-size:15px}
/* S24: nút chia đội của giáo viên — bấm để chuyển 🔴↔🟡 */
button.g24-tch-row-btn, .g24-tch-row .team.is-swap{
  cursor:pointer;background:#fff;border:2px solid var(--g24-cream-line);border-radius:10px;
  padding:2px 5px;transition:transform .12s, border-color .12s;
}
.g24-tch-row .team.is-swap:hover{transform:scale(1.18);border-color:var(--g24-gold)}
.g24-tch-hint{font-size:12px;color:#8A5B2B;font-weight:700;text-align:center;margin:8px 0 0}
.g24-tch-code{
  margin:12px auto;text-align:center;background:linear-gradient(180deg,#FFF9EC,#FFEFC9);
  border:2px dashed var(--g24-gold);border-radius:16px;padding:12px 16px;
}
.g24-tch-code span{display:block;font-size:12px;color:#5d4f55;font-weight:700}
.g24-tch-code b{
  display:block;font-family:var(--g24-font-head);font-size:44px;letter-spacing:10px;
  color:var(--g24-red);text-shadow:0 2px 0 #fff;margin-top:2px;
}
.g24-tch-vs{display:flex;align-items:stretch;justify-content:center;gap:10px;margin:12px 0}
.g24-tch-vs .side{
  flex:1;max-width:220px;text-align:center;border-radius:14px;padding:10px 8px;color:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.18);position:relative;
}
.g24-tch-vs .side.red{background:linear-gradient(160deg,#E23327,#8F000B)}
.g24-tch-vs .side.gold{background:linear-gradient(160deg,#F5B301,#B87E00)}
.g24-tch-vs .side.is-win{outline:3px solid #fff;transform:scale(1.04);box-shadow:0 0 22px rgba(245,179,1,.6)}
.g24-tch-vs .tname{display:block;font-size:12px;font-weight:800;letter-spacing:.4px}
.g24-tch-vs .side b{font-family:var(--g24-font-head);font-size:26px;display:block}
.g24-tch-vs .side .win{display:block;font-size:12.5px;font-weight:800;margin-top:2px}
.g24-tch-vs .x{align-self:center;font-family:var(--g24-font-head);font-weight:800;color:var(--g24-red-dark)}
.g24-arena-hero{text-align:center;margin:8px 0 12px}
.g24-arena-hero h2{font-family:var(--g24-font-head);font-size:26px;color:var(--g24-red);margin:0}
.g24-arena-hero p{color:#5d4f55;font-size:14px;margin:4px 0 0}
.g24-arena-t1{color:#FF8A80}
.g24-arena-t2{color:#FFD34D}
.g24-arena-join{max-width:360px;margin:0 auto;padding:20px;display:flex;flex-direction:column;gap:12px;align-items:center}
.g24-arena-code{
  width:100%;max-width:280px;text-align:center;font-family:var(--g24-font-head);
  font-size:34px;letter-spacing:10px;padding:10px 6px;border-radius:14px;
  border:2px solid var(--g24-cream-line);background:#FFFDF6;color:var(--g24-red-deep);
}
.g24-arena-code:focus{outline:none;border-color:var(--g24-gold);box-shadow:0 0 0 3px rgba(245,179,1,.25)}
.g24-arena-final{
  text-align:center;font-family:var(--g24-font-head);font-weight:800;font-size:18px;
  color:var(--g24-red);background:linear-gradient(180deg,#FFF3C9,#FFE49A);
  border:2px solid var(--g24-gold);border-radius:999px;padding:8px 18px;margin-bottom:10px;
  animation:g24-mil-newrec .7s ease;
}
@media(max-width:680px){
  .g24-tch-row{grid-template-columns:20px 32px 1fr auto;font-size:12.5px}
  .g24-tch-row .tm{display:none}
  .g24-tch-code b{font-size:34px;letter-spacing:7px}
}

/* ---------- 14. FOOTER ---------- */
.g24-footer{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:18px 4px 26px;color:var(--g24-muted);font-size:12.5px;font-weight:600;
}
.g24-footer__back{color:var(--g24-red-dark);font-weight:700}
.g24-footer__back:hover{text-decoration:underline}

/* ============================================================
   14b. 🧠 LẬT THẺ GHI NHỚ (mockup: thẻ đỏ 中 + khung vàng + thủy mặc)
   ============================================================ */
/* bàn chơi trong khung vàng trên nền kem */
.g24-mem-frame{
  /* S38 (chỉ thị anh Tiền): chừa DẢI TRỐNG dưới bảng thẻ để Kỳ Kỳ đứng —
     trước đây Kỳ Kỳ absolute đè lên góc dưới-phải, che mất 1-2 thẻ. */
  max-width:760px;margin:0 auto;padding:16px 14px clamp(64px,11vw,96px);
  background:linear-gradient(180deg,rgba(255,251,240,.92),rgba(255,246,227,.92));
  border:14px solid transparent;
  border-image:url('../assets/bg/gold-frame.svg') 40 round;
  border-radius:10px;
  box-shadow:0 12px 30px rgba(120,60,20,.25);
}
.g24-mem-board{
  display:grid;gap:10px;max-width:720px;margin:0 auto;
  grid-template-columns:repeat(4,1fr);
}
.g24-mem-board[data-size="l"]{grid-template-columns:repeat(4,1fr)}
.g24-mem-board[data-size="m"]{grid-template-columns:repeat(4,1fr)}
.g24-mem-board[data-size="s"]{grid-template-columns:repeat(6,1fr)}
.g24-mem-card{
  position:relative;aspect-ratio:3/4;min-height:72px;
  perspective:600px;border-radius:14px;padding:0;background:none;
  -webkit-tap-highlight-color:transparent;
}
.g24-mem-card:focus-visible{outline:3px solid var(--g24-gold);outline-offset:2px;border-radius:14px}
.g24-mem-card__inner{
  position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.4,1.4,.6,1);
}
.g24-mem-card.is-open .g24-mem-card__inner,
.g24-mem-card.is-matched .g24-mem-card__inner{transform:rotateY(180deg)}
.g24-mem-card__front,.g24-mem-card__back{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:12px;display:grid;place-items:center;padding:6px;
}
/* MẶT ÚP — thẻ đỏ hoa văn vảy + viền vàng kép + ô kim cương chữ 中 (mockup) */
.g24-mem-card__front{
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.10) 0 6px, transparent 7px),
    radial-gradient(circle at 0 50%, rgba(0,0,0,.10) 0 5px, transparent 6px),
    linear-gradient(160deg,#E23327 0%,#C21422 55%,#9C0715 100%);
  background-size:22px 22px, 22px 22px, 100% 100%;
  border:3px solid #F6F0DF;
  box-shadow:
    inset 0 0 0 2.5px #D8A93C,
    inset 0 0 18px rgba(0,0,0,.28),
    0 5px 12px rgba(120,10,10,.35);
  overflow:hidden;
}
.g24-mem-card__front .g24-mem-card__mark{
  position:relative;width:56%;aspect-ratio:1;display:grid;place-items:center;
}
.g24-mem-card__front .g24-mem-card__mark::before{
  content:'';position:absolute;inset:6%;
  transform:rotate(45deg);
  background:linear-gradient(160deg,#B10E1C,#8A0512);
  border:2px solid #E9B33B;border-radius:12%;
  box-shadow:inset 0 0 8px rgba(0,0,0,.35);
}
.g24-mem-card__front .g24-mem-card__zh{
  /* S38: chữ 中 mặt úp chỉ là HOA VĂN — thu nhỏ + giảm tương phản để
     mắt tập trung vào thẻ đã lật (chữ Hán/nghĩa thật), đỡ rối bảng. */
  position:relative;z-index:1;
  font-family:var(--g24-font-zh);font-weight:700;
  font-size:clamp(15px,3.2vw,23px);line-height:1;
  color:rgba(247,214,124,.72);text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.g24-mem-card:not(.is-open):not(.is-matched):hover .g24-mem-card__inner{transform:rotateY(0) scale(1.04)}
/* MẶT NGỬA — giấy kem viền vàng */
.g24-mem-card__back{
  background:linear-gradient(180deg,#FFFDF6,#FFF3DC);
  transform:rotateY(180deg);
  border:2.5px solid var(--g24-gold);box-shadow:0 4px 12px rgba(179,0,14,.15), inset 0 0 0 2px #fff;
  flex-direction:column;text-align:center;overflow:hidden;
}
.g24-mem-card__hanzi{
  font-family:var(--g24-font-zh);
  font-size:clamp(24px,5.4vw,40px);font-weight:700;line-height:1.1;color:#8A0512;   /* S18: to hơn */
}
.g24-mem-card__pinyin{display:block;font-size:clamp(10px,2vw,13px);color:#A9895E;font-weight:600}
.g24-mem-card__meaning{
  font-size:clamp(12.5px,2.8vw,16.5px);font-weight:700;color:var(--g24-red-dark);   /* S18: to hơn */
  line-height:1.25;word-break:break-word;
}
.g24-mem-card.is-matched{pointer-events:none}
.g24-mem-card.is-matched .g24-mem-card__back{
  background:var(--g24-good-bg);border-color:var(--g24-good);opacity:.85;
  animation:g24-mem-lock .4s ease;
}
.g24-mem-card.is-shake{animation:g24-mem-shake .4s ease}
/* Kỳ Kỳ ló góc bàn (mockup góc phải-dưới) */
.g24-mem-mascot{
  /* đứng trong dải trống dưới bảng thẻ — KHÔNG che thẻ nào */
  position:absolute;right:10px;bottom:2px;height:clamp(52px,9.5vw,86px);width:auto;
  pointer-events:none;z-index:6;
  filter:drop-shadow(0 6px 10px rgba(80,10,10,.35));
  /* S38: biên độ nhún NHỎ (5px) — animation cũ dịch lên ~28px khiến Kỳ Kỳ
     chạm thẻ hàng cuối dù đã có dải trống riêng. */
  animation:g24-mem-float 3.4s ease-in-out infinite;
}
/* thẻ đỏ mini trong tay Kỳ Kỳ (S16) */
.g24-mem-prop{
  position:absolute;right:calc(clamp(58px,10vw,92px) + 14px);bottom:12px;
  width:22px;height:29px;border-radius:5px;z-index:7;pointer-events:none;
  display:grid;place-items:center;
  background:linear-gradient(160deg,#E23327,#9C0715);
  border:1.5px solid #F6F0DF;box-shadow:inset 0 0 0 1.5px #D8A93C, 0 3px 6px rgba(80,10,10,.4);
  color:#F7D67C;font-family:var(--g24-font-zh);font-size:15px;font-weight:700;
  transform:rotate(-14deg);
  animation:g24-float 3.4s ease-in-out infinite;
}
/* cuốc chim Kỳ Kỳ thợ mỏ (S16) */
.g24-wp-prop{
  position:absolute;left:calc(clamp(76px,14vw,124px) - 26px);bottom:6px;
  font-size:30px;z-index:7;pointer-events:none;
  transform:rotate(38deg) scaleX(-1);
  filter:drop-shadow(0 4px 6px rgba(30,5,5,.5));
  animation:g24-float 3.4s ease-in-out infinite;
}
/* mic MC gameshow (S16) */
.g24-mil-mic{
  position:absolute;font-size:22px;z-index:3;pointer-events:none;
  transform:rotate(-18deg);
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.5));
  animation:g24-float 3.2s ease-in-out infinite;
  margin-left:-26px;margin-top:44px;
}
.g24-mil-host{position:relative}
.g24-mil-mic{left:auto;right:8px;bottom:6px;margin:0}

.g24-mem-spark{
  position:absolute;font-size:12px;pointer-events:none;z-index:5;
  animation:g24-mem-spark .8s ease forwards;
}
.g24-mem-combopop{
  position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--g24-font-head);font-weight:800;font-size:30px;color:var(--g24-red);
  -webkit-text-stroke:1px #fff;pointer-events:none;opacity:0;z-index:20;
}
.g24-mem-combopop.is-show{animation:g24-mem-combo 1s ease forwards}
.g24-mem-overlay{
  position:absolute;inset:0;z-index:15;display:grid;place-items:center;
  background:rgba(43,20,25,.5);backdrop-filter:blur(2px);border-radius:var(--g24-radius);padding:14px;
}
.g24-mem-warn{background:#FFE3E3!important;color:var(--g24-red)!important;animation:g24-mem-pulse 1s infinite}
.g24-mem-confetti{
  position:absolute;top:-12px;width:8px;height:8px;border-radius:2px;pointer-events:none;z-index:30;
  animation-name:g24-mem-fall;animation-timing-function:linear;animation-fill-mode:forwards;
}
@keyframes g24-mem-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes g24-mem-lock{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes g24-mem-spark{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-22px) scale(1.6)}}
@keyframes g24-mem-combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-70%) scale(1)}}
@keyframes g24-mem-pulse{50%{opacity:.6}}
@keyframes g24-mem-fall{to{transform:translateY(78vh) rotate(340deg);opacity:.2}}
@media (max-width:620px){
  .g24-mem-board{gap:7px}
  .g24-mem-board[data-size="s"]{grid-template-columns:repeat(4,1fr)}
  .g24-mem-card{min-height:64px}
  .g24-mem-frame{padding:10px 8px clamp(58px,15vw,74px)}   /* S38: chừa chỗ Kỳ Kỳ đứng, không che thẻ */
}

/* ============================================================
   14c. 🧩 GHÉP CHỮ HÁN (mockup: cửa hang đá + ô sáng + khay gỗ)
   ============================================================ */
.g24-wp-board{max-width:640px;margin:10px auto 0;position:relative}
/* ĐỀ BÀI: bảng kem bo tròn, chữ đỏ đậm (mockup "bưu điện") */
.g24-wp-prompt{
  max-width:560px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  background:linear-gradient(180deg,var(--g24-cream-2),var(--g24-cream));
  border:2px solid var(--g24-cream-line);border-radius:18px;
  font-family:var(--g24-font-head);font-size:clamp(22px,4vw,32px);font-weight:800;
  text-align:center;min-height:38px;color:var(--g24-red-dark);
  box-shadow:0 6px 16px rgba(46,10,27,.32), inset 0 1px 0 #fff;
}
.g24-wp-prompt__text{flex:0 1 auto;min-width:0}
/* MÂY ĐỎ cát tường 2 bên đề bài (mockup 14/08) — vẽ thuần CSS */
.g24-wp-cloud{
  flex:0 0 auto;position:relative;width:44px;height:20px;border-radius:999px;
  background:linear-gradient(180deg,#E85A4F,#C21422);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35), 0 2px 4px rgba(143,0,11,.3);
}
.g24-wp-cloud::before,.g24-wp-cloud::after{
  content:'';position:absolute;border-radius:50%;
  background:linear-gradient(180deg,#F07A66,#C21422);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35);
}
.g24-wp-cloud::before{width:20px;height:20px;top:-10px;left:7px}
.g24-wp-cloud::after{width:14px;height:14px;top:-6px;right:8px}
.g24-wp-cloud.r{transform:scaleX(-1)}
/* chips chỉ số kiểu mockup: kem nổi khối, chữ đậm */
.g24-wp-stats .g24-chip{
  font-size:14px;padding:8px 14px;border-radius:16px;
  background:linear-gradient(180deg,#FFFDF6,var(--g24-cream-2));
  border:2px solid var(--g24-cream-line);
  box-shadow:0 4px 10px rgba(46,10,27,.22), inset 0 1px 0 #fff;
}
.g24-wp-stats .g24-btn--sm{border-radius:16px}
/* BẢNG GỖ hướng dẫn gắn trên cửa hang */
.g24-wp-plank{
  position:relative;z-index:2;
  max-width:420px;margin:0 auto -14px;padding:7px 18px;
  background:url('../assets/bg/wood.svg'), var(--g24-wood);
  background-size:240px 160px;
  border:2.5px solid #4A2C17;border-radius:10px;
  font-size:13px;font-weight:700;color:#FFE9C4;text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  box-shadow:0 4px 10px rgba(30,5,5,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
/* CỬA HANG: khung đá (border-image) + lòng hang tối (S23: sâu + ấm hơn theo mockup) */
.g24-wp-slots{
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
  padding:30px 18px;min-height:118px;
  border:26px solid transparent;
  border-image:url('../assets/bg/stone-frame.svg') 80 round;
  border-radius:14px;
  background:
    radial-gradient(80% 120% at 78% 88%, rgba(255,150,50,.22) 0%, transparent 45%),
    radial-gradient(circle at 50% 8%, #433126 0%, #1C120D 72%),
    #1C120D;
  box-shadow:inset 0 0 40px rgba(0,0,0,.8);
  position:relative;
}
/* S23 (mockup): đèn lồng mỏ treo bên phải cửa hang — toả sáng ấm, đung đưa nhẹ */
.g24-wp-lantern{
  position:absolute;right:-6px;bottom:22px;font-size:44px;z-index:6;pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(255,160,60,.85)) drop-shadow(0 5px 8px rgba(30,5,5,.5));
  transform-origin:50% -12px;animation:g24-wp-sway 3.2s ease-in-out infinite;
}
@keyframes g24-wp-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.g24-wp-gem{
  position:absolute;right:34px;bottom:-2px;font-size:22px;z-index:6;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(255,214,110,.9));
}
.g24-wp-spark{position:absolute;z-index:6;pointer-events:none;font-size:13px;animation:g24-wp-tw 2.2s ease-in-out infinite}
.g24-wp-spark.s1{left:8px;top:26px}
.g24-wp-spark.s2{right:14px;top:56px;animation-delay:.7s}
.g24-wp-spark.s3{left:30px;bottom:40px;animation-delay:1.4s;font-size:11px}
@keyframes g24-wp-tw{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
/* Ô ĐÁP ÁN phát sáng nét đứt (mockup) */
.g24-wp-slot{
  width:74px;height:74px;min-width:52px;min-height:52px;flex:0 0 auto;
  border-radius:16px;padding:0;
  border:3px dashed rgba(255,232,160,.9);background:rgba(255,244,200,.07);
  font-family:var(--g24-font-zh);
  font-size:40px;font-weight:700;color:#FFF3DC;
  box-shadow:0 0 16px rgba(255,214,110,.45), inset 0 0 12px rgba(255,214,110,.15);
  transition:transform .15s, border-color .15s, background .15s, box-shadow .15s;
  animation:g24-wp-slotglow 2.4s ease-in-out infinite;
}
@keyframes g24-wp-slotglow{
  0%,100%{box-shadow:0 0 12px rgba(255,214,110,.35), inset 0 0 10px rgba(255,214,110,.12)}
  50%{box-shadow:0 0 22px rgba(255,214,110,.65), inset 0 0 14px rgba(255,214,110,.2)}
}
.g24-wp-slot:focus-visible{outline:3px solid var(--g24-gold);outline-offset:2px}
.g24-wp-slot.is-filled{
  border-style:solid;border-color:var(--g24-gold);
  background:linear-gradient(180deg,#FFFDF6,#FFEFC9);color:#8A0512;
  box-shadow:0 0 16px rgba(255,214,110,.55);
  animation:g24-mem-lock .3s ease;
}
.g24-wp-slot.is-over{
  border-color:#FFD34D;background:rgba(255,214,110,.28);transform:scale(1.1);
  box-shadow:0 0 22px rgba(255,214,110,.8);
}
/* KHAY GỖ chứa thẻ chữ — S23: BỆ GỖ DÀY 3D theo mockup (nẹp góc kim loại, mép nổi) */
.g24-wp-tray{
  position:relative;
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-top:20px;
  padding:22px 18px 26px;border-radius:18px;
  background:url('../assets/bg/wood.svg'), var(--g24-wood);
  background-size:240px 160px;
  border:4px solid #4A2C17;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.16), inset 0 -12px 20px rgba(0,0,0,.38),
    0 8px 0 #3A2010, 0 16px 28px rgba(46,10,27,.45);
}
.g24-wp-tray::before,.g24-wp-tray::after{
  content:'';position:absolute;top:8px;width:14px;height:14px;border-radius:4px;
  background:linear-gradient(135deg,#8B96A0,#4E585F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 3px rgba(0,0,0,.4);
}
.g24-wp-tray::before{left:10px}
.g24-wp-tray::after{right:10px}
/* THẺ CHỮ: ngà voi viền vàng đế dày, chữ đỏ LỚN (mockup 邮 局 二) */
.g24-wp-token{
  width:76px;height:76px;min-width:54px;min-height:54px;flex:0 0 auto;
  border-radius:14px;padding:0;cursor:grab;
  background:linear-gradient(180deg,#FFFDF6 0%,#FBEED2 66%,#EED9AC 100%);
  border:2.5px solid #D8A93C;
  box-shadow:0 7px 0 #C9962F, 0 11px 16px rgba(46,10,27,.4), inset 0 2px 0 #fff;
  font-family:var(--g24-font-zh);
  font-size:48px;font-weight:700;color:#C21422;        /* S23: thẻ + chữ TO như mockup */
  transition:transform .15s, box-shadow .15s, opacity .2s;
  touch-action:none;
}
.g24-wp-token:hover{transform:translateY(-4px) rotate(-3deg);box-shadow:0 8px 0 #B98A2C, 0 12px 18px rgba(46,10,27,.4), inset 0 1px 0 #fff}
.g24-wp-token:focus-visible{outline:3px solid var(--g24-gold);outline-offset:2px}
.g24-wp-token.is-used{opacity:.25;pointer-events:none;transform:scale(.9)}
.g24-wp-ghost{
  position:fixed;z-index:300;pointer-events:none;
  transform:translate(-50%,-50%) scale(1.15) rotate(4deg);
  box-shadow:0 12px 26px rgba(179,0,14,.35);
}
.g24-wp-peek{
  text-align:center;font-family:var(--g24-font-zh);font-size:26px;font-weight:700;
  color:var(--g24-red);min-height:0;max-height:0;overflow:hidden;transition:all .25s;
}
.g24-wp-peek.is-show{min-height:40px;max-height:40px;padding-top:6px}
.g24-wp-slots.g24-wp-shake{animation:g24-mem-shake .4s ease}
.g24-wp-slots.g24-wp-win{border-color:transparent;background:radial-gradient(circle at 50% 20%, #2E5B36 0%, #17301C 70%)}
/* Kỳ Kỳ thợ mỏ đứng cạnh hang (mockup trái) + đèn lồng treo phải */
.g24-wp-mascot{
  position:absolute;left:-18px;bottom:-8px;width:clamp(92px,17vw,160px);   /* S23: Kỳ Kỳ to như mockup */
  pointer-events:none;z-index:6;
  filter:drop-shadow(0 8px 12px rgba(30,5,5,.55));
  animation:g24-float 3.4s ease-in-out infinite;
}
@media (max-width:480px){
  .g24-wp-slot{width:60px;height:60px;font-size:34px}
  .g24-wp-token{width:62px;height:62px;font-size:38px}
  .g24-wp-slots{gap:10px;border-width:18px;padding:20px 10px}
  .g24-wp-tray{gap:10px}
  .g24-wp-cloud{display:none}
  .g24-wp-lantern{font-size:34px;right:-2px}
}

/* ============================================================
   S18. MOBILE KHÔNG PHẢI CUỘN KHI CHƠI — banner/breadcrumb thu gọn
   trong màn chơi trên màn hình nhỏ (đề bài đã nằm cạnh Kỳ Kỳ).
   ============================================================ */
@media (max-width:680px), (max-height:700px){
  body[data-g24-bg="gold-miner"] .g24-banner,
  body[data-g24-bg="bubble-shooter"] .g24-banner,
  body[data-g24-bg="snake"] .g24-banner,
  body[data-g24-bg="runner"] .g24-banner,
  body[data-g24-bg="word-puzzle"] .g24-banner,
  body[data-g24-bg="memory-card"] .g24-banner,
  body[data-g24-bg="millionaire"] .g24-banner{display:none}
  body[data-g24-bg] .g24-back{font-size:12.5px;margin-bottom:6px}
  body[data-g24-bg] .g24-root{padding-top:8px}
}

/* ============================================================
   14d. 🐍 SNAKE TIẾNG TRUNG (Sprint 13 — vườn cỏ trong khung vàng)
   ============================================================ */
.g24-snk-box{
  position:relative;max-width:720px;margin:0 auto;padding:8px;
  background:linear-gradient(180deg,#6FA845,#578A33);
  border:4px solid #D8A93C;border-radius:16px;
  box-shadow:0 10px 26px rgba(46,10,27,.4), inset 0 2px 0 rgba(255,255,255,.25), inset 0 -4px 10px rgba(0,0,0,.25);
}
/* S42: khung bàn cỏ nay do ASSET vẽ ngay trong canvas → bỏ nền xanh +
   viền vàng của hộp ngoài, nếu không sẽ thành HAI lớp khung lồng nhau.
   ⚠️ KHÔNG dùng width:fit-content ở đây — canvas tự đo bề rộng hộp để
   tính cỡ ô, fit-content tạo vòng lặp co dần (đã thấy bàn tụt còn 277px). */
.g24-snk-box{
  background:none;border:none;padding:0;
  box-shadow:none;
}
/* D-pad ảo — hiện trên thiết bị chạm, ẩn khi có chuột */
.g24-snk-pad{
  display:grid;grid-template-areas:". up ." "left down right";
  gap:8px;justify-content:center;margin:12px auto 2px;user-select:none;
}
.g24-snk-pad__btn{
  width:56px;height:48px;border-radius:14px;
  font-size:18px;font-weight:800;color:#8A5F00;
  background:linear-gradient(180deg,#FFFDF6,#FBEED2);
  border:2px solid #D8A93C;
  box-shadow:0 4px 0 #B98A2C, 0 6px 10px rgba(46,10,27,.3), inset 0 1px 0 #fff;
  touch-action:none;-webkit-tap-highlight-color:transparent;
}
.g24-snk-pad__btn:active{transform:translateY(2px);box-shadow:0 2px 0 #B98A2C, inset 0 1px 0 #fff}
.g24-snk-pad__btn--up{grid-area:up}
.g24-snk-pad__btn--left{grid-area:left}
.g24-snk-pad__btn--down{grid-area:down}
.g24-snk-pad__btn--right{grid-area:right}
@media (hover:hover) and (pointer:fine){ .g24-snk-pad{display:none} }

/* ============================================================
   14e. 🏃 CHẠY CÙNG KỲ KỲ (Sprint 14 — đường đua phối cảnh)
   ============================================================ */
.g24-run-box{
  position:relative;max-width:760px;margin:0 auto;padding:4px;
  background:linear-gradient(180deg,#3D2A1C,#241610);
  border:4px solid #D8A93C;border-radius:16px;
  box-shadow:0 10px 26px rgba(30,8,20,.5), inset 0 2px 0 rgba(255,255,255,.15);
}
/* nút ảo runner: dùng chung kiểu nút D-pad snake, xếp hàng ngang */
.g24-run-pad{
  display:flex;gap:10px;justify-content:center;margin:12px auto 2px;user-select:none;
}
@media (hover:hover) and (pointer:fine){ .g24-run-pad{display:none} }

/* ---------- S51 · THANH ĐIỀU KHIỂN THEO ẢNH MẪU ANH TIỀN ----------
 * Ba nút kem viền vàng, mũi tên ĐỎ 24G, đặt trên một thanh nền đỏ sẫm
 * như thanh dưới cùng của ảnh mẫu. Vùng chạm 56px (yêu cầu ≥52px).
 * CHỈ đổi hình thức — sự kiện pointerdown và hành vi giữ nguyên. */
.g24-run-pad{
  gap:14px;padding:10px 12px;border-radius:18px;
  background:linear-gradient(180deg,#A81017,#7C0810);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.14), 0 6px 16px rgba(40,4,10,.34);
  max-width:360px;
}
.g24-run-pad .g24-snk-pad__btn{
  width:92px;height:56px;border-radius:16px;
  font-size:24px;line-height:1;color:#D01B23;
  background:linear-gradient(180deg,#FFFCF2,#F6E6C4);
  border:3px solid #E8B23A;
  box-shadow:0 5px 0 #B98A2C, 0 8px 14px rgba(40,4,10,.34), inset 0 2px 0 #fff;
}
.g24-run-pad .g24-snk-pad__btn:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 #B98A2C, inset 0 2px 0 #fff;
}
@media (max-width:360px){
  .g24-run-pad{gap:9px;padding:8px}
  .g24-run-pad .g24-snk-pad__btn{width:78px;height:54px;font-size:22px}
}
/* S51 · dải tiêu đề màn kết ván của game chạy — theo tấm thẻ ảnh mẫu */
.g24-run-kq__bang{
  margin:-6px -6px 8px;padding:9px 14px;
  background:linear-gradient(180deg,#E4222B,#A80E17);
  border:2px solid #F0C463;border-radius:14px 14px 12px 12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 4px 10px rgba(90,6,12,.28);
  text-align:center;
}
.g24-run-kq__bang span{
  font-family:var(--g24-font-head);font-weight:800;letter-spacing:.4px;
  font-size:21px;color:#FFF6E2;text-shadow:0 2px 0 rgba(90,6,12,.55);
}
@media (max-width:400px){ .g24-run-kq__bang span{font-size:19px} }

/* chữ sáng cho trang runner (nền đậm) */
body[data-g24-bg="runner"] .g24-footer{color:rgba(255,255,255,.85)}
body[data-g24-bg="runner"] .g24-footer__back{color:var(--g24-gold-soft)}
body[data-g24-bg="runner"] .g24-back{color:#fff}

/* ============================================================
   14f. ❓ AI LÀ TRIỆU PHÚ (Sprint 15 — sân khấu gameshow)
   ============================================================ */
.g24-mil-stage{
  position:relative;max-width:860px;margin:0 auto;padding:18px 14px 20px;
  border-radius:22px;overflow:hidden;
  background:
    url('../assets/kyky/bg-stage.jpg') center/cover no-repeat,
    radial-gradient(700px 340px at 50% 0%, rgba(230,60,70,.35) 0%, transparent 60%),
    radial-gradient(900px 500px at 50% 115%, rgba(245,179,1,.14) 0%, transparent 55%),
    linear-gradient(180deg,#4A0E20 0%,#33091B 60%,#230514 100%);
  border:3px solid rgba(245,179,1,.55);
  box-shadow:0 14px 38px rgba(10,0,8,.6), inset 0 0 60px rgba(0,0,0,.45);
  display:grid;grid-template-columns:1fr 168px;grid-template-areas:"center ladder" "host ladder";
  gap:12px;
}
/* tia đèn quét + spotlight */
.g24-mil-beam{
  position:absolute;top:-10%;width:26%;height:75%;pointer-events:none;
  background:linear-gradient(180deg, rgba(255,220,130,.2), rgba(255,220,130,0));
  clip-path:polygon(42% 0, 58% 0, 100% 100%, 0% 100%);
  transform-origin:top center;opacity:.8;
}
.g24-mil-beam--l{left:6%;animation:g24-mil-sway 5.5s ease-in-out infinite}
.g24-mil-beam--r{right:6%;animation:g24-mil-sway 5.5s ease-in-out infinite reverse}
.g24-mil-spot{
  position:absolute;left:50%;top:-14%;width:120%;height:80%;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,236,180,.16), transparent 70%);
  pointer-events:none;
}
.g24-mil-dust{
  position:absolute;bottom:8%;width:5px;height:5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #FFE9A8, #F5B301);
  opacity:0;pointer-events:none;
  animation:g24-mil-dust 6s linear infinite;
}
@keyframes g24-mil-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes g24-mil-dust{
  0%{transform:translateY(0) scale(.7);opacity:0}
  15%{opacity:.85}
  100%{transform:translateY(-320px) scale(1.15);opacity:0}
}
.g24-mil-stage.is-shake{animation:g24-mem-shake .45s ease}
/* S18-V2: TENSION — mốc tiền cao, sân khấu đổi không khí (không gây chóng mặt) */
.g24-mil-stage.is-tension{
  border-color:rgba(255,90,80,.75);
}
.g24-mil-stage.is-tension .g24-mil-beam{
  background:linear-gradient(180deg, rgba(255,120,90,.26), rgba(255,120,90,0));
  animation-duration:2.6s;
}
.g24-mil-stage.is-tension .g24-mil-spot{
  background:radial-gradient(closest-side, rgba(255,140,110,.14), transparent 70%);
  animation:g24-mem-pulse 1.6s infinite;
}
.g24-mil-stage.is-tension .g24-mil-question{
  box-shadow:0 0 26px rgba(255,90,60,.4), inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.4);
}
/* S19: CLIMAX câu 13-15 — dồn ép hơn tension một bậc, vẫn không gây chóng mặt */
.g24-mil-stage.is-climax{border-color:rgba(255,60,50,.9)}
.g24-mil-stage.is-climax .g24-mil-beam{animation-duration:1.9s}
.g24-mil-stage.is-climax .g24-mil-spot{animation:g24-mem-pulse 1.1s infinite}

/* overlay mở → dừng animation nền dưới lớp blur (backdrop-filter + animation = tụt FPS) */
.g24-mil-stage.is-overlay .g24-mil-beam,
.g24-mil-stage.is-overlay .g24-mil-dust,
.g24-mil-stage.is-overlay .g24-mil-mic,
.g24-mil-stage.is-overlay .g24-mem-confetti,
.g24-mil-stage.is-overlay .g24-mil-host__img{animation-play-state:paused}
.g24-mil-stage.is-cheer{animation:g24-mil-cheer .6s ease}
@keyframes g24-mil-cheer{0%,100%{filter:brightness(1)}40%{filter:brightness(1.28)}}

/* ---- host Kỳ Kỳ ---- */
.g24-mil-host{grid-area:host;display:flex;align-items:flex-end;gap:10px;min-height:104px;z-index:2}
.g24-mil-host__img{
  width:clamp(72px,10vw,104px);height:auto;flex:0 0 auto;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.5));
  animation:g24-float 3.2s ease-in-out infinite;
  transition:transform .3s;
}
.g24-mil-host__img.is-happy{animation:g24-mil-jump .55s ease 2}
.g24-mil-host__img.is-sad{transform:rotate(-7deg);filter:drop-shadow(0 8px 12px rgba(0,0,0,.5)) grayscale(.25)}
.g24-mil-host__img.is-think{transform:rotate(4deg)}
.g24-mil-host__img.is-point{transform:rotate(-6deg) translateX(6px)}          /* MC chỉ tay vào câu hỏi */
.g24-mil-host__img.is-excited{animation:g24-mil-jump .5s ease infinite}       /* phấn khích mốc cao */
@keyframes g24-mil-jump{0%,100%{transform:translateY(0)}45%{transform:translateY(-16px) rotate(-4deg)}}
.g24-mil-bubble{
  position:relative;flex:1;max-width:420px;
  background:linear-gradient(180deg,#FFFDF6,var(--g24-cream));
  border:2px solid var(--g24-cream-line);border-radius:14px 14px 14px 4px;
  padding:9px 13px;font-size:13.5px;font-weight:700;color:#4A3A2A;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
  min-height:40px;
}
.g24-mil-bubble.is-pop{animation:g24-pop-in .35s ease}

/* ---- trung tâm ---- */
.g24-mil-center{grid-area:center;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.g24-mil-timer{position:relative;width:58px;height:58px}
.g24-mil-timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.g24-mil-timer .bg{fill:rgba(0,0,0,.45);stroke:rgba(255,255,255,.18);stroke-width:5}
.g24-mil-timer .fg{
  fill:none;stroke:var(--g24-gold);stroke-width:5;stroke-linecap:round;
  transition:stroke-dashoffset 1s linear, stroke .3s;
}
.g24-mil-timer b{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--g24-font-head);font-size:19px;color:#FFF3DC;
}
.g24-mil-timer.is-warning .fg{stroke:#FF5A4E}
.g24-mil-timer.is-warning b{color:#FF8A80;animation:g24-mem-pulse .8s infinite}

/* panel câu hỏi */
.g24-mil-question{
  width:100%;max-width:560px;min-height:64px;
  display:grid;place-items:center;text-align:center;
  padding:14px 20px;border-radius:16px;
  background:linear-gradient(180deg, rgba(20,4,12,.92), rgba(40,8,22,.92));
  border:2px solid var(--g24-gold);
  box-shadow:0 0 22px rgba(245,179,1,.28), inset 0 1px 0 rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.4);
  font-family:var(--g24-font-head);font-weight:800;
  font-size:clamp(18px,3.2vw,25px);color:#FFFDF6;
  text-shadow:0 2px 4px rgba(0,0,0,.6);
}
.g24-mil-question.is-in{animation:g24-pop-in .4s ease}

/* 4 nút đáp án lozenge */
.g24-mil-answers{
  width:100%;max-width:620px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.g24-mil-ans{
  position:relative;display:flex;align-items:center;gap:10px;
  min-height:56px;padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(180deg,#3A0D22 0%,#1E0510 100%);
  border:2px solid rgba(245,179,1,.65);
  color:#FFFDF6;font-family:var(--g24-font-zh);
  font-size:clamp(18px,3vw,24px);font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 5px 12px rgba(0,0,0,.4);
  transition:transform .15s, box-shadow .2s, background .2s, opacity .3s, border-color .2s;
  text-align:left;
}
.g24-mil-ans.is-in{animation:g24-pop-in .4s ease both}
.g24-mil-ans:hover:not(:disabled){
  transform:translateY(-2px);
  border-color:#FFD34D;box-shadow:0 0 16px rgba(245,179,1,.4), 0 7px 14px rgba(0,0,0,.45);
}
.g24-mil-ans:disabled{cursor:default}
.g24-mil-ans .letter{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(180deg,#FFD34D,var(--g24-gold));
  color:var(--g24-red-deep);font-family:var(--g24-font-head);font-size:16px;font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.35);
}
.g24-mil-ans .text{flex:1;line-height:1.2;word-break:break-word}
/* đáp án là CÂU dài (kho câu khó / dịch nghĩa) → cỡ chữ hợp lý, vẫn rõ */
.g24-mil-ans.is-long{font-size:clamp(14px,2.2vw,17px);font-family:var(--g24-font-body);font-weight:600}
.g24-mil-ans.is-long .text{line-height:1.35}
.g24-mil-ans.is-selected{
  background:linear-gradient(180deg,#B8741A,#8A5200);
  border-color:#FFD34D;
  animation:g24-mil-blink .55s ease infinite;
}
@keyframes g24-mil-blink{50%{box-shadow:0 0 26px rgba(255,211,77,.75)}}
.g24-mil-ans.is-correct{
  background:linear-gradient(180deg,#1F8A46,#0E5C2B);
  border-color:#7CE28F;
  box-shadow:0 0 26px rgba(46,158,91,.65);
  animation:g24-mem-lock .5s ease;
}
.g24-mil-ans.is-wrong{
  background:linear-gradient(180deg,#B3170E,#7A0009);
  border-color:#FF8A80;
  animation:g24-mem-shake .45s ease;
}
/* S19: KHÓA ĐÁP ÁN — 3 đáp án còn lại lu mờ, lựa chọn nổi bật tuyệt đối
 * (animation:none để huỷ fill của g24-pop-in — không thì opacity bị ghim 1) */
.g24-mil-answers.is-locked .g24-mil-ans:not(.is-selected):not(.is-correct):not(.is-wrong){
  animation:none;opacity:.38;filter:saturate(.55);
}
.g24-mil-ans.is-hidden{opacity:.12;pointer-events:none;animation:g24-mil-vanish .45s ease}
@keyframes g24-mil-vanish{
  0%{opacity:1;transform:scale(1)}
  55%{opacity:.06;transform:scale(.9) rotate(-2deg)}
  100%{opacity:.12;transform:scale(1)}
}

/* trợ giúp */
.g24-mil-lifelines{display:flex;gap:12px;justify-content:center;margin-top:2px}
.g24-mil-life{
  width:52px;height:52px;border-radius:50%;font-size:22px;
  background:linear-gradient(180deg,#FFD34D,var(--g24-gold) 60%,var(--g24-gold-deep));
  border:2.5px solid #FFF3DC;
  box-shadow:0 4px 0 #8A5F00, 0 8px 16px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .15s, opacity .3s, filter .3s;
}
.g24-mil-life:hover:not(:disabled){transform:translateY(-3px) scale(1.06)}
.g24-mil-life:active:not(:disabled){transform:translateY(1px)}
.g24-mil-life:disabled{cursor:not-allowed;opacity:.75}
.g24-mil-life.is-used{
  filter:grayscale(1);opacity:.4;position:relative;
}
.g24-mil-life.is-used::after{
  content:'✕';position:absolute;inset:0;display:grid;place-items:center;
  color:#B3000E;font-weight:800;font-size:26px;text-shadow:0 1px 0 #fff;
}

/* thang tiền */
.g24-mil-ladder{
  grid-area:ladder;align-self:stretch;z-index:2;
  display:flex;flex-direction:column;justify-content:center;gap:3px;
  background:rgba(10,0,8,.5);border:1.5px solid rgba(245,179,1,.4);
  border-radius:14px;padding:8px;
}
.g24-mil-rung{
  display:flex;align-items:center;gap:8px;
  padding:2.5px 9px;border-radius:999px;
  font-family:var(--g24-font-head);font-size:12.5px;font-weight:700;
  color:rgba(255,243,220,.55);
  transition:all .3s;
}
.g24-mil-rung .num{width:18px;text-align:right;opacity:.7}
.g24-mil-rung .val{flex:1;text-align:right}
.g24-mil-rung.is-done{color:#F5B301}
.g24-mil-rung.is-active{
  background:linear-gradient(90deg,#B8741A,#8A5200);
  color:#FFF3DC;box-shadow:0 0 12px rgba(245,179,1,.45);
  transform:scale(1.04);
}
.g24-mil-rung.is-flash{animation:g24-mil-flash 1s ease}
@keyframes g24-mil-flash{
  0%,100%{background:transparent}
  30%{background:linear-gradient(90deg,#FFD34D,#F5B301);color:#5B3C00;box-shadow:0 0 22px rgba(255,211,77,.8)}
}

/* biểu đồ khán giả */
.g24-mil-chart{display:flex;justify-content:center;align-items:flex-end;gap:18px;min-height:150px;padding-top:8px}
.g24-mil-chart__col{display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:700}
.g24-mil-chart__col .bar{
  width:34px;border-radius:8px 8px 3px 3px;
  background:linear-gradient(180deg,#FF4A45,var(--g24-red-dark));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.35);
  transition:height .8s cubic-bezier(.2,1.4,.4,1);
}
.g24-mil-chart__col span{font-size:12.5px;color:var(--g24-muted)}

/* ============ S19: TIER · SUSPENSE · KỶ LỤC · THÀNH TÍCH · TỪ CẦN ÔN ============ */
/* nhãn chặng (presentation — không phải difficulty học thuật) */
.g24-mil-tier{
  font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;
  background:rgba(0,0,0,.35);color:#FFEFD8;border:1px solid rgba(245,179,1,.4);
  white-space:nowrap;
}
.g24-mil-tier.is-t3{border-color:rgba(255,150,60,.7)}
.g24-mil-tier.is-t4{border-color:rgba(255,80,60,.85);animation:g24-mem-pulse 1.4s infinite}
/* thanh hồi hộp 1.4s khi chốt đáp án */
.g24-mil-susp{
  width:min(320px,80%);height:4px;margin:2px auto 0;border-radius:2px;
  background:linear-gradient(90deg,#FFD34D,var(--g24-gold));
  transform-origin:left center;transform:scaleX(0);visibility:hidden;
}
.g24-mil-susp.is-run{visibility:visible;animation:g24-mil-susp 1.4s linear forwards}
@keyframes g24-mil-susp{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* 🏆 KỶ LỤC CỦA BẠN (start screen) */
.g24-mil-records{
  background:#FFF9EC;border:1.5px dashed var(--g24-gold);border-radius:14px;
  padding:10px 12px;margin-top:10px;
}
.g24-mil-records__title{
  font-family:var(--g24-font-head);font-weight:800;font-size:13px;
  color:var(--g24-red);text-align:center;letter-spacing:.4px;
}
.g24-mil-records__empty{text-align:center;font-size:13px;color:var(--g24-muted);margin-top:4px}
.g24-mil-records__row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:7px}
.g24-mil-rec{
  font-size:11.5px;color:#5d4f55;background:#fff;border:1px solid var(--g24-cream-line);
  border-radius:999px;padding:3px 9px;white-space:nowrap;
}
.g24-mil-rec b{color:var(--g24-red);font-size:12.5px}
/* result: tiêu đề khu vực + huy hiệu thành tích */
.g24-mil-sect{
  font-family:var(--g24-font-head);font-weight:800;font-size:13.5px;color:#5d4f55;
  text-align:center;margin-top:10px;letter-spacing:.3px;
}
.g24-mil-achv-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:6px}
.g24-mil-achv{
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  background:#FFF5F5;border:1.5px solid var(--g24-cream-line);color:#5d4f55;
}
.g24-mil-achv.is-new{
  background:linear-gradient(180deg,#FFF9EC,#FFEFC9);border-color:var(--g24-gold);
  color:var(--g24-red);animation:g24-pop-in .5s ease;
}
/* ⚡ KỶ LỤC MỚI — nổi bật nhưng không spam confetti */
.g24-mil-newrec{
  margin:8px auto 0;text-align:center;font-family:var(--g24-font-head);font-weight:800;
  font-size:14px;color:var(--g24-red);background:linear-gradient(180deg,#FFF3C9,#FFE49A);
  border:2px solid var(--g24-gold);border-radius:999px;padding:6px 16px;width:fit-content;
  max-width:100%;animation:g24-mil-newrec .7s ease;
  box-shadow:0 0 18px rgba(245,179,1,.45);
}
@keyframes g24-mil-newrec{
  0%{transform:scale(.6);opacity:0}
  60%{transform:scale(1.08)}
  100%{transform:scale(1);opacity:1}
}
/* 📚 từ cần ôn của ván */
.g24-mil-wrongs{display:flex;flex-direction:column;gap:5px;margin-top:6px}
.g24-mil-wrong{
  display:flex;align-items:center;gap:10px;background:#FFF5F5;
  border:1px solid var(--g24-cream-line);border-radius:10px;padding:6px 10px;
}
.g24-mil-wrong .hz{font-family:var(--g24-font-zh);font-size:22px;font-weight:700;color:var(--g24-red-deep)}
.g24-mil-wrong .vi{font-size:13px;color:#5d4f55;line-height:1.3}

.g24-mil-overlay{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;
  background:rgba(20,3,12,.6);backdrop-filter:blur(3px);padding:14px;border-radius:20px;
  overflow:auto;
}

/* responsive: mobile — thang tiền thành dải ngang, host thu gọn */
@media (max-width: 760px){
  .g24-mil-stage{
    grid-template-columns:1fr;
    grid-template-areas:"ladder" "center" "host";
    padding:12px 10px 14px;
  }
  .g24-mil-ladder{
    flex-direction:row;justify-content:flex-start;gap:5px;
    overflow-x:auto;padding:6px;scrollbar-width:none;
  }
  .g24-mil-ladder::-webkit-scrollbar{display:none}
  .g24-mil-rung{flex:0 0 auto;font-size:11.5px;padding:3px 8px}
  .g24-mil-rung .num{width:auto}
  .g24-mil-rung:not(.is-active):not(.is-done){display:none}   /* mobile: chỉ hiện mốc đã đạt + hiện tại */
  .g24-mil-rung.is-done{display:flex}
  .g24-mil-answers{grid-template-columns:1fr}
  .g24-mil-ans{min-height:52px}
  .g24-mil-bubble{font-size:12.5px}
  .g24-mil-tier{font-size:11px;padding:3px 8px}
  .g24-mil-wrong .hz{font-size:20px}
}

/* ---------- 15. ANIMATION ---------- */
@keyframes g24-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes g24-pop-in{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes g24-toast-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.g24-grid>*:nth-child(1){animation-delay:.02s}.g24-grid>*:nth-child(2){animation-delay:.06s}
.g24-grid>*:nth-child(3){animation-delay:.10s}.g24-grid>*:nth-child(4){animation-delay:.14s}
.g24-grid>*:nth-child(5){animation-delay:.18s}.g24-grid>*:nth-child(6){animation-delay:.22s}
.g24-grid>*:nth-child(7){animation-delay:.26s}.g24-grid>*:nth-child(8){animation-delay:.30s}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- 16. RESPONSIVE ---------- */
@media (max-width: 900px){
  .g24-grid{grid-template-columns:repeat(3,1fr)}
  .g24-stats{grid-template-columns:repeat(3,1fr)}
  .g24-detail{grid-template-columns:1fr}
  .g24-detail__poster{padding:26px}
  .g24-achv-list{grid-template-columns:1fr}
}
@media (max-width: 620px){
  .g24-app{padding:0 10px}
  .g24-appbar{gap:8px;padding:10px 12px}
  .g24-appbar__nav{order:3;width:100%;justify-content:center;margin-left:0;flex-wrap:wrap;gap:2px}
  .g24-navlink{padding:7px 10px;font-size:13px}
  .g24-appbar__user{margin-left:auto}
  .g24-grid{grid-template-columns:repeat(2,1fr);gap:11px}
  .g24-stats{grid-template-columns:repeat(2,1fr)}
  .g24-hero{flex-direction:column;text-align:center;padding:22px 16px}
  .g24-row2{grid-template-columns:1fr}
  .g24-lb__row{grid-template-columns:38px 38px 1fr auto;font-size:13px}
  .g24-lb__game{display:none}
  .g24-banner__cloud{width:32px}
}

/* ============================================================
 * S26 · GAME CENTER V2 — thành tích thật · phòng học sinh · BXH rõ tên
 * ============================================================ */

/* ---- BXH: tên 2 dòng, không bao giờ bị che/đè (test tên dài + 123 hạng) ---- */
.g24-lb__name{min-width:0;display:flex;flex-direction:column;gap:1px}
.g24-lb__nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.g24-lb__row .g24-lb__score{white-space:nowrap}
.g24-lb-merow{
  display:flex;gap:8px;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#FFF6DE,#FFEFC4);border:1.5px solid #F1D488;
  border-radius:14px;padding:10px 16px;margin:0 0 12px;font-size:13.5px;
}
.g24-lb-merow b{color:var(--g24-red)}

/* ---- Thành tích V2: 3 huy hiệu chính có progress ---- */
.g24-achv2-list{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.g24-achv2{
  display:flex;gap:14px;align-items:flex-start;
  background:linear-gradient(180deg,#FFFDF6,var(--g24-cream-2));
  border:2px solid var(--g24-cream-line);border-radius:18px;padding:16px;
  box-shadow:var(--g24-shadow-sm);position:relative;overflow:hidden;
}
.g24-achv2.is-unlocked{border-color:#F1D488;background:linear-gradient(180deg,#FFFBEE,#FFF3D6)}
.g24-achv2.is-locked{opacity:.78}
.g24-achv2__icon{
  font-size:34px;width:60px;height:60px;flex:0 0 60px;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#fff,#FBEFEF);
  border:2px solid var(--g24-cream-line);border-radius:16px;
}
.g24-achv2.is-unlocked .g24-achv2__icon{border-color:#F5C542;background:radial-gradient(circle at 35% 30%,#FFF9E4,#FFE9A8)}
.g24-achv2__body{flex:1;min-width:0}
.g24-achv2__name{
  font-family:var(--g24-font-head);font-weight:800;font-size:15.5px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;
}
.g24-achv2__state{font-size:11px;font-weight:800;letter-spacing:.4px;color:var(--g24-muted);
  background:#fff;border:1.5px solid var(--g24-cream-line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.g24-achv2.is-unlocked .g24-achv2__state{color:#8a6d1a;border-color:#F1D488;background:#FFF6DE}
.g24-achv2__desc{font-size:13px;color:#5d4f55;margin:4px 0 8px;line-height:1.5}
.g24-achv2__bar{height:12px;background:#F3E4E4;border-radius:999px;overflow:hidden;border:1px solid #EAD5D5}
.g24-achv2__bar .fill{
  display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#F5C542,var(--g24-red));
  transition:width .6s ease;min-width:0;
}
.g24-achv2__prog{font-size:12.5px;font-weight:800;color:var(--g24-red);margin-top:5px}
.g24-achv2__extra{font-size:12px;color:var(--g24-muted);margin-top:2px}

/* ---- Kỳ Kỳ chúc mừng khi MỞ thành tích (server xác nhận) ---- */
.g24-achv-pop{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:rgba(43,20,25,.55);backdrop-filter:blur(3px);
  animation:g24-toast-in .25s ease;cursor:pointer;padding:20px;
}
.g24-achv-pop__card{
  position:relative;text-align:center;max-width:340px;width:100%;
  background:linear-gradient(180deg,#FFFBEE,#FFF1CC);
  border:3px solid #F5C542;border-radius:26px;padding:28px 22px 22px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);animation:g24-pop-in .45s cubic-bezier(.2,1.4,.4,1);
}
.g24-achv-pop__card .kyky{position:absolute;top:-46px;left:50%;transform:translateX(-50%);width:84px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25))}
.g24-achv-pop__card .big{font-size:54px;line-height:1;margin-top:14px;animation:g24-pop-in .6s cubic-bezier(.2,1.6,.4,1)}
.g24-achv-pop__card .ttl{font-family:var(--g24-font-head);font-weight:800;letter-spacing:2px;color:#8a6d1a;font-size:13px;margin-top:8px}
.g24-achv-pop__card .nm{font-family:var(--g24-font-head);font-weight:800;font-size:20px;color:var(--g24-red);margin-top:4px}
.g24-achv-pop__card .say{font-size:13.5px;color:#5d4f55;margin-top:8px;line-height:1.55;font-style:italic}
.g24-achv-pop__card .more{font-size:12px;font-weight:800;color:#8a6d1a;margin-top:8px}

/* ---- Phòng học sinh: mã to + countdown 3-2-1-GO ---- */
.g24-arena-codebig{font-size:15px}
.g24-arena-codebig b{
  font-family:var(--g24-font-head);font-size:22px;letter-spacing:6px;color:#FFE9A8;
  background:rgba(0,0,0,.22);border-radius:10px;padding:2px 12px;margin-left:4px;
}
.g24-arena-count{
  position:fixed;inset:0;z-index:400;display:grid;place-items:center;
  background:rgba(20,8,12,.72);backdrop-filter:blur(4px);
}
.g24-arena-count .n{
  font-family:var(--g24-font-head);font-weight:800;font-size:120px;color:#fff;
  text-shadow:0 0 40px rgba(245,197,66,.9);animation:g24-pop-in .5s cubic-bezier(.2,1.6,.4,1);
}
.g24-arena-count .n.go{color:#F5C542;font-size:96px}

@media (max-width:480px){
  .g24-achv2{padding:13px;gap:10px}
  .g24-achv2__icon{width:48px;height:48px;flex-basis:48px;font-size:26px}
  .g24-arena-count .n{font-size:88px}
  .g24-arena-count .n.go{font-size:72px}
}

/* ---- S26 · Mobile-first: mọi điều khiển tương tác chạm được ≥44px ---- */
.g24-select,.g24-input{min-height:44px}
.g24-arena-code{min-height:48px}
@media (pointer:coarse), (max-width:768px){
  .g24-chip{min-height:44px;padding:10px 16px}
  .g24-btn{min-height:44px}
  .g24-opt{min-height:44px}
}

/* ---- S27 · Lịch chuỗi 7 ngày + cột XU/THẮNG trên BXH ---- */
.g24-streak-strip{display:flex;gap:6px;margin:8px 0 10px;flex-wrap:wrap}
.g24-streak-day{
  flex:1;min-width:38px;max-width:56px;text-align:center;padding:7px 2px 5px;
  background:#fff;border:1.5px solid var(--g24-cream-line);border-radius:12px;
}
.g24-streak-day b{display:block;font-family:var(--g24-font-head);font-size:15px;color:var(--g24-muted)}
.g24-streak-day small{font-size:9.5px;color:var(--g24-muted);font-weight:700}
.g24-streak-day.is-done{background:linear-gradient(180deg,#FFF3D6,#FFE9A8);border-color:#F5C542}
.g24-streak-day.is-done b{color:var(--g24-red)}
.g24-streak-day.is-done small{color:#8a6d1a}

.g24-lb__row--v21{grid-template-columns:52px 44px 1fr auto auto auto auto}
.g24-lb__xtra{font-size:12px;font-weight:800;color:var(--g24-muted);white-space:nowrap}
@media (max-width:768px){
  /* mobile: HẠNG · TÊN · ĐIỂM — xu/thắng/game ẩn để tên luôn rộng rãi */
  .g24-lb__row--v21{grid-template-columns:38px 38px 1fr auto}
  .g24-lb__xtra{display:none}
}

/* ---- S28 · Sân khấu Triệu Phú đổi màu theo TẦNG KHÓ ----
 * Lớp gradient MỜ phủ TRÊN ảnh nền (layer đầu = trên cùng) nên vẫn giữ
 * ảnh sân khấu; CSS thuần + transition — 0 chi phí FPS. */
.g24-mil-stage{transition:background 1.2s ease, box-shadow 1.2s ease}
.g24-mil-stage[data-tier="2"]{background:
  linear-gradient(180deg,rgba(52,18,84,.66) 0%,rgba(26,10,44,.8) 100%),
  url('../assets/kyky/bg-stage.jpg') center/cover no-repeat,
  linear-gradient(180deg,#241035 0%,#1B0B28 100%)}
.g24-mil-stage[data-tier="3"]{background:
  linear-gradient(180deg,rgba(10,22,58,.7) 0%,rgba(5,10,28,.84) 100%),
  url('../assets/kyky/bg-stage.jpg') center/cover no-repeat,
  linear-gradient(180deg,#0A1330 0%,#060B1E 100%)}
.g24-mil-stage[data-tier="4"]{background:
  linear-gradient(180deg,rgba(22,15,2,.74) 0%,rgba(10,7,1,.86) 100%),
  url('../assets/kyky/bg-stage.jpg') center/cover no-repeat,
  linear-gradient(180deg,#120D02 0%,#0A0701 100%);
  box-shadow:0 14px 38px rgba(10,0,8,.6), inset 0 0 90px rgba(245,197,66,.30);
  border-color:#F5C542}

/* ---- S29 · Chip tầng khó Triệu Phú (M1-M6, kín đáo) ---- */
.g24-mil-tier{
  display:block;width:fit-content;margin:0 auto 4px;
  font-size:9.5px;font-weight:800;letter-spacing:2px;
  padding:2px 10px;border-radius:999px;opacity:.85;
  color:#FFE9A8;background:rgba(0,0,0,.3);border:1px solid rgba(245,197,66,.4);
}
.g24-mil-tier:empty{display:none}
.g24-mil-tier.is-m4{color:#FFC08A;border-color:rgba(255,160,80,.5)}
.g24-mil-tier.is-m5{color:#FF9A8A;border-color:rgba(255,110,90,.55)}
.g24-mil-tier.is-m6{color:#FF7A7A;border-color:rgba(255,80,80,.7);background:rgba(60,0,0,.45);opacity:1}

/* ============================================================
 * S30 · HOTFIX 4 YÊU CẦU (17/08/2026)
 * ============================================================ */

/* ---- (2) Nút TRANG CHỦ đầu trang — chạm ≥44px, nổi bật nhưng hợp thương hiệu ---- */
.g24-appbar__homebtn{
  display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;
  min-height:44px;padding:8px 14px;margin-right:10px;border-radius:999px;
  background:linear-gradient(180deg,#FFFDF6,#FFE9A8);
  border:2px solid #F5C542;color:#8a5a00;font-weight:800;font-size:13.5px;
  text-decoration:none;box-shadow:0 3px 8px rgba(0,0,0,.18), inset 0 1px 0 #fff;
  transition:transform .15s;
}
.g24-appbar__homebtn:active{transform:scale(.95)}
.g24-appbar__homebtn .ic{font-size:17px}
@media (max-width:560px){
  .g24-appbar__homebtn{padding:8px 11px;margin-right:6px}
  .g24-appbar__homebtn .tx{display:none}   /* mobile: icon 🏠 to, đủ chạm */
}

/* ---- (1) Panel GIẢI THÍCH CÂU SAI trên màn kết quả Triệu Phú ---- */
.g24-mil-explain{
  text-align:left;background:#FFF7F0;border:2px solid #F1D8C0;border-radius:14px;
  padding:12px 14px;font-size:13.5px;line-height:1.6;
}
.g24-mil-explain .q{font-weight:700;color:#4A3A2A;margin-bottom:6px}
.g24-mil-explain .row{margin:2px 0}
.g24-mil-explain .row.bad b{color:#C62828}
.g24-mil-explain .row.good b{color:#1B7E3C}
.g24-mil-explain .note{
  margin-top:8px;padding:8px 10px;border-radius:10px;
  background:#FFFBEA;border:1.5px dashed #F1D488;color:#5d4f55;
}

/* ---- (4) BXH: tên học sinh trên BỤC to + rõ + KHÔNG bị che ----
 * Pill tên được phép RỘNG HƠN trụ (width:max-content), xuống dòng tối đa
 * 2 dòng thay vì cắt "…", nền pill đậm hơn để nổi trên mọi màu trụ. */
.g24-podium__base .nm{
  font-size:14px;white-space:normal;overflow:visible;text-overflow:clip;
  width:max-content;max-width:150%;text-align:center;line-height:1.25;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  background:rgba(50,15,4,.52);padding:2.5px 11px;
}
.g24-podium__col.rank-1 .g24-podium__base .nm{font-size:16px}
.g24-podium__base .lop{background:rgba(50,15,4,.46);font-size:11.5px}
@media (max-width:640px){
  .g24-podium__base .nm{font-size:14px;max-width:148%;background:rgba(45,12,3,.62)}
  .g24-podium__col.rank-1 .g24-podium__base .nm{font-size:15px}
  .g24-podium__base .lop{font-size:11.5px;background:rgba(45,12,3,.55)}
  .g24-podium__base .sc{font-size:12.5px}
  /* trụ mobile cao thêm chút để đủ chỗ tên 2 dòng */
  .g24-podium__col.rank-1 .g24-podium__base{height:142px}
  .g24-podium__col.rank-2 .g24-podium__base{height:122px}
  .g24-podium__col.rank-3 .g24-podium__base{height:114px}
}
/* triều thần hạng 4-8: tên đậm, cho phép 2 dòng, không tràn thẻ */
.g24-lb-subject b{
  font-size:13px;line-height:1.25;text-align:center;max-width:112px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

/* ---- S32 · Bắn bóng: hàng điều khiển NGẮM TAY + nút BẮN ---- */
.g24-bs-firerow{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:10px}
.g24-bs-fire{
  min-height:54px;min-width:150px;border-radius:999px;cursor:pointer;
  font-family:var(--g24-font-head);font-weight:800;font-size:19px;letter-spacing:1px;color:#fff;
  background:linear-gradient(180deg,#FF5A3C 0%,var(--g24-red) 55%,#B3000E 100%);
  border:3px solid #FFB199;box-shadow:0 6px 0 #8F000B, 0 10px 20px rgba(143,0,11,.35), inset 0 2px 0 rgba(255,255,255,.4);
  transition:transform .08s;
}
.g24-bs-fire:active,.g24-bs-fire.is-kick{transform:translateY(4px);box-shadow:0 2px 0 #8F000B, 0 6px 12px rgba(143,0,11,.3)}
.g24-bs-rot{
  min-height:48px;min-width:48px;border-radius:50%;cursor:pointer;font-size:22px;font-weight:800;
  color:var(--g24-red);background:linear-gradient(180deg,#FFFDF6,#FFE9A8);
  border:2.5px solid #F5C542;box-shadow:0 4px 0 #C79A2A, inset 0 1px 0 #fff;
  touch-action:none;user-select:none;
}
.g24-bs-rot:active{transform:translateY(3px);box-shadow:0 1px 0 #C79A2A}

/* ---- S32 · BXH: ⚰️ ÂM TÀO ĐỊA PHỦ ngoài Top 10 (hài hước) ---- */
.g24-lb-underworld{
  text-align:center;padding:14px 16px 12px;margin:4px 0;
  background:linear-gradient(180deg,#2B1B33 0%,#1A0F22 100%);
  border-top:3px dashed #6C4AB0;border-bottom:3px dashed #6C4AB0;position:relative;overflow:hidden;
}
.g24-lb-underworld::before,.g24-lb-underworld::after{
  content:'👻';position:absolute;top:8px;font-size:18px;opacity:.7;
  animation:g24-float 3s ease-in-out infinite;
}
.g24-lb-underworld::before{left:14px}
.g24-lb-underworld::after{right:14px;animation-delay:1.4s}
.g24-lb-underworld .ttl{
  font-family:var(--g24-font-head);font-weight:800;font-size:17px;letter-spacing:2px;
  color:#C9B6FF;text-shadow:0 0 14px rgba(150,100,255,.8);
}
.g24-lb-underworld .sub{font-size:12px;color:#9F8BC9;font-weight:700;margin-top:2px}
.g24-lb-underworld .joke{font-size:11.5px;color:#7E6BA8;font-style:italic;margin-top:4px}
.g24-lb__role{
  display:inline-block;width:fit-content;margin-top:2px;
  font-size:10px;font-weight:800;letter-spacing:.5px;border-radius:999px;padding:1.5px 8px;
}
.g24-lb__role.is-guard{color:#8a5a00;background:#FFEFC4;border:1px solid #E8C97F}
.g24-lb__role.is-ghost{color:#5C4A85;background:#EFEAFB;border:1px solid #CBBCEE}
.g24-lb__role.is-hell{color:#B3000E;background:#FFE3DC;border:1px solid #F5A28F}
.g24-lb__row.is-ghost{background:linear-gradient(90deg,#FBFAFF,#F5F2FC)}
.g24-lb__row.is-hell{background:linear-gradient(90deg,#FFF7F4,#FFEFE9)}
.g24-lb__row.is-hell .g24-lb__rank{color:#C4573B}
.g24-lb__row.is-me.is-ghost,.g24-lb__row.is-me.is-hell{background:#FFF9EC}

/* ============ S35 · ⚡ KI WARRIORS ============ */
.g24-ki{max-width:760px;margin:0 auto;padding:10px 12px 28px;text-align:center}
.g24-ki__logo{font-size:30px;font-weight:900;letter-spacing:1px;color:#E60012;
  text-shadow:0 2px 0 #FFD54D;margin:8px 0 2px}
.g24-ki__tag{color:#666;margin-bottom:14px}
.g24-ki__h2{font-size:20px;font-weight:800;color:#B3000E;margin:10px 0 12px}
.g24-ki__modes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 14px}
.g24-ki__mode{display:flex;flex-direction:column;gap:6px;align-items:center;padding:16px 10px;
  border:2px solid #F3D9D9;border-radius:16px;background:#fff;cursor:pointer;
  transition:transform .12s,box-shadow .12s}
.g24-ki__mode:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(230,0,18,.12);border-color:#E60012}
.g24-ki__mode .ic{font-size:32px}
.g24-ki__mode b{font-size:15px}
.g24-ki__mode small{color:#777;line-height:1.35}
.g24-ki__row{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px 0}
.g24-ki__lbl{color:#888;font-size:13px}
.g24-ki__chip{padding:6px 14px;border-radius:99px;border:1.5px solid #E8C9C9;background:#fff;
  cursor:pointer;font-size:13px}
.g24-ki__chip.is-on{background:#E60012;border-color:#E60012;color:#fff;font-weight:700}
.g24-ki__note{color:#999;font-size:12px;margin-top:10px}
.g24-ki__chars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g24-ki__char{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px 14px;
  border:2px solid #F3D9D9;border-radius:16px;background:#fff;cursor:pointer;
  transition:transform .12s,box-shadow .12s}
.g24-ki__char:hover{transform:translateY(-3px);box-shadow:0 8px 18px rgba(230,0,18,.14);border-color:#E60012}
.g24-ki__char b{font-size:16px;color:#B3000E}
.g24-ki__char .hz{color:#C89B00;font-size:13px;letter-spacing:2px}
.g24-ki__char .ttl{color:#777}
.g24-ki__char .ult{color:#E60012;font-weight:700;margin-top:4px}
.g24-ki__charcv{width:130px;height:140px}
.g24-ki__stat{display:flex;align-items:center;gap:6px;width:90%;font-size:10px}
.g24-ki__stat i{width:26px;text-align:right;color:#999;font-style:normal;font-weight:700}
.g24-ki__stat .bar{flex:1;height:6px;border-radius:4px;background:#F4E3E3;overflow:hidden}
.g24-ki__stat .fill{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#E60012,#FF7043)}
.g24-ki__back{margin-top:14px;background:none;border:none;color:#B3000E;cursor:pointer;font-size:14px}
.g24-ki__code{font-size:28px;letter-spacing:10px;text-align:center;width:230px;padding:10px;
  border:2px solid #E60012;border-radius:14px;margin:8px auto 12px;display:block;font-weight:800}
.g24-ki__bigcode{font-size:44px;font-weight:900;letter-spacing:10px;color:#E60012;
  background:#FFF4F4;border:2px dashed #E60012;border-radius:18px;padding:12px;margin:8px 0}
.g24-ki__players{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.g24-ki__player{display:flex;gap:10px;align-items:center;justify-content:center;padding:8px;
  background:#FFF9F0;border-radius:12px}
.g24-ki--stage{position:relative}
.g24-ki__stage{width:100%;max-width:720px;border-radius:16px;display:block;margin:8px auto;
  box-shadow:0 10px 26px rgba(0,0,0,.25)}
.g24-ki__count{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);
  font-size:72px;font-weight:900;color:#fff;text-shadow:0 4px 0 #E60012,0 8px 22px rgba(0,0,0,.5);
  pointer-events:none}
.g24-ki__count.pop{animation:g24KiPop .5s ease}
@keyframes g24KiPop{0%{transform:translate(-50%,-50%) scale(2.2);opacity:0}
  60%{transform:translate(-50%,-50%) scale(.95);opacity:1}100%{transform:translate(-50%,-50%) scale(1)}}
.g24-ki__hud{display:flex;gap:8px;align-items:center;margin:4px 0 8px}
.g24-ki__hud .vs{font-weight:900;color:#E60012;font-size:15px}
.g24-ki__hudside{flex:1;display:flex;flex-direction:column;gap:3px;text-align:left}
.g24-ki__hudside.is-flip{text-align:right}
.g24-ki__hudside b{font-size:13px}
.g24-ki__hudside .hpbar,.g24-ki__hudside .kibar{display:block;height:10px;border-radius:6px;
  background:#EEE;overflow:hidden}
.g24-ki__hudside .kibar{height:6px}
.g24-ki__hudside .hpbar .fill{display:block;height:100%;background:linear-gradient(90deg,#43A047,#8BC34A);
  transition:width .5s}
.g24-ki__hudside .kibar .fill{display:block;height:100%;background:linear-gradient(90deg,#F5C518,#FFEE58);
  transition:width .4s}
.g24-ki__hudside.is-flip .hpbar .fill,.g24-ki__hudside.is-flip .kibar .fill{margin-left:auto}
.g24-ki__hudside small{color:#888;font-size:10px}
.g24-ki__roundlbl{font-weight:800;color:#B3000E;margin:6px 0}
.g24-ki__timer{height:10px;border-radius:6px;background:#F4E3E3;overflow:hidden;margin:4px 0 10px}
.g24-ki__timer .fill{display:block;height:100%;width:100%;background:linear-gradient(90deg,#E60012,#FF7043);
  transition:width .1s linear}
.g24-ki__timer .fill.is-danger{background:#B3000E;animation:g24KiBlink .4s infinite alternate}
@keyframes g24KiBlink{from{opacity:1}to{opacity:.5}}
.g24-ki__prompt{font-size:19px;font-weight:700;margin:10px 0 12px;min-height:44px}
.g24-ki__opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.g24-ki__opt{padding:16px 8px;font-size:24px;border:2px solid #F3D9D9;border-radius:14px;
  background:#fff;cursor:pointer;transition:transform .1s}
.g24-ki__opt:hover{transform:scale(1.02);border-color:#E60012}
.g24-ki__opt.is-right{background:#E8F5E9;border-color:#43A047}
.g24-ki__opt.is-wrong{background:#FFEBEE;border-color:#E60012}
.g24-ki__special{margin-top:14px;padding:10px 20px;border-radius:99px;border:2px solid #F5C518;
  background:#FFFBE8;color:#8a6d00;font-weight:800;cursor:pointer}
.g24-ki__special:disabled{opacity:.45;cursor:default}
.g24-ki__special.is-armed{background:#F5C518;color:#5b4800;
  box-shadow:0 0 18px rgba(245,197,24,.8);animation:g24KiBlink .5s infinite alternate}
.g24-ki__caption{font-weight:800;color:#B3000E;min-height:26px;margin-top:6px}
.g24-ki__loading{padding:34px 0;color:#777;font-size:15px}
.g24-ki__result{font-size:30px;font-weight:900;margin:14px 0 6px}
.g24-ki__result.is-win{color:#C89B00;text-shadow:0 2px 0 #FFF3C4}
.g24-ki__result.is-lose{color:#888}
.g24-ki__result.is-draw{color:#B3000E}
.g24-ki__resline{color:#555;margin:3px 0}
.g24-ki__resach{display:inline-block;margin:6px 4px;padding:6px 14px;border-radius:99px;
  background:#FFF4D6;border:1.5px solid #F5C518;font-weight:700;color:#8a6d00}
@media (max-width:560px){
  .g24-ki__modes,.g24-ki__chars{grid-template-columns:1fr}
  .g24-ki__charcv{width:110px;height:120px}
  .g24-ki__opt{font-size:20px;padding:13px 6px}
  .g24-ki__bigcode{font-size:32px;letter-spacing:6px}
}
.g24-ki__charcv{background:radial-gradient(circle at 50% 62%,#FFF3E8 0%,#FFE6E0 70%,#FFDCD4 100%);border-radius:14px}
/* S36: sân khấu KI trong màn đấu gọn hơn (câu hỏi ngay bên dưới) */
.g24-ki__stage--fight{max-width:640px;margin:4px auto 6px}

/* ================================================================
 * S37 · PHASE 1 — 24G PREMIUM DESIGN SYSTEM (dùng tokens.css)
 * ================================================================ */

/* ---------- GAMEBUTTON: nút kiểu game 3D (đè lên .g24-btn cũ) ---------- */
.g24-btn{
  font-family:var(--game-font-display);
  border-radius:var(--game-radius-md);
  transition:transform var(--game-transition-fast),box-shadow var(--game-transition-fast),filter var(--game-transition-fast);
  will-change:transform;
  -webkit-tap-highlight-color:transparent;
  min-height:44px;
}
.g24-btn--primary{
  background:var(--surface-red);
  box-shadow:var(--game-edge) var(--g24-red-deep),var(--game-shadow-soft),inset 0 2px 0 rgba(255,255,255,.3);
  border:none;color:#fff;
}
.g24-btn--primary:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:0 6px 0 var(--g24-red-deep),var(--game-shadow-deep),inset 0 2px 0 rgba(255,255,255,.3)}
.g24-btn--primary:active{transform:translateY(4px) scale(.985);
  box-shadow:0 1px 0 var(--g24-red-deep),var(--game-shadow-soft)}
.g24-btn--gold{
  background:var(--surface-gold);color:#5b4800;border:none;
  box-shadow:var(--game-edge) var(--g24-gold-deep),var(--game-shadow-soft),inset 0 2px 0 rgba(255,255,255,.5);
}
.g24-btn--gold:active{transform:translateY(4px) scale(.985);box-shadow:0 1px 0 var(--g24-gold-deep)}
.g24-btn:disabled{opacity:.5;transform:none!important;cursor:default;filter:grayscale(.3)}
@keyframes g24BtnBounce{0%{transform:scale(1)}40%{transform:scale(.94)}70%{transform:scale(1.04)}100%{transform:scale(1)}}
.g24-btn.is-bounce{animation:g24BtnBounce .35s var(--game-transition-fast)}

/* ---------- FX SYSTEM ---------- */
.g24-fx-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:var(--z-fx)}
@keyframes g24FxShake{0%,100%{transform:translateX(0)}15%{transform:translateX(-7px)}30%{transform:translateX(6px)}45%{transform:translateX(-5px)}60%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.g24-fx-shake{animation:g24FxShake .4s ease}
@keyframes g24FxPop{0%{transform:scale(1)}35%{transform:scale(1.14)}65%{transform:scale(.96)}100%{transform:scale(1)}}
.g24-fx-pop{animation:g24FxPop .45s var(--game-transition-fast)}

/* ---------- KỲ KỲ REACTION SYSTEM ---------- */
.g24-kyky{position:relative;display:inline-block;line-height:0}
.g24-kyky__img{width:100%;height:auto;display:block;position:relative;z-index:2;
  transition:transform var(--game-transition-normal);transform-origin:50% 90%;user-select:none}
.g24-kyky__aura{position:absolute;inset:-12%;border-radius:50%;z-index:1;opacity:0;
  background:radial-gradient(circle,rgba(245,197,24,.5) 0%,rgba(245,197,24,0) 68%);
  transition:opacity var(--game-transition-normal)}
.g24-kyky__emote{position:absolute;top:-6px;right:-4px;z-index:3;font-family:var(--game-font-display);
  font-weight:800;font-size:18px;opacity:0;transition:opacity var(--game-transition-fast);pointer-events:none}
.g24-kyky__bubble{position:absolute;bottom:96%;left:50%;transform:translateX(-50%);z-index:4;
  background:#fff;color:var(--g24-ink);font-family:var(--game-font-ui);font-weight:700;font-size:13px;
  padding:7px 12px;border-radius:var(--game-radius-md);box-shadow:var(--game-shadow-soft);
  white-space:nowrap;max-width:70vw;overflow:hidden;text-overflow:ellipsis}
.g24-kyky__bubble::after{content:'';position:absolute;top:100%;left:50%;margin-left:-6px;
  border:6px solid transparent;border-top-color:#fff}
@keyframes g24KykyBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes g24KykyBounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-14%) scale(1.03)}60%{transform:translateY(-10%)}}
@keyframes g24KykyTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg) translateY(-2%)}}
@keyframes g24KykyShiver{0%,100%{transform:translateX(0)}25%{transform:translateX(-3%) rotate(-2deg)}75%{transform:translateX(3%) rotate(2deg)}}
@keyframes g24KykyRun{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8%) rotate(2deg)}}
@keyframes g24KykySleep{0%,100%{transform:rotate(4deg) scale(.98)}50%{transform:rotate(5deg) scale(1)}}
@keyframes g24KykySpin{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-18%) scale(1.08)}60%{transform:translateY(-6%) scale(1.02)}100%{transform:translateY(0) scale(1)}}
.g24-kyky.is-idle .g24-kyky__img{animation:g24KykyBreath 3.2s ease-in-out infinite}
.g24-kyky.is-happy .g24-kyky__img,
.g24-kyky.is-correct .g24-kyky__img{animation:g24KykyBounce .7s var(--game-transition-fast) 2}
.g24-kyky.is-thinking .g24-kyky__img{animation:g24KykyTilt 1.6s ease-in-out infinite}
.g24-kyky.is-wrong .g24-kyky__img{animation:g24KykyShiver .5s ease 2;filter:saturate(.7)}
.g24-kyky.is-celebrating .g24-kyky__img{animation:g24KykyBounce .6s var(--game-transition-fast) infinite}
.g24-kyky.is-running .g24-kyky__img{animation:g24KykyRun .45s linear infinite}
.g24-kyky.is-sleeping .g24-kyky__img{animation:g24KykySleep 2.8s ease-in-out infinite;filter:brightness(.92)}
.g24-kyky.is-levelup .g24-kyky__img{animation:g24KykySpin .9s var(--game-transition-fast) 2}
.g24-kyky.is-correct .g24-kyky__aura,.g24-kyky.is-celebrating .g24-kyky__aura,
.g24-kyky.is-levelup .g24-kyky__aura,.g24-kyky.is-happy .g24-kyky__aura{opacity:1}
.g24-kyky.is-sleeping .g24-kyky__emote{opacity:1}
.g24-kyky.is-sleeping .g24-kyky__emote::before{content:'Z z z';color:var(--g24-navy);opacity:.6}
.g24-kyky.is-thinking .g24-kyky__emote{opacity:1}
.g24-kyky.is-thinking .g24-kyky__emote::before{content:'?';color:var(--g24-gold-deep)}

/* ---------- SVG ICONS ---------- */
.g24-icon{display:inline-block;vertical-align:middle;flex:none}
.g24-icon-wrap{display:inline-flex;align-items:center;justify-content:center;line-height:0}

/* ---------- BOTTOM NAVIGATION (mobile) — S47 LÀM LẠI ----------
 * Anh Tiền 23/08: "thiết kế icon dễ nhìn, để màu sắc dễ nhìn, to, rõ ràng".
 * Còn ĐÚNG 4 mục: Sảnh · Ôn tập · Đấu hạng · Xếp hạng.
 *
 * Ba thứ đổi để nhìn rõ hơn hẳn:
 *   1. Icon 22px → 28px, nét dày hơn.
 *   2. Chữ 10,5px → 12,5px và ĐẬM hơn; màu chữ mục chưa chọn đổi từ
 *      xám nhạt (#8A7A7A) sang mực đậm — trước đây mờ, ra nắng không đọc nổi.
 *   3. Mục ĐANG MỞ = viên thuốc ĐỎ đặc, chữ + icon TRẮNG. Trước chỉ đổi
 *      chữ sang đỏ nên nhìn lướt qua khó biết đang ở đâu.
 * Vùng chạm cao 52px → 62px cho dễ bấm bằng ngón cái.
 */
/* S55 (24/08): thanh NỔI kiểu kính mờ — bo tròn, tách khỏi mép màn hình,
 * đổ bóng sâu. Vẫn ĐÚNG 4 mục, đúng href, đúng data-nav như cũ. */
.g24-bottomnav{
  position:fixed;z-index:var(--z-bottomnav);
  left:max(10px,var(--safe-left));
  right:max(10px,var(--safe-right));
  bottom:calc(10px + var(--safe-bottom));
  display:none;
  gap:5px;
  padding:7px;
  border-radius:26px;
  background:linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,246,238,.90) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1.5px solid rgba(255,255,255,.8);
  box-shadow:
    0 12px 30px rgba(43,20,25,.24),
    0 0 0 1px rgba(230,0,18,.07),
    inset 0 1px 0 rgba(255,255,255,.85);
}
.g24-bottomnav__item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px;min-height:62px;border:none;background:none;cursor:pointer;
  color:#6B5550;                       /* đậm hơn hẳn màu xám cũ */
  font-family:var(--game-font-ui);
  border-radius:var(--game-radius-md);text-decoration:none;
  transition:color 160ms ease, background-color 160ms ease, transform var(--game-transition-fast);
  -webkit-tap-highlight-color:transparent;position:relative;
}
.g24-bottomnav__item .g24-icon{stroke-width:2.2}
.g24-bottomnav__item .lbl{
  font-size:12.5px;font-weight:800;letter-spacing:.1px;line-height:1.1;
  white-space:nowrap;
}
.g24-bottomnav__item:active{transform:scale(.93)}

/* ★ MỤC ĐANG MỞ — viên thuốc đỏ đặc, chữ trắng: liếc một cái là thấy */
.g24-bottomnav__item.is-active{
  color:#FFFFFF;
  border-radius:20px;
  background:linear-gradient(180deg,var(--g24-red-light) 0%,var(--g24-red) 45%,var(--g24-red-dark) 100%);
  box-shadow:
    0 7px 18px rgba(230,0,18,.42),
    0 0 18px rgba(230,0,18,.26),
    inset 0 1px 0 rgba(255,255,255,.32);
  transform:translateY(-2px);
}
.g24-bottomnav__item.is-active .lbl{text-shadow:0 1px 0 rgba(0,0,0,.22)}
/* gạch vàng nhỏ NẰM TRONG viên thuốc (thanh nay nổi, đặt ở top:-7px sẽ lòi ra ngoài) */
.g24-bottomnav__item.is-active::before{
  content:'';position:absolute;top:5px;left:50%;transform:translateX(-50%);
  width:26px;height:3px;border-radius:2px;background:var(--g24-gold);
  box-shadow:0 0 8px rgba(245,197,24,.85);
}
.g24-bottomnav__item.is-active .g24-icon-wrap{animation:g24FxPop .45s var(--game-transition-fast)}
.g24-bottomnav.is-hidden{display:none!important}

@media (max-width:767px){
  .g24-bottomnav{display:flex}
  .g24-app{padding-bottom:calc(102px + var(--safe-bottom))}  /* thanh nổi cao hơn → chừa thêm chỗ */
  .g24-appbar__nav{display:none}                              /* mobile dùng bottom nav */
}
/* máy rất hẹp (≤340px): thu chữ lại chút cho khỏi xuống dòng */
@media (max-width:340px){
  .g24-bottomnav__item .lbl{font-size:11px}
  .g24-bottomnav__item{min-height:58px}
}

/* ---------- HUD COMPONENTS (hạ tầng — Master Game dùng ở Phase 3) ---------- */
.g24-hud{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
.g24-xpbar{display:inline-flex;align-items:center;gap:6px;min-width:110px}
.g24-xpbar__track{flex:1;height:10px;border-radius:var(--game-radius-pill);
  background:rgba(43,20,25,.12);overflow:hidden;box-shadow:var(--game-shadow-inner)}
.g24-xpbar__fill{display:block;height:100%;border-radius:var(--game-radius-pill);
  background:var(--surface-gold);transition:width var(--game-transition-slow)}
.g24-coincounter,.g24-levelbadge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--game-font-display);font-weight:800;font-size:14px;
  background:var(--surface-panel);color:var(--g24-ink);
  border-radius:var(--game-radius-pill);padding:4px 12px;box-shadow:var(--game-shadow-soft);
}
.g24-coincounter .g24-icon{color:var(--g24-gold-deep)}
.g24-levelbadge{background:var(--surface-red);color:#fff}
.g24-combodisplay{
  font-family:var(--game-font-display);font-weight:800;color:var(--g24-gold-deep);
  text-shadow:0 1px 0 #fff;transition:transform var(--game-transition-fast);
}
.g24-combodisplay.is-hot{color:var(--g24-red);transform:scale(1.15)}

/* ---------- VICTORY / GAME OVER SEQUENCE (hạ tầng Phase 3) ---------- */
.g24-victory{position:relative;text-align:center;padding:var(--space-6) var(--space-4)}
.g24-victory__title{font-family:var(--game-font-display);font-weight:800;font-size:30px;
  color:var(--g24-gold-deep);text-shadow:0 2px 0 #FFF3C4;
  opacity:0;transform:translateY(14px);transition:all var(--game-transition-normal)}
.g24-victory__score{font-family:var(--game-font-display);font-weight:800;font-size:44px;color:var(--g24-ink);
  opacity:0;transition:opacity var(--game-transition-normal)}
.g24-victory__stars .g24-icon{color:#D9CBB1;transform:scale(0);transition:transform .4s var(--game-transition-fast)}
.g24-victory__stars .g24-icon.is-earned{color:var(--g24-gold)}
.g24-victory.is-play .g24-victory__title{opacity:1;transform:none}
.g24-victory.is-play .g24-victory__score{opacity:1;transition-delay:.25s}
.g24-victory.is-play .g24-victory__stars .g24-icon{transform:scale(1)}
.g24-victory.is-play .g24-victory__stars .g24-icon:nth-child(1){transition-delay:.5s}
.g24-victory.is-play .g24-victory__stars .g24-icon:nth-child(2){transition-delay:.72s}
.g24-victory.is-play .g24-victory__stars .g24-icon:nth-child(3){transition-delay:.94s}
.g24-victory__rewards{opacity:0;transform:translateY(10px);transition:all var(--game-transition-normal) 1.1s}
.g24-victory.is-play .g24-victory__rewards{opacity:1;transform:none}

/* ---------- S37 · MASTER GAME ĐÀO VÀNG ---------- */
.g24-gm-start{display:flex;flex-direction:column;align-items:center;gap:4px}
.g24-gm-start__keyart{width:100%;max-width:340px;border-radius:var(--game-radius-lg);
  box-shadow:var(--game-shadow-deep)}
.g24-gm-start__kyky{width:110px;height:auto;filter:drop-shadow(0 8px 14px rgba(43,20,25,.35));
  animation:g24KykyBreath 3s ease-in-out infinite}
.g24-gm-start__title{font-family:var(--game-font-display);font-weight:800;font-size:27px;
  letter-spacing:.5px;margin-top:6px;
  background:linear-gradient(180deg,#FFE9A8 0%,#F5C518 55%,#C98F00 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 8px rgba(245,197,24,.25)}
.g24-gm-start__sub{color:var(--g24-gold-deep);font-size:13px;font-weight:600}
.g24-gm-start__stars{display:flex;gap:4px;margin-top:6px}
.g24-gm-start__stars .g24-icon{color:#B99F76;opacity:.45}
.g24-gm-start__stars .is-earned .g24-icon,.g24-gm-start__stars.is-earned .g24-icon{color:var(--g24-gold);opacity:1}
.g24-gm-start__stars .g24-icon-wrap.is-earned .g24-icon{color:var(--g24-gold);opacity:1}
.g24-gm-start__best{margin-top:6px;color:var(--g24-ink);font-weight:700;font-size:14px;
  background:var(--g24-gold-soft);border:1px solid rgba(200,155,0,.5);
  border-radius:var(--game-radius-pill);padding:5px 14px}
.g24-gm-start__best.is-first{background:#FFF6E9;border-color:rgba(200,155,0,.3);color:var(--g24-muted-2)}
.g24-gm-start__cta{font-size:18px;padding:13px 34px;animation:g24GmCtaPulse 2.2s ease-in-out infinite}
@keyframes g24GmCtaPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.g24-gm-record{font-family:var(--game-font-display);font-weight:800;font-size:19px;
  color:var(--g24-red);background:var(--surface-gold);border-radius:var(--game-radius-pill);
  padding:6px 18px;margin-top:8px;box-shadow:var(--game-glow-gold);
  animation:g24FxPop .6s var(--game-transition-fast)}
.g24-chip--hud{display:inline-flex;align-items:center;gap:5px}
.g24-chip--hud .g24-icon{color:var(--g24-gold-deep)}
/* Kỳ Kỳ pose mới theo chỉ thị anh Tiền: jumping */
@keyframes g24KykyJump{0%,100%{transform:translateY(0) scale(1,1)}30%{transform:translateY(2%) scale(1.06,.92)}60%{transform:translateY(-22%) scale(.96,1.06)}80%{transform:translateY(-6%)}}
.g24-kyky.is-jumping .g24-kyky__img{animation:g24KykyJump .7s var(--game-transition-fast) infinite}
/* KỲ KỲ V1: Kỳ Kỳ nhảy ăn mừng trên màn chiến thắng Đào Vàng */
.g24-gm-victory__kyky{width:120px;height:auto;display:block;margin:0 auto -8px;
  filter:drop-shadow(0 8px 14px rgba(43,20,25,.35));
  animation:g24KykyJump .8s var(--game-transition-fast) infinite}

/* ============================================================
   S37 MOBILE POLISH V1 — Đào Vàng (perf + text + victory mobile)
   ============================================================ */
/* 4. VICTORY card mobile-first: cột dọc HERO → SCROLL → CTA.
   Card không bao giờ cao quá viewport; stats cuộn; CTA cố định. */
.g24-gmv{display:flex;flex-direction:column;overflow:hidden;
  width:min(420px,100%);max-height:calc(100dvh - 28px)}
.g24-gmv__hero{flex:0 0 auto;text-align:center;padding-top:2px}
/* 4.2 Kỳ Kỳ vùng riêng — object-fit contain, KHÔNG crop, tự nhỏ trên máy thấp */
.g24-gmv__hero .g24-gm-victory__kyky{width:auto;height:clamp(64px,14dvh,120px);
  object-fit:contain;margin:0 auto -6px}
.g24-gmv__scroll{flex:1 1 auto;min-height:0;overflow-y:auto;
  -webkit-overflow-scrolling:touch;padding:2px 2px 6px;overscroll-behavior:contain}
/* 4.3 CTA luôn nhìn thấy · touch target ≥48px · 4.4 safe-area iPhone */
.g24-gmv__cta{flex:0 0 auto;display:flex;gap:10px;
  padding:10px 2px calc(4px + env(safe-area-inset-bottom))}
.g24-gmv__cta .g24-btn{flex:1 1 0;min-height:48px;padding:10px 6px;font-size:14.5px}
@media (max-width:480px){
  .g24-gmv__cta{flex-wrap:wrap}
  .g24-gmv__cta .g24-btn--primary{flex-basis:100%}      /* CHƠI LẠI to, hàng riêng */
}

/* 5. HUD mobile nén gọn — gameplay chiếm diện tích lớn (không redesign) */
@media (max-width:480px){
  .g24-gm-statrow{gap:5px !important;margin:4px 0 6px !important}
  .g24-gm-statrow .g24-chip--hud{font-size:12px !important;padding:4px 9px}
  .g24-gm-statrow .g24-btn--sm{padding:5px 9px;font-size:12px}
  .g24-gm-purow{gap:5px !important;margin-bottom:6px !important}
  .g24-gm-purow .g24-btn--sm{padding:6px 8px !important;font-size:12px}
}

/* ============================================================
   S37 MOBILE POLISH V2 — HUD compact + feedback safe zone
   ============================================================ */
/* 7. FEEDBACK pill nổi ĐÁY khung game (bottom safe zone trong viewport
   game — không fixed theo trang, không đè Home Indicator, không che vàng
   vì bãi vàng đã chừa 18% đáy). :empty → tự ẩn. */
.g24-gm-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  max-width:92%;padding:7px 16px;border-radius:999px;
  background:rgba(30,10,8,.72);backdrop-filter:blur(2px);
  font-weight:700;font-size:14px;line-height:1.35;text-align:center;
  color:#FFEFD8;pointer-events:none;z-index:5;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.g24-gm-toast:empty{display:none}

/* trạng thái BẬT của nút pinyin (mobile chỉ còn icon — cần thấy state) */
.g24-gm-statrow .g24-btn.is-on{background:var(--g24-gold,#F5B301);color:#5b3c00;border-color:#d99e00}

/* 1. MOBILE HUD COMPACT — mục tiêu: gameplay cao hơn ~70-120px.
   Chips 1 hàng nhỏ · nút pinyin/âm icon-only · power-up icon-only 1 hàng.
   KHÔNG xóa chức năng (tên nút vẫn còn qua title/tooltip). */
@media (max-width:480px){
  .g24-gm-btnlbl{display:none}                        /* ẩn nhãn chữ — icon-only */
  .g24-gm-statrow{gap:3px !important;margin:2px 0 4px !important}
  .g24-gm-statrow .g24-chip--hud{font-size:11px !important;padding:3px 6px;gap:3px}
  .g24-gm-statrow .g24-chip--hud svg{width:13px;height:13px}
  .g24-gm-statrow .g24-btn--sm{padding:4px 8px;font-size:13px;min-height:30px}
  .g24-gm-purow{gap:4px !important;margin-bottom:4px !important}
  .g24-gm-purow .g24-gm-pubtn{padding:5px 9px !important;font-size:14px;min-height:32px}
  /* 2+4. an toàn đáy trang (nút/tipbar không dính Home Indicator) */
  .g24-gm-wrap{padding-bottom:calc(6px + env(safe-area-inset-bottom)) !important}
  .g24-gm-wrap .g24-tipbar{margin:8px auto 2px;padding:7px 14px;font-size:12px}
  .g24-gm-toast{bottom:calc(8px + env(safe-area-inset-bottom, 0px) * 0)}
}

/* ============================================================
   BẮN BÓNG — PHASE 1 VISUAL FOUNDATION (UX/perf, chưa artwork)
   ============================================================ */
/* 6. feedback pill: DƯỚI CHÂN Kỳ Kỳ (yêu cầu anh Tiền) — nằm trên dải đất,
   trong khung game, không che bóng/pháo/Kỳ Kỳ, không sát Home Indicator */
.g24-bbl-toast{bottom:6px;font-size:13.5px;padding:6px 14px}
/* 9. start screen foundation — hierarchy/spacing/CTA (không artwork mới) */
.g24-bbl-start{text-align:center;padding:6px 2px}
.g24-bbl-start__kyky{width:auto;height:clamp(72px,15dvh,128px);object-fit:contain;
  display:block;margin:0 auto 2px;filter:drop-shadow(0 8px 14px rgba(43,20,25,.3))}
.g24-bbl-start__sub{font-weight:700;color:var(--g24-muted);font-size:14px;margin:4px 0 8px}
.g24-bbl-start__info{display:inline-block;background:var(--g24-cream);border:2px solid var(--g24-cream-line);
  border-radius:999px;padding:7px 16px;font-weight:700;font-size:13.5px;color:#6B5138}
/* 7. HUD compact mobile — gameplay chiếm phần lớn màn hình */
@media (max-width:480px){
  .g24-bbl-wrap{padding:8px 8px calc(8px + env(safe-area-inset-bottom)) !important}
  .g24-bbl-statrow{gap:4px !important;margin:4px 0 6px !important}
  .g24-bbl-statrow .g24-chip{font-size:11px !important;padding:3px 7px}
  .g24-bbl-statrow .g24-btn--sm{padding:4px 8px;font-size:13px;min-height:30px}
  .g24-bbl-wrap .g24-tipbar{margin:8px auto 2px;padding:7px 14px;font-size:12px}
}

/* S38: nhún nhẹ cho Kỳ Kỳ trong trò Lật thẻ (không chạm thẻ) */
@keyframes g24-mem-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ============================================================
 * S38b · ⚡ KI WARRIORS — MÀN CHỌN GÓI CÂU HỎI (chủ phòng)
 * Chỉ 1 bên tạo phòng & chọn phạm vi; bên vào phòng nhận đúng gói đó.
 * ============================================================ */
.g24-ki__scope{max-width:420px;margin:0 auto;text-align:left;
  background:#fff;border:2px solid #F3D9D9;border-radius:16px;padding:16px 16px 4px;
  box-shadow:0 6px 18px rgba(230,0,18,.07)}
.g24-ki__scope .g24-field{margin-bottom:14px}
.g24-ki__scope .g24-field>label{color:#B3000E;font-size:13px}
.g24-ki__scope .g24-ki__tag{margin:0 0 14px;font-size:13px;color:#777;text-align:center}
.g24-ki__pack{display:inline-block;margin:8px auto 2px;padding:7px 16px;border-radius:99px;
  background:#FFF3F2;border:1.5px solid #F3D9D9;color:#B3000E;font-weight:700;font-size:13.5px}
@media (max-width:520px){
  .g24-ki__scope{padding:12px 12px 2px;border-radius:14px}
  .g24-ki__pack{font-size:12.5px;padding:6px 12px}
}

/* ============================================================
 * S40 · ⚡ KI WARRIORS — CHỜ ĐỐI THỦ (đấu tốc độ)
 * Mỗi câu phải đợi cả 2 bên nộp thì server mới so tốc độ được;
 * tối đa ~10s vì hết giờ câu là tự khoá.
 * ============================================================ */
.g24-ki__wait{margin:10px auto 0;padding:8px 18px;border-radius:99px;display:inline-block;
  background:#FFF3F2;border:1.5px solid #F3D9D9;color:#B3000E;font-weight:700;font-size:14px;
  animation:g24-ki-wait 1.2s ease-in-out infinite}
@keyframes g24-ki-wait{0%,100%{opacity:.55}50%{opacity:1}}

/* ============================================================
 * S41 · PHÒNG LIÊN TỤC — chip "đang trong phòng" + nhãn trực tiếp
 * ============================================================ */
.g24-room-online{display:flex;align-items:center;justify-content:center;gap:6px;
  margin:6px auto 10px;padding:5px 14px;border-radius:99px;width:fit-content;
  background:#F3FBF4;border:1.5px solid #CDEBD3;color:#2F7D3C;font-size:13px}
.g24-room-online b{font-size:15px;font-weight:800;color:#1F6B2C}
.g24-room-online .dot{width:9px;height:9px;border-radius:50%;background:#35C759;
  box-shadow:0 0 0 0 rgba(53,199,89,.6);animation:g24-live-dot 1.8s ease-out infinite}
@keyframes g24-live-dot{
  0%{box-shadow:0 0 0 0 rgba(53,199,89,.55)}
  70%{box-shadow:0 0 0 7px rgba(53,199,89,0)}
  100%{box-shadow:0 0 0 0 rgba(53,199,89,0)}
}
.g24-tch-sub.g24-live{color:#2F7D3C}
@media (max-width:520px){ .g24-room-online{font-size:12px;padding:4px 11px} }

/* ============================================================
 * S42 · 🐍 SNAKE 24G — Asset Pack v1 (chỉ thị anh Tiền 21/08)
 * CHỈ VISUAL: không đụng kích thước bàn chơi, D-pad hay responsive cũ.
 * ============================================================ */
.g24-snk-ico{width:22px;height:22px;object-fit:contain;vertical-align:-5px;
  margin-right:2px;image-rendering:auto}
.g24-snk-chip{font-size:13px;display:inline-flex;align-items:center;gap:2px}
.g24-snk-icobox{display:inline-flex;align-items:center;line-height:1}
.g24-snk-btn{padding:2px 8px;line-height:1;display:inline-flex;align-items:center}
.g24-snk-ico--btn{width:26px;height:26px;margin:0}
.g24-snk-badge{width:34px;height:34px;object-fit:contain;margin-right:6px;
  filter:drop-shadow(0 2px 3px rgba(90,20,10,.35))}
.g24-snk-kyky{display:inline-block;object-fit:contain;
  filter:drop-shadow(0 4px 8px rgba(90,20,10,.28));
  animation:g24-snk-float 3.2s ease-in-out infinite}
@keyframes g24-snk-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* panel kết thúc: fade + scale nhẹ, không kéo dài */
.g24-snk-panel{animation:g24-snk-pop .18s ease-out both}
@keyframes g24-snk-pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.g24-snk-panel.is-win{box-shadow:0 10px 30px rgba(230,0,18,.22),0 0 0 3px #F5C542 inset}
.g24-snk-panel.is-over{box-shadow:0 10px 30px rgba(60,20,20,.28)}
@media (max-width:520px){
  .g24-snk-ico{width:19px;height:19px;vertical-align:-4px}
  .g24-snk-ico--btn{width:23px;height:23px}
  .g24-snk-badge{width:28px;height:28px;margin-right:4px}
}
@media (prefers-reduced-motion:reduce){
  .g24-snk-kyky,.g24-snk-panel{animation:none}
}

/* ============================================================
 * S47 · LỐI VÀO NHANH Ở SẢNH (Thành tích · Hồ sơ)
 * ============================================================
 * Thanh menu dưới rút còn 4 mục nên hai mục này chuyển lên đây.
 * Trên điện thoại thanh trên bị ẩn — không có hai nút này thì
 * học sinh mất đường vào Thành tích.
 */
.g24-hubquick{display:flex;gap:10px;margin:12px 0 4px}
.g24-hubquick__nut{
  flex:1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 10px;
  border:2px solid var(--g24-cream-line, #F0E2CE);
  border-radius:var(--game-radius-md);
  background:linear-gradient(180deg,#FFFFFF,var(--g24-cream));
  color:var(--g24-ink);
  font-family:var(--game-font-ui);
  font-size:14.5px;font-weight:800;
  text-decoration:none;cursor:pointer;
  box-shadow:var(--game-shadow-soft);
  transition:transform var(--game-transition-fast), border-color 150ms ease;
  -webkit-tap-highlight-color:transparent;
}
.g24-hubquick__nut:hover{border-color:var(--g24-red)}
.g24-hubquick__nut:active{transform:scale(.96)}
.g24-hubquick__ic{font-size:19px;line-height:1}

/* ================================================================
 * S56 (24/08/2026) · PREMIUM UI PASS 2 — SẢNH · ÔN TẬP · XẾP HẠNG
 * ================================================================
 * Khối này chỉ ĐÈ LÊN phần trình bày, đặt ở CUỐI file nên không sửa
 * một luật cũ nào ở trên — muốn quay lại bản cũ chỉ cần xoá nguyên
 * khối này. Cùng ngôn ngữ thiết kế với màn ⚔️ Đấu hạng (S55):
 *   · bo góc lớn · viền vàng mảnh · bóng nhiều lớp · highlight trong
 *   · chỉ animate transform/opacity · tắt sạch khi máy giảm chuyển động
 * Tiền tố MỚI dùng ở đây: .gx-*  (đầu trang dùng chung cho 3 màn)
 * ================================================================ */

/* ---------------- ĐẦU TRANG DÙNG CHUNG (.gx-head) ---------------- */
.gx-head{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;gap:12px;
  padding:15px 15px;margin:0 0 14px;
  border-radius:var(--game-radius-xl);
  background:
    radial-gradient(90% 130% at 84% 0%, rgba(255,213,77,.40) 0%, rgba(255,213,77,0) 58%),
    linear-gradient(155deg, #FF3244 0%, var(--g24-red) 32%, var(--g24-red-dark) 70%, #6E0A16 100%);
  border:2px solid rgba(255,214,102,.46);
  box-shadow:0 14px 32px rgba(122,15,28,.30), inset 0 1px 0 rgba(255,255,255,.24);
  color:var(--g24-white);
}
.gx-head::after{
  content:'';position:absolute;inset:-40% -10%;pointer-events:none;z-index:1;
  background:linear-gradient(102deg, transparent 40%, rgba(255,255,255,.24) 50%, transparent 60%);
  transform:translate3d(-120%,0,0);
  animation:rkShine 6.5s ease-in-out infinite;
}
.gx-head__ic{
  position:relative;z-index:2;flex:0 0 auto;
  width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:20px;
  background:radial-gradient(circle at 32% 28%, #FFF6D6, #FFD54D 45%, #D79A00 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.30), inset 0 -3px 8px rgba(150,100,0,.45), inset 0 2px 3px #FFF9E3;
  animation:rkFloat 3.4s ease-in-out infinite;
}
.gx-head__tx{position:relative;z-index:2;flex:1;min-width:0}
.gx-head__tx h1{
  margin:0;font-family:var(--game-font-display);
  font-size:clamp(18px, 5vw, 26px);font-weight:800;letter-spacing:.3px;
  /* line-height ≥1.15 — chữ tô gradient cắt cụt dấu tiếng Việt nếu sát hơn */
  line-height:1.18;padding-top:2px;
  background:linear-gradient(180deg,#FFFDF2 0%,#FFE9A8 42%,#F5C518 72%,#D79A00 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(122,15,28,.55));
}
.gx-head__tx p{
  margin:4px 0 0;font-size:12.5px;font-weight:600;line-height:1.4;
  color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.gx-head__ky{
  position:relative;z-index:2;flex:0 0 auto;width:64px;height:auto;
  filter:drop-shadow(0 7px 12px rgba(0,0,0,.38));
  animation:rkIdle 4.4s ease-in-out infinite;
}

/* ================================================================
 * 1 · SẢNH GAME (#/hub)
 * ================================================================ */
.g24-hero{
  border-radius:var(--game-radius-xl);
  padding:16px 16px;margin-bottom:16px;
  background:
    radial-gradient(90% 130% at 84% 0%, rgba(255,213,77,.42) 0%, rgba(255,213,77,0) 58%),
    radial-gradient(70% 100% at 4% 100%, rgba(255,90,90,.36) 0%, rgba(255,90,90,0) 60%),
    linear-gradient(158deg, #FF3244 0%, var(--g24-red) 32%, var(--g24-red-dark) 68%, #6E0A16 100%);
  border:2px solid rgba(255,214,102,.46);
  box-shadow:0 18px 38px rgba(122,15,28,.32), inset 0 1px 0 rgba(255,255,255,.22);
  isolation:isolate;
}
/* hạt sáng lấp lánh — 0 phần tử DOM, 0 ảnh */
.g24-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.7;
  background:
    radial-gradient(2.5px 2.5px at 14% 24%, #FFE9A8 40%, transparent 42%),
    radial-gradient(2px 2px   at 34% 72%, #FFFFFF 40%, transparent 42%),
    radial-gradient(3px 3px   at 62% 14%, #FFD54D 40%, transparent 42%),
    radial-gradient(2px 2px   at 86% 62%, #FFFFFF 40%, transparent 42%);
  animation:rkTwinkle 3.8s ease-in-out infinite;
}
/* chữ Hán trang trí cũ: mờ hơn cho khỏi lấn chữ chính */
.g24-hero::after{font-size:78px;color:rgba(255,255,255,.05);right:-4px;bottom:-18px}
.g24-hero>div{position:relative;z-index:2;flex:1;min-width:0}
.g24-hero__mascot{position:relative;z-index:2}
.g24-hero__mascot img{width:88px}
.g24-hero h1{
  font-family:var(--game-font-display);
  font-size:clamp(19px, 5.2vw, 28px);line-height:1.2;
  background:linear-gradient(180deg,#FFFDF2 0%,#FFE9A8 44%,#F5C518 74%,#D79A00 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(122,15,28,.5));
  text-shadow:none;
}
.g24-hero p{margin-top:5px;font-size:13px;line-height:1.4}
.g24-hero__slogan{
  margin-top:10px;padding:6px 14px;font-size:12px;
  box-shadow:0 4px 10px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
/* điện thoại: mascot sang PHẢI cho giống hero Đấu hạng, đỡ cao trang */
@media (max-width:767px){
  .g24-hero{flex-direction:row-reverse;text-align:left;padding:15px 14px;gap:10px}
  .g24-hero__mascot img{width:78px}
}

/* --- hai nút nhanh Thành tích / Hồ sơ --- */
.g24-hubquick{gap:9px;margin:12px 0 2px}
.g24-hubquick__nut{
  min-height:52px;border-radius:var(--game-radius-md);
  border:2px solid var(--g24-gold);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF3DC 100%);
  box-shadow:0 6px 16px rgba(200,155,0,.20), inset 0 1px 0 #fff;
  font-family:var(--game-font-display);font-size:15px;
  color:var(--g24-red-dark);
}
.g24-hubquick__nut:hover{border-color:var(--g24-red);transform:translateY(-2px)}
.g24-hubquick__ic{font-size:21px}

/* --- tiêu đề mục --- */
.g24-section-title{
  font-family:var(--game-font-display);font-size:18.5px;font-weight:800;
  margin:20px 2px 12px;letter-spacing:.2px;color:var(--g24-ink);
}
.g24-section-title::before{
  content:'';width:5px;height:20px;border-radius:3px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--g24-gold),var(--g24-red));
  box-shadow:0 2px 5px rgba(230,0,18,.28);
}
/* trên nền đỏ của Sảnh phải là chữ trắng mới đọc được */
body[data-g24-bg="hub"] .g24-section-title{
  color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.35);
}
body[data-g24-bg="hub"] .g24-section-title::before{
  background:linear-gradient(180deg,#FFF3C4,var(--g24-gold));
}

/* --- thẻ game --- */
.g24-grid{gap:12px}
.g24-gamecard{
  border-radius:var(--game-radius-lg);
  padding:10px 10px 12px;
  border:2px solid rgba(255,214,102,.55);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFF8EE 100%);
  box-shadow:0 10px 24px rgba(122,15,28,.18), inset 0 1px 0 #fff, inset 0 -3px 0 rgba(143,0,11,.06);
}
.g24-gamecard:hover{box-shadow:0 16px 32px rgba(122,15,28,.26);border-color:var(--g24-gold)}
.g24-gamecard__art{
  height:104px;border-radius:16px;margin-bottom:9px;
  border:2px solid rgba(255,214,102,.9);
  box-shadow:inset 0 -10px 18px rgba(0,0,0,.22), inset 0 2px 0 rgba(255,255,255,.4),
             0 4px 10px rgba(122,15,28,.14);
}
.g24-gamecard__art::after{
  /* lớp kính bóng phía trên — cho ra chất "app game" thay vì ảnh phẳng */
  content:'';position:absolute;left:0;right:0;top:0;height:46%;z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
  pointer-events:none;
}
.g24-gamecard__name{font-family:var(--game-font-display);font-size:16px;line-height:1.2}
.g24-gamecard__desc{
  font-size:12px;line-height:1.35;min-height:34px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.g24-gamecard__meta{margin-top:7px;align-items:center}
.g24-gamecard__play{
  margin-top:10px;padding:9px 18px;font-size:13.5px;
  border-radius:var(--game-radius-pill);
  box-shadow:0 4px 0 var(--g24-red-deep), 0 8px 16px rgba(230,0,18,.30), inset 0 1px 0 rgba(255,255,255,.4);
}
.g24-gamecard:active .g24-gamecard__play{box-shadow:0 1px 0 var(--g24-red-deep), inset 0 1px 0 rgba(255,255,255,.4)}
.g24-badge{padding:4px 9px;font-size:10px;font-weight:800;white-space:nowrap;border:1.5px solid transparent}
.g24-badge--beta{border-color:var(--g24-gold-deep)}
.g24-stars{letter-spacing:1.5px;text-shadow:0 1px 0 rgba(255,255,255,.8)}

/* --- thanh mẹo --- */
.g24-tipbar{
  border-radius:var(--game-radius-lg);border:2px solid var(--g24-gold);
  background:linear-gradient(180deg,#FFFDF6,var(--g24-cream));
  box-shadow:0 8px 20px rgba(200,155,0,.18), inset 0 1px 0 #fff;
  padding:12px 18px;
}

/* ================================================================
 * 2 · ÔN TẬP (#/review)
 * ================================================================ */
.g24-panel{
  border-radius:var(--game-radius-xl);
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFBF4 100%);
  border:2px solid rgba(230,0,18,.09);
  box-shadow:0 12px 30px rgba(122,15,28,.16), inset 0 1px 0 #fff;
  padding:16px 14px;
}
.g24-wizard{max-width:680px}
.g24-field{
  margin-bottom:14px;padding-bottom:14px;
  border-bottom:1.5px dashed var(--g24-cream);
}
.g24-field:last-child{border-bottom:none;padding-bottom:0;margin-bottom:0}
.g24-field>label{
  font-family:var(--game-font-display);
  font-size:12.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--g24-muted-2);margin-bottom:8px;
}
/* ô chọn (select) kiểu game — mũi tên tự vẽ, không dùng mũi tên hệ thống */
.g24-select,.g24-input{
  min-height:50px;border-radius:var(--game-radius-md);
  border:2px solid var(--g24-cream);
  background:linear-gradient(180deg,#FFFFFF,#FFF6E9);
  box-shadow:var(--game-shadow-soft), inset 0 1px 0 #fff;
  font-family:var(--game-font-ui);font-weight:700;font-size:14.5px;
  transition:border-color 150ms ease, box-shadow 150ms ease;
}
select.g24-select{
  -webkit-appearance:none;appearance:none;
  padding-right:38px;
  background:
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9'%3E%3Cpath d='M1.5 1.5 6.5 6.5l5-5' fill='none' stroke='%23B3000E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center,
    linear-gradient(180deg,#FFFFFF,#FFF6E9);
}
.g24-select:focus,.g24-input:focus{
  border-color:var(--g24-gold);
  box-shadow:0 0 0 4px rgba(245,197,24,.22), inset 0 1px 0 #fff;
}

/* chip chung (chế độ ôn · số câu · độ khó · lọc bảng xếp hạng) */
.g24-chip{
  min-height:46px;padding:9px 15px;border-radius:var(--game-radius-md);
  border:2px solid var(--g24-cream);
  background:linear-gradient(180deg,#FFFFFF,#FFF6E9);
  box-shadow:var(--game-shadow-soft), inset 0 1px 0 #fff;
  font-family:var(--game-font-ui);font-weight:800;font-size:13.5px;color:var(--g24-ink);
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--game-transition-fast), box-shadow var(--game-transition-fast),
             border-color 150ms ease;
}
.g24-chip:active{transform:scale(.96)}
.g24-lb-filters .g24-chip.is-selected,
.g24-chip.is-selected{
  position:relative;
  border-color:var(--g24-gold);
  background:linear-gradient(180deg,var(--g24-red-light),var(--g24-red) 52%,var(--g24-red-dark));
  color:#fff;
  box-shadow:0 6px 16px rgba(230,0,18,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.g24-lb-filters{gap:8px;margin-bottom:12px}
/* trong bảng chọn của Ôn tập: căn TRÁI cho dễ quét mắt, không căn giữa */
.g24-field .g24-lb-filters,
.g24-root>.g24-lb-filters{justify-content:flex-start}
.g24-root>.g24-lb-filters{
  padding:12px;border-radius:var(--game-radius-lg);
  background:linear-gradient(180deg,#FFFFFF,#FFFBF4);
  border:2px solid rgba(230,0,18,.09);
  box-shadow:var(--game-shadow-soft);
  margin-bottom:14px;
}

/* ô chọn game trong Ôn tập */
.g24-options{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:9px}
.g24-opt{
  min-height:52px;border-radius:var(--game-radius-md);
  border:2px solid var(--g24-cream);
  background:linear-gradient(180deg,#FFFFFF,#FFF6E9);
  box-shadow:var(--game-shadow-soft), inset 0 1px 0 #fff;
  font-weight:700;font-size:13.5px;
  transition:transform var(--game-transition-fast), border-color 150ms ease, box-shadow 150ms ease;
}
.g24-opt:active{transform:scale(.97)}
.g24-opt .ic{font-size:22px}
.g24-opt.is-selected{
  border-color:var(--g24-gold);
  background:linear-gradient(180deg,#FFF7E0,#FFE9A8);
  color:var(--g24-red-dark);
  box-shadow:0 6px 16px rgba(200,155,0,.28), inset 0 1px 0 #fff;
}
.g24-opt.is-selected::after{
  content:'✓';position:absolute;top:-8px;right:-8px;
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,#FFF3C4,var(--g24-gold) 55%,#D79A00);
  color:#6E0A16;font-size:13px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 2px 6px rgba(0,0,0,.28);
}

/* nút BẮT ĐẦU — CTA lớn nhất của màn Ôn tập */
.g24-wizard>.g24-btn--primary{
  min-height:56px;font-size:17px;letter-spacing:.6px;
  border-radius:var(--game-radius-pill);
  margin-top:16px!important;
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#FFF3C4 0%,var(--g24-gold) 52%,#D79A00 100%);
  color:#6E0A16;
  box-shadow:0 6px 0 #9A6E00, 0 12px 24px rgba(200,155,0,.40), inset 0 2px 0 #FFFBE8;
  text-shadow:none;
}
.g24-wizard>.g24-btn--primary::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(102deg,transparent 42%,rgba(255,255,255,.8) 50%,transparent 58%);
  transform:translate3d(-130%,0,0);
  animation:rkShine 3.4s ease-in-out infinite;
}
.g24-wizard>.g24-btn--primary:hover{filter:brightness(1.04);transform:translateY(-1px)}
.g24-wizard>.g24-btn--primary:active{
  transform:translateY(4px) scale(.99);box-shadow:0 2px 0 #9A6E00;
}
.g24-summary{
  border-radius:var(--game-radius-md);
  background:linear-gradient(180deg,#FFFDF6,var(--g24-cream));
  border:2px dashed var(--g24-gold);
}

/* ================================================================
 * 3 · XẾP HẠNG (#/leaderboard)
 * ================================================================ */
/* ⚠️ .g24-lbtabs / .g24-lbmua / .g24-lbtoi ĐÃ CHUYỂN SANG rank.css
 * (khối "S56 · ĐỒNG BỘ MÀN XẾP HẠNG" ở cuối file đó). Lý do: ba lớp này
 * do rank.css định nghĩa gốc; đặt bản đè ở g24.css sẽ vừa bị rank.css
 * ghi đè ngược (nạp sau), vừa phạm luật "rank.css không trùng tên class
 * với g24.css" mà bộ test C17b canh. */

/* tiêu đề "VƯƠNG QUỐC 24G" của thẻ điểm tích luỹ */
.g24-lb-head{
  position:relative;overflow:hidden;
  margin:0 0 14px;padding:15px 14px 14px;
  border-radius:var(--game-radius-xl);
  background:
    radial-gradient(90% 130% at 50% 0%, rgba(255,213,77,.38) 0%, rgba(255,213,77,0) 60%),
    linear-gradient(158deg,#FF3244 0%, var(--g24-red) 34%, var(--g24-red-dark) 74%, #6E0A16 100%);
  border:2px solid rgba(255,214,102,.46);
  box-shadow:0 14px 32px rgba(122,15,28,.30), inset 0 1px 0 rgba(255,255,255,.24);
}
.g24-lb-head__title{
  position:relative;z-index:2;
  font-family:var(--game-font-display);font-size:clamp(20px,5.4vw,30px);
  letter-spacing:1px;line-height:1.2;padding-top:2px;
  background:linear-gradient(180deg,#FFFDF2 0%,#FFE9A8 44%,#F5C518 74%,#D79A00 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 0 rgba(122,15,28,.5));
  text-shadow:none;
}
.g24-lb-head__title .leaf{-webkit-text-fill-color:#FFE9A8;color:#FFE9A8}
.g24-lb-head__top{
  position:relative;z-index:2;margin-top:8px;padding:6px 20px;font-size:12.5px;
  background:linear-gradient(180deg,#FFF3C4,var(--g24-gold) 55%,#D79A00);
  color:#6E0A16;border:2px solid rgba(122,15,28,.25);
  box-shadow:0 4px 10px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.6);
  text-shadow:none;
}
/* dòng của mình ở bảng điểm tích luỹ */
.g24-lb-merow{
  border-radius:var(--game-radius-md);
  background:linear-gradient(120deg,#FFF3C4,#FFFDF4 75%);
  border:2px solid var(--g24-gold);
  box-shadow:0 6px 16px rgba(200,155,0,.20), inset 0 1px 0 #fff;
  padding:12px 16px;font-weight:700;
}
/* bảng danh sách */
.g24-lb{
  border-radius:var(--game-radius-lg);overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF,#FFFBF4);
  border:2px solid rgba(230,0,18,.09);
  box-shadow:var(--game-shadow-soft);
}
.g24-lb__row{padding:11px 13px;border-bottom:1px solid var(--g24-cream)}
.g24-lb__row.is-me{background:linear-gradient(90deg,var(--g24-gold-soft),transparent)}
.g24-lb__rank{font-family:var(--game-font-display)}
.g24-lb__rank.top{
  color:#fff;background:linear-gradient(180deg,#FFE9A8,#E9B300);
  border-radius:9px;padding:3px 0;color:#5A3B00;
  box-shadow:0 2px 6px rgba(200,155,0,.4);
}
.g24-lb__score{font-family:var(--game-font-display);font-size:15px}
.g24-lb__avatar{border:2px solid #fff;box-shadow:0 2px 6px rgba(43,20,25,.22)}

/* ================================================================
 * 4 · GIẢM CHUYỂN ĐỘNG
 * ================================================================ */
@media (prefers-reduced-motion:reduce){
  .gx-head::after,.gx-head__ic,.gx-head__ky,
  .g24-hero::before,.g24-hero__mascot,
  .g24-lbmua::after,.g24-wizard>.g24-btn--primary::after{
    animation:none!important;
  }
}

/* --- bục vinh danh: máy hẹp thì tên hạng 3 bị CẮT vào thành sảnh --- */
@media (max-width:420px){
  .g24-podium{gap:8px}
  .g24-podium__base .nm{max-width:120%;font-size:12.5px}
  .g24-podium__col.rank-1 .g24-podium__base .nm{font-size:13.5px}
  .g24-podium__base .sc{font-size:11.5px}
  .g24-podium__base .lop{font-size:10.5px}
}