/* ==========================================================================
   Gym & Yoga Bến Thành — biến thương hiệu
   Đổi các giá trị ở đây là đổi toàn bộ giao diện. Không cần sửa index.html.
   ========================================================================== */
:root{
  /* --- bảng màu (5 màu + 1 accent) --- */
  --nen:#FBFBF9;         /* nền trang — trắng ngà, không dùng #FFFFFF */
  --muc:#17191C;         /* chữ chính — không dùng #000000 */
  --cam:#E0561F;         /* accent: nút, giá, số liệu lớn, chip còn chỗ */
  --cam-dam:#B8410F;     /* cam đậm — chữ nhỏ màu cam trên nền sáng (đạt AA) */
  --cam-sang:#FF8A4C;    /* cam sáng — chữ màu cam trên nền than/tối (đạt AA) */
  --than:#243746;        /* xanh than phụ — footer, utility bar, nhãn phụ */
  --card:#F0F1EE;        /* nền thẻ, hàng bảng, vùng nhấn nhẹ */

  /* --- chữ phụ, đường kẻ --- */
  --muc-nhat:#5A6068;    /* chữ phụ trên nền sáng (đạt AA) */
  --duong:#DFE1DC;       /* đường kẻ mảnh */
  --duong-nhat:#EAEBE7;

  /* --- màu tiện ích --- */
  --xanh:#1F7A3D;        /* chip "còn chỗ" */
  --do:#C0392B;          /* chip "hết chỗ", lỗi biểu mẫu */
  --zalo:#0068FF;
  --messenger:#0084FF;

  /* --- phông chữ (đều an toàn dấu tiếng Việt) --- */
  --display:'Montserrat','Be Vietnam Pro',sans-serif;  /* tiêu đề, wordmark */
  --than-chu:'Be Vietnam Pro',sans-serif;              /* nội dung, nút, biểu mẫu */
  --mono:'IBM Plex Mono',ui-monospace,monospace;       /* giờ lớp, giá, nhãn */

  /* --- bo góc: hệ (b) — 8px thẻ, 999px chip --- */
  --bo:8px;
  --bo-chip:999px;

  /* --- bố cục --- */
  --le:clamp(1rem,3.5vw,2.5rem);        /* trục lề trái/phải dùng chung */
  --rong:80rem;                          /* bề ngang tối đa của nội dung */
  --khoang:clamp(2.5rem,5.5vw,3.5rem);   /* nhịp giữa các khối — mật độ VN, không thoáng */

  --muot:cubic-bezier(.16,1,.3,1);
}