/* ===================================================================
   TinhThanh CMS — Design tokens
   Nguồn DUY NHẤT cho màu, chữ, khoảng cách, bo góc, bóng đổ.
   KHÔNG hard-code mã màu ở file khác; luôn dùng biến ở đây.

   Bảng màu của Nhà Đẹp BT: xanh #004ba2 + vàng #e9b519 + đỏ nút sản phẩm, lấy từ Homepage-UI.png. Mỗi dự án đổi
   khoảng 10 biến ở khối "Màu thương hiệu" và khối "Chữ" là ra bộ nhận
   diện riêng — không phải sửa file CSS nào khác.

   Tên biến là hợp đồng với 5 file CSS còn lại: ĐỔI GIÁ TRỊ, đừng đổi tên.
   =================================================================== */

:root {
    /* ---- Màu thương hiệu — ĐỔI THEO TỪNG DỰ ÁN ---- */
    --c-primary: #004BA2;          /* màu chủ đạo: header, tiêu đề, nút chính */
    --c-primary-dark: #003289;     /* đậm hơn: nền tối, hover nút chính */
    --c-primary-darker: #00276b;   /* đậm nhất: chân trang */
    --c-primary-soft: #2a6ac0;     /* nhạt hơn: gradient, viền nhấn */
    --c-primary-mist: #eaf1fa;     /* rất nhạt: nền section xen kẽ */
    --c-accent: #e9b519;           /* màu nhấn: CTA, đường kẻ dưới tiêu đề, icon */
    --c-accent-dark: #c99a0c;      /* nhấn đậm: hover */
    --c-accent-soft: #fbf1cf;      /* nhấn nhạt: nền badge, nền trích dẫn */

    /* ---- Màu trung tính ---- */
    --c-ink: #1a1f29;              /* chữ tiêu đề */
    --c-body: #4a4f57;             /* chữ thân bài */
    --c-muted: #6b7686;            /* chữ phụ, chú thích */
    --c-line: #e2e6ee;             /* viền */
    --c-line-soft: #f0f2f7;        /* viền rất nhạt, kẻ bảng */
    --c-bg: #ffffff;
    --c-bg-soft: #f4f7fc;          /* nền section xen kẽ */
    --c-white: #ffffff;

    /* ---- Trạng thái ---- */
    --c-success: #1a7f4b;
    --c-danger: #b3261e;
    --c-star: #e0a82e;
    --c-red: #d40008;               /* nút "Chi tiết sản phẩm" theo thiết kế */
    --c-red-dark: #a80006;

    /* Nen nhat cua ba mau trang thai — dung cho huy hieu, khoi thong bao (giỏ hàng, đơn hàng). */
    --c-success-soft: #e3f3ea;
    --c-danger-soft: #fbe6e5;
    --c-info: #004ba2;
    --c-info-soft: #e6eefa;
    /* ---- Chữ ----
       Mặc định dùng FONT HỆ THỐNG: không phụ thuộc mạng, không tải thêm gì,
       hiển thị tiếng Việt tốt trên mọi máy. Dự án cần font riêng thì đổi hai
       biến này và thêm <link> Google Fonts trong Frontend/MasterPage.master. */
    --font-display: "Montserrat", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --font-base: "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --fs-hero: clamp(2.5rem, 6vw, 4rem);
    /* Cấp "statement": câu định vị giữa trang. Không có cấp này thì thang chữ nhảy
       thẳng từ hero xuống h2 và phần giữa trang đọc rất phẳng. */
    --fs-statement: clamp(1.875rem, 3.4vw, 2.875rem);
    --fs-h1: clamp(2rem, 4vw, 3.125rem);
    --fs-h2: clamp(1.75rem, 3.2vw, 2.5rem);
    --fs-h3: clamp(1.125rem, 1.6vw, 1.375rem);
    --fs-lead: clamp(1.0625rem, 1.3vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-kicker: 0.75rem;

    /* ---- Khoảng cách ---- */
    --sp-section: clamp(50px, 7vw, 50px);
    --sp-block: clamp(28px, 4vw, 0px);
    --container: 1246px;
    --container-narrow: 880px;

    /* ---- Hình khối ---- */
    --radius: 8px;
    --radius-lg: 14px;
    --radius-pill: 999px;
    --rule: 3px;                   /* độ dày thanh màu nhấn dưới tiêu đề */
    --shadow-sm: 0 2px 10px rgba(16, 29, 44, .06);
    --shadow: 0 10px 30px rgba(16, 29, 44, .09);
    --shadow-lg: 0 24px 60px rgba(16, 29, 44, .18);

    /* Chiều cao header: dự án có logo cao/thấp khác nhau thì chỉnh ở đây,
       layout.css và responsive.css đều tính theo hai biến này. */
    --header-h: 126px;
    --header-h-sm: 68px;
    --ease: cubic-bezier(.2, .7, .3, 1);
    --t-fast: .18s var(--ease);
    --t: .28s var(--ease);
}