@charset "UTF-8";

/* Google Fonts: Bai Jamjuree */
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&display=swap");

/* ==========================================
   BASE.CSS – Design Tokens + Reset + Primitives
   Project: src-main | BEM methodology
   ==========================================
   v3.0.0 | 2026-03-01 — "Gold Forward" Design System
   Premium gold-dominant theme. Không dùng màu đen
   cho highlights/buttons. Glass + gold gradient.
   
   📐 SPACING SYSTEM GUIDELINES
   ─────────────────────────────────────────
   Design System: 4px base unit spacing scale
   
   Scale:
   --space-0: 4px   | Micro gaps, tight padding
   --space-1: 8px   | Elements trong component
   --space-2: 16px  | Standard paragraph/element spacing
   --space-3: 24px  | Block/group spacing
   --space-4: 32px  | Component gaps
   --space-5: 40px  | Large component spacing
   --space-6: 48px  | Section padding (mobile)
   --space-7: 64px  | Section padding (tablet)
   --space-8: 80px  | Section padding (desktop)
   
   Responsive Strategy:
   • Desktop: space-8 for section padding
   • Tablet:  space-7 for section padding
   • Mobile:  space-6 for section padding
   
   Utilities Available:
   • Margin:  .mt-{0-8}, .mb-{0-8}, .ml-{0-4}, .mr-{0-4}, .mx-{0-4}, .my-{0-6}
   • Padding: .pt-{0-6}, .pb-{0-6}, .px-{0-4}, .py-{0-6}, .p-{0-6}
   • Gap:     .gap-{0-6} (for flexbox/grid)
   
   Best Practices:
   ✓ Use spacing utilities instead of inline styles
   ✓ Use design tokens for all spacing (never hardcode px)
   ✓ Follow hierarchy: micro → element → block → component → section
   ✗ Don't create custom spacing values outside the scale
   ✗ Don't use arbitrary pixel values in components
   ========================================== */

/* ==========  1. DESIGN TOKENS  ==========
   
   Comprehensive Color System v4.0.0
   ─────────────────────────────────────────
   Hệ thống token màu 2 chế độ (Dark / Light).
   
   Cấu trúc:
   ├── 1A. Primary Palette (Brand)
   ├── 1B. Text Colors (WCAG AA+)
   ├── 1C. On-Primary (text trên nền màu chính)
   ├── 1D. Background Palette (gradient, glow, orb)
   ├── 1E. Surface Colors (bg, card, stripe)
   ├── 1F. Glass Morphism (frosted panels)
   ├── 1G. Gold Surface Scale (5 cấp opacity)
   ├── 1H. Border Scale (neutral + gold accent)
   ├── 1I. Feedback / Semantic Colors (success, warning, error, info)
   ├── 1J. Shadows (neutral + gold glow)
   ├── 1K. Dropdown / Overlay
   ├── 1L. UI State Colors (hover, active, disabled, focus)
   ├── 1M. Component Surfaces (card, modal, tooltip, sidebar, input)
   ├── 1N. Input / Form
   └── 1O. Scroll / Progress
   
   Nguyên tắc thiết kế:
   • WCAG AA (4.5:1) cho body text, AAA (7:1) cho heading/secondary
   • Token hóa 100% — không hardcode hex/rgba trong component
   • Mở rộng brand: thêm color-brand-* vào root là tự nhất quán
   ========================================== */

:root {
  /* ── 1A. Primary Palette (Brand Colors: Midnight Gold) ──
     │  HEX        │  RGB                  │  HSL
     ├─ primary    │ #fbbf24 │ 251,191,36  │ 43°,96%,56%
     ├─ bright     │ #fde68a │ 253,230,138 │ 48°,97%,77%
     ├─ deep       │ #d97706 │ 217,119,6   │ 32°,95%,44%
     ├─ secondary  │ #818cf8 │ 129,140,248 │ 234°,90%,74%
     ├─ sec-deep   │ #7c3aed │ 124,58,237  │ 262°,83%,58%
     └─ accent     │ #60a5fa │ 96,165,250  │ 213°,94%,68%     */
  --color-primary: #fbbf24;
  --color-primary-bright: #fde68a;
  --color-primary-deep: #d97706;

  --color-secondary: #818cf8;
  --color-secondary-deep: #7c3aed;
  --color-accent: #60a5fa;

  /* ── 1B. Text Colors (WCAG AA+ trên nền #030712) ──
     │  Token           │  HEX     │  Contrast │  WCAG
     ├─ text            │ #e2e8f0  │  16.3:1   │  AAA
     ├─ text-heading    │ #ffffff  │  20.1:1   │  AAA
     ├─ text-light      │ #b0b8c8  │  10.1:1   │  AAA
     └─ text-muted      │ #8b99ab  │   6.9:1   │  AA   */
  --color-text: #e2e8f0;
  --color-text-heading: #ffffff;
  --color-text-light: #b0b8c8;
  --color-text-muted: #8b99ab;

  /* ── 1C. On-Primary (chữ trên nền gold/amber) ── */
  --color-on-primary: #1c1917;
  --color-on-primary-muted: rgba(28, 25, 23, 0.6);
  --color-on-primary-subtle: rgba(28, 25, 23, 0.5);

  /* ── 1D. Background Palette ──
     │  Token        │  Value
     ├─ bg-base      │ #030712  (near-black midnight)
     ├─ bg-top       │ #0c1445  (indigo tint)
     └─ glow-*       │ low-alpha radial overlays       */
  --bg-base: #030712;
  --bg-top: #0c1445;
  --bg-glow-indigo: rgba(99, 102, 241, 0.12);

  /* ── 1E. Surface Colors ── */
  --color-bg: #030712;
  --color-bg-soft: transparent;
  --color-bg-muted: rgba(255, 255, 255, 0.04);
  --color-bg-stripe: rgba(255, 255, 255, 0.03);

  /* ── 1F. Glass Morphism ── */
  --glass: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.08);

  /* ── 1G. Gold Surface Scale (5 cấp, nhẹ → đậm) ── */
  --surface-gold-subtle: rgba(251, 191, 36, 0.04);
  --surface-gold: rgba(251, 191, 36, 0.08);
  --surface-gold-medium: rgba(251, 191, 36, 0.1);
  --surface-gold-hover: rgba(251, 191, 36, 0.15);
  --surface-gold-strong: rgba(251, 191, 36, 0.2);

  /* ── 1H. Border Scale ── */
  --color-border: rgba(255, 255, 255, 0.08);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);

  --border-gold: rgba(251, 191, 36, 0.15);
  --border-gold-hover: rgba(251, 191, 36, 0.25);
  --border-gold-strong: rgba(251, 191, 36, 0.5);

  /* ── 1I. Feedback / Semantic Colors ──
     │  Token    │  HEX     │  RGB              │  HSL
     ├─ success  │ #4ade80  │ 74,222,128        │ 142°,71%,58%
     ├─ warning  │ #fbbf24  │ 251,191,36        │ 43°,96%,56%
     ├─ danger   │ #f87171  │ 248,113,113       │ 0°,91%,71%
     ├─ error    │ #ef4444  │ 239,68,68         │ 0°,84%,60%
     └─ info     │ #60a5fa  │ 96,165,250        │ 213°,94%,68%   */
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-danger: #f87171;
  --color-error: #ef4444;
  --color-info: #60a5fa;

  --surface-success: rgba(74, 222, 128, 0.12);
  --surface-warning: rgba(251, 191, 36, 0.12);
  --surface-info: rgba(96, 165, 250, 0.15);
  --surface-danger: rgba(248, 113, 113, 0.12);
  --surface-error: rgba(239, 68, 68, 0.12);

  /* ── 1J. Shadows ── */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 4px 16px rgba(251, 191, 36, 0.1);
  --shadow-gold-lg: 0 8px 32px rgba(251, 191, 36, 0.15);

  /* ── 1K. Dropdown / Overlay ── */
  --surface-dropdown: rgba(15, 23, 42, 0.95);
  --color-text-dropdown: var(--color-text);

  /* ── 1L. UI State Colors ──
     Dùng cho hover/active/disabled/focus trên button, link, input.
     Kết hợp với component token (1M) cho hiệu ứng nhất quán. */
  --state-hover-bg: rgba(255, 255, 255, 0.06);
  --state-active-bg: rgba(255, 255, 255, 0.1);
  --state-disabled-opacity: 0.5;
  --state-focus-ring: rgba(251, 191, 36, 0.5);
  --state-focus-width: 2px;

  /* ── 1M. Component Surfaces ──
     Token dành cho card, modal, tooltip, sidebar, navbar. */
  --surface-card: var(--glass);
  --surface-card-hover: var(--glass-hover);
  --surface-card-border: var(--glass-border);
  --surface-modal: rgba(15, 23, 42, 0.97);
  --surface-modal-border: var(--border-medium);
  --surface-tooltip: rgba(15, 23, 42, 0.95);
  --surface-tooltip-text: #e2e8f0;
  --surface-sidebar: rgba(12, 20, 69, 0.9);
  --surface-sidebar-border: var(--border-gold);
  --surface-navbar: transparent;
  --surface-navbar-scrolled: rgba(3, 7, 18, 0.85);

  /* ── 1N. Input / Form ── */
  --input-bg: var(--glass);
  --input-border: var(--glass-border);
  --input-border-hover: var(--border-medium);
  --input-border-focus: var(--color-primary);
  --input-focus-ring: rgba(251, 191, 36, 0.35);
  --input-placeholder: var(--color-text-muted);
  --input-disabled-bg: rgba(255, 255, 255, 0.02);
  --input-disabled-text: rgba(255, 255, 255, 0.3);

  /* ── 1O. Scroll / Progress ── */
  --scroll-progress-bg: var(--color-primary);
  --scrollbar-track: rgba(255, 255, 255, 0.04);
  --scrollbar-thumb: rgba(255, 255, 255, 0.12);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);

  /* ── 1P. Grid Pattern (hero/section decorative) ── */
  --grid-pattern-color: rgba(255, 255, 255, 0.02);

  /* ── 1Q. Mobile Bottom Nav ── */
  --mobile-nav-bg: linear-gradient(
    180deg,
    rgba(12, 20, 69, 0.85) 0%,
    rgba(3, 7, 18, 0.92) 100%
  );
  --mobile-nav-border: var(--border-gold);

  /* ── 1R. Mega Dropdown ── */
  --mega-dropdown-bg: linear-gradient(
    135deg,
    rgba(12, 20, 69, 0.97),
    rgba(3, 7, 18, 0.98)
  );
  --mega-dropdown-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  --mega-link-hover-bg: rgba(251, 191, 36, 0.1);

  /* ── 1S. Card / Feature Hover Effects ── */
  --shadow-card-float:
    0 20px 40px rgba(0, 0, 0, 0.2), 0 0 40px rgba(251, 191, 36, 0.05);
  --shadow-gold-xl: 0 12px 40px rgba(251, 191, 36, 0.4);
  --shadow-gold-focus: 0 8px 24px rgba(251, 191, 36, 0.35);

  /* ── 1T. Feature / Icon Surfaces ── */
  --surface-icon-gradient: linear-gradient(
    135deg,
    var(--surface-gold-medium),
    rgba(217, 119, 6, 0.05)
  );
  --surface-highlight: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.06) 0%,
    rgba(217, 119, 6, 0.03) 100%
  );
  --accent-glow: radial-gradient(
    ellipse 600px 400px at 50% 50%,
    rgba(251, 191, 36, 0.06),
    transparent
  );

  /* ── 1U. Misc Component Tokens ── */
  --border-dashed: rgba(251, 191, 36, 0.3);
  --border-ghost-hover: rgba(255, 255, 255, 0.4);
  --border-outline-hover: rgba(255, 255, 255, 0.3);
  --shadow-brand: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-divider-glow: 0 0 6px 2px rgba(251, 191, 36, 0.35);
  --step-connector-color: rgba(251, 191, 36, 0.3);
  --shimmer-highlight: #fff5d4;
  --legend-asian-color: #8b99ab;
  --badge-info-border: rgba(59, 130, 246, 0.25);

  /* ── 1V. Animation Glow / Shimmer Drop-shadow ── */
  --shimmer-shadow: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 20px rgba(251, 191, 36, 0.2));
  --gold-pulse-rest: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5))
    drop-shadow(0 0 20px rgba(251, 191, 36, 0.2));
  --gold-pulse-peak: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6))
    drop-shadow(0 0 40px rgba(251, 191, 36, 0.35))
    drop-shadow(0 0 80px rgba(251, 191, 36, 0.1));
  --pulse-glow-rest: 0 0 20px rgba(251, 191, 36, 0.3);
  --pulse-glow-peak:
    0 0 40px rgba(251, 191, 36, 0.6), 0 0 80px rgba(251, 191, 36, 0.2);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.2);
  --border-secondary: rgba(255, 255, 255, 0.2);

  /* ── Layout ── */
  --container-width: 75rem; /* 1200px */
  --container-narrow: 60rem; /* 960px */
  --mobile-nav-height: 64px; /* height of fixed mobile bottom nav */

  /* ---- Spacing Scale (4px base unit) ----
     Quy tắc sử dụng spacing:
     • Micro gap       → --space-0 (4px)   - Khoảng cách tối thiểu, padding trong inline elements
     • Trong block     → --space-1 (8px)   - Gap giữa các elements liền kề trong 1 component
     • Giữa elements   → --space-2 (16px)  - Spacing chuẩn giữa các paragraph, list items
     • Giữa blocks     → --space-3 (24px)  - Khoảng cách giữa các nhóm nội dung
     • Component gap   → --space-4 (32px)  - Gap giữa các components trong 1 section
     • Section padding → --space-6 (48px)  - Vertical padding cho sections (mobile)
     • Section padding → --space-7 (64px)  - Vertical padding cho sections (tablet)
     • Section padding → --space-8 (80px)  - Vertical padding cho sections (desktop)
     
     Best practices:
     • Ưu tiên dùng spacing utilities (.mt-2, .px-3, .gap-4) thay vì inline styles
     • Dùng .container cho max-width + horizontal padding nhất quán
     • Mobile: giảm spacing scale đi 1-2 bậc (space-8 → space-6)
     • Không hardcode px values - luôn dùng design tokens
     ----------------------------------------- */
  --space-0: 0.25rem; /* 4px */
  --space-1: 0.5rem; /* 8px */
  --space-2: 1rem; /* 16px */
  --space-3: 1.5rem; /* 24px */
  --space-4: 2rem; /* 32px */
  --space-5: 2.5rem; /* 40px */
  --space-6: 3rem; /* 48px */
  --space-7: 4rem; /* 64px */
  --space-8: 5rem; /* 80px */

  /* ---- Border Radius ---- */
  --radius-sm: 0.5rem; /* 8px */
  --radius-md: 1rem; /* 16px */
  --radius-lg: 1.5rem; /* 24px */
  --radius-xl: 2rem; /* 32px */

  /* ---- Typography ---- */
  --font-family:
    "Bai Jamjuree", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --line-height-tight: 1.25;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;

  /* ---- Motion ---- */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Z-Index Scale ---- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-header: 300;
  --z-overlay: 400;
  --z-modal: 600;
  --z-toast: 700;

  /* ---- Responsive Breakpoints ---- */
  --breakpoint-sm: 30em; /* 480px */
  --breakpoint-md: 48em; /* 768px */
  --breakpoint-lg: 64em; /* 1024px */
  --breakpoint-xl: 75em; /* 1200px */
  --breakpoint-2xl: 90em; /* 1440px */
}

/* ==========  2. MODERN RESET  ========== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%; /* 16px baseline */
  scroll-behavior: smooth;
  scroll-padding-top: 180px; /* header (72px) + faq-nav (~100px) + gap */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  overflow-x: hidden;
}

/* Mobile: Scale up base font for better readability */
@media (max-width: 768px) {
  html {
    font-size: 106.25%; /* 17px - improves mobile readability */
  }
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base); /* 1rem = 16px */
  line-height: var(--line-height-base); /* 1.6 */
  color: var(--color-text);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* ---- Body Gradient (merged from bg.css) ---- */
  background:
    radial-gradient(
      ellipse 900px 900px at 15% 20%,
      var(--bg-glow-indigo),
      transparent
    ),
    radial-gradient(
      ellipse 100% 100% at 50% 0%,
      var(--bg-top) 0%,
      var(--bg-base) 100%
    );
  background-color: var(--bg-base);
  background-attachment: fixed;
}

body > main {
  position: relative;
  flex: 1 0 auto;
}

body > #footer-include,
body > footer {
  margin-top: auto;
}

/* Media elements */
img,
picture,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Form elements inherit font */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

fieldset {
  border: none;
}

legend {
  padding: 0;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Horizontal rules */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  height: 0;
  color: inherit;
}

/* Accessible focus ring */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Dialog */
dialog {
  padding: 0;
}

/* Summary */
summary {
  display: list-item;
  cursor: pointer;
}

/* Remove default text-decoration on abbreviations */
abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* Prevent sub/sup from affecting line-height */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Preformatted text */
pre,
code,
kbd,
samp {
  font-family:
    ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 1em;
}

pre {
  overflow-x: auto;
}

/* ==========  3. TYPOGRAPHY  ========== */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--line-height-tight);
  color: var(--color-text-heading);
  letter-spacing: 0.02em;
  text-wrap: balance;
}

h1 {
  font-size: var(--font-size-5xl); /* 3rem */
  margin-top: 0;
  margin-bottom: var(--space-3); /* 24px */
}

h2 {
  font-size: var(--font-size-4xl); /* 2.25rem */
  margin-top: var(--space-6); /* 48px - section m?>i */
  margin-bottom: var(--space-2); /* 16px */
}

h3 {
  font-size: var(--font-size-3xl); /* 1.875rem */
  margin-top: var(--space-4); /* 32px - sub-section */
  margin-bottom: var(--space-2); /* 16px */
}

h4 {
  font-size: var(--font-size-2xl); /* 1.5rem */
  font-weight: 600;
  margin-top: var(--space-3); /* 24px */
  margin-bottom: var(--space-1); /* 8px */
}

h5 {
  font-size: var(--font-size-xl); /* 1.25rem */
  font-weight: 600;
  margin-top: var(--space-3); /* 24px */
  margin-bottom: var(--space-1); /* 8px */
}

h6 {
  font-size: var(--font-size-lg); /* 1.125rem */
  font-weight: 600;
  margin-top: var(--space-3); /* 24px */
  margin-bottom: var(--space-1); /* 8px */
}

/* Lo?i b? margin-top khi heading l? ph?n t? ?'?u ti?n */
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
  margin-top: 0;
}

/* Mobile heading scale-down */
@media (max-width: 768px) {
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  h3 {
    font-size: var(--font-size-xl);
  }
}

/* ---------- Block text ---------- */
p {
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2); /* 16px */
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

/* ---------- Lists ---------- */
ul,
ol {
  padding-left: var(--space-4); /* 32px ??" indent for bullets/numbers */
  margin-bottom: var(--space-2); /* 16px */
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  margin-bottom: var(--space-1); /* 8px */
  line-height: var(--line-height-relaxed);
}

li:last-child {
  margin-bottom: 0;
}

/* Nested lists */
li > ul,
li > ol {
  margin-bottom: 0;
}

/* Navigation lists ??" strip content styles for UI use */
nav ul,
nav ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

nav li {
  margin-bottom: 0;
}

/* ---------- Sectioning elements ---------- */
section,
article {
  padding-block: var(--space-6); /* 48px top & bottom */
}

aside {
  padding: var(--space-3); /* 24px */
}

/* ---------- Figure ---------- */
figure {
  margin-bottom: var(--space-3); /* 24px */
}

figcaption {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

/* ---------- Inline text ---------- */
strong,
b {
  font-weight: 700;
}

small {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

mark {
  background-color: var(--surface-gold-strong);
  color: var(--color-text);
  padding: 0.125em 0.25em;
  border-radius: 0.125rem;
}

/* ==========  4. LINKS  ========== */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent);
}

/* ==========  5. BUTTONS (BEM)  ========== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-3); /* 8px 24px */
  font-size: var(--font-size-base);
  font-weight: 600;
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  user-select: none;
  min-height: 2.75rem; /* 44px ??" touch-friendly minimum */
  text-align: center;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* -- Color Modifiers -- */
.btn--primary {
  background: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-deep)
  );
  color: var(--color-on-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
}

/* -- Hover / Active -- */
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold-lg);
}

.btn--outline:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  background: var(--surface-gold);
}

.btn--primary:active,
/* -- Size Modifiers -- */
.btn--sm {
  padding: var(--space-1) var(--space-2); /* 8px 16px */
  font-size: var(--font-size-sm);
}

/* -- Button Group: Equal Width -- */
.btn-group {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.btn-group .btn {
  flex: 1 1 0;
  min-width: 0;
}

/* Button Group: Vertical Stack (always) */
/* Mobile button full-width stacking */
@media (max-width: 48em) {
  /* 768px */
  .btn-group {
    flex-direction: column;
  }

  .btn-group .btn {
    width: 100%;
  }

  .btn {
    white-space: normal;
    word-break: break-word;
  }
}

/* ==========  6. LAYOUT (BEM)  ========== */
.container {
  max-width: var(--container-width); /* 75rem */
  margin-inline: auto;
  padding-inline: var(--space-3); /* 24px */
  width: 100%;
}

/* ==========  8. UTILITIES  ========== */

/* Margin */
.mt-4 {
  margin-top: var(--space-4);
}
.mt-auto {
  margin-top: auto;
}

/* Text */
.text-center {
  text-align: center;
}