:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #16202a;
  --ink-soft: #5b6b7a;
  --line: #e2e6ea;
  --brand: #0f766e;
  --brand-ink: #ffffff;
  --danger: #b42318;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .05);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.view { height: 100%; }
[hidden],
.ov-btn[hidden],
button[hidden],
div[hidden],
.ov-dropdown-wrap[hidden],
.is-hidden {
  display: none !important;
}

/* ---------- login ---------- */
#view-login {
  display: grid;
  place-items: center;
  padding: 20px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 24px 22px;
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
}
.brand h1 { margin: 0; font-size: 19px; letter-spacing: -.2px; }
.brand .sub { margin: 2px 0 0; color: var(--ink-soft); font-size: 13px; }

.field { display: block; margin-bottom: 14px; }
.field > span {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}

input[type=text], input[type=password], input[type=search], input[type=number], select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  outline: none;
}
input:focus, select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .12);
}

.pw-wrap { position: relative; display: flex; }
.pw-wrap input { padding-right: 58px; }
.pw-wrap .ghost-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--brand);
  font-weight: 600;
  font-size: 12.5px;
  padding: 6px 8px;
  cursor: pointer;
}

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 18px;
  font-size: 13px;
  color: var(--ink-soft);
}
.check input { width: 15px; height: 15px; accent-color: var(--brand); }

.primary-btn {
  width: 100%;
  padding: 11px 16px;
  border: 0;
  border-radius: 8px;
  background: var(--brand);
  color: var(--brand-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.primary-btn:hover { background: #0c625b; }
.primary-btn:disabled { opacity: .6; cursor: default; }
.primary-btn.small { width: auto; padding: 8px 16px; }

.ghost-btn {
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.ghost-btn:hover { background: #f1f4f6; }
.ghost-btn:disabled { opacity: .45; cursor: default; }

.error {
  margin: 12px 0 0;
  padding: 9px 11px;
  border-radius: 8px;
  background: #fef3f2;
  border: 1px solid #fecdca;
  color: var(--danger);
  font-size: 13px;
}

.hint { margin-top: 18px; font-size: 12.5px; color: var(--ink-soft); }
.hint summary { cursor: pointer; font-weight: 600; }
.hint p { margin: 8px 0 0; line-height: 1.5; }

/* Cảnh báo server đang chạy với mock thay vì MISA thật */
.mock-badge {
  margin: 0 0 16px;
  padding: 8px 11px;
  border-radius: 8px;
  background: #fffaeb;
  border: 1px solid #fedf89;
  color: #93370d;
  font-size: 12px;
  line-height: 1.45;
  word-break: break-all;
}

/* Chẩn đoán khi đăng nhập thất bại */
.diag {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--ink);
}
.diag strong { display: block; margin-bottom: 5px; font-size: 12.5px; }
.diag ul { margin: 0; padding-left: 18px; }
.diag li { margin: 3px 0; line-height: 1.45; color: var(--ink-soft); }
.diag .diag-facts {
  margin: 8px 0 0;
  padding-top: 7px;
  border-top: 1px dashed var(--line);
  font-size: 11.5px;
  color: #8a97a3;
  font-family: Consolas, monospace;
  word-break: break-all;
}

/* ---------- main ---------- */
#view-main {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.topbar-left { display: flex; align-items: center; gap: 9px; min-width: 0; }
.topbar-left strong { font-size: 15px; }
.topbar-right { display: flex; gap: 7px; }

.tabs { display: flex; gap: 4px; }
.tab {
  padding: 6px 13px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { background: #f1f4f6; color: var(--ink); }
.tab.active {
  background: #e6f4f1;
  border-color: #b9e0da;
  color: #0a5c55;
}

.badge {
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6f4f1;
  color: #0a5c55;
  border: 1px solid #b9e0da;
  white-space: nowrap;
}
.badge.warning {
  background: #fef7ec;
  color: #b54708;
  border-color: #fedf89;
}
.badge.error {
  background: #fef3f2;
  color: #b42318;
  border-color: #fecdca;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.tool-group { display: flex; align-items: center; gap: 7px; }
.tool-group.grow { flex: 1 1 220px; min-width: 160px; }
.tool-group label { font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.tool-group select { width: auto; padding: 7px 9px; }

.status-line {
  padding: 7px 14px;
  font-size: 12.5px;
  color: var(--ink-soft);
  background: #fbfcfd;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.status-line.err { color: var(--danger); background: #fef6f5; }

/* Thanh lọc phụ (đơn hàng) */
.toolbar.filters {
  background: #fbfcfd;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}
.view-toggle-group {
  display: inline-flex;
  gap: 3px;
  background: #e2e8f0;
  padding: 3px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
}
.view-toggle-btn {
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.view-toggle-btn:hover {
  color: #0f172a;
  background: rgba(255, 255, 255, 0.5);
}
.view-toggle-btn.active {
  background: #0284c7;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(2, 132, 199, 0.35);
}
.toolbar.filters input[type=date] {
  width: auto;
  padding: 6px 8px;
  font-size: 13px;
}
.toolbar.filters select {
  width: auto;
  max-width: 220px;
  padding: 6px 8px;
  font-size: 13px;
  text-overflow: ellipsis;
}
.quick-range { margin-left: auto; gap: 5px; }
.quick-range .ghost-btn { font-size: 12.5px; padding: 6px 9px; }

/* Sắp xếp */
thead th.sortable { cursor: pointer; user-select: none; }
thead th.sortable:hover { background: #e8edf1; }
thead th.sort-asc::after { content: ' ▲'; font-size: 9px; color: var(--brand); }
thead th.sort-desc::after { content: ' ▼'; font-size: 9px; color: var(--brand); }

tbody tr.clickable { cursor: pointer; }

/* Chi tiết đơn hàng */
.modal-card.wide { max-width: 620px; }
.detail-body {
  overflow: auto;
  padding: 4px 16px 16px;
}
.detail-body h3 {
  margin: 14px 0 6px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  padding-bottom: 4px;
}
.detail-body h3:first-child { margin-top: 8px; }
.detail-list {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: 5px 12px;
  margin: 0;
  font-size: 13px;
}
.detail-list dt { color: var(--ink-soft); }
.detail-list dd { margin: 0; word-break: break-word; }
.detail-list dd.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--panel);
}

table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f1f4f6;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  color: #3d4c5a;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #e8ecef;
  white-space: nowrap;
}
thead th .col-key {
  display: none !important;
}

/* Định dạng chuẩn bảng Đơn hàng theo giao diện MISA CRM */
th.col-check, td.col-check {
  width: 38px;
  min-width: 38px;
  max-width: 38px;
  text-align: center !important;
  vertical-align: middle;
  padding: 6px 4px;
}
th.col-check input[type="checkbox"], td.col-check input[type="checkbox"] {
  cursor: pointer;
  width: 15px;
  height: 15px;
  accent-color: #2563eb;
  vertical-align: middle;
  margin: 0;
}
.order-link {
  color: #2563eb;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.order-link:hover {
  text-decoration: underline;
  color: #1d4ed8;
}
.col-rev-status {
  white-space: nowrap;
}
.rev-text-propose {
  color: #4f46e5;
  font-weight: 600;
}
.rev-text-draft {
  color: #475569;
  font-weight: 500;
}
.rev-text-recorded {
  color: #059669;
  font-weight: 600;
}
.dot-green {
  color: #10b981;
  font-weight: bold;
  font-size: 16px;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
}
.dot-gray {
  color: #4b5563;
  font-weight: bold;
  font-size: 16px;
  margin-right: 4px;
  vertical-align: middle;
  line-height: 1;
}
.text-muted {
  color: #94a3b8;
}
.col-account-code {
  font-weight: 500;
  color: #0f172a;
}
.col-desc {
  max-width: 280px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #eef1f3;
  border-right: 1px solid #f2f5f6;
  vertical-align: top;
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
tbody tr:nth-child(even) { background: #fcfdfd; }
tbody tr:hover, tbody tr.is-hover-active { background: #eef2ff; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
th.col-stt, td.col-stt {
  width: 52px;
  min-width: 52px;
  text-align: right;
  color: #7a8794;
  position: sticky;
  left: 0;
  z-index: 1;
  background: inherit;
}
thead th.col-stt { z-index: 3; background: #f1f4f6; }
tbody tr:nth-child(even) td.col-stt { background: #fcfdfd; }
tbody tr:nth-child(odd) td.col-stt { background: #fff; }
tbody tr:hover td.col-stt, tbody tr.is-hover-active td.col-stt { background: #eef2ff; }
td.mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
td.bool { text-align: center; }

/* Nút kính lúp tìm kiếm nhanh khi rê chuột vào ô mã KH / tên KH (Hình 1 & Hình 2) */
.cell-searchable {
  position: relative;
}
.cell-searchable-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.cell-searchable-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.cell-search-btn {
  opacity: 0;
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  color: #0284c7;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease, transform 0.1s ease;
  flex-shrink: 0;
  line-height: 1;
}
.cell-searchable:hover .cell-search-btn {
  opacity: 1;
  visibility: visible;
}
.cell-search-btn:hover {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
  transform: scale(1.15);
}
.cell-search-btn:active {
  transform: scale(0.95);
}

.empty { padding: 40px 16px; text-align: center; color: var(--ink-soft); }

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
  flex-wrap: wrap;
}
.page-info { font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 5px; }
.page-info input {
  width: 62px;
  padding: 5px 7px;
  text-align: center;
}

/* ---------- modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, .42);
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 50;
}
.modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(16, 24, 40, .22);
  overflow: hidden;
}
.modal-head, .modal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-foot { border-bottom: 0; border-top: 1px solid var(--line); }
.modal-hint { margin: 0; padding: 10px 16px; font-size: 12.5px; color: var(--ink-soft); }
.col-list {
  overflow: auto;
  padding: 4px 16px 12px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
}
.col-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 13px;
}
.col-item input { width: 15px; height: 15px; accent-color: var(--brand); }
.col-item .key { color: #8a97a3; font-size: 11.5px; font-family: Consolas, monospace; }

/* ---------- toast (đồng bộ, hiển thị trên đỉnh màn hình không bị che) ---------- */
.toast, #toast {
  position: fixed;
  left: 50%;
  top: 24px;
  bottom: auto;
  transform: translateX(-50%);
  background: #0f172a;
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  z-index: 9999999 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.15);
  max-width: min(92vw, 680px);
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  animation: toastFadeInTop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}

.toast[hidden], #toast[hidden] {
  display: none !important;
}

.toast.toast-error, #toast.toast-error {
  background: #b91c1c !important;
  color: #ffffff !important;
  box-shadow: 0 14px 36px rgba(185, 28, 28, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.toast.toast-success, #toast.toast-success {
  background: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 14px 36px rgba(15, 118, 110, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.2) !important;
}

.toast-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

@keyframes toastFadeInTop {
  from {
    opacity: 0;
    transform: translate(-50%, -16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .topbar { padding: 8px 10px; }
  .toolbar { padding: 8px 10px; gap: 8px; }
  .status-line { padding: 6px 10px; }
  .pager { padding: 8px 10px; gap: 6px; }
  .ghost-btn { padding: 7px 9px; font-size: 12.5px; }
  tbody td, thead th { padding: 7px 8px; }
  .topbar-left strong { font-size: 14px; }
  #btn-export, #btn-cols { display: none; }

  /* Trên điện thoại: ẩn khoảng nhanh, giữ 2 ô ngày + trạng thái. */
  .quick-range { display: none; }
  .toolbar.filters .tool-group { flex: 1 1 auto; }
  .toolbar.filters input[type=date] { width: 100%; }
  .detail-list { grid-template-columns: 1fr; gap: 2px; }
  .detail-list dt { font-size: 11.5px; margin-top: 6px; }
}

/* ---- Lên đơn hàng ---- */
.order-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px 14px;
  margin-bottom: 6px;
}
.order-form .field { margin: 0; }
.order-form .field span { font-size: 11.5px; }

.line-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.line-table th {
  text-align: left; font-size: 11px; text-transform: uppercase;
  color: var(--ink-soft); padding: 4px 6px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
.line-table td { padding: 3px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.line-table input {
  width: 100%; min-width: 62px; padding: 4px 6px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 5px; background: #fff;
}
.line-table input[readonly] { background: #f6f7f8; color: var(--ink-soft); }
.line-table .ln-price,
.line-table .ln-price-net,
.line-table .ln-amount,
.line-table .ln-disc {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.line-table .ln-price {
  min-width: 90px;
}
.line-table .ln-total { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.line-table .ln-del { padding: 2px 7px; line-height: 1; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.line-actions {
  display: flex; align-items: center; gap: 10px;
  margin-top: 10px; flex-wrap: wrap;
}
.line-total { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.payload-box {
  margin-top: 10px; padding: 10px; max-height: 240px; overflow: auto;
  background: #0f172a; color: #d7e3ec; border-radius: 7px;
  font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.ok-msg { color: #0f766e; font-weight: 600; }
.note-inline { font-style: normal; font-weight: 400; color: var(--ink-soft); font-size: 11px; }

/* ---- Chi tiết form lên đơn mới (chuẩn MISA CRM) ---- */
.modal-card.extra-wide {
  max-width: 1060px;
  width: 96vw;
  max-height: 90vh;
}
.modal-title-group { display: flex; align-items: baseline; gap: 8px; }
.sub-inline { font-size: 12px; color: var(--ink-soft); font-weight: normal; }
.modal-head-actions { display: flex; align-items: center; gap: 6px; }
.ghost-btn.sm, .primary-btn.sm { padding: 4px 10px; font-size: 12px; }

.form-section {
  margin-bottom: 14px;
  background: #fbfcfd;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px 12px;
}
.section-title {
  margin: 0 0 8px 0 !important;
  font-size: 12.5px !important;
  color: var(--brand) !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  font-weight: 700;
}
.section-head-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.order-form.grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 12px;
}
.order-form.grid-2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
}
.col-span-2 { grid-column: span 2; }
.num-bold { font-weight: 700; color: #0f766e; }

.field-check-wrap {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
}

.field-check {
  display: inline-flex !important;
  align-items: center !important;
  height: 38px !important;
  gap: 8px !important;
  margin: 0 !important;
  margin-top: auto !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #334155;
  user-select: none;
}

.field-check input[type="checkbox"],
.field-check input {
  width: 17px !important;
  height: 17px !important;
  margin: 0 !important;
  accent-color: #0f766e;
  cursor: pointer;
}

.line-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 12.5px;
}
.summary-items { display: flex; gap: 16px; flex-wrap: wrap; color: var(--ink-soft); }
.summary-items strong { color: var(--ink); }
.line-total-pill { font-size: 13.5px; color: var(--brand); }
.line-total-pill strong { font-size: 15px; font-weight: 800; }

.modal-foot-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 800px) {
  .order-form.grid-4 { grid-template-columns: repeat(2, 1fr); }
  .order-form.grid-2 { grid-template-columns: 1fr; }
  .col-span-2 { grid-column: span 1; }
  .modal-title-group .sub-inline { display: none; }
}


/* =========================================================
   MISA CRM ORDER DETAIL VIEWER STYLES
   ========================================================= */
.order-view-card {
  max-width: 1260px !important;
  width: 97vw !important;
  height: 93vh !important;
  max-height: 93vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22) !important;
}

.ov-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 12px;
}

.ov-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
}

.ov-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
}

.ov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #ffffff;
  color: #1f2937;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  white-space: nowrap;
  cursor: pointer;
  width: auto;
  position: static;
  transform: none;
  box-sizing: border-box;
  line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
.ov-btn[hidden],
.ov-btn.is-hidden {
  display: none !important;
}
.ov-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}
.ov-btn-more {
  padding: 5px 10px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  min-width: 32px !important;
}
.ov-icon-text {
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1;
}

.ov-dropdown-wrap {
  position: relative;
  display: inline-block;
}
.ov-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 260px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 16px 36px -4px rgba(15, 23, 42, 0.16), 0 6px 16px -2px rgba(15, 23, 42, 0.08);
  padding: 6px 4px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  animation: ovMenuSlideDown 0.15s ease-out;
}
@keyframes ovMenuSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.ov-dropdown-menu[hidden] {
  display: none !important;
}
.ov-more-dropdown {
  min-width: 270px;
  max-height: 480px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.ov-more-dropdown::-webkit-scrollbar {
  width: 6px;
}
.ov-more-dropdown::-webkit-scrollbar-track {
  background: transparent;
  margin: 6px 0;
}
.ov-more-dropdown::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.ov-more-dropdown::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}
.ov-menu-group-title {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #94a3b8;
  user-select: none;
}
.ov-menu-item {
  padding: 7px 10px;
  margin: 1px 4px;
  border-radius: 7px;
  font-size: 13.5px;
  color: #334155;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: all 0.12s ease;
  user-select: none;
}
.ov-menu-item:hover {
  background: #f1f5f9;
  color: #0f172a;
  transform: translateX(2px);
}
.ov-menu-item:active {
  background: #e2e8f0;
  transform: translateX(1px);
}
.ov-menu-icon {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 14px;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid #eef2f6;
  transition: all 0.12s ease;
}
.ov-menu-item:hover .ov-menu-icon {
  background: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}
.ov-menu-label {
  flex: 1;
  line-height: 1.3;
}
.ov-menu-item.text-danger {
  color: #dc2626;
}
.ov-menu-item.text-danger .ov-menu-icon {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}
.ov-menu-item.text-danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}
.ov-menu-item.text-danger:hover .ov-menu-icon {
  background: #fee2e2;
  border-color: #fca5a5;
}
.ov-menu-divider {
  height: 1px;
  background: #f1f5f9;
  margin: 5px 6px;
}

.ov-title-wrap {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

#ov-order-no {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
}

.ov-version {
  color: var(--ink-soft);
  font-size: 13px;
}

.ov-btn-icon {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.ov-btn-icon:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ov-btn-icon.sm {
  font-size: 13px;
  padding: 3px 6px;
}

.ov-tabs-bar {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: thin;
}

.ov-tab {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.15s, border-color 0.15s;
}
.ov-tab:hover {
  color: #0f172a;
  background: #f1f5f9;
}
.ov-tab.active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  background: #fff;
}

.ov-tab-badge {
  background: var(--brand);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  min-width: 16px;
  text-align: center;
  line-height: 1.3;
}

.ov-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
}

.ov-tab-panel {
  display: none;
}
.ov-tab-panel.active {
  display: block;
}

.ov-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ov-panel-title {
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ov-panel-actions-group {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ov-panel-action-btn {
  background: transparent;
  border: none;
  font-size: 13px;
  color: #2563eb;
  cursor: pointer;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.ov-panel-action-btn:hover {
  color: #1d4ed8;
  background: #eff6ff;
  text-decoration: underline;
}

.btn-win-tool {
  background: transparent;
  border: 1px solid transparent;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  transition: all 0.15s ease;
}

.btn-win-tool:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.btn-win-tool.close:hover {
  background: #fee2e2;
  color: #ef4444;
}

.ov-panel-action {
  font-size: 12.5px;
  color: var(--brand);
  cursor: pointer;
  font-weight: 600;
}
.ov-panel-action:hover {
  text-decoration: underline;
}

.ov-table-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
  max-height: calc(93vh - 200px);
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

.ov-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.ov-table th {
  background: #f8fafc;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #edf2f7;
  white-space: nowrap;
  text-align: left;
  position: sticky;
  top: 0;
  z-index: 2;
  font-weight: 600;
  color: #334155;
  font-size: 12px;
}
.ov-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f8fafc;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #1e293b;
}
.ov-table tr:hover td {
  background: #f8fafc;
}
.ov-table tfoot td {
  background: #f1f5f9;
  border-top: 2px solid #cbd5e1;
  font-weight: 700;
  padding: 7px 10px;
  white-space: nowrap;
}

.ov-table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px 0;
  font-size: 12px;
  color: var(--ink-soft);
}
.ov-pager-mock {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ov-mock-nav {
  letter-spacing: 4px;
  color: #94a3b8;
  font-size: 13px;
}

.ov-detail-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.ov-field-search-wrap input {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12.5px;
  min-width: 240px;
}
.ov-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  cursor: pointer;
  color: #475569;
  font-weight: 500;
}

.ov-section {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.ov-section-title {
  padding: 8px 14px;
  background: #f8fafc;
  font-size: 12.5px;
  font-weight: 700;
  color: #1e293b;
  border-bottom: 1px solid var(--line);
}
.ov-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 14px;
  padding: 10px 14px;
}
.ov-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 14px;
  padding: 10px 14px;
}
.ov-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12.5px;
}
.ov-field-label {
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
}
.ov-field-value {
  font-size: 12.5px;
  color: #0f172a;
  font-weight: 500;
  min-height: 18px;
  word-break: break-word;
}
.ov-field-value.text-blue {
  color: #0284c7;
  cursor: pointer;
  font-weight: 600;
}
.ov-field-value.text-blue:hover {
  text-decoration: underline;
}
.ov-field-value.text-bold {
  font-weight: 700;
}
.tag-pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #e2e8f0;
  color: #334155;
}

.text-right { text-align: right; }
.text-center { text-align: center; }
.text-bold { font-weight: 700; }
.col-span-2 { grid-column: span 2; }
.col-span-3 { grid-column: span 3; }
.col-span-4 { grid-column: span 4; }
.field-hidden { display: none !important; }

/* Subnav layout inside Tab Khác */
.ov-subnav-layout {
  display: flex;
  height: 100%;
  min-height: 480px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.ov-subnav-sidebar {
  width: 210px;
  flex-shrink: 0;
  border-right: 1px solid #e2e8f0;
  background: #f8fafc;
  padding: 8px 0;
}
.ov-subnav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  font-size: 13px;
  color: #475569;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ov-subnav-item:hover {
  background: #f1f5f9;
  color: #0f172a;
}
.ov-subnav-item.active {
  background: #e0f2fe;
  color: #0284c7;
  font-weight: 600;
  border-left: 3px solid #0284c7;
}
.ov-subnav-badge {
  background: #0284c7;
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  padding: 1px 6px;
  font-weight: 700;
}
.ov-subnav-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  overflow-y: auto;
}
.ov-subview {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.ov-subview[hidden] {
  display: none !important;
}
.ov-empty-notice {
  padding: 30px;
  text-align: center;
  color: #94a3b8;
  font-size: 13px;
}

/* =========================================================
   NEW ORDER MODAL: ULTRA-WIDE & MISA CRM REFINEMENT
   ========================================================= */
#neworder-modal .modal-card {
  width: 98vw !important;
  max-width: 1440px !important;
  height: 96vh !important;
  max-height: 96vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

#neworder-modal .modal-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#neworder-modal .neworder-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 22px;
  background: #f8fafc;
}

#neworder-modal .modal-card.extra-wide {
  max-width: 1340px;
  width: 96vw;
  max-height: 94vh;
  border-radius: 14px;
  box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #f8fafc;
}

#neworder-modal .modal-head {
  padding: 14px 24px;
  background: #ffffff;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

#neworder-modal .modal-title-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

#neworder-modal .modal-title-group strong {
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.2px;
}

#neworder-modal .modal-title-group .sub-inline {
  font-size: 12px;
  color: #0f766e;
  background: #f0fdf4;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  border: 1px solid #bbf7d0;
}

#neworder-modal .detail-body.neworder-body {
  padding: 18px 24px;
  overflow-y: auto;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Modern Card Sections */
.form-section.modern-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  margin-bottom: 0;
}

.form-section.modern-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-color: #cbd5e1;
}

.section-header-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.section-header-pill .sec-icon {
  font-size: 16px;
  line-height: 1;
}

.section-header-pill .section-title {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #0f766e !important;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

/* Input Fields */
#neworder-modal .order-form {
  gap: 12px 16px;
}

#neworder-modal .order-form .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#neworder-modal .order-form .field span {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 4px;
}

.req-star {
  color: #ef4444;
  font-weight: 700;
  font-size: 12px;
}

#neworder-modal .order-form input[type="text"],
#neworder-modal .order-form input[type="number"],
#neworder-modal .order-form select {
  height: 38px;
  padding: 6px 12px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  outline: none;
  transition: all 0.15s ease-in-out;
  box-sizing: border-box;
}

#neworder-modal .order-form input[type="text"]:focus,
#neworder-modal .order-form input[type="number"]:focus,
#neworder-modal .order-form select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.input-readonly {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
  font-weight: 500;
}

.input-disabled {
  background: #f1f5f9 !important;
  color: #94a3b8 !important;
  border-color: #e2e8f0 !important;
  cursor: not-allowed;
}

.highlight-amount {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #0f766e !important;
  background: #f0fdf4 !important;
  border-color: #bbf7d0 !important;
}

/* ==================== MISA CRM ORDER FORM THEME (Images 3, 4, 5) ==================== */
.misa-sec-header {
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.misa-sec-header-with-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 4px;
}
.misa-sec-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 0 !important;
  letter-spacing: -0.2px;
}
.misa-header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}
.misa-action-link, .misa-link-btn {
  background: none;
  border: none;
  color: #2563eb;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.misa-action-link:hover, .misa-link-btn:hover {
  text-decoration: underline;
  color: #1d4ed8;
}

/* 2-Column Responsive Layout */
.misa-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}
@media (max-width: 860px) {
  .misa-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.misa-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.misa-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.misa-label {
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 4px;
}
.misa-info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  font-size: 11px;
  color: #64748b;
  cursor: help;
}

.misa-input,
.misa-select,
.misa-textarea {
  width: 100%;
  height: 36px;
  padding: 6px 10px;
  font-size: 13px;
  color: #0f172a;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  transition: all 0.15s ease-in-out;
}
.misa-textarea {
  height: auto;
  min-height: 54px;
  resize: vertical;
  line-height: 1.4;
}
.misa-input:focus,
.misa-select:focus,
.misa-textarea:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}
.misa-input-readonly {
  background: #f8fafc !important;
  color: #475569 !important;
  border-color: #e2e8f0 !important;
}

/* Input With Addons (Clear button & Icons) */
.misa-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.misa-input-wrap .misa-input {
  padding-right: 56px;
}
.misa-addon-btn {
  position: absolute;
  right: 28px;
  background: none;
  border: none;
  font-size: 13px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
}
.misa-addon-btn:hover {
  color: #475569;
}
.misa-addon-icon {
  position: absolute;
  right: 8px;
  font-size: 14px;
  color: #64748b;
  pointer-events: none;
  user-select: none;
}

/* Checkbox Labels matching Image 5 */
.misa-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.misa-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #0f766e;
  cursor: pointer;
}

/* Toggle Switch (Tự động tăng SL) */
.misa-toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: #334155;
}
.misa-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.misa-toggle-slider {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  background-color: #cbd5e1;
  border-radius: 20px;
  transition: 0.2s;
}
.misa-toggle-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  border-radius: 50%;
  transition: 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.misa-toggle-switch input:checked + .misa-toggle-slider {
  background-color: #0f766e;
}
.misa-toggle-switch input:checked + .misa-toggle-slider:before {
  transform: translateX(16px);
}

/* Pill Action Buttons matching Image 4 */
.btn-misa-pill {
  height: 32px;
  padding: 0 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-misa-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.btn-misa-pill.primary {
  background: #2563eb;
  color: #ffffff;
  border-color: #1d4ed8;
}
.btn-misa-pill.primary:hover {
  background: #1d4ed8;
}
.btn-misa-pill-arrow {
  height: 32px;
  padding: 0 8px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-left: none;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: 11px;
  color: #475569;
}
.split-btn-wrap {
  display: inline-flex;
}
.split-btn-wrap .btn-misa-pill {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Line item name wrap with KM gift badge */
.ln-name-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.ln-name-wrap .ln-km-icon {
  font-size: 14px;
  margin-right: 4px;
  flex-shrink: 0;
  display: none;
}
.ln-name-wrap .ln-name {
  width: 100%;
}

/* VN Date Picker Component */
.vn-date-group {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.vn-date-input {
  width: 100% !important;
  height: 38px;
  padding: 6px 36px 6px 12px !important;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border: 1px solid #cbd5e1;
  border-radius: 7px;
  background: #ffffff;
  color: #0f172a;
  outline: none;
  box-sizing: border-box;
  transition: all 0.15s ease-in-out;
}

.vn-date-input:focus {
  border-color: #0f766e !important;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12) !important;
}

.vn-date-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  color: #64748b;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
}

.vn-date-btn:hover {
  color: #0f766e;
  background: #f1f5f9;
}

.vn-date-picker {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
  border: none;
  margin: 0;
  padding: 0;
}

/* Alert Banner Styling */
.order-alert-banner {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  margin-bottom: 4px;
}

.order-alert-banner.alert-warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.order-alert-banner .alert-icon {
  font-size: 22px;
  line-height: 1;
}

.order-alert-banner .alert-title {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #b45309;
}

.order-alert-banner .alert-desc {
  font-size: 13px;
  line-height: 1.5;
  color: #78350f;
}

.order-alert-banner .badge-status-warn {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}

.btn-alert-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 5px 12px;
  background: #fef3c7;
  border: 1px solid #f59e0b;
  border-radius: 6px;
  color: #92400e;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-alert-link:hover {
  background: #fde68a;
  color: #78350f;
}

/* Line table modern improvements */
#neworder-modal .line-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

#neworder-modal .line-table thead th {
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: 11.5px;
  padding: 9px 8px;
  border-bottom: 2px solid #e2e8f0;
  letter-spacing: 0.3px;
}

#neworder-modal .line-table tbody tr {
  transition: background 0.1s ease;
}

#neworder-modal .line-table tbody tr:hover {
  background: #f8fafc;
}

#neworder-modal .line-table td {
  padding: 6px 6px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle !important;
}

#neworder-modal .line-table th {
  vertical-align: middle !important;
}

#neworder-modal .line-table td.text-center {
  text-align: center;
  vertical-align: middle !important;
}

.cell-check-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 100%;
}

#neworder-modal .line-table input[type="checkbox"],
.line-table input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
  accent-color: #0f766e;
}

#neworder-modal .line-table .ln-stt {
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
  color: #64748b;
}

#neworder-modal .line-table .ln-subtotal-val {
  vertical-align: middle;
  font-weight: 600;
  color: #0f172a;
  line-height: 32px;
}

#neworder-modal .line-table .ln-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #94a3b8;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  transition: all 0.15s ease;
}

#neworder-modal .line-table .ln-del:hover {
  background: #fee2e2;
  color: #ef4444;
  border-color: #fca5a5;
}

#neworder-modal .line-table tfoot td {
  background: #f8fafc;
  font-weight: 700;
  color: #1e293b;
  border-top: 2px solid #cbd5e1;
  padding: 8px 6px;
  font-size: 13px;
  vertical-align: middle !important;
}

.price-cell-box {
  position: relative;
  display: flex;
  align-items: center;
}

.price-cell-box input {
  padding-right: 22px !important;
}

.price-tag-badge {
  position: absolute;
  right: 5px;
  font-size: 11px;
  pointer-events: none;
  opacity: 0.7;
}

#neworder-modal .line-table input[type="text"],
#neworder-modal .line-table input[type="number"],
#neworder-modal .line-table select {
  height: 32px;
  padding: 4px 8px;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  font-size: 12.5px;
  transition: border-color 0.15s;
}

#neworder-modal .line-table input[type="text"]:focus,
#neworder-modal .line-table input[type="number"]:focus,
#neworder-modal .line-table select:focus {
  border-color: #0f766e;
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}

#neworder-modal .line-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 16px;
  margin-top: 10px;
}

#neworder-modal .summary-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #475569;
}

#neworder-modal .summary-items span strong {
  color: #0f172a;
}

#neworder-modal .line-total-pill {
  background: linear-gradient(135deg, #0f766e, #0d9488);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.25);
  display: flex;
  align-items: center;
  gap: 8px;
}

#neworder-modal .line-total-pill strong {
  font-size: 16px;
  color: #ffffff;
}

#neworder-modal .modal-foot-actions {
  padding: 14px 24px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 0;
}

/* CUSTOMER AUTOCOMPLETE DROPDOWN */
.customer-ac-field {
  position: relative;
}

.ac-input-wrap {
  position: relative;
  width: 100%;
}

.btn-clear-inline {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px;
  font-size: 13px;
  line-height: 1;
}

.btn-clear-inline:hover {
  color: #ef4444;
}

.ac-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  min-width: 380px;
  max-height: 320px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
  z-index: 1000;
  padding: 4px 0;
}

.ac-dropdown[hidden] {
  display: none !important;
}

.ac-item {
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
}

.ac-item:last-child {
  border-bottom: none;
}

.ac-item:hover, .ac-item.highlighted {
  background: #e0f2fe;
}

.ac-name {
  font-weight: 600;
  color: #0f172a;
  font-size: 13px;
  margin-bottom: 2px;
}

.ac-sub {
  font-size: 11.5px;
  color: #64748b;
}

.ac-addr {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* GOODS TABLE TOOLBAR & BUTTONS */
.goods-head-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 10px;
}

.goods-head-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-ai-fast {
  background: #f5f3ff;
  color: #7c3aed;
  border: 1px solid #ddd6fe;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.btn-ai-fast:hover {
  background: #ede9fe;
}

.badge-ai {
  background: #7c3aed;
  color: #fff;
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 8px;
  font-weight: 700;
}

.switch-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: #475569;
  cursor: pointer;
  user-select: none;
}

.switch-inline input[type="checkbox"] {
  cursor: pointer;
  width: auto;
}

.goods-head-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

.link-btn-tool {
  background: transparent;
  border: none;
  font-size: 12.5px;
  cursor: pointer;
  color: #64748b;
  font-weight: 500;
  padding: 2px 4px;
}

.link-btn-tool:hover {
  text-decoration: underline;
}

.link-btn-tool.text-blue {
  color: #0284c7;
}

.link-btn-tool.text-danger {
  color: #ef4444;
}

.goods-bottom-tools {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}

.goods-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-tool-pill {
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid #e0e7ff;
  background: #eef2ff;
  color: #4f46e5;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-tool-pill:hover {
  background: #e0e7ff;
}

.btn-tool-pill.btn-pick-goods {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.btn-tool-pill.btn-pick-goods:hover {
  background: #dbeafe;
}

.split-btn-wrap {
  display: inline-flex;
}

.split-btn-wrap .btn-tool-pill {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-tool-pill-arrow {
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 0 6px 6px 0;
  border: 1px solid #e0e7ff;
  border-left: none;
  background: #eef2ff;
  color: #4f46e5;
  cursor: pointer;
}

.btn-tool-pill-arrow:hover {
  background: #e0e7ff;
}

.debt-info-pill {
  color: #0369a1;
  font-weight: 500;
}

.debt-info-pill strong {
  font-weight: 700;
  color: #0284c7;
}

/* SUGGESTED ROWS (IMAGE 5) */
.th-suggest-header {
  background: #dcfce7 !important;
  color: #15803d !important;
  border-bottom: 1px solid #86efac !important;
  padding: 6px 8px !important;
  text-align: center;
  white-space: nowrap;
}

.suggest-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 700;
  font-size: 12px;
  color: #166534;
}

.btn-icon-xs {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: #166534;
  margin-left: 4px;
  padding: 2px;
  line-height: 1;
}

.tr-suggested {
  background: #f0fdf4 !important;
}

.tr-suggested td {
  background: #f0fdf4 !important;
}

.btn-suggest-accept {
  color: #16a34a;
  border: 1px solid #86efac;
  background: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  margin-right: 4px;
  padding: 0;
}

.btn-suggest-accept:hover {
  background: #dcfce7;
}

.btn-suggest-reject {
  color: #dc2626;
  border: 1px solid #fca5a5;
  background: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
}

.btn-suggest-reject:hover {
  background: #fee2e2;
}

/* PRODUCT PICKER MODAL (IMAGE 4) */
.product-picker-card {
  width: 95vw !important;
  max-width: 1280px !important;
  height: 88vh !important;
  max-height: 88vh !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 0 !important;
  border-radius: 10px !important;
  background: #fff !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25) !important;
  overflow: hidden !important;
}

.picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
}

.picker-title-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #0f172a;
}

.picker-window-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.picker-win-btn {
  border: none;
  background: transparent;
  padding: 4px 8px;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
}

.picker-win-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.picker-win-btn.close:hover {
  background: #fee2e2;
  color: #ef4444;
}

.picker-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.picker-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 10px;
  flex: 1;
  min-width: 220px;
}

.picker-search-box input {
  border: none !important;
  box-shadow: none !important;
  padding: 7px 0 !important;
  font-size: 13px !important;
  width: 100% !important;
  background: transparent !important;
}

.picker-select {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #334155;
  cursor: pointer;
}

.picker-flags {
  display: flex;
  align-items: center;
  gap: 12px;
}

.picker-flag-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
  color: #334155;
  user-select: none;
}

.picker-table-wrap {
  flex: 1;
  overflow: auto;
  background: #fff;
}

.picker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.picker-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid #e2e8f0;
  text-align: left;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  z-index: 2;
}

.picker-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  border-right: 1px solid #f8fafc;
  white-space: nowrap;
  color: #1e293b;
}

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

.picker-table tr.selected td {
  background: #eff6ff;
}

.picker-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  background: #fff;
  flex-shrink: 0;
  font-size: 12.5px;
}

.picker-footer-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.picker-page-size {
  display: flex;
  align-items: center;
  gap: 6px;
}

.picker-page-size select {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
}

.picker-pagination-btns {
  display: flex;
  gap: 4px;
}

.picker-nav-btn {
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.picker-nav-btn:hover {
  background: #f1f5f9;
}

.picker-footer-right {
  display: flex;
  gap: 10px;
}

/* Popover for stock & order breakdown (Khớp Hình 1 & 2 MISA) */
.stock-link, .order-link {
  color: #1d4ed8 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  padding: 2px 4px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.stock-link:hover, .order-link:hover {
  background: #eff6ff !important;
  text-decoration: underline !important;
}

.picker-popover-box {
  position: fixed;
  z-index: 100000;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  padding: 12px 16px;
  font-size: 13px;
  min-width: 290px;
  max-width: 420px;
  max-height: 340px;
  overflow-y: auto;
  pointer-events: auto;
}

.popover-header {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  color: #334155;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e2e8f0;
}

.popover-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed #f1f5f9;
}

.popover-item:last-child {
  border-bottom: none;
}

.popover-name {
  color: #475569;
  font-size: 12px;
  padding-right: 12px;
}

.popover-order-no {
  color: #2563eb;
  font-weight: 600;
  font-size: 12.5px;
}

.popover-qty {
  font-weight: 700;
  color: #0f172a;
  text-align: right;
  white-space: nowrap;
}

.picker-search-box {
  position: relative;
}

.picker-clear-search {
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1;
}

.picker-clear-search:hover {
  color: #475569;
}

/* ==========================================================================
   PHÂN HỆ KẾ HOẠCH GIAO HÀNG THEO NGÀY (EXCEL SHEET 2910)
   ========================================================================== */

.delivery-wrap {
  padding: 10px 14px 60px 14px;
  background: #f8fafc;
  min-height: calc(100vh - 80px);
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   DELIVERY TOOLBAR CARD - 2 HÀNG GỌN ĐẸP, CHUẨN THIẾT KẾ
   ========================================================================== */
.delivery-toolbar-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  background: #ffffff;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
  width: 100%;
  box-sizing: border-box;
}

/* Hàng trong Toolbar Card */
.toolbar-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.toolbar-row-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important; /* Luôn giữ trên đúng 1 hàng duy nhất */
  padding-bottom: 2px;
  width: 100% !important;
}

.toolbar-col-left.month-nav-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
}

.toolbar-label {
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  margin-right: 2px;
  white-space: nowrap !important;
}

#dp-month-picker {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
  outline: none;
  width: auto !important;
  transition: border-color 0.15s ease;
}

#dp-month-picker:focus {
  border-color: #007867;
  box-shadow: 0 0 0 2px rgba(0, 120, 103, 0.15);
}

#dp-btn-prev-month,
#dp-btn-next-month {
  width: 35px;
  height: 35px;
  min-width: 35px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #334155;
  cursor: pointer;
  flex-shrink: 0 !important;
  transition: all 0.15s ease;
}

#dp-btn-prev-month:hover,
#dp-btn-next-month:hover {
  background: #e2e8f0;
  color: #0f172a;
}

#dp-btn-this-month {
  height: 35px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  background: #f8fafc;
  color: #0369a1;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  width: auto !important;
  transition: all 0.15s ease;
}

#dp-btn-this-month:hover {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0284c7;
}

/* Cụm nút hành động bên phải Hàng 1 (Cùng 1 hàng với Tháng) */
.toolbar-col-right.action-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: nowrap !important; /* Không bao giờ rớt dòng */
  flex-shrink: 0 !important;
}

.btn-action-item {
  width: auto !important; /* Khắc phục triệt để lỗi nút Lưu bảng bị kéo 100% rớt hàng */
  min-width: max-content !important;
  max-width: max-content !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  height: 35px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  white-space: nowrap !important; /* Tuyệt đối không để rớt chữ thành nhiều hàng */
  box-sizing: border-box !important;
  cursor: pointer;
  transition: all 0.15s ease;
}

#dp-btn-add-row,
#dp-btn-sync-misa {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
}

#dp-btn-add-row:hover,
#dp-btn-sync-misa:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

.btn-excel-green {
  background: #107c41 !important;
  color: #ffffff !important;
  border: 1px solid #0e6b37 !important;
  box-shadow: 0 1px 3px rgba(16, 124, 65, 0.25);
}

.btn-excel-green:hover {
  background: #0e6b37 !important;
  box-shadow: 0 2px 5px rgba(16, 124, 65, 0.35);
}

.btn-excel-green:active {
  background: #0a4d27 !important;
}

.excel-icon {
  font-size: 14px;
  line-height: 1;
}

#dp-btn-save {
  width: auto !important; /* Ghi đè triệt để width: 100% của .primary-btn */
  min-width: 105px !important;
  flex-shrink: 0 !important;
  background: #007867 !important;
  color: #ffffff !important;
  border: 1px solid #005a4d !important;
  box-shadow: 0 1px 3px rgba(0, 120, 103, 0.25);
}

#dp-btn-save:hover {
  background: #005a4d !important;
  box-shadow: 0 2px 5px rgba(0, 120, 103, 0.35);
}

/* Đường kẻ phân tách nhẹ giữa hàng 1 và hàng 2 */
.toolbar-divider {
  height: 1px;
  background: #f1f5f9;
  width: 100%;
  margin: 2px 0;
  border: none;
}

/* Hàng 2: Bộ lọc (Tuyến, Đợt) & Ô tìm kiếm */
.toolbar-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  width: 100%;
}

.toolbar-col-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
}

.filter-item select {
  width: auto !important;
  height: 35px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  background: #ffffff;
  color: #1e293b;
  cursor: pointer;
  min-width: 125px;
  outline: none;
  transition: border-color 0.15s ease;
}

.filter-item select:focus {
  border-color: #007867;
  box-shadow: 0 0 0 2px rgba(0, 120, 103, 0.15);
}

.toolbar-col-search {
  flex: 1 1 auto;
  min-width: 260px;
}

.dp-search-box-wrap {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  height: 35px !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease;
}

.dp-search-box-wrap:focus-within {
  border-color: #007867 !important;
  box-shadow: 0 0 0 2px rgba(0, 120, 103, 0.15) !important;
}

/* Khắc phục triệt để lỗi select đè hết ô tìm kiếm */
.dp-search-scope-select,
select#dp-search-scope {
  width: 155px !important;
  min-width: 155px !important;
  max-width: 155px !important;
  flex: 0 0 155px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  height: 35px !important;
  border: none !important;
  border-right: 1px solid #cbd5e1 !important;
  border-radius: 0 !important;
  padding: 0 8px 0 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #007867 !important;
  background: #f0fdfa !important;
  cursor: pointer !important;
  outline: none !important;
  box-sizing: border-box !important;
}

/* Ô nhập từ khóa tìm kiếm (rộng rãi, hiển thị rõ ràng) */
.dp-search-box-wrap input[type="search"],
#dp-search {
  display: block !important;
  visibility: visible !important;
  width: 100% !important;
  height: 35px !important;
  padding: 0 12px !important;
  flex: 1 1 auto !important;
  min-width: 140px !important;
  border: none !important;
  outline: none !important;
  font-size: 13px !important;
  color: #0f172a !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.dp-search-box-wrap input[type="search"]::placeholder,
#dp-search::placeholder {
  color: #94a3b8;
  font-size: 12.5px;
}

.dp-search-clear-btn {
  width: 32px !important;
  min-width: 32px !important;
  flex: 0 0 32px !important;
  flex-shrink: 0 !important;
  height: 35px !important;
  background: transparent !important;
  border: none !important;
  color: #94a3b8 !important;
  padding: 0 !important;
  font-size: 13px !important;
  cursor: pointer !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.dp-search-clear-btn:hover {
  color: #ef4444;
}

.sheet-jump-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0284c7;
  font-weight: 700;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  border: 1px solid #bae6fd;
  white-space: nowrap;
}

.sheet-jump-badge:hover {
  background: #0284c7;
  color: #ffffff;
}

/* TỜ IN / BẢNG TÍNH EXCEL */
.sheet-paper {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #cbd5e1;
  padding: 16px 20px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #007867;
  padding-bottom: 14px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 16px;
}

.sheet-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sheet-logo-badge {
  width: 44px;
  height: 44px;
  background: #007867;
  color: #ffffff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 1px;
}

.sheet-company-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  letter-spacing: 0.3px;
}

.sheet-company-sub {
  font-size: 12px;
  color: #64748b;
  margin: 3px 0 0 0;
}

.sheet-center-title {
  text-align: left;
}

.sheet-main-title {
  font-size: 21px;
  font-weight: 800;
  color: #007867;
  margin: 0 0 4px 0;
  letter-spacing: 0.5px;
}

.sheet-badge-date {
  font-size: 13.5px;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sheet-dot {
  color: #94a3b8;
}

.sheet-meta-right {
  text-align: right;
}

.sheet-status-pill {
  background: #dcfce7;
  color: #15803d;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 12px;
  display: inline-block;
  margin-bottom: 4px;
  border: 1px solid #bbf7d0;
}

.sheet-print-date {
  font-size: 12px;
  color: #94a3b8;
  font-family: monospace;
}

/* BẢNG CHI TIẾT GIAO HÀNG (RỘNG HẾT CỠ) */
.sheet-main-section {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.sheet-table-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  font-size: 13.5px;
  font-weight: 700;
  color: #1e293b;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  gap: 12px;
  flex-wrap: wrap;
}

.sheet-table-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sheet-table-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.table-scroll-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  padding: 3px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.scroll-action-label {
  font-size: 11.5px;
  color: #64748b;
  font-weight: 600;
}

.btn-table-scroll {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 4px 9px;
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.15s ease;
}

.btn-table-scroll:hover {
  background: #007867;
  color: #ffffff;
  border-color: #007867;
}

.sheet-table-wrap {
  overflow-x: scroll !important; /* Luôn luôn hiện thanh trượt ngang */
  overflow-y: auto;
  max-height: calc(100vh - 240px);
  min-height: 400px;
  border: 1px solid #cbd5e1;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  background: #ffffff;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #334155 #e2e8f0;
}

.sheet-table-wrap::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.sheet-table-wrap::-webkit-scrollbar-track {
  background: #e2e8f0;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
}

.sheet-table-wrap::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 6px;
  border: 2px solid #e2e8f0;
}

.sheet-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #0f172a;
}

.sheet-table {
  width: 100%;
  min-width: 1530px; /* Bắt buộc có min-width để các cột không bị che mất và thanh cuộn ngang luôn hoạt động */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
  line-height: 1.35;
}

.sheet-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  line-height: 1.35;
}

.sheet-table th {
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  padding: 9px 8px;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.sheet-table th:first-child {
  border-left: 1px solid #cbd5e1;
}

.sheet-summary-table th {
  background: #f8fafc;
  color: #334155;
  font-weight: 700;
  padding: 9px 8px;
  border: 1px solid #cbd5e1;
  text-align: left;
  white-space: nowrap;
}

.sheet-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  color: #1e293b;
  vertical-align: middle;
}

.sheet-table td:first-child {
  border-left: 1px solid #e2e8f0;
}

.sheet-summary-table td {
  padding: 7px 8px;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  vertical-align: middle;
}

.sheet-table tbody tr {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.sheet-table tbody tr:hover td,
.sheet-summary-table tbody tr:hover td {
  background: #f0fdf4;
}

/* Dòng hàng đổi (Diễn giải có chữ 'đổi' -> màu xanh lá nhẹ Excel) */
.sheet-table tbody tr.sheet-row-doi td {
  background-color: #dcfce7 !important;
  color: #14532d;
}

.sheet-table tbody tr.sheet-row-doi:hover td {
  background-color: #bbf7d0 !important;
}

.sheet-table tbody tr.sheet-row-doi code {
  background-color: #bbf7d0 !important;
  color: #14532d !important;
}

.sheet-table tbody tr.sheet-row-doi .sheet-in-sm,
.sheet-table tbody tr.sheet-row-doi .sheet-sel-res {
  background-color: #f0fdf4;
  border-color: #86efac;
}

/* Dòng được nhấn chọn (Selected Row -> màu xanh dương active rõ ràng, KHÔNG đổi độ dày border để bảng đứng yên 100%) */
.sheet-table tbody tr.is-selected td,
.sheet-table tbody tr.sheet-row-doi.is-selected td {
  background-color: #dbeafe !important;
  color: #1e3a8a !important;
}

.sheet-table tbody tr.is-selected td:first-child,
.sheet-table tbody tr.sheet-row-doi.is-selected td:first-child {
  font-weight: 800 !important;
  color: #1d4ed8 !important;
}

.sheet-table tbody tr.is-selected:hover td,
.sheet-table tbody tr.sheet-row-doi.is-selected:hover td {
  background-color: #bfdbfe !important;
}

.sheet-table tbody tr.is-selected .sheet-in-sm,
.sheet-table tbody tr.is-selected .sheet-sel-res,
.sheet-table tbody tr.sheet-row-doi.is-selected .sheet-in-sm,
.sheet-table tbody tr.sheet-row-doi.is-selected .sheet-sel-res {
  background-color: #ffffff;
  border-color: #93c5fd;
}

.sheet-table tbody tr.is-selected code,
.sheet-table tbody tr.sheet-row-doi.is-selected code {
  background-color: #bfdbfe !important;
  color: #1e3a8a !important;
}

.sheet-batch-header td {
  background: #e2e8f0 !important;
  font-weight: 800;
  color: #0f172a;
  padding: 7px 10px;
  letter-spacing: 0.3px;
  border-top: 2px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
}

.sheet-batch-header td:first-child {
  border-left: 1px solid #cbd5e1;
}

.sheet-total-row td {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #f1f5f9 !important;
  font-weight: 800;
  color: #0f172a;
  border-top: 2px solid #64748b;
  border-bottom: 1px solid #cbd5e1;
  border-right: 1px solid #cbd5e1;
  padding: 9px 8px;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.06);
}

.sheet-total-row td:first-child {
  border-left: 1px solid #cbd5e1;
}

.summary-total td {
  background: #e0f2fe !important;
  font-weight: 800;
  color: #0369a1;
  border-top: 1px solid #7dd3fc;
  border-bottom: 1px solid #7dd3fc;
}

/* ==========================================================================
   SIDERIGHT: BẢNG TỔNG HỢP QUY ĐỔI KHO (HÌNH 2)
   ========================================================================== */

/* Nút toggle mở Bảng quy đổi kho trên thanh header bảng */
.btn-sideright-toggle {
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 1px 3px rgba(22, 128, 61, 0.12);
}

.btn-sideright-toggle:hover {
  background: #dcfce7;
  color: #14532d;
  border-color: #4ade80;
  box-shadow: 0 2px 6px rgba(22, 128, 61, 0.22);
}

.btn-sideright-toggle .sr-arrow {
  font-size: 14px;
  font-weight: 900;
  display: inline-block;
  transition: transform 0.2s ease;
}

/* Nút tab nổi ghim mép phải màn hình */
.dp-floating-sideright-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  background: #007867;
  color: #ffffff;
  border: none;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 14px 8px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: -4px 3px 12px rgba(0, 0, 0, 0.22);
  transition: all 0.2s ease;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

.dp-floating-sideright-tab:hover {
  background: #107c41;
  padding-right: 12px;
}

.dp-floating-sideright-tab .float-arrow {
  writing-mode: horizontal-tb;
  font-size: 14px;
  font-weight: 900;
}

/* Backdrop */
.sideright-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.sideright-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Sideright Panel */
.sideright-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 480px;
  max-width: 92vw;
  height: 100vh;
  z-index: 10001;
  background: #ffffff;
  box-shadow: -8px 0 35px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.sideright-panel.open {
  transform: translateX(0);
}

.sideright-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #f8fafc;
  border-bottom: 1px solid #cbd5e1;
  flex-shrink: 0;
}

.sideright-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sideright-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: 0.3px;
}

.sideright-arrow-btn {
  background: #e2e8f0;
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  transition: all 0.15s ease;
}

.sideright-arrow-btn:hover {
  background: #007867;
  color: #ffffff;
  border-color: #007867;
}

.sideright-x-btn {
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.15s ease;
}

.sideright-x-btn:hover {
  background: #fee2e2;
  color: #ef4444;
}

.sideright-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #f8fafc;
}

.sideright-table-wrap {
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.sideright-formula-note {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 12.5px;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sideright-formula-note .note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.45;
}

.sideright-formula-note .note-bullet {
  font-size: 15px;
}

/* TUYẾN BADGES */
.route-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  min-width: 32px;
}

.route-badge.badge-t1 {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

.route-badge.badge-t2 {
  background: #e0e7ff;
  color: #3730a3;
  border: 1px solid #c7d2fe;
}

.route-badge.badge-toi {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.route-badge.badge-chieu {
  background: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.route-badge.badge-kho {
  background: #f3e8ff;
  color: #6b21a8;
  border: 1px solid #e9d5ff;
}

/* INPUTS IN SHEET CELLS */
.sheet-in-sm {
  width: 100%;
  box-sizing: border-box;
  padding: 3px 5px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 12px;
  background: #ffffff;
}

.sheet-in-sm:focus {
  border-color: #007867;
  outline: none;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(0, 120, 103, 0.15);
}

.sheet-in-qty {
  width: 70px;
  text-align: right;
  font-weight: 600;
}

.sheet-sel-res {
  width: 85px;
  font-size: 11.5px;
  padding: 2px 4px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}

.sheet-btn-del {
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 14px;
  line-height: 1;
  border-radius: 3px;
}

.sheet-btn-del:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* ==========================================================================
   THANH SHEET TAB TỪNG NGÀY TRONG THÁNG (CHUẨN MICROSOFT EXCEL)
   ========================================================================== */

.month-nav-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.toolbar-label {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

#dp-month-picker {
  height: 36px;
  padding: 0 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #0f172a;
  background: #ffffff;
  cursor: pointer;
}

#dp-month-picker:focus {
  border-color: #107c41;
  outline: none;
  box-shadow: 0 0 0 2px rgba(16, 124, 65, 0.15);
}

.excel-sheet-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  display: flex;
  align-items: stretch;
  background: #f1f5f9;
  border-top: 2px solid #107c41;
  height: 40px;
  overflow: hidden;
  box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.12);
  user-select: none;
}

.excel-sheet-nav-btns {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 6px;
  background: #e2e8f0;
  border-right: 1px solid #cbd5e1;
  flex-shrink: 0;
}

.sheet-nav-btn {
  background: transparent;
  border: none;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: #475569;
  transition: all 0.15s ease;
}

.sheet-nav-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}

.sheet-nav-btn.add-sheet-btn {
  font-size: 17px;
  color: #107c41;
  font-weight: 900;
}

.sheet-nav-btn.add-sheet-btn:hover {
  background: #dcfce7;
  color: #14532d;
}

.excel-sheet-tabs-scroll {
  flex: 1;
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
  gap: 2px;
  padding: 0 4px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.excel-sheet-tabs-scroll::-webkit-scrollbar {
  height: 4px;
}

.excel-sheet-tabs-scroll::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 2px;
}

.excel-sheet-tab {
  height: 32px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #e2e8f0;
  border: 1px solid #cbd5e1;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
  flex-shrink: 0;
  user-select: none;
}

.excel-sheet-tab:hover {
  background: #f8fafc;
  color: #0f172a;
}

.excel-sheet-tab.has-data {
  color: #0f172a;
  font-weight: 700;
}

.excel-sheet-tab.active {
  height: 35px;
  background: #ffffff;
  color: #107c41 !important;
  font-weight: 800;
  border-color: #94a3b8;
  border-top: 3px solid #107c41;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.06);
  z-index: 2;
}

.sheet-tab-name {
  letter-spacing: 0.3px;
}

.sheet-tab-count {
  font-size: 10.5px;
  background: #dcfce7;
  color: #15803d;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 800;
  border: 1px solid #bbf7d0;
  line-height: 1.2;
}

.excel-sheet-tab.active .sheet-tab-count {
  background: #107c41;
  color: #ffffff;
  border-color: #107c41;
}

.excel-sheet-status-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 12px;
  color: #64748b;
  background: #f8fafc;
  border-left: 1px solid #cbd5e1;
  white-space: nowrap;
  flex-shrink: 0;
}

.excel-status-sep {
  color: #cbd5e1;
}

/* ==========================================================================
   SUBMODALS TRONG CHI TIẾT ĐƠN HÀNG (MENU ...)
   ========================================================================== */
.submodal {
  z-index: 2000 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
}

.submodal .modal-card {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35) !important;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

/* Timeline tiến trình vận đơn / nhật ký */
.ov-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  padding-left: 10px;
}

.ov-timeline::before {
  content: '';
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 21px;
  width: 2px;
  background: #e2e8f0;
}

.ov-timeline-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ov-tl-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #cbd5e1;
  color: #64748b;
  font-size: 11px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ov-timeline-step.is-done .ov-tl-dot {
  background: #107c41;
  border-color: #107c41;
  color: #ffffff;
}

.ov-timeline-step.is-active .ov-tl-dot {
  background: #0284c7;
  border-color: #0284c7;
  color: #ffffff;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2);
}

.ov-tl-content {
  flex: 1;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  font-size: 12.5px;
}

.ov-tl-content strong {
  display: block;
  color: #0f172a;
  margin-bottom: 2px;
}

.ov-tl-content small {
  display: block;
  color: #64748b;
  font-size: 11.5px;
}

.ov-tl-content .ov-tl-time {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 4px;
}

/* ============ NÚT HEADER CHI TIẾT ĐƠN HÀNG ============ */
.ov-amount-green {
  color: #10b981 !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  margin: 0 4px !important;
  display: inline-block !important;
}

.ov-btn-primary {
  background: #2563eb !important;
  color: #ffffff !important;
  border-color: #1d4ed8 !important;
  font-weight: 600 !important;
}
.ov-btn-primary:hover {
  background: #1d4ed8 !important;
  border-color: #1e40af !important;
  color: #ffffff !important;
}
.ov-btn-primary .ov-icon-text {
  color: #ffffff !important;
}

/* ============ PHIẾU IN CHUẨN MISA CRM ============ */
.ov-print-sheet {
  background: #ffffff;
  color: #0f172a;
  padding: 24px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
  font-size: 13px;
}
.print-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px solid #0f172a;
  padding-bottom: 12px;
  margin-bottom: 16px;
}
.print-company {
  display: flex;
  gap: 12px;
  align-items: center;
}
.print-logo-box {
  width: 70px;
  height: 50px;
  background: #007867;
  color: #ffffff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.print-company-text h3 {
  margin: 0 0 2px 0;
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
}
.print-company-text p {
  margin: 1px 0;
  font-size: 11.5px;
  color: #475569;
}
.print-doc-meta {
  text-align: right;
}
.print-title {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 800;
  color: #1e3a8a;
  letter-spacing: 1px;
}
.print-meta-line {
  font-size: 12px;
  color: #334155;
  margin-top: 2px;
}
.print-customer-box {
  margin-bottom: 14px;
  border: 1px solid #cbd5e1;
  padding: 8px 12px;
  border-radius: 4px;
  background: #f8fafc;
}
.print-info-grid {
  width: 100%;
  border-collapse: collapse;
}
.print-info-grid td {
  padding: 3px 6px;
  font-size: 12.5px;
  vertical-align: top;
}
.print-info-grid .lbl {
  color: #64748b;
  font-weight: 500;
  width: 110px;
}
.print-info-grid .val {
  color: #0f172a;
}
.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
}
.print-table th, .print-table td {
  border: 1px solid #94a3b8;
  padding: 6px 8px;
  font-size: 12px;
}
.print-table thead th {
  background: #e2e8f0;
  color: #0f172a;
  font-weight: 700;
}
.print-table tfoot th {
  background: #f1f5f9;
  font-weight: 800;
}
.print-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  gap: 20px;
}
.print-words {
  flex: 1;
  font-size: 12px;
  color: #334155;
}
.print-totals {
  width: 260px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 8px 12px;
  background: #f8fafc;
}
.total-line {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  font-size: 12px;
}
.total-line.grand {
  border-top: 1px solid #94a3b8;
  margin-top: 4px;
  padding-top: 4px;
  font-size: 13.5px;
  color: #b91c1c;
  font-weight: 800;
}
.print-sign-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  text-align: center;
  margin-top: 24px;
  page-break-inside: avoid;
}
.sign-col strong {
  display: block;
  font-size: 12.5px;
  color: #0f172a;
  margin-bottom: 2px;
}
.sign-note {
  font-size: 11px;
  color: #64748b;
  font-style: italic;
  margin-bottom: 60px;
}

@media print {
  body > * {
    display: none !important;
  }
  #ov-print-sheet {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    padding: 10mm !important;
    margin: 0 !important;
    background: #ffffff !important;
    color: #000000 !important;
    visibility: visible !important;
    z-index: 9999999 !important;
  }
  #ov-print-sheet * {
    visibility: visible !important;
  }
}

#detail-modal { z-index: 1000 !important; }
#neworder-modal { z-index: 2000 !important; }
#stock-lookup-modal { z-index: 2100 !important; }
#update-goods-modal { z-index: 2100 !important; }
#product-picker-modal { z-index: 2200 !important; }
.submodal, #ov-modal-confirm-delete, #ov-modal-generic-action, #ov-modal-custom-summary, #ov-modal-delivery, #ov-modal-waybill, #ov-modal-handover, #ov-modal-history, #ov-modal-amis-chat { z-index: 2500 !important; }
#passkey-mgmt-modal { z-index: 3000 !important; }
#passkey-edit-modal { z-index: 3100 !important; }

/* ==========================================================================
   PASSKEY MANAGEMENT STYLES
   ========================================================================== */
.passkey-table th, .passkey-table td {
  padding: 10px 12px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.passkey-table tr:hover td {
  background: #f8fafc;
}
.pk-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.pk-badge.admin { background: #fee2e2; color: #991b1b; }
.pk-badge.sale { background: #e0f2fe; color: #075985; }
.pk-badge.active { background: #dcfce7; color: #166534; }
.pk-badge.suspended { background: #fef3c7; color: #92400e; }
.pk-code {
  font-family: monospace;
  font-size: 12.5px;
  background: #f1f5f9;
  padding: 2px 6px;
  border-radius: 4px;
  color: #334155;
  letter-spacing: 0.5px;
}
.btn-toggle-eye {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  opacity: 0.7;
}
.btn-toggle-eye:hover {
  opacity: 1;
}

/* ============ MISA CRM ROW HOVER ACTIONS & DROPDOWN ============ */
.table-row-hover-bar {
  position: fixed;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 900;
  pointer-events: auto;
  user-select: none;
}

.table-row-hover-bar .row-act-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  outline: none;
}

.table-row-hover-bar .row-act-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.table-row-hover-bar .row-act-btn:active {
  transform: translateY(0);
  background: #f1f5f9;
}

.table-row-dropdown {
  position: fixed;
  z-index: 1000;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
  padding: 4px 0;
  min-width: 195px;
  user-select: none;
  animation: fadeInDropdown 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInDropdown {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.table-row-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  font-size: 13.5px;
  font-weight: 500;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.table-row-dropdown-item:hover {
  background-color: #f1f5f9;
  color: #0f172a;
}

.table-row-dropdown-item.btn-row-item-delete {
  color: #ef4444;
}

.table-row-dropdown-item.btn-row-item-delete:hover {
  background-color: #fef2f2;
  color: #dc2626;
}

.table-dropdown-icon {
  flex-shrink: 0;
}

/* ============ SYNCHRONIZED APP CONFIRM / ALERT MODAL ============ */
.app-dialog-modal {
  background: rgba(15, 23, 42, 0.5) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 999999 !important;
}

.app-dialog-modal[hidden] {
  display: none !important;
}

.app-dialog-card {
  max-width: 460px;
  width: 92vw;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  animation: appDialogZoomIn 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  margin: auto;
}

@keyframes appDialogZoomIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.app-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.app-dialog-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-dialog-icon-wrap {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.app-dialog-icon-wrap.primary,
.app-dialog-icon-wrap.info {
  background: #e0f2fe;
  color: #0369a1;
}

.app-dialog-icon-wrap.warning {
  background: #fef3c7;
  color: #b45309;
}

.app-dialog-icon-wrap.danger {
  background: #fee2e2;
  color: #b91c1c;
}

.app-dialog-icon-wrap.success {
  background: #dcfce7;
  color: #15803d;
}

.app-dialog-title-group strong {
  font-size: 15.5px;
  font-weight: 700;
  color: #1e293b;
}

.app-dialog-body {
  padding: 20px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #334155;
  word-break: break-word;
}

.app-dialog-body strong {
  color: #0f172a;
  font-weight: 600;
}

.app-dialog-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 18px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
}

.btn-dialog-primary {
  background: #0f766e !important;
  color: #ffffff !important;
}

.btn-dialog-primary:hover {
  background: #0d655e !important;
}

.btn-dialog-danger {
  background: #dc2626 !important;
  color: #ffffff !important;
}

.btn-dialog-danger:hover {
  background: #b91c1c !important;
}

.btn-dialog-warning {
  background: #d97706 !important;
  color: #ffffff !important;
}

.btn-dialog-warning:hover {
  background: #b45309 !important;
}

.btn-dialog-info {
  background: #2563eb !important;
  color: #ffffff !important;
}

.btn-dialog-info:hover {
  background: #1d4ed8 !important;
}

.btn-dialog-success {
  background: #16a34a !important;
  color: #ffffff !important;
}

.btn-dialog-success:hover {
  background: #15803d !important;
}

/* ============================================================
   LỊCH SỬ GIAO DỊCH (TRANSACTION HISTORY MODAL - MISA CRM STANDARD)
   ============================================================ */
.tx-history-card-modal {
  width: 95%;
  max-width: 630px;
  max-height: 85vh;
  border-radius: 12px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.22);
  transition: all 0.25s ease-in-out;
}

.tx-history-card-modal.is-maximized {
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
}

.tx-modal-head {
  padding: 12px 18px 10px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.tx-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.tx-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tx-tool-btn {
  background: transparent;
  border: none;
  padding: 4px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tx-tool-btn:hover {
  background: #f1f5f9;
}

.tx-tool-btn svg {
  display: block;
}

.tx-tabs-header {
  display: flex;
  gap: 24px;
  padding: 0 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.tx-tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 11px 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}

.tx-tab-btn:hover {
  color: #1e293b;
}

.tx-tab-btn.active {
  color: #2563eb;
  border-bottom-color: #2563eb;
  font-weight: 600;
}

.tx-modal-body {
  padding: 16px 20px;
  overflow-y: auto;
  flex: 1;
  background: #ffffff;
  min-height: 240px;
}

.tx-state-box {
  text-align: center;
  padding: 40px 16px;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tx-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid #e2e8f0;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: tx-spin 0.75s linear infinite;
  margin-bottom: 12px;
}

@keyframes tx-spin {
  to { transform: rotate(360deg); }
}

/* Activity Items (Tab 1) */
.tx-activities-list {
  display: flex;
  flex-direction: column;
}

.tx-act-item {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f5f9;
  align-items: flex-start;
}

.tx-act-item:last-child {
  border-bottom: none;
}

.tx-act-icon-wrap {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e0f2fe;
  color: #0284c7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.tx-act-content {
  flex: 1;
  min-width: 0;
}

.tx-act-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.4;
  margin-bottom: 4px;
}

.tx-act-desc {
  font-size: 13px;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 4px;
  white-space: pre-line;
}

.tx-act-meta {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Order Purchase Cards (Tab 2) */
.tx-purchases-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tx-order-card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 13px 16px;
  background: #ffffff;
  transition: all 0.15s ease-in-out;
}

.tx-order-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);
}

.tx-order-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid #f1f5f9;
}

.tx-order-title-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: #1e293b;
}

.tx-order-code {
  font-weight: 700;
  color: #2563eb;
  cursor: pointer;
  text-decoration: none;
}

.tx-order-code:hover {
  text-decoration: underline;
}

.tx-order-date {
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
}

.tx-order-grid {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tx-order-row {
  display: flex;
  font-size: 12.5px;
  line-height: 1.5;
}

.tx-order-lbl {
  width: 180px;
  flex-shrink: 0;
  color: #64748b;
}

.tx-order-val {
  flex: 1;
  color: #1e293b;
  font-weight: 500;
  word-break: break-word;
}

.tx-modal-foot {
  padding: 10px 18px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}

.tx-filter-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}

.tx-filter-btn:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.tx-close-btn {
  background: #2563eb;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 7px 22px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.tx-close-btn:hover {
  background: #1d4ed8;
}

/* ==========================================================================
   CUSTOMER PICKER MODAL (CHỌN KHÁCH HÀNG - CHUẨN MISA CRM - SCREENSHOT 1)
   ========================================================================== */
.customer-picker-card {
  max-width: 920px;
  width: 95vw;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-height: 90vh;
  transition: all 0.2s ease;
}

.customer-picker-card.is-maximized {
  max-width: 98vw;
  width: 98vw;
  height: 96vh;
  max-height: 96vh;
}

.cust-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: #ffffff;
}

.cust-picker-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.cust-picker-win-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cust-picker-win-actions .win-btn {
  background: transparent;
  border: none;
  font-size: 14px;
  color: #64748b;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
}

.cust-picker-win-actions .win-btn:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.cust-picker-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  flex: 1;
}

.cust-picker-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.cust-picker-search-wrap {
  position: relative;
  width: 280px;
  max-width: 100%;
}

.cust-picker-search-wrap .cust-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #94a3b8;
  pointer-events: none;
}

.cust-picker-search-wrap input {
  width: 100%;
  height: 34px;
  padding: 0 12px 0 32px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cust-picker-search-wrap input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.btn-misa-add-cust {
  background: #ffffff;
  border: 1px solid #2563eb;
  color: #2563eb;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn-misa-add-cust:hover {
  background: #eff6ff;
  border-color: #1d4ed8;
}

.cust-picker-table-wrap {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  overflow: auto;
  max-height: 420px;
  background: #ffffff;
}

.cust-picker-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.cust-picker-table thead th {
  position: sticky;
  top: 0;
  background: #f8fafc;
  color: #475569;
  font-weight: 600;
  font-size: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  z-index: 2;
}

.cust-picker-table thead th .filter-icon {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 4px;
}

.cust-picker-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.12s;
  cursor: pointer;
}

.cust-picker-table tbody tr:hover {
  background: #f8fafc;
}

.cust-picker-table tbody tr.selected {
  background: #eff6ff;
}

.cust-picker-table td {
  padding: 8px 12px;
  color: #1e293b;
  vertical-align: middle;
  white-space: nowrap;
}

.cust-link-text {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}

.cust-link-text:hover {
  text-decoration: underline;
}

.cust-picker-radio {
  cursor: pointer;
  width: 16px;
  height: 16px;
  accent-color: #2563eb;
  margin: 0;
  display: block;
}

.cust-phone-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #10b981;
  color: #ffffff;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}

.cust-phone-btn:hover {
  background: #059669;
  transform: scale(1.1);
}

.cust-picker-pager {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding-top: 4px;
}

.cust-picker-pager .pager-range {
  font-size: 12.5px;
  color: #475569;
  font-weight: 500;
}

.cust-picker-pager .pager-nav-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cust-picker-pager .pager-nav-btn {
  background: transparent;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  color: #64748b;
  font-size: 12px;
  min-width: 26px;
  height: 26px;
  padding: 0 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cust-picker-pager .pager-nav-btn:hover:not(:disabled) {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}

.cust-picker-pager .pager-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.cust-picker-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #e2e8f0;
  background: #ffffff;
}

.btn-cust-modal-cancel {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 22px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-cust-modal-cancel:hover {
  background: #f1f5f9;
}

.btn-cust-modal-select {
  background: #2563eb;
  border: none;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 26px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-cust-modal-select:hover {
  background: #1d4ed8;
}

/* Quote Picker Modal (MISA CRM Style) */
#quote-picker-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2500 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(2px);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
}

#quote-picker-modal[hidden] {
  display: none !important;
}

.quote-picker-card {
  max-width: 960px;
  width: 92vw;
  margin: auto !important;
}

.quote-picker-table tbody tr {
  cursor: pointer;
}

.quote-picker-table tbody tr:hover {
  background: #f8fafc;
}

.quote-picker-table tbody tr.selected {
  background: #eff6ff !important;
}

.quote-picker-pager-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 6px;
}

.quote-picker-selected-info {
  font-size: 13px;
  color: #475569;
}

.quote-picker-selected-info span {
  font-weight: 700;
  color: #1e293b;
}

.btn-clear-quote {
  color: #94a3b8;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: 13px;
  padding: 0 6px;
}

.btn-clear-quote:hover {
  color: #ef4444;
}

/* Book button in customer input */
.misa-addon-book-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 15px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  color: #475569;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}

.misa-addon-book-btn:hover {
  background: #f1f5f9;
  transform: translateY(-50%) scale(1.1);
}

.customer-ac-field #no-account {
  padding-right: 58px;
}

.customer-ac-field #btn-clear-customer {
  right: 32px;
}

/* ==========================================================================
   CUSTOM SEARCHABLE SELECT (LOẠI ĐIỀU KHOẢN TT & OPTIONS CHUẨN MISA CRM)
   ========================================================================== */
.misa-custom-select {
  position: relative;
  width: 100%;
}

.misa-select-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  user-select: none;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.misa-select-display:focus,
.misa-custom-select.is-open .misa-select-display {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
  outline: none;
}

.misa-select-arrow {
  font-size: 11px;
  color: #64748b;
  margin-left: 6px;
  transition: transform 0.15s ease;
}

.misa-custom-select.is-open .misa-select-arrow {
  transform: rotate(180deg);
}

.misa-select-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 2200;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  min-width: 250px;
}

.misa-select-search-wrap {
  position: relative;
  padding: 8px 10px;
  border-bottom: 1px solid #f1f5f9;
  background: #ffffff;
}

.misa-select-search-wrap input {
  width: 100%;
  height: 32px;
  padding: 0 30px 0 10px;
  font-size: 12.5px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.misa-select-search-wrap input:focus {
  border-color: #2563eb;
}

.misa-select-search-wrap .search-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: #64748b;
  pointer-events: none;
}

.misa-select-options {
  max-height: 210px;
  overflow-y: auto;
  padding: 4px 0;
}

.misa-select-option {
  padding: 8px 12px;
  font-size: 13px;
  color: #1e293b;
  cursor: pointer;
  transition: background 0.12s;
}

.misa-select-option:hover {
  background: #f8fafc;
}

.misa-select-option.is-selected {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}