/* ==========================================================================
   Design tokens — Nhà thuốc Thiên Trang
   Suy ra từ home.png (vùng website 928px trong ảnh, hệ số quy đổi ≈ 1.45)
   Reference CSS viewport ≈ 1346–1366px · Global container 1240px
   ========================================================================== */
:root {
    /* Màu */
    --color-primary: #077367;        /* thanh menu, nút chính */
    --color-primary-600: #0a7d6e;    /* nút gọi, icon */
    --color-primary-700: #0b5f55;    /* chữ link, nút viền */
    --color-primary-800: #04544e;    /* footer */
    --color-accent: #0e7b67;         /* dòng 2 tiêu đề Hero */
    --color-eyebrow: #1d7b6d;
    --color-orange: #f25b12;         /* CTA gọi điện */
    --color-orange-600: #e14f08;
    --color-heading: #10233f;        /* xanh navy tiêu đề */
    --color-text: #3f4856;
    --color-muted: #5f6b76;
    --color-border: #e1e9ea;
    --color-border-strong: #cfdcdc;
    --color-background: #ffffff;
    --color-mint: #e8f5f4;           /* dải cam kết */
    --color-mint-50: #f1f8f7;        /* nền tư vấn / liên hệ / nhãn danh mục */
    --color-topbar: #eef8f8;
    --color-zalo: #2f87f0;
    --color-white: #ffffff;

    /* Layout */
    --container-max: 1240px;
    --container-gutter: 24px;
    --header-height: 82px;
    --nav-height: 40px;
    --topbar-height: 30px;
    --section-space-top: 18px;
    --section-space-bottom: 8px;

    /* Typography */
    --font-body: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Be Vietnam Pro", "Segoe UI", Roboto, Arial, sans-serif;
    --font-script: "Dancing Script", "Segoe Script", cursive;

    --text-xs: 12px;
    --text-sm: 13.5px;
    --text-body: 16px;
    --text-nav: 15px;
    --text-button: 15px;
    --text-card-title: 15.5px;
    --text-section-title: 32px;
    --text-consult-title: 36px;
    --text-hero-title: 60px;
    --text-hero-sub: 17px;

    /* Bo góc / đổ bóng */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 35, 63, 0.05);
    --shadow-md: 0 6px 18px rgba(16, 35, 63, 0.08);
    --shadow-lg: 0 14px 36px rgba(16, 35, 63, 0.14);

    --transition: 0.2s ease;
}