/* ============================================================
   Dezon Brand Tokens — trích xuất từ dezon.vn (theme decox)
   Dùng cho business.dezon.vn (static HTML). Prefix --dz-*.
   Nguồn màu/typography: CSS live của dezon.vn (2026-07).
   ============================================================ */
:root {
  /* --- Brand / Accent (tông THẬT của Dezon = xanh dương) --- */
  --dz-accent:            #094bf4;   /* royal blue: link/CTA/highlight (a{color} chủ đạo dezon.vn) */
  --dz-accent-hover:      #0737c4;   /* tối hơn cho hover */
  --dz-accent-soft:       #e8eeff;   /* nền xanh nhạt (badge/chip/icon-bg) */
  --dz-accent-2:          #0d6efd;   /* xanh nút bootstrap (biến thể) */
  --dz-fav:               #ff3b5c;   /* CHỈ cho tim/Yêu thích — KHÔNG phải brand */
  --dz-blue:              #5897fb;   /* xanh phụ: viền/nút outline */
  --dz-blue-strong:       #1e88e5;   /* Additional-Blue-200 */
  --dz-aqua:              #116b97;   /* Additional-Aqua-200 (teal) */
  --dz-aqua-bg:           #f0fbff;   /* Additional-Aqua-0 */

  /* --- Neutrals (Greyscale ramp gốc dezon) --- */
  --dz-white:             #ffffff;   /* Greyscale-0 */
  --dz-grey-25:           #fafafa;
  --dz-grey-50:           #f5f5f5;
  --dz-grey-100:          #e5e5e5;
  --dz-grey-200:          #d4d4d4;
  --dz-grey-300:          #a3a3a3;
  --dz-grey-400:          #737373;
  --dz-grey-500:          #525252;
  --dz-grey-600:          #404040;
  --dz-grey-700:          #262626;
  --dz-grey-800:          #171717;
  --dz-grey-900:          #0a0a0a;
  --dz-black:             #18181b;   /* Base-Black */
  --dz-divider:           #efeff0;   /* Light-Other-Divider */

  /* --- Semantic --- */
  --dz-text:              #09090b;   /* Text-primary-light */
  --dz-text-muted:        #4d4d4d;   /* Neutral-02 */
  --dz-text-subtle:       #737373;   /* grey-400 */
  --dz-bg:                #ffffff;
  --dz-bg-alt:            #fafafa;   /* section nền xám nhạt */
  --dz-border:            #e5e5e5;
  --dz-success:           #198754;
  --dz-danger:            #dc3545;
  --dz-warning:           #ffc107;
  --dz-info:              #0dcaf0;

  /* --- Typography --- */
  --dz-font-display: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --dz-font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;

  --dz-fw-medium: 500;
  --dz-fw-bold:   700;

  /* Type scale (rem) — dùng clamp cho responsive */
  --dz-fs-hero:  clamp(2.25rem, 5vw, 3.75rem);  /* 36 → 60 */
  --dz-fs-h1:    clamp(2rem, 4vw, 3rem);         /* 32 → 48 */
  --dz-fs-h2:    clamp(1.5rem, 3vw, 2.25rem);    /* 24 → 36 */
  --dz-fs-h3:    1.5rem;                          /* 24 */
  --dz-fs-lead:  1.25rem;                         /* 20 */
  --dz-fs-body:  1rem;                            /* 16 */
  --dz-fs-sm:    0.875rem;                        /* 14 */
  --dz-lh-tight: 1.15;
  --dz-lh-base:  1.6;

  /* --- Spacing scale --- */
  --dz-space-1: 0.25rem;
  --dz-space-2: 0.5rem;
  --dz-space-3: 0.75rem;
  --dz-space-4: 1rem;
  --dz-space-6: 1.5rem;
  --dz-space-8: 2rem;
  --dz-space-12: 3rem;
  --dz-space-16: 4rem;
  --dz-space-24: 6rem;      /* padding dọc của section lớn */
  --dz-container: 1200px;   /* bề rộng nội dung tối đa */

  /* --- Radius (Bootstrap-5 base của decox) --- */
  --dz-radius-sm:  0.25rem;
  --dz-radius:     0.375rem;
  --dz-radius-lg:  0.5rem;
  --dz-radius-xl:  1rem;
  --dz-radius-2xl: 2rem;
  --dz-radius-pill: 50rem;

  /* --- Elevation --- */
  --dz-shadow-sm: 0 1px 2px rgba(9,9,11,.06);
  --dz-shadow:    0 4px 16px rgba(9,9,11,.08);
  --dz-shadow-lg: 0 12px 32px rgba(9,9,11,.12);

  /* --- Motion --- */
  --dz-ease: cubic-bezier(.4,0,.2,1);
  --dz-dur:  .2s;
}

/* Nạp font Inter Tight từ chính dezon.vn (hoặc copy về local để tự chủ) */
@font-face{
  font-family:"Inter Tight"; font-weight:500; font-style:normal; font-display:swap;
  src:url("https://dezon.vn/wp-content/themes/decox/assets/fonts/decoxfonts/InterTight-Medium.woff2") format("woff2");
}
@font-face{
  font-family:"Inter Tight"; font-weight:700; font-style:normal; font-display:swap;
  src:url("https://dezon.vn/wp-content/themes/decox/assets/fonts/decoxfonts/InterTight-Bold.woff2") format("woff2");
}

/* --- Base --- */
body{ font-family:var(--dz-font-body); font-size:var(--dz-fs-body); line-height:var(--dz-lh-base); color:var(--dz-text); background:var(--dz-bg); }
h1,h2,h3,h4,.dz-display{ font-family:var(--dz-font-display); font-weight:var(--dz-fw-bold); line-height:var(--dz-lh-tight); color:var(--dz-text); }
a{ color:var(--dz-accent); text-decoration:none; }
a:hover{ color:var(--dz-accent-hover); }
.dz-container{ max-width:var(--dz-container); margin-inline:auto; padding-inline:var(--dz-space-4); }
.dz-section{ padding-block:var(--dz-space-24); }
.dz-section--alt{ background:var(--dz-bg-alt); }

/* --- Buttons --- */
.dz-btn{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--dz-font-display); font-weight:var(--dz-fw-medium);
  padding:.75rem 1.5rem; border-radius:var(--dz-radius-pill); border:1.5px solid transparent; cursor:pointer;
  transition:background var(--dz-dur) var(--dz-ease), color var(--dz-dur) var(--dz-ease), border-color var(--dz-dur) var(--dz-ease); }
.dz-btn--primary{ background:var(--dz-accent); color:#fff; }
.dz-btn--primary:hover{ background:var(--dz-accent-hover); color:#fff; }
.dz-btn--outline{ background:transparent; color:var(--dz-text); border-color:var(--dz-grey-300); }
.dz-btn--outline:hover{ border-color:var(--dz-text); }
.dz-btn--ghost{ background:transparent; color:var(--dz-accent); }