/* Thuộc tính hidden phải luôn ẩn — kể cả khi phần tử có display:flex/grid riêng.
   (Đã gặp 3 lần: .kc-body, .contact-fields, .oc-acts.) */
[hidden]{display:none!important}
/* =========================================================
   Vietlott SMS – Demo UI
   ========================================================= */
:root{
  --ink:#0A1118; --ink-2:#7A8490; --muted:#7A8490;
  --bg:#FAF8F5; --surface:#FFFFFF; --line:#E9E9E9;
  --red:#E50929; --red-2:#9E0019; --red-soft:#FAECF0; --pink:#FCCCD6;
  --blue:#004cc6; --blue-2:#002e79; --blue-soft:#e8f0fd;
  --gold:#F9BD43; --green:#16986F;
  --radius:16px; --radius-sm:10px;
  --shadow:0 6px 24px rgba(13,29,51,.08);
  --shadow-lg:0 18px 44px rgba(13,29,51,.16);
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-anchor:none}
body{font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.muted{color:var(--ink-2)}
.hide{display:none!important}

/* ---------- Buttons ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:15px;padding:12px 26px;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:transform .15s var(--ease),background .2s,box-shadow .2s,border-color .2s,color .2s;white-space:nowrap;user-select:none}
.btn:active{transform:scale(.96)}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-2);box-shadow:0 8px 20px rgba(242,44,77,.35)}
.btn-white{background:#fff;color:var(--ink)}
.btn-white:hover{box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-2)}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-line-w{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn-line-w:hover{background:rgba(255,255,255,.12)}
.btn-sm{padding:8px 16px;font-size:14px}
.btn-lg{padding:15px 34px;font-size:16px}
.btn-block{width:100%}
.btn .arr{transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
.link{color:var(--blue);font-weight:600}
.link:hover{text-decoration:underline}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:#fff;transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .3s;will-change:transform;backface-visibility:hidden}
.site-header.hidden{transform:translateY(-100%);box-shadow:none}
body.hdr-hidden .summary,body.hdr-hidden .toc{top:16px}
.summary,.toc{transition:top .4s var(--ease)}
.site-header.scrolled{box-shadow:0 4px 18px rgba(13,29,51,.1)}
.hbar{display:flex;align-items:center;gap:20px;height:72px}
.site-header.scrolled .logo{transform:scale(.94)}
.logo{transform-origin:left center;transition:transform .3s var(--ease)}
.logo{display:flex;align-items:center;gap:9px;font-weight:900;font-size:21px;letter-spacing:-.4px;flex:none}
.logo .dot{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8fa2,var(--red) 55%,var(--red-2));box-shadow:inset -3px -3px 6px rgba(0,0,0,.18);display:grid;place-items:center;color:#fff;font-size:13px;font-weight:900;transition:transform .7s var(--ease)}
.logo:hover .dot{transform:rotate(360deg)}
.logo b{color:var(--red)}
.nav{display:flex;gap:2px;flex:1;height:100%;align-items:stretch}
.nav-i{position:relative;display:flex;align-items:center}
.nav-i > a,.nav-i > button{display:flex;align-items:center;gap:6px;padding:0 14px;height:100%;background:none;border:0;cursor:pointer;font-weight:600;font-size:15px;position:relative}
.nav-i > a::after,.nav-i > button::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--red);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav-i:hover > a::after,.nav-i:hover > button::after,.nav-i.active > a::after,.nav-i.active > button::after{transform:scaleX(1)}
.nav-i.active > a,.nav-i.active > button{color:var(--red)}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s}
.nav-i:hover .caret{transform:rotate(-135deg) translateY(-2px)}
.drop{position:absolute;top:100%;left:0;min-width:300px;background:#fff;border-radius:0 0 14px 14px;box-shadow:var(--shadow-lg);padding:10px;opacity:0;visibility:hidden;transform:translateY(8px);transition:all .22s var(--ease)}
.nav-i:hover .drop,.nav-i:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px;transition:background .15s,transform .2s}
.drop a:hover{background:var(--bg);transform:translateX(4px)}
.drop a small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.drop .gi{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800}
.hright{display:flex;align-items:center;gap:10px;margin-left:auto}
.cart-btn{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--bg);transition:background .2s}
.cart-btn:hover{background:var(--line)}
.cart-btn svg{width:22px;height:22px}
.cart-count{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;border:2px solid #fff;transform:scale(0);transition:transform .3s var(--ease)}
.cart-count.on{transform:scale(1)}
.cart-count.bump{animation:bump .5s var(--ease)}
@keyframes bump{30%{transform:scale(1.5)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.nbadge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red-soft);color:var(--red);font-size:11px;font-weight:800}
.umenu{height:auto}
.umenu .drop{top:calc(100% + 8px)}
.umenu::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
.user-chip{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg)}
.user-chip i{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-size:13px}
.burger{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;width:22px;height:2px;background:var(--ink);border-radius:2px;content:"";transition:.3s var(--ease)}
.burger span{top:21px}.burger span::before{top:-7px;left:0}.burger span::after{top:7px;left:0}

/* Mobile drawer */
.overlay{position:fixed;inset:0;background:rgba(13,29,51,.5);z-index:190;opacity:0;visibility:hidden;transition:.3s}
.overlay.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(340px,88vw);background:#fff;z-index:200;transform:translateX(100%);transition:transform .35s var(--ease);display:flex;flex-direction:column;overflow-y:auto}
.drawer.on{transform:none}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:16px;border-bottom:1px solid var(--line)}
.drawer-close{width:40px;height:40px;border-radius:50%;border:0;background:var(--bg);font-size:20px;cursor:pointer}
.drawer nav{padding:8px 16px;display:flex;flex-direction:column}
.drawer nav a{padding:13px 4px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;gap:10px}
.drawer nav a.sub{padding-left:20px;font-weight:500;color:var(--ink-2)}
.drawer nav .grp{font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.6px;padding:16px 4px 4px}
.drawer .auth{padding:16px;display:grid;gap:10px;margin-top:auto}

/* ---------- Hero slider (home) ---------- */
.hero{position:relative;height:500px;overflow:hidden;background:var(--red)}
.slide{position:absolute;inset:0;display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .8s,visibility .8s}
.slide.on{opacity:1;visibility:visible}
.slide .bg{position:absolute;inset:0;transform:scale(1.08);transition:transform 6.5s linear}
.slide.on .bg{transform:scale(1)}
.bg-red{background:radial-gradient(circle at 75% 45%,rgba(255,255,255,.28),transparent 42%),linear-gradient(180deg,#ff5572 0%,var(--red) 55%,#e01c42 100%)}
.bg-blue{background:radial-gradient(circle at 75% 45%,rgba(255,255,255,.22),transparent 42%),linear-gradient(180deg,#2b6fe0,var(--blue) 55%,var(--blue-2))}
.bg-gold{background:radial-gradient(circle at 75% 45%,rgba(255,255,255,.3),transparent 42%),linear-gradient(180deg,#ffb238,#ff8a1f 55%,#f2601b)}
.slide .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center;width:100%;color:#fff}
.slide .txt > *{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.slide.on .txt > *{opacity:1;transform:none}
.slide.on .txt > *:nth-child(2){transition-delay:.1s}
.slide.on .txt > *:nth-child(3){transition-delay:.2s}
.slide.on .txt > *:nth-child(4){transition-delay:.3s}
.slide.on .txt > *:nth-child(5){transition-delay:.4s}
.kicker{display:inline-block;font-size:13px;font-weight:800;letter-spacing:.6px;background:rgba(255,255,255,.2);padding:6px 14px;border-radius:999px;margin-bottom:14px}
.slide h1,.slide h2{font-size:46px;line-height:1.1;font-weight:900;letter-spacing:-1px;margin-bottom:12px}
.slide p{font-size:17px;opacity:.92;max-width:500px;margin-bottom:24px}
.big-amt{font-size:60px;font-weight:900;letter-spacing:-2px;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums;text-shadow:0 6px 30px rgba(0,0,0,.18)}
.big-amt small{font-size:22px;letter-spacing:0;margin-left:4px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.art{position:relative;height:380px}
.ball{position:absolute;border-radius:50%;display:grid;place-items:center;font-weight:900;color:var(--ink);background:radial-gradient(circle at 35% 30%,#fff 0%,#f3f3f3 45%,#cfd3da 100%);box-shadow:inset -8px -10px 18px rgba(0,0,0,.12),0 18px 34px rgba(0,0,0,.22)}
.ball.c-red{background:radial-gradient(circle at 35% 30%,#ff9aac,var(--red) 55%,#b8102f);color:#fff}
.ball.c-blue{background:radial-gradient(circle at 35% 30%,#8ab4ff,var(--blue) 55%,#002a70);color:#fff}
.ball.c-gold{background:radial-gradient(circle at 35% 30%,#ffe9a8,var(--gold) 55%,#d89400)}
.art .ball{opacity:0;transform:translateY(-240px) rotate(-200deg)}
.slide.on .art .ball{animation:drop .95s var(--ease) forwards,bob 5s ease-in-out 1.1s infinite}
.slide.on .art .ball:nth-child(2){animation-delay:.12s,1.2s}
.slide.on .art .ball:nth-child(3){animation-delay:.24s,1.3s}
.slide.on .art .ball:nth-child(4){animation-delay:.36s,1.4s}
.slide.on .art .ball:nth-child(5){animation-delay:.48s,1.5s}
.slide.on .art .ball:nth-child(6){animation-delay:.6s,1.6s}
@keyframes drop{to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.hero-ctrl{position:absolute;left:0;right:0;bottom:26px;z-index:5}
.hero-ctrl .wrap{display:flex;align-items:center}
.dots{display:flex;gap:8px}
.dots button{width:40px;height:4px;border:0;border-radius:4px;background:rgba(255,255,255,.35);cursor:pointer;position:relative;overflow:hidden}
.dots button i{position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(0)}
.dots button.on i{animation:prog 6s linear forwards}
@keyframes prog{to{transform:scaleX(1)}}
.arrows{margin-left:auto;display:flex;gap:8px}
.arrows button,.car-nav button{width:44px;height:44px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:20px;transition:.2s}
.arrows button{border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.12);color:#fff}
.arrows button:hover{background:#fff;color:var(--red)}

/* ---------- Page hero (inner pages) ---------- */
.phero{position:relative;overflow:hidden;color:#fff;padding:40px 0 48px}
.phero.bg-red,.phero.bg-blue,.phero.bg-gold{}
.phero .wrap{position:relative;z-index:2}
.crumbs{font-size:13px;opacity:.85;margin-bottom:14px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a:hover{text-decoration:underline}
.phero h1{font-size:38px;font-weight:900;letter-spacing:-.8px;line-height:1.15;margin-bottom:8px}
.phero p{opacity:.92;max-width:640px}
.phero .floaters span{position:absolute;border-radius:50%;background:rgba(255,255,255,.14);animation:bob 6s ease-in-out infinite}
.game-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:24px;align-items:center}
.gh-card{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:var(--radius);padding:20px;backdrop-filter:blur(6px)}
.gh-card .lbl{font-size:13px;opacity:.85}
.gh-card .amt{font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1.1;font-variant-numeric:tabular-nums}
.gh-card .cd{margin-top:14px}
.gh-card .cd div{background:rgba(255,255,255,.18)}
.gh-card .cd span{color:rgba(255,255,255,.8)}

/* ---------- Sections ---------- */
section.sec{padding:60px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}
.sec-head h2{font-size:30px;font-weight:900;letter-spacing:-.6px;line-height:1.2}
.sec-head p{color:var(--ink-2)}
.more{font-weight:700;color:var(--blue);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.more:hover .arr{transform:translateX(4px)}
.more .arr{transition:transform .2s}

/* ---------- Game cards / carousel ---------- */
.carousel{position:relative}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3*16px)/4);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:8px 4px 24px;margin:-8px -4px 0}
.car-track::-webkit-scrollbar{display:none}
.car-nav{display:flex;gap:8px}
.car-nav button{border:1px solid var(--line);background:#fff;color:var(--ink)}
.car-nav button:hover{border-color:var(--ink)}
.car-nav button[disabled]{opacity:.35;pointer-events:none}
.gcard{scroll-snap-align:start;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.gcard:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.gcard .gtop{position:relative;padding:18px 18px 20px;color:#fff;overflow:hidden;min-height:170px;display:flex;flex-direction:column}
.gcard .gtop::before,.gcard .gtop::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);transition:transform .6s var(--ease)}
.gcard .gtop::before{width:150px;height:150px;right:-50px;top:-50px}
.gcard .gtop::after{width:90px;height:90px;right:30px;bottom:-45px}
.gcard:hover .gtop::before{transform:scale(1.35) translate(-10px,10px)}
.gcard:hover .gtop::after{transform:scale(1.5)}
.gcard .gname{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;position:relative;z-index:1}
.gcard .gname .gi{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}
.gcard .tag{margin-left:auto;font-size:10px;font-weight:800;padding:4px 9px;border-radius:999px;background:rgba(0,0,0,.2);letter-spacing:.4px}
.gcard .glbl{margin-top:auto;font-size:13px;opacity:.9;position:relative;z-index:1;padding-top:16px}
.gcard .gamt{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1.1;position:relative;z-index:1;font-variant-numeric:tabular-nums}
.gcard .gamt small{font-size:14px;margin-left:2px}
.gcard .gbody{padding:14px 18px 18px;display:flex;flex-direction:column;gap:12px;flex:1}
.gcard .gnext{font-size:12px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.gcard .btn{margin-top:auto}
.t-lotto{background:linear-gradient(135deg,#ff9a3c,#f2601b)}
.t-mega{background:linear-gradient(135deg,#ff5572,#d9173a)}
.t-power{background:linear-gradient(135deg,#2b6fe0,#002e79)}
.t-max3d{background:linear-gradient(135deg,#8b5cf6,#4c1d95)}
.t-bingo{background:linear-gradient(135deg,#19c38a,#08785a)}
.t-keno{background:linear-gradient(135deg,#00b4d8,#0369a1)}
.c-lotto{color:#f2601b}.c-mega{color:#d9173a}.c-power{color:#0047b8}.c-max3d{color:#5b21b6}.c-bingo{color:#08785a}.c-keno{color:#0369a1}

/* Countdown */
.cd{display:flex;gap:6px}
.cd div{flex:1;text-align:center;background:var(--bg);border-radius:8px;padding:6px 0}
.cd b{display:block;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.2}
.cd b.flip{animation:flip .35s var(--ease)}
@keyframes flip{0%{transform:rotateX(90deg);opacity:.3}100%{transform:none;opacity:1}}
.cd span{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:600}

/* ---------- Grid of games (category) ---------- */
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.filter{display:inline-flex;position:relative;background:#fff;border-radius:999px;padding:5px;box-shadow:var(--shadow);margin-bottom:24px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.filter button{position:relative;z-index:1;border:0;background:none;padding:9px 20px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;color:var(--ink-2);white-space:nowrap;transition:color .25s}
.filter button.on{color:#fff}
.filter .pill{position:absolute;top:5px;bottom:5px;left:5px;border-radius:999px;background:var(--red);transition:left .35s var(--ease),width .35s var(--ease)}
.gcard.out{display:none}
.gcard.in-anim{animation:cardIn .45s var(--ease)}
@keyframes cardIn{from{opacity:0;transform:scale(.94) translateY(12px)}}

/* ---------- Results ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rcard{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.rcard h3{display:flex;align-items:center;gap:10px;font-size:17px}
.rcard h3 .gi{width:30px;height:30px;border-radius:50%;flex:none}
.rcard .rdate{font-size:13px;color:var(--muted);margin:4px 0 14px}
.nums{display:flex;flex-wrap:wrap;gap:7px}
.nb{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:var(--ink);background:radial-gradient(circle at 35% 30%,#fff,#eef0f3 60%,#d3d7de);box-shadow:inset -3px -4px 6px rgba(0,0,0,.08),0 3px 6px rgba(0,0,0,.08)}
.nb.sp{background:radial-gradient(circle at 35% 30%,#ff9aac,var(--red) 60%,#b8102f);color:#fff}
.nb.bn{background:radial-gradient(circle at 35% 30%,#8ab4ff,var(--blue) 60%,#002a70);color:#fff}
.anim-balls .nb{opacity:0;transform:scale(0) rotate(-140deg)}
.anim-balls.in .nb{animation:pop .5s var(--ease) forwards}
@keyframes pop{to{opacity:1;transform:none}}
.demo{font-size:12px;color:var(--muted);margin-top:12px}
.rtable{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.rtable th,.rtable td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
.rtable th{background:var(--bg);font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-2)}
.rtable tr:last-child td{border-bottom:0}
.rtable tbody tr{transition:background .15s}
.rtable tbody tr:hover{background:#fafbfc}
.rtable .nb{width:34px;height:34px;font-size:13px}

/* ---------- Steps / Features / Stats ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:st}
.step{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .3s var(--ease)}
.step:hover{transform:translateY(-5px)}
.step::before{counter-increment:st;content:counter(st);position:absolute;right:14px;top:-14px;font-size:110px;font-weight:900;color:var(--bg);line-height:1}
.step .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:26px;background:var(--red-soft);margin-bottom:16px;position:relative;transition:transform .4s var(--ease)}
.step:hover .ic{transform:rotate(-10deg) scale(1.1)}
.step h3{font-size:18px;margin-bottom:6px;position:relative}
.step p{font-size:14px;color:var(--ink-2);position:relative}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feat{display:flex;gap:16px;background:#fff;border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);transition:transform .3s var(--ease)}
.feat:hover{transform:translateY(-4px)}
.feat .ic{flex:none;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;font-size:22px;background:var(--blue-soft)}
.feat h3{font-size:16px;margin-bottom:4px}
.feat p{font-size:14px;color:var(--ink-2)}
.stats{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.stats::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(242,44,77,.35),transparent 60%);left:-220px;top:-320px;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(520px,220px)}}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;position:relative}
.stat b{display:block;font-size:40px;font-weight:900;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.stat span{color:#b7c0cf}

/* ---------- Panels / Info ---------- */
.two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.panel{background:#fff;border-radius:var(--radius);padding:28px;box-shadow:var(--shadow)}
.panel h2,.panel h3.ph{font-size:22px;margin-bottom:16px;letter-spacing:-.3px}
.tier{display:flex;gap:14px;align-items:center;padding:16px;border-radius:12px;background:var(--bg);margin-bottom:12px;transition:transform .25s var(--ease)}
.tier:hover{transform:translateX(6px)}
.tier .amt{flex:0 0 140px;font-weight:800;color:var(--red)}
.tier p{font-size:14px}

/* Accordion */
.acc{border-bottom:1px solid var(--line)}
.acc:last-child{border-bottom:0}
.acc > button{width:100%;background:none;border:0;text-align:left;padding:16px 0;font-weight:700;font-size:15px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.acc > button i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--bg);position:relative;transition:transform .3s var(--ease),background .3s}
.acc > button i::before,.acc > button i::after{content:"";position:absolute;left:9px;right:9px;top:13px;height:2px;background:var(--red);transition:transform .3s}
.acc > button i::after{transform:rotate(90deg)}
.acc.open > button i{transform:rotate(180deg);background:var(--red-soft)}
.acc.open > button i::after{transform:rotate(0)}
.acc .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.acc.open .ans{grid-template-rows:1fr}
.acc .ans > div{overflow:hidden}
.acc .ans p,.acc .ans ul{color:var(--ink-2);font-size:14px;padding-bottom:16px}
.acc .ans ul{padding-left:20px}

/* Tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);position:relative;overflow-x:auto;scrollbar-width:none;margin-bottom:24px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:none;padding:14px 18px;font-weight:700;cursor:pointer;color:var(--ink-2);white-space:nowrap;transition:color .2s}
.tabs button.on{color:var(--ink)}
.tabs .bar{position:absolute;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--red);transition:left .35s var(--ease),width .35s var(--ease)}
.tpane{display:none;animation:fadeUp .4s var(--ease)}
.tpane.on{display:block}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}}

/* Prize table */
.ptable{width:100%;border-collapse:collapse}
.ptable th,.ptable td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:14px}
.ptable th{font-size:12px;text-transform:uppercase;color:var(--ink-2);letter-spacing:.5px;background:var(--bg)}
.ptable td:last-child{font-weight:800;color:var(--red)}
.ptable tr:first-child td:last-child{font-size:16px}
.howlist{list-style:none;counter-reset:h;display:grid;gap:12px}
.howlist li{counter-increment:h;display:flex;gap:14px;align-items:flex-start}
.howlist li::before{content:counter(h);flex:none;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;font-weight:800;display:grid;place-items:center;font-size:14px}

/* ---------- Play page ---------- */
.play{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.board{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;position:relative;animation:boardIn .4s var(--ease);transition:box-shadow .25s,outline-color .25s;outline:2px solid transparent}
.board.done{outline-color:var(--green)}
.board.removing{animation:boardOut .3s var(--ease) forwards}
@keyframes boardIn{from{opacity:0;transform:scale(.92)}}
@keyframes boardOut{to{opacity:0;transform:scale(.9)}}
.bhead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.bhead .bl{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.board.done .bhead .bl{background:var(--green)}
.bhead .bstat{font-size:13px;color:var(--ink-2);font-weight:600}
.bhead .tools{margin-left:auto;display:flex;gap:4px}
.icon-btn{width:34px;height:34px;border-radius:50%;border:0;background:var(--bg);cursor:pointer;display:grid;place-items:center;font-size:15px;transition:background .2s,transform .2s}
.icon-btn:hover{background:var(--line)}
.icon-btn.qp:hover{transform:rotate(180deg)}
.icon-btn svg{width:16px;height:16px}
.grid-n{display:grid;grid-template-columns:repeat(9,1fr);gap:5px}
.grid-n.g7{grid-template-columns:repeat(7,1fr)}
.grid-n.g10{grid-template-columns:repeat(10,1fr);gap:4px}
.grid-n.g10 .n{font-size:12px}
.buy-steps{max-width:720px;margin:0 auto 24px}
.buy-steps .st{font-size:13px}
.n{aspect-ratio:1;border-radius:50%;border:1px solid var(--line);background:#fff;font-weight:700;font-size:13px;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s,color .15s,transform .15s;padding:0}
.n:hover{border-color:var(--ink)}
.n.on{background:var(--red);border-color:var(--red);color:#fff;animation:npop .3s var(--ease)}
.n.sp.on{background:var(--blue);border-color:var(--blue)}
.n.dis{opacity:.35;pointer-events:none}
@keyframes npop{40%{transform:scale(1.25)}100%{transform:scale(1)}}
.sub-lbl{font-size:12px;font-weight:800;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 8px;display:flex;justify-content:space-between}
.picked{display:flex;gap:5px;flex-wrap:wrap;min-height:32px;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.picked .nb{width:30px;height:30px;font-size:12px;animation:pop .35s var(--ease)}
.picked .ph{width:30px;height:30px;border-radius:50%;border:2px dashed var(--line)}
.add-board{border:2px dashed #cfd4db;border-radius:var(--radius);background:transparent;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-weight:700;color:var(--ink-2);cursor:pointer;transition:.2s}
.add-board:hover{border-color:var(--red);color:var(--red);background:#fff}
.add-board .plus{width:48px;height:48px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-size:26px;transition:transform .3s var(--ease),background .2s}
.add-board:hover .plus{transform:rotate(90deg);background:var(--red-soft)}
.opt-row{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1.5px solid var(--line);background:#fff;padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;cursor:pointer;transition:.18s}
.chip:hover{border-color:var(--ink)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.opt-card{background:#fff;border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);margin-bottom:16px}
.opt-card h4{font-size:15px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.opt-card h4 small{font-weight:500;color:var(--muted);font-size:12px}
.play-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.play-toolbar .sp{flex:1}

/* Summary */
.summary{position:sticky;top:84px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.summary .sh{padding:18px 20px;color:#fff}
.summary .sh b{font-size:18px;display:block}
.summary .sh small{opacity:.9}
.summary .sb{padding:18px 20px;display:grid;gap:10px}
.srow{display:flex;justify-content:space-between;font-size:14px;color:var(--ink-2)}
.srow b{color:var(--ink)}
.stotal{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:14px;margin-top:4px}
.stotal b{font-size:26px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums;transition:color .3s}
.stotal b.tick{animation:tick .35s var(--ease)}
@keyframes tick{50%{transform:scale(1.12);color:var(--red)}}
.warn{font-size:13px;color:#b54708;background:#fff6e5;border-radius:8px;padding:10px 12px;display:none}
.warn.on{display:block;animation:fadeUp .3s}
.fly{position:fixed;z-index:500;width:36px;height:36px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;pointer-events:none;box-shadow:0 8px 20px rgba(242,44,77,.4);transition:transform .8s cubic-bezier(.5,-.3,.7,1),opacity .8s}

/* Digits (Max 3D) */
.digits{display:flex;gap:10px;justify-content:center;margin:6px 0}
.digit{display:flex;flex-direction:column;align-items:center;gap:4px}
.digit button{width:48px;height:30px;border:0;border-radius:8px;background:var(--bg);cursor:pointer;font-size:14px;transition:background .2s}
.digit button:hover{background:var(--line)}
.digit .dv{width:58px;height:70px;border-radius:14px;background:var(--ink);color:#fff;font-size:38px;font-weight:900;display:grid;place-items:center;overflow:hidden;position:relative;font-variant-numeric:tabular-nums}
.digit .dv.roll{animation:roll .12s linear infinite}
@keyframes roll{0%{transform:translateY(-6px)}100%{transform:translateY(6px)}}
.set-lbl{text-align:center;font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.5px;margin-top:10px}

/* Bingo */
.dice-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.die{aspect-ratio:1;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;font-size:24px;font-weight:900;transition:.18s}
.die:hover{border-color:var(--ink);transform:translateY(-2px)}
.die.on{background:var(--green);border-color:var(--green);color:#fff;animation:npop .3s var(--ease)}
.sum-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.lhn{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.lhn button{padding:18px 8px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-weight:800;font-size:18px;transition:.2s}
.lhn button small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.lhn button:hover{border-color:var(--ink)}
.lhn button.on{background:var(--green);color:#fff;border-color:var(--green)}
.lhn button.on small{color:rgba(255,255,255,.85)}
.bets{display:grid;gap:8px;margin-top:12px}
.bet{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:var(--bg);font-size:14px;animation:fadeUp .3s var(--ease)}
.bet b{flex:1}
.bet button{border:0;background:none;cursor:pointer;font-size:18px;color:var(--muted)}
.bingo-live{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bingo-live .dies{display:flex;gap:8px}
.bingo-live .dies span{width:46px;height:46px;border-radius:12px;background:#fff;color:var(--ink);display:grid;place-items:center;font-size:22px;font-weight:900;box-shadow:0 6px 14px rgba(0,0,0,.15)}
.bingo-live .dies span.shake{animation:shake .5s}
@keyframes shake{20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(4deg)}}

/* ---------- Cart ---------- */
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:24px;align-items:start}
.citem{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;display:grid;grid-template-columns:56px 1fr auto;gap:16px;align-items:start;margin-bottom:14px;transition:opacity .3s,transform .3s}
.citem.gone{opacity:0;transform:translateX(40px)}
.citem .gi{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:12px}
.citem h3{font-size:17px}
.citem .meta{font-size:13px;color:var(--ink-2);margin:2px 0 10px}
.citem .lines{display:grid;gap:6px}
.citem .line{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:13px}
.citem .line .nb{width:28px;height:28px;font-size:12px}
.citem .line em{font-style:normal;color:var(--muted);font-weight:700;width:18px}
.citem .right{text-align:right;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.citem .price{font-weight:900;font-size:18px}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{width:32px;height:32px;border:0;background:#fff;cursor:pointer;font-size:16px}
.qty button:hover{background:var(--bg)}
.qty span{min-width:64px;text-align:center;font-size:13px;font-weight:700}
.empty{text-align:center;padding:60px 20px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.empty .big{font-size:60px;margin-bottom:10px;animation:bob 3s ease-in-out infinite}

/* ---------- Checkout ---------- */
.stepper{display:flex;align-items:center;gap:0;margin:0 auto 28px;max-width:640px}
.stepper .st{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none;font-size:13px;font-weight:700;color:var(--muted);position:relative;z-index:1}
.stepper .st i{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--line);display:grid;place-items:center;font-style:normal;transition:.3s}
.stepper .st.on{color:var(--ink)}
.stepper .st.on i{border-color:var(--red);color:var(--red)}
.stepper .st.done i{background:var(--red);border-color:var(--red);color:#fff}
.stepper .ln{flex:1;height:3px;background:var(--line);margin:0 8px 22px;border-radius:3px;position:relative;overflow:hidden}
.stepper .ln::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.stepper .ln.done::after{transform:scaleX(1)}
.cstep{display:none}
.cstep.on{display:block;animation:fadeUp .4s var(--ease)}
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:13px;font-weight:700;color:var(--ink-2)}
.input{width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:15px;transition:border-color .2s,box-shadow .2s;outline:none}
.input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,76,198,.12)}
.input.err{border-color:var(--red);animation:shakeX .35s}
@keyframes shakeX{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.hint{font-size:12px;color:var(--muted)}
.errtxt{font-size:12px;color:var(--red);min-height:16px}
.otp{display:flex;gap:10px}
.otp input{width:52px;height:58px;text-align:center;font-size:22px;font-weight:800;border:1.5px solid var(--line);border-radius:12px;outline:none;transition:.2s}
.otp input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,76,198,.12);transform:translateY(-2px)}
.pay-opts{display:grid;gap:10px}
.pay{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;cursor:pointer;background:#fff;transition:.2s}
.pay:hover{border-color:var(--ink)}
.pay input{display:none}
.pay .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);flex:none;position:relative;transition:.2s}
.pay .radio::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--red);transform:scale(0);transition:transform .25s var(--ease)}
.pay.on{border-color:var(--red);background:#fff8f9}
.pay.on .radio{border-color:var(--red)}
.pay.on .radio::after{transform:scale(1)}
.pay .pi{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-weight:900;font-size:12px;color:#fff;flex:none}
.pay b{display:block;font-size:15px}
.pay small{color:var(--muted);font-size:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.check input{margin-top:4px;accent-color:var(--red);width:16px;height:16px}
.spinner{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Success */
.success{text-align:center;max-width:640px;margin:0 auto}
.success .ok{width:96px;height:96px;border-radius:50%;background:var(--green);margin:0 auto 18px;display:grid;place-items:center;animation:okpop .6s var(--ease)}
.success .ok svg{width:48px;height:48px;stroke:#fff;stroke-width:4;fill:none;stroke-dasharray:60;stroke-dashoffset:60;animation:draw .6s .35s ease forwards}
@keyframes okpop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
.ticket{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);text-align:left;margin-top:16px;position:relative;overflow:hidden;animation:fadeUp .5s var(--ease) both}
.ticket::before,.ticket::after{content:"";position:absolute;top:58px;width:22px;height:22px;border-radius:50%;background:var(--bg)}
.ticket::before{left:-11px}.ticket::after{right:-11px}
.ticket .th{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:2px dashed var(--line)}
.ticket .th .gi{width:36px;height:36px;border-radius:50%;flex:none}
.ticket .th b{flex:1}
.ticket .th code{font-size:12px;background:var(--bg);padding:4px 8px;border-radius:6px}
.ticket .tb{padding:14px 20px;display:grid;gap:8px}
/* Confetti chỉ là nền chúc mừng — phải nằm DƯỚI biên nhận để không che thông tin vé */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:0}

/* Auth */
.auth-wrap{max-width:460px;margin:0 auto}
.auth-card{background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);padding:32px}
.auth-card h1{font-size:26px;margin-bottom:4px}
.pw{position:relative}
.pw button{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:none;cursor:pointer;color:var(--muted);font-size:13px;font-weight:700}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px;margin:18px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}

/* Content pages */
.content{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
.toc{position:sticky;top:84px;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:10px}
.toc a{display:block;padding:10px 14px;border-radius:10px;font-weight:600;font-size:14px;color:var(--ink-2);transition:.2s;border-left:3px solid transparent}
.toc a:hover{background:var(--bg);color:var(--ink)}
.toc a.on{background:var(--red-soft);color:var(--red);border-left-color:var(--red)}
.doc h2{font-size:24px;margin:0 0 14px;scroll-margin-top:90px}
.doc h3{font-size:17px;margin:18px 0 8px}
.doc p,.doc li{color:var(--ink-2);font-size:15px}
.doc ul,.doc ol{padding-left:22px;display:grid;gap:6px}
.doc .panel{margin-bottom:20px}
.kv{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.kv div{background:var(--bg);border-radius:12px;padding:14px}
.kv b{display:block;font-size:18px;color:var(--ink)}
.kv span{font-size:13px;color:var(--ink-2)}
.search{position:relative;max-width:520px;margin-top:18px}
.search input{width:100%;padding:15px 20px 15px 48px;border-radius:999px;border:0;font-size:15px;outline:none;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.search::before{content:"⌕";position:absolute;left:18px;top:50%;transform:translateY(-52%);font-size:22px;color:var(--muted)}
mark{background:#fff2b3;color:inherit;border-radius:3px}

/* App band */
.appband{background:linear-gradient(120deg,var(--red),#c3123a);color:#fff;border-radius:24px;padding:44px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;position:relative;overflow:hidden}
.appband::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;border:44px solid rgba(255,255,255,.1);animation:spin 22s linear infinite}
.appband h2{font-size:30px;margin-bottom:6px}
.stores{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1}
.store{display:flex;align-items:center;gap:10px;background:#000;color:#fff;padding:10px 18px;border-radius:12px;min-width:170px;transition:transform .2s var(--ease)}
.store:hover{transform:translateY(-3px)}
.store small{display:block;font-size:11px;opacity:.7}
.store .i{width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.12);display:grid;place-items:center;flex:none;transition:background .25s,transform .25s var(--ease)}
.store .i svg{width:22px;height:22px}
.store:hover .i{background:var(--red);transform:scale(1.08)}
.store b{display:block;font-size:16px;line-height:1.2}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#aeb7c6;margin-top:60px;padding:52px 0 24px;font-size:14px}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:28px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:14px}
.site-footer ul{list-style:none;display:grid;gap:9px}
.site-footer ul a{transition:color .2s,padding .2s}
.site-footer ul a:hover{color:#fff;padding-left:4px}
.hotline{font-size:28px;font-weight:900;color:#fff;margin:6px 0 2px}
.social{display:flex;gap:10px;margin-top:16px}
.social a{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font-weight:800;color:#fff;font-size:13px;transition:.2s}
.social a:hover{background:var(--red);transform:translateY(-3px)}
.fbottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:20px;font-size:13px}
.b18{display:inline-grid;place-items:center;width:34px;height:34px;border:2px solid #aeb7c6;border-radius:50%;font-weight:800;margin-right:8px}

/* Toast */
.toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:600;display:grid;gap:8px;width:min(420px,calc(100vw - 32px))}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow-lg);animation:toastIn .4s var(--ease);font-size:14px}
.toast.out{animation:toastOut .3s forwards}
.toast a{margin-left:auto;color:var(--gold);font-weight:700;white-space:nowrap}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.96)}}
@keyframes toastOut{to{opacity:0;transform:translateY(10px)}}
.totop{position:fixed;right:20px;bottom:20px;width:48px;height:48px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:20px;cursor:pointer;box-shadow:0 10px 24px rgba(242,44,77,.4);opacity:0;transform:translateY(20px);transition:.3s var(--ease);z-index:90}
.totop.show{opacity:1;transform:none}

/* Mobile sticky buy bar */
.mbar{display:none}

/* Reveal */
.rv{opacity:0;transform:translateY(36px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}
.scroll-fade{opacity:0;transition:opacity .6s ease}
.scroll-fade.in{opacity:1}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .car-track{grid-auto-columns:calc((100% - 2*16px)/3)}
  .ggrid{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:repeat(3,1fr)}
  .play,.cart-layout{grid-template-columns:1fr 320px}
}
@media (max-width:900px){
  .nav,.hright .auth-btns{display:none}
  .burger{display:block}
  .hero{height:auto;min-height:540px}
  .slide .wrap{grid-template-columns:1fr;padding:40px 16px 90px}
  .art{display:none}
  .slide h1,.slide h2{font-size:34px}
  .big-amt{font-size:44px}
  .car-track{grid-auto-columns:calc((100% - 16px)/2)}
  .rgrid,.steps{grid-template-columns:1fr}
  .two{grid-template-columns:1fr}
  .stats .grid{grid-template-columns:1fr 1fr;row-gap:28px}
  .play,.cart-layout{grid-template-columns:1fr}
  .summary{position:static}
  .game-hero{grid-template-columns:1fr}
  .content{grid-template-columns:1fr}
  .toc{position:static;display:flex;overflow-x:auto;gap:4px}
  .toc a{white-space:nowrap;border-left:0}
  .phero h1{font-size:30px}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:95;background:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.1);padding:10px 16px;align-items:center;gap:12px;transform:translateY(100%);transition:transform .3s var(--ease)}
  .mbar.on{transform:none}
  .mbar b{font-size:18px;display:block}
  .mbar small{color:var(--muted);font-size:12px}
  .mbar .btn{margin-left:auto}
  .rtable .hide-m{display:none}
}
@media (max-width:600px){
  .car-track{grid-auto-columns:82%}
  .ggrid,.features,.fgrid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .tier{flex-direction:column;align-items:flex-start;gap:4px}
  .tier .amt{flex:none}
  .appband{padding:28px}
  .kv{grid-template-columns:1fr}
  .citem{grid-template-columns:44px 1fr}
  .citem .gi{width:44px;height:44px}
  .citem .right{grid-column:1/-1;flex-direction:row;justify-content:space-between;align-items:center}
  .grid-n{grid-template-columns:repeat(8,1fr)}
  .sum-grid{grid-template-columns:repeat(4,1fr)}
  .otp input{width:44px;height:52px}
  .auth-card{padding:24px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.rv,.scroll-fade,.art .ball,.anim-balls .nb{opacity:1!important;transform:none!important}}

/* Lịch quay (home) */
.sched{display:grid;gap:10px}
.srow-card{display:grid;grid-template-columns:48px 1.4fr 1fr 1fr 20px;gap:16px;align-items:center;background:#fff;border-radius:14px;padding:14px 18px;box-shadow:var(--shadow);transition:transform .25s var(--ease),box-shadow .25s}
.srow-card:hover{transform:translateX(6px);box-shadow:var(--shadow-lg)}
.srow-card .gi{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;font-size:12px}
.srow-card small{display:block;color:var(--muted);font-size:12px}
.srow-card b{font-size:15px}
.srow-card .arr{font-size:24px;color:var(--muted);transition:transform .2s}
.srow-card:hover .arr{transform:translateX(4px);color:var(--red)}
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.note{display:flex;gap:14px;background:#fff;border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.note .ni{flex:none;width:40px;height:40px;border-radius:50%;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:13px}
.note p{font-size:14px;color:var(--ink-2)}
.regband{background:#fff;border-radius:24px;padding:36px 40px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border-left:6px solid var(--red)}
.regband h2{font-size:26px;letter-spacing:-.4px;margin-bottom:4px}
.regband p{color:var(--ink-2)}
@media (max-width:900px){.srow-card{grid-template-columns:44px 1fr 20px}.srow-card .sc,.srow-card .sclose{display:none}.notes{grid-template-columns:1fr}.regband{padding:26px}}

/* Mục menu nổi bật: Lotto 5/35 */
.nav-hot > a{color:var(--red)}
.nav-hot > a{padding-right:22px!important}
.nav-hot > a .new-tag{position:absolute;top:14px;right:-6px;font-size:9px;font-weight:800;letter-spacing:.3px;background:var(--red);color:#fff;padding:1px 5px;border-radius:999px;animation:hotPulse 2s ease-in-out infinite}
@keyframes hotPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.nav-i > a,.nav-i > button{white-space:nowrap}
@media (max-width:1180px){.nav-i > a,.nav-i > button{padding:0 10px;font-size:14px}.hbar{gap:12px}}
@media (max-width:1100px){.nav,.hright .auth-btns{display:none!important}.burger{display:block}}

/* Bóng kết quả trên nền màu (thẻ kết quả mới nhất) */
.gtop .nb{width:46px;height:46px;font-size:17px;box-shadow:inset -3px -4px 6px rgba(0,0,0,.1),0 4px 10px rgba(0,0,0,.25)}
.gtop .nb.sp,.gtop .nb.bn{border:2px solid #fff}

/* ---------- Nút "Chơi ngay" khi sắp đến giờ quay ---------- */
.play-btn{display:grid;place-items:center;overflow:hidden}
.play-btn .pb{grid-area:1/1;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:opacity .45s,transform .45s var(--ease)}
.play-btn .pb-soon,.play-btn .pb-time{opacity:0;transform:translateY(8px);pointer-events:none}
.play-btn .bx{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 4px;border:1.5px solid rgba(255,255,255,.75);border-radius:6px;font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.play-btn.urgent{background:linear-gradient(100deg,#e8173d 0%,#f22c4d 30%,#ff8da2 50%,#f22c4d 70%,#e8173d 100%);background-size:250% 100%;animation:urgShift 2.4s linear infinite;box-shadow:0 8px 22px rgba(242,44,77,.35)}
.play-btn.urgent .pb-play{animation:urgA 4.8s infinite}
.play-btn.urgent .pb-soon{animation:urgB 4.8s infinite}
.play-btn.urgent .pb-time{animation:urgC 4.8s infinite}
@keyframes urgShift{from{background-position:100% 0}to{background-position:-150% 0}}
/* 3 lớp nội dung thay phiên: Sắp đến giờ quay số → phút/giây → Chơi ngay */
@keyframes urgB{0%,28%{opacity:1;transform:none}33%,95%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
@keyframes urgC{0%,28%{opacity:0;transform:translateY(8px)}33%,61%{opacity:1;transform:none}66%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes urgA{0%,61%{opacity:0;transform:translateY(8px)}66%,95%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.play-btn.urgent .pb-soon{opacity:1!important;transform:none!important}.play-btn.urgent .pb-play,.play-btn.urgent .pb-time{opacity:0!important}}

/* ---------- Logo QuikLott ---------- */
.logo{color:var(--ink)}
.logo-light,.site-footer .logo{color:#fff}
.ql-logo{height:34px;width:auto;display:block;overflow:visible}
.ql-logo .ql-q{fill:currentColor}
.ql-logo .ql-l{fill:#f6941e;stroke:#f6941e;stroke-width:6;stroke-linejoin:round}
.ql-logo .ql-dot{fill:#f6941e;transform-box:fill-box;transform-origin:center bottom}
.logo:hover .ql-dot{animation:qlBounce .7s var(--ease)}
@keyframes qlBounce{0%{transform:none}30%{transform:translateY(-38%) scale(1.05,.95)}55%{transform:translateY(0) scale(1.12,.86)}75%{transform:translateY(-10%)}100%{transform:none}}
.site-header.scrolled .logo{transform:scale(.92)}
.drawer-head .ql-logo{height:28px}
.site-footer .ql-logo{height:38px}
@media (max-width:600px){.ql-logo{height:28px}}

/* Huy hiệu tải ứng dụng: dùng ảnh huy hiệu chính thức nếu có trong assets/img/, nếu chưa có thì hiện nút dự phòng cùng kiểu */
.badge{display:inline-flex;align-items:center;height:52px;border-radius:9px;background:#000;border:1.5px solid #a6a6a6;color:#fff;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s;position:relative;z-index:1}
.badge:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,0,0,.3)}
.badge img{height:100%;width:auto;display:block}
.badge:has(img){height:52px;border-radius:9px}
.badge.web{height:52px}
.badge img + .bf{display:none}
.badge .bf{display:flex;align-items:center;gap:10px;padding:0 16px 0 12px;min-width:160px}
.badge .i{width:28px;height:28px;display:grid;place-items:center;flex:none}
.badge .i svg{width:26px;height:26px}
.badge small{display:block;font-size:10px;letter-spacing:.2px;line-height:1.1;opacity:.9}
.badge b{display:block;font-size:19px;font-weight:600;line-height:1.1;letter-spacing:-.2px}
.badge:has(img){border:0;background:transparent}

/* =========================================================
   CẤP ĐỘ ROYALTY – đồng bộ màu với app (Basic/Silver/Gold/Diamond)
   ========================================================= */
html[data-tier="basic"]  { --tier-ink:#9E0019; }
html[data-tier="bronze"] { --tier-ink:#6B3A14; }
html[data-tier="silver"] { --tier-ink:#2D4053; }
html[data-tier="gold"]   { --tier-ink:#75400A; }
html[data-tier="diamond"]{ --tier-ink:#000000; }
html[data-tier] .btn-red{background:linear-gradient(135deg,var(--b1),var(--b2))}
html[data-tier] .btn-red:hover{background:linear-gradient(135deg,var(--b1),var(--red-2));box-shadow:0 8px 20px color-mix(in srgb,var(--red) 40%,transparent)}
html[data-tier] .bg-red,html[data-tier] .phero.bg-blue,html[data-tier] .phero.bg-gold,html[data-tier] .phero.bg-red{background:radial-gradient(circle at 78% 30%,rgba(255,255,255,.22),transparent 45%),var(--hero)}
html[data-tier] .t-mega-tier{background:var(--hero)}
html[data-tier] .appband{background:var(--hero)}
html[data-tier] .summary .sh.t-mega{background:var(--hero)}
html[data-tier] .nb.sp{background:radial-gradient(circle at 35% 30%,#fff7,var(--red) 55%,var(--red-2))}
html[data-tier] .n.on{background:var(--red);border-color:var(--red)}
html[data-tier] .totop{background:var(--red)}
body,.site-header,.btn,.nav-i > a::after{transition-property:background,color,box-shadow,transform}
.tier-flash{animation:tierFlash .8s var(--ease)}
@keyframes tierFlash{0%{filter:brightness(1.4) saturate(1.3)}100%{filter:none}}

/* Nút chọn cấp trên header */
.tier-chip{position:relative;display:flex;align-items:center;gap:7px;padding:5px 10px 5px 5px;border:1px solid color-mix(in srgb,var(--red) 25%,transparent);border-radius:14px;background:#fff;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.06);font:inherit}
.tier-chip .ti{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--red-soft);color:var(--red);font-size:16px;font-weight:900}
.tier-chip .ti.rank-icon{background:transparent;border-radius:0}
.tier-chip .ti img{display:block;width:100%;height:100%;object-fit:contain}
.tier-chip small{display:block;font-size:9px;color:var(--muted);line-height:1}
.tier-chip strong{display:block;font-size:13px;color:var(--red);line-height:1.2}
.tier-chip em{font-style:normal;font-size:11px;font-weight:800;color:var(--red-2);margin-left:2px}
.tier-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;min-width:250px;opacity:0;visibility:hidden;transform:translateY(8px);transition:.22s var(--ease);z-index:120}
.tier-chip.open .tier-menu{opacity:1;visibility:visible;transform:none}
.tier-menu button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:9px 10px;border-radius:10px;cursor:pointer;text-align:left;font:inherit}
.tier-menu button:hover{background:var(--bg)}
.tier-menu button.on{background:var(--red-soft)}
.tier-menu .sw{width:28px;height:28px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;font-weight:900}
.tier-menu .sw.rank-icon{width:34px;height:34px;border-radius:0;background:transparent!important}
.tier-menu .sw.rank-icon img{display:block;width:100%;height:100%;object-fit:contain}
.tier-menu b{display:block;font-size:14px}
.tier-menu small{display:block;font-size:11px;color:var(--muted)}
.tier-menu .mx{margin-left:auto;font-size:12px;font-weight:800;color:var(--ink-2)}
.wallet-chip{display:flex;align-items:center;gap:6px;padding:0 12px;height:40px;border-radius:999px;background:var(--red-soft);color:var(--red-2);font-weight:800;font-size:13px;white-space:nowrap;transition:transform .2s var(--ease)}
.wallet-chip:hover{transform:translateY(-2px)}
.wallet-chip svg{width:18px;height:18px}
@media (max-width:1280px){.wallet-chip span{display:none}.wallet-chip{padding:0;width:40px;justify-content:center}}
@media (max-width:1100px){.tier-chip small,.tier-chip em{display:none}.tier-chip{padding:4px}.tier-chip strong{display:none}}

/* Logo sản phẩm (bóng) */
.plogo{display:block;flex:none;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18));transition:transform .4s var(--ease)}
.gcard:hover .gname .plogo{transform:rotate(-12deg) scale(1.08)}
.gcard .gname .gi{background:none!important;width:auto;height:auto}
.drop .plogo{filter:none}

/* ---------- Nút tính năng trên màn chọn số ---------- */
.feat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:4px}
.fbtn{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer;text-align:left;font:inherit;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s;position:relative;overflow:hidden}
.fbtn:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(13,29,51,.1)}
.fbtn:active{transform:scale(.97)}
.fbtn .fi{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none}
.fbtn b{display:block;font-size:14px;line-height:1.2}
.fbtn small{display:block;font-size:11.5px;color:var(--muted);line-height:1.3;margin-top:2px}
.fbtn.fav .fi{background:#ffe4ea;color:#e11d48}.fbtn.fav:hover{border-color:#fb7185}
.fbtn.rnd .fi{background:var(--blue-soft)}.fbtn.rnd:hover{border-color:var(--blue)}
.fbtn.tt{background:linear-gradient(135deg,#fffbeb,#fff);border-color:#f5d06f}
.fbtn.tt .fi{background:linear-gradient(135deg,#ffd54a,#e8a300);box-shadow:0 4px 10px rgba(232,163,0,.35)}
.fbtn.tt::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,215,90,.45) 50%,transparent 65%);transform:translateX(-120%);animation:shine 3.4s infinite}
.fbtn.tt:hover{border-color:#e8a300}
.board.pop-in{animation:popIn .55s var(--ease)}
@keyframes popIn{0%{transform:scale(.94);box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 50%,transparent)}60%{transform:scale(1.02);box-shadow:0 0 0 10px transparent}100%{transform:none}}
@media (max-width:900px){.feat-row{grid-template-columns:1fr}}

/* ---------- Vương miện trên quả bóng số Thần Tài ---------- */
.n.crown,.nb.crown{position:relative;overflow:visible;box-shadow:0 0 0 2px #ffd54a,0 4px 12px rgba(232,163,0,.45)!important}
.n.crown.on{background:linear-gradient(145deg,#ffcf3a,#e59400)!important;border-color:#e59400!important;color:#5a3300!important}
.nb.crown{background:radial-gradient(circle at 35% 30%,#fff6c9,#ffd54a 55%,#e59400)!important;color:#5a3300!important}
.n.crown::before,.nb.crown::before{content:"";position:absolute;left:50%;top:-11px;width:18px;height:13px;transform:translateX(-50%);z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 17'%3E%3Cpath d='M2 15h20l1.2-11-6.4 4.6L12 1 7.2 8.6.8 4z' fill='%23ffc61a' stroke='%23b86e00' stroke-width='1.3' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='1.8' r='1.6' fill='%23ff3b3b'/%3E%3Ccircle cx='1.2' cy='4.3' r='1.3' fill='%23ffe27a'/%3E%3Ccircle cx='22.8' cy='4.3' r='1.3' fill='%23ffe27a'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:crownDrop .5s var(--ease) both}
@keyframes crownDrop{0%{opacity:0;transform:translate(-50%,-10px) rotate(-20deg)}70%{transform:translate(-50%,1px) rotate(6deg)}100%{opacity:1;transform:translate(-50%,0)}}
.picked{padding-top:18px}
.citem .lines .line{padding-top:6px}
.crown-tag{display:inline-block;font-size:10.5px;background:#fff4c2;color:#8a5a00;border-radius:999px;padding:1px 8px;margin-left:4px;letter-spacing:0}
.digits.crowned .dv{background:linear-gradient(145deg,#e8a300,#8a5a00);box-shadow:0 0 0 2px #ffd54a}
.gh-card{position:relative}
.gh-logo{position:absolute;right:16px;top:-30px;animation:bob 5s ease-in-out infinite}
@media (max-width:900px){.gh-logo{top:12px;right:12px;transform:scale(.7)}}

/* ---------- Số may mắn hôm nay ---------- */
.lucky{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center;border-radius:24px;padding:34px 36px;color:#fff;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.2),transparent 40%),var(--hero,linear-gradient(135deg,#a60000,#ef1010 56%,#ffcf45));position:relative;overflow:hidden;box-shadow:0 18px 40px color-mix(in srgb,var(--red) 30%,transparent)}
.lucky::after{content:"🍀";position:absolute;right:-10px;bottom:-24px;font-size:140px;opacity:.12;transform:rotate(-15deg)}
.lk-kicker{font-size:11px;font-weight:900;letter-spacing:.8px;color:#ffe8a2}
.lucky h2{font-size:32px;letter-spacing:-.6px;margin:4px 0}
.lk-meta{opacity:.9;font-weight:600}
.lk-form{display:grid;gap:12px;margin-top:18px}
.lk-form label{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}
.lk-form .input{width:110px;padding:9px 12px;border:0}
.lk-form .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#fff}
.lk-form .chip.on{background:#fff;color:var(--red-2);border-color:#fff}
.lk-balls{display:flex;gap:10px;flex-wrap:wrap;min-height:64px;padding-top:12px}
.lk-ball{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900;color:var(--ink);background:radial-gradient(circle at 35% 30%,#fff,#f1f1f1 55%,#cfd3da);box-shadow:inset -4px -6px 10px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.25);animation:lkIn .6s var(--ease) both;font-variant-numeric:tabular-nums}
.lk-ball.nb{width:56px;height:56px;font-size:20px}
@keyframes lkIn{from{opacity:0;transform:translateY(-30px) scale(.6) rotate(-120deg)}}
.lk-note{font-size:13px;opacity:.9;margin:14px 0 16px}
@media (max-width:900px){.lucky{grid-template-columns:1fr;padding:26px}.lk-ball,.lk-ball.nb{width:46px;height:46px;font-size:17px}}
.env-card{display:flex;align-items:center;gap:14px;margin-top:22px;padding:16px 18px;border-radius:16px;background:linear-gradient(135deg,#fff4d6,#ffe4e6);border:1.5px solid #f5c26b;text-align:left;animation:fadeUp .5s .6s var(--ease) both;transition:transform .2s}
.env-card:hover{transform:translateY(-3px)}
.env-card .env-ic{font-size:40px;animation:envShake 1.6s ease-in-out infinite}
.env-card b{display:block;font-size:16px}.env-card small{color:var(--ink-2)}
.env-card .btn{margin-left:auto}
@keyframes envShake{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-12deg)}85%{transform:rotate(10deg)}92%{transform:rotate(-5deg)}}
.rcard h3 .plogo{margin-right:2px}
.citem .gi .plogo,.tk-h .gi .plogo{width:100%;height:100%}
.srow-card .gi .plogo{width:48px;height:48px}
.lk-form .input{color:var(--ink);background:#fff}
@media (max-width:1560px){.wallet-chip span{display:none}.wallet-chip{padding:0;width:40px;justify-content:center}}
@media (max-width:1440px){.user-chip{font-size:0;gap:0;padding:4px}.user-chip i{font-size:13px}.tier-chip small{display:none}}
@media (max-width:1280px){.nav-i > a,.nav-i > button{padding:0 9px}}
@media (max-width:1500px){.nav-i > a,.nav-i > button{padding:0 9px;font-size:14px}.hbar{gap:12px}.tier-chip strong{display:none}.tier-chip{padding:4px 8px 4px 4px}.nav-hot > a{padding-right:20px!important}}
@media (max-width:1300px){.nav,.hright .auth-btns{display:none!important}.burger{display:block}}

/* Logo Vietlott SMS (khôi phục) – chấm tròn đổi màu theo cấp Royalty */
.logo .dot{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),var(--red) 55%,var(--red-2))}
.logo-light,.site-footer .logo{color:#fff}
.site-footer .logo b{color:var(--pink)}

/* Logo sản phẩm: dùng ảnh trong assets/img/products/ nếu có, nếu không hiện logo bóng dự phòng */
.plw{display:inline-grid;place-items:center;flex:none;position:relative}
.plw > img.plogo{width:100%;height:100%;object-fit:contain}
.plw > svg.plogo{display:none;width:100%;height:100%}
.plw.nf > img{display:none}
.plw.nf > svg.plogo{display:block}
.lk-prof{font-size:14px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:12px;padding:9px 12px}
.lk-prof a{color:#fff;font-weight:800;text-decoration:underline}
.lk-ball.sp{background:radial-gradient(circle at 35% 30%,#8ab4ff,var(--blue) 55%,#002a70);color:#fff}
/* Hộp mua nhanh */
.qb-bg{position:fixed;inset:0;z-index:320;background:rgba(13,29,51,.55);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .25s}
.qb-bg.on{opacity:1}
.qb{position:relative;background:#fff;border-radius:22px;padding:24px;width:min(440px,100%);transform:translateY(24px) scale(.97);transition:transform .35s var(--ease);box-shadow:var(--shadow-lg)}
.qb-bg.on .qb{transform:none}
.qb-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:0;background:var(--bg);cursor:pointer}
.qb-h{display:flex;gap:12px;align-items:center;margin-bottom:14px}
.qb-h small{display:block;font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.qb-h b{font-size:18px}
.qb-n{margin-bottom:6px}
.qb-n .nb{width:44px;height:44px;font-size:16px;animation:pop .45s var(--ease) both}
.qb-a{display:grid;grid-template-columns:1fr 1.3fr;gap:10px;margin-top:14px}

/* Banner trang chủ: nền theo cấp Royalty + logo sản phẩm làm ảnh nền */
html[data-tier] .hero .slide .bg{background:radial-gradient(circle at 72% 45%,rgba(255,255,255,.22),transparent 45%),var(--hero)!important}
.slide-logo{position:absolute;right:6%;top:50%;width:min(360px,34vw);aspect-ratio:1;transform:translateY(-50%) scale(.85) rotate(-8deg);opacity:0;z-index:1;pointer-events:none;transition:opacity .8s,transform 1.1s var(--ease);filter:drop-shadow(0 24px 40px rgba(0,0,0,.35))}
.slide.on .slide-logo{opacity:.95;transform:translateY(-50%) scale(1) rotate(0)}
.slide-logo .plw{width:100%!important;height:100%!important;animation:bob 6s ease-in-out 1.2s infinite}
.slide-logo::after{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 62%);z-index:-1}
.hero .art{z-index:2}
.hero .art .ball{transform-origin:center}
.hero .slide .art .ball:nth-child(n+4){display:none}
@media (max-width:900px){.slide-logo{width:190px;right:-30px;top:auto;bottom:40px;transform:none;opacity:.35}.slide.on .slide-logo{opacity:.35;transform:none}}
.hero .slide .art .ball:nth-child(n+3){display:none}
.hero .slide .art .ball:nth-child(1){left:0!important;top:18%!important;width:110px!important;height:110px!important;font-size:38px!important}
.hero .slide .art .ball:nth-child(2){left:14%!important;top:64%!important;width:74px!important;height:74px!important;font-size:24px!important}
.mbar .btn-line{margin-left:auto;padding:10px 14px}
.mbar .btn-red{margin-left:0}
#btnBuy{box-shadow:0 10px 24px color-mix(in srgb,var(--red) 35%,transparent)}
/* Dãy số dành cho bạn trên banner đầu tiên */
.hero-lucky{margin:4px 0 22px}
.hero-lucky small{display:block;font-size:12px;font-weight:800;letter-spacing:.6px;opacity:.92;margin-bottom:10px}
.hl-balls{display:flex;gap:9px;flex-wrap:wrap}
.hl-ball{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:18px;font-weight:900;color:var(--ink);background:radial-gradient(circle at 35% 30%,#fff,#f1f1f1 55%,#cfd3da);box-shadow:inset -4px -5px 8px rgba(0,0,0,.12),0 8px 16px rgba(0,0,0,.25);animation:lkIn .6s var(--ease) both}
.hl-ball.sp{background:radial-gradient(circle at 35% 30%,#8ab4ff,var(--blue) 55%,#002a70);color:#fff}
@media (max-width:900px){.hl-ball{width:40px;height:40px;font-size:15px}}

/* ---------- Tự mở bao lì xì sau khi mua vé ---------- */
.ao-bg{position:fixed;inset:0;z-index:420;background:rgba(10,8,30,.84);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .3s;overflow:auto}
.ao-bg.on{opacity:1}
.ao-stage{position:relative;width:min(760px,100%);min-height:440px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#fff;text-align:center}
.ao-rays{position:absolute;left:50%;top:44%;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;background:repeating-conic-gradient(rgba(255,215,90,.32) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 25%,transparent 68%);mask:radial-gradient(circle,#000 25%,transparent 68%);opacity:0;transform:scale(.3);transition:1s var(--ease);pointer-events:none}
.ao-stage.reveal .ao-rays{opacity:1;transform:scale(1);animation:spin 16s linear infinite}
.ao-env{width:160px;height:206px;border-radius:16px;background:linear-gradient(180deg,#e11d2a,#9f0b15);position:absolute;top:50%;left:50%;margin:-103px 0 0 -80px;box-shadow:0 20px 40px rgba(0,0,0,.4);animation:aoShake .35s ease-in-out infinite}
.ao-env::before{content:"";position:absolute;left:0;right:0;top:0;height:76px;background:#c8141f;border-radius:16px 16px 50% 50%/16px 16px 40px 40px;box-shadow:0 4px 0 rgba(0,0,0,.18)}
.ao-env::after{content:"福";position:absolute;left:50%;top:54px;transform:translateX(-50%);width:52px;height:52px;border-radius:50%;background:#ffd24a;color:#9f0b15;font-size:26px;font-weight:900;display:grid;place-items:center}
@keyframes aoShake{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-6deg) scale(1.03)}75%{transform:rotate(6deg) scale(1.03)}}
.ao-stage.reveal .ao-env{animation:aoBurst .5s var(--ease) forwards}
@keyframes aoBurst{60%{transform:scale(1.25);opacity:1}100%{transform:scale(.2) translateY(120px);opacity:0}}
.ao-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;position:relative;z-index:2}
.ao-card{width:200px;background:#fff;color:var(--ink);border-radius:20px;padding:16px;position:relative;opacity:0;transform:scale(.4) rotateY(180deg);transition:.7s var(--ease)}
.ao-stage.reveal .ao-card{opacity:1;transform:none}
.ao-art{height:120px;border-radius:14px;display:grid;place-items:center;font-size:66px;margin-bottom:10px}
.ao-card b{display:block;font-size:16px}.ao-card small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.ao-new{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(90deg,#f59e0b,#ef4444);color:#fff;font-weight:900;font-size:11px;padding:4px 12px;border-radius:999px;white-space:nowrap}
.ao-new.dup{background:var(--ink)}
.ao-title,.ao-actions{position:relative;z-index:2;opacity:0;transform:translateY(10px);transition:.5s .9s var(--ease)}
.ao-stage.reveal .ao-title,.ao-stage.reveal .ao-actions{opacity:1;transform:none}
.ao-title{font-weight:800;font-size:17px}
.ao-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.ao-x{position:absolute;top:-6px;right:0;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:18px;cursor:pointer;z-index:3}

/* =========================================================
   ĐỒNG BỘ GIAO DIỆN APP VIETLOTT INTERNET
   ========================================================= */
:root{--bg:#FAF8F5;--ink:#0A1118;--app-red:#E50929}
html[data-tier="basic"] .btn-red{background:var(--red)}
html[data-tier="basic"] .btn-red:hover{background:var(--red-2)}
/* Logo thương hiệu: ảnh gốc trong assets/img/brand/, không có thì hiện chữ dự phòng */
.brand{display:inline-flex;align-items:center;line-height:0}
.brand-img{height:46px;width:auto;display:block}
.brand .brand-txt{display:none;align-items:center;gap:8px;line-height:1}
.brand.nf .brand-img{display:none}
.brand.nf .brand-txt{display:inline-flex}
.brand-txt .bt-word{display:flex;flex-direction:column;align-items:flex-start}
.brand-txt .bt-word b{font-size:24px;font-weight:900;font-style:italic;color:var(--app-red);letter-spacing:-.6px;line-height:1}
.brand-txt .bt-word small{margin-top:3px;font-size:9px;font-weight:800;letter-spacing:3px;color:#fff;background:var(--app-red);border-radius:999px;padding:2px 10px}
.brand-txt .dot{width:34px;height:34px}
.site-footer .brand-txt .bt-word b{color:#fff}
.site-footer .brand-img{filter:brightness(0) invert(1)}
.site-footer .brand.has-white .brand-img{filter:none}
/* Linh vật Thần Tài: ảnh gốc assets/img/brand/than-tai-opt.webp */
.mascot{display:inline-grid;place-items:center;line-height:0}
.mascot img{width:100%;height:100%;object-fit:contain;display:block}
.mascot .mfb{display:none}
.mascot.nf img{display:none}
.mascot.nf .mfb{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle,#fff4d0 0%,#ffe08a 45%,transparent 70%);line-height:1}
/* Nút icon trên header (hỗ trợ, giỏ) */
.hicon{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--ink);transition:.2s}
.hicon:hover{border-color:var(--ink)}
.hicon svg{width:20px;height:20px}

/* ---------- Trang chủ kiểu app ---------- */
.apphome{padding:28px 0 8px}
.welcome{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center;background:#fff;border-radius:24px;padding:36px 40px;box-shadow:var(--shadow)}
.welcome h1{font-size:44px;line-height:1.12;letter-spacing:-1px;color:var(--ink)}
.welcome h1 em{font-style:normal;color:var(--app-red)}
.welcome p{color:var(--ink-2);margin:10px 0 20px}
.wl-card{background:var(--red-soft);border:1px solid color-mix(in srgb,var(--red) 18%,transparent);border-radius:18px;padding:18px 20px;max-width:520px}
.wl-card b{display:block;font-size:17px;margin-bottom:12px}
.wl-act{display:flex;align-items:center;gap:14px}
.wl-act .btn{flex:1}
.wl-reg{display:flex;align-items:center;gap:8px;color:var(--red);font-weight:700}
.wl-reg .fp{width:40px;height:40px;border-radius:50%;background:#fff;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink)}
.wl-r{display:grid;place-items:center}
.wl-r .mascot{animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.15))}
.popular{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pop{position:relative;background:#fff;border-radius:20px;padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;transition:transform .25s var(--ease),box-shadow .25s}
.pop:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.pop-logo{height:130px;display:grid;place-items:center}
.pop-n{display:flex;align-items:center;justify-content:space-between}
.pop-n i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900}
.pop-cd{position:absolute;top:14px;left:14px;font-size:12px;color:#b45309;font-weight:700}
.pop-cd b{font-variant-numeric:tabular-nums}
.hot{position:absolute;top:12px;right:12px;background:var(--red);color:#fff;font-size:11px;font-weight:900;border-radius:6px;padding:3px 8px}
.dash .hello{font-size:30px;letter-spacing:-.6px;margin-bottom:14px}
.bal{display:flex;align-items:center;gap:20px;background:var(--red-soft);border-radius:18px;padding:20px 24px}
.bal-l{flex:1}
.bal-l small{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:14px}
.bal-l small button{border:0;background:none;cursor:pointer;font-size:15px}
.bal-l b{display:block;font-size:34px;font-weight:900;color:var(--red);letter-spacing:-.8px;font-variant-numeric:tabular-nums}
.bal-sub{font-size:13px;color:var(--ink-2)}
.bal-a{display:flex;gap:18px;border-left:1px solid color-mix(in srgb,var(--red) 20%,transparent);padding-left:22px}
.ba{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:14px;font-weight:600}
.bi{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900;background:#fff;color:var(--red);transition:transform .2s}
.bi.plus{background:var(--red);color:#fff}
.ba:hover .bi{transform:translateY(-3px)}
.pending{display:flex;justify-content:space-between;align-items:center;margin-top:12px;background:#eef0f4;border-radius:14px;padding:14px 18px;font-size:15px}
.pending i{font-style:normal;font-size:20px;color:var(--muted)}
.spv{display:grid;gap:14px}
.spv-top{display:grid;grid-template-columns:130px 1fr auto;gap:18px;align-items:center;background:#fff;border:2px solid var(--red);border-radius:20px;padding:16px 22px;box-shadow:var(--shadow)}
.spv-info small{display:block;color:var(--muted);font-size:13px}
.spv-info b{display:block;font-size:30px;color:var(--red);font-weight:900;letter-spacing:-.6px}
.spv-info span{display:block;font-size:14px;font-weight:600}
.spv-info em{font-style:normal;font-size:13px;color:var(--red)}
.spv-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.spv-c{background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform .25s var(--ease)}
.spv-c:hover{transform:translateY(-4px)}
.spv-logo{display:grid;place-items:center}
.spv-t{font-size:13px;color:var(--ink-2)}.spv-t b{color:var(--red)}
.spv-btn{width:100%;background:var(--red-soft);color:var(--red);font-weight:800;border-radius:10px;padding:8px}
.spv-keno{display:flex;align-items:center;gap:16px;background:#fff;border:2px solid #f97316;border-radius:18px;padding:12px 18px;box-shadow:var(--shadow)}
.spv-keno b{display:block}.spv-keno small{color:var(--muted)}
.spv-kbtn{margin-left:auto;background:#f97316;color:#fff}
.news{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.nw{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow);transition:transform .25s var(--ease)}
.nw:hover{transform:translateY(-4px)}
.nw-img{height:130px;display:grid;place-items:center;font-size:52px}
.nw-b{display:block;padding:12px 14px}
.nw-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--red);background:var(--red-soft);border-radius:6px;padding:2px 8px;margin-bottom:6px}
.nw b{display:block;font-size:15px}.nw small{color:var(--muted)}
@media (max-width:1100px){.popular,.spv-grid,.news{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.welcome{grid-template-columns:1fr;padding:24px}.welcome h1{font-size:32px}.wl-r{display:none}.bal{flex-direction:column;align-items:stretch}.bal-a{border:0;padding:0;justify-content:flex-start}.spv-top{grid-template-columns:80px 1fr}.spv-top .btn{grid-column:1/-1}.news{grid-template-columns:1fr}}

/* ---------- Mua vé kiểu app ---------- */
.buy-h{font-size:32px;letter-spacing:-.6px;margin:6px 0 10px}
.prows{display:grid;gap:12px}
.prow{display:grid;grid-template-columns:200px 1fr 36px;align-items:center;min-height:118px;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:transform .25s var(--ease),box-shadow .25s}
.prow:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.12)}
.prow .pr-logo{height:100%;display:grid;place-items:center;border-right:1px solid rgba(0,0,0,.08)}
.pr-body{padding:14px 22px;display:flex;flex-direction:column;gap:4px;position:relative}
.pr-body small{font-size:14px;opacity:.85}
.pr-amt{font-size:28px;font-weight:900;letter-spacing:-.5px;font-variant-numeric:tabular-nums}
.pr-cd{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.pr-go{font-size:26px;opacity:.6}
.pr-badge{position:absolute;right:0;top:10px;background:#fff;color:var(--red);border:1.5px solid var(--red);border-radius:8px;font-size:13px;font-weight:800;padding:2px 8px}
.flip{display:flex;align-items:center;gap:4px;margin-top:2px}
.flip i{font-style:normal;width:34px;height:44px;border-radius:6px;background:#fff;color:#111;font-size:28px;font-weight:800;display:grid;place-items:center;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 2px 4px rgba(0,0,0,.12);font-variant-numeric:tabular-nums}
.flip i.fl{animation:flip .35s var(--ease)}
.flip em{font-style:normal;font-size:26px;font-weight:900}
.r-yellow{background:linear-gradient(90deg,#fff1a8,#ffd43b 55%,#f7b500);color:#3a2a00}
.r-peach{background:linear-gradient(90deg,#fff5ec,#ffe1cc);color:#3a1f10}
.r-red{background:linear-gradient(90deg,var(--red-2),var(--red) 60%,var(--red-2));color:#fff}
.r-red .pr-amt{color:#ffd76a}
.r-light{background:linear-gradient(90deg,#f7f8fb,#eef1f6);color:var(--ink)}
.r-light .pr-amt{color:#17305f}
.frow{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);margin-bottom:10px}
.fr-a{display:flex;gap:8px;align-items:center}
@media (max-width:700px){.prow{grid-template-columns:110px 1fr 24px;min-height:100px}.pr-amt{font-size:20px}.flip i{width:26px;height:34px;font-size:20px}.pr-body{padding:12px}.frow{grid-template-columns:48px 1fr}.fr-a{grid-column:1/-1}}

/* ===== Màn chọn số theo app ===== */
.gp-head{background:var(--hero);color:#fff;padding:18px 0 22px;position:relative;overflow:hidden}
.gp-head.gp-pink{background:linear-gradient(135deg,#c2185b,#e84a8a 60%,#ff7aa8)}
html[data-tier="diamond"] .gp-head.gp-pink{background:var(--hero)}
.gp-head .crumbs{display:flex;gap:10px;font-size:13px;opacity:.9;margin-bottom:12px}
.gp-head .crumbs a{color:#fff;font-weight:700}
.gp-head .crumbs span{opacity:.75}
.gp-top{display:grid;grid-template-columns:auto 1fr auto auto;gap:20px;align-items:center}
.gp-logo{background:#fff;border-radius:18px;padding:6px;display:grid;place-items:center;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.gp-t h1{font-size:28px;line-height:1.1;margin:0;color:#fff}
.gp-t small{display:block;opacity:.85;font-size:13px;margin-top:4px}
.gp-amt small,.gp-cd>small{display:block;font-size:12px;opacity:.85;margin-bottom:2px}
.gp-amt b{font-size:28px;font-weight:900;color:#ffe27a;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.gp-amt b small{font-size:16px}
.gp-cd .cd{margin:0}
.gp-cd .cd div{background:rgba(255,255,255,.18)}
.gp-cd .cd span{color:rgba(255,255,255,.8)}
.gp-res{margin-top:16px;background:rgba(0,0,0,.16);border-radius:16px;padding:12px 14px}
.gr-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;margin-bottom:10px}
.gr-h small{opacity:.8}
.gr-h a{margin-left:auto;color:#fff;font-weight:700}
.gr-tags{display:flex;gap:6px;flex-wrap:wrap}
.kt{padding:3px 10px;border-radius:999px;background:rgba(255,255,255,.16);font-size:12px;font-weight:600}
.kt.on{background:#ffd54a;color:#7a1a00;font-weight:800}
.gr-balls{display:grid;grid-template-columns:repeat(20,1fr);gap:6px}
.gr-balls span{aspect-ratio:1;border-radius:50%;background:#fff;color:var(--red-2);display:grid;place-items:center;font-weight:800;font-size:13px;animation:boardIn .4s var(--ease) both}
@media (max-width:900px){.gp-top{grid-template-columns:auto 1fr}.gp-amt,.gp-cd{grid-column:1/-1}.gr-balls{grid-template-columns:repeat(10,1fr)}}
.icon-btn.heart{color:#e11d48}
.icon-btn.heart.on{background:#ffe4ea}
.fbtn .fi .mascot{width:40px!important;height:40px!important}
.fbtn.tt .fi{background:#fff3cf;overflow:hidden}
/* dãy số Max 3D – bóng hồng như app */
body[data-game="max3d"] .digit .dv{background:linear-gradient(145deg,#ff6fa3,#d81b60);border-radius:50%;width:62px;height:62px;font-size:32px;box-shadow:0 6px 14px rgba(216,27,96,.3)}
/* Thanh Tạm tính / Thanh toán vé cố định (cả desktop) */
.mbar.app{display:block;position:sticky;bottom:0;z-index:95;background:#fff;box-shadow:0 -6px 20px rgba(0,0,0,.08);padding:10px 0;transform:none}
.mbar.app .wrap{display:flex;align-items:center;gap:12px}
.mbar.app b{font-size:20px;display:block;color:var(--red)}
.mbar.app small{color:var(--muted);font-size:12px}
.mbar.app .btn-line{margin-left:auto}
.mbar.app .btn-red{min-width:180px}
@media (max-width:900px){.mbar.app{position:fixed;left:0;right:0}}
.gp-cd .cd{min-width:240px}
.summary .sh{background:var(--hero)!important;color:#fff}
body[data-game="max3d"] .digits.crowned .dv{background:linear-gradient(145deg,#ffcf4a,#e8a300);box-shadow:0 0 0 3px #ffe9a8}
.gp-amt b{white-space:nowrap}
/* ===== Kết quả theo app ===== */
.ltabs{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;border:0!important;margin-bottom:16px;padding:4px 2px}
.ltabs::-webkit-scrollbar{display:none}
.ltabs button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:96px;padding:10px 8px!important;border-radius:16px;border:1.5px solid var(--line)!important;background:#fff;font-size:13px;white-space:nowrap}
.ltabs button::after{display:none!important}
.ltabs button.on{border-color:var(--red)!important;background:var(--red-soft);color:var(--red)}
.dcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.dcard{border:1px solid var(--line);border-radius:16px;padding:12px 14px;background:#fff}
.dc-h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px}
.dc-h small{color:var(--muted)}
.dc-j{margin-left:auto;font-size:12px;font-weight:700;color:var(--red)}
.dcard .nums .nb{width:30px;height:30px;font-size:12px}
.rtags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.rtags span{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--bg);color:var(--ink-2)}
.rtags span.on{background:var(--red);color:#fff}
.rtags.w span{background:rgba(255,255,255,.18);color:#fff}
.rtags.w span.on{background:#ffd54a;color:#7a1a00}
.play>div,.play>aside{min-width:0}
@media (max-width:700px){.toc{max-width:100%;overflow-x:auto}.big-card{max-width:100%}}
.content>*,.two-cards>*{min-width:0}
#latest .nums{flex-wrap:wrap}
.user-chip i{background:var(--red)!important;color:#fff}

/* =========================================================
   MÀN CHỌN SỐ THEO APP (dãy số dạng bóng)
   ========================================================= */
.gp2{padding:18px 0 8px}
.gp2-wrap{max-width:760px}
.gp2-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gp2-top .back{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:30px;line-height:1;color:var(--ink);margin-left:-8px}
.gp2-top h1{font-size:26px;margin:0}
.gp2-top .sp{flex:1}
.gp2-top .ic{width:40px;height:40px;border-radius:50%;background:#f1efec;display:grid;place-items:center;color:var(--ink)}
.gp2-top .ic svg{width:20px;height:20px}
.gp2-logo{display:inline-flex}
.gp2-sel{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;background:#fff;border-radius:16px;padding:6px;box-shadow:var(--shadow)}
.gp2-sel label{flex:1;display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:12px;font-size:14px;color:var(--muted);min-width:0}
.gp2-sel label+label{border-left:1px solid var(--line)}
.gp2-sel select{border:0;background:none;font:inherit;font-weight:800;color:#0b5cd6;cursor:pointer;padding:4px 2px;min-width:0;max-width:100%}
.gp2-recent{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:6px 12px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;color:var(--red)}
.gp2-recent i svg{width:16px;height:16px;display:block}
.gp2-recent.on{background:var(--red-soft);border-color:var(--red)}
.gp2-demo{background:var(--red-soft);color:var(--red-2);font-size:13px;font-weight:600;padding:9px 14px;border-radius:12px;margin-top:10px}
.gp2-card{background:#fff;border:1.5px dashed #e3dfdb;border-radius:18px;padding:10px 12px;margin-top:12px}
.gp2-hint{text-align:center;font-size:13px;color:var(--muted);margin:8px 0 2px}
.gp2-hint b{color:#0b5cd6}
.row2{display:flex;align-items:center;gap:8px;padding:9px 2px;border-bottom:1px solid #f2efec;transition:opacity .25s,transform .25s}
.row2:last-child{border-bottom:0}
.row2.removing{opacity:0;transform:translateX(30px)}
.row2.flash{animation:popIn .5s var(--ease)}
.row2 .rl{display:flex;align-items:center;gap:2px;font-weight:700;color:var(--muted);width:40px;flex:none}
.row2 .ed{border:0;background:none;padding:2px;color:#98a2b3;cursor:pointer}
.row2 .ed svg{width:15px;height:15px;display:block}
.row2 .rb{flex:1;display:flex;flex-wrap:wrap;gap:6px 6px;cursor:pointer;padding-top:6px;min-width:0}
.row2 .hrt,.row2 .del{border:0;background:none;color:#6b7280;cursor:pointer;padding:4px;flex:none;border-radius:8px}
.row2 .hrt svg,.row2 .del svg{width:26px;height:26px;display:block}
.row2 .hrt:hover,.row2 .del:hover{background:#f5f3f1}
.row2 .hrt.on{color:#e11d48}.row2 .hrt.on svg path{fill:#e11d48}
.row2 .tc{width:36px;height:36px;border-radius:50%;border:0;background:#fde8d7;color:#c2410c;font-weight:800;font-size:12px;cursor:pointer;flex:none}
.row2 .stk{border:1px solid var(--line);border-radius:10px;padding:8px 6px;font:inherit;font-weight:700;font-size:13px;background:#fff;flex:none}
.row2 .stk-l{font-size:12px;font-weight:800;color:#be185d;background:#fce7f3;border-radius:999px;padding:3px 8px;flex:none}
/* Quả bóng số */
.b2{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;color:#fff;position:relative;flex:none;
  background:radial-gradient(circle at 32% 28%,#ff8a8f 0,#f0303c 38%,#c3101d 100%);box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),0 2px 5px rgba(200,17,31,.25);text-shadow:0 1px 1px rgba(0,0,0,.2)}
.b2.e{background:#fff;border:1.5px solid #dcd8d4;box-shadow:none;color:#e0a4a8;font-weight:400;font-size:20px}
.b2.sp{background:radial-gradient(circle at 32% 28%,#ffd08a 0,#f59e0b 40%,#c2410c 100%)}
.b2.e.sp{background:#fff;border-color:#f7c98b}
.b2.pk{background:radial-gradient(circle at 32% 28%,#ffa3c4 0,#ec4f8e 40%,#be185d 100%)}
.dset{display:inline-flex;gap:4px;padding:3px;border-radius:999px;background:#fff5f9}
.dset+.dset{margin-left:8px}
body[data-game="keno"] .b2{width:40px;height:40px;font-size:15px}
/* Mũ Thần Tài trên quả bóng (số do Thần Tài chọn) */
.b2.crown,.n.crown,.nb.crown,.kb.crown{overflow:visible;position:relative}
.b2.crown::before,.n.crown::before,.nb.crown::before,.kb.crown::before{content:"";position:absolute;left:50%;top:-15px;width:36px;height:22px;transform:translateX(-50%);z-index:2;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 28'%3E%3Cpath d='M1 17c3-4 8-5 13-3' fill='none' stroke='%23b8860b' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M47 17c-3-4-8-5-13-3' fill='none' stroke='%23b8860b' stroke-width='3' stroke-linecap='round'/%3E%3Cellipse cx='3' cy='17' rx='3' ry='4' fill='%23f6c343' stroke='%23a86b00'/%3E%3Cellipse cx='45' cy='17' rx='3' ry='4' fill='%23f6c343' stroke='%23a86b00'/%3E%3Cpath d='M12 20C12 8 17 3 24 3s12 5 12 17z' fill='%23d9202e' stroke='%238f1119' stroke-width='1.2'/%3E%3Cpath d='M16 10c2-3 5-4 8-4s6 1 8 4' fill='none' stroke='%23f6c343' stroke-width='1.4'/%3E%3Crect x='10' y='18' width='28' height='8' rx='3' fill='%23f6c343' stroke='%23a86b00' stroke-width='1.2'/%3E%3Ccircle cx='24' cy='12' r='3.4' fill='%2318a36a' stroke='%23f6e7a6' stroke-width='1.3'/%3E%3Ccircle cx='16' cy='22' r='1.3' fill='%23d9202e'/%3E%3Ccircle cx='32' cy='22' r='1.3' fill='%23d9202e'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:hatDrop .5s var(--ease) both}
.nb.crown::before{width:26px;height:16px;top:-11px}
.n.crown::before{width:30px;height:18px;top:-12px}
@keyframes hatDrop{0%{opacity:0;transform:translate(-50%,-12px) rotate(-18deg)}70%{transform:translate(-50%,1px) rotate(5deg)}100%{opacity:1;transform:translate(-50%,0)}}
.b2.crown,.nb.crown{box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),0 2px 5px rgba(200,17,31,.25)!important}
.nb.crown{background:radial-gradient(circle at 32% 28%,#ff8a8f 0,#f0303c 38%,#c3101d 100%)!important;color:#fff!important}
.n.crown.on{background:radial-gradient(circle at 32% 28%,#ff8a8f 0,#f0303c 38%,#c3101d 100%)!important;border-color:#c3101d!important;color:#fff!important}
.row2 .rb:has(.crown){padding-top:14px}
.lines .line:has(.crown),.nums:has(.nb.crown){padding-top:12px}
.digits.crowned .dv{background:linear-gradient(145deg,#ff6fa3,#d81b60)}
/* Thêm dãy + nút tính năng */
.gp2-add{width:100%;display:flex;align-items:center;justify-content:space-between;margin-top:12px;background:#fff;border:1px solid #cfe0f7;border-radius:14px;padding:13px 16px;font:inherit;font-weight:700;color:#0b5cd6;cursor:pointer}
.gp2-add small{color:var(--muted);font-weight:600;font-size:13px}
.gp2-add:disabled{opacity:.5;cursor:default}
.gp2-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.gp2-feat button{display:flex;align-items:center;justify-content:center;gap:8px;background:#f1efec;border:0;border-radius:14px;padding:10px 8px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.gp2-feat button:hover{background:#e9e6e2;transform:translateY(-2px)}
.gp2-feat button:active{transform:scale(.96)}
.fic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;position:relative;flex:none}
.fic.fav{background:radial-gradient(circle at 35% 30%,#ffe7a0,#f5b90d 60%,#d98e00);color:#b3261e}
.fic.fav b{font-size:14px;font-weight:900;color:#c2410c}
.fic.fav i{position:absolute;right:-6px;bottom:-2px;font-style:normal;color:#e11d48;font-size:18px;text-shadow:0 1px 0 #fff}
.fic.rnd{background:conic-gradient(from 30deg,#f97316,#ef4444,#f97316,#fbbf24,#f97316);}
.fic.rnd b{width:28px;height:28px;border-radius:50%;background:#ffe9c7;color:#c2410c;font-size:12px;font-weight:900;display:grid;place-items:center}
.fic.tt .mascot{width:40px!important;height:40px!important}
/* Sheet chọn số */
.sheet-bg{position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.45);display:flex;align-items:flex-end;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.sheet-bg.on{opacity:1;pointer-events:auto}
.sheet{width:min(640px,100%);max-height:88vh;background:#fff;border-radius:22px 22px 0 0;display:flex;flex-direction:column;transform:translateY(40px);transition:transform .3s var(--ease)}
.sheet-bg.on .sheet{transform:none}
@media (min-width:901px){.sheet-bg{align-items:center}.sheet{border-radius:22px}}
.sh-h{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.sh-h b{font-size:18px}.sh-c{color:var(--muted);font-size:14px;font-weight:600}
.sh-x{margin-left:auto;border:0;background:#f1efec;width:34px;height:34px;border-radius:50%;cursor:pointer}
.sh-b{padding:14px 18px;overflow:auto}
.sh-sel{display:flex;flex-wrap:wrap;gap:6px;padding:12px 0 12px;min-height:58px}
.sh-sel:has(.crown){padding-top:20px}
.sh-lbl{font-weight:800;font-size:14px;margin:14px 0 8px}
.sh-lbl small{color:var(--muted);font-weight:600;margin-left:6px}
.sh-f{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:8px;padding:12px 18px;border-top:1px solid var(--line)}
.dpick{display:flex;gap:14px;justify-content:center}
.dcol{display:flex;flex-direction:column;align-items:center;gap:5px}
.dcol .b2{margin-bottom:6px}
.dn{width:44px;height:30px;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;cursor:pointer}
.dn.on{background:#ec4f8e;border-color:#be185d;color:#fff}
body.noscroll{overflow:hidden}
/* Thanh dưới */
.mbar.app .mb-t{display:flex;flex-direction:column}
.mbar.app .mb-t small{font-size:12px;color:var(--muted)}
.mbar.app .mb-t small.bad{color:var(--red);font-weight:700}
.mbar.app b{font-size:24px;color:var(--red)}
.mbar.app .btn-red{min-width:200px;font-size:18px;padding:14px 20px;border-radius:14px}
.mbar.app .btn-line{border-radius:14px}
@media (max-width:600px){.mbar.app .btn-red{min-width:0;flex:1}.mbar.app .btn-line{padding:10px}.mbar.app b{font-size:20px}}
/* Keno: quay số trực tiếp */
.kl{display:grid;grid-template-columns:130px 1fr;gap:12px;background:linear-gradient(160deg,var(--red-2),var(--red) 55%,var(--red-2));color:#fff;border-radius:20px;padding:14px;margin-bottom:12px;box-shadow:0 10px 26px rgba(158,0,25,.3)}
.kl-l{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.kl-l .mascot{background:linear-gradient(#fff4e0,#ffe2b0);border-radius:18px;padding:4px}
.kl-l small{font-size:13px;opacity:.9}
.kl-new{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:20px;font-weight:900;color:#7a3b00;background:radial-gradient(circle at 35% 30%,#fff6c9,#ffd54a 55%,#e59400)}
.kl-new.bump{animation:popIn .5s var(--ease)}
.kl-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.kl-h b{font-size:24px;color:#ffd54a;letter-spacing:.5px}
.kl-h small{font-size:12px;font-weight:700;opacity:.85}
.kl-tag{margin-left:auto;font-size:11px;font-weight:700;border:1px solid rgba(255,255,255,.5);border-radius:8px;padding:2px 8px}
.kl-sub{display:flex;justify-content:space-between;font-size:13px;margin:4px 0 10px}
.kl-sub span:last-child{color:#ffd54a;font-weight:700}
.kl-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.kl-grid span{aspect-ratio:1;border-radius:50%;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.15);display:grid;place-items:center;font-weight:800;font-size:13px;position:relative}
.kl-grid span:empty::after{content:"";width:4px;height:4px;border-radius:50%;background:rgba(255,215,90,.6)}
.kl-grid span.on{background:radial-gradient(circle at 35% 30%,#fff6c9,#ffd54a 55%,#e59400);color:#7a3b00;border:0}
.kl-grid span.new{background:#fff;color:var(--red-2);box-shadow:0 0 0 3px var(--gold);animation:popIn .45s var(--ease)}
.kl-cnt{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.kl-cnt span{background:rgba(0,0,0,.2);border-radius:8px;padding:5px;text-align:center;font-size:13px}
.kl-f{grid-column:1/-1;display:flex;align-items:center;gap:10px;border-top:1px solid rgba(255,255,255,.2);padding-top:10px;font-size:13px;flex-wrap:wrap}
.kl-f button{border:0;background:rgba(255,255,255,.15);color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:18px}
.kl-f small{margin-left:auto;color:#ffd54a;font-weight:700}
.kl-recent{display:none;margin-top:10px;background:#fff;border-radius:16px;padding:6px 12px;box-shadow:var(--shadow)}
.kl-recent.on{display:block}
.kr{padding:8px 0;border-bottom:1px solid #f2efec}.kr:last-child{border:0}
.kr-h{display:flex;gap:10px;align-items:baseline;font-size:14px}.kr-h small{color:var(--muted)}.kr-h span{margin-left:auto;font-weight:700;color:var(--red);font-size:13px}
.kr-b{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kr-b i{font-style:normal;width:28px;height:28px;border-radius:50%;background:#fff3d6;color:#9a3412;display:grid;place-items:center;font-size:12px;font-weight:800}
@media (max-width:600px){.kl{grid-template-columns:1fr}.kl-l{flex-direction:row;justify-content:flex-start}.kl-l .mascot{width:56px!important;height:56px!important}.kl-grid{grid-template-columns:repeat(5,1fr)}.gp2-sel label+label{border-left:0}.b2{width:38px;height:38px;font-size:15px}.row2 .hrt svg,.row2 .del svg{width:22px;height:22px}.row2 .rl{width:32px}.gp2-feat button{flex-direction:column;font-size:13px}}
/* ===== Mua vé theo app (v2) ===== */
.buy-sub{color:var(--muted);font-size:17px;margin:-6px 0 14px}
.prow{grid-template-columns:220px 1fr 36px}
.prow .pr-logo{border-right:1px solid rgba(0,0,0,.1)}
.pr-tag{position:absolute;left:0;top:0;background:#fff;color:var(--red);font-weight:800;font-size:14px;padding:4px 14px;border-radius:0 0 14px 0;z-index:2}
.pr-lbl{font-size:15px;font-weight:800}
.pr-txt{font-size:22px;font-weight:700;color:#17305f}
.pr-fast{position:absolute;right:8px;top:12px;display:flex;align-items:center;gap:4px;background:#fff8e1;border-radius:999px;padding:4px 12px 4px 4px;color:var(--red);font-weight:800;font-size:13px;line-height:1.1}
.pr-fast i{font-style:normal;font-size:24px;filter:drop-shadow(0 1px 0 #b45309)}
.pr-fast small{display:block;font-size:10.5px;opacity:1;color:#b91c1c;font-weight:600}
.pr-hot{position:absolute;right:8px;bottom:14px;background:#fff;color:var(--red);font-weight:900;font-size:13px;border-radius:8px;padding:3px 8px}
.pr-jb{position:absolute;right:8px;top:12px;background:#ffd54a;color:#5a3300;font-weight:800;font-size:13px;border-radius:999px;padding:3px 12px}
.r-green{background:linear-gradient(90deg,#0f5a2c,#157a3b 55%,#0d4d25);color:#fff}
.r-gold{background:linear-gradient(90deg,#6b3b0a,#a8620f 50%,#7a430b);color:#fff}
.r-gold .pr-amt{color:#ffe07a}
.r-light .pr-amt{color:#17305f}
.cartbar{display:flex;align-items:center;gap:14px;background:var(--red-soft);border-radius:14px;padding:14px 18px;margin-top:14px;color:var(--ink)}
.cb-ic{font-size:30px}
.cartbar b{display:block;font-size:17px}
.cartbar strong{color:var(--red);font-size:20px}
.cb-go{margin-left:auto;font-size:26px;color:var(--muted)}
@media (max-width:700px){.prow{grid-template-columns:120px 1fr 22px}.pr-fast{position:static;align-self:flex-start;margin-top:4px}.pr-jb{position:static;align-self:flex-start}.pr-txt{font-size:16px}}
/* ===== Trang chủ theo app (v2) ===== */
.wl-act .btn{flex:1.4}
.wl-reg{text-decoration:underline;white-space:nowrap}
.popular{grid-template-columns:repeat(4,1fr)}
.pop-wide{grid-column:1/-1;flex-direction:row;align-items:center}
.pop-wide .pop-logo{height:90px;flex:0 0 260px}
.pop-wide .pop-n{flex:1}
.pop-logo{height:110px}
.promo{display:flex;align-items:center;gap:24px;margin-top:16px;border-radius:18px;padding:18px 24px;background:linear-gradient(100deg,#ffe3e6,#fff4f5 60%,#ffe9ec);overflow:hidden;position:relative}
.promo .pr-balls{display:flex;gap:6px;flex:none}
.promo .pr-balls .b2{font-style:normal;width:56px;height:56px;font-size:20px}
.promo .pr-t{display:flex;flex-direction:column;gap:4px}
.promo .pr-t b{font-size:26px;font-weight:900;color:var(--ink);letter-spacing:-.5px}
.promo .pr-t b em{font-style:normal;color:var(--red)}
.promo .pr-t u{color:var(--red);font-weight:700}
.promo.red{background:linear-gradient(110deg,var(--red-2),var(--red) 60%,var(--red-2));color:#fff;margin-top:12px;justify-content:space-between}
.promo.red .pr-t b{color:#fff}
.promo.red .pr-t small{opacity:.9}
.promo.red .pr-t u{text-decoration:none;background:#fff;color:var(--red);border-radius:999px;padding:6px 14px;align-self:flex-start;margin-top:6px}
.pr-k{align-self:flex-start;background:#ffd54a;color:#7a3b00;font-size:11px;font-weight:900;border-radius:6px;padding:2px 8px}
.wl-links{display:flex;justify-content:center;gap:16px;margin-top:18px}
.wl-links a{color:var(--red);text-decoration:underline;font-weight:600}
.wl-links span{width:1px;background:var(--line)}
.wl-18{text-align:center;color:var(--muted);font-size:13px;margin-top:6px}
.spv-grid{grid-template-columns:repeat(4,1fr)}
.spv-logo .plw{max-width:100%}
@media (max-width:700px){.pop-wide .pop-logo{flex-basis:140px}.promo .pr-balls .b2{width:40px;height:40px;font-size:15px}.promo .pr-t b{font-size:20px}.promo.red .pr-balls{display:none}}
/* ===== Kết quả theo app (v2) ===== */
.kq-wrap{max-width:760px}
.kq-tool{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:760px;margin-bottom:14px}
.kq-in{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:0 12px}
.kq-in svg{width:20px;height:20px;color:var(--ink-2);flex:none}
.kq-in input{border:0;background:none;font:inherit;padding:12px 0;width:100%;outline:none;color:var(--ink)}
.kq-card{background:#fff;border:1px solid #e7e3df;border-radius:18px;padding:16px 18px}
.kq-h{display:flex;gap:16px;align-items:center}
.kq-h b{display:block;font-size:22px}
.kq-h small{color:var(--muted)}
.kq-ok{display:inline-block;background:#fff1dc;color:#c2410c;font-weight:700;font-size:13px;border-radius:8px;padding:3px 10px;margin-bottom:4px}
.kq-jp{margin-left:auto;text-align:right}.kq-jp small{display:block}.kq-jp b{color:var(--red);font-size:20px}
.kq-lbl{font-weight:800;margin:14px 0 8px}
.kq-balls{display:flex;flex-wrap:wrap;gap:10px}
.kq-balls.g5{display:grid;grid-template-columns:repeat(10,1fr);gap:10px;max-width:640px}
.kq-pro-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kq-pro-group{min-width:0;padding:11px 12px;border:1px solid #f3d8e2;border-radius:12px;background:#fff9fb}
.kq-pro-group> b{display:block;margin-bottom:8px;font-size:14px}
.kq-pro-group .kq-balls{gap:8px}
.kq-pro-group .kb{width:auto;height:40px;padding:0 9px;font-size:14px;letter-spacing:.5px}
.kq-row .kq-pro-results{padding:0 16px 12px}
.kb{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;box-shadow:inset 0 -3px 6px rgba(0,0,0,.18),0 3px 6px rgba(0,0,0,.12);animation:popIn .45s var(--ease) both}
.kq-balls.g5 .kb{width:auto;aspect-ratio:1}
.kb.or{background:radial-gradient(circle at 32% 28%,#ffc98a,#f97316 45%,#c2410c)}
.kb.rd{background:radial-gradient(circle at 32% 28%,#ff8a8f,#f0303c 40%,#c3101d)}
.kb.gr{background:radial-gradient(circle at 32% 28%,#8ee29a,#22a33a 45%,#157a2a)}
.kb.pk{background:radial-gradient(circle at 32% 28%,#ffa3c4,#ec4f8e 45%,#be185d)}
.kb.dk{background:#1c2433}
.kb.w{width:auto;padding:0 14px;border-radius:999px;letter-spacing:2px}
.kq-balls.sm .kb{width:34px;height:34px;font-size:13px;animation:none}
.kq-balls.sm .kb.w{width:auto}
.kq-tx{display:flex;align-items:center;gap:14px;background:#fff6ec;border-radius:12px;padding:14px 16px;margin-top:14px}
.kq-tx span{color:var(--muted);border-left:1px solid #f1d9bf;padding-left:14px}
.kq-tx em{margin-left:auto;font-style:normal;color:#ea580c;font-weight:700}
.kq-det{margin-top:12px}
.kq-det summary{list-style:none;cursor:pointer;text-align:center;color:var(--red);font-weight:700;padding:6px}
.kq-det[open] summary{margin-bottom:10px}
.kq-check{margin-top:14px;border-color:var(--red)!important;color:var(--red)!important;border-radius:12px;padding:13px}
.kq-list{background:#fff;border:1px solid #e7e3df;border-radius:14px;overflow:hidden}
.kq-row{border-bottom:1px solid #f0ece8}.kq-row:last-child{border:0}
.kq-row summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 16px;cursor:pointer}
.kq-row summary small{color:var(--muted)}
.kq-row summary em{margin-left:auto;font-style:normal;color:var(--red);font-weight:600}
.kq-row[open] summary em{visibility:hidden}
.kq-row .kq-balls,.kq-row .rtags{padding:0 16px 12px}
@media (max-width:700px){.kq-balls.g5{grid-template-columns:repeat(5,1fr)}.kb{width:40px;height:40px;font-size:15px}.kq-h{flex-wrap:wrap}.kq-pro-results{gap:8px}.kq-pro-group{padding:9px}.kq-pro-group .kq-balls{gap:6px}.kq-pro-group .kb{height:38px;padding:0 7px;font-size:13px}}
@media (max-width:480px){.kq-pro-results{grid-template-columns:1fr}}

.kb.crown::before{width:28px;height:17px;top:-12px}
.kq-balls:has(.crown){padding-top:12px}
/* ===== Nạp / Rút tiền theo app ===== */
.mt-top{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;margin-bottom:16px}
.mt-top a{width:44px;height:44px;display:grid;place-items:center;font-size:26px;color:var(--ink)}
.mt-top h1{text-align:center;font-size:28px;margin:0}
.mt-top a.hist svg{width:28px;height:28px}
.mt-bal{display:flex;align-items:center;gap:18px;background:var(--red-soft);border-radius:16px;padding:18px 20px}
.mt-bal .wi{width:70px;height:70px;border-radius:50%;background:#e8ebf3;display:grid;place-items:center;flex:none}
.mt-bal .wi svg{width:34px;height:34px;color:#1c2b52}
.mt-bal b.t{font-size:20px;display:block}
.mt-bal small{color:var(--ink-2)}
.mt-bal .big{display:block;font-size:38px;font-weight:900;color:var(--red);letter-spacing:-1px}
.mt-bal2{display:grid;grid-template-columns:1fr 1fr;background:var(--red-soft);border-radius:16px;padding:18px 20px}
.mt-bal2>div+div{border-left:1px solid #f1c9cd;padding-left:22px}
.mt-bal2 .g{font-size:30px;font-weight:900;color:#8a94a8}
.mt-bal2 .r{font-size:34px;font-weight:900;color:var(--red)}
.mt-bal2 small{color:var(--muted)}
.mt-h{font-size:21px;font-weight:800;margin:20px 0 10px}
.mt-amt{display:flex;align-items:center;border:1.5px solid var(--red);border-radius:12px;padding:6px 18px;background:#fff}
.mt-amt.nb0{border-color:var(--line)}
.mt-amt input{border:0;outline:none;font:inherit;font-size:34px;font-weight:900;width:100%;padding:8px 0;color:#1c2b52;min-width:0}
.mt-amt span{color:var(--muted);font-size:20px;border-left:1px solid var(--line);padding-left:16px}
.mt-max{border:0;background:none;color:#0b5cd6;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;margin-left:14px}
.mt-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.mt-chips button{border:1px solid var(--line);background:#fff;border-radius:10px;padding:12px;font:inherit;font-weight:800;cursor:pointer}
.mt-chips button.on{background:var(--red);color:#fff;border-color:var(--red)}
.mt-err{color:var(--red);font-size:14px;min-height:18px;margin-top:6px}
.mt-m{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;cursor:pointer;margin-bottom:10px;width:100%;font:inherit;text-align:left}
.mt-m svg{width:34px;height:34px;color:#1c2b52;flex:none}
.mt-m b{display:block;font-size:17px}.mt-m small{color:var(--muted)}
.mt-m i{margin-left:auto;width:26px;height:26px;border-radius:50%;border:2px solid #a0a7b4;flex:none}
.mt-m.on{border-color:var(--red);background:var(--red-soft)}
.mt-m.on i{border-color:var(--red);box-shadow:inset 0 0 0 5px #fff;background:var(--red)}
.mt-info{border:1px solid var(--line);border-radius:12px;background:#fff}
.mt-info div{display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #f0ece8;font-size:16px}
.mt-info div:last-child{border:0}
.mt-info .tot{font-weight:800;font-size:18px}.mt-info .tot b{color:var(--red)}
.mt-info .ok b{color:#16a34a}
.mt-note{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:14px;margin:12px 0}
.mt-note.blue{background:#eaf2fe;color:#1c2b52;border-radius:12px;padding:14px 16px;font-size:15px}
.mt-go{width:100%;padding:16px;border-radius:12px;font-size:20px}
.mt-demo{text-align:center;color:var(--muted);font-size:12px;margin-top:8px}
.mt-acc{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff}
.mt-acc .bk{width:58px;height:58px;border-radius:50%;background:#e8ebf3;display:grid;place-items:center;flex:none}
.mt-acc .bk svg{width:30px;height:30px;color:#1c2b52}
.mt-acc b{display:block}.mt-acc small{display:block;color:var(--ink-2)}
.mt-acc .vf{color:#16a34a;font-weight:600;font-size:14px}
.mt-acc .ch{margin-left:auto;font-size:24px;color:var(--ink-2)}
.mt-add{display:inline-block;color:#0b5cd6;font-weight:600;margin:12px 0 0;border:0;background:none;font:inherit;cursor:pointer}
.mt-step{display:none}.mt-step.on{display:block;animation:fadeUp .35s var(--ease)}
.qrbox{display:grid;place-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}
.qrbox svg{width:200px;height:200px}
.mt-done{text-align:center;padding:10px 0}
.mt-done .ok{margin:0 auto 10px}
@media (max-width:600px){.hright .hicon{display:none}.hright{gap:6px}.brand-img{max-width:120px;height:auto}.wl-act{flex-wrap:wrap}.wl-act .btn{flex:1 1 100%}.pop-logo .plw{max-width:100%}.pop-logo{height:80px}.welcome{grid-template-columns:1fr!important}.wl-l{min-width:0}}
@media (max-width:420px){.hright .wallet-chip span{display:none}.tier-chip small,.tier-chip strong{display:none}}
.slide-logo .plw{max-width:100%}
@media (max-width:600px){.big-amt{font-size:34px!important;word-break:break-all}}
@media (max-width:1100px){.popular,.spv-grid{grid-template-columns:repeat(2,1fr)}}
.hero{overflow:hidden}
@media (max-width:600px){.slide-logo{max-width:45%}}
.popular>*,.pop-logo,.spv-grid>*{min-width:0}
@media (max-width:600px){.pop{padding:12px}.popular{gap:10px}}
.site-footer .brand-img{filter:none;background:#fff;border-radius:12px;padding:6px 10px;height:52px}
.tc-pill{display:inline-block;font-size:13px;font-weight:700;border-radius:999px;padding:3px 12px;margin-right:6px}
.p-wait{background:#e5efff;color:#1d4ed8}.p-win{background:#dcfce7;color:#15803d}.p-lose{background:#f1f2f4;color:var(--muted)}.p-ref{background:#f3e8ff;color:#7e22ce}.p-ver{background:#fff4d6;color:#a16207}
.kb.mute{background:#eef0f3;color:var(--ink-2);box-shadow:none}
.tk-chip{background:#ffe9d6;color:#7a2e00;font-weight:900;border-radius:8px;padding:5px 18px;font-size:16px}
.spv-top{grid-template-columns:190px 1fr auto}@media (max-width:700px){.spv-top{grid-template-columns:1fr;text-align:center}.spv-top .spv-logo{justify-self:center}}
/* Bộ số yêu thích / Mua lại */
.frow{grid-template-columns:110px 1fr auto;border:1px solid #ece8e4;box-shadow:none}
.frow .pr-logo{display:grid;place-items:center;border:0}
.ag-lines{display:grid;gap:8px;margin-top:10px}
.ag-line{display:flex;align-items:center;gap:10px}
.ag-line em{font-style:normal;font-weight:800;color:var(--muted);width:16px}
.ag-line .kq-balls:has(.crown){padding-top:12px}
@media (max-width:700px){.frow{grid-template-columns:70px 1fr}.frow .fr-a{grid-column:1/-1}}
.p-new{background:var(--red);color:#fff}
.spv{gap:12px}
.spv-top{padding:12px 22px}
.spv-top .spv-logo .plw{max-width:170px}
.spv-top.fast{border-color:#f97316}
.spv-top.fast .spv-info b{color:#ea580c}
.spv-top.fast .btn-red{background:#f97316;border-color:#f97316}
.spv-info span b{color:var(--red);font-variant-numeric:tabular-nums}
.spv-info span b{display:inline;font-size:inherit;letter-spacing:0;color:var(--red)}
.spv-top.fast .spv-info span b{color:#ea580c}
.kq-wrap,.kq-tool{max-width:none}
/* Logo sản phẩm dạng ngang: không bị ép vào ô tròn 48px */
.srow-card{grid-template-columns:110px 1.4fr 1fr 1fr 20px}
.gi:has(.plw){width:auto!important;height:auto!important;border-radius:0!important;background:none!important;flex:none}
.gi .plw>img.plogo,.srow-card .gi .plw>img.plogo{width:100%!important;height:100%!important}
@media (max-width:900px){.srow-card{grid-template-columns:90px 1fr 20px}}
.citem{grid-template-columns:100px 1fr auto}@media (max-width:700px){.citem{grid-template-columns:80px 1fr}}
/* Trang chủ đã đăng nhập: thông tin gọn bên trái, Thần Tài bên phải */
.dash-card{grid-template-columns:minmax(0,1.5fr) 1fr;padding:26px 32px}
.dash-card .hello{margin-bottom:10px;font-size:28px}
.dash-card .bal{padding:14px 18px;gap:14px}
.dash-card .bal-l b{font-size:28px}
.dash-card .bal-a{gap:12px;padding-left:16px}
.dash-card .bi{width:40px;height:40px}
.dash-card .pending{margin-top:10px;padding:11px 16px}
.dash-card .wl-r .mascot{animation:bob 4s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(0,0,0,.15))}
.dash .promo.red{margin-top:14px}
@media (max-width:760px){.dash-card .wl-r{display:none}}
/* Banner "Vietlott trong tầm tay" + khung quay Keno đổi màu theo hạng Royalty */
.promo.red{background:var(--hero)}
.promo.red .pr-t u{color:var(--red)}
.kl{background:var(--hero)}
.mt-bal,.mt-bal2,.acc-bal2,.tx-sum{background:var(--red-soft)}
/* ===== Chọn ngôn ngữ ===== */
.lang-sel{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 10px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--ink);max-width:150px}
.lang-sel:hover{border-color:var(--ink)}
@media (max-width:600px){.lang-sel.in-header{max-width:64px;padding:6px 4px;font-size:13px}}
.wl-lang{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--ink-2);font-size:14px}
.wl-lang .lang-sel{max-width:none}
/* ===== Đăng nhập / đăng ký: người Việt Nam / người nước ngoài ===== */
.who{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:var(--bg);border-radius:14px;padding:5px;margin-bottom:18px}
.who button{border:0;background:none;border-radius:10px;padding:11px 8px;font:inherit;font-weight:700;color:var(--ink-2);cursor:pointer}
.who button.on{background:#fff;color:var(--red);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.nat-hint{font-size:13px;color:var(--muted);margin:-8px 0 14px}
.phone-intl{display:grid;grid-template-columns:120px 1fr;gap:8px}
.auth-partner{display:flex;flex-direction:column;align-items:center;gap:8px;padding:26px 16px 34px}
.auth-partner small{color:var(--muted);font-size:12px;letter-spacing:.5px;text-transform:uppercase}
.auth-partner img{height:74px;width:auto;max-width:90%}
.phone-intl:has(#cc.hide) #ph{grid-column:1/-1}

/* =========================================================
   MÀN QUAY KENO (theo app demo)
   ========================================================= */
.kst{--kst-h:330px;position:relative;background:#8d0616;border-radius:18px;overflow:hidden;color:#fff5d7;box-shadow:0 10px 28px rgba(120,5,20,.28);font-family:inherit}
.kst-stage{height:var(--kst-h);position:relative}
.kst-panel{position:absolute;inset:0;background:radial-gradient(circle at 58% 47%,#b60d21,#8d0616 78%);border:3px solid #d8a32b;border-radius:16px 16px 22px 22px;box-shadow:inset 0 0 0 3px #650616;overflow:hidden}
.kst-panel::before{content:"";position:absolute;inset:8px;border:1px solid #e4bb5799;border-radius:18px;pointer-events:none}
.kst-panel::after{content:"";position:absolute;left:-5%;right:-5%;height:47px;bottom:-30px;border-top:2px solid #efc05a;border-radius:50%}
.kst-logo{display:block;background:url(../img/products/app/keno-opt.webp) center/contain no-repeat;width:110px;height:64px;filter:drop-shadow(0 2px 3px #0006)}
.kst-mascot{display:block;background:url(../img/brand/than-tai-opt.webp) center bottom/contain no-repeat;filter:drop-shadow(0 6px 6px #4d0014aa);animation:kstFloat 3.6s ease-in-out infinite;transform-origin:50% 85%}
@keyframes kstFloat{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(-3deg)}60%{transform:translateY(-3px) rotate(2deg)}}
.kst-nav{height:44px;display:flex;align-items:center;gap:6px;padding:4px 10px;background:#8d0616;border-top:1px solid #d8a32b;color:#fff0bc}
.kst-nav button{background:none;border:0;color:#fff0bc;font-size:24px;min-width:32px;height:36px;cursor:pointer}
.kst-nav span{flex:1;text-align:center;font-size:12px}
.kst-nav .kst-jump{font-size:12px;border:1px solid #ffe29766;border-radius:8px;padding:0 10px;min-width:0}
.kst-menu{position:absolute;inset:0;background:#1420328c;display:grid;place-items:center;z-index:5}
.kst-menu[hidden]{display:none}
.kst-menu-in{background:#fff;color:#172653;border-radius:14px;padding:12px;min-width:240px;display:grid}
.kst-menu-in b{padding:6px 8px 10px}
.kst-menu-in button{border:0;border-top:1px solid #eee;background:#fff;text-align:left;padding:11px 8px;font:inherit;cursor:pointer;color:#172653}
.kst-menu-in button:hover{background:#fff4e6}
.kst-menu-in .x{text-align:center;color:var(--red);font-weight:700}
/* Chào mừng */
.kst-welcome{background:radial-gradient(ellipse at 52% 40%,#bd261949,transparent 58%),repeating-linear-gradient(90deg,#3c0005 0,#85000b 12px,#c20a17 19px,#590008 28px,#300005 34px)}
.kst-curtain{position:absolute;top:0;bottom:0;width:31%;z-index:1;background:repeating-linear-gradient(95deg,#690008 0,#f40c1d 9px,#8c0009 17px,#d90014 24px,#490006 30px);filter:drop-shadow(3px 4px 4px #200)}
.kst-curtain.l{left:0;clip-path:polygon(0 0,100% 0,81% 25%,51% 55%,37% 76%,53% 100%,0 100%)}
.kst-curtain.r{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 0,81% 25%,51% 55%,37% 76%,53% 100%,0 100%)}
.kst-w-brand{position:absolute;top:16px;left:0;right:0;text-align:center;color:#ffe56e;font-size:24px;font-weight:900;font-style:italic;z-index:2;text-shadow:0 2px 2px #390000}
.kst-w-brand small{display:block;font-size:9px;font-weight:500;font-style:normal}
.kst-w-center{position:absolute;top:74px;left:21%;width:58%;text-align:center;z-index:2}
.kst-w-center strong{display:block;color:#ffe07a;font-size:12px;text-shadow:0 2px 2px #5d0305}
.kst-w-center .kst-logo{width:100%;height:110px}
.kst-mascot.w{position:absolute;left:10px;bottom:28px;width:115px;height:135px;z-index:3}
.kst-w-msg{position:absolute;left:30%;right:7%;bottom:46px;z-index:3;text-align:center;color:#ffe573;text-shadow:0 2px 2px #4b0004}
.kst-w-msg strong{display:block;font-size:16px;font-weight:900;margin-bottom:6px}
.kst-w-msg span{display:block;font-size:12px;line-height:18px;font-weight:800}
.kst-w-resp{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#ffe573;font-size:10px;z-index:3}
/* Bảng 80 số */
.kst-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3fr);padding:18px 12px 24px}
.kst-overview aside{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:4px;padding-right:8px}
.kst-overview .kst-logo{width:100%;height:48px}
.kst-clockg{text-align:center}
.kst-clockg span{display:block;color:#ffe35b;font-size:10px;line-height:13px;font-weight:800}
.kst-clockg strong{display:block;color:#ffe35b;font-size:26px;font-weight:900;font-variant-numeric:tabular-nums}
.kst-speech{position:relative;width:100%;padding:6px 2px;border-radius:10px;background:linear-gradient(130deg,#fff,#f1efee);color:#800e28;font-size:9px;line-height:12px;font-weight:900;text-align:center;box-shadow:0 2px 4px #45000960}
.kst-speech::after{content:"";position:absolute;right:12px;bottom:-7px;width:12px;height:13px;background:#f1efee;border-radius:0 0 12px 0;transform:skewY(-22deg)}
.kst-mascot.o{width:100%;height:92px}
.kst-80{position:relative;z-index:2;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(8,minmax(0,1fr));gap:4px;align-content:stretch}
.kst-80 span{display:grid;place-items:center;aspect-ratio:1;align-self:center;border-radius:50%;background:linear-gradient(145deg,#fff0a8,#f4cc62);color:#5d2c09;font-size:11px;font-weight:800;box-shadow:0 1px 2px #47000b;animation:kstPop .3s ease-out both}
@keyframes kstPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* Chuẩn bị */
.kst-ready{background:radial-gradient(ellipse at 65% 40%,#c50d25,#890415 85%)}
.kst-r-brand{position:absolute;top:18px;left:18px;z-index:2}
.kst-mascot.r{position:absolute;left:8px;top:96px;width:150px;height:190px;z-index:2}
.kst-r-right{position:absolute;left:44%;right:16px;top:58px;z-index:3;text-align:center}
.kst-r-clock{position:relative;padding:30px 4px 10px;border-radius:13px;background:linear-gradient(145deg,#fff39c,#fbe757 70%,#cf9e21);border:2px solid #e5b845;box-shadow:0 5px 0 #71031566;color:#d00016}
.kst-r-clock div{position:absolute;left:4px;right:4px;top:-17px;background:linear-gradient(#d92b35,#98081b);border:2px solid #d89f36;border-radius:6px;padding:8px 0;font-size:13px;font-weight:900;color:#fff19b;white-space:nowrap}
.kst-r-clock strong{display:block;font-size:52px;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-2px}
.kst-r-msg{margin-top:28px;font-size:24px;font-weight:900;line-height:1.4;color:#ffeb7c;text-shadow:0 2px 1px #650313}
/* Quay số & Kết quả */
.kst-d-top{position:relative;z-index:2;height:81px;padding:10px 12px 0;display:grid;grid-template-columns:39% 61%;align-items:center}
.kst-d-top .kst-logo{width:103px;height:60px}
.kst-banner{position:relative;height:53px;margin-top:12px;padding:0 5px 5px;display:flex;align-items:flex-end;background:linear-gradient(170deg,#fff2a3,#ffe75a 54%,#e6af19);border:2px solid #ffe485;border-radius:13px;color:#4f150c;box-shadow:0 4px 9px #570011,inset 0 0 0 2px #fff3a4}
.kst-win{position:absolute;top:-13px;left:4px;right:4px;height:29px;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kst-win span{display:grid;place-items:center;border:2px solid #d09b35;border-radius:8px 8px 5px 5px;background:linear-gradient(#fffeb2,#fff16a 75%,#e1bc38);color:#17110c;font-size:13px;font-weight:900;white-space:nowrap;box-shadow:0 3px 4px #773a1566}
.kst-win span:empty{visibility:hidden}
.kst-win span.tie{background:linear-gradient(#ffe8e5,#ffd2cf)}
.kst-win span.plum{background:linear-gradient(#a52349,#800e35);color:#fff}
.kst-counts{width:100%;display:grid;grid-template-columns:repeat(4,1fr)}
.kst-counts span{text-align:center;color:#532008;font-size:10px;font-weight:900;white-space:nowrap;border-right:1px solid #795019}
.kst-counts span:last-child,.kst-counts span:nth-child(2){border-right:0}
.kst-counts b{color:#a00619;font-size:18px;margin-left:2px}
.kst-d-main{position:relative;z-index:1;display:grid;grid-template-columns:39% 61%;height:220px;padding:6px 12px 12px}
.kst-d-left{position:relative;min-width:0}
.kst-per{display:flex;align-items:baseline;gap:5px;color:#ffe8a4;font-size:11px;font-weight:900;white-space:nowrap}
.kst-per strong{color:#fff;font-size:18px}
.kst-per.kst-left{margin-top:10px}
.kst-draw.done .kst-per.kst-left{flex-direction:column;gap:2px}
.kst-mascot.d{position:absolute;left:0;top:70px;width:118px;height:130px}
.kst-20{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,1fr);place-items:center;gap:7px 3px;padding:7px 0 10px}
.kst-20 span{width:38px;height:38px;display:grid;place-items:center;border:3px solid #f8d63e;border-radius:50%;background:#900011;color:transparent;font-size:17px;font-weight:900;box-shadow:inset 0 0 0 1px #8e4205,0 1px 4px #4c000a}
.kst-20 span.on{background:radial-gradient(circle at 32% 21%,#fff9d0,#ffe069 45%,#d99a15 84%);color:#2d1b08;border-color:#ffdf53}
.kst-20 span.enter{animation:kstBall .65s ease-out}
@keyframes kstBall{0%{transform:scale(.4);filter:brightness(2)}60%{transform:scale(1.15)}100%{transform:none;filter:none}}
/* 3 kỳ gần nhất */
.kst-history{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);padding:12px 10px}
.kst-history aside{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.kst-history aside .kst-logo{width:100%;max-width:105px;height:56px}
.kst-h-title{font-size:12px;line-height:1.4;font-weight:800;color:#ffe49a;margin:2px 0 6px}
.kst-history aside>span{font-size:11px;font-weight:700;color:#ffe49a}
.kst-h-clock{font-size:26px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.kst-mascot.h{width:88%;flex:1;min-height:70px}
.kst-h-rows{position:relative;z-index:2;display:grid;grid-template-rows:repeat(3,1fr);gap:6px;padding:4px}
.kst-h-row{display:flex;flex-direction:column;justify-content:center;gap:4px}
.kst-h-head{display:flex;align-items:center;gap:6px}
.kst-h-head small{color:#ffe3a2;font-size:11px;font-weight:700}
.kst-badge{padding:2px 5px;border-radius:4px;font-size:11px;font-weight:700;white-space:nowrap}
.kst-badge.gold{background:#ffe49a;color:#61380b}.kst-badge.even{background:#d20b24;color:#ffe66d}.kst-badge.odd{background:#17623f;color:#ffe66d}.kst-badge.small{background:#800e35;color:#ffe66d;box-shadow:inset 0 0 0 1px #d98ca6}.kst-badge.tie{background:#f7dce7;color:#87304f}
.kst-mini{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}
.kst-mini i{font-style:normal;height:20px;display:grid;place-items:center;border-radius:10px;background:#ffe49a;color:#61380b;font-size:11px;font-weight:700}
/* Thống kê các số */
.kst-freq{display:flex;flex-direction:column;gap:4px;padding:10px 10px 14px}
.kst-freq header{position:relative;z-index:2;height:40px;flex:none;display:flex;align-items:center;justify-content:space-between}
.kst-freq header .kst-logo{width:70px;height:40px}
.kst-freq header div{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:#ffe49a}
.kst-freq header strong{font-size:24px;color:#fff;font-variant-numeric:tabular-nums}
.kst-f-g{position:relative;z-index:2;flex:1;min-height:0;display:grid;grid-template-rows:1fr 1fr;gap:3px}
.kst-f-g+.kst-f-g{border-top:1px solid #dfb55a;padding-top:4px}
.kst-f-line{display:grid;grid-template-columns:70px minmax(0,1fr);align-items:center;gap:4px}
.kst-f-lb{font-size:10px;font-weight:800;line-height:1.2;color:#ffe49a}
.kst-f-lb small{font-weight:400;margin-left:3px;color:#fff0bc}
.kst-f-balls{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:2px}
.kst-f-balls div{display:flex;flex-direction:column;align-items:center;gap:1px}
.kst-f-balls b{width:100%;max-width:24px;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;font-size:11px;font-weight:900;color:#291d0a;box-shadow:inset 0 0 0 1px #b18a37,0 2px 3px #43030d88}
.kst-f-balls b.gold{background:radial-gradient(circle at 32% 22%,#fff9cb,#ffe16b 50%,#d49b20)}
.kst-f-balls b.silver{background:radial-gradient(circle at 32% 22%,#fffef2,#dedcc5 50%,#a4a48e)}
.kst-f-balls small{font-size:10px;line-height:11px;color:#fff;font-weight:700}
/* Biểu đồ */
.kst-trend{display:grid;grid-template-rows:auto 1fr 1fr;gap:4px;padding:12px 14px 16px}
.kst-t-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dfb958;padding-bottom:4px}
.kst-t-top strong{font-size:13px;line-height:18px;color:#ffe35b}
.kst-t-top b{font-size:32px;color:#fff;font-variant-numeric:tabular-nums}
.kst-t-chart{position:relative;z-index:2;min-height:0;display:flex;flex-direction:column}
.kst-t-chart h3{align-self:flex-start;margin:0 0 2px;padding:1px 10px;border-radius:5px;background:linear-gradient(#fff6b2,#edc448);color:#531a0b;font-size:12px;font-weight:900}
.kst-t-chart svg{flex:1;width:100%;min-height:0}
@media (max-width:420px){.kst-20 span{width:31px;height:31px;font-size:15px}.kst-mascot.d{width:100px;height:112px}.kst-r-clock strong{font-size:44px}.kst-r-msg{font-size:20px}.kst-r-clock div{font-size:11px}.kst-f-line{grid-template-columns:56px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.kst-mascot,.kst-80 span,.kst-20 span.enter{animation:none}}
/* ===== Chọn vé Keno Chẵn/Lẻ · Lớn/Nhỏ ===== */
.kbuy{position:relative;background:#fff8e8;border:1px solid #dfbd65;border-radius:18px;overflow:hidden;color:#563725}
.kb-pick{padding:12px 14px 14px}
.kb-top{display:flex;align-items:center;justify-content:space-between}
.kb-next{margin:0;color:#784e1c;font-size:14px;font-weight:700}
.kb-next b{color:#8d102b}
.kb-stat{width:40px;height:40px;border:1px solid #e6cc94;border-radius:10px;background:#fffdf5;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:9px;cursor:pointer;color:#800e35}
.kb-stat i{display:block;width:4px;background:currentColor;border-radius:2px;height:10px}.kb-stat i:nth-child(2){height:20px}.kb-stat i:nth-child(3){height:15px}
.kb-bought{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:40px;margin:8px 0 12px;padding:8px 12px;background:#fffdf5;border:1px solid #e5cd91;border-radius:9px;color:#784e1c;font:inherit;font-size:14px;cursor:pointer}
.kb-bought strong{color:#8d102b}
.kb-card+.kb-card{margin-top:14px;padding-top:14px;border-top:1px solid #e8d5a3}
.kb-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-bottom:12px}
.kb-opts button{position:relative;height:64px;border-radius:12px;border:1px solid #dec574;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-top:14px;transition:transform .12s;box-shadow:inset 0 2px 2px #ffffffd9,0 3px 0 #cfbb82,0 4px 5px #64351620;background:linear-gradient(#fffcef,#fff0ba)}
.kb-opts button:active{transform:translateY(2px)}
.kb-opts button span{font-size:17px;font-weight:800;text-transform:uppercase;color:#856307}
.kb-opts button small{font-size:11px;color:#856307}
.kb-rate{position:absolute;right:7px;top:5px;font-size:11px;font-weight:800;color:#711333}
.kb-opts [data-choice="Chẵn"]{background:linear-gradient(#ef7379,#ce2739);border-color:#b71d30;box-shadow:inset 0 2px 2px #ffb5b999,0 3px 0 #981427}
.kb-opts [data-choice="Lẻ"]{background:linear-gradient(#53a778,#207148);border-color:#165b39;box-shadow:inset 0 2px 2px #a4e6bf99,0 3px 0 #10492c}
.kb-opts [data-choice="Chẵn"] span,.kb-opts [data-choice="Lẻ"] span,.kb-opts [data-choice="Chẵn"] .kb-rate,.kb-opts [data-choice="Lẻ"] .kb-rate{color:#fff4a3}
.kb-opts [data-choice="Hòa"]{background:linear-gradient(#fff4f8,#f5c8d9);border-color:#db94b0;box-shadow:inset 0 2px 2px #fff,0 3px 0 #cc8ea5}
.kb-opts [data-choice="Hòa"] span{color:#a83c67}
.kb-opts [data-choice="Nhỏ"]{background:linear-gradient(#e8c6d2,#ce99ad);border-color:#ad6682;box-shadow:inset 0 2px 2px #f7e4ec,0 3px 0 #99536e}
.kb-opts [data-choice="Nhỏ"] span,.kb-opts [data-choice="Nhỏ"] small{color:#800e35}
.kb-opts button[aria-pressed="true"]{outline:3px solid #8d102b;outline-offset:2px}
.kb-opts button[aria-pressed="true"]::after{content:"✓";position:absolute;left:7px;top:5px;width:18px;height:18px;border-radius:50%;background:#8d102b;color:#fff;font-size:11px;display:grid;place-items:center}
.kb-opts [data-choice="Lớn"][aria-pressed="true"]{background:linear-gradient(#ffe784,#e9bb33 62%,#d5a21b)}
.kb-opts [data-choice="Hòa"][aria-pressed="true"]{background:linear-gradient(#ffc8de,#e994b3 62%,#d77a9b)}
.kb-opts [data-choice="Hòa"][aria-pressed="true"] span{color:#fff}
.kb-opts [data-choice="Nhỏ"][aria-pressed="true"]{background:linear-gradient(#b63b65,#800e35 62%,#660826)}
.kb-opts [data-choice="Nhỏ"][aria-pressed="true"] span,.kb-opts [data-choice="Nhỏ"][aria-pressed="true"] small,.kb-opts [data-choice="Nhỏ"][aria-pressed="true"] .kb-rate{color:#fff}
.kb-stakes{display:flex;gap:8px}
.kb-stakes button{flex:1;height:40px;border:1px solid #d8bf82;border-radius:8px;background:#fffdf5;color:#784e1c;font:inherit;font-size:14px;cursor:pointer}
.kb-stakes button.on{background:#8d102b;border-color:#8d102b;color:#fff}
.kb-checkout{display:grid;grid-template-columns:minmax(0,1fr) minmax(160px,1.4fr);gap:14px;align-items:center;padding:10px 14px;background:#fffdf6;border-top:1px solid #dfbd65}
.kb-checkout small{display:block;font-size:14px;color:#383838}
.kb-checkout strong{font-size:24px;font-weight:800;color:#ed0923}
.kb-pay{height:52px;border:0;border-radius:12px;background:#f00621;color:#fff;font:inherit;font-size:20px;cursor:pointer}
.kb-pay:disabled{opacity:.55;cursor:not-allowed}
.kb-ov{position:fixed;inset:0;z-index:400;background:#22091480;display:grid;place-items:center;padding:16px}
.kb-ov[hidden]{display:none}
.kb-dlg{position:relative;width:min(460px,100%);max-height:86vh;overflow:auto;background:#fffaf0;border-radius:18px;padding:18px;color:#30252b}
.kb-dlg h3{margin:0 30px 10px 0;font-size:18px}
.kb-x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:26px;cursor:pointer;color:#68515b}
.kb-sub{font-size:12px;color:#785d4c;margin:6px 0 10px}
.kb-amts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kb-amts button{min-height:50px;border:1px solid #ddc79d;border-radius:10px;background:#fff;color:#800e35;font:inherit;font-weight:700;cursor:pointer}
.kb-amts button.on{background:#800e35;color:#fff}
.kb-tk{padding:10px 0;border-bottom:1px solid #e6d7ba}
.kb-tk>div:first-child{display:flex;justify-content:space-between;font-size:13px}
.kb-tk small{color:#97621b}
.kb-tl{display:flex;justify-content:space-between;font-size:14px;padding-top:4px}
.kb-tl strong{color:#800e35}
.kb-empty{padding:22px 4px;text-align:center;color:#786854}
.kb-acts{margin-top:14px;display:grid}
.kb-sc{display:flex;gap:6px}
.kb-sc button{flex:1;min-height:36px;border:1px solid #dfc383;border-radius:6px;background:#fffdf6;color:#78532c;font:inherit;font-weight:700;cursor:pointer}
.kb-sc button.on{background:#800e35;color:#fff;border-color:#800e35}
.kb-sc select{border:1px solid #dfc383;border-radius:6px;background:#fffdf6}
.kb-rr{display:grid;grid-template-columns:90px 1fr 64px;gap:8px;align-items:center;min-height:36px;font-size:12px}
.kb-tr{height:10px;background:#efe6d5;border-radius:5px;overflow:hidden}
.kb-tr i{display:block;height:100%}.kb-tr i.gold{background:#d6a62e}.kb-tr i.pink{background:#e69cb8}.kb-tr i.plum{background:#800e35}
.kb-rr b{text-align:right;font-size:13px}.kb-rr b small{display:block;font-weight:400;font-size:11px;color:#785d4c}
.kb-g10{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.kb-g10 span{min-height:40px;display:grid;place-items:center;border-radius:6px;font-size:12px;font-weight:700;background:#ffedb0;color:#805b14}
.kb-g10 span.plum{background:#e4bdcd;color:#800e35}.kb-g10 span.pink{background:#f7dce7;color:#983859}
/* Khối Keno đầu trang Mua vé */
.keno-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;margin-bottom:26px;align-items:start}
.keno-top-h{display:flex;align-items:center;gap:10px;margin:0 0 10px}
.keno-top-h h2{font-size:22px;margin:0}
.keno-top-h a{margin-left:auto;color:var(--red);font-weight:700;font-size:14px}
@media (max-width:900px){.keno-top{grid-template-columns:1fr}}
.gp2-stage{margin-bottom:12px}
.sp-list-h{font-size:22px;margin:4px 0 12px}
.kt-help{border:0;background:none;color:var(--red);font:inherit;font-weight:700;cursor:pointer}
.kst-80{grid-template-rows:repeat(8,1fr);align-items:center;justify-items:center;gap:3px;height:100%}
.kst-80 span{width:min(100%,31px);height:auto;aspect-ratio:1}
.kst-overview{padding:16px 12px 20px}
.kst-draw.done .kst-per.kst-left strong{font-size:22px}
.kst-draw.done .kst-mascot.d{top:118px;width:92px;height:92px}

.drawer-lang{padding:4px 16px 10px}.drawer-lang .lang-sel{width:100%;max-width:none}
@media (max-width:480px){.hright:has(.tier-chip) .lang-sel.in-header{display:none}}
.kt-help{white-space:nowrap}
@media (max-width:480px){.gp2-top h1{font-size:22px}.kb-opts .kb-rate{font-size:10px;right:6px;top:4px}.kb-opts button span{margin-top:10px}}
/* i18n: văn bản dài hơn ở ngôn ngữ khác không làm tràn lưới */
.acc-layout>*,.mt-bal2>*,.tk-hd>*{min-width:0}
.tk-hd{flex-wrap:wrap}
.mt-bal2 .r{overflow-wrap:anywhere}
@media (max-width:600px){.ptable{display:block;overflow-x:auto;max-width:100%}}
.panel,.kv,.kv>*,.acc-main,.acc-main>*{min-width:0}

/* ===== Select tuỳ biến (thay giao diện select mặc định) ===== */
.nsel{position:relative;display:inline-flex;align-items:center;min-width:0;max-width:100%;vertical-align:middle;cursor:pointer}
.nsel>select{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0;border:0;padding:0;background:none;box-shadow:none}
.nsel-btn{display:flex;align-items:center;gap:8px;width:100%;min-width:0;border:0;background:none;padding:0;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.nsel-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nsel.ph .nsel-v{color:var(--muted)}
.nsel-c{flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);opacity:.55;transition:transform .18s var(--ease)}
.nsel.op .nsel-c{transform:rotate(225deg) translate(-3px,-3px);opacity:.9}
.nsel.input{display:flex;width:100%;cursor:pointer}
.nsel.input.op,.nsel.input:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,76,198,.12)}
.nsel.lang-sel:hover,.nsel.op.lang-sel{border-color:var(--ink)}
.gp2-sel .nsel{font-weight:800;color:#0b5cd6;padding:4px 2px}
.kq-in .nsel{flex:1;min-width:0;padding:12px 0}
.kb-sc .nsel{border:1px solid #dfc383;border-radius:6px;background:#fffdf6;padding:4px 8px}
.nsel[disabled],.nsel:has(>select:disabled){opacity:.55;pointer-events:none}

.nsel-pop{position:fixed;z-index:1200;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 38px rgba(15,23,42,.18);overflow:hidden;animation:nselIn .14s var(--ease)}
@keyframes nselIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.nsel-pop.up{animation:none}
.nsel-sb{padding:8px}
.nsel-s{width:100%;border:2px solid var(--ink);border-radius:5px;padding:8px 10px;font:inherit;font-size:15px;outline:none;background:#fff;color:var(--ink)}
.nsel-pop.nos .nsel-sb{display:none}
.nsel-l{max-height:280px;overflow-y:auto;padding-bottom:2px}
.nsel-pop.nos .nsel-l{padding-top:6px}
.nsel-o{padding:9px 14px;font-size:15px;line-height:1.35;cursor:pointer;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsel-o.act{background:var(--bg)}
.nsel-o.on{background:var(--blue);color:#fff;font-weight:600}
.nsel-o.on.act{background:#0040a8}
.nsel-o.dis{opacity:.45;cursor:not-allowed}
.nsel-no{padding:14px;text-align:center;color:var(--muted);font-size:14px}
@media (max-width:600px){.nsel-l{max-height:min(46vh,280px)}.nsel-s,.nsel-o{font-size:16px}}
.wtool>*,.kq-in,.field>*{min-width:0}

/* ===== Linh vật Thần Tài cạnh sản phẩm sắp tới kỳ quay ===== */
.pr-logo,.spv-logo,.pop-logo{position:relative}
/* trong hàng sản phẩm: đặt ở khoảng trống bên trái nhãn "Quay nhanh" */
.pr-body .soon-tt{right:158px;width:78px;height:78px}
.soon-tt{position:absolute;right:0;top:50%;width:52px;height:52px;transform:translateY(-50%);pointer-events:none;z-index:3;animation:ttBob 2.4s ease-in-out infinite}
.soon-tt::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle closest-side,rgba(255,200,40,.5),rgba(255,200,40,.18) 55%,rgba(255,200,40,0) 100%);animation:ttGlow 2.4s ease-in-out infinite}
.soon-tt img{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))}
.soon-tt.nf{display:none}
@keyframes ttBob{0%,100%{transform:translateY(-50%)}50%{transform:translateY(calc(-50% - 5px))}}
@keyframes ttGlow{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.08)}}
.pop-logo .soon-tt{right:0;width:46px;height:46px}
.spv-logo .soon-tt{right:0}
@media (prefers-reduced-motion:reduce){.soon-tt,.soon-tt::before{animation:none}}
@media (max-width:700px){.soon-tt{width:42px;height:42px;right:0}.pop-logo .soon-tt{width:38px;height:38px}.pr-body .soon-tt{right:4px;width:44px;height:44px}}

/* ===== Đăng ký nhiều bước (đồng bộ luồng app) ===== */
.rg-prog{margin:4px 0 22px}
.rg-line{height:6px;border-radius:99px;background:var(--line);overflow:hidden}
.rg-line i{display:block;height:100%;border-radius:99px;background:var(--red);transition:width .35s var(--ease)}
.rg-prog p{margin:8px 0 0;font-size:14px;color:var(--muted)}
.rg-prog b{color:var(--ink)}
.rg-h{font-size:22px;margin:2px 0 6px}
.rg-h3{font-size:17px;margin:22px 0 10px}
.rg-sub{margin:0 0 18px}
.rg-back{border:0;background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;padding:0 0 10px}
.rg-back:hover{color:var(--ink)}
.rg-demo{background:#fff8e6;border:1px solid #f3dca6;color:#7a5200;border-radius:10px;padding:10px 14px;font-size:14px;margin:0 0 18px}
.rg-ok{background:#e9f7ef;border:1px solid #b7e3c7;color:#166534;border-radius:10px;padding:10px 14px;font-size:14px;font-weight:600;margin:0 0 18px}
.rg-resend{text-align:center;font-size:14px;color:var(--muted);margin:14px 0 0}
.rg-resend .link{border:0;background:none;font:inherit;cursor:pointer;padding:0}
.rg-resend .link[disabled]{color:var(--muted);cursor:default;text-decoration:none}
.rg-nav{display:flex;gap:10px;margin-top:18px}
.rg-nav .btn-lg{flex:1}
.rg-radio{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.rg-radio label{display:flex;align-items:center;gap:10px;font-size:15px;cursor:pointer}
.up.two{grid-template-columns:1fr 1fr}
@media (max-width:560px){.up.two{grid-template-columns:1fr}.rg-nav{flex-wrap:wrap}.rg-nav .btn{width:100%}}

.otpbox{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.otpbox input{width:100%;text-align:center;font-size:24px;font-weight:800;padding:12px 0;border:1.5px solid var(--line);border-radius:12px;background:#fff;outline:none;color:var(--ink);font-variant-numeric:tabular-nums}
.otpbox input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(0,76,198,.12)}
.otpbox.err input{border-color:var(--red);animation:shakeX .35s}
@media (max-width:420px){.otpbox{gap:6px}.otpbox input{font-size:20px;padding:10px 0}}

.pwrap{position:relative}
.pwrap .input{padding-right:48px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:none;font-size:18px;line-height:1;padding:8px;cursor:pointer;opacity:.6}
.eye:hover{opacity:1}

.ekyc{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:18px}
.ek-qr{text-align:center}
.ek-qr .qrbox{width:190px;height:190px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;display:grid;place-items:center}
.ek-qr .qrbox svg{width:100%;height:100%;display:block}
.ek-code{font-size:13px;color:var(--muted);margin:10px 0 0}
.ek-code b{color:var(--ink);font-size:15px;letter-spacing:1px}
.ek-steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px;font-size:15px;line-height:1.45}
.ek-link{font-size:14px;color:var(--muted);margin:14px 0 0;text-align:center}
.ek-status{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;padding:12px;border-radius:12px;background:#eef4ff;color:#1e3a8a;font-size:14px;font-weight:600}
.ek-status b{font-variant-numeric:tabular-nums}
.ek-method{display:inline-flex;flex-direction:column;gap:2px;margin-top:16px;padding:10px 26px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.ek-method small{font-size:12px;color:var(--muted)}
.ek-method b{font-size:16px}
@media (max-width:620px){.ekyc{grid-template-columns:1fr;justify-items:center}.ek-steps{padding-left:18px}}
/* Ô tải ảnh giấy tờ */
.up{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:4px}
.drop-zone{position:relative;display:grid;place-items:center;min-height:136px;border:2px dashed var(--line);border-radius:14px;background:var(--bg);cursor:pointer;text-align:center;background-size:cover;background-position:center;transition:border-color .2s,background .2s}
.drop-zone:hover{border-color:var(--red)}
.drop-zone input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop-zone>span{font-size:26px;line-height:1.6;color:var(--muted);padding:10px}
.drop-zone i{font-style:normal;font-size:14px;font-weight:600;color:var(--ink-2)}
.drop-zone.has{border-style:solid;border-color:var(--red)}
.drop-zone.has>span{background:rgba(255,255,255,.9);border-radius:10px;padding:6px 12px}
@media (max-width:520px){.up{grid-template-columns:1fr}}
.acc-name{font-size:20px;font-weight:900;color:var(--red);margin:0 0 4px;letter-spacing:.3px}

/* Chọn loại giấy tờ thứ hai + ảnh mẫu */
.drop-zone.demo::after{content:attr(data-demo);position:absolute;top:8px;right:8px;font-size:12px;font-weight:700;color:var(--red);background:#fff;border:1px solid var(--line);border-radius:999px;padding:2px 10px}
.drop-zone.demo{background:repeating-linear-gradient(135deg,#fff,#fff 10px,#f4f6fb 10px,#f4f6fb 20px)}

/* Nút điền dữ liệu mẫu */
.rg-fill{float:right;border:1px solid var(--line);background:#fff;border-radius:999px;padding:3px 12px;font:inherit;font-size:12.5px;font-weight:700;color:var(--ink-2);cursor:pointer}
.rg-fill:hover{border-color:var(--red);color:var(--red)}

/* Tin nhắn SMS chứa link eKYC */
.sms{border:1px solid var(--line);border-radius:16px;background:var(--bg);padding:16px;margin-bottom:18px}
.sms-head{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.sms-ic{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#e8f0ff;color:#1d4ed8;font-size:20px}
.sms-head b{display:block;font-size:15px}
.sms-head small{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.sms-bubble{background:#fff;border:1px solid var(--line);border-radius:14px;border-top-left-radius:4px;padding:14px 16px;font-size:14.5px;line-height:1.5}
.sms-bubble p{margin:0 0 8px}
.sms-bubble a{display:block;word-break:break-all;color:var(--blue);font-weight:600;text-decoration:underline}
.sms-exp{margin:10px 0 0!important;font-size:13px;color:var(--muted)}
.sms-exp b{font-variant-numeric:tabular-nums;color:var(--ink)}

/* Ô chụp ảnh giấy tờ – theo bố cục app: nhãn ở trên, khung ảnh ở dưới */
.photo-grid{display:grid;gap:14px;margin-bottom:6px}
.photo-grid.two{grid-template-columns:1fr 1fr}
.photo-grid.hide{display:none}
.photo-item{display:grid;gap:8px;align-content:start}
.photo-item>span{font-size:14px;font-weight:600;color:var(--ink-2);text-align:center}
.drop-zone>span{display:grid;justify-items:center;gap:6px;font-size:0;color:var(--blue);padding:10px}
.drop-zone svg{width:26px;height:26px}
.drop-zone b{font-size:14.5px;font-weight:700}
.req{color:var(--red)}
@media (max-width:520px){.photo-grid.two{grid-template-columns:1fr}}

/* ===== Chứng thực vé · truy vết blockchain ===== */
.tp-badge{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:linear-gradient(180deg,#f2f7ff,#eaf1ff);border:1px solid #cfe0f7;border-radius:14px;padding:11px 14px;font:inherit;color:#1e3a8a;cursor:pointer;margin-top:12px}
.tp-badge:hover{border-color:#8fb4ea}
.tp-badge svg{width:24px;height:24px;flex:none}
.tp-badge strong{display:block;font-size:14.5px}
.tp-badge small{display:block;font-size:12.5px;opacity:.8;margin-top:1px}
#ticket-proof{border:0;padding:0;background:none;max-width:520px;width:calc(100% - 28px);border-radius:18px;margin:auto}
#ticket-proof::backdrop{background:rgba(12,20,36,.55)}
.tp-panel{background:#fff;border-radius:18px;overflow:hidden;max-height:86vh;display:flex;flex-direction:column}
.tp-panel header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.tp-panel header h2{flex:1;margin:0;font-size:18px}
.tp-close,.tp-trace-back{border:0;background:var(--bg);width:34px;height:34px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-2)}
.tp-body{padding:16px;overflow-y:auto;display:grid;gap:14px}
.tp-hero{text-align:center;background:linear-gradient(180deg,#eef5ff,#fff);border:1px solid #d6e4f8;border-radius:16px;padding:18px}
.tp-hero svg{width:40px;height:40px;color:#1d4ed8}
.tp-hero h3{margin:8px 0 4px;font-size:18px}
.tp-hero p{margin:0;font-size:14px;color:var(--muted)}
.tp-hero span{display:inline-block;margin-top:10px;background:#fff6e5;border:1px solid #f0d9a8;color:#8a5a00;border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700}
.tp-card{border:1px solid var(--line);border-radius:14px;padding:14px}
.tp-card h3{margin:0 0 10px;font-size:15px}
.tp-card dl{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;margin:0;font-size:14px}
.tp-card dt{color:var(--muted)}
.tp-card dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.tp-card label{display:block;font-size:12.5px;color:var(--muted);margin-top:12px}
.tp-card code{display:block;margin-top:4px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;overflow-wrap:anywhere;color:var(--ink)}
.tp-copy{margin-top:12px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;font:inherit;font-weight:700;font-size:14px;cursor:pointer}
.tp-copy:hover{border-color:var(--red);color:var(--red)}
.tp-copy-status{margin:8px 0 0;font-size:13px;color:#166534}
.tp-check{border-radius:14px;padding:12px 14px;background:#e9f7ef;border:1px solid #b7e3c7;color:#166534}
.tp-check.mismatch{background:#fef2f2;border-color:#f4c2c2;color:#9f1239}
.tp-check strong{display:block;font-size:14.5px}
.tp-check p{margin:4px 0 0;font-size:13px;opacity:.9}
.tp-link{display:block;width:100%;text-align:center;background:var(--red);color:#fff;border:0;border-radius:12px;padding:13px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;text-decoration:none}
.tp-note{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.tp-trace-panel{height:86vh}
.tp-trace-frame{flex:1;width:100%;border:0}
.tp-trace-footer{padding:12px 16px;border-top:1px solid var(--line)}

/* ===== Tài khoản thanh toán / nhận thưởng ===== */
.pa-sec{margin-bottom:22px}
.pa-count{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pa-count h3{margin:0;font-size:17px}
.pa-count span{font-size:13px;color:var(--muted)}
.pa-sub{margin:2px 0 12px;font-size:13.5px;color:var(--muted)}
.pa-card{border:1.5px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;background:#fff}
.pa-card.primary{border-color:var(--red);box-shadow:0 2px 10px rgba(233,0,48,.07)}
.pa-card.locked{opacity:.72;background:var(--bg)}
.pa-card-top{display:flex;align-items:center;gap:11px}
.pa-bank{flex:none;min-width:46px;height:34px;border-radius:9px;color:#fff;font-weight:800;font-size:12.5px;display:grid;place-items:center;padding:0 7px}
.pa-card-top strong{display:block;font-size:15px}
.pa-card-top small{display:block;font-size:12.5px;color:var(--muted)}
.pa-card-top>div{flex:1;min-width:0}
.pa-badge{flex:none;background:var(--red-soft);color:var(--red);border-radius:999px;padding:3px 11px;font-size:12px;font-weight:800}
.pa-badge.lock{background:#eef2f7;color:var(--ink-2)}
.pa-number{display:flex;align-items:center;gap:8px;margin-top:12px}
.pa-number strong{font-size:17px;letter-spacing:1px;font-variant-numeric:tabular-nums}
.pa-number button{border:0;background:none;cursor:pointer;font-size:16px;opacity:.6;padding:2px 4px}
.pa-number button:hover{opacity:1}
.pa-owner-label{display:block;margin-top:10px;font-size:12px;color:var(--muted)}
.pa-owner{margin:2px 0 0;font-weight:700;font-size:14.5px}
.pa-card-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.pa-card-actions button,.pa-card-actions span{border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink-2)}
.pa-card-actions span{border-color:transparent;background:#e9f7ef;color:#166534;cursor:default}
.pa-card-actions button:hover:not([disabled]){border-color:var(--red);color:var(--red)}
.pa-card-actions button[disabled]{opacity:.45;cursor:not-allowed}
.pa-card-actions .pa-delete:hover{border-color:#b91c1c;color:#b91c1c}
.pa-card-actions .pa-on{border-color:#166534;color:#166534}
.pa-empty{border:1px dashed var(--line);border-radius:14px;padding:22px;text-align:center;color:var(--muted);font-size:14px}
.pa-add{width:100%;margin-top:4px}
.pa-info{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--bg);font-size:13.5px}
.pa-info strong{display:block;margin-bottom:6px;font-size:14.5px}
.pa-info p{margin:0 0 6px;color:var(--ink-2);line-height:1.5}
.pa-note{margin:0;font-size:12.5px;color:var(--muted)}
#acc-dlg{border:0;padding:0;background:none;max-width:460px;width:calc(100% - 28px);border-radius:18px;margin:auto}
#acc-dlg::backdrop{background:rgba(12,20,36,.55)}
.pa-panel{background:#fff;border-radius:18px;overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.pa-panel header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pa-panel header h2{flex:1;margin:0;font-size:18px}
.pa-form{padding:16px;overflow-y:auto;display:grid;gap:14px}
.pa-form-intro{margin:0;font-size:13.5px;color:var(--muted)}
.pa-form label{display:block;font-size:14px;font-weight:600}
.pa-form label em{color:var(--red);font-style:normal}
.pa-form .input{margin-top:6px}
.pa-form label small{display:block;margin-top:5px;font-size:12.5px;font-weight:400;color:var(--muted)}
.pa-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--line);border-radius:12px;padding:11px 13px}
.pa-switch small{display:block;font-size:12.5px;font-weight:400;color:var(--muted);margin-top:2px}
.pa-error:empty{display:none}
/* Giấy tờ & xác thực trong hồ sơ */
.pi-h3{margin:24px 0 10px;font-size:17px}
.pi-rows{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pi-rows>div{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 14px;font-size:14px;border-bottom:1px solid var(--line)}
.pi-rows>div:last-child{border-bottom:0}
.pi-rows span{color:var(--muted)}
.pi-rows b{text-align:right;overflow-wrap:anywhere}
.ok-txt{color:#166534}

/* ===== Thông báo ===== */
.nt-bell{position:relative}
.nt-bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;border-radius:999px;background:var(--red);color:#fff;font-size:11px;font-weight:800;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.notifications-screen{background:#fff;border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.nt-header{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.nt-header h1{flex:1;margin:0;font-size:20px;display:flex;align-items:center;gap:9px}
.nt-header h1 svg{width:22px;height:22px}
.nt-back,.nt-readall{border:0;background:var(--bg);width:36px;height:36px;border-radius:50%;font-size:19px;line-height:1;cursor:pointer;color:var(--ink-2);display:grid;place-items:center;text-decoration:none;flex:none}
.nt-readall[disabled]{opacity:.4;cursor:default}
.nt-count{background:var(--red);color:#fff;border-radius:999px;font-size:11.5px;font-weight:800;padding:1px 8px;margin-left:4px}
.nt-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px 16px 0}
.nt-tab{border:0;background:var(--bg);border-radius:11px;padding:11px;font:inherit;font-weight:700;font-size:14.5px;color:var(--ink-2);cursor:pointer}
.nt-tab.active{background:var(--red-soft);color:var(--red)}
.nt-filter{padding:12px 16px}
.nt-list{padding:0 10px 12px}
.nt-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;background:none;padding:13px 8px;border-radius:12px;font:inherit;cursor:pointer;border-bottom:1px solid var(--line)}
.nt-row:last-child{border-bottom:0}
.nt-row:hover{background:var(--bg)}
.nt-icon{position:relative;flex:none;width:42px;height:42px;border-radius:12px;background:var(--bg);display:grid;place-items:center;font-size:19px;color:var(--ink-2)}
.nt-icon svg{width:21px;height:21px}
.nt-row.big .nt-icon{background:#fff3d6}
.nt-icon i{position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:var(--red)}
.nt-copy{flex:1;min-width:0}
.nt-copy strong{display:block;font-size:14.8px;line-height:1.35}
.nt-copy span{display:block;font-size:13.2px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nt-copy time{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.nt-row.unread .nt-copy strong{font-weight:800}
.nt-arrow{flex:none;color:var(--muted);font-size:20px}
.nt-empty{padding:40px 16px;text-align:center;color:var(--muted);font-size:14.5px}
.nt-detail{padding:18px}
.nt-detail-type{display:inline-block;background:var(--red-soft);color:var(--red);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:800}
.nt-detail h2{margin:12px 0 6px;font-size:20px;line-height:1.3}
.nt-detail time{display:block;font-size:13px;color:var(--muted)}
.nt-detail p{margin:14px 0;font-size:15px;line-height:1.65}
.nt-detail small{color:var(--muted);font-size:12.5px}

/* Pop-up trúng giải lớn */
#prize-popup{position:fixed;inset:0;margin:auto;width:min(360px,calc(100vw - 32px));max-width:none;height:fit-content;max-height:calc(100dvh - 40px);padding:0;border:1px solid #efd58a;border-radius:24px;background:linear-gradient(160deg,#fff9e6,#ffedb3);box-shadow:0 20px 65px rgba(48,19,33,.4);overflow:auto;color:#772422;animation:kp-pop .35s cubic-bezier(.2,.9,.3,1.2)}
#prize-popup::backdrop{background:rgba(22,17,41,.7);backdrop-filter:blur(5px)}
.prize-popup-close{position:absolute;z-index:2;right:10px;top:8px;width:40px;height:40px;border:0;border-radius:50%;font-size:28px;line-height:1;color:#733527;background:rgba(255,255,255,.6);cursor:pointer}
.prize-popup-content{display:flex;flex-direction:column;align-items:center;width:100%;padding:22px 16px 24px;background:transparent;border:0;color:inherit;font:inherit;cursor:pointer}
.prize-popup-demo{font-size:11px;letter-spacing:1px;color:#88623b;padding-right:25px}
.prize-popup-content img{width:min(100%,270px);height:min(40dvh,338px);object-fit:contain;display:block;margin:4px auto}
.prize-popup-cta{display:block;border-radius:12px;background:#d50032;color:#fff;font-size:15px;font-weight:700;padding:13px 18px}
@keyframes kp-pop{0%{transform:scale(.65);opacity:.3}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){#prize-popup{animation:none}}

/* ---- Khiếu nại & góp ý ---- */
.sp-wrap{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.sp-head h2{margin:0 0 4px;font-size:22px}
.sp-head p{margin:0;color:var(--muted);font-size:14px}
.sp-tabs{display:flex;gap:8px;margin:16px 0 18px;background:var(--bg);padding:5px;border-radius:12px}
.sp-tabs button{flex:1;border:0;background:none;font:inherit;font-size:14px;font-weight:700;color:var(--ink-2);padding:9px 10px;border-radius:9px;cursor:pointer}
.sp-tabs button.on{background:#fff;color:var(--red);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.sp-form{display:grid;gap:15px}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.sp-f{display:block}
.sp-f>span{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.sp-f>span i{color:var(--red);font-style:normal}
.sp-f textarea{resize:vertical;min-height:110px}
.sp-count{display:block;text-align:right;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:5px}
.sp-hint{display:block;font-style:normal;font-size:12.5px;color:var(--muted);margin-top:7px}
.sp-files{display:flex;flex-wrap:wrap;gap:10px}
.sp-file{position:relative;margin:0;width:82px;height:82px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--bg)}
.sp-file img{width:100%;height:100%;object-fit:cover;display:block}
.sp-file button{position:absolute;top:3px;right:3px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:15px;line-height:1;cursor:pointer}
.sp-file.add{border-style:dashed;display:grid;place-items:center;font-size:26px;color:var(--muted);cursor:pointer}
.sp-file.add:hover{border-color:var(--red);color:var(--red)}
.sp-submit{width:100%}
.sp-foot{margin:0;font-size:12.5px;color:var(--muted);text-align:center}
.sp-list{display:grid;gap:11px}
.sp-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.sp-item summary{display:grid;grid-template-columns:auto auto;gap:5px 10px;padding:14px;cursor:pointer;list-style:none;align-items:center}
.sp-item summary::-webkit-details-marker{display:none}
.sp-id{font-weight:800;font-size:15px}
.sp-pill{justify-self:end;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:800}
.sp-pill.wait{background:#fff4d6;color:#a16207}
.sp-pill.done{background:#e9f7ef;color:#166534}
.sp-pill.recv{background:#eef2f7;color:var(--ink-2)}
.sp-item summary em{grid-column:1/-1;font-style:normal;font-size:13.5px;color:var(--ink-2)}
.sp-item summary small{grid-column:1/-1;font-size:12.5px;color:var(--muted)}
.sp-body{padding:0 14px 14px;border-top:1px dashed var(--line);margin-top:2px;padding-top:12px}
.sp-body dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 10px;font-size:13.5px}
.sp-body dt{color:var(--muted)}
.sp-body dd{margin:0;font-weight:600;text-align:right}
.sp-msg{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2)}
.sp-att{margin:8px 0 0;font-size:13px;color:var(--muted)}
.sp-reply{margin-top:12px;background:var(--bg);border-radius:12px;padding:12px}
.sp-reply strong{display:block;font-size:13px;color:var(--red);margin-bottom:5px}
.sp-reply p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
@media (max-width:640px){.sp-grid{grid-template-columns:1fr}.sp-wrap{padding:18px 15px}}

/* ---- Sản phẩm có Jackpot cao nhất (theo app) ---- */
.prow.r-lead{background:linear-gradient(105deg,#e51b2b 0%,#b80f22 100%);color:#fff;isolation:isolate;box-shadow:0 4px 16px rgba(166,13,32,.22)}
.prow.r-lead .pr-logo{border-right-color:rgba(255,229,138,.45)}
.prow.r-lead .pr-amt{color:#ffe58a}
.prow.r-lead .pr-lbl,.prow.r-lead small,.prow.r-lead .pr-cd{color:#fff}
.prow.r-lead .pr-go{color:#ffe58a}
.prow.r-lead .pr-jb{background:#ffe58a;color:#a20c1e;white-space:nowrap}
.prow.r-lead>:not(.pr-ingots){position:relative;z-index:1}
.pr-ingots{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.pr-ingots i{position:absolute;display:block;background:url('../img/brand/ingot-gold.webp') center/contain no-repeat;opacity:.26;filter:blur(.45px)}
.pr-ingots i:nth-child(1){width:104px;height:69px;left:-16px;top:8px;transform:rotate(-17deg)}
.pr-ingots i:nth-child(2){width:98px;height:65px;left:40%;bottom:-10px;transform:rotate(15deg)}
.pr-ingots i:nth-child(3){width:150px;height:100px;right:-8px;bottom:-12px;transform:rotate(-12deg)}
@media (max-width:700px){.pr-ingots i:nth-child(1){width:74px;height:49px}.pr-ingots i:nth-child(2){width:68px;height:45px}.pr-ingots i:nth-child(3){width:104px;height:69px}}

/* ---- Thần Tài Học ---- */
.tth-acts-grid{display:grid;gap:12px}
.tth-launch{display:flex;align-items:center;gap:14px;width:100%;text-align:left;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:14px;font:inherit;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.tth-launch:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.08);border-color:var(--red)}
.tth-launch>img{width:56px;height:56px;object-fit:contain;flex:none}
.tth-launch>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.tth-launch strong{font-size:16px}
.tth-launch small{color:var(--muted);font-size:13px}
.tth-launch>b{color:var(--red);font-size:18px}
.tth-trio{flex:none;display:flex;width:64px}
.tth-trio img{width:30px;height:30px;object-fit:contain;margin-right:-13px}
#tt-lucky,#tt-ai{border:0;padding:0;background:none;max-width:540px;width:calc(100% - 28px);margin:auto;max-height:90vh}
#tt-lucky::backdrop,#tt-ai::backdrop{background:rgba(16,12,10,.55)}
.tth-panel{background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.tth-panel>header{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--line)}
.tth-panel>header img{width:40px;height:40px;object-fit:contain;flex:none}
.tth-panel>header>div{flex:1;min-width:0}
.tth-panel>header h2{flex:1;margin:0;font-size:18px}
.tth-panel>header small{display:block;font-size:12.5px;color:var(--muted)}
.tth-x{flex:none;border:0;background:var(--bg);width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-2)}
.tth-panel>main{padding:16px;overflow-y:auto}
.tth-hero{text-align:center;margin-bottom:14px}
.tth-hero img{width:84px;height:84px;object-fit:contain}
.tth-hero h3{margin:4px 0 2px;font-size:18px}
.tth-hero p{margin:0;font-size:13px;color:var(--muted)}
.tth-card{border:1.5px solid var(--line);border-radius:14px;padding:13px;margin-bottom:11px}
.tth-card-top{display:flex;align-items:center;gap:9px}
.tth-card-top b{flex:1;font-size:15px}
.tth-logo{flex:none;display:grid;place-items:center}
.tth-seq{flex:none;background:var(--red-soft);color:var(--red);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800}
.tth-card>small{display:block;margin-top:5px;font-size:12.5px;color:var(--muted)}
.tth-balls{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 8px}
.tth-slot{width:38px;height:38px;border-radius:10px;background:var(--bg);display:grid;place-items:center;font-weight:800;font-size:16px;position:relative;overflow:hidden}
.tth-slot.tth-gap{margin-left:12px}
.tth-slot.tth-extra{width:auto;min-width:52px;padding:0 8px;gap:3px;grid-auto-flow:column;background:var(--red-soft);color:var(--red)}
.tth-slot.tth-extra small{font-size:10px;font-weight:800}
.tth-hidden{display:grid;place-items:center;width:100%;height:100%;background:linear-gradient(135deg,#fff4d0,#f7d78b)}
.tth-hidden img{width:26px;height:22px;object-fit:contain}
.tth-card>p{margin:0;font-size:13px;color:var(--muted)}
.tth-card>p strong{color:var(--ink);font-size:14.5px}
.tth-again{width:100%;margin-top:2px}
.tth-note{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted);text-align:center}
.tth-foot{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--line);background:var(--bg)}
.tth-foot>div{flex:1;min-width:0;display:flex;flex-direction:column}
.tth-foot small{font-size:12px;color:var(--muted)}
.tth-foot strong{font-size:19px;line-height:1.25}
.tth-demo{margin:0;padding:8px 16px;background:#fff8e6;color:#8a5a00;font-size:12.5px;font-weight:700;text-align:center}
.tth-log{padding:14px 16px;overflow-y:auto;flex:1;min-height:180px;max-height:46vh;display:flex;flex-direction:column;gap:11px}
.tth-msg{max-width:88%}
.tth-msg small{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.tth-msg p{margin:0;white-space:pre-wrap;font-size:14px;line-height:1.55;padding:10px 13px;border-radius:14px;background:var(--bg)}
.tth-msg.me{align-self:flex-end;text-align:right}
.tth-msg.me p{background:var(--red);color:#fff;text-align:left}
.tth-acts{display:flex;gap:8px;flex-wrap:wrap}
.tth-acts button,.tth-acts a{border:1px solid var(--red);color:var(--red);background:#fff;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none}
.tth-prompts{display:flex;gap:7px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
.tth-prompts::-webkit-scrollbar{display:none}
.tth-prompts button{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 13px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.tth-prompts button:hover{border-color:var(--red);color:var(--red)}
.tth-compose{display:flex;gap:9px;padding:12px 16px;border-top:1px solid var(--line);align-items:flex-end}
.tth-compose textarea{flex:1;border:1px solid var(--line);border-radius:14px;padding:10px 13px;font:inherit;font-size:14px;resize:none;max-height:110px}
.tth-compose button{flex:none;border:0;background:var(--red);color:#fff;border-radius:999px;padding:10px 18px;font:inherit;font-weight:700;cursor:pointer}
.tth-compose button[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:480px){.tth-launch>img{width:46px;height:46px}.tth-slot{width:34px;height:34px;font-size:15px}}

/* ---- Hạn mức theo từng sản phẩm ---- */
.pl-intro{margin:0 0 14px;color:var(--muted);font-size:14px}
.pl-sec{margin:20px 0 12px;font-size:17px}
.pl-sec:first-of-type{margin-top:0}
.pl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.pl-card{background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:16px}
.pl-card.pl-near{border-color:#e9a13b}
.pl-card.pl-full{border-color:#b91c1c}
.pl-card>header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.pl-logo{flex:none;display:grid;place-items:center}
.pl-card>header>div{flex:1;min-width:0}
.pl-card h3{margin:0;font-size:16px}
.pl-card>header p{margin:1px 0 0;font-size:12.5px;color:var(--muted)}
.pl-badge{flex:none;background:#e9f7ef;color:#166534;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:800;white-space:nowrap}
.pl-near .pl-badge{background:#fff4d6;color:#a16207}
.pl-full .pl-badge{background:var(--red-soft);color:var(--red-2)}
.pl-cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.pl-cap span{font-size:13px;color:var(--muted)}
.pl-cap strong{font-size:20px}
.pl-cap small{font-size:12.5px;color:var(--muted);font-weight:600}
.pl-meter{display:block;margin-top:11px}
.pl-meter span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.pl-meter progress{width:100%;height:9px;border:0;border-radius:999px;background:var(--bg);-webkit-appearance:none;appearance:none}
.pl-meter progress::-webkit-progress-bar{background:var(--bg);border-radius:999px}
.pl-meter progress::-webkit-progress-value{background:linear-gradient(90deg,var(--red-2),var(--red));border-radius:999px}
.pl-meter progress::-moz-progress-bar{background:var(--red);border-radius:999px}
.pl-near .pl-meter progress::-webkit-progress-value{background:#e9a13b}
.pl-full .pl-meter progress::-webkit-progress-value{background:#b91c1c}
.pl-amounts{display:flex;gap:18px;margin:12px 0 0}
.pl-amounts dt{font-size:12.5px;color:var(--muted)}
.pl-amounts dd{margin:1px 0 0;font-weight:800;font-size:15px}
.pl-note{margin:10px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}
.pl-buys{margin-top:12px;border-top:1px dashed var(--line);padding-top:10px}
.pl-buys summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--red);list-style:none}
.pl-buys summary::-webkit-details-marker{display:none}
.pl-buys summary::after{content:' ›'}
.pl-buys[open] summary::after{content:' ⌄'}
.pl-buys>div{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.pl-buys>div:last-child{border:0}
.pl-buys>div span{flex:1;min-width:0}
.pl-buys>div b{display:block}
.pl-buys>div small{display:block;color:var(--muted);font-size:12px}
.pl-empty{color:var(--muted);justify-content:center}
.pl-acts{margin-top:12px}
.pl-acts .btn{width:100%}
.pl-foot{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.6}

/* ---- Thần tài luận số (nhóm chat Keno) ---- */
.kc-launch{position:fixed;right:18px;bottom:112px;z-index:96;display:flex;align-items:center;gap:7px;border:0;border-radius:999px;background:linear-gradient(135deg,var(--red-2),var(--red));color:#fff;padding:11px 16px;font:inherit;font-weight:800;font-size:14px;cursor:grab;box-shadow:0 8px 22px rgba(190,10,45,.35);touch-action:none;user-select:none}
.kc-launch svg{width:19px;height:19px}
.kc-launch:active,.kc-launch.kc-drag{cursor:grabbing;transform:scale(.97)}
#keno-chat{border:0;padding:0;background:none;max-width:460px;width:calc(100% - 24px);margin:auto;max-height:86vh}
#keno-chat::backdrop{background:rgba(16,12,10,.55)}
.kc-panel{background:#fff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;max-height:86vh}
.kc-panel>header{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.kc-panel>header>div{flex:1;min-width:0}
.kc-panel h2{margin:0;font-size:18px}
.kc-panel>header p{margin:2px 0 0;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kc-dot{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 3px #16a34a22}
.kc-x{flex:none;border:0;background:var(--bg);width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;color:var(--ink-2)}
.kc-notice{background:#fff8e6;color:#8a5a00;font-size:12.5px;font-weight:700;padding:8px 16px;text-align:center}
.kc-list{flex:1;min-height:200px;max-height:52vh;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.kc-msg{display:flex;gap:9px;align-items:flex-start}
.kc-av{flex:none;width:34px;height:34px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:800}
.kc-bub{flex:1;min-width:0;position:relative;background:var(--bg);border-radius:14px;padding:9px 34px 9px 12px}
.kc-meta{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.kc-meta strong{font-size:13.5px}
.kc-meta small,.kc-meta time{font-size:11.5px;color:var(--muted)}
.kc-bub p{margin:0;font-size:14px;line-height:1.55}
.kc-msg.kc-mine{flex-direction:row-reverse}
.kc-msg.kc-mine .kc-bub{background:var(--red-soft)}
.kc-heart{position:absolute;right:8px;top:8px;border:0;background:none;font-size:16px;line-height:1;cursor:pointer;color:#c9c3bd;padding:2px}
.kc-heart.on{color:var(--red)}
.kc-compose{display:flex;gap:8px;align-items:center;padding:11px 14px;border-top:1px solid var(--line)}
.kc-emo{flex:none;border:1px solid var(--line);background:#fff;width:36px;height:36px;border-radius:50%;font-size:17px;cursor:pointer}
.kc-compose input{flex:1;min-width:0;border:1px solid var(--line);border-radius:999px;padding:9px 15px;font:inherit;font-size:14px}
.kc-send{flex:none;border:0;background:var(--red);color:#fff;border-radius:999px;padding:9px 17px;font:inherit;font-weight:700;cursor:pointer}
.kc-send[disabled]{opacity:.45;cursor:not-allowed}
@media (max-width:480px){.kc-launch{bottom:96px;right:12px;padding:10px 13px;font-size:13px}.kc-list{max-height:46vh}}

/* ---- Bingo18 (theo app) ---- */
.b18-app{background:#08432e;color:#fff;border-radius:18px;padding:15px 12px 18px;max-width:480px;margin:0 auto}
.b18-app button{font:inherit;border:0;cursor:pointer}
.b18-tabs{display:flex;margin:0 auto 15px;width:84%;border-radius:9px;overflow:hidden;background:#11664b}
.b18-tabs button{flex:1;padding:12px 3px;color:#fff;font-size:15px;white-space:nowrap;background:none}
.b18-tabs .active{background:#5abf43;font-weight:700}
.b18-status{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin:0 2px 12px}
.b18-status>div{display:grid;gap:3px}
.b18-status small{font-size:12px;white-space:nowrap;color:#cfe6d8}
.b18-status b{font-size:20px;white-space:nowrap;letter-spacing:.5px}
.b18-timer{font-size:29px;font-weight:800;font-variant-numeric:tabular-nums;background:#116b51;border-radius:9px;padding:10px 8px;line-height:1}
.b18-dice{text-align:right}
.b18-dice b{font-size:19px}
.b18-hist{display:flex;align-items:center;gap:2px;overflow:hidden;white-space:nowrap;background:#15593d;border-radius:6px;padding:5px 4px}
.b18-hist span{color:#b1d37b;font-size:11px;margin-right:2px}
.b18-hist i{font-style:normal;font-size:11px;min-width:19px;height:20px;line-height:20px;border-radius:6px;text-align:center;background:#f9ba25;color:#08432e;font-weight:700}
.b18-hist i:nth-child(3n){background:#f7eee0}
.b18-ticker{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;padding:9px 0;color:#d9e6c7}
.b18-h{text-align:center;font-size:14px;margin:14px 0 8px;color:#fff;font-weight:700}
.b18-h span{font-weight:400;color:#d9e6c7}
.b18-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:4px}
.b18-cell{position:relative;overflow:hidden;padding:0}
.b18-cell.choice{min-height:92px;background:radial-gradient(circle at center,#2ca46e,#006448 75%);border:2px solid #11775a;color:#fff;border-radius:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.b18-cell.choice strong{font-family:Georgia,serif;font-weight:900;text-shadow:1px 2px 2px #043821;font-size:25px}
.b18-cell.choice.tie strong{color:#ffcb38}
.b18-cell.choice.large strong{color:#f59b44}
.b18-cell.choice small{font-weight:700;font-size:12px}
.b18-cell.choice em{position:absolute;right:5px;top:4px;font-size:11px;font-style:normal;color:#d9f2df}
.b18-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.b18-grid.full{grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}
.b18-cell.number{min-height:70px;background:linear-gradient(125deg,#f1ca83,#ffe7ad 52%,#e9b86e);color:#06432f;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.b18-cell.number strong{font-family:Georgia,serif;font-size:30px;line-height:1;font-weight:900}
.b18-cell.number em{font-style:normal;font-size:12px;color:#155035;margin-top:5px}
.b18-grid.full .number{min-height:54px}
.b18-grid.full .number strong{font-size:21px}
.b18-grid.full .number em{font-size:10px;margin-top:2px}
.b18-cell.chosen,.b18-sp.chosen{outline:2px solid #f63935;outline-offset:-2px}
.b18-cell.chosen strong{color:#ca1130}
.b18-mascot{object-fit:contain}
.b18-cell .b18-mascot,.b18-sp .b18-mascot{position:absolute;right:2px;bottom:2px;width:25px;height:25px;filter:drop-shadow(0 1px 1px rgba(68,51,51,.5))}
.b18-sprow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;background:#12664a;border-radius:8px;padding:3px}
.b18-sprow.pair-row,.b18-sprow.single-row{grid-template-columns:repeat(6,minmax(0,1fr))}
.b18-sp{position:relative;min-width:0;overflow:hidden;min-height:70px;background:#176d4e;display:grid;place-items:center;border-radius:3px}
.b18-sp:nth-child(even){background:#095239}
.b18-balls{display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:0;width:100%}
.b18-ball{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 70% 25%,#fff7c6 0 8%,#ffcf64 20%,#f9a624 70%,#d9790b 100%);color:#07452d;font-family:Georgia,serif;font-size:17px;font-weight:900;box-shadow:inset -2px -2px 3px #a95d23}
.b18-sp.triple .b18-balls{max-width:52px;margin:0 auto}
.b18-sp.triple .b18-ball:last-child{margin:1px auto 0}
.b18-sp.pair{min-height:68px}
.b18-sp.pair .b18-balls{flex-direction:column;align-items:center}
.b18-sp.single{min-height:58px}
.b18-sp.single .b18-ball{width:33px;height:33px;font-size:22px}
.b18-foot{position:relative;background:#08432e;padding:12px 0 4px;margin-top:10px}
.b18-week{display:flex;align-items:center;gap:6px;text-align:left;color:#f3dd9b;background:none}
.b18-week .b18-mascot{position:static;width:40px;height:40px;background:#ffad3d;border-radius:50%}
.b18-week span,.b18-sub{display:grid;gap:2px}
.b18-week strong,.b18-sub strong{font-size:17px}
.b18-week small,.b18-sub small{font-size:11px;color:#fff}
.b18-sub{position:absolute;right:0;top:12px;text-align:right}
.b18-btns{display:grid;grid-template-columns:2fr 3fr;gap:7px;margin-top:10px}
.b18-btns button{height:42px;border-radius:5px;background:#fff;color:#08432e;font-weight:800;font-size:16px}
.b18-btns button:last-child{background:#f3d48d}
.b18-demo{text-align:center;color:#8ab4a3;font-size:11px;margin:11px 0 0}
#b18-wager{background:#116b4d;color:#fff;border:0;max-width:420px;width:calc(100% - 24px);margin:auto;max-height:calc(100vh - 24px);overflow:auto;padding:22px 20px;border-radius:17px}
#b18-wager::backdrop{background:rgba(0,29,22,.73)}
#b18-wager button{font:inherit;border:0;cursor:pointer}
.b18-x{float:right;color:#fff;background:none;font-size:32px;line-height:1;padding:0}
#b18-wager p{text-align:center;color:#d9e9ce;font-size:16px;margin:10px 0 16px;clear:both}
#b18-wager p strong{color:#fff}
.b18-wchoice{text-align:center;display:grid;gap:9px;font-size:18px;margin-bottom:10px}
.b18-wchoice b{background:radial-gradient(#83be70,#116b4d 75%);padding:6px}
.b18-wamt{display:flex;align-items:center;justify-content:space-between;gap:5px}
.b18-wamt>button{background:#d9ef92;color:#006247;border-radius:50%;width:48px;height:48px;font-size:29px;font-weight:800;flex:none}
.b18-sycee{width:180px;height:108px;position:relative;display:grid;place-items:center;color:#182a40}
.b18-sycee.gold{color:#4b2806}
.b18-sycee img{width:100%;height:100%;object-fit:contain}
.b18-sycee strong,.b18-sycee small{position:absolute;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,.6)}
.b18-sycee strong{font-size:21px;top:32px}
.b18-sycee small{font-size:15px;font-weight:800;top:62px}
.b18-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0 20px}
.b18-presets button{height:43px;border:1px solid #cde789;border-radius:999px;color:#d9ef92;background:none;font-size:15px}
.b18-presets button.active{background:#d9ef92;color:#0b6349;font-weight:800}
.b18-ok{background:#d9ef92;color:#006247;width:100%;border-radius:9px;min-height:48px;font-weight:800;font-size:16px}
@media (max-width:440px){.b18-sp.triple .b18-balls{max-width:44px}.b18-ball{width:21px;height:21px;font-size:14px}}
@media (max-width:400px){.b18-status b{font-size:17px}.b18-timer{font-size:25px}.b18-ball{width:21px;height:21px;font-size:14px}.b18-sp.triple .b18-ball:last-child{margin:0 16px}.b18-wamt>button{width:40px;height:40px;font-size:24px}.b18-cell.number strong{font-size:25px}}
.b18-head{display:flex;align-items:center;gap:14px;margin:6px 0 16px}
.b18-head-logo{flex:none;display:grid;place-items:center}
.b18-head>div{flex:1;min-width:0}
.b18-head h1{margin:0;font-size:28px}
.b18-head p{margin:2px 0 0;color:var(--muted);font-size:14px}
@media (max-width:560px){.b18-head h1{font-size:23px}.b18-head p{font-size:13px}.b18-head .btn{display:none}}
.b18-die{width:17px;height:17px;vertical-align:-3px;margin-left:3px}
.b18-die rect{fill:#fff;stroke:#0a4d36;stroke-width:.9}
.b18-die circle{fill:#0a4d36}
.pa-form .pa-switch{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pa-switch input{flex:none;appearance:none;-webkit-appearance:none;width:44px;height:26px;border-radius:999px;background:#d7dbe2;position:relative;cursor:pointer;transition:background .2s;margin:0}
.pa-switch input::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.pa-switch input:checked{background:var(--red)}
.pa-switch input:checked::after{transform:translateX(18px)}
.mt-accs{display:grid;gap:10px}
button.mt-acc{width:100%;font:inherit;text-align:left;cursor:pointer;color:inherit}
.mt-acc.on{border-color:var(--red);box-shadow:0 0 0 3px rgba(233,0,48,.08)}
.mt-acc.on .ch{color:var(--red)}
.mt-acc .ch{font-size:18px}
/* chuông thông báo luôn hiện, kể cả trên di động */
.hright .nt-bell{display:grid!important;flex:none}
.drawer .drawer-user{display:flex;width:100%;font-size:14px;padding:8px 12px 8px 8px;border-radius:14px;margin-bottom:10px}
.drawer .drawer-user span{display:flex;flex-direction:column;line-height:1.3}
.drawer .drawer-user small{font-weight:500;color:var(--muted);font-size:12.5px}
@media (max-width:600px){.hright .nt-bell{width:38px;height:38px}}
/* Header rộng hơn nội dung để đủ chỗ cho menu + chuông + chip người dùng */
.hbar.wrap{max-width:1640px}
@media (max-width:1640px){.hright:has(.nt-bell) > a.hicon:not(.nt-bell){display:none}}
@media (max-width:1400px){.nav,.hright .auth-btns{display:none!important}.burger{display:block}}
.tc-main .tp-badge{margin-top:10px;width:100%}
/* Chứng thực mô phỏng: màu xanh lá như app */
.tp-badge{background:#eefaf3;border-color:#bfe6cf;color:#166534}
.tp-badge:hover{border-color:#6fc496}
.tp-badge small{color:#15803d;opacity:1}
.tc-logo .plw{max-width:100%;height:auto;aspect-ratio:1}
/* Nút Thêm vào giỏ + Mua vé */
.b18-btns{grid-template-columns:1fr 1.2fr 1.2fr}
.b18-btns button:nth-child(2){background:#fff}
.b18-btns button:last-child{background:#f3d48d}
.tth-foot>.tth-foot-btns{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;flex:none}
.tth-foot-btns .btn{white-space:nowrap}
.tth-foot-btns .btn{padding:11px 16px}
.tth-acts .tth-buy{background:var(--red);color:#fff}
.kb-checkout .kb-btns{display:flex;gap:8px}
.kb-cart{height:52px;border:2px solid #f00621;border-radius:12px;background:#fff;color:#f00621;font:inherit;font-size:17px;font-weight:700;cursor:pointer;padding:0 14px}
.kb-cart:disabled{opacity:.55;cursor:not-allowed}
.tc-acts{display:flex;gap:14px;align-items:center}
.tc-again.tc-buy{background:var(--red);color:#fff;border-radius:999px;padding:5px 14px}
.fr-a{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* Số may mắn hôm nay — mua luôn dãy số gợi ý */
.tt-row-a{width:100%;margin-top:2px}
.tt-row-a .btn{flex:0 0 auto}
.tt-row-p{margin-left:auto;font-size:13px;font-weight:700;color:var(--ink-2)}
.tt-row-p small{font-weight:500;color:var(--muted)}
@media (max-width:420px){.tt-row-a .btn{flex:1 1 0;min-width:0}.tt-row-p{width:100%;margin-left:0;text-align:right}}
@media (max-width:480px){.tth-foot{flex-wrap:wrap}.tth-foot-btns{width:100%}.tth-foot-btns .btn{flex:1}.kb-cart{font-size:15px;padding:0 10px}.b18-btns button{font-size:14px}}
/* ---- Thần Tài Học: thẻ ngang theo giao diện app ---- */
.tth-acts-grid{gap:12px}
.tth-launch{position:relative;display:flex;align-items:stretch;width:100%;min-height:106px;padding:12px 14px;overflow:hidden;border:1px solid transparent;border-radius:12px;text-align:left;box-shadow:0 7px 18px rgba(32,24,48,.12)}
.tth-launch:hover{transform:translateY(-2px);filter:saturate(1.06);box-shadow:0 10px 22px rgba(32,24,48,.17)}
.tth-launch:focus-visible{outline:3px solid #17255e;outline-offset:3px}
.tth-launch>.tth-copy{position:relative;z-index:2;display:flex;flex:0 1 68%;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;max-width:290px}
.tth-launch>img{position:absolute;z-index:1;right:0;bottom:0;width:48%;height:100%;object-fit:contain;object-position:right center;filter:drop-shadow(0 3px 5px rgba(60,10,10,.2));pointer-events:none}
.tth-launch strong{display:flex;align-items:center;gap:8px;font-size:22px;line-height:1.3;font-weight:800;color:#fff}
.tth-launch small{display:block;margin-top:1px;font-size:15px;line-height:1.35;color:rgba(255,255,255,.94)}
.tth-launch em{display:block;margin-top:auto;padding-top:7px;font-size:11px;line-height:1.15;font-style:normal;font-weight:800;color:#fff}
.tth-launch em i{font-size:17px;line-height:0;vertical-align:-1px;font-style:normal}
.tth-launch.tth-lucky{background:linear-gradient(112deg,#b61713 0%,#d92d17 58%,#ec4d20 100%);border-color:#e87238}
.tth-lucky>img{right:0;bottom:0;width:50%;height:100%;object-position:right center;filter:drop-shadow(0 3px 6px rgba(75,10,0,.25))}
.tth-launch.tth-ai-card{background:linear-gradient(112deg,#4d2b95 0%,#6840ad 62%,#6843a9 100%);border-color:#8b68c4}
.tth-ai-card .tth-hot{display:inline-block;padding:2px 8px;border-radius:999px;background:#f04479;color:#fff;font-size:9px;line-height:1.35;font-weight:800}
.tth-ai-card .tth-star-art{position:absolute;z-index:1;right:8%;top:50%;width:auto;font-size:104px;line-height:1;color:rgba(208,181,255,.45);text-shadow:0 0 16px rgba(225,201,255,.28);transform:translateY(-52%) rotate(15deg);pointer-events:none}
.tth-ai-card .tth-star-art::after{content:'✦';position:absolute;top:8px;right:-27px;font-size:34px;color:rgba(224,205,255,.48)}
.tth-launch.tth-group{background:linear-gradient(112deg,#006657 0%,#087e72 61%,#119786 100%);border-color:#39a99a}
.tth-group>.tth-group-art{position:absolute;z-index:1;top:50%;right:0;width:50%;height:100%;object-fit:contain;object-position:right center;transform:translateY(-50%);filter:none;pointer-events:none}
@media (min-width:700px){.tth-launch{min-height:106px;padding:12px 17px}.tth-launch>.tth-copy{flex-basis:64%}.tth-launch strong{font-size:22px}.tth-launch small{font-size:15px}.tth-launch em{font-size:11px}.tth-lucky>img{width:50%;height:100%}.tth-ai-card .tth-star-art{right:12%;font-size:100px}}
@media (max-width:699px){.tth-group>.tth-group-art{width:100%;height:100%}}
@media (max-width:380px){.tth-launch{min-height:104px;padding:11px 12px}.tth-launch>.tth-copy{flex-basis:68%}.tth-launch strong{font-size:20px}.tth-launch small{font-size:14px}.tth-lucky>img{right:0;width:50%;height:100%}}
/* Hỗ trợ: 2 tab riêng */
.ht-tabbar{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:72px;z-index:40}
.ht-tabs{display:flex;gap:6px}
.ht-tabs a{padding:14px 16px;font-weight:700;color:var(--ink-2);border-bottom:3px solid transparent;white-space:nowrap}
.ht-tabs a.on{color:var(--red);border-bottom-color:var(--red)}
@media (max-width:480px){.ht-tabs a{flex:1;text-align:center;padding:13px 6px;font-size:14px}}
/* Nút trúng lớn (góc trái trang chủ) */
.bigwin-fab{position:fixed;left:18px;bottom:22px;z-index:90;display:flex;align-items:center;gap:8px;border:2px solid #ffd76a;border-radius:999px;background:linear-gradient(120deg,#b3001e,#ee1c35 60%,#ff5a3c);color:#fff;padding:5px 16px 5px 5px;font:inherit;cursor:pointer;box-shadow:0 10px 26px rgba(179,0,30,.35);animation:bwPulse 2.4s ease-in-out infinite}
.bigwin-fab img{width:42px;height:42px;border-radius:50%;background:#ffe9a8;object-fit:contain;padding:2px}
.bigwin-fab span{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.bigwin-fab small{font-size:11px;font-weight:700;color:#ffe7a0;text-transform:uppercase;letter-spacing:.4px}
.bigwin-fab b{font-size:15px;font-weight:900}
.bigwin-fab:hover{transform:translateY(-2px)}
@keyframes bwPulse{0%,100%{box-shadow:0 10px 26px rgba(179,0,30,.35)}50%{box-shadow:0 10px 26px rgba(179,0,30,.35),0 0 0 8px rgba(255,215,106,.25)}}
@media (max-width:600px){.bigwin-fab{left:12px;bottom:16px;padding:4px 12px 4px 4px}.bigwin-fab img{width:36px;height:36px}.bigwin-fab b{font-size:13px}}
@media (prefers-reduced-motion:reduce){.bigwin-fab{animation:none}}
/* Nhóm chat Keno hiển thị cố định trong khu quay số */
.keno-chat-slot{grid-column:1/-1}
.kc-panel.kc-inline{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);max-height:none}
.kc-inline .kc-list{max-height:360px;min-height:220px}
.kc-inline h2{font-size:17px}
/* Thu gọn / mở nhóm chat Keno */
.kc-panel>header{cursor:pointer;user-select:none}
.kc-toggle{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.kc-toggle:hover{background:var(--bg);border-color:var(--muted)}
.kc-chev{display:block;width:14px;height:14px;transform:rotate(180deg);transition:transform .25s var(--ease)}
.kc-chev path{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.kc-panel.kc-closed{max-height:none}
.kc-panel.kc-closed>header{border-bottom:0}
.kc-panel.kc-closed .kc-chev{transform:none}
.kc-body{display:flex;flex-direction:column;min-height:0}
/* [hidden] phải thắng display:flex thì mới thu gọn được */
.kc-body[hidden]{display:none!important}
.gp2-chat{margin:0 0 12px}
/* Dừng bán vé Keno */
.kb-stopnote{margin:0;padding:9px 14px;background:#fff4e5;color:#9a4b00;border:1px solid #f3cf9e;border-radius:12px;font-size:13px;font-weight:700;text-align:center}
.kbuy .kb-stopnote{margin:10px 0 0}
.mbar-stop{border-radius:0;border-left:0;border-right:0;border-bottom:0}
.kb-pay:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.35)}
.kb-checkout{grid-template-columns:minmax(0,.8fr) minmax(0,2fr)}
.kb-checkout .kb-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kb-checkout .kb-btns>button{width:100%;min-width:0;padding:0 8px;font-size:17px;white-space:nowrap}
.tt-who{background:var(--bg);border-radius:12px;padding:10px 14px;font-size:14px;margin:4px 0 12px}
.tc-logo{min-width:0;overflow:hidden}
.tc-logo .plw{width:100%!important;max-width:100%;height:auto!important;aspect-ratio:1}
@media (max-width:520px){
  .kb-checkout{grid-template-columns:1fr;gap:10px}
  .kb-checkout>div:first-child{display:flex;align-items:baseline;justify-content:space-between}
  .kb-checkout .kb-btns>button{height:48px;font-size:16px}
}

/* =========================================================
   eKYC trên điện thoại (xac-thuc-ekyc.html) — bố cục & màu theo app
   ========================================================= */
.ek-body{background:#f3f5f8;min-height:100dvh}
.ekp-bar{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line)}
.ekp-bar b{flex:1;font-size:17px}
.ekp-back{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg);color:var(--ink);font-size:22px;line-height:1;text-decoration:none}
.ekp-logo{display:flex;align-items:center}
.ekp-wrap{max-width:460px;margin:0 auto;padding:14px 12px 40px}
.ekp-wrap .face-review{background:#fff;border-radius:18px;box-shadow:var(--shadow)}

.face-review{padding:12px 24px 28px;text-align:center;color:#222}
.face-review h2{font-size:23px;margin:0 0 10px}
.face-demo{font-size:12px;color:#8a672b;background:#fff8e9;border-radius:8px;padding:9px;margin:0 0 20px}
.face-camera{position:relative;display:flex;align-items:center;justify-content:center;background:#eef3f8;border-radius:24px;min-height:280px;margin:0 auto 20px;overflow:hidden}
.face-oval{width:180px;height:230px;max-width:80%;border:3px solid #1784fa;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#dce9f6;transition:transform .5s var(--ease),border-color .3s,background .3s}
.face-oval svg{width:120px;height:150px;stroke:#6c8aa8;stroke-width:1}
.face-oval[data-pose="left"]{transform:perspective(500px) rotateY(-30deg)}
.face-oval[data-pose="right"]{transform:perspective(500px) rotateY(30deg)}
.face-oval.complete{border-color:#16844d;background:#e4f4ea;transform:none}
.face-direction{position:absolute;bottom:12px;font-size:32px;color:#0879ff}
.face-instruction{font-size:18px;line-height:1.4;margin:0 0 10px}
.face-help{font-size:14px;line-height:1.5;color:#666;margin:0 0 20px}
.face-steps{text-align:left;font-size:13px;line-height:1.5;padding-left:22px;color:#777;margin:0}
.face-steps li{padding:6px 0}
.face-steps li.active{color:#0879ff;font-weight:600}
.face-steps li.done{color:#16844d}
.face-start{display:block;width:100%;min-height:50px;background:var(--red);color:#fff;border:0;border-radius:10px;font:inherit;font-size:16px;font-weight:700;margin-top:14px;cursor:pointer;text-decoration:none;display:grid;place-items:center}
.face-start:disabled{background:#e8e9ed;color:#979ba5;cursor:not-allowed}
.face-outcome-icon{width:88px;height:88px;border-radius:50%;margin:32px auto 22px;display:flex;align-items:center;justify-content:center}
.face-outcome-icon.pending{background:#fff3d9;color:#ac7212}
.face-outcome-icon.success{background:#e5f5eb;color:#17864f}
.face-outcome-icon.warn{background:#fdeaea;color:#b42318;font-size:42px;font-weight:900}
.face-outcome-icon svg{width:44px;height:44px}
.face-method{background:#f5f7fa;border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;margin:12px 0;font-size:14px;text-align:left}
.face-method span{color:#777}
.face-method strong{font-size:15px}
.face-result-note{color:#777;font-size:12px;line-height:1.5;margin:24px 0 10px}
.ek-center{padding:50px 0;display:grid;place-items:center}
.ek-profile{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;text-align:left;background:#f5f7fa;border-radius:10px;padding:12px 14px;margin:0 0 18px;font-size:13.5px}
.ek-profile span{color:#777}
.ek-profile b{text-align:right}

/* Thông báo đẩy trên điện thoại khi xác thực xong */
.ek-push{position:fixed;left:10px;right:10px;top:10px;z-index:400;display:flex;gap:12px;align-items:flex-start;background:#fff;border-radius:16px;padding:13px 14px;box-shadow:0 12px 32px rgba(16,24,40,.22);transform:translateY(-130%);transition:transform .35s var(--ease);text-align:left}
.ek-push.on{transform:none}
.ek-push-ic{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--red);color:#fff}
.ek-push-ic svg{width:20px;height:20px}
.ek-push b{display:block;font-size:14.5px;line-height:1.3}
.ek-push p{margin:3px 0 0;font-size:13px;line-height:1.45;color:var(--ink-2)}
.ek-push small{display:block;margin-top:5px;font-size:11.5px;color:var(--muted)}
.ek-push-x{flex:none;border:0;background:none;font-size:20px;line-height:1;color:var(--muted);cursor:pointer;padding:0 2px}
@media (min-width:560px){.ek-push{left:auto;right:16px;width:380px}}

/* Ghi chú trạng thái gửi SMS ở bước 6 trang đăng ký */
.sms-note{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2);background:var(--bg);border-radius:10px;padding:9px 12px}
.rg-done{text-align:center}
.rg-done-cta{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.rg-done-cta .btn{flex:0 1 auto}

/* Thông tin liên hệ ở bước 5 đăng ký — theo app */
.contact-options{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--ink-2);margin-top:2px}
.contact-options label{display:flex;align-items:center;gap:7px;min-height:32px;cursor:pointer}
.contact-options input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--red)}
.contact-hint{font-size:12.5px;color:var(--muted);line-height:1.55;margin:8px 0 0}
.contact-fields{display:grid;gap:10px;margin-top:12px}
.contact-fields .field{margin:0}
/* [hidden] phai thang display:grid thi moi an duoc */
.contact-fields[hidden]{display:none!important}

/* ===== Chuyển tiếp xác thực bằng mã QR (bước 6 đăng ký) ===== */
.hd-opts{display:grid;gap:10px;margin:14px 0 4px}
.hd-opt{position:relative;display:block;cursor:pointer}
.hd-opt input{position:absolute;opacity:0;width:0;height:0}
.hd-box{display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 12px;
  padding:14px 16px;border:1.5px solid var(--line);border-radius:14px;background:#fff;transition:border-color .18s,background .18s,box-shadow .18s}
.hd-box .hd-ic{grid-row:1/3;align-self:center;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:#f1f3f6;color:var(--ink-2);font-size:16px}
.hd-box b{font-size:15px}
.hd-box small{color:var(--ink-2);font-size:13px;line-height:1.5}
.hd-opt:hover .hd-box{border-color:#c9ced6}
.hd-opt input:checked+.hd-box{border-color:var(--red);background:#fff8f8;box-shadow:0 0 0 3px rgba(214,34,31,.09)}
.hd-opt input:checked+.hd-box .hd-ic{background:var(--red);color:#fff}
.hd-opt input:focus-visible+.hd-box{outline:2px solid var(--red);outline-offset:2px}
.hd-auto{margin:10px 0 0;color:var(--ink-2)}

.qr-card{display:flex;gap:18px;align-items:center;flex-wrap:wrap;justify-content:center;
  padding:18px;border:1.5px solid var(--line);border-radius:16px;background:#fafbfc;margin:14px 0 10px}
.qr-img{width:208px;height:208px;display:grid;place-items:center;background:#fff;border-radius:12px;
  box-shadow:0 2px 10px rgba(16,24,40,.08);overflow:hidden}
.qr-img svg{display:block;width:100%;height:100%}
.qr-img.qr-dead{opacity:.28;filter:grayscale(1)}
.qr-meta{flex:1;min-width:190px;display:grid;gap:8px;justify-items:start}
.qr-code{display:grid;gap:2px;margin:0}
.qr-code span{font-size:12px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
.qr-code b{font-size:19px;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.qr-exp{margin:0;font-size:13.5px;color:var(--ink-2)}
.qr-exp b{font-variant-numeric:tabular-nums;color:var(--ink)}
.qr-open{font-size:13px}
.qr-fail{font-size:13px;color:var(--ink-2);text-align:center;padding:14px}
.qr-warn{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#fff4e5;color:#9a4b00;
  border:1px solid #f3cf9e;font-size:13.5px}
.ek-status .dot-ok{color:#17864f;font-size:11px}
.face-inline{padding:4px 0 0}
.face-inline .face-camera{margin-top:6px}
.otp-field{margin-top:14px;text-align:left}
.face-note{margin-top:10px;font-size:12.8px}
@media (max-width:560px){
  .qr-card{flex-direction:column;gap:14px}
  .qr-meta{justify-items:center;text-align:center}
  .qr-img{width:min(208px,70vw);height:min(208px,70vw)}
}

/* ===== Hồ sơ cá nhân chỉ đọc — mọi thay đổi đi qua yêu cầu hỗ trợ ===== */
.input:disabled,
.input[disabled]{background:var(--bg);color:var(--ink-2);border-color:var(--line);
  cursor:not-allowed;-webkit-text-fill-color:var(--ink-2);opacity:1}
.input:disabled::placeholder{color:var(--ink-3)}
.field:has(>.input:disabled)>label{color:var(--ink-2)}
.locked-note{margin-bottom:14px;padding:10px 12px;border-radius:10px;
  background:#f6f7f9;border:1px solid var(--line);color:var(--ink-2);line-height:1.55}

/* ===== Biên nhận đặt vé: mã vé · kỳ quay · tình trạng ===== */
.rc-rows{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:10px;overflow:hidden;margin:12px 0 10px}
.rc-rows>div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 12px;background:#fff;font-size:14px}
.rc-rows span{color:var(--ink-2);flex:none}
.rc-rows b{text-align:right;font-variant-numeric:tabular-nums;word-break:break-word}
.env-card{cursor:pointer}
@media (max-width:520px){ .rc-rows>div{font-size:13.2px;padding:8px 10px} }

/* ===== Chi tiết vé: từng kỳ của vé mua nhiều kỳ ===== */
.dt-periods{padding:0;overflow:hidden}
.dtp-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--line);font-weight:700;font-size:15px}
.dtp-h small{font-weight:500;color:var(--ink-2);font-size:13px}
.dtp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.dtp-row:last-child{border-bottom:0}
.dtp-k{display:grid;gap:1px;min-width:132px}
.dtp-k b{font-size:14.5px;font-variant-numeric:tabular-nums}
.dtp-k small{color:var(--ink-2);font-size:12.5px}
.dtp-wait{font-size:13px;color:var(--ink-2);background:#f3f4f6;border-radius:999px;padding:4px 11px}
@media (max-width:520px){.dtp-row{flex-direction:column;align-items:flex-start;gap:7px}.dtp-k{min-width:0}}

/* ===== Bingo18: bỏ chọn một ô ngay trong hộp mệnh giá ===== */
.b18-wact{display:flex;gap:10px;align-items:stretch}
.b18-wact .b18-ok{flex:1;margin:0}
.b18-clear{flex:none;padding:0 16px;border:1.5px solid var(--line);background:#fff;
  color:var(--ink-2);border-radius:12px;font:inherit;font-weight:600;cursor:pointer}
.b18-clear:hover{border-color:var(--red);color:var(--red)}

/* ===== Chữ dễ đọc trên điện thoại (đánh giá UI/UX: người chơi lớn tuổi) =====
   Nâng sàn cỡ chữ cho các nhãn phụ nhỏ nhất. Chỉ áp dụng ở màn hình hẹp,
   không đổi bố cục bản máy tính. */
@media (max-width:600px){
  .kb-rate,.nw-tag,.pr-k,.lk-kicker,.kst-w-resp,.pa-owner-label,.pa-badge,
  .hint,.demo,.b18-demo,.sms-exp,.face-demo,.qr-exp,.tc-meta,.dtp-k small{
    font-size:12px!important;line-height:1.5}
  .muted small,.field label small,.sec-head p small{font-size:12px}
  /* vùng chạm tối thiểu cho các nút nhỏ hay bấm nhầm */
  .kc-heart,.pa-delete,.kc-toggle,.more,.link{min-height:36px;display:inline-flex;align-items:center}
}

/* ===== Camera thật cho eKYC: khuôn mặt · QR CCCD · NFC (đồng bộ app) ===== */
.face-oval{position:relative;overflow:hidden}
.face-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}
.face-oval.live svg{display:none}
.face-oval.live{transform:none!important;background:#0b1320}
.face-oval.live[data-pose="left"]{box-shadow:-10px 0 0 -2px #1784fa}
.face-oval.live[data-pose="right"]{box-shadow:10px 0 0 -2px #1784fa}
.face-live{position:absolute;top:12px;left:14px;font-size:12px;font-weight:700;color:#d6221f;
  background:#fff;border-radius:999px;padding:3px 9px}
.face-warn{margin:-8px 0 14px;font-size:13.5px;color:#9a4b00;background:#fff4e5;border:1px solid #f3cf9e;
  border-radius:10px;padding:8px 10px}
.ck-alt{display:block;width:100%;margin-top:10px;min-height:44px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink-2);border-radius:10px;font:inherit;font-weight:600;cursor:pointer}
.ck-alt:hover{border-color:var(--red);color:var(--red)}

.ck-steps{display:flex;gap:6px;list-style:none;padding:0;margin:0 0 16px;justify-content:center}
.ck-steps li{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-3);font-weight:600}
.ck-steps li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#eef0f3;font-size:12px}
.ck-steps li+li::before{content:'';width:22px;height:2px;background:var(--line);margin-right:2px}
.ck-steps li.on{color:var(--ink)}
.ck-steps li.on span{background:#1784fa;color:#fff}
.ck-steps li.done{color:#17864f}
.ck-steps li.done span{background:#17864f;color:#fff}

.ck-step-h{font-size:19px;margin:0 0 6px}
.ck-body{font-size:14px;color:var(--ink-2);line-height:1.55;margin:0 0 14px}
.ck-hint{font-size:13px;color:var(--ink-3);margin:8px 0 0}
.ck-status{font-size:14.5px;font-weight:700;color:#1e3a8a;min-height:21px;margin:8px 0 0}

.ck-cam{position:relative;aspect-ratio:1/1;max-width:320px;margin:0 auto;border-radius:18px;
  background:#0b1320;overflow:hidden}
.ck-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ck-frame{position:absolute;inset:16%;}
.ck-frame i{position:absolute;width:30px;height:30px;border:4px solid #fff;border-radius:4px}
.ck-frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.ck-frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.ck-frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.ck-frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.ck-line{position:absolute;left:4%;right:4%;height:2px;background:#ff4b5c;top:0;opacity:0;
  box-shadow:0 0 10px #ff4b5c}
.ck-cam.live .ck-line{opacity:1;animation:ckScan 2s ease-in-out infinite}
.ck-cam.ok .ck-frame i{border-color:#2fd27a}
.ck-cam.ok .ck-line{display:none}
@keyframes ckScan{0%,100%{top:0}50%{top:calc(100% - 2px)}}
.ck-msg{position:absolute;left:12px;right:12px;bottom:12px;background:rgba(255,255,255,.95);
  color:#9a4b00;font-size:13px;border-radius:10px;padding:8px 10px;text-align:left}

.ck-nfc-art{position:relative;height:150px;margin:6px auto 14px;width:220px}
.ck-phone{position:absolute;left:58px;top:6px;width:96px;height:140px;border-radius:16px;
  border:3px solid #1f2937;background:#f8fafc}
.ck-phone span{position:absolute;left:50%;top:30px;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  border:2px dashed #1784fa}
.ck-card{position:absolute;left:10px;top:58px;width:120px;height:76px;border-radius:9px;
  background:linear-gradient(135deg,#d7e8f8,#9fc3e8);color:#0b3b6e;font-weight:800;font-size:13px;
  display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.15);transition:transform .6s}
.ck-reading .ck-card{animation:ckTap 1.4s ease-in-out infinite}
.ck-ok .ck-card{transform:translateX(56px) translateY(-20px);background:linear-gradient(135deg,#d2f3e0,#8fd9b1);animation:none}
@keyframes ckTap{0%,100%{transform:translateX(30px) translateY(-8px)}50%{transform:translateX(56px) translateY(-20px)}}
.ck-prog{height:8px;border-radius:999px;background:#e8eef6;overflow:hidden;margin:4px 0 0}
.ck-prog i{display:block;height:100%;width:0;background:#1784fa;border-radius:999px}
.ck-ok .ck-prog i{background:#17864f}

.ck-person{text-align:left;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:12px 0}
.ck-person div{display:flex;justify-content:space-between;gap:12px;padding:8px 12px;font-size:14px;
  border-bottom:1px solid var(--line)}
.ck-person div:last-child{border-bottom:0}
.ck-person span{color:var(--ink-2)}
.ck-person b{text-align:right}

/* ===== OTP qua cuộc gọi (mô phỏng) ===== */
.oc-link-wrap{text-align:center;margin:8px 0 0;font-size:14px}
.oc-link{background:none;border:0;padding:6px 4px;font:inherit;font-weight:600;color:var(--blue,#004cc6);cursor:pointer;text-decoration:underline}
.oc-link::before{content:'☎ ';text-decoration:none;display:inline-block}
.oc-bg{position:fixed;inset:0;z-index:2000;background:rgba(8,14,26,.72);display:grid;place-items:center;padding:16px;
  animation:nselIn .18s var(--ease)}
.oc-card{width:min(340px,100%);background:linear-gradient(180deg,#1b2433,#0e1520);color:#fff;border-radius:26px;
  padding:22px 22px 26px;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.oc-demo{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#ffd38a;
  background:rgba(255,211,138,.12);border-radius:999px;padding:3px 10px;margin:0 0 16px}
.oc-avatar{width:84px;height:84px;margin:0 auto 12px;border-radius:50%;background:#d6221f;display:grid;place-items:center;
  font-weight:800;font-size:26px;box-shadow:0 0 0 0 rgba(214,34,31,.6);animation:ocPulse 1.4s infinite}
.oc-bg.talking .oc-avatar{animation:none}
@keyframes ocPulse{0%{box-shadow:0 0 0 0 rgba(214,34,31,.55)}70%{box-shadow:0 0 0 22px rgba(214,34,31,0)}100%{box-shadow:0 0 0 0 rgba(214,34,31,0)}}
.oc-name{display:block;font-size:19px}
.oc-sub{margin:4px 0 18px;color:#aab4c3;font-size:14px;font-variant-numeric:tabular-nums}
.oc-code{display:flex;justify-content:center;gap:8px;margin:0 0 10px}
.oc-code span{width:38px;height:46px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;
  font-size:24px;font-weight:800;color:#6c7a90;transition:background .2s,color .2s}
.oc-code span.on{background:#fff;color:#0e1520}
.oc-cap{font-size:13.5px;color:#cbd3df;margin:0 0 16px;line-height:1.5}
.oc-acts{display:flex;justify-content:center;gap:34px;align-items:center}
.oc-btn{background:none;border:0;color:#fff;font:inherit;font-size:13px;display:grid;gap:6px;justify-items:center;cursor:pointer}
.oc-btn i{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:26px}
.oc-yes i{background:#1fa463}
.oc-no i{background:#e5383b;transform:rotate(135deg)}
.oc-fill{min-height:48px;padding:0 18px;border-radius:999px;border:0;background:#fff;color:#0e1520;font:inherit;font-weight:700;cursor:pointer}

/* ===== Khớp app: dòng đại lý · trường đọc từ chip ===== */
.auth-agent{margin:6px 0 0;font-size:12.5px;color:var(--ink-2)}
.input.from-chip{background:#f1f8f4;border-color:#bfe3cd}
.vn-box{margin-top:10px}

/* ===== Máy tính: hỏi quyền + chọn camera trước khi quét khuôn mặt ===== */
.cp-bg{position:fixed;inset:0;z-index:1150;background:rgba(10,16,28,.58);display:grid;place-items:center;padding:16px;
  animation:nselIn .16s var(--ease)}
.cp-card{width:min(440px,100%);background:#fff;border-radius:18px;padding:22px 22px 20px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.3);max-height:calc(100vh - 32px);overflow:auto}
.cp-ic{width:54px;height:54px;margin:0 auto 10px;border-radius:50%;background:#eef4ff;display:grid;place-items:center;font-size:24px}
.cp-card h3{font-size:19px;margin:0 0 6px}
.cp-body{color:var(--ink-2);font-size:14.5px;line-height:1.55;margin:0 0 14px}
.cp-pick{text-align:left;margin:0 0 10px}
.cp-prev{aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0b1320;margin:0 0 12px}
.cp-prev video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
.cp-lb{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 6px}
.cp-status{min-height:20px;font-size:13.5px;color:#9a4b00;margin:0 0 10px}
.cp-card .btn+.btn{margin-top:10px}

/* ---------- Thần Tài AI nhúng (iframe, như WebView trong app) ---------- */
#tt-ai.tt-embed{max-width:560px;height:min(860px,92vh);max-height:92vh}
.tth-embed{height:100%;max-height:none}
.tth-embed>header{padding:10px 12px}
.tth-ext{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;color:var(--muted);text-decoration:none;font-size:17px;flex:none}
.tth-ext:hover{background:#f5f1ea;color:var(--ink,#222)}
.tth-frame{position:relative;flex:1;min-height:0;background:#fbf7f0}
.tth-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .25s}
.tth-frame iframe.on{opacity:1}
.tth-load,.tth-fail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;color:var(--muted);z-index:1}
.tth-fail div{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tth-disc{margin:0;padding:8px 14px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);text-align:center}
@media (max-width:600px){
  #tt-ai.tt-embed{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0}
  #tt-ai.tt-embed .tth-panel{border-radius:0}
}
.tth-load .spinner{width:30px;height:30px;border-color:rgba(101,65,172,.2);border-top-color:#6541ac}

/* ===== Giao diện di động theo thiết kế Figma Vietlott Internet ===== */
.home-product-tabs,.app-bottom-nav,.home-lang-mobile{display:none}
@media (max-width:600px){
  body{background:#f1f2f5}
  body[data-page="home"] .home-lang-mobile{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 12px;background:#fff;border-bottom:1px solid #ececf0;color:#777b86;font-size:12px}
  body[data-page="home"] .home-lang-mobile .lang-sel{max-width:160px;min-height:32px;padding:5px 8px;font-size:12px}
  body[data-page="home"]:has(#apphome .dash-card) .home-lang-mobile{display:none}
  body[data-page="home"] .home-product-tabs{position:sticky;top:72px;z-index:80;display:flex;gap:26px;overflow:auto;white-space:nowrap;background:#fff;padding:0 14px;border-bottom:1px solid #ececf0;scrollbar-width:none}
  body[data-page="home"] .home-product-tabs::-webkit-scrollbar{display:none}
  .home-product-tabs a{position:relative;display:block;padding:12px 0 10px;color:#787b86;font-size:13px;font-weight:600}
  .home-product-tabs a.on{color:var(--red)}
  .home-product-tabs a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--red)}
  body[data-page="home"] #apphome{padding:8px 0 0}
  body[data-page="home"] #apphome .welcome:not(.dash-card){display:none}
  body[data-page="home"] #apphome .sec-head{display:none}
  body[data-page="home"] #apphome>.wrap{padding-left:12px;padding-right:12px}
  body[data-page="home"] .popular{grid-template-columns:1fr;gap:10px}
  body[data-page="home"] .pop{min-height:82px;display:grid;grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:2px 12px;padding:9px 12px;border:1px solid #e9e9ed;border-radius:14px;box-shadow:0 2px 8px rgba(17,24,39,.04)}
  body[data-page="home"] .pop-logo{grid-column:1;grid-row:1/3;height:60px}
  body[data-page="home"] .pop-logo .plw{max-width:64px;max-height:60px}
  body[data-page="home"] .pop-cd{position:static;grid-column:2;grid-row:1;font-size:11px;color:#858792}
  body[data-page="home"] .pop-n{grid-column:2;grid-row:2;justify-content:space-between;font-size:14px}
  body[data-page="home"] .pop-n i{width:26px;height:26px;font-size:15px}
  body[data-page="home"] .promo{margin-top:12px}
  body[data-page="home"] .bigwin-fab{bottom:calc(70px + env(safe-area-inset-bottom))}

  .app-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:92;display:flex;align-items:center;justify-content:space-around;gap:2px;padding:8px 4px calc(7px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid #e8e8ed;box-shadow:0 -4px 14px rgba(25,28,40,.06)}
  .app-bottom-nav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#888b95;font-size:10px;line-height:1.2;text-decoration:none;font-weight:600}
  .app-bottom-nav a.on{color:var(--red)}
  .app-bottom-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  body[data-page="home"],body[data-page="buy"]{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  body[data-page="home"] #site-footer,body[data-page="buy"] #site-footer{margin-top:0}

  /* Danh sách game trước, khu Keno vẫn ở đầu trang sản phẩm theo luồng hiện có. */
  body[data-page="buy"] section.sec{padding:10px 0 24px!important}
  body[data-page="buy"] .wrap.buy{width:100%;max-width:none;padding:0 12px}
  body[data-page="buy"] .crumbs,body[data-page="buy"] .buy-sub{display:none}
  body[data-page="buy"] .buy-h{font-size:21px;margin:2px 0 10px}
  body[data-page="buy"] .keno-top{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:18px}
  body[data-page="buy"] .keno-top-h{gap:8px;margin-bottom:8px}
  body[data-page="buy"] .keno-top-h h2{font-size:15px;line-height:1.35}
  body[data-page="buy"] .keno-top-h a{font-size:12px;white-space:nowrap}
  body[data-page="buy"] .sp-list-h{font-size:18px;margin:14px 0 8px}
  body[data-page="buy"] .tabs[data-group="buy"]{position:sticky;top:0;z-index:50;display:flex;gap:4px;overflow:auto;white-space:nowrap;padding:4px;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(20,27,45,.06);scrollbar-width:none}
  body[data-page="buy"] .tabs[data-group="buy"]::-webkit-scrollbar{display:none}
  body[data-page="buy"] .tabs[data-group="buy"] button{flex:none;padding:9px 12px;border-radius:9px;font-size:12px}
  body[data-page="buy"] .cartbar{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:91;max-width:none;border-radius:14px}
  body[data-page="buy"] .app-bottom-nav a.on{color:var(--red)}

  /* Màn Keno: bỏ thanh web, giữ thanh tiêu đề và bộ điều khiển vé của game. */
  body[data-page="games"][data-game="keno"] .site-header,
  body[data-page="games"][data-game="keno"] .site-footer{display:none!important}
  body[data-page="games"][data-game="keno"] .gp2{padding:0 0 96px}
  body[data-page="games"][data-game="keno"] .gp2-wrap{width:100%;max-width:none;padding-left:12px;padding-right:12px}
  body[data-page="games"][data-game="keno"] .gp2-top{position:sticky;top:0;z-index:90;gap:7px;margin:0 -12px 10px;padding:7px 12px;background:#fff;border-bottom:1px solid #e9e9ed}
  body[data-page="games"][data-game="keno"] .gp2-top .back{width:30px;height:34px;margin:0;font-size:28px}
  body[data-page="games"][data-game="keno"] .gp2-top h1{font-size:16px;font-weight:700;white-space:nowrap}
  body[data-page="games"][data-game="keno"] .gp2-logo{display:none}
  body[data-page="games"][data-game="keno"] .gp2-top .ic{width:32px;height:32px;background:#f4f4f6}
  body[data-page="games"][data-game="keno"] .gp2-top .ic svg{width:17px;height:17px}
  body[data-page="games"][data-game="keno"] .gp2-stage{margin:0 0 9px}
  body[data-page="games"][data-game="keno"] .kst{--kst-h:218px;border-radius:14px;box-shadow:0 4px 14px rgba(120,5,20,.14)}
  body[data-page="games"][data-game="keno"] .kst-stage{height:218px}
  body[data-page="games"][data-game="keno"] .kst-panel{border-width:2px;border-radius:13px 13px 17px 17px}
  body[data-page="games"][data-game="keno"] .kst-panel::before{inset:5px;border-radius:12px}
  body[data-page="games"][data-game="keno"] .kst-nav{height:32px;padding:2px 7px;gap:3px}
  body[data-page="games"][data-game="keno"] .kst-nav button{min-width:27px;height:27px;font-size:20px}
  body[data-page="games"][data-game="keno"] .kst-nav span,body[data-page="games"][data-game="keno"] .kst-nav .kst-jump{font-size:10px}
  body[data-page="games"][data-game="keno"] .kst-overview{grid-template-columns:minmax(58px,.8fr) minmax(0,3.2fr);padding:8px 7px 12px;gap:3px}
  body[data-page="games"][data-game="keno"] .kst-overview aside{gap:2px;padding-right:2px}
  body[data-page="games"][data-game="keno"] .kst-overview .kst-logo{height:35px}
  body[data-page="games"][data-game="keno"] .kst-clockg span{font-size:8px;line-height:10px}
  body[data-page="games"][data-game="keno"] .kst-clockg strong{font-size:20px}
  body[data-page="games"][data-game="keno"] .kst-speech{padding:4px 2px;font-size:7px;line-height:9px}
  body[data-page="games"][data-game="keno"] .kst-mascot.o{height:48px}
  body[data-page="games"][data-game="keno"] .kst-80{gap:2px}
  body[data-page="games"][data-game="keno"] .kst-80 span{font-size:9px}
  body[data-page="games"][data-game="keno"] .kst-w-brand{top:8px;font-size:17px}
  body[data-page="games"][data-game="keno"] .kst-w-center{top:45px}
  body[data-page="games"][data-game="keno"] .kst-w-center .kst-logo{height:65px}
  body[data-page="games"][data-game="keno"] .kst-mascot.w{left:6px;bottom:18px;width:78px;height:88px}
  body[data-page="games"][data-game="keno"] .kst-w-msg{left:26%;right:4%;bottom:28px}
  body[data-page="games"][data-game="keno"] .kst-w-msg strong{font-size:12px;margin-bottom:3px}
  body[data-page="games"][data-game="keno"] .kst-w-msg span{font-size:9px;line-height:12px}
  body[data-page="games"][data-game="keno"] .kst-w-resp{bottom:7px;font-size:8px}
  body[data-page="games"][data-game="keno"] .kst-d-top{height:51px;padding:6px 8px 0;grid-template-columns:34% 66%}
  body[data-page="games"][data-game="keno"] .kst-d-top .kst-logo{width:72px;height:42px}
  body[data-page="games"][data-game="keno"] .kst-banner{height:39px;margin-top:8px;padding:0 3px 3px;border-radius:9px}
  body[data-page="games"][data-game="keno"] .kst-win{top:-10px;height:21px;gap:3px}
  body[data-page="games"][data-game="keno"] .kst-win span{font-size:8px;border-width:1px;border-radius:6px}
  body[data-page="games"][data-game="keno"] .kst-counts span{font-size:7px}
  body[data-page="games"][data-game="keno"] .kst-counts b{font-size:12px}
  body[data-page="games"][data-game="keno"] .kst-d-main{height:133px;padding:4px 8px 6px;grid-template-columns:36% 64%}
  body[data-page="games"][data-game="keno"] .kst-per{font-size:8px;gap:3px}
  body[data-page="games"][data-game="keno"] .kst-per strong{font-size:13px}
  body[data-page="games"][data-game="keno"] .kst-mascot.d{top:48px;width:72px;height:77px}
  body[data-page="games"][data-game="keno"] .kst-20{gap:3px 2px;padding:6px 0}
  body[data-page="games"][data-game="keno"] .kst-20 span{width:23px;height:23px;border-width:2px;font-size:10px}
  body[data-page="games"][data-game="keno"] .gp2-chat{margin:0 0 9px}
  body[data-page="games"][data-game="keno"] .kc-panel.kc-inline{border-radius:14px;box-shadow:0 2px 8px rgba(20,27,45,.05)}
  body[data-page="games"][data-game="keno"] .kc-inline>header{padding:9px 12px}
  body[data-page="games"][data-game="keno"] .gp2-sel{gap:4px;padding:4px;border-radius:14px;box-shadow:0 2px 8px rgba(20,27,45,.05)}
  body[data-page="games"][data-game="keno"] .gp2-sel label{padding:5px 8px;font-size:12px}
  body[data-page="games"][data-game="keno"] .gp2-sel select{font-size:12px}
  body[data-page="games"][data-game="keno"] .gp2-recent{padding:6px 8px;font-size:11px}
  body[data-page="games"][data-game="keno"] .gp2-demo{margin-top:8px;padding:6px 9px;border-radius:9px;font-size:10px;line-height:1.35}
  body[data-page="games"][data-game="keno"] .gp2-card{margin-top:8px;padding:7px 9px;border:1px solid #ececf0;border-radius:14px;box-shadow:0 2px 8px rgba(20,27,45,.04)}
  body[data-page="games"][data-game="keno"] .row2{gap:5px;padding:6px 0}
  body[data-page="games"][data-game="keno"] .row2 .rl{width:28px;font-size:12px}
  body[data-page="games"][data-game="keno"] .row2 .rb{gap:4px;padding-top:3px}
  body[data-page="games"][data-game="keno"] .row2 .b2{width:30px;height:30px;font-size:12px}
  body[data-page="games"][data-game="keno"] .row2 .stk{padding:6px 4px;font-size:11px}
  body[data-page="games"][data-game="keno"] .row2 .tc{width:28px;height:28px;font-size:10px}
  body[data-page="games"][data-game="keno"] .row2 .hrt svg,body[data-page="games"][data-game="keno"] .row2 .del svg{width:18px;height:18px}
  body[data-page="games"][data-game="keno"] .mbar.app{padding:8px 0 calc(8px + env(safe-area-inset-bottom));box-shadow:0 -4px 14px rgba(25,28,40,.08)}
  body[data-page="games"][data-game="keno"] .mbar.app .wrap{gap:8px;padding-left:12px;padding-right:12px}
  body[data-page="games"][data-game="keno"] .mbar.app .mb-t{min-width:96px}
  body[data-page="games"][data-game="keno"] .mbar.app .mb-t small{font-size:10px}
  body[data-page="games"][data-game="keno"] .mbar.app b{font-size:18px;color:var(--red)}
  body[data-page="games"][data-game="keno"] .mbar.app .btn-red{min-height:42px;border-radius:999px;background:#15143d;border-color:#15143d;font-size:14px}
  body[data-page="games"][data-game="keno"] .mbar.app .btn-red:disabled{background:#15143d;border-color:#15143d;color:#fff;opacity:.45}
  body[data-page="games"][data-game="keno"] .mbar.app .btn-line{min-height:40px;border-radius:999px;font-size:12px}

  /* Nạp tiền theo bố cục gọn của app; các phương thức và bước nạp vẫn hiện. */
  body[data-page="account"]:has(.mt-top) .site-header,
  body[data-page="account"]:has(.mt-top) .site-footer{display:none!important}
  body[data-page="account"]:has(.mt-top) section.sec{padding:0 0 24px!important}
  body[data-page="account"]:has(.mt-top) section.sec>.wrap{width:100%;max-width:none;padding:0 12px}
  body[data-page="account"]:has(.mt-top) .mt-top{position:sticky;top:0;z-index:80;margin:0 -12px 12px;padding:7px 12px;background:#fff;border-bottom:1px solid #e9e9ed}
  body[data-page="account"]:has(.mt-top) .mt-top a{width:34px;height:38px;font-size:24px}
  body[data-page="account"]:has(.mt-top) .mt-top h1{font-size:16px}
  body[data-page="account"]:has(.mt-top) .mt-top a.hist svg{width:22px;height:22px}
  body[data-page="account"]:has(.mt-top) .mt-bal{align-items:center;gap:10px;padding:14px;border:1px solid #ededf1;border-radius:16px;background:#fff;box-shadow:0 2px 8px rgba(20,27,45,.04)}
  body[data-page="account"]:has(.mt-top) .mt-bal .wi{display:none}
  body[data-page="account"]:has(.mt-top) .mt-bal b.t{font-size:13px}
  body[data-page="account"]:has(.mt-top) .mt-bal small{font-size:11px}
  body[data-page="account"]:has(.mt-top) .mt-bal .big{font-size:21px;letter-spacing:0}
  body[data-page="account"]:has(.mt-top) .mt-h{font-size:14px;margin:14px 0 7px}
  body[data-page="account"]:has(.mt-top) .mt-amt{min-height:44px;border:1px solid #e5e5ea;border-radius:10px;padding:4px 12px}
  body[data-page="account"]:has(.mt-top) .mt-amt input{font-size:20px;padding:5px 0}
  body[data-page="account"]:has(.mt-top) .mt-amt span{font-size:15px;padding-left:10px}
  body[data-page="account"]:has(.mt-top) .mt-chips{gap:7px;margin-top:9px}
  body[data-page="account"]:has(.mt-top) .mt-chips button{min-height:34px;padding:7px 5px;border:1px solid var(--red);border-radius:999px;font-size:11px}
  body[data-page="account"]:has(.mt-top) .mt-m{gap:10px;padding:11px 12px;border-radius:12px}
  body[data-page="account"]:has(.mt-top) .mt-m svg{width:26px;height:26px}
  body[data-page="account"]:has(.mt-top) .mt-m b{font-size:13px}
  body[data-page="account"]:has(.mt-top) .mt-m small{font-size:11px}
  body[data-page="account"]:has(.mt-top) .mt-m i{width:20px;height:20px}
  body[data-page="account"]:has(.mt-top) .mt-info div{padding:10px 12px;font-size:13px}
  body[data-page="account"]:has(.mt-top) .mt-note{font-size:11px;margin:8px 0}
  body[data-page="account"]:has(.mt-top) .mt-go{min-height:44px;padding:10px 14px;border:0;border-radius:999px;background:#15143d;font-size:14px}
  body[data-page="account"]:has(.mt-top) .qrbox{border:0;border-radius:18px;box-shadow:0 2px 12px rgba(20,27,45,.06)}
  body[data-page="account"]:has(.mt-top) #s2 .qrbox::before{content:"";display:block;width:118px;height:36px;background:url("../img/brand/logo-opt.webp") center/contain no-repeat}

  /* Khu đăng nhập giữ logo đối tác ở cuối màn và canh thẻ như thiết kế app. */
  body[data-page="auth"] .auth-wrap{width:100%;padding:0 12px}
  body[data-page="auth"] .auth-card{transform:none!important;border-radius:20px;padding:22px 18px;box-shadow:0 8px 24px rgba(20,27,45,.08)}
  body[data-page="auth"] .auth-partner{padding:20px 12px calc(24px + env(safe-area-inset-bottom));gap:6px}
  body[data-page="auth"] .auth-partner img{height:auto;max-width:min(90%,420px);max-height:74px;object-fit:contain}

  /* Thanh toán giữ nguyên ba bước xác thực, chọn phương thức và xác nhận. */
  body[data-page="cart"] .site-footer{display:none!important}
  body[data-page="cart"] section.sec{padding:10px 0 20px!important}
  body[data-page="cart"] section.sec>.wrap{width:100%;max-width:none;padding:0 12px}
  body[data-page="cart"] .stepper{width:100%;gap:4px;margin:0 auto 14px}
  body[data-page="cart"] .stepper .st{width:30%;font-size:9px;line-height:1.25;text-align:center;gap:4px}
  body[data-page="cart"] .stepper .st i{width:28px;height:28px;font-size:12px}
  body[data-page="cart"] .stepper .ln{min-width:12px;height:2px;margin:0 2px 14px}
  body[data-page="cart"] .cart-layout{grid-template-columns:minmax(0,1fr);gap:12px}
  body[data-page="cart"] .cstep.panel{padding:16px;border-radius:16px;box-shadow:0 2px 10px rgba(20,27,45,.06)}
  body[data-page="cart"] .cstep h2{font-size:17px;line-height:1.35;margin-bottom:12px}
  body[data-page="cart"] .field{margin-bottom:12px}
  body[data-page="cart"] .input{min-height:44px;padding:10px 12px;border-radius:10px}
  body[data-page="cart"] .otp{gap:6px}
  body[data-page="cart"] .otp input{width:clamp(34px,11vw,44px);height:48px;border-radius:10px;font-size:19px}
  body[data-page="cart"] .cstep .btn{min-height:44px;padding:10px 14px;font-size:14px}
  body[data-page="cart"] #s1Form>.btn{width:100%}
  body[data-page="cart"] .pay-opts{gap:8px}
  body[data-page="cart"] .pay{gap:9px;padding:11px 10px;border-radius:12px}
  body[data-page="cart"] .pay .radio{width:20px;height:20px}
  body[data-page="cart"] .pay .pi{width:38px;height:38px;border-radius:10px;font-size:12px}
  body[data-page="cart"] .pay b{font-size:12px}
  body[data-page="cart"] .pay small{font-size:10px;line-height:1.3}
  body[data-page="cart"] .summary{position:static;border:1px solid #ececf0;border-radius:16px;box-shadow:0 2px 10px rgba(20,27,45,.05)}
  body[data-page="cart"] .summary .sh{padding:12px 14px}
  body[data-page="cart"] .summary .sh b{font-size:15px}
  body[data-page="cart"] .summary .sb{padding:13px 14px;gap:8px}
  body[data-page="cart"] .summary .srow{font-size:12px;gap:12px}
  body[data-page="cart"] .summary .stotal{padding-top:10px}
  body[data-page="cart"] .summary .stotal b{font-size:21px}
}

/* Explicit foregrounds prevent dark-page inheritance in shared navigation. */
.site-header,.site-header .drop,.drawer{color:#17283e}
.site-header .nav-i:not(.active)>a,.site-header .nav-i:not(.active)>button,.site-header .drop a,.drawer nav a{color:#17283e}
.audit-linkrow a,.audit-linkrow button{color:#173650}
/* One account entry at the far right of the shared header. */
.site-header .profile-menu{position:relative;flex-shrink:0;margin-left:2px;color:#29354a}
.site-header .profile-menu>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;list-style:none;border:1px solid #e5c6d0;border-radius:50%;background:#fff1f5;color:#b40032;cursor:pointer}
.site-header .profile-menu>summary::-webkit-details-marker{display:none}.site-header .profile-menu>summary:focus-visible{outline:3px solid #b40032;outline-offset:3px}
.profile-avatar{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;overflow:hidden}.profile-avatar svg{width:25px;height:25px}.profile-avatar img{width:100%;height:100%;object-fit:cover}
.site-header .profile-panel{position:absolute;right:0;top:54px;width:280px;max-width:calc(100vw - 24px);padding:15px;background:#fff;border:1px solid #e0d8df;border-radius:14px;box-shadow:0 12px 35px #28121d25;z-index:1500;max-height:calc(100dvh - 140px);overflow:auto}
.profile-panel h3{font-size:16px;margin:0 0 10px;color:#28374e}.profile-panel>a{display:flex;align-items:center;min-height:42px;padding:9px 10px;border-radius:7px;font-size:14px;color:#29354a;text-decoration:none}.profile-panel>a:hover,.profile-panel>a:focus-visible{background:#fff0f4;color:#b00032}.profile-panel>a:last-child{border-top:1px solid #e9e2e6;margin-top:5px;color:#af0030}.profile-panel>button{padding:8px 12px;min-height:40px;border:1px solid #dfc5ce;border-radius:8px;background:#fff4f7;color:#a40030;font:600 13px system-ui;cursor:pointer}.profile-panel>small{display:block;line-height:1.5;font-size:11px;margin:8px 0;color:#687384}