/* =========================================================
   TOPOS_HOADON - RESPONSIVE LAYER
   ---------------------------------------------------------
   Base/component styling lives in /styles.css.
   This file is the only place to change mobile/tablet layout.
   Breakpoints are mobile-first and override the shared UI.
   ========================================================= */

/* Tablet / compact desktop */
@media (max-width: 1050px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .attention,.quick-grid,.report-grid{grid-template-columns:1fr}
  .reconcile-layout,.detail-grid{grid-template-columns:1fr}
  .reconcile-guide{grid-template-columns:1fr}
  .result-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile navigation and content */
@media (max-width: 760px){
  body{overflow-x:hidden}

  .sidebar{
    width:280px;
    flex-basis:280px;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:8px 0 28px rgba(20,42,70,.18);
    z-index:80;
  }
  body.nav-open .sidebar{transform:translateX(0)}

  .brand{justify-content:flex-start;padding:14px 16px}
  .brand>div:last-child,.nav-item span,.nav-title,.sidebar-footer{display:block}
  .nav-title{padding:18px 17px 7px}
  .nav{padding:5px 9px}
  .nav-item{justify-content:flex-start;padding:12px 11px;min-height:44px}

  .main{margin-left:0;width:100%;min-width:0}
  .topbar{
    height:auto;
    min-height:64px;
    padding:10px 12px;
    gap:10px;
    align-items:flex-start;
  }
  .topbar h1{font-size:18px;line-height:22px}
  .topbar p{font-size:11px;line-height:15px;margin-top:2px}
  .topbar-title{min-width:0;flex:1}
  .user-actions{
    width:100%;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
  }
  .context-bar{margin-right:0;max-width:100%;}
  .scope-select{min-width:0;max-width:180px}
  .server-state{font-size:10px}
  .user-actions .btn{height:36px;padding:0 9px}

  .content{padding:12px 10px 24px}
  .cards{grid-template-columns:1fr 1fr;gap:8px}
  .stat-card{padding:12px;min-height:88px}
  .stat-value{font-size:21px;line-height:24px}

  .panel{margin-bottom:10px}
  .panel-head{padding:12px;align-items:flex-start;flex-wrap:wrap;gap:8px}
  .panel-body{padding:12px}
  .panel-head .btn{width:auto;min-height:36px}
  .quick-grid,.attention,.health-grid,.report-grid{padding:10px;gap:8px}

  .toolbar{padding:10px}
  .search-row{display:block}
  .toolbar-right{margin-top:8px;margin-left:0;display:flex;flex-wrap:wrap;width:100%}
  .toolbar-right .btn{flex:1 1 auto;min-height:36px}
  .search-box{min-width:0;width:100%}
  .filter-row{gap:6px}
  .filter-row>*{min-width:0;max-width:100%}
  input,select,.btn{min-height:36px}

  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:760px}
  .table-meta{padding:9px 10px;gap:8px;flex-wrap:wrap}
  .pager{justify-content:center;flex-wrap:wrap}

  .detail-grid{padding:10px;gap:10px}
  .detail-card{padding:11px}
  .kv{grid-template-columns:120px 1fr}
  .reconcile-layout{gap:10px}
  .reconcile-guide{gap:8px}
  .process-box{padding:11px}
  .process-steps{overflow-x:auto;padding-bottom:4px}
  .step{min-width:92px}
  .result-cards{grid-template-columns:1fr}

  .modal{width:calc(100% - 16px)!important;max-height:92vh;border-radius:9px}
  .modal-head{padding:12px}
  .modal-body{padding:12px;overflow:auto}
  /* Keep the desktop detail-modal polish from changing the mobile layout. */
  .modal.detail-view-modal .modal-body{padding:12px}
  .modal.detail-view-modal .detail-card{padding:11px}
  .modal.detail-view-modal .detail-card h3{font-size:13px}
  .modal.detail-view-modal .kv{grid-template-columns:120px minmax(0,1fr);font-size:11px;gap:7px}
  .modal-foot{padding:10px 12px;flex-wrap:wrap}
  .modal-foot .btn{flex:1 1 120px}
  .candidate-table,.misa-merge-candidate-table{overflow:auto;-webkit-overflow-scrolling:touch}

  .toast{left:10px;right:10px;bottom:10px;max-width:none}

  .mobile-menu-btn{
    display:inline-flex!important;
    flex:0 0 40px;
    width:40px;
    height:40px;
    align-items:center;
    justify-content:center;
    border:1px solid #d4dce6;
    border-radius:7px;
    background:#fff;
    color:#24344b;
    font-size:19px;
    line-height:1;
  }
  .mobile-nav-backdrop{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(12,28,45,.42);
    opacity:0;
    visibility:hidden;
    transition:opacity .2s ease,visibility .2s ease;
    z-index:70;
  }
  body.nav-open .mobile-nav-backdrop{opacity:1;visibility:visible}
}

/* Small phones */
@media (max-width: 480px){
  .topbar{display:grid;grid-template-columns:auto 1fr;align-items:start}
  .topbar-title{grid-column:2;grid-row:1}
  .mobile-menu-btn{grid-column:1;grid-row:1}
  .user-actions{grid-column:1 / -1;grid-row:2;justify-content:flex-start}
  .user-actions .context-bar{flex:1 1 100%}
  .scope-select{width:100%;max-width:none}

  .cards{grid-template-columns:1fr}
  .content{padding:10px 8px 20px}
  .panel-head h2{font-size:13px}
  .section-title{font-size:16px}
  .quick,.attention-item,.health-item{padding:11px}
  .kv{grid-template-columns:105px 1fr}
}

/* Avoid oversized controls on landscape phones */
@media (max-width: 760px) and (orientation: landscape){
  .sidebar{width:250px;flex-basis:250px}
  .content{padding-top:8px}
}


/* =========================================================
   MOBILE DATA LISTS
   ---------------------------------------------------------
   Wide desktop tables become stacked record cards on phones.
   This avoids clipping supplier names / MISA data while keeping
   the full multi-column table unchanged on desktop.
   ========================================================= */
@media (max-width: 760px){
  .filters{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:8px;
    margin:12px 0!important;
    width:100%;
  }
  .filters > *{width:100%;min-width:0!important;max-width:none!important}

  .mobile-card-table,
  .mobile-card-table tbody,
  .mobile-card-table tr,
  .mobile-card-table td{display:block;width:100%}
  .mobile-card-table{
    min-width:0!important;
    width:100%!important;
    border-collapse:separate;
    border-spacing:0;
    table-layout:auto;
  }
  .mobile-card-table thead{display:none}
  .mobile-card-table tbody{display:block}
  .mobile-card-table tr{
    margin:0 0 8px;
    border:1px solid #e2e7ed;
    border-radius:9px;
    background:#fff;
    overflow:hidden;
    box-shadow:0 1px 3px rgba(20,42,70,.04);
  }
  .mobile-card-table td{
    min-height:34px;
    padding:8px 10px;
    border-bottom:1px solid #edf0f4;
    white-space:normal!important;
    overflow-wrap:anywhere;
    word-break:normal;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    line-height:17px;
  }
  .mobile-card-table td:last-child{border-bottom:0}
  .mobile-card-table td::before{
    flex:0 0 92px;
    color:#748094;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  .mobile-card-table .primary-text{font-size:12px;line-height:17px;text-align:right;max-width:calc(100% - 102px)}
  .mobile-card-table .secondary{font-size:10px;text-align:right}
  .mobile-card-table .num{text-align:right;justify-content:space-between}
  .mobile-card-table .num::before{margin-right:auto}
  .mobile-card-table .status-tag-cell{justify-content:space-between}
  .mobile-card-table .row-action{font-size:11px;padding:4px 0}
  .mobile-card-table .btn{min-height:32px;height:auto;padding:7px 9px}

  /* Phiếu nhập: mã + ngày + NCC + trạng thái + thao tác */
  .mobile-pn-table th:nth-child(n+4),
  .mobile-pn-table td:nth-child(n+4):not(:nth-child(9)):not(:nth-child(10)){display:none}
  .mobile-pn-table td:nth-child(1)::before{content:"Mã nhập"}
  .mobile-pn-table td:nth-child(2)::before{content:"Ngày CT"}
  .mobile-pn-table td:nth-child(3)::before{content:"Nhà cung cấp"}
  .mobile-pn-table td:nth-child(9)::before{content:"Đối chiếu"}
  .mobile-pn-table td:nth-child(10)::before{content:"Thao tác"}
  .mobile-pn-table td:nth-child(3){display:block}
  .mobile-pn-table td:nth-child(3)::before{display:block;margin-bottom:3px}
  .mobile-pn-table td:nth-child(3) .primary-text,
  .mobile-pn-table td:nth-child(3) .secondary{display:block;max-width:none;text-align:left}

  /* Hóa đơn: các trường cốt lõi trên màn hình nhỏ */
  .mobile-hd-table th:nth-child(n+5),
  .mobile-hd-table td:nth-child(n+5):not(:nth-child(10)):not(:nth-child(11)){display:none}
  .mobile-hd-table td:nth-child(1)::before{content:"Ký hiệu"}
  .mobile-hd-table td:nth-child(2)::before{content:"Số HĐ"}
  .mobile-hd-table td:nth-child(3)::before{content:"Ngày"}
  .mobile-hd-table td:nth-child(4)::before{content:"Người bán"}
  .mobile-hd-table td:nth-child(10)::before{content:"Đối chiếu"}
  .mobile-hd-table td:nth-child(11)::before{content:"Thao tác"}
  .mobile-hd-table td:nth-child(4){display:block}
  .mobile-hd-table td:nth-child(4)::before{display:block;margin-bottom:3px}
  .mobile-hd-table td:nth-child(4) .primary-text{display:block;max-width:none;text-align:left}

  /* MISA đối chiếu / xử lý: MST và tiền vẫn có trong dữ liệu desktop,
     nhưng mobile ưu tiên mã chứng từ, số HĐ, ngày, NCC, trạng thái, thao tác. */
  .mobile-misa-table th:nth-child(1),.mobile-misa-table td:nth-child(1),
  .mobile-misa-table th:nth-child(2),.mobile-misa-table td:nth-child(2),
  .mobile-misa-table th:nth-child(7),.mobile-misa-table td:nth-child(7),
  .mobile-misa-table th:nth-child(8),.mobile-misa-table td:nth-child(8),
  .mobile-misa-table th:nth-child(9),.mobile-misa-table td:nth-child(9),
  .mobile-misa-issue-table th:nth-child(1),.mobile-misa-issue-table td:nth-child(1),
  .mobile-misa-issue-table th:nth-child(2),.mobile-misa-issue-table td:nth-child(2),
  .mobile-misa-issue-table th:nth-child(7),.mobile-misa-issue-table td:nth-child(7),
  .mobile-misa-issue-table th:nth-child(8),.mobile-misa-issue-table td:nth-child(8),
  .mobile-misa-issue-table th:nth-child(9),.mobile-misa-issue-table td:nth-child(9){display:none}

  .mobile-misa-table td:nth-child(3)::before,
  .mobile-misa-issue-table td:nth-child(3)::before{content:"Mã chứng từ"}
  .mobile-misa-table td:nth-child(4)::before,
  .mobile-misa-issue-table td:nth-child(4)::before{content:"Số HĐ"}
  .mobile-misa-table td:nth-child(5)::before,
  .mobile-misa-issue-table td:nth-child(5)::before{content:"Ngày HĐ"}
  .mobile-misa-table td:nth-child(6)::before,
  .mobile-misa-issue-table td:nth-child(6)::before{content:"Nhà cung cấp"}
  .mobile-misa-table td:nth-child(10)::before{content:"Trạng thái"}
  .mobile-misa-issue-table td:nth-child(10)::before{content:"Tình trạng"}
  .mobile-misa-table td:nth-child(11)::before,
  .mobile-misa-issue-table td:nth-child(11)::before{content:"Thao tác"}
  /* MISA mobile: gom Mã chứng từ + Số HĐ + Ngày HĐ thành một hàng.
     NCC nằm riêng một hàng; trạng thái/thao tác nằm hàng cuối. */
  .mobile-misa-table tr,
  .mobile-misa-issue-table tr{
    display:grid;
    grid-template-columns:minmax(0,1.35fr) minmax(70px,.75fr) minmax(54px,.65fr);
    align-items:stretch;
  }
  .mobile-misa-table td:nth-child(3),
  .mobile-misa-table td:nth-child(4),
  .mobile-misa-table td:nth-child(5),
  .mobile-misa-issue-table td:nth-child(3),
  .mobile-misa-issue-table td:nth-child(4),
  .mobile-misa-issue-table td:nth-child(5){
    grid-row:1;
    min-width:0;
    min-height:44px;
    padding:7px 8px;
    align-items:center;
    justify-content:flex-start;
    gap:4px;
    border-bottom:1px solid #edf0f4;
  }
  .mobile-misa-table td:nth-child(3),
  .mobile-misa-issue-table td:nth-child(3){grid-column:1}
  .mobile-misa-table td:nth-child(4),
  .mobile-misa-issue-table td:nth-child(4){grid-column:2}
  .mobile-misa-table td:nth-child(5),
  .mobile-misa-issue-table td:nth-child(5){grid-column:3}
  .mobile-misa-table td:nth-child(3)::before,
  .mobile-misa-table td:nth-child(4)::before,
  .mobile-misa-table td:nth-child(5)::before,
  .mobile-misa-issue-table td:nth-child(3)::before,
  .mobile-misa-issue-table td:nth-child(4)::before,
  .mobile-misa-issue-table td:nth-child(5)::before{
    flex:0 0 auto;
    font-size:9px;
    letter-spacing:0;
    text-transform:none;
    color:#7a8494;
    font-weight:700;
  }
  .mobile-misa-table td:nth-child(3)::before,.mobile-misa-issue-table td:nth-child(3)::before{content:"Mã"}
  .mobile-misa-table td:nth-child(4)::before,.mobile-misa-issue-table td:nth-child(4)::before{content:"HĐ"}
  .mobile-misa-table td:nth-child(5)::before,.mobile-misa-issue-table td:nth-child(5)::before{content:"Ngày"}
  .mobile-misa-table td:nth-child(3) .primary-text,
  .mobile-misa-table td:nth-child(4) .primary-text,
  .mobile-misa-table td:nth-child(5) .primary-text,
  .mobile-misa-issue-table td:nth-child(3) .primary-text,
  .mobile-misa-issue-table td:nth-child(4) .primary-text,
  .mobile-misa-issue-table td:nth-child(5) .primary-text{
    min-width:0;
    max-width:none;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap!important;
    text-align:left;
    font-size:11px;
    line-height:15px;
  }
  .mobile-misa-table td:nth-child(6),
  .mobile-misa-issue-table td:nth-child(6){
    grid-column:1 / -1;
    display:block;
    padding:8px 10px;
  }
  .mobile-misa-table td:nth-child(6)::before,
  .mobile-misa-issue-table td:nth-child(6)::before{display:block;margin-bottom:2px}
  .mobile-misa-table td:nth-child(6) .supplier-cell,
  .mobile-misa-issue-table td:nth-child(6){display:block;max-width:none;text-align:left}
  .mobile-misa-table td:nth-child(10),
  .mobile-misa-table td:nth-child(11),
  .mobile-misa-issue-table td:nth-child(10),
  .mobile-misa-issue-table td:nth-child(11){
    min-height:34px;
    padding-top:6px;
    padding-bottom:6px;
  }
  .mobile-misa-table td:nth-child(10),.mobile-misa-issue-table td:nth-child(10){grid-column:1 / 3}
  .mobile-misa-table td:nth-child(11),.mobile-misa-issue-table td:nth-child(11){grid-column:3}

  /* Empty/loading/error rows should remain normal full-width blocks. */
  .mobile-card-table td:only-child{display:block!important;text-align:center}
  .mobile-card-table td:only-child::before{display:none}
}

/* Desktop: mobile-only controls stay out of the layout */
@media (min-width: 761px){
  .mobile-menu-btn,.mobile-nav-backdrop{display:none!important}
}

/* =========================================================
   MOBILE COMPACT TABLES - V4
   ---------------------------------------------------------
   No "tap to see the rest" pattern. Important business data
   remains visible directly in each mobile record.
   ========================================================= */
@media (max-width: 760px){
  /* Phiếu nhập: 3 compact rows instead of 10 stacked rows.
     Row 1: mã + ngày | Row 2: NCC + MST | Row 3: kho + tiền | Row 4: VAT + sau VAT | Row 5: trạng thái + thao tác */
  .mobile-pn-table tr{
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(90px,.75fr);
  }
  .mobile-pn-table td{
    min-width:0;
    min-height:34px;
    padding:7px 9px;
    align-items:center;
  }
  .mobile-pn-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-pn-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-pn-table td:nth-child(3){grid-column:1 / -1;grid-row:2;padding-top:7px;padding-bottom:7px}
  .mobile-pn-table td:nth-child(4){display:flex!important;grid-column:1;grid-row:3}
  .mobile-pn-table td:nth-child(5){display:flex!important;grid-column:2;grid-row:3}
  .mobile-pn-table td:nth-child(6){display:flex!important;grid-column:1;grid-row:4}
  .mobile-pn-table td:nth-child(7){display:flex!important;grid-column:2;grid-row:4}
  .mobile-pn-table td:nth-child(8){display:flex!important;grid-column:1 / -1;grid-row:5}
  .mobile-pn-table td:nth-child(9){grid-column:1;grid-row:6}
  .mobile-pn-table td:nth-child(10){grid-column:2;grid-row:6}
  .mobile-pn-table td:nth-child(1)::before{content:"Mã"}
  .mobile-pn-table td:nth-child(2)::before{content:"Ngày"}
  .mobile-pn-table td:nth-child(3)::before{content:"NCC"}
  .mobile-pn-table td:nth-child(4)::before{content:"MST"}
  .mobile-pn-table td:nth-child(5)::before{content:"Kho"}
  .mobile-pn-table td:nth-child(6)::before{content:"Sau CK"}
  .mobile-pn-table td:nth-child(7)::before{content:"VAT"}
  .mobile-pn-table td:nth-child(8)::before{content:"Sau VAT"}
  .mobile-pn-table td:nth-child(9)::before{content:"Đối chiếu"}
  .mobile-pn-table td:nth-child(10)::before{content:"Thao tác"}
  .mobile-pn-table td:nth-child(3)::before{display:block;margin-bottom:2px}
  .mobile-pn-table td:nth-child(3) .primary-text,
  .mobile-pn-table td:nth-child(3) .secondary{display:block;max-width:none;text-align:left}
  .mobile-pn-table td:nth-child(3) .primary-text{font-size:12px;font-weight:700}
  .mobile-pn-table td:nth-child(3) .secondary{font-size:10px}
  .mobile-pn-table td:nth-child(1) .primary-text{font-weight:700}
  .mobile-pn-table td:nth-child(6),.mobile-pn-table td:nth-child(7),.mobile-pn-table td:nth-child(8){justify-content:space-between}
  .mobile-pn-table td:nth-child(10) .row-action{font-size:11px}

  /* Hóa đơn: giữ trực tiếp các dữ liệu cần làm nghiệp vụ.
     Hàng 1 mã + số + ngày; hàng 2 người bán; hàng 3 MST + loại + đối chiếu;
     hàng 4 ba số tiền; hàng 5 thao tác. */
  .mobile-hd-table tr{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,.9fr) minmax(74px,.7fr);
  }
  .mobile-hd-table td{
    min-width:0;
    min-height:34px;
    padding:7px 8px;
    align-items:center;
  }
  .mobile-hd-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-hd-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-hd-table td:nth-child(3){grid-column:3;grid-row:1}
  .mobile-hd-table td:nth-child(4){grid-column:1 / -1;grid-row:2;padding-top:7px;padding-bottom:7px}
  .mobile-hd-table td:nth-child(5){display:flex!important;grid-column:1;grid-row:3}
  .mobile-hd-table td:nth-child(6){display:flex!important;grid-column:1;grid-row:4}
  .mobile-hd-table td:nth-child(7){display:flex!important;grid-column:2;grid-row:4}
  .mobile-hd-table td:nth-child(8){display:flex!important;grid-column:3;grid-row:4}
  .mobile-hd-table td:nth-child(9){display:flex!important;grid-column:2;grid-row:3}
  .mobile-hd-table td:nth-child(10){grid-column:3;grid-row:3}
  .mobile-hd-table td:nth-child(11){grid-column:1 / -1;grid-row:5;justify-content:flex-end}
  .mobile-hd-table td:nth-child(12){display:none!important}
  .mobile-hd-table td:nth-child(1)::before{content:"Ký hiệu"}
  .mobile-hd-table td:nth-child(2)::before{content:"HĐ"}
  .mobile-hd-table td:nth-child(3)::before{content:"Ngày"}
  .mobile-hd-table td:nth-child(4)::before{content:"Người bán"}
  .mobile-hd-table td:nth-child(5)::before{content:"MST"}
  .mobile-hd-table td:nth-child(6)::before{content:"Trước thuế"}
  .mobile-hd-table td:nth-child(7)::before{content:"VAT"}
  .mobile-hd-table td:nth-child(8)::before{content:"Thanh toán"}
  .mobile-hd-table td:nth-child(9)::before{content:"Loại"}
  .mobile-hd-table td:nth-child(10)::before{content:"Đối chiếu"}
  .mobile-hd-table td:nth-child(11)::before{content:"Thao tác"}
  .mobile-hd-table td:nth-child(4)::before{display:block;margin-bottom:2px}
  .mobile-hd-table td:nth-child(4) .primary-text{display:block;max-width:none;text-align:left;font-size:12px;font-weight:700}
  .mobile-hd-table td:nth-child(1) .code,.mobile-hd-table td:nth-child(2) .primary-text{font-weight:700}
  .mobile-hd-table td:nth-child(6),.mobile-hd-table td:nth-child(7),.mobile-hd-table td:nth-child(8){font-size:10px}

  /* Tài khoản: không cần một bảng rộng trên điện thoại. */
  .mobile-user-table tr,.mobile-expense-table tr,.mobile-need-table tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .mobile-user-table td,.mobile-expense-table td,.mobile-need-table td{
    min-width:0;
    min-height:34px;
    padding:7px 9px;
  }
  .mobile-user-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-user-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-user-table td:nth-child(3){grid-column:1;grid-row:2}
  .mobile-user-table td:nth-child(4){grid-column:2;grid-row:2}
  .mobile-user-table td:nth-child(5){grid-column:1 / -1;grid-row:3;justify-content:flex-end}
  .mobile-user-table td:nth-child(1)::before{content:"Tài khoản"}
  .mobile-user-table td:nth-child(2)::before{content:"Vai trò"}
  .mobile-user-table td:nth-child(3)::before{content:"Trạng thái"}
  .mobile-user-table td:nth-child(4)::before{content:"Cập nhật"}
  .mobile-user-table td:nth-child(5)::before{content:"Thao tác"}

  /* NCC chi phí */
  .mobile-expense-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-expense-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-expense-table td:nth-child(3){grid-column:1 / -1;grid-row:2}
  .mobile-expense-table td:nth-child(4){grid-column:1;grid-row:3}
  .mobile-expense-table td:nth-child(5){grid-column:2;grid-row:3;justify-content:flex-end}
  .mobile-expense-table td:nth-child(1)::before{content:"MST người mua"}
  .mobile-expense-table td:nth-child(2)::before{content:"MST NCC"}
  .mobile-expense-table td:nth-child(3)::before{content:"Tên NCC"}
  .mobile-expense-table td:nth-child(4)::before{content:"Trạng thái"}
  .mobile-expense-table td:nth-child(5)::before{content:"Thao tác"}

  /* Cần xử lý: giữ cả tiền thanh toán và trạng thái, không bắt buộc mở chi tiết. */
  .mobile-need-table tr{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(74px,.7fr)}
  .mobile-need-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-need-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-need-table td:nth-child(3){grid-column:3;grid-row:1}
  .mobile-need-table td:nth-child(4){grid-column:1 / -1;grid-row:2}
  .mobile-need-table td:nth-child(5){grid-column:1;grid-row:3}
  .mobile-need-table td:nth-child(6){grid-column:2;grid-row:3}
  .mobile-need-table td:nth-child(7){grid-column:3;grid-row:3}
  .mobile-need-table td:nth-child(8){grid-column:1 / -1;grid-row:4;justify-content:flex-end}
  .mobile-need-table td:nth-child(1)::before{content:"Ký hiệu"}
  .mobile-need-table td:nth-child(2)::before{content:"HĐ"}
  .mobile-need-table td:nth-child(3)::before{content:"Ngày"}
  .mobile-need-table td:nth-child(4)::before{content:"Người bán"}
  .mobile-need-table td:nth-child(5)::before{content:"MST"}
  .mobile-need-table td:nth-child(6)::before{content:"Thanh toán"}
  .mobile-need-table td:nth-child(7)::before{content:"Trạng thái"}
  .mobile-need-table td:nth-child(8)::before{content:"Thao tác"}
  .mobile-need-table td:nth-child(4)::before{display:block;margin-bottom:2px}
  .mobile-need-table td:nth-child(4){display:block}
  .mobile-need-table td:nth-child(4) .primary-text{display:block;max-width:none;text-align:left}
}

/* =========================================================
   MOBILE FINAL COMPACT - V5
   ---------------------------------------------------------
   Fixes: prevent code/number/date from wrapping character by
   character; keep important top-row fields on one line;
   allow supplier names to wrap naturally; keep actions horizontal.
   ========================================================= */
@media (max-width:760px){
  body{overflow-x:hidden}
  .table-wrap{overflow-x:auto!important;max-width:100%;-webkit-overflow-scrolling:touch}

  /* Remove desktop min-widths left inline on MISA/user tables. */
  .mobile-misa-table,
  .mobile-misa-issue-table,
  .mobile-user-table,
  .mobile-expense-table,
  .mobile-need-table{min-width:0!important;width:100%!important}

  /* Common compact cell: label + value, never character-wrap values. */
  .mobile-card-table .compact-value{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  /* -------- PHIẾU NHẬP -------- */
  .mobile-pn-table tr{
    grid-template-columns:minmax(0,1.55fr) minmax(92px,.75fr);
    grid-auto-rows:auto;
  }
  .mobile-pn-table td:nth-child(1),
  .mobile-pn-table td:nth-child(2){
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:7px;
    min-width:0;
    white-space:nowrap!important;
  }
  .mobile-pn-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-pn-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-pn-table td:nth-child(1)::before,
  .mobile-pn-table td:nth-child(2)::before{
    flex:none;font-size:9px;letter-spacing:.01em
  }
  .mobile-pn-table td:nth-child(1) .primary-text,
  .mobile-pn-table td:nth-child(2) .primary-text{
    min-width:0;max-width:none;text-align:left!important;
    white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
    font-size:11px;line-height:16px
  }
  .mobile-pn-table td:nth-child(3){grid-column:1 / -1;grid-row:2}
  .mobile-pn-table td:nth-child(4){grid-column:1;grid-row:3}
  .mobile-pn-table td:nth-child(5){grid-column:2;grid-row:3}
  .mobile-pn-table td:nth-child(6){grid-column:1;grid-row:4}
  .mobile-pn-table td:nth-child(7){grid-column:2;grid-row:4}
  .mobile-pn-table td:nth-child(8){grid-column:1 / -1;grid-row:5}
  .mobile-pn-table td:nth-child(9){grid-column:1;grid-row:6}
  .mobile-pn-table td:nth-child(10){grid-column:2;grid-row:6}
  .mobile-pn-table td:nth-child(4),
  .mobile-pn-table td:nth-child(5),
  .mobile-pn-table td:nth-child(6),
  .mobile-pn-table td:nth-child(7),
  .mobile-pn-table td:nth-child(8),
  .mobile-pn-table td:nth-child(9),
  .mobile-pn-table td:nth-child(10){min-width:0}
  .mobile-pn-table td:nth-child(4) .primary-text,
  .mobile-pn-table td:nth-child(5) .primary-text,
  .mobile-pn-table td:nth-child(6) .primary-text,
  .mobile-pn-table td:nth-child(7) .primary-text,
  .mobile-pn-table td:nth-child(8) .primary-text{
    min-width:0;max-width:100%;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis
  }
  .mobile-pn-table td:nth-child(10) .row-action,
  .mobile-pn-table td:nth-child(9) .status-tag{white-space:nowrap!important}

  /* -------- HÓA ĐƠN -------- */
  .mobile-hd-table tr{
    grid-template-columns:minmax(0,1.25fr) minmax(64px,.65fr) minmax(78px,.72fr);
    grid-auto-rows:auto;
  }
  .mobile-hd-table td:nth-child(1),
  .mobile-hd-table td:nth-child(2),
  .mobile-hd-table td:nth-child(3){
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:5px;
    min-width:0;
    white-space:nowrap!important;
  }
  .mobile-hd-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-hd-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-hd-table td:nth-child(3){grid-column:3;grid-row:1}
  .mobile-hd-table td:nth-child(1)::before,
  .mobile-hd-table td:nth-child(2)::before,
  .mobile-hd-table td:nth-child(3)::before{flex:none;font-size:8px;letter-spacing:0}
  .mobile-hd-table td:nth-child(1) .primary-text,
  .mobile-hd-table td:nth-child(2) .primary-text,
  .mobile-hd-table td:nth-child(3) .primary-text{
    min-width:0;max-width:none;text-align:left!important;
    white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
    font-size:10px;line-height:15px
  }
  .mobile-hd-table td:nth-child(4){grid-column:1 / -1;grid-row:2}
  .mobile-hd-table td:nth-child(5){grid-column:1;grid-row:3}
  .mobile-hd-table td:nth-child(9){grid-column:2;grid-row:3}
  .mobile-hd-table td:nth-child(10){grid-column:3;grid-row:3}
  .mobile-hd-table td:nth-child(6){grid-column:1;grid-row:4}
  .mobile-hd-table td:nth-child(7){grid-column:2;grid-row:4}
  .mobile-hd-table td:nth-child(8){grid-column:3;grid-row:4}
  .mobile-hd-table td:nth-child(11){grid-column:1 / -1;grid-row:5;justify-content:flex-end}
  .mobile-hd-table td:nth-child(4) .primary-text{
    max-width:none;display:block;text-align:left!important;
    white-space:normal!important;overflow:visible;text-overflow:clip;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
    font-size:11px;line-height:16px
  }
  .mobile-hd-table td:nth-child(5) .primary-text,
  .mobile-hd-table td:nth-child(6) .primary-text,
  .mobile-hd-table td:nth-child(7) .primary-text,
  .mobile-hd-table td:nth-child(8) .primary-text,
  .mobile-hd-table td:nth-child(9) .primary-text,
  .mobile-hd-table td:nth-child(10) .primary-text{
    min-width:0;max-width:100%;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis
  }
  .mobile-hd-table td:nth-child(10) .status-tag,
  .mobile-hd-table td:nth-child(11) .row-action{white-space:nowrap!important}

  /* -------- MISA -------- */
  .mobile-misa-table tr,
  .mobile-misa-issue-table tr{
    grid-template-columns:minmax(0,1.35fr) minmax(60px,.65fr) minmax(82px,.75fr);
    grid-auto-rows:auto;
  }
  .mobile-misa-table td:nth-child(3),
  .mobile-misa-table td:nth-child(4),
  .mobile-misa-table td:nth-child(5),
  .mobile-misa-issue-table td:nth-child(3),
  .mobile-misa-issue-table td:nth-child(4),
  .mobile-misa-issue-table td:nth-child(5){
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:5px;
    min-width:0;
    min-height:38px;
    white-space:nowrap!important;
  }
  .mobile-misa-table td:nth-child(3),.mobile-misa-issue-table td:nth-child(3){grid-column:1;grid-row:1}
  .mobile-misa-table td:nth-child(4),.mobile-misa-issue-table td:nth-child(4){grid-column:2;grid-row:1}
  .mobile-misa-table td:nth-child(5),.mobile-misa-issue-table td:nth-child(5){grid-column:3;grid-row:1}
  .mobile-misa-table td:nth-child(3)::before,.mobile-misa-issue-table td:nth-child(3)::before,
  .mobile-misa-table td:nth-child(4)::before,.mobile-misa-issue-table td:nth-child(4)::before,
  .mobile-misa-table td:nth-child(5)::before,.mobile-misa-issue-table td:nth-child(5)::before{
    font-size:8px;flex:none
  }
  .mobile-misa-table td:nth-child(3) .primary-text,
  .mobile-misa-table td:nth-child(4) .primary-text,
  .mobile-misa-table td:nth-child(5) .primary-text,
  .mobile-misa-issue-table td:nth-child(3) .primary-text,
  .mobile-misa-issue-table td:nth-child(4) .primary-text,
  .mobile-misa-issue-table td:nth-child(5) .primary-text{
    min-width:0;max-width:none;text-align:left!important;
    white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis;
    font-size:10px;line-height:15px
  }
  .mobile-misa-table td:nth-child(6),.mobile-misa-issue-table td:nth-child(6){grid-column:1 / -1;grid-row:2}
  .mobile-misa-table td:nth-child(6) .supplier-cell,
  .mobile-misa-issue-table td:nth-child(6) .supplier-cell{
    max-width:none;white-space:normal;overflow:hidden;text-overflow:clip;
    display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  }
  .mobile-misa-table td:nth-child(10),.mobile-misa-issue-table td:nth-child(10){grid-column:1 / 3;grid-row:3}
  .mobile-misa-table td:nth-child(11),.mobile-misa-issue-table td:nth-child(11){grid-column:3;grid-row:3;justify-content:flex-end}
  .mobile-misa-table td:nth-child(10) .status-tag,
  .mobile-misa-issue-table td:nth-child(10) .status-tag,
  .mobile-misa-table td:nth-child(11) .row-action,
  .mobile-misa-issue-table td:nth-child(11) .row-action{white-space:nowrap!important}

  /* Keep action links/buttons on one horizontal line everywhere. */
  .mobile-card-table .row-action,
  .mobile-card-table .btn,
  .mobile-card-table .status-tag,
  .mobile-card-table button,
  .mobile-card-table a{white-space:nowrap!important;word-break:normal!important;overflow-wrap:normal!important}
}


/* =========================================================
   MOBILE STABILITY PATCH - V6
   ---------------------------------------------------------
   Principle:
   - Desktop columns are never allowed to force character wrapping
     on mobile.
   - Important identifiers stay on one line.
   - Secondary fields are intentionally hidden/compact on phones.
   - Wide report/detail tables scroll INSIDE their own container.
   ========================================================= */
@media (max-width:760px){

  /* ---- General safety ---- */
  .table-wrap{
    width:100%;
    max-width:100%;
    overflow-x:auto!important;
    overflow-y:visible;
    -webkit-overflow-scrolling:touch;
  }
  .table-wrap > table{
    max-width:none;
  }
  .mobile-card-table{
    overflow:visible!important;
  }
  .mobile-card-table td,
  .mobile-card-table td *{
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  /* ---- Phiếu nhập: only the useful mobile fields ---- */
  .mobile-pn-table th:nth-child(4),
  .mobile-pn-table th:nth-child(5),
  .mobile-pn-table th:nth-child(6),
  .mobile-pn-table th:nth-child(7),
  .mobile-pn-table th:nth-child(8),
  .mobile-pn-table td:nth-child(4),
  .mobile-pn-table td:nth-child(5),
  .mobile-pn-table td:nth-child(6),
  .mobile-pn-table td:nth-child(7),
  .mobile-pn-table td:nth-child(8){
    display:none!important;
  }

  .mobile-pn-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(92px,.72fr);
  }
  .mobile-pn-table td:nth-child(1){
    grid-column:1;grid-row:1;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr);
    align-items:center;
    min-width:0;
    white-space:nowrap!important;
  }
  .mobile-pn-table td:nth-child(2){
    grid-column:2;grid-row:1;
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    min-width:0;
    white-space:nowrap!important;
  }
  .mobile-pn-table td:nth-child(3){
    grid-column:1 / -1;grid-row:2;
    display:block!important;
    min-width:0;
  }
  .mobile-pn-table td:nth-child(9){
    grid-column:1;grid-row:3;
    display:flex!important;
    min-width:0;
    align-items:center;
  }
  .mobile-pn-table td:nth-child(10){
    grid-column:2;grid-row:3;
    display:flex!important;
    min-width:0;
    align-items:center;
    justify-content:flex-end;
  }
  .mobile-pn-table td:nth-child(1) .primary-text,
  .mobile-pn-table td:nth-child(2) .primary-text{
    display:block!important;
    min-width:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    word-break:normal!important;
    font-size:11px!important;
    text-align:left!important;
  }
  .mobile-pn-table td:nth-child(3) .primary-text{
    display:block!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    text-align:left!important;
  }
  .mobile-pn-table td:nth-child(3) .secondary{
    display:block!important;
    text-align:left!important;
    white-space:nowrap!important;
  }

  /* ---- Hóa đơn: Ký hiệu + HĐ + Ngày / Người bán / Đối chiếu + thao tác ---- */
  .mobile-hd-table th:nth-child(5),
  .mobile-hd-table th:nth-child(6),
  .mobile-hd-table th:nth-child(7),
  .mobile-hd-table th:nth-child(8),
  .mobile-hd-table th:nth-child(9),
  .mobile-hd-table td:nth-child(5),
  .mobile-hd-table td:nth-child(6),
  .mobile-hd-table td:nth-child(7),
  .mobile-hd-table td:nth-child(8),
  .mobile-hd-table td:nth-child(9){
    display:none!important;
  }

  .mobile-hd-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(64px,.62fr) minmax(86px,.78fr);
  }
  .mobile-hd-table td:nth-child(1),
  .mobile-hd-table td:nth-child(2),
  .mobile-hd-table td:nth-child(3){
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    min-width:0;
    white-space:nowrap!important;
  }
  .mobile-hd-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-hd-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-hd-table td:nth-child(3){grid-column:3;grid-row:1}
  .mobile-hd-table td:nth-child(4){
    grid-column:1 / -1;grid-row:2;
    display:block!important;
    min-width:0;
  }
  .mobile-hd-table td:nth-child(10){
    grid-column:1;grid-row:3;
    display:flex!important;
    min-width:0;
    align-items:center;
  }
  .mobile-hd-table td:nth-child(11){
    grid-column:2 / -1;grid-row:3;
    display:flex!important;
    min-width:0;
    align-items:center;
    justify-content:flex-end;
  }
  .mobile-hd-table td:nth-child(1) .code,
  .mobile-hd-table td:nth-child(2) .primary-text,
  .mobile-hd-table td:nth-child(3) .primary-text{
    min-width:0!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    word-break:normal!important;
    text-align:left!important;
  }
  .mobile-hd-table td:nth-child(4) .primary-text{
    display:-webkit-box!important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden!important;
    white-space:normal!important;
    word-break:normal!important;
    overflow-wrap:anywhere!important;
    max-width:100%!important;
    text-align:left!important;
  }

  /* ---- Cần xử lý: same compact pattern as Hóa đơn ---- */
  .mobile-need-table th:nth-child(5),
  .mobile-need-table th:nth-child(6),
  .mobile-need-table td:nth-child(5),
  .mobile-need-table td:nth-child(6){
    display:none!important;
  }
  .mobile-need-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1.18fr) minmax(64px,.62fr) minmax(86px,.78fr);
  }
  .mobile-need-table td:nth-child(1),
  .mobile-need-table td:nth-child(2),
  .mobile-need-table td:nth-child(3){
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    min-width:0;
    white-space:nowrap!important;
  }
  .mobile-need-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-need-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-need-table td:nth-child(3){grid-column:3;grid-row:1}
  .mobile-need-table td:nth-child(4){
    grid-column:1 / -1;grid-row:2;
    display:block!important;
    min-width:0;
  }
  .mobile-need-table td:nth-child(7){
    grid-column:1;grid-row:3;
    display:flex!important;
  }
  .mobile-need-table td:nth-child(8){
    grid-column:2 / -1;grid-row:3;
    display:flex!important;
    justify-content:flex-end;
  }
  .mobile-need-table td:nth-child(1) .primary-text,
  .mobile-need-table td:nth-child(2) .primary-text,
  .mobile-need-table td:nth-child(3) .primary-text{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .mobile-need-table td:nth-child(4){
    white-space:normal!important;
  }

  /* ---- NCC chi phí ---- */
  .mobile-expense-table tr{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .mobile-expense-table td:nth-child(1),
  .mobile-expense-table td:nth-child(2){
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    min-width:0;
    white-space:nowrap!important;
  }
  .mobile-expense-table td:nth-child(1){grid-column:1;grid-row:1}
  .mobile-expense-table td:nth-child(2){grid-column:2;grid-row:1}
  .mobile-expense-table td:nth-child(3){
    grid-column:1 / -1;grid-row:2;
    display:block!important;
    min-width:0;
  }
  .mobile-expense-table td:nth-child(4){
    grid-column:1;grid-row:3;
    display:flex!important;
  }
  .mobile-expense-table td:nth-child(5){
    grid-column:2;grid-row:3;
    display:flex!important;
    justify-content:flex-end;
  }
  .mobile-expense-table td:nth-child(1),
  .mobile-expense-table td:nth-child(2),
  .mobile-expense-table td:nth-child(3){
    overflow:hidden!important;
  }
  .mobile-expense-table td:nth-child(1) .primary-text,
  .mobile-expense-table td:nth-child(2) .primary-text{
    min-width:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    word-break:normal!important;
  }
  .mobile-expense-table td:nth-child(3){
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* ---- Report summary ---- */
  .report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .report-card{
    min-width:0;
    padding:11px!important;
  }
  .report-card b,
  .report-card span{
    overflow-wrap:normal;
  }

  /* Transfer report: horizontal scrolling belongs ONLY to the table. */
  .report-table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto!important;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    border:1px solid #e2e7ed;
    border-radius:8px;
  }
  .report-table-scroll table{
    min-width:900px!important;
    width:max-content!important;
    max-width:none!important;
  }
  .report-table-scroll th,
  .report-table-scroll td{
    white-space:nowrap!important;
  }
}


/* =========================================================
   V7 FINAL MOBILE POLISH
   - Keep V6 report horizontal-scroll behavior unchanged.
   - Separate status/action areas so labels and buttons never touch.
   - Keep action buttons on one line.
   ========================================================= */
@media (max-width:760px){

  /* Common action/status row */
  .mobile-pn-table td:nth-child(9),
  .mobile-pn-table td:nth-child(10),
  .mobile-hd-table td:nth-child(10),
  .mobile-hd-table td:nth-child(11),
  .mobile-need-table td:nth-child(7),
  .mobile-need-table td:nth-child(8),
  .mobile-expense-table td:nth-child(4),
  .mobile-expense-table td:nth-child(5){
    min-width:0!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }

  /* Phiếu nhập */
  .mobile-pn-table tr{
    grid-template-columns:minmax(0,1fr) minmax(150px,auto)!important;
  }
  .mobile-pn-table td:nth-child(9){
    justify-content:flex-start!important;
    gap:8px!important;
    padding-right:10px!important;
  }
  .mobile-pn-table td:nth-child(10){
    justify-content:flex-end!important;
    gap:8px!important;
    padding-left:10px!important;
  }
  .mobile-pn-table td:nth-child(9) .status-badge,
  .mobile-pn-table td:nth-child(10) button,
  .mobile-pn-table td:nth-child(10) a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Hóa đơn điện tử */
  .mobile-hd-table tr{
    grid-template-columns:minmax(0,1fr) minmax(155px,auto)!important;
  }
  .mobile-hd-table td:nth-child(10){
    justify-content:flex-start!important;
    gap:8px!important;
    padding-right:10px!important;
  }
  .mobile-hd-table td:nth-child(11){
    justify-content:flex-end!important;
    gap:8px!important;
    padding-left:10px!important;
  }
  .mobile-hd-table td:nth-child(10) .status-badge,
  .mobile-hd-table td:nth-child(11) button,
  .mobile-hd-table td:nth-child(11) a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Cần xử lý */
  .mobile-need-table tr{
    grid-template-columns:minmax(0,1fr) minmax(170px,auto)!important;
  }
  .mobile-need-table td:nth-child(7){
    justify-content:flex-start!important;
    gap:8px!important;
    padding-right:10px!important;
  }
  .mobile-need-table td:nth-child(8){
    justify-content:flex-end!important;
    gap:8px!important;
    padding-left:10px!important;
  }
  .mobile-need-table td:nth-child(7) .status-badge,
  .mobile-need-table td:nth-child(8) button,
  .mobile-need-table td:nth-child(8) a{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Xử lý MISA / Đối chiếu MISA action buttons:
     never let the button squeeze the status text. */
  .mobile-misa-table td:last-child,
  .mobile-misa-process-table td:last-child{
    white-space:nowrap!important;
    min-width:0!important;
  }

  /* Status badges should not break into 2+ lines on phones. */
  .status-badge,
  .badge,
  .status-pill{
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    max-width:100%!important;
  }

  /* Generic action controls */
  .mobile-card button,
  .mobile-card a,
  .mobile-card .btn,
  .mobile-card .action,
  .mobile-card .action-btn{
    white-space:nowrap!important;
    word-break:normal!important;
  }

  /* Do not allow labels to overlap controls. */
  .mobile-pn-table td:nth-child(9)::after,
  .mobile-hd-table td:nth-child(10)::after,
  .mobile-need-table td:nth-child(7)::after{
    content:"";
    flex:1 1 auto;
    min-width:4px;
  }
}