/* ============================================================
   Lớp COMPONENT của Helper, dựng trên token Admin Section CMS
   (nd-admin-tokens.v1.css).

   Kỷ luật ba tầng giữ nguyên: file này CHỈ dùng token SEMANTIC (fg, surface,
   accent, border …), không bao giờ dùng token primitive (các bậc gray, indigo,
   green, amber, red). Có test canh việc này.
   Nhờ vậy đổi sáng/tối là việc của token, không phải của từng component.

   Namespace .ndh- để không đụng Bootstrap của phần còn lại của Helper. Màn hình
   mới dựng trên file này; màn cũ chuyển dần (docs/ket-noi-section-cms.md §3).
   ============================================================ */

[x-cloak] { display: none !important; }

.ndh {
  margin: 0;
  min-height: 100vh;
  background: var(--ad-canvas);
  color: var(--ad-fg);
  font: var(--ad-text-md) / 1.5 var(--ad-font);
  -webkit-font-smoothing: antialiased;
}
.ndh *, .ndh *::before, .ndh *::after { box-sizing: border-box; }
.ndh a { color: var(--ad-accent); text-decoration: none; }
.ndh a:hover { color: var(--ad-accent-hover); text-decoration: underline; }
.ndh button { font: inherit; color: inherit; }
.ndh :focus-visible { outline: 2px solid var(--ad-focus); outline-offset: 2px; border-radius: var(--ad-radius-sm); }
.ndh h1, .ndh h2, .ndh h3, .ndh p { margin: 0; }

/* Biểu tượng: SVG nội tuyến, nét theo màu chữ. */
.ndh-i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- thanh trên cùng ---------- */
.ndh-top {
  position: sticky; top: 0; z-index: var(--ad-z-dropdown);
  display: flex; align-items: center; gap: var(--ad-space-4);
  height: 52px; padding: 0 var(--ad-space-5);
  background: var(--ad-surface); border-bottom: 1px solid var(--ad-border);
}
.ndh-brand { display: flex; align-items: center; gap: var(--ad-space-2); font-weight: 700; color: var(--ad-fg) !important; text-decoration: none !important; white-space: nowrap; }
.ndh-brand img { width: 26px; height: 26px; border-radius: var(--ad-radius-sm); }
.ndh-crumbs { display: flex; align-items: center; gap: var(--ad-space-2); min-width: 0; overflow: hidden; white-space: nowrap; color: var(--ad-fg-muted); font-size: var(--ad-text-sm); }
.ndh-crumbs a { color: var(--ad-fg-muted); }
.ndh-crumbs .sep { color: var(--ad-fg-faint); }
.ndh-crumbs b { overflow: hidden; text-overflow: ellipsis; color: var(--ad-fg); font-weight: 600; }
.ndh-top__search { flex: 1; display: flex; justify-content: center; min-width: 0; }
.ndh-top__right { display: flex; align-items: center; gap: var(--ad-space-3); margin-left: auto; }
@media screen and (max-width: 960px) { .ndh-crumbs { display: none; } }
.ndh-user { color: var(--ad-fg-muted); font-size: var(--ad-text-sm); white-space: nowrap; }

/* ---------- thanh tác vụ của một màn hình ---------- */
.ndh-bar {
  position: sticky; top: 52px; z-index: calc(var(--ad-z-dropdown) - 1);
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ad-space-3);
  padding: var(--ad-space-3) var(--ad-space-5);
  background: var(--ad-surface); border-bottom: 1px solid var(--ad-border);
}
.ndh-bar__title { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ad-space-2); min-width: 0; }
.ndh-bar__title h1 { font-size: var(--ad-text-xl); font-weight: 700; letter-spacing: -0.01em; }
.ndh-bar__actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ad-space-2); }

/* ---------- bố cục ---------- */
.ndh-wrap { max-width: 1280px; margin: 0 auto; padding: var(--ad-space-5); }
.ndh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--ad-space-5); align-items: start; }
.ndh-stack { display: flex; flex-direction: column; gap: var(--ad-space-4); }
.ndh-row { display: flex; align-items: center; gap: var(--ad-space-2); }
.ndh-row--wrap { flex-wrap: wrap; }
.ndh-row--between { justify-content: space-between; }
.ndh-cols { display: grid; gap: var(--ad-space-3); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.ndh-c2 { grid-column: span 2; } .ndh-c3 { grid-column: span 3; } .ndh-c4 { grid-column: span 4; } .ndh-c5 { grid-column: span 5; } .ndh-c6 { grid-column: span 6; } .ndh-c7 { grid-column: span 7; } .ndh-c8 { grid-column: span 8; } .ndh-c12 { grid-column: span 12; }
@media screen and (max-width: 1080px) {
  .ndh-grid { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 720px) {
  .ndh-wrap { padding: var(--ad-space-3); }
  .ndh-top, .ndh-bar { padding-left: var(--ad-space-3); padding-right: var(--ad-space-3); }
  .ndh-c2, .ndh-c3, .ndh-c4, .ndh-c5, .ndh-c6, .ndh-c7, .ndh-c8 { grid-column: span 12; }
  .ndh-user, .ndh-seg button span, .ndh-hide-sm { display: none; }
  .ndh-stat__v { font-size: var(--ad-text-xl); }
}

/* ---------- thẻ ---------- */
.ndh-card { background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-sm); padding: var(--ad-space-5); }
.ndh-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ad-space-3); margin-bottom: var(--ad-space-4); }
.ndh-card__title { display: flex; align-items: center; gap: var(--ad-space-3); font-size: var(--ad-text-lg); font-weight: 600; letter-spacing: -0.005em; }
.ndh-sec {
  display: inline-grid; place-items: center; width: 26px; height: 26px; flex: none;
  border-radius: var(--ad-radius-sm); background: var(--ad-accent-soft); color: var(--ad-accent);
  font-size: var(--ad-text-sm); font-weight: 700;
}
.ndh-hint { color: var(--ad-fg-muted); font-size: var(--ad-text-sm); }
.ndh-sunk { background: var(--ad-surface-sunk); border: 1px solid var(--ad-border); border-radius: var(--ad-radius); padding: var(--ad-space-4); }

/* ---------- nhãn, trường nhập ---------- */
.ndh-label { display: block; margin-bottom: 4px; color: var(--ad-fg-muted); font-size: var(--ad-text-xs); font-weight: 500; }
.ndh-req { color: var(--ad-danger); }
.ndh-input, .ndh-textarea, .ndh-select {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--ad-border-strong); border-radius: var(--ad-radius);
  background: var(--ad-surface); color: var(--ad-fg);
  font: inherit; font-size: var(--ad-text-md);
}
.ndh-textarea { min-height: 64px; resize: vertical; }
.ndh-input::placeholder, .ndh-textarea::placeholder { color: var(--ad-fg-faint); }
.ndh-input:focus, .ndh-textarea:focus, .ndh-select:focus { outline: none; border-color: var(--ad-accent); box-shadow: 0 0 0 3px var(--ad-accent-soft); }
.ndh input[type="radio"], .ndh input[type="checkbox"] { accent-color: var(--ad-accent); width: 16px; height: 16px; margin: 0; }
.ndh-choice { display: flex; align-items: center; gap: var(--ad-space-2); cursor: pointer; padding: 3px 0; }

/* ---------- nút ---------- */
.ndh-btn {
  appearance: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px; border: 1px solid var(--ad-border-strong); border-radius: var(--ad-radius);
  background: var(--ad-surface); color: var(--ad-fg) !important;
  font-size: var(--ad-text-sm); font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none !important;
}
.ndh-btn:hover { background: var(--ad-surface-hover); }
.ndh-btn:disabled, .ndh-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ndh-btn--primary { background: var(--ad-accent); border-color: var(--ad-accent); color: var(--ad-fg-on-accent) !important; }
.ndh-btn--primary:hover { background: var(--ad-accent-hover); border-color: var(--ad-accent-hover); }
.ndh-btn--danger { background: var(--ad-danger); border-color: var(--ad-danger); color: var(--ad-fg-on-danger) !important; }
.ndh-btn--danger:hover { background: var(--ad-danger-hover); border-color: var(--ad-danger-hover); }
.ndh-btn--ghost { background: transparent; border-color: transparent; }
.ndh-btn--sm { padding: 4px 10px; font-size: var(--ad-text-xs); }
.ndh button.ndh-btn { font-size: var(--ad-text-sm); font-weight: 600; line-height: 1.2; }
.ndh button.ndh-btn--sm { font-size: var(--ad-text-xs); }
/* nút nguy hiểm viền đỏ (xoá/thu hồi ở hàng thao tác; nền đỏ đặc dành cho hành động chính) */
.ndh-btn--danger-outline { border-color: var(--ad-danger); color: var(--ad-danger) !important; background: transparent; }
.ndh-btn--danger-outline:hover { background: var(--ad-danger-soft); }
.ndh-btn--icon { padding: 5px; }

/* ---------- huy hiệu ---------- */
.ndh-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--ad-radius-full); background: var(--ad-surface-sunk); border: 1px solid var(--ad-border); color: var(--ad-fg-muted); font-size: var(--ad-text-xs); font-weight: 600; white-space: nowrap; }
.ndh-badge--accent { background: var(--ad-accent-soft); border-color: transparent; color: var(--ad-accent); }
.ndh-badge--ok { background: var(--ad-ok-soft); border-color: transparent; color: var(--ad-ok); }
.ndh-badge--warn { background: var(--ad-warn-soft); border-color: transparent; color: var(--ad-warn); }
.ndh-badge--danger { background: var(--ad-danger-soft); border-color: transparent; color: var(--ad-danger-hover); }
.ndh-mono { font-family: var(--ad-font-mono); }
button.ndh-badge { cursor: pointer; }

/* ---------- nhóm nút chọn (ưu tiên, giao diện) ---------- */
.ndh-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--ad-border-strong); border-radius: var(--ad-radius); background: var(--ad-surface); }
.ndh-seg button { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-right: 1px solid var(--ad-border); background: transparent; color: var(--ad-fg-muted); font-size: var(--ad-text-sm); font-weight: 600; }
.ndh-seg button:last-child { border-right: 0; }
.ndh-seg button:hover { background: var(--ad-surface-hover); color: var(--ad-fg); }
.ndh-seg button[aria-pressed="true"], .ndh-seg button.is-on { background: var(--ad-accent-soft); color: var(--ad-accent); }
.ndh-seg button.is-on.p1 { background: var(--ad-accent); color: var(--ad-fg-on-accent); }
.ndh-seg button.is-on.p2 { background: var(--ad-warn); color: var(--ad-fg-on-accent); }
.ndh-seg button.is-on.out { background: var(--ad-danger); color: var(--ad-fg-on-danger); }
.ndh-seg button.is-on.todo { background: var(--ad-surface-hover); color: var(--ad-fg); }
.ndh-seg button.is-on.doing { background: var(--ad-warn); color: var(--ad-fg-on-accent); }
.ndh-seg button.is-on.done { background: var(--ad-ok); color: var(--ad-fg-on-accent); }
@media screen and (max-width: 720px) {
  .ndh-seg--status { width: 100%; }
  .ndh-seg--status button { flex: 1; justify-content: center; padding: 9px 6px; }
}

/* ---------- ghi chú ---------- */
.ndh-note { display: flex; gap: var(--ad-space-3); padding: var(--ad-space-3) var(--ad-space-4); border-radius: var(--ad-radius); border: 1px solid transparent; font-size: var(--ad-text-sm); }
.ndh-note--info { background: var(--ad-accent-soft); color: var(--ad-accent); }
.ndh-note--warn { background: var(--ad-warn-soft); color: var(--ad-warn); }
.ndh-note--danger { background: var(--ad-danger-soft); color: var(--ad-danger-hover); }
.ndh-note--ok { background: var(--ad-ok-soft); color: var(--ad-ok); }

/* ---------- hạng mục (mục D) và dòng phiên bản ---------- */
.ndh-item { background: var(--ad-surface-sunk); border: 1px solid var(--ad-border); border-radius: var(--ad-radius); padding: var(--ad-space-4); }
.ndh-item + .ndh-item { margin-top: var(--ad-space-3); }
.ndh-item.has-error { border-color: var(--ad-danger); }
.ndh-version { display: flex; flex-direction: column; gap: var(--ad-space-2); padding: var(--ad-space-3) var(--ad-space-4); border: 1px solid var(--ad-border); border-radius: var(--ad-radius); background: var(--ad-surface-sunk); }
.ndh-version + .ndh-version { margin-top: var(--ad-space-3); }
.ndh-kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--ad-space-3); align-items: center; }
.ndh-list { margin: 0; padding: 0; list-style: none; }
.ndh-list li { padding: 3px 0; }
.ndh-empty { padding: var(--ad-space-5); text-align: center; color: var(--ad-fg-muted); border: 1px dashed var(--ad-border-strong); border-radius: var(--ad-radius); }

/* ============================================================
   VỎ ỨNG DỤNG MỚI (templates/layout_nd.html) và bộ component dùng cho các màn đã chuyển.
   ============================================================ */

/* ---------- vỏ: thanh bên + cột chính ---------- */
.ndh-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.ndh-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; background: var(--ad-surface); border-right: 1px solid var(--ad-border); }
.ndh a.ndh-side__brand { display: flex; align-items: center; gap: var(--ad-space-3); flex: none; height: 52px; padding: 0 var(--ad-space-5); border-bottom: 1px solid var(--ad-border); color: var(--ad-fg); font-size: var(--ad-text-lg); font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.ndh-side__brand img { width: 28px; height: 28px; border-radius: var(--ad-radius-sm); }
.ndh-nav { display: flex; flex-direction: column; gap: var(--ad-space-4); padding: var(--ad-space-4) var(--ad-space-3); }
.ndh-nav__label { padding: 0 var(--ad-space-3) var(--ad-space-1); color: var(--ad-fg-faint); font-size: var(--ad-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ndh a.ndh-nav__item { display: flex; align-items: center; gap: var(--ad-space-3); padding: 8px var(--ad-space-3); border-radius: var(--ad-radius); color: var(--ad-fg-muted); font-weight: 500; text-decoration: none; }
.ndh a.ndh-nav__item:hover { background: var(--ad-surface-hover); color: var(--ad-fg); }
.ndh a.ndh-nav__item[aria-current="page"] { background: var(--ad-accent-soft); color: var(--ad-accent); font-weight: 600; }
.ndh-shell__main { min-width: 0; display: flex; flex-direction: column; }
.ndh-page { flex: 1; width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--ad-space-5); }
.ndh-pagefoot { padding: var(--ad-space-4) var(--ad-space-5); border-top: 1px solid var(--ad-border); color: var(--ad-fg-faint); font-size: var(--ad-text-xs); text-align: center; }
.ndh-scrim { position: fixed; inset: 0; z-index: calc(var(--ad-z-dialog) - 1); background: var(--ad-scrim); }
.ndh .ndh-iconbtn.ndh-burger { display: none; }
.ndh-shell--embed { display: block; }
.ndh-shell--embed .ndh-page { padding: var(--ad-space-4); }
@media screen and (max-width: 960px) {
  .ndh-shell { grid-template-columns: minmax(0, 1fr); }
  .ndh-side { position: fixed; inset: 0 auto 0 0; z-index: var(--ad-z-dialog); width: 272px; max-width: 86vw; transform: translateX(-100%); transition: transform .18s ease; }
  .ndh-side.is-open { transform: none; box-shadow: var(--ad-shadow-lg); }
  .ndh .ndh-iconbtn.ndh-burger { display: inline-grid; }
  .ndh-page { padding: var(--ad-space-4); }
}
@media (prefers-reduced-motion: reduce) { .ndh-side { transition: none; } }

/* ---------- đầu trang, thanh công cụ, hàng hành động ---------- */
.ndh-pagehead { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--ad-space-3); margin-bottom: var(--ad-space-5); }
.ndh-pagehead h1 { font-size: var(--ad-text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.ndh-pagehead p { margin-top: 4px; color: var(--ad-fg-muted); }
/* khối chữ có cỡ cơ sở riêng: trên màn hẹp các nút thao tác xuống hàng dưới, không ép tên trang thành cột chữ mỏng */
.ndh-pagehead > .ndh-grow { flex: 1 1 320px; }
.ndh-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ad-space-2); }
.ndh-filters { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--ad-space-3); margin-bottom: var(--ad-space-4); }
.ndh-filters .grow { flex: 1 1 220px; }
.ndh-grow { flex: 1; min-width: 0; }
.ndh-right { margin-left: auto; }
.ndh-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ndh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ndh-muted { color: var(--ad-fg-muted); }
.ndh-faint { color: var(--ad-fg-faint); }
.ndh-num { font-variant-numeric: tabular-nums; }
.ndh-avatar { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--ad-radius-full); background: var(--ad-accent-soft); color: var(--ad-accent); font-size: var(--ad-text-xs); font-weight: 700; }
.ndh .ndh-iconbtn { appearance: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid transparent; border-radius: var(--ad-radius); background: transparent; color: var(--ad-fg-muted); cursor: pointer; }
.ndh .ndh-iconbtn:hover { background: var(--ad-surface-hover); color: var(--ad-fg); }
.ndh .ndh-iconbtn:disabled, .ndh .ndh-iconbtn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: transparent; }
.ndh .ndh-iconbtn--danger:hover { background: var(--ad-danger-soft); color: var(--ad-danger); }

/* ---------- thẻ số liệu ---------- */
.ndh-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--ad-space-4); margin-bottom: var(--ad-space-5); }
.ndh-stat { padding: var(--ad-space-4) var(--ad-space-5); background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-sm); }
.ndh-stat__k { color: var(--ad-fg-muted); font-size: var(--ad-text-sm); }
.ndh-stat__v { margin-top: 2px; font-size: var(--ad-text-2xl); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ndh-stat__s { margin-top: 2px; color: var(--ad-fg-faint); font-size: var(--ad-text-xs); }
.ndh-stat--warn .ndh-stat__v { color: var(--ad-warn); }
.ndh-stat--danger .ndh-stat__v { color: var(--ad-danger); }
.ndh-stat--ok .ndh-stat__v { color: var(--ad-ok); }
.ndh-stat--info .ndh-stat__v { color: var(--ad-accent); }

/* ---------- bảng ---------- */
.ndh-tablewrap { position: relative; overflow-x: auto; background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: var(--ad-radius-lg); }
.ndh-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: var(--ad-text-sm); }
.ndh-table th { padding: 10px 14px; text-align: left; white-space: nowrap; background: var(--ad-surface-sunk); border-bottom: 1px solid var(--ad-border); color: var(--ad-fg-muted); font-size: var(--ad-text-xs); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.ndh-table td { padding: 12px 14px; border-bottom: 1px solid var(--ad-border); vertical-align: middle; }
.ndh-table tbody tr:last-child td { border-bottom: 0; }
.ndh-table tbody tr:hover { background: var(--ad-surface-hover); }
.ndh-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ndh-table .act { text-align: right; white-space: nowrap; }
.ndh-table a.ndh-rowlink { color: var(--ad-fg); font-weight: 600; }
.ndh-table a.ndh-rowlink:hover { color: var(--ad-accent); }
.ndh-pager { display: flex; align-items: center; gap: var(--ad-space-1); padding: var(--ad-space-3) var(--ad-space-4); border-top: 1px solid var(--ad-border); }

/* ---------- tab ---------- */
.ndh-tabs { display: flex; gap: var(--ad-space-1); overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid var(--ad-border); margin-bottom: var(--ad-space-4); }
.ndh .ndh-tab { appearance: none; margin-bottom: -1px; padding: 10px 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ad-fg-muted); font-weight: 600; white-space: nowrap; cursor: pointer; }
.ndh .ndh-tab:hover { color: var(--ad-fg); }
.ndh .ndh-tab[aria-selected="true"], .ndh a.ndh-tab[aria-current="page"] { color: var(--ad-accent); border-bottom-color: var(--ad-accent); }
.ndh a.ndh-tab { display: inline-flex; align-items: center; gap: var(--ad-space-2); text-decoration: none; }

/* ---------- hộp thoại ---------- */
.ndh-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--ad-border); border-radius: var(--ad-radius-lg); background: var(--ad-surface); color: var(--ad-fg); box-shadow: var(--ad-shadow-lg); }
.ndh-dialog--sm { width: min(420px, calc(100vw - 32px)); }
.ndh-dialog--lg { width: min(920px, calc(100vw - 32px)); }
.ndh-dialog::backdrop { background: var(--ad-scrim); }
.ndh-dialog__body { display: flex; flex-direction: column; gap: var(--ad-space-4); padding: var(--ad-space-5); }
.ndh-dialog__title { font-size: var(--ad-text-xl); font-weight: 700; letter-spacing: -0.01em; }
.ndh-dialog__text { color: var(--ad-fg-muted); }
.ndh-dialog__foot { display: flex; justify-content: flex-end; gap: var(--ad-space-2); margin-top: var(--ad-space-2); }

/* ---------- menu thả xuống ---------- */
.ndh-menu { position: relative; display: inline-flex; }
.ndh-menu__panel { position: absolute; z-index: var(--ad-z-dropdown); top: calc(100% + 6px); right: 0; min-width: 240px; max-width: 92vw; padding: 6px; background: var(--ad-surface); border: 1px solid var(--ad-border); border-radius: var(--ad-radius-lg); box-shadow: var(--ad-shadow-lg); }
.ndh-menu__head { padding: 8px 10px 6px; color: var(--ad-fg-muted); font-size: var(--ad-text-xs); }
.ndh-menu__head b { display: block; color: var(--ad-fg); font-size: var(--ad-text-md); }
.ndh-menu__sep { height: 1px; margin: 6px 0; background: var(--ad-border); }
.ndh .ndh-menu__item, .ndh a.ndh-menu__item { appearance: none; display: flex; align-items: center; gap: var(--ad-space-2); width: 100%; padding: 8px 10px; border: 0; border-radius: var(--ad-radius); background: transparent; color: var(--ad-fg); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.ndh .ndh-menu__item:hover, .ndh a.ndh-menu__item:hover { background: var(--ad-surface-hover); color: var(--ad-fg); }
.ndh .ndh-menu__item.is-current, .ndh .ndh-menu__item[aria-pressed="true"] { color: var(--ad-accent); font-weight: 600; }
.ndh-menu__check { margin-left: auto; visibility: hidden; }
.ndh-menu__item[aria-pressed="true"] .ndh-menu__check { visibility: visible; }

/* ---------- toast ---------- */
.ndh-toasts { position: fixed; z-index: var(--ad-z-toast); right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: var(--ad-space-2); max-width: min(420px, calc(100vw - 32px)); }
.ndh-toast { padding: 10px 14px; background: var(--ad-surface); color: var(--ad-fg); border: 1px solid var(--ad-border); border-left: 4px solid var(--ad-accent); border-radius: var(--ad-radius); box-shadow: var(--ad-shadow); font-size: var(--ad-text-sm); transition: opacity .3s; }
.ndh-toast--ok { border-left-color: var(--ad-ok); }
.ndh-toast--warn { border-left-color: var(--ad-warn); }
.ndh-toast--danger { border-left-color: var(--ad-danger); }
.ndh-toast.is-leaving { opacity: 0; }

/* ---------- đang tải ---------- */
.ndh-skel { min-height: 1em; border-radius: var(--ad-radius-sm); background: linear-gradient(90deg, var(--ad-surface-sunk), var(--ad-surface-hover), var(--ad-surface-sunk)); background-size: 200% 100%; animation: ndh-skel 1.2s linear infinite; }
@keyframes ndh-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ndh-skel { animation: none; } }
.ndh-hx-show { display: none; }
.htmx-request .ndh-hx-hide { display: none; }
.htmx-request .ndh-hx-show { display: inline-flex; }

/* ---------- trạng thái rỗng / lỗi có biểu tượng ---------- */
.ndh-empty--icon { display: flex; flex-direction: column; align-items: center; gap: var(--ad-space-2); padding: var(--ad-space-7) var(--ad-space-5); }
.ndh-empty--icon > .ndh-i { width: 28px; height: 28px; color: var(--ad-fg-faint); }
.ndh-empty--icon b { color: var(--ad-fg); font-size: var(--ad-text-lg); }

/* ---------- trường nhập ---------- */
.ndh-field { display: flex; flex-direction: column; gap: 4px; }
.ndh-help { color: var(--ad-fg-muted); font-size: var(--ad-text-xs); }
/* vòng xoay "đang xử lý" dùng chung (màu theo chữ của nút/ô chứa nó) */
.ndh-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: ndh-spin .7s linear infinite; }
@keyframes ndh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ndh-spin { animation-duration: 2.4s; } }
.ndh-error { color: var(--ad-danger); font-size: var(--ad-text-xs); }
.ndh-input--sm, .ndh-select--sm { padding: 5px 8px; font-size: var(--ad-text-sm); }

@media print {
  .ndh-side, .ndh-top, .ndh-pagefoot, .ndh-scrim, .ndh-toasts { display: none !important; }
  .ndh-shell { display: block; }
  .ndh-page { max-width: none; padding: 0; }
}

@media print { .ndh-top, .ndh-bar { display: none !important; } }