/* Derby Registration Form — extends brand tokens from index.html */

:root {
  --pink-500: #EC008C;
  --pink-600: #C20074;
  --pink-100: #FCE8F2;
  --pink-50:  #FFF5FB;
  --black:    #0A0A0A;
  --gray-900: #141414;
  --gray-800: #1A1A1A;
  --gray-700: #262626;
  --gray-500: #6B7280;
  --gray-400: #9CA3AF;
  --gray-300: #D1D5DB;
  --gray-200: #E5E7EB;
  --gray-100: #F3F4F6;
  --gray-50:  #FAFAFA;
  --white:    #FFFFFF;
  --error:    #C20074;
  --success:  #047857;
  --font-display: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Be Vietnam Pro', 'BVP Fallback', 'Helvetica Neue', Arial, sans-serif;
  --container: 760px;
  --tx-fast: 200ms cubic-bezier(.4, 0, .2, 1);
  --tx-base: 400ms cubic-bezier(.4, 0, .2, 1);
}

@font-face { font-family: 'Archivo Fallback'; src: local('Helvetica Neue Bold'), local('Arial Bold'), local('Arial'); size-adjust: 97%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'BVP Fallback'; src: local('Helvetica Neue'), local('Arial'); size-adjust: 104%; ascent-override: 90%; descent-override: 24%; line-gap-override: 0%; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--black);
  background: var(--gray-50);
}

img { max-width: 100%; display: block; }

a { color: var(--pink-500); text-decoration: none; transition: color var(--tx-fast); }
a:hover { color: var(--pink-600); text-decoration: underline; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* ========== HERO ========== */
.reg-hero {
  background: var(--black);
  color: var(--white);
  padding: 56px 20px 64px;
  text-align: center;
  border-bottom: 6px solid var(--pink-500);
}
.reg-hero__back {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-300);
  margin-bottom: 24px;
}
.reg-hero__back:hover { color: var(--pink-500); text-decoration: none; }
.reg-hero__kicker {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink-500);
  font-weight: 700;
  margin-bottom: 14px;
}
.reg-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.05;
  letter-spacing: -1px;
  text-transform: uppercase;
}
.reg-hero__sub {
  margin-top: 16px;
  color: var(--gray-300);
  font-size: 15px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.reg-hero__sub strong { color: #FFD700; font-weight: 700; }

.reg-counter-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.reg-counter-grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 420px;
}
@media (max-width: 540px) {
  .reg-counter-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* Cancellation notice banner (Hạng Mở Rộng / Thứ 7 cancelled). */
.derby-cancel-notice {
  background: #FEF2F2;
  border-top: 3px solid var(--pink-500);
  border-bottom: 1px solid #FCA5A5;
}
.derby-cancel-notice .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.derby-cancel-notice__tag {
  display: inline-block;
  background: var(--pink-500);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 4px;
}
.derby-cancel-notice__text {
  margin: 0;
  max-width: 640px;
  font-size: 14px;
  line-height: 1.55;
  color: #7F1D1D;
}
.derby-cancel-notice__text strong { color: #991B1B; }
.derby-cancel-notice__text a { font-weight: 700; text-decoration: underline; }
.reg-day-note {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-500);
}

.reg-counter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  border-left: 3px solid var(--pink-500);
  padding: 14px 18px;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--white);
  text-align: left;
}
.reg-counter--sunday { border-left-color: #FFD700; }
.reg-counter__bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.18);
  position: relative;
  overflow: hidden;
  margin-top: 4px;
}
.reg-counter__fill {
  position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--pink-500), #FFD700);
  width: 0%; transition: width var(--tx-base);
}
.reg-counter__lbl { font-size: 11px; letter-spacing: 2.5px; color: var(--gray-300); font-weight: 700; line-height: 1.35; }
.reg-counter__head {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.12);
  margin-bottom: 10px;
}
.reg-counter__total { font-size: 13px; color: var(--gray-300); font-weight: 700; letter-spacing: 1.5px; white-space: nowrap; }
.reg-counter__districts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.reg-counter__district {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(0,0,0,.25); padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.08);
}
.reg-counter__d-lbl {
  font-size: 10px; letter-spacing: 2px;
  color: var(--gray-300); font-weight: 700;
}
.reg-counter__d-num {
  font-size: 18px; line-height: 1.1; color: #fff;
}
.reg-counter__district.is-full { background: rgba(194,0,116,.22); border-color: var(--pink-500); }
.reg-counter__district.is-full .reg-counter__d-num::after {
  content: ' · Đầy';
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pink-500);
}
.reg-counter--full { background: rgba(194, 0, 116, .25); border-color: var(--pink-500); }


/* ========== FORM ========== */
.reg-form {
  max-width: var(--container);
  margin: 32px auto 64px;
  padding: 0 20px;
}
/* NOTE: the desktop -32px lift (form card overlapping the hero) was removed —
   the cancellation notice banner now sits between hero and form, so the lift
   would overlap the banner text instead of the hero. Clean top margin instead. */

.reg-section {
  background: var(--white);
  border-left: 4px solid var(--pink-500);
  padding: 32px 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(10, 10, 10, .06);
}
@media (max-width: 540px) {
  .reg-section { padding: 24px 20px; }
}
.reg-section legend {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--pink-500);
  padding: 6px 12px;
  margin-bottom: 18px;
  display: inline-block;
}
.reg-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -.3px;
  margin-bottom: 6px;
}
.reg-section__hint {
  font-size: 13px;
  color: var(--gray-500);
  margin-bottom: 22px;
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label, .field .field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-800);
  letter-spacing: .2px;
}
.field--required .field-label::after {
  content: ' *';
  color: var(--pink-500);
  font-weight: 700;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"] {
  font-family: var(--font-body);
  font-size: 16px;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  color: var(--black);
  width: 100%;
  transition: border-color var(--tx-fast), box-shadow var(--tx-fast);
}
.field input:focus {
  outline: none;
  border-color: var(--pink-500);
  box-shadow: 0 0 0 3px rgba(236, 0, 140, .12);
}
.field input.is-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(194, 0, 116, .12);
}

.field-error {
  color: var(--error);
  font-size: 12.5px;
  font-weight: 600;
}
.field-error:empty {
  display: none;
}

/* Highlight whole field block (radio group, checkbox row) when server flags it.
   Adds a subtle pink frame + light tint so the user can locate the bad item
   even if the inline message is short or missing. */
.field.is-invalid .radio-group,
.field.is-invalid .check-group {
  outline: 2px solid var(--error);
  outline-offset: 4px;
  border-radius: 12px;
  background: rgba(194, 0, 116, .03);
}
.field.is-invalid .field-label {
  color: var(--error);
}
.disclaimer.is-invalid {
  border-color: var(--error);
  background: rgba(194, 0, 116, .04);
  box-shadow: 0 0 0 3px rgba(194, 0, 116, .08);
}

/* Radio + checkbox cards (custom styled) */
.radio-group, .check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.radio-card, .check-card {
  flex: 1 1 140px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--gray-300);
  background: var(--white);
  cursor: pointer;
  font-size: 14.5px;
  transition: all var(--tx-fast);
  user-select: none;
}
.radio-card input, .check-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card__dot {
  width: 18px; height: 18px;
  border: 2px solid var(--gray-300);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  transition: border-color var(--tx-fast);
}
.radio-card__dot::after {
  content: '';
  position: absolute; inset: 3px;
  border-radius: 50%;
  background: var(--pink-500);
  opacity: 0;
  transition: opacity var(--tx-fast);
}
.radio-card input:checked ~ .radio-card__dot { border-color: var(--pink-500); }
.radio-card input:checked ~ .radio-card__dot::after { opacity: 1; }
.radio-card:has(input:checked) {
  border-color: var(--pink-500);
  background: var(--pink-50);
}

.check-card__box {
  width: 18px; height: 18px;
  border: 2px solid var(--gray-300);
  flex-shrink: 0;
  position: relative;
  transition: all var(--tx-fast);
}
.check-card__box::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 4px; height: 9px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.check-card input:checked ~ .check-card__box {
  background: var(--pink-500); border-color: var(--pink-500);
}
.check-card input:checked ~ .check-card__box::after { opacity: 1; }
.check-card:has(input:checked) {
  border-color: var(--pink-500); background: var(--pink-50);
}

.radio-card:hover, .check-card:hover {
  border-color: var(--pink-500);
}

/* Disabled state — used when category is auto-locked by p1+p2 gender combination. */
.radio-card--disabled,
.radio-card[data-disabled="true"] {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
  background: var(--gray-100, #f5f5f5);
  border-color: var(--gray-300);
}
.radio-card--disabled:hover,
.radio-card[data-disabled="true"]:hover { border-color: var(--gray-300); }

.radio-card__text { flex: 1; }
.radio-card__sub { display: block; font-size: 12px; color: var(--gray-500); margin-top: 2px; }

/* Conditional section */
.reg-conditional {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px dashed var(--gray-300);
  animation: reg-slide-down var(--tx-base);
}
.reg-conditional[hidden] { display: none; }
@keyframes reg-slide-down {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Disclaimers */
.disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  margin-bottom: 10px;
  cursor: pointer;
  transition: all var(--tx-fast);
}
@media (max-width: 540px) {
  .disclaimer { padding: 12px 14px; }
  .disclaimer__text { font-size: 13.5px; line-height: 1.45; }
}
.disclaimer input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.disclaimer__box {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--gray-300);
  position: relative;
  margin-top: 2px;
  transition: all var(--tx-fast);
}
.disclaimer__box::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 11px;
  border: solid var(--white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
}
.disclaimer input:checked ~ .disclaimer__box {
  background: var(--pink-500); border-color: var(--pink-500);
}
.disclaimer input:checked ~ .disclaimer__box::after { opacity: 1; }
.disclaimer:has(input:checked) {
  border-color: var(--pink-500);
  background: var(--pink-50);
}
.disclaimer__text { flex: 1; font-size: 14px; line-height: 1.5; }
.disclaimer__text strong { color: var(--black); }
.disclaimer__text > strong:first-child { display: block; margin-bottom: 3px; }

/* Submit + global */
.reg-submit-wrap { padding: 8px 0 0; }
.reg-error-summary {
  background: #FEF2F8;
  border-left: 3px solid var(--error);
  color: #7A0046;
  padding: 14px 18px;
  font-size: 14px;
  margin-bottom: 18px;
  display: none;
}
.reg-error-summary.is-shown { display: block; }

.reg-submit {
  width: 100%;
  padding: 18px 20px;
  background: var(--pink-500);
  color: var(--white);
  border: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--tx-fast), transform var(--tx-fast);
}
.reg-submit:hover:not(:disabled) {
  background: var(--pink-600);
  transform: translateY(-1px);
}
.reg-submit:disabled {
  background: var(--gray-300);
  color: var(--gray-500);
  cursor: not-allowed;
}
.reg-submit__hint {
  text-align: center;
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 14px;
}

@media (max-width: 768px) {
  .reg-submit-wrap {
    position: sticky;
    bottom: 0;
    background: var(--gray-50);
    margin: 0 -20px;
    padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 12px);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .08);
    z-index: 10;
  }
  /* Pad form bottom so sticky submit doesn't sit on disclaimer card 5 */
  .reg-form { padding-bottom: 24px; }
}

/* Success card */
.reg-success {
  background: var(--white);
  border-top: 6px solid var(--pink-500);
  padding: 48px 32px;
  margin: 32px auto;
  max-width: 560px;
  text-align: center;
  box-shadow: 0 12px 48px rgba(0, 0, 0, .12);
}
.reg-success__kicker {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--pink-500);
  margin-bottom: 10px;
}
.reg-success__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.reg-success__code {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--pink-500);
  background: var(--pink-50);
  padding: 14px 28px;
  margin: 18px 0;
  border: 2px dashed var(--pink-500);
}
.reg-success__msg { color: var(--gray-700); font-size: 15px; line-height: 1.6; margin-bottom: 24px; }
.reg-success__cta {
  display: inline-block;
  background: var(--pink-500);
  color: var(--white);
  padding: 14px 28px;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 13px;
  transition: background var(--tx-fast);
}
.reg-success__cta:hover { background: var(--pink-600); color: var(--white); text-decoration: none; }

/* ==========================================================================
   PAYMENT SCREEN — ticket / boarding-pass aesthetic.
   Visual language matched with lookup.html (.lk-ticket*) so the user feels
   one continuous "vé thi đấu" surface from registration → payment → lookup.
   Layout: dark stub (mã + watermark + status pill) → perforated cut → light
   body (loading | pending pay-block | paid tickets | timeout) → Zalo CTA.

   IMPORTANT: All [data-payment-*] hooks are wired in register-form.js.
   This file ONLY restyles the boxes; selector names are decorative.
   The state machine still relies on:
     #reg-payment[data-payment-state] (loading|pending|processing|paid|timeout)
     [data-only="..."] descendants (hidden when current state not in list)
   ========================================================================== */

/* Local tokens — namespaced --rp-* to avoid collision with --lk-* (lookup) */
.reg-payment {
  --rp-paper:        #FAFAF7;
  --rp-radius:       16px;
  --rp-radius-sm:    10px;
  --rp-radius-pill:  999px;
  --rp-perf-r:       12px;
  --rp-warn-bg:      #FFFBEB;
  --rp-warn-border:  #F59E0B;
  --rp-warn-text:    #78350F;
  --rp-mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  background: var(--rp-paper);
  border-radius: var(--rp-radius);
  margin: 32px auto;
  max-width: 560px;
  box-shadow: 0 18px 50px -10px rgba(15, 15, 30, .14), 0 4px 12px rgba(15, 15, 30, .05);
  overflow: hidden;
  position: relative;
  background-image:
    radial-gradient(circle at 25% 20%, rgba(236, 0, 140, .03), transparent 50%),
    linear-gradient(180deg, var(--rp-paper) 0%, #FFFEFA 100%);
}
@media (max-width: 540px) {
  .reg-payment { margin: 20px auto; }
}
@media (min-width: 1024px) {
  .reg-payment {
    max-width: 660px;
    margin: 48px auto;
  }
  .reg-payment__head { padding: 32px 36px 36px; }
  .reg-payment__code { font-size: clamp(32px, 4vw, 42px); }
  .reg-payment__body { padding: 28px 32px 32px; }
  .reg-payment__zalo { margin: 4px 32px 28px; }
}

/* ========== TOP STUB (dark hero — mã đăng ký + watermark + status pill) ========== */
.reg-payment__head {
  position: relative;
  padding: 26px 28px 30px;
  background: linear-gradient(135deg, #0A0A0A 0%, #1A1A2E 60%, #2A0A1E 100%);
  color: var(--white);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px 14px;
  align-items: start;
}
@media (max-width: 540px) {
  .reg-payment__head { padding: 22px 20px 26px; }
}
/* Diagonal pink accent stripe (matches .lk-ticket__stub::after) */
.reg-payment__head::after {
  content: '';
  position: absolute;
  top: 0; right: -40%;
  width: 80%; height: 100%;
  background: linear-gradient(120deg, transparent 40%, rgba(236, 0, 140, .12) 60%, transparent 80%);
  pointer-events: none;
}
/* Paid state hides the dark stub + Zalo CTA — ticket cards stand alone. */
.reg-payment--paid .reg-payment__head,
.reg-payment--paid .reg-payment__perf,
.reg-payment--paid .reg-payment__zalo { display: none; }

.reg-payment__brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--white);
  text-transform: uppercase;
  z-index: 1;
}
.reg-payment__brand img { display: block; }

.reg-payment__badge {
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--rp-radius-pill);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  background: rgba(245, 158, 11, .22);
  color: #FCD34D;
  border: 1px solid rgba(252, 211, 77, .4);
  white-space: nowrap;
  backdrop-filter: blur(4px);
  align-self: start;
  justify-self: end;
}
.reg-payment__badge-icon { animation: rp-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes rp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

.reg-payment__code-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}
.reg-payment__code-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}
.reg-payment__code {
  display: inline-block;
  font-family: var(--rp-mono);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 38px);
  letter-spacing: 2px;
  color: var(--white);
  line-height: 1;
  margin-top: 2px;
  cursor: pointer;
  user-select: all;
  width: fit-content;
  padding: 4px 0;
  border-bottom: 2px dashed rgba(255, 255, 255, .25);
  transition: border-color var(--tx-fast), color var(--tx-fast);
}
.reg-payment__code:hover,
.reg-payment__code:focus-visible {
  border-bottom-color: var(--pink-500);
  color: #FFD1EA;
  outline: none;
}
.reg-payment__copy-hint {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  letter-spacing: .3px;
  margin-top: 4px;
}
.reg-payment__watermark {
  position: absolute;
  bottom: -22px;
  right: -10px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(70px, 18vw, 130px);
  letter-spacing: -2px;
  color: rgba(255, 255, 255, .04);
  pointer-events: none;
  user-select: none;
  line-height: 1;
  z-index: 0;
  text-transform: uppercase;
}

/* ========== PERFORATION (decorative ticket cut between stub and body) ========== */
.reg-payment__perf {
  position: relative;
  height: calc(var(--rp-perf-r) * 2);
  display: flex;
  align-items: center;
  background: var(--rp-paper);
}
.reg-payment__perf-circle {
  position: absolute;
  top: 50%;
  width: calc(var(--rp-perf-r) * 2);
  height: calc(var(--rp-perf-r) * 2);
  border-radius: 50%;
  /* Card bg ~ page bg, so we add an inset ring to suggest a cut hole. */
  background: var(--gray-50);
  transform: translateY(-50%);
  box-shadow: inset 0 1px 3px rgba(15, 15, 30, .15);
}
.reg-payment__perf-circle--l { left: calc(var(--rp-perf-r) * -1); }
.reg-payment__perf-circle--r { right: calc(var(--rp-perf-r) * -1); }
.reg-payment__perf-line {
  flex: 1;
  height: 0;
  margin: 0 calc(var(--rp-perf-r) + 6px);
  border-top: 2px dashed rgba(15, 15, 30, .15);
}

/* ========== BODY (state-driven container) ========== */
.reg-payment__body {
  padding: 22px 24px 24px;
}
@media (max-width: 540px) {
  .reg-payment__body { padding: 18px 16px 18px; }
}

/* State-driven visibility — hide elements whose data-only does NOT include current state */
[data-payment-state="loading"]    [data-only]:not([data-only*="loading"])    { display: none !important; }
[data-payment-state="pending"]    [data-only]:not([data-only*="pending"])    { display: none !important; }
[data-payment-state="processing"] [data-only]:not([data-only*="processing"]) { display: none !important; }
[data-payment-state="paid"]       [data-only]:not([data-only*="paid"])       { display: none !important; }
/* Timeout: show pay-block (so QR remains scannable) but dim the QR + show timeout notice */
[data-payment-state="timeout"] [data-only="loading"] { display: none !important; }
[data-payment-state="timeout"] [data-only="paid"]    { display: none !important; }
[data-payment-state="timeout"] .reg-pay__qr-img      { opacity: .45; filter: grayscale(.4); }

/* ========== LOADING ========== */
.reg-payment__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 36px 0;
  color: var(--gray-500);
  font-size: 14px;
}
.reg-payment__spinner {
  width: 22px; height: 22px;
  border: 3px solid var(--gray-200);
  border-top-color: var(--pink-500);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   PENDING / PROCESSING — boarding-gate pay block.
   Amber warning band + white inset card holding QR + bank dl + content row.
   Layout: stack on mobile, side-by-side QR ↔ info on >=540px.
   ========================================================================== */
.reg-pay-block {
  background: var(--rp-warn-bg);
  border: 1px solid rgba(245, 158, 11, .35);
  border-radius: var(--rp-radius-sm);
  padding: 18px;
  position: relative;
  overflow: hidden;
  color: var(--rp-warn-text);
}
.reg-pay-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(180deg, var(--rp-warn-border) 0%, #FBBF24 100%);
}
@media (max-width: 540px) {
  .reg-pay-block { padding: 16px 14px; }
}

.reg-pay-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.reg-pay-block__eyebrow {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--rp-warn-border);
  margin-bottom: 2px;
}
.reg-pay-block__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: -.2px;
  color: var(--rp-warn-text);
  margin: 0;
}
.reg-pay-block__foot {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .55);
  border-radius: var(--rp-radius-sm);
  border: 1px dashed rgba(245, 158, 11, .3);
}
.reg-pay-block__foot strong { color: var(--rp-warn-text); }

/* Countdown — both inside pay-block head AND survives state changes via [hidden] */
.reg-payment__countdown {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  background: rgba(255, 255, 255, .7);
  padding: 7px 12px;
  border-radius: var(--rp-radius-sm);
  border: 1px solid rgba(245, 158, 11, .3);
}
.reg-payment__countdown[hidden] { display: none; }
.reg-payment__countdown-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--rp-warn-text);
  opacity: .8;
}
.reg-payment__countdown-value {
  font-family: var(--rp-mono);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--rp-warn-text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.reg-payment__countdown[data-warn="true"] {
  background: rgba(255, 255, 255, .95);
  border-color: var(--pink-500);
  animation: rp-warn-flash 1.2s ease-in-out infinite;
}
.reg-payment__countdown[data-warn="true"] .reg-payment__countdown-value { color: var(--pink-500); }
@keyframes rp-warn-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(236, 0, 140, .4); }
  50%      { box-shadow: 0 0 0 6px rgba(236, 0, 140, 0); }
}

/* QR + bank info layout */
.reg-pay {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  background: var(--white);
  padding: 14px;
  border-radius: var(--rp-radius-sm);
  border: 1px solid rgba(245, 158, 11, .25);
}
@media (min-width: 540px) {
  .reg-pay {
    grid-template-columns: auto 1fr;
    gap: 20px;
    padding: 16px;
  }
}

.reg-pay__qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.reg-pay__qr-img {
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  border-radius: 8px;
  border: 1px solid var(--gray-200);
  background: var(--white);
  min-height: 180px;
  object-fit: contain;
}
.reg-pay__qr-caption {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--rp-warn-text);
  letter-spacing: .3px;
}
.reg-pay__qr-caption svg { color: var(--rp-warn-border); }

.reg-pay__info {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  min-width: 0;
}
.reg-pay__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dotted rgba(15, 15, 30, .12);
  flex-wrap: wrap;
  min-width: 0;
}
.reg-pay__row:last-child { border-bottom: 0; }
.reg-pay__row dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gray-500);
  flex-shrink: 0;
  margin: 0;
}
.reg-pay__row dd {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--black);
  text-align: right;
  min-width: 0;
}
.reg-pay__hint {
  font-size: 10px;
  font-weight: 600;
  color: var(--pink-500);
  letter-spacing: 0;
  text-transform: none;
  margin-left: 4px;
}
.reg-pay__mono {
  font-family: var(--rp-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  color: var(--black);
  word-break: break-all;
  min-width: 0;
}
.reg-pay__mono--lg {
  font-size: 15px;
  letter-spacing: 1px;
  background: var(--gray-100);
  padding: 4px 8px;
  border-radius: 4px;
  user-select: all;
}
.reg-pay__row--amount dd { align-items: baseline; gap: 4px; }
.reg-pay__amount {
  font-family: var(--rp-mono);
  font-weight: 700;
  font-size: 20px;
  color: var(--pink-500);
  letter-spacing: -.3px;
  font-variant-numeric: tabular-nums;
}
.reg-pay__amount-currency {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray-500);
  letter-spacing: 1px;
}
.reg-pay__row--content {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.reg-pay__row--content dd {
  width: 100%;
  justify-content: space-between;
}

/* [data-copy] click affordance — hover/focus shows pink underline ring */
.reg-pay [data-copy] {
  cursor: pointer;
  transition: color var(--tx-fast), background var(--tx-fast);
  border-radius: 4px;
}
.reg-pay [data-copy]:hover,
.reg-pay [data-copy]:focus-visible {
  color: var(--pink-500);
  background: var(--pink-50);
  outline: none;
}
.reg-pay__amount[data-copy]:hover,
.reg-pay__amount[data-copy]:focus-visible { color: var(--pink-600); background: transparent; }

/* Mini "Chép" pill (decorative — actual click target is the parent [data-copy] span) */
.reg-mini-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid rgba(15, 15, 30, .12);
  border-radius: 6px;
  background: var(--white);
  color: var(--gray-700);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
  pointer-events: none; /* clicks pass through to parent [data-copy] */
}
.reg-mini-copy svg { flex-shrink: 0; }
.reg-pay__row--copyable dd:hover .reg-mini-copy,
.reg-pay__row--copyable dd:focus-within .reg-mini-copy {
  background: var(--black);
  color: var(--white);
  border-color: var(--black);
}

/* Status indicator (live polling state — pulse dot + caption) */
.reg-payment__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, .55);
  border: 1px dashed rgba(245, 158, 11, .3);
  border-radius: var(--rp-radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--rp-warn-text);
}
.reg-payment__status-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--rp-warn-border);
  flex-shrink: 0;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.reg-payment__status-dot[data-dot-state="processing"] { background: var(--pink-500); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}

/* Reassurance text below the status pill — reduces "is it broken?" anxiety
   while user waits for the bank → SePay → derby-api propagation (30s-2min). */
.reg-payment__reassure {
  margin: 10px 2px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--gray-500, #6B7280);
}

/* Tickets — post-payment summary cards (1 or 2 per user) */
.reg-tickets {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 24px 0;
  text-align: left;
}
.reg-tickets:empty { display: none; }
.reg-ticket {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-left: 4px solid var(--pink-500);
  padding: 16px 18px;
  position: relative;
  transition: all var(--tx-fast);
}
.reg-ticket--paid { border-left-color: #16A34A; }
.reg-ticket--saturday .reg-ticket__badge { background: #FEF3C7; color: #92400E; }
.reg-ticket--sunday .reg-ticket__badge { background: #DBEAFE; color: #1E40AF; }
.reg-ticket__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.reg-ticket__code {
  font-size: 18px;
  font-weight: 800;
  color: var(--black);
  letter-spacing: .5px;
}
.reg-ticket__badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 4px 8px;
  background: var(--gray-100);
  color: var(--gray-700);
  white-space: nowrap;
}
.reg-ticket__rows {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  font-size: 13.5px;
  line-height: 1.5;
}
.reg-ticket__rows dt { color: var(--gray-500); font-weight: 500; }
.reg-ticket__rows dd { color: var(--black); margin: 0; font-weight: 600; }
.reg-ticket__status {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-100);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
}
.reg-ticket__status--paid { color: #16A34A; }
.reg-ticket__status--pending { color: #D97706; }

/* Saturday-locked / cross-day promotion banner — pink left strip on white card */
.reg-payment__locked {
  margin-top: 16px;
  padding: 14px 16px 14px 18px;
  background: var(--white);
  border: 1px solid rgba(15, 15, 30, .08);
  border-left: 4px solid var(--pink-500);
  border-radius: var(--rp-radius-sm);
  font-size: 13.5px;
  color: var(--gray-700);
  line-height: 1.55;
  box-shadow: 0 4px 12px rgba(15, 15, 30, .04);
}
.reg-payment__locked strong {
  display: block;
  margin-bottom: 4px;
  color: var(--black);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.1px;
}
.reg-payment__locked[hidden] { display: none; }

/* Cross-(day, category) CTA list — JS renders <button class="reg-payment__add-more-btn">.
   Restyled to match ticket aesthetic (rounded outline pink button). */
.reg-payment__add-more {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.reg-payment__add-more:empty { display: none; }
.reg-payment__add-more-btn {
  display: block;
  width: 100%;
  padding: 13px 18px;
  background: var(--white);
  color: var(--pink-500);
  border: 1.5px solid var(--pink-500);
  border-radius: var(--rp-radius-sm);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .2px;
  cursor: pointer;
  text-align: left;
  transition: background var(--tx-fast), color var(--tx-fast), transform var(--tx-fast);
  min-height: 48px;
}
.reg-payment__add-more-btn:hover:not(:disabled),
.reg-payment__add-more-btn:focus-visible:not(:disabled) {
  background: var(--pink-500);
  color: var(--white);
  transform: translateY(-1px);
  outline: none;
}
.reg-payment__add-more-btn:disabled {
  border-color: var(--gray-300);
  color: var(--gray-400);
  background: var(--gray-50);
  cursor: not-allowed;
}

/* ========== PAID state ========== */
.reg-payment__paid {
  text-align: center;
  padding: 8px 0 8px;
  animation: reg-slide-down var(--tx-base);
}
.reg-payment__paid-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  color: var(--success);
  margin-bottom: 8px;
}
.reg-payment__paid-msg {
  font-size: 14.5px;
  color: var(--gray-700);
  line-height: 1.6;
  margin-bottom: 20px;
}
.reg-payment__home-cta {
  display: inline-block;
  background: var(--success);
  color: var(--white);
  padding: 12px 24px;
  border-radius: var(--rp-radius-pill);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 12px;
  transition: opacity var(--tx-fast), transform var(--tx-fast);
}
.reg-payment__home-cta:hover {
  opacity: .9; color: var(--white); text-decoration: none; transform: translateY(-1px);
}

/* ========== TIMEOUT state — muted card with Zalo fallback hint ========== */
.reg-payment__timeout {
  background: var(--gray-100);
  border: 1px solid rgba(15, 15, 30, .08);
  border-left: 4px solid var(--gray-400);
  border-radius: var(--rp-radius-sm);
  color: var(--gray-700);
  font-size: 13.5px;
  padding: 14px 18px;
  line-height: 1.55;
  margin-top: 16px;
}
.reg-payment__timeout-title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 15px;
  color: var(--black);
  margin: 0 0 6px;
  letter-spacing: -.1px;
}

/* ========== Zalo CTA at bottom — full-width footer ========== */
.reg-payment__zalo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 24px 24px;
  padding: 14px;
  background: #0068FF;
  color: var(--white);
  border-radius: var(--rp-radius-sm);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  min-height: 48px;
  transition: opacity var(--tx-fast), transform var(--tx-fast);
}
.reg-payment__zalo svg { flex-shrink: 0; }
.reg-payment__zalo:hover,
.reg-payment__zalo:focus-visible {
  opacity: .92;
  color: var(--white);
  text-decoration: none;
  transform: translateY(-1px);
  outline: none;
}
@media (max-width: 540px) {
  .reg-payment__zalo { margin: 4px 16px 18px; }
}

/* Footer */
.reg-footer {
  text-align: center;
  padding: 32px 20px;
  font-size: 12.5px;
  color: var(--gray-500);
  border-top: 1px solid var(--gray-200);
}
.reg-footer a { color: var(--gray-700); }

/* Duplicate-dialog (409 dedup conflict). Mobile-first overlay with two CTAs.
   Fixed positioning + max-height so iOS Safari virtual keyboard never hides it. */
.dup-dialog {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.dup-dialog[hidden] { display: none; }
.dup-dialog__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.55);
}
.dup-dialog__panel {
  position: relative; max-width: 420px; width: 100%;
  background: var(--white, #fff); border-radius: 12px; padding: 24px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  animation: dup-pop .18s ease-out;
  max-height: calc(100vh - 32px); overflow-y: auto;
}
@keyframes dup-pop { from { transform: scale(.96); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.dup-dialog__title {
  font-size: 18px; font-weight: 700; margin: 0 0 8px;
  color: var(--black, #111); padding-right: 28px;
}
.dup-dialog__msg {
  font-size: 14px; line-height: 1.5; color: var(--gray-700, #444);
  margin: 0 0 20px; white-space: pre-wrap;
}
.dup-dialog__actions {
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 480px) {
  .dup-dialog__actions { flex-direction: row-reverse; }
  .dup-dialog__actions .dup-dialog__btn { flex: 1; }
}
.dup-dialog__btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 12px 16px; border-radius: 8px;
  font-size: 14px; font-weight: 600;
  min-height: 44px; /* iOS touch target */
}
.dup-dialog__btn--primary {
  background: var(--pink-500, #ec4899); color: var(--white, #fff);
}
.dup-dialog__btn--primary:active { filter: brightness(.92); }
.dup-dialog__btn--secondary {
  background: var(--gray-100, #f3f4f6); color: var(--black, #111);
  border: 1px solid var(--gray-200, #e5e7eb);
}
.dup-dialog__btn--secondary:active { background: var(--gray-200, #e5e7eb); }
.dup-dialog__close {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; line-height: 32px; text-align: center;
  background: transparent; border: 0; cursor: pointer;
  font-size: 24px; color: var(--gray-500, #6b7280);
}
.dup-dialog__close:active { color: var(--black, #111); }

/* Lock state for radio cards: when a category is already taken by this phone,
   the card visually disables itself and is non-clickable. */
.radio-card.is-locked {
  opacity: .45; pointer-events: none; position: relative;
}
.radio-card.is-locked::after {
  content: 'Đã đăng ký'; position: absolute; top: 6px; right: 8px;
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--gray-200, #e5e7eb); color: var(--gray-700, #444);
  font-weight: 600; letter-spacing: .3px;
}

/* Category closed by BTC for a given day (e.g. Đôi Nữ Hạng Mở Rộng - Thứ 7). */
.radio-card.is-closed {
  opacity: .45; pointer-events: none; position: relative;
}
.radio-card.is-closed::after {
  content: 'Đã đóng (Thứ 7)'; position: absolute; top: 6px; right: 8px;
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--gray-200, #e5e7eb); color: var(--gray-700, #444);
  font-weight: 600; letter-spacing: .3px;
}

/* Discipline reached its event-wide pair cap (e.g. Đôi Nam / Đôi Nam Nữ đủ 32 cặp). */
.radio-card.is-full {
  opacity: .45; pointer-events: none; position: relative;
}
.radio-card.is-full::after {
  content: 'Đã đủ số lượng'; position: absolute; top: 6px; right: 8px;
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: var(--gray-200, #e5e7eb); color: var(--gray-700, #444);
  font-weight: 600; letter-spacing: .3px;
}