/* Enmusubi v2: shared design tokens (from _ds) + shared header/footer hover rules. Page styles live in assets/css/pages/<page>.css so that data-r rule names never collide between pages. */
/* _ds tokens/colors.css */
:root{
  /* ---- Brand core: navy ---- */
  --navy-900:#101B31;
  --navy-800:#16223C;
  --navy-700:#1B2A4A; /* PRIMARY brand navy */
  --navy-600:#26375C;
  --navy-500:#39507C;
  --navy-400:#5C6F97;
  --navy-300:#8A99B7;
  --navy-200:#BFC9DB;
  --navy-100:#DFE5EF;
  --navy-050:#EEF2F9;

  /* ---- Logo ring accents (exact values sampled from the master logo) ---- */
  --accent-blue:#3366EA;
  --accent-green:#24B87A;
  --accent-gold:#FEB740;
  --accent-red:#F32E49;

  /* Accent tints — chips, icon bubbles, hairlines only. Never large fills. */
  --accent-blue-tint:#EBF1FE;
  --accent-green-tint:#E9F8F1;
  --accent-gold-tint:#FFF6E6;
  --accent-red-tint:#FEECEE;

  /* ---- Neutrals / paper ---- */
  --white:#FFFFFF;
  --paper:#F7F9FC;        /* page background */
  --paper-tint:#F2F6FC;   /* alternating band */
  --ink-wordmark:#404041; /* logo wordmark grey */
  --grey-500:#6E7788;
  --grey-300:#AEB6C4;
  --grey-100:#E6EAF1;

  /* ---- Imagery / medical blue wash ---- */
  --sky-100:#EAF2FD;
  --sky-200:#D6E6FA;
  --sky-300:#B9D5F5;

  /* ---- Semantic aliases ---- */
  --text-heading:var(--navy-700);
  --text-body:var(--navy-600);
  --text-muted:var(--navy-400);
  --text-on-navy:#FFFFFF;
  --text-on-navy-muted:#C3CEE2;
  --text-link:var(--accent-blue);
  --text-link-hover:var(--navy-700);

  --surface-page:var(--paper);
  --surface-card:var(--white);
  --surface-card-tint:var(--navy-050);
  --surface-navy:var(--navy-700);
  --surface-band:var(--paper-tint);

  --border-hairline:var(--navy-100);
  --border-card:#E8EDF6;
  --border-strong:var(--navy-200);

  --icon-badge-bg:var(--navy-700);
  --icon-badge-fg:var(--white);
  --icon-line:var(--navy-700);

  --stat-number:var(--navy-700);
  --rule-accent-1:var(--accent-red);
  --rule-accent-2:var(--accent-gold);
  --rule-accent-3:var(--accent-green);
  --rule-accent-4:var(--accent-blue);
}

/* _ds tokens/typography.css */
:root{
  --font-sans:"Asap","Helvetica Neue",Arial,sans-serif;
  --font-core:var(--font-sans);
  --font-display:var(--font-sans);

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* Print-first scale, expressed in px for screen mockups.
     A5 body copy sits at 9.5–10.5pt ≈ 13–14px. */
  --fs-stat-xl:64px;   /* the single hero number on a page */
  --fs-stat:40px;
  --fs-display:34px;   /* cover title */
  --fs-h1:26px;
  --fs-h2:20px;
  --fs-h3:16px;
  --fs-body-lg:15px;
  --fs-body:13.5px;
  --fs-body-sm:12px;
  --fs-caption:10.5px;
  --fs-eyebrow:10px;

  --lh-tight:1.1; /* @kind font */
  --lh-heading:1.22; /* @kind font */
  --lh-body:1.55; /* @kind font */
  --lh-loose:1.7; /* @kind font */

  --ls-eyebrow:0.14em; /* @kind font */   /* uppercase eyebrows / section kickers */
  --ls-heading:-0.01em; /* @kind font */
  --ls-stat:-0.02em; /* @kind font */
  --ls-caps-sm:0.06em; /* @kind font */

  /* Composite text roles */
  --text-eyebrow:var(--fw-bold) var(--fs-eyebrow)/1.3 var(--font-sans);
  --text-display:var(--fw-extrabold) var(--fs-display)/var(--lh-tight) var(--font-sans);
  --text-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-sans);
  --text-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-sans);
  --text-h3:var(--fw-semibold) var(--fs-h3)/1.3 var(--font-sans);
  --text-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --text-caption:var(--fw-regular) var(--fs-caption)/1.4 var(--font-sans);
}

/* _ds tokens/spacing.css */
:root{
  /* 4px base, print-friendly */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-8:32px;
  --sp-10:40px;
  --sp-12:48px;
  --sp-16:64px;

  /* A5 page geometry (148×210mm) */
  --page-w:148mm; /* @kind spacing */
  --page-h:210mm; /* @kind spacing */
  --page-margin:12mm; /* @kind spacing */
  --page-margin-tight:9mm; /* @kind spacing */
  --page-gutter:6mm; /* @kind spacing */

  /* Signature top accent stripe */
  --accent-bar-h:6px; /* @kind spacing */

  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;   /* default card radius */
  --radius-xl:20px;
  --radius-pill:999px;

  --border-w-hair:1px; /* @kind spacing */
  --border-w-rule:2px; /* @kind spacing */
  --stroke-icon:1.5px; /* @kind spacing */  /* line-art icon stroke */
}

/* _ds tokens/elevation.css */
:root{
  /* Shadows are whisper-quiet: this is print collateral, not app UI. */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(27,42,74,.04);
  --shadow-sm:0 2px 6px rgba(27,42,74,.05);
  --shadow-md:0 4px 14px rgba(27,42,74,.06);
  --shadow-lg:0 10px 30px rgba(27,42,74,.08);
  --shadow-card:var(--shadow-sm);
  --shadow-card-raised:var(--shadow-md);
  /* Soft blue "glow" halo used behind circular illustrations in the deck */
  --glow-sky:0 0 0 10px rgba(214,230,250,.45);

  --transition-fast:120ms ease; /* @kind other */
  --transition-base:180ms ease; /* @kind other */
  --ease-standard:cubic-bezier(.4,0,.2,1); /* @kind other */
}

/* _ds tokens/print.css */
/* A5 portrait print defaults for leaflet / brochure output. */
@media print{
  :root{--paper:#F7F9FC}
  html,body{background:#fff}
  .no-print{display:none !important}
}

/* _ds tokens/base.css */
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--text-body);text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading);letter-spacing:var(--ls-heading)}
p{margin:0}
a{color:var(--text-link);text-decoration:none;border-bottom:1px solid color-mix(in oklch,var(--text-link) 35%,transparent);transition:color var(--transition-fast),border-color var(--transition-fast)}
a:hover{color:var(--text-link-hover);border-bottom-color:color-mix(in oklch,var(--text-link-hover) 45%,transparent)}
::selection{background:var(--sky-200);color:var(--navy-700)}

/* shared hover (header, footer, contact) */
.home-h0:hover { color: rgb(184, 86, 111) !important; }
.home-h1:hover { background: rgb(251, 240, 243) !important; }
.home-h2:hover { opacity: 1 !important; }
.home-h3:hover { box-shadow: rgba(27, 42, 74, 0.14) 0px 16px 36px, rgba(37, 84, 199, 0.45) 0px 0px 0px 1.5px inset !important; }
.home-h4:active { box-shadow: rgba(27, 42, 74, 0.14) 0px 16px 36px, rgba(37, 84, 199, 0.45) 0px 0px 0px 1.5px inset !important; }
.home-h5:focus { box-shadow: rgba(27, 42, 74, 0.14) 0px 16px 36px, rgba(37, 84, 199, 0.45) 0px 0px 0px 1.5px inset !important; outline: none !important; }
.home-h6:hover { box-shadow: rgba(27, 42, 74, 0.14) 0px 16px 36px, rgba(94, 75, 168, 0.45) 0px 0px 0px 1.5px inset !important; }
.home-h7:active { box-shadow: rgba(27, 42, 74, 0.14) 0px 16px 36px, rgba(94, 75, 168, 0.45) 0px 0px 0px 1.5px inset !important; }
.home-h8:focus { box-shadow: rgba(27, 42, 74, 0.14) 0px 16px 36px, rgba(94, 75, 168, 0.45) 0px 0px 0px 1.5px inset !important; outline: none !important; }
.home-h9:hover { box-shadow: rgba(27, 42, 74, 0.14) 0px 16px 36px, rgba(194, 26, 51, 0.4) 0px 0px 0px 1.5px inset !important; }

/* language switcher next to the hamburger (mobile/tablet) */
[data-r="langmob"]{ display:none; }
@media (max-width:1024px){
  [data-r="langmob"]{ display:inline-flex !important; }
  [data-r="langmob"] + [data-r="mtrigger"]{ margin-left:0 !important; }
}


/* header chật ở máy hẹp: logo + nút ngôn ngữ + hamburger phải nằm gọn trong 320px */
@media (max-width:420px){
  a:has(+ nav[data-r="nav"]){ gap:8px !important; min-width:0; flex-shrink:1 !important; }
  a:has(+ nav[data-r="nav"]) img{ width:30px !important; height:30px !important; }
  a:has(+ nav[data-r="nav"]) span[style*="font-size: 17px"]{ font-size:15px !important; letter-spacing:0.1em !important; }
  a:has(+ nav[data-r="nav"]) span[style*="font-size: 9px"]{ font-size:8px !important; letter-spacing:0.12em !important; }
  [data-r="langmob"]{ padding:0 10px !important; margin-right:6px !important; font-size:12px !important; }
}