/* =============================================================================
   NamPhuongERP 1.64.8 C6 — Mobile Header Actions Redesign
   =============================================================================
   NAP CUOI CUNG, sau css/namphuong-ui-mobile-v2-1.64.7.css.

   SCOPE (sua loi cua C1):
   Ban C1 dung `body.np1648-mobile #saleForm .item-row` — tuc la ap CA cho
   Ban hang nhanh. C2 khoa vao dung man ban theo tuyen:

       body.np1648-mobile.np158-route-sale ...

   Ban hang nhanh giu nguyen bo cuc 1.64.7, khong nhan mot quy tac nao o day.

   ============================================================================
   NGUYEN NHAN LOI CHONG THE SAN PHAM
   ============================================================================
   Do bang phan tich tang CSS tren ca 16 stylesheet, khop selector bang DOM
   that, day du class body cua man ban theo tuyen, o 320/360/390/430px:

     grid-template-columns THANG = minmax(0,1fr) auto   -> CHI 2 COT
                                   [namphuong-ui-sale-card-1.64.0.css]
     grid-column cua cac con     = 1/-1 · 1 · 2 · 3 · 4
                                   [1.62.0 va 1.58.0]

   Con bi dat vao cot 3 va 4 trong khi mau luoi chi khai 2 cot -> CSS Grid sinh
   cot ngam, khong theo mau, khong bi rang buoc kich thuoc. Do la goc cua viec
   o so luong bi ep, don gia de sang vung so luong, preset va thanh tien vo.

   Nam file cung dinh nghia luoi cho .item-row, deu !important.

   ============================================================================
   CACH SUA — VA VI SAO PHAI RESET TUNG THUOC TINH
   ============================================================================
   Doi .item-row sang flex se vo hieu moi grid-column. NHUNG chi the thi CHUA DU
   — ban C1 da sai o cho nay. Audit tung con cho thay cac thuoc tinh sau VAN
   THANG va van co tac dung trong flex:

     button Xóa        position:absolute! top:3px! right:4px! opacity:.45!
                       width:22px!   [sale-card-1.64.0]  height:42px! [1.58.0]
       -> phan tu absolute KHONG theo order/flex-basis. C1 dat order:2 va
          flex:0 0 44px cho no la vo tac dung: no van noi de len goc the.
     label Đơn giá     padding-left:37px!  [sale-card-1.64.0]
     label Thành tiền  padding-left:37px!  [sale-card-1.64.0]
       -> an mat 37px moi ben, cong voi flex-basis 50% se tran.
     label Sản phẩm    flex-direction:row! align-items:center! position:relative!
       -> day la bo cuc ANH + SELECT nam ngang. C1 ep tat ca label ve
          flex-direction:column nen se pha bo cuc nay.
     label SL          flex-direction:column!

   C2 reset dung tung cai o tren, khong dung position:absolute, khong an control.

   Bo cuc:
       [ảnh + tên sản phẩm .....................] [✕]
       SL   [ −   10   + ]
            [5] [10] [20]
       Đơn giá                        Thành tiền
   ============================================================================ */

/* --- Khung hang --- */
body.np1648-mobile.np158-route-sale #saleForm .item-row{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:flex-end !important;
  gap:8px !important;
  padding:10px !important;
  position:relative !important;      /* moc cho bat ky con absolute nao con sot */
  grid-template-columns:none !important;
  grid-template-areas:none !important;
  overflow:hidden !important;        /* chan tran ngang */
}
body.np1648-mobile.np158-route-sale #saleForm .item-row > label,
body.np1648-mobile.np158-route-sale #saleForm .item-row > button{
  grid-column:auto !important;
  grid-row:auto !important;
  grid-area:auto !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
}

/* --- Hang 1: anh + ten san pham --- */
body.np1648-mobile.np158-route-sale #saleForm .item-row > label:nth-of-type(1){
  order:1 !important;
  flex:1 1 calc(100% - 52px) !important;
  /* GIU nam ngang: day la bo cuc anh + select cua 1.64.0. */
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  gap:8px !important;
  padding-left:0 !important;
  font-size:12px !important;
  font-weight:600 !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .item-product{
  flex:1 1 auto !important;
  height:44px !important;
  min-height:44px !important;
  min-width:0 !important;
  font-size:15px !important;
}

/* --- Nut Xoa: go absolute, tra ve dong chay --- */
body.np1648-mobile.np158-route-sale #saleForm .item-row > button{
  order:2 !important;
  position:static !important;        /* C1 quen cai nay -> nut van noi de len */
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  opacity:1 !important;
  flex:0 0 44px !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 !important;
  align-self:flex-end !important;
  display:grid !important;
  place-items:center !important;
  font-size:0 !important;
  border-radius:10px !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row > button::before{
  content:'✕';
  font-size:16px;
  line-height:1;
  font-weight:700;
}

/* --- Hang 2: so luong + preset --- */
body.np1648-mobile.np158-route-sale #saleForm .item-row > label:nth-of-type(2){
  order:3 !important;
  flex:1 1 100% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:4px !important;
  padding-left:0 !important;
  font-size:12px !important;
  font-weight:600 !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .qty-control{
  display:grid !important;
  grid-template-columns:48px minmax(0,1fr) 48px !important;
  gap:6px !important;
  width:100% !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .qty-control button{
  height:44px !important;
  min-height:44px !important;
  width:auto !important;
  max-width:none !important;
  position:static !important;
  padding:0 !important;
  font-size:20px !important;
  border-radius:10px !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .item-qty{
  height:44px !important;
  min-height:44px !important;
  width:100% !important;
  max-width:none !important;
  text-align:center !important;
  font-size:16px !important;   /* >=16px de iOS khong tu phong to trang */
  font-weight:700 !important;
  /* Bo nut tang/giam mac dinh: app da co nut − / +, de ca hai se chen nhau. */
  -moz-appearance:textfield;
  appearance:textfield;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .item-qty::-webkit-outer-spin-button,
body.np1648-mobile.np158-route-sale #saleForm .item-row .item-qty::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .np159-chips{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:6px !important;
  width:100% !important;
  margin:0 !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .np159-chips button{
  position:static !important;
  /* C3: 36px chua dat chuan cham. Nang len 44px.
     Ba nut van nam mot hang vi luoi la repeat(3,minmax(0,1fr)) — chieu rong
     chia deu, khong phu thuoc noi dung, nen 320px cung khong tran. */
  min-height:44px !important;
  height:44px !important;
  width:auto !important;
  max-width:none !important;
  padding:0 !important;
  font-size:13px !important;
  border-radius:9px !important;
  opacity:1 !important;
}

/* --- Hang 3: don gia | thanh tien --- */
body.np1648-mobile.np158-route-sale #saleForm .item-row > label:nth-of-type(3),
body.np1648-mobile.np158-route-sale #saleForm .item-row > label:nth-of-type(4){
  order:4 !important;
  flex:1 1 calc(50% - 4px) !important;
  display:flex !important;
  flex-direction:column !important;
  gap:4px !important;
  padding-left:0 !important;   /* go 37px cua 1.64.0 -> khong con tran */
  font-size:12px !important;
  font-weight:600 !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row > label:nth-of-type(4){
  order:5 !important;
}
body.np1648-mobile.np158-route-sale #saleForm .item-row .item-price,
body.np1648-mobile.np158-route-sale #saleForm .item-row .item-total{
  height:44px !important;
  min-height:44px !important;
  width:100% !important;
  max-width:none !important;
  font-size:16px !important;
  text-align:right !important;
  font-variant-numeric:tabular-nums;
}
/* Man rat hep: don gia va thanh tien xuong hai hang rieng. */
@media (max-width:340px){
  body.np1648-mobile.np158-route-sale #saleForm .item-row > label:nth-of-type(3),
  body.np1648-mobile.np158-route-sale #saleForm .item-row > label:nth-of-type(4){
    flex:1 1 100% !important;
  }
}


/* =============================================================================
   NUT DONG DON TRONG MAN BAN THEO TUYEN
   =============================================================================
   1.58 an ca hai cho chua nut dong khi ban tu tuyen:
       mobile-sale-1.58.0.css:104  #content>.page-head{display:none!important}
       mobile-sale-1.58.0.css:106  .np-sale-wizard-head{display:none!important}
   Patch chuyen chinh nut .np-sale-close cua loi sang .np1480-sale-context.

   QUAN TRONG (sua loi cua C1): dai do KHONG phai flex ma la GRID, do 1.62 dat:
       mobile-compact-1.62.0.css:20  display:grid!important
                                     grid-template-columns:36px minmax(0,1fr)!important
       :30  .np1480-sale-context>button{grid-row:1/3!important; color:transparent!important}
       :42  .np1480-sale-context>button::before{content:'‹'!important; font-size:26px!important}

   Nut Dong la mot >button nen KE THUA het cac quy tac cua nut Back, ke ca
   dau '‹'. C1 dat cac thuoc tinh flex cho no — vo tac dung vi cha la grid.

   C2 giu nguyen grid va them cot thu ba cho nut Dong, dat vi tri ro rang:
       [Back 36px] [ngu canh 1fr] [Dong 44px]
   ============================================================================= */
/* C3 SUA DO UU TIEN.
   Quy tac cu cua 1.62:
       html.np-ui-reference body.np162-mobile-sale-compact .np1480-sale-context
       = (0,3,2)
   Quy tac C2:
       body.np1648-mobile .np1480-sale-context.np1648-has-close
       = (0,3,1)   -> THUA, du nap sau, vi ca hai deu !important.
   Ket qua: luoi van 2 cot, va cot 3 cua nut Dong tro thanh cot NGAM — dung
   thu ma vong nay dang di sua. Khong duoc dua vao luoi ngam.

   C3 nang len (0,6,2) bang cach bam dung ca ba class tren body:
       body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale */
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale .np1480-sale-context:has(> .np1648-route-close),
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale .np1480-sale-context.np1648-has-close{
  grid-template-columns:44px minmax(0,1fr) 44px !important;
}
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale .np1480-sale-context > .np-sale-close.np1648-route-close{
  grid-column:3 !important;
  grid-row:1/3 !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  /* C4: bo hinh tron. Vuong bo goc 12px cho dong bo voi nut quay lai. */
  border-radius:12px !important;
  border:1px solid var(--np1648-danger-line) !important;
  background:var(--np1648-danger-weak) !important;
  /* 1.62 dat color:transparent cho >button — phai tra lai mau chu. */
  color:var(--np1648-danger) !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
}
/* Ghi de dau '‹' ma nut Back dang dung. */
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale .np1480-sale-context > .np-sale-close.np1648-route-close::before{
  content:'✕' !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1 !important;
  color:var(--np1648-danger) !important;
}
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale .np1480-sale-context > .np-sale-close.np1648-route-close:active{
  transform:scale(.94);
}


/* =============================================================================
   C4 — HE NUT CHUNG CHO LUONG BAN HANG TREN DIEN THOAI
   =============================================================================
   Ra lai toan bo nut trong luong ban hang mobile va gom ve MOT he thong, thay
   vi moi ban va lai dat mot kieu rieng.

   SCOPE — chat, chi trong luong ban hang mobile:
       body.np1648-mobile.mobile-sales-open ...      (wizard ban hang)
       body.np1648-mobile.np158-route-sale ...       (dai ngu canh tuyen)
   Man khac va desktop khong nhan mot quy tac nao o day.

   NAM NHOM (theo dung phan loai da chot):
     A Primary CTA   #mobileSaveSaleBtn
     B Secondary     #npMobileSaleBackBtn · nut quay lai cua dai tuyen
     C Selection     .np-payment-presets button · .np-old-debt-box>summary
     D Utility       .qty-control button · .np159-chips button · .add-product-row
                     .bottle-auto-button · cac <summary> mo/dong
     E Danger/Close  .item-row>button.danger · .np-sale-close
   ============================================================================= */

/* ---------- Thang gia tri cua he nut ---------- */
:root{
  --np1648-h-cta:      48px;   /* CTA chinh */
  --np1648-h-btn:      44px;   /* nut thuong, dung luon lam nguong cham */
  --np1648-h-chip:     44px;   /* chip / preset */
  --np1648-r-sm:        8px;
  --np1648-r-md:       10px;
  --np1648-r-cta:      12px;

  --np1648-primary:      var(--npui-brand, #0B7FA4);
  --np1648-on-primary:   #ffffff;
  --np1648-surface:      var(--npui-surface, #ffffff);
  --np1648-surface-soft: #f7f8f9;
  --np1648-border:       var(--npui-border, #e5e7eb);
  --np1648-text:         var(--npui-text, #111827);
  --np1648-text-2:       var(--npui-text-2, #475467);

  --np1648-success:      #16803d;
  --np1648-success-weak: #f0fdf4;
  --np1648-success-line: #bbf7d0;

  --np1648-danger:       #b42318;
  --np1648-danger-weak:  #fef6f5;   /* hong RAT nhat, khong gat */
  --np1648-danger-line:  #f2d0cc;
}
html[data-theme="dark"]{
  --np1648-on-primary:   #06222c;
  --np1648-surface:      var(--npui-surface, #151e28);
  --np1648-surface-soft: #1b2632;
  --np1648-border:       var(--npui-border, #334155);
  --np1648-text:         var(--npui-text, #f5f7fa);
  --np1648-text-2:       #cbd5e1;
  --np1648-success:      #5cc98d;
  --np1648-success-weak: rgba(92,201,141,.12);
  --np1648-success-line: rgba(92,201,141,.38);
  --np1648-danger:       #f17c78;
  --np1648-danger-weak:  rgba(241,124,120,.12);
  --np1648-danger-line:  rgba(241,124,120,.34);
}

/* ---------- A. PRIMARY CTA ---------- */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #mobileSaveSaleBtn{
  min-height:var(--np1648-h-cta) !important;
  height:var(--np1648-h-cta) !important;
  border:0 !important;
  border-radius:var(--np1648-r-cta) !important;
  background:var(--np1648-primary) !important;
  background-color:var(--np1648-primary) !important;
  color:var(--np1648-on-primary) !important;
  font-size:15px !important;
  font-weight:700 !important;
  box-shadow:none !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #mobileSaveSaleBtn:active{
  filter:brightness(.94);
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #mobileSaveSaleBtn[disabled],
html.np-ui-reference body.np1648-mobile.mobile-sales-open #mobileSaveSaleBtn.is-loading{
  opacity:.55 !important;
  filter:none !important;
}

/* ---------- B. SECONDARY ---------- */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #npMobileSaleBackBtn,
html.np-ui-reference body.np1648-mobile.np158-route-sale .np1480-sale-context > button:not(.np-sale-close){
  min-height:var(--np1648-h-btn) !important;
  height:var(--np1648-h-btn) !important;
  width:var(--np1648-h-btn) !important;
  min-width:var(--np1648-h-btn) !important;
  padding:0 !important;
  border:1px solid var(--np1648-border) !important;
  border-radius:var(--np1648-r-cta) !important;
  background:var(--np1648-surface) !important;
  background-color:var(--np1648-surface) !important;
  color:var(--np1648-text) !important;
  font-size:14px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
/* Dau '‹' cua nut quay lai: 1.62 dat 26px — thu lai cho can voi ✕ 17px. */
html.np-ui-reference body.np1648-mobile.np158-route-sale .np1480-sale-context > button:not(.np-sale-close)::before{
  font-size:22px !important;
  color:var(--np1648-text) !important;
}

/* ---------- C. SELECTION / TOGGLE ---------- */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-payment-presets button,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-old-debt-box > summary{
  min-height:var(--np1648-h-btn) !important;
  border-radius:var(--np1648-r-md) !important;
  color:var(--np1648-text) !important;
  font-size:15px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
/* Trang thai chon: xanh nhat, KHONG phu mang dam. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-payment-presets button.np1647-on,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-old-debt-box.np1647-on > summary{
  color:var(--np1648-success) !important;
  font-weight:700 !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np1647-payrow:has(> button.np1647-on),
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-old-debt-box.np1647-on{
  border-color:var(--np1648-success-line) !important;
  background-color:var(--np1648-success-weak) !important;
}

/* ---------- D. UTILITY ---------- */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .qty-control button,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np159-chips button,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .add-product-row,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .bottle-auto-button,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-quick-products > summary,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-optional-note > summary,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-payment-breakdown > summary{
  min-height:var(--np1648-h-btn) !important;
  border-radius:var(--np1648-r-sm) !important;
  border:1px solid var(--np1648-border) !important;
  background:var(--np1648-surface) !important;
  background-color:var(--np1648-surface) !important;
  color:var(--np1648-text) !important;
  font-size:14px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
/* Nut − / + dung mau thuong hieu cho chu, nen van trung tinh. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .qty-control button{
  color:var(--np1648-primary) !important;
  font-weight:700 !important;
}
/* Chip 5/10/20: nho hon mot bac ve chu, nhung van du nguong cham. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np159-chips button{
  min-height:var(--np1648-h-chip) !important;
  height:var(--np1648-h-chip) !important;
  font-size:13px !important;
  color:var(--np1648-text-2) !important;
}
/* "Lay lai so tu dong" la thong tin ho tro, khong phai hanh dong chinh. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .bottle-auto-button{
  background-color:var(--np1648-surface-soft) !important;
  color:var(--np1648-text-2) !important;
  font-weight:500 !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .qty-control button:active,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np159-chips button:active,
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .add-product-row:active{
  background-color:var(--np1648-surface-soft) !important;
}

/* ---------- E. DANGER / CLOSE ---------- */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .item-row > button.danger,
html.np-ui-reference body.np1648-mobile.np158-route-sale .np1480-sale-context > .np-sale-close{
  border-width:1px !important;
  border-style:solid !important;
  border-color:var(--np1648-danger-line) !important;
  background:var(--np1648-danger-weak) !important;
  background-color:var(--np1648-danger-weak) !important;
  color:var(--np1648-danger) !important;
  box-shadow:none !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .item-row > button.danger{
  border-radius:var(--np1648-r-md) !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .item-row > button.danger::before{
  font-size:17px !important;
  font-weight:700 !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .item-row > button.danger:active,
html.np-ui-reference body.np1648-mobile.np158-route-sale .np1480-sale-context > .np-sale-close:active{
  filter:brightness(.96);
  transform:none !important;
}


/* =============================================================================
   C5 — BA NUT CON SOT O C4
   =============================================================================
   Ban C4 chi kiem cac nut da tu dat kieu, nen bao "tat ca >=44px" ma khong do
   het. Audit lai TOAN BO button that trong #saleForm, .mobile-sale-bar,
   .np-sale-close va .np1480-sale-context > button cho ket qua: dung ba nut con
   duoi nguong cham, va khong con nut nao khac.

     Dong don (ban hang nhanh)  36px   body.np-ui-reference .np-sale-close        (0,2,1)
                                       [namphuong-ui-pages-1.53.0-clean7.css]
     The san pham nhanh         36px   html… body.np162-mobile-sale-compact
                                       .np-product-shortcuts button              (0,3,3)
     Khach nay hay lay          32px   html… body.np162-mobile-sale-compact
                                       .np160-chip                               (0,3,2)

   Cac quy tac duoi day deu duoc dat do uu tien cao hon han cac con so tren.
   ============================================================================= */

/* ---------- 1. Dong don o BAN HANG NHANH: dong bo voi Dong don o tuyen -------
   O ban hang nhanh, nut nay nam trong .np1644-head (do patch 1.64.4 chuyen
   vao), khong phai trong dai tuyen. C4 chi polish ban o dai tuyen nen ban nay
   van la nut TRON 36px kieu cu -> hai man khong giong nhau.
   KHONG doi onclick, khong doi vi tri, khong dung toi logic header. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open .np1644-head > .np-sale-close{
  width:var(--np1648-h-btn) !important;
  min-width:var(--np1648-h-btn) !important;
  max-width:var(--np1648-h-btn) !important;
  height:var(--np1648-h-btn) !important;
  min-height:var(--np1648-h-btn) !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:var(--np1648-r-cta) !important;   /* 12px — bo hinh tron cu */
  border:1px solid var(--np1648-danger-line) !important;
  background:var(--np1648-danger-weak) !important;
  background-color:var(--np1648-danger-weak) !important;
  color:var(--np1648-danger) !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open .np1644-head > .np-sale-close::before{
  content:'✕';
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1 !important;
  color:var(--np1648-danger) !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open .np1644-head > .np-sale-close:active{
  filter:brightness(.96);
  transform:none !important;
}

/* ---------- 2. The "San pham nhanh" vao nhom Utility ------------------------
   Day la button that, thao tac hang ngay. Chi nang nguong cham va dong bo mau
   sac; GIU nguyen cuon ngang, chieu rong the, noi dung va onclick. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-product-shortcuts button{
  min-height:var(--np1648-h-btn) !important;
  height:auto !important;              /* de the tu cao theo noi dung, khong ep */
  border-radius:var(--np1648-r-sm) !important;
  border:1px solid var(--np1648-border) !important;
  background:var(--np1648-surface) !important;
  background-color:var(--np1648-surface) !important;
  color:var(--np1648-text) !important;
  font-size:14px !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np-product-shortcuts button:active{
  background-color:var(--np1648-surface-soft) !important;
}

/* ---------- 3. Chip "Khach nay hay lay" vao nhom Utility --------------------
   Cung la <button> that (onclick=np160Pick). Giu cuon ngang, giu max-width,
   giu trang thai da dung / disabled. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np160-chip{
  min-height:var(--np1648-h-btn) !important;
  height:auto !important;
  border-radius:var(--np1648-r-sm) !important;
  border:1px solid var(--np1648-border) !important;
  background:var(--np1648-surface) !important;
  background-color:var(--np1648-surface) !important;
  color:var(--np1648-text) !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np160-chip:active{
  background-color:var(--np1648-surface-soft) !important;
}
/* Trang thai da dung / khong bam duoc: van phai nhan ra ngay, khong chi mo di. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np160-chip[disabled],
html.np-ui-reference body.np1648-mobile.mobile-sales-open #saleForm .np160-chip.is-used{
  opacity:.6 !important;
  background-color:var(--np1648-surface-soft) !important;
  color:var(--np1648-text-2) !important;
  border-style:dashed !important;
}

/* =============================================================================
   C6 — MOBILE HEADER ACTIONS REDESIGN
   =============================================================================
   Anh test that C5 cho thay hai van de composition, khong phai token:
     1) Quick sale: rule cu `body.np-ui-reference .np-sale-wizard-head>div:first-child`
        co specificity cao hon va `display:block!important`, lam .np1644-head roi
        ve layout doc (title / progress / Buoc / Close) du patch 1.64.4 muon flex.
     2) Route sale: C4 khoi phuc font-size cua nut Back nen chu that "Quay" song
        chung voi pseudo-arrow cua 1.62; Close van icon-only nen kho nhan ra.

   C6 chi sua presentation. Node va onclick giu nguyen.
   Quick sale: [Ten buoc] [Buoc N/4] [x Dong] / [progress]
   Route sale: [<-] [ngu canh khach] [x Dong]
   ============================================================================= */

/* ---------- QUICK SALE: ep hang gon thanh GRID that, thang rule :first-child cu ---------- */
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np-sale-wizard-head > .np1644-head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto 74px !important;
  grid-template-rows:auto 4px !important;
  align-items:center !important;
  column-gap:8px !important;
  row-gap:7px !important;
  width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np1644-head > .np1644-title{
  grid-column:1 !important;
  grid-row:1 !important;
  min-width:0 !important;
  max-width:none !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
  font-size:14px !important;
  font-weight:800 !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np1644-head > .np1644-count{
  grid-column:2 !important;
  grid-row:1 !important;
  align-self:center !important;
  white-space:nowrap !important;
  font-size:11px !important;
  font-weight:700 !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np1644-head > .np1644-track{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  width:100% !important;
  min-width:0 !important;
  height:4px !important;
  margin:0 !important;
  align-self:stretch !important;
}

/* Quick Close: pill co chu, khong con icon-only. */
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np1644-head > .np-sale-close{
  grid-column:3 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:center !important;
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  border-radius:12px !important;
  border:1px solid var(--np1648-danger-line) !important;
  background:var(--np1648-surface) !important;
  background-color:var(--np1648-surface) !important;
  color:var(--np1648-danger) !important;
  box-shadow:none !important;
  font-size:0 !important;          /* an text node cua core, ve lai bang pseudo */
  line-height:1 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np1644-head > .np-sale-close::before{
  content:'✕' !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:var(--np1648-danger) !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np1644-head > .np-sale-close::after{
  content:'Đóng' !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:var(--np1648-danger) !important;
}
html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
.np1644-head > .np-sale-close:active{
  background:var(--np1648-danger-weak) !important;
  transform:none !important;
  filter:brightness(.97);
}

/* ---------- ROUTE SALE: [Back icon] [context] [x Dong] ---------- */
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context:has(> .np1648-route-close),
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context.np1648-has-close{
  grid-template-columns:44px minmax(0,1fr) 74px !important;
  column-gap:8px !important;
}

/* Back: chi con mot mui ten, bo chu "Quay" va pseudo ‹ cu. */
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context > button:not(.np-sale-close){
  grid-column:1 !important;
  grid-row:1 / 3 !important;
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center !important;
  font-size:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
  color:transparent !important;
}
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context > button:not(.np-sale-close)::before{
  content:'←' !important;
  display:block !important;
  font-size:22px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:var(--np1648-text) !important;
}

/* Route Close: pill 74x44, co nhan "Dong" de nhan dien nhanh. */
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context > .np-sale-close.np1648-route-close{
  grid-column:3 !important;
  grid-row:1 / 3 !important;
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 9px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  border-radius:12px !important;
  border:1px solid var(--np1648-danger-line) !important;
  background:var(--np1648-surface) !important;
  background-color:var(--np1648-surface) !important;
  color:var(--np1648-danger) !important;
  box-shadow:none !important;
  font-size:0 !important;
  line-height:1 !important;
  overflow:hidden !important;
  white-space:nowrap !important;
}
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context > .np-sale-close.np1648-route-close::before{
  content:'✕' !important;
  font-size:16px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:var(--np1648-danger) !important;
}
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context > .np-sale-close.np1648-route-close::after{
  content:'Đóng' !important;
  font-size:14px !important;
  line-height:1 !important;
  font-weight:700 !important;
  color:var(--np1648-danger) !important;
}
html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
.np1480-sale-context > .np-sale-close.np1648-route-close:active{
  background:var(--np1648-danger-weak) !important;
  transform:none !important;
  filter:brightness(.97);
}

@media(max-width:340px){
  html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
  .np-sale-wizard-head > .np1644-head{
    grid-template-columns:minmax(0,1fr) auto 68px !important;
    column-gap:6px !important;
  }
  html.np-ui-reference body.np1648-mobile.mobile-sales-open.np1644-compact-head:not(.np158-route-sale)
  .np1644-head > .np-sale-close,
  html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
  .np1480-sale-context > .np-sale-close.np1648-route-close{
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
    padding:0 6px !important;
    gap:4px !important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
  .np1480-sale-context:has(> .np1648-route-close),
  html.np-ui-reference body.np162-mobile-sale-compact.np1648-mobile.np158-route-sale
  .np1480-sale-context.np1648-has-close{
    grid-template-columns:44px minmax(0,1fr) 68px !important;
    column-gap:6px !important;
  }
}