/* ==========================================================================
   4rau.vn/ws — khung giao diện trang sự kiện (dùng chung mọi sự kiện)
   Hệ đơn vị học từ nynjfwc26.com: desktop ≥1366px → 1rem = 1px artboard 1920 (scale theo viewport);
   mobile <1366px → 1rem = 1px thật (artboard 375). Chỉ 2 layout. Chữ nhỏ chặn sàn bằng max(px, rem).
   Màu/font của từng sự kiện ghi đè các biến --c-* / --f-* (WsContent::themeCss), KHÔNG sửa ở đây.
   ========================================================================== */

:root {
  --c-bg: #FFFFFF; --c-ink: #111111;
  --c-brand: #8EFE3B; --c-brand-ink: #111111;   /* xanh neon Workshop Barber 5 (file PROPOSAL) */
  --c-dark: #111111; --c-dark-ink: #FFFFFF;
  --c-soft: #EDEDEA; --c-accent: #C8102E;
  --f-display: "Anton", Impact, "Arial Narrow", sans-serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --wr: 50rem; --gap: 20rem; --sl: max(1px, 1rem);
  --br1: 8rem; --br2: 10rem; --br3: 12rem; --br4: 14rem;
  --r-ctl: 4px;   /* mọi thứ bấm được (nút, chip, ô nhập, nhãn): góc vuông vức, không bo viên thuốc */
  --mw: 19200px;
  --f-xs: max(11px, 14rem); --f-s: max(12px, 16rem); --f-d: max(14px, 20rem); --f-m: max(15px, 22rem); --f-b: max(16px, 24rem);
  --f-l: 80rem; --f-xl: 140rem; --f-xl1: 190rem; --f-xxl: 240rem;
  --sec: 200rem; --hdr: 100rem;
  --ease: cubic-bezier(.2, .7, .1, 1);
}
html { font-size: .052vw; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(5.2vw + 16px); }   /* nhảy tới #dang-ky… không bị header che (= --hdr + 16px)
   KHÔNG dùng var(--hdr) ở đây: rem đặt ngay trên <html> thì Safari tính theo 16px → 64rem = 1024px → chạm ô nhập là trang bị kéo về đầu section */
@media (hover: hover) { html { scroll-behavior: smooth; } }   /* chỉ máy có chuột: trên điện thoại cuộn mượt toàn trang làm ô nhập giật khi bàn phím bật */
@media (max-width: 1365.98px) {
  html { font-size: 1px; scroll-padding-top: 80px; }   /* = --hdr 64px + 16px */
  :root {
    --wr: 16rem; --gap: 8rem; --mw: 680px;
    --br1: 5rem; --br2: 10rem; --br3: 12rem; --br4: 10rem;
    --f-xs: 11rem; --f-s: 13rem; --f-d: 15rem; --f-m: 15rem; --f-b: 17rem;
    --f-l: 50rem; --f-xl: 48rem; --f-xl1: 64rem; --f-xxl: 70rem;
    --sec: 100rem; --hdr: 64rem;
  }
}
@media (min-width: 19200px) { html { font-size: 1px; } }

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 var(--f-d)/1.35 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
/* Tiếng Hàn: không ngắt dòng giữa 1 từ (mặc định trình duyệt ngắt theo từng âm tiết) */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
:lang(ko) .title, :lang(ko) .btn, :lang(ko) .row .k { letter-spacing: 0; }
.desktop { } .mobile { display: none !important; }
@media (max-width: 1365.98px) { .desktop { display: none !important; } .mobile { display: revert !important; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hidden { display: none !important; }

/* ── Khung chung ────────────────────────────────────────────────────── */
.wrapper { width: 100%; max-width: var(--mw); margin: 0 auto; padding: 0 var(--wr); }
.bleed { margin-left: calc(-1 * var(--wr)); margin-right: calc(-1 * var(--wr)); }
.section { position: relative; z-index: 1; overflow: clip; padding: var(--sec) 0; }
.section[data-tone="light"] { background: var(--c-bg); color: var(--c-ink); }
.section[data-tone="dark"]  { background: var(--c-dark); color: var(--c-dark-ink); }
.section[data-tone="brand"] { background: var(--c-brand); color: var(--c-brand-ink); }
.section-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 90rem; gap: 24rem; }
@media (max-width: 1365.98px) { .section-header { margin-bottom: 40rem; gap: 14rem; } }

.title { font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 1.1; letter-spacing: -.005em; font-size: var(--f-xl); margin: 0; white-space: pre-line; }
.title.xl1 { font-size: var(--f-xl1); }
.eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: var(--f-s); }
.lead { font-size: var(--f-b); max-width: 900rem; margin: 0; opacity: .85; }
.muted { opacity: .7; }

/* Nút: chữ display + hiệu ứng "cuộn chữ" khi hover (2 dòng chữ trong khung overflow) */
.btn { --b-bg: var(--c-brand); --b-ink: var(--c-brand-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 12rem;
  height: max(50px, 75rem); padding: 0 40rem; border: 0; border-radius: var(--r-ctl); cursor: pointer; text-decoration: none;
  background: var(--b-bg); color: var(--b-ink); font: 400 var(--f-b)/1 var(--f-display); text-transform: uppercase; letter-spacing: .02em;
  transition: transform .3s var(--ease), opacity .2s; }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn.wait[disabled] { --b-bg: #2a2a2a; --b-ink: rgba(255,255,255,.6); opacity: 1; }   /* chưa tới giờ nhận vé: xám hẳn, không giống nút bấm được */
.btn.ghost { --b-bg: transparent; --b-ink: currentColor; box-shadow: inset 0 0 0 var(--sl) currentColor; }
.btn.dark { --b-bg: var(--c-dark); --b-ink: var(--c-dark-ink); }
.btn.block { width: 100%; }
@media (max-width: 1365.98px) { .btn { height: 54px; padding: 0 22px; } }   /* 75rem = 75px trên điện thoại: quá cao, form nặng nề */
/* Nút LƯỠI LAM (sự kiện barber) — CHỈ 4 chỗ quan trọng: Giữ chỗ ở hero / chân trang / nút dính đáy + Nhận vé.
   Nút còn lại giữ chữ nhật 4px. Dáng lưỡi dao cạo 2 lưỡi: khấc giữa 2 đầu + vát góc (clip-path), 2 lỗ tròn gần 2 đầu (mask),
   dải mài sáng + đường mài tối dọc 2 cạnh (nền), rê chuột = vệt sáng thép lướt qua. clip/mask cắt mất outline → viền focus vẽ vào trong. */
.btn.blade { --nd: 7px; --nh: 9px; --hx: 22px; --hr: 4.5px;   /* độ sâu/nửa cao khấc · tâm/bán kính lỗ */
  position: relative; overflow: hidden; border-radius: 0;
  background-image: linear-gradient(180deg, rgba(255,255,255,.32) 0 3px, rgba(0,0,0,.22) 3px 4px, transparent 4px calc(100% - 4px), rgba(0,0,0,.22) calc(100% - 4px) calc(100% - 3px), rgba(255,255,255,.18) calc(100% - 3px));
  clip-path: polygon(3px 0, calc(100% - 3px) 0, 100% 3px, 100% calc(50% - var(--nh)), calc(100% - var(--nd)) calc(50% - 4px), calc(100% - var(--nd)) calc(50% + 4px), 100% calc(50% + var(--nh)), 100% calc(100% - 3px), calc(100% - 3px) 100%,
    3px 100%, 0 calc(100% - 3px), 0 calc(50% + var(--nh)), var(--nd) calc(50% + 4px), var(--nd) calc(50% - 4px), 0 calc(50% - var(--nh)), 0 3px);
  -webkit-mask: radial-gradient(circle at var(--hx) 50%, #0000 var(--hr), #000 calc(var(--hr) + .5px)), radial-gradient(circle at calc(100% - var(--hx)) 50%, #0000 var(--hr), #000 calc(var(--hr) + .5px));
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.btn.blade::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-101%);
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); }
.btn.blade:hover::after { transform: translateX(101%); transition: transform .7s var(--ease); }   /* chỉ lướt khi rê vào, rời chuột thì về chỗ ngay */
.btn.blade:focus-visible { outline: none; box-shadow: inset 0 0 0 3px currentColor; }
@media (prefers-reduced-motion: reduce) { .btn.blade::after { display: none; } }
.scrl { display: inline-block; overflow: hidden; height: 1.7em; line-height: 1.7; vertical-align: middle; }   /* 1.7: đủ chỗ dấu tiếng Việt chồng (Ữ Ỗ Ệ) — thấp hơn là dòng chữ ẩn ló dấu ra, dòng hiện bị cắt dấu */
.scrl > span { display: block; transition: transform .45s var(--ease); }
.scrl > span::after { content: attr(data-t); display: block; }
a:hover .scrl > span, button:hover .scrl > span { transform: translateY(-50%); }
@media (hover: none) { a:hover .scrl > span, button:hover .scrl > span { transform: none; } }

/* Khung giữ chỗ cho ảnh chưa có */
.ph { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 120px;
  background: repeating-linear-gradient(45deg, rgba(127,127,127,.18) 0 12px, rgba(127,127,127,.1) 12px 24px); color: currentColor; }
.ph span { font: 600 12px/1.4 ui-monospace, Menlo, monospace; text-align: center; padding: 10px; opacity: .75; word-break: break-all; }
.ph small { display: block; opacity: .8; }

/* Ảnh tỉ lệ cố định */
.ratio { position: relative; display: flex; overflow: hidden; border-radius: var(--br3); }
.ratio::before { content: ""; width: 0; padding-top: var(--r, 100%); }
.ratio > img, .ratio > .ph, .ratio > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Hiện dần: data-reveal (khối) — JS thêm .in khi vào màn hình; tiêu đề tách dòng .ln > i */
[data-reveal] { opacity: 0; transform: translateY(40rem); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
/* Khung dòng (overflow hidden cho hiệu ứng trượt chữ) phải chừa đủ chỗ cho dấu tiếng Việt của Anton:
   dấu trên (Ữ Ỗ Ì Ỏ) cao tới ~.3em trên đầu chữ, dấu dưới (Ị Ạ Ộ) ~.18em — margin âm bù lại để không đổi bố cục.
   line-height 1.1 (không phải .9): 2 dòng xếp chồng thì dấu nặng dòng trên không đụng dấu huyền dòng dưới (LỊCH / TRÌNH) */
.ln { display: block; overflow: hidden; padding: .34em 0 .22em; margin: -.34em 0 -.22em; }
.ln > i { display: block; font-style: normal; transform: translateY(105%); transition: transform .9s var(--ease); transition-delay: calc(var(--i, 0) * .12s); }
.in .ln > i, .ln.in > i { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .ln > i { opacity: 1 !important; transform: none !important; transition: none !important; }
  .marquee-track { animation: none !important; }
}

/* ── Thanh nhắc mở bằng trình duyệt ─────────────────────────────────── */
.inapp { display: none; position: relative; z-index: 120; background: var(--c-accent); color: #fff; padding: 10px 16px; font-size: 14px; text-align: center; }
.inapp.on { display: block; }

/* ── 1. Header ──────────────────────────────────────────────────────── */
.header { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--hdr-ink, var(--c-dark-ink)); transition: color .4s, transform .5s var(--ease); }
.header::before { content: ""; position: absolute; inset: 0; background: var(--hdr-bg, transparent); opacity: var(--hdr-bg-o, 0); transition: opacity .4s, background .4s; }
body[data-hdr="light"] .header { --hdr-ink: var(--c-ink); --hdr-bg: var(--c-bg); }
body[data-hdr="dark"]  .header { --hdr-ink: var(--c-dark-ink); --hdr-bg: var(--c-dark); }
body[data-hdr="brand"] .header { --hdr-ink: var(--c-brand-ink); --hdr-bg: var(--c-brand); }
body.scrolled .header { --hdr-bg-o: .92; }
body.hdr-hide .header { transform: translateY(-100%); }
.header .wrapper { padding-left: max(var(--wr), env(safe-area-inset-left)); padding-right: max(var(--wr), env(safe-area-inset-right)); }
.header { padding-top: env(safe-area-inset-top); }
.topbar { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 50rem; height: var(--hdr); }
.hdr-end { display: flex; align-items: center; gap: 24rem; }
/* Ngôn ngữ: cờ tròn SVG (partials/flag). Header = 1 nút cờ + mã → mở danh sách; menu mobile = hàng cờ + tên */
.flag { width: 22px; height: 22px; flex: none; border-radius: 50%; display: block; }
.lang-pick { position: relative; }
.lang-pick summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 7px; border-radius: var(--r-ctl); cursor: pointer;
  box-shadow: inset 0 0 0 var(--sl) color-mix(in srgb, currentColor 35%, transparent); font: 700 12px/1 var(--f-body); letter-spacing: .06em; }
.lang-pick summary::-webkit-details-marker { display: none; }
.lang-pick summary::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); opacity: .7; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; min-width: 170px; padding: 6px; border-radius: 6px; background: #fff; color: #111; box-shadow: 0 14px 40px rgba(0,0,0,.25); }
.lang-menu a, .lang-menu span { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-ctl); text-decoration: none; font: 600 14px/1 var(--f-body); letter-spacing: 0; text-transform: none; }
.lang-menu a:hover { background: #f1f1f1; }
.lang-menu span[aria-current] { background: color-mix(in srgb, var(--c-brand) 35%, #fff); }
.lang-menu i { font-style: normal; }
.popnav .lang { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 30rem; }
.popnav .lang a, .popnav .lang span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px 0 10px; border-radius: var(--r-ctl); text-decoration: none; font: 600 14px/1 var(--f-body);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.popnav .lang span[aria-current] { background: var(--c-brand); color: var(--c-brand-ink); box-shadow: none; }
.popnav .lang i { font-style: normal; }
.topbar nav { display: flex; gap: 30rem; font-size: var(--f-s); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.topbar nav a { text-decoration: none; }
.topbar nav.r { justify-content: flex-end; align-items: center; }
.topbar .logo { display: block; height: 58rem; }   /* logo chữ ngang (wordmark) — đủ cao để đọc được dòng nhỏ */
.topbar .logo img, .topbar .logo .ph { height: 100%; width: auto; min-height: 0; }
.topbar .logo .ph { width: 160rem; }
/* 2 bản logo: on-dark (sáng) cho hero/section tối · on-light (tối) cho section sáng — đổi theo body[data-hdr] */
.topbar .logo .on-light { display: none; }
body[data-hdr="light"] .topbar .logo .on-dark, body[data-hdr="brand"] .topbar .logo .on-dark { display: none; }
body[data-hdr="light"] .topbar .logo .on-light, body[data-hdr="brand"] .topbar .logo .on-light { display: block; }
.topbar .logo-text { font: 400 36rem/1 var(--f-display); text-transform: uppercase; text-decoration: none; }
.menu-btn { display: none; background: none; border: 0; font: 700 var(--f-s)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; padding: 10px 0; cursor: pointer; }
.hdr-cta { height: max(40px, 56rem); padding: 0 26rem; font-size: var(--f-s); }
@media (max-width: 1365.98px) {
  .topbar { grid-template-columns: auto 1fr; gap: 12rem; }
  .topbar nav:not(.r), .topbar nav.r > a { display: none; }
  .topbar .logo { height: 34rem; }
  .hdr-end { gap: 6rem; }
  .menu-btn { display: block; padding: 12px 0 12px 8px; }
  .hdr-cta { display: none; }
}

/* Menu toàn màn hình (mobile) */
.popnav { position: fixed; inset: 0; z-index: 110; background: var(--c-dark); color: var(--c-dark-ink); display: flex; flex-direction: column; padding: 20rem var(--wr) 40rem;
  transform: translateY(-100%); transition: transform .6s var(--ease); visibility: hidden; }
.popnav.open { transform: none; visibility: visible; }
.popnav { padding-top: calc(20rem + env(safe-area-inset-top)); padding-bottom: calc(40rem + env(safe-area-inset-bottom)); overflow-y: auto; }
.popnav-top { display: flex; justify-content: space-between; align-items: center; height: var(--hdr); }
.popnav-top .logo-text { font: 400 28rem/1 var(--f-display); text-transform: uppercase; white-space: pre-line; }
.popnav-top .menu-btn { display: block; }
.popnav-mark { height: 46rem; width: auto; }
.popnav ul { list-style: none; margin: auto 0; padding: 0; display: flex; flex-direction: column; gap: 14rem; }
.popnav ul a { font: 400 46rem/1.1 var(--f-display); text-transform: uppercase; text-decoration: none; }
.popnav .btn { margin-top: 30rem; }

/* ── 2. Hero: 1 màn hình — ảnh slide chuyển mờ + video nền đè lên khi tải xong ── */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; background: var(--c-dark); color: var(--c-dark-ink); overflow: hidden; isolation: isolate; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s var(--ease); }
.hero-slide.on { opacity: 1; }
.hero-slide img, .hero-slide picture, .hero-slide .ph, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.on img { animation: ws-kb 9s linear both; }   /* zoom chậm cho ảnh tĩnh có chuyển động */
@keyframes ws-kb { from { transform: scale(1.06); } to { transform: scale(1); } }
.hero-video { opacity: 0; transition: opacity .9s; }
.hero.has-video .hero-video { opacity: 1; }
.hero.has-video .hero-dots { display: none; }
/* Lớp tối để chữ luôn đọc được trên mọi ảnh/video: đậm dần xuống đáy + mép trái */
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 25%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.8) 100%),
              radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 60%); }

.hero-copy { position: relative; padding-top: calc(var(--hdr) + 40rem); padding-bottom: 130rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 34rem; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 12rem; }
.hero-logo { position: relative; margin: 0; max-width: 100%; }
/* Motion logo: (1) hiện ra từ nhỏ + mờ → nét · (2) .beat = nảy + quầng neon theo nhịp cắt cảnh video · (3) --hp khi cuộn */
.hero-logo[data-reveal] { transform: scale(.86); filter: blur(10px); transition: opacity 1s var(--ease), transform 1.3s var(--ease), filter 1s var(--ease); }
.hero-logo[data-reveal].in { transform: none; filter: none; }
.hero-logo::before { content: ""; position: absolute; z-index: -1; inset: 6% 2%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c-brand) 60%, transparent), transparent 75%); opacity: 0; transition: opacity .7s ease-out; }
.hero.beat .hero-logo::before { opacity: .6; transition-duration: .06s; }
.hero-logo img { transition: transform .6s var(--ease); }
.hero.beat .hero-logo img { transform: scale(1.035); transition-duration: .06s; }
.hero-copy { transform: translate3d(0, calc(var(--hp, 0) * 140px), 0) scale(calc(1 - var(--hp, 0) * .08)); opacity: calc(1 - var(--hp, 0) * 1.5); }
/* Logo ở giữa — co theo chiều cao màn, dùng được cả logo vuông (graffiti) lẫn logo ngang */
.hero-logo picture { display: block; }
.hero-logo img { display: block; margin: 0 auto; width: auto; height: auto; max-width: min(1100rem, 100%); max-height: min(780rem, 64vh);   /* logo vuông có khung trang trí + viền trống → cho cao hơn để chữ không bé */ filter: drop-shadow(0 10px 40px rgba(0,0,0,.6)); }
/* Ráp logo lúc mở trang (ws-logo.js): SVG mảnh chữ nằm khít đè lên ảnh. .asm = đang chờ ráp (ảnh ẩn), .run = đang ráp.
   JS không chạy được → sau 3s ảnh tự hiện lại. */
.hero-asm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; visibility: hidden; pointer-events: none; }
.hero-asm path { fill: var(--c-brand); }   /* mảnh bay màu neon cho nổi trên video tối → lóe sáng rồi thành ảnh 3D */
.hero-asm .spark { fill: none; stroke: var(--c-brand); stroke-width: 1.4; stroke-linecap: square; }
.hero-logo.asm img { opacity: 0; animation: ws-asm-safe 0s 3s forwards; }
.hero-logo.asm.run img { animation: none; }
.hero-logo.asm.run .hero-asm { visibility: visible; }
@keyframes ws-asm-safe { to { opacity: 1; } }
.hero-copy .title { font-size: 280rem; line-height: 1; }
.hero-copy .lead { opacity: .9; }
.hero-actions .btn { min-width: 420rem; }

/* Chỉ báo slide + gợi ý cuộn */
.hero-dots { position: absolute; z-index: 2; right: var(--wr); top: calc(var(--hdr) + 30rem); display: flex; gap: 6rem; }
.hero-dots i { width: 36rem; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); overflow: hidden; position: relative; }
.hero-dots i.on::after { content: ""; position: absolute; inset: 0; background: var(--c-brand); animation: ws-dot var(--hero-int, 5s) linear both; }
@keyframes ws-dot { from { transform: translateX(-100%); } to { transform: none; } }
.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 26rem; width: 26rem; height: 42rem; margin-left: -13rem; border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255,255,255,.5); }
.hero-scroll span { position: absolute; left: 50%; top: 9rem; width: 4rem; height: 8rem; margin-left: -2rem; border-radius: 4rem; background: var(--c-brand); animation: ws-scroll 1.8s ease-in-out infinite; }
@keyframes ws-scroll { 0% { opacity: 0; transform: none; } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14rem); } }
@media (prefers-reduced-motion: reduce) { .hero-slide.on img, .hero-scroll span, .hero-dots i.on::after { animation: none; } .hero-logo[data-reveal] { filter: none !important; } .hero-copy { transform: none; opacity: 1; } }

@media (max-width: 1365.98px) {
  .hero-copy { padding-top: calc(var(--hdr) + 20rem); padding-bottom: calc(90rem + env(safe-area-inset-bottom)); gap: 24rem; }
  .hero-eyebrow { font-size: 11rem; }
  .hero-logo img { max-width: 92%; max-height: min(420px, 50svh); }
  .hero-copy .title { font-size: min(84rem, 21.5vw); line-height: 1; }   /* "WORKSHOP" vừa màn 320–360px */
  .hero-copy .lead { font-size: 14rem; line-height: 1.4; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; min-width: 0; }
  .hero-dots { top: calc(var(--hdr) + 12rem); }
  .hero-dots i { width: 22rem; }
  .hero-scroll { bottom: calc(24rem + env(safe-area-inset-bottom)); }
}
/* Màn thấp (điện thoại nằm ngang, SE): bỏ đoạn mô tả để nút Giữ chỗ không bị đẩy khỏi màn đầu */
@media (max-width: 1365.98px) and (max-height: 700px) { .hero-logo img { max-height: 42svh; } .hero-copy .lead { display: none; } }

/* ── 3. Thời gian & Địa điểm (nền xanh neon) ─────────────────────────── */
.info .eyebrow { margin-bottom: 30rem; }
.info-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 50rem 100rem; align-items: end; }
.info-date { font: 400 210rem/.85 var(--f-display); letter-spacing: -.01em; white-space: nowrap; }
.info-chips { list-style: none; margin: 30rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10rem; }
.info-chips li { display: inline-flex; align-items: center; min-height: max(38px, 54rem); padding: 0 24rem; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 2px currentColor; font: 400 var(--f-b)/1 var(--f-display); text-transform: uppercase; letter-spacing: .03em; }
.info-chips li.dark { background: var(--c-dark); color: var(--c-dark-ink); box-shadow: none; }
.info-venue { margin: 0; font: 400 120rem/1 var(--f-display); text-transform: uppercase; }
.info-addr { margin: 20rem 0 0; font-size: var(--f-b); font-weight: 600; max-width: 640rem; }
.info-actions { display: flex; flex-wrap: wrap; gap: 12rem; margin-top: 36rem; }
.info-map { margin-top: 90rem; border-radius: var(--br4); overflow: hidden; background: var(--c-dark); aspect-ratio: 21 / 8; box-shadow: 0 0 0 3px var(--c-dark); }
.info-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(.35) contrast(1.05); }
/* Khung chờ trước khi tải bản đồ (lưới đường phố giả + ghim) */
.info-map-ph { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8rem; border: 0; cursor: pointer; color: var(--c-dark-ink); text-align: center; padding: 20rem;
  background: radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--c-brand) 45%, transparent) 0 14rem, transparent 15rem),
              repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 70rem), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 2px, transparent 2px 70rem), var(--c-dark); }
.info-map-ph b { font: 400 var(--f-l)/1 var(--f-display); text-transform: uppercase; font-size: 40rem; }
.info-map-ph span { font-size: var(--f-d); opacity: .8; }
.info-map-ph i { font-style: normal; margin-top: 10rem; padding: 10rem 20rem; border-radius: var(--r-ctl); background: var(--c-brand); color: var(--c-brand-ink); font: 700 var(--f-s)/1 var(--f-body); text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 1365.98px) {
  .info .eyebrow { margin-bottom: 18rem; }
  .info-grid { grid-template-columns: 1fr; gap: 28rem; }
  .info-date { font-size: min(64rem, 17vw); }
  .info-chips { margin-top: 16rem; gap: 6rem; }
  .info-chips li { padding: 0 14rem; font-size: 15rem; }
  .info-venue { font-size: 44rem; }
  .info-addr { margin-top: 10rem; font-size: var(--f-d); }
  .info-actions { margin-top: 20rem; display: grid; grid-template-columns: 1fr 1fr; gap: 8rem; }
  .info-actions .btn { padding: 0 12rem; }
  .info-map { margin-top: 30rem; aspect-ratio: 4 / 3.4; }
}

/* ── "Crew scroll": ảnh toàn màn hình sticky — tấm sau trượt lên che tấm trước ─────── */
.stack { position: relative; background: var(--c-dark); color: var(--c-dark-ink); }
.stack-panel { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: flex-end;
  box-shadow: 0 -40rem 80rem rgba(0,0,0,.55); }
.stack-panel > picture, .stack-panel > picture > img, .stack-panel > img, .stack-panel > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack-panel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.8) 100%); pointer-events: none; }
.stack-copy { position: relative; z-index: 1; padding-bottom: 90rem; display: flex; flex-direction: column; gap: 18rem; }
.stack-copy .eyebrow { color: var(--c-brand); }
.title.stack-word { font-size: 300rem; line-height: .95; }
.stack-copy .lead { max-width: 760rem; }
@media (max-width: 1365.98px) {
  .stack-copy { padding-bottom: calc(110rem + env(safe-area-inset-bottom)); gap: 10rem; }   /* chừa chỗ nút Giữ chỗ dính đáy */
  .title.stack-word { font-size: min(110rem, 26vw); }
  .stack-copy .lead { font-size: var(--f-d); }
}

/* ── 3 & 12. Dải chạy ───────────────────────────────────────────────── */
.marquee { overflow: hidden; background: var(--c-brand); color: var(--c-brand-ink); padding: 26rem 0; }
.marquee.dark { background: var(--c-dark); color: var(--c-dark-ink); }
.marquee-track { display: flex; width: max-content; animation: ws-marquee var(--dur, 30s) linear infinite; }
.marquee-track > * { flex: none; display: flex; align-items: center; padding-right: 60rem; font: 400 var(--f-l)/1 var(--f-display); text-transform: uppercase; white-space: nowrap; }
.marquee-track > * + *::before { content: "✦"; font-size: .5em; margin-right: 60rem; }
.marquee.logos .marquee-track > *::before { content: none; }
.marquee.logos .marquee-track > * { padding-right: 100rem; }
.marquee.logos img, .marquee.logos .ph { height: 80rem; width: auto; min-height: 0; }
.marquee.logos .ph { width: 220rem; }
@keyframes ws-marquee { to { transform: translateX(-50%); } }
@media (max-width: 1365.98px) { .marquee { padding: 14rem 0; } .marquee-track > * { font-size: 32rem; padding-right: 28rem; } .marquee-track > * + *::before { margin-right: 28rem; } .marquee.logos img, .marquee.logos .ph { height: 44rem; } }

/* ── 4. Đếm ngược (đầu section Giữ chỗ) ─────────────────────────────── */
.reg-status { display: flex; flex-direction: column; align-items: flex-start; gap: 18rem; }
.cd-label { display: inline-flex; align-items: center; gap: 12rem; padding: 10rem 20rem; border-radius: var(--r-ctl); background: rgba(255,255,255,.08); font: 700 var(--f-s)/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .12em; }
.cd-label i { width: 10rem; height: 10rem; min-width: 8px; min-height: 8px; border-radius: 50%; background: var(--c-brand); }
.reg-status.open .cd-label { background: var(--c-brand); color: var(--c-brand-ink); }
.reg-status.open .cd-label i { background: var(--c-accent); animation: ws-blink 1s steps(2) infinite; }
@keyframes ws-blink { 50% { opacity: .2; } }
.cd { display: flex; align-items: flex-start; gap: 20rem; font: 400 150rem/.85 var(--f-display); font-variant-numeric: tabular-nums; color: var(--c-brand); }
.cd b { font-weight: 400; display: flex; flex-direction: column; align-items: center; min-width: 1.15em; }
.cd b::after { content: attr(data-u); font: 700 var(--f-xs)/1 var(--f-body); text-transform: uppercase; letter-spacing: .14em; margin-top: 14rem; color: var(--c-dark-ink); opacity: .7; }
.cd i { font-style: normal; opacity: .4; }
.cd-sub { font: 400 var(--f-l)/1 var(--f-display); text-transform: uppercase; font-size: 44rem; }
.cd-sub:empty { display: none; }
.auto-note { margin: 14rem 0 0; font-size: var(--f-s); opacity: .6; }
@media (max-width: 1365.98px) {
  .reg-status { gap: 12rem; }
  .cd { width: 100%; justify-content: space-between; gap: 0; font-size: 58rem; }
  .cd b::after { margin-top: 8rem; font-size: 10rem; }
  .cd-sub { font-size: 24rem; line-height: 1.05; }
}

/* ── 5 & 8. Hàng kiểu "lịch thi đấu" ────────────────────────────────── */
.rows { display: flex; flex-direction: column; gap: 8rem; }
.row { --row-bg: var(--c-soft); --row-ink: var(--c-ink);
  display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 20rem; padding: 24rem 50rem; border-radius: var(--br4); background: var(--row-bg); color: var(--row-ink); }
.row.b { --row-bg: var(--c-brand); --row-ink: var(--c-brand-ink); }
.row.c { --row-bg: var(--c-dark); --row-ink: var(--c-dark-ink); }
.section[data-tone="dark"] .row { --row-bg: rgba(255,255,255,.06); --row-ink: var(--c-dark-ink); box-shadow: inset 0 0 0 var(--sl) rgba(255,255,255,.14); }
.section[data-tone="dark"] .row.b { --row-bg: var(--c-brand); --row-ink: var(--c-brand-ink); box-shadow: none; }
.row .k { font: 400 var(--f-l)/1 var(--f-display); text-transform: uppercase; }
.row .v { font-size: var(--f-b); font-weight: 600; }
.row .v small { display: block; font-size: var(--f-s); font-weight: 400; opacity: .7; margin-top: 4rem; }
.row .e { justify-self: end; text-align: right; display: flex; gap: 6rem; flex-wrap: wrap; justify-content: flex-end; }
button.row { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; transition: box-shadow .2s, transform .2s var(--ease); }
button.row:active { transform: scale(.99); }
.section[data-tone="dark"] button.row.sel { box-shadow: inset 0 0 0 2px var(--c-dark-ink); }
.tag.mine { background: transparent; box-shadow: inset 0 0 0 2px var(--c-accent); }
.row .wcd { display: inline-block; min-width: 26ch; text-align: center; white-space: nowrap; margin-top: 10rem; padding: 6rem 12rem; border-radius: var(--r-ctl); background: rgba(255,255,255,.08); font: 400 var(--f-d)/1 var(--f-display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.row .wcd.soon { background: var(--c-brand); color: var(--c-brand-ink); }   /* < 10 phút: đổi màu, KHÔNG nhấp nháy (chớp 1s trông như lỗi) */
.tag { display: inline-block; padding: 6rem 14rem; border-radius: var(--r-ctl); font: 700 var(--f-xs)/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .08em; background: rgba(127,127,127,.2); }
.tag.open { background: var(--c-accent); color: #fff; }
.bar { height: 6rem; border-radius: 6rem; background: rgba(127,127,127,.25); overflow: hidden; margin-top: 10rem; }
.bar i { display: block; height: 100%; background: currentColor; transition: width .5s var(--ease); }
@media (max-width: 1365.98px) {
  .row { grid-template-columns: 1fr auto; padding: 16rem 18rem; gap: 6rem 12rem; }
  .row .k { font-size: 30rem; }
  .row .v { grid-column: 1 / -1; grid-row: 2; font-size: var(--f-d); }
  .row .e { grid-column: 2; grid-row: 1; }
}

/* ── 4. Đăng ký ─────────────────────────────────────────────────────── */
/* 3 bước — #reg-side[data-step] do ws-app.js đặt: bước hiện tại sáng, bước đã qua có dấu ✓ */
.reg-side { display: flex; flex-direction: column; }
.stepper { list-style: none; margin: 0 0 18rem; padding: 0; display: flex; align-items: center; gap: 12rem; }   /* chỉ báo tiến trình, không phải tab */
.stepper li { display: flex; align-items: center; gap: 10rem; font: 700 var(--f-s)/1.15 var(--f-body); white-space: nowrap; opacity: .45; transition: opacity .3s; }
.stepper li + li::before { content: ""; width: 48rem; min-width: 18px; height: 1px; background: currentColor; opacity: .6; margin-right: 2rem; }
.stepper b { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26rem; height: 26rem; min-width: 22px; min-height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 var(--sl) currentColor; font: 400 var(--f-s)/1 var(--f-display); }
[data-step="1"] .stepper [data-s="1"], [data-step="2"] .stepper [data-s="2"], [data-step="3"] .stepper li { opacity: 1; }
[data-step="1"] .stepper [data-s="1"] b, [data-step="2"] .stepper [data-s="2"] b { background: var(--c-brand); color: var(--c-brand-ink); box-shadow: none; }
[data-step="2"] .stepper [data-s="1"] { opacity: .8; }
[data-step="2"] .stepper [data-s="1"] b, [data-step="3"] .stepper [data-s="1"] b, [data-step="3"] .stepper [data-s="2"] b { font-size: 0; background: var(--c-brand); box-shadow: none; }
[data-step="2"] .stepper [data-s="1"] b::after, [data-step="3"] .stepper [data-s="1"] b::after, [data-step="3"] .stepper [data-s="2"] b::after { content: "✓"; font: 700 13px/1 var(--f-body); color: var(--c-brand-ink); }
#ticket-panel { order: 1; } #claim-panel { order: 2; } #verify-panel { order: 3; }
#claim-panel.done #b-claim, #claim-panel.done #claim-hint, #claim-panel.done #m-claim:empty { display: none; }
#claim-panel.done { padding: 4rem 0; background: transparent; box-shadow: none; color: inherit; }
.panel #b-add { height: auto; min-height: 44px; margin-top: 14rem; padding: 0; width: auto; box-shadow: none; font: 600 var(--f-s)/1.3 var(--f-body); text-transform: none; letter-spacing: 0; text-decoration: underline; text-underline-offset: 3px; opacity: .8; }   /* việc phụ: link chữ, không tranh nút chính */
.panel #b-add:hover { opacity: 1; }
#claim-panel.done .who { box-shadow: inset 0 0 0 var(--sl) rgba(255,255,255,.25); }
#claim-panel.done .who.sel { box-shadow: inset 0 0 0 2px var(--c-dark-ink); }
#claim-panel.done .btn { margin-top: 0; }
#claim-panel.done .who:has(input[hidden]) { display: none; }   /* 1 số duy nhất: tên/SĐT đã in trên vé */
.panel { background: rgba(255,255,255,.04); color: var(--c-dark-ink); box-shadow: inset 0 0 0 var(--sl) rgba(255,255,255,.12); border-radius: var(--br4); padding: 40rem; }
.panel .note:first-child { margin-top: 0; }
.panel .note:empty { display: none; }
.ts { margin-top: 20rem; min-height: 0; }
.ts:empty { margin: 0; }
.panel + .panel { margin-top: 16rem; }
.panel h3 { font: 400 var(--f-l)/1 var(--f-display); text-transform: uppercase; margin: 0 0 20rem; }
.panel .note { font-size: var(--f-s); opacity: .75; margin: 0 0 10rem; }
#m-dlv:empty { display: none; }
.field { display: block; margin-top: 22rem; }
.field > span { display: block; font-size: var(--f-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8rem; }
.field input { width: 100%; height: max(52px, 72rem); padding: 0 22rem; font-size: max(16px, var(--f-b)); border-radius: var(--r-ctl); border: var(--sl) solid rgba(255,255,255,.28); background: rgba(0,0,0,.35); color: var(--c-dark-ink); }
.field input::placeholder { color: rgba(255,255,255,.5); }
.field input:focus { outline: 2px solid var(--c-brand); outline-offset: 1px; border-color: transparent; }
.consent { display: flex; gap: 12rem; align-items: flex-start; margin-top: 22rem; font-size: var(--f-s); }
.consent input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--c-brand); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.panel .btn { margin-top: 26rem; }
.panel .btn + .btn { margin-top: 10rem; }
.msg { min-height: 1.4em; margin-top: 14rem; font-size: var(--f-s); font-weight: 600; }
.msg.err { color: var(--c-accent); } .msg.ok { color: #157a3a; }
.panel .msg:empty { min-height: 0; margin: 0; }   /* ô báo lỗi rỗng không để khoảng trống dưới nút */
.who { display: flex; gap: 12rem; align-items: center; padding: 16rem 18rem; border-radius: var(--r-ctl); box-shadow: inset 0 0 0 var(--sl) rgba(255,255,255,.25); margin-top: 10rem; cursor: pointer; }
.who.sel { box-shadow: inset 0 0 0 2px var(--c-brand); }
.who input { accent-color: var(--c-brand); }
.who:has(input[hidden]) { cursor: default; box-shadow: none; padding: 0; margin: 0 0 6rem; }
.field input.otp { letter-spacing: .5em; text-align: center; font-family: var(--f-display); font-size: 28px; }
.ticket { text-align: center; background: var(--c-brand); color: var(--c-brand-ink); }
.ticket .code { font: 400 110rem/1 var(--f-display); letter-spacing: .04em; margin: 10rem 0; }
.ticket .zone { font: 400 var(--f-l)/1 var(--f-display); text-transform: uppercase; }
.ticket .qr { display: inline-block; background: #fff; padding: 18rem; border-radius: var(--br3); margin: 26rem 0; }
.ticket .qr svg { width: 220px; height: 220px; }
.ticket .anchor { display: block; position: relative; top: calc(-1 * var(--hdr) - 20px); }
.ticket #b-save { margin-top: 12rem; }
.ticket #b-route { --b-ink: var(--c-brand); }   /* thẻ vé nền neon → nút chính nền đen chữ neon cho nổi */
.ticket > .note:last-child { margin-top: 16rem; }
.t-mail { margin-top: 22rem; padding-top: 18rem; border-top: 1px solid rgba(0,0,0,.18); text-align: left; }
.t-mail label { display: block; font-size: var(--f-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8rem; }
.t-mail > div { display: flex; gap: 8rem; }
.t-mail input { flex: 1; min-width: 0; height: max(48px, 64rem); padding: 0 16rem; font-size: max(16px, var(--f-d)); border-radius: var(--r-ctl); border: var(--sl) solid rgba(0,0,0,.35); background: #fff; color: #111; }
.t-mail input:focus { outline: 2px solid #111; outline-offset: 1px; }
.t-mail > div { align-items: stretch; }
.t-mail .btn { flex: none; width: auto; height: auto; min-height: 0; margin: 0; padding: 0 22rem; --b-ink: var(--c-brand); }
.t-mail .note { margin: 8rem 0 0; min-height: 1em; }
@media (max-width: 1365.98px) {
  .stepper { gap: 10rem; margin-bottom: 14rem; }
  .stepper li { gap: 8rem; font-size: 13rem; }
  .panel { padding: 22rem 18rem; }
  .panel h3 { font-size: 36rem; }
  .ticket .code { font-size: 52rem; }
  .ticket .zone { font-size: 30rem; }
  .ticket .qr svg { width: 200px; height: 200px; }
}

/* ── 5. WORKSHOP — carousel diễn giả 3 tấm ──────────────────────────────
   Tấm .on ở giữa; 2 tấm bên cạnh thu nhỏ + mờ, lộ một phần ở 2 mép. Ảnh = poster dọc 1600×2040 có sẵn chữ → không đè chữ.
   Desktop: poster trái (rộng --pw) + bảng thông tin phải. Mobile: poster trên + thông tin dưới.
   Lề trong của dải = (khung - --cw)/2 → tấm đầu và tấm cuối cũng nằm giữa được. */
.spk-head { align-items: flex-start; text-align: left; }
.spk-head .lead { max-width: 60ch; }
.spk-stage { --cw: 1120rem; --h: 680rem; --pw: calc(var(--h) * .784); position: relative; }
.spk-list { display: flex; gap: 40rem; margin: 0 calc(-1 * var(--wr)); padding: 10rem calc((100% - var(--cw)) / 2 + var(--wr));
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; -webkit-user-select: none; user-select: none; }
.spk-list::-webkit-scrollbar { display: none; }
.spk-list.dragging { cursor: grabbing; scroll-snap-type: none; } .spk-list.dragging .spk { pointer-events: none; }
.spk { position: relative; flex: 0 0 var(--cw); height: var(--h); display: flex; overflow: hidden; border-radius: var(--br4); background: var(--c-dark); color: var(--c-dark-ink);
  scroll-snap-align: center; outline: none; cursor: pointer; transform: scale(.84); opacity: .4; transition: transform .6s var(--ease), opacity .6s; }
.spk.on { transform: none; opacity: 1; cursor: inherit; }
.spk:focus-visible { box-shadow: inset 0 0 0 3px var(--c-brand); }
.spk-media { flex: 0 0 var(--pw); height: 100%; }
.spk-media img, .spk-media .ph { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) brightness(.7); transition: filter .6s var(--ease); }
.spk.on .spk-media img, .spk.on .spk-media .ph { filter: none; }
.spk-body { position: relative; flex: 1; min-width: 0; padding: 56rem 60rem; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  background: radial-gradient(120% 70% at 100% 0, rgba(142,254,59,.12), transparent 60%), var(--c-dark); }
.spk-body::before { content: ""; position: absolute; top: 56rem; left: 60rem; width: 64rem; height: 4px; background: var(--c-brand); }
.spk-body::after { content: attr(data-n); position: absolute; top: 36rem; right: 52rem; font: 400 260rem/1 var(--f-display); color: transparent; -webkit-text-stroke: 2px rgba(142,254,59,.45); pointer-events: none; }
.spk-role { font: 700 var(--f-xs)/1.2 var(--f-body); text-transform: uppercase; letter-spacing: .14em; color: var(--c-brand); }
.spk h3 { margin: 14rem 0 0; font: 400 120rem/.95 var(--f-display); text-transform: uppercase; }
.spk-from { margin: 14rem 0 0; font-size: var(--f-d); font-weight: 600; opacity: .75; }
.spk-topic { margin: 30rem 0 0; padding-left: 16rem; border-left: 4px solid var(--c-brand); font: 400 40rem/1.05 var(--f-display); text-transform: uppercase; }
.spk-topic small { display: block; margin-bottom: 6rem; font: 700 var(--f-xs)/1 var(--f-body); letter-spacing: .1em; opacity: .7; }
.spk-bio { margin: 18rem 0 0; font-size: var(--f-d); line-height: 1.5; max-width: 52ch; opacity: .9; }
.spk-links { display: flex; flex-wrap: wrap; gap: 6rem 22rem; margin: 14rem 0 0; font: 700 var(--f-xs)/1 var(--f-body); text-transform: uppercase; letter-spacing: .08em; }
.spk-links a { display: inline-flex; align-items: center; min-height: 40px; color: var(--c-brand); }
/* Chưa công bố: tên bị "che" bằng vạch sọc + vệt neon quét qua */
.spk-redact { display: flex; flex-direction: column; gap: 14rem; width: 100%; }
.spk-redact .rd { position: relative; display: block; width: 92%; height: .62em; overflow: hidden; border-left: 6rem solid var(--c-brand);
  background: repeating-linear-gradient(-45deg, #1c1c1c 0 14rem, #262626 14rem 28rem); }
.spk-redact .rd.short { width: 56%; }
.spk-redact .rd::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(142,254,59,.35), transparent);
  animation: ws-scan 2.8s var(--ease) infinite; }
.spk-redact .rd.short::after { animation-delay: .25s; }
.spk-redact em { margin-top: 6rem; font: 400 56rem/1 var(--f-display); font-style: normal; text-transform: uppercase; color: var(--c-brand); }
@keyframes ws-scan { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }
/* Nút ‹ › nằm sát mép tấm giữa (desktop) */
.spk-nav { position: absolute; z-index: 3; top: 50%; width: max(44px, 64rem); height: max(44px, 64rem); display: grid; place-items: center; padding: 0 0 .12em; border: 0; border-radius: var(--r-ctl);
  background: var(--c-brand); color: var(--c-brand-ink); font: 400 max(28px, 44rem)/1 var(--f-display); cursor: pointer; transform: translateY(-50%); transition: opacity .3s, transform .3s var(--ease); }
.spk-nav.prev { left: calc((100% - var(--cw)) / 2 - max(22px, 32rem)); }
.spk-nav.next { right: calc((100% - var(--cw)) / 2 - max(22px, 32rem)); }
.spk-nav:hover { transform: translateY(-50%) scale(1.08); }
.spk-nav[disabled] { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .spk, .spk-media img { transition: none !important; }
  .spk-redact .rd::after { animation: none; }
}
@media (max-width: 1365.98px) {
  .spk-stage { --cw: min(74vw, 420px); }
  .spk-list { gap: 10px; padding-top: 4px; padding-bottom: 4px; }
  .spk { flex-direction: column; height: auto; transform: scale(.9); }
  .spk-media { flex: none; width: 100%; height: auto; aspect-ratio: 1600 / 2040; }
  .spk-body { flex: 1; padding: 16rem 16rem 18rem; justify-content: flex-start; }
  .spk-body::before, .spk-body::after { display: none; }
  .spk h3 { margin-top: 6rem; font-size: 38rem; }
  .spk-redact { gap: 7rem; } .spk-redact .rd { height: .42em; border-left-width: 4rem; }
  .spk-redact em { margin-top: 4rem; font-size: 24rem; }
  .spk-from { margin-top: 6rem; font-size: 13rem; }
  .spk-topic { font-size: 21rem; margin-top: 14rem; padding-left: 10rem; border-left-width: 3px; }
  .spk-bio { font-size: 14rem; margin-top: 8rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .spk-links { margin-top: 4rem; }
  .spk-nav { display: none; }
}
/* Thanh chấm dưới dải (ws-motion.js tạo, bấm = tới tấm đó) */
.spk-dots { display: flex; justify-content: center; gap: 6px; margin-top: 24rem; }
.spk-dots button { width: 18px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: currentColor; opacity: .2; cursor: pointer; transition: width .4s var(--ease), opacity .3s; position: relative; }
.spk-dots button::before { content: ""; position: absolute; inset: -12px -4px; }   /* vùng chạm 28px+ */
.spk-dots button[aria-current="true"] { width: 36px; opacity: 1; background: var(--c-ink); }

/* ── 11. Dải ảnh vuốt ngang ─────────────────────────────────────────── */
.hscroll { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--wr); padding: 0 var(--wr) 10rem; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { flex: 0 0 560rem; scroll-snap-align: start; }
.hscroll figure { margin: 0; }
.hscroll figcaption { margin-top: 14rem; font: 400 var(--f-b)/1 var(--f-display); text-transform: uppercase; }
/* Nhìn lại: poster giữ nguyên tỉ lệ (--ar = rộng/cao) — mọi tấm cùng chiều cao --rh, không cắt chữ */
.recap { --rh: 620rem; }
.recap .hscroll > figure { flex-basis: calc(var(--rh) * var(--ar, .8)); }
@media (max-width: 1365.98px) { .hscroll > * { flex-basis: 78%; } .recap { --rh: min(104vw, 560px); } }

/* ── 5. Sơ đồ chỗ ngồi (trong section Giữ chỗ) ─────────────────────── */
.reg-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30rem 80rem; align-items: end; margin-bottom: 60rem; }
.reg-head .lead { margin-top: 22rem; max-width: 58ch; font-size: var(--f-d); opacity: .8; }
.reg-head .reg-status { align-items: flex-end; text-align: right; }

.reg-grid { display: grid; grid-template-columns: 1fr 680rem; grid-template-areas: "map side" "extra side"; gap: 24rem 60rem; align-items: start; }
.seat-card { grid-area: map; } .reg-side { grid-area: side; position: sticky; top: calc(var(--hdr) + 20rem); } .seat-extra { grid-area: extra; }
.seat-card { border-radius: var(--br4); background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 var(--sl) rgba(255,255,255,.1); padding: 36rem; }
.legend { display: flex; flex-wrap: wrap; gap: 10rem 26rem; font-size: var(--f-s); font-weight: 600; margin-bottom: 24rem; }
.legend span { display: inline-flex; align-items: center; gap: 8rem; }
.legend i { width: 18rem; height: 18rem; min-width: 12px; min-height: 12px; border-radius: 4rem; }
.lg-open { background: var(--c-brand); box-shadow: 0 0 0 3rem color-mix(in srgb, var(--c-brand) 35%, transparent); }
.lg-up { box-shadow: inset 0 0 0 2px var(--c-brand); background: color-mix(in srgb, var(--c-brand) 12%, transparent); }
.lg-sold { background: rgba(255,255,255,.08); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 2px, transparent 2px 5px); }
.lg-mine { background: transparent; box-shadow: inset 0 0 0 3px var(--c-accent); }
.lg-vip { background: #C9A227; }

.venue-map { position: relative; border-radius: var(--br3); overflow: hidden; }
.venue-map svg { display: block; width: 100%; height: auto; }
.venue-map [data-zone] { cursor: pointer; transition: opacity .4s; }
/* Màu khu: ghi đè cả fill của SVG designer (trừ chữ) — CSS thắng thuộc tính trình bày của SVG */
.venue-map [data-zone], .venue-map [data-zone] *:not(text):not(tspan) { fill: rgba(255,255,255,.07) !important; stroke: rgba(255,255,255,.3) !important; stroke-width: 2px; transition: fill .4s, stroke .4s, opacity .4s; }
.venue-map g[id^="zone-"]:not([data-zone]) > *:not(text) { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.3); stroke-width: 2px; }   /* khu có trên sơ đồ nhưng chưa khai báo ở admin: xám, không thành khối đen */
.venue-map .z-upcoming, .venue-map .z-upcoming *:not(text):not(tspan) { fill: color-mix(in srgb, var(--c-brand) 14%, transparent) !important; stroke: var(--c-brand) !important; stroke-dasharray: 8 6; }
.venue-map .z-open, .venue-map .z-open *:not(text):not(tspan) { fill: var(--c-brand) !important; stroke: var(--c-brand) !important; }
.venue-map .z-open { animation: ws-zone 1.6s ease-in-out infinite; }
.venue-map .z-soldout, .venue-map .z-closed { opacity: .35; }
.venue-map .z-mine, .venue-map .z-mine *:not(text):not(tspan) { stroke: var(--c-accent) !important; stroke-width: 6px; stroke-dasharray: none; }
.venue-map .z-sel, .venue-map .z-sel *:not(text):not(tspan) { stroke: var(--c-dark-ink) !important; stroke-width: 4px; }
.venue-map .z-open text, .venue-map .z-open tspan { fill: var(--c-brand-ink) !important; }
.venue-map text { fill: var(--c-dark-ink); font-family: var(--f-display); text-anchor: middle; dominant-baseline: middle; pointer-events: none; stroke: none !important; }
.venue-map .stage { fill: rgba(255,255,255,.16); }
/* Khu vé mời (VIP) + các phòng/cửa vẽ trang trí trong SVG (không phải khu) */
.venue-map .z-vip, .venue-map .z-vip *:not(text):not(tspan) { fill: rgba(201,162,39,.85) !important; stroke: #C9A227 !important; stroke-dasharray: none; cursor: default; }
.venue-map .z-vip text { fill: #111 !important; }
/* Sơ đồ có MÀU RIÊNG từng khu (SVG khai báo --zc trên <g> khu, --zt = màu chữ khi khu sáng):
   trạng thái thể hiện bằng ĐỘ SÁNG, không viền gạch — sắp mở = màu khu nhạt · đang mở = màu khu đậm + sáng nhịp ·
   hết vé/đóng = xám · vé của bạn = viền trắng dày · đang chọn = viền trắng mảnh. Sơ đồ không có --zc giữ kiểu neon ở trên. */
.venue-map [data-zone][style*="--zc"], .venue-map [data-zone][style*="--zc"] *:not(text):not(tspan) { fill: color-mix(in srgb, var(--zc) 34%, #161616) !important; stroke: none !important; stroke-dasharray: none !important; }
.venue-map [data-zone][style*="--zc"] text { fill: rgba(255,255,255,.88) !important; }
.venue-map [data-zone][style*="--zc"].z-open, .venue-map [data-zone][style*="--zc"].z-open *:not(text):not(tspan),
.venue-map [data-zone][style*="--zc"].z-vip, .venue-map [data-zone][style*="--zc"].z-vip *:not(text):not(tspan) { fill: var(--zc) !important; }
.venue-map [data-zone][style*="--zc"].z-open text { fill: var(--zt) !important; }
.venue-map [data-zone][style*="--zc"].z-soldout, .venue-map [data-zone][style*="--zc"].z-soldout *:not(text):not(tspan),
.venue-map [data-zone][style*="--zc"].z-closed, .venue-map [data-zone][style*="--zc"].z-closed *:not(text):not(tspan) { fill: #2a2a2a !important; }
.venue-map [data-zone][style*="--zc"].z-mine, .venue-map [data-zone][style*="--zc"].z-mine *:not(text):not(tspan) { fill: var(--zc) !important; stroke: #fff !important; stroke-width: 5px; paint-order: stroke; }
.venue-map [data-zone][style*="--zc"].z-mine text { fill: var(--zt) !important; }
.venue-map [data-zone][style*="--zc"].z-sel *:not(text):not(tspan) { stroke: #fff !important; stroke-width: 3px; }
/* Ghế khách mời: vé mời không mở bán → luôn vàng đậm, tách bạch với Khu A ngay sát */
.venue-map #zone-vip[style*="--zc"], .venue-map #zone-vip[style*="--zc"] *:not(text):not(tspan) { fill: var(--zc) !important; }
.venue-map #zone-vip[style*="--zc"] { opacity: 1 !important; animation: none; }   /* đợt vé mời "đã đóng" cũng không làm mờ */
/* Khu đang mở: sáng nhịp nhẹ (nhịp mạnh làm khu lúc mờ lúc rõ, dễ nhầm với "sắp mở") */
.venue-map [data-zone][style*="--zc"].z-open { animation-name: ws-zone-soft; }
@keyframes ws-zone-soft { 50% { opacity: .8; } }
/* Chú thích theo kiểu sơ đồ màu (chỉ khi sơ đồ có --zc): sáng/nhạt cùng 1 màu mẫu, viền trắng = vé của bạn */
.seat-card:has([style*="--zc"]) .lg-open { background: #c23a55; box-shadow: none; }
.seat-card:has([style*="--zc"]) .lg-up { background: color-mix(in srgb, #c23a55 34%, #161616); box-shadow: none; }
.seat-card:has([style*="--zc"]) .lg-mine { background: #c23a55; box-shadow: inset 0 0 0 3px #fff; }
.seat-card:has([style*="--zc"]) .lg-vip { background: #e3b341; }
.venue-map .room { fill: rgba(255,255,255,.035); stroke: rgba(255,255,255,.22); stroke-width: 2px; }
.venue-map .room.ghost { fill: none; stroke-dasharray: 10 8; }
.venue-map .door { fill: var(--c-brand); opacity: .85; }
@keyframes ws-zone { 50% { opacity: .62; } }
@media (prefers-reduced-motion: reduce) { .venue-map .z-open { animation: none; } }

.seat-extra .row { padding: 18rem 26rem; }
.seat-extra .row .k { font-size: 34rem; }
.row.b .tag.open { background: var(--c-brand-ink); color: var(--c-brand); }
.seat-form { display: flex; gap: 10rem; margin-top: 30rem; }
.seat-form input { flex: 1; min-width: 0; height: max(52px, 72rem); padding: 0 22rem; border-radius: var(--r-ctl); border: var(--sl) solid rgba(255,255,255,.35); background: transparent; font-size: max(16px, var(--f-d)); }
.seat-form input:focus { outline: none; border-color: var(--c-dark-ink); }
.section[data-tone="dark"] .msg.ok { color: var(--c-brand); }
@media (max-width: 1365.98px) {
  .reg-head { grid-template-columns: 1fr; gap: 20rem; margin-bottom: 24rem; }
  .reg-head .lead { margin-top: 12rem; }
  .reg-head .reg-status { align-items: flex-start; text-align: left; }
  .reg-grid { grid-template-columns: 1fr; grid-template-areas: "side" "map" "extra"; gap: 16rem; }
  .reg-side { position: static; }
  .seat-card { padding: 12rem; margin: 0 -6rem; }
  .legend { gap: 6rem 14rem; font-size: 12rem; margin-bottom: 10rem; }
  .legend i { width: 12px; height: 12px; min-width: 12px; min-height: 12px; }
  .seat-extra .row .k { font-size: 26rem; }
  .seat-extra .row { padding: 14rem 16rem; }
  .seat-form .btn { padding: 0 20rem; }
  .field input, .seat-form input { height: 52px; }   /* 72rem = 72px trên điện thoại: quá cao */
  .field input.otp { font-size: 24px; }
}

/* ── 13. FAQ ────────────────────────────────────────────────────────── */
.faq { max-width: 1200rem; margin: 0 auto; }
.faq details { border-top: var(--sl) solid rgba(127,127,127,.35); }
.faq details:last-child { border-bottom: var(--sl) solid rgba(127,127,127,.35); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20rem; padding: 30rem 0; font: 400 var(--f-l)/1 var(--f-display); text-transform: uppercase; font-size: 48rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 30rem; font-size: var(--f-b); max-width: 900rem; }
@media (max-width: 1365.98px) { .faq summary { font-size: 22rem; padding: 18rem 0; } .faq details p { margin-bottom: 18rem; } }

/* ── 14. Footer ─────────────────────────────────────────────────────── */
.footer { background: var(--c-brand); color: var(--c-brand-ink); padding: 110rem 0 30rem; }
.footer a { text-decoration: none; }
.foot-cta { display: flex; justify-content: space-between; align-items: flex-end; gap: 30rem 60rem; flex-wrap: wrap; padding-bottom: 60rem; border-bottom: 2px solid var(--c-brand-ink); }
.foot-date { font: 400 150rem/.95 var(--f-display); margin-top: 12rem; letter-spacing: -.01em; }
.foot-date small { display: block; margin-top: 14rem; font: 700 var(--f-b)/1.2 var(--f-body); letter-spacing: 0; }
.foot-cta .btn { min-width: 380rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr .8fr 1fr; gap: 50rem 60rem; padding: 70rem 0; }
.footer-mark { margin: 0; } .footer-mark img { display: block; width: min(620rem, 100%); height: auto; }
.foot-col h3 { margin: 0 0 18rem; font: 700 var(--f-xs)/1 var(--f-body); text-transform: uppercase; letter-spacing: .14em; opacity: .65; }
.foot-col p { margin: 0 0 14rem; font-size: var(--f-d); line-height: 1.5; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12rem; font-size: var(--f-d); font-weight: 600; }
.foot-col ul a:hover, .foot-link:hover { text-decoration: underline; }
.foot-link { display: inline-block; font-weight: 700; font-size: var(--f-d); border-bottom: 2px solid; padding-bottom: 2px; }
.foot-social { display: flex; gap: 10rem; flex-wrap: wrap; }
.foot-social a { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--r-ctl); background: var(--c-brand-ink); color: var(--c-brand); transition: transform .2s; }
.foot-social a:hover { transform: translateY(-2px); }
.foot-social svg { width: 22px; height: 22px; }
.foot-hotline { display: inline-flex; flex-direction: column; margin-top: 20rem; font: 400 44rem/1 var(--f-display); }
.foot-hotline span { font: 700 var(--f-xs)/1 var(--f-body); text-transform: uppercase; letter-spacing: .14em; opacity: .65; margin-bottom: 6rem; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 14rem 30rem; flex-wrap: wrap; padding-top: 24rem; border-top: 1px solid color-mix(in srgb, var(--c-brand-ink) 35%, transparent); font-size: var(--f-xs); }
.foot-policy { flex: 1; min-width: 240px; opacity: .75; }
.footer .logo-mark { height: 64rem; width: auto; }
@media (max-width: 1365.98px) {
  .footer { padding: 50rem 0 calc(100rem + env(safe-area-inset-bottom)); }
  .foot-cta { padding-bottom: 30rem; }
  .foot-date { font-size: min(64rem, 17vw); }
  .foot-date small { font-size: 14rem; margin-top: 8rem; }
  .foot-cta .btn { width: 100%; min-width: 0; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 34rem 20rem; padding: 36rem 0; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col:last-child { grid-column: 1 / -1; }
  .foot-hotline { font-size: 34rem; }
  .footer .logo-mark { height: 44rem; }
}

/* ── Nút Giữ chỗ dính đáy (mobile) ──────────────────────────────────── */
.sticky-cta { display: none; }
@media (max-width: 1365.98px) {
  .sticky-cta { display: block; position: fixed; z-index: 90; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
    transform: translateY(150%); transition: transform .5s var(--ease); }
  .sticky-cta.on { transform: none; }
  .sticky-cta .btn { width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
  body[data-hdr="brand"] .sticky-cta .btn { --b-bg: var(--c-dark); --b-ink: var(--c-brand); }   /* trên nền neon: nút đen cho nổi */
  .sticky-cta:has(.btn.blade) { filter: drop-shadow(0 8px 20px rgba(0,0,0,.3)); }
  .sticky-cta .btn.blade { box-shadow: none; }
  .sticky-cta .btn.pulse { animation: ws-pulse 1.4s ease-in-out infinite; }
  .sticky-cta.mine { left: auto; filter: none; }
  .sticky-cta.mine .btn { width: auto; height: 44px; padding: 0 16px; clip-path: none; -webkit-mask: none; mask: none; background-image: none; border-radius: var(--r-ctl);
    --b-bg: var(--c-dark); --b-ink: var(--c-brand); box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.35); font-size: 15px; }
  .sticky-cta.mine .btn::after { display: none; }
  body[data-hdr="brand"] .sticky-cta.mine .btn { box-shadow: 0 8px 24px rgba(0,0,0,.35); }
  .sticky-cta.on.tuck { transform: translateY(150%); }
}
@keyframes ws-pulse { 50% { transform: scale(1.03); } }

/* Dải ảnh vuốt ngang: kéo bằng chuột (ws-motion.js) */
.hscroll { cursor: grab; } .hscroll.dragging { cursor: grabbing; scroll-snap-type: none; } .hscroll.dragging * { pointer-events: none; }

/* Ảnh vé trên iPhone trong Zalo/Facebook (không có bảng chia sẻ): nhấn giữ ảnh → Lưu vào Ảnh */
.tk-img { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); background: rgba(0,0,0,.92); color: #fff; text-align: center; }
.tk-img img { max-width: 100%; max-height: 70svh; border-radius: 8px; -webkit-touch-callout: default; }
.tk-img p { font-size: 16px; max-width: 32ch; }