/* ==========================================================================
   DESIGN TOKENS – Thành Đạt QB
   Nguồn: home.png (1024x1536, bản thu nhỏ). Quy đổi: 1 px ảnh ≈ 1.25 CSS px
   Reference CSS viewport: 1280px – Global container: 1200px
   ========================================================================== */
:root {
    /* ---- Màu sắc (lấy mẫu trực tiếp từ mockup) ---- */
    --color-primary: #f20d1b;          /* đỏ thương hiệu: CTA, tiêu đề section, icon */
    --color-primary-dark: #d50614;
    --color-primary-soft: #fdecec;     /* nền tròn icon "Vì sao chọn" */
    --color-secondary: #1565f5;        /* xanh link "Xem tất cả…" */
    --color-zalo: #0c74fc;
    --color-success: #3daf6f;          /* tag BẢO DƯỠNG */
    --color-star: #f8a713;

    --color-dark: #121b24;             /* top bar, footer */
    --color-dark-2: #17212b;           /* thân card "Ca sửa thực tế" */
    --color-heading: #161b22;
    --color-text: #2b3138;
    --color-muted: #6b7380;
    --color-muted-light: #c9cfd6;      /* chữ phụ trên nền tối */
    --color-border: #e4e7eb;
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-surface-alt: #f6f7f9;

    /* ---- Container ---- */
    --container-max: 1200px;
    --container-gutter: 24px;
    --reading-max: 760px;              /* cột đọc bài viết */

    /* ---- Font ---- */
    --font-body: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
    --font-heading: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

    /* ---- Typography scale ---- */
    --text-body: 15px;
    --text-sm: 14px;
    --text-xs: 13px;
    --text-topbar: 13px;
    --text-nav: 15px;
    --text-button: 15px;
    --text-card-title: 19px;
    --text-card-desc: 13.5px;
    --text-section-title: 27px;
    --text-hero-kicker: 27px;
    --text-hero-title: 66px;
    --text-hero-subtitle: 28px;
    --text-footer: 14px;

    --leading-tight: 1.15;
    --leading-heading: 1.22;
    --leading-body: 1.55;

    /* ---- Bố cục ---- */
    --topbar-height: 32px;
    --header-height: 66px;
    --hero-height: clamp(426px, 33.3vw, 560px);   /* 426px tại viewport 1280 */
    --section-space: 16px;             /* mockup rất "dày": khoảng cách section nhỏ */
    --grid-gap: 16px;

    /* ---- Radius / shadow ---- */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 10px 30px rgba(16, 24, 40, 0.14);

    --transition: 0.2s ease;
}