/* TT_MOBILE_CUSTOMERS_FINAL_V1 */
/* Mobile chuẩn cho Khách hàng: full card, ít khoảng trắng, font đồng bộ */

@media (max-width:899px){

  html,
  body,
  #app,
  .app,
  main.page,
  .page{
    max-width:100vw!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  /* Root khách hàng */
  html body #app .tt-customers-page-v1,
  html body #app .customers-page,
  html body #app [data-page="customers"],
  html body #app .customers{
    width:calc(100vw - 6px)!important;
    max-width:calc(100vw - 6px)!important;
    margin-left:calc(50% - 50vw + 3px)!important;
    padding:10px 0 112px!important;
    overflow-x:hidden!important;
    box-sizing:border-box!important;
  }

  html body #app .tt-customers-page-v1 *,
  html body #app .customers-page *,
  html body #app [data-page="customers"] *,
  html body #app .customers *{
    box-sizing:border-box!important;
  }

  /* Nếu source không có root riêng thì target theo class đang có trong app */
  html body #app .tt-customer-head-v1,
  html body #app .tt-customers-head-v1,
  html body #app .customer-head,
  html body #app .customers-head{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
    padding:0 8px!important;
    overflow:visible!important;
  }

  html body #app .tt-customer-head-v1 h1,
  html body #app .tt-customers-head-v1 h1,
  html body #app .customer-head h1,
  html body #app .customers-head h1,
  html body #app section:has(.tt-customers-table-v1) > h1,
  html body #app section:has(.customers-table) > h1{
    font-size:24px!important;
    line-height:1.1!important;
    margin:0 0 6px!important;
    font-weight:850!important;
    letter-spacing:-.2px!important;
    color:#0f172a!important;
  }

  html body #app .tt-customer-head-v1 p,
  html body #app .tt-customers-head-v1 p,
  html body #app .customer-head p,
  html body #app .customers-head p{
    font-size:14px!important;
    line-height:1.35!important;
    margin:0!important;
    color:#64748b!important;
    font-weight:600!important;
  }

  /* Nút xuất file + thêm khách */
  html body #app .tt-customers-actions-v1,
  html body #app .customers-actions,
  html body #app .customer-actions{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:12px 0 12px!important;
    padding:0 8px!important;
  }

  html body #app .tt-customers-actions-v1 button,
  html body #app .customers-actions button,
  html body #app .customer-actions button{
    width:100%!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:15px!important;
    font-size:14px!important;
    font-weight:850!important;
    white-space:nowrap!important;
  }

  /* Tab khách hàng / công nợ */
  html body #app .tt-customers-tabs-v1,
  html body #app .customers-tabs,
  html body #app .customer-tabs{
    width:100%!important;
    max-width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin:0 0 12px!important;
    padding:0 8px!important;
    overflow:visible!important;
  }

  html body #app .tt-customers-tabs-v1 button,
  html body #app .customers-tabs button,
  html body #app .customer-tabs button{
    width:100%!important;
    height:44px!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Filter/search full card */
  html body #app .tt-customers-filter-v1,
  html body #app .customers-filter,
  html body #app .customer-filter,
  html body #app .tt-customer-filter-v1{
    width:100%!important;
    max-width:100%!important;
    margin:0 0 12px!important;
    padding:12px!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #dbe5f0!important;
    box-shadow:0 10px 24px rgba(15,23,42,.04)!important;
    overflow:hidden!important;
  }

  html body #app .tt-customers-filter-v1 label,
  html body #app .customers-filter label,
  html body #app .customer-filter label,
  html body #app .tt-customer-filter-v1 label{
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:850!important;
    color:#475569!important;
    margin:0!important;
  }

  html body #app .tt-customers-filter-v1 input,
  html body #app .tt-customers-filter-v1 select,
  html body #app .customers-filter input,
  html body #app .customers-filter select,
  html body #app .customer-filter input,
  html body #app .customer-filter select,
  html body #app .tt-customer-filter-v1 input,
  html body #app .tt-customer-filter-v1 select{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:48px!important;
    min-height:48px!important;
    border-radius:14px!important;
    font-size:14px!important;
  }

  /* Card danh sách full ngang */
  html body #app .tt-customers-card-v1,
  html body #app .tt-customers-table-v1,
  html body #app .customers-card,
  html body #app .customers-table,
  html body #app .customer-table{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:12px!important;
    border-radius:18px!important;
    background:#fff!important;
    border:1px solid #dbe5f0!important;
    box-shadow:0 10px 24px rgba(15,23,42,.04)!important;
    overflow:hidden!important;
  }

  /* Ẩn header bảng desktop */
  html body #app .tt-customers-table-head-v1,
  html body #app .customers-table-head,
  html body #app .customer-table-head,
  html body #app .tt-customers-table-v1 > div:first-child:not([data-customer-row]),
  html body #app .customers-table > div:first-child:not([data-customer-row]){
    display:none!important;
  }

  /* Row khách hàng thành card mỏng */
  html body #app .tt-customers-row-v1,
  html body #app .customer-row,
  html body #app .customers-row,
  html body #app [data-customer-row]{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:4px 10px!important;
    padding:12px 4px!important;
    border-bottom:1px solid #e8eef5!important;
    background:#fff!important;
    border-radius:0!important;
    overflow:hidden!important;
  }

  html body #app .tt-customers-row-v1:last-child,
  html body #app .customer-row:last-child,
  html body #app .customers-row:last-child,
  html body #app [data-customer-row]:last-child{
    border-bottom:0!important;
  }

  html body #app .tt-customers-row-v1 > *,
  html body #app .customer-row > *,
  html body #app .customers-row > *,
  html body #app [data-customer-row] > *{
    min-width:0!important;
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  html body #app .tt-customers-row-v1 b,
  html body #app .customer-row b,
  html body #app .customers-row b,
  html body #app [data-customer-row] b{
    font-size:14px!important;
    line-height:1.2!important;
    font-weight:850!important;
    color:#0f172a!important;
  }

  html body #app .tt-customers-row-v1 span,
  html body #app .tt-customers-row-v1 em,
  html body #app .customer-row span,
  html body #app .customer-row em,
  html body #app .customers-row span,
  html body #app .customers-row em,
  html body #app [data-customer-row] span,
  html body #app [data-customer-row] em{
    font-size:12px!important;
    line-height:1.25!important;
    color:#64748b!important;
    font-style:normal!important;
  }

  /* Nếu hiện dạng table/grid cũ thì ép lại */
  html body #app table.customers-table,
  html body #app table.customer-table{
    display:block!important;
    width:100%!important;
    overflow:hidden!important;
  }

  html body #app table.customers-table thead,
  html body #app table.customer-table thead{
    display:none!important;
  }

  html body #app table.customers-table tbody,
  html body #app table.customer-table tbody,
  html body #app table.customers-table tr,
  html body #app table.customer-table tr{
    display:block!important;
    width:100%!important;
  }

  html body #app table.customers-table td,
  html body #app table.customer-table td{
    display:block!important;
    width:100%!important;
    padding:4px 0!important;
    border:0!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Giảm khoảng trắng đáy */
  html body #app .tt-customers-page-v1 .empty,
  html body #app .customers-page .empty,
  html body #app [data-page="customers"] .empty{
    min-height:0!important;
    padding:16px!important;
  }
}