@charset "UTF-8";
/* ============================================================================
   Nam Phuong ERP — lop giao dien co lap (SHELL)
   File   : namphuong-ui-shell-1.53.0-clean6.css
   Base   : NamPhuongERP Stable 1.53.0 CLEAN
   Scope  : CHI trinh bay. Khong doi database, phan quyen, luong nghiep vu.
   ----------------------------------------------------------------------------
   Thay doi so voi ban 1.53.0-ui-delta.2:
   - Gop 2 khoi :root chong nhau thanh MOT bo token duy nhat.
   - Sidebar chuyen han sang nen toi / chu sang (sua loi chu trang tren nen trang).
   - Thong nhat mot mau thuong hieu duy nhat: teal #0f6f96.
   - Moi khai bao dung color-mix() / dvh deu co dong fallback dung truoc.
   - Thang font-weight quy ve cac muc chuan 400-900 (khong dung 550/650/750/850/950).
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. FONT
   Ban FULL dung truc tiep font he thong de khong phu thuoc tep tai ngoai va
   khong phat sinh yeu cau 404 khi chua co Inter Variable.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   2. TOKEN — CHE DO SANG
   --------------------------------------------------------------------------- */
:root{
  color-scheme:light;

  /* Nen va be mat */
  --npui-bg:#f5f7f9;
  --npui-surface:#ffffff;
  --npui-surface-2:#f1f4f6;
  --npui-surface-3:#e6ebef;
  --npui-hover:#f5f8fa;

  /* Duong ke */
  --npui-border:#d8dee5;
  --npui-border-strong:#c2cbd4;

  /* Chu */
  --npui-text:#0f172a;
  --npui-text-2:#41505f;
  --npui-text-3:#63748a;
  --npui-text-inverse:#ffffff;

  /* Thuong hieu — MOT mau duy nhat cho toan bo ung dung */
  --npui-brand:#0f6f96;
  --npui-brand-hover:#0b587a;
  --npui-brand-strong:#0b587a;
  --npui-brand-weak:#e6f2f7;
  --npui-brand-line:#a9cfdf;
  --npui-ring:rgba(15,111,150,.26);

  /* Trang thai */
  --npui-good:#0b7a45;
  --npui-good-weak:#e6f6ec;
  --npui-good-line:#a7dcbe;
  --npui-warn:#8a4d05;
  --npui-warn-weak:#fdf2e2;
  --npui-warn-line:#eccb9b;
  --npui-crit:#c0261f;
  --npui-crit-weak:#fdecea;
  --npui-crit-line:#f0b9b4;
  --npui-info:#0f6f96;
  --npui-info-weak:#e6f2f7;
  --npui-info-line:#a9cfdf;

  /* SIDEBAR — bang mau rieng, luon nen toi o ca 2 theme */
  --npui-nav-bg:#0d3438;
  --npui-nav-bg-mid:#0a2d31;
  --npui-nav-bg-deep:#08262a;
  --npui-nav-bg-2:#12464b;
  --npui-nav-border:#1b4d52;
  --npui-nav-text:#cfe0e8;        /* 10.9:1 tren nen sidebar */
  --npui-nav-text-strong:#ffffff; /* 14.8:1 */
  --npui-nav-muted:#8fb6c6;       /*  6.8:1 */
  --npui-nav-active-bg:#0f6f96;
  --npui-nav-active-text:#ffffff; /*  5.6:1 */
  --npui-nav-accent:#7fd4e8;

  /* Do bong */
  --npui-shadow-sm:0 1px 2px rgba(15,23,42,.07);
  --npui-shadow-md:0 6px 18px -6px rgba(15,23,42,.16),0 2px 5px rgba(15,23,42,.06);
  --npui-shadow-lg:0 22px 48px -14px rgba(15,23,42,.28),0 4px 12px -4px rgba(15,23,42,.12);

  /* Hinh hoc */
  --npui-radius-sm:8px;
  --npui-radius:11px;
  --npui-radius-lg:14px;
  --npui-sidebar:250px;
  --npui-sidebar-mini:72px;
  --npui-topbar:58px;
  --npui-mobilenav:66px;

  --npui-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ---------------------------------------------------------------------------
   3. TOKEN — CHE DO TOI
   --------------------------------------------------------------------------- */
html[data-theme="dark"]{
  color-scheme:dark;

  --npui-bg:#0d1013;
  --npui-surface:#15181c;
  --npui-surface-2:#1b1f24;
  --npui-surface-3:#242931;
  --npui-hover:#1f242a;

  --npui-border:#2f353d;
  --npui-border-strong:#454d57;

  --npui-text:#eef2f6;
  --npui-text-2:#c2cbd6;
  --npui-text-3:#94a3b3;
  --npui-text-inverse:#0d1013;

  --npui-brand:#4ca6cd;
  --npui-brand-hover:#6dbbdc;
  --npui-brand-strong:#7cc4e2;
  --npui-brand-weak:#10303f;
  --npui-brand-line:#1d5570;
  --npui-ring:rgba(76,166,205,.32);

  --npui-good:#42c283;
  --npui-good-weak:#0e2b1d;
  --npui-good-line:#1d5537;
  --npui-warn:#e0a33c;
  --npui-warn-weak:#2c2313;
  --npui-warn-line:#57431f;
  --npui-crit:#ef7068;
  --npui-crit-weak:#2e1917;
  --npui-crit-line:#5c2b27;
  --npui-info:#4ca6cd;
  --npui-info-weak:#10303f;
  --npui-info-line:#1d5570;

  --npui-nav-bg:#0a2629;
  --npui-nav-bg-mid:#082023;
  --npui-nav-bg-deep:#061a1d;
  --npui-nav-bg-2:#0f383d;
  --npui-nav-border:#164046;
  --npui-nav-text:#cfe0e8;
  --npui-nav-text-strong:#ffffff;
  --npui-nav-muted:#8fb6c6;
  --npui-nav-active-bg:#0f6f96;
  --npui-nav-active-text:#ffffff;
  --npui-nav-accent:#7fd4e8;

  --npui-shadow-sm:0 1px 2px rgba(0,0,0,.45);
  --npui-shadow-md:0 6px 18px rgba(0,0,0,.45);
  --npui-shadow-lg:0 24px 54px rgba(0,0,0,.66);
}

/* ---------------------------------------------------------------------------
   4. NEN TANG
   --------------------------------------------------------------------------- */
html{background:var(--npui-bg)}

body.np-ui-reference{
  /* Anh xa nguoc lai cac bien cua core 1.53.0 de trang cu khong bi lech mau */
  --bg:var(--npui-bg);
  --card:var(--npui-surface);
  --line:var(--npui-border);
  --text:var(--npui-text);
  --muted:var(--npui-text-2);
  --blue:var(--npui-brand);
  --navy:var(--npui-text);
  --np1500-canvas:var(--npui-bg);
  --np1500-surface:var(--npui-surface);
  --np1500-line:var(--npui-border);
  --np1500-text:var(--npui-text);
  --np1500-muted:var(--npui-text-2);
  --np1500-blue:var(--npui-brand);
  --np1500-blue-soft:var(--npui-brand-weak);

  margin:0;
  background:var(--npui-bg)!important;
  color:var(--npui-text)!important;
  font-family:var(--npui-font);
  font-size:15px;
  font-weight:400;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.np-ui-reference *{scrollbar-color:var(--npui-border-strong) transparent;scrollbar-width:thin}
body.np-ui-reference *::-webkit-scrollbar{width:8px;height:8px}
body.np-ui-reference *::-webkit-scrollbar-thumb{
  background:var(--npui-border-strong);
  border:2px solid transparent;
  background-clip:content-box;
  border-radius:999px;
}

/* ---------------------------------------------------------------------------
   5. KHUNG UNG DUNG
   Moi noi dung dvh deu co dong vh dung truoc lam fallback cho may cu.
   --------------------------------------------------------------------------- */
body.np-ui-reference #appView.app{
  display:grid;
  grid-template-columns:var(--npui-sidebar) minmax(0,1fr)!important;
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  background:var(--npui-bg)!important;
}
body.np-ui-reference #appView.app.npui-sidebar-collapsed{
  grid-template-columns:var(--npui-sidebar-mini) minmax(0,1fr)!important;
}
body.np-ui-reference #appView>main{
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:var(--npui-bg)!important;
}

/* ---------------------------------------------------------------------------
   6. SIDEBAR — nen toi, chu sang
   --------------------------------------------------------------------------- */
body.np-ui-reference #sidebar.sidebar{
  position:relative!important;
  inset:auto!important;
  display:flex!important;
  flex-direction:column!important;
  width:auto!important;
  height:100vh!important;
  height:100dvh!important;
  min-height:0!important;
  padding:0!important;
  overflow:hidden!important;
  transform:none!important;
  background:var(--npui-nav-bg)!important;
  color:var(--npui-nav-text)!important;
  border-right:1px solid var(--npui-nav-border)!important;
  box-shadow:none!important;
  transition:width .18s ease,transform .22s ease;
}

/* Core 1.53.0 to nen sidebar bang
     body.np1500-ui.np1502-sidebar-stable #sidebar.sidebar{background:linear-gradient(...)!important}
   Do uu tien cua no (1 id + 4 class) cao hon quy tac o tren, nen background
   cua lop UI KHONG bao gio duoc ve — giao dien toi truoc day la nho gradient
   cua core, tuc la an may. Neu core doi gradient sang mau sang thi loi
   "chu sang tren nen sang" quay lai ngay.
   Quy tac duoi day them #appView de nang so id, nho vay token cua lop UI moi
   that su co hieu luc. Mau giu dung tone teal core dang dung nen nhin khong doi. */
body.np-ui-reference #appView #sidebar.sidebar{
  background-color:var(--npui-nav-bg)!important;
  background-image:linear-gradient(180deg,
    var(--npui-nav-bg) 0%,
    var(--npui-nav-bg-mid) 58%,
    var(--npui-nav-bg-deep) 100%)!important;
}
/* Muon nen phang tuyet doi: them class np-ui-flat-sidebar vao <body>. */
body.np-ui-reference.np-ui-flat-sidebar #appView #sidebar.sidebar{
  background-image:none!important;
}

/* Thuong hieu */
body.np-ui-reference #sidebar .brand{
  position:relative;
  display:flex!important;
  align-items:center;
  gap:10px;
  min-height:var(--npui-topbar);
  padding:8px 11px!important;
  border-bottom:1px solid var(--npui-nav-border);
  background:transparent!important;
  color:var(--npui-nav-text-strong)!important;
}
body.np-ui-reference .npui-brand-logo{
  display:grid;
  place-items:center;
  flex:0 0 34px;
  width:34px;
  height:34px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  background:#ffffff;
}
body.np-ui-reference .npui-brand-logo img{width:30px;height:30px;object-fit:contain}
/* Du phong khi khong tai duoc logo: hien chu cai dau, khong hien icon anh vo */
body.np-ui-reference .npui-brand-logo.is-fallback{
  background:var(--npui-brand);
  border-color:rgba(255,255,255,.28);
  color:#ffffff;
  font-size:15px;
  font-weight:800;
  letter-spacing:-.4px;
}
body.np-ui-reference .npui-brand-copy{display:grid;flex:1 1 auto;min-width:0;line-height:1.2}
body.np-ui-reference .npui-brand-copy strong,
body.np-ui-reference .npui-brand-copy small{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.np-ui-reference .npui-brand-copy strong{
  color:var(--npui-nav-text-strong)!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:-.2px;
}
body.np-ui-reference .npui-brand-copy small{
  margin-top:2px;
  color:var(--npui-nav-muted)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.5px;
  text-transform:uppercase;
}
/* Nut dong menu chi thuoc ve man hinh nho — an han tren may tinh. */
@media(min-width:901px){
  body.np-ui-reference #sidebar .menu-close{display:none!important}
}
body.np-ui-reference .npui-collapse{
  display:grid;
  place-items:center;
  width:28px;min-width:28px;
  height:28px;min-height:28px;
  margin-left:auto;
  padding:0;
  border:1px solid var(--npui-nav-border);
  border-radius:7px;
  background:var(--npui-nav-bg-2);
  color:var(--npui-nav-text);
  cursor:pointer;
}
body.np-ui-reference .npui-collapse:hover{
  border-color:var(--npui-nav-accent);
  color:var(--npui-nav-text-strong);
}

/* Danh sach dieu huong */
body.np-ui-reference #sidebar #nav{
  display:grid!important;
  align-content:start!important;
  flex:1 1 auto;
  min-height:0;
  gap:3px!important;
  padding:9px 8px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
}
/* Luu y: KHONG dat display:flex!important o day.
   Core 1.53.0 an menu ngoai quyen bang class .hidden hoac inline
   style="display:none". Mot khai bao !important se ghi de ca hai va lam
   LO chuc nang khong duoc phan quyen. */
body.np-ui-reference #nav button[data-page]{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px!important;
  width:100%;
  min-height:38px!important;
  margin:0!important;
  padding:7px 10px!important;
  border:0!important;
  border-radius:var(--npui-radius-sm)!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--npui-nav-text)!important;
  font-size:14px!important;
  font-weight:600!important;
  letter-spacing:-.05px;
  text-align:left;
  transform:none!important;
  cursor:pointer;
}
body.np-ui-reference #nav>.np1500-dashboard-link{margin-bottom:3px!important;font-weight:700!important}
body.np-ui-reference #nav button[data-page]:hover{
  background:var(--npui-nav-bg-2)!important;
  color:var(--npui-nav-text-strong)!important;
}
body.np-ui-reference #nav button[data-page].active{
  background:var(--npui-nav-active-bg)!important;
  color:var(--npui-nav-active-text)!important;
  font-weight:700!important;
  box-shadow:0 2px 8px rgba(0,0,0,.28)!important;
}
/* MOT thanh accent duy nhat (ban cu ve trung 2 lan: ::before + border-left) */
body.np-ui-reference #nav button[data-page].active::before{
  content:"";
  position:absolute;
  left:0;top:7px;bottom:7px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--npui-nav-accent);
}
/* Khong dat background o day — file pages dung background-color:currentColor
   lam mau to cho mask icon. Ghi de background se lam icon bien mat. */
/* Core co body.np1500-ui #nav .nav-ico{width:22px;font-size:15px} — selector
   co ID nen thang moi khai bao khong !important cua lop UI. Hau qua o ban
   truoc: emoji goc van ve de len hinh mask, icon trong nhu bong ma.
   Moi thuoc tinh o day deu phai !important. */
body.np-ui-reference #sidebar #nav .nav-ico{
  display:inline-block!important;
  place-items:center!important;
  flex:0 0 20px!important;
  width:20px!important;min-width:20px!important;
  height:20px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  box-sizing:border-box!important;
  /* font-size:0 + color trong suot: emoji goc khong con hien xuyen qua mask */
  font-size:0!important;
  line-height:0!important;
  color:var(--npui-nav-muted)!important;
  background-color:currentColor!important;
  text-indent:0!important;
  transform:none!important;
  filter:none!important;
}
body.np-ui-reference #sidebar #nav button[data-page]:hover .nav-ico{color:var(--npui-nav-text)!important}
body.np-ui-reference #sidebar #nav button[data-page].active .nav-ico{
  color:var(--npui-nav-active-text)!important;
  background-color:currentColor!important;
}

/* Icon nhan nhom: core dat font-size:15px va ve emoji mau. Dong bo ve cung
   he icon don sac voi cac muc con. */
body.np-ui-reference #sidebar #nav .np1500-group-icon{
  display:inline-block!important;
  width:17px!important;min-width:17px!important;
  height:17px!important;
  padding:0!important;
  font-size:0!important;
  line-height:0!important;
  color:var(--npui-nav-muted)!important;
  background-color:currentColor!important;
  filter:none!important;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-image:var(--np3-i-default);mask-image:var(--np3-i-default);
}
body.np-ui-reference #sidebar #nav .np1500-nav-toggle:hover .np1500-group-icon{color:var(--npui-nav-text)!important}
body.np-ui-reference #nav button[data-page]:hover .nav-ico{color:var(--npui-nav-text)!important}
body.np-ui-reference #nav button[data-page].active .nav-ico{color:var(--npui-nav-active-text)!important}
body.np-ui-reference #nav .np1500-nav-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:inherit!important;
}
body.np-ui-reference #nav .np-nav-alert{
  margin-left:auto!important;
  padding:1px 6px!important;
  border-radius:999px!important;
  background:#e5534b!important;
  color:#ffffff!important;
  font-size:10px!important;
  font-weight:800!important;
}

/* Nhom chuc nang */
body.np-ui-reference #nav .np1500-nav-group{display:grid;gap:2px!important;margin-top:6px}
body.np-ui-reference #nav .np1500-nav-toggle{
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr) 14px!important;
  align-items:center!important;
  gap:8px!important;
  width:100%;
  min-height:30px!important;
  padding:5px 9px!important;
  border:0!important;
  border-radius:var(--npui-radius-sm)!important;
  background:transparent!important;
  color:var(--npui-nav-muted)!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.6px!important;
  text-transform:uppercase!important;
  text-align:left;
  cursor:pointer;
}
body.np-ui-reference #nav .np1500-nav-toggle:hover{
  background:var(--npui-nav-bg-2)!important;
  color:var(--npui-nav-text)!important;
}
body.np-ui-reference #nav .np1500-nav-toggle i,
body.np-ui-reference #nav .np1500-group-icon{color:inherit!important;font-size:12px!important;font-style:normal}
body.np-ui-reference #nav .np1500-nav-children>button{padding-left:12px!important}

/* ---- CHOT AN THEO QUYEN ----------------------------------------------
   Dat cuoi khoi dieu huong va co do uu tien cao hon moi quy tac o tren.
   Bao dam moi thu core danh dau la an thi VAN an, du lop giao dien nay co
   dung !important o cho khac. Day la hang rao an toan cho phan quyen. */
body.np-ui-reference #sidebar #nav .hidden,
body.np-ui-reference #sidebar #nav [hidden],
body.np-ui-reference #sidebar #nav button[aria-hidden="true"],
body.np-ui-reference #sidebar #nav section[aria-hidden="true"],
body.np-ui-reference .mobile-bottom-nav .hidden,
body.np-ui-reference .mobile-bottom-nav [hidden]{display:none!important}

/* Dang xuat */
body.np-ui-reference #logoutBtn.logout{
  display:flex!important;
  align-items:center;
  gap:10px;
  min-height:40px!important;
  margin:0 8px 10px!important;
  padding:8px 11px!important;
  border:1px solid var(--npui-nav-border)!important;
  border-radius:var(--npui-radius-sm)!important;
  background:var(--npui-nav-bg-2)!important;
  color:var(--npui-nav-text)!important;
  font-size:13.5px!important;
  font-weight:700!important;
  cursor:pointer;
}
body.np-ui-reference #logoutBtn.logout:hover{
  border-color:#e5534b!important;
  background:#3a1a18!important;
  color:#ffb4ae!important;
}
body.np-ui-reference .npui-logout-icon{flex:0 0 18px;width:18px;text-align:center}

/* ---------------------------------------------------------------------------
   7. SIDEBAR THU GON (desktop)
   --------------------------------------------------------------------------- */
body.np-ui-reference #appView.npui-sidebar-collapsed .npui-brand-copy,
body.np-ui-reference #appView.npui-sidebar-collapsed .np1500-nav-toggle,
body.np-ui-reference #appView.npui-sidebar-collapsed .np1500-nav-text,
body.np-ui-reference #appView.npui-sidebar-collapsed .np-nav-alert,
body.np-ui-reference #appView.npui-sidebar-collapsed .npui-logout-label{display:none!important}
body.np-ui-reference #appView.npui-sidebar-collapsed #sidebar .brand{justify-content:center;padding-inline:8px!important}
body.np-ui-reference #appView.npui-sidebar-collapsed .npui-collapse{
  position:absolute;right:-12px;top:15px;z-index:3;
  background:var(--npui-nav-bg-2);
}
body.np-ui-reference #appView.npui-sidebar-collapsed #nav{padding:9px!important}
body.np-ui-reference #appView.npui-sidebar-collapsed #nav .np1500-nav-group{display:block!important;margin-top:3px}
body.np-ui-reference #appView.npui-sidebar-collapsed #nav .np1500-nav-children{
  display:grid!important;
  grid-template-rows:1fr!important;
  opacity:1!important;
}
body.np-ui-reference #appView.npui-sidebar-collapsed #nav button[data-page]{
  justify-content:center;
  padding:7px!important;
}
body.np-ui-reference #appView.npui-sidebar-collapsed #logoutBtn{justify-content:center;padding-inline:7px!important}

/* ---------------------------------------------------------------------------
   8. THANH TREN
   --------------------------------------------------------------------------- */
body.np-ui-reference #appView>main>header{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex:0 0 var(--npui-topbar)!important;
  gap:10px!important;
  height:var(--npui-topbar)!important;
  min-height:var(--npui-topbar)!important;
  padding:0 16px!important;
  overflow:visible!important;
  border-bottom:1px solid var(--npui-border)!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text)!important;
}
body.np-ui-reference .npui-topbar-title{display:grid;min-width:0;line-height:1.2}
body.np-ui-reference .npui-topbar-title small{
  margin:0!important;
  color:var(--npui-text-3)!important;
  font-size:10px!important;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}
body.np-ui-reference .npui-topbar-title b{
  margin-top:2px;
  color:var(--npui-text)!important;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:-.15px;
  white-space:nowrap;
}
body.np-ui-reference .npui-topbar-spacer{flex:1 1 auto;min-width:8px}

body.np-ui-reference .npui-search-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:230px;
  height:34px;min-height:34px;
  padding:0 11px;
  border:1px solid var(--npui-border)!important;
  border-radius:var(--npui-radius-sm)!important;
  background:var(--npui-surface-2)!important;
  color:var(--npui-text-2)!important;
  font-size:13px;
  font-weight:600;
  text-align:left;
  cursor:pointer;
}
body.np-ui-reference .npui-search-trigger:hover{
  border-color:var(--npui-border-strong)!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text)!important;
}
body.np-ui-reference .npui-search-trigger>span:nth-child(2){flex:1 1 auto;min-width:0}
body.np-ui-reference .npui-search-trigger kbd{
  flex:0 0 auto;
  padding:1px 6px;
  border:1px solid var(--npui-border);
  border-radius:4px;
  background:var(--npui-surface);
  color:var(--npui-text-3);
  font:700 10px var(--npui-font);
}
body.np-ui-reference .npui-theme{
  display:grid;
  place-items:center;
  width:34px;min-width:34px;
  height:34px;min-height:34px;
  padding:0;
  border:1px solid var(--npui-border)!important;
  border-radius:var(--npui-radius-sm)!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text-2)!important;
  cursor:pointer;
}
body.np-ui-reference .npui-theme:hover{background:var(--npui-surface-2)!important;color:var(--npui-brand)!important}

body.np-ui-reference .header-status{
  order:4;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
}
body.np-ui-reference .header-status #today{color:var(--npui-text-3);font-size:11px;white-space:nowrap}
body.np-ui-reference .online-status{
  padding:3px 8px!important;
  border:1px solid var(--npui-good-line)!important;
  border-radius:999px!important;
  background:var(--npui-good-weak)!important;
  color:var(--npui-good)!important;
  font-size:10.5px!important;
  font-weight:800!important;
}
body.np-ui-reference .header-user{order:5;min-width:0}
body.np-ui-reference .header-user>div:last-child{min-width:0}
body.np-ui-reference .header-user b{color:var(--npui-text)!important;font-size:13.5px;font-weight:800}
body.np-ui-reference .header-user small{color:var(--npui-text-3)!important;font-size:11px}
body.np-ui-reference .header-avatar{
  flex:0 0 32px!important;
  width:32px!important;height:32px!important;
  background:linear-gradient(145deg,#08769a,#075d8d)!important;
  border-color:var(--npui-border)!important;
  box-shadow:none!important;
}
body.np-ui-reference .team-avatar,
body.np-ui-reference .welcome-avatar,
body.np-ui-reference .member-avatar-fallback{
  background:linear-gradient(145deg,#08769a,#075d8d)!important;
}
body.np-ui-reference .menu-btn{display:none}

/* ---------------------------------------------------------------------------
   9. NOI DUNG
   --------------------------------------------------------------------------- */
body.np-ui-reference #content{
  flex:1 1 auto;
  min-height:0;
  padding:20px 22px 30px!important;
  overflow-x:hidden;
  overflow-y:auto;
  background:var(--npui-bg)!important;
}
body.np-ui-reference #content>*{max-width:1600px;margin-left:auto;margin-right:auto}

body.np-ui-reference .page-head{
  align-items:center!important;
  gap:12px!important;
  margin:0 auto 17px!important;
  padding:0!important;
}
body.np-ui-reference .page-head h2{
  margin:0;
  color:var(--npui-text)!important;
  font-size:26px!important;
  font-weight:800!important;
  line-height:1.14!important;
  letter-spacing:-.7px;
}
body.np-ui-reference .page-head .np-page-description,
body.np-ui-reference .page-head p{
  margin-top:4px;
  color:var(--npui-text-2)!important;
  font-size:13.5px!important;
  font-weight:400!important;
  line-height:1.5;
}
body.np-ui-reference .actions{gap:8px!important}

/* The va bang */
body.np-ui-reference .card,
body.np-ui-reference .metric,
body.np-ui-reference .table-wrap,
body.np-ui-reference .quick-grid>button,
body.np-ui-reference .request-card,
body.np-ui-reference .status-card,
body.np-ui-reference .np1380-section,
body.np-ui-reference .np-step-card{
  border:1px solid var(--npui-border)!important;
  border-radius:var(--npui-radius-lg)!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text)!important;
  box-shadow:var(--npui-shadow-sm)!important;
}
body.np-ui-reference .card{padding:16px!important}
body.np-ui-reference .cards,
body.np-ui-reference .grid-2,
body.np-ui-reference .dashboard-grid{gap:12px!important}
body.np-ui-reference .np1380-section-title h3,
body.np-ui-reference .card-title-row h3,
body.np-ui-reference .card>h3,
body.np-ui-reference .form-section-title b{
  color:var(--npui-text)!important;
  font-size:16px!important;
  font-weight:800!important;
  letter-spacing:-.25px!important;
}
body.np-ui-reference .np1380-section-title small,
body.np-ui-reference .summary-section,
body.np-ui-reference .section-kicker{
  color:var(--npui-text-2)!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.65px!important;
}
body.np-ui-reference .np1380-section-title>span{color:var(--npui-text-3)!important;font-size:12px!important;font-weight:500!important}

/* Chi so KPI */
body.np-ui-reference .metric{min-height:112px!important;min-width:0!important;padding:17px!important;justify-content:center}
body.np-ui-reference .metric>span:not(.np137-metric-icon){
  color:var(--npui-text-2)!important;
  font-size:11.5px!important;
  font-weight:800!important;
  letter-spacing:.5px!important;
  text-transform:uppercase;
}
body.np-ui-reference .metric strong{
  margin-top:7px!important;
  color:var(--npui-text)!important;
  font-size:29px!important;
  font-weight:800!important;
  line-height:1.05!important;
  letter-spacing:-.9px!important;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
body.np-ui-reference .metric small{color:var(--npui-text-3)!important;font-size:11.5px!important;font-weight:500!important}
body.np-ui-reference .metric-alert{
  border-color:var(--npui-warn-line)!important;
  background:var(--npui-warn-weak)!important;
}

/* Loi tat */
body.np-ui-reference .quick-grid{gap:11px!important}
body.np-ui-reference .quick-grid>button{min-height:78px!important;padding:14px 16px!important;cursor:pointer}
body.np-ui-reference .quick-grid>button:hover{
  border-color:var(--npui-border-strong)!important;
  background:var(--npui-hover)!important;
  box-shadow:var(--npui-shadow-md)!important;
  transform:translateY(-1px)!important;
}
body.np-ui-reference .quick-grid>button b,
body.np-ui-reference .quick-grid>button strong{
  color:var(--npui-text)!important;
  font-size:14.5px!important;
  font-weight:800!important;
  line-height:1.25!important;
}
body.np-ui-reference .quick-grid>button span,
body.np-ui-reference .quick-grid>button small{
  color:var(--npui-text-3)!important;
  font-size:11.5px!important;
  font-weight:400!important;
  line-height:1.35!important;
}

/* Bang du lieu */
body.np-ui-reference .table-wrap{overflow:auto!important}
body.np-ui-reference table{width:100%;background:var(--npui-surface)!important;color:var(--npui-text)!important}
body.np-ui-reference th{
  height:42px;
  padding:9px 11px!important;
  border-bottom:1px solid var(--npui-border)!important;
  background:var(--npui-surface-2)!important;
  color:var(--npui-text-2)!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.55px!important;
  text-transform:uppercase;
}
body.np-ui-reference td{
  height:48px;
  padding:9px 11px!important;
  border-bottom:1px solid var(--npui-border)!important;
  color:var(--npui-text)!important;
  font-size:13.5px!important;
  font-weight:500!important;
  line-height:1.35!important;
}
body.np-ui-reference tbody tr:last-child td{border-bottom:0!important}
body.np-ui-reference tbody tr:hover,
body.np-ui-reference tr.clickable:hover{background:var(--npui-hover)!important}
body.np-ui-reference tbody td:first-child{font-weight:700!important}
body.np-ui-reference td b,
body.np-ui-reference td strong{font-weight:800!important}
body.np-ui-reference td small{color:var(--npui-text-3)!important;font-size:11.5px!important;font-weight:400!important}

/* Nhan trang thai */
body.np-ui-reference .pill,
body.np-ui-reference .approval-state,
body.np-ui-reference .np-status-badge,
body.np-ui-reference .np134-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:25px;
  padding:4px 9px!important;
  border:1px solid var(--npui-border)!important;
  border-radius:999px!important;
  background:var(--npui-surface-3)!important;
  color:var(--npui-text-2)!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.1px!important;
}
body.np-ui-reference .pill.ok,
body.np-ui-reference .approval-state.approved{
  border-color:var(--npui-good-line)!important;
  background:var(--npui-good-weak)!important;
  color:var(--npui-good)!important;
}
body.np-ui-reference .pill.bad,
body.np-ui-reference .approval-state.rejected{
  border-color:var(--npui-crit-line)!important;
  background:var(--npui-crit-weak)!important;
  color:var(--npui-crit)!important;
}
body.np-ui-reference .approval-state.pending{
  border-color:var(--npui-warn-line)!important;
  background:var(--npui-warn-weak)!important;
  color:var(--npui-warn)!important;
}

/* ---------------------------------------------------------------------------
   10. DIEU KHIEN NHAP LIEU
   --------------------------------------------------------------------------- */
body.np-ui-reference button,
body.np-ui-reference input,
body.np-ui-reference select,
body.np-ui-reference textarea{font-family:var(--npui-font)}
body.np-ui-reference button{
  border-radius:var(--npui-radius-sm)!important;
  font-size:13.5px;
  font-weight:700!important;
  transition:background .12s ease,border-color .12s ease,color .12s ease,box-shadow .12s ease,transform .08s ease;
}
body.np-ui-reference button.primary{
  border:1px solid var(--npui-brand)!important;
  background:var(--npui-brand)!important;
  color:#ffffff!important;
  font-weight:800!important;
  box-shadow:0 1px 2px rgba(15,111,150,.28)!important;
}
body.np-ui-reference button.primary:hover{
  border-color:var(--npui-brand-hover)!important;
  background:var(--npui-brand-hover)!important;
}
body.np-ui-reference button.secondary{
  border:1px solid var(--npui-border)!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text-2)!important;
  box-shadow:none!important;
}
body.np-ui-reference button.secondary:hover{
  border-color:var(--npui-border-strong)!important;
  background:var(--npui-surface-2)!important;
  color:var(--npui-text)!important;
}
body.np-ui-reference button.danger{
  border:1px solid var(--npui-crit-line)!important;
  background:var(--npui-crit-weak)!important;
  color:var(--npui-crit)!important;
}
body.np-ui-reference button:focus-visible,
body.np-ui-reference input:focus-visible,
body.np-ui-reference select:focus-visible,
body.np-ui-reference textarea:focus-visible,
body.np-ui-reference [tabindex]:focus-visible{
  outline:2px solid var(--npui-brand)!important;
  outline-offset:2px!important;
}

body.np-ui-reference input,
body.np-ui-reference select,
body.np-ui-reference textarea{
  border:1px solid var(--npui-border-strong)!important;
  border-radius:var(--npui-radius-sm)!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text)!important;
  font-size:14.5px!important;
  font-weight:500!important;
  box-shadow:none!important;
}
body.np-ui-reference input::placeholder,
body.np-ui-reference textarea::placeholder{color:var(--npui-text-3);font-weight:400}
body.np-ui-reference input:focus,
body.np-ui-reference select:focus,
body.np-ui-reference textarea:focus{
  border-color:var(--npui-brand)!important;
  box-shadow:0 0 0 3px var(--npui-ring)!important;
}
body.np-ui-reference label{color:var(--npui-text-2)!important;font-size:12.5px!important;font-weight:700!important}
body.np-ui-reference .field-help,
body.np-ui-reference .muted{color:var(--npui-text-3)!important;font-size:12px!important;font-weight:400!important}

body.np-ui-reference .toolbar{
  align-items:end;
  gap:8px!important;
  margin-bottom:12px!important;
  padding:10px;
  border:1px solid var(--npui-border);
  border-radius:var(--npui-radius);
  background:var(--npui-surface);
  box-shadow:var(--npui-shadow-sm);
}

/* ---------------------------------------------------------------------------
   11. HOP THOAI
   --------------------------------------------------------------------------- */
body.np-ui-reference .modal-backdrop{background:rgba(9,16,26,.55)!important}
body.np-ui-reference .modal{
  border:1px solid var(--npui-border)!important;
  border-radius:var(--npui-radius-lg)!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text)!important;
  box-shadow:var(--npui-shadow-lg)!important;
}
body.np-ui-reference .modal-head{border-bottom:1px solid var(--npui-border)!important}
body.np-ui-reference .modal-head h3{font-size:18px!important;font-weight:800!important;letter-spacing:-.25px!important}
body.np-ui-reference .modal-head .muted{font-size:12.5px!important}

/* ---------------------------------------------------------------------------
   12. SO TIEN / TONG KET
   --------------------------------------------------------------------------- */
body.np-ui-reference .money-input,
body.np-ui-reference .item-total{
  color:var(--npui-text)!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums;
}
body.np-ui-reference .summary-row{font-size:13.5px!important;font-weight:500!important}
body.np-ui-reference .summary-row b{font-size:14px!important;font-weight:800!important;font-variant-numeric:tabular-nums}
body.np-ui-reference .summary-row.total{
  margin-top:6px!important;
  padding:12px 0!important;
  border-top:1px solid var(--npui-border-strong)!important;
}
body.np-ui-reference .summary-row.total span{font-weight:700!important}
body.np-ui-reference .summary-row.total b{color:var(--npui-brand)!important;font-size:18px!important;font-weight:800!important}
body.np-ui-reference .payment-total-highlight b,
body.np-ui-reference .review-total-highlight strong{font-weight:800!important;font-variant-numeric:tabular-nums}
body.np-ui-reference .section-number{font-weight:800!important}

/* ---------------------------------------------------------------------------
   13. TIM NHANH CHUC NANG
   --------------------------------------------------------------------------- */
body.np-ui-reference .npui-command-backdrop{
  position:fixed;
  inset:0;
  z-index:260;
  display:grid;
  place-items:start center;
  padding:10vh 16px 24px;
  background:rgba(9,16,26,.48);
}
body.np-ui-reference .npui-command-backdrop[hidden]{display:none!important}
body.np-ui-reference .npui-command{
  width:min(600px,96vw);
  overflow:hidden;
  border:1px solid var(--npui-border);
  border-radius:var(--npui-radius-lg);
  background:var(--npui-surface);
  color:var(--npui-text);
  box-shadow:var(--npui-shadow-lg);
}
body.np-ui-reference .npui-command-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--npui-border);
}
body.np-ui-reference .npui-command-search input{
  height:38px;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:15px!important;
  font-weight:500!important;
}
/* O nhap la phan tu duy nhat nhan focus trong hop thoai va da co con tro
   nhay, nen bo vien focus de khong tao cam giac "o long trong o". */
body.np-ui-reference .npui-command-search input:focus,
body.np-ui-reference .npui-command-search input:focus-visible{
  box-shadow:none!important;
  outline:none!important;
}
body.np-ui-reference .npui-command-search kbd{
  padding:2px 7px;
  border:1px solid var(--npui-border);
  border-radius:5px;
  background:var(--npui-surface-2);
  color:var(--npui-text-3);
  font:700 10px var(--npui-font);
}
body.np-ui-reference .npui-command-list{max-height:min(58vh,470px);padding:7px;overflow:auto}
body.np-ui-reference .npui-command-item{
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  width:100%;
  min-height:48px;
  padding:8px 10px!important;
  border:1px solid transparent!important;
  border-radius:var(--npui-radius-sm)!important;
  background:transparent!important;
  color:var(--npui-text)!important;
  text-align:left;
  cursor:pointer;
}
body.np-ui-reference .npui-command-item:hover,
body.np-ui-reference .npui-command-item.active{
  border-color:var(--npui-brand-line)!important;
  background:var(--npui-brand-weak)!important;
}
body.np-ui-reference .npui-command-item b{display:block;font-size:14px!important;font-weight:800!important}
body.np-ui-reference .npui-command-item small{
  display:block;
  margin-top:2px;
  color:var(--npui-text-3);
  font-size:11px!important;
  font-weight:400!important;
}
body.np-ui-reference .npui-command-item em{color:var(--npui-text-3);font-style:normal}
body.np-ui-reference .npui-command-empty{padding:28px;color:var(--npui-text-3);text-align:center}
body.np-ui-reference .npui-command-foot{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 13px;
  border-top:1px solid var(--npui-border);
  background:var(--npui-surface-2);
  color:var(--npui-text-3);
  font-size:10.5px;
}
body.npui-command-open{overflow:hidden}

/* ---------------------------------------------------------------------------
   14. DANG NHAP
   --------------------------------------------------------------------------- */
html #loginView{
  background:var(--npui-bg)!important;
  background:radial-gradient(circle at 15% 10%,var(--npui-brand-weak),transparent 34%),
             linear-gradient(145deg,var(--npui-bg),var(--npui-surface))!important;
}
#loginView .np-login-card{
  border:1px solid var(--npui-border)!important;
  border-radius:18px!important;
  background:var(--npui-surface)!important;
  color:var(--npui-text)!important;
  box-shadow:var(--npui-shadow-lg)!important;
}
#loginView .login-divider{color:var(--npui-text-3)!important}
#loginView .login-divider:before,
#loginView .login-divider:after{background:var(--npui-border)!important}
#loginView .login-values span{
  border-color:var(--npui-border)!important;
  background:var(--npui-surface-2)!important;
  color:var(--npui-text-2)!important;
}

/* Man dang nhap duoc ve HOAN TOAN o day, khong dua vao lop mau toi sinh tu
   core. Ly do: 7.3 ban dau chi lam toi cai the ma khong doi mau chu ben trong
   (mau loai tru '\.login' khong khop '.np-login-card'), thanh ra chu xanh dam
   nam tren nen toi — dung nhu anh Nhan bao "kho nhin qua".
   Cac quy tac duoi dung TOKEN nen tu dung cho ca hai che do sang/toi. */
#loginView .login-brand strong{color:var(--npui-text)!important}
#loginView .login-brand span,
#loginView .login-slogan,
#loginView .login-footnote{color:var(--npui-text-3)!important}
#loginView .login-field>span,
#loginView .login-field label>span{color:var(--npui-text-2)!important}

#loginView .login-input-wrap,
#loginView .password-wrap{
  border:1.5px solid var(--npui-border)!important;
  background:var(--npui-surface-2)!important;
  box-shadow:none!important;
}
#loginView .login-input-wrap>i,
#loginView .password-wrap>i{
  background:transparent!important;
  background-image:none!important;
  border-right:1px solid var(--npui-border)!important;
}
#loginView .login-input-wrap input,
#loginView .login-field input{
  background:transparent!important;
  border:0!important;
  color:var(--npui-text)!important;
  -webkit-text-fill-color:var(--npui-text)!important;
  /* Core dat 'box-shadow:0 2px 0 #fff inset' — o che do toi no thanh mot vach
     trang sac ngay tren mep o nhap. */
  box-shadow:none!important;
}
#loginView .login-input-wrap input::placeholder,
#loginView .login-field input::placeholder{color:var(--npui-text-3)!important;opacity:1!important}
#loginView .login-input-wrap:focus-within,
#loginView .password-wrap:focus-within{
  border-color:var(--npui-brand)!important;
  background:var(--npui-surface-3)!important;
  box-shadow:0 0 0 4px var(--npui-ring)!important;
}
#loginView .password-wrap button{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--npui-text-3)!important;
}
#loginView .login-submit{
  background:var(--npui-brand)!important;
  background-image:none!important;
  border:0!important;
  color:var(--npui-text-inverse)!important;
  box-shadow:none!important;
}
#loginView .login-submit:hover{background:var(--npui-brand-hover)!important}
#loginView .login-message{color:var(--npui-text-2)!important}

/* ---------------------------------------------------------------------------
   15. MAN HINH NHO
   --------------------------------------------------------------------------- */
@media(max-width:1080px){
  body.np-ui-reference .npui-search-trigger{min-width:150px}
  body.np-ui-reference .npui-search-trigger kbd{display:none}
  body.np-ui-reference .header-status #today{display:none}
}

@media(max-width:900px){
  body.np-ui-reference{font-size:14.5px;padding-bottom:var(--npui-mobilenav)!important}
  body.np-ui-reference.np-no-mobilenav{padding-bottom:0!important}

  body.np-ui-reference #appView.app,
  body.np-ui-reference #appView.app.npui-sidebar-collapsed{
    display:block!important;
    height:auto;
    min-height:calc(100vh - var(--npui-mobilenav));
    min-height:calc(100dvh - var(--npui-mobilenav));
  }
  body.np-ui-reference #appView>main{
    height:calc(100vh - var(--npui-mobilenav));
    height:calc(100dvh - var(--npui-mobilenav));
  }
  body.np-ui-reference.np-no-mobilenav #appView>main{height:100vh;height:100dvh}

  body.np-ui-reference #sidebar.sidebar{
    position:fixed!important;
    inset:0 auto 0 0!important;
    /* UI CLEAN 7.6: backdrop cua core o z-index 9990; drawer phai nam tren
       backdrop de nut menu nhan duoc click/touch va chuyen trang. */
    z-index:10000!important;
    width:min(292px,88vw)!important;
    height:100vh!important;
    height:100dvh!important;
    transform:translateX(-104%)!important;
    box-shadow:var(--npui-shadow-lg)!important;
  }
  body.np-ui-reference.menu-open #sidebar.sidebar{transform:translateX(0)!important}
  body.np-ui-reference #sidebar .brand{padding-right:50px!important}
  body.np-ui-reference .npui-collapse{display:none!important}
  body.np-ui-reference #sidebar .menu-close{
    display:grid!important;
    place-items:center;
    position:absolute!important;
    top:11px!important;right:10px!important;
    z-index:3;
    width:34px!important;min-width:34px!important;
    height:34px!important;min-height:34px!important;
    padding:0!important;
    border:1px solid var(--npui-nav-border)!important;
    border-radius:var(--npui-radius-sm)!important;
    background:var(--npui-nav-bg-2)!important;
    color:var(--npui-nav-text)!important;
  }

  /* Tren mobile, sidebar luon o dang day du du co co thu gon hay khong */
  body.np-ui-reference #appView.npui-sidebar-collapsed .npui-brand-copy,
  body.np-ui-reference #appView.npui-sidebar-collapsed .np1500-nav-toggle,
  body.np-ui-reference #appView.npui-sidebar-collapsed .np1500-nav-text,
  body.np-ui-reference #appView.npui-sidebar-collapsed .np-nav-alert,
  body.np-ui-reference #appView.npui-sidebar-collapsed .npui-logout-label{display:initial!important}
  body.np-ui-reference #appView.npui-sidebar-collapsed #nav .np1500-nav-group,
  body.np-ui-reference #appView.npui-sidebar-collapsed #nav .np1500-nav-children{display:grid!important}
  body.np-ui-reference #appView.npui-sidebar-collapsed #nav button[data-page]{
    justify-content:flex-start!important;
    padding:8px 10px!important;
  }
  body.np-ui-reference #appView.npui-sidebar-collapsed #sidebar .brand{justify-content:flex-start;padding-inline:11px!important}

  body.np-ui-reference #appView>main>header{position:relative;z-index:15;gap:8px!important;padding:0 10px!important}
  body.np-ui-reference .menu-btn{
    display:grid!important;
    place-items:center!important;
    width:36px!important;min-width:36px!important;
    height:36px!important;min-height:36px!important;
    padding:0!important;
    border:1px solid var(--npui-border)!important;
    background:var(--npui-surface)!important;
    color:var(--npui-text)!important;
  }
  body.np-ui-reference .npui-topbar-title{min-width:0}
  body.np-ui-reference .npui-topbar-title small{display:none}
  body.np-ui-reference .npui-topbar-title b{max-width:34vw;overflow:hidden;text-overflow:ellipsis}
  body.np-ui-reference .npui-search-trigger{width:36px;min-width:36px;padding:0!important;justify-content:center}
  body.np-ui-reference .npui-search-trigger>span:nth-child(2),
  body.np-ui-reference .npui-search-trigger kbd{display:none}
  body.np-ui-reference .header-status{display:none!important}
  body.np-ui-reference .header-user{margin-left:0!important}
  body.np-ui-reference .header-user>div:last-child{display:none}

  body.np-ui-reference #content{padding:14px 11px 88px!important}
  body.np-ui-reference .page-head{align-items:flex-start!important;margin-bottom:13px!important}
  body.np-ui-reference .page-head h2{font-size:23px!important;letter-spacing:-.5px!important}
  body.np-ui-reference .page-head p{font-size:12.5px!important}
  body.np-ui-reference .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.np-ui-reference .card{padding:13px!important}
  body.np-ui-reference .metric{min-height:105px!important;padding:14px!important}
  body.np-ui-reference .metric strong{font-size:25px!important}
  body.np-ui-reference .quick-grid>button{min-height:80px!important}
  body.np-ui-reference .toolbar{padding:9px}
  body.np-ui-reference #nav button[data-page]{min-height:44px!important;font-size:14.5px!important}

  body.np-ui-reference .mobile-bottom-nav{
    height:var(--npui-mobilenav)!important;
    border-top:1px solid var(--npui-border)!important;
    background:var(--npui-surface)!important;
    box-shadow:0 -6px 20px rgba(15,23,42,.10)!important;
  }
  body.np-ui-reference .mobile-bottom-nav button{color:var(--npui-text-3)!important;font-size:10.5px!important;font-weight:700!important}
  body.np-ui-reference .mobile-bottom-nav button.active{color:var(--npui-brand)!important;background:var(--npui-brand-weak)!important}
  body.np-ui-reference .mobile-sale-bar{
    bottom:var(--npui-mobilenav)!important;
    background:var(--npui-text)!important;
    color:var(--npui-surface)!important;
  }
  body.np-ui-reference .mobile-sale-bar small{font-weight:700!important}
  body.np-ui-reference .mobile-sale-bar strong{font-size:20px!important;font-weight:800!important;font-variant-numeric:tabular-nums}
  body.np-ui-reference .mobile-sale-section>summary b{color:var(--npui-text)!important;font-size:15px!important;font-weight:800!important}
  body.np-ui-reference .mobile-sale-section>summary small{color:var(--npui-text-3)!important;font-size:11.5px!important;font-weight:500!important}
}

@media(max-width:560px){
  body.np-ui-reference #appView>main>header{gap:6px!important}
  body.np-ui-reference .page-head h2{font-size:22px!important}
  body.np-ui-reference .page-head{flex-direction:column!important;align-items:stretch!important}
  body.np-ui-reference .page-head .actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.np-ui-reference .page-head .actions>*{width:100%}
  body.np-ui-reference .cards{gap:9px!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.np-ui-reference .grid-2,
  body.np-ui-reference .dashboard-grid{grid-template-columns:1fr!important}
  body.np-ui-reference .metric{padding:12px!important}
  body.np-ui-reference .metric strong{font-size:24px!important}
  body.np-ui-reference th{font-size:10px!important}
  body.np-ui-reference td{font-size:13px!important}
  body.np-ui-reference label{font-size:12px!important}
  body.np-ui-reference .npui-command-backdrop{padding:7vh 8px 16px}
}

@media(max-width:390px){
  body.np-ui-reference .npui-theme{display:none}
  body.np-ui-reference .npui-topbar-title b{max-width:40vw}
  body.np-ui-reference .cards{grid-template-columns:1fr!important}
}

/* ---------------------------------------------------------------------------
   16. CAU NOI MAY TINH BANG (901–1180px)
   Core 1.53.0 coi day la tablet va dung overlay sidebar. O day van la luoi
   desktop nen phai vo hieu lop overlay cu, neu khong sidebar 286px se de len
   panel chinh va che mat canh trai.
   --------------------------------------------------------------------------- */
@media(min-width:901px) and (max-width:1180px){
  body.np-ui-reference.np-tablet #appView.app:not(.hidden){
    position:fixed!important;
    inset:0!important;
    display:grid!important;
    grid-template-columns:var(--npui-sidebar) minmax(0,1fr)!important;
    width:var(--np-visible-width,100vw)!important;
    max-width:100vw!important;
    height:var(--np-visible-height,100vh)!important;
    height:var(--np-visible-height,100dvh)!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body.np-ui-reference.np-tablet #appView.app.npui-sidebar-collapsed:not(.hidden){
    grid-template-columns:var(--npui-sidebar-mini) minmax(0,1fr)!important;
  }
  body.np-ui-reference.np-tablet.np1500-ui.np1502-sidebar-stable #sidebar.sidebar,
  body.np-ui-reference.np-tablet #sidebar.sidebar{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    display:flex!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    z-index:auto!important;
    contain:none!important;
  }
  body.np-ui-reference.np-tablet #appView.app>main{
    position:relative!important;
    inset:auto!important;
    display:flex!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    height:100vh!important;
    height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.np-ui-reference.np-tablet #appView.app>main>header{
    flex:0 0 var(--npui-topbar)!important;
    height:var(--npui-topbar)!important;
    min-height:var(--npui-topbar)!important;
  }
  body.np-ui-reference.np-tablet #menuBtn.menu-btn,
  body.np-ui-reference.np-tablet .mobile-bottom-nav,
  body.np-ui-reference.np-tablet #mobileMenuBackdrop{display:none!important}
  body.np-ui-reference.np-tablet #content{width:auto!important;max-width:none!important;padding:16px 20px 26px!important}
}

/* Trong khoang may tinh bang, 4 the KPI tren mot hang lam so tien bi cat.
   Ha xuong 2 cot va giam co chu de gia tri luon doc duoc tron ven. */
@media(min-width:901px) and (max-width:1180px){
  body.np-ui-reference .cards{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.np-ui-reference .quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.np-ui-reference .metric strong{font-size:25px!important}
}

/* ---------------------------------------------------------------------------
   17. GIAM CHUYEN DONG / IN AN
   --------------------------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  body.np-ui-reference *,
  body.np-ui-reference *::before,
  body.np-ui-reference *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
}

@media print{
  body.np-ui-reference .npui-collapse,
  body.np-ui-reference .npui-search-trigger,
  body.np-ui-reference .npui-theme,
  body.np-ui-reference .npui-command-backdrop,
  body.np-ui-reference #sidebar,
  body.np-ui-reference .mobile-bottom-nav{display:none!important}
  body.np-ui-reference #appView.app{display:block!important;height:auto!important;overflow:visible!important}
  body.np-ui-reference #appView>main,
  body.np-ui-reference #content{height:auto!important;overflow:visible!important}
}

/* ---------------------------------------------------------------------------
   16. MAN CHAO (SPLASH) VA MAN CHUYEN CANH SAU DANG NHAP
   ---------------------------------------------------------------------------
   Day la cho DE BO SOT NHAT ma cung de thay nhat: core giu man chao phu kin
   man hinh khoang 1,75 giay moi lan mo lai ung dung, va quy tac cuoi cung cua
   core to no bang gradient RAT SANG:
       .np-splash{background:linear-gradient(180deg,#f9feff,#eefcff,#d9f8f0)}
   O che do toi, do dung la mot cu chop trang gan hai giay — do duoc 95 khung
   hinh dat 99-100% diem anh sang. Ban 7.4 dau tien vo tinh loai '.np-splash'
   khoi lop mau toi sinh tu dong nen loi nay quay lai y nguyen.

   Nay man chao va man chuyen canh duoc ve HAN o day cho ca hai che do, khong
   phu thuoc lop sinh tu dong. Chu y: KHONG dung tien to 'body.np-ui-reference'
   — luc man chao dang hien, ui-shell.js o cuoi <body> con chua chay nen lop do
   chua ton tai. Chi doan script som trong <head> la da dat 'data-theme'.
   --------------------------------------------------------------------------- */

/* Thanh tien do cua man chao: core to mau trang tren nen sang nen o che do
   sang gan nhu khong nhin thay. Sua luon cho ca hai che do. */
html #splashScreen>i{background:rgba(7,95,54,.18)!important}
html #splashScreen>i:after{background:#0c7c40!important}

html[data-theme="dark"] #splashScreen{
  background:linear-gradient(180deg,#0d1013 0%,#101a20 52%,#0a2629 100%)!important;
  color:var(--npui-text)!important;
}
html[data-theme="dark"] #splashScreen:before,
html[data-theme="dark"] #splashScreen:after{border-color:rgba(238,242,246,.13)!important}
html[data-theme="dark"] #splashScreen>i{background:rgba(238,242,246,.16)!important}
html[data-theme="dark"] #splashScreen>i:after{background:var(--npui-brand)!important}
html[data-theme="dark"] #splashScreen .splash-brand b{color:var(--npui-text)!important}
html[data-theme="dark"] #splashScreen .splash-brand small{color:var(--npui-text-3)!important}
html[data-theme="dark"] #splashScreen .water-impact i{border-color:rgba(76,166,205,.45)!important}

html[data-theme="dark"] #loginTransition{
  background:linear-gradient(180deg,#0d1013,#0a2629)!important;
}
html[data-theme="dark"] #loginTransition strong{color:var(--npui-text)!important}
html[data-theme="dark"] #loginTransition .transition-rings i{border-color:rgba(76,166,205,.4)!important}

/* Mau thanh trang thai cua trinh duyet / PWA khi dang o man chao. */
html[data-theme="dark"]{background-color:#0d1013}

/* ---------------------------------------------------------------------------
   17. O NHAP DUOC TRINH DUYET TU DIEN (AUTOFILL)
   ---------------------------------------------------------------------------
   Chrome / Edge ve nen rieng cho o da luu mat khau va KHONG cho background-color
   thuong de len. Cach duy nhat con lai la mot box-shadow inset that day, cong
   -webkit-text-fill-color cho phan chu. Neu khong, o "Ten dang nhap" da luu
   se hien mot mang xam sang giua the toi — dung nhu anh Nhan chup lai.
   --------------------------------------------------------------------------- */
body.np-ui-reference input:-webkit-autofill,
body.np-ui-reference input:-webkit-autofill:hover,
body.np-ui-reference input:-webkit-autofill:focus,
body.np-ui-reference input:-webkit-autofill:active,
body.np-ui-reference textarea:-webkit-autofill,
body.np-ui-reference select:-webkit-autofill{
  -webkit-text-fill-color:var(--npui-text)!important;
  caret-color:var(--npui-text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--npui-surface-2) inset!important;
  box-shadow:0 0 0 1000px var(--npui-surface-2) inset!important;
  /* Chrome co mot hieu ung chuyen nen rat cham khi bo focus; hoan no vo han
     de mau khong tu nhay lai thanh mau vang/xam mac dinh. */
  transition:background-color 600000s 0s!important;
}
#loginView .login-input-wrap input:-webkit-autofill,
#loginView .password-wrap input:-webkit-autofill{
  -webkit-box-shadow:0 0 0 1000px var(--npui-surface-2) inset!important;
  box-shadow:0 0 0 1000px var(--npui-surface-2) inset!important;
  border-radius:0!important;
}

/* ---------------------------------------------------------------------------
   20. UI CLEAN 7.6 — bao cao / donut Dark mode
   Lo giua donut cua core van la nen trang. Dung mau chu toi de so tong va
   nhan "Tong co cau" co tuong phan ro; KHONG doi logic hay so lieu.
   --------------------------------------------------------------------------- */
html.np-ui-reference[data-theme="dark"] .np140-donut-center strong{
  color:#173e4d!important;
  font-weight:800!important;
}
html.np-ui-reference[data-theme="dark"] .np140-donut-center small{
  color:#536b74!important;
}