/* Landing page theo thiết kế LDP (810px). Mọi kích thước viết theo rem, 1rem = 10px của bản thiết kế,
   và html co giãn theo bề rộng màn hình → giữ đúng tỉ lệ thiết kế trên mọi điện thoại.
   Máy tính bảng / máy tính: cột nội dung dừng ở 560px, căn giữa. */

@font-face { font-family: "AlmarenaVN"; src: url("/fonts/almarena-regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "AlmarenaVN"; src: url("/fonts/almarena-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "AlmarenaVN Display"; src: url("/fonts/almarena-display-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
/* Montserrat (OFL) thay cho SVN-Gilroy ở tên quà, số câu đúng. Có file SVN-Gilroy thì thêm @font-face "SVN-Gilroy" là tự dùng */
@font-face { font-family: "Montserrat"; src: url("/fonts/montserrat.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  /* Màu lấy từ file thiết kế (đã quy về sRGB) */
  --navy: #053e54;
  --orange: #ff751f;
  --red: #ff3130;
  --btn: #ff5756;
  --gold: #d57b21;
  --gray: #737373;
  --flat: #cfebf6;
  --teal: #2cbcbf;
  --panel: #c6e9fc;
  --font: "AlmarenaVN", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "AlmarenaVN Display", "AlmarenaVN", system-ui, sans-serif;
  --font-big: "SVN-Gilroy", "Gilroy", "Montserrat", "Avenir Next", "Arial Black", system-ui, sans-serif;
  --tg: 6rem; /* khoảng cách logo → tiêu đề (đổi theo từng bước) */
  --sg: 4.5rem; /* khoảng cách tiêu đề → nội dung */
  --pg: 4rem; /* khoảng cách nội dung → khung dưới */
}

* { box-sizing: border-box; }

html { font-size: calc(min(100vw, 560px) / 81); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Các màn dài (thể lệ, kết quả trúng quà) có chiều cao cố định theo rem (--fit, đã cộng chút dư): màn hình ngắn thì co cả trang
   nhỏ lại cho vừa chiều cao, không phải cuộn. Màn đủ cao vẫn giữ cỡ theo bề rộng. Bản 100vh dự phòng cho máy chưa hiểu svh. */
html[data-step="rules"] { --fit: 148; }
html[data-step="prize"] { --fit: 157; }
html[data-step="prize"][data-prize="voucher"] { --fit: 190; } /* tên dài 2 dòng + dòng giá trị + phiếu rộng */
html[data-step="rules"], html[data-step="prize"] { font-size: min(calc(min(100vw, 560px) / 81), calc((100vh - env(safe-area-inset-top, 0px)) / var(--fit))); }
html[data-step="rules"], html[data-step="prize"] { font-size: min(calc(min(100vw, 560px) / 81), calc((100svh - env(safe-area-inset-top, 0px)) / var(--fit))); }

body {
  margin: 0;
  min-height: 100vh;
  background: #ddf2fb;
  font-family: var(--font);
  font-size: 2.8rem;
  line-height: 1.4;
  color: #000;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
/* Nền cố định (dùng pseudo-element vì iOS Safari không hỗ trợ background-attachment: fixed) */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: #ddf2fb url("/assets/bg.jpg") 62% 0 / cover no-repeat;
}

.page { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: env(safe-area-inset-top) 0 0; }
.col { position: relative; width: 81rem; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }

/* Từng bước đổi khoảng cách theo thiết kế */
body[data-step="home"] { --tg: 6.3rem; --sg: 5rem; --pg: 0; }
body[data-step="phone"], body[data-step="otp"], body[data-step="closed"] { --tg: 11.85rem; --sg: 4.5rem; --pg: 11.8rem; }
body[data-step="quiz"] { --tg: 4.7rem; --sg: 2.5rem; --pg: 0; }
body[data-step="score"] { --tg: 13.75rem; --sg: 9.1rem; --pg: 6.5rem; }
body[data-step="wheel"] { --tg: 6.3rem; --sg: 2.8rem; --pg: 6rem; }
body[data-step="prize"] { --tg: 6.3rem; --sg: 3.9rem; --pg: 5rem; }
body[data-step="rules"] { --tg: 4.4rem; --sg: 3.5rem; --pg: 3.3rem; }

/* Logo + tiêu đề */
.logo { display: block; width: 36.7rem; height: auto; margin: 6.8rem auto 0; cursor: pointer; }
.title {
  margin: var(--tg) 0 0; display: grid; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 5.7rem; line-height: 7.9rem; color: var(--navy);
  text-shadow: 0 .3rem .7rem rgb(5 62 84 / .3);
}
body[data-step="rules"] .title, body[data-step="quiz"] .title { font-size: 5.8rem; line-height: 6.95rem; }
.title .accent { color: var(--orange); text-shadow: 0 .3rem .7rem rgb(190 70 0 / .3); }

.step { margin-top: var(--sg); margin-bottom: var(--pg); }
form.step { display: block; }

/* Trang chủ */
.menu { display: grid; }
.menu-item {
  position: relative; height: 9.5rem; margin-bottom: 7rem; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 3.8rem; line-height: 1; color: var(--navy);
}
.menu-item::before, .menu-item::after {
  content: ""; position: absolute; left: 50%; width: 44rem; height: .3rem; transform: translateX(-50%); border-radius: 1rem;
  background: linear-gradient(90deg, transparent, rgb(70 175 185 / .75) 25%, rgb(70 175 185 / .75) 75%, transparent);
  box-shadow: 0 .3rem .7rem rgb(60 170 180 / .35);
}
.menu-item::before { top: 0; }
.menu-item::after { bottom: 0; }
.menu-item:active { opacity: .7; }
.bio { position: relative; z-index: 2; display: block; width: 54rem; max-width: none; height: auto; margin: -9.2rem auto -10.4rem; pointer-events: none; }

/* Thẻ trắng: nhập SĐT, OTP, kết quả */
.card { margin: 0 7rem; padding: 4.25rem 3.9rem 5.2rem; background: #fff; border-radius: 3.6rem; }
.card.center { text-align: center; padding: 3.1rem 2rem 3.6rem; }
#step-score .card.center { padding-bottom: 4.2rem; }
.card.closed { padding: 4rem 3rem; text-align: center; font-weight: 700; color: var(--navy); }
.lead { margin: 0; text-align: center; font-size: 3.2rem; line-height: 4.5rem; color: var(--navy); }
.lead b, label b { font-weight: 700; }

label, legend { font-weight: 700; }
.card label { display: block; margin-top: 3.7rem; font-size: 2.5rem; line-height: 3.4rem; color: var(--navy); }
.field-note { margin: 0; font-size: max(1.9rem, 10.5px); line-height: 2.4rem; color: var(--gray); }

input, select, button { font-family: inherit; }
.card input {
  display: block; width: 100%; height: 9.6rem; margin-top: 1.8rem; padding: 0 2.4rem;
  font-size: 3rem; color: #000; background: #e4eaf0; border: 0; border-radius: 1.4rem; outline: none;
}
.card input:focus { background: #dbe4ed; }
#otp { letter-spacing: .5em; text-align: center; font-size: 3.6rem; }
#form-otp label { margin-top: 5.6rem; }
#form-otp input { height: 10.2rem; margin-top: 1.2rem; }
#form-otp .btn { height: 7.2rem; margin-top: 2.1rem; }
#form-otp { padding-bottom: 7rem; }
#form-phone .field-note { margin-top: 0; }
.hint { margin: 1.4rem 0 0; padding: 1rem 1.2rem; font-size: max(2rem, 12px); line-height: 1.4; background: #fffbeb; border-radius: 1rem; color: #92400e; }

.btn {
  display: block; width: 100%; height: 7.8rem; margin: 2rem 0 0; padding: 0 2rem; border: 0; border-radius: 1.4rem; cursor: pointer;
  font-weight: 700; font-size: 2.9rem; line-height: 1; color: #fff; background: var(--btn);
}
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(.96); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.actions { margin: 6.3rem 0 0; display: flex; justify-content: center; }
.actions .btn { width: 32.1rem; height: 9.4rem; margin: 0; padding-top: .5rem; font-size: 4.5rem; }
.actions.spin { margin-top: 4.2rem; }
.actions.spin .btn { width: 30.6rem; height: 8.9rem; font-size: 4.3rem; border-radius: 1.6rem; }

.row { display: flex; justify-content: space-between; margin-top: .8rem; }
.link-sm { min-height: 4.4rem; padding: 0; background: none; border: 0; font-size: max(1.9rem, 9px); color: var(--gray); cursor: pointer; }
.link-sm.accent, .link-sm .cd { color: var(--red); }
.link-sm:disabled { cursor: default; }

.error { margin: 2rem 7rem 0; padding: 1.4rem 1.8rem; background: #fef2f2; color: #b91c1c; border-radius: 1.2rem; font-weight: 700; font-size: max(2.4rem, 13px); line-height: 1.4; }
#quiz-error { margin: 3rem 0 0; }

/* Thông tin người chơi (không có thẻ trắng, ô nhập nằm trực tiếp trên nền) */
.fields { margin: 0 5rem; }
.fields label, .fields legend { display: block; font-weight: 400; font-size: 2.8rem; line-height: 3.8rem; color: #000; }
.fields em, .section-title em { color: var(--red); font-style: normal; }
.field {
  display: block; width: 100%; height: 8rem; padding: 0 2.4rem; margin: 0;
  font-size: 3rem; color: #000; background: #fff; border: .3rem solid transparent; border-radius: 1.4rem; outline: none; appearance: none;
}
.field:focus { border-color: var(--teal); }
.field.readonly { color: #a6a6a6; }
select.field {
  padding-right: 5rem; text-overflow: ellipsis; font-size: 2.6rem;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%231d3f5a' stroke-width='2'/></svg>") right 2.2rem center / 2rem no-repeat;
}
select.field:invalid { color: #8f8f8f; }
.fields > label:not(:first-child) { margin-top: 1rem; }
.fields > .field { margin-top: 0; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 5.8rem; margin-top: 1rem; }
.two > div { min-width: 0; }
.two label { margin-top: 0 !important; }
.two .field-note { margin-top: .8rem; font-size: max(1.7rem, 8.5px); line-height: 2rem; }
.field.invalid, fieldset.invalid { border-color: var(--red); }
.fields > label[for="q-workplace"] { margin-top: 1rem; }

fieldset { margin: 2.1rem 0 0; padding: 0; min-width: 0; border: .3rem solid transparent; border-radius: 1.4rem; display: grid; grid-template-columns: 30.1rem 1fr; gap: .5rem 6.3rem; }
legend { grid-column: 1 / -1; float: left; width: 100%; padding: 0; margin-bottom: 0; }
fieldset > legend + * { clear: both; }
.fields .choice { position: relative; display: flex; font-weight: 400; align-items: center; height: 6.4rem; padding-left: 2.9rem; background: #f5f5f5; border-radius: 1.2rem; font-size: 2.8rem; line-height: 1; color: #000; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice i { display: block; flex: none; width: 5.2rem; height: 5.2rem; margin-right: 2.6rem; border: .3rem solid #252525; border-radius: 1.2rem; background: #f5f5f5; }
.choice input:checked + i { background: var(--teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 80% no-repeat; border-color: #1f8f95; }
.choice input:focus-visible + i { outline: .3rem solid var(--teal); outline-offset: .2rem; }

/* Phần câu hỏi: nền phẳng, tràn hết chiều ngang */
.flat { width: 100vw; margin: 4.1rem 0 0 calc(50% - 50vw); padding: 4rem 0 calc(10rem + env(safe-area-inset-bottom)); background: var(--flat); }
.flat .col { display: block; flex: none; }
.section-title { margin: 0 0 1.6rem; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 5.2rem; line-height: 7rem; color: var(--navy); text-shadow: 0 .3rem .7rem rgb(5 62 84 / .3); }
#questions { margin: 0 3.8rem; }
.q { margin-bottom: 3.4rem; }
.q h3 { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 4.8rem; color: var(--navy); text-shadow: 0 .2rem .5rem rgb(5 62 84 / .28); }
.q-text { margin: 0; font-size: 3rem; line-height: 4.1rem; color: #000; }
.q-hint { margin: .2rem 0 0; font-size: max(1.8rem, 9px); font-style: italic; color: #4a6677; }
.opts { display: grid; gap: 1.1rem; margin-top: .9rem; }
.opt { position: relative; display: block; padding: 1.5rem 1.1rem; background: #fff; border-radius: 1.4rem; font-weight: 400; font-size: 2.5rem; line-height: 3.5rem; color: #000; cursor: pointer; box-shadow: inset 0 0 0 .3rem transparent; transition: box-shadow .12s, background-color .12s; }
.opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opt:has(input:checked) { background: #fff6ee; box-shadow: inset 0 0 0 .4rem var(--orange); }
.opt:has(input:focus-visible) { box-shadow: inset 0 0 0 .4rem var(--orange); }
.q.invalid .q-text { color: #b91c1c; }
.q.invalid .opt { box-shadow: inset 0 0 0 .3rem #f4b6b0; }
.btn.gold { display: flex; align-items: center; justify-content: center; gap: 1.6rem; width: 35.6rem; height: 9.2rem; margin: 6rem auto 0; font-size: 3.4rem; border-radius: 3.2rem; background: var(--gold); box-shadow: 0 .5rem 1.6rem rgb(212 145 72 / .35); }
.btn.gold svg { width: 4.6rem; height: 4.6rem; }

/* Kết quả quiz / quà */
.congrats { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 4rem; line-height: 5.4rem; color: var(--navy); text-shadow: 0 .2rem .5rem rgb(5 62 84 / .28); }
.who { margin: .5rem 0 0; font-size: 3rem; line-height: 4rem; color: var(--navy); }
.big {
  margin: 2.6rem 0 0; font-family: var(--font-big); font-weight: 800; font-size: 7rem; line-height: 9rem; color: var(--red);
  -webkit-text-stroke: .6rem #f7d970; paint-order: stroke fill; text-shadow: 0 .3rem .5rem rgb(0 0 0 / .12); letter-spacing: -.01em;
}
.big.prize-name { margin-top: 1.5rem; text-transform: uppercase; font-size: 6rem; line-height: 7.6rem; }
.big.prize-note { margin-top: 0; text-transform: uppercase; font-size: 3.8rem; line-height: 5rem; }
.end-msg { margin: 2.9rem 0 0; text-align: center; font-weight: 700; font-size: 3.6rem; line-height: 4rem; color: var(--red); }
.step#step-score .actions { margin-top: 6.3rem; }
.end-msg:not([hidden]) ~ .note-list { margin-top: 3.4rem; }
.note-list { margin: 5rem 2.6rem 0 4rem; font-size: 2.85rem; line-height: 3.8rem; color: var(--navy); }
.note-list p { margin: 0 0 .4rem; font-size: 2.7rem; }
.note-list ul { margin: 0; padding: 0; list-style: none; }
.note-list li { position: relative; padding-left: 2.4rem; }
.note-list li::before { content: ""; position: absolute; left: .4rem; top: 1.05rem; border: .6rem solid transparent; border-left: .9rem solid #ffa51f; }
.note-list .no { color: var(--red); }
#step-score { flex: 1; display: flex; flex-direction: column; }
#thanks-fail { margin-top: auto; padding-top: 4rem; }
.thanks { margin: 6rem 0 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 3.5rem; line-height: 4.25rem; color: var(--navy); }
.thanks span { color: #744f00; }
#step-prize .thanks { margin-top: 3.8rem; }
#step-prize .card.center { padding-bottom: 3.9rem; }
.prize-img { display: block; height: 46rem; width: auto; max-width: 66rem; margin: 3.4rem auto 0; object-fit: contain; }
.prize-img.wide { width: 68rem; height: auto; max-width: 100%; margin-top: 4.4rem; }
.screenshot { width: 73rem; max-width: calc(100% - 3rem); margin: 3.4rem auto 0; padding: 1.8rem 1rem; text-align: center; font-size: 3rem; line-height: 4.3rem; color: var(--btn); background: #fff0f1; border-radius: 2.4rem; }

/* Vòng quay */
.wheel-intro { margin: 0; text-align: center; font-size: 3.3rem; line-height: 4.7rem; color: var(--navy); }
.wheel-wrap { position: relative; width: 64rem; margin: 7.2rem auto 0; }
.wheel-wrap #wheel { position: relative; display: block; width: 100%; height: auto; transition: transform 5s cubic-bezier(.17, .67, .12, .99); will-change: transform; }
.wheel-disc img { display: block; width: 100%; height: auto; }
.wheel-labels { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.wheel-labels text { font-family: var(--font-big); font-weight: 800; letter-spacing: .02em; fill: #fff; paint-order: stroke; stroke: rgb(4 36 96 / .55); stroke-width: 1.6px; stroke-linejoin: round; }
/* Mũi kim chạm mép ngoài vòng quay, không đè lên tên quà ghi trên viền */
.pointer { position: absolute; z-index: 2; top: -5.7rem; left: 50%; width: 7.4rem; height: 6.2rem; transform: translateX(-50%); background: #7e1617; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.pointer::after { content: ""; position: absolute; inset: .45rem .6rem .8rem; background: #c02126; clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* Thể lệ */
.rules { margin: 0 3.7rem; font-size: 2.9rem; line-height: 4.07rem; color: var(--navy); }
.rules h2 { margin: 0; font-size: 2.75rem; line-height: 4.5rem; font-weight: 700; }
.rules .sub { margin: 0; font-size: 2.75rem; line-height: 4.5rem; font-weight: 700; }
.rules ul { margin: .2rem 0 0; padding-left: 4.4rem; }
.rules li { line-height: 4rem; font-size: 2.7rem; }
.rules h3 { margin: 3.4rem 0 0; font-size: 2.93rem; line-height: 4rem; font-weight: 700; }
.rules p { margin: 0; }
.rules .steps { list-style: none; padding: 0; margin: 0; }
.rules .steps li { margin: 0; line-height: 4.07rem; font-size: 2.9rem; }
.rules .steps .sub-li { position: relative; padding-left: 2.5rem; }
.rules .steps .sub-li::before { content: ""; position: absolute; left: .8rem; top: 1.2rem; border: .6rem solid transparent; border-left: .9rem solid #ffa51f; }
.rules .pass { color: var(--red); }
.gifts { display: grid; grid-template-columns: 20rem 29rem 25rem; margin: 1.9rem -.2rem 0; padding: 1.1rem 0 .6rem; background: #fff; border-radius: 3rem; text-align: center; color: var(--navy); }
.gift { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.gift .n { font-family: var(--font-big); font-weight: 800; font-size: 4.1rem; line-height: 5rem; }
.gift .n.out { color: var(--red); font-size: 3.4rem; }
.gift .u { font-size: max(1.5rem, 8px); line-height: 1.6rem; }
.gift .pic { display: flex; align-items: flex-end; justify-content: center; height: 20rem; margin-top: .4rem; }
.gift img { display: block; width: auto; height: 16rem; }
.gift img.tui { height: 19.6rem; }
.gift img.voucher { height: auto; width: 15.8rem; }
.gift .nm { margin-top: .8rem; font-family: var(--font-big); font-weight: 800; text-transform: uppercase; color: var(--red); font-size: max(1.3rem, 7px); line-height: 1.8rem; }
.gift .nm small { display: block; font-size: max(1.7rem, 8px); line-height: 2.1rem; }
.gift .nm.long { font-size: max(1.15rem, 6.5px); white-space: nowrap; }

/* Khung dưới: giới thiệu / hệ sinh thái */
.panel {
  position: relative; width: 79rem; margin: auto auto 0; padding: 3.7rem 2.8rem calc(5.5rem + env(safe-area-inset-bottom));
  background: var(--panel); border: .4rem solid #a3fff3; border-bottom: 0; border-radius: 4rem 4rem 0 0;
  box-shadow: 0 0 2.4rem rgb(120 245 232 / .75), inset 0 0 2.4rem rgb(120 245 232 / .5);
}
#panel-intro p { margin: 0; text-align: justify; font-size: 2.55rem; line-height: 3.65rem; color: var(--navy); }
.eco { text-align: center; padding-top: 1.8rem; }
.eco h2 { margin: 0; font-size: 2.7rem; line-height: 3.5rem; font-weight: 700; color: var(--teal); }
.pill { display: block; width: 52.7rem; max-width: 100%; min-height: 3.2rem; margin: 1.4rem auto 0; padding: 0 1rem; font-size: max(1.9rem, 9px); line-height: 3.2rem; border-radius: 1.6rem; color: #fff; background: linear-gradient(90deg, #93cb5a, #3bc0b0 48%, #13465b); }
.eco img { display: block; width: 100%; height: auto; margin-top: .6rem; }
.rules .note-box { margin-top: 2.6rem; }
.note-box { padding-top: .6rem; font-size: 2.8rem; line-height: 3.95rem; color: var(--navy); }
.note-box p { margin: 0 0 1rem; font-size: 2.8rem; }
.note-box .pin { width: 3.3rem; height: 3.3rem; vertical-align: -.5rem; margin-right: .3rem; }
.note-box ul { margin: 0; padding-left: 3.8rem; }
.note-box li { margin: 0 0 .6rem; padding-left: .2rem; }
.back { position: absolute; top: 1.4rem; left: 1.4rem; z-index: 3; min-height: 4.4rem; font-size: max(2.2rem, 12px); color: var(--navy); font-weight: 700; }

[hidden] { display: none !important; }

/* Màn hình lớn (iPad, máy tính): cột 560px căn giữa, nội dung vẫn đúng tỉ lệ */
@media (min-width: 700px) {
  html { font-size: calc(min(100vw, 640px) / 81); } /* iPad, máy tính: cột rộng 640px cho chữ dễ đọc */
  html[data-step="rules"], html[data-step="prize"] { font-size: min(calc(min(100vw, 640px) / 81), calc((100vh - env(safe-area-inset-top, 0px)) / var(--fit))); }
  html[data-step="rules"], html[data-step="prize"] { font-size: min(calc(min(100vw, 640px) / 81), calc((100svh - env(safe-area-inset-top, 0px)) / var(--fit))); }
}
@media (prefers-reduced-motion: reduce) { .wheel-wrap #wheel { transition-duration: .01s; } .opt { transition: none; } }