:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --border: #dfe1e6;
  --text: #172b4d;
  --text-muted: #5e6c84;
  --primary: #0052cc;
  --primary-hover: #0747a6;
  --danger: #de350b;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(9, 30, 66, 0.15), 0 0 1px rgba(9, 30, 66, 0.2);
}

* { box-sizing: border-box; }

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

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.auth-card {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 24px;
  width: 100%;
  max-width: 380px;
}

/* Logo to hơn nhưng vẫn giữ toàn trang gọn trong 1 màn hình mobile — bù lại
   bằng cách rút gọn khoảng cách xung quanh (margin/padding) ở các phần tử
   auth-* bên dưới. */
.auth-logo {
  display: block;
  height: 68px;
  width: auto;
  margin: 0 auto 10px;
}

.auth-card h1 {
  font-size: 19px;
  margin: 0 0 2px;
}

.auth-card p.sub {
  color: var(--text-muted);
  margin: 0 0 14px;
  font-size: 13px;
}

.field { margin-bottom: 13px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.field input, .field select, .field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background: var(--primary);
  color: white;
  width: 100%;
}

.btn:hover { background: var(--primary-hover); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: #ebecf0; }

.btn-danger { background: var(--danger); }
.btn-danger:hover { background: #bf2600; }

.error-msg {
  color: var(--danger);
  font-size: 13px;
  margin: 8px 0 0;
  min-height: 16px;
}

.switch-link {
  text-align: center;
  margin-top: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.switch-link a { color: var(--primary); text-decoration: none; cursor: pointer; }

/* ---------- Board layout ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar h1 {
  font-size: 18px;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-logo {
  height: 26px;
  width: auto;
  display: block;
}

.topbar .right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.board-search {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  width: 190px;
  max-width: 40vw;
}
.board-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.user-email {
  font-size: 13px;
  color: var(--text-muted);
}

.icon-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.icon-btn:hover { background: var(--primary-hover); }

.link-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
}

.board {
  display: flex;
  gap: 14px;
  padding: 16px;
  overflow-x: auto;
  align-items: flex-start;
  min-height: calc(100vh - 60px);
}

.column {
  background: #ebecf0;
  border-radius: var(--radius);
  width: 280px;
  min-width: 280px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 92px);
}

.column-header {
  padding: 12px 12px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.column-count {
  background: #dfe1e6;
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 12px;
}

.column-body {
  padding: 0 8px 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.column-body.drag-over {
  background: #dcdff2;
  border-radius: 6px;
}

.card {
  background: var(--surface);
  border-radius: 6px;
  box-shadow: var(--shadow);
  padding: 12px;
  cursor: grab;
  font-size: 14px;
  border-left: 3px solid transparent;
}
.card:active { cursor: grabbing; }
.card.dragging { opacity: 0.4; }
.card.overdue-card { border-left-color: var(--danger); }

.card .card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.card .card-ma-don {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  word-break: break-all;
}
.card .card-ngay-nhan {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.card .khach-hang {
  font-weight: 700;
}

.card .card-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ---------- Badge trạng thái thanh toán (nổi bật cho mọi người dùng: Admin/NV/khách) ---------- */
.badge-tt {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 10px;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.badge-tt.paid { background: #d3f5e0; color: #006644; }
.badge-tt.unpaid { background: #ffe2dd; color: #bf2600; }

/* Banner "Bạn đang cập nhật đơn hàng ..." trong modal sửa đơn */
.modal-ma-don-banner {
  font-size: 13px;
  font-weight: 700;
  color: var(--primary);
  background: #e6f0ff;
  padding: 6px 10px;
  border-radius: 6px;
  margin: -6px 0 12px;
}

.add-card-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  text-align: left;
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
}
.add-card-btn:hover { background: #dfe1e6; color: var(--text); }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(9, 30, 66, 0.54);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 100;
}

/* Modal dùng flexbox: phần nội dung cuộn riêng, thanh nút luôn nằm cố định
   ở đáy hộp thoại theo luồng bình thường (không dùng position:fixed) để
   tránh lỗi hiển thị/hở khoảng trống trên trình duyệt di động. */
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 80px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.modal-scroll {
  padding: 24px;
  overflow-y: auto;
}

.modal-scroll h2 {
  margin: 0 0 16px;
  font-size: 18px;
}

.modal-row {
  display: flex;
  gap: 12px;
}
.modal-row .field { flex: 1; }

.modal-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-actions .btn, .modal-actions .btn-secondary, .modal-actions .btn-danger {
  width: auto;
  flex: 1;
}

/* ---------- Khung trao đổi dạng chat ---------- */
.chat-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 340px;
  overflow-y: auto;
  padding: 10px;
  background: #f4f5f7;
  border-radius: 8px;
  margin-bottom: 4px;
}

.chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.chat-msg.own { align-self: flex-end; align-items: flex-end; }
.chat-msg.other { align-self: flex-start; align-items: flex-start; }

.chat-msg .chat-sender {
  font-size: 11px;
  color: var(--text-muted);
  margin: 0 4px 2px;
}

.chat-bubble {
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
  word-break: break-word;
}
.chat-msg.own .chat-bubble { background: var(--primary); color: white; border-bottom-right-radius: 4px; }
.chat-msg.other .chat-bubble { background: #ebecf0; color: var(--text); border-bottom-left-radius: 4px; }

.chat-bubble img {
  max-width: 200px;
  max-height: 200px;
  border-radius: 8px;
  cursor: pointer;
  display: block;
}
.chat-bubble img + .chat-caption { margin-top: 6px; }

.chat-msg .chat-time {
  font-size: 10px;
  color: var(--text-muted);
  margin: 2px 4px 0;
}

.chat-msg .remove-msg-btn {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  margin: 2px 4px 0;
  padding: 0;
}

.chat-msg.uploading .chat-bubble { color: var(--text-muted); font-style: italic; }

.chat-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-row input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 14px;
  font-family: inherit;
}
.chat-input-row .btn { width: auto; padding: 10px 18px; border-radius: 20px; }
.chat-attach-btn {
  border: none;
  background: #ebecf0;
  color: var(--text-muted);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chat-attach-btn:hover { background: #dfe1e6; color: var(--text); }

.hint-msg {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

/* ---------- Danh sách đơn hàng dạng bảng (chỉ Admin) ---------- */
.modal-wide { max-width: 1100px; }
.icon-btn.danger { background: var(--danger); }
.icon-btn.danger:hover { background: #bf2600; }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.list-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.list-toolbar select {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.list-selected-count { font-size: 12px; color: var(--text-muted); }
.list-toolbar-actions { display: flex; gap: 8px; margin-left: auto; }

.list-table-wrap { overflow-x: auto; }
.list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}
.list-table th, .list-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.list-table th {
  background: #f4f5f7;
  font-weight: 700;
  position: sticky;
  top: 0;
}
.list-table tbody tr:hover { background: #f8f9fb; }
.list-table tbody tr.selected { background: #e6f0ff; }
.list-table td.lt-colors { white-space: normal; max-width: 220px; }

/* ---------- Gợi ý khách hàng cũ ---------- */
.autocomplete-wrap { position: relative; }

.suggestions-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: var(--shadow);
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 220px;
  overflow-y: auto;
}

.suggestions-list li {
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.suggestions-list li:hover,
.suggestions-list li.active {
  background: #ebecf0;
}
.suggestions-list li .s-name { font-weight: 600; }
.suggestions-list li .s-phone { color: var(--text-muted); margin-left: 6px; }

/* ---------- Quản lý người dùng ---------- */
.user-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.user-row:last-child { border-bottom: none; }
.user-row .u-email { font-size: 13px; word-break: break-all; }
.user-row .u-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: 6px;
  white-space: nowrap;
}
.u-badge.cho_duyet { background: #fff0b3; color: #7a5d00; }
.u-badge.nhan_vien { background: #e6f0ff; color: var(--primary); }
.u-badge.admin { background: #d3f5e0; color: #006644; }
.user-row select {
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.u-username-wrap { color: var(--text-muted); font-size: 12px; margin-left: 4px; }
.u-edit-username {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  font-size: 11px; opacity: 0.6; vertical-align: middle;
}
.u-edit-username:hover { opacity: 1; }
.u-username-input {
  width: 110px; font-size: 12px; padding: 2px 4px;
  border: 1px solid var(--primary); border-radius: 4px;
}
.u-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.u-delete-btn {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; cursor: pointer; font-size: 13px; line-height: 1;
}
.u-delete-btn:hover:not(:disabled) { background: #fde8e8; border-color: #dc2626; }
.u-delete-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.hidden { display: none !important; }

.loading-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ---------- Responsive ---------- */
@media (max-width: 700px) {
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .topbar h1 { font-size: 15px; }
  .topbar .right { gap: 8px; flex-wrap: wrap; }
  .user-email { display: none; }

  .board { padding: 10px; gap: 10px; }
  .column { width: 78vw; min-width: 220px; max-width: 300px; }

  .modal-backdrop { padding: 0; align-items: stretch; }
  .modal {
    max-width: 100%;
    /* 100vh không trừ phần bàn phím ảo che màn hình trên di động, khiến nút
       "Lưu" ở đáy modal bị đẩy khuất/khó bấm khi đang gõ. 100dvh (dynamic
       viewport height) tự trừ phần bị che, giữ nút Lưu luôn trong tầm nhìn.
       Vẫn giữ 100vh làm giá trị dự phòng cho trình duyệt cũ không hỗ trợ dvh. */
    max-height: 100vh;
    height: 100vh;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }
  .modal-scroll { padding: 16px; }
  .modal-row { flex-direction: column; gap: 0; }

  .modal-actions {
    padding: 12px 16px;
    box-shadow: 0 -2px 6px rgba(9, 30, 66, 0.15);
  }

  /* Chữ trong ô nhập tối thiểu 16px để iPhone không tự phóng to trang khi bấm vào */
  .field input, .field select, .field textarea, .chat-input-row input[type="text"] {
    font-size: 16px;
  }

  .chat-input-row { padding: 10px 16px; }
  .chat-msg { max-width: 88%; }

  .btn, .icon-btn { min-height: 44px; }
}

@media (max-width: 380px) {
  .column { width: 84vw; }
}

/* ---------- Ô khóa tự động (mã đơn, ngày nhận) ---------- */
.field input[readonly] {
  background: #f4f5f7;
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ---------- Tab Đăng nhập / Tra cứu ---------- */
.auth-tabs {
  display: flex;
  gap: 4px;
  background: #ebecf0;
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 12px;
}
.auth-tab {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}
.auth-tab.active {
  background: var(--surface);
  color: var(--primary);
  box-shadow: var(--shadow);
}
.auth-tab:not(.active):hover { color: var(--text); }

/* ---------- Thanh tiến độ thời gian ---------- */
.progress-bar-wrap {
  background: #ebecf0;
  border-radius: 6px;
  height: 8px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-bar-wrap.mini { height: 5px; margin-top: 8px; }
.progress-bar-fill {
  height: 100%;
  border-radius: 6px;
  background: var(--primary);
  transition: width .2s;
}
.progress-bar-fill.ok { background: #36b37e; }
.progress-bar-fill.warn { background: #ffab00; }
.progress-bar-fill.danger { background: var(--danger); }
.progress-bar-label {
  font-size: 11px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* ---------- Thông tin thanh toán (chỉ Admin) ---------- */
#payment-field {
  background: #fffae6;
  border: 1px solid #ffe380;
  border-radius: 8px;
  padding: 12px 12px 2px;
}

/* ---------- Danh sách email phụ (chip) ---------- */
.chip-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip-list:empty { margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #e6f0ff;
  color: var(--primary);
  border-radius: 14px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  font-weight: 600;
}
.chip button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
}

/* ---------- Video / tệp trong khung chat ---------- */
.chat-bubble video {
  max-width: 220px;
  max-height: 220px;
  border-radius: 8px;
  display: block;
}
.chat-file {
  color: inherit;
  text-decoration: underline;
  font-size: 13px;
  word-break: break-word;
}

/* ---------- Khối thanh toán (hiện nổi bật, thấy được bởi tất cả) ---------- */
.payment-box {
  background: #fffae6;
  border: 1px solid #ffe380;
  border-radius: 8px;
  padding: 12px 12px 2px;
}
.payment-box label { font-size: 14px; }

/* Banner thanh toán trong trang khách hàng (customer.html) */
.payment-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.payment-banner:empty { display: none; margin: 0; }
.payment-banner .pb-amount { font-size: 20px; font-weight: 700; color: var(--text); }
.payment-banner .badge-tt { font-size: 12px; padding: 4px 12px; border-radius: 12px; }
.oc-payment { margin-top: 6px; }

/* ---------- Quản lý trạng thái đơn hàng (chỉ Admin) ---------- */
.status-row { align-items: center; }
.status-row .status-label-input {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.status-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.status-row-actions .link-btn { text-decoration: none; font-size: 13px; padding: 2px 4px; }
.status-row-actions .link-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- Nút liên hệ nhanh (Zalo / Gọi điện / Tìm đường) ----------
   Đặt thành thanh ngang cố định ở ĐÁY màn hình (không đặt cạnh phải theo
   chiều dọc) để không đè lên nút bấm của form đăng nhập/tra cứu vốn đã nằm
   gần sát 2 mép màn hình trên mobile. Tự ẩn khi đang mở modal chi tiết đơn
   (xem #order-detail-backdrop) vì modal đó đã có thanh nút riêng ở đáy. */
.contact-fab {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 10px;
  z-index: 200;
}
.contact-fab-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  padding: 7px 3px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-decoration: none;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.1;
}
.contact-fab-btn .cfb-icon { font-size: 19px; }
.contact-fab-btn.zalo { color: #0068ff; }
.contact-fab-btn.call { color: #22a45d; }
.contact-fab-btn.map { color: var(--danger); }
.contact-fab-btn:active { transform: scale(0.95); }