/* ==========================================================================
   DESIGN TOKENS — NAM PHÁT JSC
   Suy ra từ mockup home3.png (916px) × 1.572 = reference viewport 1440px.
   ========================================================================== */

:root {
    /* ---------- Màu thương hiệu ---------- */
    --color-primary: #004b7a;          /* navy chính: nút, tab active */
    --color-primary-600: #005a8f;      /* navy sáng hơn (gradient) */
    --color-heading: #003a66;          /* màu tiêu đề */
    --color-navy-deep: #034674;        /* nền section Dự án */
    --color-accent: #0892b4;           /* teal: eyebrow, icon */
    --color-accent-600: #0a7fa3;
    --color-accent-soft: #e1f2f7;      /* nền tròn icon */
    --color-accent-sky: #45c1ea;       /* eyebrow trên nền tối */
    --color-orange: #ea6818;           /* CTA, nút chính */
    --color-orange-600: #d9560f;
    --color-orange-400: #f2842a;

    /* ---------- Màu chữ & nền ---------- */
    --color-text: #4f6b8e;             /* body text (slate) */
    --color-text-strong: #274a73;
    --color-muted: #7d93ad;
    --color-border: #dfe9f1;
    --color-border-strong: #c9d9e6;
    --color-background: #ffffff;
    --color-background-soft: #f0f5f8;  /* nền section Giải pháp */
    --color-background-tint: #f6f9fc;
    --color-white: #ffffff;

    /* ---------- Font ---------- */
    --font-heading: 'Be Vietnam Pro', 'Segoe UI', Roboto, Arial, sans-serif;
    --font-body: 'Encode Sans', 'Segoe UI', Roboto, Arial, sans-serif;

    /* ---------- Thang chữ (desktop 1440) ---------- */
    --fs-hero: 38px;          /* H1 hero */
    --fs-display: 42px;       /* H2 lớn (About) */
    --fs-h2: 34px;            /* H2 section */
    --fs-h2-sm: 30px;         /* H2 section phụ (Dự án, Quy trình) */
    --fs-h3: 20px;
    --fs-lead: 19.5px;          /* subtitle hero */
    --fs-body-lg: 18px;
    --fs-body: 16px;
    --fs-sm: 14.5px;
    --fs-xs: 13px;
    --fs-eyebrow: 15px;
    --fs-nav: 16px;

    --lh-tight: 1.14;
    --lh-heading: 1.22;
    --lh-body: 1.6;

    /* ---------- GLOBAL CONTENT CONTAINER ---------- */
    --container-max: 1260px;       /* mép chữ trái 90px / phải 1350px @1440 */
    --container-gutter: 32px;
    --container-narrow: 820px;     /* cột đọc bài viết */
    --bleed: 24px;                 /* card/panel tràn ra ngoài mép chữ */
    --bleed-lg: 52px;              /* dải CTA cam */

    /* ---------- Bo góc & bóng ---------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    --shadow-xs: 0 1px 3px rgba(0, 58, 102, 0.06);
    --shadow-sm: 0 3px 10px rgba(0, 58, 102, 0.07);
    --shadow-md: 0 10px 28px rgba(0, 58, 102, 0.12);
    --shadow-lg: 0 18px 44px rgba(0, 38, 72, 0.18);

    /* ---------- Kích thước khung ---------- */
    --topbar-h: 35px;
    --header-h: 93px;
    --hero-h: 509px;
    --hero-tabs-h: 58px;

    /* ---------- Chuyển động ---------- */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur: 0.25s;
}