:root {
  --navy-900: #060f1f;
  --navy-800: #0b1b33;
  --navy-700: #12294a;
  --navy-600: #1b3a66;
  --gold-100: #fff2c6;
  --gold-300: #ffd35e;
  --gold-500: #e8b53a;
  --gold-700: #a8741a;
  --gold-900: #6b4709;
  --cream: #fff6e0;
  --burgundy: #a3243b;
  --burgundy-d: #5f1020;
  --emerald: #1f7a5a;
  --ink: #0a1424;
  --u: 1px; /* đơn vị co giãn: màn hình dọc lớn tự phóng to */
  --font-display: 'Baloo 2', 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;
}

@media (orientation: portrait) and (min-width: 700px) { :root { --u: max(1px, min(calc(100vw / 480), calc(100vh / 1150))); } }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: var(--font-body);
  color: var(--cream);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(ellipse 60% 50% at 82% 45%, rgba(163, 36, 59, .5), transparent 70%),
    radial-gradient(ellipse 70% 60% at 15% 20%, rgba(60, 110, 190, .38), transparent 65%),
    repeating-linear-gradient(90deg, rgba(232, 181, 58, .07) 0 calc(1 * var(--u)), transparent calc(1 * var(--u)) calc(22 * var(--u))),
    linear-gradient(180deg, var(--navy-700), var(--navy-900));
}
.hidden { display: none !important; }
.muted { color: rgba(255, 246, 224, .68); font-size: calc(14 * var(--u)); line-height: 1.5; }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#app { position: fixed; inset: 0; z-index: 1; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.screen.active { display: flex; }
#screen-game { overflow: hidden; }

/* ---------- Logo / wordmark ---------- */
.brandbar { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(14 * var(--u)) calc(24 * var(--u)); flex: none; }
.brandbar__logo { width: calc(50 * var(--u)); height: calc(50 * var(--u)); filter: drop-shadow(0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.5)); }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark b { font-family: var(--font-serif); font-weight: 800; letter-spacing: .22em; font-size: calc(20 * var(--u)); color: var(--gold-300); }
.wordmark span { font-family: var(--font-serif); font-weight: 600; letter-spacing: .5em; font-size: calc(11 * var(--u)); color: var(--cream); margin-top: calc(3 * var(--u)); }
.wordmark i { font-style: normal; font-size: calc(9 * var(--u)); letter-spacing: .3em; color: rgba(255,246,224,.6); margin-top: calc(6 * var(--u)); }
.brandbar .js-sound { margin-left: auto; }

/* ---------- Nút kiểu game ---------- */
.btn {
  position: relative; font-family: var(--font-display); font-weight: 800; letter-spacing: .03em;
  font-size: calc(17 * var(--u)); line-height: 1; padding: calc(14 * var(--u)) calc(24 * var(--u)); border-radius: calc(16 * var(--u)); cursor: pointer;
  border: calc(3 * var(--u)) solid var(--ink); color: var(--ink); text-transform: uppercase;
  transition: transform .08s ease, box-shadow .08s ease, filter .15s;
  user-select: none; touch-action: manipulation; overflow: hidden;
}
.btn::before {
  content: ''; position: absolute; left: 6%; right: 6%; top: calc(3 * var(--u)); height: 42%;
  border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(40 * var(--u)) calc(40 * var(--u)) / calc(12 * var(--u)) calc(12 * var(--u)) calc(18 * var(--u)) calc(18 * var(--u));
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.05)); pointer-events: none;
}
.btn--gold { background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 55%, #d49a22); box-shadow: 0 calc(6 * var(--u)) 0 var(--gold-900), 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.45); }
.btn--navy { color: var(--cream); background: linear-gradient(180deg, #2c5a9a, var(--navy-600) 55%, #153059); border-color: #040a14; box-shadow: 0 calc(5 * var(--u)) 0 #040a14, 0 calc(9 * var(--u)) calc(16 * var(--u)) rgba(0,0,0,.4); }
.btn--navy::before { background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); }
.btn--xl { font-size: calc(26 * var(--u)); padding: calc(18 * var(--u)) calc(40 * var(--u)); border-radius: calc(22 * var(--u)); }
.btn--sm { font-size: calc(13 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); border-width: calc(2 * var(--u)); }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(calc(4 * var(--u))); }
.btn--gold:active { box-shadow: 0 calc(2 * var(--u)) 0 var(--gold-900), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.4); }
.btn--navy:active { box-shadow: 0 calc(1 * var(--u)) 0 #040a14, 0 calc(3 * var(--u)) calc(8 * var(--u)) rgba(0,0,0,.4); }
.btn:disabled { filter: grayscale(.7) brightness(.8); cursor: not-allowed; transform: none; }
.btn:focus-visible, .iconbtn:focus-visible, input:focus-visible, .spinhub:focus-visible { outline: calc(3 * var(--u)) solid #fff; outline-offset: calc(2 * var(--u)); }

.iconbtn {
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; cursor: pointer; font-family: var(--font-display); font-weight: 800; font-size: calc(20 * var(--u));
  color: var(--ink); border: calc(3 * var(--u)) solid var(--ink); background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  box-shadow: 0 calc(4 * var(--u)) 0 var(--gold-900), 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.4); display: grid; place-items: center; touch-action: manipulation; user-select: none;
}
.iconbtn:active { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 var(--gold-900); }
.iconbtn.off { filter: grayscale(1); opacity: .6; }

/* ---------- Ruy băng tiêu đề ---------- */
.ribbon { display: inline-block; position: relative; margin-bottom: calc(12 * var(--u)); }
.ribbon span {
  display: inline-block; padding: calc(6 * var(--u)) calc(28 * var(--u)); font-family: var(--font-display); font-weight: 800; letter-spacing: .08em; font-size: calc(15 * var(--u));
  color: var(--cream); background: linear-gradient(180deg, #c8344d, var(--burgundy)); border: calc(2 * var(--u)) solid var(--ink);
  border-radius: calc(6 * var(--u)); box-shadow: 0 calc(3 * var(--u)) 0 var(--burgundy-d); position: relative;
}
.ribbon span::before, .ribbon span::after { content: ''; position: absolute; top: calc(6 * var(--u)); width: calc(16 * var(--u)); height: 100%; background: #7d1a2c; border: calc(2 * var(--u)) solid var(--ink); z-index: -1; }
.ribbon span::before { left: calc(-14 * var(--u)); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 35% 50%); }
.ribbon span::after { right: calc(-14 * var(--u)); clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%); }
.ribbon--center { display: block; text-align: center; margin: 0 auto calc(16 * var(--u)); }

/* ---------- Vòng quay (khung + tia sáng) ---------- */
.wheelbox { position: relative; width: var(--w); height: var(--w); aspect-ratio: 1; }
.wheelbox canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; filter: drop-shadow(0 calc(18 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.65)); }
.wheelbox::before {
  content: ''; position: absolute; inset: -22%; border-radius: 50%; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 211, 94, .22) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 68%); mask-image: radial-gradient(circle, #000 28%, transparent 68%);
  animation: rays 40s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
.spinhub { position: absolute; z-index: 2; left: 50%; top: 50%; width: 19%; height: 19%; transform: translate(-50%, -50%); border-radius: 50%; border: 0; background: transparent; cursor: pointer; }
.spinhub:disabled { cursor: default; }

/* ---------- Trang chủ ---------- */
.home { --w: min(46vw, calc(580 * var(--u)), 74vh); flex: 1; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; gap: calc(24 * var(--u)); padding: 0 5vw calc(24 * var(--u)); max-width: calc(1280 * var(--u)); width: 100%; margin: 0 auto; }
.home__wheel { display: grid; place-items: center; }
.anniv { display: flex; align-items: center; gap: calc(14 * var(--u)); margin: calc(2 * var(--u)) 0 calc(4 * var(--u)); }
.anniv__num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(calc(88 * var(--u)), 14vw, calc(170 * var(--u))); line-height: .8; letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--gold-100) 0%, var(--gold-300) 38%, var(--gold-500) 60%, var(--gold-700) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill;
  filter: drop-shadow(0 calc(6 * var(--u)) 0 var(--gold-900)) drop-shadow(0 calc(14 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.5)); animation: pulse10 3.2s ease-in-out infinite;
}
@keyframes pulse10 { 50% { transform: scale(1.04) rotate(-1.5deg); } }
.anniv__side { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.anniv__side b { font-family: var(--font-display); font-weight: 800; font-size: clamp(calc(30 * var(--u)), 4.4vw, calc(54 * var(--u))); line-height: .9; color: var(--cream); letter-spacing: .1em; text-shadow: 0 calc(3 * var(--u)) 0 var(--burgundy-d); }
.anniv__side i { font-style: normal; font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: .22em; color: var(--gold-300); }
.title {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(calc(40 * var(--u)), 6.6vw, calc(84 * var(--u))); line-height: .92; letter-spacing: .02em; margin-top: calc(10 * var(--u));
  color: var(--gold-300); -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; text-shadow: 0 calc(6 * var(--u)) 0 var(--gold-900), 0 calc(14 * var(--u)) calc(24 * var(--u)) rgba(0,0,0,.5);
  margin-bottom: calc(14 * var(--u));
}
.badge100 { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: calc(17 * var(--u)); letter-spacing: .05em; padding: calc(6 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)); margin-bottom: calc(12 * var(--u));
  color: var(--cream); background: linear-gradient(180deg, #c8344d, var(--burgundy)); border: calc(2 * var(--u)) solid var(--ink); box-shadow: 0 calc(3 * var(--u)) 0 var(--burgundy-d); }
.sub { max-width: calc(500 * var(--u)); line-height: 1.55; color: rgba(255,246,224,.86); margin-bottom: calc(22 * var(--u)); }
.menu { display: flex; flex-direction: column; gap: calc(16 * var(--u)); align-items: flex-start; }
.menu__row { display: flex; gap: calc(12 * var(--u)); flex-wrap: wrap; }
.period { margin-top: calc(18 * var(--u)); font-size: calc(13 * var(--u)); color: rgba(255,246,224,.6); }

/* ---------- Card / form ---------- */
.center { flex: 1; display: grid; place-items: center; padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u)); }
.card {
  width: min(calc(540 * var(--u)), 100%); padding: calc(26 * var(--u)) calc(26 * var(--u)) calc(24 * var(--u)); border-radius: calc(24 * var(--u));
  background: linear-gradient(180deg, rgba(18, 41, 74, .96), rgba(8, 20, 40, .98));
  border: calc(3 * var(--u)) solid var(--gold-500); box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 calc(24 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.6), inset 0 0 calc(40 * var(--u)) rgba(232,181,58,.08);
}
.field { display: flex; flex-direction: column; gap: calc(6 * var(--u)); margin-bottom: calc(14 * var(--u)); flex: 1; min-width: 0; }
.field-row { display: flex; gap: calc(12 * var(--u)); }
.field > label { font-family: var(--font-display); font-weight: 700; font-size: calc(14 * var(--u)); letter-spacing: .04em; color: var(--gold-300); }
input[type=text], input[type=tel], input[type=date], input[type=password] {
  font: inherit; font-size: calc(16 * var(--u)); color: var(--ink); background: var(--cream); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(12 * var(--u));
  padding: calc(11 * var(--u)) calc(14 * var(--u)); width: 100%; box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(0,0,0,.12);
}
input::placeholder { color: #8a8470; }
input.invalid { border-color: var(--burgundy); background: #ffe9e9; }
.chips { display: flex; gap: calc(8 * var(--u)); flex-wrap: wrap; }
.chipopt { cursor: pointer; }
.chipopt input { position: absolute; opacity: 0; pointer-events: none; }
.chipopt span { display: inline-block; padding: calc(9 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)); font-weight: 600; font-size: calc(15 * var(--u)); border: calc(2 * var(--u)) solid rgba(232,181,58,.55); background: rgba(0,0,0,.25); transition: .15s; }
.chipopt input:checked + span { color: var(--ink); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); border-color: var(--ink); box-shadow: 0 calc(3 * var(--u)) 0 var(--gold-900); }
.chipopt input:focus-visible + span { outline: calc(3 * var(--u)) solid #fff; outline-offset: calc(2 * var(--u)); }
.chips.invalid .chipopt span { border-color: #ff8c9b; }
.check { display: flex; gap: calc(10 * var(--u)); align-items: flex-start; font-size: calc(14 * var(--u)); line-height: 1.45; margin-bottom: calc(14 * var(--u)); cursor: pointer; }
.check input { flex: none; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-top: calc(1 * var(--u)); accent-color: var(--gold-500); }
.check.invalid { color: #ff8c9b; }
.turnsbox { display: flex; align-items: center; justify-content: space-between; padding: calc(10 * var(--u)) calc(16 * var(--u)); margin-bottom: calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(232,181,58,.12); border: calc(2 * var(--u)) dashed var(--gold-500); }
.turnsbox__label { font-weight: 600; }
.turnsbox__num { font-family: var(--font-display); font-weight: 800; font-size: calc(34 * var(--u)); color: var(--gold-300); line-height: 1; }
.form-error { min-height: calc(22 * var(--u)); color: #ff8c9b; font-weight: 600; font-size: calc(14 * var(--u)); margin: calc(6 * var(--u)) 0; }
.form-actions { display: flex; gap: calc(12 * var(--u)); justify-content: space-between; }
.form-actions .btn--gold { flex: 1; }

/* ---------- Modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: calc(16 * var(--u)); background: rgba(2, 8, 18, .8); backdrop-filter: blur(calc(4 * var(--u))); animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.modal__box {
  position: relative; z-index: 2; width: min(calc(620 * var(--u)), 100%); max-height: 90vh; overflow-y: auto; padding: calc(26 * var(--u)); border-radius: calc(24 * var(--u));
  background: linear-gradient(180deg, var(--navy-700), var(--navy-800)); border: calc(3 * var(--u)) solid var(--gold-500);
  box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.7); display: flex; flex-direction: column; gap: calc(14 * var(--u)); align-items: center;
  animation: pop .25s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.modal canvas[id^=confetti] { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.list { align-self: stretch; padding-left: calc(22 * var(--u)); display: flex; flex-direction: column; gap: calc(10 * var(--u)); line-height: 1.55; font-size: calc(15 * var(--u)); }
.list li::marker { color: var(--gold-300); font-weight: 700; }
.list--num { list-style: decimal; }

.tiers { align-self: stretch; display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.tier { border-radius: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); border: calc(2 * var(--u)) solid var(--gold-500); background: rgba(0,0,0,.26); }
.tier__head { font-family: var(--font-display); font-weight: 800; font-size: calc(17 * var(--u)); margin-bottom: calc(8 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); }
.tier--basic { border-color: #4a7bc0; } .tier--basic .tier__head { color: #9cc3ff; }
.tier--special { border-color: #d6566d; } .tier--special .tier__head { color: #ffb4bf; }
.tier--vip { border-color: var(--gold-300); background: linear-gradient(180deg, rgba(255,211,94,.16), rgba(0,0,0,.26)); } .tier--vip .tier__head { color: var(--gold-300); }
.tier ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: calc(6 * var(--u)) calc(14 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1.35; }
.tier li { display: flex; gap: calc(8 * var(--u)); align-items: center; }
.tier li i { font-style: normal; font-size: calc(18 * var(--u)); flex: none; }

/* ---------- Kết quả từng lượt ---------- */
.reveal { text-align: center; max-width: calc(480 * var(--u)); }
.reveal__icon { font-size: calc(92 * var(--u)); line-height: 1; animation: bounce 1s ease infinite; filter: drop-shadow(0 calc(8 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.5)); }
@keyframes bounce { 50% { transform: translateY(calc(-10 * var(--u))) scale(1.06); } }
.tierbadge { display: inline-block; padding: calc(4 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)); font-family: var(--font-display); font-weight: 800; font-size: calc(13 * var(--u)); letter-spacing: .12em; border: calc(2 * var(--u)) solid var(--ink); }
.tierbadge.t-basic { background: linear-gradient(180deg, #5b92dc, #2a5aa0); }
.tierbadge.t-special { background: linear-gradient(180deg, #e8556d, var(--burgundy)); }
.tierbadge.t-vip { color: var(--ink); background: linear-gradient(180deg, var(--gold-100), var(--gold-500)); }
.reveal__name { font-family: var(--font-display); font-weight: 800; font-size: calc(30 * var(--u)); line-height: 1.15; color: var(--gold-100); text-shadow: 0 calc(3 * var(--u)) 0 rgba(0,0,0,.4); }
.reveal.vip { box-shadow: 0 0 0 calc(3 * var(--u)) var(--ink), 0 0 calc(60 * var(--u)) rgba(255, 211, 94, .55), 0 calc(30 * var(--u)) calc(60 * var(--u)) rgba(0,0,0,.7); }
.result { text-align: center; max-width: calc(520 * var(--u)); }
.result__name { font-family: var(--font-display); font-weight: 700; font-size: calc(20 * var(--u)); }
.gifts { align-self: stretch; list-style: none; display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.gifts li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); text-align: left; border-radius: calc(14 * var(--u)); background: rgba(0,0,0,.28); border: calc(2 * var(--u)) solid rgba(232,181,58,.5); font-family: var(--font-display); font-weight: 700; font-size: calc(18 * var(--u)); color: var(--gold-100); }
.gifts li i { font-style: normal; font-size: calc(28 * var(--u)); }
.gifts li small { margin-left: auto; font-size: calc(11 * var(--u)); letter-spacing: .1em; color: var(--ink); padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: calc(99 * var(--u)); font-weight: 800; }
.gifts li small.t-basic { background: #7fb0f0; } .gifts li small.t-special { background: #ff9fb0; } .gifts li small.t-vip { background: var(--gold-300); }

/* ---------- Màn vòng quay ---------- */
.hud { display: flex; align-items: flex-start; justify-content: space-between; padding: calc(10 * var(--u)) calc(14 * var(--u)); gap: calc(12 * var(--u)); flex: none; position: relative; z-index: 3; }
.hud__tools { display: flex; gap: calc(8 * var(--u)); }
.scoreboard { display: flex; gap: calc(2 * var(--u)); padding: calc(6 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(6, 15, 31, .82); border: calc(3 * var(--u)) solid var(--gold-500); box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink), 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.5); }
.scoreboard__item { padding: calc(2 * var(--u)) calc(14 * var(--u)); text-align: center; min-width: calc(96 * var(--u)); }
.scoreboard__item + .scoreboard__item { border-left: calc(1 * var(--u)) solid rgba(232,181,58,.35); }
.scoreboard__item span { display: block; font-size: calc(10 * var(--u)); letter-spacing: .14em; color: rgba(255,246,224,.6); }
.scoreboard__item b { font-family: var(--font-display); font-weight: 800; font-size: calc(20 * var(--u)); line-height: 1.1; color: var(--cream); display: block; max-width: calc(170 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scoreboard__item--score b { color: var(--gold-300); font-size: calc(26 * var(--u)); }
.stage { --w: min(90vw, calc(100vh - calc(250 * var(--u))), calc(640 * var(--u))); flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr auto 1fr; grid-template-rows: 1fr auto; align-items: center; justify-items: center; padding: 0 calc(14 * var(--u)) calc(12 * var(--u)); position: relative; }
.stage .wheelbox { grid-column: 2; grid-row: 1; }
.won { grid-column: 3; grid-row: 1; justify-self: end; align-self: center; width: calc(240 * var(--u)); max-height: 60vh; overflow-y: auto; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: rgba(6,15,31,.82); border: calc(2 * var(--u)) solid rgba(232,181,58,.6); }
.won__title { font-size: calc(10 * var(--u)); letter-spacing: .16em; color: var(--gold-300); font-weight: 700; margin-bottom: calc(6 * var(--u)); }
.won ul { list-style: none; display: flex; flex-direction: column; gap: calc(6 * var(--u)); font-size: calc(13.5 * var(--u)); font-weight: 600; }
.won li { display: flex; gap: calc(8 * var(--u)); align-items: center; line-height: 1.25; }
.won li i { font-style: normal; font-size: calc(20 * var(--u)); }
.won .empty { color: rgba(255,246,224,.5); font-weight: 400; }
.actions { grid-column: 1 / -1; grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); }
.actions .btn--xl { min-width: calc(240 * var(--u)); animation: breathe 1.6s ease-in-out infinite; }
.actions .btn--xl:disabled { animation: none; }
@keyframes breathe { 50% { transform: scale(1.05); } }
.hint { font-weight: 600; font-size: calc(14 * var(--u)); color: rgba(255,246,224,.85); min-height: calc(20 * var(--u)); text-align: center; }
.phase-banner { position: absolute; top: calc(4 * var(--u)); left: calc(14 * var(--u)); z-index: 3; padding: calc(8 * var(--u)) calc(22 * var(--u)); border-radius: calc(14 * var(--u)); font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; font-size: calc(16 * var(--u));
  color: var(--ink); background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); border: calc(3 * var(--u)) solid var(--ink); box-shadow: 0 calc(4 * var(--u)) 0 var(--gold-900); text-align: center; }
.phase-banner small { display: block; font-weight: 600; font-size: calc(12 * var(--u)); letter-spacing: 0; }

.toast { position: fixed; left: 50%; bottom: calc(28 * var(--u)); transform: translate(-50%, calc(30 * var(--u))); opacity: 0; z-index: 100; padding: calc(12 * var(--u)) calc(22 * var(--u)); border-radius: calc(14 * var(--u)); font-weight: 600; background: var(--burgundy); border: calc(2 * var(--u)) solid var(--ink); transition: .25s; pointer-events: none; max-width: 90vw; text-align: center; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 900px), (orientation: portrait) {
  .home { --w: min(80vw, calc(400 * var(--u)), 46vh); grid-template-columns: 1fr; justify-items: center; text-align: center; gap: calc(8 * var(--u)); padding-top: 0; }
  .home__wheel { order: -1; }
  .anniv { justify-content: center; }
  .menu { align-items: center; }
  .menu__row { justify-content: center; }
  .sub { margin-left: auto; margin-right: auto; }
  .btn--xl { font-size: calc(22 * var(--u)); padding: calc(16 * var(--u)) calc(32 * var(--u)); }
  .stage { grid-template-columns: 1fr; grid-template-rows: auto auto auto; align-content: center; --w: min(92vw, calc(100vh - calc(330 * var(--u))), calc(560 * var(--u))); }
  .stage .wheelbox { grid-column: 1; }
  .won { grid-column: 1; grid-row: 2; justify-self: center; width: min(92vw, calc(420 * var(--u))); max-height: calc(96 * var(--u)); margin-top: calc(10 * var(--u)); }
  .actions { grid-row: 3; }
}
@media (max-width: 720px) {
  .scoreboard__item { min-width: 0; padding: calc(2 * var(--u)) calc(8 * var(--u)); }
  .scoreboard__item b { font-size: calc(15 * var(--u)); max-width: calc(90 * var(--u)); }
  .scoreboard__item--score b { font-size: calc(18 * var(--u)); }
  .field-row { flex-direction: column; gap: 0; }
  .tier ul { grid-template-columns: 1fr; }
  .brandbar { padding: calc(10 * var(--u)) calc(16 * var(--u)); }
  .home { padding-bottom: calc(20 * var(--u)); }
  .actions .btn--xl { min-width: calc(200 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .wheelbox::before, .anniv__num, .reveal__icon, .actions .btn--xl { animation: none; }
}

.hp { position: absolute; left: calc(-9999 * var(--u)); width: calc(1 * var(--u)); height: calc(1 * var(--u)); opacity: 0; pointer-events: none; }
.testflag { margin-top: calc(8 * var(--u)); display: inline-block; font-size: calc(12 * var(--u)); font-weight: 700; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(999 * var(--u)); color: var(--ink); background: var(--gold-300); }

/* ---------- Form: mã quay + gợi ý ---------- */
.fieldhint { font-size: calc(12 * var(--u)); color: rgba(255,246,224,.62); line-height: 1.35; }
input.codeinput { font-family: ui-monospace, Consolas, 'SF Mono', monospace; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; text-align: center; font-size: calc(22 * var(--u)); }
#orderCode { font-weight: 700; letter-spacing: .04em; }

/* ---------- Khối thông tin xác thực (popup trúng thưởng) ---------- */
.verify { align-self: stretch; text-align: left; padding: calc(12 * var(--u)) calc(14 * var(--u)); border-radius: calc(14 * var(--u)); background: rgba(0,0,0,.32); border: calc(2 * var(--u)) dashed var(--gold-500); }
.verify__title { font-size: calc(10.5 * var(--u)); letter-spacing: .12em; font-weight: 700; color: var(--gold-300); margin-bottom: calc(8 * var(--u)); }
.verify__row { display: flex; justify-content: space-between; align-items: baseline; gap: calc(12 * var(--u)); padding: calc(4 * var(--u)) 0; border-bottom: 1px solid rgba(255,246,224,.12); font-size: calc(14 * var(--u)); }
.verify__row:last-of-type { border-bottom: 0; }
.verify__row span { color: rgba(255,246,224,.65); flex: none; }
.verify__row b { color: var(--gold-100); text-align: right; font-weight: 700; word-break: break-all; }
.verify__row b.mono { font-family: ui-monospace, Consolas, monospace; letter-spacing: .08em; font-size: calc(16 * var(--u)); color: var(--gold-300); }
.verify__test { margin-top: calc(8 * var(--u)); text-align: center; font-size: calc(11 * var(--u)); font-weight: 800; letter-spacing: .08em; padding: calc(4 * var(--u)); border-radius: calc(8 * var(--u)); background: var(--gold-300); color: var(--ink); }
.result .verify { margin-bottom: calc(2 * var(--u)); }

/* ---------- Màn hình dọc lớn (kiosk 24–27") ---------- */
body { font-size: calc(16 * var(--u)); }
@media (orientation: portrait) and (min-width: 700px) {
  .home { --w: min(78vw, 38vh); gap: calc(4 * var(--u)); }
  .home__panel { display: flex; flex-direction: column; align-items: center; }
  .sub { max-width: 92%; margin-bottom: calc(14 * var(--u)); }
  .title { margin-bottom: calc(8 * var(--u)); }
  .menu { gap: calc(12 * var(--u)); }
  .stage { --w: min(92vw, 58vh); }
  .won { max-height: calc(140 * var(--u)); }
}

@media (max-width: 520px) {
  .hud { padding: 8px 8px; gap: 6px; }
  .hud__tools { gap: 5px; }
  .hud__tools .iconbtn { width: 36px; height: 36px; font-size: 16px; border-width: 2px; }
  .scoreboard { padding: 4px; }
  .scoreboard__item { padding: 2px 6px; }
  .scoreboard__item span { font-size: 8.5px; letter-spacing: .05em; }
  .scoreboard__item b { max-width: 70px; }
}