/* =====================================================================
   9Hits Documentation - lớp token thương hiệu cho MkDocs Material.

   Cách hoạt động: `mkdocs.yml` đặt `primary: custom` + `accent: custom`, Material in ra
   `data-md-color-primary="custom"` / `data-md-color-accent="custom"` trên <body>. Không có
   rule dựng sẵn nào khớp giá trị "custom" -> toàn bộ màu lấy từ file này. Không fork theme,
   không thư mục overrides.

   Nguồn màu (đừng tự chế màu mới, lấy đúng ở đây):
     - Dashboard  web/frontend/src/lib/themePresets.ts        preset "Sunset (9Hits)" #f97316
     - Dashboard  web/frontend/src/providers/AppProviders.tsx sider #1b1b1f / #e4e6eb, radius 4
     - Landing    web/home/public/css/style-6.css:7-23        accent #fc603b, nền #0b0d12
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap');

/* ------------------------------------------------------------------ *
 * 1. Màu chủ đạo và màu nhấn (dùng chung cho cả dark lẫn light)
 * ------------------------------------------------------------------ */
[data-md-color-primary='custom'] {
  --md-primary-fg-color: #f97316;          /* cam Sunset của dashboard */
  --md-primary-fg-color--light: #fb923c;
  --md-primary-fg-color--dark: #ea580c;
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: rgba(255, 255, 255, 0.7);
}

[data-md-color-accent='custom'] {
  --md-accent-fg-color: #fc603b;           /* cam đỏ của landing */
  --md-accent-fg-color--transparent: rgba(252, 96, 59, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}

/* ------------------------------------------------------------------ *
 * 2. Dark (scheme slate) - bám sát dashboard
 * ------------------------------------------------------------------ */
[data-md-color-scheme='slate'] {
  --md-default-bg-color: #0e1117;          /* nền trang, ~ --bg-2 của landing */
  --md-default-bg-color--light: #12161f;
  --md-default-bg-color--lighter: #171c28;
  --md-default-fg-color: #eef1f7;
  --md-default-fg-color--light: #aeb6c4;   /* chữ thân bài */
  --md-default-fg-color--lighter: #7d8696; /* chú thích, placeholder */
  --md-default-fg-color--lightest: rgba(148, 163, 184, 0.16);

  --md-code-bg-color: #12161f;
  --md-code-fg-color: #cfd5e1;

  --md-typeset-color: #aeb6c4;
  --md-typeset-a-color: #ff9a62;           /* link sáng hơn accent để đọc được trên nền tối */

  --md-footer-bg-color: #0b0d12;
  --md-footer-bg-color--dark: #0a0c10;

  /* Sidebar: LẤY ĐÚNG màu sider của dashboard, không phải nền trang. Đây là chi tiết khiến
     tài liệu "nhìn cùng một sản phẩm" với panel. */
  --nh-sidebar-bg: #1b1b1f;
  --nh-sidebar-nested-bg: #141416;
  --nh-border: rgba(148, 163, 184, 0.16);
  --nh-border-soft: rgba(148, 163, 184, 0.09);
  --nh-surface: #12161f;
}

/* Header cùng tông sidebar thay vì đổ cam kín - cam để dành cho link và nút. */
[data-md-color-scheme='slate'] .md-header {
  background-color: var(--nh-sidebar-bg);
  border-bottom: 1px solid var(--nh-border);
}
[data-md-color-scheme='slate'] .md-tabs {
  background-color: var(--nh-sidebar-bg);
  border-bottom: 1px solid var(--nh-border);
}

/* ------------------------------------------------------------------ *
 * 3. Light (scheme default)
 * ------------------------------------------------------------------ */
[data-md-color-scheme='default'] {
  --md-typeset-a-color: #ea580c;

  /* Panel light dùng #e4e6eb cho sider (AppProviders.tsx), KHÔNG phải #f5f5f5 như
     web/CLAUDE.md ghi - ghi chú đó đã cũ, tin code. */
  --nh-sidebar-bg: #e4e6eb;
  --nh-sidebar-nested-bg: #d8dbe0;
  --nh-border: rgba(15, 23, 42, 0.12);
  --nh-border-soft: rgba(15, 23, 42, 0.07);
  --nh-surface: #f6f7f9;
}

[data-md-color-scheme='default'] .md-header,
[data-md-color-scheme='default'] .md-tabs {
  background-color: #1b1b1f;               /* header tối ở cả hai theme, giống landing */
  color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * 4. Chữ
 * ------------------------------------------------------------------ */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__topic,
.md-nav__title {
  font-family: Montserrat, 'Poppins', Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  color: var(--md-default-fg-color);
  font-size: 2rem;
  line-height: 1.2;
}

/* Gạch chân nhỏ dưới H2, mượn từ landing (style-6.css: 56x3px gradient). */
.md-typeset h2 {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--nh-border-soft);
}

/* ------------------------------------------------------------------ *
 * 5. Sidebar và điều hướng
 * ------------------------------------------------------------------ */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-sidebar__scrollwrap {
    background-color: var(--nh-sidebar-bg);
    border-radius: 4px;
  }
  .md-sidebar--primary .md-nav__list .md-nav__list {
    background-color: var(--nh-sidebar-nested-bg);
    border-radius: 4px;
  }

  /* Mục con của một nhóm (navigation.sections) thụt vào so với tên nhóm (chốt 2026-10-08).
     Material cố ý cho chúng thẳng hàng với tên nhóm: list nào cũng có padding .6rem nhưng
     `.md-nav__item--section > .md-nav` bị kéo ngược margin -.6rem. Ở đây chỉ nới PADDING của list
     con thêm .6rem (đúng một nấc thụt mà Material dùng cho nhóm thu gọn như "Campaign", nên mọi cấp
     cùng một nhịp), KHÔNG đổi margin: nền tối của list con giữ nguyên chỗ, chỉ chữ dịch vào. */
  [dir='ltr'] .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list {
    padding-left: 1.2rem;
  }
  [dir='rtl'] .md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list {
    padding-right: 1.2rem;
  }
}

.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--md-accent-fg-color);
}

/* ------------------------------------------------------------------ *
 * 6. Bo góc 4px - khớp `borderRadius: 4` của AntD
 * ------------------------------------------------------------------ */
.md-typeset pre > code,
.md-typeset .highlight,
.md-typeset .admonition,
.md-typeset details,
.md-typeset table:not([class]),
.md-typeset .tabbed-set > .tabbed-content {
  border-radius: 4px;
}

/* ------------------------------------------------------------------ *
 * 7. Bảng - tài liệu này nhiều bảng tham chiếu, phải dễ quét mắt
 * ------------------------------------------------------------------ */
.md-typeset table:not([class]) {
  border: 1px solid var(--nh-border);
  font-size: 0.72rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--nh-surface);
  font-family: Montserrat, sans-serif;
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* Bảng rộng phải tự cuộn ngang, KHÔNG được đẩy cả trang cuộn ngang. */
.md-typeset__table {
  overflow-x: auto;
}

/* ------------------------------------------------------------------ *
 * 8. Nút và thẻ trên trang chủ
 * ------------------------------------------------------------------ */
.md-typeset .md-button {
  border-radius: 4px;
  font-family: Montserrat, sans-serif;
  font-weight: 600;
}

.md-typeset .md-button--primary {
  background: linear-gradient(120deg, #f97316 0%, #fc603b 60%, #ff9a62 100%);
  border-color: transparent;
  color: #ffffff;
}

/* Lưới thẻ "chọn lối đi" ở trang chủ và các trang index. */
.nh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.8rem;
  margin: 1.2rem 0;
}

.nh-card {
  padding: 0.9rem 1rem;
  border: 1px solid var(--nh-border-soft);
  border-radius: 8px;
  background-color: var(--nh-surface);
  transition: border-color 0.2s, transform 0.2s;
}

.nh-card:hover {
  border-color: rgba(252, 96, 59, 0.45);
  transform: translateY(-2px);
}

.nh-card > :first-child {
  margin-top: 0;
}

.nh-card > :last-child {
  margin-bottom: 0;
}

.nh-card h3 {
  font-size: 0.9rem;
  margin: 0 0 0.3rem;
}

/* Khung video 16:9, dùng chung cho iframe YouTube lẫn thẻ <video> tự host. Cách nhúng và giới hạn
   CSP: AUTHORING.md mục 2, phần Video. */
.nh-video {
  aspect-ratio: 16 / 9;
  margin: 1em 0;
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--nh-surface);
}

.nh-video iframe,
.nh-video video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ------------------------------------------------------------------ *
 * 9. Lớp tiện ích - GIỮ LẠI, các trang cũ đang dùng
 * ------------------------------------------------------------------ */
.txt-success { color: #01c853; }
.txt-warning { color: #fec107; }
.txt-danger  { color: #ff2a00; }

/* Nhãn gói, dùng khi một tuỳ chọn chỉ có ở gói nào đó. Màu tier CỐ ĐỊNH toàn hệ:
   VIP đỏ, PREMIUM xanh lá (web/CLAUDE.md, src/lib/tier.ts). */
.nh-tier {
  display: inline-block;
  padding: 0.05em 0.45em;
  border-radius: 3px;
  border: 1px solid currentcolor;
  font-family: Montserrat, sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.nh-tier--vip { color: #e11d48; }
.nh-tier--premium { color: #10b981; }
.nh-tier--regular { color: var(--md-default-fg-color--lighter); }

/* Icon đánh dấu hàm macro chạy khác trong campaign 9Hits (cờ `exchange` của macro-api.json), đặt
   ngay sau tên hàm; nghĩa nằm ở `title` (tooltip). Do scripts/gen-reference.mjs sinh trong bảng và
   kiểm trên heading của trang reference viết tay. Icon vẽ bằng mask nên ăn màu `color`; SVG lấy từ
   bộ Material Design Icons của theme (cancel, minus-circle-outline, alert-circle-outline). */
.nh-exch {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.25em;
  vertical-align: -0.15em;
  background-color: currentcolor;
  -webkit-mask: var(--nh-exch-icon) center / contain no-repeat;
  mask: var(--nh-exch-icon) center / contain no-repeat;
  cursor: help;
}
.nh-exch--blocked {
  color: #ea580c;
  --nh-exch-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2m0 2c-1.9 0-3.6.6-4.9 1.7l11.2 11.2c1-1.4 1.7-3.1 1.7-4.9 0-4.4-3.6-8-8-8m4.9 14.3L5.7 7.1C4.6 8.4 4 10.1 4 12c0 4.4 3.6 8 8 8 1.9 0 3.6-.6 4.9-1.7"/></svg>');
}
.nh-exch--noop {
  color: #ca8a04;
  --nh-exch-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2M7 13h10v-2H7"/></svg>');
}
.nh-exch--altered {
  color: #ca8a04;
  --nh-exch-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm1-5C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8"/></svg>');
}

/* ------------------------------------------------------------------ *
 * 10. Cuộn - khớp biến --sb-* của panel (frontend/src/index.css)
 * ------------------------------------------------------------------ */
[data-md-color-scheme='slate'] ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.2);
}
[data-md-color-scheme='slate'] ::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.32);
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}