@charset "UTF-8";
/* ============================================================================
   Nam Phuong ERP — lop giao dien co lap (PAGES)
   File   : namphuong-ui-pages-1.53.0-clean6.css
   Base   : NamPhuongERP Stable 1.53.0 CLEAN
   Scope  : CHI trinh bay. Khong doi database, phan quyen, luong nghiep vu.
   Nap SAU namphuong-ui-shell-1.53.1.css.
   ----------------------------------------------------------------------------
   Thay doi so voi ban 1.53.0-ui-delta.2:
   - Them ICON MAC DINH: trang chua duoc map se hien icon trung tinh,
     khong con hien o vuong dac.
   - Bang giao dich khong con phu thuoc nth-child. Cot duoc nhan dien theo
     tieu de va gan data-np-col; neu khong nhan dien duoc thi KHONG to mau
     (tha khong mau con hon to sai cot tien).
   - Bo mau chu sidebar (da chuyen han sang file shell) — het xung dot.
   - Bo :has() khoi duong dan chuc nang; trang thai dong do JS gan class.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. BO ICON SVG
   --------------------------------------------------------------------------- */
:root{
  --np3-violet:#5b4bc4;
  --np3-orange:#c25a10;
  --np3-radius-sm:9px;
  --np3-radius:12px;
  --np3-radius-lg:16px;
  --np3-shadow:0 1px 2px rgba(15,23,42,.07);
  --np3-shadow-float:0 10px 24px -8px rgba(15,23,42,.18),0 3px 8px -4px rgba(15,23,42,.10);

  /* Icon mac dinh cho moi trang chua duoc map ten rieng */
  --np3-i-default:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='4'/%3E%3Cpath d='M8 12h8'/%3E%3C/svg%3E");

  --np3-i-trend:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 17.5 10 11l3.6 3.4L20.5 7'/%3E%3Cpath d='M15 6.6h5.6v5.6'/%3E%3C/svg%3E");
  --np3-i-cash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 10v4M18 10v4'/%3E%3C/svg%3E");
  --np3-i-bank:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5'/%3E%3Cpath d='M5 10.5v7M9.7 10.5v7M14.3 10.5v7M19 10.5v7M3 20.5h18'/%3E%3C/svg%3E");
  --np3-i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 21.2 19.4a1 1 0 0 1-.9 1.5H3.7a1 1 0 0 1-.9-1.5z'/%3E%3Cpath d='M12 9.5v4.4M12 17.4h.01'/%3E%3C/svg%3E");
  --np3-i-cart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3.5h2.2l2.3 10.4a1.4 1.4 0 0 0 1.4 1.1h8.2a1.4 1.4 0 0 0 1.4-1.1l1.4-6.4H6'/%3E%3Ccircle cx='9' cy='19.5' r='1.5'/%3E%3Ccircle cx='17' cy='19.5' r='1.5'/%3E%3C/svg%3E");
  --np3-i-home:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.6 12 3l9 6.6V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E");
  --np3-i-clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.3l3.3 2'/%3E%3C/svg%3E");
  --np3-i-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h-2A1.5 1.5 0 0 0 3 4.6C3 13 11 21 19.4 21a1.5 1.5 0 0 0 1.6-1.5v-2a1.3 1.3 0 0 0-1.1-1.3l-3-.5a1.3 1.3 0 0 0-1.3.6l-1 1.5a13.5 13.5 0 0 1-5.4-5.4l1.5-1a1.3 1.3 0 0 0 .6-1.3l-.5-3A1.3 1.3 0 0 0 6.5 3z'/%3E%3C/svg%3E");
  --np3-i-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --np3-i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 12.5l2.2 2.2L15.5 9'/%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3C/svg%3E");
  --np3-i-receipt:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v17l-2.7-1.6-2.6 1.6-2.7-1.6L8.4 21 5.7 19.4z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E");
  --np3-i-users:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.2'/%3E%3Cpath d='M2.6 20a6.4 6.4 0 0 1 12.8 0M17 5.3a3.2 3.2 0 0 1 0 5.4M18.6 14.5A6.4 6.4 0 0 1 21.4 20'/%3E%3C/svg%3E");
  --np3-i-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='3.6'/%3E%3Cpath d='M4.8 20.2a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
  --np3-i-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10' width='15' height='10.5' rx='2.4'/%3E%3Cpath d='M8 10V7.4a4 4 0 0 1 8 0V10'/%3E%3Cpath d='M12 14v2.6'/%3E%3C/svg%3E");
  --np3-i-eye:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 12S6 5.8 12 5.8 21.6 12 21.6 12 18 18.2 12 18.2 2.4 12 2.4 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
  --np3-i-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  --np3-i-map:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 4 6 2.4L20.4 4a.6.6 0 0 1 .9.5v12a.6.6 0 0 1-.4.6L15 19.6 9 17.2 3.6 19.4a.6.6 0 0 1-.9-.5v-12a.6.6 0 0 1 .4-.6z'/%3E%3Cpath d='M9 4v13.2M15 6.4V19.6'/%3E%3C/svg%3E");
  --np3-i-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.5h11v10H3z'/%3E%3Cpath d='M14 9.5h3.6l3.4 3.6v3.4h-7z'/%3E%3Ccircle cx='7' cy='18.5' r='1.7'/%3E%3Ccircle cx='17.5' cy='18.5' r='1.7'/%3E%3C/svg%3E");
  --np3-i-card:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2.2'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/svg%3E");
  --np3-i-bottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2.8h4v3l2.4 2.6a3 3 0 0 1 .8 2V19a2.2 2.2 0 0 1-2.2 2.2H9A2.2 2.2 0 0 1 6.8 19v-8.6a3 3 0 0 1 .8-2L10 5.8z'/%3E%3Cpath d='M6.8 13.5h10.4'/%3E%3C/svg%3E");
  --np3-i-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v8l-9 5-9-5V8l9-5z'/%3E%3Cpath d='m3 8 9 5 9-5M12 13v8'/%3E%3C/svg%3E");
  --np3-i-factory:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10.2l5 3.3v-3.3l5 3.3v-3.3l5 3.3V5.5h3V21z'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E");
  --np3-i-chart:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 3v16.4a1.1 1.1 0 0 0 1.1 1.1H21'/%3E%3Cpath d='m7.5 15 3.6-4.2 3 2.6L20 7'/%3E%3C/svg%3E");
  --np3-i-install:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='2.4'/%3E%3Cpath d='M12 7v7m-2.6-2.6L12 14l2.6-2.6M10.7 18.6h2.6'/%3E%3C/svg%3E");
  --np3-i-settings:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.6a1.6 1.6 0 0 1 1.6 1.6v.5a1.4 1.4 0 0 0 2.4 1l.3-.3a1.6 1.6 0 1 1 2.3 2.3l-.3.3a1.4 1.4 0 0 0 1 2.4h.5a1.6 1.6 0 0 1 0 3.2h-.5a1.4 1.4 0 0 0-1 2.4l.3.3a1.6 1.6 0 1 1-2.3 2.3l-.3-.3a1.4 1.4 0 0 0-2.4 1v.5a1.6 1.6 0 0 1-3.2 0v-.5a1.4 1.4 0 0 0-2.4-1l-.3.3a1.6 1.6 0 1 1-2.3-2.3l.3-.3a1.4 1.4 0 0 0-1-2.4h-.5a1.6 1.6 0 0 1 0-3.2h.5a1.4 1.4 0 0 0 1-2.4l-.3-.3a1.6 1.6 0 1 1 2.3-2.3l.3.3a1.4 1.4 0 0 0 2.4-1v-.5A1.6 1.6 0 0 1 12 2.6z'/%3E%3C/svg%3E");
  --np3-i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --np3-i-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.2 15.2A8.4 8.4 0 0 1 8.8 3.8 8.4 8.4 0 1 0 20.2 15.2z'/%3E%3C/svg%3E");
  --np3-i-logout:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h5M14 8l4 4-4 4M18 12H8'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------------------
   2. HE THONG ICON
   Quan trong: moi phan tu icon deu co mask MAC DINH. Nho vay mot trang moi
   chua duoc khai bao ten rieng se hien icon trung tinh chu KHONG hien mot
   khoi vuong dac nhu ban truoc.
   --------------------------------------------------------------------------- */
body.np-ui-reference .nav-ico,
body.np-ui-reference .mnav-icon,
body.np-ui-reference .mnav-plus,
body.np-ui-reference .npui-command-icon,
body.np-ui-reference .npui-search-icon,
body.np-ui-reference .npui-theme-icon,
body.np-ui-reference .npui-logout-icon{
  display:inline-block;
  flex:0 0 19px;
  width:19px;
  height:19px;
  background-color:currentColor;
  font-size:0;
  line-height:0;
  -webkit-mask-image:var(--np3-i-default);
          mask-image:var(--np3-i-default);
  -webkit-mask-position:center;
          mask-position:center;
  -webkit-mask-size:contain;
          mask-size:contain;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
/* Du phong cuoi cung: trinh duyet khong ho tro mask se an icon thay vi
   ve mot o mau dac de len giao dien. */
@supports not ((-webkit-mask-image:none) or (mask-image:none)){
  body.np-ui-reference .nav-ico,
  body.np-ui-reference .mnav-icon,
  body.np-ui-reference .mnav-plus,
  body.np-ui-reference .npui-command-icon{background-color:transparent!important}
}

body.np-ui-reference .npui-search-icon{-webkit-mask-image:var(--np3-i-search);mask-image:var(--np3-i-search)}
body.np-ui-reference .npui-theme-icon{-webkit-mask-image:var(--np3-i-moon);mask-image:var(--np3-i-moon)}
html[data-theme="dark"] body.np-ui-reference .npui-theme-icon{-webkit-mask-image:var(--np3-i-sun);mask-image:var(--np3-i-sun)}
body.np-ui-reference .npui-logout-icon{-webkit-mask-image:var(--np3-i-logout);mask-image:var(--np3-i-logout)}

/* Anh xa icon theo trang — dung chung cho sidebar, bottom nav va tim nhanh.
   Muon them trang moi: chi can them mot dong vao khoi nay. */
body.np-ui-reference [data-np-icon="home"]     ,body.np-ui-reference #nav button[data-page="dashboard"] .nav-ico     ,body.np-ui-reference .mobile-bottom-nav button[data-page="dashboard"] .mnav-icon ,body.np-ui-reference .npui-command-icon[data-page="dashboard"]{-webkit-mask-image:var(--np3-i-home);mask-image:var(--np3-i-home)}
body.np-ui-reference #nav button[data-page="attendance"] .nav-ico     ,body.np-ui-reference .npui-command-icon[data-page="attendance"]{-webkit-mask-image:var(--np3-i-clock);mask-image:var(--np3-i-clock)}
body.np-ui-reference #nav button[data-page="reception"] .nav-ico      ,body.np-ui-reference .npui-command-icon[data-page="reception"]{-webkit-mask-image:var(--np3-i-phone);mask-image:var(--np3-i-phone)}
body.np-ui-reference #nav button[data-page="newSale"] .nav-ico        ,body.np-ui-reference .mobile-bottom-nav button[data-page="newSale"] .mnav-plus ,body.np-ui-reference .npui-command-icon[data-page="newSale"]{-webkit-mask-image:var(--np3-i-plus);mask-image:var(--np3-i-plus)}
body.np-ui-reference #nav button[data-page="approvals"] .nav-ico      ,body.np-ui-reference .npui-command-icon[data-page="approvals"]{-webkit-mask-image:var(--np3-i-check);mask-image:var(--np3-i-check)}
body.np-ui-reference #nav button[data-page="sales"] .nav-ico          ,body.np-ui-reference #nav button[data-page="invoices"] .nav-ico ,body.np-ui-reference .mobile-bottom-nav button[data-page="sales"] .mnav-icon ,body.np-ui-reference .npui-command-icon[data-page="sales"] ,body.np-ui-reference .npui-command-icon[data-page="invoices"]{-webkit-mask-image:var(--np3-i-receipt);mask-image:var(--np3-i-receipt)}
body.np-ui-reference #nav button[data-page="customers"] .nav-ico      ,body.np-ui-reference .mobile-bottom-nav button[data-page="customers"] .mnav-icon ,body.np-ui-reference .npui-command-icon[data-page="customers"]{-webkit-mask-image:var(--np3-i-users);mask-image:var(--np3-i-users)}
body.np-ui-reference #nav button[data-page="quickLookup"] .nav-ico    ,body.np-ui-reference .npui-command-icon[data-page="quickLookup"]{-webkit-mask-image:var(--np3-i-search);mask-image:var(--np3-i-search)}
body.np-ui-reference #nav button[data-page="routes"] .nav-ico         ,body.np-ui-reference .npui-command-icon[data-page="routes"]{-webkit-mask-image:var(--np3-i-map);mask-image:var(--np3-i-map)}
body.np-ui-reference #nav button[data-page="dispatch"] .nav-ico       ,body.np-ui-reference .npui-command-icon[data-page="dispatch"]{-webkit-mask-image:var(--np3-i-truck);mask-image:var(--np3-i-truck)}
body.np-ui-reference #nav button[data-page="debt"] .nav-ico           ,body.np-ui-reference #nav button[data-page="expenses"] .nav-ico ,body.np-ui-reference .npui-command-icon[data-page="debt"] ,body.np-ui-reference .npui-command-icon[data-page="expenses"]{-webkit-mask-image:var(--np3-i-card);mask-image:var(--np3-i-card)}
body.np-ui-reference #nav button[data-page="bottles"] .nav-ico        ,body.np-ui-reference .npui-command-icon[data-page="bottles"]{-webkit-mask-image:var(--np3-i-bottle);mask-image:var(--np3-i-bottle)}
body.np-ui-reference #nav button[data-page="products"] .nav-ico       ,body.np-ui-reference #nav button[data-page="vehicleLoading"] .nav-ico ,body.np-ui-reference .npui-command-icon[data-page="products"] ,body.np-ui-reference .npui-command-icon[data-page="vehicleLoading"]{-webkit-mask-image:var(--np3-i-box);mask-image:var(--np3-i-box)}
body.np-ui-reference #nav button[data-page="materials"] .nav-ico      ,body.np-ui-reference .npui-command-icon[data-page="materials"]{-webkit-mask-image:var(--np3-i-factory);mask-image:var(--np3-i-factory)}
body.np-ui-reference #nav button[data-page="reports"] .nav-ico        ,body.np-ui-reference .npui-command-icon[data-page="reports"]{-webkit-mask-image:var(--np3-i-chart);mask-image:var(--np3-i-chart)}
body.np-ui-reference #nav button[data-page="installApp"] .nav-ico     ,body.np-ui-reference .npui-command-icon[data-page="installApp"]{-webkit-mask-image:var(--np3-i-install);mask-image:var(--np3-i-install)}
body.np-ui-reference #nav button[data-page="settings"] .nav-ico       ,body.np-ui-reference .npui-command-icon[data-page="settings"]{-webkit-mask-image:var(--np3-i-settings);mask-image:var(--np3-i-settings)}

/* Icon nhom dieu huong. Core dung section.np1500-nav-group[data-group="..."]. */
body.np-ui-reference #sidebar #nav .np1500-nav-group[data-group="sales"] .np1500-group-icon{-webkit-mask-image:var(--np3-i-cart);mask-image:var(--np3-i-cart)}
body.np-ui-reference #sidebar #nav .np1500-nav-group[data-group="customers"] .np1500-group-icon{-webkit-mask-image:var(--np3-i-users);mask-image:var(--np3-i-users)}
body.np-ui-reference #sidebar #nav .np1500-nav-group[data-group="delivery"] .np1500-group-icon{-webkit-mask-image:var(--np3-i-truck);mask-image:var(--np3-i-truck)}
body.np-ui-reference #sidebar #nav .np1500-nav-group[data-group="warehouse"] .np1500-group-icon{-webkit-mask-image:var(--np3-i-box);mask-image:var(--np3-i-box)}
body.np-ui-reference #sidebar #nav .np1500-nav-group[data-group="system"] .np1500-group-icon{-webkit-mask-image:var(--np3-i-settings);mask-image:var(--np3-i-settings)}

body.np-ui-reference .npui-command-item>.npui-command-icon{
  width:30px;height:30px;flex:0 0 30px;
  padding:0;
  border-radius:8px;
  -webkit-mask-size:19px 19px;mask-size:19px 19px;
  color:var(--npui-brand);
}

/* Core 1.53 da co chip ngu canh o header; tieu de trang o topbar lam no thua. */
body.np-ui-reference .np137-header-context{display:none!important}

/* ---------------------------------------------------------------------------
   3. BAO CAO — hero va 4 the KPI
   --------------------------------------------------------------------------- */
body.np-ui-reference .np139-hero{
  position:relative;
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding:20px;
  overflow:hidden;
  border-radius:var(--np3-radius-lg);
  background:#0b3f56;
  background:radial-gradient(120% 140% at 100% 0%,rgba(0,163,171,.42),transparent 58%),
             linear-gradient(135deg,#072a3d 0%,#0e4a67 55%,#0b6f83 100%);
  color:#ffffff;
  box-shadow:var(--np3-shadow-float);
}
body.np-ui-reference .np139-hero-main,
body.np-ui-reference .np139-hero-side{position:relative;z-index:1;min-width:0}
body.np-ui-reference .np139-hero-main small{
  display:block;
  color:#a8d8e8!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.13em;
  text-transform:uppercase;
}
body.np-ui-reference .np139-hero-main strong{
  display:block;
  margin:8px 0;
  color:#ffffff!important;
  font-size:clamp(30px,4vw,42px)!important;
  font-weight:800!important;
  line-height:1.05;
  letter-spacing:-1.4px;
  font-variant-numeric:tabular-nums;
}
body.np-ui-reference .np139-hero-main p{margin:0;color:#d3e8f2!important;font-size:13px!important;font-weight:500!important}
body.np-ui-reference .np139-delta{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:10px;
  padding:4px 11px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(255,255,255,.16);
  color:#ffffff;
  font-size:11.5px!important;
  font-weight:800!important;
  white-space:nowrap;
}
body.np-ui-reference .np139-delta.good{background:rgba(63,190,121,.24);border-color:rgba(63,190,121,.48);color:#b6f2d4}
body.np-ui-reference .np139-delta.bad{background:rgba(239,112,104,.24);border-color:rgba(239,112,104,.48);color:#ffcbc7}
body.np-ui-reference .np139-hero-side{
  display:grid;
  grid-template-columns:1fr;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--np3-radius);
  background:rgba(255,255,255,.10);
}
body.np-ui-reference .np139-hero-side>div{min-width:0;padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.14)}
body.np-ui-reference .np139-hero-side>div:last-child{border-bottom:0}
body.np-ui-reference .np139-hero-side span{display:block;color:#b8d9e8!important;font-size:11px!important;font-weight:700!important}
body.np-ui-reference .np139-hero-side b{
  display:block;
  margin:4px 0 3px;
  color:#ffffff!important;
  font-size:18px!important;
  font-weight:800!important;
  letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
body.np-ui-reference .np139-hero-side small{display:block;color:#a3c9dc!important;font-size:10.5px!important;font-weight:500!important;line-height:1.35}
body.np-ui-reference .np139-hero-side .warn{background:rgba(250,178,25,.16)}
body.np-ui-reference .np139-hero-side .warn b{color:#ffdd97!important}
body.np-ui-reference .np139-hero-side .good{background:rgba(63,190,121,.16)}
body.np-ui-reference .np139-hero-side .good b{color:#b6f2d4!important}

body.np-ui-reference .np139-kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}
body.np-ui-reference .np139-main-kpi{
  --np3-kpi:var(--npui-info);
  --np3-kpi-soft:var(--npui-info-weak);
  position:relative;
  min-width:0;
  padding:15px 15px 16px;
  overflow:hidden;
  border:1px solid var(--npui-border);
  border-radius:var(--np3-radius-lg);
  background:var(--npui-surface);
  box-shadow:var(--np3-shadow);
}
body.np-ui-reference .np139-main-kpi::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--np3-kpi)}
body.np-ui-reference .np139-main-kpi.blue  {--np3-kpi:var(--npui-info);--np3-kpi-soft:var(--npui-info-weak)}
body.np-ui-reference .np139-main-kpi.green {--np3-kpi:var(--npui-good);--np3-kpi-soft:var(--npui-good-weak)}
body.np-ui-reference .np139-main-kpi.violet{--np3-kpi:var(--np3-violet);--np3-kpi-soft:#eeecfa}
body.np-ui-reference .np139-main-kpi.orange{--np3-kpi:var(--np3-orange);--np3-kpi-soft:#fdeee2}
html[data-theme="dark"] body.np-ui-reference .np139-main-kpi{--np3-kpi-soft:var(--npui-surface-3)}

body.np-ui-reference .np139-main-kpi>header{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 10px;
  padding:0;
  border:0;
  background:none;
}
body.np-ui-reference .np139-main-kpi>header>span{
  display:grid;
  place-items:center;
  flex:0 0 32px;
  width:32px;height:32px;
  border-radius:9px;
  background:var(--np3-kpi-soft);
  color:transparent!important;
  font-size:0!important;
}
body.np-ui-reference .np139-main-kpi>header>span::before{
  content:"";
  display:block;
  width:18px;height:18px;
  background-color:var(--np3-kpi);
  -webkit-mask:var(--np3-i-chart) center/18px 18px no-repeat;
          mask:var(--np3-i-chart) center/18px 18px no-repeat;
}
body.np-ui-reference .np139-main-kpi.green>header>span::before {-webkit-mask-image:var(--np3-i-check);mask-image:var(--np3-i-check)}
body.np-ui-reference .np139-main-kpi.violet>header>span::before{-webkit-mask-image:var(--np3-i-receipt);mask-image:var(--np3-i-receipt)}
body.np-ui-reference .np139-main-kpi.orange>header>span::before{-webkit-mask-image:var(--np3-i-card);mask-image:var(--np3-i-card)}
body.np-ui-reference .np139-main-kpi>header>small{
  overflow:hidden;
  color:var(--npui-text-2)!important;
  font-size:11.5px!important;
  font-weight:800!important;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body.np-ui-reference .np139-main-kpi>strong{
  display:block;
  color:var(--npui-text)!important;
  font-size:clamp(20px,3.5vw,26px)!important;
  font-weight:800!important;
  line-height:1.1;
  letter-spacing:-.7px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.np-ui-reference .np139-main-kpi>.np139-delta{
  justify-self:start;
  margin-top:8px;
  border-color:var(--npui-good-line);
  background:var(--npui-good-weak);
  color:var(--npui-good);
}
body.np-ui-reference .np139-main-kpi>.np139-delta.bad{
  border-color:var(--npui-crit-line);
  background:var(--npui-crit-weak);
  color:var(--npui-crit);
}
body.np-ui-reference .np139-main-kpi>p{
  margin:9px 0 0;
  color:var(--npui-text-3)!important;
  font-size:11.5px!important;
  font-weight:500!important;
  line-height:1.4;
  overflow-wrap:anywhere;
}
body.np-ui-reference .np139-range-line>div{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* KPI tren bang dieu khien */
body.np-ui-reference .dashboard-kpis>.metric{
  min-height:112px!important;
  padding:16px 17px!important;
  border-top:4px solid var(--npui-info)!important;
}
body.np-ui-reference .dashboard-kpis>.metric:nth-child(2){border-top-color:var(--np3-violet)!important}
body.np-ui-reference .dashboard-kpis>.metric:nth-child(3){border-top-color:var(--npui-good)!important}
body.np-ui-reference .dashboard-kpis>.metric:nth-child(4){border-top-color:var(--npui-crit)!important}
body.np-ui-reference .dashboard-kpis>.metric::before,
body.np-ui-reference .dashboard-kpis>.metric::after,
body.np-ui-reference .np139-main-kpi::after{content:none!important;display:none!important}
body.np-ui-reference .bar-value{display:none!important}
body.np-ui-reference .bar-col{grid-template-rows:1fr 22px!important;padding-top:4px}
body.np-ui-reference #npReportFreshness::before{content:" · ";white-space:pre}

/* Dai thao tac nhanh */
body.np-ui-reference .route-hero,
body.np-ui-reference .health-hero{
  border:1px solid var(--npui-brand-line)!important;
  border-radius:var(--np3-radius-lg)!important;
  background:var(--npui-brand)!important;
  background:linear-gradient(135deg,var(--npui-brand-strong),var(--npui-brand))!important;
  box-shadow:var(--npui-shadow-md)!important;
}
body.np-ui-reference .workflow-strip{gap:10px!important;margin:12px 0 14px!important}
body.np-ui-reference .workflow-strip button{
  min-height:82px!important;
  padding:13px!important;
  border:1px solid var(--npui-border)!important;
  border-radius:var(--np3-radius)!important;
  background:var(--npui-surface)!important;
  box-shadow:var(--np3-shadow)!important;
  cursor:pointer;
}
body.np-ui-reference .workflow-strip button:hover{
  border-color:var(--npui-border-strong)!important;
  background:var(--npui-hover)!important;
}
body.np-ui-reference .workflow-strip button b{
  display:block;
  color:var(--npui-text)!important;
  font-size:22px!important;
  font-weight:800!important;
  line-height:1.15;
  font-variant-numeric:tabular-nums;
}
body.np-ui-reference .workflow-strip button small{
  display:block;
  margin-top:2px;
  color:var(--npui-text-2)!important;
  font-size:11.5px!important;
  font-weight:600!important;
}
/* Chi doi thanh icon nhung phan tu duoc JS danh dau la icon, tranh nuot mat
   nhan chu neu cau truc nut khac du kien. */
/* ---- DAI THAO TAC NHANH: co y GIU emoji goc cua core ----
   Da thu chuyen 3 nut nay sang icon don sac bang mask nhung core phu mot lop
   rieng len o icon: do bang thuc nghiem, o 26x26 chi con 43/10816 pixel duoc
   ve, ket qua la icon mo nhu bong ma. Ngay ca khi bo han mask thi mau nen
   dat bang !important van khong duoc ve ra man hinh.
   Chon giu nguyen cach core dang ve (emoji trong o bo tron) vi mot icon mo
   ao te hon mot emoji ro rang. Day la khac biet co y thuc, khong phai sot.
   Neu sau nay muon dong bo, phai tim va go lop phu do cua core truoc. */

body.np-ui-reference .np1470-vehicle-card,
body.np-ui-reference .np1484-round-card,
body.np-ui-reference .np1480-route-card,
body.np-ui-reference .np1480-customer-card{
  border-color:var(--npui-border)!important;
  border-radius:var(--np3-radius-lg)!important;
  background:var(--npui-surface)!important;
  box-shadow:var(--np3-shadow)!important;
}
body.np-ui-reference .np1470-kpis span,
body.np-ui-reference .np1484-round-kpis span{
  border-color:var(--npui-border)!important;
  background:var(--npui-surface-2)!important;
}

/* ---------------------------------------------------------------------------
   4. BANG GIAO DICH — nhan dien cot theo TIEU DE, khong theo vi tri
   JS gan data-np-col cho tung o. Neu khong nhan dien duoc tieu de nao thi o
   do khong co data-np-col va se giu mau trung tinh — an toan hon la to nham.
   --------------------------------------------------------------------------- */
@media(min-width:900px){
  /* table-layout:fixed la dieu kien de cac % ben duoi co hieu luc.
     Trong khoang 900–1179px bang van rong hon khung nen cho cuon ngang
     thay vi ep chu xuong dong tung ky tu. */
  body.np-ui-reference #saleTable table{width:100%!important;min-width:1040px!important;font-size:13px;table-layout:fixed}
  body.np-ui-reference #saleTable th,
  body.np-ui-reference #saleTable td{min-width:0;padding:9px 8px!important}
  body.np-ui-reference #saleTable th{font-size:10px!important;letter-spacing:.04em!important}

  body.np-ui-reference #saleTable [data-np-col="code"]    {width:7%}
  body.np-ui-reference #saleTable [data-np-col="customer"]{width:15%}
  body.np-ui-reference #saleTable [data-np-col="creator"] {width:9%}
  body.np-ui-reference #saleTable [data-np-col="date"]    {width:8%}
  body.np-ui-reference #saleTable [data-np-col="total"]   {width:10%}
  body.np-ui-reference #saleTable [data-np-col="cash"]    {width:9%}
  body.np-ui-reference #saleTable [data-np-col="transfer"]{width:9%}
  body.np-ui-reference #saleTable [data-np-col="debt"]    {width:9%}
  body.np-ui-reference #saleTable [data-np-col="bottle"],
  body.np-ui-reference #saleTable [data-np-col="note"]    {width:8%}
  body.np-ui-reference #saleTable [data-np-col="status"]  {width:8%}
  body.np-ui-reference #saleTable [data-np-col="action"]  {width:8%}
  /* Nhan trang thai va nut thao tac khong duoc xuong dong giua chu. */
  body.np-ui-reference #saleTable [data-np-col="status"] .pill,
  body.np-ui-reference #saleTable [data-np-col="status"] .approval-state,
  body.np-ui-reference #saleTable [data-np-col="action"] button{white-space:nowrap}

  body.np-ui-reference #saleTable td[data-np-col="code"]{
    color:var(--npui-brand);
    font-weight:800!important;
    letter-spacing:-.1px;
    white-space:nowrap;
  }
  body.np-ui-reference #saleTable td[data-np-col="customer"]{white-space:normal}
  body.np-ui-reference #saleTable td[data-np-col="customer"] b{
    color:var(--npui-text);
    font-size:13.5px;
    font-weight:800!important;
  }
  body.np-ui-reference #saleTable td[data-np-col="creator"]{
    max-width:110px;
    overflow:hidden;
    color:var(--npui-text-2)!important;
    font-size:11.5px!important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body.np-ui-reference #saleTable td[data-np-col="creator"] .np-sale-creator-cell{display:inline;white-space:nowrap}
  body.np-ui-reference #saleTable td[data-np-col="date"]{
    color:var(--npui-text-3)!important;
    font-size:11.5px!important;
    white-space:nowrap;
  }

  body.np-ui-reference #saleTable [data-np-col="total"],
  body.np-ui-reference #saleTable [data-np-col="cash"],
  body.np-ui-reference #saleTable [data-np-col="transfer"],
  body.np-ui-reference #saleTable [data-np-col="debt"]{text-align:right;font-variant-numeric:tabular-nums}

  body.np-ui-reference #saleTable td[data-np-col="total"]{
    background:var(--npui-surface-2);
    /* Core to cot Tong tien mau xanh la (#075f3b) — trung voi cot TM.
       Giu Tong tien trung tinh de bang con doc duoc theo mau:
       TM xanh la, CK xanh duong, Cong no do, Vo binh vang. */
    color:var(--npui-text)!important;
    font-size:14px!important;
    font-weight:800!important;
    letter-spacing:-.35px;
  }
  body.np-ui-reference #saleTable td[data-np-col="cash"]    {color:var(--npui-good)!important;font-weight:800!important}
  body.np-ui-reference #saleTable td[data-np-col="transfer"]{color:var(--npui-info)!important;font-weight:800!important}
  body.np-ui-reference #saleTable td[data-np-col="debt"]    {color:var(--npui-crit)!important;font-weight:800!important}
  body.np-ui-reference #saleTable td[data-np-col="bottle"],
  body.np-ui-reference #saleTable td[data-np-col="note"]    {max-width:130px;white-space:normal}
  body.np-ui-reference #saleTable td[data-np-col="status"]  {text-align:center}
  body.np-ui-reference #saleTable td[data-np-col="action"]  {text-align:right}
  body.np-ui-reference #saleTable td[data-np-col="action"] button{min-height:30px;padding:0 10px;font-size:11.5px!important}

  /* Vien trai theo trang thai — JS gan class, khong dung :has() */
  body.np-ui-reference #saleTable tbody tr{border-left:3px solid transparent}
  body.np-ui-reference #saleTable tbody tr.np-row-ok {border-left-color:var(--npui-good)}
  body.np-ui-reference #saleTable tbody tr.np-row-bad{border-left-color:var(--npui-crit)}
}

@media(min-width:1180px){
  body.np-ui-reference #saleTable table{min-width:0!important}
}
@media(min-width:1500px){
  body.np-ui-reference #saleTable th,
  body.np-ui-reference #saleTable td{padding:10px 11px!important}
  body.np-ui-reference #saleTable td[data-np-col="creator"]{max-width:170px}
}

/* ---------------------------------------------------------------------------
   5. THE GIAO DICH TREN DIEN THOAI
   Bo cuc dua tren data-np-col nen khong vo khi so cot thay doi theo quyen.
   --------------------------------------------------------------------------- */
@media(max-width:899px){
  body.np-ui-reference #saleTable .np-mobile-card-wrap{
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table tbody{display:grid;gap:11px}
  body.np-ui-reference #saleTable .np-mobile-card-table tr{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:0 10px!important;
    padding:13px!important;
    border:1px solid var(--npui-border)!important;
    border-left:4px solid var(--npui-border-strong)!important;
    border-radius:var(--np3-radius-lg)!important;
    background:var(--npui-surface)!important;
    box-shadow:var(--np3-shadow)!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table tr.np-row-ok {border-left-color:var(--npui-good)!important}
  body.np-ui-reference #saleTable .np-mobile-card-table tr.np-row-bad{border-left-color:var(--npui-crit)!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td{
    display:block!important;
    /* Bat buoc: o dang the KHONG duoc khoa chieu cao 48px nhu o dang bang,
       neu khong core se cat (overflow:hidden) dong phu ben duoi ten khach. */
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
    border:0!important;
    text-align:left!important;
    white-space:normal!important;
  }
  /* Core dat .np-mobile-card-table td b{text-align:right} — o dang the phai tra ve trai. */
  body.np-ui-reference #saleTable .np-mobile-card-table td b,
  body.np-ui-reference #saleTable .np-mobile-card-table td strong,
  body.np-ui-reference #saleTable .np-mobile-card-table td small{text-align:left!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="status"] b,
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="status"] strong{text-align:right!important}
  /* b va small da la block, the <br> cua core chi tao mot dong trong thua. */
  body.np-ui-reference #saleTable .np-mobile-card-table td br{display:none!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td::before{
    display:block!important;
    margin:0 0 2px!important;
    color:var(--npui-text-3)!important;
    font-size:9px!important;
    font-weight:800!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important;
  }

  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="code"]{
    grid-area:1/1/2/3!important;
    color:var(--npui-brand)!important;
    font-size:12px!important;
    font-weight:800!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="status"]{grid-area:1/3/2/4!important;text-align:right!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="customer"]{grid-area:2/1/3/4!important;margin-top:6px!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="customer"] b{
    display:block!important;
    color:var(--npui-text)!important;
    font-size:16px!important;
    font-weight:800!important;
    line-height:1.25!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="customer"] small{
    display:block!important;
    margin-top:2px!important;
    color:var(--npui-text-3)!important;
    font-size:11.5px!important;
    font-weight:500!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="total"]{
    grid-area:3/1/4/4!important;
    display:flex!important;
    align-items:baseline!important;
    justify-content:space-between!important;
    gap:10px!important;
    margin:10px 0 2px!important;
    padding:10px 12px!important;
    border:1px solid var(--npui-brand-line)!important;
    border-radius:var(--np3-radius-sm)!important;
    background:var(--npui-brand-weak)!important;
    color:var(--npui-brand-strong)!important;
    font-size:18px!important;
    font-weight:800!important;
    letter-spacing:-.4px!important;
    font-variant-numeric:tabular-nums!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="total"]::before{
    margin:0!important;
    align-self:center!important;
    color:var(--npui-brand)!important;
    font-size:9.5px!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="cash"],
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="transfer"],
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="debt"]{
    grid-row:4!important;
    margin-top:8px!important;
    font-size:13px!important;
    font-weight:800!important;
    font-variant-numeric:tabular-nums!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="cash"]    {grid-column:1!important;color:var(--npui-good)!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="transfer"]{grid-column:2!important;color:var(--npui-info)!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="debt"]    {grid-column:3!important;color:var(--npui-crit)!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="bottle"],
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="note"]    {
    grid-area:5/1/6/4!important;
    margin-top:10px!important;
    font-size:13px!important;
    font-weight:700!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="creator"]{
    grid-area:6/1/7/3!important;
    margin-top:10px!important;
    padding-top:10px!important;
    border-top:1px dashed var(--npui-border)!important;
    color:var(--npui-text-3)!important;
    font-size:11px!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="date"]{
    grid-area:6/3/7/4!important;
    margin-top:10px!important;
    padding-top:10px!important;
    border-top:1px dashed var(--npui-border)!important;
    color:var(--npui-text-3)!important;
    font-size:11px!important;
    text-align:right!important;
  }
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="action"]{grid-area:7/1/8/4!important;margin-top:11px!important}
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="action"] button{width:100%!important;min-height:44px!important}

  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="code"]::before,
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="customer"]::before,
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="status"]::before,
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="creator"]::before,
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="date"]::before,
  body.np-ui-reference #saleTable .np-mobile-card-table td[data-np-col="action"]::before{display:none!important}

  body.np-ui-reference details[open].np135-filter-panel>.np135-filter-grid{
    grid-template-columns:1fr 1fr!important;
    max-height:238px!important;
    overflow-y:auto!important;
  }
  body.np-ui-reference details[open].np135-filter-panel>.np135-filter-grid>*:first-child{grid-column:1/-1!important}
  body.np-ui-reference .np135-filter-actions{padding-top:11px!important;border-top:1px solid var(--npui-border)!important}
}

/* ---------------------------------------------------------------------------
   6. TRINH TAO DON HANG TREN DIEN THOAI
   --------------------------------------------------------------------------- */
body.np-ui-reference .np-sale-wizard-shell{max-width:720px;margin:0 auto}
body.np-ui-reference .np-sale-wizard-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-areas:"title close" "progress progress"!important;
  gap:0 10px!important;
  margin:0 0 13px!important;
  padding:13px 14px 12px!important;
  border:1px solid var(--npui-border)!important;
  border-radius:var(--np3-radius)!important;
  background:var(--npui-surface)!important;
  box-shadow:var(--npui-shadow-md)!important;
}
body.np-ui-reference .np-sale-wizard-head>div:first-child{grid-area:title;display:block!important;min-width:0}
body.np-ui-reference .np-sale-wizard-head small{
  display:block;
  color:var(--npui-brand)!important;
  font-size:10px!important;
  font-weight:800!important;
  letter-spacing:.11em!important;
  text-transform:uppercase;
}
body.np-ui-reference .np-sale-wizard-head h2{
  margin:3px 0 2px!important;
  color:var(--npui-text)!important;
  font-size:19px!important;
  font-weight:800!important;
  letter-spacing:-.45px!important;
}
body.np-ui-reference .np-sale-wizard-head p{
  margin:0!important;
  color:var(--npui-text-3)!important;
  font-size:11.5px!important;
  font-weight:500!important;
  line-height:1.35!important;
}
body.np-ui-reference .np-sale-close{
  grid-area:close;
  align-self:start;
  min-height:36px!important;
  padding:0 12px!important;
  border:1px solid var(--npui-crit-line)!important;
  border-radius:var(--np3-radius-sm)!important;
  background:var(--npui-crit-weak)!important;
  color:var(--npui-crit)!important;
  font-size:12px!important;
  font-weight:800!important;
  white-space:nowrap;
}
body.np-ui-reference .np-wizard-progress{
  grid-area:progress;
  position:relative;
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:2px!important;
  width:100%!important;
  height:auto!important;
  margin-top:12px!important;
  overflow:visible!important;
  background:none!important;
}
body.np-ui-reference .np-wizard-progress::before{
  content:"";
  position:absolute;
  left:12.5%;right:12.5%;top:14px;
  height:2px;
  background:var(--npui-border-strong);
  z-index:0;
}
body.np-ui-reference .np-wizard-node{
  position:relative;
  z-index:1;
  display:grid!important;
  justify-items:center!important;
  gap:4px!important;
  width:auto!important;height:auto!important;min-height:0!important;
  padding:0!important;
  border:0!important;border-radius:0!important;
  background:transparent!important;
  color:var(--npui-text-3)!important;
  font-size:10px!important;
  font-weight:800!important;
}
body.np-ui-reference .np-wizard-node>i{
  display:grid;
  place-items:center;
  width:29px;height:29px;
  border:2px solid var(--npui-border-strong);
  border-radius:50%;
  background:var(--npui-surface-2);
  color:var(--npui-text-2);
  font-style:normal;
  font-size:12px;
  font-weight:800;
}
body.np-ui-reference .np-wizard-node>span{
  display:block!important;
  color:inherit!important;
  font-size:9.5px!important;
  font-weight:800!important;
  white-space:nowrap;
}
body.np-ui-reference .np-wizard-node.active{color:var(--npui-brand)!important}
body.np-ui-reference .np-wizard-node.active>i{
  border-color:var(--npui-brand);
  background:var(--npui-brand);
  color:#ffffff;
  box-shadow:0 0 0 5px var(--npui-ring);
}
body.np-ui-reference .np-wizard-node.done{color:var(--npui-good)!important}
body.np-ui-reference .np-wizard-node.done>i{
  border-color:var(--npui-good);
  background:var(--npui-good-weak);
  color:var(--npui-good);
}

body.np-ui-reference .np-mobile-sale-wizard .np-sale-step{display:none!important}
body.np-ui-reference .np-mobile-sale-wizard .np-sale-step.active{display:block!important;animation:np3-step .22s ease}
@keyframes np3-step{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

body.np-ui-reference .np-step-card{
  margin-bottom:12px!important;
  padding:15px!important;
  border:1px solid var(--npui-border)!important;
  border-radius:var(--np3-radius-lg)!important;
  background:var(--npui-surface)!important;
  box-shadow:var(--np3-shadow)!important;
}
body.np-ui-reference .np-critical-notice{
  margin:12px 0 0!important;
  padding:12px!important;
  border:1.5px solid var(--npui-warn-line)!important;
  border-radius:var(--np3-radius)!important;
  background:var(--npui-warn-weak)!important;
}
body.np-ui-reference .np-critical-title{
  margin-bottom:9px;
  color:var(--npui-warn)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
}
body.np-ui-reference .np-critical-grid{display:grid;grid-template-columns:1fr;gap:8px}
body.np-ui-reference .np-alert-chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:var(--np3-radius);
  background:var(--npui-surface-3);
  color:var(--npui-text-2);
  font-weight:700;
  line-height:1.2;
  white-space:normal;
  box-shadow:var(--np3-shadow);
}
body.np-ui-reference .np-alert-chip small{display:block;font-size:10px!important;font-weight:800!important;white-space:nowrap}
body.np-ui-reference .np-alert-chip strong{
  display:block;
  margin-top:2px;
  font-size:15px!important;
  font-weight:800!important;
  letter-spacing:-.3px;
  white-space:nowrap;
}
body.np-ui-reference .np-alert-chip.debt-owed   {border-color:var(--npui-crit-line);background:var(--npui-crit-weak);color:var(--npui-crit)}
body.np-ui-reference .np-alert-chip.bottle-owed {border-color:var(--npui-warn-line);background:var(--npui-warn-weak);color:var(--npui-warn)}
body.np-ui-reference .np-alert-chip.business-owes{border-color:var(--npui-brand-line);background:var(--npui-brand-weak);color:var(--npui-brand-strong)}
body.np-ui-reference .np-alert-chip.clear       {border-color:var(--npui-good-line);background:var(--npui-good-weak);color:var(--npui-good)}

body.np-ui-reference .item-row{
  padding:12px!important;
  border:1px solid var(--npui-border)!important;
  border-radius:var(--np3-radius)!important;
  background:var(--npui-surface)!important;
  box-shadow:var(--np3-shadow)!important;
}
body.np-ui-reference .qty-control{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 46px;
  align-items:center;
  gap:0;
  overflow:hidden;
  border:1.5px solid var(--npui-border-strong);
  border-radius:var(--np3-radius-sm);
  background:var(--npui-surface);
}
body.np-ui-reference .qty-control:focus-within{border-color:var(--npui-brand);box-shadow:0 0 0 3px var(--npui-ring)}
body.np-ui-reference .qty-control button{
  height:46px;min-height:46px!important;
  padding:0!important;
  border:0!important;border-radius:0!important;
  background:var(--npui-surface-2)!important;
  color:var(--npui-text-2)!important;
  font-size:20px!important;
  font-weight:800!important;
}
body.np-ui-reference .qty-control input{
  width:100%!important;
  min-width:0!important;
  min-height:46px!important;
  padding:0 3px!important;
  border:0!important;
  border-right:1px solid var(--npui-border)!important;
  border-left:1px solid var(--npui-border)!important;
  border-radius:0!important;
  text-align:center!important;
  font-size:16px!important;
  font-weight:800!important;
}

/* ---------------------------------------------------------------------------
   7. DIEM DUNG
   --------------------------------------------------------------------------- */
@media(min-width:620px){
  body.np-ui-reference .np139-hero-side{grid-template-columns:repeat(3,minmax(0,1fr))}
  body.np-ui-reference .np139-hero-side>div{border-right:1px solid rgba(255,255,255,.14);border-bottom:0}
  body.np-ui-reference .np139-hero-side>div:last-child{border-right:0}
  body.np-ui-reference .np-critical-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:900px){
  body.np-ui-reference .np139-hero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:24px;padding:24px 26px}
  body.np-ui-reference .np139-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
  body.np-ui-reference .np-sale-wizard-head{position:static!important}
  body.np-ui-reference .qty-control{grid-template-columns:34px minmax(0,1fr) 34px}
  body.np-ui-reference .qty-control button,
  body.np-ui-reference .qty-control input{height:42px;min-height:42px!important}
}
@media(max-width:899px){
  body.np-ui-reference.mobile-sales-open #content{padding-right:11px!important;padding-left:11px!important}
  body.np-ui-reference.mobile-sales-open .page-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    margin-bottom:10px!important;
  }
  body.np-ui-reference.mobile-sales-open .page-head .np-page-title-block{display:none!important}
  body.np-ui-reference.mobile-sales-open .page-head .actions{width:100%!important;justify-content:flex-end!important}
  body.np-ui-reference.mobile-sales-open .page-head .actions button{flex:1 1 0;min-height:40px!important}
  body.np-ui-reference .np-sale-wizard-head{
    position:sticky!important;
    /* Vung cuon la chinh #content (core dat overflow:auto), con thanh tren
       nam NGOAI vung cuon. Neu tru chieu cao thanh tren o day thi bi tinh
       hai lan: the tieu de bi day xuong 56px ngay khi chua cuon va che mat
       dong "CANH BAO TRUOC KHI GIAO" ben duoi. */
    top:2px!important;
    z-index:22!important;
  }
  body.np-ui-reference .item-row{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    align-items:end!important;
    gap:10px!important;
    margin-bottom:10px!important;
  }
  body.np-ui-reference .item-row>label:first-of-type,
  body.np-ui-reference .item-row>*:first-child{grid-column:1/-1!important}
}
@media(max-width:560px){
  body.np-ui-reference .np139-kpi-grid{grid-template-columns:1fr!important}
  body.np-ui-reference .np139-main-kpi{min-height:0!important}
}

/* ---------------------------------------------------------------------------
   8. THONG NHAT FONT SO TIEN
   Core 1.53.0 ep font mono cho:
     .metric strong, .money-input, .cash-split strong, .health-hero strong,
     .bar-value, .rank-list small, td.right, .invoice-preview .total
   Hau qua: tren cung mot man hinh co hai kieu chu tien khac nhau, va dau
   cach cua font mono rat rong nen "184.250.000 d" trong nhu co hai dau cach.
   Dua tat ca ve mot font, dung tabular-nums de cac chu so van thang cot.
   --------------------------------------------------------------------------- */
body.np-ui-reference .metric strong,
body.np-ui-reference .money-input,
body.np-ui-reference .cash-split strong,
body.np-ui-reference .health-hero strong,
body.np-ui-reference .bar-value,
body.np-ui-reference .rank-list small,
body.np-ui-reference td.right,
body.np-ui-reference .invoice-preview .total,
body.np-ui-reference .np139-hero-main strong,
body.np-ui-reference .np139-main-kpi>strong,
body.np-ui-reference #content .dashboard-kpis>.metric strong{
  font-family:var(--npui-font)!important;
  font-variant-numeric:tabular-nums!important;
  font-feature-settings:"tnum" 1!important;
  word-spacing:normal!important;
}
body.np-ui-reference .cash-split strong{
  display:block;
  /* Ba cot tien canh nhau, so VND rat dai — co chu co dan de khong tran khoi o. */
  font-size:clamp(13px,1.12vw,17px)!important;
  font-weight:800!important;
  letter-spacing:-.3px!important;
  white-space:nowrap;
}



/* Core con mot quy tac rieng cho KPI Tong quan:
     body.np1500-ui .dashboard-kpis>.metric strong{font-family:ui-monospace...!important}
   Selector do co 1 id nen phai them #content moi thang duoc. */
body.np-ui-reference #content .dashboard-kpis>.metric strong{
  display:block;
  color:var(--npui-text)!important;
  font-family:var(--npui-font)!important;
  /* So tien VND rat dai ("3.482.900.000 d" = 15 ky tu). Co chu co dan theo be
     rong man hinh de don vi "d" khong bi rot xuong dong rieng. */
  font-size:clamp(18px,1.55vw,27px)!important;
  font-weight:800!important;
  line-height:1.1!important;
  letter-spacing:-.7px!important;
  word-spacing:normal!important;
  font-variant-numeric:tabular-nums!important;
  white-space:nowrap!important;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:900px){
  body.np-ui-reference #content .dashboard-kpis>.metric strong{font-size:clamp(17px,4.4vw,24px)!important}
}

/* Cac nhom the KPI khac cua core cung dung .metric — ap dung cung nguyen tac
   chong rot dong cho so tien dai. */
body.np-ui-reference #content .cards>.metric strong{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ---------------------------------------------------------------------------
   10. HE ICON TRONG VUNG NOI DUNG  (phuong an A - dong bo don sac)
   ---------------------------------------------------------------------------
   Core ve icon trang tri bang KY TU / EMOJI o ba cho:
     .workflow-strip button>span        (o 44px, nen gradient)
     .np1380-quick-grid button>i        (o 38px, nen #eaf7fb)
     .np137-metric-icon                 (o 32px, nen #eaf7fb)
   Ket qua: nua man hinh la icon don sac (sidebar), nua con lai la emoji mau.

   Vi sao lan truoc that bai: core dat background-IMAGE gradient len o icon.
   Ban truoc chi dat background-color roi phu mask, ma background-image ve DE
   LEN background-color, nen gan nhu khong con pixel nao hien ra (do duoc
   43/10816). Lan nay giu nguyen o nen cua core va ve icon bang ::before ben
   trong — dung cung khuon mau da chay tot cho .np139-main-kpi>header>span.

   JS gan data-np-icon dua tren KY TU that trong o, nen khong phu thuoc thu tu
   nut hay ten trang. Ky tu la khong duoc anh xa se giu nguyen emoji cua core.
   --------------------------------------------------------------------------- */
body.np-ui-reference #content .workflow-strip button>span[data-np-icon],
body.np-ui-reference #content .np1380-quick-grid button>i[data-np-icon],
body.np-ui-reference #content .np137-metric-icon[data-np-icon]{
  display:grid!important;
  place-items:center!important;
  /* font-size:0 lam bien mat ky tu goc; o nen cua core duoc giu nguyen */
  font-size:0!important;
  line-height:0!important;
  text-indent:0!important;
}
body.np-ui-reference #content .workflow-strip button>span[data-np-icon]::before,
body.np-ui-reference #content .np1380-quick-grid button>i[data-np-icon]::before,
body.np-ui-reference #content .np137-metric-icon[data-np-icon]::before{
  content:""!important;
  display:block!important;
  background-color:currentColor;
  -webkit-mask-image:var(--np3-i-default);mask-image:var(--np3-i-default);
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
}
/* Kich thuoc icon theo tung o */
body.np-ui-reference #content .workflow-strip button>span[data-np-icon]::before{width:22px;height:22px}
body.np-ui-reference #content .np1380-quick-grid button>i[data-np-icon]::before{width:19px;height:19px}
body.np-ui-reference #content .np137-metric-icon[data-np-icon]::before{width:16px;height:16px}

/* Du phong: trinh duyet khong ho tro mask thi giu lai ky tu goc thay vi
   hien mot o mau dac. */
@supports not ((-webkit-mask-image:none) or (mask-image:none)){
  body.np-ui-reference #content .workflow-strip button>span[data-np-icon],
  body.np-ui-reference #content .np1380-quick-grid button>i[data-np-icon],
  body.np-ui-reference #content .np137-metric-icon[data-np-icon]{font-size:inherit!important}
  body.np-ui-reference #content .workflow-strip button>span[data-np-icon]::before,
  body.np-ui-reference #content .np1380-quick-grid button>i[data-np-icon]::before,
  body.np-ui-reference #content .np137-metric-icon[data-np-icon]::before{display:none!important}
}

body.np-ui-reference #content [data-np-icon="home"]::before{-webkit-mask-image:var(--np3-i-home)!important;mask-image:var(--np3-i-home)!important}
body.np-ui-reference #content [data-np-icon="plus"]::before{-webkit-mask-image:var(--np3-i-plus)!important;mask-image:var(--np3-i-plus)!important}
body.np-ui-reference #content [data-np-icon="phone"]::before{-webkit-mask-image:var(--np3-i-phone)!important;mask-image:var(--np3-i-phone)!important}
body.np-ui-reference #content [data-np-icon="receipt"]::before{-webkit-mask-image:var(--np3-i-receipt)!important;mask-image:var(--np3-i-receipt)!important}
body.np-ui-reference #content [data-np-icon="check"]::before{-webkit-mask-image:var(--np3-i-check)!important;mask-image:var(--np3-i-check)!important}
body.np-ui-reference #content [data-np-icon="users"]::before{-webkit-mask-image:var(--np3-i-users)!important;mask-image:var(--np3-i-users)!important}
body.np-ui-reference #content [data-np-icon="card"]::before{-webkit-mask-image:var(--np3-i-card)!important;mask-image:var(--np3-i-card)!important}
body.np-ui-reference #content [data-np-icon="bottle"]::before{-webkit-mask-image:var(--np3-i-bottle)!important;mask-image:var(--np3-i-bottle)!important}
body.np-ui-reference #content [data-np-icon="box"]::before{-webkit-mask-image:var(--np3-i-box)!important;mask-image:var(--np3-i-box)!important}
body.np-ui-reference #content [data-np-icon="factory"]::before{-webkit-mask-image:var(--np3-i-factory)!important;mask-image:var(--np3-i-factory)!important}
body.np-ui-reference #content [data-np-icon="chart"]::before{-webkit-mask-image:var(--np3-i-chart)!important;mask-image:var(--np3-i-chart)!important}
body.np-ui-reference #content [data-np-icon="trend"]::before{-webkit-mask-image:var(--np3-i-trend)!important;mask-image:var(--np3-i-trend)!important}
body.np-ui-reference #content [data-np-icon="cash"]::before{-webkit-mask-image:var(--np3-i-cash)!important;mask-image:var(--np3-i-cash)!important}
body.np-ui-reference #content [data-np-icon="bank"]::before{-webkit-mask-image:var(--np3-i-bank)!important;mask-image:var(--np3-i-bank)!important}
body.np-ui-reference #content [data-np-icon="alert"]::before{-webkit-mask-image:var(--np3-i-alert)!important;mask-image:var(--np3-i-alert)!important}
body.np-ui-reference #content [data-np-icon="search"]::before{-webkit-mask-image:var(--np3-i-search)!important;mask-image:var(--np3-i-search)!important}
body.np-ui-reference #content [data-np-icon="map"]::before{-webkit-mask-image:var(--np3-i-map)!important;mask-image:var(--np3-i-map)!important}
body.np-ui-reference #content [data-np-icon="install"]::before{-webkit-mask-image:var(--np3-i-install)!important;mask-image:var(--np3-i-install)!important}
body.np-ui-reference #content [data-np-icon="settings"]::before{-webkit-mask-image:var(--np3-i-settings)!important;mask-image:var(--np3-i-settings)!important}
body.np-ui-reference #content [data-np-icon="cart"]::before{-webkit-mask-image:var(--np3-i-cart)!important;mask-image:var(--np3-i-cart)!important}
body.np-ui-reference #content [data-np-icon="clock"]::before{-webkit-mask-image:var(--np3-i-clock)!important;mask-image:var(--np3-i-clock)!important}
body.np-ui-reference #content [data-np-icon="truck"]::before{-webkit-mask-image:var(--np3-i-truck)!important;mask-image:var(--np3-i-truck)!important}

/* ---------------------------------------------------------------------------
   11. VA CHE DO TOI CHO CAC KHOI CON GIU MAU SANG CUA CORE
   ---------------------------------------------------------------------------
   Core 1.53.0 ma cung mau sang cho mot so khoi, nen o che do toi chung van
   trang / kem sua. Do duoc bang thuc nghiem, ba cho nang nhat:
     .metric.metric-alert   nen #fff9f8, tuong phan chu 1,08:1  (khong doc noi)
     .cash-split > div      nen #faf8f2, tuong phan chu 1,06:1  (khong doc noi)
     .page-head .actions    nen trang 68%, tuong phan 1,12:1
   Ba cho nhe hon (nen sang nhung chu van doc duoc): the thao tac nhanh va hai
   loai o icon. Tat ca deu duoc dua ve token cua lop UI.
   Chi ap dung o che do toi — che do sang giu nguyen.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] body.np-ui-reference #content .np1380-quick-grid button,
html[data-theme="dark"] body.np-ui-reference #content .workflow-strip button{
  background:var(--npui-surface)!important;
  background-image:none!important;
  border-color:var(--npui-border)!important;
  color:var(--npui-text)!important;
}
html[data-theme="dark"] body.np-ui-reference #content .np1380-quick-grid button b,
html[data-theme="dark"] body.np-ui-reference #content .workflow-strip button b{color:var(--npui-text)!important}
html[data-theme="dark"] body.np-ui-reference #content .np1380-quick-grid button small,
html[data-theme="dark"] body.np-ui-reference #content .workflow-strip button small{color:var(--npui-text-2)!important}
/* Dau > chi huong o the thao tac nhanh: 2,53:1 — dua len muc doc duoc. */
body.np-ui-reference #content .np1380-quick-grid button>em{color:var(--npui-text-3)!important}
html[data-theme="dark"] body.np-ui-reference #content .np1380-quick-grid button em{color:var(--npui-text-3)!important}

html[data-theme="dark"] body.np-ui-reference #content .np1380-quick-grid button>i,
html[data-theme="dark"] body.np-ui-reference #content .np137-metric-icon,
html[data-theme="dark"] body.np-ui-reference #content .np137-page-kicker>i{
  background:var(--npui-surface-3)!important;
  background-image:none!important;
  color:var(--npui-brand-strong)!important;
}
html[data-theme="dark"] body.np-ui-reference #content .workflow-strip button>span{
  background:var(--npui-surface-3)!important;
  background-image:none!important;
  color:var(--npui-brand-strong)!important;
}

html[data-theme="dark"] body.np-ui-reference #content .metric.metric-alert{
  background:var(--npui-warn-weak)!important;
  background-image:none!important;
  border-color:var(--npui-warn-line)!important;
}
html[data-theme="dark"] body.np-ui-reference #content .metric.metric-alert strong{color:var(--npui-text)!important}
html[data-theme="dark"] body.np-ui-reference #content .metric.metric-alert small{color:var(--npui-warn)!important}

html[data-theme="dark"] body.np-ui-reference #content .cash-split>div{
  background:var(--npui-surface-2)!important;
  background-image:none!important;
  border:1px solid var(--npui-border)!important;
}
html[data-theme="dark"] body.np-ui-reference #content .cash-split span{color:var(--npui-text-2)!important}
html[data-theme="dark"] body.np-ui-reference #content .cash-split strong{color:var(--npui-text)!important}

html[data-theme="dark"] body.np-ui-reference #content .actions,
html[data-theme="dark"] body.np-ui-reference #content .page-head .actions{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}

/* ---------------------------------------------------------------------------
   12. LUOI AN TOAN CHE DO TOI (ap cho MOI trang, khong rieng Tong quan)
   ---------------------------------------------------------------------------
   JS danh dau data-np-dark cho phan tu co nen sang thuc te, va data-np-dark-fg
   cho chu bi chim sau khi nen doi mau. Xem chu thich trong ui-shell.js.
   Quy tac o day co !important va do uu tien cao vi phai thang cac mau ma cung
   trong core (1.276 quy tac nen sang tren 1.210 selector).
   --------------------------------------------------------------------------- */
html[data-theme="dark"] body.np-ui-reference [data-np-dark="surface"]{
  background-color:var(--npui-surface)!important;
  background-image:none!important;
  border-color:var(--npui-border)!important;
}
html[data-theme="dark"] body.np-ui-reference [data-np-dark="chip"]{
  background-color:var(--npui-surface-3)!important;
  background-image:none!important;
  border-color:var(--npui-border)!important;
}
html[data-theme="dark"] body.np-ui-reference [data-np-dark-fg]{
  color:var(--npui-text)!important;
}
/* Giu lai sac thai canh bao / thanh cong / loi thay vi lam phang het.
   Cac lop trang thai cua core van tu quyet dinh mau chu cua no. */
html[data-theme="dark"] body.np-ui-reference [data-np-dark].metric-alert,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].warn,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].warning{
  background-color:var(--npui-warn-weak)!important;
  border-color:var(--npui-warn-line)!important;
}
html[data-theme="dark"] body.np-ui-reference [data-np-dark].bad,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].danger,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].rejected{
  background-color:var(--npui-crit-weak)!important;
  border-color:var(--npui-crit-line)!important;
}
html[data-theme="dark"] body.np-ui-reference [data-np-dark].ok,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].good,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].success,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].approved,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].done{
  background-color:var(--npui-good-weak)!important;
  border-color:var(--npui-good-line)!important;
}
html[data-theme="dark"] body.np-ui-reference [data-np-dark].active,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].selected,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].primary{
  background-color:var(--npui-brand)!important;
  border-color:var(--npui-brand)!important;
}
html[data-theme="dark"] body.np-ui-reference [data-np-dark].primary,
html[data-theme="dark"] body.np-ui-reference [data-np-dark].active{color:#ffffff!important}
html[data-theme="dark"] body.np-ui-reference [data-np-dark].primary [data-np-dark-fg],
html[data-theme="dark"] body.np-ui-reference [data-np-dark].active [data-np-dark-fg]{color:#ffffff!important}

/* Nut chinh o che do toi: mau thuong hieu sang len (#4ca6cd) nen chu trang
   chi con 2,75:1. Doi sang chu toi tren nen thuong hieu. */
html[data-theme="dark"] body.np-ui-reference button.primary,
html[data-theme="dark"] body.np-ui-reference button.primary[data-np-dark-fg]{
  background:var(--npui-brand)!important;
  border-color:var(--npui-brand)!important;
  color:var(--npui-text-inverse)!important;
}
html[data-theme="dark"] body.np-ui-reference button.primary:hover{
  background:var(--npui-brand-hover)!important;
  border-color:var(--npui-brand-hover)!important;
}
/* Giu sac thai cho chu mang y nghia trang thai thay vi lam phang het. */
html[data-theme="dark"] body.np-ui-reference [data-np-dark-fg].ok,
html[data-theme="dark"] body.np-ui-reference .ok [data-np-dark-fg]{color:var(--npui-good)!important}
html[data-theme="dark"] body.np-ui-reference [data-np-dark-fg].bad,
html[data-theme="dark"] body.np-ui-reference .bad [data-np-dark-fg]{color:var(--npui-crit)!important}
html[data-theme="dark"] body.np-ui-reference [data-np-dark-fg].warn,
html[data-theme="dark"] body.np-ui-reference .warn [data-np-dark-fg]{color:var(--npui-warn)!important}
html[data-theme="dark"] body.np-ui-reference .np-wizard-node.done [data-np-dark-fg],
html[data-theme="dark"] body.np-ui-reference .np-wizard-node.done>i{color:var(--npui-good)!important}

/* Nut buoc da hoan tat cua trinh tao don: core to nen xanh trung (#16835c)
   va chu cung mau ho xanh -> 2,09:1. Nen toi day dan de chu noi len. */
html[data-theme="dark"] body.np-ui-reference .np-wizard-node.done>i{
  background:var(--npui-good-weak)!important;
  border-color:var(--npui-good)!important;
  color:var(--npui-good)!important;
}
html[data-theme="dark"] body.np-ui-reference .np-wizard-node.active>i{
  background:var(--npui-brand)!important;
  border-color:var(--npui-brand)!important;
  color:var(--npui-text-inverse)!important;
}

/* ---------------------------------------------------------------------------
   13. TUONG PHAN CHU PHU O CHE DO SANG
   ---------------------------------------------------------------------------
   Script QA (qa/np-ui-audit) phat hien mot so chu phu cua core khong dat chuan
   WCAG AA o che do SANG — bo kiem thu truoc day cua toi khong do phan nay:
     th (tieu de bang)              3,63:1
     .np1380-quick-grid button small 3,38:1
     .np1380-section-title > span    4,45:1
   Dua ve --npui-text-2 (#41505f, 8,28:1 tren nen trang).
   --------------------------------------------------------------------------- */
body.np-ui-reference #content th,
body.np-ui-reference #content .table-wrap th{color:var(--npui-text-2)!important}
body.np-ui-reference #content .np1380-quick-grid button small,
body.np-ui-reference #content .np1380-section-title>span,
body.np-ui-reference #content .np1380-quick-start .np1380-section-title>span{
  color:var(--npui-text-2)!important;
}
body.np-ui-reference #content .workflow-strip button small{color:var(--npui-text-2)!important}
/* Dau > chi huong o the thao tac nhanh: 2,53:1 — dua len muc doc duoc. */
body.np-ui-reference #content .np1380-quick-grid button>em{color:var(--npui-text-3)!important}
body.np-ui-reference #content .metric small,
body.np-ui-reference #content .np-page-description{color:var(--npui-text-2)!important}

/* Khoi Dong tien tran ngang 3-4px do o luoi khong duoc phep co lai. */
body.np-ui-reference #content .cash-split{min-width:0}
body.np-ui-reference #content .cash-split>div{min-width:0;overflow-wrap:anywhere}
body.np-ui-reference #content .grid-2>.card,
body.np-ui-reference #content .dashboard-grid>.card{min-width:0}

/* Trong khoang may tinh bang, khoi Dong tien co ba cot rat hep -> xep hai cot. */
@media(min-width:901px) and (max-width:1180px){
  body.np-ui-reference #content .cash-split{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.np-ui-reference .cash-split strong{font-size:clamp(12px,1.32vw,14.5px)!important}
}

/* Cot bieu do va nhan bo loc o che do toi: giu mau du lieu, nang tuong phan chu. */
html[data-theme="dark"] body.np-ui-reference #content .bar-track{background:var(--npui-surface-3)!important}
html[data-theme="dark"] body.np-ui-reference #content .bar-fill{background:var(--npui-brand)!important}
html[data-theme="dark"] body.np-ui-reference #content .bar-label{color:var(--npui-text-2)!important}
html[data-theme="dark"] body.np-ui-reference #content details>summary{color:var(--npui-text)!important}
html[data-theme="dark"] body.np-ui-reference #content .rank-list small{color:var(--npui-text-2)!important;margin-left:6px}

/* ---------------------------------------------------------------------------
   9. GHEP TU UI CLEAN 7.1 / 7.2 (GPT) — o SO LUONG bi ep mat
   ---------------------------------------------------------------------------
   7.1 khoanh theo chieu rong VIEWPORT. Nhung chieu rong that su quyet dinh la
   chieu rong CARD san pham sau khi sidebar va cot thanh toan chiem cho: man
   hinh van rong ma cot SL chi con ~55-60px, hai nut +/- an het va o nhap bi ep
   ve gan 0px. 7.2 vi vay dat chieu rong toi thieu that cho stepper va dung
   container query de doi bo cuc theo card. Giu nguyen ca hai lop.
   --------------------------------------------------------------------------- */
@media(min-width:901px) and (max-width:1180px){
  body.np-ui-reference .sale-layout{grid-template-columns:minmax(0,1fr)!important}
  body.np-ui-reference .sticky-summary{position:static!important;top:auto!important}
  body.np-ui-reference .item-row{
    grid-template-columns:minmax(150px,2fr) minmax(88px,.8fr) minmax(94px,.95fr) minmax(94px,.95fr) 40px!important;
    gap:6px!important;
  }
  body.np-ui-reference .qty-control{grid-template-columns:30px minmax(28px,1fr) 30px!important}
  body.np-ui-reference .qty-control button{
    width:30px!important;min-width:30px!important;max-width:30px!important;
  }
}

@media(min-width:901px){
  body.np-ui-reference .sale-layout .sale-main-card .item-row{
    grid-template-columns:minmax(105px,1.35fr) 116px minmax(70px,.78fr) minmax(70px,.72fr) 40px!important;
    gap:6px!important;
    min-width:0!important;
  }
  body.np-ui-reference .sale-layout .sale-main-card .item-row>label{min-width:0!important}
  body.np-ui-reference .sale-layout .sale-main-card .item-row>label:nth-child(2){
    min-width:116px!important;width:116px!important;
  }
  body.np-ui-reference .sale-layout .sale-main-card .qty-control{
    display:grid!important;
    grid-template-columns:28px minmax(58px,1fr) 28px!important;
    width:116px!important;min-width:116px!important;max-width:116px!important;
    overflow:hidden!important;
  }
  body.np-ui-reference .sale-layout .sale-main-card .qty-control button{
    width:28px!important;min-width:28px!important;max-width:28px!important;padding:0!important;
  }
  body.np-ui-reference .sale-layout .sale-main-card .qty-control .item-qty{
    display:block!important;visibility:visible!important;opacity:1!important;
    width:100%!important;min-width:58px!important;max-width:none!important;
    padding:0 2px!important;text-align:center!important;
    -moz-appearance:textfield;appearance:textfield;
  }
  body.np-ui-reference .sale-layout .sale-main-card .qty-control .item-qty::-webkit-inner-spin-button,
  body.np-ui-reference .sale-layout .sale-main-card .qty-control .item-qty::-webkit-outer-spin-button{
    -webkit-appearance:none;margin:0;
  }
}

/* Card ban hang qua hep (sidebar + cot thanh toan) thi tach dong san pham
   thanh 2 hang — theo CHIEU RONG CARD, khong theo viewport. */
body.np-ui-reference .sale-layout .sale-main-card{
  container-type:inline-size;
  container-name:np-sale-main;
}
@container np-sale-main (max-width:520px){
  body.np-ui-reference .sale-layout .sale-main-card .item-row{
    grid-template-columns:minmax(116px,1.15fr) minmax(88px,1fr) minmax(88px,1fr) 40px!important;
    gap:6px!important;
  }
  body.np-ui-reference .sale-layout .sale-main-card .item-row>label:first-child{grid-column:1/-1!important}
  body.np-ui-reference .sale-layout .sale-main-card .item-row>label:nth-child(2){grid-column:1!important}
  body.np-ui-reference .sale-layout .sale-main-card .item-row>label:nth-child(3){grid-column:2!important}
  body.np-ui-reference .sale-layout .sale-main-card .item-row>label:nth-child(4){grid-column:3!important}
  body.np-ui-reference .sale-layout .sale-main-card .item-row>.danger{
    grid-column:4!important;
    width:40px!important;min-width:40px!important;max-width:40px!important;
    align-self:end!important;
  }
}

/* Hoa don tren dien thoai: khong de nut loc va hang ngay tao scroll ngang ngam. */
@media(max-width:480px){
  body.np-ui-reference #content .np142-invoice-toolbar,
  body.np-ui-reference #content .np142-date-bar{min-width:0;max-width:100%}
  body.np-ui-reference #content .np142-filter-button{min-width:0;gap:0;overflow:hidden}
  body.np-ui-reference #content .np142-date-chips{width:100%;max-width:100%;margin-right:0}
  body.np-ui-reference #content .np139-tabs{max-width:100%;margin-inline:0;overflow-x:auto!important}
}

/* Core dat display:grid cho bang tab phu nen mot so WebView van tinh khung cua
   no khi DETAILS dang dong. An dut khoat den luc nguoi dung mo. */
body.np-ui-reference #content details.np139-more-tabs:not([open])>div{display:none!important}

/* Placeholder trong o nhap o che do toi. */
html[data-theme="dark"] body.np-ui-reference input::placeholder,
html[data-theme="dark"] body.np-ui-reference textarea::placeholder{
  color:var(--npui-text-3)!important;opacity:1!important;
}
html[data-theme="dark"] body.np-ui-reference input::-webkit-input-placeholder,
html[data-theme="dark"] body.np-ui-reference textarea::-webkit-input-placeholder{
  color:var(--npui-text-3)!important;opacity:1!important;
}

/* Cac diem tuong phan che do SANG do dot ra soat tren DOM core that bat duoc. */
html:not([data-theme="dark"]) body.np-ui-reference #content .np137-page-kicker>span{color:#496775!important}
html:not([data-theme="dark"]) body.np-ui-reference #content #np1483VehicleSummary>div>span{color:#526b76!important}
html:not([data-theme="dark"]) body.np-ui-reference #content .np1483-row-vehicle.inactive{color:#526a75!important}
html:not([data-theme="dark"]) body.np-ui-reference #content .np-alert-chip.bottle-owed small{color:#56677d!important}

/* ---------------------------------------------------------------------------
   10. ICON MAN DANG NHAP (phuong an A — mot he icon don sac cho ca ung dung)
   ---------------------------------------------------------------------------
   Man dang nhap la cho DUY NHAT con dung emoji mau (👤 🔐 👁). O che do toi
   chung noi ro len va lech han voi phan con lai cua ung dung. Dung cung ky
   thuat mask nhu cac icon khac: font-size:0 de giau ky tu goc, roi ve icon
   bang ::before.
   --------------------------------------------------------------------------- */
#loginView .login-input-wrap>i,
#loginView .password-wrap>i,
#loginView #togglePasswordBtn{
  font-size:0!important;
  line-height:0!important;
  color:var(--npui-text-3)!important;
  display:grid!important;
  place-items:center!important;
}
#loginView .login-input-wrap>i::before,
#loginView .password-wrap>i::before,
#loginView #togglePasswordBtn::before{
  content:"";
  display:block;
  width:20px;height:20px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-image:var(--np3-i-user);mask-image:var(--np3-i-user);
}
#loginView .password-wrap>i::before{
  -webkit-mask-image:var(--np3-i-lock)!important;mask-image:var(--np3-i-lock)!important;
}
#loginView #togglePasswordBtn::before{
  -webkit-mask-image:var(--np3-i-eye)!important;mask-image:var(--np3-i-eye)!important;
}