:root{--bg:#081233;--bg2:#0d1d55;--ink:#eef3ff;--mute:#a9b8e6;--line:rgba(160,185,255,.16);
--gold1:#ffe46b;--gold2:#ffb627;--gold3:#f28b00;
--t1:#ef5a5a;--t2:#43b86a;--t4:#3d8ef0;--t8:#9b6cf0;--t16:#f2c230;--t32:#f08a3c;--t64:#2ec4b6;--t128:#ee6fa8;
--display:'Changa One','Nunito',system-ui,sans-serif;--body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--r:22px}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
/* height:auto BẮT BUỘC khi ảnh có width/height (chống giật layout) — thiếu là ảnh bị kéo méo (lỗi 11/9) */
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 600px at 70% -10%,rgba(64,124,255,.45),transparent 60%),radial-gradient(700px 500px at -10% 30%,rgba(155,108,240,.22),transparent 60%),linear-gradient(180deg,var(--bg2) 0%,var(--bg) 55%,#060d27 100%)}
.float{position:absolute;display:grid;place-items:center;font-family:var(--display);color:#fff;border-radius:24%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18),0 10px 30px rgba(0,0,0,.25);opacity:.09;animation:drift 18s ease-in-out infinite}
@media (max-width:1180px){.float{display:none}}
@keyframes drift{0%,100%{transform:translateY(0) rotate(var(--rot))}50%{transform:translateY(-24px) rotate(calc(var(--rot) * -1))}}
header{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(8,18,51,.72);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:14px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand img{width:42px;height:42px;border-radius:12px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.brand b{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.5px;line-height:1;background:linear-gradient(180deg,var(--gold1),var(--gold2) 60%,var(--gold3));-webkit-background-clip:text;background-clip:text;color:transparent}
.brand span{display:block;font-size:10px;font-weight:900;letter-spacing:3px;color:var(--mute);margin-top:3px}
nav.main{display:flex;align-items:center;gap:4px}
nav.main a.lk{text-decoration:none;color:var(--mute);font-weight:800;font-size:15px;padding:8px 12px;border-radius:10px;white-space:nowrap}
nav.main a.lk:hover,nav.main a.lk[aria-current]{color:#fff;background:rgba(255,255,255,.06)}
nav.main .btn{margin-left:8px}
/* PILL PHẲNG (Anh chốt 15/10/2026: *"thay cho anh các pill giả 3D play/browse all game/pick a
   game... về pill 2D đơn giản"*).
   ⚠️ KHỐI CSS NÀY NẰM TRONG TEMPLATE LITERAL ⇒ chú thích TUYỆT ĐỐI không dùng nháy ngược,
   nó đóng chuỗi và vỡ build. Hoa vấp đúng lỗi này hai lần trong ngày 15/10.
   Ba thứ làm nên vẻ giả-3D, đã bỏ cả ba — bỏ thiếu một là vẫn còn nổi khối:
     ① linear-gradient(180deg,…)      → sáng trên, tối dưới = mặt cong
     ② box-shadow:inset 0 -5px 0 …    → cạnh dưới dày = thành khối
     ③ 0 10px 26px rgba(255,170,30,…) → hào quang = vật nổi trên mặt phẳng
   Và bỏ luôn transform:translateY khi hover/nhấn: đó là chuyển động "nút lún xuống", nó chỉ có
   nghĩa khi nút là một khối. Thay bằng ĐỔI MÀU — pill phẳng vẫn phải có tín hiệu hover, bỏ trắng
   thì người dùng không biết nó bấm được. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:400;letter-spacing:.5px;color:#4a2400;border-radius:16px;padding:14px 26px;font-size:20px;line-height:1;background:var(--gold2);transition:background .12s ease;white-space:nowrap}
.btn:hover{background:var(--gold1)}.btn:active{background:var(--gold3)}
.btn.sm{font-size:16px;padding:10px 18px;border-radius:13px}
.btn.big{font-size:24px;padding:18px 34px;border-radius:18px}
.btn.ghost{color:#fff;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)}
/* 🔴 color:inherit — KHÔNG được bỏ (Anh bắt 15/10/2026: *"dấu > Play ở More Games và trang chủ khác
   màu nhi?"*). Tam giác này là một SPAN vẽ bằng viền, màu lấy từ currentColor, tức từ thuộc tính
   color của chính nó. Nút Play trong khối deck nằm dưới '.deck-bar span{color:var(--mute)}' — quy tắc
   đó nhắm mấy chữ phụ, nhưng nó bắt luôn span-làm-hình này ⇒ tam giác thành xanh nhạt #a9b8e6 trên
   nền vàng, gần như mất, trong khi chữ "Play" ngay cạnh vẫn nâu đậm.
   📐 currentColor làm HÌNH phụ thuộc vào color KẾ THỪA, nên một quy tắc nhắm thẻ span chung ở tổ tiên
   đổi được hình mà không ai thấy mình đã đổi. Neo nó về màu chữ của nút: inherit lấy từ .btn, và
   '.btn .tri' (2 lớp) thắng '.deck-bar span' (1 lớp + 1 thẻ).
   ⚠️ QUY ƯỚC TỆP NÀY: chú thích trong vùng CSS/script dùng 'nháy đơn' cho tên CSS. Nháy ngược đóng
   template literal và vỡ build — Hoa vấp BA lần trong ngày 15/10, kể cả ngay sau khi tự viết cảnh báo. */
.btn .tri{width:0;height:0;color:inherit;border-left:13px solid currentColor;border-top:8px solid transparent;border-bottom:8px solid transparent}
.btn.sm .tri{border-left-width:10px;border-top-width:6px;border-bottom-width:6px}
.lk2{color:#cfe0ff;font-weight:800;text-decoration:none;font-size:15px;white-space:nowrap}.lk2:hover{color:#fff;text-decoration:underline}
.chip{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#cfe0ff;background:rgba(61,142,240,.16);border:1px solid rgba(61,142,240,.4);padding:6px 12px;border-radius:999px}
.chip i{width:8px;height:8px;border-radius:50%;background:#4df08a;box-shadow:0 0 0 4px rgba(77,240,138,.18)}
.badge{display:inline-block;font-size:11px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;padding:4px 9px;border-radius:999px;color:#1b1200;background:var(--gold2)}
.badge.soon{color:#fff;background:rgba(255,255,255,.14)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6vw,72px);line-height:.98;margin:18px 0 16px;letter-spacing:.5px}
.gold{color:var(--gold2)}
.lead{font-size:clamp(17px,1.6vw,19px);color:var(--mute);max-width:36ch;margin:0 0 26px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.trust{display:flex;flex-wrap:wrap;gap:18px;margin-top:22px;color:var(--mute);font-weight:800;font-size:14px}
.trust span::before{content:"";display:inline-block;width:14px;height:14px;margin-right:7px;vertical-align:-2px;border-radius:4px;background:var(--t2)}
.trust span:nth-child(2)::before{background:var(--t4)}.trust span:nth-child(3)::before{background:var(--t8)}
section{padding:64px 0}
.eyebrow{font-weight:900;font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--gold2)}
h2{font-family:var(--display);font-weight:400;font-size:clamp(32px,4vw,46px);line-height:1.05;margin:8px 0 14px;letter-spacing:.3px}
h3{font-family:var(--display);font-weight:400}
.sub{color:var(--mute);max-width:60ch;margin:0}
.head-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:14px}
.card{background:linear-gradient(180deg,rgba(30,52,130,.55),rgba(14,26,72,.7));border:1px solid var(--line);border-radius:var(--r)}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;font-weight:900;letter-spacing:.5px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#dbe6ff}
/* hero trang chủ */
.hero{padding:56px 0 40px}
.hero .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center}
/* HERO NGẪU NHIÊN: mọi khối mang thuộc tính data-ft đều ẩn, chỉ khối trùng số trên thẻ html mới hiện.
   Dòng cuối là LƯỚI AN TOÀN cho trường hợp KHÔNG có JS: thẻ html không mang data-ft ⇒ hiện khối 0.
   Thiếu dòng đó thì người tắt JS thấy một khoảng trống nơi đáng lẽ là hero. */
.deck [data-ft]{display:none}
.deck article.deck-main[data-ft]{display:block}
.deck div.deck-row[data-ft]{display:grid}
html[data-ft] .deck [data-ft]{display:none}
html[data-ft="0"] .deck article.deck-main[data-ft="0"],html[data-ft="1"] .deck article.deck-main[data-ft="1"],html[data-ft="2"] .deck article.deck-main[data-ft="2"],html[data-ft="3"] .deck article.deck-main[data-ft="3"]{display:block}
html[data-ft="0"] .deck div.deck-row[data-ft="0"],html[data-ft="1"] .deck div.deck-row[data-ft="1"],html[data-ft="2"] .deck div.deck-row[data-ft="2"],html[data-ft="3"] .deck div.deck-row[data-ft="3"]{display:grid}
html:not([data-ft]) .deck [data-ft]:not([data-ft="0"]){display:none}
.deck{display:grid;gap:14px}
.deck-main{overflow:hidden;position:relative;box-shadow:0 30px 80px rgba(20,60,200,.45),0 0 0 1px rgba(255,255,255,.08)}
.deck-main>a>img{aspect-ratio:16/9;object-fit:cover;width:100%}
.deck-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px 12px 16px}
.deck-bar b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1;display:block}
.deck-bar span{color:var(--mute);font-size:14px;font-weight:800}
.deck-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.deck-mini{display:grid;grid-template-columns:76px 1fr;gap:12px;align-items:center;padding:10px;overflow:hidden}
.deck-mini img{width:76px;height:76px;border-radius:16px;object-fit:cover}
.deck-mini b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1.1;display:block}
.deck-mini .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px}
/* lưới game */
.games{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.game{overflow:hidden;display:flex;flex-direction:column;position:relative}
.game .cover{aspect-ratio:1/1;object-fit:cover;width:100%}
.game .ribbon{position:absolute;top:14px;left:14px}
.game .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:10px;flex:1}
.game h3{font-size:28px;margin:0;line-height:1}
.game h3 a{text-decoration:none}
.game p{margin:0;color:var(--mute);font-size:15px}
.game .actions{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:6px}
/* mới & sắp ra */
.fresh{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.fresh .card{overflow:hidden;display:flex;flex-direction:column;position:relative}
.fresh img{aspect-ratio:16/9;object-fit:cover;width:100%}
.fresh .body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.fresh h3{font-size:24px;margin:0;line-height:1}
.fresh p{margin:0;color:var(--mute);font-size:15px}
.fresh .ribbon{position:absolute;top:14px;left:14px}
.soon{display:grid;place-items:center;text-align:center;padding:28px 20px;min-height:240px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 14px,transparent 14px 28px),linear-gradient(180deg,rgba(24,40,100,.5),rgba(10,20,58,.7))}
.soon .q{width:84px;height:84px;border-radius:22px;display:grid;place-items:center;font-family:var(--display);font-size:46px;color:#fff;background:rgba(255,255,255,.08);margin:0 auto 14px}
.soon h3{font-size:22px;margin:0 0 6px}.soon p{margin:0;color:var(--mute);font-size:14px}
/* vì sao chơi */
.feats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.feat{padding:22px}
.tile{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;font-family:var(--display);font-size:26px;color:#fff;margin-bottom:14px}
.feat h3{margin:0 0 6px;font-size:19px;font-weight:900;font-family:var(--body)}
.feat p{margin:0;color:var(--mute);font-size:15px}
.about p{color:var(--mute);max-width:75ch}
.final{margin:20px 0 70px;padding:44px 28px;text-align:center;border-radius:30px;position:relative;overflow:hidden;background:radial-gradient(600px 300px at 50% 0%,rgba(80,140,255,.55),transparent 70%),linear-gradient(180deg,#1b3ba8,#0f2168);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(20,60,200,.35)}
.final img{width:92px;height:92px;border-radius:24px;margin:0 auto 14px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.final h2{margin-top:0}.final p{color:#cfdcff;margin:0 auto 22px;max-width:46ch}
footer{border-top:1px solid var(--line);padding:30px 0 40px;color:var(--mute);font-size:14px}
footer .row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:4px 16px}
footer nav a{color:var(--mute);text-decoration:none;font-weight:800}footer nav a:hover{color:#fff}
footer .guides{margin-top:14px;font-size:14px}footer .guides b{color:#fff;font-weight:800;margin-right:4px}footer .guides a{font-weight:700}
.fine{margin-top:14px;font-size:13px;opacity:.8}
/* danh mục */
.pagehead{padding:44px 0 10px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chipbtn{font:inherit;font-weight:900;font-size:14px;color:#cfe0ff;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);padding:8px 14px;border-radius:999px;cursor:pointer}
.chipbtn span{opacity:.6;margin-left:4px}
.chipbtn:hover{background:rgba(255,255,255,.12)}
.chipbtn.is-on{color:#1b1200;background:var(--gold2);border-color:transparent}
.chipbtn.is-on span{opacity:.7}
/* 5 cột, không 4 (15/10/2026 — Anh: *"lưới khá là to, choán hết phần lớn màn hình"*).
   Nguyên nhân là SỐ CỘT KHOÁ CỨNG: ô không có kích thước trần nên màn hình càng rộng ô càng phình
   chứ không thêm cột. Đo trên laptop 1440×900: 4 cột ⇒ ô to 552px = 61% chiều cao màn hình;
   5 cột ⇒ 438px = 49%; 6 cột ⇒ 363px = 40% nhưng ô nhỏ còn 173px, ảnh game bắt đầu khó nhìn — mà
   cổng này bán game bằng ảnh. */
.catalog{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:26px;grid-auto-flow:dense}
.gcard{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:1/1}
/* Ứng viên ô to mang sẵn dòng tagline trong HTML để JS đổi vai được; khi nó KHÔNG phải ô to thì
   giấu đi, vì ô nhỏ chỉ đủ chỗ cho tên game. */
.gcard:not(.big) .gnm small{display:none}
.gcard.big{grid-column:span 2;grid-row:span 2}   /* vẫn giữ aspect-ratio 1/1 của .gcard: ô to là ô VUÔNG gấp bốn, không phải ô cao tuỳ nội dung */
/* LƯỚI ĐỀU — bật khi người xem đang TÌM, hoặc sắp theo một tiêu chí có thứ tự (Mới · A-Z · Đề xuất).
   📐 Ô to là lời khẳng định "hãy xem cái này trước". Khi thứ tự đã có nghĩa, ô to nhấn mạnh sai chỗ:
   ở A-Z nó tôn vinh game có tên đầu bảng, ở kết quả tìm nó tôn vinh một kết quả không hơn gì các kết
   quả khác. Nên nó tắt — đổi KÍCH CỠ, không đổi nội dung. */
.catalog.deu .gcard.big{grid-column:span 1;grid-row:span 1}
.catalog.deu .gcard.big .gnm{font-size:14px}
.catalog.deu .gcard.big .gnm small{display:none}
.catalog.deu .gcard.big .gic{width:44px;height:44px;border-radius:14px}
.catalog.deu .gcard.big .gplay{right:10px;bottom:10px}
.catalog.deu .gcard.big .gplay .btn{font-size:13px;padding:7px 11px;gap:6px}
.cong-cu{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}
.cong-cu label{font-size:13px;font-weight:800;color:#9fb0d8}
.o-tim{flex:1 1 220px;min-width:180px;font:inherit;font-size:15px;color:#e8edff;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 16px}
.o-tim::placeholder{color:#8fa0c8}
.o-tim:focus-visible,.sapxep:focus-visible{outline:2px solid var(--gold1);outline-offset:2px}
.sapxep{font:inherit;font-size:14px;font-weight:800;color:#e8edff;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.16);border-radius:999px;padding:10px 14px;cursor:pointer}
.sapxep option{background:#131a33;color:#e8edff}
.gcard .cover{display:block;position:absolute;inset:0}
.gcard .cover>img{width:100%;height:100%;object-fit:cover;display:block}
.gcard .shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(4,10,28,.86) 0%,rgba(4,10,28,.35) 34%,rgba(4,10,28,0) 62%)}
.gcard .gmeta{position:absolute;left:12px;right:12px;bottom:12px;display:flex;align-items:center;gap:10px}
.gcard:not(.big) .gmeta{right:76px}
/* Ô nhỏ chỉ rộng ~190px trên điện thoại: pill cỡ mặc định chiếm gần nửa ô và lấn tên game.
   (Đo bằng ảnh chụp ở chế độ cảm ứng, nơi pill hiện sẵn — chế độ chuột không lộ ra vì nó chỉ hiện
   lúc rê.) */
.gcard:not(.big) .gplay .btn{font-size:13px;padding:7px 11px;gap:6px}
.badge.b-hot{background:#ff4d4f;color:#fff}
.badge.b-favorite{background:#a06bff;color:#fff}
.gcard .gic{width:44px;height:44px;border-radius:13px;flex:0 0 auto;box-shadow:0 3px 10px rgba(0,0,0,.4)}
/* Ô nhỏ chỉ mang TÊN, không icon — đúng như cổng game Anh gửi tham khảo. Lý do thật: icon là bản thu
   của chính bìa, nên ở ô 268px nó thành ảnh-trong-ảnh, trông như lỗi hiển thị. Ô to thì còn chỗ. */
.gcard:not(.big) .gic{display:none}
.gcard:not(.big) .gnm{font-size:14px}
.gcard.big .gic{width:60px;height:60px;border-radius:18px}
.gcard .gnm{color:#fff;font-weight:900;font-size:15px;line-height:1.2;text-shadow:0 2px 8px rgba(0,0,0,.6);overflow:hidden}
.gcard.big .gnm{font-size:24px}
.gcard .gnm small{display:block;font-weight:700;font-size:13px;opacity:.82;margin-top:3px}
.gcard .gplay{position:absolute;right:12px;bottom:12px;z-index:2;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.gcard.big .gplay{right:16px;bottom:18px}
.gcard:hover .gplay,.gcard:focus-within .gplay,.gcard .gplay.stay{opacity:1;transform:none;pointer-events:auto}
/* Màn cảm ứng không có trạng thái rê chuột: pill sẽ KHÔNG BAO GIỜ hiện ra. Ở đó cho nó hiện sẵn,
   nếu không thì trên điện thoại cả lưới không còn một nút chơi nào. */
@media (hover:none){.gcard .gplay{opacity:1;transform:none;pointer-events:auto}}
.gcard:hover .cover>img{transform:scale(1.04)}
.gcard .cover>img{transition:transform .35s ease}
[hidden]{display:none!important}   /* bộ lọc dùng thuộc tính hidden; .gcard{display:flex} từng đè mất ⇒ lọc không ẩn gì (bắt 17/9) */
.gcard{overflow:hidden;display:flex;flex-direction:column;position:relative}
.gcard .cover img{aspect-ratio:2/3;object-fit:cover;width:100%}
.gcard .ribbon{position:absolute;top:12px;left:12px}
.gcard .body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.gcard h3{font-size:24px;margin:0;line-height:1}.gcard h3 a{text-decoration:none}
.gcard p{margin:0;color:var(--mute);font-size:14px}
.gcard .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:auto;padding-top:6px}
.empty{color:var(--mute);text-align:center;padding:40px 0}
/* trang game */
.ghero{padding:44px 0 30px}
.ghero .grid{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center}
.ghero .art{border-radius:28px;overflow:hidden;box-shadow:0 30px 80px rgba(20,60,200,.45),0 0 0 1px rgba(255,255,255,.08);transform:perspective(1200px) rotateY(-6deg) rotateX(2deg)}
.ghero .art img{aspect-ratio:16/9;object-fit:cover;width:100%}
.gid{display:flex;align-items:center;gap:14px;margin-top:14px}
.gid img{width:72px;height:72px;border-radius:18px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.gid h1{margin:0;font-size:clamp(40px,5.4vw,64px)}
.gid .tl{margin:4px 0 0;color:var(--mute);font-weight:800;font-size:clamp(16px,1.5vw,19px)}
.ghero .lead{margin-top:18px}
.crumbs{font-size:13px;font-weight:800;color:var(--mute)}.crumbs a{color:var(--mute);text-decoration:none}.crumbs a:hover{color:#fff}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.step{padding:22px}.step .n{font-family:var(--display);font-size:15px;color:var(--gold2);letter-spacing:2px}
.step h3{margin:4px 0 6px;font-size:19px;font-weight:900;font-family:var(--body)}.step p{margin:0;color:var(--mute);font-size:15px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.panel{padding:24px}.panel h3{font-size:26px;margin:0 0 12px}
.boost{display:flex;gap:14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}.boost:first-of-type{border-top:0}
.boost .ic{flex:none;width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:rgba(255,255,255,.07)}
.boost .ic img{width:44px;height:44px;object-fit:contain}
.boost b{display:block;font-weight:900}.boost span{color:var(--mute);font-size:15px}
.panel ul{margin:0;padding-left:20px;color:var(--mute)}.panel li{margin:6px 0}.panel li b{color:var(--ink)}
/* Khung chơi trong trang giới thiệu: desktop phải thật sự là điện thoại dọc, không phải iframe
   rộng 100% rồi chỉ bị cắt chiều cao. 78vh × 9/16 = 43.875vh; đặt chiều rộng của CẢ playbox theo
   số này để iframe giữ đúng 9:16. Màn hẹp trả lại 100% ở media query bên dưới. */
.playbox{width:min(100%,43.875vh);margin-inline:auto;border-radius:20px;overflow:hidden;background:#06102a;border:1px solid rgba(255,255,255,.1);box-shadow:0 18px 50px rgba(0,0,0,.4)}
.playframe{display:block;width:100%;aspect-ratio:9/16;border:0;background:#06102a}
/* Khung chơi dọc chỉ rộng khoảng 44vh ở desktop. Giữ dòng trạng thái và nút toàn màn hình trên
   MỘT hàng: chữ không được tự xuống dòng, còn nút co về đúng cỡ cần thiết thay vì đẩy chữ xuống. */
.playbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px;background:rgba(255,255,255,.05);color:var(--mute);font-weight:800}
.playbar>span{min-width:0;white-space:nowrap;font-size:11px;letter-spacing:-.15px}
.playbar .btn.sm{flex:0 0 auto;font-size:12px;padding:8px 9px;border-radius:10px}
.shots{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:30px}
.shots figure{margin:0}.shots figcaption{text-align:center;color:var(--mute);font-weight:800;font-size:14px;margin-top:12px}
.phone{border-radius:30px;padding:8px;background:linear-gradient(160deg,#2b3b72,#101a3d);box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.12)}
.phone img{border-radius:23px;aspect-ratio:12/25;object-fit:cover;width:100%}
.faq{margin-top:26px;display:grid;gap:12px}
.faq details{padding:0 22px}.faq summary{cursor:pointer;list-style:none;font-weight:900;font-size:17px;padding:18px 0;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:24px;color:var(--gold2);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0 0 18px;color:var(--mute)}
.more{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:30px}
.more .card{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;padding:12px;overflow:hidden}
.more img{width:96px;height:96px;border-radius:18px;object-fit:cover}
.more b{font-family:var(--display);font-weight:400;font-size:22px;line-height:1.05;display:block}
.more span{color:var(--mute);font-size:14px;font-weight:800;display:block;margin:4px 0 8px}
@media (max-width:960px){
  .hero{padding:28px 0 30px}.hero .grid,.ghero .grid{grid-template-columns:1fr;gap:26px}
  .deck,.ghero .art-wrap{order:-1}.ghero .art{transform:none;border-radius:22px}
  /* ...TRỪ khung chơi: đảo lên đầu thì người vào thấy bàn game trước cả tên game và đường dẫn,
     không biết mình đang ở đâu. Ảnh bìa đảo lên trước thì hợp lý, khung chơi thì không. */
  .ghero .art-wrap:has(.playbox){order:0}
  .lead{max-width:none}
  .games,.fresh,.more{grid-template-columns:1fr 1fr}.feats,.steps{grid-template-columns:1fr 1fr}
  .catalog{grid-template-columns:repeat(3,1fr)}.shots{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}
}
@media (max-width:600px){
  .wrap{width:min(1120px,100% - 28px)}
  .playbox{width:100%}
  /* Trên điện thoại ô to là thứ chiếm chỗ nhất: nó rộng cả 2 cột VÀ cao 2 hàng ⇒ 43% chiều cao màn
     hình cho một ô. Cho nó thành BĂNG NGANG (rộng 2, cao 1) thì còn 21%, và lưới 4 game hạ từ 736px
     xuống 555px. Ô nhỏ KHÔNG bé lại — chữ và icon giữ nguyên cỡ đọc được. */
  .catalog .gcard.big{grid-row:span 1;aspect-ratio:2/1}
  /* 🔴 VÀ PHẢI TRẢ LẠI KHI LƯỚI ĐỀU (Anh bắt được 15/10/2026 23:13: "đổi Featured/recommended/newest
     thì ô chữ nhật lọt xuống lưới vuông"). Luật .catalog.deu .gcard.big ở trên chỉ gỡ grid-column
     và grid-row — nó KHÔNG biết tới aspect-ratio, vì lúc viết nó (trên màn rộng) chẳng ai đặt
     aspect-ratio cả. Dòng điện thoại ngay trên đặt 2/1, nằm SAU trong tệp và không bị .deu gỡ ⇒
     ô to thành băng 175×88 nằm giữa toàn ô 175×175. Đo trên khung 390px: 4 ô vuông · 1 ô méo.
     📐 **Tắt một vai thì phải gỡ MỌI thứ cái vai đó đã đặt, mà danh sách ấy dài thêm mỗi lần có
        người thêm một luật ở breakpoint khác.** Luật "khôi phục" viết ở màn rộng không tự biết tới
        thuộc tính mà màn hẹp mới thêm — nên chỗ nào ĐẶT thêm thuộc tính cho .big thì chỗ đó phải tự
        viết luôn dòng gỡ của mình. */
  .catalog.deu .gcard.big{aspect-ratio:1/1}
  .bar{height:60px}.brand img{width:36px;height:36px}.brand b{font-size:19px}.brand span{display:none}
  nav.main a.lk{font-size:14px;padding:7px 8px}nav.main .btn{display:none}
  section{padding:44px 0}
  .games,.fresh,.more,.catalog,.feats,.steps{grid-template-columns:1fr}
  .catalog{grid-template-columns:1fr 1fr;gap:12px}.gcard .body{padding:12px}.gcard h3{font-size:20px}.gcard .actions .btn.sm{font-size:14px;padding:9px 14px}
  .feat{display:grid;grid-template-columns:auto 1fr;gap:0 16px;align-items:start}.feat .tile{grid-row:span 2;margin:0}
  .cta{flex-direction:column}.cta .btn{width:100%}
  .trust{gap:10px 16px;font-size:13px}
  .deck-row{grid-template-columns:1fr}
  .head-row .lk2{display:none}
  .shots{grid-template-columns:1fr 1fr;gap:14px}.phone{padding:5px;border-radius:20px}.phone img{border-radius:15px}
  .gid img{width:56px;height:56px}
}
@media (prefers-reduced-motion:reduce){.float{animation:none}html{scroll-behavior:auto}}

/* Bang xep hang (Anh chot 28/9 19:15: dat tren TRANG WEB, khong noi vao gameplay).
   CSS cua bang lay NGUYEN VAN tu packages/features/leaderboard qua bien leaderboardCss —
   khong chep tay, nen sua module la trang web doi theo. Duoi day chi la keo rieng cua trang web.
   KHONG dung dau huyen-sac trong khoi nay: no nam trong mot template literal. */
[hidden]{display:none!important}
.lb-tabs{display:flex;gap:8px;margin:0 0 14px}
.lb-tab{appearance:none;cursor:pointer;font:inherit;font-weight:800;font-size:13px;letter-spacing:.04em;
  padding:9px 18px;border-radius:999px;border:1px solid rgba(160,185,255,.22);
  background:rgba(12,24,64,.55);color:#a9b8e6;transition:background .15s,color .15s,border-color .15s}
.lb-tab:hover{color:#eef3ff;border-color:rgba(160,185,255,.4)}
.lb-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:#04102e}
.lb-tab:focus-visible{outline:2px solid #ffe890;outline-offset:2px}
/* Trang web co luat chung: section{padding:64px 0}. Module lai dung the <section> cho
   .lb-shell va .lb-beyond => moi khoi an them 64px tren + 64px duoi, de lai mot khoang trong
   to tuong trong khung "RANKS 11-100". Test DOM khong bat duoc; chi mo anh ra xem moi thay.
   Tra padding ve 0 o day chu KHONG sua module: day la va cham cua rieng trang web. */
#leaderboard section{padding:0}
.lb-panel{padding:18px 16px}
.lb-note{margin:12px 0 0;font-size:13px;color:#a9b8e6}

.lb-shell{--lb-line:rgba(160,185,255,.16);--lb-mute:#a9b8e6;color:#eef3ff}
.lb-hall-head{text-align:center;color:#ffe890;font-size:12px;font-weight:900;letter-spacing:.16em;margin:4px 0 2px;text-shadow:0 0 18px rgba(255,211,77,.34)}
.lb-hall-sub{text-align:center;color:var(--lb-mute);font-size:9px;letter-spacing:.11em;margin-bottom:12px}
.lb-podium{display:grid;grid-template-columns:.92fr 1.16fr .92fr;grid-template-areas:'two one three';gap:7px;align-items:end;margin:0 0 14px;padding-top:14px}
.lb-honor{position:relative;min-width:0;text-align:center;padding:24px 6px 10px;border:1px solid rgba(255,255,255,.18);border-radius:14px 14px 7px 7px;background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035));box-shadow:0 8px 24px rgba(0,0,0,.18);overflow:visible}
.lb-place-1{grid-area:one;min-height:156px;padding-top:32px;border-color:rgba(255,211,77,.7);background:linear-gradient(180deg,rgba(255,217,90,.25),rgba(255,211,77,.06));box-shadow:0 0 0 1px rgba(255,211,77,.12),0 12px 34px rgba(255,188,36,.2);transform:translateY(-12px)}
.lb-place-2{grid-area:two;min-height:128px;border-color:rgba(206,221,255,.55)}
.lb-place-3{grid-area:three;min-height:116px;border-color:rgba(226,168,106,.58)}
.lb-crown{position:absolute;left:50%;top:-17px;transform:translateX(-50%);font-size:27px;line-height:1;color:#ffd34d;filter:drop-shadow(0 3px 8px rgba(255,183,0,.55))}
.lb-place-2 .lb-crown{font-size:18px;top:-10px;color:#dce6ff}.lb-place-3 .lb-crown{font-size:18px;top:-10px;color:#e2a86a}
.lb-world{font-size:8px;line-height:1.2;letter-spacing:.1em;font-weight:900;color:#ffe890;min-height:20px}
.lb-place-2 .lb-world{color:#dce6ff}.lb-place-3 .lb-world{color:#efbf8b}
.lb-medal{width:42px;height:42px;border-radius:50%;margin:4px auto 6px;display:grid;place-items:center;font-size:20px;font-weight:950;color:#2a2000;background:radial-gradient(circle at 35% 28%,#fff3ad,#ffd34d 48%,#b97800);border:2px solid #fff0a2;box-shadow:0 4px 14px rgba(255,194,28,.35)}
.lb-place-2 .lb-medal{width:34px;height:34px;font-size:16px;color:#26304a;background:radial-gradient(circle at 35% 28%,#fff,#cad6ee 55%,#7b8ba9);border-color:#edf3ff}
.lb-place-3 .lb-medal{width:34px;height:34px;font-size:16px;color:#40220e;background:radial-gradient(circle at 35% 28%,#ffd6aa,#d99355 55%,#8d4f24);border-color:#ffd0a2}
.lb-honor-name{font-size:12px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-place-1 .lb-honor-name{font-size:14px;color:#fff8d4}
.lb-honor-meta{display:flex;justify-content:center;gap:6px;align-items:center;margin-top:4px;color:var(--lb-mute);font-size:10px}.lb-honor-meta strong{color:#fff;font-variant-numeric:tabular-nums}
.lb-top10-label{margin:2px 0 7px;color:#dbe5ff;font-size:10px;font-weight:900;letter-spacing:.12em}
.lb-table{width:100%;border-collapse:collapse;background:rgba(255,255,255,.035);table-layout:fixed}
.lb-table th,.lb-table td{padding:9px 9px;text-align:left;border-bottom:1px solid var(--lb-line);font-size:13px}
.lb-table th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--lb-mute);font-weight:750;position:sticky;top:0;background:#10204e;z-index:1}
.lb-table th:first-child,.lb-rank{width:42px}.lb-table th:nth-child(3),.lb-country{width:72px}/* 72 chu khong phai 48: tieu de COUNTRY can 62px. Hoi con la 'Nuoc' thi 48 vua, doi sang tieng Anh la bi cat thanh 'COUNT' — dem duoc bang scrollWidth>clientWidth, mat thuong nhin tuong la chu that. */.lb-table th:last-child,.lb-table .lb-score{width:88px;text-align:right}/* PHAI viet .lb-table .lb-score chu khong phai .lb-score tran: luat .lb-table td{text-align:left} o tren co do uu tien 0-1-1, thang .lb-score tran 0-1-0 => o diem bi can TRAI trong khi tieu de SCORE can PHAI, lech 18px. Anh nhin ra 28/9 19:37; test DOM dem du 4 cot nen khong he kеu. */
.lb-rank{font-weight:850;color:var(--lb-mute);font-variant-numeric:tabular-nums}.lb-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lb-score{font-weight:850;font-variant-numeric:tabular-nums}.lb-country{color:var(--lb-mute)}
.lb-top10-table{border:1px solid var(--lb-line);border-radius:11px;overflow:hidden}.lb-top10-table thead{display:none}.lb-top10-table tr:last-child td{border-bottom:none}
.lb-beyond{margin-top:14px;border:1px solid var(--lb-line);border-radius:11px;overflow:hidden;background:rgba(255,255,255,.025)}
.lb-beyond-head{display:flex;justify-content:space-between;gap:8px;align-items:center;padding:9px 10px;background:rgba(255,255,255,.055);color:#dbe5ff;font-size:10px;letter-spacing:.08em}.lb-beyond-head span{color:var(--lb-mute);font-size:9px;letter-spacing:0}
.lb-scroll{max-height:340px;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#6980c5 rgba(255,255,255,.05);scrollbar-width:thin}
.lb-scroll:focus-visible{outline:2px solid #ffd34d;outline-offset:-2px}.lb-scroll-table tr:last-child td{border-bottom:none}
/* Bảng NGÀY không có bục ⇒ top 3 nhận ra bằng KHUNG MÀU. Dùng đúng bảng màu của bục
   (vàng/bạc/đồng) để hai bảng cùng một ngôn ngữ thị giác, người chơi không phải học lại.
   Tô cả nền nhạt + vạch dọc bên trái: chỉ đổi màu CHỮ thì trên nền tối gần như không thấy —
   đúng bài học "viền đỏ trên nền đỏ" đã dính ở BounceUp. */
/* Nen to CA dong, nhung vach doc CHI o o dau. Ban dau Hoa dat inset 3px 0 len moi td => vach lap
   o tung o, nhin ra thanh KE COT chu khong phai dau hang. Chi thay khi mo anh ra xem.
   (Chu thich nay khong dau va khong dau backtick: no nam BEN TRONG mot template literal,
   mot dau backtick lac vao day la dut chuoi CSS va ca module vo cu phap.) */
.lb-row-1 td{background:rgba(255,211,77,.14)}
.lb-row-2 td{background:rgba(206,221,255,.11)}
.lb-row-3 td{background:rgba(226,168,106,.12)}
.lb-row-1 td:first-child{box-shadow:inset 3px 0 #ffd34d}
.lb-row-2 td:first-child{box-shadow:inset 3px 0 #cedaff}
.lb-row-3 td:first-child{box-shadow:inset 3px 0 #e2a86a}
.lb-row-1 .lb-rank{color:#ffd34d}.lb-row-2 .lb-rank{color:#cedaff}.lb-row-3 .lb-rank{color:#e2a86a}
.lb-me{background:rgba(255,211,77,.13)!important;box-shadow:inset 3px 0 #ffd34d}.lb-anon .lb-name{color:var(--lb-mute)}.lb-blur{filter:blur(3.5px);user-select:none;-webkit-user-select:none}.lb-anon .lb-score{opacity:.72}.lb-none{opacity:.34}.lb-empty{padding:24px 12px;text-align:center;color:var(--lb-mute);border:1px dashed var(--lb-line);border-radius:11px}
@media(max-width:360px){.lb-podium{grid-template-columns:1fr 1fr;grid-template-areas:'one one' 'two three';gap:8px}.lb-place-1{max-width:190px;width:100%;justify-self:center}.lb-honor{min-height:112px}.lb-place-1{min-height:144px}.lb-table th,.lb-table td{padding:8px 7px}.lb-table th:last-child,.lb-score{width:76px}}