/* CodeV9 Web - Responsive UI
   Only presentation/responsive behavior. No business logic or API contract changes.
*/
*{box-sizing:border-box}
:root{
  --bg:#f3f5f8;
  --surface:#fff;
  --surface-2:#f7f9fb;
  --line:#d7dde5;
  --line-strong:#c2cad4;
  --text:#25313d;
  --muted:#667382;
  --primary:#1769aa;
  --primary-hover:#125a92;
  --danger:#c0392b;
  --success:#18794e;
  --shadow:0 2px 10px rgba(25,42,62,.08);
  --radius:8px;
}
html{height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Segoe UI,Arial,sans-serif;font-size:13px;line-height:1.35}
button,input,select{font:inherit}
button{touch-action:manipulation}
.app{min-width:0;width:100%}

/* Header */
.titlebar{min-height:46px;background:linear-gradient(135deg,#173f67,#216b9f);color:#fff;display:flex;align-items:center;gap:12px;padding:8px 14px;position:sticky;top:0;z-index:50;box-shadow:0 2px 8px rgba(0,0,0,.14)}
.brand{min-width:0;flex:1;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand span{font-size:11px;font-weight:400;opacity:.82}
.window-actions{display:none}

main{width:100%;max-width:1600px;margin:0 auto;padding:8px}

/* Customer form */
.customer-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px 14px;background:var(--surface);padding:10px;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.form-col{display:grid;gap:6px;min-width:0}
.customer-form label{display:grid;grid-template-columns:112px minmax(0,1fr);gap:6px;align-items:center;font-weight:500;min-width:0;position:relative}
.customer-form label b{display:none}
.customer-form label input{grid-column:2;grid-row:1}
.customer-form input,.debt-form input,.debt-form select,.search input{height:30px;min-width:0;border:1px solid var(--line-strong);background:#fff;color:var(--text);padding:4px 8px;border-radius:5px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
.customer-form input:focus,.debt-form input:focus,.debt-form select:focus,.search input:focus{border-color:#4b91c8;box-shadow:0 0 0 3px rgba(33,107,159,.12)}

/* Toolbar */
.toolbar{display:flex;gap:6px;align-items:center;margin:7px 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:6px;flex-wrap:wrap;box-shadow:var(--shadow)}
.group,.search{display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.right{margin-left:auto}
.toolbar button,.buttonlike,.debt-actions button{min-height:30px;border:1px solid var(--line-strong);background:#fff;padding:5px 9px;font-weight:600;color:var(--text);cursor:pointer;border-radius:6px;font-size:12px;transition:background .15s,border-color .15s,transform .05s}
.toolbar button:hover,.buttonlike:hover,.debt-actions button:hover{background:#f0f5f9;border-color:#9eabb9}
.toolbar button:active,.debt-actions button:active{transform:translateY(1px)}
.toolbar button.primary,.debt-actions button.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.toolbar button.primary:hover,.debt-actions button.primary:hover{background:var(--primary-hover)}
.toolbar button.danger,.debt-actions button.danger{color:#fff;background:var(--danger);border-color:var(--danger)}
.search{margin-left:auto}
.search span{color:var(--muted);font-weight:600;white-space:nowrap}
.search input{width:min(260px,32vw)}
.buttonlike{display:inline-flex;align-items:center;gap:5px}

/* Tables */
.grid-wrap{overflow:auto;border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);max-height:220px;box-shadow:var(--shadow);-webkit-overflow-scrolling:touch}
.grid-wrap table{width:100%;border-collapse:separate;border-spacing:0;min-width:760px}
.grid-wrap th{background:#edf2f6;color:#344250;border-bottom:1px solid var(--line);border-right:1px solid #e3e7ec;font-weight:700;padding:7px 8px;text-align:left;position:sticky;top:0;z-index:2;white-space:nowrap}
.grid-wrap td{padding:6px 8px;border-bottom:1px solid #edf0f3;white-space:nowrap;text-align:left;vertical-align:middle}
.grid-wrap tbody tr:nth-child(even){background:#fbfcfd}
.grid-wrap tbody tr:hover,.grid-wrap tbody tr.selected{background:#e6f2fc}
.grid-wrap tbody tr{cursor:pointer}

.statusline{padding:8px 2px;color:var(--muted);font-size:12px}
.statusline b{color:var(--text)}

/* Tabs */
.tabs{display:flex;gap:4px;margin-top:10px;overflow-x:auto;padding:2px 2px 0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tab{flex:0 0 auto;border:1px solid var(--line);background:#e8edf2;color:#465463;padding:7px 12px;font-weight:600;cursor:pointer;border-radius:7px 7px 0 0;font-size:13px;white-space:nowrap}
.tab:hover{background:#dfe8ef}
.tab.active{background:var(--surface);color:var(--primary);border-bottom-color:var(--surface);box-shadow:0 -2px 8px rgba(25,42,62,.04)}
.tab-panel{display:none;background:var(--surface);border:1px solid var(--line);border-radius:0 var(--radius) var(--radius) var(--radius);padding:9px;box-shadow:var(--shadow)}
.tab-panel.active{display:block}

/* Debt and other forms */
.debt-form{display:grid;grid-template-columns:auto minmax(120px,1fr) auto minmax(120px,1fr) auto minmax(120px,1.4fr) auto minmax(100px,1fr);gap:8px 10px;align-items:center}
.debt-form label{display:contents;font-weight:500}
.debt-form label.wide{grid-column:auto}
.debt-actions{display:flex;justify-content:flex-start;gap:6px;align-items:center;margin:10px 0;flex-wrap:wrap}
.debt-grid{height:220px;max-height:220px}
.checkbox{display:inline-flex!important;align-items:center;gap:6px!important;font-weight:500!important;white-space:nowrap}
.checkbox input{width:auto!important;height:auto!important}

/* Summary */
.bccs-toolbar{align-items:center}
.summary-total{margin-left:auto;padding:6px 10px;font-family:Arial,sans-serif;font-size:14px;font-weight:700;color:#e11;white-space:nowrap;background:#fff7f7;border:1px solid #ffd1d1;border-radius:6px}

/* Toast/status message */
#api-message{position:fixed;right:16px;bottom:16px;z-index:100;max-width:min(420px,calc(100vw - 32px));padding:10px 14px!important;border-radius:8px!important;border:1px solid var(--line)!important;background:#fff!important;box-shadow:0 8px 25px rgba(0,0,0,.16)!important;font-weight:600!important}

/* Tablet */
@media (max-width: 980px){
  main{padding:8px}
  .customer-form{grid-template-columns:1fr;gap:8px}
  .customer-form label{grid-template-columns:125px minmax(0,1fr)}
  .customer-form label b{display:none}
  .right{margin-left:0}
  .search{margin-left:0;flex:1 1 280px}
  .search input{flex:1;width:auto;min-width:160px}
  .debt-form{grid-template-columns:auto minmax(120px,1fr) auto minmax(120px,1fr);gap:7px 10px}
  .debt-form label.wide{grid-column:auto}
  .summary-total{width:100%;margin-left:0;text-align:left}
}

/* Phone */
@media (max-width: 640px){
  body{font-size:14px}
  .titlebar{min-height:48px;padding:8px 10px}
  .brand{font-size:13px}
  .brand span{display:none}
  main{padding:8px}
  .customer-form{padding:8px;border-radius:8px}
  .customer-form label{grid-template-columns:1fr;gap:4px;position:relative}
  .customer-form label b{display:none}
  .customer-form label input{grid-column:1;grid-row:2}
  .customer-form input,.debt-form input,.debt-form select,.search input{height:36px;font-size:13px}
  .toolbar{padding:6px;gap:6px}
  .group,.search{width:100%;margin-left:0}
  .toolbar button,.buttonlike,.debt-actions button{min-height:40px;flex:1 1 calc(50% - 7px);justify-content:center}
  .search{display:grid;grid-template-columns:auto minmax(0,1fr) auto}
  .search input{width:100%;min-width:0}
  .search button{flex:0 0 auto}
  .right{width:100%}
  .grid-wrap{max-height:420px;border-radius:8px}
  .grid-wrap table{min-width:0;width:100%}
  .grid-wrap thead{display:none}
  .grid-wrap tbody,.grid-wrap tr,.grid-wrap td{display:block;width:100%}
  .grid-wrap tbody tr{padding:10px 12px;border-bottom:1px solid var(--line);background:#fff!important}
  .grid-wrap tbody tr:hover,.grid-wrap tbody tr.selected{background:#eaf5fd!important}
  .grid-wrap td{white-space:normal;border:0;padding:4px 0 4px 42%;min-height:28px;position:relative;text-align:right;overflow-wrap:anywhere}
  .grid-wrap td::before{position:absolute;left:0;top:4px;width:38%;font-weight:700;color:var(--muted);text-align:left;content:''}
  #customer-table td:nth-child(1)::before{content:'MST/CCCD/BS'}
  #customer-table td:nth-child(2)::before{content:'Khách hàng'}
  #customer-table td:nth-child(3)::before{content:'Dịch vụ'}
  #customer-table td:nth-child(4)::before{content:'Quản lý'}
  #customer-table td:nth-child(5)::before{content:'Điện thoại'}
  #customer-table td:nth-child(6)::before{content:'Ngày hết hạn'}
  #bccs .grid-wrap td:nth-child(1)::before{content:'MST/CCCD'}
  #bccs .grid-wrap td:nth-child(2)::before{content:'Khách hàng'}
  #bccs .grid-wrap td:nth-child(3)::before{content:'Quản lý'}
  #bccs .grid-wrap td:nth-child(4)::before{content:'Phát sinh'}
  #bccs .grid-wrap td:nth-child(5)::before{content:'Chiết khấu'}
  #bccs .grid-wrap td:nth-child(6)::before{content:'Đã thanh toán'}
  #bccs .grid-wrap td:nth-child(7)::before{content:'Còn nợ'}
  #partner .grid-wrap td:nth-child(1)::before{content:'Người quản lý'}
  #partner .grid-wrap td:nth-child(2)::before{content:'Phát sinh'}
  #partner .grid-wrap td:nth-child(3)::before{content:'Chiết khấu'}
  #partner .grid-wrap td:nth-child(4)::before{content:'Đã thanh toán'}
  #partner .grid-wrap td:nth-child(5)::before{content:'Còn nợ'}
  #policy .grid-wrap td:nth-child(1)::before{content:'Mã HTHM'}
  #policy .grid-wrap td:nth-child(2)::before{content:'Nội dung'}
  #policy .grid-wrap td:nth-child(3)::before{content:'Số tiền'}
  #policy .grid-wrap td:nth-child(4)::before{content:'% PBH'}
  #policy .grid-wrap td:nth-child(5)::before{content:'Phí bán hàng'}
  #user .grid-wrap td:nth-child(1)::before{content:'Ngày'}
  #user .grid-wrap td:nth-child(2)::before{content:'ID'}
  #user .grid-wrap td:nth-child(3)::before{content:'Khách hàng'}
  #user .grid-wrap td:nth-child(4)::before{content:'Dịch vụ'}
  #user .grid-wrap td:nth-child(5)::before{content:'Gói cước'}
  #user .grid-wrap td:nth-child(6)::before{content:'User'}
  #user .grid-wrap td:nth-child(7)::before{content:'Phát sinh'}
  #user .grid-wrap td:nth-child(8)::before{content:'Chiết khấu'}
  #user .grid-wrap td:nth-child(9)::before{content:'Thanh toán'}
  #user .grid-wrap td:nth-child(10)::before{content:'Đã trả'}
  #user .grid-wrap td:nth-child(11)::before{content:'Ngày TT'}
  #debt .grid-wrap td:nth-child(1)::before{content:'MST/CCCD'}
  #debt .grid-wrap td:nth-child(2)::before{content:'Ngày'}
  #debt .grid-wrap td:nth-child(3)::before{content:'Nội dung'}
  #debt .grid-wrap td:nth-child(4)::before{content:'Phát sinh'}
  #debt .grid-wrap td:nth-child(5)::before{content:'Chiết khấu'}
  #debt .grid-wrap td:nth-child(6)::before{content:'Đã thanh toán'}
  #debt .grid-wrap td:nth-child(7)::before{content:'Duyệt tiền'}

  .tabs{gap:5px;margin-top:8px}
  .tab{padding:8px 11px;font-size:13px}
  .tab-panel{padding:8px;border-radius:0 8px 8px 8px}
  .debt-form{grid-template-columns:1fr;gap:8px}
  .debt-form label{display:grid;grid-template-columns:1fr;gap:4px}
  .debt-form label.wide{grid-column:auto}
  .debt-actions button{flex:1 1 calc(50% - 6px)}
  .summary-total{font-size:14px;white-space:normal;line-height:1.5}
  .statusline{font-size:13px;padding:8px 2px}
}

@media (max-width: 380px){
  .toolbar button,.buttonlike,.debt-actions button{flex-basis:100%}
  .search{grid-template-columns:1fr}
  .search span{display:none}
  .search button{width:100%}
  .grid-wrap td{padding-left:38%;}
  .grid-wrap td::before{width:34%;font-size:12px}
}


/* Compact data-entry controls and native calendar picker */
.customer-form input[type="date"],
.debt-form input[type="date"]{
  padding-right:6px;
}
.customer-form input[type="date"]::-webkit-calendar-picker-indicator,
.debt-form input[type="date"]::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.8;
}

/* Show about five data rows before scrolling, matching the desktop workflow. */
#customer-table{max-height:220px;}
#debt .debt-grid{height:220px;max-height:220px;}

@media (max-width:640px){
  #customer-table{max-height:390px;}
  #debt .debt-grid{height:390px;max-height:390px;}
}

/* =========================================================
   UI PATCH - GIỮ NGUYÊN FILE NỀN, CHỈ CHỈNH BỐ CỤC
   - Desktop: form Công nợ/BCCS 4 cụm trường x 2 hàng.
   - Không thay JS/API/database/logic.
   ========================================================= */

/* Nếu tab BCCS dùng lại .debt-form thì áp dụng đúng bố cục 2 hàng. */
#bccs .debt-form{
  display:grid;
  grid-template-columns:
    auto minmax(110px,1fr)
    auto minmax(110px,1fr)
    auto minmax(160px,1.5fr)
    auto minmax(100px,1fr);
  gap:8px 10px;
  align-items:center;
}
#bccs .debt-form label.wide{grid-column:auto}

/* Trên desktop, Công nợ đúng bố cục App cũ: 4 trường / hàng, 2 hàng. */
.debt-form{
  grid-template-columns:
    auto minmax(110px,1fr)
    auto minmax(110px,1fr)
    auto minmax(160px,1.5fr)
    auto minmax(100px,1fr);
}
.debt-form label.wide{grid-column:auto}

/* Tablet: 2 cụm / hàng để không bị ép quá nhỏ. */
@media (min-width:641px) and (max-width:980px){
  .debt-form,
  #bccs .debt-form{
    grid-template-columns:
      auto minmax(120px,1fr)
      auto minmax(120px,1fr);
    gap:7px 10px;
  }
}

/* Mobile/tablet customer: chỉ hiện 6 trường cần thiết.
   Chỉ ẩn bằng CSS, không xóa field và không tác động dữ liệu. */
@media (max-width:980px){
  .customer-form label:has(#id),
  .customer-form label:has(#ten),
  .customer-form label:has(#dich_vu),
  .customer-form label:has(#nguoi_quan_ly),
  .customer-form label:has(#sdt),
  .customer-form label:has(#ngay_het_han){display:grid;}

  .customer-form label:has(#ngay_cap_id),
  .customer-form label:has(#dia_chi),
  .customer-form label:has(#noi_cap_id),
  .customer-form label:has(#dai_dien),
  .customer-form label:has(#chuc_vu),
  .customer-form label:has(#so_giay_to),
  .customer-form label:has(#ngay_cap_giay_to),
  .customer-form label:has(#noi_cap_giay_to),
  .customer-form label:has(#so_thiet_bi),
  .customer-form label:has(#so_giay_to_bo_sung){display:none!important;}
}


/* =========================================================
   FIX: CHÍNH SÁCH - ĐƯA CHECKBOX THUẾ LÊN HÀNG 1
   Chỉ CSS, không thay đổi HTML/JS/API.
   Bố cục giống App cũ: toàn bộ 5 cặp trường nằm cùng row 0.
   ========================================================= */

/* Các tên class phổ biến của form Chính sách */
#policy .policy-form,
#policy .form-policy,
#policy .form-row:first-child,
#policy > div:first-child{
  display:grid;
  grid-template-columns:
    auto minmax(110px,1fr)
    auto minmax(170px,2fr)
    auto minmax(80px,.8fr)
    auto minmax(60px,.65fr)
    auto 30px;
  align-items:center;
  gap:6px 8px;
  width:100%;
}

#policy .policy-form > label,
#policy .form-policy > label,
#policy .form-row:first-child > label,
#policy > div:first-child > label{
  white-space:nowrap;
  margin:0;
}

#policy .policy-form > input,
#policy .form-policy > input,
#policy .form-row:first-child > input,
#policy > div:first-child > input{
  width:100%;
  min-width:0;
  height:30px;
}

/* Checkbox Thuế: nằm ngay sau nhãn Thuế, trên cùng hàng */
#policy input[type="checkbox"]{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  margin:0!important;
  justify-self:start;
  accent-color:var(--primary);
}

@media (max-width:980px){
  #policy .policy-form,
  #policy .form-policy,
  #policy .form-row:first-child,
  #policy > div:first-child{
    grid-template-columns:
      auto minmax(100px,1fr)
      auto minmax(130px,1.5fr)
      auto minmax(70px,.8fr)
      auto minmax(55px,.7fr)
      auto 28px;
    gap:5px 7px;
  }
}

@media (max-width:640px){
  #policy .policy-form,
  #policy .form-policy,
  #policy .form-row:first-child,
  #policy > div:first-child{
    grid-template-columns:auto minmax(0,1fr);
    gap:5px 7px;
  }
}


/* ===== FINAL UI FIX ===== */

/* Ẩn Thuế 8/10% nhưng giữ nguyên field/logic/API */
#policy label:has(#pol-tax),
#policy #pol-tax{
  display:none !important;
}

/* Ẩn hoàn toàn tab Đối tác và panel tương ứng */
.tab[data-tab="partner"],
#partner{
  display:none !important;
}

/* Ô tìm kiếm rộng hơn, tự co theo màn hình */
.toolbar .search{
  flex:1 1 420px;
  min-width:260px;
}
.toolbar .search input{
  width:100%;
  min-width:220px;
  flex:1 1 auto;
}
#customer-search{
  min-width:320px;
}

/* Bảng Công nợ: không khóa 220px/5 dòng; chiều cao theo viewport */
#debt .debt-grid{
  height:clamp(260px, calc(100vh - 430px), 760px) !important;
  max-height:none !important;
  min-height:220px;
}
#debt .debt-grid table{
  min-height:100%;
}

/* Realtime autocomplete cho 4 trường KH */
.customer-autocomplete{
  position:relative;
  min-width:0;
  width:100%;
}
.customer-autocomplete > input{
  width:100%;
}
.customer-autocomplete-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 2px);
  z-index:80;
  max-height:240px;
  overflow:auto;
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:6px;
  box-shadow:0 8px 22px rgba(25,42,62,.16);
}
.customer-autocomplete-item{
  display:block;
  width:100%;
  border:0;
  background:#fff;
  text-align:left;
  padding:7px 9px;
  color:var(--text);
  cursor:pointer;
}
.customer-autocomplete-item:hover{
  background:#eaf4fc;
}

/* Calendar báo cáo: nằm trong giao diện web, không dùng prompt */
.date-range-modal{
  position:fixed;
  inset:0;
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(20,30,40,.28);
}
.date-range-card{
  width:min(520px, 100%);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 14px 40px rgba(0,0,0,.20);
  padding:16px;
}
.date-range-title{
  font-size:16px;
  font-weight:700;
  margin-bottom:14px;
}
.date-range-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.date-range-fields label{
  display:grid;
  gap:5px;
  font-weight:600;
}
.date-range-fields input{
  width:100%;
  height:34px;
  border:1px solid var(--line-strong);
  border-radius:6px;
  padding:5px 8px;
}
.date-range-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:15px;
}
.date-range-actions button{
  min-height:32px;
  border:1px solid var(--line-strong);
  background:#fff;
  border-radius:6px;
  padding:5px 12px;
  cursor:pointer;
}
.date-range-actions .primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

@media (max-width:980px){
  .toolbar .search{
    flex:1 1 100%;
  }
  #customer-search{
    min-width:0;
  }
  #debt .debt-grid{
    height:clamp(240px, calc(100vh - 500px), 620px) !important;
  }
}

@media (max-width:640px){
  .toolbar .search,
  .toolbar .search input{
    min-width:0;
    width:100%;
  }
  .date-range-fields{
    grid-template-columns:1fr;
  }
  #debt .debt-grid{
    height:clamp(220px, calc(100vh - 420px), 520px) !important;
  }
}

/* =========================================================
   FINAL PATCH - search row / 12 rows / status summary
   Chỉ thay đổi giao diện, không đổi API/database/nghiệp vụ.
   ========================================================= */

/* Search: label + input + button luôn nằm cùng một hàng trên desktop/tablet. */
.toolbar{flex-wrap:nowrap;}
.toolbar .group{flex:0 0 auto;flex-wrap:nowrap;}
.toolbar .search{flex:1 1 auto;min-width:0;margin-left:auto;flex-wrap:nowrap;}
.toolbar .search span{flex:0 0 auto;}
.toolbar .search input{flex:1 1 auto;width:auto;min-width:280px;}

/* Các ô tìm kiếm cần rộng hơn nhưng vẫn tự co theo chiều rộng màn hình. */
#customer-search{min-width:360px;}
#bccs-search,#pol-search,#u-search{min-width:320px;}
#bccs .toolbar .search input,#policy .toolbar .search input,#user .toolbar .search input{min-width:320px;}

/* Các bảng: tối đa 12 dòng dữ liệu; không còn cố định 5 dòng. */
#bccs .grid-wrap,
#debt .grid-wrap,
#policy .grid-wrap,
#user .grid-wrap{
  max-height:400px;
}
#customer-table .grid-wrap{max-height:440px;}

/* Không khóa chiều cao Công nợ theo 220px/5 dòng nữa. */
#debt .debt-grid,
#debt .grid-wrap{
  height:auto !important;
  min-height:0;
  max-height:440px !important;
}

/* Tổng/Hiển thị/Sắp hết hạn nằm cùng hàng với các tab và căn phải. */
.tabs .statusline{
  order:999;
  margin-left:auto;
  padding:7px 4px 7px 12px;
  white-space:nowrap;
  font-size:12px;
  color:var(--muted);
  flex:0 0 auto;
}
.tabs .statusline b{color:var(--text);}

/* Summary của BCCS giữ cùng phong cách căn phải, không chiếm dòng riêng. */
#bccs-total.summary-total{
  margin-left:auto;
  padding:6px 4px 6px 12px;
  border:0;
  background:transparent;
  color:#e11;
  box-shadow:none;
}

/* Báo cáo hết hạn chỉ là dữ liệu hiển thị trên bảng; không biến nút báo cáo
   thành nút tải Excel. Nút Xuất Excel chung vẫn dành cho danh sách khách hàng. */

@media (max-width:980px){
  .toolbar{flex-wrap:nowrap;overflow-x:auto;}
  .toolbar .search{flex:1 1 420px;min-width:320px;}
  .toolbar .search input{min-width:240px;}
  #customer-search{min-width:280px;}
  #bccs-search,#pol-search,#u-search{min-width:260px;}

  #customer-table,
  #bccs .grid-wrap,
  #debt .grid-wrap,
  #policy .grid-wrap,
  #user .grid-wrap{
    max-height:440px;
  }

  .tabs{overflow-x:auto;flex-wrap:nowrap;}
  .tabs .statusline{margin-left:auto;}
}

@media (max-width:640px){
  /* Mobile vẫn ưu tiên không làm vỡ layout; toolbar có thể cuộn ngang thay vì
     ép label/input/button thành nhiều hàng. */
  .toolbar{flex-wrap:nowrap;overflow-x:auto;}
  .toolbar .group{flex:0 0 auto;}
  .toolbar .search{flex:0 0 310px;min-width:310px;}
  .toolbar .search input{min-width:190px;}
  #customer-search{min-width:190px;}
  #bccs-search,#pol-search,#u-search{min-width:190px;}

  /* Trên mobile bảng vẫn tối đa 12 bản ghi, nhưng tự co theo chiều cao màn hình. */
  #customer-table,
  #bccs .grid-wrap,
  #debt .grid-wrap,
  #policy .grid-wrap,
  #user .grid-wrap{
    max-height:min(440px,calc(100vh - 360px));
  }

  .tabs .statusline{
    font-size:11px;
    padding-left:8px;
  }
}

/* =========================================================
   MOBILE SEARCH - HIỂN THỊ Ô TÌM KIẾM KHÁCH HÀNG RÕ RÀNG
   Không thay đổi HTML/JS/API.
   ========================================================= */
@media (max-width:640px){
  /* Không để thanh toolbar bị cuộn ngang làm mất ô tìm kiếm. */
  section.toolbar:first-of-type{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    overflow:visible;
  }

  section.toolbar:first-of-type > .group,
  section.toolbar:first-of-type > .search,
  section.toolbar:first-of-type > .group.right{
    width:100%;
    min-width:0;
    margin:0;
  }

  /* Ô tìm kiếm khách hàng luôn có một hàng riêng, rộng toàn màn hình. */
  section.toolbar:first-of-type > .search{
    order:2;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    flex:none;
  }

  section.toolbar:first-of-type > .group{order:1;}
  section.toolbar:first-of-type > .group.right{order:3;}

  section.toolbar:first-of-type > .search input{
    width:100%;
    min-width:0;
    height:36px;
  }

  section.toolbar:first-of-type > .search button{
    min-height:36px;
    flex:0 0 auto;
  }
}


/* =========================================================
   MOBILE FINAL FIX
   - Không để form Công nợ/BCCS tràn ngang màn hình.
   - Ẩn Import Excel trên điện thoại.
   - Các ô ngày dùng native calendar picker.
   ========================================================= */
@media (max-width:640px){
  main{padding:6px;max-width:100%;overflow-x:hidden;}
  .titlebar{min-height:42px;padding:7px 10px;}
  .brand{font-size:12px;}
  .brand span{display:none;}

  /* Customer form: giữ 6 trường cần thiết, mỗi trường gọn và full width. */
  .customer-form{grid-template-columns:1fr;padding:8px;gap:6px;}
  .customer-form .form-col{gap:6px;}
  .customer-form label{grid-template-columns:1fr;gap:3px;font-size:13px;}
  .customer-form label input{grid-column:1;grid-row:2;}
  .customer-form input,.debt-form input,.debt-form select,.search input{height:34px;font-size:13px;}

  /* Toolbar khách hàng: nút chức năng gọn, Import Excel không hiện trên mobile. */
  section.toolbar:first-of-type .buttonlike,
  #policy .buttonlike{display:none!important;}
  section.toolbar:first-of-type{display:flex;flex-wrap:wrap;overflow:visible;}
  section.toolbar:first-of-type > .group{display:flex;flex:1 1 100%;flex-wrap:wrap;}
  section.toolbar:first-of-type > .group button{flex:1 1 calc(25% - 6px);min-width:0;padding:5px 6px;font-size:11px;}
  section.toolbar:first-of-type > .search{display:grid;grid-template-columns:auto minmax(0,1fr) auto;flex:1 1 100%;width:100%;min-width:0;order:2;}
  section.toolbar:first-of-type > .group.right{display:flex;flex:1 1 100%;order:3;}
  section.toolbar:first-of-type > .group.right button{flex:1 1 0;}

  /* Các tab luôn vừa màn hình. */
  .tabs{display:flex;overflow-x:auto;white-space:nowrap;gap:4px;}
  .tab{flex:0 0 auto;padding:7px 10px;font-size:12px;}
  .tabs .statusline{margin-left:auto;flex:0 0 auto;font-size:10px;padding:6px 0;}

  /* Form Công nợ: 2 cột trên mobile, không tràn sang bên phải. */
  .debt-form,
  #bccs .debt-form{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:7px!important;
    width:100%;
  }
  .debt-form label,
  #bccs .debt-form label{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:3px!important;
    min-width:0;
  }
  .debt-form label.wide{grid-column:1/-1!important;}
  .debt-form input,.debt-form select{width:100%;min-width:0;}

  .debt-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;}
  .debt-actions button{width:100%;min-width:0;min-height:36px;}
  .debt-actions .checkbox{grid-column:1/-1;}

  /* Toolbar/search của BCCS, Chính sách, User: một hàng gọn trong khung. */
  #bccs .toolbar,#policy .toolbar,#user .toolbar{display:flex;flex-wrap:wrap;overflow:visible;}
  #bccs .toolbar .search,#policy .toolbar .search,#user .toolbar .search{display:grid;grid-template-columns:auto minmax(0,1fr);width:100%;min-width:0;flex:1 1 100%;}
  #bccs .toolbar .search input,#policy .toolbar .search input,#user .toolbar .search input{min-width:0;width:100%;}

  /* Bảng: card trên mobile, không tạo chiều rộng ngang cố định. */
  .grid-wrap{max-width:100%;width:100%;overflow:auto;}
  .grid-wrap table{min-width:0!important;width:100%;}
  #customer-table{max-height:420px;}
  #debt .debt-grid,#bccs .grid-wrap,#policy .grid-wrap,#user .grid-wrap{max-height:420px!important;height:auto!important;}

  /* Native calendar icon rõ ràng và dễ bấm. */
  input[type="date"]{-webkit-appearance:auto;appearance:auto;min-width:0;}
  input[type="date"]::-webkit-calendar-picker-indicator{display:block;opacity:.9;cursor:pointer;width:18px;height:18px;}

  /* Báo cáo ngày hiển thị gọn trên điện thoại. */
  .date-range-card{width:100%;max-width:360px;padding:14px;}
  .date-range-fields{grid-template-columns:1fr;gap:8px;}
}


/* =========================================================
   FINAL SMALL PATCH - requested current UI only
   - Money/numeric table cells align right.
   - Customer search is first on mobile, then action buttons.
   - Keep the existing responsive/table layout; no API/business logic.
   ========================================================= */

/* Money/numeric columns: right aligned on all data tables. */
#debt .grid-wrap td:nth-child(4),
#debt .grid-wrap td:nth-child(5),
#debt .grid-wrap td:nth-child(6),
#debt .grid-wrap td:nth-child(7),
#bccs .grid-wrap td:nth-child(4),
#bccs .grid-wrap td:nth-child(5),
#bccs .grid-wrap td:nth-child(6),
#bccs .grid-wrap td:nth-child(7),
#policy .grid-wrap td:nth-child(3),
#policy .grid-wrap td:nth-child(4),
#policy .grid-wrap td:nth-child(5),
#user .grid-wrap td:nth-child(7),
#user .grid-wrap td:nth-child(8),
#user .grid-wrap td:nth-child(9),
#user .grid-wrap td:nth-child(10){
  text-align:right;
}

#debt .grid-wrap th:nth-child(4),
#debt .grid-wrap th:nth-child(5),
#debt .grid-wrap th:nth-child(6),
#debt .grid-wrap th:nth-child(7),
#bccs .grid-wrap th:nth-child(4),
#bccs .grid-wrap th:nth-child(5),
#bccs .grid-wrap th:nth-child(6),
#bccs .grid-wrap th:nth-child(7),
#policy .grid-wrap th:nth-child(3),
#policy .grid-wrap th:nth-child(4),
#policy .grid-wrap th:nth-child(5),
#user .grid-wrap th:nth-child(7),
#user .grid-wrap th:nth-child(8),
#user .grid-wrap th:nth-child(9),
#user .grid-wrap th:nth-child(10){
  text-align:right;
}

/* Data tables: keep the existing compact responsive height; max about 12 rows. */
#bccs .grid-wrap,
#debt .grid-wrap,
#policy .grid-wrap,
#user .grid-wrap{
  max-height:400px;
}

/* Desktop/tablet search controls stay on one row and use available width. */
#bccs .toolbar .search,
#policy .toolbar .search,
#user .toolbar .search{
  flex:1 1 auto;
  min-width:0;
}
#bccs .toolbar .search input,
#policy .toolbar .search input,
#user .toolbar .search input{
  flex:1 1 auto;
  min-width:320px;
}

@media (max-width:640px){
  /* Customer mobile: search FIRST, then the Add/New action row. */
  section.toolbar:first-of-type{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    overflow:visible;
  }
  section.toolbar:first-of-type > .search{
    order:1;
    width:100%;
    min-width:0;
    flex:0 0 auto;
  }
  section.toolbar:first-of-type > .group{
    order:2;
    width:100%;
    flex:0 0 auto;
  }
  section.toolbar:first-of-type > .group.right{
    order:3;
    width:100%;
    flex:0 0 auto;
  }

  /* Keep all mobile search boxes comfortably wide without horizontal scrolling. */
  #bccs .toolbar .search,
  #policy .toolbar .search,
  #user .toolbar .search{
    width:100%;
    min-width:0;
    flex:1 1 100%;
  }
  #bccs .toolbar .search input,
  #policy .toolbar .search input,
  #user .toolbar .search input{
    min-width:0;
    width:100%;
  }

  /* Mobile card values: numeric money stays right aligned. */
  .grid-wrap td:nth-child(n){text-align:right;}
}

/* Hide top title bar for a cleaner interface - presentation only */
.titlebar{display:none !important}


/* =========================================================
   CURRENT PATCH - CUSTOMER TABLE FIT TO WEB WIDTH
   - Không tạo thanh scroll ngang cho bảng khách hàng trên desktop/tablet.
   - Các cột tự chia theo chiều rộng màn hình.
   - Nội dung dài được xuống dòng để không làm tràn bảng.
   - Không thay đổi dữ liệu/API/nghiệp vụ.
   ========================================================= */
@media (min-width:641px){
  #customer-table{
    width:100%!important;
    min-width:0!important;
    table-layout:fixed!important;
  }

  #customer-table th,
  #customer-table td{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  #customer-table th:nth-child(1),
  #customer-table td:nth-child(1){width:120px;}
  #customer-table th:nth-child(2),
  #customer-table td:nth-child(2){width:40%;}/* Tên khách hàng */
  #customer-table th:nth-child(3),
  #customer-table td:nth-child(3){width:18%;}/* Dịch vụ */
  #customer-table th:nth-child(4),
  #customer-table td:nth-child(4){width:16%;}/* Người quản lý */
  #customer-table th:nth-child(5),
  #customer-table td:nth-child(5){width:12%;}/* Số điện thoại */
  #customer-table th:nth-child(6),
  #customer-table td:nth-child(6){width:12%;}/* Ngày hết hạn */

  #customer-table td{
    white-space:normal!important;
    vertical-align:top;
  }

  #customer-table th{
    white-space:nowrap;
  }

  #customer-table .selected td{
    white-space:normal!important;
  }

  /* Khung bảng không cần scroll ngang khi đã chia cột theo viewport. */
  main > .grid-wrap{
    overflow-x:hidden;
  }
}

/* User - ô Ngày thanh toán luôn là Calendar và đồng bộ kích thước. */
#user #u-paid-date{
  cursor:pointer;
}
#user #u-paid-date::-webkit-calendar-picker-indicator{
  cursor:pointer;
  opacity:.9;
}


/* =========================================================
   MOBILE - CHỈ SỬA TOOLBAR KHÁCH HÀNG
   Không tác động các form/bảng/tab khác.
   ========================================================= */
@media (max-width: 640px) {
  /* Chỉ chọn toolbar có ô tìm kiếm khách hàng */
  body section.toolbar:has(#customer-search) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  body section.toolbar:has(#customer-search) > .search {
    grid-row: 1 !important;
    order: 1 !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body section.toolbar:has(#customer-search) > .group {
    grid-row: 2 !important;
    order: 2 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  body section.toolbar:has(#customer-search) > .group.right {
    grid-row: 3 !important;
    order: 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  body section.toolbar:has(#customer-search) #customer-search {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
  }

  /* Ẩn Import Excel và Xuất Excel CHỈ trong toolbar khách hàng */
  body section.toolbar:has(#customer-search) > .group .buttonlike {
    display: none !important;
  }

  body section.toolbar:has(#customer-search) > .group.right [data-action="customer-export"] {
    display: none !important;
  }
}

/* =========================================================
   PATCH CUỐI - CHỈ MOBILE: CĂN Ô NGÀY + ẨN XUẤT EXCEL BCCS
   Không tác động desktop, JS, API hoặc các phần giao diện khác.
   ========================================================= */
@media (max-width: 640px) {
  /* Ô Ngày của tab Công nợ */
  #debt #debt-date {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    height: 36px !important;
    line-height: 22px !important;
    text-align: left !important;
  }

  /* Ô Ngày của tab User */
  #user #u-date {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 6px 8px !important;
    height: 36px !important;
    line-height: 22px !important;
    text-align: left !important;
  }

  #debt #debt-date::-webkit-calendar-picker-indicator,
  #user #u-date::-webkit-calendar-picker-indicator {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    opacity: .9 !important;
    cursor: pointer !important;
  }

  /* Chỉ ẩn nút Xuất Excel của tab BCCS trên mobile. */
  #bccs #bccs-export {
    display: none !important;
  }
}

/* =========================================================
   iPAD / TABLET FINAL FIX
   - Tối ưu cho iPad ngang (768-1180px).
   - Không để ô Tìm kiếm đè lên nút Xuất Excel / Tải lại.
   - Toolbar tự xuống 2 hàng khi không đủ chiều rộng.
   - Không thay đổi HTML/JS/API/database.
   ========================================================= */

@media (min-width:641px) and (max-width:1180px){
  main{width:100%;max-width:100%;padding:8px;overflow-x:hidden;}

  .toolbar{
    display:flex;
    flex-wrap:wrap !important;
    align-items:center;
    gap:6px;
    overflow:visible !important;
  }

  .toolbar > .group{
    flex:0 0 auto;
    min-width:0;
    flex-wrap:nowrap;
  }

  /* Trên iPad, ô tìm kiếm chuyển xuống hàng riêng để không chồng lên nút */
  .toolbar > .search{
    order:3;
    flex:1 1 100% !important;
    width:100%;
    min-width:0 !important;
    margin-left:0 !important;
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:6px;
  }

  .toolbar > .search input,
  .toolbar #customer-search,
  .toolbar #bccs-search,
  .toolbar #pol-search,
  .toolbar #u-search{
    width:100%;
    min-width:0 !important;
    max-width:none;
    flex:1 1 auto;
  }

  .toolbar > .search button{flex:0 0 auto;white-space:nowrap;}

  .toolbar > .group.right{
    order:2;
    margin-left:auto;
    flex:0 0 auto;
    min-width:0;
  }

  .toolbar > .group.right button{white-space:nowrap;}

  /* Form khách hàng vẫn 2 cột trên iPad ngang */
  .customer-form{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:8px 12px;
    padding:9px;
  }

  .customer-form label{grid-template-columns:105px minmax(0,1fr);gap:5px;}

  /* Bảng khách hàng tự chia theo chiều rộng màn hình */
  #customer-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }

  #customer-table th,
  #customer-table td{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  #customer-table th:nth-child(1),#customer-table td:nth-child(1){width:13%;}
  #customer-table th:nth-child(2),#customer-table td:nth-child(2){width:29%;}
  #customer-table th:nth-child(3),#customer-table td:nth-child(3){width:16%;}
  #customer-table th:nth-child(4),#customer-table td:nth-child(4){width:16%;}
  #customer-table th:nth-child(5),#customer-table td:nth-child(5){width:13%;}
  #customer-table th:nth-child(6),#customer-table td:nth-child(6){width:13%;}

  #customer-table td{white-space:normal !important;vertical-align:middle;}
  #customer-table th{white-space:nowrap;}
  section.toolbar{max-width:100%;}
}

/* iPad dọc / tablet hẹp */
@media (min-width:641px) and (max-width:980px){
  .customer-form{grid-template-columns:1fr;}
  .customer-form label{grid-template-columns:125px minmax(0,1fr);}

  .debt-form,
  #bccs .debt-form{
    grid-template-columns:auto minmax(120px,1fr) auto minmax(120px,1fr);
    gap:7px 10px;
  }
}

/* iPad ngang: nút gọn vừa phải */
@media (min-width:981px) and (max-width:1180px){
  .toolbar button,.buttonlike,.debt-actions button{
    min-height:32px;
    padding:6px 8px;
    font-size:12px;
  }

  .toolbar > .search{flex-basis:100% !important;}
  .toolbar > .search input{height:34px;}
  #customer-table th,#customer-table td{padding:6px;}
}

/* =========================================================
   iPAD REVISION - TOOLBAR 1 HÀNG + Ô NGÀY GỌN
   - Search nằm cùng hàng với các nút chức năng trên iPad.
   - Không tạo thêm hàng riêng cho ô tìm kiếm.
   - Các ô ngày được thu gọn để dành chiều rộng cho nội dung.
   ========================================================= */

@media (min-width:641px) and (max-width:1180px){
  /* Toolbar iPad: tất cả nằm cùng một hàng */
  .toolbar{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    gap:5px !important;
    overflow:hidden !important;
  }

  .toolbar > .group{
    flex:0 0 auto !important;
    min-width:0 !important;
    flex-wrap:nowrap !important;
    gap:4px !important;
  }

  /* Search chiếm phần chiều rộng còn lại */
  .toolbar > .search{
    order:initial !important;
    flex:1 1 auto !important;
    width:auto !important;
    min-width:140px !important;
    margin-left:0 !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:4px !important;
    flex-wrap:nowrap !important;
  }

  .toolbar > .search span{
    font-size:12px;
    white-space:nowrap;
  }

  .toolbar > .search input,
  .toolbar #customer-search,
  .toolbar #bccs-search,
  .toolbar #pol-search,
  .toolbar #u-search{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:32px !important;
    flex:1 1 auto !important;
  }

  .toolbar > .search button{
    flex:0 0 auto !important;
    min-height:32px !important;
    padding:5px 7px !important;
    white-space:nowrap;
  }

  .toolbar > .group.right{
    order:initial !important;
    margin-left:0 !important;
    flex:0 0 auto !important;
    min-width:0 !important;
  }

  .toolbar > .group.right button{
    white-space:nowrap;
    min-height:32px !important;
    padding:5px 7px !important;
  }

  .toolbar button,
  .toolbar .buttonlike{
    min-height:32px !important;
    padding:5px 7px !important;
    font-size:11px !important;
  }

  /* Ô ngày trên iPad: gọn hơn, không bị kéo quá rộng */
  input[type="date"]{
    min-width:0 !important;
    width:100% !important;
    max-width:100% !important;
    padding:4px 6px !important;
    height:32px !important;
    font-size:12px !important;
    font-variant-numeric:tabular-nums;
  }

  .customer-form input[type="date"],
  .debt-form input[type="date"]{
    min-width:0 !important;
  }

  /* Các trường ngày trong form khách hàng không chiếm quá nhiều chỗ */
  .customer-form label:has(input[type="date"]){
    min-width:0;
  }
}

/* iPad dọc: vẫn 1 hàng nhưng ưu tiên thu gọn nút và search */
@media (min-width:641px) and (max-width:820px){
  .toolbar{
    gap:3px !important;
  }

  .toolbar button,
  .toolbar .buttonlike,
  .toolbar > .group.right button{
    padding:5px 5px !important;
    font-size:10px !important;
  }

  .toolbar > .search{
    min-width:110px !important;
  }

  .toolbar > .search span{
    display:none;
  }
}

/* =========================================================
   iPAD - CUSTOMER FORM FINAL BALANCE FIX
   CHỈ áp dụng cho phần thông tin khách hàng trên tablet/iPad.
   Bố cục 4 hàng x 2 cột:
     Trái : MST/CCCD/BS | Tên khách hàng | Dịch vụ | Điện thoại
     Phải : Người quản lý | Ngày hết hạn | Số TB/Account | Số giấy tờ khác
   Các phần khác của giao diện không thay đổi.
   ========================================================= */
@media (min-width:641px) and (max-width:1180px){
  .customer-form{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows:repeat(4, auto) !important;
    gap:7px 12px !important;
    padding:8px !important;
    align-items:center !important;
  }
  .customer-form .form-col{display:contents !important;}
  .customer-form label:has(#noi_cap_id),
  .customer-form label:has(#chuc_vu),
  .customer-form label:has(#ngay_cap_giay_to),
  .customer-form label:has(#ngay_cap_id),
  .customer-form label:has(#dia_chi),
  .customer-form label:has(#dai_dien),
  .customer-form label:has(#so_giay_to),
  .customer-form label:has(#noi_cap_giay_to){display:none !important;}
  .customer-form label:has(#id){display:grid !important;grid-column:1 !important;grid-row:1 !important;}
  .customer-form label:has(#ten){display:grid !important;grid-column:1 !important;grid-row:2 !important;}
  .customer-form label:has(#dich_vu){display:grid !important;grid-column:1 !important;grid-row:3 !important;}
  .customer-form label:has(#sdt){display:grid !important;grid-column:1 !important;grid-row:4 !important;}
  .customer-form label:has(#nguoi_quan_ly){display:grid !important;grid-column:2 !important;grid-row:1 !important;}
  .customer-form label:has(#ngay_het_han){display:grid !important;grid-column:2 !important;grid-row:2 !important;}
  .customer-form label:has(#so_thiet_bi){display:grid !important;grid-column:2 !important;grid-row:3 !important;}
  .customer-form label:has(#so_giay_to_bo_sung){display:grid !important;grid-column:2 !important;grid-row:4 !important;}
  .customer-form label{
    display:grid !important;
    grid-template-columns:105px minmax(0,1fr) !important;
    gap:6px !important;
    align-items:center !important;
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
    font-size:13px !important;
  }
  .customer-form label input{
    grid-column:2 !important;grid-row:1 !important;width:100% !important;min-width:0 !important;
    height:32px !important;box-sizing:border-box !important;
  }
}
@media (min-width:641px) and (max-width:820px){
  .customer-form{gap:6px 8px !important;padding:7px !important;}
  .customer-form label{grid-template-columns:88px minmax(0,1fr) !important;gap:4px !important;font-size:11px !important;}
  .customer-form label input{height:32px !important;font-size:12px !important;padding:4px 6px !important;}
}

/* =========================================================
   iPAD - FIX KÍCH THƯỚC BẢNG CHÍNH SÁCH / BCCS / USER
   Chỉ tác động tới 3 bảng này trên tablet/iPad.
   Mục tiêu: bảng vừa đúng chiều rộng màn hình, không vuốt ngang.
   ========================================================= */
@media (min-width:641px) and (max-width:1180px){

  /* Khung bảng: không tạo scroll ngang */
  #bccs .grid-wrap,
  #policy .grid-wrap,
  #user .grid-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    box-sizing:border-box;
  }

  #bccs .grid-wrap table,
  #policy .grid-wrap table,
  #user .grid-wrap table{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
    border-collapse:collapse;
  }

  /* Không cho nội dung dài kéo rộng bảng */
  #bccs .grid-wrap th,
  #bccs .grid-wrap td,
  #policy .grid-wrap th,
  #policy .grid-wrap td,
  #user .grid-wrap th,
  #user .grid-wrap td{
    box-sizing:border-box;
    min-width:0 !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    white-space:normal !important;
    vertical-align:middle;
    line-height:1.25;
  }

  /* =========================
     BCCS - 7 cột
     ========================= */
  #bccs .grid-wrap th,
  #bccs .grid-wrap td{
    padding:5px 5px !important;
    font-size:11px !important;
  }

  #bccs .grid-wrap th:nth-child(1),
  #bccs .grid-wrap td:nth-child(1){width:14% !important;}

  #bccs .grid-wrap th:nth-child(2),
  #bccs .grid-wrap td:nth-child(2){width:25% !important;}

  #bccs .grid-wrap th:nth-child(3),
  #bccs .grid-wrap td:nth-child(3){width:17% !important;}

  #bccs .grid-wrap th:nth-child(4),
  #bccs .grid-wrap td:nth-child(4){width:11% !important;}

  #bccs .grid-wrap th:nth-child(5),
  #bccs .grid-wrap td:nth-child(5){width:10% !important;}

  #bccs .grid-wrap th:nth-child(6),
  #bccs .grid-wrap td:nth-child(6){width:11% !important;}

  #bccs .grid-wrap th:nth-child(7),
  #bccs .grid-wrap td:nth-child(7){width:12% !important;}

  /* =========================
     CHÍNH SÁCH - 5 cột
     ========================= */
  #policy .grid-wrap th,
  #policy .grid-wrap td{
    padding:5px 6px !important;
    font-size:12px !important;
  }

  #policy .grid-wrap th:nth-child(1),
  #policy .grid-wrap td:nth-child(1){width:16% !important;}

  #policy .grid-wrap th:nth-child(2),
  #policy .grid-wrap td:nth-child(2){
    width:40% !important;
    text-align:left;
  }

  #policy .grid-wrap th:nth-child(3),
  #policy .grid-wrap td:nth-child(3){width:15% !important;}

  #policy .grid-wrap th:nth-child(4),
  #policy .grid-wrap td:nth-child(4){width:11% !important;}

  #policy .grid-wrap th:nth-child(5),
  #policy .grid-wrap td:nth-child(5){width:18% !important;}

  /* =========================
     USER - 11 cột
     ========================= */
  #user .grid-wrap th,
  #user .grid-wrap td{
    padding:4px 4px !important;
    font-size:10px !important;
  }

  #user .grid-wrap th:nth-child(1),
  #user .grid-wrap td:nth-child(1){width:7% !important;}   /* Ngày */

  #user .grid-wrap th:nth-child(2),
  #user .grid-wrap td:nth-child(2){width:7% !important;}   /* ID */

  #user .grid-wrap th:nth-child(3),
  #user .grid-wrap td:nth-child(3){width:20% !important;}  /* Khách hàng */

  #user .grid-wrap th:nth-child(4),
  #user .grid-wrap td:nth-child(4){width:11% !important;}  /* Dịch vụ */

  #user .grid-wrap th:nth-child(5),
  #user .grid-wrap td:nth-child(5){width:9% !important;}   /* Gói cước */

  #user .grid-wrap th:nth-child(6),
  #user .grid-wrap td:nth-child(6){width:11% !important;}  /* User */

  #user .grid-wrap th:nth-child(7),
  #user .grid-wrap td:nth-child(7){width:8% !important;}   /* Phát sinh */

  #user .grid-wrap th:nth-child(8),
  #user .grid-wrap td:nth-child(8){width:7% !important;}   /* Chiết khấu */

  #user .grid-wrap th:nth-child(9),
  #user .grid-wrap td:nth-child(9){width:8% !important;}   /* Thanh toán */

  #user .grid-wrap th:nth-child(10),
  #user .grid-wrap td:nth-child(10){width:7% !important;}  /* Đã trả */

  #user .grid-wrap th:nth-child(11),
  #user .grid-wrap td:nth-child(11){width:5% !important;}  /* Ngày TT */

  /* Số và tiền: căn phải để dễ đọc */
  #bccs .grid-wrap td:nth-child(n+4),
  #policy .grid-wrap td:nth-child(n+3),
  #user .grid-wrap td:nth-child(n+7){
    text-align:right;
  }

  /* Ngày trong User không bị xuống dòng */
  #user .grid-wrap td:nth-child(1),
  #user .grid-wrap td:nth-child(11){
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    text-align:center !important;
  }
}

/* iPad dọc / màn hình hẹp: giảm thêm một chút để 11 cột User vẫn vừa màn hình */
@media (min-width:641px) and (max-width:820px){
  #bccs .grid-wrap th,
  #bccs .grid-wrap td,
  #policy .grid-wrap th,
  #policy .grid-wrap td{
    font-size:10px !important;
    padding:4px 3px !important;
  }

  #user .grid-wrap th,
  #user .grid-wrap td{
    font-size:9px !important;
    padding:3px 2px !important;
  }
}

/* =========================================================
   iPAD PORTRAIT + LANDSCAPE FINAL TABLE FIX v7
   Quan trọng: CSS cũ ở max-width:980px chuyển table thành
   dạng card (display:block). Trên iPad phải ghi đè lại thành
   bảng thật để cả 3 bảng luôn vừa viewport.
   ========================================================= */
@media (min-width:641px) and (max-width:1180px){
  #bccs .grid-wrap,
  #policy .grid-wrap,
  #user .grid-wrap{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }

  #bccs .grid-wrap table,
  #policy .grid-wrap table,
  #user .grid-wrap table{
    display:table !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    table-layout:fixed !important;
  }

  #bccs .grid-wrap thead,
  #policy .grid-wrap thead,
  #user .grid-wrap thead{
    display:table-header-group !important;
  }

  #bccs .grid-wrap tbody,
  #policy .grid-wrap tbody,
  #user .grid-wrap tbody{
    display:table-row-group !important;
  }

  #bccs .grid-wrap tr,
  #policy .grid-wrap tr,
  #user .grid-wrap tr{
    display:table-row !important;
    width:auto !important;
    padding:0 !important;
  }

  #bccs .grid-wrap th,
  #bccs .grid-wrap td,
  #policy .grid-wrap th,
  #policy .grid-wrap td,
  #user .grid-wrap th,
  #user .grid-wrap td{
    display:table-cell !important;
    box-sizing:border-box !important;
    min-width:0 !important;
    max-width:0 !important;
    white-space:normal !important;
    overflow:hidden !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
    text-overflow:clip !important;
    vertical-align:middle !important;
  }

  #bccs .grid-wrap td::before,
  #policy .grid-wrap td::before,
  #user .grid-wrap td::before{
    display:none !important;
    content:none !important;
  }

  #bccs .grid-wrap th,
  #policy .grid-wrap th,
  #user .grid-wrap th{
    position:sticky !important;
    top:0 !important;
    z-index:2 !important;
  }

  /* BCCS: 7 cột = 100% */
  #bccs .grid-wrap th:nth-child(1), #bccs .grid-wrap td:nth-child(1){width:14% !important;}
  #bccs .grid-wrap th:nth-child(2), #bccs .grid-wrap td:nth-child(2){width:25% !important;}
  #bccs .grid-wrap th:nth-child(3), #bccs .grid-wrap td:nth-child(3){width:17% !important;}
  #bccs .grid-wrap th:nth-child(4), #bccs .grid-wrap td:nth-child(4){width:11% !important;}
  #bccs .grid-wrap th:nth-child(5), #bccs .grid-wrap td:nth-child(5){width:10% !important;}
  #bccs .grid-wrap th:nth-child(6), #bccs .grid-wrap td:nth-child(6){width:11% !important;}
  #bccs .grid-wrap th:nth-child(7), #bccs .grid-wrap td:nth-child(7){width:12% !important;}

  /* Chính sách: ưu tiên cột Nội dung */
  #policy .grid-wrap th:nth-child(1), #policy .grid-wrap td:nth-child(1){width:16% !important;}
  #policy .grid-wrap th:nth-child(2), #policy .grid-wrap td:nth-child(2){width:40% !important;}
  #policy .grid-wrap th:nth-child(3), #policy .grid-wrap td:nth-child(3){width:15% !important;}
  #policy .grid-wrap th:nth-child(4), #policy .grid-wrap td:nth-child(4){width:11% !important;}
  #policy .grid-wrap th:nth-child(5), #policy .grid-wrap td:nth-child(5){width:18% !important;}

  /* User: 11 cột, tổng đúng 100% */
  #user .grid-wrap th:nth-child(1),  #user .grid-wrap td:nth-child(1){width:7% !important;}
  #user .grid-wrap th:nth-child(2),  #user .grid-wrap td:nth-child(2){width:7% !important;}
  #user .grid-wrap th:nth-child(3),  #user .grid-wrap td:nth-child(3){width:20% !important;}
  #user .grid-wrap th:nth-child(4),  #user .grid-wrap td:nth-child(4){width:11% !important;}
  #user .grid-wrap th:nth-child(5),  #user .grid-wrap td:nth-child(5){width:9% !important;}
  #user .grid-wrap th:nth-child(6),  #user .grid-wrap td:nth-child(6){width:11% !important;}
  #user .grid-wrap th:nth-child(7),  #user .grid-wrap td:nth-child(7){width:8% !important;}
  #user .grid-wrap th:nth-child(8),  #user .grid-wrap td:nth-child(8){width:7% !important;}
  #user .grid-wrap th:nth-child(9),  #user .grid-wrap td:nth-child(9){width:8% !important;}
  #user .grid-wrap th:nth-child(10), #user .grid-wrap td:nth-child(10){width:7% !important;}
  #user .grid-wrap th:nth-child(11), #user .grid-wrap td:nth-child(11){width:5% !important;}

  /* Không để ngày phá chiều rộng cột */
  #user .grid-wrap td:nth-child(1),
  #user .grid-wrap td:nth-child(11){
    white-space:normal !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    text-align:center !important;
  }
}

/* iPad dọc: ép nhỏ hơn nữa để 11 cột User vẫn vừa màn hình */
@media (min-width:641px) and (max-width:820px){
  #bccs .grid-wrap th, #bccs .grid-wrap td,
  #policy .grid-wrap th, #policy .grid-wrap td{
    font-size:10px !important;
    padding:3px 2px !important;
    line-height:1.15 !important;
  }

  #user .grid-wrap th, #user .grid-wrap td{
    font-size:8px !important;
    padding:2px 1px !important;
    line-height:1.1 !important;
  }

  #user .grid-wrap th{
    font-size:8px !important;
  }
}

/* =========================================================
   RESTORE CUSTOMER EXPIRY ALERT COLORS
   - Giữ nguyên logic row.tag từ API/app.js.
   - Hết hạn: đỏ nhạt.
   - Sắp hết hạn: vàng nhạt.
   - Chỉ áp dụng cho bảng khách hàng, không ảnh hưởng BCCS/Chính sách/User.
   ========================================================= */
#customer-table tbody tr.expired,
#customer-table tbody tr.expired td,
#customer-table tbody tr.het-han,
#customer-table tbody tr.het-han td,
#customer-table tbody tr.overdue,
#customer-table tbody tr.overdue td,
#customer-table tbody tr.danger,
#customer-table tbody tr.danger td,
#customer-table tbody tr.red,
#customer-table tbody tr.red td{
  background:#ffe1e1 !important;
  color:#9b1c1c !important;
}

#customer-table tbody tr.expiring,
#customer-table tbody tr.expiring td,
#customer-table tbody tr.soon,
#customer-table tbody tr.soon td,
#customer-table tbody tr.warning,
#customer-table tbody tr.warning td,
#customer-table tbody tr.sap-het-han,
#customer-table tbody tr.sap-het-han td,
#customer-table tbody tr.yellow,
#customer-table tbody tr.yellow td{
  background:#fff3bf !important;
  color:#6f5600 !important;
}

/* Một số phiên bản backend dùng tên class có dấu gạch dưới. */
#customer-table tbody tr.expired-row,
#customer-table tbody tr.expired_row,
#customer-table tbody tr.soon-expiry,
#customer-table tbody tr.soon_expiry{
  background:#ffe1e1 !important;
}
#customer-table tbody tr.expiring-row,
#customer-table tbody tr.expiring_row,
#customer-table tbody tr.warning-row,
#customer-table tbody tr.warning_row{
  background:#fff3bf !important;
}

/* Khi click chọn dòng, vẫn giữ màu cảnh báo thay vì đổi thành màu selected. */
#customer-table tbody tr.expired.selected,
#customer-table tbody tr.expired.selected td,
#customer-table tbody tr.het-han.selected,
#customer-table tbody tr.het-han.selected td,
#customer-table tbody tr.overdue.selected,
#customer-table tbody tr.overdue.selected td,
#customer-table tbody tr.danger.selected,
#customer-table tbody tr.danger.selected td,
#customer-table tbody tr.red.selected,
#customer-table tbody tr.red.selected td{
  background:#ffcaca !important;
  color:#8b1515 !important;
}

#customer-table tbody tr.expiring.selected,
#customer-table tbody tr.expiring.selected td,
#customer-table tbody tr.soon.selected,
#customer-table tbody tr.soon.selected td,
#customer-table tbody tr.warning.selected,
#customer-table tbody tr.warning.selected td,
#customer-table tbody tr.sap-het-han.selected,
#customer-table tbody tr.sap-het-han.selected td,
#customer-table tbody tr.yellow.selected,
#customer-table tbody tr.yellow.selected td{
  background:#ffeaa0 !important;
  color:#624b00 !important;
}

/* Hover không làm mất màu cảnh báo. */
#customer-table tbody tr.expired:hover,
#customer-table tbody tr.het-han:hover,
#customer-table tbody tr.overdue:hover,
#customer-table tbody tr.danger:hover,
#customer-table tbody tr.red:hover{
  background:#ffcaca !important;
}
#customer-table tbody tr.expiring:hover,
#customer-table tbody tr.soon:hover,
#customer-table tbody tr.warning:hover,
#customer-table tbody tr.sap-het-han:hover,
#customer-table tbody tr.yellow:hover{
  background:#ffeaa0 !important;
}

/* =========================================================
   FINAL - CUSTOMER EXPIRY ALERTS ON ALL DEVICES
   PC / laptop / iPad / tablet / mobile
   The JS assigns the backend status to tr.className = row.tag.
   Therefore these rules deliberately cover the common tag names
   without changing JS/API/database logic.
   ========================================================= */

/* HẾT HẠN = ĐỎ */
#customer-table tbody tr[class~="expired"],
#customer-table tbody tr[class~="het-han"],
#customer-table tbody tr[class~="het_han"],
#customer-table tbody tr[class~="overdue"],
#customer-table tbody tr[class~="danger"],
#customer-table tbody tr[class~="red"],
#customer-table tbody tr[class*="expired-"],
#customer-table tbody tr[class*="expired_"],
#customer-table tbody tr[class*="het-han"],
#customer-table tbody tr[class*="het_han"],
#customer-table tbody tr[class*="overdue"],
#customer-table tbody tr[class*="expired"] {
  background:#ffe0e0 !important;
  color:#9b1c1c !important;
}

#customer-table tbody tr[class~="expired"] td,
#customer-table tbody tr[class~="het-han"] td,
#customer-table tbody tr[class~="het_han"] td,
#customer-table tbody tr[class~="overdue"] td,
#customer-table tbody tr[class~="danger"] td,
#customer-table tbody tr[class~="red"] td,
#customer-table tbody tr[class*="expired"] td,
#customer-table tbody tr[class*="het-han"] td,
#customer-table tbody tr[class*="het_han"] td,
#customer-table tbody tr[class*="overdue"] td {
  background:#ffe0e0 !important;
  color:#9b1c1c !important;
}

/* SẮP HẾT HẠN = VÀNG */
#customer-table tbody tr[class~="expiring"],
#customer-table tbody tr[class~="sap-het-han"],
#customer-table tbody tr[class~="sap_het_han"],
#customer-table tbody tr[class~="soon"],
#customer-table tbody tr[class~="warning"],
#customer-table tbody tr[class~="yellow"],
#customer-table tbody tr[class*="expiring-"],
#customer-table tbody tr[class*="expiring_"],
#customer-table tbody tr[class*="sap-het-han"],
#customer-table tbody tr[class*="sap_het_han"],
#customer-table tbody tr[class*="expiring"] {
  background:#fff2b8 !important;
  color:#6f5600 !important;
}

#customer-table tbody tr[class~="expiring"] td,
#customer-table tbody tr[class~="sap-het-han"] td,
#customer-table tbody tr[class~="sap_het_han"] td,
#customer-table tbody tr[class~="soon"] td,
#customer-table tbody tr[class~="warning"] td,
#customer-table tbody tr[class~="yellow"] td,
#customer-table tbody tr[class*="expiring"] td,
#customer-table tbody tr[class*="sap-het-han"] td,
#customer-table tbody tr[class*="sap_het_han"] td {
  background:#fff2b8 !important;
  color:#6f5600 !important;
}

/* Giữ màu cảnh báo khi hover/chọn dòng trên mọi kích thước màn hình. */
#customer-table tbody tr[class*="expired"].selected,
#customer-table tbody tr[class*="expired"].selected td,
#customer-table tbody tr[class*="het-han"].selected,
#customer-table tbody tr[class*="het-han"].selected td,
#customer-table tbody tr[class*="overdue"].selected,
#customer-table tbody tr[class*="overdue"].selected td {
  background:#ffc9c9 !important;
  color:#8b1515 !important;
}

#customer-table tbody tr[class*="expiring"].selected,
#customer-table tbody tr[class*="expiring"].selected td,
#customer-table tbody tr[class*="sap-het-han"].selected,
#customer-table tbody tr[class*="sap-het-han"].selected td,
#customer-table tbody tr[class~="soon"].selected,
#customer-table tbody tr[class~="soon"].selected td,
#customer-table tbody tr[class~="warning"].selected,
#customer-table tbody tr[class~="warning"].selected td {
  background:#ffe79a !important;
  color:#624b00 !important;
}

#customer-table tbody tr[class*="expired"]:hover,
#customer-table tbody tr[class*="expired"]:hover td,
#customer-table tbody tr[class*="het-han"]:hover,
#customer-table tbody tr[class*="het-han"]:hover td,
#customer-table tbody tr[class*="overdue"]:hover,
#customer-table tbody tr[class*="overdue"]:hover td {
  background:#ffc9c9 !important;
  color:#8b1515 !important;
}

#customer-table tbody tr[class*="expiring"]:hover,
#customer-table tbody tr[class*="expiring"]:hover td,
#customer-table tbody tr[class*="sap-het-han"]:hover,
#customer-table tbody tr[class*="sap-het-han"]:hover td,
#customer-table tbody tr[class~="soon"]:hover,
#customer-table tbody tr[class~="soon"]:hover td,
#customer-table tbody tr[class~="warning"]:hover,
#customer-table tbody tr[class~="warning"]:hover td {
  background:#ffe79a !important;
  color:#624b00 !important;
}

/* Mobile dùng td dạng block; ép cả ô theo màu cảnh báo để không bị nền trắng ghi đè. */
@media (max-width:640px){
  #customer-table tbody tr[class*="expired"] td,
  #customer-table tbody tr[class*="het-han"] td,
  #customer-table tbody tr[class*="overdue"] td,
  #customer-table tbody tr[class~="danger"] td,
  #customer-table tbody tr[class~="red"] td{
    background:#ffe0e0 !important;
    color:#9b1c1c !important;
  }

  #customer-table tbody tr[class*="expiring"] td,
  #customer-table tbody tr[class*="sap-het-han"] td,
  #customer-table tbody tr[class*="sap_het_han"] td,
  #customer-table tbody tr[class~="soon"] td,
  #customer-table tbody tr[class~="warning"] td,
  #customer-table tbody tr[class~="yellow"] td{
    background:#fff2b8 !important;
    color:#6f5600 !important;
  }
}

/* =========================================================
   v10 - GIỮ NGUYÊN GIAO DIỆN, FIX 3 VẤN ĐỀ
   1) Sắp hết hạn giữ màu vàng theo tag hiện có từ backend.
   2) Không để CSS responsive nền trắng ghi đè màu cảnh báo.
   3) Ô ngày dùng native calendar thật trên PC + iPad + mobile.
   ========================================================= */

/* Cảnh báo vàng: mở rộng selector theo đúng class/tag hiện có,
   không tính lại ngày và không thay đổi nghiệp vụ. */
#customer-table tbody tr[class*="expir"],
#customer-table tbody tr[class*="soon"],
#customer-table tbody tr[class*="warning"],
#customer-table tbody tr[class*="sap"],
#customer-table tbody tr[class*="sắp"],
#customer-table tbody tr[class*="yellow"]{
  background:#fff2b8 !important;
  color:#6f5600 !important;
}
#customer-table tbody tr[class*="expir"] td,
#customer-table tbody tr[class*="soon"] td,
#customer-table tbody tr[class*="warning"] td,
#customer-table tbody tr[class*="sap"] td,
#customer-table tbody tr[class*="sắp"] td,
#customer-table tbody tr[class*="yellow"] td{
  background:#fff2b8 !important;
  color:#6f5600 !important;
}

/* Hết hạn luôn ưu tiên hơn các selector cảnh báo chung. */
#customer-table tbody tr[class*="expired"],
#customer-table tbody tr[class*="overdue"],
#customer-table tbody tr[class*="het-han"],
#customer-table tbody tr[class*="het_han"]{
  background:#ffe0e0 !important;
  color:#9b1c1c !important;
}
#customer-table tbody tr[class*="expired"] td,
#customer-table tbody tr[class*="overdue"] td,
#customer-table tbody tr[class*="het-han"] td,
#customer-table tbody tr[class*="het_han"] td{
  background:#ffe0e0 !important;
  color:#9b1c1c !important;
}

/* Mobile/card layout có background trắng riêng; cảnh báo phải thắng rule đó. */
@media (max-width:640px){
  #customer-table tbody tr[class*="expir"] td,
  #customer-table tbody tr[class*="soon"] td,
  #customer-table tbody tr[class*="warning"] td,
  #customer-table tbody tr[class*="sap"] td,
  #customer-table tbody tr[class*="sắp"] td,
  #customer-table tbody tr[class*="yellow"] td{
    background:#fff2b8 !important;
    color:#6f5600 !important;
  }
  #customer-table tbody tr[class*="expired"] td,
  #customer-table tbody tr[class*="overdue"] td,
  #customer-table tbody tr[class*="het-han"] td,
  #customer-table tbody tr[class*="het_han"] td{
    background:#ffe0e0 !important;
    color:#9b1c1c !important;
  }
}

/* Native date control used by app.js as the actual calendar trigger. */
.date-field-wrap{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  width:100% !important;
  min-width:0 !important;
}
.date-field-wrap > input[data-date-field="1"]{
  min-width:0 !important;
  flex:1 1 auto !important;
  width:100% !important;
  box-sizing:border-box !important;
}
.date-field-wrap > input[type="date"]{
  position:absolute !important;
  right:0 !important;
  top:0 !important;
  width:34px !important;
  height:100% !important;
  opacity:.01 !important;
  pointer-events:auto !important;
  z-index:3 !important;
  cursor:pointer !important;
}
.date-field-wrap > .date-calendar-btn{
  margin-left:auto !important;
  pointer-events:none !important;
  position:relative !important;
  z-index:1 !important;
  flex:0 0 30px !important;
}


/* =========================================================
   v11 - FIX CHÍNH XÁC MÀU SẮP HẾT HẠN
   Không thay đổi logic/API/database.
   Backend vẫn quyết định row.tag; CSS chỉ hiển thị đúng màu.

   Quan trọng:
   - Không dùng selector chung [class*="expir"] vì nó có thể
     chồng lên các class trạng thái khác.
   - Các trạng thái "soon/expiring" được ưu tiên màu VÀNG.
   - Các trạng thái "expired/overdue/het-han" là ĐỎ.
   ========================================================= */

/* SẮP HẾT HẠN = VÀNG */
#customer-table tbody tr[class~="expiring"],
#customer-table tbody tr[class~="expiring-row"],
#customer-table tbody tr[class~="expiring_row"],
#customer-table tbody tr[class~="soon"],
#customer-table tbody tr[class~="soon-expiry"],
#customer-table tbody tr[class~="soon_expiry"],
#customer-table tbody tr[class~="warning"],
#customer-table tbody tr[class~="warning-row"],
#customer-table tbody tr[class~="warning_row"],
#customer-table tbody tr[class~="sap-het-han"],
#customer-table tbody tr[class~="sap_het_han"],
#customer-table tbody tr[class~="yellow"],
#customer-table tbody tr[class*="expiring-"],
#customer-table tbody tr[class*="expiring_"],
#customer-table tbody tr[class*="soon-expiry"],
#customer-table tbody tr[class*="soon_expiry"],
#customer-table tbody tr[class*="sap-het-han"],
#customer-table tbody tr[class*="sap_het_han"]{
  background:#fff2b8 !important;
  color:#6f5600 !important;
}

#customer-table tbody tr[class~="expiring"] td,
#customer-table tbody tr[class~="expiring-row"] td,
#customer-table tbody tr[class~="expiring_row"] td,
#customer-table tbody tr[class~="soon"] td,
#customer-table tbody tr[class~="soon-expiry"] td,
#customer-table tbody tr[class~="soon_expiry"] td,
#customer-table tbody tr[class~="warning"] td,
#customer-table tbody tr[class~="warning-row"] td,
#customer-table tbody tr[class~="warning_row"] td,
#customer-table tbody tr[class~="sap-het-han"] td,
#customer-table tbody tr[class~="sap_het_han"] td,
#customer-table tbody tr[class~="yellow"] td,
#customer-table tbody tr[class*="expiring-"] td,
#customer-table tbody tr[class*="expiring_"] td,
#customer-table tbody tr[class*="soon-expiry"] td,
#customer-table tbody tr[class*="soon_expiry"] td,
#customer-table tbody tr[class*="sap-het-han"] td,
#customer-table tbody tr[class*="sap_het_han"] td{
  background:#fff2b8 !important;
  color:#6f5600 !important;
}

/* Khi chọn dòng sắp hết hạn */
#customer-table tbody tr[class~="expiring"].selected,
#customer-table tbody tr[class~="expiring"].selected td,
#customer-table tbody tr[class~="expiring-row"].selected,
#customer-table tbody tr[class~="expiring-row"].selected td,
#customer-table tbody tr[class~="expiring_row"].selected,
#customer-table tbody tr[class~="expiring_row"].selected td,
#customer-table tbody tr[class~="soon"].selected,
#customer-table tbody tr[class~="soon"].selected td,
#customer-table tbody tr[class~="soon-expiry"].selected,
#customer-table tbody tr[class~="soon-expiry"].selected td,
#customer-table tbody tr[class~="soon_expiry"].selected,
#customer-table tbody tr[class~="soon_expiry"].selected td,
#customer-table tbody tr[class~="warning"].selected,
#customer-table tbody tr[class~="warning"].selected td,
#customer-table tbody tr[class~="warning-row"].selected,
#customer-table tbody tr[class~="warning-row"].selected td,
#customer-table tbody tr[class~="warning_row"].selected,
#customer-table tbody tr[class~="warning_row"].selected td{
  background:#ffe79a !important;
  color:#624b00 !important;
}

/* Hover sắp hết hạn */
#customer-table tbody tr[class~="expiring"]:hover,
#customer-table tbody tr[class~="expiring"]:hover td,
#customer-table tbody tr[class~="expiring-row"]:hover,
#customer-table tbody tr[class~="expiring-row"]:hover td,
#customer-table tbody tr[class~="expiring_row"]:hover,
#customer-table tbody tr[class~="expiring_row"]:hover td,
#customer-table tbody tr[class~="soon"]:hover,
#customer-table tbody tr[class~="soon"]:hover td,
#customer-table tbody tr[class~="soon-expiry"]:hover,
#customer-table tbody tr[class~="soon-expiry"]:hover td,
#customer-table tbody tr[class~="soon_expiry"]:hover,
#customer-table tbody tr[class~="soon_expiry"]:hover td,
#customer-table tbody tr[class~="warning"]:hover,
#customer-table tbody tr[class~="warning"]:hover td{
  background:#ffe79a !important;
  color:#624b00 !important;
}

/* Mobile/card: vẫn giữ vàng */
@media (max-width:640px){
  #customer-table tbody tr[class~="expiring"] td,
  #customer-table tbody tr[class~="expiring-row"] td,
  #customer-table tbody tr[class~="expiring_row"] td,
  #customer-table tbody tr[class~="soon"] td,
  #customer-table tbody tr[class~="soon-expiry"] td,
  #customer-table tbody tr[class~="soon_expiry"] td,
  #customer-table tbody tr[class~="warning"] td,
  #customer-table tbody tr[class~="warning-row"] td,
  #customer-table tbody tr[class~="warning_row"] td,
  #customer-table tbody tr[class~="sap-het-han"] td,
  #customer-table tbody tr[class~="sap_het_han"] td,
  #customer-table tbody tr[class~="yellow"] td{
    background:#fff2b8 !important;
    color:#6f5600 !important;
  }
}

/*
   HẾT HẠN = ĐỎ
   Đặt sau các rule vàng để trạng thái expired thật sự luôn đỏ.
   Không dùng [class*="expir"] ở đây.
*/
#customer-table tbody tr[class~="expired"],
#customer-table tbody tr[class~="expired-row"],
#customer-table tbody tr[class~="expired_row"],
#customer-table tbody tr[class~="overdue"],
#customer-table tbody tr[class~="het-han"],
#customer-table tbody tr[class~="het_han"],
#customer-table tbody tr[class~="danger"],
#customer-table tbody tr[class~="red"]{
  background:#ffe0e0 !important;
  color:#9b1c1c !important;
}

#customer-table tbody tr[class~="expired"] td,
#customer-table tbody tr[class~="expired-row"] td,
#customer-table tbody tr[class~="expired_row"] td,
#customer-table tbody tr[class~="overdue"] td,
#customer-table tbody tr[class~="het-han"] td,
#customer-table tbody tr[class~="het_han"] td,
#customer-table tbody tr[class~="danger"] td,
#customer-table tbody tr[class~="red"] td{
  background:#ffe0e0 !important;
  color:#9b1c1c !important;
}


/* =========================================================
   v12 - KHÔI PHỤC ĐÚNG LOGIC server.py CŨ
   server.py:
       expired        = ngày hết hạn < hôm nay
       nearly_expired = hôm nay <= ngày hết hạn <= hôm nay + 30 ngày
       valid          = ngày hết hạn > hôm nay + 30 ngày

   Không thay đổi JS/API/database.
   Quan trọng: "nearly_expired" chứa chữ "expired", vì vậy các
   selector kiểu [class*="expired"] trước đây đã vô tình tô đỏ
   khách hàng sắp hết hạn. Rule dưới đây ghi đè đúng trạng thái
   nearly_expired thành màu vàng.
   ========================================================= */

/* SẮP HẾT HẠN THEO SERVER.PY CŨ = VÀNG */
#customer-table tbody tr.nearly_expired,
#customer-table tbody tr.nearly_expired td,
#customer-table tbody tr[class~="nearly_expired"]{
  background:#fff2b8 !important;
  color:#6f5600 !important;
}

/* Hover */
#customer-table tbody tr.nearly_expired:hover,
#customer-table tbody tr.nearly_expired:hover td{
  background:#ffe79a !important;
  color:#624b00 !important;
}

/* Khi chọn dòng */
#customer-table tbody tr.nearly_expired.selected,
#customer-table tbody tr.nearly_expired.selected td{
  background:#ffe79a !important;
  color:#624b00 !important;
}

/* Mobile/card */
@media (max-width:640px){
  #customer-table tbody tr.nearly_expired td{
    background:#fff2b8 !important;
    color:#6f5600 !important;
  }
}



/* =========================================================
   ADMIN ACCOUNT MANAGEMENT
   Chỉ hiển thị nút/màn hình này cho tài khoản quản trị.
   ========================================================= */
.account-admin-button{
  flex:0 0 auto;
  min-height:32px;
  border:1px solid rgba(255,255,255,.42);
  background:rgba(255,255,255,.12);
  color:#fff;
  border-radius:7px;
  padding:5px 10px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.account-admin-button:hover{background:rgba(255,255,255,.2)}
.account-admin-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(15,25,35,.42);
}
.account-admin-modal.open{display:flex}
.account-admin-card{
  width:min(920px,100%);
  max-height:min(760px,calc(100vh - 32px));
  overflow:auto;
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.25);
  padding:16px;
}
.account-admin-head{
  display:flex;
  align-items:flex-start;
  gap:12px;
  justify-content:space-between;
  margin-bottom:14px;
}
.account-admin-head h3{margin:0;font-size:18px}
.account-admin-subtitle{margin-top:3px;color:var(--muted);font-size:12px}
.account-admin-close{
  width:34px;height:34px;border:1px solid var(--line-strong);border-radius:7px;
  background:#fff;font-size:22px;line-height:1;cursor:pointer;color:var(--text)
}
.account-admin-section-title{font-weight:700;margin:10px 0 7px}
.account-sepay-settings{margin-bottom:12px;}
.account-sepay-settings .account-admin-create-grid{grid-template-columns:1fr 1fr 1fr auto;}
.account-sepay-settings .account-admin-create-grid button{align-self:end;white-space:nowrap;}
@media (max-width: 640px){.account-sepay-settings .account-admin-create-grid{grid-template-columns:1fr;}.account-sepay-settings .account-admin-create-grid button{width:100%;}}
.account-admin-create{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px;
  margin-bottom:14px;
}
.account-admin-create-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;
  gap:8px;
  align-items:end;
}
.account-admin-create-grid label{display:grid;gap:4px;font-weight:600;font-size:12px}
.account-admin-create-grid input{
  height:34px;width:100%;border:1px solid var(--line-strong);border-radius:6px;padding:5px 8px;
}
.account-admin-create-grid button{
  min-height:34px;border:1px solid var(--primary);border-radius:6px;padding:6px 12px;
  background:var(--primary);color:#fff;font-weight:700;cursor:pointer
}
.account-admin-table-wrap{overflow:auto;border:1px solid var(--line);border-radius:8px}
.account-admin-table{width:100%;border-collapse:collapse;min-width:680px}
.account-admin-table th,.account-admin-table td{padding:8px;border-bottom:1px solid #edf0f3;text-align:left;vertical-align:middle}
.account-admin-table th{background:#edf2f6;white-space:nowrap}
.account-admin-table tr:last-child td{border-bottom:0}
.account-actions{display:flex;gap:5px;flex-wrap:wrap}
.account-actions button{
  border:1px solid var(--line-strong);background:#fff;border-radius:5px;padding:5px 8px;cursor:pointer;font-weight:600;font-size:12px
}
.account-actions button:hover{background:#f0f5f9}
.account-actions button.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.account-status{display:inline-block;padding:3px 7px;border-radius:999px;font-size:11px;font-weight:700}
.account-status.active{background:#e5f6ec;color:#18794e}
.account-status.locked{background:#fde8e7;color:#b42318}
.account-you{font-size:11px;color:var(--muted);font-weight:500}
.account-empty{text-align:center!important;color:var(--muted);padding:18px!important}
.account-admin-note{margin-top:8px;color:var(--muted);font-size:11px}

@media (max-width:640px){
  .account-admin-button{padding:5px 7px;font-size:12px}
  .account-admin-modal{padding:8px}
  .account-admin-card{padding:10px;border-radius:9px;max-height:calc(100vh - 16px)}
  .account-admin-create-grid{grid-template-columns:1fr}
  .account-admin-create-grid button{width:100%}
}


/* ===== ADMIN ACCOUNT BUTTON - VISIBLE IN TOOLBAR ===== */
.toolbar .account-admin-button{
  flex:0 0 auto;
  min-height:32px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--text);
  border-radius:6px;
  padding:5px 10px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap;
}
.toolbar .account-admin-button:hover{
  background:#eef4f8;
}
@media (max-width:640px){
  .toolbar .account-admin-button{
    min-height:34px;
    padding:5px 8px;
    font-size:13px;
  }
}

/* =========================================================
   SePay - Khách hàng thanh toán
   Chỉ bổ sung giao diện, không thay đổi các bảng/logic hiện có.
   ========================================================= */
.payment-button{white-space:nowrap}
.sepay-debt-settings-button{white-space:nowrap;font-weight:700;border-color:#9fb8d0!important;background:#f8fbff!important;color:#245b8d!important}
.sepay-debt-settings-button:hover{background:#eef6ff!important;border-color:#7ea5c7!important}
#sepay-payment-modal{display:none;position:fixed;inset:0;z-index:100000}
#sepay-payment-modal.open{display:block}
.sepay-payment-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.48)}
.sepay-payment-card{position:relative;width:min(520px,calc(100vw - 28px));max-height:calc(100vh - 28px);overflow:auto;margin:7vh auto 0;background:#fff;border:1px solid #d5dce5;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:18px;box-sizing:border-box}
.sepay-payment-head{display:flex;align-items:center;justify-content:space-between;font-size:20px;margin-bottom:14px}
.sepay-payment-head button{border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:#64748b}
.sepay-payment-sepay-note{margin-bottom:12px;padding:10px 12px;border:1px solid #bbf7d0;border-radius:8px;background:#f0fdf4;color:#166534;font-weight:600}
.sepay-payment-summary{margin:14px 0;padding:12px;border:1px solid #dbe3ec;border-radius:8px;background:#f7fafc;line-height:1.8}
.sepay-debt-total{font-size:18px;margin-top:3px}
.sepay-create-btn{width:100%;margin-bottom:12px}
.sepay-payment-result{text-align:center;border-top:1px solid #e2e8f0;padding-top:14px}
.sepay-code{margin-bottom:8px;font-size:16px}
.sepay-code-note{margin:4px 0 10px;color:#64748b;font-size:13px}
.sepay-qr{display:block;width:min(320px,80vw);height:auto;margin:10px auto 14px;border:1px solid #e2e8f0;border-radius:6px}
.sepay-status{margin-top:12px;padding:10px;border-radius:7px;font-weight:700}
.sepay-status.pending{background:#fff7d6;color:#765b00}
.sepay-status.partial{background:#fff7d6;color:#765b00}
.sepay-status.paid{background:#dcfce7;color:#166534}
.sepay-hint{margin-top:8px;color:#64748b;font-size:13px}
@media(max-width:640px){
  .sepay-payment-card{margin:14px auto 0;max-height:calc(100vh - 28px)}
  .payment-button{width:100%}
}

/* SePay: nút chia sẻ QR - chỉ bổ sung giao diện, không thay đổi logic hiện có */
.sepay-share-row{
  display:flex;
  justify-content:center;
  margin:10px 0 12px;
}
.sepay-share-btn{
  appearance:none;
  border:1px solid #b9c8d8;
  background:#fff;
  color:#1e3a5f;
  border-radius:8px;
  padding:9px 16px;
  font:inherit;
  font-weight:600;
  cursor:pointer;
}
.sepay-share-btn:hover{background:#f4f8fc}
.sepay-share-btn:active{transform:translateY(1px)}

#sepay-settings-modal{z-index:10020}
#sepay-settings-modal .account-admin-card{max-width:760px}
#sepay-settings-modal .account-admin-create-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
#sepay-settings-modal .account-admin-create-grid label{display:flex;flex-direction:column;gap:6px}
#sepay-settings-modal .account-admin-create-grid input{min-height:38px;padding:8px 10px}
@media(max-width:640px){#sepay-settings-modal .account-admin-create-grid{grid-template-columns:1fr}}


.sepay-share-row{flex-wrap:wrap;gap:8px}
.sepay-platform-row{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:0 0 12px}
.sepay-platform-btn{appearance:none;border:1px solid #cbd5e1;background:#fff;color:#1e3a5f;border-radius:7px;padding:7px 11px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.sepay-platform-btn:hover{background:#f4f8fc}
@media(max-width:640px){
  .sepay-share-btn,.sepay-platform-btn{min-height:38px}
}

/* Quản lý tài khoản - bổ sung nhãn quyền, không ảnh hưởng các màn hình khác. */
.account-role{display:inline-block;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700}
.account-role.admin{background:#e8f1ff;color:#1d5fbf}
.account-role.user{background:#f1f5f9;color:#475569}
.account-actions button:disabled{opacity:.55;cursor:not-allowed}



/* IMPORT / ADMIN CUSTOMER TABLE FINAL FIX
   - User thường: đúng 6 cột.
   - Admin: đúng 7 cột, cột cuối hiển thị owner.
   - Không cho cột ngầm/td thừa làm giãn hoặc tạo khoảng trống bất thường.
*/
#customer-table .admin-owner-col{display:table-cell;}
html[data-admin="0"] #customer-table .admin-owner-col{display:none;}
@media (min-width:641px){
  #customer-table{table-layout:fixed !important;}
  #customer-table .admin-owner-th,
  #customer-table .admin-owner-col{width:10% !important;}
  html[data-admin="1"] #customer-table th:nth-child(1),
  html[data-admin="1"] #customer-table td:nth-child(1){width:11% !important;}
  html[data-admin="1"] #customer-table th:nth-child(2),
  html[data-admin="1"] #customer-table td:nth-child(2){width:31% !important;}
  html[data-admin="1"] #customer-table th:nth-child(3),
  html[data-admin="1"] #customer-table td:nth-child(3){width:14% !important;}
  html[data-admin="1"] #customer-table th:nth-child(4),
  html[data-admin="1"] #customer-table td:nth-child(4){width:14% !important;}
  html[data-admin="1"] #customer-table th:nth-child(5),
  html[data-admin="1"] #customer-table td:nth-child(5){width:10% !important;}
  html[data-admin="1"] #customer-table th:nth-child(6),
  html[data-admin="1"] #customer-table td:nth-child(6){width:10% !important;}
}

/* =========================================================
   FINAL TABLE COMPACT / NO-WRAP v8
   - Desktop/tablet: các cột được thu gọn theo tỷ lệ hợp lý.
   - Nội dung dài không xuống nhiều dòng; dùng ellipsis thay vì phá chiều cao.
   - Tên khách hàng được ưu tiên chiều rộng lớn nhất.
   - Áp dụng đồng bộ: Khách hàng, Công nợ, BCCS, Đối tác, Chính sách, User.
   - Không thay đổi API/database/nghiệp vụ.
   ========================================================= */
@media (min-width:641px){
  #customer-table,
  #debt .grid-wrap table,
  #bccs .grid-wrap table,
  #partner .grid-wrap table,
  #policy .grid-wrap table,
  #user .grid-wrap table{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    table-layout:fixed !important;
  }

  #customer-table th,
  #customer-table td,
  #debt .grid-wrap th,
  #debt .grid-wrap td,
  #bccs .grid-wrap th,
  #bccs .grid-wrap td,
  #partner .grid-wrap th,
  #partner .grid-wrap td,
  #policy .grid-wrap th,
  #policy .grid-wrap td,
  #user .grid-wrap th,
  #user .grid-wrap td{
    box-sizing:border-box !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    word-break:normal !important;
    overflow-wrap:normal !important;
    vertical-align:middle !important;
    line-height:1.2 !important;
  }

  /* KHÁCH HÀNG - Admin có thêm cột User tạo */
  html[data-admin="1"] #customer-table th:nth-child(1), html[data-admin="1"] #customer-table td:nth-child(1){width:10% !important;}
  html[data-admin="1"] #customer-table th:nth-child(2), html[data-admin="1"] #customer-table td:nth-child(2){width:30% !important;}
  html[data-admin="1"] #customer-table th:nth-child(3), html[data-admin="1"] #customer-table td:nth-child(3){width:12% !important;}
  html[data-admin="1"] #customer-table th:nth-child(4), html[data-admin="1"] #customer-table td:nth-child(4){width:17% !important;}
  html[data-admin="1"] #customer-table th:nth-child(5), html[data-admin="1"] #customer-table td:nth-child(5){width:11% !important;}
  html[data-admin="1"] #customer-table th:nth-child(6), html[data-admin="1"] #customer-table td:nth-child(6){width:10% !important;}
  html[data-admin="1"] #customer-table th:nth-child(7), html[data-admin="1"] #customer-table td:nth-child(7){width:10% !important;}

  html[data-admin="0"] #customer-table th:nth-child(1), html[data-admin="0"] #customer-table td:nth-child(1){width:11% !important;}
  html[data-admin="0"] #customer-table th:nth-child(2), html[data-admin="0"] #customer-table td:nth-child(2){width:34% !important;}
  html[data-admin="0"] #customer-table th:nth-child(3), html[data-admin="0"] #customer-table td:nth-child(3){width:14% !important;}
  html[data-admin="0"] #customer-table th:nth-child(4), html[data-admin="0"] #customer-table td:nth-child(4){width:17% !important;}
  html[data-admin="0"] #customer-table th:nth-child(5), html[data-admin="0"] #customer-table td:nth-child(5){width:12% !important;}
  html[data-admin="0"] #customer-table th:nth-child(6), html[data-admin="0"] #customer-table td:nth-child(6){width:12% !important;}

  /* CÔNG NỢ - Nội dung dài nhất được ưu tiên */
  #debt .grid-wrap th:nth-child(1), #debt .grid-wrap td:nth-child(1){width:9% !important;}
  #debt .grid-wrap th:nth-child(2), #debt .grid-wrap td:nth-child(2){width:9% !important;}
  #debt .grid-wrap th:nth-child(3), #debt .grid-wrap td:nth-child(3){width:46% !important;}
  #debt .grid-wrap th:nth-child(4), #debt .grid-wrap td:nth-child(4){width:9% !important;}
  #debt .grid-wrap th:nth-child(5), #debt .grid-wrap td:nth-child(5){width:9% !important;}
  #debt .grid-wrap th:nth-child(6), #debt .grid-wrap td:nth-child(6){width:9% !important;}
  #debt .grid-wrap th:nth-child(7), #debt .grid-wrap td:nth-child(7){width:9% !important;}

  /* BCCS */
  #bccs .grid-wrap th:nth-child(1), #bccs .grid-wrap td:nth-child(1){width:10% !important;}
  #bccs .grid-wrap th:nth-child(2), #bccs .grid-wrap td:nth-child(2){width:40% !important;}
  #bccs .grid-wrap th:nth-child(3), #bccs .grid-wrap td:nth-child(3){width:15% !important;}
  #bccs .grid-wrap th:nth-child(4), #bccs .grid-wrap td:nth-child(4){width:9% !important;}
  #bccs .grid-wrap th:nth-child(5), #bccs .grid-wrap td:nth-child(5){width:8% !important;}
  #bccs .grid-wrap th:nth-child(6), #bccs .grid-wrap td:nth-child(6){width:9% !important;}
  #bccs .grid-wrap th:nth-child(7), #bccs .grid-wrap td:nth-child(7){width:9% !important;}

  /* ĐỐI TÁC */
  #partner .grid-wrap th:nth-child(1), #partner .grid-wrap td:nth-child(1){width:36% !important;}
  #partner .grid-wrap th:nth-child(2), #partner .grid-wrap td:nth-child(2){width:16% !important;}
  #partner .grid-wrap th:nth-child(3), #partner .grid-wrap td:nth-child(3){width:16% !important;}
  #partner .grid-wrap th:nth-child(4), #partner .grid-wrap td:nth-child(4){width:16% !important;}
  #partner .grid-wrap th:nth-child(5), #partner .grid-wrap td:nth-child(5){width:16% !important;}

  /* CHÍNH SÁCH */
  #policy .grid-wrap th:nth-child(1), #policy .grid-wrap td:nth-child(1){width:11% !important;}
  #policy .grid-wrap th:nth-child(2), #policy .grid-wrap td:nth-child(2){width:62% !important;}
  #policy .grid-wrap th:nth-child(3), #policy .grid-wrap td:nth-child(3){width:9% !important;}
  #policy .grid-wrap th:nth-child(4), #policy .grid-wrap td:nth-child(4){width:9% !important;}
  #policy .grid-wrap th:nth-child(5), #policy .grid-wrap td:nth-child(5){width:9% !important;}

  /* USER */
  #user .grid-wrap th:nth-child(1), #user .grid-wrap td:nth-child(1){width:7% !important;}
  #user .grid-wrap th:nth-child(2), #user .grid-wrap td:nth-child(2){width:8% !important;}
  #user .grid-wrap th:nth-child(3), #user .grid-wrap td:nth-child(3){width:20% !important;}
  #user .grid-wrap th:nth-child(4), #user .grid-wrap td:nth-child(4){width:9% !important;}
  #user .grid-wrap th:nth-child(5), #user .grid-wrap td:nth-child(5){width:12% !important;}
  #user .grid-wrap th:nth-child(6), #user .grid-wrap td:nth-child(6){width:7% !important;}
  #user .grid-wrap th:nth-child(7), #user .grid-wrap td:nth-child(7){width:7% !important;}
  #user .grid-wrap th:nth-child(8), #user .grid-wrap td:nth-child(8){width:7% !important;}
  #user .grid-wrap th:nth-child(9), #user .grid-wrap td:nth-child(9){width:9% !important;}
  #user .grid-wrap th:nth-child(10), #user .grid-wrap td:nth-child(10){width:7% !important;}
  #user .grid-wrap th:nth-child(11), #user .grid-wrap td:nth-child(11){width:7% !important;}

  /* Cột tên/nội dung dài: không tăng chiều cao dòng, hiển thị phần đầu + ... */
  #customer-table td:nth-child(2),
  #debt .grid-wrap td:nth-child(3),
  #bccs .grid-wrap td:nth-child(2),
  #partner .grid-wrap td:nth-child(1),
  #policy .grid-wrap td:nth-child(2),
  #user .grid-wrap td:nth-child(3){
    text-overflow:ellipsis !important;
  }
}

/* Trên mobile vẫn giữ cơ chế card hiện tại của hệ thống, không áp dụng
   nowrap/ellipsis của bản desktop. */

/* =========================================================
   FINAL COLUMN BALANCE v9
   - Không dành quá nhiều diện tích cho các cột ngắn của bảng KH.
   - Tên khách hàng là cột ưu tiên: được cấp phần lớn chiều rộng còn lại
     và được phép xuống dòng để HIỂN THỊ ĐẦY ĐỦ, không ellipsis.
   - Các cột MST/Dịch vụ/Quản lý/SĐT/Ngày/User tạo giữ gọn, không xuống dòng.
   - Các bảng nghiệp vụ khác cũng ưu tiên cột nội dung dài thay vì cắt nội dung.
   ========================================================= */
@media (min-width:641px){
  /* KHÁCH HÀNG */
  #customer-table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }

  #customer-table th,
  #customer-table td{
    box-sizing:border-box !important;
    min-width:0 !important;
  }

  /* Admin: 7 cột, tên KH chiếm 42%; 5 cột ngắn được thu gọn. */
  html[data-admin="1"] #customer-table th:nth-child(1),
  html[data-admin="1"] #customer-table td:nth-child(1){width:9% !important;}
  html[data-admin="1"] #customer-table th:nth-child(2),
  html[data-admin="1"] #customer-table td:nth-child(2){width:40% !important;}
  html[data-admin="1"] #customer-table th:nth-child(3),
  html[data-admin="1"] #customer-table td:nth-child(3){width:15% !important;}
  html[data-admin="1"] #customer-table th:nth-child(4),
  html[data-admin="1"] #customer-table td:nth-child(4){width:15% !important;}
  html[data-admin="1"] #customer-table th:nth-child(5),
  html[data-admin="1"] #customer-table td:nth-child(5){width:7% !important;}
  html[data-admin="1"] #customer-table th:nth-child(6),
  html[data-admin="1"] #customer-table td:nth-child(6){width:7% !important;}
  html[data-admin="1"] #customer-table th:nth-child(7),
  html[data-admin="1"] #customer-table td:nth-child(7){width:7% !important;}

  /* User thường: không có User tạo nên dành thêm chỗ cho tên KH. */
  html[data-admin="0"] #customer-table th:nth-child(1),
  html[data-admin="0"] #customer-table td:nth-child(1){width:9% !important;}
  html[data-admin="0"] #customer-table th:nth-child(2),
  html[data-admin="0"] #customer-table td:nth-child(2){width:44% !important;}
  html[data-admin="0"] #customer-table th:nth-child(3),
  html[data-admin="0"] #customer-table td:nth-child(3){width:12% !important;}
  html[data-admin="0"] #customer-table th:nth-child(4),
  html[data-admin="0"] #customer-table td:nth-child(4){width:12% !important;}
  html[data-admin="0"] #customer-table th:nth-child(5),
  html[data-admin="0"] #customer-table td:nth-child(5){width:9% !important;}
  html[data-admin="0"] #customer-table th:nth-child(6),
  html[data-admin="0"] #customer-table td:nth-child(6){width:8% !important;}

  /* Chỉ tên KH được phép xuống dòng. Không cắt bằng dấu ... */
  #customer-table th:nth-child(2),
  #customer-table td:nth-child(2){
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    vertical-align:top !important;
  }

  /* Các cột ngắn: giữ một dòng để bảng không phình chiều cao. */
  #customer-table th:not(:nth-child(2)),
  #customer-table td:not(:nth-child(2)){
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    vertical-align:middle !important;
  }

  /* Các bảng nghiệp vụ: ưu tiên cột nội dung/tên dài. */
  #debt .grid-wrap table,
  #bccs .grid-wrap table,
  #partner .grid-wrap table,
  #policy .grid-wrap table,
  #user .grid-wrap table{
    width:100% !important;
    min-width:0 !important;
    table-layout:fixed !important;
  }

  #debt .grid-wrap td:nth-child(3),
  #bccs .grid-wrap td:nth-child(2),
  #partner .grid-wrap td:nth-child(1),
  #policy .grid-wrap td:nth-child(2),
  #user .grid-wrap td:nth-child(3){
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    vertical-align:top !important;
  }
}


/* =========================================================
   SePay popup - giao diện gọn theo yêu cầu mới
   - Ẩn tiêu đề/subtitle, thông báo liên kết SePay và toàn bộ nút chia sẻ.
   - Giữ nút đóng nhưng đặt nổi ở góc phải.
   - Đồng nhất font/màu cho toàn bộ nội dung popup; phần công nợ không dùng
     cỡ chữ quá lớn hoặc màu khác biệt.
   ========================================================= */
#sepay-payment-modal .sepay-payment-card{
  font-family:Segoe UI,Arial,sans-serif;
  color:var(--text);
}
#sepay-payment-modal .sepay-payment-head,
#sepay-payment-modal .sepay-payment-sepay-note,
#sepay-payment-modal .sepay-share-row,
#sepay-payment-modal .sepay-platform-row{
  display:none !important;
}
#sepay-payment-modal .sepay-payment-card{
  position:relative;
  padding:18px;
}
#sepay-payment-modal .sepay-payment-close-float{
  position:absolute;
  top:10px;
  right:12px;
  z-index:3;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:#64748b;
  font-family:Segoe UI,Arial,sans-serif;
  font-size:28px;
  line-height:34px;
  font-weight:400;
  cursor:pointer;
}
#sepay-payment-modal .sepay-payment-close-float:hover{color:#25313d}
#sepay-payment-modal .sepay-payment-summary{
  margin:2px 0 14px;
  padding:12px 14px;
  border:1px solid #dbe3ec;
  border-radius:8px;
  background:#f7fafc;
  color:#166534;
  font-family:Segoe UI,Arial,sans-serif;
  font-size:16px;
  line-height:1.7;
  font-weight:600;
}
#sepay-payment-modal .sepay-payment-summary b{
  color:#166534;
  font-family:Segoe UI,Arial,sans-serif;
  font-size:16px;
  font-weight:600;
}
#sepay-payment-modal .sepay-payment-summary .sepay-debt-total{
  margin-top:4px;
  font-size:18px;
  font-weight:700;
}
#sepay-payment-modal .sepay-payment-result{
  border-top:1px solid #e2e8f0;
  padding-top:14px;
  color:var(--text);
  font-family:Segoe UI,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
}
#sepay-payment-modal .sepay-code,
#sepay-payment-modal .sepay-code-note,
#sepay-payment-modal .sepay-status,
#sepay-payment-modal .sepay-hint{
  font-family:Segoe UI,Arial,sans-serif;
}
#sepay-payment-modal .sepay-code{font-size:16px;font-weight:600}
#sepay-payment-modal .sepay-code-note{font-size:13px}
#sepay-payment-modal .sepay-hint{font-size:13px}