/* 3X-BOND — design tokens.
   Dùng cho CSS mới viết (hover, base, khối B/C/D).
   KHÔNG thay thế giá trị hex trong inline style của markup — inline giữ nguyên văn theo quyết định Đ1. */
:root{
  /* Thương hiệu */
  --x3-red:#d8232a;
  --x3-red-hover:#b81b22;
  --x3-red-deep:#c1121a;
  --x3-gold:#f2b31a;
  --x3-gold-hover:#dda012;
  --x3-gold-dark:#d79b0e;
  --x3-green:#2e6b1d;
  --x3-green-light:#4ca22f;

  /* Nền */
  --x3-bg-page:#faf7f0;
  --x3-bg-card:#ffffff;
  --x3-bg-green-soft:#f2f9ed;
  --x3-bg-cream:#f6f2ea;
  --x3-bg-cream-2:#f0ebe0;
  --x3-bg-sand:#e6e0d4;
  --x3-bg-dark:#1d1d21;
  --x3-bg-header:#16161a;
  --x3-bg-dealer-hero:#2a0d10;

  /* Chữ */
  --x3-ink:#1c1c1e;
  --x3-ink-2:#4a4a52;
  --x3-ink-3:#6c6c72;
  --x3-on-dark:#ffffff;
  --x3-on-dark-2:#c9c9d1;
  --x3-on-dark-3:#a6a6b0;

  /* Viền */
  --x3-border:#ece8e0;
  --x3-border-input:#ded8cc;
  --x3-border-row:#f2efe8;
  --x3-border-green:#cfe6c2;

  /* Zalo */
  --x3-zalo:#0a72ef;
  --x3-zalo-hover:#0960cb;
  --x3-zalo-soft:#eaf3ff;
  --x3-zalo-soft-2:#eef5ff;

  /* Lỗi */
  --x3-err-bg:#fdeceb;
  --x3-err-bg-2:#fdecec;
  --x3-err-border:#f3bfbd;
  --x3-err-text:#b81b22;

  /* Bo góc */
  --x3-r-sm:8px;
  --x3-r-md:12px;
  --x3-r-lg:16px;
  --x3-r-pill:999px;

  /* Đổ bóng */
  --x3-sh-card:0 12px 30px rgba(28,28,30,.06);
  --x3-sh-float:0 18px 40px rgba(28,28,30,.07);
  --x3-sh-cta:0 12px 26px rgba(216,35,42,.3);

  /* Bố cục */
  /* Khung nội dung: chữ và lưới rộng tối đa 1120px ở mọi màn hình (thiết kế
     chuẩn theo laptop 1120px); màn rộng hơn chỉ căn giữa. Lề hai bên nằm
     trong khung nên max-width = 1120 + 2 lề. */
  --x3-content:1120px;
  --x3-gutter:clamp(16px,3vw,40px);
  --x3-container:calc(var(--x3-content) + 2 * var(--x3-gutter));
  --x3-pad-x:clamp(16px,3vw,40px);
  --x3-pad-y:clamp(40px,4.6vw,72px);
  --x3-gap-section:clamp(44px,5vw,80px);
  --x3-header-h:110px;

  /* Chạm */
  --x3-touch:44px;
  --x3-touch-cta:52px;

  /* ---- G2: thang chữ (ke-hoach-uiux Giai đoạn 1) ----
     Giới hạn: H1 ở laptop tối đa ~44px, H2 tối đa ~32px. */
  --x3-font-head:Archivo,'Be Vietnam Pro',system-ui,sans-serif;
  --x3-font-body:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  --x3-fs-h1:clamp(30px,3.4vw,44px);
  --x3-fs-h2:clamp(24px,2.6vw,32px);
  --x3-fs-h3:clamp(18px,1.6vw,21px);
  --x3-fs-lead:clamp(16px,1.25vw,18px);
  --x3-fs-body:16px;
  --x3-fs-small:14px;
  --x3-fs-label:12.5px;
  --x3-lh-head:1.15;
  --x3-lh-body:1.7;
  /* Độ đậm: tiêu đề 800, nhãn 700, thân 400–500. Không dùng 900. */
  --x3-fw-head:800;
  --x3-fw-label:700;
  --x3-fw-body:400;
  --x3-fw-strong:600;
  /* Khoảng cách theo thang 4/8 */
  --x3-s-1:4px;
  --x3-s-2:8px;
  --x3-s-3:12px;
  --x3-s-4:16px;
  --x3-s-5:24px;
  --x3-s-6:32px;
  --x3-s-7:48px;
  --x3-s-8:64px;
  /* Khoảng đệm section: laptop 56–72px, điện thoại ~40px */
  --x3-section-y:clamp(40px,5vw,72px);
}