/* Giá đối thủ — design tokens (based on Gia Kho Design System).
   Rule: components use semantic tokens (--fg-*, --bg-*, --tone-*), never raw palette values. */
:root {
  /* ---- palette ---- */
  --yellow-500: #ffed00;   /* brand yellow: header, primary button, active segment, focus halo */
  --yellow-600: #ffe600;   /* primary hover */
  --yellow-700: #e6d300;   /* primary pressed */
  --amber-600:  #f2b800;   /* kicker dash (decor only) */
  --gray-0:   #ffffff;
  --gray-50:  #f6f7f8;
  --gray-100: #eceef0;
  --gray-200: #d9dcdf;
  --gray-300: #c3c6cb;
  --gray-400: #8a8d92;     /* 3.3:1 — borders/icons/decor only, never text */
  --gray-500: #6e7177;     /* 4.9:1 — smallest allowed text colour */
  --gray-700: #4a4d52;     /* 8.5:1 */
  --gray-900: #16171a;     /* 17.9:1 */
  --red-600:   #d92d30;  --red-700: #b42318;  --red-50: #fdf0f0;   --red-200: #f5cfd0;
  --amber-50:  #fff6e5;  --amber-200: #fbe1ad; --amber-800: #7a4f00; --amber-500: #f5a400;
  --green-700: #0e8040;  --green-50: #edf7f1;  --green-200: #c9e8d5;
  --blue-600:  #2563eb;  --blue-700: #1d4ed8;  --blue-50: #eef3fd;  --blue-200: #cddcfa;
  --orange-500:#ff8a00;

  /* ---- text: 3 readable tiers + disabled ---- */
  --fg-1: var(--gray-900);        /* titles, product names, prices */
  --fg-2: var(--gray-700);        /* body, labels, table text */
  --fg-3: var(--gray-500);        /* meta, captions, hints (min 12px) */
  --fg-disabled: var(--gray-400); /* placeholder only */
  --fg-on-yellow: var(--gray-900);
  --fg-on-dark: var(--gray-0);

  /* ---- surfaces & lines ---- */
  --bg-page: var(--gray-50);
  --bg-surface: var(--gray-0);
  --bg-muted: var(--gray-50);
  --bg-hover: var(--gray-100);
  --bg-own: #fffbd6;              /* Giá Kho column tint (yellow at ~15%) */
  --line-1: var(--gray-100);      /* card borders, row dividers */
  --line-2: var(--gray-200);      /* table header divider, strong divider */
  --line-control: var(--gray-400);/* input/select border (3:1 for UI controls) */
  --line-strong: var(--gray-900);

  /* ---- status tones (chip, tag, card dot, text) ---- */
  --tone-high-fg: var(--red-700);   --tone-high-bg: var(--red-50);   --tone-high-line: var(--red-200);   --tone-high-dot: var(--red-600);
  --tone-low-fg: var(--amber-800);  --tone-low-bg: var(--amber-50);  --tone-low-line: var(--amber-200);  --tone-low-dot: var(--amber-500);
  --tone-ok-fg: var(--green-700);   --tone-ok-bg: var(--green-50);   --tone-ok-line: var(--green-200);   --tone-ok-dot: var(--green-700);
  --tone-na-fg: var(--gray-500);    --tone-na-bg: var(--gray-50);    --tone-na-line: var(--gray-200);    --tone-na-dot: var(--gray-400);
  --tone-info-fg: var(--blue-700);  --tone-info-bg: var(--blue-50);  --tone-info-line: var(--blue-200);
  --tone-danger-solid: var(--red-600);   /* solid alert chip, white text 4.8:1 */
  /* price direction: competitor got cheaper = blue, pricier = orange (not red/green, colour-blind safe) */
  --dir-down: var(--blue-600);  --dir-up: var(--orange-500);
  /* GK vs competitor delta text */
  --delta-pricier: var(--red-700);   /* GK more expensive */
  --delta-cheaper: var(--green-700); /* GK cheaper */
  /* chart series */
  --series-own: var(--gray-900); --series-24h: var(--blue-600); --series-focus: var(--orange-500); --series-other: var(--gray-300);
  --band: rgba(22,23,26,.07);
  --highlight: var(--yellow-500);    /* best-price underline */

  /* ---- type ---- */
  --font-sans: "Be Vietnam Pro", "Roboto", -apple-system, system-ui, "Segoe UI", sans-serif;
  --t-display: 300 40px/1.2 var(--font-sans);   /* page title (strong part uses 800) */
  --t-display-m: 300 30px/1.25 var(--font-sans);
  --t-stat: 800 32px/1.15 var(--font-sans);     /* KPI numbers */
  --t-price-lg: 800 28px/1.2 var(--font-sans);
  --t-price: 700 20px/1.25 var(--font-sans);
  --t-h2: 600 18px/1.45 var(--font-sans);       /* card titles */
  --t-h3: 600 14px/1.4 var(--font-sans);        /* row titles, names */
  --t-body: 400 14px/1.6 var(--font-sans);      /* body, table cells */
  --t-label: 600 13px/1.4 var(--font-sans);     /* field labels, table headers */
  --t-caption: 400 12px/1.5 var(--font-sans);   /* meta, hints — smallest size used */
  --t-kicker: 600 12px/1.4 var(--font-sans);    /* uppercase eyebrow, letter-spacing .12em */
  --t-button: 700 13px/1 var(--font-sans);      /* uppercase, letter-spacing .06em */
  --t-chip: 600 12px/1.45 var(--font-sans);
  --t-nav: 500 14px/1 var(--font-sans);

  /* ---- space (4px grid) ---- */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

  /* ---- shape ---- */
  --r-pill: 9999px;  /* buttons, chips, segments, nav pills */
  --r-lg: 24px;      /* cards, panels */
  --r-md: 12px;      /* inner wells, highlighted rows */
  --r-sm: 8px;       /* inputs, selects */
  --r-xs: 4px;       /* bars, tiny marks */
  --bw: 1px; --bw-strong: 1.5px;

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(16,17,20,.04), 0 1px 3px rgba(16,17,20,.06);
  --shadow-2: 0 2px 4px rgba(16,17,20,.04), 0 4px 8px rgba(16,17,20,.06);
  --shadow-3: 0 4px 8px rgba(16,17,20,.05), 0 8px 16px rgba(16,17,20,.08);
  --shadow-yellow: 0 6px 16px rgba(255,210,0,.40), 0 2px 4px rgba(255,210,0,.25);
  --focus-ring: 0 0 0 3px rgba(255,237,0,.55);

  /* ---- layout ---- */
  --container: 1440px;
  --gutter: 32px;          /* page side padding */
  --gap: 24px;             /* gap between cards / grid columns */
  --header-h: 64px;
  --aside-w: 360px;        /* right column on split layouts */
  --control-h: 44px;       /* inputs, selects, toolbar row */
  --control-h-sm: 36px;    /* segments, small buttons */
}
@media (max-width: 700px) {
  :root { --gutter: 16px; --gap: 16px; }
}
:root {
  --zone-strong: rgba(14,128,64,.22);  /* optimal price zone (all rules) */
  --zone-soft: rgba(14,128,64,.08);    /* extension above the 24h cap, up to ClickBuy */
}