/* ==========================================================================
   DESIGN TOKENS – Nội Thất Tiến Đoàn
   Suy ra từ home.png (799px) ở Reference CSS Viewport 1280px (hệ số ×1.602).
   ========================================================================== */
:root {
    /* ---- Màu thương hiệu ---- */
    --color-primary: #f2232b;
    --color-primary-hover: #d9141c;
    --color-primary-soft: #ffe3e1;      /* đường kẻ đỏ nhạt (quy trình) */
    --color-primary-tint: #fff4f3;

    /* ---- Nền tối ---- */
    --color-dark: #141617;              /* header */
    --color-dark-2: #1b1f23;            /* section công trình, thẻ tối */
    --color-dark-3: #23282d;            /* viền / hover trên nền tối */
    --color-footer: #121517;
    --color-footer-bottom: #0f1113;

    /* ---- Chữ ---- */
    --color-heading: #17191c;
    --color-text: #4a4f57;
    --color-muted: #8b93a7;             /* mô tả xám xanh */
    --color-on-dark: #ffffff;
    --color-on-dark-muted: #aab0b8;

    /* ---- Nền sáng / viền ---- */
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-soft: #f7f8f8;      /* nền section "Về chúng tôi", "Tin tức" */
    --color-border: #e7e9ed;
    --color-border-dark: rgba(255, 255, 255, 0.14);

    /* ---- Mạng xã hội ---- */
    --color-zalo: #1e78ff;

    /* ---- Typography ---- */
    --font-body: 'Noto Sans', 'Segoe UI', Roboto, Arial, sans-serif;
    --font-display: 'Oswald', 'Arial Narrow', sans-serif;   /* logo, số thứ tự */
    --font-stretch: 90%;                /* tiêu đề, menu, nút: chữ hơi hẹp như mockup */
    --font-stretch-text: 95%;           /* đoạn văn: rộng hơn tiêu đề một chút, dễ đọc */

    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-16: 1rem;
    --fs-17: 1.0625rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;

    --fs-body: var(--fs-16);
    --fs-lead: 1.3125rem;               /* 21px – đoạn dẫn "Về chúng tôi" */
    --fs-card-title: 1.3125rem;         /* 21px */
    --fs-section-title: 2.0625rem;      /* 33px */
    --fs-h2-large: 2.25rem;             /* 36px */
    --fs-hero-title: 3.5rem;            /* 56px */
    --fs-hero-sub: 1.5rem;              /* 24px */

    --lh-tight: 1.1;
    --lh-heading: 1.22;
    --lh-card: 1.45;
    --lh-body: 1.6;

    /* ---- Container toàn cục ---- */
    --container-max: 1200px;            /* GLOBAL CONTENT WIDTH */
    --container-gutter: 40px;           /* gutter desktop */
    --container-inset: 56px;            /* Hero & dải CTA thụt thêm so với container */
    --content-reading: 780px;           /* cột đọc bài viết */

    /* ---- Khoảng cách ---- */
    --space-2: 0.125rem;
    --space-4: 0.25rem;
    --space-8: 0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-64: 4rem;
    --grid-gap: 20px;

    /* ---- Bo góc / đổ bóng ---- */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05), 0 2px 8px rgba(17, 24, 39, 0.04);
    --shadow-md: 0 6px 18px rgba(17, 24, 39, 0.08);
    --shadow-lg: 0 14px 34px rgba(17, 24, 39, 0.14);

    /* ---- Chiều cao cố định ---- */
    --header-height: 76px;

    /* ---- Chuyển động ---- */
    --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --duration: 0.25s;
}