/* Trang Game (/game/) - chỉ dùng cho game.html. Nền nhạt, font Be Vietnam Pro (home.css). */
.links .dd summary{min-height:44px}
.links .dd-menu{min-width:240px}
.sheet{position:fixed;inset:0;z-index:70;background:rgba(20,20,40,.35);display:none}
.sheet.open{display:block}
.sheet-in{position:absolute;left:12px;right:12px;bottom:calc(90px + env(safe-area-inset-bottom));max-width:560px;margin:0 auto;padding:12px;border-radius:28px;background:rgba(255,255,255,.97);box-shadow:var(--sh-float)}
.sheet-in b{display:block;padding:8px 14px;color:var(--muted)}
.sheet-in a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:18px;font-weight:700}
.sheet-in a:active{background:rgba(227,30,37,.08)}
.tab{border:0;background:none;font-family:inherit}
@media (max-width:899px){main{padding-bottom:96px}.foot{padding-bottom:96px}}
.foot-brand .foot-logo{width:140px;height:auto}

body.pg-game{background:linear-gradient(180deg,#eef2fb 0,#f6f7fb 420px,#f6f7fb 100%)}

/* hero gọn */
.gh{padding:18px 0 6px}
.gh-in{display:flex;align-items:center;gap:32px;padding:28px 36px;border-radius:var(--r-lg);background:linear-gradient(120deg,#fff 0,#fff7f3 60%,#f2efff 100%);box-shadow:var(--sh-float)}
.gh-copy{flex:1;min-width:0}
.gh-eye{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.gh h1{margin:6px 0 0;font-size:clamp(28px,3.4vw,46px);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.gh-lead{margin:10px 0 0;max-width:620px;color:var(--muted);font-size:17px}
.gh-mas{flex:none;width:170px;height:170px;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(20,51,82,.18))}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ink-2);font-weight:700;font-size:15px;box-shadow:0 0 0 1px rgba(20,51,82,.1);transition:background-color .2s,box-shadow .2s}
.chip:hover,.chip:focus-visible{background:#fff4f2;box-shadow:0 0 0 1.5px rgba(227,30,37,.45)}

/* nhóm + lưới */
.gsec{padding:28px 0 0}
.grp{padding-top:22px;scroll-margin-top:90px}
.gs-h{display:flex;align-items:center;gap:12px;margin:0 0 16px;font-size:clamp(21px,2vw,26px);font-weight:800;letter-spacing:-.015em}
.gs-h::after{content:"";flex:1;height:1px;background:rgba(20,51,82,.12)}
.gg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.gc{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-md);background:#fff;color:inherit;box-shadow:0 0 0 1px rgba(20,51,82,.07),0 10px 28px -16px rgba(20,51,82,.3);transition:transform .25s var(--ease),box-shadow .25s}
.gc:hover,.gc:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 1px rgba(20,51,82,.08),0 22px 40px -18px rgba(20,51,82,.38)}
.gc:focus-visible{outline:3px solid #7c3aed;outline-offset:3px}
.gc .cv{position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef2fb;display:grid;place-items:center}
.gc .cv img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.gc:hover .cv img{transform:scale(1.04)}
.gc .cv-mas{background:linear-gradient(135deg,#ffe4dc,#efe6ff 60%,#d9f0fb)}
.gc .cv-mas img{width:auto;height:84%;object-fit:contain}
.gc .cv-ic{font-size:64px}
.gc .rib{position:absolute;top:12px;left:12px;font-size:12.5px;font-weight:800;padding:4px 11px;border-radius:999px;color:#fff;background:#143352}
.gc .bd{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.gc h3{margin:0;font-size:20px;line-height:1.3;font-weight:800}
.gc p{margin:6px 0 12px;color:var(--muted);font-size:15px;line-height:1.5;flex:1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;list-style:none}
.tags li{font-size:13px;font-weight:700;padding:4px 10px;border-radius:999px;background:#f1f4fa;color:var(--ink-2)}
.gc .go{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;color:#fff;font-weight:700;background:var(--grad-main);box-shadow:0 8px 18px -10px rgba(227,30,37,.6);transition:gap .2s}
.gc .go::after{content:"→"}
.gc:hover .go{gap:12px}
.g-fallback{margin:0;padding:0 0 0 20px}
.g-fallback a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;text-decoration:underline}

/* sắp ra mắt */
.soon-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.sc{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-md);background:rgba(255,255,255,.6);border:1.5px dashed rgba(20,51,82,.18)}
.sc-ic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:#eef2fb;font-size:26px}
.sc-bd{flex:1;min-width:0}
.sc h3{margin:0;font-size:17px;font-weight:800}
.sc p{margin:2px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.sc-tag{flex:none;font-size:12.5px;font-weight:800;padding:4px 10px;border-radius:999px;background:#143352;color:#fff;white-space:nowrap}

/* lớp học */
.lop-band{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 32px;border-radius:var(--r-lg);background:#fff;box-shadow:0 0 0 1px rgba(20,51,82,.07)}
.lb-copy h2{margin:4px 0 0;font-size:clamp(21px,2.2vw,28px);font-weight:800;letter-spacing:-.015em}
.lb-copy p{margin:6px 0 0;color:var(--muted)}
.lb-cta{display:flex;flex-wrap:wrap;gap:10px;flex:none}
.foot{margin-top:56px}

@media (max-width:899px){
 .gh-in{padding:22px 20px;gap:16px}
 .gh-mas{width:110px;height:110px}
 .lop-band{flex-direction:column;align-items:flex-start;padding:22px 20px}
}
@media (max-width:560px){
 .wrap{width:calc(100% - 28px)}
 .gh{padding-top:8px}
 .gh-in{padding:20px 16px;border-radius:var(--r-md)}
 .gh-mas{display:none}
 .gh-lead{font-size:15.5px}
 .chips{gap:6px}.chip{padding:0 14px;font-size:14.5px}
 .gg{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.soon-row{grid-template-columns:1fr;gap:16px}
 .sc{flex-wrap:wrap}.sc-tag{order:-1;margin-left:auto}
 .gsec{padding-top:18px}
}
@media (prefers-reduced-motion:reduce){.gc,.gc .cv img,.gc .go{transition:none}.gc:hover{transform:none}}
/* thanh lọc + xáo */
.gtool{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.gt-h{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.02em}
.shuf{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:0;background:#fff;color:var(--ink);font:inherit;font-weight:700;cursor:pointer;box-shadow:0 0 0 1px rgba(20,51,82,.14)}
.shuf::before{content:"⇄";font-size:18px}
.shuf:hover{box-shadow:0 0 0 1.5px rgba(20,51,82,.35)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
button.chip{border:0;font-family:inherit;cursor:pointer}
.chip[aria-pressed="true"]{background:#143352;color:#fff;box-shadow:none}
.g-empty{color:var(--muted);padding:20px 0}
.gh-cta{margin-top:16px}
.gsec-lop{padding-top:44px}
.grp:first-child{padding-top:12px}
.tabbar .tab[aria-current="page"]{color:var(--red,#e31e25)}
.foot-bot{align-items:center}

/* lưới phẳng: 4 thẻ/hàng desktop, 3 máy tính bảng, 2 mobile */
@media (max-width:1099px){.gg{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
@media (max-width:799px){.gg{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.gc h3{font-size:18px}
.gc .bd{padding:14px 16px 16px}
.gc p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px}
@media (max-width:560px){
 .gc .bd{padding:10px 12px 12px}
 .gc h3{font-size:15.5px;line-height:1.3}
 .gc p{display:none}
 .gc .tags{display:none}
 .gc .rib{top:8px;left:8px;font-size:11.5px;padding:3px 9px}
 .gc .go{width:100%;justify-content:center;padding:0 12px;min-height:44px;font-size:14.5px}
 .gc .cv-ic{font-size:44px}
}