/* ===========================================================================
   NamPhuongERP 1.58.0 — Route-first mobile sales
   ---------------------------------------------------------------------------
   Chi toi uu mobile. Desktop khong doi.
   Luong: Chon tuyen -> Chon khach -> Hang + vo -> Thanh toan -> Kiem tra/luu.
   =========================================================================== */

@media (max-width:900px){
  /* -----------------------------------------------------------------------
     A. TUYEN: danh sach gon, mot tay de bam
     ----------------------------------------------------------------------- */
  html.np-ui-reference body.np158-route-workspace #content>.page-head{display:none!important}
  html.np-ui-reference .np1480-intro{
    margin:0 0 10px!important;
    padding:11px 12px!important;
    border-radius:13px!important;
  }
  html.np-ui-reference .np1480-intro>span{font-size:20px!important}
  html.np-ui-reference .np1480-intro p{display:none!important}
  html.np-ui-reference .np1480-route-grid{gap:8px!important}
  html.np-ui-reference .np1480-route-card{
    min-height:64px!important;
    padding:10px 12px!important;
    border-radius:13px!important;
  }
  html.np-ui-reference .np1480-route-card .np1480-route-icon{width:34px!important;height:34px!important;font-size:17px!important}
  html.np-ui-reference .np1480-route-card b{font-size:14px!important}
  html.np-ui-reference .np1480-route-card em{font-size:10px!important}

  html.np-ui-reference .np1480-route-toolbar{
    display:grid!important;
    gap:8px!important;
    margin:0 0 8px!important;
    padding:10px!important;
    border-radius:13px!important;
  }
  html.np-ui-reference .np1480-route-title{align-items:center!important}
  html.np-ui-reference .np1480-route-title h3{margin:0!important;font-size:17px!important}
  html.np-ui-reference .np1480-route-title p{margin:2px 0 0!important;font-size:10px!important}
  html.np-ui-reference .np1480-back{width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;font-size:22px!important}
  html.np-ui-reference .np1480-route-actions{
    display:flex!important;
    gap:6px!important;
    overflow-x:auto!important;
    flex-wrap:nowrap!important;
    padding-bottom:1px;
  }
  html.np-ui-reference .np1480-route-actions::-webkit-scrollbar{display:none}
  html.np-ui-reference .np1480-route-actions button{
    flex:0 0 auto!important;
    min-height:36px!important;
    padding:6px 9px!important;
    font-size:10.5px!important;
    white-space:nowrap;
  }
  html.np-ui-reference .np1480-search-row{gap:6px!important;margin:0 0 7px!important}
  html.np-ui-reference .np1480-search-row input{min-height:40px!important;height:40px!important;font-size:13px!important}
  html.np-ui-reference .np1480-search-row button{min-height:40px!important;padding:6px 9px!important;font-size:11px!important}
  html.np-ui-reference .np1480-filter-tabs{gap:6px!important;margin-bottom:8px!important}
  html.np-ui-reference .np1480-filter-tabs button{min-height:36px!important;padding:7px 10px!important;font-size:11px!important}

  html.np-ui-reference .np1480-customer-list{gap:7px!important}
  html.np-ui-reference .np1480-customer-card{border-radius:13px!important}
  html.np-ui-reference .np1480-customer-main{
    min-height:0!important;
    grid-template-columns:31px minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:9px 10px 7px 13px!important;
  }
  html.np-ui-reference .np1480-order-number{width:31px!important;height:31px!important;border-radius:9px!important;font-size:11px!important}
  html.np-ui-reference .np1480-customer-copy{gap:1px!important}
  html.np-ui-reference .np1480-customer-copy small{font-size:8px!important}
  html.np-ui-reference .np1480-customer-copy b{font-size:13.5px!important}
  html.np-ui-reference .np1480-customer-copy em{font-size:9px!important}
  html.np-ui-reference .np1480-customer-state{
    grid-column:auto!important;
    display:grid!important;
    justify-items:end!important;
    text-align:right!important;
    gap:2px!important;
  }
  html.np-ui-reference .np1480-customer-state strong{font-size:9px!important;white-space:nowrap}
  html.np-ui-reference .np1480-customer-state small{font-size:7.5px!important;white-space:nowrap}
  html.np-ui-reference .np1480-customer-meta{
    grid-template-columns:auto auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:5px!important;
    padding:6px 10px 7px 13px!important;
  }
  html.np-ui-reference .np1480-customer-meta>span:not(.last){min-height:23px!important;padding:4px 7px!important;font-size:8px!important}
  html.np-ui-reference .np1480-customer-meta .last{
    grid-column:auto!important;
    padding:0!important;
    text-align:right!important;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:8px!important;
  }

  /* -----------------------------------------------------------------------
     B. DON BAN TUYEN: bo buoc chon lai khach, giu logic core
     ----------------------------------------------------------------------- */
  html.np-ui-reference body.np158-route-sale #content>.page-head{display:none!important}
  html.np-ui-reference body.np158-route-sale .np-sale-wizard-shell{max-width:none!important;margin:0!important}
  html.np-ui-reference body.np158-route-sale .np-sale-wizard-head{display:none!important}
  html.np-ui-reference body.np158-route-sale .np-sale-wizard-shell{padding-top:0!important}
  html.np-ui-reference body.np158-route-sale .np-sale-creator{display:none!important}

  html.np-ui-reference body.np158-route-sale .np1480-sale-context{
    position:relative;
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    gap:8px 10px!important;
    margin:0 0 8px!important;
    padding:9px 10px!important;
    border-radius:13px!important;
  }
  html.np-ui-reference body.np158-route-sale .np1480-sale-context>button{
    grid-row:1/3;
    align-self:center;
    min-height:38px!important;
    padding:7px 9px!important;
    font-size:11px!important;
  }
  html.np-ui-reference body.np158-route-sale .np1480-sale-context>div:not(.np158-context-metrics){gap:0!important}
  html.np-ui-reference body.np158-route-sale .np1480-sale-context small{font-size:8px!important}
  html.np-ui-reference body.np158-route-sale .np1480-sale-context b{font-size:13.5px!important}
  html.np-ui-reference body.np158-route-sale .np1480-sale-context span{font-size:9px!important}
  html.np-ui-reference body.np158-route-sale .np158-context-metrics{
    grid-column:2;
    display:flex;
    flex-wrap:wrap;
    gap:5px;
  }
  html.np-ui-reference body.np158-route-sale .np158-context-metrics>span{
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:3px 7px;
    border:1px solid var(--npui-border);
    border-radius:999px;
    background:var(--npui-surface-2);
    color:var(--npui-text-2);
    font-size:9px!important;
    font-weight:800;
  }
  html.np-ui-reference body.np158-route-sale .np158-context-metrics>span.warn{border-color:var(--npui-crit-line);background:var(--npui-crit-weak);color:var(--npui-crit)}
  html.np-ui-reference body.np158-route-sale .np158-context-metrics>span.bottle{border-color:var(--npui-warn-line);background:var(--npui-warn-weak);color:var(--npui-warn)}
  html.np-ui-reference body.np158-route-sale .np158-context-metrics>span.ok{border-color:var(--npui-good-line);background:var(--npui-good-weak);color:var(--npui-good)}

  html.np-ui-reference body.np158-route-sale .np-step-card{
    margin:0 0 7px!important;
    padding:9px!important;
    border-radius:13px!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np158-route-sale .np-step-copy{display:block!important;margin:0 0 6px!important}
  html.np-ui-reference body.np158-route-sale .np-step-copy b{font-size:13px!important;color:var(--npui-text)!important}
  html.np-ui-reference body.np158-route-sale .np-step-copy span{display:none!important}
  html.np-ui-reference body.np158-route-sale .np-step-icon{display:none!important}

  /* Hang hoa: ten ro, nut +/- lon, gia va thanh tien van con khi can sua. */
  html.np-ui-reference body.np158-route-sale .np-sale-items{display:grid!important;gap:6px!important}
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row{
    grid-template-columns:126px minmax(78px,1fr) 86px 34px!important;
    gap:5px!important;
    padding:7px!important;
    border-radius:11px!important;
    box-shadow:none!important;
  }
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row>label:first-child{grid-column:1/-1!important;margin-top:0!important}
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row>label:nth-child(2){grid-column:1!important}
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row>label:nth-child(3){grid-column:2!important}
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row>label:nth-child(4){grid-column:3!important}
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row>.danger{grid-column:4!important;min-height:42px!important;height:42px!important;padding:0!important}
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row label{margin:0!important;gap:2px!important;font-size:8.5px!important}
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row input,
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row select{height:42px!important;min-height:42px!important;font-size:14px!important}
  html.np-ui-reference body.np158-route-sale .qty-control{grid-template-columns:42px minmax(40px,1fr) 42px!important;border-radius:10px!important}
  html.np-ui-reference body.np158-route-sale .qty-control button{height:42px!important;min-height:42px!important;font-size:20px!important}
  html.np-ui-reference body.np158-route-sale .qty-control input{height:42px!important;min-height:42px!important;font-size:16px!important}
  html.np-ui-reference body.np158-route-sale .add-product-row{min-height:36px!important;height:36px!important;margin-top:6px!important}

  /* Thu vo nam ngay sau hang hoa — day la thao tac chinh, khong phai tuy chon. */
  html.np-ui-reference body.np158-route-sale .np-delivery-payment-card{
    margin:7px 0 0!important;
    padding:9px!important;
    border:1px solid var(--npui-border)!important;
    border-radius:11px!important;
    background:var(--npui-surface-2)!important;
  }
  html.np-ui-reference body.np158-route-sale .np-delivery-payment-card .np-step-copy{margin-bottom:3px!important}
  html.np-ui-reference body.np158-route-sale .np-delivery-payment-card .mobile-two-fields{grid-template-columns:1fr 1fr!important;gap:6px!important}
  html.np-ui-reference body.np158-route-sale .np-delivery-payment-card label{font-size:9px!important}
  html.np-ui-reference body.np158-route-sale .np-delivery-payment-card input{height:40px!important;min-height:40px!important}

  /* Cac phan hiem dung gom vao mot cua duy nhat. */
  html.np-ui-reference body.np158-route-sale .np158-more-options{
    margin:7px 0 0;
    overflow:hidden;
    border:1px solid var(--npui-border);
    border-radius:11px;
    background:var(--npui-surface-2);
  }
  html.np-ui-reference body.np158-route-sale .np158-more-options>summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    min-height:40px;
    padding:7px 9px;
    list-style:none;
    color:var(--npui-text-2);
    font-size:11.5px;
    font-weight:900;
    cursor:pointer;
  }
  html.np-ui-reference body.np158-route-sale .np158-more-options>summary::-webkit-details-marker{display:none}
  html.np-ui-reference body.np158-route-sale .np158-more-options>summary small{color:var(--npui-text-3);font-size:9px;font-weight:700}
  html.np-ui-reference body.np158-route-sale .np158-more-options[open]>summary{border-bottom:1px solid var(--npui-border);background:var(--npui-surface-3)}
  html.np-ui-reference body.np158-route-sale .np158-more-body{display:grid;gap:7px;padding:7px}
  html.np-ui-reference body.np158-route-sale .np158-more-body>.np1450-trip-chooser,
  html.np-ui-reference body.np158-route-sale .np158-more-body>.np1461-defect-box,
  html.np-ui-reference body.np158-route-sale .np158-more-body>#np1550SalePreview,
  html.np-ui-reference body.np158-route-sale .np158-more-body>.np-optional-note{margin:0!important}

  /* Thanh toan: tong tien va thong tin no/vo luon nam dau man. */
  html.np-ui-reference body.np158-route-sale .np-payment-card{padding:9px!important}
  html.np-ui-reference body.np158-route-sale .np158-payment-hero{
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:8px 12px;
    margin:0 0 7px;
    padding:9px 10px;
    border:1px solid var(--npui-border);
    border-radius:11px;
    background:var(--npui-surface-2);
  }
  html.np-ui-reference body.np158-route-sale .np158-payment-hero>div{display:grid;gap:1px;min-width:0}
  html.np-ui-reference body.np158-route-sale .np158-payment-hero>div:first-child{min-width:108px}
  html.np-ui-reference body.np158-route-sale .np158-payment-hero small{font-size:8.5px;color:var(--npui-text-3);font-weight:800}
  html.np-ui-reference body.np158-route-sale .np158-payment-hero strong{font-size:19px;color:var(--npui-crit);letter-spacing:-.4px}
  html.np-ui-reference body.np158-route-sale .np158-payment-hero span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9.5px;color:var(--npui-text-2)}
  html.np-ui-reference body.np158-route-sale .np-payment-presets{gap:6px!important}
  html.np-ui-reference body.np158-route-sale .np-payment-presets button{min-height:40px!important;height:40px!important;font-size:11px!important}
  html.np-ui-reference body.np158-route-sale .np-payment-card .mobile-two-fields{gap:6px!important}
  html.np-ui-reference body.np158-route-sale .np-payment-card input{height:42px!important;min-height:42px!important;font-size:15px!important}

  /* Review van giu de chan sai, nhung lam gon. */
  html.np-ui-reference body.np158-route-sale .np-sale-review-page{gap:6px!important}
  html.np-ui-reference body.np158-route-sale .np-review-reminder{font-size:10px!important;padding:7px!important}

  /* Thanh hanh dong duoi: o man Hang nut back thua, vi tren dau da co Quay lai tuyen. */
  html.np-ui-reference body.np158-route-sale #npMobileSaleBackBtn.np158-hide-back{display:none!important}
  html.np-ui-reference body.np158-route-sale .mobile-sale-bar{
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:7px!important;
    padding:7px 8px max(7px,env(safe-area-inset-bottom))!important;
  }
  html.np-ui-reference body.np158-route-sale.np158-has-back .mobile-sale-bar{
    grid-template-columns:42px 78px minmax(0,1fr)!important;
  }
  html.np-ui-reference body.np158-route-sale .mobile-sale-bar #mobileSaveSaleBtn{font-size:12px!important;font-weight:900!important}
}

@media (max-width:380px){
  html.np-ui-reference body.np158-route-sale .np-mobile-sale-wizard .item-row{
    grid-template-columns:118px minmax(70px,1fr) 74px 32px!important;
    gap:4px!important;
    padding:6px!important;
  }
  html.np-ui-reference body.np158-route-sale .qty-control{grid-template-columns:38px minmax(36px,1fr) 38px!important}
  html.np-ui-reference .np1480-customer-main{grid-template-columns:29px minmax(0,1fr)!important}
  html.np-ui-reference .np1480-customer-state{grid-column:2!important;display:flex!important;justify-items:start!important;gap:5px!important;text-align:left!important}
  html.np-ui-reference .np1480-customer-meta{grid-template-columns:1fr 1fr!important}
  html.np-ui-reference .np1480-customer-meta .last{grid-column:1/-1!important;text-align:left!important}
}