/* ============================================================
   ENGLISH BRIEF — Design Token CSS
   Glassmorphism · Be Vietnam Pro · Blue Gradient
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=JetBrains+Mono:wght@400;600&display=swap');

/* ─── COLOR TOKENS ────────────────────────────────────────── */
:root {

  /* Primary — Blue */
  --sky:        #38BDF8;
  --blue:       #2563EB;   /* ★ Brand primary */
  --cobalt:     #1D4ED8;
  --indigo:     #6366F1;   /* ★ Brand secondary */
  --cyan:       #22D3EE;

  /* Blue scale */
  --blue-50:    #EFF6FF;
  --blue-100:   #DBEAFE;
  --blue-200:   #BFDBFE;
  --blue-400:   #60A5FA;
  --blue-800:   #1E40AF;
  --sky-300:    #7DD3FC;
  --cyan-100:   #CFFAFE;

  /* Accents */
  --yellow:     #FACC15;
  --green:      #4ADE80;
  --orange:     #FB923C;
  --amber:      #F59E0B;
  --cream:      #FFF8EA;

  /* Surfaces */
  --bg:         #EFF6FF;   /* Page background */
  --white:      #FFFFFF;
  --dark:       #060E1C;   /* Dark sections */
  --dark-card:  #0C1E35;
  --dark-mid:   #0F2440;
  --surface:    rgba(255,255,255,0.78);
  --surface-strong: rgba(255,255,255,0.94);
  --surface-soft: #F8FBFF;
  --surface-warm: #FFF8EA;
  --border-subtle: rgba(37,99,235,0.12);
  --border-strong: rgba(37,99,235,0.20);

  /* Text — light backgrounds */
  --fg:         #060E1C;   /* headings, strong emphasis — 18.7:1 on --bg */
  --fg-body:    #1E3A5F;   /* body paragraphs — 10.8:1 on --bg */
  --fg-muted:   #3A5A90;   /* secondary labels — 5.7:1 on --bg */
  --fg-soft:    #4B6FA8;   /* tertiary decorative — 4.5:1 on white; use sparingly */

  /* Text — dark/gradient backgrounds */
  --on-dark:        rgba(255,255,255,0.96);  /* primary text on dark — 15:1 on #060E1C */
  --on-dark-muted:  rgba(255,255,255,0.82);  /* secondary text on dark — 5.2:1 min */
  --on-dark-soft:   rgba(255,255,255,0.68);  /* tertiary labels — 4.3:1 min; small text use sparingly */
  --on-dark-faint:  rgba(255,255,255,0.45);  /* purely decorative dividers / strikethrough only */

  /* Gradients */
  --grad:       linear-gradient(135deg, #38BDF8 0%, #2563EB 55%, #6366F1 100%);
  --grad-r:     linear-gradient(135deg, #6366F1 0%, #2563EB 45%, #38BDF8 100%);
  --grad-warm:  linear-gradient(135deg, #FB923C, #FACC15);
  --grad-hero:  linear-gradient(135deg,#060E1C 0%,#1D4ED8 56%,#2563EB 100%);
  --grad-page:  linear-gradient(180deg,#FFF8EA 0%,#EFF6FF 24%,#F8FBFF 55%,#EEF2FF 100%);

  /* Semantic surface tokens */
  --color-bg:            #EFF6FF;   /* page background */
  --color-bg-soft:       #F8FBFF;   /* softer section bg */
  --color-surface:       rgba(255,255,255,0.94);  /* card surface */
  --color-surface-glass: rgba(255,255,255,0.68);  /* glass card */
  --color-border:        rgba(37,99,235,0.12);    /* default border */
  --color-border-strong: rgba(37,99,235,0.22);    /* inputs, strong cards */

  /* Semantic accent tokens */
  --color-accent:        #F59E0B;   /* amber — primary accent */
  --color-accent-warm:   #FB923C;   /* orange — warm CTA */
  --color-accent-soft:   rgba(245,158,11,0.10);  /* soft accent bg */
  --color-success:       #16A34A;
  --color-success-soft:  rgba(22,163,74,0.08);
  --color-warning:       #D97706;
  --color-warning-soft:  rgba(255,251,235,0.98);
  --color-danger:        #BE123C;
  --color-danger-soft:   #FFF1F2;

  /* Learning block tokens */
  --block-example-bg:      rgba(37,99,235,0.055);
  --block-example-border:  rgba(37,99,235,0.18);
  --block-example-accent:  var(--blue);
  --block-warning-bg:      rgba(255,251,235,0.98);
  --block-warning-border:  rgba(251,146,60,0.26);
  --block-warning-accent:  #F59E0B;
  --block-tip-bg:          rgba(74,222,128,0.07);
  --block-tip-border:      rgba(74,222,128,0.28);
  --block-tip-accent:      #16A34A;
  --block-avoid-bg:        #FFF1F2;
  --block-avoid-border:    #FECDD3;
  --block-avoid-accent:    #BE123C;

  /* ─── GLASS TOKENS ──────────────────────────────────────── */
  --glass-white:        rgba(255,255,255,0.55);
  --glass-border:       rgba(255,255,255,0.50);
  --glass-dark:         rgba(6,14,28,0.55);
  --glass-dark-border:  rgba(255,255,255,0.10);
  --blur:               blur(22px) saturate(180%);
  --blur-heavy:         blur(32px) saturate(200%);

  /* ─── SHADOWS ───────────────────────────────────────────── */
  --shadow-glass:   0 8px 32px rgba(37,99,235,.15), 0 2px 8px rgba(37,99,235,.08);
  --shadow-glass-h: 0 16px 56px rgba(37,99,235,.25), 0 4px 16px rgba(37,99,235,.12);
  --shadow-blue:    0 4px 24px rgba(37,99,235,.40), inset 0 1px 0 rgba(255,255,255,.25);
  --shadow-blue-h:  0 8px 44px rgba(37,99,235,.55), inset 0 1px 0 rgba(255,255,255,.25);
  --shadow-card:    0 10px 34px rgba(37,99,235,.10), inset 0 1px 0 rgba(255,255,255,.86);
  --shadow-card-h:  0 18px 50px rgba(37,99,235,.16), inset 0 1px 0 rgba(255,255,255,.92);
  --shadow-warm:    0 10px 28px rgba(251,146,60,.20), inset 0 1px 0 rgba(255,255,255,.35);

  /* ─── BORDER RADIUS ─────────────────────────────────────── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 9999px;
  --radius-card: 20px;

  /* ─── SPACING ───────────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── TYPOGRAPHY ────────────────────────────────────────── */
  --font-display: 'Be Vietnam Pro', system-ui, sans-serif;
  --font-body:    'Be Vietnam Pro', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-display: clamp(44px, 5.5vw, 72px);
  --text-h1:      clamp(32px, 4vw, 52px);
  --text-h2:      clamp(24px, 3vw, 40px);
  --text-h3:      clamp(20px, 2.2vw, 28px);
  --text-h4:      20px;
  --text-body-xl: 20px;
  --text-body-lg: 18px;
  --text-body:    16px;
  --text-body-sm: 14px;
  --text-label:   12px;

  --leading-tight:   1.08;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;
  --leading-viet:    1.75;  /* Extra line-height for Vietnamese diacritics */

  --tracking-tight:  0em;
  --tracking-snug:   0em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-caps:    0.08em;

  /* ─── ANIMATION ─────────────────────────────────────────── */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    150ms;
  --dur-base:    250ms;
  --dur-slow:    400ms;
}

/* ─── BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--fg-body);
  background: var(--grad-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--grad-page);
}

/* ─── TYPE CLASSES ──────────────────────────────────────── */
.text-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.text-h1 {
  font-size: var(--text-h1);
  font-weight: 800;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.text-h2 {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}
.text-h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-normal);
  color: var(--fg);
}
.text-body-xl { font-size: var(--text-body-xl); line-height: var(--leading-viet); color: var(--fg-body); }
.text-body-lg { font-size: var(--text-body-lg); line-height: var(--leading-viet); color: var(--fg-body); }
.text-body    { font-size: var(--text-body);    line-height: var(--leading-viet); color: var(--fg-body); }
.text-body-sm { font-size: var(--text-body-sm); line-height: var(--leading-normal); color: var(--fg-muted); }
.text-label   { font-size: var(--text-label); font-weight: 700; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.grad-text    { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* ─── GLASS UTILITIES ───────────────────────────────────── */
.glass {
  background: rgba(255,255,255,0.55);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--shadow-glass), inset 0 1px 0 rgba(255,255,255,0.80);
  transition: transform var(--dur-base) var(--ease-smooth), box-shadow var(--dur-base) var(--ease-smooth);
}
.glass:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-glass-h), inset 0 1px 0 rgba(255,255,255,.85);
}
.glass-dark {
  background: rgba(6,14,28,0.52);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.07);
}
.glass-blue {
  background: rgba(37,99,235,0.14);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(56,189,248,0.30);
  box-shadow: 0 8px 32px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.20);
}

/* ─── BUTTON ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 15px 34px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast);
  text-decoration: none;
}
.btn:active { transform: scale(0.96) !important; }
.btn-grad {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-blue);
}
.btn-grad:hover { transform: translateY(-3px); box-shadow: var(--shadow-blue-h); }
.btn-glass {
  background: rgba(255,255,255,0.20);
  color: var(--fg);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,0.50);
  box-shadow: 0 4px 16px rgba(37,99,235,.08), inset 0 1px 0 rgba(255,255,255,.70);
}
.btn-glass:hover { transform: translateY(-3px); background: rgba(255,255,255,0.35); }
.btn-glass-dark {
  background: rgba(255,255,255,0.12);
  color: var(--on-dark);
  backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255,255,255,0.28);
}
.btn-glass-dark:hover { transform: translateY(-3px); background: rgba(255,255,255,0.20); }

/* ─── SECTION TAG ───────────────────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(37,99,235,.10);
  color: var(--cobalt);              /* #1D4ED8 → clears 4.5:1 on the tint */
  border: 1px solid rgba(37,99,235,.20);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

/* ─── ACCESSIBILITY BASELINE (shared across all pages) ──── */

/* Visually-hidden but screen-reader accessible */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Skip link */
.skip-link {
  position: absolute; top: -100%; left: 0; z-index: 9999;
  padding: 12px 20px; background: var(--blue); color: #fff;
  font-size: 14px; font-weight: 700;
  border-radius: 0 0 var(--radius-sm) 0;
  text-decoration: none; transition: top .2s;
}
.skip-link:focus { top: 0; }

/* Global visible focus indicator (WCAG 2.4.7 / 2.4.11) */
:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(37,99,235,0.14);
}

/* Reduced motion (WCAG 2.3.3 / 2.2.2) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ============================================================
   SHARED HERO MESH — dark tone, đồng bộ với Learning Hub
   ============================================================ */
.eb-hero-mesh {
  background: linear-gradient(135deg,#060E1C 0%,#1D4ED8 55%,#2563EB 100%);
  color: #fff;
}
/* Hairline + fade-to-page-bg helpers for hero edges */
.eb-hero-topline::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); z-index:1;
}
.eb-hero-fade::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:80px;
  background:linear-gradient(to bottom,transparent,var(--bg)); pointer-events:none; z-index:1;
}
/* Dark glass chip used inside dark heroes */
.eb-chip {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.12); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.22); color:#fff;
  border-radius:12px; padding:7px 14px; font-size:12px; font-weight:700;
  box-shadow:0 2px 12px rgba(6,14,28,.18);
}

/* ============================================================
   UNIFIED NAVIGATION — one bar, two variants
   .eb-nav (base/light glass) · marketing links + CTA
   .eb-nav--app adds right-side app controls (tier/avatar)
   ============================================================ */
.eb-nav {
  position:fixed; top:0; left:0; right:0; z-index:100; height:62px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,48px);
  background:rgba(239,246,255,.82);
  backdrop-filter:blur(28px) saturate(200%); -webkit-backdrop-filter:blur(28px) saturate(200%);
  border-bottom:1px solid rgba(255,255,255,.65);
  box-shadow:0 1px 0 rgba(37,99,235,.06), 0 4px 24px rgba(37,99,235,.05);
}
.eb-nav__logo { display:flex; align-items:center; gap:10px; text-decoration:none; }
.eb-nav__logo img { height:28px; width:auto; flex-shrink:0; }
.eb-nav__links { display:flex; align-items:center; gap:6px; }
.eb-nav__link {
  font-size:13px; font-weight:700; color:var(--fg-muted); text-decoration:none;
  padding:7px 14px; border-radius:var(--radius-pill);
  border:1px solid transparent;
  transition:color .15s, background .15s, border-color .15s;
}
.eb-nav__link:hover { color:var(--blue); background:rgba(37,99,235,.06); }
.eb-nav__link.active { color:var(--cobalt); background:rgba(37,99,235,.10); border-color:rgba(37,99,235,.20); }
.eb-nav__actions { display:flex; align-items:center; gap:10px; }
.eb-nav__cta {
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 22px; border-radius:var(--radius-pill);
  font-size:13px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,#FB923C,#FACC15); border:none; cursor:pointer; font-family:var(--font-body);
  box-shadow:0 3px 14px rgba(251,146,60,.35); text-decoration:none;
  transition:transform .18s var(--ease-spring), box-shadow .18s;
}
.eb-nav__cta:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(251,146,60,.45); }
/* App-variant light controls */
.eb-nav__pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:13px; font-weight:700; color:var(--fg-muted); text-decoration:none;
  padding:6px 14px; border-radius:var(--radius-pill);
  background:rgba(37,99,235,.06); border:1px solid rgba(37,99,235,.14);
  transition:color .15s, background .15s;
}
.eb-nav__pill:hover { color:var(--blue); background:rgba(37,99,235,.10); }
@media (max-width:640px) { .eb-nav__links { display:none; } }

/* ============================================================
   Hub-style Navigation (matches learning-hub.html standard)
   .hub-nav · scroll-aware clear→filled · hamburger + mobile menu
   ============================================================ */
.hub-nav{position:fixed;top:0;left:0;right:0;z-index:100;height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,48px);transition:background .3s,border-color .3s,box-shadow .3s}
.hub-nav.clear{background:transparent;border-bottom:1px solid rgba(255,255,255,.08)}
.hub-nav.filled{background:rgba(239,246,255,.90);backdrop-filter:blur(28px) saturate(200%);-webkit-backdrop-filter:blur(28px) saturate(200%);border-bottom:1px solid rgba(37,99,235,.10);box-shadow:0 4px 28px rgba(37,99,235,.07)}
.hub-nav .nav-logo{height:26px;width:auto;flex-shrink:0}
.hub-nav .nav-links{display:flex;gap:4px}
.hub-nav .nav-link{font-size:13px;font-weight:800;color:#fff;text-decoration:none;padding:7px 14px;border-radius:9999px;transition:all .15s;border:none;text-shadow:0 1px 6px rgba(0,0,0,.25)}
.hub-nav .nav-link:hover,.hub-nav .nav-link.act{background:rgba(255,255,255,.22);color:#fff;text-shadow:none}
.hub-nav.filled .nav-link{color:var(--fg);text-shadow:none}
.hub-nav.filled .nav-link:hover,.hub-nav.filled .nav-link.act{background:rgba(37,99,235,.10);color:var(--cobalt)}
.hub-nav .nav-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 20px;border-radius:9999px;background:linear-gradient(135deg,#FB923C,#FACC15);color:#451A03;font-size:13px;font-weight:800;text-decoration:none;border:none;cursor:pointer;font-family:var(--font-body);transition:transform .18s,box-shadow .18s;box-shadow:0 4px 14px rgba(251,146,60,.30)}
.hub-nav .nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(251,146,60,.40)}
/* Hamburger */
.hub-nav .hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;cursor:pointer;background:transparent;border:none;border-radius:8px;transition:background .15s}
.hub-nav .hamburger:hover{background:rgba(255,255,255,.12)}
.hub-nav.filled .hamburger:hover{background:rgba(37,99,235,.08)}
.hub-nav .hamburger span{display:block;height:2px;background:#fff;border-radius:2px;transition:all .25s}
.hub-nav.filled .hamburger span{background:var(--fg-body)}
.hub-nav .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hub-nav .hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hub-nav .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Mobile menu */
.hub-mobile-menu{display:none;position:fixed;top:62px;left:0;right:0;z-index:99;padding:12px 16px 16px;flex-direction:column;gap:4px;background:rgba(239,246,255,.96);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);border-bottom:1px solid rgba(37,99,235,.10);box-shadow:0 8px 24px rgba(37,99,235,.10)}
.hub-mobile-menu.open{display:flex}
.hub-mobile-menu .nav-link{color:var(--fg-body);font-size:15px;padding:10px 14px;border-radius:12px;text-decoration:none;font-weight:700;display:block}
.hub-mobile-menu .nav-link:hover,.hub-mobile-menu .nav-link.act{background:rgba(37,99,235,.10);color:var(--cobalt)}
@media(max-width:960px){.hub-nav .nav-links{display:none}.hub-nav .hamburger{display:flex}.hub-nav .nav-cta{padding:6px 12px;font-size:11px;white-space:nowrap}#nav-logged-out .nav-link{font-size:11px!important;padding:5px 10px;white-space:nowrap}#nav-logged-out{flex-wrap:nowrap}}