/* =====================================================================
   KCODE DESIGN SYSTEM v3 — Brand Book (2026-07-24)
   Nguồn: public/brand/KCODE Brand Book.html
   Phong cách: Modern EdTech + Enterprise Clean
   Type: Manrope (heading) + Inter (body) + JetBrains Mono (code)
   Primary: KCODE Blue #0B57D0 · CTA #FF7A3D · Accent #12BFEC
   Giữ alias Aurora/Tide/Spark/Ink để markup cũ không gãy.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600;700;800&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

/* ---------------------------------------------------------------------
   1. OFFICIAL BRAND TOKENS (light)
   --------------------------------------------------------------------- */
:root{
  /* Surfaces */
  --bg:#F2F6FD;
  --bg-2:#E3ECFA;
  --surface:#FFFFFF;
  --card:#FFFFFF;
  --border:#D6E2F4;
  --divider:#E7EFFB;

  /* Text */
  --text:#0A1836;
  --text-2:#45536E;
  --muted:#8593AC;
  --disabled:#BCC7DA;

  /* Brand */
  --primary:#0B57D0;
  --primary-2:#3B82F6;
  --primary-600:#083F9C;
  --on-primary:#FFFFFF;
  --primary-soft:#E1ECFD;
  --cta:#FF7A3D;
  --cta-soft:#FFECE0;
  --sunny:#FFC24B;
  --sunny-soft:#FFF4DC;
  --accent:#12BFEC;
  --accent-2:#1DBE86;

  /* Status */
  --success:#17B26A;
  --success-soft:#DCFAE9;
  --warning:#F79009;
  --warning-soft:#FEF0D6;
  --error:#F04438;
  --error-soft:#FEE4E2;
  --info:#2E90FA;
  --info-soft:#DBEDFE;

  /* Elevation & gradients */
  --sh-sm:0 1px 2px rgba(10,24,54,.06),0 1px 3px rgba(10,24,54,.05);
  --sh-md:0 6px 18px rgba(11,87,208,.10);
  --sh-lg:0 20px 46px rgba(10,24,54,.14);
  --sh-primary:0 12px 28px rgba(11,87,208,.32);
  --sh-cta:0 8px 22px rgba(255,122,61,.32);
  --grad-hero:linear-gradient(135deg,#0B57D0 0%,#1596E0 55%,#3DD6C0 100%);
  --grad-btn:linear-gradient(135deg,#2E74E8 0%,#0B57D0 100%);
  --grad-cta:linear-gradient(135deg,#FF8A54 0%,#FF7A3D 100%);
  --header-blur:rgba(242,246,253,.82);

  /* Typography */
  --font-display:'Manrope',system-ui,sans-serif;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-code:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:14px; --text-md:15px;
  --text-lg:17px; --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:38px;

  /* Spacing (4pt) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --radius-lg:16px;

  /* Motion */
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:.14s; --dur-base:.22s; --dur-slow:.4s;

  /* ---- Semantic (app shell) ---- */
  --bg-app:var(--bg);
  --bg-surface:var(--surface);
  --bg-subtle:var(--bg-2);
  --bg-sidebar:#0A1836;
  --fg:var(--text);
  --fg-muted:var(--text-2);
  --fg-faint:var(--muted);
  --pri:var(--primary);
  --pri-strong:var(--primary-600);
  --pri-soft:var(--primary-soft);
  --focus-ring:0 0 0 3px rgba(11,87,208,.28);
  --header-bg:var(--header-blur);
  --border-subtle:var(--divider);

  /* Shadows (semantic names used by styles.css) */
  --shadow-xs:var(--sh-sm);
  --shadow-sm:var(--sh-sm);
  --shadow-md:var(--sh-md);
  --shadow-lg:var(--sh-lg);
  --shadow-pri:var(--sh-primary);
  --shadow-spark:var(--sh-cta);

  /* ---- Legacy aliases (Aurora / Tide / Spark / Ink) ---- */
  --ink-950:#040F26;
  --ink-900:#0A1836;
  --ink-800:#0B1C3C;
  --ink-700:#1B355E;
  --ink-500:var(--muted);
  --ink-400:#6F86AE;
  --ink-300:#A5B9DA;
  --ink-200:var(--border);
  --ink-100:var(--bg-2);
  --ink-050:var(--bg);

  --aurora-700:var(--primary-600);
  --aurora-600:var(--primary);
  --aurora-500:var(--primary);
  --aurora-400:var(--primary-2);
  --aurora-300:#6FB2FF;
  --aurora-100:var(--primary-soft);
  --aurora-050:var(--primary-soft);

  --spark-600:#E86A2E;
  --spark-500:var(--cta);
  --spark-400:#FF8A54;
  --spark-100:var(--cta-soft);
  --spark-050:var(--cta-soft);

  --tide-500:var(--accent);
  --tide-400:#33CFF5;
  --tide-050:#E6F8FE;

  --green-600:var(--success); --green-050:var(--success-soft);
  --amber-600:var(--warning); --amber-050:var(--warning-soft);
  --red-600:var(--error);     --red-050:var(--error-soft);

  --grad-aurora:var(--grad-hero);
  --grad-spark:var(--grad-cta);
  --grad-night:radial-gradient(1100px 500px at 15% -10%,rgba(11,87,208,.36),transparent 60%),
               radial-gradient(900px 460px at 110% 15%,rgba(18,191,236,.18),transparent 55%),
               radial-gradient(700px 420px at 70% 110%,rgba(255,122,61,.12),transparent 55%),
               var(--ink-950);

  --font-head:var(--font-display);
  --font-body:var(--font-ui);

  color-scheme:light;
}

/* Dark theme — data-theme="dark" */
[data-theme="dark"]{
  --bg:#040F26;
  --bg-2:#091733;
  --surface:#0B1C3C;
  --card:#0E244C;
  --border:#1B355E;
  --divider:#152C52;
  --text:#E8F0FF;
  --text-2:#A5B9DA;
  --muted:#6F86AE;
  --disabled:#385080;
  --primary:#4D9BFF;
  --primary-2:#6FB2FF;
  --primary-600:#2E7BEF;
  --on-primary:#040F26;
  --primary-soft:#0D2650;
  --cta:#FF8A54;
  --cta-soft:#3A2015;
  --sunny:#FFCF6B;
  --sunny-soft:#2E2510;
  --success:#3DD68C;
  --success-soft:#0E2A1C;
  --warning:#FBBF4D;
  --warning-soft:#2E2410;
  --error:#FF6A5E;
  --error-soft:#2E1512;
  --info:#5AB8FF;
  --info-soft:#0E2233;
  --accent:#33CFF5;
  --accent-2:#37DCA0;
  --sh-sm:0 1px 2px rgba(0,0,0,.45);
  --sh-md:0 8px 22px rgba(0,0,0,.5);
  --sh-lg:0 24px 54px rgba(0,0,0,.6);
  --sh-primary:0 12px 32px rgba(77,155,255,.45);
  --header-blur:rgba(4,15,38,.8);

  --bg-app:var(--bg);
  --bg-surface:var(--surface);
  --bg-subtle:var(--bg-2);
  --fg:var(--text);
  --fg-muted:var(--text-2);
  --fg-faint:var(--muted);
  --pri:var(--primary);
  --pri-strong:var(--primary-600);
  --pri-soft:var(--primary-soft);
  --border-subtle:var(--divider);
  --header-bg:var(--header-blur);
  --focus-ring:0 0 0 3px rgba(77,155,255,.35);

  --ink-950:#040F26;
  --ink-900:#0B1C3C;
  --ink-800:#0E244C;
  --ink-700:#1B355E;
  --ink-100:#152C52;
  --ink-050:#091733;
  --aurora-050:rgba(77,155,255,.14);
  --spark-050:rgba(255,138,84,.14);
  --green-050:rgba(61,214,140,.16);
  --amber-050:rgba(251,191,77,.18);
  --red-050:rgba(255,106,94,.16);
  --tide-050:rgba(51,207,245,.14);
  color-scheme:dark;
}

/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font-ui);color:var(--fg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.font-display{font-family:var(--font-display);letter-spacing:-.02em}
code,pre,.tnum,.font-code{font-family:var(--font-code)}
.tnum{font-variant-numeric:tabular-nums}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--focus-ring);border-radius:6px
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------------------------------------------------------------------
   3. COMPONENTS
   --------------------------------------------------------------------- */

/* Logo wordmark */
.kc-brace{font-family:var(--font-display);font-weight:800}
.kc-brace .b{color:var(--accent)}
.kc-brace .o{color:var(--cta)}

/* Brand lockup — SVG chữ (Brand Book): KCODE + rule + EDUCATION & AI */
.kc-lockup{
  display:block;width:auto;overflow:visible;flex:0 0 auto;
  --kc-name:#0A1836; --kc-tag:#0B57D0; --kc-rule:#12BFEC;
}
.kc-lockup .name{
  font-family:var(--font-display),Manrope,system-ui,sans-serif;
  font-weight:800;font-size:36px;letter-spacing:.6px;fill:var(--kc-name);
}
.kc-lockup .tag{
  font-family:var(--font-ui),Inter,system-ui,sans-serif;
  font-weight:600;font-size:8.75px;letter-spacing:3.5px;fill:var(--kc-tag);
}
.kc-lockup .rule{stroke:var(--kc-rule);stroke-width:1.5;stroke-linecap:round;opacity:.95}
.kc-lockup--dark,.stage .kc-lockup,.foot .kc-lockup{
  --kc-name:#FFFFFF; --kc-tag:#A5F3FC; --kc-rule:#12BFEC;
}
.kc-lockup--light{ --kc-name:#0A1836; --kc-tag:#0B57D0; --kc-rule:#12BFEC; }
/* App dark theme: header / light lockups flip to light ink */
[data-theme="dark"] header .kc-lockup,
[data-theme="dark"] .kc-lockup--light{
  --kc-name:#FFFFFF; --kc-tag:#A5F3FC; --kc-rule:#12BFEC;
}
.kc-lockup--sm,.kc-lockup--nav{height:36px}
.kc-lockup--md{height:52px}
.kc-lockup--lg{height:64px}
.kc-lockup--hero{height:100px}
.kc-lockup--foot{height:50px}
a.brand-logo, .brand-logo{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;line-height:0;
  background:transparent;border:0;padding:0;
}
.brand-logo .kc-lockup{flex:0 0 auto}
.stage .kc-lockup--md{height:56px}
.foot .kc-lockup--foot,.foot .kc-lockup{height:40px}
header .brand.brand-logo .kc-lockup,
header .kc-lockup--sm{height:34px}
.auth-top .kc-lockup--sm{height:40px}
.nav .logo.brand-logo .kc-lockup{height:42px}
.lab-hero .kc-lockup--hero{
  height:clamp(72px,14vw,100px);
  filter:drop-shadow(0 8px 20px rgba(11,87,208,.16));
}
/* Legacy PNG classes (brand book / print assets) — giữ tương thích */
.kc-mark,.kc-logo{
  display:block;height:36px;width:auto;max-width:min(180px,46vw);
  object-fit:contain;object-position:left center;
}
.kc-logo-sm,.kc-mark-sm{height:32px;max-width:min(150px,42vw)}
.kc-logo-md,.kc-mark-md{height:44px;max-width:min(200px,60vw)}
.kc-logo-lg,.kc-mark-lg{height:56px;max-width:min(260px,72vw)}
.kc-logo-hero,.kc-mark-hero{height:72px;max-width:min(320px,82vw)}

/* Buttons */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border:none;border-radius:var(--r-md);padding:11px 20px;
  font-family:var(--font-ui);font-weight:700;font-size:var(--text-base);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast) var(--ease-out),filter var(--dur-fast) var(--ease-out)}
.ds-btn:active{transform:scale(.97)}
.ds-btn:disabled{opacity:.45;cursor:not-allowed}
.ds-btn-primary{background:var(--grad-btn);color:#fff;box-shadow:var(--shadow-pri)}
.ds-btn-primary:hover{filter:brightness(1.05);box-shadow:0 14px 32px rgba(11,87,208,.4)}
.ds-btn-spark{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-spark)}
.ds-btn-spark:hover{filter:brightness(1.06)}
.ds-btn-ghost{background:transparent;color:var(--fg);border:1.5px solid var(--border)}
.ds-btn-ghost:hover{background:var(--bg-subtle)}
.ds-btn-soft{background:var(--pri-soft);color:var(--pri-strong)}
.ds-btn-soft:hover{background:#d0e4fc}

/* Card */
.ds-card{background:var(--bg-surface);border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.ds-card-hover{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-base)}
.ds-card-hover:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--primary-2)}

/* Input */
.ds-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);
  font-size:var(--text-md);font-family:inherit;background:var(--bg-surface);color:var(--fg);
  transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}
.ds-input:hover{border-color:var(--ink-300)}
.ds-input:focus{outline:none;border-color:var(--pri);box-shadow:var(--focus-ring)}
.ds-input::placeholder{color:var(--fg-faint)}
.ds-label{display:block;font-size:var(--text-sm);font-weight:600;color:var(--fg-muted);margin:14px 0 6px}

/* Badge / tag */
.ds-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);
  font-size:var(--text-xs);font-weight:700;line-height:1.7}

/* Skeleton */
.ds-skeleton{background:linear-gradient(90deg,var(--bg-subtle) 25%,var(--bg) 50%,var(--bg-subtle) 75%);
  background-size:200% 100%;animation:dsShimmer 1.4s infinite;border-radius:var(--r-sm)}
@keyframes dsShimmer{to{background-position:-200% 0}}

@keyframes dsRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes dsPop{0%{transform:scale(.92);opacity:0}100%{transform:scale(1);opacity:1}}
.ds-rise{animation:dsRise var(--dur-slow) var(--ease-out) both}
@keyframes dsTwinkle{0%,100%{opacity:.25}50%{opacity:.9}}