/* =============================================================================
   NamPhuongERP 1.64.4 — Header bước siêu gọn + rõ icon thanh dưới ở nền sáng
   =============================================================================
   NẠP CUỐI CÙNG trong danh sách CSS.

   Chỉ đụng trình bày. Không đổi nghiệp vụ nào: khách, sản phẩm, số lượng,
   tiền mặt mặc định, công nợ, chuyển khoản, vỏ bình, xe/tuyến, lưu đơn.

   -----------------------------------------------------------------------------
   A. HEADER BƯỚC — thay card lớn bằng một hàng gọn
   -----------------------------------------------------------------------------
   Trước: .np-sale-wizard-head là một card cao gồm nhãn "BƯỚC 1/4", tiêu đề h2,
   dòng gợi ý, và 4 vòng tròn .np-wizard-node — chiếm rất nhiều chiều cao ngay
   đầu trang, phần vốn quý nhất trên điện thoại.

   Sau: một hàng duy nhất "Khách hàng ......... Bước 1/4 [✕]" và ngay dưới là
   thanh tiến độ mảnh.

   Cách làm: KHÔNG xóa node nào của lõi. patch_1_64_4 chuyển #npSaleStepTitle,
   #npSaleStepNumber và nút .np-sale-close sang hàng mới; phần còn lại
   (#npSaleStepHint, .np-wizard-progress) vẫn nằm trong DOM nhưng ẩn đi. Nhờ vậy
   np121UpdateStepper của lõi vẫn ghi vào đúng phần tử như cũ, không cần bọc hàm.

   Thanh tiến độ chạy hoàn toàn bằng CSS, đọc body[data-sale-step] mà lõi đã tự
   đặt sẵn ở namphuong-app-1.54.2.js dòng 704. Không thêm JS theo dõi bước.
   ============================================================================= */

/* --- ẩn phần cũ, giữ node để lõi vẫn ghi được --- */
/* Khoi cu duoc patch gan class .np1644-legacy TRUOC khi chen hang moi.
   TUYET DOI khong dung :first-child o day: build() chen .np1644-head vao dau
   head, nen sau do chinh hang moi moi la div:first-child va se bi an mat.
   Selector phai bam vao danh tinh cua khoi, khong bam vao thu tu. */
body.np1644-compact-head .np-sale-wizard-head > .np1644-legacy,
body.np1644-compact-head .np-sale-wizard-head #npSaleStepHint,
body.np1644-compact-head .np-sale-wizard-head .np-wizard-progress{
  display:none !important;
}
/* Hang gon va thanh tien do luon hien, khong lop nao duoc an nham. */
body.np1644-compact-head .np-sale-wizard-head > .np1644-head{display:flex !important}
body.np1644-compact-head .np-sale-wizard-head > .np1644-track{display:block !important}

/* Vỏ card cũ xẹp xuống thành một dải mỏng */
body.np1644-compact-head .np-sale-wizard-head{
  display:block !important;
  margin:0 -10px 8px !important;
  padding:8px 12px 0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  border-bottom:1px solid var(--npui-border, #d8dee5) !important;
  background:var(--npui-surface, #fff) !important;
}


/* --- hàng gọn --- */
.np1644-head{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:0;
}
.np1644-head .np1644-title{
  flex:1 1 auto;
  min-width:0;
  margin:0;
  font-size:15px;
  font-weight:800;
  line-height:1.25;
  color:var(--npui-text, #1d2733);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.np1644-head .np1644-num{font-weight:800}
.np1644-head .np1644-count{
  flex:0 0 auto;
  font-size:12px;
  font-weight:700;
  line-height:1;
  color:var(--npui-text-2, #41505f);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Nút Đóng: giữ chức năng, thu thành nút vuông nhỏ cùng hàng */
.np1644-head .np-sale-close{
  flex:0 0 auto;
  width:30px !important;
  height:30px !important;
  min-height:30px !important;
  min-width:30px !important;
  padding:0 !important;
  margin:0 !important;
  display:grid !important;
  place-items:center !important;
  border-radius:8px !important;
  font-size:0 !important;          /* giấu chữ "✕ Đóng", chỉ còn dấu ✕ vẽ dưới */
  line-height:0 !important;
  border:1px solid var(--npui-border, #d8dee5) !important;
  background:transparent !important;
  color:var(--npui-text-2, #41505f) !important;
  box-shadow:none !important;
}
.np1644-head .np-sale-close::before{
  content:'✕';
  font-size:14px;
  line-height:1;
  font-weight:700;
}
.np1644-head .np-sale-close:active{
  background:var(--npui-brand-weak, #eaf4f9) !important;
}

/* --- thanh tiến độ mảnh --- */
.np1644-track{
  position:relative;
  height:3px;
  margin:7px 0 0;
  border-radius:999px;
  background:var(--npui-border, #d8dee5);
  overflow:hidden;
}
.np1644-track > i{
  display:block;
  height:100%;
  width:0;
  border-radius:inherit;
  background:var(--npui-brand, #0f6f96);
  transition:width .22s ease;
}
/* Lõi đã đặt sẵn body[data-sale-step] — chỉ cần đọc, không cần JS thêm. */
body[data-sale-step="1"] .np1644-track > i{width:25%}
body[data-sale-step="2"] .np1644-track > i{width:50%}
body[data-sale-step="3"] .np1644-track > i{width:75%}
body[data-sale-step="4"] .np1644-track > i{width:100%}

@media(prefers-reduced-motion:reduce){
  .np1644-track > i{transition:none}
}

/* Màn hình rất hẹp: thu thêm một chút */
@media(max-width:360px){
  .np1644-head .np1644-title{font-size:14px}
  .np1644-head .np1644-num{font-weight:800}
.np1644-head .np1644-count{font-size:11px}
  body.np1644-compact-head .np-sale-wizard-head{padding:7px 10px 0 !important}
}

/* --- an hang .page-head cua trang Ban hang tren dien thoai ---
   Hang do chua "✕ Đóng đơn | Xem giao dịch". Ca hai nut Dong deu goi cung mot
   ham np13716CloseCurrentSale (namphuong-app-1.54.2.js:9392 va 9403), nen giu
   lai ca hai la thua mot nut va thua mot hang chieu cao. "Xem giao dich" da co
   o thanh dieu huong duoi.

   Dieu kien kep .np1644-compact-head + .np1644-close-ready: chi an khi nut ✕
   that su dang nam trong hang gon. Khong bao gio de nguoi dung mat duong dong don.
   Chi an bang CSS, khong xoa DOM — loi van query .page-head .actions binh thuong. */
/* Khong boc @media o day. Class np1644-compact-head CHI duoc patch gan khi
   matchMedia('(max-width:900px)') dung, va bi go ngay khi roi mobile. Dieu kien
   man hinh da nam tron trong class roi; them @media chi lam quy tac kho kiem
   hon ma khong chat hon. Cac quy tac header gon phia tren cung theo le nay. */
body.np1644-compact-head.np1644-close-ready #content > .page-head{
  display:none !important;
}

/* Máy tính bảng / desktop: giữ nguyên card cũ và .page-head, không áp bản gọn.
   patch chỉ gắn class np1644-compact-head khi màn hình <=900px. */


/* =============================================================================
   B. THANH ĐIỀU HƯỚNG DƯỚI — icon rõ ở chế độ sáng
   =============================================================================
   Icon .mnav-icon/.mnav-plus vẽ bằng mask-image với background-color:currentColor
   (css/namphuong-ui-pages-1.53.0-clean7.css). Nên màu icon LUÔN đi theo màu chữ
   của nút. Vấn đề là màu chữ đó ở nền sáng đang là text-3 (#63748a) hoặc #6B7573
   — quá nhạt so với nhãn bên dưới, nên icon nhìn mờ.

   Sửa: ở chế độ sáng cho nút dùng --npui-text (màu chữ chính), và ép icon
   currentColor với opacity 1 để không lớp nào làm nhạt thêm. Nút đang chọn và
   nút Bán hàng ở giữa giữ nguyên màu riêng.

   Dark Mode KHÔNG đụng tới: mọi quy tắc dưới đây đều nằm sau
   html.np-ui-reference:not([data-theme="dark"]).
   ============================================================================= */
@media(max-width:900px){
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button{
    color:var(--npui-text, #1d2733) !important;
    opacity:1 !important;
  }
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button > span,
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button .mnav-icon,
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button .mnav-plus{
    opacity:1 !important;
  }
  /* GO O 1.64.5: quy tac background-color:currentColor cho .mnav-icon/.mnav-plus
     tung nam o day. No thuoc cach ve icon bang CSS mask — cach do KHONG render
     tren iPhone. 1.64.5 chuyen han sang SVG that chen vao DOM, nen span icon
     phai trong suot; giu lai dong cu se ve mot khoi mau dac de len SVG.
     Mau icon gio do stroke="currentColor" trong SVG lo, van bam theo mau chu
     cua nut do quy tac color ngay ben tren. */
  /* Nút đang chọn: màu thương hiệu, cả chữ lẫn icon. */
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav button.active{
    color:var(--npui-brand, #0f6f96) !important;
  }
  /* Nút Bán hàng ở giữa có nền đậm riêng — giữ chữ và icon trắng. */
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav .mnav-sale:not(.np1380-flat),
  html.np-ui-reference:not([data-theme="dark"]) body.np-ui-reference .mobile-bottom-nav .mnav-sale:not(.np1380-flat) *{
    opacity:1 !important;
  }
}