/* Nhân sự: chỉ dùng màu từ theme của ứng dụng. */
.nhs-root { color:var(--ink); min-width:0; max-width:100%; overflow-wrap:anywhere; }
.nhs-root *, .nhs-form * { box-sizing:border-box; }
.nhs-root h1 { font-size:26px; font-weight:800; letter-spacing:-.5px; }
.nhs-root h2, .nhs-form h2 { font-size:20px; font-weight:750; margin:0; }
.nhs-root h3 { font-size:16px; font-weight:750; margin:0; }
.nhs-root h4 { font-size:14px; font-weight:700; margin:14px 0 8px; }
.nhs-root p { margin:5px 0; line-height:1.55; }
.nhs-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:4px 0 22px; flex-wrap:wrap; }
.nhs-muted { color:var(--ink-3); font-size:13px; }
.nhs-head .nhs-tabs { margin:0; border:1px solid var(--line); background:var(--bg); border-radius:12px; padding:4px; }
.nhs-tabs { display:flex; align-items:stretch; gap:4px; margin:0 0 18px; border-bottom:1px solid var(--line); overflow-x:auto; max-width:100%; scrollbar-width:thin; }
.nhs-tabs button { background:transparent; border:0; border-radius:8px 8px 0 0; color:var(--ink-2); padding:11px 15px; white-space:nowrap; font-size:14px; min-height:44px; flex-shrink:0; }
.nhs-tabs button.on { color:var(--primary); background:var(--primary-soft); font-weight:750; box-shadow:inset 0 -2px var(--primary); }
.nhs-head .nhs-tabs button { border-radius:8px; box-shadow:none; }
.nhs-head .nhs-tabs button.on { background:var(--primary); color:var(--primary-ink); }
.nhs-tabs-sub { border-bottom:0; gap:8px; }
.nhs-tabs-sub button { border:1px solid var(--line); border-radius:8px; padding:8px 14px; background:var(--bg); }
.nhs-tabs-sub button.on { box-shadow:none; border-color:var(--primary); }
.nhs-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 16px; flex-wrap:wrap; }
.nhs-card { background:var(--bg); background:color-mix(in srgb,var(--bg) 32%,var(--primary-ink)); border:1px solid var(--line); border-radius:14px; padding:18px; margin:0 0 18px; box-shadow:0 2px 5px color-mix(in srgb,var(--ink) 4%,transparent); min-width:0; }
.nhs-card-head { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.nhs-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-bottom:20px; }
.nhs-kpi { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:10px; padding:16px; border:1px solid var(--line); border-radius:13px; background:var(--bg); background:color-mix(in srgb,var(--bg) 25%,var(--primary-ink)); text-align:left; color:var(--ink); font-size:13px; line-height:1.45; min-width:0; }
.nhs-kpi strong { font-size:30px; font-weight:800; color:var(--primary); line-height:1; }
.nhs-kpi small { font-size:12px; color:var(--ink-3); font-weight:400; }
button.nhs-kpi:hover { border-color:var(--primary); background:var(--primary-soft); }
.nhs-zero { opacity:.6; }
.nhs-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; padding:7px 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--bg); font-size:13px; line-height:1.4; font-weight:600; max-width:100%; }
.nhs-btn.pri { color:var(--primary-ink); background:var(--primary); border-color:var(--primary); }
.nhs-btn:hover { filter:brightness(.97); }
.nhs-btn:disabled { opacity:.5; cursor:not-allowed; }
.nhs-root :focus-visible, .nhs-form :focus-visible { outline:2px solid var(--primary); outline-offset:3px; }
.nhs-close { min-width:44px; min-height:44px; font-size:24px; padding:2px; }
.nhs-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; }
.nhs-chip { display:inline-block; padding:3px 9px; border-radius:99px; background:var(--primary-soft); color:var(--primary); font-size:12px; font-weight:600; line-height:1.5; max-width:100%; }
.nhs-note { padding:13px 16px; border:1px solid var(--line); border-radius:10px; background:var(--primary-soft); color:var(--ink-2); font-size:14px; line-height:1.6; margin:12px 0 18px; overflow-wrap:anywhere; }
.nhs-note button { margin-left:8px; }
.nhs-good { color:color-mix(in srgb,var(--success) 65%,var(--ink)); background:color-mix(in srgb,var(--success) 10%,var(--bg)); border-color:color-mix(in srgb,var(--success) 30%,var(--line)); }
.nhs-warn { color:var(--ink); background:color-mix(in srgb,var(--warn) 15%,var(--bg)); border-color:color-mix(in srgb,var(--warn) 50%,var(--line)); }
.nhs-danger { color:var(--danger); background:color-mix(in srgb,var(--danger) 7%,var(--bg)); border-color:color-mix(in srgb,var(--danger) 30%,var(--line)); }
.nhs-empty { text-align:center; padding:26px 12px; color:var(--ink-3); line-height:1.6; }
.nhs-row { display:flex; align-items:center; justify-content:space-between; gap:14px; border:0; border-bottom:1px solid var(--line); padding:14px 0; min-width:0; width:100%; text-align:left; background:transparent; color:var(--ink); font-size:14px; }
.nhs-row:last-child { border-bottom:0; }
.nhs-row > div:first-child { min-width:0; flex:1; }
.nhs-row strong { font-weight:750; }
.nhs-row-icon { width:34px; height:34px; border-radius:9px; color:var(--primary); background:var(--primary-soft); display:grid; place-items:center; font-size:20px; flex-shrink:0; }
.nhs-list button.nhs-row { padding:15px 6px; border-radius:6px; }
.nhs-list button.nhs-row:hover { background:var(--primary-soft); }
.nhs-filters { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:18px; padding:14px; background:var(--bg); border:1px solid var(--line); border-radius:12px; }
.nhs-filters label, .nhs-label { display:flex; flex-direction:column; gap:6px; font-weight:600; font-size:13px; min-width:0; }
.nhs-filters input, .nhs-filters select, .nhs-label select { min-height:38px; width:100%; max-width:100%; font-size:14px; border-radius:8px; }
.nhs-search { flex:1; min-width:180px!important; }
.nhs-table-wrap { width:100%; max-width:100%; overflow-x:auto; border:1px solid var(--line); border-radius:12px; margin:0 0 18px; background:var(--bg); }
.nhs-table { border-collapse:collapse; width:100%; font-size:13px; table-layout:fixed; }
.nhs-table th { background:var(--primary-soft); color:var(--ink-2); font-size:12px; font-weight:700; text-align:left; padding:12px 9px; position:static; white-space:normal; }
.nhs-table td { padding:12px 9px; border-top:1px solid var(--line); vertical-align:top; overflow-wrap:anywhere; }
.nhs-table tr.on { background:var(--primary-soft); }
.nhs-name { border:0; background:transparent; color:var(--ink); text-align:left; padding:0; font-weight:750; font-size:13px; min-height:36px; }
.nhs-name:hover { color:var(--primary); text-decoration:underline; }
.nhs-profile-head { display:flex; gap:14px; align-items:center; margin-bottom:20px; }
.nhs-avatar { display:grid; place-items:center; width:56px; height:56px; border-radius:14px; background:var(--primary-soft); color:var(--primary); font-size:22px; font-weight:800; flex-shrink:0; }
.nhs-dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 22px; margin:10px 0; }
.nhs-dl > div { min-width:0; }
.nhs-dl dt { font-size:12px; color:var(--ink-3); margin-bottom:4px; }
.nhs-dl dd { font-size:14px; font-weight:650; margin:0; line-height:1.5; }
.nhs-shade { position:fixed; inset:0; background:color-mix(in srgb,var(--ink) 24%,transparent); z-index:160; display:flex; justify-content:flex-end; }
.nhs-ngan { width:min(740px,92vw); background:var(--bg); height:100%; display:flex; flex-direction:column; box-shadow:-8px 0 30px color-mix(in srgb,var(--ink) 14%,transparent); padding:0; overflow:hidden; }
.nhs-ngan-head { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; border-bottom:1px solid var(--line); flex-shrink:0; }
.nhs-ngan-head h2 { font-size:18px; }
.nhs-ngan > .nhs-btn { align-self:flex-start; margin:8px 18px 0; }
.nhs-ngan-body { overflow-y:auto; min-height:0; padding:20px; overscroll-behavior:contain; }
.nhs-timeline { list-style:none; margin:6px 0; padding:0 0 0 18px; border-left:2px solid var(--line); }
.nhs-timeline li { position:relative; display:flex; flex-direction:column; gap:5px; padding:0 0 22px 8px; }
.nhs-timeline li:before { content:''; position:absolute; left:-24px; top:3px; width:10px; height:10px; border-radius:50%; background:var(--primary); border:2px solid var(--bg); }
.nhs-timeline time { font-size:12px; color:var(--ink-3); }
.nhs-ca { border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px; }
.nhs-ca:last-child { border:0; }
.nhs-months { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; }
.nhs-months > div { display:flex; flex-direction:column; text-align:center; background:var(--primary-soft); border-radius:8px; padding:10px 5px; gap:5px; font-size:12px; }
.nhs-months strong { font-size:18px; color:var(--primary); }
.nhs-proposal { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2fr); gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.nhs-proposal:last-child { border:0; }
.nhs-check { display:flex; gap:10px; align-items:flex-start; min-width:0; }
.nhs-check input { width:20px; height:20px; flex-shrink:0; }
.nhs-proposal .nhs-dl { grid-template-columns:repeat(4,minmax(0,1fr)); }
.nhs-loading { padding:22px; border-radius:12px; border:1px solid var(--line); margin:16px 0; color:var(--ink-3); }
.nhs-loading span { display:block; height:16px; max-width:80%; border-radius:6px; background:var(--primary-soft); margin:12px 0; }
.nhs-loading span:nth-child(2) { max-width:60%; }
.nhs-loading span:nth-child(3) { max-width:70%; }
.nhs-form { color:var(--ink); overflow-wrap:anywhere; }
.nhs-form .dlg-h { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.nhs-form .dlg-b { display:block; }
.nhs-form .dlg-f { display:flex; justify-content:flex-end; gap:10px; }
.nhs-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 18px; }
.nhs-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.nhs-field > label { font-size:13px; font-weight:650; }
.nhs-field input, .nhs-field select, .nhs-field textarea { width:100%; max-width:100%; min-height:38px; font-size:14px; color:var(--ink); background:var(--bg); }
.nhs-field input[type=checkbox] { width:24px; height:24px; }
.nhs-full { grid-column:1/-1; }
.nhs-field-error, #nhs-form-error { color:var(--danger); font-size:13px; margin:0; }
.nhs-days { display:flex; gap:8px; flex-wrap:wrap; }
.nhs-days label { display:flex; flex-direction:column; align-items:center; gap:5px; padding:7px; border:1px solid var(--line); border-radius:8px; min-width:44px; }
.nhs-days input[type=checkbox] { min-height:24px; width:24px; }
.nhs-filter-box { border:1px solid var(--line); border-radius:10px; margin-bottom:14px; }
.nhs-filter-box summary { padding:12px; min-height:44px; cursor:pointer; font-weight:650; }
.nhs-filter-box .nhs-filters { border:0; margin:0; }
.nhs-person { display:flex; flex-direction:column; width:100%; gap:9px; padding:16px; border:1px solid var(--line); border-radius:12px; margin-bottom:12px; text-align:left; background:var(--bg); color:var(--ink); font-size:13px; line-height:1.6; }
.nhs-person strong { font-size:16px; font-weight:750; }
.nhs-person.on { background:var(--primary-soft); border-color:var(--primary); }
.nhs-person .nhs-chip { margin:0 6px 4px 0; }
.nhs-mobile-back { margin-bottom:12px; }
#mbApp .nhs-root { --bg:var(--msurf); --ink:var(--mink); --ink-2:var(--mink); --ink-3:var(--msub); --line:var(--mbd);
  --primary:var(--mbrand); --primary-soft:var(--msurf2); --primary-ink:var(--mon); --success:var(--mok); --warn:var(--mwarn); --danger:var(--mred); }
#mbApp .nhs-card, #mbApp .nhs-kpi { background:var(--msurf); }
#mbApp .nhs-muted { color:color-mix(in srgb,var(--msub) 90%,var(--mink)); }
html[data-theme="navy"] #mbApp .nhs-btn.pri,
html[data-theme="navy"] #mbApp .nhs-head .nhs-tabs button.on { color:var(--mbg); }
@media(max-width:900px) {
  .nhs-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nhs-proposal .nhs-dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .nhs-root { font-size:14px; }
  .nhs-head { margin:6px 0 14px; gap:10px; }
  .nhs-head > div { width:100%; }
  .nhs-head .nhs-tabs { width:100%; }
  .nhs-head .nhs-tabs button { flex:1; padding:10px 8px; }
  .nhs-root h1 { font-size:22px; }
  .nhs-root h2, .nhs-form h2 { font-size:18px; }
  .nhs-root button, .nhs-form button, .nhs-root select, .nhs-root input, .nhs-form input, .nhs-form select, .nhs-form textarea, .nhs-note button { min-height:44px; min-width:44px; }
  .nhs-tabs button { font-size:13px; padding:10px 12px; }
  .nhs-btn { padding:10px 12px; }
  .nhs-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .nhs-kpi { padding:14px 12px; }
  .nhs-kpi strong { font-size:28px; }
  .nhs-card { padding:14px; margin-bottom:14px; border-radius:12px; }
  .nhs-dl { gap:12px; }
  .nhs-filters { flex-direction:column; align-items:stretch; padding:12px; }
  .nhs-search { min-width:0!important; }
  .nhs-row { align-items:flex-start; flex-wrap:wrap; gap:8px; }
  .nhs-row > .nhs-actions { width:100%; }
  .nhs-shade { z-index:210; }
  .nhs-ngan { width:100%; max-width:100%; }
  .nhs-ngan-body { padding:14px; }
  .nhs-months { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .nhs-proposal { grid-template-columns:minmax(0,1fr); }
  .nhs-check { align-items:center; min-height:44px; }
  .nhs-check input { min-width:44px; }
  .nhs-form-grid { grid-template-columns:minmax(0,1fr); }
  .nhs-full { grid-column:1; }
  .nhs-field input, .nhs-field select, .nhs-field textarea { font-size:16px; }
  .nhs-days label { min-height:70px; }
  .nhs-days input[type=checkbox] { min-height:44px; width:44px; }
}