/* 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, 0.08);
  --shadow-lg: 0 18px 44px rgba(13, 29, 51, 0.16);
  --ease: cubic-bezier(0.22, 0.8, 0.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 0.15s var(--ease),
    background 0.2s,
    box-shadow 0.2s,
    border-color 0.2s,
    color 0.2s;
  white-space: nowrap;
  user-select: none;
}
.btn:active {
  transform: scale(0.96);
}
.btn[disabled] {
  opacity: 0.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, 0.35);
}
.btn-white {
  background: #fff;
  color: var(--ink);
}
.btn-white:hover {
  box-shadow: 0 8px 20px rgba(0, 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, 0.55);
  color: #fff;
}
.btn-line-w:hover {
  background: rgba(255, 255, 255, 0.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 0.2s var(--ease);
}
.btn:hover .arr {
  transform: translateX(4px);
}
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: scale(0);
  animation: ripple 0.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 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.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 0.4s var(--ease);
}
.site-header.scrolled {
  box-shadow: 0 4px 18px rgba(13, 29, 51, 0.1);
}
.hbar {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
}
.site-header.scrolled .logo {
  transform: scale(0.94);
}
.logo {
  transform-origin: left center;
  transition: transform 0.3s var(--ease);
}
.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 900;
  font-size: 21px;
  letter-spacing: -0.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, 0.18);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  transition: transform 0.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 0.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 0.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 0.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 0.15s,
    transform 0.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 0.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 0.3s var(--ease);
}
.cart-count.on {
  transform: scale(1);
}
.cart-count.bump {
  animation: bump 0.5s var(--ease);
}
@keyframes bump {
  30% {
    transform: scale(1.5);
  }
  60% {
    transform: scale(0.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: 0.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, 0.5);
  z-index: 190;
  opacity: 0;
  visibility: hidden;
  transition: 0.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 0.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: 0.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 0.8s,
    visibility 0.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, 0.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, 0.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, 0.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 0.6s var(--ease),
    transform 0.6s var(--ease);
}
.slide.on .txt > * {
  opacity: 1;
  transform: none;
}
.slide.on .txt > *:nth-child(2) {
  transition-delay: 0.1s;
}
.slide.on .txt > *:nth-child(3) {
  transition-delay: 0.2s;
}
.slide.on .txt > *:nth-child(4) {
  transition-delay: 0.3s;
}
.slide.on .txt > *:nth-child(5) {
  transition-delay: 0.4s;
}
.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.6px;
  background: rgba(255, 255, 255, 0.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: 0.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, 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, 0.12),
    0 18px 34px rgba(0, 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 0.95s var(--ease) forwards,
    bob 5s ease-in-out 1.1s infinite;
}
.slide.on .art .ball:nth-child(2) {
  animation-delay: 0.12s, 1.2s;
}
.slide.on .art .ball:nth-child(3) {
  animation-delay: 0.24s, 1.3s;
}
.slide.on .art .ball:nth-child(4) {
  animation-delay: 0.36s, 1.4s;
}
.slide.on .art .ball:nth-child(5) {
  animation-delay: 0.48s, 1.5s;
}
.slide.on .art .ball:nth-child(6) {
  animation-delay: 0.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, 0.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: 0.2s;
}
.arrows button {
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.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: 0.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: -0.8px;
  line-height: 1.15;
  margin-bottom: 8px;
}
.phero p {
  opacity: 0.92;
  max-width: 640px;
}
.phero .floaters span {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.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, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(6px);
}
.gh-card .lbl {
  font-size: 13px;
  opacity: 0.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, 0.18);
}
.gh-card .cd span {
  color: rgba(255, 255, 255, 0.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: -0.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 0.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: 0.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 0.35s var(--ease),
    box-shadow 0.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, 0.14);
  transition: transform 0.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, 0.2);
  letter-spacing: 0.4px;
}
.gcard .glbl {
  margin-top: auto;
  font-size: 13px;
  opacity: 0.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: 0.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 0.35s var(--ease);
}
@keyframes flip {
  0% {
    transform: rotateX(90deg);
    opacity: 0.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 0.25s;
}
.filter button.on {
  color: #fff;
}
.filter .pill {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  border-radius: 999px;
  background: var(--red);
  transition:
    left 0.35s var(--ease),
    width 0.35s var(--ease);
}
.gcard.out {
  display: none;
}
.gcard.in-anim {
  animation: cardIn 0.45s var(--ease);
}
@keyframes cardIn {
  from {
    opacity: 0;
    transform: scale(0.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, 0.08),
    0 3px 6px rgba(0, 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 0.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: 0.5px;
  color: var(--ink-2);
}
.rtable tr:last-child td {
  border-bottom: 0;
}
.rtable tbody tr {
  transition: background 0.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 0.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 0.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 0.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, 0.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: -0.3px;
}
.tier {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg);
  margin-bottom: 12px;
  transition: transform 0.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 0.3s var(--ease),
    background 0.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 0.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 0.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 0.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 0.35s var(--ease),
    width 0.35s var(--ease);
}
.tpane {
  display: none;
  animation: fadeUp 0.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: 0.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 0.4s var(--ease);
  transition:
    box-shadow 0.25s,
    outline-color 0.25s;
  outline: 2px solid transparent;
}
.board.done {
  outline-color: var(--green);
}
.board.removing {
  animation: boardOut 0.3s var(--ease) forwards;
}
@keyframes boardIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}
@keyframes boardOut {
  to {
    opacity: 0;
    transform: scale(0.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 0.2s,
    transform 0.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 0.15s,
    border-color 0.15s,
    color 0.15s,
    transform 0.15s;
  padding: 0;
}
.n:hover {
  border-color: var(--ink);
}
.n.on {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  animation: npop 0.3s var(--ease);
}
.n.sp.on {
  background: var(--blue);
  border-color: var(--blue);
}
.n.dis {
  opacity: 0.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: 0.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 0.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: 0.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 0.3s var(--ease),
    background 0.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: 0.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: 0.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: -0.5px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.stotal b.tick {
  animation: tick 0.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 0.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, 0.4);
  transition:
    transform 0.8s cubic-bezier(0.5, -0.3, 0.7, 1),
    opacity 0.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 0.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 0.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: 0.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: 0.18s;
}
.die:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}
.die.on {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  animation: npop 0.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: 0.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, 0.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 0.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, 0.15);
}
.bingo-live .dies span.shake {
  animation: shake 0.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 0.3s,
    transform 0.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: 0.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 0.5s var(--ease);
}
.stepper .ln.done::after {
  transform: scaleX(1);
}
.cstep {
  display: none;
}
.cstep.on {
  display: block;
  animation: fadeUp 0.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 0.2s,
    box-shadow 0.2s;
  outline: none;
}
.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 76, 198, 0.12);
}
.input.err {
  border-color: var(--red);
  animation: shakeX 0.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: 0.2s;
}
.otp input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 76, 198, 0.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: 0.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: 0.2s;
}
.pay .radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: var(--red);
  transform: scale(0);
  transition: transform 0.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, 0.4);
  border-top-color: #fff;
  animation: spin 0.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 0.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 0.6s 0.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 0.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: 0.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, 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, 0.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 0.2s var(--ease);
}
.store:hover {
  transform: translateY(-3px);
}
.store small {
  display: block;
  font-size: 11px;
  opacity: 0.7;
}
.store .i {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  flex: none;
  transition:
    background 0.25s,
    transform 0.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, 0.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 0.2s,
    padding 0.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, 0.08);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
  font-size: 13px;
  transition: 0.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 0.4s var(--ease);
  font-size: 14px;
}
.toast.out {
  animation: toastOut 0.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(0.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, 0.4);
  opacity: 0;
  transform: translateY(20px);
  transition: 0.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 0.7s var(--ease),
    transform 0.7s var(--ease);
}
.rv.in {
  opacity: 1;
  transform: none;
}
.scroll-fade {
  opacity: 0;
  transition: opacity 0.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, 0.1);
    padding: 10px 16px;
    align-items: center;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.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 0.25s var(--ease),
    box-shadow 0.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 0.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: -0.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: 0.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, 0.1),
    0 4px 10px rgba(0, 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 0.45s,
    transform 0.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, 0.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, 0.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 0.7s var(--ease);
}
@keyframes qlBounce {
  0% {
    transform: none;
  }
  30% {
    transform: translateY(-38%) scale(1.05, 0.95);
  }
  55% {
    transform: translateY(0) scale(1.12, 0.86);
  }
  75% {
    transform: translateY(-10%);
  }
  100% {
    transform: none;
  }
}
.site-header.scrolled .logo {
  transform: scale(0.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 0.2s var(--ease),
    box-shadow 0.2s;
  position: relative;
  z-index: 1;
}
.badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0, 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: 0.2px;
  line-height: 1.1;
  opacity: 0.9;
}
.badge b {
  display: block;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.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, 0.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 0.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, 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: 0.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 0.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, 0.18));
  transition: transform 0.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 0.2s var(--ease),
    border-color 0.2s,
    box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.fbtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(13, 29, 51, 0.1);
}
.fbtn:active {
  transform: scale(0.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, 0.35);
}
.fbtn.tt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 215, 90, 0.45) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: shine 3.4s infinite;
}
.fbtn.tt:hover {
  border-color: #e8a300;
}
.board.pop-in {
  animation: popIn 0.55s var(--ease);
}
@keyframes popIn {
  0% {
    transform: scale(0.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, 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 0.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(0.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, 0.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: 0.12;
  transform: rotate(-15deg);
}
.lk-kicker {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.8px;
  color: #ffe8a2;
}
.lucky h2 {
  font-size: 32px;
  letter-spacing: -0.6px;
  margin: 4px 0;
}
.lk-meta {
  opacity: 0.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, 0.14);
  border-color: rgba(255, 255, 255, 0.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, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.25);
  animation: lkIn 0.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(0.6) rotate(-120deg);
  }
}
.lk-note {
  font-size: 13px;
  opacity: 0.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 0.5s 0.6s var(--ease) both;
  transition: transform 0.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, 0.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, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.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, 0.55);
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.25s;
}
.qb-bg.on {
  opacity: 1;
}
.qb {
  position: relative;
  background: #fff;
  border-radius: 22px;
  padding: 24px;
  width: min(440px, 100%);
  transform: translateY(24px) scale(0.97);
  transition: transform 0.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: 0.4px;
}
.qb-h b {
  font-size: 18px;
}
.qb-n {
  margin-bottom: 6px;
}
.qb-n .nb {
  width: 44px;
  height: 44px;
  font-size: 16px;
  animation: pop 0.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, 0.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(0.85) rotate(-8deg);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  transition:
    opacity 0.8s,
    transform 1.1s var(--ease);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.35));
}
.slide.on .slide-logo {
  opacity: 0.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, 0.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: 0.35;
  }
  .slide.on .slide-logo {
    opacity: 0.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: 0.6px;
  opacity: 0.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, 0.12),
    0 8px 16px rgba(0, 0, 0, 0.25);
  animation: lkIn 0.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, 0.84);
  display: grid;
  place-items: center;
  padding: 16px;
  opacity: 0;
  transition: opacity 0.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, 0.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(0.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, 0.4);
  animation: aoShake 0.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, 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 0.5s var(--ease) forwards;
}
@keyframes aoBurst {
  60% {
    transform: scale(1.25);
    opacity: 1;
  }
  100% {
    transform: scale(0.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(0.4) rotateY(180deg);
  transition: 0.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: 0.5s 0.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, 0.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: -0.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.png */
.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: 0.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, 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 0.25s var(--ease),
    box-shadow 0.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: -0.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: -0.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 0.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: -0.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 0.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 0.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: -0.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, 0.06);
  transition:
    transform 0.25s var(--ease),
    box-shadow 0.25s;
}
.prow:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.12);
}
.prow .pr-logo {
  height: 100%;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(0, 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: 0.85;
}
.pr-amt {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.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: 0.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, 0.08),
    0 2px 4px rgba(0, 0, 0, 0.12);
  font-variant-numeric: tabular-nums;
}
.flip i.fl {
  animation: flip 0.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: 0.9;
  margin-bottom: 12px;
}
.gp-head .crumbs a {
  color: #fff;
  font-weight: 700;
}
.gp-head .crumbs span {
  opacity: 0.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, 0.18);
}
.gp-t h1 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0;
  color: #fff;
}
.gp-t small {
  display: block;
  opacity: 0.85;
  font-size: 13px;
  margin-top: 4px;
}
.gp-amt small,
.gp-cd > small {
  display: block;
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 2px;
}
.gp-amt b {
  font-size: 28px;
  font-weight: 900;
  color: #ffe27a;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.gp-amt b small {
  font-size: 16px;
}
.gp-cd .cd {
  margin: 0;
}
.gp-cd .cd div {
  background: rgba(255, 255, 255, 0.18);
}
.gp-cd .cd span {
  color: rgba(255, 255, 255, 0.8);
}
.gp-res {
  margin-top: 16px;
  background: rgba(0, 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: 0.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, 0.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 0.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, 0.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, 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, 0.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 0.25s,
    transform 0.25s;
}
.row2:last-child {
  border-bottom: 0;
}
.row2.removing {
  opacity: 0;
  transform: translateX(30px);
}
.row2.flash {
  animation: popIn 0.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, 0.18),
    0 2px 5px rgba(200, 17, 31, 0.25);
  text-shadow: 0 1px 1px rgba(0, 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 0.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, 0.18),
    0 2px 5px rgba(200, 17, 31, 0.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: 0.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 0.2s var(--ease),
    background 0.2s;
}
.gp2-feat button:hover {
  background: #e9e6e2;
  transform: translateY(-2px);
}
.gp2-feat button:active {
  transform: scale(0.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, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.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 0.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, 0.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: 0.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 0.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: 0.5px;
}
.kl-h small {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.85;
}
.kl-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.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, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.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, 0.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 0.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, 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, 0.2);
  padding-top: 10px;
  font-size: 13px;
  flex-wrap: wrap;
}
.kl-f button {
  border: 0;
  background: rgba(255, 255, 255, 0.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, 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: -0.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: 0.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: 0.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, 0.18),
    0 3px 6px rgba(0, 0, 0, 0.12);
  animation: popIn 0.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 0.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, 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, 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: 0.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, 0.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.png) 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.png) 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 0.3s ease-out both;
}
@keyframes kstPop {
  from {
    opacity: 0;
    transform: scale(0.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 0.65s ease-out;
}
@keyframes kstBall {
  0% {
    transform: scale(0.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 0.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: 0.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: 0.55;
  transition: transform 0.18s var(--ease);
}
.nsel.op .nsel-c {
  transform: rotate(225deg) translate(-3px, -3px);
  opacity: 0.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, 0.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: 0.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, 0.18);
  overflow: hidden;
  animation: nselIn 0.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: 0.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, 0.5),
    rgba(255, 200, 40, 0.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, 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: 0.5;
    transform: scale(0.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 0.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, 0.12);
}
.otpbox.err input {
  border-color: var(--red);
  animation: shakeX 0.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: 0.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 0.2s,
    background 0.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, 0.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: 0.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: 0.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, 0.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: 0.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, 0.07);
}
.pa-card.locked {
  opacity: 0.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: 0.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: 0.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, 0.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: 0.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, 0.4);
  overflow: auto;
  color: #772422;
  animation: kp-pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
#prize-popup::backdrop {
  background: rgba(22, 17, 41, 0.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, 0.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(0.65);
    opacity: 0.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, 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, 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, 0.22);
}
.prow.r-lead .pr-logo {
  border-right-color: rgba(255, 229, 138, 0.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: 0.26;
  filter: blur(0.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 0.2s var(--ease),
    box-shadow 0.2s,
    border-color 0.2s;
}
.tth-launch:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 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, 0.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: 0.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, 0.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(0.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, 0.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: 0.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: 0.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, 0.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, 0.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, 0.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: 0.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 0.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, 0.2);
  transition: transform 0.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, 0.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: 0.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, 0.12);
}
.tth-launch:hover {
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 10px 22px rgba(32, 24, 48, 0.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, 0.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, 0.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, 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, 0.45);
  text-shadow: 0 0 16px rgba(225, 201, 255, 0.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, 0.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, 0.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: 0.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, 0.35);
  }
  50% {
    box-shadow:
      0 10px 26px rgba(179, 0, 30, 0.35),
      0 0 0 8px rgba(255, 215, 106, 0.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 0.2s,
    border-color 0.2s;
}
.kc-toggle:hover {
  background: var(--bg);
  border-color: var(--muted);
}
.kc-chev {
  display: block;
  width: 14px;
  height: 14px;
  transform: rotate(180deg);
  transition: transform 0.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: 0.5;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.kb-checkout {
  grid-template-columns: minmax(0, 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) — 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 0.5s var(--ease),
    border-color 0.3s,
    background 0.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, 0.22);
  transform: translateY(-130%);
  transition: transform 0.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 0.18s,
    background 0.18s,
    box-shadow 0.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, 0.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, 0.08);
  overflow: hidden;
}
.qr-img svg {
  display: block;
  width: 100%;
  height: 100%;
}
.qr-img.qr-dead {
  opacity: 0.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: 0.05em;
}
.qr-code b {
  font-size: 19px;
  letter-spacing: 0.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, 0.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, 0.15);
  transition: transform 0.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, 0.72);
  display: grid;
  place-items: center;
  padding: 16px;
  animation: nselIn 0.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, 0.45);
}
.oc-demo {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffd38a;
  background: rgba(255, 211, 138, 0.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, 0.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, 0.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, 0.08);
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: #6c7a90;
  transition:
    background 0.2s,
    color 0.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, 0.58);
  display: grid;
  place-items: center;
  padding: 16px;
  animation: nselIn 0.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, 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 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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: 0.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, 0.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, 0.06);
  }
  body[data-page='account']:has(.mt-top) #s2 .qrbox::before {
    content: '';
    display: block;
    width: 118px;
    height: 36px;
    background: url('../img/brand/logo.png') 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, 0.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, 0.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, 0.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;
  }
}

/* Beta 1.0 — màu chữ tường minh cho menu dùng chung (tránh thừa hưởng màu của trang nền tối) */
.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;
}

/* ===== Tính năng đang ẩn (công tắc QL.FEATURES trong assets/js/extras.js) ===== */
html.no-collection a[href^='bo-suu-tap'],
html.no-collection .nav-i:has(> a[href^='bo-suu-tap']) {
  display: none !important;
}
html.no-envelopes .env-card,
html.no-envelopes .ao-overlay {
  display: none !important;
}