/*
 * MAG 2.0: token màu, khoảng cách, bo góc, font. Sinh từ mag-2.0-tokens.json, đừng sửa tay.
 * Nguồn gốc: MAG Marketing Hub apps/web/src/styles/tokens.css (master 36a8c64). Trang xem: https://claude.ai/artifact/DzpnwjFgFFhvFKSTcnFLRL
 * Bản tối: thêm data-theme="dark" lên <html>, hoặc để theo cài đặt máy (prefers-color-scheme).
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/Inter-Variable.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('fonts/InterTight-Variable.woff2') format('woff2'); }

:root {
  --mag-xanh: #1736f5;
  --mag-xanh-dam: #1430d0;
  --mag-xanh-nhat: #eef1fe;
  --lien-ket: #1736f5;
  --mag-vang: #f3c420;
  --mag-vang-nhat: #fbf1cf;
  --mag-vang-chu: #6b5300;
  --mag-navy: #0a0f2e;
  --nen: #ffffff;
  --nen-menu: #f7f7f8;
  --nen-chon: #ececee;
  --nen-mo: #f3f3f4;
  --vien: #e8e8ea;
  --vien-dam: #d9d9dc;
  --phu-mo: rgba(246, 246, 248, 0.72);
  --banner-nen: #fdf8ea;
  --banner-vien: #f3e6bd;
  --chu: #18181b;
  --chu-phu: #6b6b72;
  --chu-menu: #55555c;
  --icon-menu: #8a8a91;
  --chu-nhat: #9a9aa1;
  --nut-chinh: var(--mag-xanh);
  --nut-chinh-hover: var(--mag-xanh-dam);
  --nut-chinh-chu: #ffffff;
  --ok: #12805c;
  --ok-050: #e7f5ef;
  --warn: var(--mag-vang-chu);
  --danger: #c0392b;
  --danger-050: #fdecea;
  --st-slate: #475569;
  --st-slate-bg: #f0f0f2;
  --st-blue: #1736f5;
  --st-blue-bg: #eef1fe;
  --st-teal: #0e7490;
  --st-teal-bg: #e2f3f7;
  --st-green: #15803d;
  --st-green-bg: #e8f5ec;
  --st-amber: #6b5300;
  --st-amber-bg: #fbf1cf;
  --st-rose: #be123c;
  --st-rose-bg: #fdeaee;
  --st-violet: #6d28d9;
  --st-violet-bg: #f0eafd;
  --st-ink: #1f2937;
  --st-ink-bg: #e5e7eb;
  --bong-hop: 0 16px 48px rgba(16, 16, 24, 0.14), 0 2px 6px rgba(16, 16, 24, 0.06);
  --card-pad: 24px;
  --section-gap: 32px;
  --row-height: 44px;
  --nut-cao: 34px;
  --nut-cao-nho: 28px;
  --nut-cao-marketing: 44px;
  --o-nhap-cao: 36px;
  --topbar-h: 60px;
  --menu-rong: 256px;
  --menu-rail: 64px;
  --menu-hang-cao: 36px;
  --noi-dung-hep: 1160px;
  --content-max: 1560px;
  --le-trang: 24px;
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-o: 8px;
  --radius-chip: 6px;
  --radius-pill: 999px;
  --font: 'Inter', system-ui, sans-serif;
  --font-tieu-de: 'Inter Tight', 'Inter', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --mag-xanh: #3d5afe;
  --mag-xanh-dam: #4a66ff;
  --mag-xanh-nhat: #18204d;
  --lien-ket: #8fa0ff;
  --mag-vang: #ffc707;
  --mag-vang-nhat: #3a3010;
  --mag-vang-chu: #f0cf6a;
  --mag-navy: #0a0f2e;
  --nen: #0e1124;
  --nen-menu: #131731;
  --nen-chon: #1e2342;
  --nen-mo: #191d39;
  --vien: #272c4a;
  --vien-dam: #383e60;
  --phu-mo: rgba(8, 10, 24, 0.72);
  --banner-nen: #2a2410;
  --banner-vien: #4a3f1a;
  --chu: #f2f3f7;
  --chu-phu: #a6aabd;
  --chu-menu: #bfc2d0;
  --icon-menu: #81859b;
  --chu-nhat: #6c7088;
  --nut-chinh: var(--mag-xanh);
  --nut-chinh-hover: var(--mag-xanh-dam);
  --nut-chinh-chu: #ffffff;
  --ok: #4cc79a;
  --ok-050: #0f2a22;
  --warn: var(--mag-vang-chu);
  --danger: #ff8a7e;
  --danger-050: #3a1714;
  --st-slate: #a9b4c6;
  --st-slate-bg: #1f2336;
  --st-blue: #8fa0ff;
  --st-blue-bg: #18204d;
  --st-teal: #5cc8e0;
  --st-teal-bg: #0f2a33;
  --st-green: #5fd08a;
  --st-green-bg: #112a1b;
  --st-amber: #f0cf6a;
  --st-amber-bg: #3a3010;
  --st-rose: #ff8aa6;
  --st-rose-bg: #3a1420;
  --st-violet: #b79bff;
  --st-violet-bg: #261a45;
  --st-ink: #dfe3ea;
  --st-ink-bg: #2a2f45;
  --bong-hop: 0 16px 48px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --mag-xanh: #3d5afe;
  --mag-xanh-dam: #4a66ff;
  --mag-xanh-nhat: #18204d;
  --lien-ket: #8fa0ff;
  --mag-vang: #ffc707;
  --mag-vang-nhat: #3a3010;
  --mag-vang-chu: #f0cf6a;
  --mag-navy: #0a0f2e;
  --nen: #0e1124;
  --nen-menu: #131731;
  --nen-chon: #1e2342;
  --nen-mo: #191d39;
  --vien: #272c4a;
  --vien-dam: #383e60;
  --phu-mo: rgba(8, 10, 24, 0.72);
  --banner-nen: #2a2410;
  --banner-vien: #4a3f1a;
  --chu: #f2f3f7;
  --chu-phu: #a6aabd;
  --chu-menu: #bfc2d0;
  --icon-menu: #81859b;
  --chu-nhat: #6c7088;
  --nut-chinh: var(--mag-xanh);
  --nut-chinh-hover: var(--mag-xanh-dam);
  --nut-chinh-chu: #ffffff;
  --ok: #4cc79a;
  --ok-050: #0f2a22;
  --warn: var(--mag-vang-chu);
  --danger: #ff8a7e;
  --danger-050: #3a1714;
  --st-slate: #a9b4c6;
  --st-slate-bg: #1f2336;
  --st-blue: #8fa0ff;
  --st-blue-bg: #18204d;
  --st-teal: #5cc8e0;
  --st-teal-bg: #0f2a33;
  --st-green: #5fd08a;
  --st-green-bg: #112a1b;
  --st-amber: #f0cf6a;
  --st-amber-bg: #3a3010;
  --st-rose: #ff8aa6;
  --st-rose-bg: #3a1420;
  --st-violet: #b79bff;
  --st-violet-bg: #261a45;
  --st-ink: #dfe3ea;
  --st-ink-bg: #2a2f45;
  --bong-hop: 0 16px 48px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}