/* =========================================================
   Halloween 2026 – Student page
   ========================================================= */

@font-face {
  font-family: "Brauer";
  src: url("/landings/halloween/assets/fonts/BrauerNeueVN-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Baskerville VN";
  src: url("/landings/halloween/assets/fonts/Baskerville.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Baskerville VN";
  src: url("/landings/halloween/assets/fonts/Baskerville-SemiBold.ttf") format("truetype");
  font-weight: 600 700;
  font-display: swap;
}

:root {
  --cream: #fdf4e6;
  --cream-2: #f9ead2;
  --paper: #fffdf9;
  --line: #ead7bd;
  --orange: #f57f0f;
  --orange-2: #ffa31a;
  --blue: #2b3ed3;
  --navy: #1b2280;
  --ink: #3a3a3a;
  --gold-grad: linear-gradient(180deg, #fff6c4 0%, #f8d462 38%, #d99a1c 58%, #f6cf5a 82%, #fff0a8 100%);

  --f-head: "Brauer", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Baskerville VN", "Baskerville", "Times New Roman", serif;

  --page-w: 480px;
  --gutter: clamp(16px, 5cqw, 28px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-body);
  color: var(--blue);
  background: var(--cream);
  color-scheme: light;
}

img { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; }
/* Ô nhập liệu kế thừa font của trang; không cho trình duyệt tự làm đậm/nghiêng giả */
input, textarea, select { font: inherit; }
html { font-synthesis: none; }
b, strong { font-weight: inherit; }
[hidden] { display: none !important; }

/* ---------- Page (tràn màn hình) ---------- */
.page {
  container-type: inline-size;
  width: 100%;
  background: var(--cream);
  overflow: hidden;
}

/* Thẻ sự kiện: 1 thẻ HTML dùng chung cho mọi khu vực (#provinceCard, nội dung từ events.js).
   Luồng đăng ký theo data-flow (main.js → currentFlow):
     free → Cosplay Stars (miễn phí) · pay → Hành trình Halloween + thanh toán */
.page[data-flow="free"] .journey,
.page:not([data-flow="free"]) .cosplay { display: none; }

/* ---------- Shared ---------- */
.card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(186, 128, 50, .12);
}

.img-btn {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  transition: transform .2s ease, filter .2s ease;
}
.img-btn:hover { transform: translateY(-2px) scale(1.02); filter: brightness(1.05) drop-shadow(0 6px 10px rgba(245, 127, 15, .35)); }
.img-btn:active { transform: scale(.98); }
.img-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 999px; }

.gold-text {
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .6px #b37812;
  /* bóng tính theo em (≈ 2px ở 38px như thiết kế gốc): chữ nhỏ thì bóng nhỏ theo,
     không bị "đúp" dấu tiếng Việt / dấu câu */
  filter: drop-shadow(0 .055em 0 #8d5a08) drop-shadow(0 .1em .16em rgba(120, 70, 0, .3));
}

.float { animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-8px); } }

.reveal { transform: translateY(16px); transition: transform .6s ease; }
.reveal.is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .float { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Hero ---------- */
.hero img { width: 100%; }
/* Máy tính: ảnh "Banner desktop" đã nối cảnh 2 bên (3356×821, phần gốc 1916px ở giữa).
   Tràn hết bề ngang; cao = min(640px, 62vh, 42vw) → không chiếm hết màn hình,
   và vì 42vw < bề rộng/2.33 nên phần ảnh gốc ở giữa không bao giờ bị cắt.
   Vẽ bằng background (đường dẫn trong CSS tính theo vị trí file .css nên host không làm hỏng);
   ảnh <img> mobile được ẩn khỏi mắt nhưng giữ alt cho trình đọc màn hình. */
@media (min-width: 900px) {
  .hero {
    position: relative;
    height: min(640px, 62vh, 42vw);
    background: #c9cbd8 url("/landings/halloween/assets/img/banner-desktop-wide-2200.webp") 50% 50% / cover no-repeat;
  }
  .hero img {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .intro { background: var(--cream); } /* liền nền với banner */
}
@media (min-width: 2400px) {
  .hero { background-image: url("/landings/halloween/assets/img/banner-desktop-wide.webp"); }
}

/* ---------- Intro ---------- */
.intro {
  position: relative;
  padding: 18px 0 26px;
  background:
    radial-gradient(60% 30% at 100% 8%, #fde9c6 0%, transparent 70%),
    var(--cream);
}

.intro__head {
  position: relative;
  padding: 0 var(--gutter);
}
.intro__text { position: relative; z-index: 2; width: 74%; }

.intro__eyebrow {
  margin: 0;
  font: 700 clamp(17px, 4.6cqw, 23px)/1 var(--f-head);
  text-transform: uppercase;
  color: var(--orange);
}
.intro__title {
  position: relative;
  display: inline-block;
  margin: 2px 0 8px;
  font: 700 clamp(26px, 7.6cqw, 38px)/1.05 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .3px;
}
.intro__sparkle {
  position: absolute;
  right: -18cqw;
  top: -2cqw;
  width: 17cqw;
  height: auto;
}
.intro__desc {
  margin: 0;
  font-size: clamp(13px, 3.25cqw, 16px);
  line-height: 1.4;
}
.intro__castle {
  position: absolute;
  right: -1cqw;
  top: 1cqw;
  width: 23cqw;
  z-index: 3;
  filter: drop-shadow(0 6px 10px rgba(60, 20, 120, .25));
}

/* Thẻ sự kiện */
.event-cards {
  display: flex;
  flex-direction: column;
  margin: -1cqw -1cqw 0;
}
.event-card {
  position: relative;
  margin-block: -4.5cqw;
  z-index: 1;
}
.pcard__bg { display: block; width: 100%; }

/* Thẻ sự kiện: nền giấy (ảnh, không chữ) + tranh khu vực + nội dung HTML; đơn vị cqw theo bề rộng thẻ.
   Vị trí đo theo thiết kế gốc card-north-1600.webp (1600×697). */
.pcard { container-type: inline-size; }
.pcard__body {
  position: absolute;
  left: 40.5%;
  top: 14%;
  bottom: 14%;
  width: 54.5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2cqw;
}
.pcard__date {
  padding: .9cqw 2.8cqw .7cqw;
  border-radius: 999px;
  background: linear-gradient(180deg, #fb9420, var(--orange));
  box-shadow: 0 .3cqw .8cqw rgba(214, 98, 0, .25);
  color: #fff;
  font: 700 max(20px, 3.9cqw)/1 var(--f-head);
  white-space: nowrap;
}
.pcard__venue {
  display: flex;
  gap: .8cqw;
  margin: 0;
  max-width: 50cqw;
  padding-left: 2.4cqw;
  color: var(--blue);
  font: 700 max(14px, 2.15cqw)/1.25 var(--f-card);
}
/* Dải logo đơn vị đồng hành ngay trên thẻ sự kiện (The Garden, Ambedo Fiesta) – chỉ Hà Nội.
   Không khung nền: nhãn nhỏ có 2 vạch hai bên + 2 logo ngăn bằng vạch mảnh, căn giữa.
   Ảnh nền giấy có khoảng trong suốt phía trên → margin-bottom âm kéo thẻ sát lên dải logo
   (logo nằm trên, z-index 2, nếu chạm đỉnh mép giấy xé). */
.hosts {
  display: none;
  position: relative;
  z-index: 2;
  margin: 4px auto -.4cqw;
  text-align: center;
}
.page[data-city="hanoi"] .hosts { display: block; }
.hosts__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--navy);
  font: 600 15px/1.3 var(--f-body);
  letter-spacing: .04em;
}
.hosts__label::before,
.hosts__label::after { content: ""; width: 44px; height: 1px; background: linear-gradient(90deg, transparent, rgba(27, 34, 128, .35)); }
.hosts__label::after { transform: scaleX(-1); }
.hosts__logos { display: flex; align-items: center; justify-content: center; gap: 28px; }
.hosts__logos img { display: block; width: auto; }
.hosts__garden { height: 46px; }
.hosts__ambedo { height: 72px; } /* logo vuông + nhiều chi tiết → cao hơn cho cân thị giác */
.hosts__sep { align-self: stretch; width: 1px; margin-block: 8px; background: rgba(27, 34, 128, .2); }
.pcard__pin { flex: none; align-self: flex-start; width: 1.7cqw; height: auto; margin-top: .05cqw; filter: drop-shadow(0 .2cqw .3cqw rgba(160, 20, 20, .25)); }
/* Tranh khu vực bên trái (máy tính) */
.pcard__art {
  position: absolute;
  left: 7%;
  top: 17%;
  width: 31%;
  height: 68%;
  object-fit: contain;
  object-position: center;
}
.pcard__sessions {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.1cqw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcard__sessions li {
  display: grid;
  gap: .3cqw;
  padding: .8cqw 1.6cqw .7cqw;
  border-radius: 1.2cqw;
  background: rgba(255, 255, 255, .72);
  font: 700 max(13px, 1.85cqw)/1.2 var(--f-card);
}
.pcard__sessions li.has-icon { grid-template-columns: auto auto; column-gap: .9cqw; align-items: center; padding: .8cqw 1.6cqw .7cqw 1cqw; }
.pcard__sicon { grid-row: span 2; width: 5cqw; height: auto; }
.pcard__sessions b { color: var(--blue); font-weight: 700; }
/* Thẻ hẹp (Hà Nội 2 ca): ô co lại, "ngày …" xuống dòng nguyên cụm thay vì tràn khung */
.pcard__sessions { max-width: 100%; }
.pcard__sessions li { flex: 0 1 auto; min-width: 0; }
.pcard__sessions li > span { display: flex; align-items: flex-start; gap: .5cqw; color: var(--orange); }
.pcard__sday { white-space: nowrap; }
/* Ghi chú dưới địa chỉ (events.js → venueNote), vd "Có xe đưa đón tại trung tâm" */
.pcard__note {
  display: flex;
  align-items: center;
  gap: .8cqw;
  margin: 0;
  max-width: 50cqw;
  padding-left: 2.4cqw;
  color: var(--orange);
  font: 700 max(13px, 1.95cqw)/1.25 var(--f-card);
}
.pcard__note[hidden] { display: none; }
.pcard__note-ic { flex: none; width: max(14px, 2cqw); height: max(14px, 2cqw); }
/* Địa chỉ → Google Maps */
.pcard__map { color: inherit; text-decoration: underline; text-decoration-color: rgba(43, 62, 211, .35); text-underline-offset: .18em; }
.pcard__map:hover { color: var(--orange); text-decoration-color: currentColor; }
.pcard__map:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 2px; }
.pcard__sessions svg { flex: none; width: 1.7cqw; height: 1.7cqw; margin-top: .05em; color: var(--blue); }
/* Chữ thông tin trên thẻ (địa chỉ, ca/thời gian, giá): Times New Roman theo yêu cầu (dấu tiếng Việt rõ hơn Brauer ở cỡ nhỏ) */
.pcard { --f-card: "Times New Roman", Times, "Liberation Serif", serif; }
/* Giá vé (main.js → render) */
.pcard__fee {
  display: flex;
  align-items: center;
  gap: .8cqw;
  margin: 0;
  padding-left: 2.4cqw;
  color: var(--blue);
  font: 700 max(14px, 2.05cqw)/1.25 var(--f-card);
}
.pcard__fee b { color: var(--orange); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Home: chưa biết học viên/center → chưa có giá. Riêng Hà Nội: mọi center đều "Miễn phí" → vẫn hiện (17/10) */
.page[data-state="home"]:not([data-city="hanoi"]) .pcard__fee { display: none; }
.pcard__fee-ic { flex: none; width: 2.8cqw; height: 2.8cqw; color: var(--orange); }
/* Nút vàng bằng HTML (thay ảnh nút in sẵn chữ) – nhãn đổi theo trạng thái (config.js → pageText.cta) */
.pcard__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40cqw;
  margin-top: .4cqw;
  padding: 1.4cqw 3.2cqw 1.2cqw;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(100deg, #f3cf55 0%, #fff3a6 28%, #f7d65c 52%, #e9b52a 78%, #fbe27a 100%);
  box-shadow: inset 0 0 0 .25cqw #fff6d6, 0 0 0 .25cqw #c9962a, 0 .6cqw 0 .1cqw #a8740f, 0 1.2cqw 1.6cqw rgba(138, 91, 14, .3);
  color: #2433c9;
  font: 700 max(15px, 2.9cqw)/1 var(--f-head);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: .2px;
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.pcard__cta:hover { transform: translateY(-.3cqw); filter: brightness(1.04); }
.pcard__cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Tiêu đề trải nghiệm */
.exp-title { margin: -2cqw 6cqw -5cqw; }
.exp-title img { width: 100%; }

/* =========================================================
   Trải nghiệm: thẻ bài phép thuật lật 3D
   Mặt trước: icon + nhãn · bấm → lật sang mặt sau (mô tả). Mỗi lần lật 1 thẻ.
   Mobile 2 cột, ≥600px 4 cột. Màu riêng mỗi thẻ: --glow (quầng sáng icon).
   ========================================================= */
.exp-grid {
  list-style: none;
  margin: 10px 0 0;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 14px;
}
.exp-item { min-width: 0; display: flex; }
.exp-item:nth-child(2) { transition-delay: .08s; }
.exp-item:nth-child(3) { transition-delay: .16s; }
.exp-item:nth-child(4) { transition-delay: .24s; }

.exp-card {
  flex: 1;
  display: flex;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: center;
  cursor: pointer;
  perspective: 1100px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.exp-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 24px; }

/* 2 mặt chồng cùng 1 ô lưới → chiều cao = mặt cao hơn, không cần position absolute */
.exp-card__inner {
  flex: 1;
  display: grid;
  transform-style: preserve-3d;
  transition: transform .75s cubic-bezier(.3, 1.35, .45, 1);
}
.exp-item.is-flipped .exp-card__inner { transform: rotateY(180deg); }

.exp-card__face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 210px;
  padding: 16px 12px 14px;
  border-radius: 22px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ----- Mặt trước ----- */
.exp-card__front {
  background:
    radial-gradient(90% 55% at 50% 30%, var(--glow), transparent 70%),
    linear-gradient(180deg, #fffdf8, #fff3e2);
  border: 1.5px solid #f1dcc0;
  box-shadow: 0 10px 22px rgba(150, 90, 30, .13), inset 0 -3px 0 rgba(241, 220, 192, .7);
  transition: box-shadow .35s ease;
}
/* sao lấp lánh trang trí */
.exp-card__front::before,
.exp-card__front::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: url("/landings/halloween/assets/img/icons/sparkle.svg") center / contain no-repeat;
  animation: twinkle 2.6s ease-in-out infinite;
  pointer-events: none;
}
.exp-card__front::before { top: 14px; left: 14px; }
.exp-card__front::after { top: 26px; right: 16px; width: 10px; height: 10px; animation-delay: 1.3s; }
@keyframes twinkle { 50% { transform: scale(.4) rotate(45deg); opacity: .35; } }

.exp-card__icon {
  position: relative;
  width: 82%;
  max-width: 132px;
  animation: bob 4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 10px 10px rgba(80, 40, 120, .18));
  transition: transform .35s ease;
}
@keyframes bob { 50% { translate: 0 -7px; } }

.exp-card__label {
  display: inline-block;
  max-width: 100%;
  margin-top: 4px;
  padding: 7px 12px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  color: #fff;
  font: 700 14px/1.1 var(--f-head);
  box-shadow: 0 2px 0 #d26200;
}
.exp-card__hint {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font: 700 11.5px/1 var(--f-head);
  letter-spacing: .2px;
  color: #b58a58;
}
.exp-card__hint svg { width: 12px; height: 12px; }

/* ----- Mặt sau: bầu trời đêm Halloween ----- */
.exp-card__back {
  transform: rotateY(180deg);
  gap: 8px;
  padding: 18px 14px 14px;
  border: 1.5px solid #7a55d8;
  background:
    radial-gradient(1.2px 1.2px at 18% 22%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 72% 14%, #fff 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 86% 58%, #ffe9a8 50%, transparent 52%),
    radial-gradient(1px 1px at 30% 84%, #fff 50%, transparent 52%),
    radial-gradient(120% 80% at 50% 0%, #6b42d6 0%, #3d2399 55%, #26166a 100%);
  box-shadow: 0 14px 28px rgba(45, 25, 110, .35);
  color: #fff;
}
.exp-card__back::before {
  content: "";
  position: absolute;
  top: -30px;
  right: -26px;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6c9, #f6c94c 60%, rgba(246, 201, 76, 0) 72%);
  opacity: .55;
}
.exp-card__title {
  position: relative;
  font: 700 17px/1.1 var(--f-head);
  text-transform: uppercase;
  color: #ffc94a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}
.exp-card__text {
  position: relative;
  font: 400 14.5px/1.45 var(--f-body);
  color: #f3eeff;
  text-wrap: pretty;
}
.exp-card__back .exp-card__hint { margin-top: 2px; color: #b9a8f0; }

/* Rê chuột (máy tính): nhấc thẻ, quầng sáng rực hơn */
@media (hover: hover) {
  .exp-card:hover { transform: translateY(-6px); }
  .exp-card:hover .exp-card__front { box-shadow: 0 18px 34px rgba(150, 90, 30, .2), inset 0 -3px 0 rgba(241, 220, 192, .7); }
  .exp-card:hover .exp-card__icon { transform: scale(1.06) rotate(-4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .exp-card__inner { transition: none; }
  .exp-card__icon, .exp-card__front::before, .exp-card__front::after { animation: none; }
}
/* Tỏa sáng */
.shine { margin-top: 6cqw; text-align: center; padding: 0 var(--gutter); }
.shine__title {
  margin: 0;
  font: 700 clamp(20px, 5.6cqw, 28px)/1.1 var(--f-head);
  text-transform: uppercase;
  color: var(--orange);
}
.shine__sub {
  margin: 4px 0 0;
  font: 700 clamp(10px, 2.5cqw, 12.5px)/1.3 var(--f-head);
  color: var(--blue);
}

/* =========================================================
   Gallery – băng chuyền ảnh polaroid kẹp trên dây (giống trang halloween-teacher, không có chữ dưới ảnh)
   --u = 1/1200 bề rộng trang (mobile < 768px: 1/600), có trần để màn rất rộng không phóng quá to.
   Vị trí từng ảnh do JS đặt qua --dx (lệch so với giữa) / --y / --s / --r / --o / --z.
   Ảnh giữa phóng to + thẳng; 2 bên nhỏ dần, nghiêng, mờ ở mép.
   ========================================================= */
/* Video Cosplay Stars (giống halloween-teacher): khung 16:9 nền xanh, poster + nút Play cam; bấm mới nạp YouTube */
.video {
  padding: clamp(20px, 4cqw, 48px) var(--gutter) clamp(28px, 5cqw, 64px);
  background: linear-gradient(180deg, #fceedb 0%, rgba(252, 238, 219, 0) 100%);
}
.video__frame {
  position: relative;
  width: min(100%, 1000px);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 14px;
  background: #1477bb;
  box-shadow: 0 14px 34px rgba(20, 70, 130, .22);
}
.video__frame iframe, .video__frame video { display: block; width: 100%; height: 100%; border: 0; }
.video__poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video__poster img { display: block; width: 100%; height: 100%; object-fit: contain; }
.video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(60px, 9cqw, 96px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(247, 126, 9, .92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  transition: transform .2s ease;
}
.video__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: .19em 0 .19em .31em;
  border-color: transparent transparent transparent #fff;
  font-size: clamp(60px, 9cqw, 96px);
}
.video__poster:hover .video__play { transform: translate(-50%, -50%) scale(1.08); }
.video__poster:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
@media (max-width: 599px) { .video__frame { border-radius: 10px; } }

.gallery {
  --u: min(calc(100cqw / 1200), 1.6px);
  position: relative;
  height: calc(370 * var(--u));
  overflow: hidden;
  background: linear-gradient(180deg, #fff9f0 0%, #fceedb 100%);
}
/* Sao lấp lánh hai bên */
.gallery::before, .gallery::after {
  content: "✦";
  position: absolute;
  z-index: 15;
  color: #f2b33d;
  line-height: 1;
  animation: gallery-twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.gallery::before { left: calc(50% - 560 * var(--u)); top: calc(250 * var(--u)); font-size: calc(22 * var(--u)); }
.gallery::after { right: calc(50% - 556 * var(--u)); top: calc(270 * var(--u)); font-size: calc(16 * var(--u)); animation-delay: 1.2s; }
@keyframes gallery-twinkle {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.gallery__string {
  position: absolute; left: 0; top: 0;
  width: 100%; height: calc(140 * var(--u));
  pointer-events: none;
}
.gallery__string path {
  fill: none;
  stroke: #b07c4f;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.gallery__stage {
  position: absolute; inset: 0;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.gallery__list { position: relative; height: 100%; margin: 0; padding: 0; list-style: none; }
.memory {
  position: absolute;
  left: calc(50% + var(--dx, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  z-index: var(--z, 1);
  opacity: var(--o, 1);
  transform: translateX(-50%) rotate(var(--r, 0deg)) scale(var(--s, 1));
  transform-origin: 50% 0;
  transition:
    left .6s cubic-bezier(.34, 1.2, .5, 1),
    top .6s cubic-bezier(.34, 1.2, .5, 1),
    transform .6s cubic-bezier(.34, 1.2, .5, 1),
    opacity .45s;
}
.memory.no-anim { transition: none; }
.memory.is-hidden { pointer-events: none; }
/* Đung đưa quanh kẹp */
.memory__swing {
  display: block;
  transform-origin: 50% 0;
  animation: gallery-sway 4.5s ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes gallery-sway {
  from { transform: rotate(-1.2deg); }
  to { transform: rotate(1.2deg); }
}
.memory__card {
  position: relative;
  display: block;
  width: calc(250 * var(--u));
  padding: calc(10 * var(--u)) calc(10 * var(--u)) calc(24 * var(--u));
  border: 0;
  border-radius: calc(4 * var(--u));
  background: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) rgba(120, 70, 20, .18), 0 1px 2px rgba(0, 0, 0, .08);
  transition: transform .3s cubic-bezier(.34, 1.5, .5, 1), box-shadow .3s;
}
@media (hover: hover) { .memory__card:hover { transform: translateY(calc(-4 * var(--u))) scale(1.03); } }
.memory.is-center .memory__card {
  cursor: zoom-in;
  box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(120, 70, 20, .3), 0 1px 2px rgba(0, 0, 0, .08);
}
.memory__card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.memory__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; pointer-events: none; }
/* Kẹp gỗ */
.memory__pin {
  position: absolute;
  top: calc(-20 * var(--u)); left: 50%;
  width: calc(14 * var(--u)); height: calc(36 * var(--u));
  transform: translateX(-50%);
  border-radius: calc(3 * var(--u));
  background: linear-gradient(90deg, #c98b4a 0%, #f0c48e 50%, #c98b4a 100%);
  box-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .2);
}
.memory__pin::after {
  content: "";
  position: absolute;
  left: calc(-3 * var(--u)); right: calc(-3 * var(--u)); top: calc(13 * var(--u));
  height: calc(5 * var(--u));
  border-radius: calc(2 * var(--u));
  background: #9aa3ad;
}
/* Sticker dán góc ảnh */
.memory__sticker {
  position: absolute;
  right: calc(-16 * var(--u)); bottom: calc(18 * var(--u));
  width: calc(46 * var(--u));
  transform: rotate(12deg);
  filter: drop-shadow(0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .2));
  transition: transform .35s cubic-bezier(.34, 1.5, .5, 1);
  pointer-events: none;
}
.memory--alt .memory__sticker { right: auto; left: calc(-16 * var(--u)); bottom: auto; top: calc(24 * var(--u)); transform: rotate(-14deg); }
.memory.is-center .memory__sticker { transform: rotate(-8deg) scale(1.18); }
@media (hover: hover) { .memory__card:hover .memory__sticker { transform: rotate(-8deg) scale(1.18); } }

/* Mũi tên 2 bên */
.gallery__arrow {
  position: absolute;
  top: calc(150 * var(--u));
  z-index: 20;
  display: grid; place-items: center;
  width: clamp(40px, calc(58 * var(--u)), 64px);
  height: clamp(40px, calc(58 * var(--u)), 64px);
  padding: 0 0 3px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffa234 0%, var(--orange) 55%, #ee7300 100%);
  box-shadow: 0 calc(4 * var(--u)) 0 #d2640a, 0 calc(8 * var(--u)) calc(16 * var(--u)) rgba(230, 110, 10, .3);
  color: #fff;
  font: 700 clamp(26px, calc(38 * var(--u)), 42px)/1 var(--f-head);
  transition: transform .15s;
}
.gallery__arrow--prev { left: calc(28 * var(--u)); }
.gallery__arrow--next { right: calc(28 * var(--u)); }
.gallery__arrow:hover { transform: scale(1.1); }
.gallery__arrow:active { transform: translateY(2px) scale(1.02); }
.gallery__arrow:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Chấm vị trí */
.gallery__dots {
  position: absolute;
  left: 0; right: 0; top: calc(336 * var(--u));
  z-index: 20;
  display: flex; justify-content: center;
  gap: calc(10 * var(--u));
}
.gallery__dot {
  width: max(10px, calc(12 * var(--u)));
  height: max(10px, calc(12 * var(--u)));
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #e8cfaf;
  transition: width .3s, background-color .3s;
}
.gallery__dot[aria-current="true"] { width: max(26px, calc(32 * var(--u))); background: var(--orange); }
.gallery__dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Mobile (< 768px): --u = 1/600, ảnh to hơn, bỏ dây */
@container (max-width: 767px) {
  .gallery { --u: calc(100cqw / 600); height: calc(400 * var(--u)); }
  .gallery::before { left: calc(16 * var(--u)); top: calc(330 * var(--u)); }
  .gallery::after { right: calc(18 * var(--u)); top: calc(345 * var(--u)); }
  .gallery__string { display: none; }
  .gallery__stage {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }
  .memory__card { width: calc(340 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(30 * var(--u)); }
  .memory__pin { top: calc(-26 * var(--u)); width: calc(18 * var(--u)); height: calc(46 * var(--u)); }
  .memory__pin::after { top: calc(17 * var(--u)); height: calc(6 * var(--u)); }
  .memory__sticker { width: calc(62 * var(--u)); }
  .gallery__arrow { top: calc(140 * var(--u)); }
  .gallery__arrow--prev { left: calc(8 * var(--u)); }
  .gallery__arrow--next { right: calc(8 * var(--u)); }
  .gallery__dots { top: calc(365 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .memory__swing, .gallery::before, .gallery::after { animation: none; }
}

/* ---------- Lightbox xem ảnh lớn ---------- */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(25, 16, 70, .84); }
.lightbox__frame {
  width: min(calc(100vw - 32px), 960px);
  margin: 0;
  padding: 14px 14px 34px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  transform: rotate(-1deg);
  animation: lightbox-pop .4s cubic-bezier(.34, 1.4, .5, 1);
}
.lightbox__frame.is-swap { animation: lightbox-swap .35s ease-out; }
@keyframes lightbox-pop {
  from { transform: rotate(-6deg) scale(.85); opacity: 0; }
  to { transform: rotate(-1deg) scale(1); opacity: 1; }
}
@keyframes lightbox-swap {
  from { opacity: .3; transform: rotate(-1deg) translateX(var(--swap-from, 24px)); }
  to { opacity: 1; transform: rotate(-1deg) translateX(0); }
}
.lightbox__img { width: 100%; max-height: calc(100dvh - 190px); aspect-ratio: 3 / 2; object-fit: cover; }
.lightbox__nav, .lightbox__close {
  position: fixed;
  display: grid; place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1;
  transition: transform .15s;
}
.lightbox__nav {
  top: 50%;
  width: 56px; height: 56px;
  margin-top: -28px;
  background: var(--orange);
  color: #fff;
  font-size: 36px;
  padding-bottom: 4px;
}
.lightbox__nav--prev { left: 16px; }
.lightbox__nav--next { right: 16px; }
.lightbox__nav:hover, .lightbox__close:hover { transform: scale(1.1); }
.lightbox__close {
  top: calc(16px + env(safe-area-inset-top, 0px)); right: 16px;
  width: 46px; height: 46px;
  background: #fff;
  color: var(--blue);
  font-size: 32px;
  padding-bottom: 3px;
}
.lightbox__count {
  position: fixed;
  left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  margin: 0;
  transform: translateX(-50%);
  color: #fff;
  font: 700 18px/1 var(--f-head);
  letter-spacing: .08em;
}
@media (max-width: 700px) {
  .lightbox__nav { top: auto; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); margin-top: 0; width: 48px; height: 48px; font-size: 30px; }
}

/* ---------- Register ---------- */
.register {
  position: relative;
  padding: 4cqw var(--gutter) 9cqw;
  background:
    url("/landings/halloween/assets/img/bg-cream.webp") center bottom / 100% auto no-repeat,
    var(--cream);
  scroll-margin-top: 8px;
}
/* Nút "Con muốn tham gia!" + trang trí: linh vật cưỡi chổi (Element-21) bay về phía nút, sao lấp lánh, quầng sáng */
.register__cta {
  position: relative;
  width: 70%;
  margin: 16cqw 6% 0 auto;    /* lệch phải để chừa chỗ cho linh vật bên trái */
}
/* Nút vàng kim dựng bằng CSS (chữ HTML) – viền ánh bạc, vệt sáng chạy, vòng sáng toả */
.register__cta { container-type: inline-size; }
.register__pill {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3cqw;
  width: 100%;
  margin: 0 auto;
  padding: 4.2cqw 3cqw 3.8cqw 17cqw;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 46%),
    linear-gradient(100deg, #f3cf55 0%, #fff3a6 28%, #f7d65c 52%, #e9b52a 78%, #fbe27a 100%);
  box-shadow:
    0 0 0 .7cqw #fff6d6,                 /* viền sáng trong */
    0 0 0 1.5cqw #c9962a,                /* viền vàng đồng */
    0 0 0 1.9cqw #f8e7a8,                /* ánh bạc ngoài */
    0 1.8cqw 0 1.2cqw #8a5b0e,           /* độ dày phía dưới */
    0 3.6cqw 5cqw 1cqw rgba(138, 91, 14, .35);
  color: #2433c9;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), filter .25s ease;
}
/* Chữ màu đặc + line-height đủ cao để giữ dấu tiếng Việt trên chữ in hoa (Ố, Ẹ, Ý, É) */
.register__pill-text {
  flex: 0 1 auto;
  min-width: 0;
  padding-top: .12em;
  font: 700 5.6cqw/1.35 var(--f-head);
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #2433c9;
  text-shadow: 0 .25cqw 0 rgba(255, 255, 255, .75);
}
.register__pill-arrow {
  flex: none;
  display: grid;
  place-items: center;
  width: 8.5cqw;
  height: 8.5cqw;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff9f2e, #f06a00);
  box-shadow: 0 .5cqw 0 #b44d00, inset 0 .4cqw 0 rgba(255, 255, 255, .45);
  color: #fff;
  transition: transform .25s ease;
}
.register__pill-arrow svg { width: 58%; height: 58%; }
/* vệt sáng chạy ngang */
.register__pill::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%;
  bottom: -20%;
  left: -30%;
  width: 22%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .85), rgba(255, 255, 255, 0));
  transform: skewX(-20deg) translateX(0);
  animation: pillShine 3.2s ease-in-out infinite;
}
@keyframes pillShine { 0%, 55% { left: -30%; } 100% { left: 130%; } }
/* vòng sáng toả ra phía sau nút */
.register__cta::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(255, 190, 40, .55);
  animation: pillRing 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes pillRing { 0% { box-shadow: 0 0 0 0 rgba(255, 190, 40, .55); } 100% { box-shadow: 0 0 0 6cqw rgba(255, 190, 40, 0); } }
.register__pill:hover { transform: translateY(-1cqw) scale(1.02); filter: brightness(1.05) drop-shadow(0 0 2.4cqw rgba(255, 196, 40, .6)); }
.register__pill:hover .register__pill-arrow { transform: translateX(.8cqw); }
.register__pill:active { transform: translateY(.6cqw) scale(.99); }
.register__pill:focus-visible { outline: none; filter: drop-shadow(0 0 2cqw rgba(255, 196, 40, .9)) drop-shadow(0 0 2px #2b3ed3); }
.register__pill[aria-expanded="true"] ~ .register__mascot,
.register__cta:has(.register__pill[aria-expanded="true"])::after { animation-play-state: paused; }
.register__glow {
  position: absolute;
  z-index: 0;
  inset: -40% -18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 102, .55), rgba(255, 214, 102, 0));
  pointer-events: none;
}
.register__mascot {
  position: absolute;
  z-index: 3;
  left: -27%;
  top: -92%;
  width: 38%;
  transform: rotate(-4deg);              /* bay chếch lên, hướng về phía nút */
  filter: drop-shadow(0 10px 14px rgba(80, 40, 140, .25));
  animation: mascotFly 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mascotFly {
  0%, 100% { translate: 0 0; }
  50% { translate: -6px -10px; }
}
.register__spark {
  position: absolute;
  z-index: 1;
  width: 5%;
  aspect-ratio: 1;
  animation: twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.register__spark--1 { right: -7%; top: -22%; width: 6%; }
.register__spark--2 { left: -18%; bottom: -10%; width: 3.6%; animation-delay: .6s; }
.register__spark--3 { left: -26%; bottom: -34%; width: 3.2%; animation-delay: 1.2s; }
.register__spark--4 { right: 4%; bottom: -34%; width: 4.2%; animation-delay: 1.8s; }
@media (prefers-reduced-motion: reduce) { .register__mascot, .register__spark, .register__pill::after, .register__cta::after { animation: none; } }
/* nút chưa bấm: nhấp nháy nhẹ để gợi ý bấm */

@keyframes pillPulse { 50% { transform: scale(1.04); filter: drop-shadow(0 8px 18px rgba(245, 170, 30, .45)); } }

.flows.is-enter { animation: flowsIn .55s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes flowsIn { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) { .register__pill[aria-expanded="false"], .flows.is-enter { animation: none; } }

.flows { display: flex; flex-direction: column; gap: 15cqw; }
.cosplay, .journey { scroll-margin-top: 12px; }

/* Cosplay */
.cosplay__head {
  position: relative;
  display: flex;
  align-items: flex-end;
  z-index: 3;
  /* ảnh tiêu đề có ~3.9cqw viền trong suốt phía dưới → chỉ kéo card lên 2.4cqw để chữ không bị che */
  margin: -4cqw -2cqw -2.4cqw;
  pointer-events: none;
}
.cosplay__title { width: 64%; position: relative; z-index: 2; }
/* linh vật hạ xuống đè lên góc card như mockup (dùng top vì transform đã dành cho hiệu ứng bay) */
.cosplay__mascot { width: 40%; margin-left: -6%; position: relative; top: 4.5cqw; z-index: 3; }

.form-card {
  position: relative;
  z-index: 2;
  padding: 7cqw 5cqw 11cqw;
}
.form-card__q {
  margin: 0 0 4cqw;
  text-align: center;
  text-wrap: balance;
  font: 600 clamp(15px, 3.9cqw, 21px)/1.25 var(--f-body);
  color: var(--blue);
}

.choice-list { display: grid; gap: 2.4cqw; padding-left: 7cqw; }
.choice {
  display: flex;
  align-items: center;
  gap: 2.4cqw;
  font: 700 clamp(14px, 3.6cqw, 18px)/1.2 var(--f-head);
  color: var(--blue);
  cursor: pointer;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice__dot {
  flex: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: #fff;
  transition: box-shadow .2s ease;
}
.choice input:checked + .choice__dot { box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--orange); }
.choice input:focus-visible + .choice__dot { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Thông tin tham dự (Nhân vật chính / Thời gian / Địa điểm) – dùng lại .info-list của luồng miền Nam */
.cosplay-info { margin-top: -3cqw; }
.info-list.cosplay-info li { padding: 1.4cqw 0; }
@media (min-width: 1200px) { .info-list.cosplay-info li { padding: 9px 0; } }

.cosplay-extra { margin-top: 2.5cqw; padding-top: 3.5cqw; border-top: 1px dashed var(--line); }
@keyframes expand { from { opacity: 0; transform: translateY(-8px); } }
/* Tiêu đề viết hoa → font Brauer như các tiêu đề viết hoa khác (bỏ nét viền giả đậm của Baskerville) */
.form-card .cosplay-extra__title {
  margin: 0;
  text-align: left;
  font: 700 clamp(16px, 4cqw, 22px)/1.15 var(--f-head);
  letter-spacing: .2px;
  -webkit-text-stroke: 0;
}
/* Tiêu đề + hộp quà: không khung nền, căn giữa trong cột hẹp cho gọn */
.cosplay-extra__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5cqw;
  max-width: 560px;
  margin: 0 auto 3cqw;
}
.cosplay-extra__text { flex: 1; min-width: 0; }
.cosplay-extra__head .cosplay-extra__title { min-width: 0; text-wrap: balance; }
/* Hạn nhận ảnh (dưới tiêu đề) */
.cosplay-extra__deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  padding: 5px 12px 4px 9px;
  border-radius: 999px;
  background: #fff1dc;
  color: var(--blue);
  font: 700 15px/1.2 "Times New Roman", Times, "Liberation Serif", serif;
}
.cosplay-extra__deadline svg { flex: none; width: 16px; height: 16px; color: var(--orange); }
.cosplay-extra__deadline b { color: var(--orange); white-space: nowrap; }
/* Hết hạn nhận ảnh: thay khối chọn ảnh + chia sẻ */
.cosplay-extra__closed {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 20px;
  border: 1.5px dashed #f5c27a;
  border-radius: 14px;
  background: #fff8ee;
  animation: expand .35s ease;
}
.cosplay-extra__closed[hidden] { display: none; }
.cosplay-extra__closed-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fb9420, var(--orange));
  color: #fff;
  box-shadow: 0 4px 10px rgba(214, 98, 0, .25);
}
.cosplay-extra__closed-ic svg { width: 24px; height: 24px; }
.cosplay-extra__closed-title { margin: 0 0 4px; color: var(--orange); font: 700 20px/1.2 var(--f-head); letter-spacing: .2px; }
.cosplay-extra__closed-text { margin: 0; color: var(--blue); font: 600 15.5px/1.45 var(--f-body); }
.cosplay-extra__closed-text b { font-weight: 600; color: var(--navy); }
/* Link fanpage: xanh, không gạch chân */
.cosplay-extra__fanpage { color: var(--blue); font-weight: 700; text-decoration: none; }
.cosplay-extra__fanpage:hover { color: var(--orange); }
.cosplay-extra__fanpage:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 3px; }
.cosplay-extra.is-closed .cosplay-extra__fields { display: none; }
.cosplay-extra__gift { position: relative; flex: none; width: clamp(64px, 13cqw, 96px); }
.cosplay-extra__gift img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(110, 50, 160, .28));
  animation: gift-bob 3.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes gift-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
}
.cosplay-extra__spark {
  position: absolute;
  color: #f5b82e;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 200, 80, .8);
  animation: gift-twinkle 2.2s ease-in-out infinite;
  pointer-events: none;
}
.cosplay-extra__spark:nth-of-type(1) { top: -4%; left: -6%; font-size: 18px; }
.cosplay-extra__spark:nth-of-type(2) { top: 8%; right: -10%; font-size: 13px; animation-delay: .7s; }
.cosplay-extra__spark:nth-of-type(3) { bottom: 6%; left: -10%; font-size: 11px; animation-delay: 1.4s; }
@keyframes gift-twinkle {
  0%, 100% { opacity: .3; transform: scale(.7); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .cosplay-extra__gift img, .cosplay-extra__spark { animation: none; }
}
.cosplay-extra__title span { color: var(--orange); white-space: nowrap; }
/* Gửi ảnh là tuỳ chọn → gộp "chọn ảnh" + "chia sẻ" thành 1 khối gọn, cột hẹp,
   để nút "Xác nhận tham dự" vẫn là thao tác chính */
.cosplay-extra__fields {
  max-width: 560px;
  margin: 0 auto;
  overflow: hidden;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.cosplay-extra__fields:focus-within { border-color: var(--orange-2); box-shadow: 0 0 0 4px rgba(255, 163, 26, .15); }
.cosplay-extra__fields .upload { margin: 0; border: 0; border-radius: 0; background: transparent; }
.cosplay-extra__fields .upload.is-drag { background: #fffaf3; box-shadow: inset 0 0 0 2px var(--orange); }
.cosplay-extra .upload__empty {
  flex-direction: row;
  justify-content: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 12px 14px;
  text-align: left;
}
.cosplay-extra .upload__empty:hover { background: #fffaf3; }
.cosplay-extra .upload__empty svg { flex: none; width: 30px; height: 30px; }
.upload__label { display: grid; gap: 1px; flex: 1; min-width: 0; }
.upload__pick {
  flex: none;
  padding: 7px 14px 6px;
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  color: var(--orange);
  font: 700 14px/1 var(--f-head);
  transition: background .2s ease, color .2s ease;
}
.cosplay-extra .upload__empty:hover .upload__pick { background: var(--orange); color: #fff; }
.cosplay-extra__fields .story { border-top: 1px solid var(--line); }
.cosplay-extra .cosplay-extra__fields textarea {
  min-height: 72px;
  padding: 12px 14px 22px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 16px;
}
.cosplay-extra .cosplay-extra__fields textarea:focus { background: #fffaf4; box-shadow: none; }
.cosplay-extra .cosplay-extra__fields textarea::placeholder { text-align: left; }
/* ----- Tải ảnh cosplay ----- */
.upload {
  position: relative;
  margin-bottom: 12px;
  border: 1.5px dashed #ddd2c6;
  border-radius: 14px;
  background: #fff;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.upload:hover, .upload.is-drag { border-color: var(--orange); background: #fffaf3; }
.upload.is-drag { box-shadow: 0 0 0 4px rgba(245, 127, 15, .15); }
.upload.has-photo { border-style: solid; border-color: var(--line); background: #fff; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.upload__input:focus-visible + .upload__empty { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 12px; }

.upload__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 116px;
  padding: 16px;
  text-align: center;
  font: 700 15px/1.2 var(--f-head);
  color: var(--blue);
  cursor: pointer;
}
.upload__empty svg { width: 30px; height: 30px; transition: transform .25s ease; }
.upload:hover .upload__empty svg { transform: translateY(-3px); }
.upload__empty small { font: 400 12.5px/1.35 var(--f-body); color: #7d7a9c; }

.upload__preview { padding: 10px; }
.upload.is-enter .upload__preview { animation: expand .35s ease both; }
/* Khung hiện TRỌN ảnh (contain) trên nền màu trơn */
.upload__frame {
  display: grid;
  place-items: center;
  margin: 0;
  min-height: 160px;
  max-height: 440px;
  overflow: hidden;
  border-radius: 10px;
  background: #f7efe4;
}
.upload__frame img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 440px;
  object-fit: contain;
}
.upload__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 2px 2px;
}
.upload__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 160px;
  font: 700 14px/1.2 var(--f-head);
  color: var(--blue);
}
.upload__meta svg { flex: none; width: 18px; height: 18px; }
.upload__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__size { flex: none; color: #8a87a8; }
.upload__actions { display: flex; gap: 8px; }
.upload__btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 14px 6px;
  border: 1.5px solid var(--orange);
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font: 700 14px/1 var(--f-head);
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.upload__btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.upload__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.upload__btn--ghost { background: #fff; color: var(--orange); }

/* ----- Ô chia sẻ ----- */
.story { position: relative; }
.cosplay-extra textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 10px 14px 22px;
  border: 1.5px solid transparent;
  border-radius: 14px;
  background: #f8ece9;
  resize: vertical;
  /* 16px để iOS không tự phóng to khi gõ */
  font: 700 16px/1.45 var(--f-head);
  color: var(--blue);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cosplay-extra textarea::placeholder { color: #7d7a9c; opacity: 1; text-align: center; }
.cosplay-extra textarea:focus::placeholder { opacity: .35; }
.cosplay-extra textarea:focus {
  outline: none;
  border-color: var(--orange-2);
  background: #fff8f4;
  box-shadow: 0 0 0 4px rgba(255, 163, 26, .15);
}
.story__count {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font: 700 12px/1 var(--f-head);
  color: #a39fbf;
  pointer-events: none;
}
.story__count.is-near { color: var(--orange); }

/* ----- Thẻ hoàn tất (thay form sau khi nộp) ----- */
.done {
  position: relative;
  z-index: 2;
  padding: 26px 22px 22px;
  text-align: center;
  scroll-margin-top: 24px;
}
.done:focus { outline: none; }
.done.is-enter { animation: stepIn .5s ease both; }
.done__check {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 4px 12px rgba(245, 127, 15, .35);
}
.done__check svg { width: 28px; height: 28px; }
.done.is-enter .done__check { animation: popCheck .5s .15s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes popCheck { from { transform: scale(0); } }
.done__title {
  margin: 0;
  font: 700 clamp(22px, 6cqw, 28px)/1.1 var(--f-head);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--orange);
}
.done__lead {
  max-width: 40ch;
  margin: 8px auto 0;
  font-size: 15.5px;
  line-height: 1.5;
  text-wrap: pretty;
  color: var(--blue);
}
.done__photo {
  display: grid;
  place-items: center;
  margin: 16px 0 0;
  max-height: 300px;
  overflow: hidden;
  border-radius: 12px;
  background: #f7efe4;
}
.done__photo img { max-width: 100%; max-height: 300px; width: auto; height: auto; }
.done__story {
  position: relative;
  margin: 12px 0 0;
  padding: 12px 16px 12px 34px;
  border-radius: 12px;
  background: #f8ece9;
  text-align: left;
  font: 700 15px/1.45 var(--f-head);
  color: var(--blue);
  overflow-wrap: anywhere;
}
.done__story::before {
  content: "“";
  position: absolute;
  left: 10px;
  top: 2px;
  font: 400 34px/1 var(--f-body);
  color: var(--orange);
}
.done__info {
  list-style: none;
  margin: 16px 0 0;
  padding: 4px 0 0;
  border-top: 1px dashed var(--line);
  text-align: left;
}
.done__info li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f1e6d6;
}
.done__info li:last-child { border-bottom: 0; }
.done__k { font: 600 14px/1.4 var(--f-body); color: #7d7a9c; }
.done__v { font: 700 15px/1.4 var(--f-head); color: var(--blue); }
.done__meet {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.done__meet .done__info { margin-top: 8px; padding-top: 0; border-top: 0; }
.done__meet-title {
  margin: 0;
  font: 700 clamp(17px, 4.4cqw, 22px)/1.1 var(--f-head);
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--blue);
}
.done__meet-title span { color: var(--orange); }

/* ----- Thêm vào lịch ----- */
.cal { position: relative; margin-top: 16px; text-align: center; }
.cal__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  box-shadow: 0 3px 0 #d26200, 0 6px 14px rgba(245, 127, 15, .25);
  color: #fff;
  font: 700 17px/1 var(--f-head);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, filter .2s ease;
}
.cal__btn svg { width: 20px; height: 20px; }
.cal__btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.cal__btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #d26200; }
.cal__btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.cal__alt {
  display: block;
  width: fit-content;
  margin: 10px auto 0;
  font: 400 13.5px/1.3 var(--f-body);
  color: #7d7a9c;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cal__alt:hover { color: var(--orange); }
.done__pill {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 8px 2px;
  border-radius: 999px;
  background: #e5f6ec;
  color: #1f8a4f;
  font: 700 12px/1.2 var(--f-head);
  vertical-align: 1px;
}

.form-error {
  min-height: 0;
  margin: 8px 0 0;
  font: 700 13px/1.3 var(--f-head);
  color: #d6331b;
  text-align: center;
}
.form-error:empty { display: none; }
.shake { animation: shake .4s ease; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.form-card__submit,
.info-card__submit {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  transform: translate(-50%, 50%);
}
.form-card__submit:hover,
.info-card__submit:hover { transform: translate(-50%, 50%) scale(1.04); }
.form-card__submit:active,
.info-card__submit:active { transform: translate(-50%, 50%) scale(.97); }
/* "Đăng ký cho con": nút cam viền bạc dựng bằng CSS – bo góc vừa (không tròn hẳn), vệt sáng lướt qua định kỳ */
.form-card__submit--text {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: auto;
  min-width: min(46%, 340px);
  padding: 15px 44px 13px;
  border-radius: 16px;
  background:
    radial-gradient(60% 90% at 50% 40%, rgba(255, 226, 120, .5), transparent 70%),
    linear-gradient(180deg, #ffb21e 0%, #f9a313 45%, #f08c0a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -3px 0 rgba(196, 98, 0, .35),
    0 0 0 3px #ececef,
    0 0 0 4.5px #a9a9b2,
    0 6px 12px rgba(120, 70, 20, .25);
  color: #fff;
  font: 700 clamp(18px, 4.2cqw, 26px)/1 var(--f-head);
  letter-spacing: .4px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(150, 70, 0, .35);
  white-space: nowrap;
}
/* Nút thấp hơn nút ảnh cũ → bớt khoảng trống cuối thẻ form */
#cosplayForm.form-card { padding-bottom: 9cqw; }
@media (min-width: 1200px) { #cosplayForm.form-card { padding-bottom: 54px; } }
.form-card__submit--text span { position: relative; z-index: 1; padding-top: .08em; }
.form-card__submit--text::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 28%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  transform: skewX(-20deg);
  animation: btn-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes btn-shine {
  0% { left: -40%; }
  45%, 100% { left: 120%; }
}
@media (prefers-reduced-motion: reduce) { .form-card__submit--text::after { animation: none; display: none; } }

/* Journey (miền Nam) */
.journey__title, .pay__title {
  margin: 0 0 4cqw;
  text-align: center;
  font-family: var(--f-head);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.05;
}
.journey__title span { display: block; font-size: clamp(19px, 5cqw, 25px); color: var(--blue); }
.journey__title strong { display: block; font-weight: 700; font-size: clamp(26px, 7.2cqw, 36px); color: var(--orange); }
.pay__title { margin-top: 2cqw; }
.pay__thanks { display: block; font-size: clamp(17px, 4.6cqw, 24px); color: var(--blue); text-transform: none; }
.pay__last { display: block; margin-top: 4px; font-size: clamp(26px, 7cqw, 36px); color: var(--orange); text-wrap: balance; }

.info-card { position: relative; padding: 4cqw 7cqw 11cqw; }
.info-card--pay { padding-bottom: 4cqw; }
.info-list { list-style: none; margin: 0; padding: 0; }
/* Theo Demo: nhãn Baskerville đậm, to hơn; nội dung Brauer xám đậm; thẳng hàng theo chân chữ */
.info-list li {
  display: flex;
  align-items: baseline;
  gap: 0 .4em;
  padding: 2.8cqw 0;
  border-bottom: 1px solid var(--line);
  font: 700 clamp(15px, 3.9cqw, 20px)/1.3 var(--f-head);
  letter-spacing: .1px;
  color: #6b6b6b;
}
.info-list li:last-child { border-bottom: 0; }
.info-list b {
  flex: none;
  font: 600 1.28em/1.2 var(--f-body);
  letter-spacing: 0;
  color: #2b3ed3;
}
.info-list li > span { flex: 1; min-width: 0; }
.info-list li > span > span { display: inline-block; margin-top: 2px; }
.info-ic {
  flex: none;
  align-self: flex-start;
  margin-top: .2em; /* ngang dòng đầu của nhãn */
  width: 1.2em;
  height: 1.2em;
  fill: #2b3ed3;
  color: #2b3ed3;
}
/* Thư mục Fonts chỉ có Baskerville SemiBold (không có Bold) → thêm nét viền mảnh cùng màu
   để độ đậm khớp với Baskerville Bold trong thiết kế */
.info-list b,
.form-card__q {
  -webkit-text-stroke: .025em currentColor;
  paint-order: stroke fill;
}

.info-card__q {
  margin: 1cqw 0 2.4cqw;
  text-align: center;
  font: 700 clamp(12px, 3cqw, 14px)/1.2 var(--f-head);
  color: var(--blue);
}
.costume { display: flex; justify-content: center; gap: 2cqw; }
.costume__opt { position: relative; display: block; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.costume__opt--yes { width: 38%; }
.costume__opt--no { width: 42%; }
.costume__opt input { position: absolute; opacity: 0; pointer-events: none; }
.costume__opt img { width: 100%; }
.costume__opt::after {
  content: "";
  position: absolute;
  top: 51.5%;
  width: 7.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.costume__opt--yes::after { left: 59.6%; width: 8.2%; }
.costume__opt--no::after  { left: 48.4%; width: 7.2%; }
.costume__opt:has(input:checked)::after { transform: translate(-50%, -50%) scale(1); }
.costume__opt:has(input:checked) { filter: drop-shadow(0 4px 8px rgba(245, 127, 15, .35)); transform: translateY(-2px); }
.costume__opt:hover { transform: translateY(-2px); }
.costume__opt:has(input:focus-visible) img { outline: 2px solid var(--blue); outline-offset: -4px; border-radius: 30px; }

/* Thanh toán */
.qr {
  position: relative;
  width: 40cqw;
  margin: -1px auto 0;
  padding: 3cqw;
  background: #fff;
  border: 1.5px dashed var(--line);
  border-top: 0;
  border-radius: 0 0 14px 14px;
}
.qr__code { width: 100%; aspect-ratio: 1; }
.qr__code img, .qr__code canvas { width: 100% !important; height: 100% !important; image-rendering: pixelated; }
.qr__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 7.5cqw;
  height: 7.5cqw;
  transform: translate(-50%, -50%);
  border: 3px solid #fff;
  border-radius: 6px;
  background: var(--blue);
  color: #fff;
  font: 700 4.6cqw/1 var(--f-head);
}
.qr__hint { margin: 2cqw 0 4cqw; text-align: center; font: 700 12px var(--f-head); color: var(--ink); opacity: .7; }

/* ----- Điều khoản & Điều kiện: nằm trong popup (ngoài .page nên dùng px, không dùng cqw) ----- */
.popup--terms .terms {
  max-height: min(78vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 26px 22px 22px;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.terms__title {
  margin: 0 0 12px;
  text-align: center;
  font: 700 22px/1.1 var(--f-head);
  text-transform: uppercase;
  color: var(--orange);
}
.terms__lead { margin: 0 0 14px; font: 700 15px/1.4 var(--f-head); color: var(--blue); }
.terms__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.terms__list li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #4054d8;
}

/* Dòng đồng ý điều khoản dưới nút "Xác nhận tham gia" (nút đè nửa dưới thẻ) */
.consent {
  max-width: 34em;
  margin: calc(5.5cqw + 16px) auto 0;
  padding: 0 8px;
  text-align: center;
  text-wrap: balance;
  font: 400 14.5px/1.5 var(--f-body);
  color: #3d3d66;
}
.consent__link {
  display: inline;
  padding: 0;
  border: 0;
  background: none;
  font: 600 1em/inherit var(--f-body);
  color: #1f6fe0;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  cursor: pointer;
}
.consent__link:hover { color: var(--orange); }
.consent__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 3px; }
.terms__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .05em;
  width: 1.35em;
  height: 1.35em;
  background: url("/landings/halloween/assets/img/icons/star-bullet.svg") center / contain no-repeat;
}

.pay__actions { display: grid; justify-items: center; gap: 6px; margin-top: 6cqw; }
.btn-orange {
  min-width: 56%;
  padding: 3.2cqw 6cqw 2.8cqw;
  border: 3px solid #d9d9d9;
  border-radius: 999px;
  background: radial-gradient(120% 140% at 50% 50%, #f58a0c 0%, #f9b023 55%, #f7c531 100%);
  box-shadow: 0 3px 0 #6b6b6b, inset 0 1px 0 rgba(255, 255, 255, .6);
  color: #fff;
  font: 700 clamp(17px, 4.6cqw, 22px)/1 var(--f-head);
  text-transform: uppercase;
  letter-spacing: .3px;
  transition: transform .2s ease, filter .2s ease;
}
.btn-orange:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-orange:active { transform: translateY(1px); box-shadow: 0 1px 0 #6b6b6b; }
.btn-link { padding: 6px 10px; border: 0; background: none; color: var(--blue); font: 700 14px var(--f-head); opacity: .8; }
.btn-link:hover { opacity: 1; text-decoration: underline; }

/* Step transition */
.step.is-enter { animation: stepIn .45s ease both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Footer ---------- */
.footer img { width: 100%; }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 18, 80, .62);
  backdrop-filter: blur(3px);
  animation: fade .25s ease both;
}
.modal__dialog {
  position: relative;
  width: min(100%, 560px);
  animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.modal__close {
  position: absolute;
  right: 4px;
  top: -40px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 24px;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.popup { display: none; }
.popup.is-active { display: block; }
.popup__d img, img.popup__d { width: 100%; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .35)); }
.popup--named .popup__d { position: relative; container-type: inline-size; }
.mpop { display: none; }

/* Link chữ (fanpage…) */
.text-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.text-link:hover { color: var(--orange); }
.text-link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 3px; }

/* Popup desktop: vùng link đè lên chữ in sẵn trong ảnh, có gạch chân cam để biết bấm được */
.popup__d--linked { position: relative; }
.popup__hotspot {
  position: absolute;
  left: 35.8%;
  top: 67.4%;
  width: 24.1%;
  height: 5.4%;
  border-radius: 4px;
  background: linear-gradient(var(--orange), var(--orange)) 0 100% / 100% 2px no-repeat;
  transition: background-color .2s ease;
}
.popup__hotspot:hover { background-color: rgba(245, 127, 15, .14); }
.popup__hotspot:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.popup__text {
  position: absolute;
  left: 30%;
  top: 55.5%;
  width: 64%;
  margin: 0;
  font: 400 2.75cqw/1.32 var(--f-body);
  color: var(--blue);
}
.popup__text b { font-weight: 600; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.8) translateY(20px); } }

/* Confetti sao */
.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.confetti i {
  position: absolute;
  top: -20px;
  width: 14px;
  height: 14px;
  background: url("/landings/halloween/assets/img/icons/sparkle.svg") center / contain no-repeat;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translateY(110vh) rotate(540deg); opacity: .2; } }

/* ---------- Demo switch ---------- */
.demo-switch {
  position: fixed;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 5px 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  font: 700 12px var(--f-head);
  color: var(--navy);
}
.demo-switch select {
  padding: 6px 28px 5px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--orange) url("/landings/halloween/assets/img/icons/chevron-down.svg") right 10px center / 10px 6px no-repeat;
  color: #fff;
  font: 700 13px var(--f-head);
  appearance: none;
  cursor: pointer;
}
.demo-switch select option { color: var(--navy); background: #fff; }
.demo-switch select:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* =========================================================
   Mobile (< 600px)
   - Thẻ sự kiện: mọi tỉnh dùng thẻ HTML (tranh trên, chữ to bên dưới)
   - Popup: bố cục dọc, chữ HTML
   ========================================================= */
.pcard__illus { display: none; }

@media (max-width: 599px) {
  /* Thẻ sự kiện */

  .event-cards {
    margin: 4px 0 0;
    padding: 0 var(--gutter);
    filter: drop-shadow(0 8px 14px rgba(150, 90, 30, .18));
  }
  .pcard {
    position: relative;
    margin: 0;
    padding: 16px 16px 22px;
    background:
      radial-gradient(120% 60% at 85% 100%, rgba(255, 236, 190, .55), transparent 60%),
      linear-gradient(180deg, #efd4b8, #f2dcc6);
    /* mép giấy xé */
    clip-path: polygon(0% 1.6%, 6% 0.4%, 13% 1.4%, 21% 0%, 30% 1.2%, 38% 0.3%, 47% 1.5%, 55% 0.2%, 63% 1.3%, 71% 0%, 79% 1.1%, 87% 0.2%, 94% 1.4%, 100% 0.5%,
      99.2% 12%, 100% 26%, 98.9% 41%, 100% 57%, 99.1% 72%, 100% 87%, 99.3% 98.6%,
      93% 99.6%, 85% 98.5%, 77% 100%, 68% 98.8%, 60% 99.8%, 51% 98.6%, 43% 100%, 34% 98.9%, 26% 99.7%, 17% 98.5%, 9% 99.8%, 0% 98.7%,
      0.8% 85%, 0% 70%, 0.9% 55%, 0% 40%, 0.7% 25%, 0% 12%);
  }
  /* đàn dơi trang trí */
  .pcard::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 8px;
    width: 92px;
    aspect-ratio: 360 / 231;
    background: url("/landings/halloween/assets/img/bats.webp") center / contain no-repeat;
    pointer-events: none;
  }
  .pcard__bg,
  .pcard__art { display: none; }
  .pcard__illus {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
    mask-composite: intersect;
  }
  .pcard__body {
    position: static;
    width: auto;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
    text-align: center;
  }
  .pcard__date { padding: 7px 20px 5px; font-size: 26px; box-shadow: 0 3px 8px rgba(214, 98, 0, .25); }
  .pcard__venue { justify-content: center; max-width: none; gap: 6px; padding: 0 4px; font-size: 17px; line-height: 1.3; text-align: left; }
  .pcard__pin { width: 14px; margin-top: 1px; }
  .pcard__note { justify-content: center; max-width: none; gap: 6px; padding: 0 4px; font-size: 16px; }
  .pcard__note-ic { width: 18px; height: 18px; }
  .hosts { margin: 6px auto 14px; }
  .hosts__label { gap: 10px; margin-bottom: 8px; font-size: 13.5px; }
  .hosts__label::before, .hosts__label::after { width: 32px; }
  .hosts__logos { gap: 20px; }
  .hosts__garden { height: 36px; }
  .hosts__ambedo { height: 56px; }
  .pcard__fee { justify-content: center; gap: 6px; padding: 0 4px; font-size: 17px; }
  .pcard__fee-ic { width: 20px; height: 20px; }
  .pcard__sessions { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; }
  .pcard__sessions li { gap: 3px; padding: 8px 12px 7px; border-radius: 10px; font-size: 15px; text-align: left; }
  .pcard__sessions li > span { gap: 4px; }
  .pcard__sessions svg { width: 13px; height: 13px; }
  .pcard__sessions li.has-icon { column-gap: 8px; padding: 7px 12px 6px 8px; }
  .pcard__sicon { width: 34px; }
  .pcard__cta { min-width: min(250px, 82%); margin-top: 4px; padding: 13px 22px 11px; font-size: 18px; box-shadow: inset 0 0 0 2px #fff6d6, 0 0 0 2px #c9962a, 0 4px 0 1px #a8740f, 0 8px 12px rgba(138, 91, 14, .3); }

  /* Popup */
  .modal__dialog { width: min(100%, 400px); }
  .popup__d { display: none; }
  .mpop { display: block; position: relative; }
  .mpop__card {
    position: relative;
    padding: 64px 22px 26px;
    border: 1.5px solid var(--line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    text-align: center;
  }
  .mpop__card p { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: var(--blue); }
  .mpop__card b { font-weight: 600; }
  .mpop__mascot {
    position: relative;
    z-index: 2;
    display: block;
    width: 150px;
    margin: 0 auto -78px;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2));
  }
  .mpop__bats { position: absolute; z-index: 2; top: 42px; right: -6px; width: 108px; }
  .mpop__pill {
    display: inline-block;
    margin: 0;
    padding: 10px 22px 8px;
    border-radius: 999px;
    background: radial-gradient(120% 140% at 50% 50%, #f58a0c 0%, #f9b023 60%, #f7c531 100%);
    color: #fff;
    font: 700 24px/1 var(--f-head);
    text-transform: uppercase;
    box-shadow: 0 3px 0 #d26200;
  }
  /* popup Cosplay: dấu tích trên, linh vật cưỡi chổi dưới */
  .mpop--cosplay .mpop__card { padding: 26px 22px 120px; }
  .mpop__check {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 0 4px 10px rgba(245, 127, 15, .35);
  }
  .mpop__check svg { width: 30px; height: 30px; }
  .mpop__title {
    margin: 0;
    font: 700 26px/1.1 var(--f-head);
    text-transform: uppercase;
    color: var(--orange);
  }
  .mpop__mascot--broom {
    position: absolute;
    right: -14px;
    bottom: -34px;
    width: 170px;
    margin: 0;
  }
  .modal__close { top: -44px; }
}

/* =========================================================
   Tablet & desktop: nền tràn màn hình, nội dung căn giữa.
   Các khối nội dung trở thành container riêng để đơn vị cqw
   bên trong tính theo bề rộng khối (giữ đúng tỉ lệ như mobile).
   ========================================================= */
@media (min-width: 600px) {
  .intro__head, .exp-grid, .cosplay, .journey { container-type: inline-size; }

  .intro { padding: 32px 0 40px; }
  .intro__head,
  .event-cards,
  .exp-grid,
  .flows { max-width: 600px; margin-inline: auto; }

  .event-cards { margin-top: 0; }
  .event-card { margin-block: -26px; }
  .exp-title { max-width: 520px; margin: 20px auto -24px; }
  .exp-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .exp-card__label { font-size: 13px; padding: 7px 10px 6px; }
  .exp-card__text { font-size: 13.5px; }
  .shine { margin-top: 40px; }


  .register {
    padding: 40px var(--gutter) 80px;
    background:
      radial-gradient(closest-side, var(--cream-2) 70%, transparent) -140px 18% / 520px 420px no-repeat,
      radial-gradient(closest-side, var(--cream-2) 70%, transparent) calc(100% + 160px) 62% / 560px 440px no-repeat,
      radial-gradient(closest-side, var(--cream-2) 70%, transparent) -120px 96% / 460px 360px no-repeat,
      var(--cream);
  }
  .register__cta { width: 420px; max-width: 60%; margin: 80px auto 0; }
  .flows { margin-top: 8px; }
}

@media (min-width: 960px) {
  .intro { padding: 56px 0 64px; }

  /* Intro: chữ trái, lâu đài phải */
  .intro__head { max-width: 880px; }
  .intro__eyebrow { font-size: 28px; }
  .intro__title { font-size: 56px; }
  .intro__desc { font-size: 20px; max-width: 36ch; }
  .intro__castle { width: 22cqw; top: -2cqw; }

  /* Thẻ sự kiện (1 thẻ theo thành phố) căn giữa */
  .event-cards { max-width: 820px; margin-top: 8px; }
  .event-card { margin-block: -20px; }

  .exp-title { max-width: 640px; margin: 40px auto -28px; }
  .exp-grid { max-width: 1000px; gap: 36px; }
  .exp-card__face { min-height: 290px; padding: 22px 18px 18px; border-radius: 26px; }
  .exp-card__icon { max-width: 170px; }
  .exp-card__label { font-size: 17px; padding: 9px 18px 7px; }
  .exp-card__hint { font-size: 13px; }
  .exp-card__title { font-size: 21px; }
  .exp-card__text { font-size: 16px; }

  .shine { margin-top: 64px; }
  .shine__title { font-size: 44px; }
  .shine__sub { font-size: 17px; margin-top: 8px; }


  /* Phần đăng ký (1 luồng theo thành phố) căn giữa */
  .register { padding: 56px var(--gutter) 110px; }
  .register__cta { width: 480px; }
  .flows { max-width: 620px; margin-top: 24px; }
}

/* =========================================================
   Màn hình lớn (≥1200px): nới rộng nội dung để 2 bên đỡ trống.
   Kích thước tăng dần theo bề rộng màn hình (vw) và có trần.
   ========================================================= */
@media (min-width: 1200px) {
  .intro { padding: clamp(56px, 4.5vw, 88px) 0 clamp(64px, 5vw, 96px); }

  .intro__head { max-width: min(1280px, 82vw); }
  .intro__eyebrow { font-size: clamp(28px, 2.1vw, 38px); }
  .intro__title { font-size: clamp(56px, 4.4vw, 82px); }
  .intro__desc { font-size: clamp(20px, 1.45vw, 26px); max-width: 40ch; }
  .intro__castle { width: 20cqw; top: -3cqw; }

  .event-cards { max-width: min(1120px, 72vw); margin-top: 0; }

  .exp-title { max-width: min(760px, 50vw); margin: 56px auto -32px; }
  .exp-grid { max-width: min(1280px, 82vw); gap: 56px; }
  .exp-grid { gap: clamp(20px, 2vw, 36px); }
  .exp-card__face { min-height: clamp(300px, 22vw, 380px); padding: 26px 22px 20px; border-radius: 28px; }
  .exp-card__icon { max-width: clamp(170px, 12vw, 220px); }
  .exp-card__label { font-size: clamp(17px, 1.25vw, 22px); padding: 10px 22px 8px; }
  .exp-card__title { font-size: clamp(21px, 1.6vw, 28px); }
  .exp-card__text { font-size: clamp(16px, 1.15vw, 19px); }
  .exp-card__front::before { width: 18px; height: 18px; top: 20px; left: 22px; }

  .shine { margin-top: 80px; }
  .shine__title { font-size: clamp(44px, 3.4vw, 62px); }
  .shine__sub { font-size: clamp(17px, 1.25vw, 22px); }


  .register { padding: 72px var(--gutter) 130px; }
  .register__cta { width: clamp(480px, 34vw, 600px); margin-top: 56px; }
  .flows { max-width: min(760px, 52vw); margin-top: 32px; }

  /* chữ trong form / thẻ to theo bề rộng form */
  .form-card__q { font-size: 25px; }
  .choice { font-size: 21px; }
  .choice__dot { width: 22px; height: 22px; }
  .choice input:checked + .choice__dot { box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 11px var(--orange); }
  .info-list li { font-size: 21px; }
  .info-card__q { font-size: 18px; }
  .journey__title span { font-size: 30px; }
  .journey__title strong { font-size: 44px; }
  .pay__thanks { font-size: 26px; }
  .pay__last { font-size: 44px; }
  .done__title { font-size: 32px; }
  .done__lead { font-size: 18px; }
  .done__meet-title { font-size: 24px; }
  .done__k { font-size: 16px; }
  .done__v { font-size: 18px; }
  .done__info li { grid-template-columns: 120px minmax(0, 1fr); }
}

/* =========================================================
   Màn hình lớn (≥1200px): phần đăng ký chia 2 cột để lấp 2 bên
   - Cosplay: tiêu đề + linh vật (trái) | form / thẻ hoàn tất (phải)
   - Hành trình: tiêu đề (trái) | thẻ thông tin (phải)
   - Thanh toán: thông tin + QR (trái) | điều khoản (phải)
   Khoảng cách trong thẻ dùng px vì cqw lúc này tính theo cả khối rộng.
   ========================================================= */
@media (min-width: 1200px) {
  .flows { max-width: min(1280px, 88vw); }

  /* ----- Cosplay: giữ bố cục cũ (tiêu đề + linh vật trên, form dưới), rộng hơn ----- */
  .cosplay { width: min(920px, 64vw); margin-inline: auto; }

  /* ----- Hành trình / thanh toán / hoàn tất ----- */
  #stepJourney:not([hidden]),
  #stepDone:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: 0 clamp(40px, 4vw, 80px);
  }
  #stepJourney > .journey__title,
  #stepDone > .journey__title { margin: 0; text-align: left; }
  .journey__title span { font-size: clamp(34px, 2.6vw, 46px); }
  .journey__title strong { font-size: clamp(58px, 4.6vw, 84px); }

  /* Thanh toán: 1 cột căn giữa (điều khoản đã chuyển vào popup) */
  #stepPay:not([hidden]) { max-width: 640px; margin-inline: auto; }
  .pay__title { margin: 0 0 22px; }
  .pay__thanks { font-size: clamp(26px, 1.9vw, 34px); }
  .pay__last { font-size: clamp(44px, 3.3vw, 60px); }
  #stepJourney > .consent { grid-column: 2; margin-top: calc(3cqw + 18px); }

  /* ----- Khoảng cách trong thẻ (px) ----- */
  .form-card { padding: 44px 48px 76px; }
  .form-card__q { margin-bottom: 24px; }
  .choice-list { gap: 16px; padding-left: 8%; }
  .choice { gap: 14px; }
  .cosplay-extra { margin-top: 14px; }

  .info-card { padding: 28px 44px 70px; }
  .info-card--pay { padding-bottom: 24px; }
  .info-list li { padding: 16px 0; }
  .info-card__q { margin: 8px 0 14px; }
  .costume { gap: 16px; }

  .qr { width: 240px; padding: 18px; }
  .qr__logo { width: 46px; height: 46px; font-size: 28px; }
  .qr__hint { margin: 12px 0 0; font-size: 15px; }
  .pay__actions { margin-top: 28px; gap: 10px; }
  .btn-orange { min-width: 300px; padding: 16px 36px 14px; font-size: 22px; }

  .consent { font-size: 16px; }


  .done { padding: 36px 44px 32px; }
}

/* Gallery nối liền ngay dưới tiêu đề "Con được tỏa sáng…" */
@media (min-width: 600px) {
  .intro { padding-bottom: 8px; }
}

/* =========================================================
   Thanh toán: trạng thái "chờ xác nhận" và "đã xác nhận"
   ========================================================= */
.pay__note {
  max-width: 30em;
  margin: 2px auto 0;
  padding: 0 8px;
  text-align: center;
  text-wrap: balance;
  font: 400 14px/1.5 var(--f-body);
  color: #5d5b80;
}

/* Icon trạng thái: đồng hồ cát (chờ) / dấu tích (đã xác nhận) */
.done.is-pending .done__check--paid,
.done:not(.is-pending) .done__check--pending { display: none; }
.done__check--pending { background: #f5a623; box-shadow: 0 4px 12px rgba(245, 166, 35, .35); }
.done__check--pending svg { animation: hourglass 2.4s ease-in-out infinite; }
@keyframes hourglass { 0%, 40% { transform: rotate(0); } 50%, 90% { transform: rotate(180deg); } 100% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .done__check--pending svg { animation: none; } }

.done.is-pending .done__title { color: #d98200; }
.done.is-pending .done__pill { background: #fff1d6; color: #a55f00; }

.done__reqr {
  display: block;
  margin: 12px auto 0;
  padding: 4px 8px;
  border: 0;
  background: none;
  font: 400 14px/1.4 var(--f-body);
  color: #5d5b80;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.done__reqr:hover { color: var(--orange); }
.done__reqr:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.done.is-paid .done__reqr { display: none; }

/* Popup "Apollo đang xác nhận thanh toán": thẻ HTML ở mọi kích thước màn hình */
.popup--pending .mpop { display: block; position: relative; width: min(100%, 440px); margin: 0 auto; }
.popup--pending .mpop__card {
  position: relative;
  padding: 66px 26px 26px;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  text-align: center;
}
.popup--pending .mpop__card p { margin: 12px 0 0; font-size: 16px; line-height: 1.5; color: var(--blue); }
.popup--pending .mpop__card b { font-weight: 600; }
.popup--pending .mpop__mascot {
  position: relative;
  z-index: 2;
  display: block;
  width: 150px;
  margin: 0 auto -78px;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .2));
}
.popup--pending .mpop__bats { position: absolute; z-index: 2; top: 42px; right: -6px; width: 108px; }
.popup--pending .mpop__pill {
  display: inline-block;
  margin: 0;
  padding: 10px 22px 8px;
  border-radius: 999px;
  background: radial-gradient(120% 140% at 50% 50%, #f58a0c 0%, #f9b023 60%, #f7c531 100%);
  color: #fff;
  font: 700 22px/1 var(--f-head);
  text-transform: uppercase;
  box-shadow: 0 3px 0 #d26200;
}
.popup--pending .mpop__card .mpop__sub {
  margin-top: 14px;
  font: 700 20px/1.15 var(--f-head);
  text-transform: uppercase;
  color: var(--blue);
}
.popup--pending .mpop__card .mpop__note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font-size: 14px;
  color: #6b6890;
}

/* =========================================================
   Popup xác nhận đăng ký Halloween (Đóng / Xác nhận tham gia)
   ========================================================= */
.popup--confirm .confirm {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 26px 26px 22px;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
  text-align: left;
}
.confirm__title {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--f-head);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}
.confirm__title span { display: block; font-size: 20px; color: var(--blue); }
.confirm__title strong { display: block; font-size: 32px; font-weight: 700; color: var(--orange); }
.popup--confirm .info-list li { padding: 12px 0; font-size: 17px; }
.popup--confirm .consent { margin: 14px auto 0; font-size: 14px; }
.confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  margin-top: 18px;
}
.confirm__actions .btn-orange { min-width: 0; padding: 14px 16px 12px; font-size: 18px; }
.btn-ghost {
  padding: 13px 16px 11px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: 700 18px/1 var(--f-head);
  text-transform: uppercase;
  transition: border-color .2s ease, background .2s ease;
}
.btn-ghost:hover { border-color: var(--orange); background: #fff8ef; }
.btn-ghost:focus-visible, .confirm__actions .btn-orange:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 599px) {
  .popup--confirm .confirm { padding: 22px 18px 18px; }
  .confirm__title strong { font-size: 28px; }
  .popup--confirm .info-list li { font-size: 15.5px; }
  .confirm__actions { grid-template-columns: 1fr 1.8fr; gap: 10px; }
  .confirm__actions .btn-orange, .btn-ghost { padding: 13px 10px 11px; font-size: 15.5px; white-space: nowrap; }
}

/* Khoảng cách giữa nút "Bố mẹ giúp con đăng ký nhé!" và phần đăng ký mở ra bên dưới
   (nút có viền + bóng + vòng sáng toả ra nên cần chừa rộng) */
#registerFlows { margin-top: clamp(56px, 14vw, 96px); }
.qr { margin-bottom: 4cqw; }
@media (min-width: 1200px) { .qr { margin-bottom: 0; } }


/* =========================================================
   LINK CÁ NHÂN ?sid=… – trạng thái trang, thông báo, chuyển khoản
   (main.js → setState: #page[data-state] = loading | ready | generic | closed)
   ========================================================= */
.page[data-state="loading"] .event-cards,
.page[data-state="loading"] .register,
.page[data-state="generic"] .event-cards,
.page[data-state="generic"] .register,
.page[data-state="closed"] .register__cta,
.page[data-state="closed"] .flows { display: none; }
/* Đã mở phần đăng ký (form Cosplay / xác nhận / QR / hoàn tất) → ẩn nút to "Bố mẹ giúp con đăng ký nhé!" */
.register__cta.is-open { display: none; }
.register__cta.is-open + #registerFlows { margin-top: clamp(16px, 4vw, 32px); }

.hlw-loader {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px var(--gutter) 6px;
  font: 700 15px/1.3 var(--f-head);
  color: var(--navy);
}
.page[data-state="loading"] .hlw-loader { display: flex; }
.hlw-loader__dot {
  width: 16px; height: 16px;
  border: 3px solid var(--line);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: hlw-spin .8s linear infinite;
}
@keyframes hlw-spin { to { transform: rotate(360deg); } }

.hlw-notice {
  max-width: 560px;
  margin: 18px var(--gutter) 8px;
  padding: 18px 18px 16px;
  text-align: center;
}
@media (min-width: 600px) { .hlw-notice { margin-inline: auto; } }
.hlw-notice__title { margin: 0 0 6px; font: 700 20px/1.25 var(--f-head); color: var(--navy); text-wrap: balance; }
.hlw-notice__text { margin: 0; font: 400 15px/1.55 var(--f-body); color: var(--ink); text-wrap: pretty; }
.hlw-notice__retry { margin-top: 14px; min-width: 0; padding: 10px 26px 8px; font-size: 16px; }
.hlw-notice--status { margin-bottom: 18px; border-color: var(--orange); }

/* Thông báo về link đăng ký (Home / thiếu link / link sai): icon thư nổi trên đầu thẻ,
   câu chính màu xanh thương hiệu, dòng "Chưa nhận được link?" thành ô hỗ trợ riêng */
.hlw-notice__icon { display: none; }
.hlw-notice__help { display: none; }
#notice:is([data-key="home"], [data-key="nosid"], [data-key="invalid"]) {
  position: relative;
  margin-top: 52px;
  padding: 44px 22px 20px;
  background:
    radial-gradient(120% 70% at 50% 0%, #fff3df 0%, rgba(255, 243, 223, 0) 70%),
    var(--paper);
  border-color: #efd3a6;
}
#notice:is([data-key="home"], [data-key="nosid"], [data-key="invalid"]) .hlw-notice__icon {
  position: absolute;
  top: -34px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd27a, #f8a42c);
  box-shadow: 0 0 0 5px var(--paper), 0 8px 18px rgba(214, 120, 20, .3);
  color: var(--blue);
  animation: notice-bell 3.6s ease-in-out infinite;
}
.hlw-notice__icon svg { width: 40px; height: 40px; }
@keyframes notice-bell {
  0%, 70%, 100% { transform: rotate(0); }
  75% { transform: rotate(-8deg); }
  80% { transform: rotate(7deg); }
  85% { transform: rotate(-4deg); }
  90% { transform: rotate(2deg); }
}
#notice:is([data-key="home"], [data-key="nosid"], [data-key="invalid"]) .hlw-notice__title { margin-bottom: 8px; font-size: 24px; color: var(--orange); }
#notice:is([data-key="home"], [data-key="nosid"], [data-key="invalid"]) .hlw-notice__text {
  max-width: 40ch;
  margin-inline: auto;
  font: 600 18px/1.5 var(--f-body);
  color: var(--blue);
}
#notice .hlw-notice__help:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1.5px dashed #ecd2ad;
  border-radius: 12px;
  background: #fdf3e4;
  font: 400 14.5px/1.5 var(--f-body);
  color: #6a5640;
  text-align: left;
}
#notice .hlw-notice__help::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23f57f0f'/%3E%3Cpath d='M9.2 9.3a2.9 2.9 0 1 1 3.9 2.7c-.7.3-1.1.9-1.1 1.6v.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.6' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .hlw-notice__icon { animation: none; } }

/* Nút đang gửi */
.is-busy { opacity: .6; cursor: progress; pointer-events: none; }
.img-btn.is-busy { animation: hlw-pulse 1s ease-in-out infinite; }
@keyframes hlw-pulse { 50% { opacity: .4; } }

.done__edit { display: block; margin: 12px auto 0; }
/* "Để sau – xem thông tin đăng ký" dưới form gửi ảnh (nút gửi nằm đè mép dưới thẻ → chừa khoảng) */
.cosplay__later { display: block; margin: clamp(40px, 7cqw, 56px) auto 0; }
/* HN chỉ tham dự (13/10): "Gửi ảnh dự thi Cosplay Stars" = nút chính (cam viền bạc + vệt sáng như "Đăng ký cho con"),
   đặt dưới thông tin sự kiện, ngay trên "Thêm vào lịch"; nút lịch lùi thành nút viền */
.done__edit.is-cta {
  position: relative;
  overflow: hidden;
  margin: 22px auto 0;
  padding: 15px 34px 13px;
  border-radius: 16px;
  background:
    radial-gradient(60% 90% at 50% 40%, rgba(255, 226, 120, .5), transparent 70%),
    linear-gradient(180deg, #ffb21e 0%, #f9a313 45%, #f08c0a 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -3px 0 rgba(196, 98, 0, .35),
    0 0 0 3px #ececef,
    0 0 0 4.5px #a9a9b2,
    0 6px 12px rgba(120, 70, 20, .25);
  color: #fff;
  font: 700 clamp(17px, 2.2vw, 22px)/1.1 var(--f-head);
  letter-spacing: .4px;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(150, 70, 0, .35);
  opacity: 1;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
}
.done__edit.is-cta:hover { text-decoration: none; transform: translateY(-2px); filter: brightness(1.05); }
.done__edit.is-cta:focus-visible { outline: 3px solid var(--blue); outline-offset: 6px; }
.done__edit.is-cta::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: -40%;
  width: 28%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  transform: skewX(-20deg);
  animation: btn-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .done__edit.is-cta::after { animation: none; display: none; } }
@media (max-width: 599px) { .done__edit.is-cta { width: 100%; padding-inline: 16px; font-size: 17px; } }
/* Chỉ khi nút gửi ảnh đang hiện (hết hạn nhận ảnh → nút ẩn → "Thêm vào lịch" về lại nút cam) */
.done:has(.done__edit.is-cta:not([hidden])) .cal__btn {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--orange);
  color: var(--orange);
}
.done:has(.done__edit.is-cta:not([hidden])) .cal__btn:active { box-shadow: inset 0 0 0 2px var(--orange); }

/* QR dạng ảnh img.vietqr.io (có sẵn logo ngân hàng + số tiền) */
.qr.has-img { width: min(72cqw, 340px); padding: 2cqw; }
.qr__img { display: block; width: 100%; height: auto; }

.payinfo {
  max-width: 420px;
  margin: 14px auto 0;
  padding: 14px 16px 12px;
  text-align: left;
}
.payinfo__save {
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 8px 18px 6px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 700 15px/1.2 var(--f-head);
  text-decoration: none;
}
.payinfo__hint, .payinfo__warn { margin: 0 0 10px; font: 400 13px/1.5 var(--f-body); color: #5d5b80; text-align: center; }
.payinfo__warn { margin: 10px 0 0; }
.payinfo__warn b { color: var(--orange); }
.payinfo__list { display: grid; gap: 0; margin: 0; }
.payinfo__list > div {
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px dashed var(--line);
}
.payinfo__list dt { font: 700 13px/1.3 var(--f-head); color: #8a7a68; }
.payinfo__list dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0;
  font: 700 15px/1.35 var(--f-head);
  color: var(--navy);
  overflow-wrap: anywhere;
}
.payinfo__copy {
  flex: none;
  padding: 4px 10px 3px;
  border: 1.5px solid var(--blue);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font: 700 12px/1.2 var(--f-head);
  cursor: pointer;
}
.payinfo__copy.is-done { border-color: #2fb36d; background: #e5f6ec; color: #1f8a4f; }
.payinfo__missing { font: 400 15px/1.55 var(--f-body); color: var(--ink); }
@media (min-width: 900px) {
  .qr.has-img { width: 320px; padding: 12px; }
  .payinfo { max-width: 460px; }
}

/* =========================================================
   CHỜ THANH TOÁN (13/10) – main.js → placePay
   Máy tính: #stepPay chuyển lên #payDock (trên thẻ sự kiện) → thẻ trắng, QR trái + thông tin chuyển khoản phải.
   Điện thoại: #stepPay chuyển vào popup "pay" → cuộn trong popup, nút "Xem thông tin sự kiện" cuối popup.
   ========================================================= */
.pay__lead { display: none; }
.paydock #stepPay .pay__actions,
.paypop #stepPay .pay__actions { display: none; }   /* "‹ Quay lại" không cần khi QR ở trên thẻ / trong popup */
.paydock #stepPay .qr,
.paypop #stepPay .qr { margin: 0 auto; border-top: 1.5px dashed var(--line); border-radius: 14px; }
.paydock #stepPay .payinfo,
.paypop #stepPay .payinfo { max-width: none; margin: 0; box-shadow: none; }

.paydock {
  position: relative;
  z-index: 2;
  container-type: inline-size;
  width: min(100% - 2 * var(--gutter), 880px);
  margin: 22px auto 1.5cqw;
}
.paydock #stepPay:not([hidden]) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 28px;
  align-items: center;
  max-width: none;
  margin: 0;
  padding: 24px 28px;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(150, 90, 30, .14);
}
.paydock .pay__title { display: none; }            /* đầu trang đã có "Cảm ơn bố mẹ đã xác nhận! / Chỉ còn 1 bước nữa!" */
.paydock .pay__lead,
.paypop .pay__lead {
  display: block;
  margin: 0;
  color: var(--blue);
  font: 600 17px/1.45 var(--f-body);
  text-align: center;
}
.paydock .pay__lead { grid-column: 1 / -1; }
.pay__lead b { color: var(--orange); font-weight: 600; }
.paydock #stepPay .qr.has-img { width: 280px; padding: 10px; }
.paydock #stepPay .qr:not(.has-img) { width: 240px; padding: 16px; }
.paydock #stepPay .payinfo { padding: 4px 0 0; border: 0; background: none; }
.paydock #payMissing { grid-column: 1 / -1; margin: 0; }
/* Cỡ chữ tối thiểu 18px trong paydock (13/10) – chỉ áp cho #payDock, popup điện thoại giữ nguyên */
.paydock .pay__lead { font-size: 19px; }
.paydock .payinfo__list > div { grid-template-columns: 8.5em 1fr; gap: 10px; padding: 10px 0; }
.paydock .payinfo__list dt { font-size: 18px; }
.paydock .payinfo__list dd { font-size: 20px; gap: 8px; }
.paydock .payinfo__copy { padding: 6px 14px 5px; font-size: 18px; }
.paydock .payinfo__hint,
.paydock .payinfo__warn,
.paydock .payinfo__missing { font-size: 18px; }
.paydock .payinfo__save { font-size: 18px; }
@media (max-width: 759px) {
  .paydock #stepPay:not([hidden]) { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 20px; }
  .paydock #stepPay .payinfo { width: 100%; max-width: 460px; }
}

/* Popup QR (điện thoại) */
/* Popup = cột: phần QR + thông tin cuộn bên trong, nút "Xem thông tin sự kiện" luôn nằm ở đáy (không phải cuộn mới thấy) */
.popup--pay .paypop {
  display: flex;
  flex-direction: column;
  width: min(100%, 460px);
  max-height: calc(100vh - 90px);
  max-height: calc(100dvh - 90px);
  margin: 0 auto;
  padding: 18px 16px 14px;
  overflow: hidden;
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.paypop__slot {
  container-type: inline-size;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.paypop #stepPay { margin: 0; }
.paypop .pay__title { margin: 0 0 10px; }
.paypop .pay__thanks { font-size: 17px; }
.paypop .pay__last { font-size: 26px; }
.paypop .pay__lead { margin: 0 0 12px; font-size: 15px; }
.paypop #stepPay .qr.has-img { width: min(78cqw, 300px); padding: 8px; }
.paypop #stepPay .payinfo { margin-top: 12px; padding: 8px 12px; }
.paypop__skip { flex: none; display: block; width: 100%; margin-top: 12px; }

/* =========================================================
   TRẠNG THÁI ĐẦU TRANG (main.js → renderPageState, câu chữ config.js → pageText)
   ========================================================= */
/* Tiêu đề có tên bé dài ("Nguyễn Hoàng Bảo Châu muốn tham gia!") → nhỏ lại cho khỏi tràn */
/* Tiêu đề có tên bé ("Bùi Gia Bửu muốn tham gia!"): xuống 2 dòng, chỉ nhỏ đi một chút so với gốc;
   dòng cao hơn để dấu tiếng Việt chồng (Ẵ, Ử) của 2 dòng không chạm nhau */
.intro__title[data-long="true"] { font-size: clamp(24px, 6.8cqw, 34px); line-height: 1.16; }
.intro__title[data-long="true"] .intro__sparkle { top: auto; bottom: 62%; }
.intro__title[data-long="true"] .gold-text { white-space: pre-line; }
@media (min-width: 900px) {
  .intro__title[data-long="true"] { font-size: clamp(46px, 3.6vw, 68px); }
}



/* =========================================================
   TRANG HOME – không có link cá nhân (main.js → initHome)
   Thẻ sự kiện theo khu vực chọn ở menu; không có phần đăng ký (cần link riêng)
   ========================================================= */
.page[data-state="home"] .register { display: none; }
.region {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 14px var(--gutter) 6px;
}
.region__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  max-width: 460px;
  padding: 4px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 0 4px 14px rgba(186, 128, 50, .14);
}
.region__tab {
  padding: 10px 6px 8px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--navy);
  font: 700 clamp(14px, 4cqw, 17px)/1.1 var(--f-head);
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.region__tab[aria-selected="true"] {
  background: linear-gradient(180deg, #ff9a2e, var(--orange));
  color: #fff;
  box-shadow: 0 2px 0 #b85d06;
}
.region__tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.region__picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; }
.region__pick { display: flex; align-items: center; gap: 8px; font: 700 15px/1 var(--f-head); color: var(--navy); }
.region__pick select {
  max-width: 62vw;
  padding: 8px 30px 6px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--navy);
  font: 700 15px/1.2 var(--f-head);
}
.hlw-notice__text { white-space: pre-line; }
.hlw-notice__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.hlw-notice__contact { min-width: 0; padding: 10px 22px 8px; font-size: 16px; text-decoration: none; }
@media (min-width: 960px) {
  .region { margin-top: 24px; }
  .region__tab { font-size: 18px; }
  .hlw-notice { max-width: 640px; padding: 24px 28px 22px; }
  .hlw-notice__title { font-size: 24px; }
  .hlw-notice__text { font-size: 17px; }
}

/* =========================================================
   TỰ ĐĂNG KÝ KHÔNG CẦN LINK (17/10) – trang chung, tab Hà Nội (main.js → renderSelfReg)
   Thẻ ngay dưới khung "Đăng ký thế nào?": nhãn nhỏ, tiêu đề cam, form 2 cột (máy tính) / 1 cột (điện thoại)
   ========================================================= */
/* Khung ngoài: tiêu đề Cosplay Stars + linh vật (đè lên mép trên thẻ) + thẻ form.
   container → các cỡ cqw của .cosplay__head / .cosplay-extra tính theo bề rộng khung này, không theo cả trang */
.selfreg-wrap {
  container-type: inline-size;
  max-width: 560px;
  margin: 18px var(--gutter) 8px;
  scroll-margin-top: 16px;
}
@media (min-width: 600px) { .selfreg-wrap { margin-inline: auto; } }
#notice[hidden] + .selfreg-wrap { margin-top: 32px; }   /* tab Hà Nội: không có khung "Đăng ký thế nào?" phía trên */
.selfreg-wrap.is-enter { animation: stepIn .45s ease both; }   /* mở ra khi bấm nút trên thẻ sự kiện */
.selfreg {
  position: relative;
  z-index: 2;
  padding: max(26px, 8cqw) 18px 20px;   /* chừa chỗ cho linh vật đè xuống góc phải */
  text-align: center;
}

.selfreg__form {
  display: grid;
  gap: 14px;
  text-align: left;
}
.selfreg__field { display: grid; gap: 6px; }
.selfreg__label { font: 700 15px/1.25 var(--f-head); color: var(--navy); }
.selfreg__label b { color: var(--orange); }
.selfreg__label small { font: 400 13px/1 var(--f-body); color: #8a7a68; }
.selfreg__input {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font: 600 16px/1.3 var(--f-body);   /* ≥16px: iPhone không tự phóng to khi gõ */
  transition: border-color .2s ease, box-shadow .2s ease;
}
.selfreg__input::placeholder { color: #b0a191; font-weight: 400; }
.selfreg__input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43, 62, 211, .15); }
.selfreg__input[aria-invalid="true"] { border-color: #d6331b; background: #fff6f4; }
select.selfreg__input {
  appearance: none;
  padding-right: 38px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23f57f0f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
  cursor: pointer;
}
select.selfreg__input:has(option[value=""]:checked) { color: #b0a191; font-weight: 400; }   /* chưa chọn trung tâm → chữ mờ như placeholder */
select.selfreg__input option { color: var(--ink); }
/* Cosplay Stars trong form (dùng lại khối .cosplay-extra của trang link riêng) */
.selfreg__cosplay { grid-column: 1 / -1; margin-top: 4px; padding-top: 18px; }
.selfreg__cosplay .cosplay-extra__head { margin-bottom: 14px; }
.selfreg__cosplay .cosplay-extra__title {
  margin: 0;
  text-align: left;
  font: 700 clamp(16px, 4cqw, 20px)/1.15 var(--f-head);
  letter-spacing: .2px;
  color: var(--navy);
  text-wrap: balance;
}
.selfreg__cosplay .cosplay-extra__deadline { font-size: 14px; }
.selfreg__done .done__photo { max-width: 360px; margin-inline: auto; }
.selfreg__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.selfreg__error { margin: 0; }
.selfreg__submit {
  justify-self: center;
  width: min(100%, 340px);
  min-width: 0;
  padding: 15px 24px 13px;
  font-size: 19px;
}
.selfreg__done { padding-top: 6px; }
.selfreg__done:focus { outline: none; }
.selfreg__done.is-enter { animation: stepIn .5s ease both; }
.selfreg__again { display: block; margin: 12px auto 0; }
.selfreg__later { grid-column: 1 / -1; justify-self: center; }
.selfreg__done .done__edit.is-cta { line-height: 1.2; }
/* Nút Cosplay + kệ quà tặng (17/10). Kệ quà cùng kiểu thẻ "Những trải nghiệm đang chờ con" (.exp-card__front):
   nền kem có quầng sáng màu riêng (--glow), sao lấp lánh, quà bồng bềnh (bob), nhãn viên cam Brauer.
   Ảnh quà nền trắng → mix-blend-mode: multiply để nền trắng hoà vào quầng sáng, quà như nổi trên kệ. */
.selfreg__cta { margin-top: 26px; }
/* Nút "Tham gia Cosplay Stars": to hơn, phập phồng nhẹ, quầng sáng cam phía sau, sao lấp lánh quanh nút, mũi tên nhấp nhô */
.selfreg__cta-btn {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 6px 0;
}
.selfreg__cta-btn::before {   /* quầng sáng */
  content: "";
  position: absolute;
  inset: -8px 6%;
  border-radius: 999px;
  background: radial-gradient(closest-side, rgba(255, 170, 40, .55), rgba(255, 170, 40, 0));
  filter: blur(6px);
  animation: selfreg-glow 2.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes selfreg-glow { 50% { opacity: .35; scale: 1.06; } }
.selfreg__cta .done__edit.is-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(100%, 440px);
  margin: 0;
  padding: 18px 30px 16px;
  border-radius: 999px;
  /* 17/10: cùng font Baskerville với câu "Hẹn gặp gia đình tại Halloween 2026." (không dùng Brauer viết hoa) */
  font: 700 clamp(22px, 6cqw, 28px)/1.2 var(--f-body);
  letter-spacing: .2px;
  text-transform: none;
  animation: selfreg-cta-pulse 2.2s ease-in-out infinite;
}
@keyframes selfreg-cta-pulse { 50% { scale: 1.04; } }
.selfreg__cta .done__edit.is-cta span { white-space: nowrap; }   /* "Tham gia Cosplay Stars" luôn 1 dòng */
@media (max-width: 599px) {
  .selfreg__cta .done__edit.is-cta { padding: 16px 18px 14px; font-size: clamp(19px, 5.6cqw, 24px); gap: 10px; }
}
.selfreg__cta-arrow {
  flex: none;
  width: 1em;
  height: 1em;
  animation: selfreg-arrow 1.1s ease-in-out infinite;
}
@keyframes selfreg-arrow { 50% { translate: 5px 0; } }
.selfreg__spark {
  position: absolute;
  z-index: 3;
  width: 18px;
  height: 18px;
  animation: twinkle 2.4s ease-in-out infinite;
  pointer-events: none;
}
.selfreg__spark--1 { top: -6px; left: 8%; }
.selfreg__spark--2 { top: 2px; right: 6%; width: 13px; height: 13px; animation-delay: .8s; }
.selfreg__spark--3 { bottom: -4px; right: 16%; width: 15px; height: 15px; animation-delay: 1.6s; }
@media (prefers-reduced-motion: reduce) {
  .selfreg__cta-btn::before, .selfreg__cta .done__edit.is-cta, .selfreg__cta-arrow, .selfreg__spark { animation: none; }
}
.prize {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1.5px dashed var(--line);
}
.prize__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 14px;
  font: 700 clamp(18px, 5.2cqw, 30px)/1.2 var(--f-body);   /* Baskerville như câu "Hẹn gặp gia đình…" */
  white-space: nowrap;
}
.prize__title svg { flex: none; width: 18px; height: 18px; animation: twinkle 2.6s ease-in-out infinite; }
.prize__title svg:last-child { animation-delay: 1.3s; }
.prize__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 460px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.prize__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 16px 10px 14px;
  border: 1.5px solid #f1dcc0;
  border-radius: 22px;
  background:
    radial-gradient(85% 60% at 50% 42%, var(--glow), transparent 72%),
    linear-gradient(180deg, #fffdf8, #fff3e2);
  box-shadow: 0 10px 22px rgba(150, 90, 30, .13), inset 0 -3px 0 rgba(241, 220, 192, .7);
}
/* sao lấp lánh ở góc – như .exp-card__front */
.prize__item::before,
.prize__item::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: url("/landings/halloween/assets/img/icons/sparkle.svg") center / contain no-repeat;
  animation: twinkle 2.6s ease-in-out infinite;
  pointer-events: none;
}
.prize__item::before { top: 12px; left: 12px; }
.prize__item::after { top: 22px; right: 14px; width: 10px; height: 10px; animation-delay: 1.3s; }
/* Sân khấu: ảnh + bóng đổ hình elip dưới chân */
.prize__stage {
  position: relative;
  display: flex;   /* flex → height: 100% của ảnh có hiệu lực */
  width: 100%;
  height: clamp(110px, 31cqw, 168px);
}
.prize__stage::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: -4px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(120, 70, 20, .28), transparent);
}
.prize__stage img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
  mix-blend-mode: multiply;
  animation: bob 4s ease-in-out infinite;
}
.prize__item:nth-child(2) .prize__stage img { animation-delay: -2s; }
.prize__label {
  display: inline-block;
  max-width: 100%;
  padding: 7px 12px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  box-shadow: 0 2px 0 #d26200;
  color: #fff;
  font: 700 clamp(13.5px, 3.8cqw, 18px)/1.2 var(--f-body);   /* Baskerville như câu "Hẹn gặp gia đình…" */
  white-space: nowrap;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .prize__title svg, .prize__item::before, .prize__item::after, .prize__stage img { animation: none; }
}
/* Nút Cosplay đang hiện → "Thêm vào lịch" lùi thành nút viền (như thẻ hoàn tất link riêng) */
.selfreg__done:has(.selfreg__cta:not([hidden])) .cal__btn {
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--orange);
  color: var(--orange);
}
.selfreg__done:has(.selfreg__cta:not([hidden])) .cal__btn:active { box-shadow: inset 0 0 0 2px var(--orange); }
@media (min-width: 600px) {
  .selfreg__form { grid-template-columns: 1fr 1fr; gap: 16px 18px; }
  .selfreg__field--wide,
  .selfreg__error,
  .selfreg__submit { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .selfreg-wrap { max-width: 640px; }
  .selfreg { padding: max(30px, 8cqw) 32px 26px; }
}