/* ==========================================================================
   MD Tool — design tokens
   --------------------------------------------------------------------------
   THE ONLY LINE YOU NEED TO EDIT TO REBRAND THE SITE IS --md-brand BELOW.
   Every accent in light AND dark mode is derived from it with color-mix().
   Do NOT repeat this hex anywhere else in the CSS.
   Luu y: file logo (assets/img/*.png) la anh, khong doi mau theo bien nay -
   doi thuong hieu thi phai xuat lai anh logo.

   MUC LUC
     1. Brand knob
     2. Mau theo theme  (sang / toi)
     3. Mau footer      (co dinh, toi o ca 2 theme)
     4. Thang do        (bo tron, be rong, font, co chu)
     5. Noi sang bien cua Bootstrap
   ========================================================================== */

/* ============ 1. Brand knob ============ */
:root {
  --md-brand: #005dfe;          /* <- brand color. change me, nothing else. */
}

/* ============ 2a. Theme sang (mac dinh) ============ */
:root,
[data-bs-theme="light"] {
  --md-bg:#ffffff;              --md-bg-subtle:#eef1f6;
  --md-surface:#ffffff;         --md-surface-hover:#f3f4f6;
  --md-border:#e4e6eb;          --md-border-strong:#d0d5dd;
  --md-text:#16181d;            --md-muted:#5b6472;

  /* accents - all derived from --md-brand */
  --md-accent:       var(--md-brand);
  --md-accent-hover: color-mix(in srgb, var(--md-brand) 82%, black);
  --md-accent-soft:  color-mix(in srgb, var(--md-brand)  8%, white);

  /* Mau chu dat TREN mot nen mau dac (nut Tra cuu, nhan trang thai).
     PHAI khai bao rieng cho tung theme: o che do toi cac mau nen deu duoc lam
     SANG len, nen chu trang se chim — do 2.44:1, duoi nguong 4.5. */
  --md-brand-ink: #ffffff;
  --md-danger: #c02626;         --md-danger-soft: #fdf3f3;   --md-danger-line: #f0d3d3;
  --md-success: #157f3d;        --md-success-soft: #f0faf3;  --md-success-line: #c9e8d4;
  --md-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
}

/* ============ 2b. Theme toi ============
   PHAI nam duoi khoi sang: `:root` va `[data-bs-theme="dark"]` cung do uu tien
   (0,1,0) va cung khop <html>, nen khoi dung sau moi thang. */
[data-bs-theme="dark"] {
  --md-bg:#0d1117;              --md-bg-subtle:#070b12;
  --md-surface:#161b22;         --md-surface-hover:#1c222c;
  --md-border:#2a313c;          --md-border-strong:#3a424f;
  --md-text:#e6edf3;            --md-muted:#9aa4b2;

  /* cung mau thuong hieu, lam sang len de doc duoc tren nen toi */
  --md-accent:       color-mix(in srgb, var(--md-brand) 55%, white);
  --md-accent-hover: color-mix(in srgb, var(--md-brand) 38%, white);
  --md-accent-soft:  color-mix(in srgb, var(--md-brand) 22%, #0d1117);

  --md-brand-ink: #0d1117;      /* nen mau o che do toi la mau SANG -> chu phai toi */
  --md-danger: #ff7b72;         --md-danger-soft: #1c1113;   --md-danger-line: #40262a;
  --md-success: #4ade80;        --md-success-soft: #0d1a12;  --md-success-line: #1f3a29;
  --md-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
}

/* ============ 3. Footer ============
   Footer toi o CA HAI theme nen mau khong lay tu token theme.
   --md-footer-bg la mau navy lay truc tiep tu file logo (mdtool-logo.png),
   khong suy ra tu --md-brand. Doi logo thi nho lay mau lai o day.
   Rieng mau link khi hover van bam theo --md-brand de nut doi mau con tac dung. */
:root {
  --md-footer-bg:     #041229;   /* navy trong logo */
  --md-footer-text:   #ffffff;
  --md-footer-muted:  #a7b4cb;
  --md-footer-link:   #c3ccdd;
  --md-footer-border: color-mix(in srgb, #ffffff 13%, transparent);
  --md-footer-accent: color-mix(in srgb, var(--md-brand) 55%, white);
}

/* ============ 4. Thang do (khong phu thuoc theme) ============ */
:root {
  --md-radius-sm: 8px;
  --md-radius: 14px;
  --md-radius-pill: 999px;

  --md-container: 1200px;
  --md-section-y: clamp(3rem, 7vw, 5.5rem);
  --md-form-lift: clamp(2rem, 4vw, 3.5rem);   /* the form noi len de len ranh gioi hero */
  --md-sticky-offset: 6rem;   /* chua cho navbar sticky: cot ben dinh, tieu de khi bam muc luc */

  --md-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
                  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  --md-fs-h1:   clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
  --md-fs-h2:   clamp(1.5rem, 1.1rem + 1.7vw, 2.35rem);
  --md-fs-lead: clamp(1rem, .95rem + .45vw, 1.2rem);
}

/* ============ 5. Noi sang bien cua Bootstrap ============ */
:root, [data-bs-theme="light"], [data-bs-theme="dark"] {
  --bs-body-bg: var(--md-bg);
  --bs-body-color: var(--md-text);
  --bs-border-color: var(--md-border);
  --bs-link-color: var(--md-accent);
  --bs-link-hover-color: var(--md-accent-hover);
  --bs-emphasis-color: var(--md-text);
  --bs-secondary-color: var(--md-muted);
  --bs-font-sans-serif: var(--md-font-sans);
  --bs-border-radius: var(--md-radius);
}