/**
 * TFA Checkout — shared foundation (Variant 1).
 * Design tokens + layout primitives reused by checkout, cart, and the
 * QR (thank-you) page. Pure extraction from checkout.css: no values changed.
 */
:root {
  --ground: #EAF1EF; --surface: #FFFFFF; --surface-2: #F4F8F7;
  --ink: #0C201D; --muted: #566966; --faint: #889794;
  --border: #E0EAE8; --border-strong: #CBDAD7;
  --brand: #0E8C7F; --brand-ink: #0A6B61; --brand-bright: #16B9A6; --brand-wash: #E6F4F1;
  --amber: #B57912; --amber-wash: #FBF1DC; --good: #12986A;
  --shadow: 0 1px 2px rgba(12,32,29,.04), 0 8px 24px -12px rgba(12,32,29,.14);
  --shadow-lift: 0 2px 4px rgba(12,32,29,.05), 0 18px 40px -18px rgba(12,32,29,.22);
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --sans: 'League Spartan', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", monospace;
}
/* Single-theme by design: the host site (Divi) is light-only, so we do NOT
   auto-flip on prefers-color-scheme — that would leave the checkout dark inside
   an otherwise light page. Dark tokens remain available only via an explicit
   [data-theme="dark"] opt-in, should the site ever add a dark theme. */
:root[data-theme="dark"]{ --ground:#091312; --surface:#101E1C; --surface-2:#172725; --ink:#E9F1EF; --muted:#9DB0AC; --faint:#6C817D; --border:#21322F; --border-strong:#2C3F3C; --brand:#19B9A6; --brand-ink:#3FD0BE; --brand-bright:#2AD3BF; --brand-wash:#103029; --good:#34C08A;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 20px 46px -18px rgba(0,0,0,.7); }

/* Font across the whole checkout */
.tfa-v1, .tfa-v1 h1, .tfa-v1 h2, .tfa-v1 h3, .tfa-v1 h4, .tfa-v1 p, .tfa-v1 label,
.tfa-v1 span, .tfa-v1 div, .tfa-v1 a, .tfa-v1 input, .tfa-v1 select, .tfa-v1 textarea, .tfa-v1 button {
  font-family: var(--sans) !important;
}

/* ===== Steps ===== */
/* Compact + left-aligned: content-width, arrow separators (not full-width stretched lines) */
.tfa-steps { display: flex; align-items: center; justify-content: flex-start; gap: 14px; margin: 0 0 22px; flex-wrap: wrap; }
.tfa-steps .tfa-step { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 600; color: var(--faint); text-decoration: none; }
a.tfa-step.done:hover { color: var(--brand-ink); }
a.tfa-step.done:hover .num { background: var(--brand-ink); border-color: var(--brand-ink); }
.tfa-steps .tfa-step .num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--border-strong); font-size: 14px; font-family: var(--mono) !important; color: var(--faint); }
.tfa-steps .tfa-step.done { color: var(--muted); }
.tfa-steps .tfa-step.done .num { background: var(--brand); border-color: var(--brand); color: #fff; }
.tfa-steps .tfa-step.active { color: var(--ink); }
.tfa-steps .tfa-step.active .num { background: var(--brand-wash); border-color: var(--brand); color: var(--brand-ink); }
.tfa-steps .tfa-step-line { flex: none; width: auto; min-width: 0; height: auto; background: none; display: inline-flex; align-items: center; }
.tfa-steps .tfa-step-line::before { content: "\2192"; color: var(--faint); font-size: 18px; line-height: 1; }

/* ===== Grid ===== */
/* Both tracks fluid so the whole grid scales smoothly as the window resizes:
   the summary shrinks with the viewport (300–380px) instead of staying fixed
   and clipping. Collapse to one column only at real tablet width. */
.tfa-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 30px; align-items: start; }
/* Mobile: single column. Show the left column (contact + student info) first, order summary after. */
@media (max-width: 820px) { .tfa-grid { grid-template-columns: 1fr; } .tfa-summary { position: static !important; order: 0; } }
.tfa-main { min-width: 0; }

/* ===== Cards (form) ===== */
.tfa-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); overflow: hidden; }
.tfa-card + .tfa-card { margin-top: 20px; }
.tfa-card-head { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
.tfa-card-head h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.tfa-card-head p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.tfa-card-body { padding: 20px 22px 22px; }

/* ===== Summary (right) ===== */
.tfa-summary { position: sticky; top: 100px; }
@media (max-width: 820px) { .tfa-summary { position: static; } }
.tfa-sum-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); overflow: hidden; }
.tfa-sum-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.tfa-sum-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.tfa-sum-head .count { font-size: 12.5px; color: var(--muted); font-family: var(--mono) !important; }
.tfa-sum-body { padding: 18px 20px; }

/* Standard max-width container (1280px, ~Tailwind max-w-7xl): capped + centered
   on wide screens, fluid below. Keeps form fields at a readable width. */
.tfa-v1 { max-width: 1280px; width: 100%; margin: 0 auto !important; padding: 40px 48px 40px; box-sizing: border-box; }
@media (max-width: 900px) { .tfa-v1 { padding: 28px 24px 36px; } }
@media (max-width: 560px) { .tfa-v1 { padding: 24px 16px 32px; } }

/* ===== WooCommerce notices (validation group, cart/checkout messages) =====
   Soft + readable, overriding Divi's solid-green bold-white default. Same look as the
   coupon notice: error = gentle rose, success = brand wash, info = neutral. Scoped to
   our cart/checkout pages via body class. */
.woocommerce-checkout .woocommerce-error, .woocommerce-checkout .woocommerce-message, .woocommerce-checkout .woocommerce-info,
.woocommerce-cart .woocommerce-error, .woocommerce-cart .woocommerce-message, .woocommerce-cart .woocommerce-info {
  list-style: none !important; margin: 0 0 16px !important; padding: 13px 16px !important;
  border-radius: var(--r-sm) !important; border: 0 !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1.55 !important;
  text-align: left !important; text-shadow: none !important; box-shadow: none !important;
  font-family: var(--sans) !important;
}
.woocommerce-checkout .woocommerce-error li, .woocommerce-cart .woocommerce-error li { list-style: none !important; margin: 0 !important; padding: 2px 0 !important; }
.woocommerce-checkout .woocommerce-error::before, .woocommerce-checkout .woocommerce-message::before, .woocommerce-checkout .woocommerce-info::before,
.woocommerce-cart .woocommerce-error::before, .woocommerce-cart .woocommerce-message::before, .woocommerce-cart .woocommerce-info::before { display: none !important; }
.woocommerce-checkout .woocommerce-error, .woocommerce-cart .woocommerce-error {
  background: #FCEDEC !important; color: #B23B32 !important; border-left: 3px solid #D0574C !important;
}
.woocommerce-checkout .woocommerce-message, .woocommerce-cart .woocommerce-message {
  background: var(--brand-wash) !important; color: var(--brand-ink) !important; border-left: 3px solid var(--brand) !important;
}
.woocommerce-checkout .woocommerce-info, .woocommerce-cart .woocommerce-info {
  background: var(--surface-2) !important; color: var(--muted) !important; border-left: 3px solid var(--border-strong) !important;
}

/* ===== Sale price: original ("giá gốc") struck-through above the sale price ===== */
.tfa-v1 .product-price del, .tfa-v1 .product-subtotal del, .tfa-v1 .product-total del,
.tfa-v1 .product-price ins, .tfa-v1 .product-subtotal ins, .tfa-v1 .product-total ins { display: block; }
.tfa-v1 .product-price del, .tfa-v1 .product-subtotal del, .tfa-v1 .product-total del {
  font-size: 12.5px; font-weight: 500; color: var(--faint); text-decoration: line-through; line-height: 1.35;
}
.tfa-v1 .product-price ins, .tfa-v1 .product-subtotal ins, .tfa-v1 .product-total ins {
  text-decoration: none; background: transparent; color: inherit; font-weight: inherit; line-height: 1.35;
}