/*
 * MAG app 2.0 — token của MAGi Báo giá.
 * Khối :root chép từ MAG Marketing Hub apps/web/src/styles/tokens.css (22/10/2026); đã bỏ các tên cũ / tàn dư
 * (--sidebar-*, --navy-900, --blue-*, --page, --border...) theo mục 7 của MAG app 2.0. Đổi ở Hub rồi chép lại. Font nạp từ Google Fonts trong base.html (không @font-face cục bộ).
 * Hai khối bản tối bên dưới là của MAGi (Hub chưa có bản tối): theo prefers-color-scheme hoặc data-theme="dark".
 */

:root {
  /* -- thương hiệu MAG --------------------------------------------------------------------- */
  --mag-xanh: #1736f5;
  --mag-xanh-dam: #1430d0;          /* hover nút chính */
  --mag-xanh-nhat: #eef1fe;         /* nền chọn, nền icon tròn */
  --mag-vang: #f3c420; /* MAG 2.0: vàng trên nền sáng, founder chốt 10/10/2026 (trước #dfb328) */
  --mag-vang-nhat: #fbf1cf;         /* nền chip "cần duyệt" */
  --mag-vang-chu: #6b5300;          /* chữ trên nền vàng nhạt: đủ tương phản AA */
  --mag-navy: #0a0f2e;

  /* -- bề mặt ------------------------------------------------------------------------------ */
  --nen: #ffffff;                   /* nền trang và thẻ */
  --nen-menu: #f7f7f8;              /* thanh menu trái, nền phụ */
  --nen-chon: #ececee;              /* mục menu đang chọn, hover hàng */
  --nen-mo: #f3f3f4;                /* hover nút phụ, ô xem trước font, ô màu trống */
  --vien: #e8e8ea;                  /* viền thẻ, đường kẻ */
  --vien-dam: #d9d9dc;              /* viền nút phụ, ô nhập */
  /* Nền sau hộp thoại: Blaze làm trang phía sau trắng mờ đi (ảnh create new.png), không phủ tối. */
  --phu-mo: rgba(246, 246, 248, 0.72);
  --bong-hop: 0 16px 48px rgba(16, 16, 24, 0.14), 0 2px 6px rgba(16, 16, 24, 0.06);

  /* -- chữ --------------------------------------------------------------------------------- */
  --chu: #18181b;
  --chu-phu: #6b6b72;
  --chu-menu: #55555c;              /* chữ mục menu chưa chọn (Blaze ~#555) */
  --icon-menu: #8a8a91;             /* icon tô đặc của mục chưa chọn: nhạt hơn chữ */
  --chu-nhat: #9a9aa1;              /* placeholder, chữ trên ô đã tắt */

  /* -- nút --------------------------------------------------------------------------------- */
  --nut-chinh: var(--mag-xanh);
  --nut-chinh-hover: var(--mag-xanh-dam);
  --nut-chinh-chu: #ffffff;
  --nut-cao: 34px;
  --nut-cao-nho: 28px;
  --o-nhap-cao: 36px;

  /* -- trạng thái (mức nghiêm trọng) ------------------------------------------------------- */
  --ok: #12805c;
  --ok-050: #e7f5ef;
  --warn: var(--mag-vang-chu);
  --danger: #c0392b;
  --danger-050: #fdecea;

  /* -- banner vàng kem kiểu Blaze ("Your posts aren't going out yet") ---------------------- */
  --banner-nen: #fdf8ea;
  --banner-vien: #f3e6bd;

  /*
   * -- dải màu trạng thái quy trình (03/10/2026) -------------------------------------------
   *
   * Dải RIÊNG với --ok/--warn/--danger: ba token đó là mức nghiêm trọng, chip lọc thì nói
   * trạng thái nào trong quy trình. Dùng chung sẽ làm "Chờ duyệt" đỏ lên như tài khoản bị khoá.
   */
  --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;

  /* -- thanh trên và thẻ bung -------------------------------------------------------------- */
  /* 60px như Blaze: tên trang 16px, các nút 34px, lề trên dưới 13px. */
  --topbar-h: 60px;
  --radius-pill: 999px;

  /* -- chữ --------------------------------------------------------------------------------- */
  /* Founder chốt 08/10/2026: Inter cho nội dung, Inter Tight cho tiêu đề; bỏ Montserrat và Be
     Vietnam Pro khỏi giao diện Hub (Be Vietnam Pro chỉ còn là font khách chọn trong Brand Kit). */
  --font: 'Inter', system-ui, sans-serif;
  --font-tieu-de: 'Inter Tight', 'Inter', system-ui, sans-serif; /* h1, h2, tiêu đề trang / mục */
  --font-hien-thi: var(--font-tieu-de); /* trang giới thiệu, chữ lớn */
  /*
   * Blaze dùng tiêu đề lớn ở độ đậm THƯỜNG (400): "Brand Style", "Upcoming posts". Đậm 700
   * như bản cũ làm trang nặng hẳn. (Ghi lúc còn Be Vietnam Pro, rộng hơn font Blaze; nay đã là Inter.) Thân chữ giữ
   * 14px thay vì 15px để một dòng bảng chứa được bằng ngần ấy chữ.
   */
  --fs-page-title: 24px;           /* Blaze "Brand Style" ~22-24px */
  --fs-section: 20px;
  --fs-card-title: 16px;
  --fs-body: 14px;
  --fs-menu: 13.5px;               /* Blaze: chữ menu nhỏ, xám; mục đang chọn mới đậm và đen */
  --fs-meta: 13px;
  --fs-chip: 12px;
  --lh-body: 1.55;
  --dam-tieu-de: 500;
  --dam-the: 500;

  /* -- hình khối và nhịp ------------------------------------------------------------------- */
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-o: 8px;                  /* ô nhập, ô màu, chip TagInput */
  --card-pad: 24px;
  --section-gap: 32px;
  --row-height: 44px;
  --content-max: 1560px;            /* màn cũ, bảng dày: giữ nguyên bề rộng */
  --noi-dung-hep: 1160px;           /* màn mới kiểu Blaze: hẹp, căn giữa, khoảng trắng hai bên */

  /* -- thanh menu trái --------------------------------------------------------------------- */
  /* Menu mới: 256px như Blaze, luôn mở; dưới 1100px thu thành dải icon --menu-rail. */
  --menu-rong: 256px;
  --menu-rail: 64px;
  --menu-hang-cao: 36px;
}

/* Thêm cho MAGi (không có ở Hub). */
:root {
  --lien-ket: var(--mag-xanh);
  --radius-chip: 6px;
}

@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;
}