/* ==========================================================================
   NxWiki Manual — Modern documentation layout
   Inspired by Stripe Docs / Linear / Mintlify UX patterns.
   ========================================================================== */

/* Break out of Frappe web.html padding when full_width=1 */
.nxwiki-body .page-breadcrumbs,
.nxwiki-body .page-header-wrapper { display: none !important; }

/* Force every wrapper ancestor to full viewport width */
body.nxwiki-body,
body.nxwiki-body > div,
body.nxwiki-body .page-content-wrapper,
body.nxwiki-body main,
body.nxwiki-body .page_content {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  /* 2026-08-21: wrapper Frappe giữa body và trang có thể tự sơn nền trắng — ép theo theme, tránh lộ nền sáng quanh wrapper hẹp (vd .nxwiki-module-page max-width 1100px) */
  background-color: var(--nx-color-bg);
}
body.nxwiki-body {
  min-width: 100vw;
  /* BUGFIX 2026-08-19 (theme toggle chỉ đổi text, không đổi nền) — trước đây
     KHÔNG khối nào trong file gán background-color cho <body>/<html>, nên khi
     đổi `data-nxwiki-theme` chỉ các biến --nx-color-* cập nhật nhưng không có
     phần tử nào tiêu thụ --nx-color-bg ở tầng root để phủ nền toàn viewport —
     browser giữ nguyên nền UA mặc định (trắng). */
  background-color: var(--nx-color-bg);
  /* THEME AUDIT 2026-08-20 — `color-scheme` báo UA render native controls
     (checkbox task-list, nút clear input search, scrollbar) đúng theme. Mặc
     định light; các rule dark bên dưới (attr + fallback) đè lên. Scope
     `body.nxwiki-body` vì manual.css include GLOBAL mọi website page
     (hooks.py web_include_css) — không được ảnh hưởng trang ngoài /manual. */
  color-scheme: light;
}

:root {
  --nx-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --nx-font-mono: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;

  --nx-color-bg: #ffffff;
  --nx-color-bg-soft: #f7f8fa;
  --nx-color-bg-code: #f5f7f9;
  --nx-color-fg: #1a2027;
  --nx-color-fg-muted: #5c6b7a;
  --nx-color-fg-subtle: #8a96a3;
  --nx-color-border: #e5e8ec;
  --nx-color-border-strong: #d1d6dc;
  /* Đỏ NxCom — #c41e2f, mã hex chính thức (Owner xác nhận 2026-07-10). */
  --nx-color-primary: #c41e2f;
  --nx-color-primary-bg: #fdecec;
  --nx-color-accent: #a8172a;
  --nx-color-warning: #92620a;
  --nx-color-warning-bg: #fdf3de;
  --nx-color-warning-border: #f0dca6;

  --nx-radius-sm: 4px;
  --nx-radius-md: 6px;
  --nx-radius-lg: 10px;

  --nx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --nx-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  /* THEME AUDIT 2026-08-20 — token hoá các literal từng nằm rải rác cấp
     component (giá trị light GIỮ NGUYÊN đúng literal cũ, chỉ gom về đây để
     override được trong dark): overlay = scrim drawer mobile, overlay-strong =
     backdrop search modal, mark = highlight <b class="match"> Whoosh trong
     snippet kết quả tìm kiếm, shadow-lg = panel search modal, shadow-card-hover
     = module card (biến này trước đây được THAM CHIẾU nhưng chưa từng khai báo
     — chỉ chạy nhờ fallback literal), shadow-pill = nút active view switcher. */
  --nx-color-overlay: rgba(15, 23, 42, 0.45);
  --nx-color-overlay-strong: rgba(15, 23, 42, 0.55);
  --nx-color-mark-bg: rgba(250, 204, 21, 0.35);
  --nx-color-mark-fg: var(--nx-color-fg);
  --nx-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.25);
  --nx-shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
  --nx-shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.08);
  /* Bóng mép khung cuộn ngang của bảng (`.nxwiki-table-scroll`) — nền TỐI cần
     bóng SÁNG, bóng đen alpha thấp gần như vô hình (cùng lý do THEME AUDIT). */
  --nx-table-scroll-shadow: rgba(16, 24, 40, 0.16);

  --nx-sidebar-w: 260px;
  --nx-toc-w: 220px;
  --nx-content-max: 760px;
  --nx-header-offset: 80px;
}

/* Light/dark/system toggle (Owner duyệt 2026-08-19, xem
   working/jobs/2026-08-19_nxwiki-ui-redesign/01_proposal.md mục 3.3) — namespace
   riêng `data-nxwiki-theme` (KHÔNG dùng `data-theme` trơn, Frappe Desk tự dùng
   `data-theme` trên <html> cho dark mode riêng, tránh đụng độ). Set bởi script
   đồng bộ `nxwiki/templates/includes/theme_init.html` (chống FOUC) + toggle
   `manual.js::attachThemeToggle()`. */
:root[data-nxwiki-theme="dark"] {
  --nx-color-bg: #0e1116;
  --nx-color-bg-soft: #151a21;
  --nx-color-bg-code: #1b2129;
  --nx-color-fg: #e6edf3;
  --nx-color-fg-muted: #9aa6b2;
  --nx-color-fg-subtle: #6b7785;
  --nx-color-border: #222831;
  --nx-color-border-strong: #2d3540;
  --nx-color-primary: #6ba2ff;
  --nx-color-primary-bg: rgba(107, 162, 255, 0.12);
  --nx-color-accent: #8fb7ff;
  --nx-color-warning: #e8c477;
  --nx-color-warning-bg: rgba(232, 196, 119, 0.12);
  --nx-color-warning-border: rgba(232, 196, 119, 0.35);
  /* THEME AUDIT 2026-08-20 — token bổ sung (xem chú thích khối :root). Shadow
     đen alpha thấp gần vô hình trên nền tối → tăng độ đậm; mark vàng hạ alpha
     nền + chữ vàng nhạt #fde68a (chuyển từ override cấp component cũ về đây). */
  --nx-color-overlay: rgba(0, 0, 0, 0.6);
  --nx-color-overlay-strong: rgba(0, 0, 0, 0.7);
  --nx-color-mark-bg: rgba(250, 204, 21, 0.2);
  --nx-color-mark-fg: #fde68a;
  --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --nx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
  --nx-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
  --nx-shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.55);
  --nx-shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.5);
  --nx-table-scroll-shadow: rgba(255, 255, 255, 0.24);
  /* Scrollbar gốc (html) theo dark — attr này CHỈ tồn tại trên /manual
     (theme_init.html chỉ include ở 3 trang manual) nên đặt cấp :root an toàn. */
  color-scheme: dark;
}

/* Native controls + icon sprite Frappe khi theme dark (THEME AUDIT 2026-08-20).
   `--icon-stroke`: Frappe css_variables.scss đặt `var(--gray-900)` (gần đen)
   toàn cục cho sprite `<svg class="icon"><use>` (module nav/card/badge, hamburger
   navbar...) → trên nền tối icon tàng hình. Light GIỮ NGUYÊN mặc định Frappe. */
:root[data-nxwiki-theme="dark"] body.nxwiki-body {
  color-scheme: dark;
  --icon-stroke: var(--nx-color-fg);
}

/* Fallback — giữ nguyên hành vi cũ (auto theo OS) khi script `theme_init.html`
   không chạy được (script blocker...). `:not([data-nxwiki-theme])` đảm bảo rule
   này KHÔNG đè lên lựa chọn tường minh light/dark của user (chỉ áp dụng khi chưa
   từng set attribute — tức JS init chưa chạy). */
@media (prefers-color-scheme: dark) {
  :root:not([data-nxwiki-theme]) {
    --nx-color-bg: #0e1116;
    --nx-color-bg-soft: #151a21;
    --nx-color-bg-code: #1b2129;
    --nx-color-fg: #e6edf3;
    --nx-color-fg-muted: #9aa6b2;
    --nx-color-fg-subtle: #6b7785;
    --nx-color-border: #222831;
    --nx-color-border-strong: #2d3540;
    --nx-color-primary: #6ba2ff;
    --nx-color-primary-bg: rgba(107, 162, 255, 0.12);
    --nx-color-accent: #8fb7ff;
    --nx-color-warning: #e8c477;
    --nx-color-warning-bg: rgba(232, 196, 119, 0.12);
    --nx-color-warning-border: rgba(232, 196, 119, 0.35);
    --nx-color-overlay: rgba(0, 0, 0, 0.6);
    --nx-color-overlay-strong: rgba(0, 0, 0, 0.7);
    --nx-color-mark-bg: rgba(250, 204, 21, 0.2);
    --nx-color-mark-fg: #fde68a;
    --nx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --nx-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.55);
    --nx-shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.7);
    --nx-shadow-card-hover: 0 2px 8px rgba(0, 0, 0, 0.55);
    --nx-shadow-pill: 0 1px 2px rgba(0, 0, 0, 0.5);
    --nx-table-scroll-shadow: rgba(255, 255, 255, 0.24);
    /* KHÔNG đặt `color-scheme`/`--icon-stroke` ở selector :root trơn này —
       manual.css include GLOBAL (hooks.py web_include_css), khối fallback match
       CẢ trang website ngoài /manual khi OS dark; biến --nx-* trơ (không ai
       tiêu thụ ngoài .nxwiki-*) nên vô hại, nhưng color-scheme/--icon-stroke
       tác động UA controls + icon Frappe của trang khác → scope body bên dưới. */
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body {
    color-scheme: dark;
    --icon-stroke: var(--nx-color-fg);
  }
}

/* Reset lite — chỉ cho NxWiki scope */
.nxwiki-shell,
.nxwiki-landing,
.nxwiki-module-page {
  font-family: var(--nx-font-body);
  color: var(--nx-color-fg);
  /* BUGFIX 2026-08-19 — cùng nguyên nhân với body.nxwiki-body ở đầu file: 3 wrapper
     gốc (trang doc `.nxwiki-shell`, index `.nxwiki-landing`, trang module
     `.nxwiki-module-page` — bổ sung 2026-08-21, trước đó bị sót làm /manual/module/*
     trắng toàn trang ở dark mode) trước đây
     chỉ đổi màu chữ (color) theo theme, không phủ nền theo --nx-color-bg. */
  background-color: var(--nx-color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Shell — 3-column grid layout
   ========================================================================== */

/* `grid-template-areas` tường minh (Owner duyệt 2026-08-19, xem
   working/jobs/2026-08-19_nxwiki-ui-redesign/01_proposal.md mục 2.2) — thay cho
   auto-placement ngầm định theo thứ tự DOM cũ. KHÔNG cần đổi thứ tự HTML: mỗi
   phần tử con chỉ cần khai `grid-area`, vị trí thị giác do CSS quyết định, không
   phụ thuộc thứ tự khai báo trong .html (an toàn hơn sửa markup). `.nxwiki-modal`/
   `.nxwiki-popover` (position: fixed/absolute) và `.nxwiki-drawer-overlay`/
   `.nxwiki-sidebar` khi đã là drawer KHÔNG tham gia grid item (spec CSS Grid loại
   trừ phần tử out-of-flow) nên gán `grid-area` cho chúng luôn an toàn dù có lúc
   "area" đó không tồn tại ở breakpoint hiện tại. */
.nxwiki-shell {
  display: grid;
  grid-template-columns: var(--nx-sidebar-w) minmax(0, 1fr) var(--nx-toc-w);
  grid-template-areas: "toolbar toolbar toolbar" "sidebar main toc";
  gap: 3rem;
  max-width: none;
  margin: 0;
  padding: 1rem 1rem 2rem;
  align-items: start;
}

.nxwiki-mobile-topbar { grid-area: topbar; }
/* Thanh công cụ dùng chung 3 trang (2026-09-08): trên trang tài liệu nó là 1 hàng
   riêng trải hết lưới; ở landing/module không có lưới nên `grid-area` bị bỏ qua —
   cùng 1 class, không cần rẽ nhánh. */
.nxwiki-hero-toolbar { grid-area: toolbar; }
/* Cụm điều hướng của trang (quay lại / đổi view) ở lại mép TRÁI; `margin-right:
   auto` đẩy cụm công cụ toàn site về phải. Gom vị trí công cụ mà kéo luôn nút
   "quay lại" sang phải là đẻ ra chỗ lệch mới cùng họ: trang tài liệu để lối quay
   lại ở mép trái (breadcrumb), trang module lại để bên phải. */
.nxwiki-toolbar-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: auto;
}
.nxwiki-sidebar { grid-area: sidebar; }
.nxwiki-main { grid-area: main; }
.nxwiki-toc { grid-area: toc; }

/* Compact (Owner duyệt 2026-08-19, mục 2.2) — gộp 2 breakpoint cũ (768px sidebar
   drawer + 1024px TOC dropdown) về DUY NHẤT 1024px, xoá "dead zone" 769-1024px
   (trước đây sidebar vẫn cột cố định 260px trong khi khung nhìn chỉ còn
   600-900px). Sidebar LUÔN là drawer, TOC LUÔN là dropdown trong toàn dải này.
   TOC đặt NGAY SAU topbar (trước cả nội dung `.nxwiki-main` — bên trong đó mới
   tới breadcrumb/badge/article) — không còn kẹt cuối trang dưới cả pager
   prev/next như bug cũ (xem rủi ro #5 proposal — TESTER1 cần verify lại
   768-1024px vì đây là THAY ĐỔI HÀNH VI có chủ đích, không phải side-effect). */
@media (max-width: 1024px) {
  .nxwiki-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "toolbar" "toc" "sidebar" "main";
    gap: 1.5rem;
    padding: 1rem;
  }
  /* `.nxwiki-toc { position: static; ... }` override đặt ở mục "TOC (right)" bên
     dưới (cạnh `.nxwiki-toc-heading` compact rule), KHÔNG đặt ở đây — cascade CSS
     lấy rule cuối cùng trong file khi 2 selector cùng specificity đều match; rule
     base `.nxwiki-toc { position: sticky }` (không có @media) nằm SAU vị trí này
     trong file, nên nếu override đặt tại đây sẽ bị base rule "thắng ngược" (bug
     tồn tại sẵn trong bản gốc trước khi job này — sửa luôn vì đang chạm đúng
     vùng code này, không đổi Ý ĐỊNH thiết kế, chỉ làm đúng ý định cũ hoạt động
     thật). */
}

/* ==========================================================================
   Mobile top bar + off-canvas drawer (hamburger)
   Phase 1 navigation #4 — trước đây sidebar chỉ đổi từ sticky sang static,
   dồn hết cây trang lên đầu nội dung. Giờ sidebar trở thành drawer trượt từ
   trái, ẩn mặc định trên mobile, mở qua nút hamburger.
   ========================================================================== */

.nxwiki-mobile-topbar {
  display: none;
}

/* Breakpoint đồng bộ với sidebar drawer/TOC dropdown ở trên (1024px, thay 768px
   cũ) — sidebar chỉ mở được qua nút hamburger trong topbar này, nên topbar PHẢI
   hiện ra ở cùng ngưỡng sidebar trở thành drawer (nếu không, 769-1024px sẽ có
   drawer nhưng không có nút mở nó). `grid-column: 1 / -1` cũ bỏ — đã thay bằng
   `grid-area: topbar` khai báo chung ở trên (áp dụng mọi breakpoint, kể cả
   desktop nơi topbar `display: none` nên không ảnh hưởng gì). */
@media (max-width: 1024px) {
  .nxwiki-mobile-topbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0 0.75rem;
    border-bottom: 1px solid var(--nx-color-border);
    margin-bottom: 0.5rem;
  }
  .nxwiki-mobile-topbar-title {
    font-weight: 600;
    color: var(--nx-color-fg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.nxwiki-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--nx-color-bg);
  color: var(--nx-color-fg);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  cursor: pointer;
}
.nxwiki-nav-toggle:hover { background: var(--nx-color-bg-soft); }

.nxwiki-drawer-overlay {
  display: none;
}

@media (max-width: 1024px) {
  .nxwiki-drawer-overlay[hidden] { display: none !important; }
  .nxwiki-drawer-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 900;
    background: var(--nx-color-overlay);
  }

  /* Drawer: mặc định trượt ra khỏi màn hình bên trái, .is-open kéo vào */
  .nxwiki-drawer {
    position: fixed !important;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 950;
    width: 85vw;
    max-width: 320px;
    max-height: none !important;
    background: var(--nx-color-bg);
    border-right: 1px solid var(--nx-color-border);
    box-shadow: var(--nx-shadow-md);
    padding: 1.25rem 1rem;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }
  .nxwiki-drawer.is-open {
    transform: translateX(0);
  }
}

body.nxwiki-drawer-open { overflow: hidden; }

/* ==========================================================================
   Sidebar (left)
   ========================================================================== */

.nxwiki-sidebar {
  position: sticky;
  top: var(--nx-header-offset);
  max-height: calc(100vh - var(--nx-header-offset) - 1rem);
  overflow-y: auto;
  padding-right: 0.5rem;
  font-size: 0.9rem;
}

.nxwiki-sidebar-section + .nxwiki-sidebar-section {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nx-color-border);
}

.nxwiki-sidebar-heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nx-color-fg-subtle);
  margin-bottom: 0.5rem;
  padding: 0 0.5rem;
}

.nxwiki-sidebar-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nxwiki-sidebar-link {
  display: block;
  padding: 0.35rem 0.6rem;
  margin: 0.1rem 0;
  border-radius: var(--nx-radius-sm);
  color: var(--nx-color-fg-muted);
  text-decoration: none;
  line-height: 1.4;
  transition: background 0.12s, color 0.12s;
}

.nxwiki-sidebar-link:hover {
  background: var(--nx-color-bg-soft);
  color: var(--nx-color-fg);
  text-decoration: none;
}

.nxwiki-sidebar-link.is-active {
  background: var(--nx-color-primary-bg);
  color: var(--nx-color-primary);
  font-weight: 500;
}

.nxwiki-sidebar-group {
  margin-top: 0.75rem;
}

/* Phase 1 navigation #2 — sidebar folder collapse/expand.
   `.nxwiki-sidebar-group-title` trước là <div> tĩnh, giờ là <summary> của
   <details data-group-path>. Bỏ marker mặc định của trình duyệt, tự vẽ caret. */
.nxwiki-sidebar-details {
  margin-top: 0.5rem;
}

.nxwiki-sidebar-group-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nx-color-fg);
  padding: 0.35rem 0.6rem;
  cursor: pointer;
  border-radius: var(--nx-radius-sm);
  list-style: none;
  user-select: none;
}
.nxwiki-sidebar-group-title::-webkit-details-marker { display: none; }
.nxwiki-sidebar-group-title::marker { content: ""; }
.nxwiki-sidebar-group-title:hover { background: var(--nx-color-bg-soft); }
.nxwiki-sidebar-group-title::before {
  content: "";
  flex-shrink: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 5px;
  border-color: transparent transparent transparent var(--nx-color-fg-subtle);
  transition: transform 0.12s ease;
}
.nxwiki-sidebar-details[open] > .nxwiki-sidebar-group-title::before {
  transform: rotate(90deg);
}

.nxwiki-sidebar-details .nxwiki-sidebar-list {
  padding-left: 0.5rem;
  border-left: 1px solid var(--nx-color-border);
  margin-left: 0.6rem;
}

/* ==========================================================================
   Main content
   ========================================================================== */

.nxwiki-main {
  min-width: 0;
  max-width: var(--nx-content-max);
  margin: 0 auto;
  width: 100%;
}

.nxwiki-breadcrumb {
  font-size: 0.85rem;
  color: var(--nx-color-fg-muted);
  margin-bottom: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.nxwiki-breadcrumb a {
  color: var(--nx-color-fg-muted);
  text-decoration: none;
}
.nxwiki-breadcrumb a:hover { color: var(--nx-color-primary); }
.nxwiki-breadcrumb span[aria-hidden] { color: var(--nx-color-fg-subtle); }

/* Segment "app" (link thứ 2, vd "EupApp") — bọc riêng để ẩn gọn trên mobile hẹp
   (Owner duyệt 2026-08-19, mục 2.4 proposal): trùng lặp với
   `.nxwiki-mobile-topbar-title` đã hiện cùng tên app ngay phía trên. Chỉ ẩn
   <=768px (KHÔNG đồng bộ với breakpoint 1024px compact khác — mobile-topbar chỉ
   thật sự hiện tên app rõ ràng ở <=768px, xem `.nxwiki-mobile-topbar-title`).
   Cấu trúc breadcrumb (Manual › app › ...segments) GIỮ NGUYÊN, chỉ ẩn hiển thị. */
.nxwiki-breadcrumb-app-segment {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
@media (max-width: 768px) {
  .nxwiki-breadcrumb-app-segment { display: none; }
}

.nxwiki-feature-badge {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.3rem 0.75rem;
  background: var(--nx-color-primary-bg);
  color: var(--nx-color-primary);
  border-radius: 999px;
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}
.nxwiki-feature-badge code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: 0.8rem;
}
.nxwiki-feature-badge a {
  color: inherit;
  text-decoration: none;
  font-weight: 600;
}
.nxwiki-feature-badge a:hover { text-decoration: underline; }

.nxwiki-lang-missing-banner {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.65rem 0.9rem;
  background: var(--nx-color-warning-bg);
  border: 1px solid var(--nx-color-warning-border);
  color: var(--nx-color-warning);
  border-radius: var(--nx-radius-md);
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.nxwiki-lang-missing-banner svg { flex: none; margin-top: 0.15rem; }

/* Nút "Hiện bản {lang} (tạm)" — click-to-reveal (ADR 2026-07-14). Nội dung
   `<article hidden>` đã render sẵn server-side, nút chỉ toggle [hidden] —
   không round-trip. 1 chiều: bấm xong tự ẩn nút (xem app.html script). */
.nxwiki-lang-reveal-btn {
  margin-left: 0.4rem;
  padding: 0.15rem 0.6rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nx-color-warning);
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-warning-border);
  border-radius: var(--nx-radius-md);
  cursor: pointer;
}
.nxwiki-lang-reveal-btn:hover {
  background: var(--nx-color-warning);
  color: var(--nx-color-bg);
}

/* Marker `*` thiếu bản dịch — nav marker (ADR 2026-07-14), gắn ở sidebar
   (app.html macro render_tree_items) và module doc list (module.html). Tái
   dùng `--nx-color-warning` sẵn có (cùng biến banner ở trên), KHÔNG thêm màu
   mới (ADR §4.2 nhấn mạnh điểm này). */
.nxwiki-missing-lang-mark {
  color: var(--nx-color-warning);
  font-size: 0.75em;
  margin-left: 0.15em;
  cursor: help;
}

/* Nhãn type bilingual "(Loại)" cạnh Title — sidebar (app.html macro
   render_tree_items + item root) và module page (module.html). Owner phản
   hồi 2026-07-15 (shared-working/2026-07-15_nxwiki-fab-i18n-typelabel/_meta.md).
   Chữ thường, màu muted — phân biệt rõ với `.nxwiki-tag` (badge pill riêng
   ở module.html) và `.nxwiki-missing-lang-mark` (cảnh báo). */
.nxwiki-doc-type-label {
  font-weight: 400;
  font-size: 0.85em;
  color: var(--nx-color-fg-muted);
}

/* ==========================================================================
   Article prose
   ========================================================================== */

.nxwiki-article {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--nx-color-fg);
}

.nxwiki-article > *:first-child { margin-top: 0; }
.nxwiki-article > *:last-child { margin-bottom: 0; }

.nxwiki-heading {
  scroll-margin-top: calc(var(--nx-header-offset) + 1rem);
  position: relative;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nx-color-fg);
  letter-spacing: -0.01em;
}

.nxwiki-article h1.nxwiki-heading {
  font-size: 2rem;
  margin: 0 0 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--nx-color-border);
  letter-spacing: -0.02em;
}

.nxwiki-article h2.nxwiki-heading {
  font-size: 1.5rem;
  margin: 2.5rem 0 0.75rem;
}

.nxwiki-article h3.nxwiki-heading {
  font-size: 1.2rem;
  margin: 2rem 0 0.5rem;
}

.nxwiki-article h4.nxwiki-heading {
  font-size: 1rem;
  margin: 1.5rem 0 0.5rem;
  color: var(--nx-color-fg-muted);
}

.nxwiki-anchor {
  position: absolute;
  left: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--nx-color-fg-subtle);
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.12s;
}
.nxwiki-heading:hover .nxwiki-anchor,
.nxwiki-anchor:focus {
  opacity: 1;
}
.nxwiki-anchor:hover { color: var(--nx-color-primary); text-decoration: none; }

.nxwiki-article p {
  margin: 0 0 1rem;
}

.nxwiki-article a {
  color: var(--nx-color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s;
}
.nxwiki-article a:hover {
  border-bottom-color: var(--nx-color-primary);
  text-decoration: none;
}

.nxwiki-article ul,
.nxwiki-article ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}
.nxwiki-article li { margin-bottom: 0.35rem; }
.nxwiki-article li > ul,
.nxwiki-article li > ol { margin-top: 0.35rem; margin-bottom: 0.35rem; }

.nxwiki-article strong { font-weight: 600; color: var(--nx-color-fg); }

/* Inline code */
.nxwiki-article code {
  font-family: var(--nx-font-mono);
  font-size: 0.875em;
  padding: 0.15em 0.4em;
  background: var(--nx-color-bg-code);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-sm);
  color: var(--nx-color-fg);
}

/* Code blocks */
.nxwiki-article pre {
  background: var(--nx-color-bg-code);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0 0 1.25rem;
}
.nxwiki-article pre code {
  padding: 0;
  background: transparent;
  border: none;
  font-size: inherit;
}

/* ==========================================================================
   Chống tràn ngang — token dài không có chỗ ngắt
   ==========================================================================
   Cùng gốc bệnh với bảng, chỉ khác bề mặt: một chuỗi dài không có khoảng trắng
   (tên hàm `nxhermes.api.messaging_user.aggregate_x`, đường dẫn module, URL)
   không ngắt được nên đẩy tràn cả THÂN TRANG. Đo trên 250 tài liệu /manual
   thật ở khổ 360px: 32 tài liệu tràn vì `code` nội dòng (nhiều nhất +352px),
   cộng vài tài liệu nữa vì token dài trong văn bản/`<strong>` trong danh sách.

   Dùng `break-word`, KHÔNG dùng `anywhere` — có chủ đích: `anywhere` còn làm
   giảm min-content của ô bảng ⇒ đổi hình học bảng ở màn hình rộng.
   `break-word` chỉ ngắt khi token thật sự không vừa một dòng, không đụng
   min-content (đã đối chiếu từng cột của 575 bảng ở 768/1024/1440px: 0 lệch).

   `pre` trả về `normal`: khối mã ĐÃ có khung cuộn riêng (`overflow-x: auto`),
   ngắt dòng ở đó sẽ làm sai lệch lệnh mà người đọc định copy. */
.nxwiki-article { overflow-wrap: break-word; }
.nxwiki-article pre { overflow-wrap: normal; }

/* Tables — Stripe/GitHub style */

/* Khung cuộn ngang riêng cho bảng (`.nxwiki-table-scroll` do renderer bọc quanh
   mỗi <table> — xem `nxwiki/utils/markdown.py::_wrap_tables`).

   VẤN ĐỀ ĐÃ ĐO ĐƯỢC (Chromium, đúng file CSS này, 250 tài liệu /manual thật):
   ở khổ 360px có 91/250 tài liệu làm THÂN TRANG cuộn ngang, 86 trong đó do
   bảng; tràn nhiều nhất +1133px. Nguyên nhân: chiều rộng dùng thật của bảng
   auto-layout luôn >= min-content của nó, nên `width: 100%` không hề chặn được
   — bảng chỉ vừa BỊ BÓP (ô hẹp nhất 37px, ô cao nhất 649px → cột thành dải
   ruy-băng) vừa ĐẨY TRÀN cả trang.

   Cách chữa: bảng giữ NGUYÊN `width: 100%` (màn hình rộng không đổi một pixel),
   phần rộng dôi ra cuộn TRONG khung bọc này, thân trang không cuộn ngang. */
.nxwiki-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  margin: 0 0 1.5rem;
  /* Bóng mép cuộn (kỹ thuật background-attachment: local) — cho người đọc BIẾT
     là còn cột bên phải. Không cần JS. Khi bảng KHÔNG tràn, hai lớp gradient
     màu nền (local) nằm đè đúng lên hai lớp bóng (scroll) nên bóng tàng hình
     ⇒ bảng hẹp ở màn hình rộng không đổi hình thức. */
  background:
    linear-gradient(to right, var(--nx-color-bg) 30%, rgba(0, 0, 0, 0)) left center,
    linear-gradient(to left, var(--nx-color-bg) 30%, rgba(0, 0, 0, 0)) right center,
    radial-gradient(farthest-side at 0 50%, var(--nx-table-scroll-shadow), rgba(0, 0, 0, 0)) left center,
    radial-gradient(farthest-side at 100% 50%, var(--nx-table-scroll-shadow), rgba(0, 0, 0, 0)) right center;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Khung cuộn được focus bằng bàn phím khi (và chỉ khi) thật sự có thể cuộn —
   `manual.js::attachTableScrollA11y` gắn/gỡ tabindex theo kết quả đo. Không có
   nó, người dùng bàn phím không có cách nào tới được các cột bị khuất. */
.nxwiki-table-scroll:focus-visible {
  outline: 2px solid var(--nx-color-primary);
  outline-offset: 2px;
}

.nxwiki-article table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.5rem;
  font-size: 0.925rem;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  overflow: hidden;
}
/* Lề dưới chuyển lên khung bọc — tránh cộng dồn 2 lần. */
.nxwiki-table-scroll > table { margin: 0; }

/* CHỈ khổ điện thoại (<768px — dưới ngưỡng tablet của nxwiki, nên tablet và
   desktop KHÔNG đổi một pixel nào: đã đối chiếu bề rộng, danh sách cột và cả
   chiều cao của 575 bảng ở 768/1024/1440px, 0 lệch).

   Chỉ bọc khung cuộn thôi thì chưa đủ: bảng vẫn nằm ở đúng min-content của nó,
   mỗi cột co về đúng "từ dài nhất", nên cột nhãn ngắn biến thành dải ruy-băng
   cao (đo được ở 320px: 654 ô ruy-băng / 119 tài liệu, ô cao nhất 674px).

   Sàn 8rem (128px) cho mỗi ô là mức can thiệp NHỎ NHẤT có tác dụng, và nó tự
   phân loại đúng hai kiểu bảng mà không cần biết trước bảng nào là bảng nào:
   - bảng văn xuôi 2-3 cột: tổng sàn 256-384px, vẫn vừa khung ⇒ chữ XUỐNG DÒNG
     như hiện nay, KHÔNG phát sinh cuộn ngang;
   - bảng ma trận 5-7 cột nhãn ngắn: tổng sàn vượt khung ⇒ cuộn trong khung
     riêng, hết bóp.
   Đã thử phương án `width: max-content` (cho bảng dãn theo nội dung): diệt
   ruy-băng triệt để hơn (còn 20 ô) NHƯNG bắt cả bảng văn xuôi phải cuộn ngang
   để đọc hết MỘT DÒNG chữ — 565/575 bảng cuộn thay vì 377. Đổi một lỗi khó đọc
   lấy một lỗi khó đọc khác, nên bỏ. Số đo của phương án đang dùng: ruy-băng
   654 ô/119 tài liệu → 41 ô/16 tài liệu ở 320px. */
@media (max-width: 767px) {
  .nxwiki-table-scroll > table th,
  .nxwiki-table-scroll > table td {
    min-width: 8rem;
  }
}
.nxwiki-article th {
  background: var(--nx-color-bg-soft);
  font-weight: 600;
  text-align: left;
  padding: 0.6rem 0.875rem;
  border-bottom: 1px solid var(--nx-color-border);
  color: var(--nx-color-fg);
}
.nxwiki-article td {
  padding: 0.6rem 0.875rem;
  border-bottom: 1px solid var(--nx-color-border);
  vertical-align: top;
}
.nxwiki-article tr:last-child td { border-bottom: none; }

/* Blockquote */
.nxwiki-article blockquote {
  margin: 0 0 1.25rem;
  padding: 0.75rem 1.25rem;
  border-left: 3px solid var(--nx-color-primary);
  background: var(--nx-color-primary-bg);
  color: var(--nx-color-fg);
  border-radius: 0 var(--nx-radius-md) var(--nx-radius-md) 0;
}
.nxwiki-article blockquote p:last-child { margin-bottom: 0; }

/* Horizontal rule */
.nxwiki-article hr {
  border: none;
  height: 1px;
  background: var(--nx-color-border);
  margin: 2.5rem 0;
}

/* Images */
.nxwiki-article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--nx-radius-md);
  margin: 1rem 0;
}

/* PlantUML diagram — rendered via PUML server */
.nxwiki-puml {
  margin: 1.25rem 0;
  padding: 1rem;
  background: var(--nx-color-bg-soft);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  text-align: center;
  overflow-x: auto;
}
.nxwiki-puml img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}
:root[data-nxwiki-theme="dark"] .nxwiki-puml {
  background: #fff; /* SVG PUML mặc định nền trắng — giữ trong tile sáng để diagram rõ */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-nxwiki-theme]) .nxwiki-puml {
    background: #fff;
  }
}

/* YouTube embeds — 16:9 responsive */
.nxwiki-embed-youtube {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  margin: 1.25rem 0;
  border-radius: var(--nx-radius-md);
  overflow: hidden;
  /* #000 CHỦ ĐÍCH (THEME AUDIT 2026-08-20) — letterbox video luôn đen ở cả
     light lẫn dark (convention player video), KHÔNG theme hoá. */
  background: #000;
}
.nxwiki-embed-youtube iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Task lists */
.nxwiki-article input[type="checkbox"] {
  margin-right: 0.4rem;
  vertical-align: middle;
}

/* ==========================================================================
   Pager (prev/next)
   ========================================================================== */

.nxwiki-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--nx-color-border);
}

.nxwiki-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  color: var(--nx-color-fg);
  text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.nxwiki-pager-link:hover {
  border-color: var(--nx-color-primary);
  background: var(--nx-color-primary-bg);
  text-decoration: none;
}
.nxwiki-pager-next { text-align: right; }
.nxwiki-pager-dir {
  font-size: 0.8rem;
  color: var(--nx-color-fg-muted);
}
/* Cụm "(xếp theo loại)" phải nằm TRỌN một dòng. Cột chữ của nút trước/sau hẹp
   (đo được 366px @1440, 129px @390) nên để chảy tự do là nó ngắt giữa cụm —
   @1440 thành "…(xếp / theo loại)", @390 thành 4 dòng, dấu "(" mồ côi cuối dòng.
   Đây là chỗ chỉ lộ ra khi nhìn ô thật, không lộ ra khi đọc câu chữ. */
.nxwiki-pager-mode { white-space: nowrap; }

.nxwiki-pager-title {
  font-weight: 600;
  color: var(--nx-color-fg);
}

/* ==========================================================================
   TOC (right)
   ========================================================================== */

.nxwiki-toc {
  position: sticky;
  top: var(--nx-header-offset);
  max-height: calc(100vh - var(--nx-header-offset) - 1rem);
  overflow-y: auto;
  font-size: 0.85rem;
}

/* `.nxwiki-toc-heading` trước là <div>, giờ là <summary> của
   <details class="nxwiki-toc-details" open> (Phase 1 navigation #6). Ở
   desktop (>1024px) hiện y hệt heading cũ (luôn "open" mặc định); ở
   tablet/mobile trở thành nút dropdown có thể thu gọn. */
.nxwiki-toc-heading {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--nx-color-fg-subtle);
  margin-bottom: 0.5rem;
  list-style: none;
  cursor: default;
}
.nxwiki-toc-heading::-webkit-details-marker { display: none; }
.nxwiki-toc-heading::marker { content: ""; }

@media (max-width: 1024px) {
  /* Đặt SAU rule base `.nxwiki-toc { position: sticky }` ở trên (cùng specificity
     — cascade lấy rule cuối trong file) để override thật sự có hiệu lực (xem chú
     thích ở mục "Shell"). TOC không còn sticky ở compact — nằm tĩnh ngay sau
     topbar (grid-area "toc"), cuộn trôi cùng trang như nội dung khác, KHÔNG pin
     lại giữa chừng. */
  .nxwiki-toc {
    position: static;
    max-height: none;
    margin-top: 0;
  }
  .nxwiki-toc-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0;
    background: var(--nx-color-bg-soft);
    border: 1px solid var(--nx-color-border);
    border-radius: var(--nx-radius-md);
  }
  .nxwiki-toc-heading::after {
    content: "▾";
    color: var(--nx-color-fg-subtle);
    transition: transform 0.12s ease;
  }
  .nxwiki-toc-details[open] > .nxwiki-toc-heading::after {
    transform: rotate(180deg);
  }
  .nxwiki-toc-details .nxwiki-toc-list {
    margin-top: 0.5rem;
    max-height: 40vh;
    overflow-y: auto;
  }
}

.nxwiki-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-left: 1px solid var(--nx-color-border);
}

.nxwiki-toc-item a {
  display: block;
  padding: 0.25rem 0.75rem;
  margin-left: -1px;
  color: var(--nx-color-fg-muted);
  text-decoration: none;
  border-left: 1px solid transparent;
  line-height: 1.4;
  transition: color 0.12s, border-color 0.12s;
}
.nxwiki-toc-item a:hover {
  color: var(--nx-color-fg);
  text-decoration: none;
}
.nxwiki-toc-item a.is-active {
  color: var(--nx-color-primary);
  border-left-color: var(--nx-color-primary);
}
.nxwiki-toc-item.is-level-3 a { padding-left: 1.5rem; }

/* ==========================================================================
   Toolbar — compact icon buttons (search + language)
   ========================================================================== */

.nxwiki-toolbar {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.nxwiki-hero-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.nxwiki-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.75rem;
  background: var(--nx-color-bg);
  color: var(--nx-color-fg-muted);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
}
.nxwiki-toolbar-btn:hover {
  color: var(--nx-color-fg);
  background: var(--nx-color-bg-soft);
  border-color: var(--nx-color-border-strong);
}
.nxwiki-toolbar-btn svg { flex-shrink: 0; }

/* Gợi ý phím tắt `/` vô nghĩa trên thiết bị cảm ứng — ẩn đi thay vì bày một thứ
   người dùng không bao giờ bấm được. Dùng `pointer: coarse`/`hover: none` (đặc
   tính thiết bị) chứ KHÔNG dùng bề rộng: màn hẹp chưa chắc là cảm ứng và ngược lại. */
@media (hover: none), (pointer: coarse) {
  .nxwiki-toolbar-btn-hint { display: none; }
}

.nxwiki-toolbar-btn-hint kbd {
  display: inline-block;
  padding: 0.05rem 0.35rem;
  font-family: var(--nx-font-mono);
  font-size: 0.7rem;
  background: var(--nx-color-bg-soft);
  border: 1px solid var(--nx-color-border);
  border-radius: 3px;
  color: var(--nx-color-fg-subtle);
}

.nxwiki-toolbar-btn-badge {
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--nx-color-primary);
}

/* Make search button flex to show "/" hint on the right */
#nxwiki-search-btn { flex: 1; justify-content: space-between; }
/* Trong thanh công cụ trên đầu, `flex: 1` làm ô tìm kiếm giãn hết hàng (đo được
   ~1580px ở màn 1920) — trông khác hẳn cùng nút đó ở sidebar. Ghìm lại để 3 trang
   nhìn như một. Giữ nguyên hành vi giãn khi nút nằm trong sidebar hẹp. */
.nxwiki-hero-toolbar #nxwiki-search-btn { flex: 0 1 20rem; }

/* Theme toggle (light/dark/system) — Owner duyệt 2026-08-19, xem
   working/jobs/2026-08-19_nxwiki-ui-redesign/01_proposal.md mục 3. Nút render
   sẵn CẢ 3 icon SVG (sun/moon/monitor), ẩn/hiện thuần CSS theo
   `data-nxwiki-theme-pref` trên <html> (set bởi script đồng bộ
   `theme_init.html` — không đợi `manual.js` load nên không có 1 nhịp icon sai
   trước khi JS chạy, xem mục 3.4 proposal). */
.nxwiki-theme-icon { display: none; }
html[data-nxwiki-theme-pref="light"] .nxwiki-theme-btn .nxwiki-theme-icon-light,
html[data-nxwiki-theme-pref="dark"] .nxwiki-theme-btn .nxwiki-theme-icon-dark,
html[data-nxwiki-theme-pref="system"] .nxwiki-theme-btn .nxwiki-theme-icon-system,
html:not([data-nxwiki-theme-pref]) .nxwiki-theme-btn .nxwiki-theme-icon-system {
  display: inline-flex;
}

/* ==========================================================================
   Search modal (full-screen overlay)
   ========================================================================== */

.nxwiki-modal[hidden] { display: none !important; }

.nxwiki-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 1rem 1rem;
}

.nxwiki-modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--nx-color-overlay-strong);
  backdrop-filter: blur(4px);
}

.nxwiki-modal-panel {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 120px);
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.nxwiki-modal-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--nx-color-border);
}

.nxwiki-modal-header > svg { color: var(--nx-color-fg-subtle); flex-shrink: 0; }

.nxwiki-modal-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 1rem;
  background: transparent;
  color: var(--nx-color-fg);
  font-family: inherit;
}

.nxwiki-modal-kbd {
  padding: 0.15rem 0.45rem;
  font-family: var(--nx-font-mono);
  font-size: 0.7rem;
  background: var(--nx-color-bg-soft);
  border: 1px solid var(--nx-color-border);
  border-radius: 3px;
  color: var(--nx-color-fg-subtle);
}

.nxwiki-modal-results {
  flex: 1;
  overflow-y: auto;
  min-height: 60px;
}

body.nxwiki-modal-open { overflow: hidden; }

/* ==========================================================================
   Lang popover (small dropdown anchored to button)
   ========================================================================== */

.nxwiki-popover[hidden] { display: none !important; }

.nxwiki-popover {
  position: absolute;
  z-index: 9998;
  min-width: 180px;
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  box-shadow: var(--nx-shadow-md);
  padding: 0.35rem;
}

.nxwiki-popover-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  background: transparent;
  border: none;
  border-radius: var(--nx-radius-sm);
  cursor: pointer;
  color: var(--nx-color-fg);
  font-family: inherit;
  font-size: 0.85rem;
  text-align: left;
}
.nxwiki-popover-item:hover { background: var(--nx-color-bg-soft); }
.nxwiki-popover-item.is-active { background: var(--nx-color-primary-bg); color: var(--nx-color-primary); }

.nxwiki-popover-code {
  font-weight: 600;
  font-size: 0.7rem;
  color: var(--nx-color-fg-subtle);
  font-family: var(--nx-font-mono);
  min-width: 24px;
}
.nxwiki-popover-item.is-active .nxwiki-popover-code { color: var(--nx-color-primary); }

/* ==========================================================================
   Search result items (reused inside modal)
   ========================================================================== */

/* Phase 1 navigation #5 — group theo app (manual.js: groupByApp) */
.nxwiki-search-group-label {
  padding: 0.6rem 1rem 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nx-color-fg-subtle);
  background: var(--nx-color-bg-soft);
}

.nxwiki-search-hit {
  display: block;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--nx-color-border);
  color: var(--nx-color-fg);
  text-decoration: none;
  transition: background 0.12s;
}
.nxwiki-search-hit:hover,
.nxwiki-search-hit:focus,
.nxwiki-search-hit.is-highlighted {
  background: var(--nx-color-bg-soft);
  text-decoration: none;
}
.nxwiki-search-hit:last-child { border-bottom: none; }

.nxwiki-search-hit-meta {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--nx-color-primary);
  background: var(--nx-color-primary-bg);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.nxwiki-search-hit-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--nx-color-fg);
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.nxwiki-search-hit-snippet {
  font-size: 0.825rem;
  color: var(--nx-color-fg-muted);
  line-height: 1.5;
  padding-left: 0.6rem;
  border-left: 2px solid var(--nx-color-border);
  /* Whoosh highlights wrap matches in <b class="match"> */
}
/* THEME AUDIT 2026-08-20 — bỏ 2 khối override dark cấp component cũ tại đây,
   chuyển giá trị về token --nx-color-mark-* trong khối biến đầu file (cùng
   pattern mọi component khác — dark override tập trung 1 chỗ). */
.nxwiki-search-hit-snippet b.match {
  background: var(--nx-color-mark-bg);
  color: var(--nx-color-mark-fg);
  padding: 0 0.15em;
  border-radius: 2px;
  font-weight: 600;
}

.nxwiki-search-empty {
  padding: 1rem;
  color: var(--nx-color-fg-muted);
  font-size: 0.9rem;
  text-align: center;
}


/* ==========================================================================
   Landing page
   ========================================================================== */

.nxwiki-landing {
  max-width: none;
  margin: 0;
  padding: 1rem 1rem 2rem;
  font-family: var(--nx-font-body);
  color: var(--nx-color-fg);
}

.nxwiki-hero {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--nx-color-border);
}
.nxwiki-hero-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
  color: var(--nx-color-fg);
}
.nxwiki-hero-subtitle {
  font-size: 1.05rem;
  color: var(--nx-color-fg-muted);
  margin: 0;
}

.nxwiki-app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.nxwiki-app-card {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 1.25rem;
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  color: var(--nx-color-fg);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.nxwiki-app-card:hover {
  border-color: var(--nx-color-primary);
  box-shadow: var(--nx-shadow-md);
  transform: translateY(-1px);
  text-decoration: none;
}

.nxwiki-app-card-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--nx-radius-md);
  background: var(--nx-color-primary-bg);
  color: var(--nx-color-primary);
  font-weight: 700;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.nxwiki-app-card-body { min-width: 0; }
.nxwiki-app-card-name {
  font-weight: 600;
  color: var(--nx-color-fg);
  margin-bottom: 0.15rem;
}
.nxwiki-app-card-hint {
  font-size: 0.85rem;
  color: var(--nx-color-fg-muted);
}

.nxwiki-empty {
  padding: 3rem 2rem;
  text-align: center;
  background: var(--nx-color-bg-soft);
  border: 1px dashed var(--nx-color-border-strong);
  border-radius: var(--nx-radius-lg);
  color: var(--nx-color-fg-muted);
}
.nxwiki-empty p { margin: 0 0 0.5rem; }
.nxwiki-empty-hint { font-size: 0.9rem; }
.nxwiki-empty code {
  font-family: var(--nx-font-mono);
  padding: 0.15em 0.4em;
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-sm);
  font-size: 0.85em;
}

/* ============================================================================
   Phase 6 — Module View
   ============================================================================ */

/* --- Landing: module cards --- */
.nxwiki-module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.nxwiki-module-card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.2rem;
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.nxwiki-module-card:hover {
  border-color: var(--nx-color-accent);
  transform: translateY(-1px);
  /* Bỏ fallback literal (THEME AUDIT 2026-08-20) — biến trước đây được tham
     chiếu nhưng CHƯA TỪNG khai báo (chỉ chạy nhờ fallback), giờ khai báo thật
     đủ 3 nơi trong khối biến đầu file. */
  box-shadow: var(--nx-shadow-card-hover);
  text-decoration: none;
}
.nxwiki-module-card-icon {
  margin-bottom: 0.6rem;
  line-height: 1;
}
.nxwiki-module-card-icon .icon {
  /* Global .icon có margin: 0 auto (căn giữa) — huỷ để icon căn trái
     giống tên/mô tả module bên dưới, không lệch layout. */
  margin: 0;
}
.nxwiki-module-card-name {
  font-weight: 600;
  color: var(--nx-color-fg);
  margin-bottom: 0.2rem;
}
.nxwiki-module-card-desc {
  font-size: 0.85rem;
  color: var(--nx-color-fg-muted);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.nxwiki-module-card-count {
  font-size: 0.8rem;
  color: var(--nx-color-fg-muted);
  margin-top: auto;
}

/* --- Landing view switcher --- */
.nxwiki-view-switcher {
  display: inline-flex;
  gap: 0.35rem;
  padding: 0.2rem;
  background: var(--nx-color-bg-soft);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-md);
  margin-top: 1rem;
}
.nxwiki-view-switcher a {
  padding: 0.35rem 0.85rem;
  border-radius: var(--nx-radius-sm);
  font-size: 0.85rem;
  color: var(--nx-color-fg-muted);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nxwiki-view-switcher a:hover {
  color: var(--nx-color-fg);
}
.nxwiki-view-switcher a.is-active {
  background: var(--nx-color-bg);
  color: var(--nx-color-fg);
  box-shadow: var(--nx-shadow-pill);
}

/* --- Module page layout (2-column) --- */
/* Bề rộng đồng bộ với 2 wrapper gốc kia: `.nxwiki-shell` (trang tài liệu) và
   `.nxwiki-landing` (landing) đều `max-width: none` + `padding: 1rem 1rem 2rem`
   từ 18/04. Trang module sinh ra hôm sau (19/04) với `max-width: 1100px` và không
   ai xem lại — kể cả đợt redesign 19-21/08 (đợt đó có thấy chỗ hẹp này, nhưng chỉ
   đi vá cái nền trắng lòi ra quanh nó, xem comment đầu file). Owner báo "hiển thị
   hẹp hơn nhiều" ngày 08/09.

   PHẢI kèm `padding`, không được bỏ mỗi `max-width`:
   - trên màn rộng, `margin: 0 auto` đang gánh việc tạo lề; bỏ `max-width` mà không
     thêm `padding` thì chữ dính sát mép — đổi cái xấu này lấy cái xấu khác;
   - dưới 1100px `max-width` vốn KHÔNG có tác dụng, mà `padding` thì không có, nên
     mọi điện thoại/cửa sổ hẹp đã dính mép sẵn từ trước (đo được lề = 0 ở
     1024/768/390px). Thêm `padding` sửa luôn chỗ đó. */
.nxwiki-module-page { max-width: none; margin: 0; padding: 1rem 1rem 2rem; }

.nxwiki-module-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (max-width: 1024px) {
  /* Đồng bộ breakpoint với drawer chung (.nxwiki-drawer/.nxwiki-shell ở trên —
     Owner duyệt 2026-08-19, mục 2.2 proposal, gộp về 1024px thay 768px cũ) —
     tránh khoảng hở nơi sidebar vừa không sticky vừa chưa thành drawer. */
  .nxwiki-module-layout { grid-template-columns: 1fr; }
}

.nxwiki-module-sidebar {
  position: sticky;
  top: 1rem;
  align-self: start;
}
.nxwiki-module-sidebar-title {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--nx-color-fg-muted);
  margin: 0 0 0.7rem 0.4rem;
}
.nxwiki-module-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.nxwiki-module-nav-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: var(--nx-radius-sm);
  color: var(--nx-color-fg-muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.1s ease, color 0.1s ease;
}
.nxwiki-module-nav-item:hover {
  background: var(--nx-color-bg-soft);
  color: var(--nx-color-fg);
  text-decoration: none;
}
.nxwiki-module-nav-item.is-active {
  background: var(--nx-color-bg-soft);
  color: var(--nx-color-fg);
  font-weight: 500;
}
.nxwiki-module-nav-icon { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.nxwiki-module-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxwiki-module-nav-count {
  font-size: 0.75rem;
  color: var(--nx-color-fg-muted);
  padding: 0.1em 0.4em;
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  border-radius: 10px;
  flex: 0 0 auto;
}

/* --- Module main content --- */
.nxwiki-module-main { min-width: 0; }
.nxwiki-module-count {
  font-size: 0.85rem;
  color: var(--nx-color-fg-muted);
  margin: 0.5rem 0 0;
}
.nxwiki-module-icon { margin-right: 0.3rem; display: inline-flex; vertical-align: middle; }

/* --- Chip filter theo doc_type (ADR 2026-07-14 §3.2) — CHỈ trang Module,
   single-select, client-side (attachTypeFilter() trong manual.js). Đặt ngay
   dưới <header class="nxwiki-hero">, trên .nxwiki-module-layout. --- */
.nxwiki-type-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
}
.nxwiki-type-filter-chip {
  font: inherit;
  font-size: 0.82rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--nx-color-border);
  background: var(--nx-color-bg);
  color: var(--nx-color-fg-muted);
  cursor: pointer;
  transition: background 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}
.nxwiki-type-filter-chip:hover {
  border-color: var(--nx-color-accent);
  color: var(--nx-color-fg);
}
.nxwiki-type-filter-chip.is-active {
  background: var(--nx-color-primary-bg);
  border-color: var(--nx-color-primary);
  color: var(--nx-color-primary);
  font-weight: 600;
}

.nxwiki-module-group { margin-bottom: 2rem; }
.nxwiki-module-group-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nx-color-fg);
  margin: 0 0 0.8rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--nx-color-border);
}
.nxwiki-module-group-icon { font-size: 0.95rem; }
.nxwiki-module-doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.nxwiki-module-doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--nx-radius-sm);
  color: var(--nx-color-fg);
  text-decoration: none;
  transition: background 0.1s ease;
}
.nxwiki-module-doc-item:hover {
  background: var(--nx-color-bg-soft);
  text-decoration: none;
}
.nxwiki-module-doc-title { flex: 1; min-width: 0; }
.nxwiki-module-doc-tags { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; }

.nxwiki-tag {
  display: inline-block;
  font-size: 0.7rem;
  padding: 0.1em 0.5em;
  background: var(--nx-color-bg-soft);
  border: 1px solid var(--nx-color-border);
  border-radius: 10px;
  color: var(--nx-color-fg-muted);
  font-family: var(--nx-font-mono);
  letter-spacing: 0.02em;
}

/* --- Doc page: breadcrumb + badge --- */
.nxwiki-module-breadcrumb {
  font-size: 0.85rem;
  color: var(--nx-color-fg-muted);
  margin-bottom: 0.8rem;
}
.nxwiki-module-breadcrumb a {
  color: var(--nx-color-fg-muted);
  text-decoration: none;
}
.nxwiki-module-breadcrumb a:hover {
  color: var(--nx-color-accent);
  text-decoration: underline;
}
.nxwiki-module-breadcrumb-sep { margin: 0 0.4rem; opacity: 0.5; }

.nxwiki-module-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2em 0.6em;
  background: var(--nx-color-bg-soft);
  border: 1px solid var(--nx-color-border);
  border-radius: 12px;
  color: var(--nx-color-fg-muted);
  font-size: 0.8rem;
  text-decoration: none;
  margin-right: 0.4rem;
}
.nxwiki-module-badge:hover {
  color: var(--nx-color-accent);
  border-color: var(--nx-color-accent);
  text-decoration: none;
}

/* --- Toolbar link (view switcher trong top bar) --- */
.nxwiki-toolbar-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  color: var(--nx-color-fg-muted);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--nx-radius-sm);
  transition: background 0.1s ease, color 0.1s ease;
}
.nxwiki-toolbar-link:hover {
  background: var(--nx-color-bg-soft);
  color: var(--nx-color-fg);
  text-decoration: none;
}

/* ============================================================================
   Landing — search-first hero (Phase 1, Phương án A, 2026-07-11)
   Đảo trọng tâm /manual: search bar là element chính (thay app-card-grid trung
   tâm), "Cập nhật gần đây" (mtime, không cần metadata) là lớp phụ, browse-theo-
   app/nghiệp vụ đẩy xuống làm fallback. Xem ADR:
   shared-working/2026-07-11_nxwiki-manual-content-ia/01_sa1-research-adr.md
   ============================================================================ */

.nxwiki-hero-search-first { text-align: center; }
.nxwiki-hero-search-first .nxwiki-hero-title { text-align: center; }
.nxwiki-hero-search-first .nxwiki-hero-subtitle {
  text-align: center;
  margin: 0 auto 1.75rem;
  max-width: 560px;
}

.nxwiki-hero-search {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}

.nxwiki-hero-search-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1.1rem;
  background: var(--nx-color-bg);
  border: 1.5px solid var(--nx-color-border-strong);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.nxwiki-hero-search-box:focus-within {
  border-color: var(--nx-color-primary);
  box-shadow: 0 0 0 3px var(--nx-color-primary-bg);
}
.nxwiki-hero-search-box > svg { flex-shrink: 0; color: var(--nx-color-fg-subtle); }
.nxwiki-hero-search-box:focus-within > svg { color: var(--nx-color-primary); }

.nxwiki-hero-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.05rem;
  color: var(--nx-color-fg);
  font-family: inherit;
}
.nxwiki-hero-search-input::placeholder { color: var(--nx-color-fg-subtle); }

.nxwiki-hero-search-results {
  text-align: left;
  margin-top: 0.75rem;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-md);
}
.nxwiki-hero-search-results[hidden] { display: none !important; }

.nxwiki-landing-secondary[hidden] { display: none !important; }

.nxwiki-landing-section { text-align: left; }
.nxwiki-landing-section + .nxwiki-landing-section { margin-top: 2.5rem; }

.nxwiki-landing-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.nxwiki-landing-section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--nx-color-fg);
  margin: 0 0 1rem;
}
.nxwiki-landing-section-header .nxwiki-landing-section-title { margin-bottom: 0; }
.nxwiki-landing-section .nxwiki-view-switcher { margin-top: 0; }

/* --- "Cập nhật gần đây" list --- */
.nxwiki-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--nx-color-border);
  border-radius: var(--nx-radius-lg);
  overflow: hidden;
}
.nxwiki-recent-item + .nxwiki-recent-item { border-top: 1px solid var(--nx-color-border); }
.nxwiki-recent-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8rem 1.1rem;
  color: var(--nx-color-fg);
  text-decoration: none;
  transition: background 0.12s;
}
.nxwiki-recent-link:hover { background: var(--nx-color-bg-soft); text-decoration: none; }
.nxwiki-recent-title {
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nxwiki-recent-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--nx-color-fg-muted);
}
.nxwiki-recent-app {
  padding: 0.1em 0.55em;
  background: var(--nx-color-primary-bg);
  color: var(--nx-color-primary);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.nxwiki-recent-date { color: var(--nx-color-fg-subtle); }

@media (max-width: 768px) {
  .nxwiki-recent-link { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
  .nxwiki-recent-title { white-space: normal; }
  .nxwiki-hero-search-box { padding: 0.75rem 0.9rem; }
}

/* ==========================================================================
   Frappe chrome (navbar + footer) khi theme dark — THEME AUDIT 2026-08-20
   Trang /manual extend templates/web.html → base.html render navbar
   (`.navbar-light`, Standard Navbar) + footer (`.web-footer`, Standard Footer)
   BAO QUANH nội dung manual — 2 khối này style trắng cố định bởi website.css
   Frappe, không biết gì về theme nxwiki → dark mode bị 2 dải trắng trên/dưới
   ("màn hình chưa ăn theme" Owner báo). Override CHỈ khi dark + CHỈ trong
   `body.nxwiki-body` (manual.css include global — không đụng trang khác);
   light GIỮ NGUYÊN 100% style Frappe mặc định.

   Phải viết 2 lần (attr + fallback @media) vì CSS không gộp được media query
   vào selector — 2 khối PHẢI đồng bộ nội dung khi sửa.
   ========================================================================== */

:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light {
  background: var(--nx-color-bg);
  border-bottom-color: var(--nx-color-border);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light .navbar-brand,
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light .navbar-brand:hover {
  color: var(--nx-color-fg);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light .navbar-nav .nav-link {
  color: var(--nx-color-fg-muted);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light .navbar-nav .nav-link:hover,
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light .navbar-nav .nav-link:focus,
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light .navbar-nav .nav-link.active {
  color: var(--nx-color-fg);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar-light .navbar-toggler {
  border-color: var(--nx-color-border);
  color: var(--nx-color-fg);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar .dropdown-menu {
  background: var(--nx-color-bg);
  border: 1px solid var(--nx-color-border);
  box-shadow: var(--nx-shadow-md);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar .dropdown-item {
  color: var(--nx-color-fg);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar .dropdown-item:hover,
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar .dropdown-item:focus {
  background: var(--nx-color-bg-soft);
  color: var(--nx-color-fg);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .navbar .form-control {
  background: var(--nx-color-bg-soft);
  color: var(--nx-color-fg);
  border-color: var(--nx-color-border);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .web-footer {
  background-color: var(--nx-color-bg);
  border-top-color: var(--nx-color-border);
  color: var(--nx-color-fg-muted);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .footer-link,
:root[data-nxwiki-theme="dark"] body.nxwiki-body .footer-child-item a {
  color: var(--nx-color-fg-muted);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .footer-link:hover,
:root[data-nxwiki-theme="dark"] body.nxwiki-body .footer-child-item a:hover {
  color: var(--nx-color-primary);
}
:root[data-nxwiki-theme="dark"] body.nxwiki-body .footer-group-label {
  color: var(--nx-color-fg-subtle);
}

/* Fallback không JS — BẢN SAO Y HỆT khối attr ngay trên, chỉ đổi prefix selector
   (xem chú thích đầu section). */
@media (prefers-color-scheme: dark) {
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light {
    background: var(--nx-color-bg);
    border-bottom-color: var(--nx-color-border);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light .navbar-brand,
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light .navbar-brand:hover {
    color: var(--nx-color-fg);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light .navbar-nav .nav-link {
    color: var(--nx-color-fg-muted);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light .navbar-nav .nav-link:hover,
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light .navbar-nav .nav-link:focus,
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light .navbar-nav .nav-link.active {
    color: var(--nx-color-fg);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar-light .navbar-toggler {
    border-color: var(--nx-color-border);
    color: var(--nx-color-fg);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar .dropdown-menu {
    background: var(--nx-color-bg);
    border: 1px solid var(--nx-color-border);
    box-shadow: var(--nx-shadow-md);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar .dropdown-item {
    color: var(--nx-color-fg);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar .dropdown-item:hover,
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar .dropdown-item:focus {
    background: var(--nx-color-bg-soft);
    color: var(--nx-color-fg);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .navbar .form-control {
    background: var(--nx-color-bg-soft);
    color: var(--nx-color-fg);
    border-color: var(--nx-color-border);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .web-footer {
    background-color: var(--nx-color-bg);
    border-top-color: var(--nx-color-border);
    color: var(--nx-color-fg-muted);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .footer-link,
  :root:not([data-nxwiki-theme]) body.nxwiki-body .footer-child-item a {
    color: var(--nx-color-fg-muted);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .footer-link:hover,
  :root:not([data-nxwiki-theme]) body.nxwiki-body .footer-child-item a:hover {
    color: var(--nx-color-primary);
  }
  :root:not([data-nxwiki-theme]) body.nxwiki-body .footer-group-label {
    color: var(--nx-color-fg-subtle);
  }
}