*{box-sizing:border-box}

:root{
  --bg:#f3f4f6;
  --card:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --blue:#0ea5e9;
  --blue2:#2563eb;
  --green:#16a34a;
  --red:#ef4444;
  --yellow:#f59e0b;
  --shadow:0 8px 24px rgba(15,23,42,.08);
}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
}

.wrap{
  width:100%;
  padding:10px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  margin-bottom:14px;
  box-shadow:var(--shadow);
}

/* TOP */
.top-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid var(--border);
  padding-bottom:12px;
  margin-bottom:12px;
}

.top-line h1{
  margin:0;
  color:#059669;
  font-size:26px;
  font-weight:900;
}

.top-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.logout{
  background:#dc2626;
  color:#fff;
  text-decoration:none;
  padding:9px 14px;
  border-radius:10px;
  font-weight:800;
}

.balance{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#f8fafc;
  border:2px solid #d1d5db;
  border-radius:999px;
  padding:8px 14px;
  font-weight:900;
  white-space:nowrap;
}

.balance .username{color:var(--blue2)}
.balance{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#f8fafc;
  border:2px solid #d1d5db;
  border-radius:999px;
  padding:6px 14px;
  font-weight:900;
  line-height:1;
}
.balance{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.balance #points,
.balance .money{
  color:#dc2626;
}

/* FORM */
.main-form{
  display:grid;
  grid-template-columns:260px 120px 76px 160px;
  gap:8px;
  align-items:center;
}

select,input,button{
  height:40px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #d1d5db;
  font-size:14px;
  font-family:inherit;
}

button{
  border:0;
  cursor:pointer;
  color:#fff;
  font-weight:800;
}

#getBtn{background:#059669}

.btn{
  height:38px;
  padding:0 14px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#fff;
  font-weight:800;
  border:0;
  cursor:pointer;
}

.blue{background:#2563eb!important}
.green{background:#16a34a!important}
.yellow{background:#f59e0b!important}
.danger{background:#ef4444!important}

.top-buttons{
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
  gap:8px;
}

/* WORKSPACE */
.workspace-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
  margin-bottom:10px;
}

.workspace-head h2{
  margin:0;
  font-size:18px;
  font-weight:900;
}

.workspace-actions{
  display:flex;
  gap:7px;
}

.workspace-actions .btn{
  height:32px;
  padding:0 12px;
  font-size:12px;
}

#msg{
  margin:8px 0;
  color:var(--blue2);
  font-weight:800;
}

.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

table{
  border-collapse:collapse;
  width:100%;
}

.orders-table{
  min-width:1180px;
}

th,td{
  padding:9px 8px;
  border-bottom:1px solid var(--border);
  text-align:left;
  white-space:nowrap;
  vertical-align:middle;
  font-size:13px;
}

th{
  background:#f8fafc;
  font-weight:900;
  color:#334155;
}

.check-col{
  width:34px;
  text-align:center;
}

#checkAll,.rowCheck{
  width:15px!important;
  height:15px!important;
  min-width:15px!important;
  padding:0!important;
  margin:0!important;
  cursor:pointer;
}

.stt-col{
  width:44px;
  text-align:center;
  color:#2563eb;
  font-weight:900;
}

.time-col{
  width:145px;
  color:var(--muted);
}

.service-col{
  width:170px;
  max-width:170px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.phone-col{
  width:130px;
  color:var(--blue);
  font-weight:900;
  font-size:15px;
  cursor:pointer;
}

.otp-col{
  width:110px;
  color:var(--green);
  font-weight:900;
  font-size:15px;
  cursor:pointer;
}

.sms-col{
  width:240px;
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#475569;
}

.status-col{
  width:110px;
  font-weight:800;
}

.action-col{
  width:90px;
  text-align:center;
}

.status-ok{color:#059669}
.status-timeout{color:#ef4444}
.status-waiting{color:#d97706}
.status-muted{color:#9ca3af}
.status-cancelled-faint{color:rgba(239,68,68,0.7);font-weight:800;text-shadow:0 1px 1px rgba(255,255,255,0.9),0 -1px 1px rgba(153,27,27,0.2)}

.copy-cell:hover{text-decoration:underline}

/* SMS tooltip */
.sms-col{position:relative;cursor:default}
.sms-preview{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#smsTooltip{
    display:none;
    position:fixed;
    z-index:99999;
    background:rgba(28,28,28,0.93);
    color:#fff;
    font-size:12.5px;
    line-height:1.6;
    padding:7px 12px;
    border-radius:8px;
    max-width:320px;
    min-width:80px;
    word-break:break-word;
    white-space:pre-wrap;
    box-shadow:0 6px 20px rgba(0,0,0,0.28);
    pointer-events:auto;
    cursor:text;
    user-select:text;
}

.action-btn{
  height:30px;
  padding:5px 10px;
  border-radius:8px;
  font-size:12px;
}

/* HISTORY */
.history-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(15,23,42,.55);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

.history-modal{
  width:min(760px,96vw);
  max-height:86vh;
  overflow:auto;
  background:#fff;
  border-radius:18px;
  padding:16px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}

.history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.history-head h2{
  margin:0;
  font-size:20px;
  font-weight:900;
}

.history-close{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  max-width:42px!important;
  border-radius:50%!important;
  background:#ef4444!important;
  color:#fff!important;
  padding:0!important;
  font-size:26px!important;
  font-weight:900!important;
}

.history-tabs{
  display:flex;
  gap:8px;
  margin-bottom:10px;
}

.history-tabs .btn{
  height:36px;
  font-size:13px;
}

#historyMsg{
  margin:8px 0;
  color:var(--blue2);
  font-weight:800;
}

.history-table-wrap{
  border:1px solid var(--border);
  border-radius:12px;
}

.history-modal table{
  min-width:620px;
  table-layout:fixed;
}

.history-modal th,
.history-modal td{
  padding:8px 9px;
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.history-modal th:nth-child(1),
.history-modal td:nth-child(1){width:44px;text-align:center}

.history-modal th:nth-child(2),
.history-modal td:nth-child(2){width:145px}

.history-modal th:nth-child(3),
.history-modal td:nth-child(3){width:135px}

.history-modal th:nth-child(4),
.history-modal td:nth-child(4){width:112px}

.history-modal th:nth-child(5),
.history-modal td:nth-child(5){width:95px}

.history-modal th:nth-child(6),
.history-modal td:nth-child(6){width:90px}

.history-modal th:nth-child(7),
.history-modal td:nth-child(7){width:70px}

/* MOBILE */
@media(max-width:700px){
  body{font-size:13px}

  .wrap{padding:8px}

  .card{
    padding:12px;
    border-radius:12px;
  }

  .top-line{
    flex-direction:column;
    align-items:flex-start;
  }

  .top-right{
    width:100%;
    justify-content:space-between;
    gap:8px;
  }

  .top-line h1{
    font-size:23px;
  }

  .logout{
    padding:8px 11px;
    font-size:13px;
  }

  .balance{
    max-width:72%;
    padding:7px 10px;
    font-size:13px;
    overflow:hidden;
  }

  .balance .username{
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .main-form{
    grid-template-columns:1fr 84px 62px;
    gap:7px;
  }

  #projectSelect{
    grid-column:1 / -1;
  }

  #getBtn{
    grid-column:1 / -1;
    width:100%;
  }

  .top-buttons{
    display:grid;
    grid-template-columns:1fr;
  }

  .top-buttons .btn{
    width:100%;
  }

  .workspace-head{
    flex-direction:column;
    align-items:stretch;
  }

  .workspace-actions{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:6px;
  }

  .workspace-actions .btn{
    width:100%;
    padding:0 6px;
    font-size:11px;
  }

  .orders-table{
    min-width:980px;
  }

  th,td{
    padding:7px 6px;
    font-size:12px;
  }

  .phone-col,.otp-col{
    font-size:14px;
  }

  .history-modal{
    width:95vw;
    max-height:82vh;
    padding:12px;
  }

  .history-head h2{
    font-size:17px;
  }

  .history-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .history-tabs .btn{
    width:100%;
    font-size:12px;
    padding:0 6px;
  }

  .history-modal table{
    min-width:650px;
  }
}
/* FIX tiền + ¥ đỏ trên mọi thiết bị */
.balance .money,
.balance .money #points,
.balance #points{
  color:#dc2626 !important;
}

.balance .money{
  display:inline-flex !important;
  align-items:center !important;
  gap:0 !important;
}
/* FIX WORKSPACE TABLE KHÔNG MẤT CỘT */
.table-wrap{
  width:100% !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
}

.orders-table{
  width:100% !important;
  min-width:1180px !important;
  border-collapse:collapse !important;
  table-layout:auto !important;
}

.orders-table th,
.orders-table td{
  display:table-cell !important;
  padding:9px 8px !important;
  white-space:nowrap !important;
  border-bottom:1px solid #e5e7eb !important;
  font-size:13px !important;
}

.check-col{width:34px !important;text-align:center !important}
.stt-col{width:44px !important;text-align:center !important}
.time-col{width:145px !important}
.service-col{width:170px !important}
.phone-col{width:130px !important}
.otp-col{width:110px !important}
.sms-col{min-width:260px !important;width:auto !important;max-width:none !important;overflow:hidden !important;text-overflow:ellipsis !important}
.orders-table th.sms-col{white-space:normal !important;word-break:break-word !important;text-align:center !important;}
.orders-table td.sms-col{white-space:normal !important;word-break:break-word !important;text-align:left !important;}
.otp-col,.orders-table th.otp-col{text-align:center !important}
.status-col,.orders-table th.status-col{text-align:center !important}
.action-col{width:90px !important;text-align:center !important}
/* ===== UI APP LEVEL 2: gradient + shadow + animation nhẹ ===== */

.card{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%)!important;
  border:1px solid rgba(226,232,240,.9)!important;
  box-shadow:0 12px 35px rgba(15,23,42,.08)!important;
  transition:transform .18s ease, box-shadow .18s ease;
}

.card:hover{
  box-shadow:0 16px 45px rgba(15,23,42,.11)!important;
}

.top-line h1{
  background:linear-gradient(90deg,#059669,#0ea5e9);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
}

.balance{
  background:linear-gradient(180deg,#ffffff,#f8fafc)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(15,23,42,.08)!important;
}

.btn,
button,
.logout{
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.btn:hover,
button:hover,
.logout:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
  box-shadow:0 8px 18px rgba(15,23,42,.15);
}

.btn:active,
button:active,
.logout:active{
  transform:translateY(0) scale(.98);
}

.blue{
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
}

.green,
#getBtn{
  background:linear-gradient(135deg,#059669,#10b981)!important;
}

.yellow{
  background:linear-gradient(135deg,#f59e0b,#d97706)!important;
}

.danger,
.action-btn.danger{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
}

.orders-table tbody tr{
  transition:background .15s ease, transform .15s ease;
}

.orders-table tbody tr:hover{
  background:#f8fafc!important;
}

.phone-col,
.otp-col{
  transition:transform .12s ease, text-shadow .12s ease;
}

.phone-col:hover,
.otp-col:hover{
  transform:scale(1.03);
  text-shadow:0 4px 12px rgba(14,165,233,.2);
}

.history-modal{
  background:linear-gradient(180deg,#ffffff,#f8fafc)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.35)!important;
  animation:popIn .18s ease-out;
}

@keyframes popIn{
  from{
    opacity:0;
    transform:translateY(8px) scale(.98);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}
/* ===== FIX CLICK TOÀN TRANG ===== */

/* Khi history đóng bằng style display:none thì tuyệt đối không được bắt click */
#historyOverlay[style*="display:none"],
#historyOverlay[style*="display: none"]{
  display:none !important;
  pointer-events:none !important;
}

/* Khi mở mới được bắt click */
#historyOverlay{
  pointer-events:auto !important;
}

/* Modal nhận click bình thường */
.history-modal,
.history-modal *{
  pointer-events:auto !important;
}

/* UI chính luôn click được */
.wrap,
.card,
.top-card,
.workspace-card,
button,
a,
input,
select,
td,
th{
  pointer-events:auto !important;
}
/* ===== TOAST NOTIFICATION ===== */

.toast-box{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:9999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  min-width:220px;
  max-width:90vw;
  padding:12px 18px;
  border-radius:10px;
  color:#fff;
  font-weight:600;
  text-align:center;

  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow:0 10px 25px rgba(0,0,0,.25);

  opacity:0;
  transform:translateY(-20px) scale(.95);
  animation:toastIn .25s ease forwards, toastOut .25s ease forwards 2.5s;
}

/* success */
.toast.success{
  background:linear-gradient(135deg,#059669,#10b981);
}

/* error */
.toast.error{
  background:linear-gradient(135deg,#ef4444,#dc2626);
}

@keyframes toastIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes toastOut{
  to{
    opacity:0;
    transform:translateY(-20px) scale(.95);
  }
}
.toast-box{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:999999;
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}

.toast{
  min-width:220px;
  max-width:90vw;
  padding:12px 18px;
  border-radius:12px;
  color:#fff;
  font-weight:800;
  text-align:center;
  background:linear-gradient(135deg,#2563eb,#0ea5e9);
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(-20px) scale(.95);
  animation:toastIn .25s ease forwards, toastOut .25s ease forwards 2.5s;
}

.toast.success{
  background:linear-gradient(135deg,#059669,#10b981);
}

.toast.error{
  background:linear-gradient(135deg,#ef4444,#dc2626);
}

@keyframes toastIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes toastOut{
  to{
    opacity:0;
    transform:translateY(-20px) scale(.95);
  }
}
.toast-box{
  position:fixed!important;
  top:18px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:2147483647!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
  pointer-events:none!important;
}

.toast{
  min-width:220px!important;
  max-width:92vw!important;
  padding:12px 18px!important;
  border-radius:12px!important;
  color:#fff!important;
  font-weight:800!important;
  text-align:center!important;
  background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.28)!important;
  opacity:0;
  transform:translateY(-28px) scale(.96);
  animation:toastIn .25s ease forwards, toastOut .25s ease forwards 2.6s;
}

.toast.success{
  background:linear-gradient(135deg,#059669,#10b981)!important;
}

.toast.error{
  background:linear-gradient(135deg,#ef4444,#dc2626)!important;
}

@keyframes toastIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes toastOut{
  to{
    opacity:0;
    transform:translateY(-28px) scale(.96);
  }
}
/* ===== TOAST ANDROID FINAL ===== */
#toastBox.toast-box{
  position:fixed!important;
  top:calc(env(safe-area-inset-top, 0px) + 70px)!important;
  left:50%!important;
  right:auto!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  z-index:2147483647!important;
  display:block!important;
  pointer-events:none!important;
}

#toastBox .toast{
  display:block!important;
  min-width:240px!important;
  max-width:90vw!important;
  margin-bottom:10px!important;
  padding:13px 18px!important;
  border-radius:14px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:900!important;
  text-align:center!important;
  background:#2563eb!important;
  box-shadow:0 12px 30px rgba(0,0,0,.35)!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  animation:none!important;
}

#toastBox .toast.success{
  background:#16a34a!important;
}

#toastBox .toast.error{
  background:#ef4444!important;
}
/* ===== TOAST CHUẨN MOBILE ===== */
#toastBox{
  position:fixed!important;
  top:90px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  z-index:999999!important;
}

#toastBox .toast{
  background:#2563eb!important;
  color:#fff!important;
  padding:12px 18px!important;
  border-radius:12px!important;
  font-weight:700!important;
  box-shadow:0 10px 25px rgba(0,0,0,.3)!important;
}

/* ===== TIỀN ĐỎ FULL ===== */
.balance .money,
.balance #points{
  color:#dc2626!important;
}
/* ===== RESTORE CLICK ===== */
html,
body,
.wrap,
.card,
button,
a,
input,
select,
textarea,
table,
td,
th{
  pointer-events:auto !important;
  touch-action:auto !important;
}

button,
a,
input,
select,
textarea,
.copy-cell,
.phone-col,
.otp-col,
.rowCheck,
#checkAll{
  position:relative;
  z-index:5;
}
#historyOverlay[style*="display:none"],
#historyOverlay[style*="display: none"]{
  display:none !important;
  pointer-events:none !important;
}
*{box-sizing:border-box}
:root{--bg:#f3f4f6;--card:#ffffff;--text:#111827;--muted:#6b7280;--border:#e5e7eb;--blue:#0ea5e9;--blue2:#2563eb;--green:#16a34a;--red:#ef4444;--yellow:#f59e0b;--shadow:0 8px 24px rgba(15,23,42,.08)}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.wrap{width:100%;padding:10px}.card{background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);border:1px solid rgba(226,232,240,.9);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:0 12px 35px rgba(15,23,42,.08);transition:box-shadow .18s ease}.card:hover{box-shadow:0 16px 45px rgba(15,23,42,.11)}
.top-line{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--border);padding-bottom:12px;margin-bottom:12px}.top-line h1{margin:0;font-size:26px;font-weight:900;background:linear-gradient(90deg,#059669,#0ea5e9);-webkit-background-clip:text;background-clip:text;color:transparent}.top-right{display:flex;align-items:center;gap:10px}.logout{background:#dc2626;color:#fff;text-decoration:none;padding:9px 14px;border-radius:10px;font-weight:800}.balance{display:inline-flex;align-items:center;gap:7px;background:#f1f5f9;border:2px solid #d1d5db;border-radius:999px;padding:7px 14px;font-weight:900;white-space:nowrap;line-height:1;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 18px rgba(15,23,42,.08)}.balance span{display:inline-flex;align-items:center}.balance .username{color:var(--blue2)}.balance .money,.balance .money #points,.balance #points{color:#dc2626!important}
.main-form{display:grid;grid-template-columns:260px 120px 76px 160px;gap:8px;align-items:center}select,input,button{height:40px;padding:8px 10px;border-radius:10px;border:1px solid #d1d5db;font-size:14px;font-family:inherit}button{border:0;cursor:pointer;color:#fff;font-weight:800}#getBtn{background:linear-gradient(135deg,#059669,#10b981)}.btn{height:38px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-weight:800;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}.btn:hover,button:hover,.logout:hover{transform:translateY(-1px);filter:brightness(1.04);box-shadow:0 8px 18px rgba(15,23,42,.15)}.btn:active,button:active,.logout:active{transform:translateY(0) scale(.98)}.blue{background:linear-gradient(135deg,#2563eb,#0ea5e9)!important}.green{background:linear-gradient(135deg,#059669,#10b981)!important}.yellow{background:linear-gradient(135deg,#f59e0b,#d97706)!important}.danger{background:linear-gradient(135deg,#ef4444,#dc2626)!important}.top-buttons{margin-top:12px;display:flex;justify-content:flex-end;gap:8px}
.workspace-head{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid var(--border);padding-bottom:10px;margin-bottom:10px}.workspace-head h2{margin:0;font-size:18px;font-weight:900}.workspace-actions{display:flex;gap:7px}.workspace-actions .btn{height:32px;padding:0 12px;font-size:12px}#msg{margin:8px 0;color:var(--blue2);font-weight:800}.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}table{border-collapse:collapse;width:100%}.orders-table{min-width:1180px;table-layout:auto;width:100%}th,td{padding:9px 8px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap;vertical-align:middle;font-size:13px}th{background:#f8fafc;font-weight:900;color:#334155}.check-col{width:34px;text-align:center}#checkAll,.rowCheck{width:15px!important;height:15px!important;min-width:15px!important;padding:0!important;margin:0!important;cursor:pointer}.stt-col{width:44px;text-align:center;color:#2563eb;font-weight:900}.time-col{width:145px;color:var(--muted)}.service-col{width:170px;max-width:170px;overflow:hidden;text-overflow:ellipsis}.phone-col{width:130px;color:var(--blue);font-weight:900;font-size:15px;cursor:pointer;transition:transform .12s ease,text-shadow .12s ease}.otp-col{width:110px;color:var(--green);font-weight:900;font-size:15px;cursor:pointer;transition:transform .12s ease,text-shadow .12s ease;text-align:center}.phone-col:hover,.otp-col:hover{transform:scale(1.03);text-shadow:0 4px 12px rgba(14,165,233,.2);text-decoration:underline}.sms-col{width:auto;min-width:240px;white-space:normal;word-break:break-word;color:#475569;line-height:1.4;text-align:center}.status-col{width:110px;font-weight:800;text-align:center}.action-col{width:90px;text-align:center}.status-ok{color:#059669}.status-timeout{color:#ef4444}.status-waiting{color:#d97706}.status-muted{color:#9ca3af}.status-cancelled{color:#dc2626;font-weight:800;text-shadow:0 0 8px rgba(220,38,38,0.4)}.status-cancelled-faint{color:rgba(239,68,68,0.7);font-weight:800;text-shadow:0 1px 1px rgba(255,255,255,0.9),0 -1px 1px rgba(153,27,27,0.2)}.orders-table tbody tr{transition:background .15s ease}.orders-table tbody tr:hover{background:#f8fafc}.action-btn{height:30px;padding:5px 10px;border-radius:8px;font-size:12px}
.history-overlay{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:12px}.history-overlay.is-hidden{display:none!important;pointer-events:none!important}.history-overlay:not(.is-hidden){display:flex!important;pointer-events:auto!important}.history-modal{width:min(760px,96vw);max-height:86vh;overflow:auto;background:linear-gradient(180deg,#ffffff,#f8fafc);border-radius:18px;padding:16px;box-shadow:0 30px 90px rgba(0,0,0,.35);animation:popIn .18s ease-out}.history-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.history-head h2{margin:0;font-size:20px;font-weight:900}.history-close{width:42px!important;height:42px!important;min-width:42px!important;max-width:42px!important;border-radius:50%!important;background:#ef4444!important;color:#fff!important;padding:0!important;font-size:26px!important;font-weight:900!important}.history-tabs{display:flex;gap:8px;margin-bottom:10px}.history-tabs .btn{height:36px;font-size:13px}#historyMsg{margin:8px 0;color:var(--blue2);font-weight:800}.history-table-wrap{border:1px solid var(--border);border-radius:12px;overflow-x:auto!important;-webkit-overflow-scrolling:touch}.history-modal table{min-width:780px;table-layout:auto!important}.history-modal th,.history-modal td{padding:8px 12px;font-size:13px;overflow:visible!important;text-overflow:clip!important;white-space:nowrap!important}.history-modal th:nth-child(1),.history-modal td:nth-child(1){width:50px;text-align:center}.history-modal th:nth-child(2),.history-modal td:nth-child(2){width:150px}.history-modal th:nth-child(3),.history-modal td:nth-child(3){width:140px}.history-modal th:nth-child(4),.history-modal td:nth-child(4){width:120px}.history-modal th:nth-child(5),.history-modal td:nth-child(5){width:100px}
#toastBox.toast-box, .toast-box {
  position: fixed !important;
  top: 30px !important; /* Premium modern top position */
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 2147483647 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  pointer-events: none !important;
}

#toastBox .toast, .toast {
  min-width: 280px !important;
  max-width: 92vw !important;
  padding: 14px 22px !important;
  border-radius: 16px !important;
  color: #ffffff !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-align: center !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.22) !important;
  opacity: 1 !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(96, 165, 250, 0.9)) !important;
  animation: premiumToastIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.15) forwards !important;
}

#toastBox .toast.success, .toast.success {
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.95), rgba(34, 197, 94, 0.9)) !important;
}

#toastBox .toast.error, .toast.error {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.95), rgba(248, 113, 113, 0.9)) !important;
}

#toastBox .toast.hide, .toast.hide {
  opacity: 0 !important;
  transform: translateY(-20px) scale(0.94) !important;
}

@keyframes premiumToastIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.wrap, .card, button, a, input, select, textarea, .copy-cell, .phone-col, .otp-col {
  pointer-events: auto !important;
  touch-action: auto !important;
}

button, a, input, select, textarea {
  position: relative;
  z-index: 10;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media(max-width:700px){body{font-size:13px}.wrap{padding:8px}.card{padding:12px;border-radius:12px}.top-line{flex-direction:column;align-items:flex-start}.top-right{width:100%;justify-content:space-between;gap:8px}.top-line h1{font-size:23px}.logout{padding:8px 11px;font-size:13px}.balance{max-width:72%;padding:7px 10px;font-size:13px;overflow:hidden}.balance .username{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.main-form{grid-template-columns:1fr 84px 62px;gap:7px}#projectSelect{grid-column:1 / -1}#getBtn{grid-column:1 / -1;width:100%}.top-buttons{display:grid;grid-template-columns:1fr}.top-buttons .btn{width:100%}.workspace-head{flex-direction:column;align-items:stretch}.workspace-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.workspace-actions .btn{width:100%;padding:0 6px;font-size:11px}.orders-table{min-width:920px}.orders-table th,.orders-table td{padding:7px 6px;font-size:12px}.phone-col,.otp-col{font-size:14px}.orders-table th.otp-col,.orders-table td.otp-col,.orders-table th.status-col,.orders-table td.status-col{text-align:center !important}.orders-table th.sms-col,.orders-table td.sms-col{width:auto !important;min-width:130px !important;max-width:170px !important;text-align:center !important;white-space:normal !important;word-break:break-word !important}.orders-table th.status-col,.orders-table td.status-col{width:82px !important;min-width:82px !important}.orders-table th.action-col,.orders-table td.action-col{width:74px !important;min-width:74px !important}.history-modal{width:95vw;max-height:82vh;padding:12px}.history-head h2{font-size:17px}.history-tabs{display:grid;grid-template-columns:1fr 1fr}.history-tabs .btn{width:100%;font-size:12px;padding:0 6px}.history-modal table{min-width:780px!important}}
.mobile-get-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.get-row {
  display: flex;
  gap: 10px;
  width: 100%;
}

.get-row-1 select,
.get-row-1 input {
  flex: 1;
  min-width: 0;
}

.get-row-2 input {
  flex: 1;
  min-width: 0;
}

.get-row-2 button {
  white-space: nowrap;
}

@media (max-width: 600px) {
  .get-row-1 {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 0.8fr;
    gap: 8px;
  }

  .get-row-2 {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
  }

  #quantity {
    width: 100%;
  }

  #fixedPhoneInput {
    width: 100%;
  }

  #getBtn {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 13px;
  }
}
@media (min-width: 768px) {
  .mobile-get-form {
    max-width: 650px;
    margin: 0 auto;
  }

  .get-row-1,
  .get-row-2 {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .get-row-1 #projectSelect {
    width: 260px;
    flex: none;
  }

  .get-row-1 #serverSelect {
    width: 90px;
    flex: none;
  }
}

/* ===== Desktop table final fix (force override) ===== */
@media (min-width: 1024px) {
  .orders-table {
    min-width: 1180px !important;
    table-layout: auto !important;
    width: 100% !important;
  }

  .orders-table th.sms-col {
    width: auto !important;
    min-width: 360px !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .orders-table td.sms-col {
    width: auto !important;
    min-width: 360px !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .orders-table th.otp-col,
  .orders-table td.otp-col,
  .orders-table th.status-col,
  .orders-table td.status-col {
    text-align: center !important;
  }
}

  .get-row-1 #quantity {
    width: 60px;
    flex: none;
    text-align: center;
  }

  .get-row-2 #fixedPhoneInput {
    width: 220px;
    flex: none;
  }

  .get-row-2 #getBtn {
    width: 130px;
    flex: none;
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .mobile-get-form {
    max-width: 650px;
    margin-left: 0px;
    margin-right: auto;
  }

  .get-row-1,
  .get-row-2 {
    justify-content: flex-start;
  }

  #projectSelect {
    width: 260px;
    flex: none;
  }

  #stockSelect {
    width: 90px;
    flex: none;
  }

  #quantity {
    width: 60px;
    flex: none;
    text-align: center;
  }

  #fixedPhoneInput {
    width: 220px;
    flex: none;
  }

  #getBtn {
    width: 130px;
    flex: none;
  }
}
.mobile-get-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* PC */
@media (min-width: 768px) {

  .mobile-get-form {
    max-width: 650px;
    margin-left: 0;
  }

  .get-row {
    display: flex;
    gap: 8px;
  }

  #projectSelect {
    width: 260px;
  }

  #stockSelect {
    width: 90px;
  }

  #quantity {
    width: 60px;
    text-align: center;
  }

  #fixedPhoneInput {
    width: 220px;
  }

  #getBtn {
    width: 130px;
  }
}

/* MOBILE */
@media (max-width: 600px) {

  .get-row-1 {
    display: grid;
    grid-template-columns: 1fr 80px 60px;
  }

  .get-row-2 {
    display: grid;
    grid-template-columns: 1fr auto;
  }

  #getBtn {
    width: 100%;
  }
}
@media (max-width: 700px) {
  .mobile-get-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .get-row-1 {
    display: grid !important;
    grid-template-columns: 145px minmax(0, 1fr) 60px !important;
    gap: 8px !important;
  }

  .get-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 130px !important;
    gap: 8px !important;
  }

  #projectSelect,
  #stockSelect,
  #quantity,
  #fixedPhoneInput,
  #getBtn {
    height: 40px !important;
  }

  #projectSelect {
    grid-column: auto !important;
    width: 100% !important;
  }

  #stockSelect {
    width: 100% !important;
  }

  #quantity {
    width: 100% !important;
    text-align: center !important;
  }

  #fixedPhoneInput {
    width: 100% !important;
  }

  #getBtn {
    grid-column: auto !important;
    width: 100% !important;
    font-size: 12px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 700px) {
  .main-form.mobile-get-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .main-form.mobile-get-form .get-row-1 {
    display: grid !important;
    grid-template-columns: 145px minmax(0, 1fr) 60px !important;
    gap: 8px !important;
  }

  .main-form.mobile-get-form .get-row-2 {
    display: grid !important;
    grid-template-columns: 1fr 130px !important;
    gap: 8px !important;
  }

  .main-form.mobile-get-form #projectSelect,
  .main-form.mobile-get-form #stockSelect,
  .main-form.mobile-get-form #quantity,
  .main-form.mobile-get-form #fixedPhoneInput,
  .main-form.mobile-get-form #getBtn {
    height: 40px !important;
  }

  .main-form.mobile-get-form #projectSelect {
    grid-column: auto !important;
    width: 100% !important;
  }

  .main-form.mobile-get-form #stockSelect {
    width: 100% !important;
  }

  .main-form.mobile-get-form #quantity {
    width: 100% !important;
    text-align: center !important;
  }

  .main-form.mobile-get-form #fixedPhoneInput {
    width: 100% !important;
  }

  .main-form.mobile-get-form #getBtn {
    grid-column: auto !important;
    width: 100% !important;
    font-size: 12px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
}
/* ===== MOBILE FORM FINAL - KHONG ANH HUONG PC ===== */
@media screen and (max-width: 700px) {
  .top-card .main-form.mobile-get-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .top-card .main-form.mobile-get-form .get-row-1 {
    display: grid !important;
    grid-template-columns: 145px minmax(0, 1fr) 60px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .top-card .main-form.mobile-get-form .get-row-2 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 130px !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .top-card .main-form.mobile-get-form #projectSelect,
  .top-card .main-form.mobile-get-form #stockSelect,
  .top-card .main-form.mobile-get-form #quantity,
  .top-card .main-form.mobile-get-form #fixedPhoneInput,
  .top-card .main-form.mobile-get-form #getBtn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 40px !important;
    grid-column: auto !important;
    flex: none !important;
  }

  .top-card .main-form.mobile-get-form #quantity {
    text-align: center !important;
  }

  .top-card .main-form.mobile-get-form #getBtn {
    font-size: 12px !important;
    padding: 0 8px !important;
    white-space: nowrap !important;
  }
}
/* ===== FIX MOBILE FORM TRÀN NGANG ===== */
@media(max-width:700px){

  .top-card{
    overflow:hidden!important;
  }

  .main-form{
    display:grid!important;
    grid-template-columns:1fr 70px!important;
    gap:8px!important;
  }

  #projectSelect{
    grid-column:1 / -1!important;
    width:100%!important;
  }

  #stockSelect{
    grid-column:1 / 2!important;
    width:100%!important;
  }

  #quantity{
    grid-column:2 / 3!important;
    width:100%!important;
    text-align:center!important;
  }

  #customPhone{
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    display:block!important;
  }

  #getBtn{
    grid-column:1 / -1!important;
    width:100%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    white-space:nowrap!important;
  }
}
/* ===== PC: kéo dài ô nhập số ===== */
@media(min-width: 701px){

  .main-form{
    display:flex;
    align-items:center;
    gap:10px;
  }

  #projectSelect{
    width:260px;
  }

  #stockSelect{
    width:120px;
  }

  #quantity{
    width:70px;
    text-align:center;
  }

  #customPhone{
    flex:1;              /* 👉 quan trọng: tự giãn */
    min-width:260px;     /* 👉 tối thiểu cho đẹp */
  }

  #getBtn{
    width:160px;
  }
}
/* kéo dài riêng ô nhập SDT */
#customPhone{
    flex:1.6 !important;   /* 👉 tăng độ ưu tiên giãn */
    min-width:320px;       /* 👉 dài hơn hiện tại */
    max-width:520px;       /* 👉 không cho nó dài quá xấu */
}
@media(min-width:701px){
  .main-form{
      width:100%;
  }
}
/* ===== FORM PC GỐC (ỔN ĐỊNH) ===== */
@media(min-width:701px){

  .main-form{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
  }

  #projectSelect{
    width:260px;
  }

  #stockSelect{
    width:120px;
  }

  #quantity{
    width:70px;
    text-align:center;
  }

  #customPhone{
    flex:1;            /* 👉 tự giãn nhưng không phá layout */
    min-width:220px;
  }

  #getBtn{
    width:150px;
    white-space:nowrap;
  }
}
/* ===== TINH CHỈNH NHẸ FORM ===== */
@media(min-width:701px){

  #customPhone{
    flex:2;              /* 👉 kéo dài hơn */
    min-width:300px;
  }

  #getBtn{
    margin-left:8px;     /* 👉 đẩy nút ra xa chút */
    padding:0 20px;     /* 👉 nút nhìn đỡ chật */
  }

}
@media(min-width:1px){

  #customPhone{
    flex:1.5;      /* 👉 tăng nhẹ (đang là 2 hoặc 1.5) */
    min-width:300px;
  }

}
/* ===== FIX CHUẨN: chỉ kéo ô SDT, nút về bình thường ===== */
@media(min-width:701px){

  .main-form{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
  }

  /* 👉 Ô nhập SDT dài ra */
  #customPhone{
    flex:1 !important;        /* tự giãn */
    min-width:800px !important;
  }

  /* 👉 Nút về size gốc (không bị kéo) */
  #getBtn{
    flex:0 0 auto !important;
    width:auto !important;
    padding:0 16px !important;
    white-space:nowrap;
  }

}
/* ===== FINAL: kéo dài ô nhập SDT, nút Thuê Số gọn lại ===== */
@media (min-width:701px){

  .main-form{
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:center !important;
    gap:10px !important;
  }

  #projectSelect{
    width:260px !important;
    flex:0 0 260px !important;
  }

  #stockSelect{
    width:120px !important;
    flex:0 0 120px !important;
  }

  #quantity{
    width:70px !important;
    flex:0 0 70px !important;
    text-align:center !important;
  }

  #customPhone{
    width:420px !important;
    min-width:420px !important;
    max-width:420px !important;
    flex:0 0 420px !important;
  }

  #getBtn{
    width:auto !important;
    min-width:120px !important;
    flex:0 0 auto !important;
    padding:0 16px !important;
    white-space:nowrap !important;
  }
}
/* ===== FIX DỨT ĐIỂM: Ô SDT LUÔN DÀI ===== */
@media (min-width:701px){

  .main-form{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
    align-items:center !important;
  }

  #projectSelect{
    flex:0 0 260px !important;
  }

  #stockSelect{
    flex:0 0 110px !important;
  }

  #quantity{
    flex:0 0 60px !important;
  }

  /* 👉 CÁI QUAN TRỌNG NHẤT */
  #customPhone{
    flex:1 1 auto !important;   /* chiếm toàn bộ phần còn lại */
    width:auto !important;
    min-width:0 !important;
  }

  /* 👉 Nút giữ size nhỏ gọn */
  #getBtn{
    flex:0 0 auto !important;
    width:auto !important;
    padding:0 14px !important;
  }

}
@media(min-width:650px){
  #fixedPhoneInput{
    width:250px !important;   /* 👉 chỉnh số này */
  }
}
/* ===== MOBILE: dồn logout + user lên 1 hàng ===== */
@media(max-width:700px){

  .top-line{
    flex-direction:row !important;      /* không xuống dòng nữa */
    align-items:center !important;
    justify-content:space-between !important;
  }

  .top-line h1{
    font-size:20px !important;
    flex:1;
  }

  .top-right{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex-shrink:0;
  }

  .logout{
    padding:6px 10px !important;
    font-size:12px !important;
    border-radius:8px !important;
  }

  .balance{
    padding:5px 10px !important;
    font-size:12px !important;
    gap:4px !important;
  }

  .balance .username{
    max-width:70px !important;   /* tránh tràn */
  }

}
/* ===== FIX HEADER MOBILE GỌN GÀNG ===== */
@media(max-width:700px){

  .top-line{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:8px;
  }

  .top-line h1{
    font-size:20px;
    margin:0;
  }

  .top-right{
    display:flex !important;
    align-items:center !important;
    gap:6px;
  }

  .logout{
    background:#ef4444;
    color:#fff;
    border-radius:10px;
    padding:6px 10px;
    font-size:12px;
    font-weight:600;
  }

  .balance{
    display:flex;
    align-items:center;
    gap:4px;
    padding:5px 10px;
    border-radius:20px;
    background:#f3f4f6;
    border:1px solid #e5e7eb;
    font-size:12px;
  }

  .balance .money{
    color:#dc2626; /* 👉 tiền đỏ */
    font-weight:700;
  }

}
/* ===== BALANCE AUTO WIDTH + MOBILE TOP RIGHT ===== */

/* PC + mobile: ô tài khoản tự dài/ngắn theo nội dung */
.balance{
  width:auto !important;
  max-width:none !important;
  min-width:max-content !important;
  overflow:visible !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
}

/* username không bị cắt */
.balance .username{
  max-width:none !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:nowrap !important;
}

/* mobile: đẩy cụm tài khoản sát góc trên phải */
@media(max-width:700px){

  .top-card{
    position:relative !important;
  }

  .top-line{
    position:relative !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:8px !important;
  }

  .top-line h1{
    flex:0 0 auto !important;
    max-width:105px !important;
  }

  .top-right{
    position:absolute !important;
    top:0 !important;
    right:0 !important;
    width:auto !important;
    max-width:none !important;
    display:flex !important;
    justify-content:flex-end !important;
    overflow:visible !important;
  }

  .balance{
    font-size:12px !important;
    padding:6px 8px !important;
    gap:5px !important;
    max-width:calc(100vw - 130px) !important;
    min-width:auto !important;
  }

  .logout{
    padding:6px 9px !important;
    font-size:12px !important;
    white-space:nowrap !important;
  }
}
/* ===== BALANCE AUTO CO GIÃN THÔNG MINH ===== */

.top-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

/* 👈 Tên web co lại nếu cần */
.top-line h1{
  flex:1;
  min-width:0;
}

/* 👉 Cụm user */
.top-right{
  flex:0 1 auto;
  display:flex;
  justify-content:flex-end;
  min-width:0;
}

/* 👉 Ô balance */
.balance{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:20px;
  background:#f3f4f6;
  border:1px solid #e5e7eb;

  max-width:100%;
  overflow:hidden;
}

/* 👉 USER: dài thì tự co lại */
.balance .username{
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* 👉 tiền luôn hiện đủ */
.balance .money{
  color:#dc2626;
  font-weight:700;
  white-space:nowrap;
}

/* ===== MOBILE ===== */
@media(max-width:700px){

  .top-line{
    align-items:flex-start;
  }

  .balance{
    max-width:calc(100vw - 120px);
  }

  .balance .username{
    max-width:80px;
  }

}
.danger-notify-overlay{
  position:fixed;
  inset:0;
  z-index:2147483647;
  background:rgba(0,0,0,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  backdrop-filter:blur(4px);
}

.danger-notify{
  position:relative;
  width:min(460px,94vw);
  background:linear-gradient(180deg,#fff,#fff7f7);
  border:3px solid #ef4444;
  border-radius:18px;
  padding:28px 22px 22px;
  text-align:center;
  box-shadow:0 0 0 6px rgba(239,68,68,.18),0 30px 90px rgba(0,0,0,.45);
  animation:dangerPop .25s ease-out, dangerShake .45s ease .25s;
  overflow:hidden;
}

.danger-icon{
  font-size:48px;
  margin-bottom:8px;
  animation:dangerBlink .9s infinite;
}

.danger-notify h2{
  position:relative;
  margin:0 0 14px;
  color:#dc2626;
  font-size:24px;
  font-weight:900;
}

.danger-content{
  position:relative;
  background:#fee2e2;
  color:#7f1d1d;
  border:1px solid #fecaca;
  border-radius:12px;
  padding:14px;
  font-size:15px;
  font-weight:800;
  line-height:1.45;
  white-space:pre-line;
}

#dangerNotifyOk{
  position:relative;
  margin-top:18px;
  width:100%;
  height:46px;
  border:0;
  border-radius:12px;
  color:#fff;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
  background:linear-gradient(135deg,#ef4444,#b91c1c);
}

.danger-pulse{
  position:absolute;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(239,68,68,.18);
  top:-45px;
  right:-45px;
  animation:pulseDanger 1.2s infinite;
}

@keyframes dangerPop{
  from{opacity:0;transform:scale(.9) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}

@keyframes dangerShake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(4px)}
}

@keyframes dangerBlink{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.16)}
}

@keyframes pulseDanger{
  0%{transform:scale(.8);opacity:.8}
  100%{transform:scale(1.5);opacity:0}
}
/* ===== AUTO WIDTH REAL ===== */
@media(max-width:700px){

  .top-line{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }

  .top-line h1{
    flex:0 0 auto;
    max-width:90px;
  }

  .top-right{
    flex:1;
    display:flex;
    justify-content:flex-end;
    min-width:0;
  }

  .balance{
    display:flex;
    align-items:center;
    gap:6px;

    padding:6px 10px;
    border-radius:20px;

    /* 🔥 QUAN TRỌNG */
    width:auto;
    max-width:100%;
    overflow:hidden;
  }

  /* 👇 USER tự co */
  .balance .username{
    flex:1;
    min-width:0;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* 👇 tiền luôn hiển thị */
  .balance .money{
    flex:0 0 auto;
    color:#dc2626;
    font-weight:700;
    white-space:nowrap;
  }

  /* 👇 logout cố định */
  .logout{
    flex:0 0 auto;
    white-space:nowrap;
  }

}
/* ===== AUTO USERNAME CO GIÃN - KHÔNG PHÁ UI ===== */

/* wrapper giữ nguyên layout */
.top-right{
  display:flex !important;
  align-items:center !important;
  gap:6px;
  min-width:0 !important;
}

/* balance không bị fix cứng nữa */
.balance{
  max-width:100% !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
}

/* 👇 QUAN TRỌNG NHẤT: username tự co */
.balance .username{
  flex:1 1 auto !important;
  min-width:0 !important;

  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* tiền + logout luôn giữ nguyên */
.balance .money{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

.logout{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
/* ===== FIX MẤT ICON MẮT ===== */
.pass-group{
  position:relative !important;
}

.pass-group input{
  padding-right:45px !important;
}

.eye{
  position:absolute !important;
  right:12px !important;
  top:50% !important;
  transform:translateY(-50%) !important;

  display:block !important;
  opacity:1 !important;
  visibility:visible !important;

  font-size:18px !important;
  cursor:pointer !important;
  z-index:999 !important;
}
.pass-group{
    position:relative;
}

.pass-group input{
    width:100%;
    padding-right:46px;
}

.eye{
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:18px;
    user-select:none;
    opacity:.75;
    z-index:20;
}

.eye:hover{
    opacity:1;
}
.actions .btn-green{background:#10b981}
.actions .btn-red{background:#ef4444}
table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

th {
    background: #111827;
    color: #fff;
    padding: 10px;
}

td {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

tr:hover {
    background: #f9fafb;
}
body{
  background:linear-gradient(180deg,#f8fbff,#eef3f9);
  color:#0f172a;
  font-family:Arial,sans-serif;
}

.deposit-wrap{
  max-width:1160px;
  margin:0 auto;
  padding:26px 16px;
}

.deposit-card{
  background:#fff;
  border:1px solid #edf2f7;
  border-radius:26px;
  padding:24px;
  margin-bottom:22px;
  box-shadow:0 18px 45px rgba(15,23,42,.07);
}

.deposit-title{
  font-size:28px;
  color:#059669;
  margin:0;
}

.deposit-form{
  display:grid;
  grid-template-columns:1.4fr repeat(4,.45fr) 1.3fr .65fr;
  gap:10px;
  align-items:center;
}

.deposit-form input,
.deposit-form select{
  height:44px;
  border:1px solid #dbeafe;
  border-radius:16px;
  padding:0 14px;
  background:#fff;
}

.quick-btn{
  height:44px;
  border-radius:16px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#2563eb;
  font-weight:900;
}

.d-btn{
  border-radius:16px;
  padding:11px 16px;
  border:0;
  font-weight:900;
  cursor:pointer;
  text-decoration:none;
}

.d-blue{background:#2563eb;color:#fff}
.d-yellow{background:#f59e0b;color:#fff}
.d-green{background:#10b981;color:#fff}
.d-red{background:#ef4444;color:#fff}
.d-gray{background:#64748b;color:#fff}

.table-wrap{
  border:1px solid #e5e7eb;
  border-radius:20px;
  overflow:hidden;
}

.deposit-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.deposit-table th{
  background:#111827;
  color:#fff;
  padding:14px 12px;
  text-align:left;
  font-size:14px;
}

.deposit-table td{
  padding:14px 12px;
  border-bottom:1px solid #eef2f7;
  font-size:14px;
}

.deposit-table tr:hover{
  background:#f8fafc;
}

.transfer-code{
  color:#ef4444;
  font-weight:900;
  letter-spacing:1px;
}

.status-ok{color:#16a34a;font-weight:900}
.status-cancel{color:#dc2626;font-weight:900}
.status-wait{color:#d97706;font-weight:900}

.note-cell{
  color:#64748b;
  max-width:220px;
  white-space:normal;
}

.popup-bg{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.55);
  z-index:99999;
  padding:20px;
  backdrop-filter:blur(5px);
}

.popup-box{
  background:#fff;
  max-width:460px;
  margin:50px auto;
  padding:24px;
  border-radius:28px;
  box-shadow:0 35px 90px rgba(15,23,42,.35);
}

.popup-close{
  float:right;
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  background:#ef4444;
  color:#fff;
  font-weight:900;
}

.info-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid #f1f5f9;
}

.qr-img{
  width:100%;
  max-width:280px;
  display:block;
  margin:16px auto;
  border-radius:18px;
  border:1px solid #e5e7eb;
}

.copy-btn{
  margin-left:8px;
  padding:5px 9px;
  border-radius:10px;
  border:1px solid #bfdbfe;
  background:#eff6ff;
  color:#2563eb;
  font-weight:900;
}

@media(max-width:900px){
  .deposit-form{
    grid-template-columns:1fr 1fr;
  }
}
@import url("soft-ui-user.css?v=20260516");

/* ===== FINAL REQUEST: giu UI cu, chi gom menu chuc nang thanh 1 hang ===== */
/* Desktop/tablet: cac nut tu thu phong nhu tab, nam tren mot hang */
.top-buttons.user-action-bar,
.user-action-bar{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:14px 0 0 !important;
  align-items:stretch !important;
  justify-content:stretch !important;
  flex-wrap:nowrap !important;
}
.top-buttons.user-action-bar .btn,
.user-action-bar .btn{
  width:100% !important;
  min-width:0 !important;
  height:40px !important;
  padding:0 10px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  text-align:center !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

@media(max-width:700px){
  /* Mobile: bat buoc 5 nut nam cung 1 dong, khong xuong 2 cot */
  .top-buttons.user-action-bar,
  .user-action-bar{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:6px !important;
    width:100% !important;
    margin:10px 0 0 !important;
  }
  .top-buttons.user-action-bar .btn,
  .user-action-bar .btn{
    width:100% !important;
    min-width:0 !important;
    height:46px !important;
    padding:0 3px !important;
    border-radius:11px !important;
    font-size:10.5px !important;
    line-height:1.12 !important;
    font-weight:800 !important;
    white-space:normal !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    word-break:keep-all !important;
    text-align:center !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }
}

@media(max-width:380px){
  .top-buttons.user-action-bar,
  .user-action-bar{gap:5px !important;}
  .top-buttons.user-action-bar .btn,
  .user-action-bar .btn{
    height:44px !important;
    font-size:9.5px !important;
    padding:0 2px !important;
  }
}

/* Desktop rong: hang nut nhin nhu tab va tu gian theo man hinh */
@media(min-width:701px){
  .top-buttons.user-action-bar,
  .user-action-bar{
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;
  }
  .top-buttons.user-action-bar .btn,
  .user-action-bar .btn{
    height:42px !important;
    font-size:14px !important;
  }
}

/* === DEFINITIVE USER ACTION BAR AUTO EXPAND BY REAL BUTTON COUNT === */
.top-buttons.user-action-bar[data-action-count],
.user-action-bar[data-action-count]{
  display:grid !important;
  grid-template-columns:repeat(var(--action-count), minmax(0, 1fr)) !important;
  width:100% !important;
  max-width:100% !important;
  justify-content:stretch !important;
  align-items:stretch !important;
  gap:clamp(6px, .9vw, 12px) !important;
}
.top-buttons.user-action-bar[data-action-count] > .btn,
.user-action-bar[data-action-count] > .btn{
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  flex:1 1 0 !important;
}
@media(max-width:700px){
  .top-buttons.user-action-bar[data-action-count],
  .user-action-bar[data-action-count]{
    grid-template-columns:repeat(var(--action-count), minmax(0, 1fr)) !important;
    gap:5px !important;
  }
  .top-buttons.user-action-bar[data-action-count] > .btn,
  .user-action-bar[data-action-count] > .btn{
    height:38px !important;
    padding:0 2px !important;
    font-size:9.6px !important;
    font-weight:600 !important;
    line-height:1.05 !important;
  }
}