/* ─────────────────────────────────────────────────────────────
   NHA KHOA THIỆN AN — biến thương hiệu
   Phòng khám nha khoa 6 ghế, Phú Nhuận, TP.HCM.

   Toàn bộ giá trị thương hiệu nằm trong một khối :root duy nhất.
   File này được nạp TRƯỚC thẻ <style> trong index.html, nên phần
   CSS nội tuyến có thể ghi đè khi cần.
   Đổi màu / font / bo góc: sửa ở đây, không cần đụng index.html.
   ───────────────────────────────────────────────────────────── */
:root{

  /* ── Nền & bề mặt ─────────────────────────────────────────
     Đăng ký sáng, y khoa nhưng không lạnh. Nền không bao giờ
     là #FFFFFF thuần.                                          */
  --nen:#F7FAFC;           /* nền trang                          */
  --card:#FFFFFE;          /* thẻ, bảng giá, form                */
  --card-2:#EDF4F7;        /* bề mặt phụ: hover, dải xen kẽ      */

  /* ── Màu chữ ──────────────────────────────────────────────
     --xam-lam đạt AA trên nền: 5.32:1. Không làm nhạt hơn.     */
  --muc:#0F2233;           /* chữ chính                          */
  --xam-lam:#5B6E7C;       /* chữ phụ, nhãn mono, chú thích      */

  /* ── Màu nhấn ─────────────────────────────────────────────
     Một màu nhấn duy nhất: nút, số liệu, chip, hover.
     --xanh-dam dùng cho chữ nhỏ (đạt AA trên nền sáng).        */
  --xanh:#0E7C86;          /* xanh y tế — nền nút, mảng lớn      */
  --xanh-dam:#0A5C64;      /* chữ nhỏ màu nhấn, hover            */
  --xanh-nhat:#DCEEF0;     /* nền chip, mảng nhạt                */

  /* ── Đường kẻ ─────────────────────────────────────────────── */
  --ke:rgba(15,34,51,.13);
  --ke-2:rgba(15,34,51,.07);

  /* ── Font ─────────────────────────────────────────────────
     Cả ba đều có bộ dấu tiếng Việt đầy đủ. Không dùng serif
     mảnh (Cormorant, Playfair…) — dấu thanh sẽ vỡ hoặc chồng. */
  --display:'Be Vietnam Pro',system-ui,sans-serif;   /* tiêu đề  */
  --than:'Inter',system-ui,sans-serif;               /* nội dung */
  --mono:'IBM Plex Mono',ui-monospace,monospace;     /* nhãn, mã */

  /* ── Bo góc ───────────────────────────────────────────────
     Hệ (b): 12px cho thẻ/ảnh, 999px cho chip và nút.
     Tuyệt đối không dùng 4px — đó là dấu hiệu template rẻ tiền. */
  --bo:12px;
  --bo-chip:999px;

  /* ── Bố cục ───────────────────────────────────────────────── */
  --khung:1180px;                      /* bề ngang nội dung tối đa */
  --le:clamp(16px,4vw,40px);           /* lề trang theo bậc        */
  --section-y-tight:40px;              /* dải mỏng                 */
  --section-y-base:56px;               /* dải tiêu chuẩn           */

  /* ── Chuyển động ──────────────────────────────────────────
     Một đường cong duy nhất cho toàn trang. Không dùng `ease`. */
  --ease:cubic-bezier(.16,1,.3,1);
}