:root { color-scheme: dark; --background:#000; --header:#191919; --text:#ddd; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--text); font-family:Arial,Helvetica,sans-serif; font-size:16px; }
img { display:block; max-width:100%; height:auto; }
button { font:inherit; }
.skip-link { position:fixed; left:12px; top:12px; transform:translateY(-200%); padding:12px; background:#fff; color:#000; z-index:10; }
.skip-link:focus { transform:none; }
.header { background:var(--header); display:flex; justify-content:center; height:89px; }
.logo { width:135px; height:89px; object-fit:contain; }
main { max-width:1100px; margin:auto; padding:0 15px 28px; }
.demo-notice { text-align:center; margin:0; padding:10px 8px; color:#d2bedf; font-size:14px; line-height:1.5; }
.hero { width:min(395px,100%); margin:0 auto; }
.hero img { width:100%; }
.actions { display:grid; grid-template-columns:1fr 1fr; align-items:center; justify-items:center; gap:24px; margin:30px auto; }
.image-button { display:block; width:304px; max-width:100%; padding:0; border:0; background:transparent; cursor:pointer; transition:filter .16s ease,transform .16s ease; }
.image-button img { width:100%; }
.image-button:hover { filter:brightness(1.12); transform:translateY(-2px); }
.image-button:focus-visible,.back-to-top:focus-visible { outline:3px solid #e8c64f; outline-offset:6px; }
.app-row { display:flex; justify-content:center; margin:0 0 29px; }
.app-button { width:294px; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.game-cell { display:flex; justify-content:center; align-items:center; padding:15px 10px; min-width:0; }
.game-cell:not(:nth-child(3n)) { border-right:1px dashed #777; }
.game-cell:nth-child(-n+3) { border-bottom:1px dashed #777; }
.game-cell img { width:215px; }
.footer { padding:22px 16px; background:var(--header); text-align:center; color:#aaa; font-size:14px; line-height:1.6; }
.back-to-top { position:fixed; bottom:20px; right:20px; width:42px; height:42px; border:1px solid #aaa; border-radius:50%; background:#181818; color:#eee; font-size:24px; cursor:pointer; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); width:max-content; max-width:calc(100% - 32px); padding:14px 20px; border:1px solid #8962c3; border-radius:8px; background:#241136; color:#fff; text-align:center; line-height:1.5; box-shadow:0 4px 20px #000a; z-index:20; }
[hidden] { display:none !important; }
@media(max-width:600px) {
 .header { height:76px; } .logo { width:114px; height:76px; }
 main { padding-inline:12px; }
 .demo-notice { font-size:14px; }
 .actions { gap:12px; margin:24px auto; }
 .app-row { margin-bottom:22px; }
 .game-cell { padding:12px 7px; }
 .back-to-top { right:12px; bottom:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .image-button { transition:none; } }

/* ===== SEO content & UI ===== */
:root { --gold:#f1d77a; --gold-2:#e8b23a; --purple:#8962c3; --card:#111014; --line:#2a2433; }
a { color:var(--gold); }
.header a { display:flex; }
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* H1 */
.page-title { max-width:760px; margin:22px auto 18px; text-align:center; font-size:clamp(20px,3.2vw,28px); font-weight:800; line-height:1.3; letter-spacing:.2px;
  background:linear-gradient(180deg,#fff3c4 0%,var(--gold) 45%,var(--gold-2) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 18px rgba(232,178,58,.18); }
.page-title::after { content:""; display:block; width:84px; height:3px; margin:12px auto 0; border-radius:3px; background:linear-gradient(90deg,transparent,var(--gold-2),transparent); }

/* Game grid captions */
.game-cell { margin:0; flex-direction:column; gap:8px; }
.game-cell img { transition:transform .2s ease, filter .2s ease; }
.game-cell:hover img { transform:translateY(-3px) scale(1.02); filter:brightness(1.1); }
.game-cell figcaption { font-size:14px; font-weight:600; color:#d8d8d8; text-align:center; }

/* Content */
.seo-content { max-width:900px; margin:44px auto 0; display:grid; gap:22px; line-height:1.75; font-size:15.5px; color:#cfcfd4; }
.content-block { background:linear-gradient(180deg,#16131c 0%,var(--card) 100%); border:1px solid var(--line); border-radius:16px; padding:26px 28px; box-shadow:0 8px 30px rgba(0,0,0,.35); }
.section-title { margin:0 0 16px; text-align:center; font-size:clamp(18px,2.4vw,22px); font-weight:800; color:var(--gold); line-height:1.35; }
.section-title::after { content:""; display:block; width:56px; height:3px; margin:10px auto 0; border-radius:3px; background:linear-gradient(90deg,var(--purple),var(--gold-2)); }
.lead { max-width:720px; margin:0 auto; text-align:center; }
.lead strong { color:#fff; }

.feature-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.feature-list li { padding:16px 14px; text-align:center; background:#0b0a0e; border:1px solid var(--line); border-radius:12px; transition:border-color .2s ease, transform .2s ease; }
.feature-list li:hover { border-color:var(--purple); transform:translateY(-2px); }
.feature-list h3 { margin:0 0 6px; font-size:16px; color:#fff; }
.feature-list p { margin:0; font-size:14px; line-height:1.6; color:#a9a9b2; }

.faq { max-width:720px; margin:0 auto; display:grid; gap:10px; }
.faq details { background:#0b0a0e; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.faq details[open] { border-color:#4a3a63; }
.faq summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:#1f1a29; color:var(--gold); font-weight:700; transition:transform .2s ease; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq summary:focus-visible { outline:2px solid var(--gold); outline-offset:-2px; }
.faq h3 { margin:0; font-size:15.5px; color:#fff; }
.faq details p { margin:0; padding:0 18px 16px; color:#bdbdc6; }

/* CTA row: Chơi web + Tải app — 2 nút cùng kích thước */
.cta-row { display:grid; grid-template-columns:repeat(2,300px); justify-content:center; gap:18px; margin:6px auto 34px; }
.cta-button { width:100%; }
.cta-button img { width:100%; height:auto; aspect-ratio:5.2/1; object-fit:fill; }
.cta-button:hover { filter:brightness(1.12) drop-shadow(0 4px 14px rgba(137,98,195,.55)); }
@media(max-width:660px) { .cta-row { grid-template-columns:minmax(0,300px); gap:12px; margin-bottom:26px; } }

/* Footer */
.footer p { margin:0; }
.age-notice { display:inline-block; margin-bottom:8px !important; padding:2px 10px; border:1px solid #444; border-radius:999px; color:#999; font-size:12px; }

@media(max-width:768px) { .feature-list { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .seo-content { margin-top:32px; gap:16px; font-size:14.5px; }
  .content-block { padding:20px 16px; border-radius:14px; }
  .feature-list { gap:10px; }
  .feature-list li { padding:12px 10px; }
  .game-cell figcaption { font-size:13px; }
}
@media(max-width:380px) { .feature-list { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) { .game-cell img, .feature-list li, .faq summary::after { transition:none; } }