/* ===========================================================================
NamPhuongERP 1.64.0 — Card san pham + chip so luong + token mau + tim khach
   ---------------------------------------------------------------------------
   File nay THAY THE namphuong-ui-compact-fix-1.62.1.css (da go khoi index.html
   va sw.js). Nap sau namphuong-ui-mobile-compact-1.62.0.css va ghi de no.
   Khong sua file 1.62.0, khong sua core, khong doi logic nao.

   =========================================================================
   PHAM VI: hai muc khac nhau, co y
   =========================================================================
     PHAN T (token mau)  -> #saleForm  : ap cho CA "Ban hang nhanh" va
                                          "Ban theo tuyen", khong can class np162
     PHAN A/B (bo cuc)   -> body.np162-mobile-sale-compact : chi luong tuyen,
                                          vi day la noi 1.62.0 doi bo cuc

   =========================================================================
   PHAN A — LOI NHAN GOC HIEN LAI (ban 1.62.1 gay ra)
   =========================================================================
   Cau truc that cua mot dong hang (core dong 143):

       <label>Sản phẩm<select class="item-product">...</select></label>
       <label>SL<div class="qty-control">...</div></label>
       <label>Đơn giá<input class="item-price"></label>
       <label>Thành tiền<input class="item-total"></label>

   Chu "San pham", "SL", "Don gia", "Thanh tien" la TEXT NODE nam truc tiep
   trong <label>. 1.62.0 giau chung bang `font-size:0` tren label.

   Ban 1.62.1 cua toi dat `font-size:inherit!important` len chinh label do de
   go bo `font-size:0` — va lam bon chu do HIEN LAI. Card thanh ra co ca nhan
   goc lan nhan gia ::before, roi gap doi.

   Sua dung: GIU `font-size:0` tren label (chi text node bi anh huong), roi dat
   font-size TUONG MINH cho tung phan tu con. Con la khong dung `inherit`.

   =========================================================================
   PHAN B — BO CUC CARD
   =========================================================================
       ┌──────────────────────────────────────────┐
       │ [ảnh] Bình 21L (Vỏ)        ┌──┬────┬──┐  │
       │       14.000 đ             │ −│ 10 │ +│  │
       │       40.000 đ             └──┴────┴──┘  │
       │                            [5] [10] [20] │
       └──────────────────────────────────────────┘

   Mot khung duy nhat cho ca dong hang. Ben trong khong con khung con nao —
   o don gia va thanh tien chi la chu, khong ve vien.

   Chip 5/10/20: logic van con nguyen trong patch_1_59_0 (ghi de gia tri roi
   goi calcSale). 1.62.0 chi an bang CSS o dong 217. Bo cho hien lai, xep ngay
   duoi bo nut +/- trong cung cot phai.
   =========================================================================== */


/* ===========================================================================
   PHAN T — TOKEN MAU CHO TOAN BO MAN BAN HANG (ca hai tab)
   Khong hard-code mau nao. Sang va toi dung CHUNG cau truc, chi khac gia tri
   bien --npui-*.
   =========================================================================== */

@media (max-width:900px){

  /* T1. O nhap, o chon, vung van ban */
  html.np-ui-reference #saleForm input:not([type="checkbox"]):not([type="radio"]),
  html.np-ui-reference #saleForm select,
  html.np-ui-reference #saleForm textarea{
    background:var(--npui-surface)!important;
    border:1px solid var(--npui-border)!important;
    color:var(--npui-text)!important;
  }
  html.np-ui-reference #saleForm input:focus,
  html.np-ui-reference #saleForm select:focus,
  html.np-ui-reference #saleForm textarea:focus{
    border-color:var(--npui-brand)!important;
    outline:none!important;
    box-shadow:0 0 0 3px var(--npui-ring)!important;
  }

  /* T2. Placeholder — che do toi hay bi mo den muc khong doc duoc.
         --npui-text-3 la bien danh rieng cho chu phu, doc duoc o ca hai theme. */
  html.np-ui-reference #saleForm input::placeholder,
  html.np-ui-reference #saleForm textarea::placeholder{
    color:var(--npui-text-3)!important;
    opacity:1!important;   /* khong dung opacity de lam mo tren nen toi */
  }

  /* T3. Nut trong form: khong de trang nhot hay mat chu */
  html.np-ui-reference #saleForm button:not(.primary):not(.danger){
    background:var(--npui-surface-2)!important;
    border:1px solid var(--npui-border)!important;
    color:var(--npui-text-2)!important;
  }
  html.np-ui-reference #saleForm button.primary{
    background:var(--npui-brand)!important;
    border:1px solid var(--npui-brand)!important;
    color:var(--npui-text-inverse)!important;
  }
  html.np-ui-reference #saleForm button.danger{
    background:transparent!important;
    color:var(--npui-crit)!important;
  }

  /* T4. Cac the trong form — khong the hoa vao nen trang */
  html.np-ui-reference #saleForm .np-step-card,
  html.np-ui-reference #saleForm .np-payment-card,
  html.np-ui-reference #saleForm .np-delivery-payment-card{
    background:var(--npui-surface)!important;
    border:1px solid var(--npui-border)!important;
    box-shadow:none!important;
  }

  /* T5. Hop "Tuy chon them" — ca hop cua 1.58 lan luoi cua 1.61 */
  html.np-ui-reference #np158MoreOptions,
  html.np-ui-reference .np161-grid{
    background:var(--npui-surface)!important;
    border:1px solid var(--npui-border)!important;
    color:var(--npui-text)!important;
  }
  html.np-ui-reference #np158MoreOptions>summary,
  html.np-ui-reference .np161-grid>summary{
    color:var(--npui-text-2)!important;
  }
  html.np-ui-reference .np161-grid-body button,
  html.np-ui-reference #np161Inner button{
    background:var(--npui-surface-2)!important;
    border:1px solid var(--npui-border)!important;
    color:var(--npui-text-2)!important;
  }
  html.np-ui-reference .np161-grid-body button span,
  html.np-ui-reference #np161Inner button span{
    color:var(--npui-text-2)!important;
  }


  /* =========================================================================
     PHAN A — TRA LAI font-size:0 CHO NHAN, DAT CO CHU TUONG MINH CHO CON
     ========================================================================= */

  /* Nhan goc ("San pham" / "SL" / "Don gia" / "Thanh tien") duoc
     patch_1_63_1_label_wrap.js boc vao <span class="np163-label-text">, roi
     an bang display:none. Phai dung display:none chu khong phai font-size:0:
     phan tu font-size:0 VAN la mot grid item va van chiem mot o cua luoi,
     day anh va o chon san pham lech hang. */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row .np163-label-text{
    display:none!important;
  }

  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row>label{
    /* Giu font-size:0 lam lop du phong cho truong hop JS chua kip chay. */
    font-size:0!important;
    display:block!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }

  /* Go nhan gia ::before ("Gia" / "Thanh tien" co 8px) ma 1.62.0 ve them */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(3)::before,
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(4)::before{
    content:none!important;
    display:none!important;
  }


  /* =========================================================================
     PHAN B — BO CUC CARD SAN PHAM
     ========================================================================= */

  /* B1. MOT khung duy nhat cho ca dong hang */
  /* CAU TRUC DOM THAT (core dong 5880):
       label.insertBefore(img, select)
     => anh nam BEN TRONG <label> dau tien, khong phai con truc tiep cua
        .item-row. Ban .1 dat `grid-area:img` cho anh — vo tac dung, vi
        grid-area chi ap cho GRID ITEM (con truc tiep). Ket qua: cot anh
        rong, anh roi xuong tren o chon san pham, card cao them mot dong.

     Sua .2: KHONG di chuyen DOM (core chay lai enhanceSaleRows() se chen
     lai anh vao label). Thay vao do bien chinh <label> dau tien thanh luoi
     hai cot [anh | ten]. Anh o dung cot trai, ten ben phai, khong cao them. */
  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:
      "name  qty"
      "price qty"
      "total qty"!important;
    align-items:center!important;
    column-gap:9px!important;
    row-gap:2px!important;
    padding:10px!important;
    margin:0 0 8px!important;
    background:var(--npui-surface)!important;
    border:1px solid var(--npui-border)!important;
    border-radius:12px!important;
    box-shadow:none!important;
  }

  /* B2/B3. Nhan dau tien chua CA anh lan o chon san pham -> lam luoi 2 cot.
     .np1372-product-thumb.small la mot the <img>, khong phai the boc. */
  /* FLEX chu khong phai GRID: neu vi ly do nao do JS chua boc kip text node,
     anonymous item trong flex chi rong 0px va KHONG chiem o nao, thu tu van
     dung [anh | ten]. Dung margin thay `gap` de anonymous item khong an them
     mot khoang trong. */
  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row>label:first-of-type{
    grid-area:name!important;
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:0!important;
    min-width:0!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1372-product-thumb.small{
    display:block!important;
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    border-radius:9px!important;
    object-fit:cover!important;
    background:var(--npui-surface-2)!important;
    border:1px solid var(--npui-border)!important;
    margin:0 9px 0 0!important;
    padding:0!important;
    flex:0 0 auto!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-product{flex:1 1 auto!important}
  /* Don gia va thanh tien can le theo ten, khong theo anh. */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(3),
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(4){
    padding-left:45px!important;   /* 36px anh + 9px khe */
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-product{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:0 18px 0 0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    color:var(--npui-text)!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.3!important;
    box-shadow:none!important;
  }

  /* B4. Don gia — chu phu, van sua duoc, khong ve khung */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(3){
    grid-area:price!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-price{
    width:auto!important;
    max-width:112px!important;
    height:24px!important;
    min-height:24px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--npui-text-2)!important;
    font-size:12.5px!important;
    font-weight:600!important;
    box-shadow:none!important;
  }

  /* B5. Thanh tien — chi de xem */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(4){
    grid-area:total!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-total{
    width:auto!important;
    max-width:132px!important;
    height:22px!important;
    min-height:22px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    color:var(--npui-good)!important;
    font-size:13.5px!important;
    font-weight:700!important;
    box-shadow:none!important;
  }

  /* B6. Cot phai: bo nut so luong + chip nhanh, xep doc */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(2){
    grid-area:qty!important;
    align-self:center!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control{
    width:auto!important;
    display:grid!important;
    grid-template-columns:38px 46px 38px!important;
    border:1px solid var(--npui-border-strong)!important;
    border-radius:9px!important;
    overflow:hidden!important;
    background:var(--npui-surface-2)!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control button,
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control input{
    height:40px!important;
    min-height:40px!important;
    border:0!important;
    background:transparent!important;
    color:var(--npui-text)!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control button{
    font-size:20px!important;font-weight:600!important;color:var(--npui-text-2)!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control input{
    font-size:17px!important;font-weight:700!important;text-align:center!important;
  }

  /* B7. Chip 5/10/20 — 1.62.0 an bang display:none (dong 217). Cho hien lai.
         Logic khong doi: patch_1_59_0 ghi de gia tri roi goi calcSale(). */
  html.np-ui-reference body.np162-mobile-sale-compact .np159-chips{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:4px!important;
    margin:0!important;
    width:122px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np159-chips button{
    height:26px!important;
    min-height:26px!important;
    padding:0!important;
    font-size:12px!important;
    font-weight:700!important;
    border:1px solid var(--npui-border)!important;
    border-radius:7px!important;
    background:var(--npui-surface-2)!important;
    color:var(--npui-text-2)!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np159-chips button:active{
    background:var(--npui-brand-weak)!important;
    color:var(--npui-brand)!important;
  }

  /* B8. Nut xoa — goc tren phai, an khi don chi co mot dong (85% don) */
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>.danger{
    position:absolute!important;
    top:3px!important;right:4px!important;
    width:22px!important;min-width:22px!important;
    height:22px!important;min-height:22px!important;
    padding:0!important;border:0!important;
    background:transparent!important;
    color:var(--npui-crit)!important;
    font-size:13px!important;
    opacity:.45!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-row:only-of-type>.danger{
    display:none!important;
  }

  /* B9. Bot khung long nhau: vung chua danh sach hang khong ve khung rieng,
         vi moi .item-row da co khung cua no. */
  html.np-ui-reference body.np162-mobile-sale-compact #saleItems{
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

@media (max-width:370px){
  html.np-ui-reference body.np162-mobile-sale-compact .np-mobile-sale-wizard .item-row{
    column-gap:7px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np1372-product-thumb.small{
    width:30px!important;height:30px!important;min-width:30px!important;
    margin-right:7px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(3),
  html.np-ui-reference body.np162-mobile-sale-compact .item-row>label:nth-child(4){
    padding-left:37px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .qty-control{
    grid-template-columns:34px 40px 34px!important;
  }
  html.np-ui-reference body.np162-mobile-sale-compact .np159-chips{width:108px!important}
  html.np-ui-reference body.np162-mobile-sale-compact .item-product{font-size:14px!important}
}

/* ---------------------------------------------------------------------------
   PHAN C — hai diem sua sau khi xem preview tren dien thoai
   ---------------------------------------------------------------------------
   C1. Thanh dieu huong mobile o che do sang dung text-3 (#63748a), qua nhat
       tren nen sang. Dung text-2 cho chu va icon, giu nguyen bo cuc phang.
   C2. O man hinh <=480px, pages CSS dat overflow-x:auto cho .np139-tabs sau
       lop fix 1.40.1 cua core. Menu DETAILS van mo nhung bi hop cuon cat mat.
       Ghi de bang selector cu the hon va cho phep flex wrap de menu hien ra.
   --------------------------------------------------------------------------- */
@media(max-width:900px){
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button{
    color:var(--npui-text-2)!important;
    opacity:1!important;
  }
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button>span{
    opacity:1!important;
  }
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button.active{
    color:var(--npui-brand)!important;
  }
}

html.np-ui-reference body.np-ui-reference #content .np139-more-tabs{
  overflow:visible!important;
  z-index:80!important;
}
html.np-ui-reference body.np-ui-reference #content .np139-more-tabs[open]{z-index:120!important}
html.np-ui-reference body.np-ui-reference #content details.np139-more-tabs>summary{
  cursor:pointer!important;
  pointer-events:auto!important;
  user-select:none;
}
html.np-ui-reference body.np-ui-reference #content details.np139-more-tabs>summary::-webkit-details-marker{
  display:none!important;
}
html.np-ui-reference body.np-ui-reference #content details.np139-more-tabs>div{z-index:9999!important}

@media(max-width:480px){
  html.np-ui-reference body.np-ui-reference #content .np139-tabs{
    overflow:visible!important;
    overflow-x:visible!important;
    overflow-y:visible!important;
    flex-wrap:wrap!important;
  }
}

/* ---------------------------------------------------------------------------
   PHAN D — goi y khach hang ngay tu ky tu dau tien
   ---------------------------------------------------------------------------
   O select van duoc loc de giu hanh vi cu; danh sach nay la lop goi y de
   nguoi dung mobile thay ten ngay khi moi go 1 chu. Dung token giao dien de
   tu dong dong bo ca sang va toi, khong lam thay doi du lieu trong form.
   --------------------------------------------------------------------------- */
html.np-ui-reference body.np-ui-reference #content .customer-search-label{
  position:relative!important;
  overflow:visible!important;
  z-index:25!important;
}
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestions{
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 4px)!important;
  z-index:120!important;
  display:grid!important;
  gap:4px!important;
  max-height:256px!important;
  overflow:auto!important;
  padding:6px!important;
  border:1px solid var(--npui-border-strong)!important;
  border-radius:12px!important;
  background:var(--npui-surface)!important;
  box-shadow:var(--npui-shadow-md)!important;
}
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestions[hidden]{
  display:none!important;
}
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestion{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:2px!important;
  width:100%!important;
  min-height:44px!important;
  margin:0!important;
  padding:8px 10px!important;
  border:1px solid var(--npui-border)!important;
  border-radius:9px!important;
  background:var(--npui-surface-2)!important;
  color:var(--npui-text-2)!important;
  text-align:left!important;
  line-height:1.25!important;
  cursor:pointer!important;
}
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestion:hover,
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestion:focus-visible,
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestion.is-active{
  border-color:var(--npui-brand)!important;
  background:var(--npui-brand-weak)!important;
  color:var(--npui-text)!important;
  outline:none!important;
}
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestion-name{
  display:block!important;
  overflow:hidden!important;
  color:inherit!important;
  font-size:14px!important;
  font-weight:800!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestion-meta{
  display:block!important;
  overflow:hidden!important;
  color:var(--npui-text-3)!important;
  font-size:11px!important;
  font-weight:700!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
@media(max-width:900px){
  html.np-ui-reference body.np-ui-reference #content .np1543-customer-suggestions{
    max-height:220px!important;
  }
}