/* THÉP VÀNG — Design tokens (màu, chữ, khoảng cách, bo góc, đổ bóng, chuyển động). Đổi thương hiệu: sửa file này. */
:root{
  /* Màu thương hiệu */
  --tv-yellow:#F7B500;      /* vàng an toàn — nền nút, sọc, điểm nhấn */
  --tv-yellow-2:#FFC933;    /* hover */
  --tv-yellow-d:#8A6500;    /* vàng đậm cho chữ trên nền sáng (AA 4.6:1 trên #F7F7F5) */
  --tv-black:#121212;
  --tv-steel:#3C4247;       /* xám thép — chữ phụ, viền đậm */
  --tv-steel-2:#5A6168;
  --tv-concrete:#E6E6E2;    /* nền section bê tông */
  --tv-concrete-2:#D6D6D1;
  --tv-white:#F7F7F5;
  --tv-paper:#FFFFFF;
  --tv-red:#D0342C;         /* chỉ cho hết hàng / đang thuê / khẩn */
  --tv-red-d:#A8261F;
  --tv-green:#2E9E5B;       /* sẵn sàng */
  --tv-green-d:#1F7A44;     /* chữ xanh AA trên nền sáng */
  --tv-maint:#C77700;       /* bảo trì (cam) */

  /* Vai trò màu */
  --c-bg:var(--tv-white);
  --c-surface:var(--tv-paper);
  --c-text:var(--tv-black);
  --c-muted:var(--tv-steel);
  --c-line:#C9C9C3;
  --c-line-soft:#DEDED9;
  --c-focus:#0A62C9;
  --c-dark:var(--tv-black);
  --c-dark-2:#1C1E20;
  --c-dark-line:#34383C;
  --c-on-dark:#F2F2EE;
  --c-on-dark-muted:#B8BDC2;

  /* Chữ */
  --f-display:'Barlow Condensed','TV Condensed Fallback','Be Vietnam Pro','Arial Narrow',sans-serif;
  --f-body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --f-mono:'Roboto Mono',ui-monospace,'SFMono-Regular',Consolas,monospace;
  --fs-xs:13px; --fs-sm:14.5px; --fs-base:16.5px; --fs-lg:18px;
  --fs-h3:clamp(22px,2.1vw,28px);
  --fs-h2:clamp(30px,3.6vw,48px);
  --fs-h1:clamp(36px,5.4vw,76px);
  --lh-tight:1.02; --lh-head:1.08; --lh-body:1.62;
  --tracking-caps:.06em;

  /* Khoảng cách (thang 4px) */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px;
  --section:clamp(56px,7vw,104px);
  --gutter:16px;
  --wrap:1280px;
  --wrap-narrow:880px;
  --header-h:68px;

  /* Bo góc — công nghiệp: 2px */
  --r:2px; --r-0:0;

  /* Đổ bóng */
  --sh-1:0 1px 0 rgba(18,18,18,.08),0 1px 3px rgba(18,18,18,.08);
  --sh-2:0 8px 24px -8px rgba(18,18,18,.25);
  --sh-3:0 24px 60px -20px rgba(18,18,18,.45);
  --sh-inset:inset 0 0 0 1px var(--c-line);

  /* Sọc an toàn 45° */
  --stripe:repeating-linear-gradient(-45deg,var(--tv-yellow) 0 14px,var(--tv-black) 14px 28px);
  --stripe-h:8px;

  /* Chuyển động — tối giản, thực dụng */
  --t-fast:.15s; --t:.22s; --t-slow:.35s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-snap:cubic-bezier(.6,0,.2,1);

  /* Vùng chạm */
  --tap:44px;
}
@media (min-width:768px){:root{--gutter:24px;--header-h:76px}}
@media (min-width:1280px){:root{--gutter:32px}}
@media (min-width:1920px){:root{--wrap:1440px;--fs-base:17px}}
@media (prefers-reduced-motion:reduce){:root{--t-fast:0s;--t:0s;--t-slow:0s}}