/* 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 */
  --x3-container:1400px;
  --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;
}