:root{--pink:#d71455;--pink-deep:#9e0c3d;--pink-dark:#72082d;--pink-soft:#fff3f7;--pink-soft-2:#fde7ef;--gold:#c9a227;--ink:#16181d;--muted-text:#6b7280;--line:#eadde2;--surface:#fff;--soft:#fafafa;--shadow:0 12px 32px rgba(102,13,48,.09);--shadow-hover:0 18px 42px rgba(158,12,61,.16);--radius:16px}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:#fff}::selection{background:#f8bdd1;color:#631027}:focus-visible{outline:3px solid rgba(215,20,85,.3);outline-offset:3px}
html,body{max-width:100%;overflow-x:clip}
.site-header{background:rgba(255,255,255,.96);border-bottom:1px solid #eaeaea;box-shadow:0 6px 22px rgba(80,10,38,.05);backdrop-filter:blur(14px)}.nav-shell{height:76px}.brand{width:132px}.main-menu{font-size:16px;gap:30px}.main-menu a{position:relative;padding:27px 0;color:#343039;font-weight:600}.main-menu a:after{content:"";position:absolute;left:50%;right:50%;bottom:16px;height:2px;border-radius:2px;background:var(--pink);transition:left .2s,right .2s}.main-menu a:hover,.main-menu a.active,.main-menu a.is-active{color:var(--pink)}.main-menu a:hover:after,.main-menu a.active:after,.main-menu a.is-active:after{left:0;right:0}.account-actions{gap:10px;margin-left:12px}.pill,.pill:first-child,.pill:last-child,.pill-register,.pill-login{min-width:auto;padding:12px 20px;border:0;border-radius:999px;background:linear-gradient(135deg,#ed3c72,var(--pink-deep));color:#fff;box-shadow:0 7px 16px rgba(158,12,61,.2);transition:transform .2s,box-shadow .2s}.pill:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(158,12,61,.28)}.menu-toggle span{background:var(--pink-deep);border-radius:3px;transition:transform .2s,opacity .2s}.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
.hero,.page-hero{background-image:linear-gradient(120deg,rgba(255,255,255,.96),rgba(255,242,247,.91)),url("assets/hero-bg.webp");background-color:var(--pink-soft)}.hero{padding:52px 0 48px}.hero-title{filter:drop-shadow(0 12px 22px rgba(157,12,61,.08))}.page-hero{padding:62px 0 46px;border-bottom:1px solid var(--line)}.page-hero h1{color:var(--pink-deep);font-size:clamp(30px,4vw,45px);letter-spacing:-.7px;text-transform:none}.page-hero p{color:#56505a}.quick-guides{border:1px solid #efd4de;border-radius:22px;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:var(--shadow);padding:22px 30px}.quick-guides a{padding:12px 8px;border-radius:14px;font-weight:650;transition:transform .2s,background .2s,color .2s}.quick-guides a:hover{transform:translateY(-4px);background:var(--pink-soft);color:var(--pink-deep)}.quick-guides img{filter:drop-shadow(0 7px 10px rgba(150,15,57,.12))}
.section{padding:58px 0}.payment-section,.page-section{background:linear-gradient(#fff,#fff 55%,#fff8fa)}.section-title{color:var(--pink-deep);font-size:clamp(22px,3vw,28px);letter-spacing:-.25px}.section-title:before,.section-title:after{content:"";height:1px;border:0;background:linear-gradient(90deg,transparent,#eab4c7);max-width:170px}.section-title:after{background:linear-gradient(90deg,#eab4c7,transparent)}
.info-card,.feature-card,.wide-guide,.game-grid article,.guide-card,.step,.rule-card,.app-showcase{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s,border-color .25s}.info-card:hover,.feature-card:hover,.wide-guide:hover,.game-grid article:hover,.guide-card:hover,.step:hover,.rule-card:hover{transform:translateY(-4px);border-color:#e4afc2;box-shadow:var(--shadow-hover)}.info-card{padding:78px 20px 24px;background:linear-gradient(180deg,#fff 45%,#fff1f6)}.info-card>img{height:58px;opacity:.12}.info-card h3{top:17px;left:14px;right:14px;border-radius:10px;background:linear-gradient(135deg,#ed3c72,var(--pink-deep));font-size:15px}.feature-card,.wide-guide{background:#fff}.feature-card h3,.wide-guide h3,.guide-card h2,.guide-card h3{color:var(--pink-deep)}
.feature-card img{width:128px;height:74px;flex:0 0 128px;object-fit:cover;object-position:left center;border-radius:10px;background:#171324}
.wide-guide img{width:240px;height:110px;max-height:none;object-fit:cover;object-position:left center;border-radius:12px;background:#171324}
.rankings{background:var(--pink-soft)}.game-grid article{overflow:hidden}.game-grid article:hover img{transform:scale(1.035)}.game-grid img{transition:transform .5s}.rank{background:linear-gradient(135deg,#ed3c72,var(--pink-deep));box-shadow:0 6px 14px rgba(158,12,61,.24)}.promo-slider{border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--shadow)}.slider-arrow{background:rgba(255,255,255,.94);color:var(--pink-deep);border:1px solid #edced9;box-shadow:0 6px 14px rgba(93,12,41,.14)}.slider-arrow:hover{background:var(--pink);color:#fff}.slider-dots button{background:#e6cad4}.slider-dots button.is-active{width:28px;background:var(--pink)}
.app-section{background:linear-gradient(135deg,#fff,#fff0f5)}.responsible{background:#fff}.eyebrow{color:var(--pink);letter-spacing:2.4px}.download-btn{border-radius:999px;background:linear-gradient(135deg,#ef477c,var(--pink-deep));box-shadow:0 9px 20px rgba(158,12,61,.24);transition:transform .2s,box-shadow .2s}.download-btn:hover{transform:translateY(-2px);box-shadow:0 13px 26px rgba(158,12,61,.3)}.faq-about{background:linear-gradient(150deg,#fff5f8,#fff);color:var(--ink);border-top:1px solid var(--line)}.section-title.light{color:var(--pink-deep)}.faq-list details{border:1px solid #efd3dd;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 8px 20px rgba(111,13,51,.06);overflow:hidden}.faq-list details[open]{border-color:#e5aabe;box-shadow:var(--shadow)}.faq-list summary{padding:18px 58px 18px 22px}.faq-list summary:after{color:var(--pink);font-size:25px}.faq-list details p{padding:0 22px 22px;color:#5c5660}
.subnav{background:#fff;border-bottom:1px solid var(--line);color:var(--ink)}.subnav a,.subnav button{border:1px solid var(--line);background:#fff;color:#4e4650;transition:.2s}.subnav a:hover,.subnav a.active,.subnav button.active{border-color:var(--pink);background:linear-gradient(135deg,#ef477c,var(--pink-deep));color:#fff;box-shadow:0 7px 15px rgba(158,12,61,.18)}.guide-tabs button{border-color:var(--line);background:#fff;color:#514951;transition:.2s}.guide-tabs button:hover{border-color:#e4a6bc;background:var(--pink-soft)}.guide-tabs button.active{background:linear-gradient(135deg,#ef477c,var(--pink-deep));color:#fff;box-shadow:0 7px 16px rgba(158,12,61,.18)}.guide-card img{background:var(--soft)}
.step summary{background:linear-gradient(135deg,#fff0f5,#fde0ea);color:var(--pink-deep)}.step[open] summary{background:linear-gradient(135deg,#ed3c72,var(--pink-deep));color:#fff}.rule-nav{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow)}.rule-nav a{color:#514951}.rule-nav a:hover,.rule-nav a.active{background:linear-gradient(135deg,#ed3c72,var(--pink-deep));color:#fff}.rule-card summary{background:#fff;color:var(--ink)}.rule-card[open] summary{background:linear-gradient(135deg,#ed3c72,var(--pink-deep));color:#fff}.store-button{border:1px solid #b70f47;background:linear-gradient(135deg,#242026,var(--pink-dark));box-shadow:0 10px 22px rgba(91,8,39,.18);transition:transform .2s,box-shadow .2s}.store-button:hover{transform:translateY(-3px);box-shadow:0 15px 28px rgba(91,8,39,.25)}.app-showcase{background:linear-gradient(135deg,#fff,#fff0f5)}.notice{border-left-color:var(--pink);background:var(--pink-soft)}
.site-footer{background:linear-gradient(145deg,#650727,#860b34);color:#fff}.site-footer .footer-grid h2{color:#ffd3e2}.social-row{border-bottom-color:rgba(255,255,255,.22)}.social-row a{background:#fff}.social-row img{filter:none}.copyright{border-color:rgba(255,255,255,.2);color:#f3c9d7}
.scroll-progress{position:fixed;z-index:100;left:0;top:0;width:100%;height:3px;pointer-events:none}.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#f05a8a,var(--pink-deep),var(--gold));box-shadow:0 1px 8px rgba(215,20,85,.35)}.back-to-top{position:fixed;z-index:45;right:20px;bottom:20px;width:46px;height:46px;border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#ed3c72,var(--pink-deep));color:#fff;font-size:21px;box-shadow:0 10px 24px rgba(112,9,46,.28);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.2s}.back-to-top.visible{opacity:1;visibility:visible;transform:none}.image-zoomable{cursor:zoom-in}.image-lightbox{width:min(1100px,94vw);max-width:94vw;max-height:92vh;padding:0;border:0;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(68,5,28,.35);overflow:hidden}.image-lightbox::backdrop{background:rgba(45,4,20,.78);backdrop-filter:blur(5px)}.image-lightbox img{width:100%;max-height:84vh;object-fit:contain;background:#fff}.image-lightbox button{position:absolute;right:10px;top:10px;width:40px;height:40px;border:1px solid #edc9d6;border-radius:50%;background:rgba(255,255,255,.94);color:var(--pink-deep);font-size:24px;cursor:pointer}
@media(max-width:900px){.nav-shell{height:70px}.brand{width:118px}.main-menu{top:70px;background:rgba(255,255,255,.98);border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(89,9,41,.12)}.main-menu a{padding:8px 0}.main-menu a:after{bottom:0}.account-actions{display:none}.quick-guides{grid-template-columns:repeat(3,1fr)}.rule-nav{background:#fff}}
@media(max-width:600px){.hero{padding:34px 0}.page-hero{padding:42px 0 34px}.quick-guides{grid-template-columns:repeat(2,1fr);padding:14px}.quick-guides a:last-child{grid-column:1/-1}.section{padding:42px 0}.section-title:before,.section-title:after{max-width:42px}.info-card h3{font-size:14px}.back-to-top{right:14px;bottom:14px}.image-lightbox{max-width:96vw}}
@media(prefers-reduced-motion:reduce){.info-card,.feature-card,.wide-guide,.game-grid article,.guide-card,.step,.rule-card,.download-btn,.pill,.back-to-top{transition:none}}
.quick-guides img{padding:12px;border-radius:50%;background:linear-gradient(135deg,#ef477c,var(--pink-deep));filter:drop-shadow(0 7px 10px rgba(150,15,57,.2))}

/* Red-coral theme inspired by the public myae888.com palette. */
:root{--pink:#e92929;--pink-deep:#c61724;--pink-dark:#8f0d18;--pink-soft:#fff4f4;--pink-soft-2:#ffe5e5;--line:#eadada;--shadow:0 12px 32px rgba(116,12,20,.09);--shadow-hover:0 18px 42px rgba(198,23,36,.17)}
.hero,.page-hero{background-image:linear-gradient(120deg,rgba(255,255,255,.97),rgba(255,241,241,.92)),url("assets/hero-bg.webp")}
.pill,.pill:first-child,.pill:last-child,.pill-register,.pill-login,.info-card h3,.rank,.download-btn,.subnav a:hover,.subnav a.active,.subnav button.active,.guide-tabs button.active,.step[open] summary,.rule-nav a.active,.rule-card[open] summary,.back-to-top,.quick-guides img{background:linear-gradient(135deg,#e92929 0%,#e94951 52%,#b91522 100%)}
.quick-guides img{filter:drop-shadow(0 7px 10px rgba(185,21,34,.22))}
.info-card{background:linear-gradient(180deg,#fff 45%,#fff1f1)}
.rankings{background:#fff4f4}.app-section,.app-showcase{background:linear-gradient(135deg,#fff,#fff0f0)}
.faq-about{background:linear-gradient(150deg,#fff5f5,#fff)}
.faq-list .faq-answer{padding:0 22px 22px;color:#5c5660;line-height:1.65;border-top:1px solid #f4e2e7}
.faq-list .faq-answer p{margin:16px 0 0;padding:0;color:inherit}
.faq-list .faq-answer ul{margin:12px 0 0;padding-left:22px}
.faq-list .faq-answer li+li{margin-top:7px}
.site-footer{background:linear-gradient(145deg,#59070e,#8f0d18 60%,#aa111e);color:#fff}
.scroll-progress span{background:linear-gradient(90deg,#e92929,#e94951,#b91522 80%,var(--gold))}
.store-button{border-color:#aa111e;background:linear-gradient(135deg,#211d1e,#8f0d18)}
.notice{background:#fff1f1}

/* Subpages: Vietnamese-safe typography, complete navigation and pagination. */
body[data-page],body[data-page] button,body[data-page] input,body[data-page] select,body[data-page] textarea{font-family:"Segoe UI",Arial,Tahoma,sans-serif;font-variant-ligatures:none;text-rendering:optimizeLegibility}
body[data-page] .main-menu{align-items:center}
.nav-group{position:relative;display:flex;align-items:center}
.nav-parent span{display:inline-block;margin-left:4px;font-size:15px;transition:transform .2s}
.nav-group:hover .nav-parent span,.nav-group:focus-within .nav-parent span{transform:rotate(180deg)}
.nav-dropdown{position:absolute;z-index:70;top:calc(100% - 10px);left:50%;display:grid;min-width:225px;padding:10px;visibility:hidden;opacity:0;transform:translate(-50%,10px);border:1px solid #eadada;border-radius:14px;background:#fff;box-shadow:0 16px 38px rgba(116,12,20,.15);transition:opacity .18s,transform .18s,visibility .18s}
.nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown{visibility:visible;opacity:1;transform:translate(-50%,0)}
body[data-page] .nav-dropdown a{padding:11px 13px;border-radius:9px;color:#403a3b;font-size:14px;white-space:nowrap}
body[data-page] .nav-dropdown a:after{display:none}
body[data-page] .nav-dropdown a:hover,body[data-page] .nav-dropdown a.active{background:#fff1f1;color:#c61724}
.page-pagination{padding:22px 0 48px;background:#fff8f8}
.page-pagination .container{display:grid;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);align-items:center;gap:24px;padding-top:22px;border-top:1px solid #eadada}
.page-turn{display:grid;grid-template-columns:auto 1fr;column-gap:10px;align-items:center;width:max-content;max-width:100%;padding:10px 14px;border:1px solid #eadada;border-radius:12px;background:#fff;box-shadow:0 7px 20px rgba(116,12,20,.06);transition:.2s}
.page-turn span{grid-row:1/3;color:#c61724;font-size:23px}.page-turn small{color:#777;font-size:11px}.page-turn strong{font-size:14px}.page-turn:hover{border-color:#e94951;transform:translateY(-2px);box-shadow:0 10px 24px rgba(116,12,20,.12)}
.page-turn.next{justify-self:end;grid-template-columns:1fr auto;text-align:right}.page-turn.next span{grid-column:2;grid-row:1/3}.page-turn.next small,.page-turn.next strong{grid-column:1}
.page-numbers{display:flex;gap:7px;justify-content:center}.page-numbers a{width:34px;height:34px;display:grid;place-items:center;border:1px solid #eadada;border-radius:50%;background:#fff;color:#4d4547;font-size:13px;font-weight:700;transition:.2s}.page-numbers a:hover{border-color:#e94951;color:#c61724}.page-numbers a.active{border-color:transparent;background:linear-gradient(135deg,#e92929,#e94951 52%,#b91522);color:#fff;box-shadow:0 6px 13px rgba(185,21,34,.2)}
@media(max-width:900px){body[data-page] .main-menu{align-items:stretch;overflow:auto;max-height:calc(100vh - 70px);text-align:center}.nav-group{display:block;width:100%}.nav-parent{justify-content:center}.nav-dropdown{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;margin:4px 0 10px;padding:8px;visibility:visible;opacity:1;transform:none;border-radius:12px;background:#fff5f5;box-shadow:none}.nav-group:hover .nav-dropdown,.nav-group:focus-within .nav-dropdown{transform:none}body[data-page] .nav-dropdown a{white-space:normal}.page-pagination .container{grid-template-columns:1fr 1fr}.page-numbers{grid-column:1/-1;grid-row:1;overflow:auto;padding-bottom:4px}.page-turn{grid-row:2}.page-turn.next{grid-row:2}}
@media(max-width:520px){.page-pagination .container{gap:12px}.page-turn{width:100%;padding:9px}.page-turn strong{font-size:12px}.page-turn small{font-size:10px}.page-numbers{gap:5px}.page-numbers a{width:31px;height:31px}}

/* Tablet header: avoid squeezing the desktop navigation between 901px and 1050px. */
@media(max-width:1050px){
  body{padding-bottom:0}
  body.menu-open{overflow:hidden}
  .site-header{position:sticky;top:0;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-shell{width:calc(100% - 24px);height:70px;gap:10px}
  .brand{order:1;width:118px;flex:0 0 auto}
  .menu-toggle{order:3;display:block;flex:0 0 auto;margin-left:0}
  .main-menu{display:none;position:fixed;z-index:80;top:70px;left:0;right:0;width:100%;max-height:calc(100dvh - 70px);margin:0;padding:18px;overflow-y:auto;overscroll-behavior:contain;flex-direction:column;align-items:stretch;gap:6px;text-align:center;background:rgba(255,255,255,.99);border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(89,9,41,.12)}
  .main-menu.open{display:flex}
  .main-menu a{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;padding:10px 12px}
  .main-menu a:after{bottom:0}
  .account-actions{position:static;order:2;z-index:auto;display:flex!important;flex:0 1 auto;gap:6px;margin:0 0 0 auto;padding:0;border:0;background:none;box-shadow:none;backdrop-filter:none}
  .account-actions .pill{width:auto;min-width:88px;min-height:40px;display:grid;place-items:center;padding:9px 12px;font-size:11px;white-space:nowrap}
  .back-to-top{bottom:20px}
}

/* Mobile layout hardening and compact header account actions. */
@media(max-width:900px){
  .container{width:min(var(--max),calc(100% - 24px))}
  .hero,.page-hero{background-position:center}
  .hero-title{max-width:100%;height:auto}
  .quick-guides{width:100%;gap:8px}
  .quick-guides a{min-width:0}
  .quick-guides img{width:64px;height:64px}
  .payment-grid,.feature-row,.game-grid,.guide-grid,.store-panel,.app-showcase,.split,.footer-grid{min-width:0}
  .info-card,.feature-card,.wide-guide,.game-grid article,.guide-card,.step,.rule-card,.app-showcase{max-width:100%}
  .guide-tabs,.subnav .container,.rule-nav{scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .guide-tabs::-webkit-scrollbar,.subnav .container::-webkit-scrollbar,.rule-nav::-webkit-scrollbar,.page-numbers::-webkit-scrollbar{display:none}
  .guide-tabs button,.subnav a,.rule-nav a{scroll-snap-align:start}
  .subnav .container{justify-content:flex-start}
  .rule-nav{display:flex;flex-wrap:nowrap;gap:8px;padding:10px}
  .rule-nav a{flex:0 0 auto;min-height:42px;display:flex;align-items:center;white-space:nowrap}
  .page-turn{min-width:0;overflow:hidden}
  .page-turn strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .site-footer{padding-bottom:22px}
}
@media(max-width:600px){
  .nav-shell{width:calc(100% - 16px);gap:6px}
  .brand{width:104px}
  .account-actions{gap:4px}
  .account-actions .pill{min-width:70px;min-height:36px;padding:8px;font-size:10.5px}
  .menu-toggle{padding:5px}
  .menu-toggle span{width:25px;margin:4px}
  .page-hero h1{font-size:clamp(27px,8.5vw,36px);line-height:1.16}
  .page-hero p{font-size:15px}
  .section-title{line-height:1.25}
  .quick-guides a{font-size:12px}
  .info-card{min-height:0}
  .feature-card,.wide-guide,.wide-guide.reverse{padding:18px}
  .feature-card img,.wide-guide img{width:100%;height:82px;max-height:none;flex-basis:auto;object-fit:cover;object-position:left center}
  .app-showcase{padding:20px}
  .step summary,.rule-card summary{padding-left:18px}
  .faq-list .faq-answer{padding:0 18px 20px}
  .step-body,.rule-card div{overflow-wrap:anywhere}
  .footer-grid{gap:28px}
  .partner img{max-width:100%;height:auto;max-height:150px}
}
@media(max-width:360px){
  .nav-shell{width:calc(100% - 12px);gap:4px}
  .brand{width:88px}
  .account-actions .pill{min-width:60px;min-height:34px;padding:7px 5px;font-size:9.5px}
  .menu-toggle{padding:4px}
  .menu-toggle span{width:23px}
  .quick-guides{grid-template-columns:1fr 1fr;padding:10px}
  .quick-guides img{width:58px;height:58px}
  .page-pagination .container{width:calc(100% - 18px)}
  .page-turn span{font-size:18px}
  .page-turn strong{font-size:11px}
}

/* Homepage content keeps its own layout while sharing the same shell as every subpage. */
.home-page .hero{padding:42px 0 38px;background-image:linear-gradient(120deg,rgba(255,255,255,.97),rgba(255,241,241,.92)),url("assets/hero-bg.webp");background-color:var(--pink-soft)}
.home-page .hero-title{width:min(840px,90%);margin-bottom:55px;filter:none}
.home-page .quick-guides{min-height:144px;padding:20px 42px;border:0;border-radius:70px;background:linear-gradient(110deg,#34343a,#111218);color:#eee;box-shadow:0 5px 0 rgba(0,0,0,.15)}
.home-page .quick-guides a{padding:0;color:#eee;font-weight:400}
.home-page .quick-guides a:hover{transform:translateY(-3px);background:transparent;color:#fff}
.home-page .quick-guides img{width:76px;height:70px;padding:0;border-radius:0;background:none;filter:none}
.home-page .payment-section{background:#fff}
.home-page .section-title{color:var(--pink-deep)}
.home-page .section-title:before,.home-page .section-title:after{content:"◆◆";height:auto;border-bottom:1px solid #df747c;background:none;color:#c61724;font-size:23px;line-height:1px;letter-spacing:-8px;max-width:200px}
.home-page .payment-grid-secondary{margin-top:30px}
.home-page .info-card{min-height:195px;padding:72px 18px 20px;border:0;border-radius:0 0 10px 10px;background:linear-gradient(#fffdf8,#f3dcc0);box-shadow:0 4px 5px rgba(0,0,0,.25)}
.home-page .info-card:hover{transform:none;border-color:transparent;box-shadow:0 4px 5px rgba(0,0,0,.25)}
.home-page .info-card>img{z-index:2;top:15px;left:14px;right:auto;width:48px;height:42px;opacity:1;object-fit:cover;object-position:left center;border-radius:10px 0 0 10px}
.home-page .info-card h3{z-index:1;top:15px;left:14px;right:14px;min-height:42px;display:flex;align-items:center;margin:0;padding:7px 12px 7px 62px;border-radius:10px;background:#171324;color:#fff;font-size:15px;line-height:1.25}
.home-page .info-card p{font-size:16px;line-height:1.55}
.home-page .wide-guide,.home-page .wide-guide.reverse{position:relative;display:block;max-width:930px;min-height:150px;margin:auto;padding:72px 28px 24px;text-align:left;border:0;border-radius:0 0 12px 12px;background:linear-gradient(#fffdf8,#f3dcc0);box-shadow:0 4px 5px rgba(0,0,0,.22)}
.home-page .wide-guide:hover{transform:none;border-color:transparent;box-shadow:0 4px 5px rgba(0,0,0,.22)}
.home-page .wide-guide img{position:absolute;z-index:0;top:15px;left:14px;width:min(405px,calc(100% - 28px));height:42px;max-height:none;object-fit:fill;border-radius:10px;background:#171324}
.home-page .wide-guide h3{position:absolute;z-index:1;top:15px;left:14px;width:min(405px,calc(100% - 28px));min-height:42px;display:flex;align-items:center;margin:0;padding:7px 12px 7px 53px;color:#fff;font-size:15px;line-height:1.25}
.home-page .wide-guide p{margin:0;font-size:16px;line-height:1.55}
.home-page .rankings{background:#f3f3f3}
.home-page .game-grid{width:min(1200px,calc(100vw - 40px));grid-template-columns:1fr 1.25fr 1fr;align-items:center;gap:22px;margin:0 0 58px 50%;padding:8px 0 0;transform:translateX(-50%)}
.home-page .game-grid article{overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.home-page .game-grid article:hover{transform:none;border-color:transparent;box-shadow:none}
.home-page .game-grid article:nth-child(1){grid-column:2;grid-row:1}
.home-page .game-grid article:nth-child(2){grid-column:1;grid-row:1}
.home-page .game-grid article:nth-child(3){grid-column:3;grid-row:1}
.home-page .game-grid img{width:100%;height:auto;border-radius:10px;object-fit:contain;transition:transform .25s}
.home-page .game-grid article:nth-child(1) img{transform:scale(1.03)}
.home-page .game-grid article:hover img{transform:scale(1.02)}
.home-page .game-grid article:nth-child(1):hover img{transform:scale(1.06)}
.home-page .rank,.home-page .game-grid h3{display:none}
.home-page .reveal{opacity:1}

@media(max-width:900px){
  .home-page .quick-guides{border-radius:28px}
  .home-page .payment-grid-secondary{margin-top:24px}
  .home-page .game-grid{width:100%;grid-template-columns:1fr;gap:18px;margin-left:0;transform:none}
  .home-page .game-grid article:nth-child(1),.home-page .game-grid article:nth-child(2),.home-page .game-grid article:nth-child(3){grid-column:auto;grid-row:auto}
  .home-page .game-grid article:nth-child(1) img,.home-page .game-grid article:nth-child(1):hover img{transform:none}
  .home-page .game-grid img{max-height:none}
}
@media(max-width:600px){
  .home-page .hero{padding:28px 0}
  .home-page .hero-title{width:100%;margin-bottom:28px}
  .home-page .quick-guides{padding:16px 12px;border-radius:24px}
  .home-page .quick-guides img{width:64px;height:64px}
  .home-page .section-title:before,.home-page .section-title:after{max-width:42px;font-size:15px;letter-spacing:-5px}
  .home-page .info-card{padding:70px 16px 20px}
  .home-page .info-card h3{font-size:14px}
  .home-page .wide-guide,.home-page .wide-guide.reverse{padding:70px 18px 22px}
  .home-page .wide-guide img,.home-page .wide-guide h3{width:calc(100% - 28px)}
  .home-page .wide-guide h3{font-size:14px}
}

/* Footer layout matched to the reference; existing footer colors are preserved. */
.site-footer .footer-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(250px,.9fr) minmax(0,1.05fr);align-items:stretch;gap:clamp(34px,6vw,76px)}
.site-footer .reveal{opacity:1!important;transform:none!important;transition:none!important}
.site-footer .footer-grid>section{min-width:0;display:flex;flex-direction:column}
.site-footer .footer-grid h2{margin:0 0 14px;font-size:18px;line-height:1.3}
.site-footer .footer-about h2{text-align:left}.site-footer .footer-about p{margin:0;max-width:330px;font-size:16px;line-height:1.48;text-align:left}
.site-footer .partner,.site-footer .footer-licenses{text-align:center}
.site-footer .partner-visual{position:relative;width:230px;height:168px;margin:0 auto}
.site-footer .partner-visual img{position:absolute;display:block;margin:0;max-height:none;object-fit:contain}
.site-footer .partner-visual .partner-mark{z-index:0;top:2px;left:50%;width:150px;height:105px;opacity:.32;filter:invert(1);transform:translateX(-50%)}
.site-footer .partner-visual .partner-man{z-index:1;bottom:0;left:13px;width:124px;height:164px;object-position:center bottom}
.site-footer .partner-visual .partner-woman{z-index:2;right:4px;bottom:0;width:122px;height:159px;object-position:center bottom}
.site-footer .partner p{margin:5px 0 2px;font-size:14px;font-weight:800;line-height:1.3}.site-footer .partner strong{font-size:14px;line-height:1.3}
.site-footer .licenses{width:min(100%,280px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:13px 16px;margin:10px auto 20px}
.site-footer .licenses img{width:100%;height:64px;margin:auto;object-fit:contain}
.site-footer .footer-social{width:46px;height:46px;display:grid;place-items:center;margin:auto auto 0;border:0;border-radius:50%;background:transparent;transition:transform .2s}
.site-footer .footer-social:hover{transform:translateY(-3px)}.site-footer .footer-social img{width:46px;height:46px;display:block;filter:none}
.site-footer .copyright{width:min(var(--max),calc(100% - 40px));margin:0 auto;padding:8px 0 0;border-top:1px solid rgba(255,255,255,.2);text-align:center;font-size:12px}
@media(max-width:900px){
  .site-footer .footer-grid{grid-template-columns:1fr;gap:34px}
  .site-footer .footer-grid>section{align-items:center}
  .site-footer .footer-about h2,.site-footer .footer-about p{text-align:center}
  .site-footer .footer-about p{max-width:560px}
  .site-footer .footer-social{margin-top:18px}
  .site-footer .copyright{margin-top:26px}
}
@media(max-width:420px){
  .site-footer .footer-grid{width:calc(100% - 28px)}
  .site-footer .footer-about p{font-size:14px}
  .site-footer .partner-visual{width:210px;height:154px}
  .site-footer .partner-visual .partner-man{width:114px;height:150px}
  .site-footer .partner-visual .partner-woman{width:112px;height:146px}
  .site-footer .licenses{max-width:260px}
}

/* 2026-10-23: touch + pagination stability fixes. */
html{scroll-behavior:auto}
a,button,summary,[role=button]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
h1,h2,.section-title{text-wrap:balance}
/* Hover lift only on real pointers, so a tap never leaves a card "stuck" mid-move. */
@media(hover:none){
  .page-turn:hover,.pill:hover,.info-card:hover,.feature-card:hover,.wide-guide:hover,.game-grid article:hover,.guide-card:hover,.step:hover,.rule-card:hover,.download-btn:hover,.store-button:hover,.app-download-card:hover,.quick-guides a:hover,.home-page .quick-guides a:hover,.site-footer .footer-social:hover{transform:none}
  .game-grid article:hover img{transform:none}
}
/* Pagination: no wrap-around, no inner scroller, finger-sized targets. */
.page-pagination .page-turn,.page-pagination .page-numbers a{transition:border-color .2s,box-shadow .2s,color .2s,background .2s}
.page-turn.is-disabled{visibility:hidden;pointer-events:none}
.page-numbers a{width:38px;height:38px}
@media(max-width:900px){
  .page-pagination{padding-bottom:36px}
  .page-numbers{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;overflow:visible;padding-bottom:0}
  .page-numbers a{width:auto;height:42px;border-radius:12px;font-size:14px}
  .page-turn{min-height:52px}
}
@media(max-width:360px){.page-numbers{gap:4px}.page-numbers a{height:40px;border-radius:10px}}
/* Back-to-top steps aside while the pager is on screen so it never sits on "Trang sau". */
.back-to-top.is-parked{opacity:0;visibility:hidden;transform:translateY(12px)}
/* Accordions keep the tapped row in place; the browser should not re-anchor on top of our fix. */
.rule-content,.step-list,.faq-list{overflow-anchor:none}
/* Guide tabs: all eight visible on desktop instead of a clipped mouse-only scroller. */
@media(min-width:901px){.guide-tabs{flex-wrap:wrap;justify-content:center;overflow:visible}}
/* Promo slider: dots below the banner with a real hit area. */
.promo-slider{padding-bottom:30px}
.promo-slider .slider-dots{bottom:6px;gap:2px}
.promo-slider .slider-dots button{position:relative;width:24px;height:24px;padding:0;border:0;border-radius:0;background:none}
.promo-slider .slider-dots button:before{content:"";position:absolute;inset:8px;border-radius:99px;background:#e6cad4;transition:background .25s}
.promo-slider .slider-dots button.is-active{width:40px;background:none}
.promo-slider .slider-dots button.is-active:before{background:var(--pink)}
.promo-slider .slider-arrow{top:calc(50% - 15px)}
@media(max-width:600px){.promo-slider .slider-arrow{width:30px;height:44px;font-size:28px}.promo-slider .slider-prev{left:4px;border-radius:10px}.promo-slider .slider-next{right:4px;border-radius:10px}}
/* App page: keep both download cards to two short lines. */
.app-download-card strong{white-space:nowrap}
@media(min-width:901px) and (max-width:1240px){.app-download-card{grid-template-columns:92px 1fr;gap:10px}.app-download-card img{width:92px}}
/* Guide screenshots reserve their box before loading (sizes set from pages.js). */
#page-root img[style*="--r"]{aspect-ratio:var(--r);height:auto}
.step-body img[style*="--r"]{width:min(100%,var(--w),calc(680px * var(--r)))}
@media(max-width:600px){.step-body img[style*="--r"]{width:100%}}
.hero-title{height:auto}
/* Burger menu: lock the page (html is the scroller) instead of body, which would turn body into
   its own scroll box and unstick the header, leaving the menu floating over the content. */
html body.menu-open{overflow:visible}
html:has(body.menu-open){overflow:hidden}
@media(max-width:1050px){
  body.menu-open:before{content:"";position:fixed;z-index:40;inset:70px 0 0;background:rgba(40,6,14,.38);touch-action:none}
  .main-menu{max-height:calc(100dvh - 70px)}
  .main-menu a:after,.main-menu a.active:after,.main-menu a.is-active:after{display:none}
  .main-menu a.active,.main-menu a.is-active{border-radius:12px;background:#fff1f1;color:var(--pink-deep)}
}
/* Slide-in cards start off to the side; clip them inside main so phones don't widen the
   layout viewport (which stretched the fixed burger menu past the right edge). */
main,.site-footer{overflow-x:clip}
@media(max-width:1050px){
  .site-header,.main-menu{background:#fff}
  body.menu-open .back-to-top{opacity:0;visibility:hidden}
}