/* ====== Reset & base ====== */
:root {
  --blue: #2f80ed;
  --blue-light: #e6f0ff;
  --blue-dark: #1c5fb8;
  --border: #6ca4f2;
  --bg: #f7fbff;
  --danger: #ff3b30;
  --text: #333;
}

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ====== Top bar ====== */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 32px;
  border-bottom: 2px solid var(--border);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 500;
}

.brand {
  font-size: 22px;
  font-weight: bold;
  margin-right: 32px;
}

.tabs {
  display: flex;
  gap: 8px;
}

.tab {
  border-radius: 20px;
  padding: 8px 18px;
  border: 1px solid var(--blue);
  background: #fff;
  color: var(--blue);
  cursor: pointer;
  font-size: 13px;
}

.tab.active {
  background: var(--blue);
  color: #fff;
}

.user-email {
  margin-left: auto;
  font-size: 13px;
  color: #1a73e8;
}

/* ====== Content ====== */
.content {
  padding: 16px 32px 32px;
  flex: 1;
}

.card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px 18px 18px;
  background: #fff;
  margin-bottom: 16px;
}

.card h2 {
  font-size: 13px;
  margin: 0 0 10px;
  text-transform: uppercase;
  font-weight: bold;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-inner {
  background: #fdfefe;
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

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

.form-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.form-field label {
  margin-bottom: 2px;
}

.form-field input {
  height: 26px;
  border-radius: 2px;
  border: 1px solid var(--border);
  padding: 2px 6px;
  font-size: 12px;
}

/* ====== Branch / Facility ====== */
.branch-layout {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr;
  gap: 8px;
}

.branch-info {
  border: 1px solid var(--border);
  padding: 8px;
}

.branch-info .form-field {
  margin-bottom: 6px;
}

.facilities-panel {
  border: 1px solid var(--border);
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-height: 160px;
}

.facilities-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: bold;
}

.facility-table {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 4px;
  flex: 1;
}

.facility-row {
  display: grid;
  grid-template-columns: 0.6fr 0.9fr 0.9fr 1.3fr 40px 40px;
  gap: 4px;
  margin-bottom: 4px;
  align-items: center;
}

.facility-row.header {
  font-size: 12px;
  font-weight: bold;
}

.facility-row input {
  width: 100%;
  height: 24px;
  border-radius: 2px;
  border: 1px solid var(--border);
  padding: 2px 4px;
  font-size: 12px;
}

.branch-footer {
  text-align: right;
  margin-top: 8px;
}

/* ====== Buttons ====== */
.btn {
  border-radius: 3px;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 6px 14px;
  color: #fff;
  background: var(--blue);
}

.btn:hover {
  background: var(--blue-dark);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

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

.btn-danger:hover {
  background: #d1251b;
}

.btn-primary {
  background: var(--blue);
}

.btn-primary:hover {
  background: var(--blue-dark);
}

.actions {
  text-align: right;
  margin-top: 18px;
}

/* ====== Responsive ====== */
@media (max-width: 900px) {
  .branch-layout {
    grid-template-columns: 1fr;
  }
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .tabs {
    flex-wrap: wrap;
  }
}

/* ===== Common page visibility ===== */
.page { display: block; }          /* page là khối bình thường */
.hidden { display: none !important; }


/* ====== Danh mục dropdown ====== */
.dm-dropdown {
  position: absolute;
  top: 48px;
  left: 260px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  z-index: 100;
  min-width: 220px;
  padding: 4px 0;
}

.dm-item {
  width: 100%;
  text-align: left;
  padding: 6px 12px;
  border: none;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
}

.dm-item:hover {
  background: var(--blue-light);
}

.dm-item-disabled {
  opacity: 0.5;
  cursor: default;
}

/* ✅ MỚI (23/07/2026, theo yêu cầu anh): tiêu đề nhóm trong dropdown "BÁO CÁO"
   (VD "1. Báo cáo doanh thu") — KHÔNG bấm được, chỉ để phân nhóm các báo cáo con
   (.dm-item) bên dưới nó. */
.dm-group-title {
  padding: 8px 12px 2px;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: default;
}
.dm-group-title:not(:first-child) {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Ghi chú tạm trên các trang Báo cáo chưa làm số liệu (page-report-...). */
.report-placeholder-note {
  color: #64748b;
  font-size: 13px;
  padding: 4px 4px 12px;
}

/* ====== Schedule table ====== */
.schedule-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.schedule-row {
  display: grid;
  grid-template-columns: 60px 2.5cm 1.6fr 0.7fr 1.2fr 1.2fr 1.4fr 2.4fr 1.2fr 130px;
  align-items: center;
  padding: 4px 8px;
  border-bottom: 1px solid #e0e8f5;
  font-size: 13px;
}

.schedule-row.header {
  background: var(--blue-light);
  font-weight: bold;
}

.schedule-row:last-child {
  border-bottom: none;
}

.schedule-row .col-select {
  text-align: center;
}

.schedule-row .col-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

.schedule-row .col-location,
.schedule-row .col-cskd {
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  padding: 4px 0;
}

.schedule-header-buttons {
  display: flex;
  gap: 6px;
}

/* ====== Modal ====== */
.modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal.hidden {
  display: none;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25);
}

.modal-dialog {
  position: relative;
  background: #fff;
  padding: 16px 20px 20px;
  border-radius: 4px;
  min-width: 360px;
  max-width: 520px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.modal-dialog h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

/* Modal "Danh sách booking" (mở khi bấm vào nhãn XN trên lưới CSKD) — rộng hơn modal
   mặc định để đủ chỗ cho bảng 8 cột. */
.biz-xn-modal-dialog{
  max-width: 1000px;
  width: 92vw;
  max-height: 80vh;
  overflow: auto;
}
.biz-xn-list-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.biz-xn-list-table th{
  background: #f5f7fb;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid #cbd5e1;
  white-space: nowrap;
}
.biz-xn-list-table td{
  padding: 8px 10px;
  border-bottom: 1px solid #e7ebf2;
  white-space: nowrap;
}
.biz-xn-list-row{
  cursor: pointer;
}
.biz-xn-list-row:hover{
  background: #eaf2ff;
}

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

.btn.btn-secondary {
  background: #999;
}

.btn.btn-secondary:hover {
  background: #777;
}

/* Merge table in modal */
#merge-table-container {
  margin-top: 8px;
}

.merge-table-row {
  display: grid;
  grid-template-columns: 2.2fr 1.5fr;
  gap: 4px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 12px;
}

.merge-table-row .merge-name {
  padding: 3px 4px;
  border: 1px solid var(--border);
  border-radius: 2px;
  background: #f9fbff;
}

.merge-table-row select {
  height: 26px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 12px;
}


/* ====== HH.Dịch vụ layout ====== */
.hh-layout {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 10px;
  margin-top: 8px;
}

.hh-left,
.hh-right {
  border: 1px solid var(--border);
  padding: 8px;
  background: #fff;
}

.hh-left-header,
.hh-right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-weight: bold;
}

.hh-search-row {
  margin-bottom: 6px;
}

.hh-search-row input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
}

/* Bảng HH.Dịch vụ */
.hh-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.hh-row {
  display: grid;
  /* ✅ MỚI: chèn thêm 2 cột TT (36px, chỉ hiện số thứ tự) và Mã (90px) giữa Chọn và
     Tên HH.Dịch vụ — nhớ đổi khớp cả header (.hh-row.header trong guest.html) và
     template dòng dữ liệu (#hh-row-template) nếu sau này đổi số cột. */
  grid-template-columns: 60px 36px 90px 1.5fr 0.9fr 0.8fr 0.7fr 150px;
  align-items: center;
  padding: 4px 6px;
  column-gap: 6px;
  border-bottom: 1px solid #e0e8f5;
  font-size: 12px;
}

.hh-row .hh-col-tt {
  text-align: center;
  color: #64748b;
}


.hh-row.header {
  background: var(--blue-light);
  font-weight: bold;
}

.hh-row:last-child {
  border-bottom: none;
}

.hh-row .hh-col-select {
  text-align: center;
}

.hh-row .hh-col-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}

/* Trạng thái khóa (chưa bấm Sửa) — chữ mờ hơn, con trỏ mặc định, không viền khi hover */
.hh-row input[disabled],
.hh-row select[disabled] {
  color: #333;
  cursor: default;
}
.hh-row input[disabled]:hover,
.hh-row select[disabled]:hover {
  border-color: transparent;
}

/* Nút Sửa mờ đi / ẩn đi khi dòng đang ở chế độ sửa */
.hh-row .hh-edit-btn.hidden {
  display: none;
}

.hh-row input[type="text"] {
  width: 100%;
  padding: 3px 4px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 2px;
  font-size: 12px;
}

.hh-row input[type="text"]:hover {
  border-color: #d0d7de;
}

.hh-row input[type="text"]:focus {
  border-color: var(--border);
  background: #fff;
  outline: none;
}

.hh-row select.hh-group-select {
  width: 100%;
  padding: 3px 2px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 2px;
  font-size: 12px;
}

.hh-row select.hh-group-select:hover {
  border-color: #d0d7de;
}

.hh-row select.hh-group-select:focus {
  border-color: var(--border);
  background: #fff;
  outline: none;
}

/* ✅ MỚI: cột "Loại" đổi từ ô gõ tay 0/1/2 sang dropdown Bán/Mua/Bán & Mua — style
   giống hệt select.hh-group-select ở trên cho đồng bộ. */
.hh-row select.hh-type-select {
  width: 100%;
  padding: 3px 2px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 2px;
  font-size: 12px;
}

.hh-row select.hh-type-select:hover {
  border-color: #d0d7de;
}

.hh-row select.hh-type-select:focus {
  border-color: var(--border);
  background: #fff;
  outline: none;
}

/* Dòng được chọn */
.hh-row.selected {
  background: #fff6d8;
}

/* Bảng thành viên HH.Dịch vụ */
.hh-member-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.hh-member-row {
  display: grid;
  grid-template-columns: 2.2fr 1.1fr 0.9fr 80px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid #e0e8f5;
  font-size: 12px;
}

.hh-member-row.header {
  background: var(--blue-light);
  font-weight: bold;
}

.hh-member-row:last-child {
  border-bottom: none;
}

.hh-member-row select,
.hh-member-row input {
  width: 100%;
  padding: 3px 4px;
  border-radius: 2px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 12px;
}

.hh-member-row select:hover,
.hh-member-row input:hover {
  border-color: #d0d7de;
}

.hh-member-row select:focus,
.hh-member-row input:focus {
  border-color: var(--border);
  background: #fff;
  outline: none;
}

.hh-member-row .hhm-col-actions {
  display: flex;
  justify-content: flex-end;
}

.hh-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
}
/* =============== DANH MỤC KHÁCH HÀNG =============== */

.customer-table {
  margin-top: 8px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  overflow: hidden;
  font-size: 14px;
}

.customer-row {
  display: grid;
  grid-template-columns: 70px 1.6fr 1.2fr 140px 1.6fr 2fr 80px;
  align-items: center;
  border-top: 1px solid #e5e7eb;
  padding: 4px 8px;
  column-gap: 6px;
}

.customer-row.header {
  background-color: #f3f4f6;
  font-weight: 600;
}

.cust-col-select,
.cust-col-name,
.cust-col-alias,
.cust-col-phone,
.cust-col-email,
.cust-col-address,
.cust-col-actions {
  display: flex;
  align-items: center;
}

.customer-row input[type="text"],
.customer-row input[type="email"],
.customer-row input[type="tel"] {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  font-size: 14px;
}

.cust-col-select {
  justify-content: center;
}

.cust-col-actions {
  justify-content: center;
}

.phone-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
}

.phone-wrap input {
  flex: 1;
}

.customer-call-btn {
  white-space: nowrap;
  padding: 4px 8px;
  font-size: 12px;
}

/* Hiệu ứng chọn dòng khách hàng */
.customer-row.selected {
  background-color: #d0ebff !important;
  border-left: 4px solid #339af0;
}

/* Toàn bộ màn hình tab khách hàng chiếm full height */
#customer-screen {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 10px;
  background: white;
}

#customer-list-pane {
  flex: 1;
  overflow-y: auto;
  border-bottom: 3px solid #ccc;
  padding-bottom: 10px;
}

#customer-org-pane {
  flex-shrink: 0;
  padding-top: 10px;
}

/* ================== BẢNG GIÁ CSKD ================== */

/* ✅ MỚI: kéo trang này sát ra 2 mép trái/phải (chỉ còn ~2 ly), riêng cho trang Bảng
   giá CSKD — không đụng tới padding chung .content (đang dùng cho mọi trang khác).
   Bù lại phần padding-left/right 32px của .content bằng margin âm, rồi chỉ chừa lại
   8px (~2 ly) bằng padding riêng của chính trang này. */
#page-price-bu {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Layout 2 cột trong page Bảng giá */
#page-price-bu .row {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* ✅ khoảng cách giữa khung trái/phải còn ~2 ly (trước là 14px) */
}

/* Bên trái: Bảng giá rộng 66% */
#page-price-bu .price-bu-left {
  flex: 0 0 66%;
  max-width: 66%;
  padding-left: 0;
}

/* Bên phải: Áp dụng CSKD + KH */
#page-price-bu .price-bu-right {
  flex: 0 0 33%;
  max-width: 33%;
}

@media (max-width: 992px) {
  #page-price-bu .row {
    flex-direction: column;
  }
  #page-price-bu .price-bu-left,
  #page-price-bu .price-bu-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Bỏ khung card bên trái cho thoáng */
#page-price-bu .price-bu-left .card {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

#page-price-bu .price-bu-left .card-header {
  padding-left: 0;
}

#page-price-bu .price-bu-left .card-body {
  padding: 0;
}

/* Bảng giá trái full width */
.price-bu-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
}

.price-bu-row {
  display: grid;
  grid-template-columns: 2.1fr 1fr 1fr 2.3fr 150px 60px 60px;
  align-items: center;
  column-gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid #e0e8f5;
  background: #fdfefe;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* ✅ MỚI: khung gộp khi 1 "bảng giá" có từ 2 Lịch trình trở lên — chỉ dòng ĐẦU tiên
   hiện Tên bảng giá/Từ ngày/Đến ngày, các dòng "nối tiếp" bên dưới chỉ hiện Lịch
   trình + Thứ áp dụng, tất cả nằm trong 1 khung viền duy nhất (xem
   priceBuSplitRowBySchedules trong app-bang-gia.js). */
.price-bu-group {
  background: #fdfefe;
}
.price-bu-group .price-bu-row:last-child {
  border-bottom: none;
}
/* Dòng "nối tiếp" (2, 3...) — chỉ hiện ô Lịch trình, ẩn hết các ô còn lại (Tên bảng
   giá/Từ ngày/Đến ngày/Thứ áp dụng/Sửa/Xóa) — để trống chỗ cho thẳng cột với dòng
   đầu, không lặp lại/thừa nội dung. */
.price-bu-row-cont > div:nth-child(1),
.price-bu-row-cont > div:nth-child(2),
.price-bu-row-cont > div:nth-child(3),
.price-bu-row-cont > div:nth-child(5),
.price-bu-row-cont > div:nth-child(6),
.price-bu-row-cont > div:nth-child(7) {
  visibility: hidden;
}

/* để autocomplete (.ac-box) bám theo input trong từng ô */
.price-bu-row > div{ position: relative; }

/* ✅ MỚI: dropdown chọn NHIỀU lịch trình ở Bảng giá CSKD — cùng kiểu với "Chọn CSKD"
   (checkbox + nút Đồng ý), thay cho kiểu ô tự hoàn thành cũ. */
.price-sched-ac{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  margin-top: 2px;
  /* ✅ MỚI (theo yêu cầu anh): đủ rộng để đọc trọn tên dài — trước đây ô hẹp + chữ
     "nowrap" khiến 2 lịch trình khác tên (chỉ khác đoạn cuối, vd "...1 ngày" và
     "...2 ngày") bị cắt trông giống hệt nhau, tưởng nhầm là bị trùng tên. */
  min-width: 260px;
}
.price-sched-ac-list{
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}
.price-sched-ac-item{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 2.5px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  /* ✅ SỬA: cho chữ dài tự xuống dòng thay vì "nowrap" + cuộn ngang như trước — chữ
     nowrap là nguyên nhân chính gây nhầm 2 tên khác nhau trông như trùng tên. */
  white-space: normal;
}
.price-sched-ac-item span{
  flex: 1 1 auto;
}
.price-sched-ac-item:hover{
  background: #f8fafc;
}
.price-sched-ac-item input[type="checkbox"]{
  width: 14px;
  height: 14px;
  transform: scale(0.6);
  transform-origin: center;
  accent-color: #1a73e8;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

/* ✅ MỚI: dropdown "Chọn CSKD" ở Danh mục Lý do điều chỉnh — ô textarea đứng trong cột
   hẹp nên KHÔNG bó chiều rộng dropdown theo đúng chiều rộng ô nữa (right:0 mặc định của
   .price-sched-ac) — để chữ CSKD không bị xuống dòng, checkbox thẳng cột đẹp.
   ⚠️ SỬA (16/07): "width:max-content" trước đây làm chiều rộng không ổn định (list dùng
   space-between co giãn theo chiều rộng cha, mà cha lại tự co theo con -> vòng lặp không
   hội tụ), sinh ra thanh cuộn ngang + checkbox lệch. Đổi sang CHIỀU RỘNG CỐ ĐỊNH đơn giản. */
.adj-reason-cskd-ac{
  right: auto !important;
  width: 220px;
}
.adj-reason-cskd-ac .price-sched-ac-list{
  overflow-x: hidden;
}
.price-sched-ac-footer{
  padding: 8px 10px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}
.price-sched-ac-ok{
  padding: 6px 18px;
}

/* hover để người dùng nhìn rõ đang ở bảng giá nào */
.price-bu-row:not(.header):hover{
  background: #fff9e3;
}

.price-bu-row:last-child {
  border-bottom: none;
}

.price-bu-row.header {
  background: var(--blue-light);
  font-weight: bold;
  border: none;
}

.price-bu-row.header > div {
  text-align: center;
  white-space: nowrap;
}

.price-bu-row.header > div:first-child {
  text-align: left;
  padding-left: 6px;
}

/* Hiệu ứng chọn dòng */
.price-bu-row.selected {
  background: #fff4c7;
  box-shadow: 0 0 0 1px #f1c96b;
}

.price-bu-row input[type="text"],
.price-bu-row input[type="date"],
.price-bu-row select {
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 12px;
}

/* Cụm chọn thứ */
.price-bu-weekdays {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
}

.price-day-btn {
  padding: 2px 4px;
  font-size: 10px;
  min-width: 0;
  flex: 1 1 0;
}

/* ===== ÁP DỤNG CSKD ===== */
.price-bu-cskd-card,
.price-bu-customer-card {
  margin-bottom: 14px;
}

.price-bu-cskd-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  font-size: 12px;
}

.price-bu-cskd-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 6px;
  align-items: center;
  padding: 4px 3px;
  border-bottom: 1px solid #e0e8f5;
}
.price-bu-cskd-row input.js-num {
  text-align: right;
}

.price-bu-cskd-row.header {
  background: var(--blue-light);
  font-weight: bold;
}

.price-bu-cskd-row:last-child {
  border-bottom: none;
}

.price-bu-cskd-row input {
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 12px;
}

/* Ẩn nếu HTML còn cột thừa */
#page-price-bu .price-bu-cskd-row > div:nth-child(2).extra {
  display: none;
}

/* ===== ÁP DỤNG KHÁCH HÀNG ===== */
.price-bu-customer-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  font-size: 12px;
}

.price-bu-customer-row {
  display: grid;
  grid-template-columns: 2fr 80px 70px;
  column-gap: 6px;
  align-items: center;
  padding: 4px 3px;
  border-bottom: 1px solid #e0e8f5;
}

.price-bu-customer-row.header {
  background: var(--blue-light);
  font-weight: bold;
}

.price-bu-customer-row:last-child {
  border-bottom: none;
}

.price-bu-customer-row input {
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 12px;
}

.price-bu-cust-col-select {
  text-align: center;
}

.price-bu-cust-col-actions {
  display: flex;
  justify-content: center;
}
/* Ghi chú / thông báo lỗi ở tab Bảng giá CSKD */
.price-bu-messages {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #ffb3b3;
  background: #fff5f5;
  font-size: 12px;
  color: #b71c1c;
  border-radius: 4px;
}

.price-bu-messages ul {
  margin: 4px 0 0 18px;
  padding: 0;
}

.price-bu-messages li {
  margin-bottom: 2px;
}

/* Một chút chỉnh khoảng cách chung trong page Bảng giá */
#page-price-bu .card h2 {
  margin-bottom: 6px;
}

#page-price-bu .card-header {
  margin-bottom: 6px;
}

/* Đảm bảo khối bên phải dãn đều các card */
#page-price-bu .price-bu-right .price-bu-cskd-card,
#page-price-bu .price-bu-right .price-bu-customer-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
  background: #fff;
}

/* ===========================
   BẢNG GIÁ HH.DỊCH VỤ
   =========================== */
/* Thanh chuyển Giá bán / Giá mua */
.hh-price-mode-toggle {
  margin-bottom: 8px;
}

/* Nút Giá bán / Giá mua – kiểu tab */
.hh-price-mode-btn {
  margin-right: 4px;
  min-width: 90px;
  padding: 6px 16px;
  border-radius: 20px;
  border: 1px solid #2f80ed;
  background: #fff !important;    /* trắng, viền xanh */
  color: #2f80ed !important;      /* chữ xanh */
  font-weight: 500;
  cursor: pointer;
}

/* Nút đang chọn */
.hh-price-mode-btn.active {
  background: #2f80ed !important; /* nền xanh */
  color: #fff !important;         /* chữ trắng */
}
/* Thanh chuyển Giá bán / Giá mua */
.hh-price-mode-toggle {
  margin-bottom: 8px;
}

/* Nút Giá bán / Giá mua – kiểu tab */
/* ✅ ĐÃ XÓA (dọn code chết ngày 12/07/2026): CSS .hh-price-mode-btn — nút "Giá bán/
   Giá mua" đã bị xóa khỏi HTML từ trước, CSS này giờ không còn phần tử nào để áp dụng. */

/* ✅ MỚI (theo yêu cầu anh): kéo trang Bảng giá HH sát ra 2 mép trái/phải, y hệt Bảng
   giá CSKD, để lấy thêm diện tích hiển thị. Không đụng padding chung .content (dùng
   cho mọi trang khác) — bù lại bằng margin âm rồi chừa lại ~8px (2 ly). */
/* ✅ MỚI (theo yêu cầu anh): thu hẹp khoảng đệm giữa khung bảng giá (trong cùng) và
   khung viền ngoài (card) xuống còn ~2 ly, riêng cho trang Bảng giá HH — không đụng
   .card dùng chung cho mọi trang khác. */
#page-price-hh .card {
  padding: 8px;
}

#page-price-hh {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Bố cục 2 cột riêng cho page Bảng giá HH — ✅ ĐÃ SỬA: dùng đúng tỷ lệ 66%/33% giống
   hệt Bảng giá CSKD (trước đây 62%/38% + margin-left âm -7mm gây lệch bố cục khi đổi
   cấu trúc cột). */
#page-price-hh > .row {
  display: flex;
  gap: 8px; /* ✅ khoảng cách giữa khung trái/phải còn ~2 ly, giống CSKD (trước là 16px) */
}

/* ✅ MỚI (theo yêu cầu anh): mở rộng khung trái thêm ~4cm để đủ chỗ cho cột "CSKD"
   mới thêm — dịch tỷ lệ từ 66/33 sang 76/23. */
.price-hh-left {
  flex: 0 0 76%;
  max-width: 76%;
}

.price-hh-right {
  flex: 0 0 23%;
  max-width: 23%;
}

/* BẢNG GIÁ HH bên trái */
.hh-price-table-left {
  border: 1px solid #dfe6ff;
  border-radius: 4px;
}

/* Mỗi dòng bảng giá HH */
.hh-price-table-left .hh-price-row {
  display: grid;

  /* ✅ SỬA (13/07): trước đây toàn bộ 9 cột đều đặt theo "fr" (tỉ lệ co giãn), nhưng
     bên trong các cột lại có ô bị ép width cố định bằng px (input ngày 95px, ô Lịch
     trình 120px...) không khớp với tỉ lệ fr đó -> tiêu đề và dữ liệu bị lệch cột, cột
     "Thứ áp dụng" chồng lên nút Sửa, phần dư dồn thành khoảng trống ở mép phải.
     Cách sửa: cột nào có kích thước cố định theo đúng nội dung (Loại, Từ/Đến ngày,
     Thứ áp dụng, Sửa, Xóa) thì đặt PX CỐ ĐỊNH khớp đúng nội dung; chỉ 3 cột co giãn
     được (Tên bảng giá, CSKD, Lịch trình) mới dùng "fr" để tự hút hết phần thừa —
     nhờ vậy không còn dư khoảng trống bên phải, và Sửa/Xóa luôn nằm sát mép phải.
     (Nếu sau này đổi nội dung nút/ô nào, nhớ đổi khớp cả px cột ở đây lẫn width của
     ô đó bên dưới — 2 chỗ phải luôn khớp nhau.)

     ✅ SỬA THÊM (13/07 lần 2): "Thứ áp dụng" 190px vẫn dư ra so với 7 nút T2..CN thật
     sự cần (~155px) -> phần dư đó nằm ngay trong cột này (vì nút được dồn sang phải
     bằng justify-content:flex-end), lộ ra thành khoảng trống ngay TRƯỚC cụm nút, tức
     ngay sau ô "Lịch trình" — nhìn giống như khoảng trống giữa 2 ô đó. Thu hẹp cột
     này sát đúng 155px.
     Đồng thời đổi "Tên bảng giá" từ fr sang PX CỐ ĐỊNH (160px) — vì nếu vẫn để fr, nó
     cũng sẽ tự động "hút" bớt phần thừa mới giải phóng ra (do CSS grid chia đều phần
     thừa cho MỌI cột fr, không riêng gì CSKD/Lịch trình) -> sai với yêu cầu "chỉ giãn
     đều cho CSKD và Lịch trình". Cố định "Tên bảng giá" thì 100% phần thừa chỉ còn lại
     đúng 2 cột CSKD (0.9fr) và Lịch trình (0.9fr) — cùng tỉ lệ nên tự chia đều nhau.
  */
  grid-template-columns:
    116px    /* 1. Tên bảng giá — ✅ SỬA (21/07, theo yêu cầu anh): mở rộng thêm đúng
                 phần vừa giải phóng ra từ việc thu hẹp 2 cột Sửa/Xóa bên dưới (56px ->
                 40px mỗi cột, dư ra 16px x 2 = 32px, cộng vào đây: 84px -> 116px). */
    76px     /* 2. Loại (dropdown Bán/Mua) */
    100px    /* 3. Từ ngày — thu hẹp lại (12/07: 112px dư ra khoảng trống giữa số ngày
                 và icon lịch, 100px là vừa đủ chữ "dd/mm/yyyy" + icon) */
    100px    /* 4. Đến ngày — như trên */
    0.9fr    /* 5. CSKD — co giãn, BẰNG với Lịch trình (chia đều phần dư ra) */
    0.9fr    /* 6. Lịch trình — co giãn, BẰNG với CSKD (chia đều phần dư ra) */
    155px    /* 7. Thứ áp dụng — thu hẹp sát đúng 7 nút T2..CN (trước 190px dư quá nhiều) */
    40px     /* 8. Sửa — ✅ SỬA (21/07): thu hẹp sát với chữ (56px -> 40px) */
    40px;    /* 9. Xóa — như trên */

  gap: 4px;
  padding: 4px 6px;
  align-items: center;
  border-bottom: 1px solid #eef2ff;
  font-size: 14px; /* cỡ chữ bằng bên CSKD */
}

/* Header của bảng giá HH */
.hh-price-table-left .hh-price-row.header {
  background: #eef3ff;
  font-weight: 600;
}

/* ✅ ĐÃ XÓA (dọn code hỏng ngày 12/07/2026): 1 loạt padding-left hack tùy tiện (25mm/
   10mm/20mm/100mm!) để "chỉnh tay" vị trí từng tiêu đề — không khớp với lưới cột thật
   (grid-template-columns), gây vỡ layout khi đổi cấu trúc cột (thêm cột "Sửa"). Giờ để
   tiêu đề tự căn đúng theo lưới, y hệt cách Bảng giá CSKD đang làm (không cần hack).
   Chỉ giữ lại "không cho tiêu đề xuống dòng".
   */
.hh-price-table-left .hh-price-row.header div {
  white-space: nowrap;
  text-align: center; /* ✅ MỚI (13/07): căn giữa từng ô tiêu đề theo yêu cầu anh */
}

/* ✅ ĐÃ XÓA (13/07): khối "Giữ nguyên các dòng dữ liệu" lặp lại y hệt định nghĩa
   .hh-price-table-left .hh-price-row ở trên, chỉ khác mỗi grid-template-columns —
   vì cùng 1 selector nên khối này load SAU sẽ đè mất giá trị cột vừa sửa ở trên,
   gây ra đúng lỗi lệch cột trong ảnh anh gửi. Không cần khối riêng cho "dòng dữ liệu"
   vì dòng dữ liệu và dòng tiêu đề đã dùng CHUNG 1 class .hh-price-row (chỉ dòng tiêu
   đề có thêm class phụ .header) nên chỉ cần đúng 1 định nghĩa lưới duy nhất ở trên. */

/* ✅ FIX: thiếu dòng này khiến dropdown chọn nhiều Lịch trình (.price-sched-ac) bị định
   vị sai chỗ (không bám theo đúng ô Lịch trình) — giống hệt .price-bu-row > div bên
   Bảng giá CSKD. Đây là nguyên nhân gây hiện tượng "không thấy danh mục Lịch trình". */
.hh-price-table-left .hh-price-row > div {
  position: relative;
  min-width: 0; /* ✅ FIX: cho phép ô co lại đúng theo lưới — thiếu dòng này, các ô có
    độ rộng cố định (VD ô ngày width:95px) không chịu co lại, đẩy cả dòng tràn ra
    ngoài khung, khiến nút "Xóa" bị lòi ra khỏi viền card. Không dùng overflow:hidden
    trên cả bảng vì sẽ cắt mất dropdown chọn CSKD/Lịch trình khi mở ở dòng cuối bảng. */
}

/* Input ngày — trước đây width cố định 95px không khớp cột 112px mới -> lệch layout.
   Giờ cho input tự lấp đầy đúng bằng cột (đã có box-sizing:border-box ở rule chung
   bên dưới để padding/border không làm tràn ra ngoài cột).
   ✅ SỬA (13/07): trình duyệt mặc định đẩy icon lịch ra SÁT MÉP PHẢI input bằng
   margin-inline-start:auto, nên khi cột rộng hơn nội dung 1 chút là lộ khoảng trống
   giữa số ngày và icon. Giảm padding + kéo icon lại gần số ngày hơn để hết khoảng trống. */
.hh-price-row input[type="date"] {
  width: 100%;
  padding: 2px 3px;
}
.hh-price-row input[type="date"]::-webkit-calendar-picker-indicator {
  margin-left: 3px;
  padding: 0 1px;
}

/* ✅ MỚI: khung gộp khi 1 "bảng giá HH" có từ 2 Lịch trình trở lên — giống hệt cơ chế
   bên Bảng giá CSKD (xem .price-bu-group/.price-bu-row-cont). */
.hh-price-group {
  background: #fdfefe;
}
.hh-price-group .hh-price-row:last-child {
  border-bottom: none;
}
/* ✅ MỚI (13/07): các dòng "nối tiếp" (chỉ còn hiện đúng 1 ô Lịch trình) trước đây vẫn
   dùng chung padding 4px 6px như dòng đầy đủ (có ngày tháng, nút Sửa/Xóa...) -> nhìn
   cách xa nhau không cần thiết vì mỗi dòng giờ chỉ có 1 ô input nhỏ. Thu hẹp lại gần
   sát nhau, chỉ còn đúng khoảng 1 dòng chữ giữa các ô Lịch trình. */
.hh-price-group .hh-price-row-cont {
  padding-top: 1px;
  padding-bottom: 1px;
}
/* Dòng "nối tiếp" (2, 3...) — ẩn các cột dùng chung cho cả nhóm/dòng gốc.
   ✅ QUAY LẠI (13/07 lần 4): thử cho CSKD tách dòng theo tổ hợp với Lịch trình làm số
   dòng nhân lên quá nhiều (VD 3 CSKD × 4 Lịch trình = 12 dòng) — cồng kềnh không cần
   thiết. Quay lại: CSKD gộp chung 1 ô hiển thị ở dòng gốc (không tách dòng nữa, xem
   ensureHhCskdMultiSelect() trong app-bang-gia.js), CHỈ Lịch trình tách dòng — nên
   dòng nối tiếp lại ẩn cột CSKD (5) như trước, chỉ hiện đúng 1 ô Lịch trình (6). */
.hh-price-row-cont > div:nth-child(1),
.hh-price-row-cont > div:nth-child(2),
.hh-price-row-cont > div:nth-child(3),
.hh-price-row-cont > div:nth-child(4),
.hh-price-row-cont > div:nth-child(5),
.hh-price-row-cont > div:nth-child(7),
.hh-price-row-cont > div:nth-child(8),
.hh-price-row-cont > div:nth-child(9) {
  visibility: hidden;
}

/* Ô "Chọn lịch trình" – CHỈ ở tab BẢNG GIÁ HH, bắt trực tiếp theo id trang + class input.
   Cột "Lịch trình" giờ co giãn theo fr (0.95fr) chứ không cố định nữa, nên ô input cũng
   phải lấp đầy 100% cột thay vì ép cứng 120px như trước (ép cứng gây lệch với header). */
#page-price-hh input.price-schedule-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* ✅ MỚI (13/07): quy tắc CHUNG cho mọi ô trong dòng Bảng giá HH — mỗi input/select/nút
   phải lấp ĐẦY ĐÚNG BẰNG cột lưới chứa nó (width:100%), không để kích thước riêng của
   từng ô tự quyết định (đó chính là nguyên nhân gây lệch cột/chồng cột trong ảnh anh gửi:
   input ngày 95px và ô Lịch trình 120px không khớp với cột do grid-template-columns quy
   định). box-sizing:border-box để padding/border của input không làm tràn ra ngoài cột.
   Không áp dụng cho .hh-weekdays (cụm 7 nút T2..CN tự canh bằng flex bên trong cột riêng). */
.hh-price-table-left .hh-price-row > div > input,
.hh-price-table-left .hh-price-row > div > select {
  width: 100%;
  box-sizing: border-box;
}

/* ✅ SỬA (21/07, theo yêu cầu anh): nút "Sửa"/"Xóa" thu ngắn sát với chữ (width: auto,
   padding gọn) và CĂN GIỮA trong cột — thay vì lấp đầy 100% cột như trước. Cột chứa nút
   (div bao ngoài) canh giữa theo chiều ngang bằng text-align:center. */
.hh-price-table-left .hh-price-row > div:nth-child(8),
.hh-price-table-left .hh-price-row > div:nth-child(9) {
  text-align: center;
}
.hh-price-table-left .hh-price-row > div > button.hh-price-row-edit-btn,
.hh-price-table-left .hh-price-row > div > button.btn-danger {
  width: auto;
  min-width: 0;
  padding: 0 10px;
  height: 24px;
  box-sizing: border-box;
}


.hh-weekdays {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
  justify-content: flex-end; /* ✅ dồn cụm T2..CN sang bên phải trong cột "Thứ áp dụng" */
}

.hh-weekdays .hh-day-btn {
  padding: 2px 4px;
  font-size: 10px;
  min-width: 0;
  opacity: 0.35; /* JS sẽ đổi về 1 khi chọn */
  /* ✅ MỚI (13/07): chiều cao BẰNG với nút Sửa/Xóa (xem height:24px ở rule
     .hh-price-row-edit-btn / .btn-danger bên dưới) — trước đây padding dọc nhỏ hơn
     (2px so với 4px của nút Sửa/Xóa) làm cụm nút Thứ trông thấp/mảnh hơn hẳn. */
  height: 24px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ô tìm kiếm bảng giá HH */
.price-hh-search-row input[type="text"] {
  width: 100%;
}

/* CARD bao cả 2 mảng HH.Dịch vụ & Khách hàng (khung chung) */
#page-price-hh .hh-right-main-card {
  border: 2px solid #b9c7ff;   /* viền đậm hơn + dày hơn */
  border-radius: 4px;
  background: #fff;
}

/* ====== KHUNG 1: HH.Dịch vụ ====== */
#page-price-hh .hh-price-items-table {
  border: 1px solid #b9c7ff;   /* cùng màu với khung chung */
  border-radius: 4px;
  margin-bottom: 8px;
  background: #ffffff;
}
/* từng dòng trong khung HH.Dịch vụ */
#page-price-hh .hh-price-items-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4px;
  padding: 4px 6px;
  align-items: center;
  border-bottom: 1px solid #eef2ff;
  font-size: 14px;              /* cỡ chữ bằng CSKD */
}

/* ✅ FIX: cho ô "Giá" co lại vừa đúng khung, không tràn ra ngoài — nhất là từ khi
   khung bên phải bị thu hẹp còn 23% để nhường chỗ cho khung trái (thêm cột CSKD). */
#page-price-hh .hh-price-items-row > div {
  min-width: 0;
}
#page-price-hh .hh-price-items-row input {
  width: 100%;
  box-sizing: border-box;
}
/* ✅ MỚI (13/07): căn phải riêng ô "Giá" (ô tên HH.Dịch vụ vẫn căn trái như cũ) */
#page-price-hh .hh-price-item-price-input {
  text-align: right;
}

#page-price-hh .hh-price-items-row.header {
  background: #eef3ff;
  font-weight: 600;
}

#page-price-hh .hh-price-items-row:last-child {
  border-bottom: none;
}

/* ===== KHUNG 2: Khách hàng ===== */

#page-price-hh .hh-price-customer-table {
  border: 1px solid #b9c7ff;   /* cùng màu */
  border-radius: 4px;
  background: #ffffff;
}
/* từng dòng trong khung Khách hàng */
#page-price-hh .hh-price-customer-row {
  display: grid;
  grid-template-columns: 2fr 0.6fr;
  gap: 4px;
  padding: 4px 6px;
  align-items: center;
  border-bottom: 1px solid #eef2ff;
  font-size: 14px;
}
#page-price-hh .hh-price-customer-row > div {
  min-width: 0;
}
#page-price-hh .hh-price-customer-row input {
  width: 100%;
  box-sizing: border-box;
}

#page-price-hh .hh-price-customer-row.header {
  background: #eef3ff;
  font-weight: 600;
}

#page-price-hh .hh-price-customer-row:last-child {
  border-bottom: none;
}
/* ===== Danh mục: Lý do điều chỉnh ===== */
#page-adjust-reasons .adjust-reason-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}

#page-adjust-reasons .adjust-reason-table{
  width:100%;
  font-size:13px;
}

#page-adjust-reasons .adjust-reason-row{
  display:grid;
  grid-template-columns: 1fr 180px 180px 220px 90px;
  gap:10px;
  align-items:center;
  margin-bottom:10px;
}

#page-adjust-reasons .adjust-reason-row.header{
  font-weight:600;
  color:#222;
  margin-bottom:6px;
  font-size:13px;
}

#page-adjust-reasons input{
  width:100%;
  height:34px;
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  outline:none;
  font-size:13px;
}

#page-adjust-reasons textarea.adj-reason-cskd{
  width:100%;
  min-height:34px;
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  outline:none;
  font-size:13px;
  font-family:inherit;
  background:#fff;
  line-height:1.4;
}

#page-adjust-reasons textarea.adj-reason-cskd:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}

#page-adjust-reasons input:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}

/* ✅ Nút "Xóa" cao bằng đúng ô nhập (34px) */
#page-adjust-reasons .adj-reason-del-btn{
  height:34px;
  padding:0 14px;
  font-size:13px;
  box-sizing:border-box;
}

#page-adjust-reasons .adjust-reason-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
}
/* ✅ Nút "Lưu" và "Thêm" cao bằng đúng nút "Xóa" (34px) */
#page-adjust-reasons .adjust-reason-footer .btn,
#page-adjust-reasons .adjust-reason-toolbar .btn{
  height:34px;
  padding:0 16px;
  font-size:13px;
  box-sizing:border-box;
}
/* ===========================
   CÀI ĐẶT CSKD  (✅ LÀM ĐẸP LẠI theo yêu cầu anh)
   =========================== */
.cskd-setting-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

.cskd-setting-left,
.cskd-setting-right{
  border:1px solid #e1e8f2;
  border-radius:10px;
  padding:16px;
  background:#fff;
  min-height: 520px;
  box-shadow: 0 1px 3px rgba(20,40,90,.06);
}

.cskd-setting-search-row input{
  width:100%;
  padding:8px 12px 8px 34px;
  border:1px solid #dbe3ef;
  border-radius:8px;
  font-size:12.5px;
  margin-bottom:14px;
  background:#f8fafd url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238a97ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 12px center;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.cskd-setting-search-row input:focus{
  outline:none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,128,237,.14);
  background-color:#fff;
}

.cskd-setting-table{
  border-top:1px solid #eef2f8;
  padding-top:2px;
}

.cskd-setting-row{
  display:grid;
  grid-template-columns: 1.1fr 1fr 1fr 68px;
  gap:10px;
  align-items:center;
  padding:7px 4px;
  border-bottom:1px solid #f0f3f9;
  border-radius:6px;
  transition: background-color .12s;
}
.cskd-setting-data-row:hover{
  background:#f7faff;
}

.cskd-setting-row.header{
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#5b6b85;
  background:#f3f6fb;
  border-bottom:1px solid #e6ecf6;
  border-radius:6px;
  padding:9px 8px;
  margin-bottom:4px;
}

.cskd-setting-row input{
  width:100%;
  height:30px;
  padding:4px 8px;
  border:1px solid #dbe3ef;
  border-radius:6px;
  font-size:12.5px;
  background:#fff;
  transition: border-color .15s, box-shadow .15s;
}
.cskd-setting-row input:focus{
  outline:none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,128,237,.14);
}

.cskd-setting-data-row.selected{
  background:#fff8e1;
  box-shadow:0 0 0 1px #f1c96b;
  border-radius:6px;
  padding:7px 4px;
}

.cskd-setting-right-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid #eef2f8;
}
.cskd-setting-right-header > div{
  font-size:14px;
  font-weight:700;
  color:#233047;
}

.cskd-hh-table{
  border-top:1px solid #eef2f8;
  padding-top:2px;
}

.cskd-hh-row{
  display:grid;
  grid-template-columns: 1.6fr 110px 68px;
  gap:10px;
  align-items:center;
  padding:7px 4px;
  border-bottom:1px solid #f0f3f9;
  border-radius:6px;
  transition: background-color .12s;
}
.cskd-hh-data-row:hover{
  background:#f7faff;
}

.cskd-hh-row.header{
  font-weight:700;
  font-size:11.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#5b6b85;
  background:#f3f6fb;
  border-bottom:1px solid #e6ecf6;
  border-radius:6px;
  padding:9px 8px;
  margin-bottom:4px;
}

.cskd-hh-row input{
  width:100%;
  height:30px;
  padding:4px 8px;
  border:1px solid #dbe3ef;
  border-radius:6px;
  font-size:12.5px;
  background:#fff;
  transition: border-color .15s, box-shadow .15s;
}
.cskd-hh-row input:focus{
  outline:none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(47,128,237,.14);
}

.cskd-setting-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}

/* Nút "Xóa" từng dòng — kiểu viền nhạt (ghost) thay vì đỏ đặc, đỡ nặng mắt khi có
   nhiều dòng, vẫn rõ ràng là hành động xóa. */
.cskd-setting-del-btn,
.cskd-hh-del-btn{
  background:#fff !important;
  color:#e2483b !important;
  border:1px solid #f3c6c1 !important;
  border-radius:6px !important;
  font-weight:600;
  transition: background-color .12s, border-color .12s;
}
.cskd-setting-del-btn:hover,
.cskd-hh-del-btn:hover{
  background:#fdeceb !important;
  border-color:#e2483b !important;
}

/* ===== Autocomplete box (không dấu) ===== */
.ac-box{
  position:absolute;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  border-radius:4px;
  z-index:999;
  margin-top:2px;
  max-height:220px;
  overflow:auto;
  width:100%;
}

.ac-item{
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.ac-item:hover{
  background: var(--blue-light);
}
/* Mục lịch trình ĐÃ CHỌN trong dropdown multi-select ở Bảng giá CSKD */
.ac-item-selected{
  background: #eaf3ff;
  font-weight: 600;
  color: var(--blue-dark, #1a5fb4);
}
.ac-item-selected:hover{
  background: var(--blue-light);
}

/* để ac-box bám theo input */
#page-cskd-settings .cskd-setting-row > div,
#page-cskd-settings .cskd-hh-row > div{
  position:relative;
}
.cskd-setting-left-header{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}
/* ===== CÀI ĐẶT CSKD: đẩy nút LƯU xuống đáy khung phải ===== */
#page-cskd-settings .cskd-setting-right{
  display: flex;
  flex-direction: column;
  min-height: 620px;      /* anh có thể chỉnh 550/650 tùy màn hình */
}

#page-cskd-settings .cskd-hh-table{
  flex: 1;                /* phần bảng HH chiếm hết phần giữa */
}

#page-cskd-settings .cskd-setting-footer{
  margin-top: auto;       /* đẩy footer xuống đáy */
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
}
/* ===== Danh mục: Cài đặt mặc định ===== */
#page-default-settings .default-setting-toolbar{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px;
}

#page-default-settings .default-setting-table{
  width:100%;
  font-size:13px;
}

#page-default-settings .default-setting-row{
  display: grid;
  grid-template-columns: 100px 1fr 120px 140px 70px 90px 80px 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

#page-default-settings .default-setting-row.header{
  font-weight:600;
  color:#222;
  margin-bottom:6px;
  font-size:13px;
}

#page-default-settings .default-setting-row input[type="text"]{
  width:100%;
  height:34px;
  padding:6px 10px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  outline:none;
  font-size:13px;
}

#page-default-settings .default-setting-row input[type="text"]:focus{
  border-color:#3b82f6;
  box-shadow:0 0 0 2px rgba(59,130,246,.15);
}

#page-default-settings .default-setting-row input[type="checkbox"]{
  width:16px;
  height:16px;
  accent-color:#1a73e8;
  cursor:pointer;
}

#page-default-settings .default-setting-footer{
  display:flex;
  justify-content:flex-end;
  margin-top: 18px;
}
/* ===== Danh mục: Hình thức thanh toán ===== */
#page-payment-methods .pay-method-table{
  margin-top: 8px;
  font-size: 13px;
}

#page-payment-methods .pay-method-row{
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

#page-payment-methods .pay-method-row input{
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 13px;
  box-sizing: border-box;
}

#page-payment-methods .pay-method-footer{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
#page-payment-methods .pay-method-del-btn,
#page-payment-methods .pay-method-footer .btn,
#page-payment-methods .card-header .btn{
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  box-sizing: border-box;
}

/* ===== Danh mục: Tính chất / Nhóm / Nguồn (cùng 1 kết cấu) ===== */
#page-properties .property-table,
#page-groups .property-table,
#page-customer-sources .property-table{
  margin-top: 8px;
  font-size: 13px;
}

#page-properties .property-row,
#page-groups .property-row,
#page-customer-sources .property-row{
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

#page-properties .property-row input,
#page-groups .property-row input,
#page-customer-sources .property-row input{
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 13px;
  box-sizing: border-box;
}

#page-properties .property-footer,
#page-groups .property-footer,
#page-customer-sources .property-footer{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
#page-properties .property-del-btn,
#page-properties .property-footer .btn,
#page-properties .card-header .btn,
#page-groups .group-del-btn,
#page-groups .property-footer .btn,
#page-groups .card-header .btn,
#page-customer-sources .customer-source-del-btn,
#page-customer-sources .property-footer .btn,
#page-customer-sources .card-header .btn{
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  box-sizing: border-box;
}

/* ===== Danh mục: Loại tiền (5 cột) ===== */
#page-currency-types .currency-table{
  margin-top: 8px;
  font-size: 13px;
}

#page-currency-types .currency-row{
  display: grid;
  /* ✅ 5 cột: Tên | Đơn vị | Tỷ giá | ... | Xóa */
  grid-template-columns: 1.6fr 0.6fr 0.6fr 64px 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

#page-currency-types .currency-row.header{
  font-weight: 600;
  margin-bottom: 6px;
}

#page-currency-types .currency-row input{
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 13px;
  box-sizing: border-box;
}

/* ✅ FIX CHỐT: mọi ô trong grid tự căn giữa theo chiều dọc */
#page-currency-types .currency-row > div{
  align-self: center;
  min-width: 0;
}

/* ✅ Cột nút ... và Xóa: luôn đứng cùng hàng */
#page-currency-types .currency-row > div:nth-child(4),
#page-currency-types .currency-row > div:nth-child(5){
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

/* nút ... */
#page-currency-types .currency-rate-config-btn{
  width: 64px;
  height: 34px;
  padding: 0;
  font-size: 13px;
  box-sizing: border-box;
  white-space: nowrap;
}

/* nút Xóa */
#page-currency-types .currency-del-btn{
  width: 90px;
  height: 34px;
  padding: 0;
  font-size: 13px;
  box-sizing: border-box;
  white-space: nowrap;
}

#page-currency-types .currency-footer{
  display:flex;
  justify-content:flex-end;
  margin-top: 16px;
}
#page-currency-types .currency-footer .btn,
#page-currency-types .card-header .btn{
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  box-sizing: border-box;
}

/* ===================== CURRENCY RATE SETTINGS ===================== */

/* cụm input tỷ giá + nút ... (trong danh mục Loại tiền) */
.currency-rate-cell{
  display:flex;
  align-items:center;
  gap:8px;
}
.currency-rate-cell .currency-rate-input{
  flex:1;
  min-width:0;
}

/* ===== Modal layout ===== */
.rate-modal-header{
  display:flex;
  align-items:center;
  gap:12px;
}
.rate-modal-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
}

/* grid wrap scroll ngang nếu chật */
.rate-grid-wrap{
  overflow-x:auto;
  padding-bottom:6px;
}

/* ===== chỉnh độ rộng cột ở đây (4 cột) ===== */
:root{
  --rate-col-1: 160px; /* Từ ngày */
  --rate-col-2: 160px; /* Đến ngày */
  --rate-col-3: 180px; /* Tỷ giá */
  --rate-col-4: 90px;  /* Xóa */
  --rate-gap: 10px;
}

.rate-grid{
  display:grid;
  grid-template-columns: var(--rate-col-1) var(--rate-col-2) var(--rate-col-3) var(--rate-col-4);
  gap: var(--rate-gap);
  align-items:center;
  width:max-content;
  min-width:100%;
}

.rate-grid-header .rate-h{
  background:#f5f7fb;
  border-radius:14px;
  padding:14px 16px;
  font-weight:700;
  color:#333;
}

.rate-grid-row > div{ min-width:0; }
.rate-grid-row .form-control{ width:100%; box-sizing:border-box; }

.rate-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}
.rate-row-del{
  border-radius:10px;
  padding:6px 12px;
}

/* footer: nút phải dưới */
.rate-footer{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:14px;
}

/* ===== Danh mục: Ngân hàng ===== */
#page-banks .bank-table{
  margin-top: 8px;
  font-size: 13px;
}

#page-banks .bank-row{
  display: grid;
  grid-template-columns: 1fr 280px 220px 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

#page-banks .bank-row input{
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 13px;
  box-sizing: border-box;
}

#page-banks .bank-footer{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
#page-banks .bank-del-btn,
#page-banks .bank-footer .btn,
#page-banks .card-header .btn{
  height: 34px;
  padding: 0 16px;
  font-size: 13px;
  box-sizing: border-box;
}
/* ===== PAY MODAL: ĐẨY NÚT XÁC NHẬN SANG PHẢI ===== */
#booking-pay-modal .pay-footer{
  display: flex;
  justify-content: flex-end; /* đẩy nút sang phải */
  margin-top: 16px;
}
/* input Tỷ giá + nút ... trong từng dòng Loại tiền */
.currency-rate-cell{
  display:flex;
  align-items:center;
  gap:8px;
}
.currency-rate-cell .currency-rate-input{
  width:100%;
  min-width:0;
}
.currency-rate-cell .currency-rate-config-btn{
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
}
/* ===== PAY MODAL: ĐẨY NÚT XÁC NHẬN SANG PHẢI ===== */
#booking-pay-modal .pay-footer{
  display: flex;
  justify-content: flex-end; /* đẩy nút sang phải */
  margin-top: 16px;
}
/* input Tỷ giá + nút ... trong từng dòng Loại tiền */
.currency-rate-cell{
  display:flex;
  align-items:center;
  gap:8px;
}
.currency-rate-cell .currency-rate-input{
  width:100%;
  min-width:0;
}
.currency-rate-cell .currency-rate-config-btn{
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
}

/* ===== PAGE: CƠ SỞ KINH DOANH (SYNC SCROLL) ===== */
/* Kéo sát khung bao ra mép ngang dọc để tận dụng diện tích màn hình cho lưới Cơ sở kinh doanh */
#page-business.page{
  margin: -28px -32px -32px;
}
#page-business .card{
  padding: 4px 12px 12px;
  border-radius: 0;
}

#page-business .biz-filters{
  display:grid;
  grid-template-columns: auto 220px 220px 160px 160px 160px 160px;
  gap:6px;
  align-items:end;
  justify-content: space-between;
  margin-top:8px;
}
/* ✅ Tiêu đề "CƠ SỞ KINH DOANH" — ngang hàng với các ô lọc, căn theo đúng baseline
   của input (thay vì nằm riêng 1 hàng phía trên như trước) */
#page-business .biz-filter-title{
  margin-right: auto;
}
#page-business .biz-page-title{
  display: block;
  font-size: 15px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  height: 34px;
  line-height: 34px;
}
#page-business .biz-filter label{ display:block; margin-bottom:6px; font-weight:600; }
/* ✅ SỬA (23/07/2026, theo yêu cầu anh): hạ chiều cao các ô (Chọn CSKD/Chọn Lịch trình/Từ
   ngày/Đến ngày) và nút "LẬP BOOKING" xuống bằng đúng nút "BOOKING CHARTER" (trước đây
   34px, cao hơn hẳn nút "BOOKING CHARTER" vốn không set chiều cao riêng, chỉ ăn theo
   padding mặc định của .btn ~29px) — cả 2 nút giờ đều set CÙNG 1 con số 29px tường minh,
   không để trình duyệt tự tính nữa, đảm bảo khớp tuyệt đối. */
#page-business .biz-filter input{
  width:100%;
  height:29px;
  padding:4px 10px;
  border:1px solid #999;
  border-radius:2px;
  box-sizing:border-box;
}
#page-business .biz-filter-action #biz-build-btn,
#page-business .biz-filter-action #biz-build-charter-btn{
  height:29px;
  width:100%;
  box-sizing:border-box;
}

/* ===== BẢNG 1 KHUNG CUỘN DUY NHẤT — cột "CƠ SỞ" dính trái, dòng ngày dính trên ===== */
#page-business .biz-table-wrap{
  border:1px solid #cbd5e1;
  border-radius:6px;
  background:#fff;
  overflow:auto;
  max-height:640px;
  margin-top:12px;
  /* ✅ SỬA (19/07, phát hiện qua báo lỗi của anh): CHẶN "scroll chaining" — cuộn hết bảng
     bên trong tới đáy thì trình duyệt "leo" scroll ra khung ngoài (đang khoá overflow:
     hidden lúc trang này hiển thị), gây kẹt/không cuộn lại lên được, ẩn mất hàng nút LẬP
     BOOKING/BOOKING CHARTER phía trên. overscroll-behavior:contain chặn hẳn việc này. */
  overscroll-behavior: contain;
}

#page-business .biz-row{
  display:flex;
  align-items:stretch; /* cột dính trái LUÔN cao bằng đúng các ô ngày cùng dòng */
}

/* Cột dính bên trái (tên CSKD / tên Cơ sở) — dùng chung cho mọi loại dòng */
#page-business .biz-row-sticky{
  position:sticky;
  left:0;
  z-index:2;
  width:240px;
  min-width:240px;
  flex:0 0 240px;
  background:#fff;
  box-sizing:border-box;
  border-right:1px solid #e2e8f0;
  padding:4px 8px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#page-business .biz-row-cells{
  display:flex;
  align-items:stretch;
  gap:4px;
  padding:4px 6px;
}

/* Dòng tiêu đề ngày — dính trên cùng, và góc trên-trái dính CẢ trên lẫn trái */
#page-business .biz-row-header{
  position:sticky;
  top:0;
  z-index:5;
  background:#fff;
  border-bottom:1px solid #cbd5e1;
}
#page-business .biz-row-header .biz-row-sticky{
  z-index:6;
  font-weight:700;
  text-align:center;
  align-items:center;
  justify-content:center;
  border-right:1px solid #cbd5e1;
}
#page-business .biz-day-chip{
  border:1px solid #cbd5e1;
  border-radius:6px;
  padding:6px 8px;
  font-size:12px;
  font-weight:700;
  background:#f8fafc;
  text-align:center;
  width:180px;
  min-width:180px;
  box-sizing:border-box;
}

/* Thanh tiêu đề từng nhóm CSKD — 1 dải màu liền mạch từ cột dính trái sang tới hết bảng */
#page-business .biz-row-group .biz-row-sticky,
#page-business .biz-row-group .biz-row-cells{
  background:#dfe9d0;
}
#page-business .biz-row-group .biz-row-sticky{
  font-weight:700;
  color:#33421f;
  border-right:none;
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
/* Nút mũi tên thu gọn/mở rộng dòng Cơ sở của 1 CSKD */
#page-business .biz-group-toggle{
  width:22px;
  height:22px;
  min-width:22px;
  border-radius:50%;
  border:1px solid #33421f;
  background:#fff;
  color:#33421f;
  font-size:11px;
  line-height:1;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}
#page-business .biz-group-toggle:hover{
  background:#eef3e4;
}
#page-business .biz-row-group .biz-row-cells{
  padding:8px 10px;
}

/* Ô tổng hợp XN/Giữ/Trống theo từng ngày, nằm trong thanh tiêu đề nhóm CSKD — canh
   đúng theo chiều rộng cột ngày (180px) bên dưới để thẳng hàng. */
#page-business .biz-group-summary{
  width:180px;
  min-width:180px;
  box-sizing:border-box;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:#33421f;
  white-space:nowrap;
}
#page-business .biz-group-summary .biz-group-summary-empty{
  color:#dc2626;
}

#page-business .biz-row-empty .biz-row-cells{
  opacity:.7;
  font-size:12px;
  align-items:center;
}

#page-business .biz-facility-name{
  font-weight:600;
}
#page-business .biz-facility-sub{
  font-size:12px;
  color:#64748b;
  font-weight:400;
}

#page-business .biz-cell{
  width:180px;
  min-width:180px;
  height:54px;
  border:1px solid #cbd5e1;
  border-radius:10px;
  /* ✅ SỬA (theo yêu cầu anh): tăng padding-bottom (6px -> 9px) để hàng "XN/Giữ/Chờ" ở
     cuối ô không còn sát viền dưới — đồng thời tăng height thêm đúng phần chênh lệch
     (50px -> 54px) để các hàng phía trên không bị co lại/chật hơn. */
  padding:6px 10px 9px;
  background:#fff;
  text-align:center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  box-sizing:border-box;
  position: relative; /* để ghim mặt cười vào đúng bên trong ô */
  overflow: hidden; /* ✅ MỚI (23/07/2026): ô chỉ cao thêm 1 li nhưng có thêm hàng thông
    tin — phòng khi nội dung hơi chật thì bị CẮT GỌN bên trong ô, không tràn ra đè lên ô
    bên cạnh. */
}
/* Đêm ở-giữa kỳ lưu trú (không phải ngày Nhận) -> chỉ còn màu nền của ô, ẩn hết
   thông tin XN/Giữ/Chờ + mặt cười check-in + thông tin Lịch trình. Dùng "visibility"
   (không dùng "display") để Ô VẪN GIỮ NGUYÊN kích thước 46px như các ô khác,
   tránh làm lệch chiều cao các hàng trong lưới. */
#page-business .biz-cell.biz-cell-minimal .biz-cell-top,
#page-business .biz-cell.biz-cell-minimal .biz-schedule-info-row,
#page-business .biz-cell.biz-cell-minimal .biz-cell-status{
  visibility: hidden;
}
/* ✅ MỚI (16/07, theo yêu cầu anh): nhãn nhỏ "Từ [ngày Nhận]" — CHỈ có chữ (và chỉ hiện
   ra) đúng ở các ô "đêm ở-giữa" (biz-cell-minimal), để vẫn nhận biết được ô này thuộc
   booking bắt đầu từ ngày nào dù các thông tin khác đang bị ẩn theo thiết kế. Ô bình
   thường (không phải biz-cell-minimal) không có chữ nên không chiếm chỗ/không hiện gì. */
#page-business .biz-cell-fromdate{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  text-align: center;
  font-size: 10px;
  color: #7a6a2a;
  pointer-events: none;
}
/* Nhóm ô cùng Lịch trình + Từ ngày + Từ giờ với ô vừa bấm "Chuyển" — mờ nội dung (giá/
   trạng thái/mặt cười) để báo hiệu đây là các ô sẽ được xử lý trong đợt chuyển này.
   CỐ Ý chỉ mờ nội dung bên trong, KHÔNG mờ nút "M" — nút M của các ô này vẫn phải giữ
   nguyên bình thường để bấm chọn làm nguồn tiếp theo (dùng opacity trên từng phần tử
   con thay vì filter trên cả ô, vì filter trên cha sẽ mờ theo cả nút M bên trong). */
#page-business .biz-cell.biz-move-group{
  outline: 3px solid #374151;
  outline-offset: -3px;
}
#page-business .biz-cell.biz-move-group .biz-price,
#page-business .biz-cell.biz-move-group .biz-cell-status,
#page-business .biz-cell.biz-move-group .biz-schedule-info-row{
  opacity: 0.4;
}
/* ✅ Nút "M" LUÔN sáng, LUÔN bấm được ở mọi trạng thái trong phiên Chuyển (nhóm chờ/
   nguồn đang chọn/đã ghép xong) — dùng chính nút này để: bấm 1 lần = chọn làm nguồn (hoặc
   hủy nếu đang là nguồn / đã ghép xong), không còn khóa/làm mờ nút M ở bất kỳ đâu nữa. */
/* Ô NGUỒN đang được chọn, chờ chọn ô đích -> viền vàng liền nét + mờ nội dung (nút M
   của chính ô này cũng mờ theo, xem rule .biz-danhsach-btn phía trên) */
#page-business .biz-cell.biz-move-source{
  outline: 3px solid #f4b400;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px rgba(244,180,0,0.25);
}
#page-business .biz-cell.biz-move-source .biz-price,
#page-business .biz-cell.biz-move-source .biz-cell-status,
#page-business .biz-cell.biz-move-source .biz-schedule-info-row{
  opacity: 0.4;
}
/* Ô đang được rê chuột qua trong lúc chờ chọn đích, HỢP LỆ để thả vào -> viền vàng nhạt/đứt
   nét, báo trước viền vàng sẽ "nằm yên" ở đây nếu bấm chọn. Ô không hợp lệ (khác ngày/khác
   CSKD/đã có booking) sẽ KHÔNG được gắn class này (xử lý ở JS) nên không hiện viền gì cả. */
#page-business .biz-cell.biz-move-hover{
  outline: 2px dashed #f4b400;
  outline-offset: -2px;
  box-shadow: 0 0 0 2px rgba(244,180,0,0.15);
}
/* Ô ĐÍCH đã được chọn xong -> viền vàng liền nét "nằm yên" tại đây, giống hệt viền của ô
   nguồn lúc trước — đúng ý "viền vàng nằm yên ở đó" khi đã chọn xong đích. */
#page-business .biz-cell.biz-move-target{
  outline: 3px solid #f4b400;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px rgba(244,180,0,0.25);
}
/* Ô ĐÃ LƯU THÀNH CÔNG (backend đã ghi nhận) -> đổi viền vàng sang xanh lá để phân biệt
   rõ với các ô còn đang xử lý dở (vàng) trong cùng phiên Chuyển. */
#page-business .biz-cell.biz-move-committed{
  outline-color: #16a34a !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,0.25) !important;
}
/* Ô NGUỒN đã ghép xong với 1 đích (không còn chờ chọn nữa) -> mờ nội dung, nhưng nút M
   VẪN SÁNG RÕ để anh bấm hủy (quay lại chọn đích khác) nếu muốn. */
#page-business .biz-cell.biz-move-paired .biz-price,
#page-business .biz-cell.biz-move-paired .biz-cell-status,
#page-business .biz-cell.biz-move-paired .biz-schedule-info-row{
  opacity: 0.35;
}
#page-business .biz-cell-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
#page-business .biz-price{
  font-weight:400;
  color: #d6336c;
  font-size: 13px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}
/* ✅ MỚI (23/07/2026, theo yêu cầu anh — điểm 1,2,3): ô đang hiện TÊN KHÁCH (booking Xác
   nhận/Giữ) thay vì Giá — đổi màu chữ về màu chữ thường (không còn màu hồng của Giá) +
   đậm hơn 1 chút cho dễ đọc. */
#page-business .biz-price.biz-price-is-name{
  color: #1f2937;
  font-weight: 600;
}
/* Có NHIỀU HƠN 1 đoàn khách cùng chiếm ô -> chỉ hiện tên của booking lập đầu tiên, tô
   MÀU XANH để báo đây là đại diện (không phải toàn bộ) — cùng quy ước màu với dòng Lịch
   trình đại diện (.biz-schedule-info-multi) bên dưới. */
#page-business .biz-price.biz-price-name-multi{
  color: #1a73e8;
}
/* Viền xanh "đi theo con trỏ" — chỉ hiện ở ô CÓ THỂ chọn được ngay lúc này (xem JS) */
#page-business .biz-cell.biz-select-hover{
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  cursor: pointer;
}
/* Ô ĐÃ ĐƯỢC CHỌN — CHỈ viền xanh đánh dấu, không đổi màu nền của ô */
#page-business .biz-cell.biz-cell-selected{
  outline: 3px solid #2563eb;
  outline-offset: -3px;
  cursor: pointer;
}
/* ✅ SỬA (23/07/2026, theo yêu cầu anh — điểm 6): hàng XN/Giữ/Chờ dời XUỐNG HÀNG CUỐI
   CÙNG của ô (trước đây nằm chung hàng trên với Giá/nút M) — CĂN TRÁI (trước đây căn
   giữa). Dùng margin-top:auto để tự đẩy sát đáy ô dù ô có bao nhiêu hàng phía trên. */
#page-business .biz-cell-status{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  font-size: 11px;
  color: #334155;
  white-space: nowrap;
  flex-wrap: wrap;
  margin-top: auto;
}
#page-business .biz-cell-status span.biz-hidden{ display: none; }
#page-business .biz-cell-status u{ text-decoration: underline; }
/* Nhãn "XN"/"Giữ"/"Chờ" — gạch chân đậm màu xanh TRÙM HẾT cả cụm chữ (VD "XN: 10/1"),
   báo hiệu bấm vào được để xem danh sách booking đang chiếm ô này. */
#page-business .biz-cell-status u.biz-status-link{
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: #1a73e8;
}
#page-business .biz-cell-status span.biz-status-clickable{
  cursor: pointer;
}
/* Hàng thông tin Lịch trình — CĂN GIỮA (giữ nguyên vị trí/căn giữa sẵn có, chỉ đổi NỘI
   DUNG sang Mã lịch trình — xem bizPopulateCells()). */
#page-business .biz-schedule-info-row{
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Mã lịch trình (VD "LT1" hoặc "LT1; LT2" nếu nhiều lịch trình khác nhau cùng chiếm ô) —
   ✅ SỬA (23/07/2026): thêm white-space:nowrap để "overflow:hidden + text-overflow:
   ellipsis" thật sự có tác dụng CẮT KHUẤT khi chật ô (trước đây thiếu dòng này nên chữ
   tự xuống dòng thay vì bị cắt). Màu chữ thường mặc định, chuyển XANH khi có NHIỀU hơn
   1 Mã lịch trình khác nhau cùng lúc trong ô này để gây chú ý. */
#page-business .biz-schedule-info{
  display: block;
  font-size: 11px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
#page-business .biz-schedule-info.biz-schedule-info-multi{
  color: #1a73e8;
  font-weight: 700;
}
/* ✅ SỬA (23/07/2026, theo yêu cầu anh — điểm 4): khối chứa nút M + nút x (hủy) + mặt cười
   — đổi sang CỘT DỌC: hàng trên là M/x (giữ nguyên như cũ), hàng dưới là mặt cười (thu
   nhỏ bằng đúng nút M, xem .biz-face bên dưới) — thay vì mặt cười ghim tuyệt đối giữa ô
   như trước. */
/* ✅ SỬA (23/07/2026, theo yêu cầu anh — booking Xác nhận có mặt cười thì hàng Lịch trình
   bị đẩy xuống, khác với booking Giữ không có mặt cười): trước đây mặt cười nằm THEO
   DÒNG CHẢY BÌNH THƯỜNG bên dưới nút M trong ".biz-cell-actions" — cột này CAO HƠN hẳn so
   với lúc không có mặt cười (Giữ), mà ".biz-cell-top" đang là flex-row với các cột cao
   thấp khác nhau -> đẩy cả hàng dưới (Lịch trình) lệch xuống theo. Giờ ghim mặt cười
   TUYỆT ĐỐI (position:absolute) ngay dưới nút M — không còn tính vào chiều cao của
   ".biz-cell-actions" nữa -> hàng Lịch trình luôn ở ĐÚNG 1 VỊ TRÍ CỐ ĐỊNH, có/không có
   mặt cười đều như nhau. */
#page-business .biz-cell-actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  position: relative;
}
#page-business .biz-cell-actions-top{
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Nút "M" (Chuyển) — hình tròn nhỏ, góc trên bên phải của ô, màu xanh nổi bật */
#page-business .biz-danhsach-btn{
  width: 17.6px;
  height: 17.6px;
  min-width: 17.6px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 7px;
  font-weight: 700;
  padding: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: -4px 0 0 0; /* đẩy sát vào góc phải trên cùng của ô */
}
/* Nút "x" đỏ — chỉ hiện khi ô đang nằm trong 1 phiên Chuyển đang chạy, cạnh nút M —
   bấm để hủy riêng đúng Cơ sở (row) của ô này ra khỏi phiên Chuyển, không ảnh hưởng các
   Cơ sở khác đang xử lý cùng lúc. */
#page-business .biz-move-cancel-btn{
  width: 17.6px;
  height: 17.6px;
  min-width: 17.6px;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  padding: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: -4px -6px 0 0;
  cursor: pointer;
}
#page-business .biz-move-cancel-btn:hover{
  background: #b91c1c;
}
#page-business .biz-danhsach-btn:hover{
  background: var(--blue-dark);
}
/* ✅ SỬA (23/07/2026, theo yêu cầu anh — điểm 4): mặt cười check-in — THU NHỎ BẰNG ĐÚNG
   nút "M" (17.6px) + đặt NGAY BÊN DƯỚI nút M (nằm trong dòng chảy bình thường của
   .biz-cell-actions, KHÔNG còn ghim tuyệt đối giữa ô như trước). */
#page-business .biz-face{
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 17.6px;
  height: 17.6px;
  color: #3ecf8e; /* Mặc định (chưa check-in / đã check-out): mặt màu xanh */
  display: none; /* chỉ hiện khi có booking Xác nhận — bật lại bằng class .is-visible */
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 2px;
}
#page-business .biz-face svg{
  width: 100%;
  height: 100%;
}
#page-business .biz-face.is-visible{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#page-business .biz-face.is-checked-in{
  /* Đã check-in: mặt chuyển vàng tươi */
  color: #ffd60a;
}
/* ===== FIX AUTOCOMPLETE (AC BOX) trên tab CƠ SỞ KINH DOANH ===== */
#page-business .biz-filter{ position: relative; }

/* box gợi ý (cho cả Chọn CSKD và Chọn Lịch trình) */
#page-business .biz-filter .ac-box{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  max-height: 260px;
  overflow: auto;
  z-index: 9999;           /* ✅ quan trọng: để click được */
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* item gợi ý */
#page-business .biz-filter .ac-item{
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
}
#page-business .biz-filter .ac-item:hover{
  background: #f8fafc;
}

/* Danh sách checkbox chọn CSKD (nhiều lựa chọn) + nút Đồng ý phía dưới */
#page-business .biz-bu-ac-list{
  max-height: 220px;
  overflow: auto;
}
#page-business .biz-bu-ac-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
#page-business .biz-bu-ac-item:hover{
  background: #f8fafc;
}
#page-business .biz-bu-ac-item input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: #1a73e8;
  cursor: pointer;
}
#page-business .biz-bu-ac-footer{
  padding: 8px 10px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}
#page-business .biz-bu-ac-ok{
  padding: 6px 18px;
}
/* ===== FIX dropdown autocomplete trong tab CƠ SỞ KINH DOANH ===== */

/* để ac-box bám theo input */
#page-business .biz-filter{ position: relative; }

/* dropdown box */
#page-business .ac-box{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  max-height: 280px;
  overflow: auto;
}

/* item trong dropdown */
#page-business .ac-item{
  padding: 10px 12px;
  cursor: pointer;
}
#page-business .ac-item:hover{
  background: #f1f5f9;
}

/* quan trọng: tránh bị card cắt dropdown nếu card đang overflow hidden */
#page-business .card,
#page-business .card-body,
#page-business .biz-filters{
  overflow: visible !important;
}

/* =========================================================
/* =========================================================
   BOOKING — CSS (viết lại theo cấu trúc I → V)
   ========================================================= */


/* =========================================================
   KHUNG CHUNG
   ========================================================= */

#page-booking { padding: 6px 10px; margin: -16px -32px 0; }

.booking-header {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid #cfd6e4;
  background: #fff;
}

.booking-main-layout {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.booking-body {
  border: 1px solid #cfd6e4;
  border-top: 1px solid #cfd6e4;
  background: #fff;
  flex: 1;
  min-width: 0;
}

/* Trạng thái "đã lưu / khóa": không cho bấm/gõ vào bất cứ đâu trong form,
   nền tổng thể chuyển ghi nhạt — các ô input vẫn giữ nguyên màu nền/chữ riêng của nó */
.booking-body.booking-locked {
  background: #e9ecf1;
  pointer-events: none;
}

/* ✅ MỚI (21/07/2026, theo yêu cầu anh): nút "..." mở Bảng thanh toán chỉ để XEM,
   không sửa gì trong booking cả — nên vẫn phải bấm được ngay cả khi booking đang
   khóa (đã lưu, chưa bấm "SỬA"), giống nút "Danh sách khách"/"In" ở trên. */
.booking-body.booking-locked #booking-payment .bpt-grand-open-btn {
  pointer-events: auto !important;
}

/* Trạng thái khóa Bảng giá CSKD — khóa THEO TỪNG DÒNG (không phải cả trang): mặc định
   TẤT CẢ input/button trong trang đều bị khóa (không gõ/bấm được), CHỈ mở khóa cho đúng
   1 dòng bên trái đang có class "editing" (dòng vừa bấm "Sửa") VÀ panel "Áp dụng..." bên
   phải (vì nó luôn hiển thị đúng dữ liệu của dòng đang chọn). Click để XEM (chuyển qua
   dòng khác) vẫn luôn hoạt động vì bản thân dòng (div) không bị khóa, chỉ khóa các ô
   input/button con bên trong nó thôi. */
#price-bu-body input,
#price-bu-body select,
#price-bu-body textarea,
#price-bu-body button {
  pointer-events: none;
}

/* Mở khóa cho đúng dòng đang "editing" ở bên trái */
#price-bu-body .price-bu-row.editing input,
#price-bu-body .price-bu-row.editing select,
#price-bu-body .price-bu-row.editing button {
  pointer-events: auto;
}

/* Mở khóa panel "Áp dụng cho CSKD & Khách hàng" bên phải KHI đang có 1 dòng ở chế độ sửa */
#price-bu-body.price-bu-has-editing .price-bu-right input,
#price-bu-body.price-bu-has-editing .price-bu-right select,
#price-bu-body.price-bu-has-editing .price-bu-right button {
  pointer-events: auto;
}

/* ✅ MỚI: cơ chế khóa/mở khóa y hệt Bảng giá CSKD ở trên, áp dụng cho Bảng giá
   HH.Dịch vụ — mặc định khóa hết, chỉ mở khóa đúng dòng đang "editing" + panel bên
   phải khi có dòng đang sửa. */
#hh-price-body input,
#hh-price-body select,
#hh-price-body textarea,
#hh-price-body button {
  pointer-events: none;
}
#hh-price-body .hh-price-row.editing input,
#hh-price-body .hh-price-row.editing select,
#hh-price-body .hh-price-row.editing button {
  pointer-events: auto;
}
#hh-price-body.hh-price-has-editing .price-hh-right input,
#hh-price-body.hh-price-has-editing .price-hh-right select,
#hh-price-body.hh-price-has-editing .price-hh-right button {
  pointer-events: auto;
}

/* ✅ FIX: thiếu đoạn này khiến KHÔNG BẤM ĐƯỢC nút nào cả — kể cả nút "Sửa" (để tự mở
   khóa)! Các nút LUÔN bấm được dù đang khóa: Sửa (để mở khóa), Thêm bảng giá, Lưu
   Bảng giá HH, và bộ lọc Từ ngày/Đến ngày/Tìm tên — y hệt bên CSKD ở trên.
   ✅ FIX thêm (theo yêu cầu anh): nút "Xóa" cũng LUÔN bấm được luôn, không bắt buộc
   phải bấm "Sửa" mở khóa trước mới xóa được — đây chính là lý do dòng "không xóa
   được" trước đó (không phải do "dòng mẫu" gì cả, chỉ là bị khóa theo cơ chế Sửa).
   ✅ FIX thêm (13/07): thêm 2 ô lọc mới "Chọn CSKD"/"Chọn Loại" vào danh sách này —
   thiếu 2 dòng này khiến 2 ô lọc mới thêm bị khóa cứng theo quy tắc chung phía trên,
   không bấm/chọn được gì cả (đúng lỗi anh gặp phải). */
#hh-price-body .hh-price-row-edit-btn,
#hh-price-body .hh-price-row .btn-danger,
#hh-price-body #hh-price-add-btn,
#hh-price-body #hh-price-save-btn,
#hh-price-body #hh-price-filter-from,
#hh-price-body #hh-price-filter-to,
#hh-price-body #hh-price-search-input,
#hh-price-body #hh-price-filter-cskd,
#hh-price-body #hh-price-filter-loai {
  pointer-events: auto !important;
}

/* Dòng đang ở chế độ sửa -> viền xanh nổi bật để biết đang sửa dòng nào */
.hh-price-row.editing {
  box-shadow: inset 0 0 0 2px var(--blue);
  background: #eef5ff;
}
/* ✅ SỬA (21/07, theo yêu cầu anh): khung "chạy theo" khi rê chuột (hover) vẫn giữ xanh
   giống bên Lưới chiếm dụng — riêng dòng ĐANG CHỌN (đã bấm vào, "nằm yên") đổi sang viền
   ĐƠN (1px, không bôi đậm) MÀU VÀNG thay vì xanh đậm 3px như trước. */
.hh-price-table-left .hh-price-row:not(.header):hover {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  cursor: pointer;
}
.hh-price-row.selected {
  outline: 1px solid #f4b400;
  outline-offset: -1px;
  background: #fffbea;
}
.hh-price-row .hh-price-row-edit-btn {
  background: var(--blue);
  color: #fff;
  border: none;
}
.hh-price-row .hh-price-row-edit-btn:hover { background: var(--blue-dark); }
.hh-price-row.editing .hh-price-row-edit-btn {
  background: #94a3b8;
}

/* Các nút LUÔN bấm được dù đang khóa: Sửa (để mở khóa), Thêm bảng giá, Lưu Bảng giá CSKD,
   và bộ lọc Từ ngày/Đến ngày/Tìm tên (lọc/tìm để XEM không phải là sửa dữ liệu). */
#price-bu-body .price-row-edit-btn,
#price-bu-body #price-bu-add-btn,
#price-bu-body #price-bu-save-btn,
#price-bu-body #price-bu-filter-from,
#price-bu-body #price-bu-filter-to,
#price-bu-body #price-bu-search-input {
  pointer-events: auto !important;
}

/* Dòng đang ở chế độ sửa -> viền xanh nổi bật để biết đang sửa dòng nào */
.price-bu-row.editing {
  box-shadow: inset 0 0 0 2px var(--blue);
  background: #eef5ff;
}

.price-bu-row .price-row-edit-btn {
  background: var(--blue);
  color: #fff;
  border: none;
}
.price-bu-row .price-row-edit-btn:hover { background: var(--blue-dark); }
.price-bu-row.editing .price-row-edit-btn {
  background: #94a3b8;
}

/* ===== DANH SÁCH BOOKING (sidebar trái) ===== */
.booking-list-panel {
  width: 235px;
  flex: 0 0 235px;
  /* Không bao giờ giãn theo chiều cao của form Booking bên phải */
  align-self: flex-start;
  max-height: 700px;
  overflow: hidden;
  /* Dính tại chỗ khi cuộn trang, luôn thấy được danh sách dù form bên phải dài */
  position: sticky;
  top: 8px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  background: #fff;
  padding: 8px;
}
.booking-list-title {
  text-align: center;
  font-weight: 700;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  padding: 6px;
  margin-bottom: 8px;
}
.booking-list-table {
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  overflow: hidden;
}
.booking-list-head,
.booking-list-filter,
.booking-list-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.booking-list-head {
  padding: 6px 6px 4px;
  font-weight: 700;
  color: #334155;
}
.booking-list-filter { padding: 0 6px 6px; }
.booking-list-filter input {
  width: 100%;
  height: 23px;
  padding: 0 6px;
  border: 1px solid #cfd7e6;
  border-radius: 4px;
  font-size: 12px;
  box-sizing: border-box;
}
.booking-list-row {
  padding: 6px;
  border-top: 1px solid #e6eaf2;
  cursor: pointer;
  font-size: 12px;
}
.booking-list-row:hover { background: #f8fafc; }
.booking-list-row.active { background: #eaf2ff; }
.booking-list-row.is-confirmed { color: #1a9c5b; }
.booking-list-row.is-confirmed.active { background: #e6f7ee; }
.booking-list-row.is-hold { color: #b8860b; }
.booking-list-row.is-hold.active { background: #fff8e1; }
.booking-list-row.is-overdue { color: #d6336c; font-weight: 600; }
.booking-list-row.is-overdue.active { background: #ffe3ec; }
.booking-list-row.is-onhold { background: #fde3ef; color: #ad1457; }
.booking-list-row.is-onhold.active { background: #fbd0e4; }
.booking-list-row > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Danh sách booking có chiều cao cố định + thanh cuộn riêng,
   không kéo dài cả màn hình Booking khi có nhiều booking */
#booking-list-rows {
  max-height: 520px;
  overflow-y: auto;
}

.booking-list-hint {
  font-size: 11px;
  color: #94a3b8;
  padding: 6px 4px 0;
}

/* Nút "x" xóa nhanh trong ô Tên khách */
.booking-input-clear-btn {
  position: absolute !important;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  line-height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  font-size: 15px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 2;
}
.booking-input-clear-btn:hover { background: #eef1f5; color: #475569; }

/* Ô có mũi tên danh sách gợi ý (list=datalist) của trình duyệt vẽ đè lên góc phải —
   dịch nút "x" sang trái để không bị mũi tên đó che mất.
   ✅ SỬA (13/07): đổi từ ".booking-hh-schedule" (khối "HH.Dịch vụ độc lập" cũ, đã xóa)
   sang ".hhi-schedule" (khối "HH.Dịch vụ" mới, nằm trong từng CSKD). */
.hhi-schedule + .booking-input-clear-btn {
  right: 26px;
}

/* Thu hẹp các ô theo yêu cầu — nhường chỗ cho khung Danh sách Booking bên trái */
#booking-customer-source { max-width: 320px; }

.booking-section {
  border-top: 1px solid #cfd6e4;
  padding: 7px 12px;
}

.booking-section-title {
  font-weight: 700;
  background: #f3f6fb;
  padding: 4px 8px;
  margin: -7px -12px 7px -12px;
  border-bottom: 1px solid #cfd6e4;
}

.booking-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* ✅ MỚI (23/07/2026): khối gộp nút "Thêm CSKD" + "Booking Charter" — nằm sát nhau,
   đẩy chung sang phải (nhờ justify-content:space-between của hàng cha). */
.booking-title-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.booking-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 3px; }
.booking-field input { width: 100%; }

.booking-footer {
  display: flex;
  justify-content: space-between;
  padding: 12px;
  border-bottom: 1px solid #cfd6e4;
  background: #fff;
  position: sticky;
  z-index: 400;
  margin-bottom: 8px;
}

.booking-footer-left {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Căn cho nhóm nút này bắt đầu đúng từ mép trái của khung nội dung Booking (.booking-body),
     tức là qua khỏi sidebar "DANH SÁCH BOOKING" (235px) + khoảng cách giữa 2 cột (8px) */
  margin-left: 243px;
}

.booking-add-link {
  color: var(--blue);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
  margin-left: 4px;
}
.booking-add-link:hover { color: var(--blue-dark); }

.booking-footer-right {
  display: flex;
  gap: 8px;
}

/* Modal chung */
.booking-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 40px;
  z-index: 9999;
}
.booking-modal-box {
  width: 760px;
  background: #fff;
  border: 1px solid #cfd6e4;
}
.booking-modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  border-bottom: 1px solid #cfd6e4;
  background: #f3f6fb;
}
.booking-modal-title { font-weight: 700; font-size: 14px; }
.booking-modal-body { padding: 7px 10px; }
.booking-modal-hint { font-size: 13px; color: #64748b; margin-bottom: 8px; }
.booking-modal-form { display: flex; flex-direction: column; gap: 8px; }
.booking-modal-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  gap: 10px;
}
.booking-modal-row label { font-weight: 700; font-size: 13px; color: #334155; }
.booking-modal-row input {
  width: 100%;
  height: 31px;
  padding: 0 12px;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  font-size: 13px;
  box-sizing: border-box;
}
.booking-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px;
  border-top: 1px solid #cfd6e4;
}
.booking-modal-actions-btns { display: flex; gap: 8px; }
.booking-modal-warn { font-size: 13px; color: #d00; }
.modal-dialog.modal-lg { max-width: 760px; }
.modal-dialog.modal-xl { max-width: 1040px; }
.note-red { color: #d11; font-size: 13px; line-height: 1.35; }
.modal-close-danger {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 27px;
  height: 24px;
  border: none;
  border-radius: 8px;
  font-size: 22px;
  line-height: 24px;
  cursor: pointer;
  background: #e53935;
  color: #fff;
}


/* =========================================================
   I. BOOKING — NGÀY LẬP / SỐ
   ========================================================= */

.booking-title {
  font-weight: 700;
  border: none;
  padding: 0;
}

.booking-meta {
  padding: 0;
  border: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 14px;
}
.booking-meta-row {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Ẩn các phần tử không dùng ở header */
.booking-meta-row-right,
.booking-auto-note,
#booking-pick-customer-btn,
#booking-quick-note-btn { display: none !important; }


/* =========================================================
   II. KHÁCH HÀNG
   ========================================================= */

/* 1. Tên khách — Readonly fields */
#page-booking #booking-customer-phone[readonly],
#page-booking #booking-customer-email[readonly] {
  background: #f4f6f9;
}

/* 2. SL | 3. N.Lớn | 4. T.Em | 5. M.phí — căn giữa */
#booking-guest-count,
#booking-guest-adult,
#booking-guest-child,
#booking-guest-free {
  text-align: center;
}

.booking-field:has(#booking-guest-count) label,
.booking-field:has(#booking-guest-adult) label,
.booking-field:has(#booking-guest-child) label,
.booking-field:has(#booking-guest-free) label {
  text-align: center;
  display: block;
}

/* Bỏ viền đậm khi bấm vào ô N.Lớn (ô chỉ đọc, tự tính, không cần nổi bật viền) */
#booking-guest-adult,
#booking-guest-adult:focus,
#booking-guest-adult:focus-visible,
#booking-guest-adult:hover {
  outline: none !important;
  box-shadow: none !important;
  border: 1px solid #cfd6e4 !important;
}

/* Hiện mũi tên tăng giảm (spinner) cho SL / T.Em / M.phí */
#booking-guest-count,
#booking-guest-child,
#booking-guest-free {
  -moz-appearance: number-input;
}
#booking-guest-count::-webkit-inner-spin-button,
#booking-guest-count::-webkit-outer-spin-button,
#booking-guest-child::-webkit-inner-spin-button,
#booking-guest-child::-webkit-outer-spin-button,
#booking-guest-free::-webkit-inner-spin-button,
#booking-guest-free::-webkit-outer-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  margin-left: 4px;
}


/* =========================================================
   III. CƠ SỞ KINH DOANH
   ========================================================= */

/* 1. Nút Thêm CSKD — Modal chọn CSKD */
.booking-pick-dialog { width: min(900px, 92vw); }
.booking-pick-table {
  border: 1px solid #d8dee9;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
}
.booking-pick-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 90px;
  gap: 6px;
  padding: 10px;
  align-items: center;
  border-top: 1px solid #e7ebf2;
}
/* Modal "Chọn Cơ sở kinh doanh" có thêm cột "Kèm theo" -> 4 cột, riêng modal này thôi,
   modal "Chọn Cơ sở" bên cạnh vẫn giữ nguyên 3 cột như cũ.
   ✅ SỬA (theo yêu cầu anh): cột "Chọn" giờ có thêm nút "Thêm" cạnh ô tích (chỉ báo) —
   nới rộng cột này ra cho đủ chỗ. */
#booking-bu-modal .booking-pick-row {
  grid-template-columns: 1fr 1.2fr 90px 130px;
}
.booking-pick-row.header {
  background: #f5f7fb;
  font-weight: 600;
  border-top: none;
}
.booking-pick-row .col-pick { display: flex; justify-content: center; align-items: center; gap: 8px; }
.booking-pick-row .col-attach { display: flex; justify-content: center; }
/* ✅ MỚI: nút "Thêm" trong cột "Chọn" — bấm là thêm ngay 1 instance CSKD vào booking */
.booking-pick-row .pick-bu-add-btn {
  height: 27px;
  padding: 0 12px;
  white-space: nowrap;
}
/* ✅ VIẾT LẠI (theo yêu cầu anh): ô tích "Chọn" và ô tích "Kèm theo" giờ đều là
   checkbox THẬT — tích/bỏ tích được, loại trừ lẫn nhau (xem app-booking.js). Gộp
   chung 1 rule để 2 ô to bằng nhau, cùng màu khi tích, có con trỏ tay (pointer). */
.booking-pick-row .pick-bu-cb,
.booking-pick-row .pick-bu-attach-cb {
  cursor: pointer;
  opacity: 1;
  transform: scale(1.3);
  accent-color: #1a56db;
}
/* ✅ MỚI: canh thẳng tiêu đề "Chọn" với cột ô tích — cột "Chọn" trong modal này có cả
   ô tích (bên trái) LẪN nút "Thêm" (bên phải) nên căn giữa cả cụm (justify-content:
   center) làm chữ "Chọn" ở hàng tiêu đề lệch, không thẳng hàng với ô tích bên dưới.
   Đổi sang space-between: ô tích ghim bên trái, nút "Thêm" ghim bên phải — hàng tiêu
   đề chỉ có 1 chữ "Chọn" nên tự động dạt về bên trái, thẳng cột với ô tích. Chỉ áp
   dụng riêng modal "Chọn Cơ sở kinh doanh" (#booking-bu-modal) — modal "Chọn Cơ sở"
   bên cạnh (cột "Chọn" chỉ có 1 ô tích, không có nút) vẫn giữ nguyên canh giữa như cũ. */
#booking-bu-modal .booking-pick-row .col-pick {
  justify-content: space-between;
}
/* Cơ sở đang bị trùng Ngày+Giờ với booking khác — tô màu giống hệt màu chữ trạng thái
   Xác nhận (is-confirmed)/Giữ (is-hold) ở danh sách Booking bên trái, để dễ nhận biết. */
.booking-pick-row.conflict-confirmed { color: #1a9c5b; }
.booking-pick-row.conflict-hold { color: #b8860b; }

/* 2. Hiển thị CSKD — Block */
.booking-bu-block {
  border: 1px solid #d8dee9;
  border-radius: 10px;
  padding: 10px;
  margin: 6px 0;
  background: #fff;
}
.booking-bu-topbox {
  background: #f3f6fb;
  border-bottom: 1px solid #d8dee9;
  border-radius: 8px 8px 0 0;
  margin: -10px -10px 6px -10px;
  padding: 6px 8px 8px;
}
.booking-bu-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.booking-bu-title { font-weight: 700; font-size: 13px; white-space: nowrap; }
.booking-bu-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
/* ✅ MỚI (theo yêu cầu anh): ô Diễn giải giờ nằm chung dòng tiêu đề (giữa Tên CSKD và
   cụm nút Thêm địa điểm/Thêm cơ sở/Xóa) — co giãn lấp đầy khoảng trống còn lại, cao
   27px cho thẳng hàng với các nút cạnh nó. */
.booking-bu-head input.bu-note {
  flex: 1;
  min-width: 0;
  height: 27px;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
}

/* ✅ MỚI (theo yêu cầu anh): khối "thêm lần 2 trở đi" của CÙNG 1 CSKD (không có khung
   Cộng tiền riêng — số tiền gộp về khối chính phía trên) — thêm viền đứt + đẩy cách xa
   khối phía trên 1 chút để KHÔNG bị nhìn nhầm là dính liền/thuộc về khung Cộng tiền của
   khối chính ngay bên trên nó. */
.booking-bu-block-secondary {
  margin-top: 14px;
  border-top: 2px dashed #b9c3d1;
  padding-top: 10px;
}
/* Nhãn "Lần N" cạnh tên CSKD của khối phụ — báo ngay đây là lần thêm thứ mấy của CSKD
   đó, số tiền đã được cộng dồn vào khung Cộng tiền của khối đầu tiên (lần 1). */
.booking-bu-seq-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2fb;
  border: 1px solid #c7d2e6;
  color: #3b5998;
  font-size: 11px;
  font-weight: 600;
  vertical-align: middle;
}

/* 2.3→2.10. Lịch trình / Ngày giờ / Thời gian / Ngày đến hạn */
.booking-bu-fields {
  display: grid;
  grid-template-columns: 1fr 130px 110px 130px 110px 60px 130px;
  gap: 6px;
  margin: 5px 0 6px;
  align-items: end;
}
.booking-bu-fields .bf label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #334155;
  text-align: center;
}
.booking-bu-fields input {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  text-align: center;
}

/* Riêng Lịch trình: căn trái + nhãn in đậm */
.booking-bu-fields .bf.booking-sch-ac label {
  text-align: left;
  font-weight: 700;
}
.booking-bu-fields .bf.booking-sch-ac input.bu-schedule {
  text-align: left;
}

/* ===== BOOKING CHARTER (18/07/2026, theo yêu cầu anh) ===== */
.booking-charter-wrap { margin: 4px 0 8px; }
.booking-charter-row {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 90px 130px 130px 32px 32px 32px;
  gap: 6px;
  align-items: end;
  padding: 6px 8px;
  margin-bottom: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #f8fafc;
}
.booking-charter-row .bf label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #334155;
}
.booking-charter-row .bf input {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
}
/* ✅ SỬA (theo yêu cầu anh): 3 nút ĐC/+/Xóa đồng bộ ĐÚNG kích thước 32x27px như dòng
   Cơ sở của Cơ sở kinh doanh (xem .booking-fac-row .fac-dc-btn/.fac-pickup-toggle-btn) —
   trước đây thiếu 1 cột lưới (chỉ khai 7/8 cột) khiến nút Xóa bị rớt xuống dòng riêng. */
.booking-charter-row .charter-dc-btn,
.booking-charter-row .charter-expand-btn,
.booking-charter-row .charter-remove-btn {
  width: 32px;
  height: 27px;
  padding: 0;
  font-weight: 700;
  box-sizing: border-box;
}
/* ĐC: nền trắng, viền/chữ xanh — giống hệt .fac-dc-btn */
.booking-charter-row .charter-dc-btn {
  background: #fff;
  color: #1557b0;
  border: 1px solid #1557b0;
}
.booking-charter-row .charter-dc-btn:hover { background: #eef4ff; }
/* "+": nền xanh đặc, chữ trắng — giống hệt .fac-pickup-toggle-btn */
.booking-charter-row .charter-expand-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 4px;
}
.booking-charter-row .charter-expand-btn:hover { background: var(--blue-dark); }

/* ✅ MỚI (23/07/2026, theo yêu cầu anh): dòng "lý do điều chỉnh" hiện NGAY DƯỚI 1 dòng
   Charter — dùng lại đúng grid-template-columns của .booking-charter-row (thay vì lưới
   .booking-fac-adjust-row của Cơ sở thường, vì Charter có độ rộng cột khác hẳn) để tiền
   điều chỉnh thẳng cột với "Thành tiền". */
.booking-charter-adjust-row {
  display: grid;
  grid-template-columns: 1.3fr 1.3fr 90px 130px 130px 32px 32px 32px;
  gap: 6px;
  padding: 1px 8px 6px;
  margin-top: -4px;
  color: #1a73e8;
  font-size: 13px;
  font-style: italic;
}
.booking-charter-adjust-row .fac-adjust-reason { grid-column: 1 / 3; }
.booking-charter-adjust-row .fac-adjust-sl { grid-column: 3; text-align: center; }
.booking-charter-adjust-row .fac-adjust-money { grid-column: 5; text-align: center; }

.booking-charter-fac-table {
  margin: 2px 0 10px 10px;
  padding-left: 10px;
  border-left: 3px solid #93c5fd;
}
.booking-charter-fac-row {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 6px;
  align-items: end;
  padding: 3px 0;
}
.booking-charter-fac-row.header {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  padding-bottom: 2px;
}
.booking-charter-fac-row .bf { position: relative; }
.booking-charter-fac-row .bf input {
  width: 100%;
  height: 26px;
  box-sizing: border-box;
}

/* Lịch trình autocomplete */
.booking-sch-ac { position: relative; }
.booking-sch-acbox {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.08);
  max-height: 220px;
  overflow: auto;
  z-index: 60;
}
.booking-sch-item { padding: 6px 10px; cursor: pointer; }
.booking-sch-item:hover { background: #f5f7fb; }

/* 2.11. Dòng cơ sở — Tên / Tính chất / SL / Đơn giá / ĐC / Thành tiền / Xóa */
.booking-fac-table {
  border-top: 1px solid #e7ebf2;
  padding-top: 6px;
  margin-top: 5px;
  margin-right: -10px;
}
/* ✅ ĐÃ XÓA (dọn code chết): .booking-bu-note-row — Diễn giải + nút "Thêm địa điểm"
   đã dời lên dòng tiêu đề (.booking-bu-head), không còn dòng riêng này nữa. */
.booking-fac-row {
  display: grid;
  grid-template-columns: 1fr 0.7fr 82px 110px 110px 32px 32px 32px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
}
.booking-fac-row > div { min-width: 0; }
.booking-fac-row input,
.booking-fac-row .fac-prop-ac { width: 100%; height: 27px; box-sizing: border-box; }
.booking-fac-row .fac-prop-ac input { width: 100%; height: 27px; }
.booking-fac-row .btn { width: 100%; height: 27px; white-space: nowrap; padding: 0; }
.booking-fac-row input.fac-qty  { text-align: center; }
.booking-fac-row input.fac-price,
.booking-fac-row input.fac-amount { text-align: right; }
.booking-fac-header { font-weight: 600; color: #334155; padding: 3px 0; }

/* Nút "ĐC" và nút "+" — cùng kích thước hình vuông 32x27, nằm sát nhau quanh Thành tiền */
.booking-fac-row .fac-dc-btn,
.booking-fac-row .fac-pickup-toggle-btn {
  width: 32px;
  height: 27px;
  padding: 0;
  font-weight: 700;
}

/* ✅ MỚI (16/07, theo yêu cầu anh): "ĐC" và "+" của dòng Cơ sở đổi sang viền xanh/nền
   trắng, cùng tông đậm đã dùng cho các nút khác trong Booking. */
.booking-fac-row .fac-dc-btn,
.booking-fac-row .fac-pickup-toggle-btn {
  background: #fff !important;
  color: #1557b0 !important;
  border: 1px solid #1557b0 !important;
}
.booking-fac-row .fac-dc-btn:hover,
.booking-fac-row .fac-pickup-toggle-btn:hover {
  background: #eef4ff !important;
}

/* Nút "+" mở/thu Điểm đón - Điểm trả riêng của 1 Cơ sở — cùng màu xanh với nút ĐC */
.booking-fac-row .fac-pickup-toggle-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 4px;
}
.booking-fac-row .fac-pickup-toggle-btn:hover { background: var(--blue-dark); }
.booking-fac-row .fac-pickup-toggle-btn.active { background: var(--blue-dark); }

/* Khối "Điểm đón / Điểm trả" xổ ra dưới 1 dòng Cơ sở (accordion) — căn PHẢI đúng mép
   phải cột "Thành tiền" (không lấn sang cột "+"/"Xóa" nữa). Mỗi dòng (Điểm đón/Điểm trả)
   có 3 ô: Tỉnh - Phường - Địa chỉ, tỉ lệ 1 : 1 : 4 (Địa chỉ rộng gấp 4 lần Tỉnh/Phường). */
/* Bọc khối Điểm đón/trả cấp CSKD (nút "Thêm địa điểm") trong 1 grid dùng chung cột với
   dòng Cơ sở, để mép phải căn đúng vào mép phải cột "Thành tiền" như dòng Cơ sở
   (.fac-pickup-panel đã có sẵn grid-column: 1/7 áp dụng chung cho cả 2 trường hợp). */
.bu-pickup-panel-wrap {
  display: grid;
  grid-template-columns: 1fr 0.7fr 82px 110px 110px 32px 32px 32px;
  gap: 6px;
  margin-right: -10px;
}

.fac-pickup-panel {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 2px;
}
.fac-pickup-panel-row {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr;
  gap: 6px;
  align-items: center;
}
.fac-pickup-panel-row label {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
  grid-column: 1 / -1;
  margin-bottom: -2px;
}
.fac-pickup-panel-row input {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
}

/* Các dòng "lý do điều chỉnh" hiện dưới mỗi dòng Cơ sở — ✅ SỬA (23/07/2026, theo yêu
   cầu anh): dùng ĐÚNG grid-template-columns của .booking-fac-row (thay vì 1 lưới riêng
   với độ rộng cột khác) để số tiền điều chỉnh căn giữa THẲNG CỘT với "Thành tiền". */
.booking-fac-adjust-row {
  display: grid;
  grid-template-columns: 1fr 0.7fr 82px 110px 110px 32px 32px 32px;
  gap: 6px;
  padding: 1px 0 3px 0;
  color: #1a73e8;
  font-size: 13px;
  font-style: italic;
}
.booking-fac-adjust-row .fac-adjust-reason { grid-column: 1 / 3; }
.booking-fac-adjust-row .fac-adjust-sl { grid-column: 3; text-align: center; }
.booking-fac-adjust-row .fac-adjust-money { grid-column: 5; text-align: center; }

/* Tính chất autocomplete */
.fac-prop-ac { position: relative; }
.fac-prop-acbox {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #d8dee9;
  border-radius: 8px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.08);
  max-height: 220px;
  overflow: auto;
  z-index: 9999;
}
.fac-prop-acitem { padding: 6px 10px; cursor: pointer; }
.fac-prop-acitem:hover { background: #f5f7fb; }

/* 2.12. HH.Dịch vụ đi kèm */
.booking-addon-wrap {
  border-top: 1px solid #e7ebf2;
  margin-top: 6px;
  padding-top: 6px;
  margin-right: -10px;
}
.booking-addon-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 0 -10px 4px -10px;
  padding: 6px 10px;
  background: #f3f6fb;
  border-radius: 4px;
}
.booking-addon-table { margin-top: 2px; }
.booking-addon-row {
  display: grid;
  grid-template-columns: 260px 36px 175px 70px 1fr 32px;
  gap: 6px;
  align-items: start;
  padding: 3px 0;
}
.booking-addon-row > div { min-width: 0; }
.booking-addon-header { font-weight: 600; color: #334155; padding: 3px 0; }
.booking-addon-row input,
.booking-addon-row .booking-addon-ac { width: 100%; height: 27px; box-sizing: border-box; }
.booking-addon-row .booking-addon-ac input { width: 100%; height: 27px; }
.booking-addon-row .btn { width: 100%; height: 27px; white-space: nowrap; }

/* ✅ MỚI (16/07, theo yêu cầu anh): căn giữa chữ "Xóa" của dòng HH.Dịch vụ đi kèm */
.booking-addon-row .addon-del-btn { text-align: center; }

/* ✅ MỚI (16/07, theo yêu cầu anh): nút "+" (thêm mới vào danh mục) của dòng HH.Dịch vụ
   đi kèm — đổi sang viền xanh/nền trắng, cùng tông đậm đã dùng cho các nút + khác. */
.booking-addon-row .addon-addnew-btn {
  background: #fff !important;
  color: #1557b0 !important;
  border: 1px solid #1557b0 !important;
}
.booking-addon-row .addon-addnew-btn:hover {
  background: #eef4ff !important;
}
.booking-addon-row input.addon-qty   { text-align: center; }
.booking-addon-row textarea.addon-note {
  width: 100%;
  min-height: 27px;
  box-sizing: border-box;
  resize: none;
  overflow: hidden;
  padding: 4px 8px;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.3;
}
.booking-addon-ac { position: relative; }

/* ✅ MỚI (13/07): "HH.Dịch vụ" — khối MỚI nằm trong từng CSKD, ngay dưới "HH.Dịch vụ
   đi kèm" ở trên. */
/* ✅ SỬA (theo yêu cầu anh — gộp dòng nút): không còn dòng tiêu đề/nút riêng nữa (nút
   "Thêm HH.Dịch vụ" đã dời lên chung dòng với "Thêm HH.Dịch vụ kèm theo" ở trên) — khi
   CHƯA có dòng HH.Dịch vụ nào, div này hoàn toàn rỗng, dùng ":empty" để bỏ luôn viền/
   khoảng cách thừa, tránh để lại 1 gạch ngang trống vô nghĩa. */
.booking-hhi-wrap {
  border-top: 1px solid #e7ebf2;
  margin-top: 2px;
  padding-top: 2px;
  margin-right: -10px;
}
.booking-hhi-wrap:empty {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ✅ VIẾT LẠI (theo yêu cầu anh — mỗi cụm Lịch trình riêng): khối "HH.Dịch vụ" giờ gồm
   NHIỀU CỤM (.booking-hhi-group), mỗi cụm có 1 dòng Lịch trình riêng (kèm nút Xóa cả
   cụm + nút "+" thêm dòng) và bảng dòng HH.Dịch vụ của CHÍNH cụm đó. */
.booking-hhi-group {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #d8dee9;
}
.booking-hhi-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.booking-hhi-group-head {
  display: grid;
  grid-template-columns: 1fr 32px 32px;
  gap: 6px;
  margin: 2px 0 6px 0;
  align-items: end;
}
.booking-hhi-group-head .bf label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #334155;
  text-align: left;
}
.booking-hhi-group-head input.hhi-schedule {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  text-align: left;
}
.booking-hhi-group-head .hhi-group-del-btn,
.booking-hhi-group-head .hhi-group-addrow-btn {
  height: 27px;
  padding: 0;
}

/* ✅ MỚI (16/07, theo yêu cầu anh): nút "+" của dòng Lịch trình HH.Dịch vụ đổi sang viền
   xanh/nền trắng, giống hệt ĐC/+ của dòng Cơ sở — chữ "Xóa" bỏ in đậm. */
.booking-hhi-group-head .hhi-group-addrow-btn {
  background: #fff !important;
  color: #1557b0 !important;
  border: 1px solid #1557b0 !important;
}
.booking-hhi-group-head .hhi-group-addrow-btn:hover {
  background: #eef4ff !important;
}
.booking-hhi-group-head .hhi-group-del-btn {
  font-weight: 400;
}

/* ✅ MỚI (16/07, theo yêu cầu anh): nút "+" (thêm mới vào danh mục / thêm dòng) và nút
   "ĐC" trong khối "HH.Dịch vụ" đổi sang kiểu viền xanh/nền trắng — giống hệt nút "+" của
   khối "Địa điểm" (bookingLocationRowHTML) — thay cho nền xanh đặc mặc định của
   btn-primary. */
.hhi-addnew-btn,
.booking-hhi-group-head .hhi-group-addrow-btn,
.hhi-dc-btn {
  background: #fff !important;
  color: #1557b0 !important;
  border: 1px solid #1557b0 !important;
}
.hhi-addnew-btn:hover,
.booking-hhi-group-head .hhi-group-addrow-btn:hover,
.hhi-dc-btn:hover {
  background: #eef4ff !important;
}

/* Bảng dòng: Tên HH.Dịch vụ | Thêm mới | Ngày giờ sử dụng | Số lượng | Đơn giá | ĐC |
   Thành tiền | Xóa — cùng nguyên lý grid với .booking-addon-row ở trên. */
.booking-hhi-table { margin-top: 6px; }
.booking-hhi-row {
  display: grid;
  grid-template-columns: 1fr 36px 175px 70px 110px 120px 32px 32px;
  gap: 6px;
  align-items: start;
  padding: 3px 0;
  border-bottom: 1px solid #e0e8f5;
}
.booking-hhi-row > div { min-width: 0; }
.booking-hhi-header { font-weight: 600; color: #334155; padding: 3px 0; }
.booking-hhi-row input,
.booking-hhi-row .booking-addon-ac { width: 100%; height: 27px; box-sizing: border-box; }
.booking-hhi-row .booking-addon-ac input { width: 100%; height: 27px; }
.booking-hhi-row .btn { width: 100%; height: 27px; white-space: nowrap; }

/* ✅ MỚI (16/07, theo yêu cầu anh): mỗi dòng "HH.Dịch vụ" (không tính dòng tiêu đề) có
   nền nhạt giống hệt dòng chứa 2 nút "Thêm HH.Dịch vụ kèm theo"/"Thêm HH.Dịch vụ"
   (booking-addon-head, #f3f6fb) — để dễ phân biệt từng dòng dữ liệu. */
.booking-hhi-row:not(.booking-hhi-header) {
  background: #f3f6fb;
  border-radius: 4px;
  padding: 4px 6px;
  margin: 0 -6px 4px -6px;
}

/* ✅ MỚI (16/07, theo yêu cầu anh): căn giữa chữ "Xóa" của dòng HH.Dịch vụ (hhi-row) */
.booking-hhi-row .hhi-del-btn { text-align: center; }
.booking-hhi-row .hhi-dc-btn { text-align: center; }
.booking-hhi-row input.hhi-qty,
.booking-hhi-row input.hhi-price,
.booking-hhi-row input.hhi-amount { text-align: center; }

/* ✅ MỚI (16/07, theo yêu cầu anh): bỏ khung ô vuông của Số lượng/Đơn giá/Thành tiền —
   đổi sang kiểu "dòng kẻ mờ" giống Danh mục HH.Dịch vụ (.hh-row input[type="text"]):
   viền trong suốt lúc bình thường, chỉ hiện viền khi hover/focus, không còn khung hộp. */
.booking-hhi-row input.hhi-qty,
.booking-hhi-row input.hhi-price,
.booking-hhi-row input.hhi-amount {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 2px;
}
.booking-hhi-row input.hhi-qty:hover,
.booking-hhi-row input.hhi-price:hover,
.booking-hhi-row input.hhi-amount:hover {
  border-color: #d0d7de;
}
.booking-hhi-row input.hhi-qty:focus,
.booking-hhi-row input.hhi-price:focus,
.booking-hhi-row input.hhi-amount:focus {
  border-color: var(--border);
  background: #fff;
  outline: none;
}

/* Căn giữa cả cụm "Ngày giờ sử dụng" (ô ngày + giờ + phút) trong ô của nó */
.booking-hhi-row > div:nth-child(3) {
  display: flex;
  justify-content: center;
}

/* Khung Cộng tiền/Thuế phí/Thanh toán/Còn lại riêng của khối "HH.Dịch vụ" trong CSKD —
   ✅ SỬA (13/07): giờ dùng ĐÚNG bookingBuildSummaryBoxHtml() dùng chung với CSKD (thay
   cho khung tự chế .booking-hhi-sum-box cũ, đã bỏ) — chỉ còn cần margin/border phân
   tách trực quan với bảng dòng phía trên, style bên trong (.booking-sum-row/.booking-
   sum-lbl/.booking-sum-pay...) đã có sẵn dùng chung, không cần định nghĩa lại. */
/* ✅ MỚI (theo yêu cầu anh): khi khung Cộng tiền HH.Dịch vụ và khung Cộng tiền CSKD
   cùng nằm trong 1 khối (trường hợp phổ biến nhất) — gộp chung 1 dòng, nằm CẠNH NHAU
   thay vì xếp dọc từng khung. Mỗi khung co giãn chia đều khoảng trống, tự xuống dòng
   (wrap) nếu màn hình hẹp. */
.booking-sum-pair-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
  margin-top: 8px;
  margin-right: -10px;
}
.booking-sum-pair-row > .booking-hhi-sum-wrap,
.booking-bu-block .booking-sum-pair-row > .booking-sum-wrap {
  margin: 0;
  padding-top: 0;
  border-top: none;
  flex: 1 1 400px;
  min-width: 300px;
}
.booking-bu-block .booking-sum-pair-row > .booking-sum-wrap {
  display: flex;
  justify-content: flex-start;
}
.booking-sum-pair-row .booking-sum-box {
  width: 100%;
}

.booking-hhi-sum-wrap {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed #e7ebf2;
}

/* Dòng "lý do điều chỉnh" hiện ngay dưới 1 dòng HH.Dịch vụ có ĐC — ✅ SỬA (23/07/2026,
   theo yêu cầu anh): dùng ĐÚNG grid-template-columns của .booking-hhi-row (thay vì 1
   lưới riêng với độ rộng cột khác) để số tiền điều chỉnh căn giữa THẲNG CỘT với
   "Thành tiền". */
.booking-hhi-adjust-row {
  display: grid;
  grid-template-columns: 1fr 36px 175px 70px 110px 120px 32px 32px;
  gap: 6px;
  padding: 1px 0 3px 0;
  color: #1a73e8;
  font-size: 13px;
  font-style: italic;
}
.booking-hhi-adjust-row .hhi-adjust-reason { grid-column: 1 / 4; }
.booking-hhi-adjust-row .hhi-adjust-sl { grid-column: 4; text-align: center; }
.booking-hhi-adjust-row .hhi-adjust-money { grid-column: 6; text-align: center; }

.booking-addon-acbox {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.08);
  max-height: 220px;
  overflow: auto;
  z-index: 50;
}
.booking-addon-acitem { padding: 6px 10px; cursor: pointer; }
.booking-addon-acitem:hover { background: #f5f7fb; }

/* 3. Cộng tiền CSKD — Summary box */
.booking-sum-wrap {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
/* Chỉ CSKD (trong booking-bu-block) mới cần dồn thêm 10px cho khớp mép nút Xóa ở tiêu đề */
.booking-bu-block .booking-sum-wrap {
  margin-right: -10px;
}
.booking-sum-box {
  width: 520px;
  padding: 7px 12px;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  background: #fff;
}
.booking-sum-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}
/* ✅ SỬA (theo yêu cầu anh — nhãn "Cộng tiền" giờ có thêm tên CSKD/HH.Dịch vụ, VD
   "Cộng tiền Lâu đài"): tăng nhẹ độ rộng cột nhãn + cho phép xuống dòng nếu tên dài,
   thay vì tràn ra ngoài — vẫn giữ 1 độ rộng CỐ ĐỊNH để 3 dòng Cộng tiền/Thanh toán/
   Còn lại luôn thẳng cột với nhau như cũ. */
.booking-sum-lbl {
  width: 150px;
  flex-shrink: 0;
  font-weight: 700;
  color: #334155;
  text-align: left;
  white-space: normal;
  line-height: 1.2;
}

/* 3.1. Cụm giá trị: ô nhập co giãn (flex:1) + nút/khoảng-nút cố định độ rộng —
   áp dụng như nhau cho Cộng tiền / Thanh toán / Còn lại nên 3 ô nhập luôn dài bằng nhau */
.booking-sum-pay {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.booking-sum-box input.form-control { flex: 1; min-width: 0; text-align: right; }
.booking-sum-box .btn,
.booking-sum-btn-spacer {
  flex: 0 0 76px;
  width: 76px;
}

/* 3.2. Thuế phí — thu hẹp về độ rộng tối thiểu, bằng với nút "..." */
.booking-taxfee-btn,
.booking-pay-open-btn {
  padding: 0 6px;
  white-space: nowrap;
}

/* 3.3. Các dòng Thuế/Phí phục vụ hiện ra sau khi chọn "Thuế, phí"
   (không có nút đi kèm) — thêm khoảng trống cố định 76px ở cuối để
   ô nhập dài bằng đúng ô Cộng tiền/Thanh toán/Còn lại phía trên/dưới */
.booking-tax-lines .booking-sum-row::after {
  content: '';
  flex: 0 0 76px;
  width: 76px;
}

/* 3.2. Modal Thuế, phí */
.booking-taxfee-header { position: relative; }
.booking-taxfee-table {
  margin-top: 6px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  overflow: hidden;
}
.booking-taxfee-table table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.booking-taxfee-table thead th {
  background: #f3f6fb;
  font-weight: 700;
  border-bottom: 1px solid #d9e1ef;
  padding: 9px 12px;
  text-align: center;
}
.booking-taxfee-table tbody td { padding: 9px 12px; border-bottom: 1px solid #eef2f7; }
.booking-taxfee-table thead th,
.booking-taxfee-table tbody td { border-right: 1px solid #eef2f7; }
.booking-taxfee-table thead th:last-child,
.booking-taxfee-table tbody td:last-child { border-right: none; }
.booking-taxfee-table tbody tr:last-child td { border-bottom: none; }
.booking-taxfee-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

#booking-taxfee-modal .modal-dialog { max-width: 980px !important; width: calc(100% - 40px) !important; }
#booking-taxfee-modal .modal-body { padding: 9px 16px !important; }
#booking-taxfee-modal table th,
#booking-taxfee-modal table td { padding: 7px 10px !important; }

/* 3.3.1. Pay Modal — Bảng theo dõi thanh toán CSKD */
#booking-pay-modal .pay-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

/* 2.11.5. Modal Điều chỉnh giá — ĐC */
.booking-dc-dialog { width: 860px; max-width: 92vw; }
.booking-dc-table { margin-top: 6px; border: 1px solid #d7deea; border-radius: 10px; overflow: hidden; }
.booking-dc-row.header { background: #f3f6fb; font-weight: 700; border-bottom: 1px solid #d7deea; }
.booking-dc-row.body { background: #fff; }
.booking-dc-input { width: 100%; padding: 6px 10px; border: 1px solid #cfd6e4; border-radius: 8px; }

#booking-dc-modal .modal-dialog.booking-pick-dialog { width: 980px !important; max-width: 98vw !important; }
#booking-dc-modal .booking-dc-row {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 0.9fr 0.7fr 1.1fr 1.1fr 0.5fr;
  column-gap: 11px;
  align-items: center;
  padding: 11px 18px;
}
#booking-dc-modal .booking-dc-row.header {
  background: #f3f6fb;
  font-weight: 700;
  border-bottom: 1px solid #d9e1ef;
}
#booking-dc-modal .booking-dc-row.header > div { text-align: center; line-height: 1.15; }
#booking-dc-modal .booking-dc-row:not(.header) { border-bottom: 1px solid #eef2f7; }
#booking-dc-modal .booking-dc-row:last-child { border-bottom: none; }
#booking-dc-modal .booking-dc-row .dc-reason { text-align: left; font-size: 13px; }

#booking-dc-modal input.dc-ratio-input,
#booking-dc-modal input.dc-value-input,
#booking-dc-modal input.dc-sl-input {
  width: 100%;
  height: 31px;
  padding: 0 12px;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}
#booking-dc-modal .dc-unit,
#booking-dc-modal .dc-money {
  width: 100%;
  height: 31px;
  padding: 0 12px;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  box-sizing: border-box;
}
#booking-dc-modal .booking-dc-row .dc-pick { display: flex; justify-content: center; align-items: center; }
#booking-dc-modal .booking-dc-row input[type="text"],
#booking-dc-modal .booking-dc-row input[type="number"] { width: 100%; box-sizing: border-box; }

/* ===== Bảng "Thuế, phí" — style đồng bộ với Bảng điều chỉnh giá (ĐC) ===== */
.modal-dialog.booking-pick-dialog.hh-tax-dialog { width: 900px !important; max-width: 96vw !important; }
.hh-tax-table {
  margin-top: 6px;
  border: 1px solid #d7deea;
  border-radius: 10px;
  overflow: hidden;
}
.hh-tax-row {
  display: grid;
  grid-template-columns: 2.2fr 0.9fr 1fr 1fr 0.5fr;
  column-gap: 11px;
  align-items: center;
  padding: 11px 18px;
}
.hh-tax-row.header {
  background: #f3f6fb;
  font-weight: 700;
  border-bottom: 1px solid #d9e1ef;
}
.hh-tax-row.header > div { text-align: center; line-height: 1.15; }
.hh-tax-row:not(.header) { border-bottom: 1px solid #eef2f7; }
.hh-tax-row:last-child { border-bottom: none; }
.hh-tax-row .hh-tax-name { text-align: left; font-size: 13px; font-weight: 700; }

.hh-tax-row input.hh-tax-rate,
.hh-tax-row input.hh-tax-value,
.hh-tax-row input.hh-tax-amount {
  width: 100%;
  height: 31px;
  padding: 0 12px;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  font-size: 13px;
  text-align: center;
  box-sizing: border-box;
}
.hh-tax-row .hh-tax-pick { display: flex; justify-content: center; align-items: center; }

/* ===== Modal "Thêm HH.Dịch vụ" (Quick Add) — style đồng bộ với Bảng điều chỉnh giá ===== */
.hh-quickadd-dialog { width: 560px !important; max-width: 94vw !important; }
.hh-quickadd-form { display: flex; gap: 10px; margin-top: 6px; }
.hh-quickadd-input {
  height: 31px;
  padding: 0 12px;
  border: 1px solid #cfd7e6;
  border-radius: 10px;
  font-size: 13px;
  box-sizing: border-box;
  flex: 1;
}
.hh-quickadd-unit { flex: 0 0 180px; }

/* Mode bàn */
.booking-bu-block[data-table-mode="1"] .booking-fac-table { display: none !important; }
.booking-table-box { margin-top: 9px; }
.booking-table-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; color: #1f3b64; }
.booking-table-chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  padding: 7px 12px;
  border: 1px solid #cfcfcf;
  background: #fff;
  min-height: 55px;
  align-items: flex-start;
}
.booking-table-chip {
  position: relative;
  width: 112px;
  min-height: 53px;
  border: 2px solid #b9b9b9;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px 8px;
  box-sizing: border-box;
}
.booking-table-chip-name { text-align: center; font-size: 13px; line-height: 1.2; color: #222; word-break: break-word; }
.booking-table-chip-del {
  position: absolute;
  top: 8px; right: 10px;
  border: none;
  background: transparent;
  color: red;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  font-weight: 700;
}
.booking-table-chip-del:hover { transform: scale(1.08); }


/* =========================================================
   IV. HH.DỊCH VỤ (per-CSKD)
   ========================================================= */
/* ✅ ĐÃ XÓA (13/07, theo yêu cầu anh): toàn bộ CSS của khối "HH.Dịch vụ ĐỘC LẬP" cũ
   (dùng chung cho cả booking, không thuộc CSKD nào) — HTML/JS của khối đó đã xóa từ
   trước, giờ dọn nốt CSS cho sạch. Khối "HH.Dịch vụ" MỚI (nằm trong từng CSKD) dùng
   CSS riêng, đặt cạnh CSS "HH.Dịch vụ đi kèm" ở phần II.12 phía trên (.booking-hhi-*).



/* =========================================================
   V. TỔNG TIỀN CỦA BOOKING
   ========================================================= */

.booking-payment {
  background: #efefef;
  border-top: 1px solid #cfd6e4;
  padding: 9px 12px;
}
.booking-payment-grid {
  display: flex;
  justify-content: flex-start;
}
.booking-pay-left { }
.booking-pay-row {
  display: grid;
  grid-template-columns: 1fr 180px;
  align-items: center;
  gap: 8px;
  margin: 5px 0;
}
.booking-pay-label { text-align: left; font-size: 13px; }
.booking-pay-inline { display: flex; gap: 6px; align-items: center; }
.booking-pay-inline input { flex: 1; }
/* ✅ MỚI (theo yêu cầu anh — ô Tổng tiền/Đã thanh toán/Còn lại cao bằng ô khối Địa điểm):
   dùng chung 1 khung (height/padding/border/box-sizing) với ô trong .fac-pickup-panel-row
   (height:27px, viền #cfd6e4, bo góc 4px) — trước đây các ô này KHÔNG có CSS riêng nên bị
   trình duyệt tự vẽ cao hơn (mặc định), không khớp chiều cao với ô "Hà Nội". */
.booking-pay-row input.form-control {
  height: 27px;
  box-sizing: border-box;
  padding: 2px 6px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
}
/* ✅ MỚI (theo yêu cầu anh): nút "..." mở Bảng thanh toán cố định 32x27 (giống nút
   "+"/"Xóa" của khối Địa điểm) để tính được đúng phần cần trừ ở ô Tổng tiền bên dưới. */
.bpt-grand-open-btn { width: 32px; height: 27px; padding: 0; flex: 0 0 auto; }
/* ✅ SỬA (theo yêu cầu anh — đổi chiều: mép phải ô Đã thanh toán/Còn lại = mép phải ô
   Tổng tiền): ô Tổng tiền không có nút/checkbox đi kèm nên width = cột trừ 38px (32px +
   gap 6px, xem rule .bpt-grand-open-btn trên). Giờ áp CHÍNH width đó luôn cho cả khối
   .booking-pay-inline (bọc ngoài input + nút "..."/checkbox của Đã thanh toán/Còn lại) —
   2 khối này thu hẹp lại đúng bằng ô Tổng tiền, nút/checkbox lùi vào theo, nên mép phải
   thẳng hàng nhau. Dùng combinator "> input" để CHỈ trúng ô Tổng tiền (input con trực
   tiếp của .booking-pay-row, không đi qua .booking-pay-inline). */
.booking-pay-row > input.form-control,
.booking-pay-inline {
  width: calc(100% - 38px);
}
/* ✅ MỚI (theo yêu cầu anh — số tiền canh lề phải): Tổng tiền/Đã thanh toán/Còn lại đều
   là ô số tiền (readonly, class js-num) — canh phải cho dễ đọc, giống chuẩn hiển thị
   tiền tệ đang dùng ở các nơi khác trong app. */
.booking-pay-row input.js-num {
  text-align: right;
}


/* =========================================================
   PAY MODAL — BẢNG THEO DÕI THANH TOÁN (dùng chung III + IV + V)
   ========================================================= */

:root {
  --pay-col-1: 100px;
  --pay-col-2: 150px;
  --pay-col-3: 80px;
  --pay-col-4: 100px;
  --pay-col-5: 70px;
  --pay-col-6: 110px;
  --pay-col-7: 160px;
  --pay-col-8: 60px;
  --pay-gap: 5px;
}

#booking-pay-modal { font-size: 13px; }
.pay-modal-header .modal-title { font-weight: 700; }

.pay-modal-header { display: flex; align-items: center; gap: 12px; }
.pay-modal-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.pay-grid-scroll { overflow-x: auto; padding-bottom: 6px; }
.pay-grid-wrap { overflow: visible; padding-bottom: 0; }

.pay-grid {
  display: grid;
  grid-template-columns:
    var(--pay-col-1) var(--pay-col-2) var(--pay-col-3) var(--pay-col-4)
    var(--pay-col-5) var(--pay-col-6) var(--pay-col-7) var(--pay-col-8);
  gap: var(--pay-gap);
  align-items: center;
  width: max-content;
  min-width: 100%;
  font-size: 13px;
}
.pay-grid-header .pay-h {
  background: #f5f7fb;
  border-radius: 14px;
  padding: 9px 10px;
  font-weight: 700;
  font-size: 13px;
  color: #333;
}
.pay-grid-row > div { min-width: 0; }
.pay-grid-row .form-control { width: 100%; box-sizing: border-box; font-size: 13px; }
.pay-row-actions { display: flex; justify-content: flex-start; align-items: center; }
.pay-row-actions .pay-row-del { padding: 6px 12px; border-radius: 10px; }

/* Dòng thanh toán "chỉ xem" (thuộc về CSKD/HH.Dịch vụ, hiện gộp ở Tổng tiền Booking) —
   nền xám nhạt để phân biệt với dòng thanh toán riêng của Booking (sửa được). */
.pay-row-readonly { background: #f5f6f8; border-radius: 10px; }
.pay-row-readonly .form-control { color: #666; cursor: default; }


/* =========================================================
   ĐỒNG BỘ CHIỀU CAO 38px — Khách hàng + Cộng tiền
   ========================================================= */

/* II. Khách hàng — tất cả ô input */
#page-booking .booking-section:first-of-type input:not([type="hidden"]),
#page-booking #booking-customer-name,
#page-booking #booking-guest-count,
#page-booking #booking-guest-adult,
#page-booking #booking-guest-child,
#page-booking #booking-guest-free,
#page-booking #booking-group-name,
#page-booking #booking-customer-source,
#page-booking #booking-customer-desc {
  height: 27px;
  box-sizing: border-box;
}

/* Nút + và i trong khách hàng */
#page-booking #booking-customer-add-btn,
#page-booking #booking-customer-info-btn,
#page-booking #booking-group-add-btn,
#page-booking #booking-group-info-btn {
  height: 27px;
  padding: 0 10px;
}

/* Cụm Cộng tiền — CSKD và HH.Dịch vụ (mỗi CSKD) — ✅ SỬA (13/07): bỏ
   ".booking-hhi-sum-box" (lớp tự chế cũ, đã bỏ) — khối "HH.Dịch vụ" giờ dùng ĐÚNG
   ".booking-sum-box" dùng chung với CSKD (chỉ bọc ngoài bởi ".booking-hhi-sum-wrap"),
   nên rule ".booking-sum-box" bên dưới đã tự áp dụng đúng, không cần khai báo thêm. */
#page-booking .booking-sum-box input,
#page-booking .booking-sum-box .form-control {
  height: 27px !important;
  line-height: 27px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box;
}

/* Nút Thuế phí, ... trong cụm Cộng tiền */
#page-booking .booking-sum-box .btn,
#page-booking #booking-add-bu-btn,
#page-booking #booking-add-charter-btn,
#page-booking .booking-hhi-add-btn,
#page-booking .booking-pick-fac-btn,
#page-booking .bu-pickup-toggle-btn,
#page-booking .booking-remove-bu-btn,
#page-booking .booking-addon-add-btn {
  height: 27px !important;
  line-height: 27px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ô giờ:phút — gộp thành 1 khung duy nhất, giống các ô nhập khác */
.booking-time-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 27px;
  box-sizing: border-box;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  background: #fff;
  padding: 0 6px;
}
.booking-time-cell input {
  width: 34px !important;
  text-align: center;
  border: none !important;
  outline: none;
  background: transparent;
  padding: 0 !important;
  height: 100%;
  -moz-appearance: textfield;
}
.booking-time-cell input::-webkit-inner-spin-button,
.booking-time-cell input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.booking-time-cell.is-locked {
  background: #f3f4f6;
}
.booking-time-cell input:read-only {
  color: #888;
}
.booking-time-sep {
  color: var(--text-secondary);
  font-weight: 500;
  flex-shrink: 0;
}

/* Icon đồng hồ mở khung chọn giờ/phút kiểu cuộn */
.booking-time-clock-btn {
  border: none;
  background: none;
  cursor: pointer;
  padding: 0 0 0 2px;
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
}

/* Khung "Ngày giờ sử dụng" hợp nhất: Ngày + hiển thị Giờ + icon đồng hồ, TẤT CẢ trong 1 khung viền duy nhất */
.booking-dt-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
  height: 27px;
  box-sizing: border-box;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  background: #fff;
  padding: 0 4px;
  width: 100%;
}
.booking-dt-wrap input[type="date"] {
  border: none !important;
  outline: none;
  background: transparent;
  padding: 0 !important;
  height: 100%;
  flex: 1 1 auto;
  min-width: 0;
  width: auto !important;
}
.booking-dt-time-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.booking-dt-time-sep {
  color: var(--text-secondary, #64748b);
  padding: 0 1px;
}
.booking-dt-hour-input,
.booking-dt-min-input {
  width: 18px !important;
  text-align: center;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  height: 100%;
  color: #334155;
  flex-shrink: 0;
  -moz-appearance: textfield;
}
.booking-dt-hour-input::-webkit-inner-spin-button,
.booking-dt-hour-input::-webkit-outer-spin-button,
.booking-dt-min-input::-webkit-inner-spin-button,
.booking-dt-min-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Khung chọn giờ/phút kiểu cuộn dọc (giống bộ chọn giờ trên điện thoại) */
.booking-time-picker-popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 200;
  display: flex;
  gap: 4px;
  width: 120px;
  padding: 6px;
  background: #fff;
  border: 1px solid #d8dee9;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(0,0,0,0.12);
}
.booking-time-picker-col {
  flex: 1;
  max-height: 168px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  text-align: center;
  scrollbar-width: thin;
}
.booking-time-picker-col .tp-item {
  padding: 6px 4px;
  cursor: pointer;
  scroll-snap-align: center;
  border-radius: 4px;
  font-size: 13px;
}
.booking-time-picker-col .tp-item:hover {
  background: #f5f7fb;
}
.booking-time-picker-col .tp-item.selected {
  background: #eaf2ff;
  font-weight: 700;
  color: #1a73e8;
}

/* Căn giữa Số lượng / Đơn giá / Thành tiền / Ngày giờ sử dụng — cả tiêu đề lẫn giá trị,
   áp dụng chung cho CSKD, HH.Dịch vụ đi kèm.
   ✅ SỬA (13/07): bỏ "#page-booking input.hh-price"/".hh-amount"/".booking-hh-datetime"/
   ".hh-qty" (khối "HH.Dịch vụ độc lập" cũ, đã xóa) — khối "HH.Dịch vụ" MỚI dùng class
   ".hhi-price"/".hhi-amount"/".hhi-datetime"/".hhi-qty", đã có CSS riêng ở phần
   ".booking-hhi-row" phía trên (căn phải, không phải căn giữa như bản cũ). */
.booking-fac-row input.fac-price,
.booking-fac-row input.fac-amount,
.booking-addon-row input.addon-price,
.booking-addon-row input.addon-amount {
  text-align: center;
}

.booking-addon-row input.addon-datetime {
  text-align: center;
}

/* Căn giữa ô số lượng */
.booking-fac-row input.fac-qty,
.booking-addon-row input.addon-qty {
  text-align: center;
}

/* Căn giữa tiêu đề các cột tương ứng */
.booking-fac-header > div:nth-child(3),  /* Số lượng */
.booking-fac-header > div:nth-child(4),  /* Đơn giá */
.booking-fac-header > div:nth-child(5),  /* ĐC */
.booking-fac-header > div:nth-child(6) { /* Thành tiền */
  text-align: center;
}
.booking-addon-header > div:nth-child(3),  /* Từ ngày, giờ */
.booking-addon-header > div:nth-child(4) { /* Số lượng */
  text-align: center;
}
/* ✅ MỚI (13/07): tiêu đề cột của khối "HH.Dịch vụ" mới (thay cho ".booking-hh-col-
   header" cũ, khối "HH.Dịch vụ độc lập" đã xóa) — cột 3=Ngày giờ sử dụng, 4=Số lượng,
   5=Đơn giá, 7=Thành tiền, khớp đúng grid-template-columns của .booking-hhi-row. */
.booking-hhi-header > div:nth-child(3),
.booking-hhi-header > div:nth-child(4),
.booking-hhi-header > div:nth-child(5),
.booking-hhi-header > div:nth-child(7) {
  text-align: center;
}

/* Font size toàn bộ Booking = 13px */
#page-booking {
  font-size: 13px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .booking-bu-fields { grid-template-columns: 1fr 1fr; }
  .booking-fac-row   { grid-template-columns: 1fr 1fr; }
  .booking-pay-row   { grid-template-columns: 1fr; }
  .booking-pay-label { text-align: left; }
  .booking-pay-left  { margin-right: 0; }
}

/* ===== Trang Quản lý tài khoản ===== */

/* Kéo khung ra gần sát 2 mép màn hình — bù lại padding 32px hai bên của .content,
   chỉ chừa lại khoảng cách nhỏ ~1 ly cho đỡ dính sát mép */
#page-users {
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 6px;
  padding-right: 6px;
}

/* Bố cục 2 cột: trái = danh sách tài khoản (rộng hơn), phải = ma trận phân quyền */
#page-users .users-perm-layout {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 6px;
  align-items: start;
}
@media (max-width: 1100px) {
  #page-users .users-perm-layout { grid-template-columns: 1fr; }
}
#page-users .users-perm-left,
#page-users .users-perm-right {
  border: 1px solid #e1e5ee;
  border-radius: 6px;
  padding: 14px;
  background: #fff;
}
#page-users .users-perm-subheader {
  padding: 0 0 10px 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #e1e5ee;
}
#page-users .users-perm-subheader h3 {
  margin: 0;
  font-size: 15px;
}

#page-users .user-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1.4fr 85px 105px 80px;
  gap: 6px;
  align-items: center;
  margin-bottom: 10px;
  cursor: pointer;
}
#page-users .user-row-head {
  font-weight: 700;
  border-bottom: 1px solid #cfd6e4;
  padding-bottom: 6px;
  cursor: default;
}
#page-users .user-row input,
#page-users .user-row select {
  width: 100%;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  box-sizing: border-box;
}
/* Cột cuối (nút Xóa / Gửi lại duyệt) — đẩy sát mép phải để nhường bề rộng cho các ô nhập */
#page-users .user-row > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}
/* Dòng tài khoản đang được chọn để xem/đổi quyền bên phải */
#page-users .user-row.user-row-selected {
  background: #eef2ff;
  outline: 2px solid #6366f1;
  border-radius: 4px;
}

/* Ma trận phân quyền bên phải: Chức năng | Xem | Thêm | Sửa | Xóa */
#page-users .perm-row {
  display: grid;
  grid-template-columns: 1fr 60px 60px 60px 60px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid #f0f2f7;
}
#page-users .perm-row-head {
  font-weight: 700;
  border-bottom: 1px solid #cfd6e4;
  padding-bottom: 8px;
}
#page-users .perm-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
#page-users .perm-row.perm-row-disabled {
  opacity: 0.5;
}
#page-users .perm-empty-note,
#page-users .perm-admin-note {
  padding: 20px 0;
  color: #666;
  font-style: italic;
}

/* Panel chọn CSKD (phần 1 của cột phải) — bảng chức năng bên dưới áp dụng riêng cho CSKD
   đang được chọn ở đây (mỗi CSKD 1 bộ quyền Xem/Thêm/Sửa/Xóa riêng). */
#page-users .perm-cskd-panel {
  border: 1px solid #cfd6e4;
  border-radius: 6px;
  margin-bottom: 16px;
  overflow: hidden;
}
#page-users .perm-cskd-panel.hidden { display: none; }
#page-users .perm-cskd-head {
  padding: 8px 12px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
  color: #475569;
  background: #f8fafc;
  border-bottom: 1px solid #e5e9f2;
}
#page-users .perm-cskd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f2f7;
}
#page-users .perm-cskd-row:last-child { border-bottom: none; }
#page-users .perm-cskd-row:hover { background: #f8fafc; }
#page-users .perm-cskd-row.perm-cskd-selected {
  background: #eef2ff;
  font-weight: 700;
  color: #4338ca;
}
/* Chấm xanh nhỏ: CSKD này đã từng được lưu ít nhất 1 quyền */
#page-users .perm-cskd-row .perm-cskd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 8px;
  flex: none;
  visibility: hidden;
}
#page-users .perm-cskd-row.perm-cskd-configured .perm-cskd-dot { visibility: visible; }
#page-users .perm-cskd-row-name { flex: 1; display: flex; align-items: center; }
#page-users .perm-cskd-row-chevron { color: #94a3b8; }

/* ===== PAGE: DANH SÁCH KHÁCH ===== */
.guestlist-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.guestlist-top h2{ margin: 0; font-size: 18px; letter-spacing: .5px; }

.gl-filters{
  display: flex;
  justify-content: flex-end;
  gap: 24px;
  align-items: flex-end;
  margin-bottom: 16px;
}
.gl-filter{ display: flex; flex-direction: column; gap: 6px; position: relative; }
.gl-filter label{ font-weight: 600; font-size: 13px; }
#gl-bu-input{ width: 220px; }
#gl-load-bu-select{ width: 220px; height: 34px; padding: 6px 10px; border: 1px solid #999; border-radius: 2px; font-size: 13px; box-sizing: border-box; background: #fff; }
.gl-filter input{
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  font-size: 13px;
  box-sizing: border-box;
}

/* Dropdown chọn CSKD — style giống trang CƠ SỞ KINH DOANH */
.gl-ac-box{
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  min-width: 240px;
  margin-top: 4px;
}
.gl-ac-box.hidden{ display: none; }
.gl-bu-ac-list{ max-height: 240px; overflow: auto; }
.gl-bu-ac-item{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
}
.gl-bu-ac-item:hover{ background: #f8fafc; }
.gl-bu-ac-item input[type="checkbox"]{ width: 18px; height: 18px; accent-color: #1a73e8; cursor: pointer; }
.gl-bu-ac-footer{ padding: 8px 10px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; }
.gl-bu-ac-footer .btn{ padding: 6px 18px; height: auto; }

/* Dropdown gõ-tìm Tỉnh/Phường (giống ô Tên khách) — 1 khung nổi dùng chung */
#gl-floating-ac{
  position: fixed;
  z-index: 999;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  max-height: 220px;
  overflow: auto;
}
#gl-floating-ac.hidden{ display: none; }
.gl-ac-item{ padding: 6px 10px; font-size: 13px; cursor: pointer; }
.gl-ac-item:hover{ background: #eff6ff; }

.gl-table-wrap{ overflow: auto; border: 1px solid #d1d5db; border-radius: 6px; }
table.gl-table{ border-collapse: collapse; width: 100%; min-width: 2850px; table-layout: fixed; font-size: 13px; }
table.gl-table th, table.gl-table td{
  border: 1px solid #d1d5db;
  padding: 4px 6px;
  text-align: center;
  vertical-align: middle;
}
table.gl-table thead th{ background: #f1f5f9; font-weight: 700; white-space: nowrap; }
/* Chữ tràn dòng -> tự xuống hàng, đẩy cả dòng cao ra, không cắt/ẩn chữ */
table.gl-table td{ white-space: normal; word-break: break-word; }

table.gl-table td.col-tt{ width: 40px; }
table.gl-table td.col-name{ min-width: 140px; text-align: left; }
table.gl-table td.col-gender{ width: 80px; }
table.gl-table td.col-year{ width: 80px; }
table.gl-table td.col-cccd{ width: 130px; }
table.gl-table td.col-tinh{ width: 203px; } /* = Ô Phường */
table.gl-table td.col-phuong{ width: 203px; } /* +20% so với 169px trước đó */
/* Ô Địa chỉ rộng gấp 4 lần các ô thường */
table.gl-table td.col-diachi{ min-width: 392px; text-align: left; }
table.gl-table td.col-quoctich{ width: 169px; } /* +30% so với 130px trước đó */
table.gl-table td.col-ngay{ width: 132px; } /* Ngày đến +20% so với 110px; Ngày về = Ngày đến (dùng chung class) */
table.gl-table td.col-visa{ width: 132px; } /* = Ô Ngày đến */
table.gl-table td.col-phone{ width: 130px; }
/* Ô Email rộng gấp 2 lần các ô thường */
table.gl-table td.col-email{ min-width: 280px; text-align: left; }
table.gl-table td.col-donvi{ width: 300px; } /* gấp đôi 150px trước đó */
table.gl-table td.col-doan{ width: 300px; } /* = Ô Tên đơn vị */

table.gl-table input, table.gl-table select, table.gl-table textarea{
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  font-size: 13px;
  padding: 3px 2px;
  box-sizing: border-box;
}
table.gl-table td.col-name input,
table.gl-table td.col-diachi input,
table.gl-table td.col-email input{ text-align: left; }
table.gl-table input:focus, table.gl-table select:focus, table.gl-table textarea:focus{ background: #fff9db; }
table.gl-table input[readonly]{ color: #64748b; }

/* ✅ Dòng tiêu đề CSKD (giật cấp giống bảng Xếp dịch vụ) — mỗi CSKD trong booking 1 dòng */
table.gl-table tr.gl-group-header td{
  background: #dfeaf7;
  text-align: left;
  font-weight: 700;
  color: #1e293b;
  padding: 7px 10px;
  border-top: 1px solid #cbd5e1;
  border-bottom: 1px solid #cbd5e1;
}
table.gl-table tr.gl-group-header td.gl-group-actions-cell{ padding: 4px 6px; }
table.gl-table tr.gl-group-header .gl-group-actions{ display: flex; gap: 6px; white-space: nowrap; }
table.gl-table tr.gl-group-header .gl-copy-btn,
table.gl-table tr.gl-group-header .gl-paste-btn{
  height: 26px;
  padding: 0 12px;
  font-size: 12px;
  border: none;
  border-radius: 4px;
  background: #1a73e8;
  color: #fff;
  cursor: pointer;
}
table.gl-table tr.gl-group-header .gl-copy-btn:disabled,
table.gl-table tr.gl-group-header .gl-paste-btn:disabled{
  opacity: .4;
  cursor: not-allowed;
}

/* ✅ Ô "Họ và tên" — textarea tự giãn cao khi chữ tràn dòng (input thường không tự
   xuống dòng được), font/line-height khớp với input còn lại cho đồng bộ. */
table.gl-table textarea.gl-autogrow{
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  line-height: 1.4;
  text-align: left;
  min-height: 22px;
  display: block;
}

/* ✅ Chặn cột "TT" + "Họ và tên" — luôn hiện dù kéo bảng sang phải */
table.gl-table tbody td.col-tt{
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fff;
}
table.gl-table tbody td.col-name{
  position: sticky;
  left: 40px; /* = độ rộng cột TT */
  z-index: 3;
  background: #fff;
  box-shadow: 2px 0 4px rgba(0,0,0,0.08); /* viền mờ báo ranh giới vùng bị "khoá" */
}

/* ✅ Chặn dòng tiêu đề — luôn hiện dù kéo bảng xuống dưới */
table.gl-table thead tr:first-child th{
  position: sticky;
  top: 0;
  z-index: 6;
}
table.gl-table thead tr:last-child th{
  position: sticky;
  top: 35px; /* xấp xỉ chiều cao hàng tiêu đề đầu tiên */
  z-index: 6;
}
/* Góc trên-trái (TT + Họ và tên) — vừa chặn dọc vừa chặn ngang cùng lúc, đè lên trên hết */
table.gl-table thead tr:first-child th:nth-child(1){
  position: sticky;
  left: 0;
  top: 0;
  z-index: 9;
}
table.gl-table thead tr:first-child th:nth-child(2){
  position: sticky;
  left: 40px;
  top: 0;
  z-index: 9;
  box-shadow: 2px 0 4px rgba(0,0,0,0.08);
}

/* ✅ Ký tự gõ vào các cột Giới tính/Năm sinh/Ngày đến/Ngày về/Hạn visa -> căn giữa */
table.gl-table td.col-gender select,
table.gl-table td.col-year textarea,
table.gl-table td.col-ngay textarea,
table.gl-table td.col-visa textarea{
  text-align: center;
}
/* ✅ Ký tự gõ vào cột Số CCCD/Hộ chiếu -> căn phải */
table.gl-table td.col-cccd textarea{
  text-align: right;
}

/* ✅ Nút lịch nhỏ cạnh ô Hạn visa — bấm để mở lịch chọn ngày thay vì gõ tay */
table.gl-table td.col-visa{ position: relative; }
table.gl-table td.col-visa textarea.gl-hanvisa{ padding-right: 16px; }
table.gl-table .gl-visa-cal-btn{
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  z-index: 2;
}
table.gl-table .gl-hanvisa-date{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* ===== Danh mục: Tài sản ===== */
#page-assets .asset-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
}

#page-assets .asset-main-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 16px;
  align-items: start;
}

#page-assets .asset-left-panel,
#page-assets .asset-right-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: #fff;
}

#page-assets .asset-left-title,
#page-assets .asset-right-title {
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1e293b;
}
#page-assets .asset-right-title .btn { width: 32px; height: 27px; padding: 0; }

#page-assets .asset-block { margin-bottom: 16px; }
#page-assets .asset-block:last-child { margin-bottom: 0; }

#page-assets .asset-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #dfeaf7;
  padding: 6px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
#page-assets .asset-block-header .asset-block-idx { font-weight: 700; }
#page-assets .asset-block-header .asset-block-title-input {
  flex: 1;
  height: 27px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
}
#page-assets .asset-block-header .asset-block-sohieu-input {
  width: 150px;
  height: 27px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 400;
  background: #fff;
}
#page-assets .asset-block-header .btn { height: 27px; padding: 0 10px; font-size: 12px; white-space: nowrap; }

#page-assets .asset-fac-row {
  display: grid;
  grid-template-columns: 36px 1.4fr 113px 1fr 90px 90px 70px 32px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid #eef1f5;
}
#page-assets .asset-fac-row.header {
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #cbd5e1;
  font-size: 12px;
}
#page-assets .asset-fac-row input {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
}
#page-assets .asset-fac-row.selected {
  background: #eef4ff;
  border-radius: 4px;
  outline: 1px solid #1557b0;
}
#page-assets .asset-fac-row .asset-fac-del-btn { width: 100%; height: 27px; padding: 0; font-size: 12px; }
#page-assets .asset-fac-row .asset-fac-tt { text-align: center; padding: 2px 2px; }

#page-assets .asset-info-empty-hint {
  color: #94a3b8;
  font-size: 13px;
  padding: 24px 0;
  text-align: center;
}

#page-assets .asset-info-row {
  display: grid;
  grid-template-columns: 32px 1fr 110px 32px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid #eef1f5;
}
#page-assets .asset-info-row.header {
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #cbd5e1;
  font-size: 12px;
}
#page-assets .asset-info-row input {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
}
#page-assets .asset-info-row .asset-info-del-btn { width: 100%; height: 27px; padding: 0; font-size: 12px; }

#page-assets .asset-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

#asset-cskd-modal .asset-cskd-modal-list {
  max-height: 320px;
  overflow: auto;
  margin: 10px 0;
}
#asset-cskd-modal .asset-cskd-modal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px;
  border-bottom: 1px solid #eef1f5;
}
#asset-cskd-modal .asset-cskd-modal-row .btn { height: 27px; padding: 0 14px; font-size: 12px; }
/* ✅ MỚI: khoá cuộn body khi đang ở trang Xếp dịch vụ — đảm bảo CHỈ CÒN 1 scrollbar
   duy nhất (bên trong .xdv-table-wrap), không còn thanh cuộn ngoài cùng của cả trang. */
/* ✅ MỚI (theo yêu cầu anh): kéo khung bao NGOÀI CÙNG sát ra 2 mép trái/phải màn hình —
   cùng kỹ thuật đã dùng ở trang Bảng giá CSKD (bù lại padding 32px của .content bằng
   margin âm, chỉ chừa lại 8px). Đồng thời giảm padding ngang của .card để khung mảng
   trái (bảng) và khung mảng phải (Tài sản) áp SÁT vào khung bao ngoài, không còn hở. */
#page-xep-dich-vu {
  margin-left: -32px;
  margin-right: -32px;
  margin-top: -8px;
  padding-left: 4px;
  padding-right: 4px;
}
#page-xep-dich-vu > .card {
  padding: 6px 4px 4px;
}

body.xdv-page-noscroll { overflow: hidden; }
body.biz-page-noscroll { overflow: hidden; }

/* ===== Vận hành: Xếp dịch vụ ===== */
/* ✅ MỚI (theo yêu cầu anh): mở rộng khung bao ra hết cả chiều ngang lẫn chiều cao còn
   lại của màn hình, khoảng cách giữa các khung bao chỉ còn ~1 li; bỏ scrollbar NGOÀI
   CÙNG của cả trang — chỉ còn đúng 1 scrollbar bên trong bảng. Chiều cao thật được ĐO
   BẰNG JS (xem fixXdvTableWrapHeight() trong app-van-hanh.js) — không đoán mò bằng CSS
   calc(100vh...) vì từng bị lệch/cắt mất dữ liệu ở trang Danh sách khách. */
#page-xep-dich-vu .xdv-header-buttons { display: flex; gap: 8px; }
#page-xep-dich-vu > .card { margin-bottom: 4px; }
/* ✅ SỬA (19/07, theo yêu cầu anh) — LÀM LẠI CHO AN TOÀN: lần trước dùng position:absolute
   + margin-top: -14px khiến cả khối tiêu đề + nút SỬA/LƯU bị đẩy lên khuất sau thanh menu
   trên cùng (không thấy, không bấm được). Giờ đổi sang CSS Grid 3 cột (trái/giữa/phải) —
   nút vẫn nằm GIỮA thanh tiêu đề nhưng luôn ở trong luồng bình thường, không thể bị che
   khuất bởi phần tử khác nữa. */
#page-xep-dich-vu .card-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
#page-xep-dich-vu .card-header h2 { grid-column: 1; margin: 0; }
#page-xep-dich-vu .xdv-header-buttons { grid-column: 2; justify-self: center; }
/* ✅ SỬA (19/07, theo yêu cầu anh): GIẢM chiều cao nút SỬA/LƯU xuống ~3 li so với ban
   đầu (30px -> 24px) — lần trước em làm NHẦM thành tăng lên, giờ sửa lại đúng chiều. */
#page-xep-dich-vu .xdv-header-buttons .btn { height: 24px; padding: 0 10px; }
#page-xep-dich-vu .xdv-header-buttons .btn:disabled { opacity: .45; cursor: not-allowed; }

#page-xep-dich-vu .xdv-main-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 6px;
  align-items: stretch;
}

#page-xep-dich-vu .xdv-left-panel,
#page-xep-dich-vu .xdv-right-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* ✅ SỬA (19/07, theo yêu cầu anh): giảm khoảng trống PHÍA TRÊN (trước dòng "Chọn
     CSKD"/"Chọn Tên Tài sản") xuống chỉ còn ~2 li, kéo cả khối lọc lên sát viền khung. */
  padding: 4px 10px 10px;
  background: #fff;
}

#page-xep-dich-vu .xdv-left-panel.xdv-readonly {
  opacity: .6;
  pointer-events: none;
  user-select: none;
}
/* ✅ SỬA (19/07, phát hiện qua báo lỗi của anh): nút "Làm mới" nằm TRONG .xdv-left-panel
   nên trước đây dù JS đã cho hiện, nút vẫn bị pointer-events:none của khung cha (đang
   khoá vì không ở chế độ SỬA) chặn mất, click không có tác dụng gì — đây là lý do "nút Làm
   mới không có hiệu lực". Cho riêng nút này LUÔN bấm được, kể cả khi màn hình đang khoá,
   vì "Làm mới" chỉ đọc dữ liệu mới, không sửa gì nên an toàn để dùng bất cứ lúc nào. */
#page-xep-dich-vu .xdv-left-panel.xdv-readonly #xdv-refresh-btn {
  pointer-events: auto;
  opacity: 1;
  cursor: pointer;
}

#page-xep-dich-vu .xdv-filter-row {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef1f5;
}
#page-xep-dich-vu .xdv-filter-field { display: flex; flex-direction: column; gap: 4px; }
#page-xep-dich-vu .xdv-filter-field label { font-size: 12px; color: #64748b; font-weight: 600; }
#page-xep-dich-vu .xdv-filter-field input[type="text"],
#page-xep-dich-vu .xdv-filter-field input[type="date"] {
  height: 30px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  min-width: 170px;
}
#page-xep-dich-vu .xdv-checkbox-field { flex-direction: row; align-items: center; }
#page-xep-dich-vu .xdv-checkbox-field label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; color: #1e293b; font-weight: 500;
  white-space: nowrap;
}
#page-xep-dich-vu .xdv-checkbox-field input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1a73e8; cursor: pointer; }
#page-xep-dich-vu #xdv-refresh-btn { height: 30px; padding: 0 14px; margin-left: auto; }

#page-xep-dich-vu .xdv-ac-wrap { position: relative; }
#page-xep-dich-vu .xdv-ac-box {
  position: absolute; top: 34px; left: 0; z-index: 20;
  width: 260px; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
#page-xep-dich-vu .xdv-ac-list { max-height: 240px; overflow: auto; }
#page-xep-dich-vu .xdv-ac-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; cursor: pointer; font-size: 13px;
}
#page-xep-dich-vu .xdv-ac-item:hover { background: #f8fafc; }
#page-xep-dich-vu .xdv-ac-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #1a73e8; cursor: pointer; }
#page-xep-dich-vu .xdv-ac-footer { padding: 8px 10px; border-top: 1px solid #e2e8f0; display: flex; justify-content: flex-end; }
#page-xep-dich-vu .xdv-ac-footer .btn { padding: 6px 18px; height: auto; }

/* ✅ MỚI (22/07/2026, theo yêu cầu anh): modal "BẢNG TÀI SẢN" — lưới chọn nhiều Tài sản. */
#asg-asset-picker-modal .asg-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #e2e8f0;
}
#asg-asset-picker-modal .asg-picker-title { font-weight: 700; font-size: 16px; color: #1e293b; }
#asg-asset-picker-modal .asg-picker-actions { display: flex; gap: 8px; }
#asg-asset-picker-modal .modal-body { padding: 16px; max-height: 78vh; overflow: auto; }

/* Kết cấu: mỗi hàng 4 ô, nhiều hơn tự xuống hàng tiếp theo — xếp đúng thứ tự Danh mục
   Tài sản từ trái qua phải (thứ tự DOM = thứ tự asgAssetBlocks, không cần JS can thiệp). */
#asg-picker-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
/* Cao đủ cho 4 dòng Lịch trình mặc định — nhiều hơn 4 dòng thì TỰ GIÃN ô xuống dưới
   (min-height thay vì height cố định), không cắt/ẩn bớt dòng nào. */
#asg-picker-grid .asg-pick-cell {
  min-height: 128px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff9e6;
  padding: 10px 12px;
  cursor: pointer;
  transition: outline-color .1s;
}
#asg-picker-grid .asg-pick-cell-name {
  font-weight: 700; text-align: center; color: #1e293b; margin-bottom: 6px;
}
#asg-picker-grid .asg-pick-cell-sched {
  font-size: 12.5px; text-align: center; color: #334155; line-height: 1.55;
}
/* phần "còn trống" (2 số cuối trong ngoặc) hiện chữ đỏ, theo đúng yêu cầu anh */
#asg-picker-grid .asg-pick-cell-sched .asg-pick-vacant { color: #dc2626; }
#asg-picker-grid .asg-pick-cell-empty {
  font-size: 12px; text-align: center; color: #94a3b8; font-style: italic;
}
/* Viền xanh "đi theo con trỏ" — y hệt cơ chế chọn Cơ sở ở Lưới chiếm dụng
   (#page-business .biz-cell.biz-select-hover/.biz-cell-selected). */
#asg-picker-grid .asg-pick-cell.asg-pick-hover {
  outline: 2px solid #2563eb; outline-offset: -2px;
}
#asg-picker-grid .asg-pick-cell.asg-pick-selected {
  outline: 3px solid #2563eb; outline-offset: -3px;
  background: #fef3c7;
}


#page-xep-dich-vu .xdv-table-wrap { overflow: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }
#page-xep-dich-vu .xdv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#page-xep-dich-vu .xdv-table th {
  position: sticky; top: 0; z-index: 5;
  background: #eef2f7; color: #334155; font-weight: 700;
  padding: 8px 6px; text-align: left; border-bottom: 1px solid #cbd5e1; white-space: nowrap;
}
#page-xep-dich-vu .xdv-table td { padding: 3px 6px; border-bottom: 1px solid #eef1f5; vertical-align: middle; }
#page-xep-dich-vu .xdv-table .col-tt { min-width: 42px; text-align: center; color: #64748b; }
#page-xep-dich-vu .xdv-table .col-doankhach { min-width: 103px; }
#page-xep-dich-vu .xdv-table .col-cskdten { min-width: 217px; }
#page-xep-dich-vu .xdv-table .col-loai { min-width: 60px; }
#page-xep-dich-vu .xdv-table .col-tungay,
#page-xep-dich-vu .xdv-table .col-denngay { min-width: 130px; white-space: nowrap; }
#page-xep-dich-vu .xdv-table .col-daxep { min-width: 110px; }
/* ✅ Cấp 1 (dòng CSKD), Cấp 2 (Đoàn khách), Cấp 3 (CSKD/Tên Cơ sở + Dòng khách) đều
   dùng colspan để chữ TRÀN HẾT CỠ sang các cột bên phải (theo yêu cầu anh) — không ép
   width/table-layout cố định nữa (đó là nguyên nhân gây lỗi chữ bị bóp xuống dòng từng
   ký tự một ở bản trước). */
#page-xep-dich-vu .xdv-table td[colspan] { white-space: normal; }

#page-xep-dich-vu .xdv-group-header td {
  background: #dfeaf7; font-weight: 700; color: #1e293b;
  padding: 7px 8px; border-bottom: 1px solid #cbd5e1;
}
#page-xep-dich-vu .xdv-doan-row td { background: #f8fafc; }
#page-xep-dich-vu .xdv-doan-row .col-doankhach { padding-left: 6px; }
#page-xep-dich-vu .xdv-facility-row td { background: #fff; font-weight: 700; color: #334155; }
#page-xep-dich-vu .xdv-facility-row .col-cskdten,
#page-xep-dich-vu .xdv-guest-row .col-cskdten { padding-left: 18px; }
#page-xep-dich-vu .xdv-guest-row td { background: #fff; }

/* ✅ MỚI (19/07, theo yêu cầu anh): bỏ cột "Chọn" (checkbox) — giờ click thẳng vào dòng
   khách để chọn/bỏ chọn. Dòng đang chọn thì MỜ ĐI, click lần nữa NỔI LÊN (bỏ chọn). Chỉ
   cho click khi đang ở chế độ SỬA (readonly wrapper đã tự chặn pointer-events khi khoá). */
#page-xep-dich-vu .xdv-left-panel:not(.xdv-readonly) .xdv-guest-row { cursor: pointer; }
#page-xep-dich-vu .xdv-left-panel:not(.xdv-readonly) .xdv-guest-row:hover td { background: #f1f5f9; }
/* ✅ MỚI (19/07, theo yêu cầu anh): khách ĐÃ ĐƯỢC XẾP rồi -> không cho click chọn lại,
   con trỏ đổi thành not-allowed + bỏ hiệu ứng hover để không gây hiểu nhầm là bấm được. */
#page-xep-dich-vu .xdv-guest-row.xdv-guest-assigned { cursor: not-allowed; }
#page-xep-dich-vu .xdv-guest-row.xdv-guest-assigned:hover td { background: inherit; }
#page-xep-dich-vu .xdv-guest-row.xdv-selected td { opacity: .35; }
#page-xep-dich-vu .xdv-guest-row.xdv-selected:hover td { opacity: .5; }


/* ✅ MỚI (19/07, theo yêu cầu anh): phần "(Tính chất)" ở dòng tiêu đề Cơ sở (Cấp 3) hiện
   màu đỏ để nổi bật, tách biệt với Tên CSKD/Tên cơ sở và Lịch trình. */
#page-xep-dich-vu .xdv-property-tag { color: #dc2626; font-weight: 700; }

#page-xep-dich-vu .xdv-guest-info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 6px;
  border-radius: 50%; border: none; background: #1a73e8; color: #fff;
  font-size: 10px; font-weight: 700; font-style: italic; cursor: pointer; line-height: 1;
  pointer-events: auto;
}

#page-xep-dich-vu .xdv-empty-hint { text-align: center; color: #94a3b8; padding: 24px 0; }

#page-xep-dich-vu .xdv-right-panel { min-height: 200px; overflow: auto; }
#page-xep-dich-vu .xdv-right-hint { color: #94a3b8; font-size: 13px; text-align: center; padding: 40px 10px; }

/* ========================================================================
   MẢNG PHẢI — "GÁN TÀI SẢN" (19/07/2026, theo yêu cầu anh)
   ======================================================================== */
#page-xep-dich-vu .asg-filters {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #eef1f5;
}
#page-xep-dich-vu .asg-field { display: flex; flex-direction: column; gap: 4px; }
#page-xep-dich-vu .asg-field label { font-size: 12px; color: #64748b; font-weight: 600; }
#page-xep-dich-vu .asg-filter-row2 { display: flex; gap: 10px; }
#page-xep-dich-vu .asg-filter-row2 .asg-field { flex: 1.15; min-width: 0; }
/* ✅ SỬA (19/07, theo yêu cầu anh): thu hẹp ô Lịch trình lại, nhường chiều rộng cho 2 ô
   Từ ngày giờ/Đến ngày giờ (trước đó bị khuất chữ, ví dụ chỉ hiện "14:(" thay vì "14:00"). */
#page-xep-dich-vu .asg-filter-row2 .asg-field-schedule { flex: 0.85; }

#page-xep-dich-vu .asg-ac-wrap { position: relative; }
/* Ô "Chọn Tên Tài sản" — textarea TỰ GIÃN CAO khi chữ tràn dòng (nhiều Tài sản), thay vì
   cắt bớt/ẩn chữ — đúng yêu cầu anh "ký tự tràn cho giãn ô xuống dưới". */
#page-xep-dich-vu .asg-asset-textarea {
  width: 100%; min-height: 32px; max-height: 90px; overflow-y: auto; resize: none;
  border: 1px solid #cbd5e1; border-radius: 4px; padding: 6px 8px;
  font-size: 13px; font-family: inherit; cursor: pointer; background: #fff;
}
#page-xep-dich-vu .asg-field input[type="text"] {
  height: 32px; border: 1px solid #cbd5e1; border-radius: 4px;
  padding: 2px 8px; font-size: 13px; width: 100%; box-sizing: border-box;
}
#page-xep-dich-vu #asg-schedule-input { cursor: pointer; }
#page-xep-dich-vu #asg-tungay-input,
#page-xep-dich-vu #asg-denngay-input { background: #f8fafc; color: #475569; }

#page-xep-dich-vu .asg-assets-wrap { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
#page-xep-dich-vu .asg-empty-hint { color: #94a3b8; font-size: 13px; text-align: center; padding: 30px 10px; }

#page-xep-dich-vu .asg-asset-heading {
  font-weight: 700; color: #1557b0; font-size: 13px;
  background: #eef4ff; padding: 5px 8px; border-radius: 4px; margin: 10px 0 6px;
}
#page-xep-dich-vu .asg-asset-heading:first-child { margin-top: 0; }
#page-xep-dich-vu .asg-fac-cards { display: flex; flex-direction: column; gap: 6px; }

/* ✅ SỬA (19/07, theo yêu cầu anh — làm lại chắc chắn hơn): 2 lần sửa trước dùng
   position:absolute + flex-end đều không chắc ăn (phụ thuộc thẻ có cao hơn nội dung hay
   không). Giờ đổi cấu trúc: nút X/M nằm chung 1 hàng NGANG HÀNG THẬT SỰ với dòng "Tên cơ
   sở..." (xem .asg-fac-main-row) — dù phía trên có bao nhiêu dòng "đã xếp" chồng lên, 2
   nút vẫn luôn đúng ngang dòng Tên cơ sở, không cần đoán khoảng trống của thẻ nữa. */
#page-xep-dich-vu .asg-fac-card {
  position: relative;
  display: flex; gap: 8px;
  border: 1px solid #94a3b8; border-radius: 6px; padding: 6px 8px;
  min-height: 60px; background: #fff;
  cursor: pointer;
}
/* ✅ SỬA (19/07, theo yêu cầu anh — ghi chú lại cho đúng):
   1. Bấm M -> CHỈ đúng thẻ vừa bấm hiện viền vàng NÉT LIỀN (asg-move-source) — các thẻ
      khác KHÔNG hiện gì cả lúc này.
   2. Viền vàng NÉT ĐỨT không tô sẵn nữa — chỉ hiện khi RÊ CHUỘT vào 1 thẻ khác trong lúc
      đang Chuyển (":hover", scoped trong ".asg-moving" — chỉ bật khi thật sự đang Chuyển). */
#page-xep-dich-vu .asg-fac-card.asg-move-source {
  border: 2px solid #f59e0b;
  background: #fffbeb;
}
#page-xep-dich-vu .asg-fac-cards.asg-moving .asg-fac-card:not(.asg-move-source):hover {
  border: 2px dashed #f59e0b;
  background: #fffbeb;
}
#page-xep-dich-vu .asg-fac-card-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
  justify-content: flex-end;
}
#page-xep-dich-vu .asg-fac-card input,
#page-xep-dich-vu .asg-fac-card-actions { cursor: default; }
/* ✅ SỬA (19/07, theo yêu cầu anh): bỏ chữ đậm ở dòng khách đã xếp. */
#page-xep-dich-vu .asg-fac-assigned-line {
  font-size: 13px; color: #1a73e8; font-weight: 400; word-break: break-word;
}
/* ✅ MỚI (19/07, theo yêu cầu anh): dòng 2 "CSKD/Cơ sở (Tính chất) - Lịch trình" — nhạt
   hơn dòng 1 (khách hàng) 1 chút để phân biệt, chữ nhỏ hơn đôi chút cho gọn. */
#page-xep-dich-vu .asg-fac-assigned-source {
  font-size: 12px; color: #5b8def; font-weight: 400; word-break: break-word;
}
/* ✅ MỚI: hàng chứa dòng "Tên cơ sở..." + 2 nút X/M — CÙNG 1 HÀNG NGANG THẬT SỰ. */
#page-xep-dich-vu .asg-fac-main-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
/* ✅ SỬA (19/07, theo yêu cầu anh): cỡ chữ = cỡ chữ bảng bên trái (13px, xem .xdv-table). */
#page-xep-dich-vu .asg-fac-main-line {
  flex: 1; min-width: 0;
  font-size: 13px; color: #1e293b; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
/* ✅ MỚI (19/07, theo yêu cầu anh): Tính chất trong dòng Tên cơ sở hiện màu đỏ. */
#page-xep-dich-vu .asg-fac-property-tag { color: #dc2626; }
#page-xep-dich-vu .asg-fac-ext-label { color: #1e293b; }
#page-xep-dich-vu .asg-fac-ext-input {
  width: 46px; height: 20px; border: 1px solid #cbd5e1; border-radius: 3px;
  padding: 0 4px; font-size: 13px; text-align: center;
}

/* ✅ SỬA (19/07, theo yêu cầu anh): nút X/M nhỏ đi 40% (22px -> 13px), nằm NGANG HÀNG
   THẬT SỰ với dòng Tên cơ sở (xem .asg-fac-main-row) — không còn ghim tuyệt đối theo cả
   thẻ nữa (cách cũ không chắc ăn khi thẻ có nhiều dòng "đã xếp" chồng lên phía trên). */
#page-xep-dich-vu .asg-fac-card-actions {
  flex: none; display: flex; align-items: center; gap: 4px;
}
#page-xep-dich-vu .asg-fac-del-btn,
#page-xep-dich-vu .asg-fac-note-btn {
  width: 13px; height: 13px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; cursor: pointer; color: #fff; line-height: 1;
}
#page-xep-dich-vu .asg-fac-del-btn { background: #fff; color: #ef4444; border: 1px solid #ef4444; }
#page-xep-dich-vu .asg-fac-del-btn:hover { background: #fef2f2; }
#page-xep-dich-vu .asg-fac-note-btn { background: #1a73e8; }
#page-xep-dich-vu .asg-fac-note-btn:hover { background: #1557b0; }

/* ========================================================================
   CSS RIÊNG CHO BẢNG GIÁ CSKD CHARTER (18/07/2026, theo yêu cầu anh)
   Nhân bản NGUYÊN VẸN toàn bộ CSS của "Bảng giá CSKD" thường ở trên, đổi
   hết id/class "page-price-bu"/"price-bu-..." thành "page-price-bu-
   charter"/"price-bu-charter-..." để khớp đúng DOM riêng của trang
   page-price-bu-charter (không đụng chạm gì tới CSS của trang gốc).
   ======================================================================== */

/* ================== BẢNG GIÁ CSKD ================== */

/* ✅ MỚI: kéo trang này sát ra 2 mép trái/phải (chỉ còn ~2 ly), riêng cho trang Bảng
   giá CSKD — không đụng tới padding chung .content (đang dùng cho mọi trang khác).
   Bù lại phần padding-left/right 32px của .content bằng margin âm, rồi chỉ chừa lại
   8px (~2 ly) bằng padding riêng của chính trang này. */
#page-price-bu-charter {
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Layout 2 cột trong page Bảng giá */
#page-price-bu-charter .row {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* ✅ khoảng cách giữa khung trái/phải còn ~2 ly (trước là 14px) */
}

/* Bên trái: Bảng giá rộng 66% */
#page-price-bu-charter .price-bu-charter-left {
  flex: 0 0 calc(66% + 2cm);
  max-width: calc(66% + 2cm);
  padding-left: 0;
}

/* Bên phải: Áp dụng CSKD + KH */
#page-price-bu-charter .price-bu-charter-right {
  flex: 0 0 calc(33% - 2cm);
  max-width: calc(33% - 2cm);
}

@media (max-width: 992px) {
  #page-price-bu-charter .row {
    flex-direction: column;
  }
  #page-price-bu-charter .price-bu-charter-left,
  #page-price-bu-charter .price-bu-charter-right {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Bỏ khung card bên trái cho thoáng */
#page-price-bu-charter .price-bu-charter-left .card {
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
}

#page-price-bu-charter .price-bu-charter-left .card-header {
  padding-left: 0;
}

#page-price-bu-charter .price-bu-charter-left .card-body {
  padding: 0;
}

/* Bảng giá trái full width */
.price-bu-charter-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
}

.price-bu-charter-row {
  display: grid;
  grid-template-columns: 2.1fr 0.85fr 0.85fr 2fr 220px 40px 40px;
  align-items: center;
  column-gap: 6px;
  padding: 4px 6px;
  border-bottom: 1px solid #e0e8f5;
  background: #fdfefe;
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}

/* ✅ MỚI (theo yêu cầu anh): nút Thứ áp dụng + Sửa/Xóa TO hơn, dễ bấm hơn — chỉ áp dụng
   riêng cho trang Bảng giá CSKD Charter, không đụng tới trang Bảng giá CSKD thường. */
#page-price-bu-charter .price-day-btn {
  flex: 0 0 26px;
  width: 26px;
  height: 27px;
  padding: 0;
  font-size: 10px;
  box-sizing: border-box;
}
#page-price-bu-charter .price-bu-charter-row .price-row-edit-btn,
#page-price-bu-charter .price-bu-charter-row button.btn-danger {
  padding: 0;
  font-size: 11px;
  font-weight: 700;
  width: 40px;
  height: 27px !important;
  min-height: 27px;
  max-height: 27px;
  box-sizing: border-box;
  align-self: center;
}

/* ✅ MỚI: khung gộp khi 1 "bảng giá" có từ 2 Lịch trình trở lên — chỉ dòng ĐẦU tiên
   hiện Tên bảng giá/Từ ngày/Đến ngày, các dòng "nối tiếp" bên dưới chỉ hiện Lịch
   trình + Thứ áp dụng, tất cả nằm trong 1 khung viền duy nhất (xem
   priceBuSplitRowBySchedules trong app-bang-gia.js). */
.price-bu-charter-group {
  background: #fdfefe;
}
.price-bu-charter-group .price-bu-charter-row:last-child {
  border-bottom: none;
}
/* Dòng "nối tiếp" (2, 3...) — chỉ hiện ô Lịch trình, ẩn hết các ô còn lại (Tên bảng
   giá/Từ ngày/Đến ngày/Thứ áp dụng/Sửa/Xóa) — để trống chỗ cho thẳng cột với dòng
   đầu, không lặp lại/thừa nội dung. */
.price-bu-charter-row-cont > div:nth-child(1),
.price-bu-charter-row-cont > div:nth-child(2),
.price-bu-charter-row-cont > div:nth-child(3),
.price-bu-charter-row-cont > div:nth-child(5),
.price-bu-charter-row-cont > div:nth-child(6),
.price-bu-charter-row-cont > div:nth-child(7) {
  visibility: hidden;
}

/* để autocomplete (.ac-box) bám theo input trong từng ô */
.price-bu-charter-row > div{ position: relative; }

/* ✅ MỚI: dropdown chọn NHIỀU lịch trình ở Bảng giá CSKD — cùng kiểu với "Chọn CSKD"
   (checkbox + nút Đồng ý), thay cho kiểu ô tự hoàn thành cũ. */
.price-sched-ac{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  margin-top: 2px;
  /* ✅ MỚI (theo yêu cầu anh): đủ rộng để đọc trọn tên dài — trước đây ô hẹp + chữ
     "nowrap" khiến 2 lịch trình khác tên (chỉ khác đoạn cuối, vd "...1 ngày" và
     "...2 ngày") bị cắt trông giống hệt nhau, tưởng nhầm là bị trùng tên. */
  min-width: 260px;
}
.price-sched-ac-list{
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
}
.price-sched-ac-item{
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 2.5px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  /* ✅ SỬA: cho chữ dài tự xuống dòng thay vì "nowrap" + cuộn ngang như trước — chữ
     nowrap là nguyên nhân chính gây nhầm 2 tên khác nhau trông như trùng tên. */
  white-space: normal;
}
.price-sched-ac-item span{
  flex: 1 1 auto;
}
.price-sched-ac-item:hover{
  background: #f8fafc;
}
.price-sched-ac-item input[type="checkbox"]{
  width: 14px;
  height: 14px;
  transform: scale(0.6);
  transform-origin: center;
  accent-color: #1a73e8;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

/* ✅ MỚI: dropdown "Chọn CSKD" ở Danh mục Lý do điều chỉnh — ô textarea đứng trong cột
   hẹp nên KHÔNG bó chiều rộng dropdown theo đúng chiều rộng ô nữa (right:0 mặc định của
   .price-sched-ac) — để chữ CSKD không bị xuống dòng, checkbox thẳng cột đẹp.
   ⚠️ SỬA (16/07): "width:max-content" trước đây làm chiều rộng không ổn định (list dùng
   space-between co giãn theo chiều rộng cha, mà cha lại tự co theo con -> vòng lặp không
   hội tụ), sinh ra thanh cuộn ngang + checkbox lệch. Đổi sang CHIỀU RỘNG CỐ ĐỊNH đơn giản. */
.adj-reason-cskd-ac{
  right: auto !important;
  width: 220px;
}
.adj-reason-cskd-ac .price-sched-ac-list{
  overflow-x: hidden;
}
.price-sched-ac-footer{
  padding: 8px 10px;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
}
.price-sched-ac-ok{
  padding: 6px 18px;
}

/* hover để người dùng nhìn rõ đang ở bảng giá nào */
.price-bu-charter-row:not(.header):hover{
  background: #fff9e3;
}

.price-bu-charter-row:last-child {
  border-bottom: none;
}

.price-bu-charter-row.header {
  background: var(--blue-light);
  font-weight: bold;
  border: none;
}

.price-bu-charter-row.header > div {
  text-align: center;
  white-space: nowrap;
}

.price-bu-charter-row.header > div:first-child {
  text-align: left;
  padding-left: 6px;
}

/* Hiệu ứng chọn dòng */
.price-bu-charter-row.selected {
  background: #fff4c7;
  box-shadow: 0 0 0 1px #f1c96b;
}

.price-bu-charter-row input[type="text"],
.price-bu-charter-row input[type="date"],
.price-bu-charter-row select {
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 12px;
}

/* Cụm chọn thứ */
.price-bu-charter-weekdays {
  display: flex;
  flex-wrap: nowrap;
  gap: 2px;
}

.price-day-btn {
  padding: 2px 4px;
  font-size: 10px;
  min-width: 0;
  flex: 1 1 0;
}

/* ===== ÁP DỤNG CSKD ===== */
.price-bu-charter-cskd-card,
.price-bu-charter-customer-card {
  margin-bottom: 14px;
}

.price-bu-charter-cskd-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  font-size: 12px;
}

.price-bu-charter-cskd-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  column-gap: 6px;
  align-items: center;
  padding: 4px 3px;
  border-bottom: 1px solid #e0e8f5;
}
.price-bu-charter-cskd-row input.js-num {
  text-align: right;
}

.price-bu-charter-cskd-row.header {
  background: var(--blue-light);
  font-weight: bold;
}

.price-bu-charter-cskd-row:last-child {
  border-bottom: none;
}

.price-bu-charter-cskd-row input {
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 12px;
}

/* Ẩn nếu HTML còn cột thừa */
#page-price-bu-charter .price-bu-charter-cskd-row > div:nth-child(2).extra {
  display: none;
}

/* ===== ÁP DỤNG KHÁCH HÀNG ===== */
.price-bu-charter-customer-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  font-size: 12px;
}

.price-bu-charter-customer-row {
  display: grid;
  grid-template-columns: 2fr 80px 70px;
  column-gap: 6px;
  align-items: center;
  padding: 4px 3px;
  border-bottom: 1px solid #e0e8f5;
}

.price-bu-charter-customer-row.header {
  background: var(--blue-light);
  font-weight: bold;
}

.price-bu-charter-customer-row:last-child {
  border-bottom: none;
}

.price-bu-charter-customer-row input {
  width: 100%;
  height: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid var(--border);
  font-size: 12px;
}

.price-bu-charter-cust-col-select {
  text-align: center;
}

.price-bu-charter-cust-col-actions {
  display: flex;
  justify-content: center;
}
/* Ghi chú / thông báo lỗi ở tab Bảng giá CSKD */
.price-bu-charter-messages {
  margin-top: 8px;
  padding: 6px 10px;
  border: 1px solid #ffb3b3;
  background: #fff5f5;
  font-size: 12px;
  color: #b71c1c;
  border-radius: 4px;
}

.price-bu-charter-messages ul {
  margin: 4px 0 0 18px;
  padding: 0;
}

.price-bu-charter-messages li {
  margin-bottom: 2px;
}

/* Một chút chỉnh khoảng cách chung trong page Bảng giá */
#page-price-bu-charter .card h2 {
  margin-bottom: 6px;
}

#page-price-bu-charter .card-header {
  margin-bottom: 6px;
}

/* Đảm bảo khối bên phải dãn đều các card */
#page-price-bu-charter .price-bu-charter-right .price-bu-charter-cskd-card,
#page-price-bu-charter .price-bu-charter-right .price-bu-charter-customer-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px;
  background: #fff;
}

/* Trạng thái khóa Bảng giá CSKD — khóa THEO TỪNG DÒNG (không phải cả trang): mặc định
   TẤT CẢ input/button trong trang đều bị khóa (không gõ/bấm được), CHỈ mở khóa cho đúng
   1 dòng bên trái đang có class "editing" (dòng vừa bấm "Sửa") VÀ panel "Áp dụng..." bên
   phải (vì nó luôn hiển thị đúng dữ liệu của dòng đang chọn). Click để XEM (chuyển qua
   dòng khác) vẫn luôn hoạt động vì bản thân dòng (div) không bị khóa, chỉ khóa các ô
   input/button con bên trong nó thôi. */
#price-bu-charter-body input,
#price-bu-charter-body select,
#price-bu-charter-body textarea,
#price-bu-charter-body button {
  pointer-events: none;
}

/* Mở khóa cho đúng dòng đang "editing" ở bên trái */
#price-bu-charter-body .price-bu-charter-row.editing input,
#price-bu-charter-body .price-bu-charter-row.editing select,
#price-bu-charter-body .price-bu-charter-row.editing button {
  pointer-events: auto;
}

/* Mở khóa panel "Áp dụng cho CSKD & Khách hàng" bên phải KHI đang có 1 dòng ở chế độ sửa */
#price-bu-charter-body.price-bu-charter-has-editing .price-bu-charter-right input,
#price-bu-charter-body.price-bu-charter-has-editing .price-bu-charter-right select,
#price-bu-charter-body.price-bu-charter-has-editing .price-bu-charter-right button {
  pointer-events: auto;
}
/* Các nút LUÔN bấm được dù đang khóa: Sửa (để mở khóa), Thêm bảng giá, Lưu Bảng giá CSKD,
   và bộ lọc Từ ngày/Đến ngày/Tìm tên (lọc/tìm để XEM không phải là sửa dữ liệu). */
#price-bu-charter-body .price-row-edit-btn,
#price-bu-charter-body #price-bu-charter-add-btn,
#price-bu-charter-body #price-bu-charter-save-btn,
#price-bu-charter-body #price-bu-charter-filter-from,
#price-bu-charter-body #price-bu-charter-filter-to,
#price-bu-charter-body #price-bu-charter-search-input {
  pointer-events: auto !important;
}

/* Dòng đang ở chế độ sửa -> viền xanh nổi bật để biết đang sửa dòng nào */
.price-bu-charter-row.editing {
  box-shadow: inset 0 0 0 2px var(--blue);
  background: #eef5ff;
}

.price-bu-charter-row .price-row-edit-btn {
  background: var(--blue);
  color: #fff;
  border: none;
}
.price-bu-charter-row .price-row-edit-btn:hover { background: var(--blue-dark); }
.price-bu-charter-row.editing .price-row-edit-btn {
  background: #94a3b8;
}
/* =========================================================================
   BẢNG THANH TOÁN (app-booking-payment-table.js) — 21/07/2026, theo yêu cầu
   anh Phong. Tái sử dụng .booking-sum-row/.booking-sum-lbl/.booking-sum-pay
   sẵn có (không định nghĩa lại), chỉ thêm phần bảng Cơ sở/HH.Dịch vụ + layout
   khung ngoài.
   ========================================================================= */
/* ✅ MỚI (21/07/2026, theo yêu cầu anh): modal Bảng thanh toán nội dung dài (nhiều
   CSKD + HH.Dịch vụ) — nếu không giới hạn chiều cao, khung sẽ tràn khỏi màn hình,
   đẩy mất header (nút "×") lên trên, không đóng lại được. Giới hạn max-height + chỉ
   cuộn RIÊNG phần .modal-body, header/footer luôn đứng yên nhìn thấy được. */
#bpt-modal .modal-dialog {
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}
/* ✅ SỬA (theo yêu cầu anh — modal bị thanh nút XÓA/HỦY/LƯU đè lên): .booking-footer
   có z-index:400, cao hơn z-index:200 mặc định của .modal — nâng riêng #bpt-modal lên
   trên hẳn mọi thanh sticky khác trong trang. */
#bpt-modal {
  z-index: 500;
}
#bpt-modal .modal-header {
  flex-shrink: 0;
}
/* ✅ MỚI (23/07/2026, theo yêu cầu anh):
   1) Đưa cả 3 nút IN/LƯU/× lên sát mép trên (cách mép ~2 li, thay vì 16px mặc định của
      .modal-dialog) — CHỈ áp dụng riêng cho #bpt-modal, không đụng các modal khác (cùng
      dùng chung .modal-dialog).
   2) IN + LƯU CĂN GIỮA hàng ngang, × đứng riêng NGOÀI CÙNG BÊN PHẢI — dùng lưới 3 cột
      (1fr / auto / auto) để khối IN+LƯU luôn ở giữa dù cột phải (×) không chiếm hết
      phần còn lại. */
#bpt-modal .modal-dialog {
  padding-top: 7px;
}
#bpt-modal .bpt-modal-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}
#bpt-modal .bpt-modal-actions-center {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 6px;
}
#bpt-modal #bpt-modal-close {
  grid-column: 3;
  justify-self: end;
}
#bpt-modal .modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
/* ✅ SỬA (theo yêu cầu anh — bấm nút "Thuế, phí" trong Bảng thanh toán không thấy gì):
   modal Thuế/Phí (#booking-taxfee-modal) vẫn dùng z-index mặc định 200 của .modal, nên
   khi mở TỪ BÊN TRONG #bpt-modal (z-index 500) thì bị #bpt-modal đè lên, hiện ra nhưng
   vô hình + không bấm được. Nâng z-index của nó cao hơn #bpt-modal để luôn nổi lên trên. */
#booking-taxfee-modal {
  z-index: 600;
}

/* ✅ MỚI (theo yêu cầu anh — mục TỔNG TIỀN): lưới 3 cột DÙNG CHUNG cho dòng tiêu đề
   (TỔNG TIỀN + số tổng) VÀ từng dòng CSKD/HH.Dịch vụ bên dưới — nhờ dùng chung 1 lưới
   cột nên cột "số tiền" LUÔN thẳng hàng nhau ở mọi dòng, và cột nút "Thuế, phí" luôn
   nằm tách hẳn ra ngoài cùng bên phải, cách xa cột số tiền. */
.bpt-tt-grid {
  display: grid;
  grid-template-columns: 1fr 130px 84px;
  align-items: center;
  column-gap: 2px;
  padding: 3px 0;
}
.bpt-tt-lbl { font-size: 13px; color: #334155; }
.bpt-tt-val { font-size: 13px; color: #334155; text-align: right; }
.bpt-tt-btn { display: flex; justify-content: flex-start; }
.bpt-tt-btn:empty { min-height: 1px; }
/* ✅ SỬA: mọi nút trong cột 84px (Thuế phí / Thêm / P.Bổ) đồng bộ 1 kích thước —
   bằng đúng kích thước nút "Thuế, phí" (nút gốc), để nút "Thêm" không bị dài hơn. */
.bpt-tt-btn .btn.btn-sm { width: 76px; white-space: nowrap; padding-left: 0; padding-right: 0; text-align: center; }

/* Dòng tiêu đề "TỔNG TIỀN" gộp chung 1 dòng với số tổng cộng — in đậm, cột 3 để trống
   (không có nút) nhưng vẫn giữ chỗ để cột số tiền luôn thẳng hàng với các dòng dưới. */
.bpt-section-title-total {
  font-weight: 700;
  color: #1e293b;
  margin: 16px 0 4px;
  padding-top: 8px;
  border-top: 1px solid #e6eaf2;
}
.bpt-section-title-total .bpt-tt-lbl { font-weight: 700; }
.bpt-tt-val-grand { font-weight: 700; font-size: 14px; color: #0f172a; }

/* Thụt lề 1.5cm cho các dòng con (Cơ sở/HH.Dịch vụ trong từng CSKD, và Lâu đài/
   HH.Dịch vụ bên dưới mục TỔNG TIỀN) — "giật cấp" so với dòng cha phía trên. */
.bpt-indent { padding-left: 1.5cm; }

.bpt-wrap {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  padding: 14px 16px;
}
.bpt-title {
  font-weight: 700;
  font-size: 15px;
  color: #1e293b;
  margin-bottom: 10px;
}
.bpt-section-title {
  font-weight: 700;
  color: #1e293b;
  margin: 16px 0 6px;
  padding-top: 8px;
  border-top: 1px solid #e6eaf2;
}
.bpt-group { margin-bottom: 10px; }
.bpt-group-header {
  font-weight: 400;
  color: #334155;
  margin: 6px 0 4px;
}
/* ✅ MỚI (theo yêu cầu anh — nhóm HH.Dịch vụ theo lịch trình): dòng nhãn lịch trình
   RIÊNG của từng cụm HH.Dịch vụ (khác đêm với Cơ sở phía trên) — thụt lề bằng dòng Cơ
   sở/HH.Dịch vụ (1.5cm), chữ nghiêng nhạt hơn để phân biệt đây là nhãn phụ, không phải
   header CSKD chính. */
.bpt-group-svcs-header {
  font-style: italic;
  color: #64748b;
  font-size: 12.5px;
  padding-left: 1.5cm;
  margin: 4px 0 2px;
}
.bpt-row {
  display: grid;
  grid-template-columns: 1fr 60px 110px 110px 84px;
  gap: 2px;
  padding: 2px 0;
  font-size: 13px;
  color: #334155;
  padding-left: 1.5cm;
}
.bpt-row-addon { color: #2563eb; font-style: italic; }
.bpt-c-qty, .bpt-c-unit, .bpt-c-amount { text-align: right; }
.bpt-empty { color: #94a3b8; font-size: 13px; padding: 4px 0; }
.bpt-tax-lines { margin: 2px 0 4px; }
/* ✅ MỚI (23/07/2026, theo yêu cầu anh): dòng "Thuế CSKD"/"Phí CSKD" — chữ NGHIÊNG, MÀU
   XANH, giống hệt màu/kiểu chữ của dòng "Điều chỉnh" (#1a73e8, xem .booking-fac-adjust-row
   ở trên) thay vì màu đen mặc định như trước. */
.bpt-tax-line-row,
.bpt-tax-line-row .bpt-tt-lbl,
.bpt-tax-line-row .bpt-tt-val {
  color: #1a73e8;
  font-style: italic;
}
/* ✅ SỬA (theo yêu cầu anh): chữ "THANH TOÁN" (.bpt-pay-grid) giờ căn TRÁI, thẳng cột
   với chữ "TỔNG TIỀN" (.bpt-tt-grid) ở trên — cả 2 đều bắt đầu từ mép trái khung.
   6 dòng Ngày thanh toán...Tiền thanh toán (.bpt-pay-field-grid) dùng CHUNG cấu trúc
   cột 130px nhãn + 1fr + 84px với .bpt-pay-grid (cùng chung 1 khung .bpt-wrap nên 2
   lưới rộng bằng nhau) — ô nhập được đẩy sang phải, ÁP SÁT MÉP PHẢI của cột 1fr, nên
   mép phải của 6 ô nhập luôn thẳng hàng với mép phải ô Diễn giải phía trên. */
.bpt-pay-grid {
  display: grid;
  grid-template-columns: auto 1fr 84px;
  align-items: center;
  column-gap: 2px;
  padding: 3px 0;
}
.bpt-section-title-pay { font-weight: 700; color: #1e293b; margin: 16px 0 4px; padding-top: 8px; border-top: 1px solid #e6eaf2; }
.bpt-section-title-pay .bpt-tt-lbl { font-weight: 700; text-align: left; white-space: nowrap; }
.bpt-pay-note-wrap input.form-control { width: 100%; font-weight: 400; }

/* ✅ SỬA: cột nhãn tăng lên 190px (thay vì 130px) để chữ "Ngày thanh toán" / "Tiền
   thanh toán" không bị tràn xuống dòng 2 sau khi thụt lề 1.5cm. Cột 2 (1fr) + cột 3
   (84px) không đổi nên mép phải ô nhập vẫn thẳng hàng với mép phải ô Diễn giải. */
.bpt-pay-field-grid {
  display: grid;
  grid-template-columns: 190px 1fr 84px;
  align-items: center;
  column-gap: 6px;
  padding: 3px 0;
}
/* ✅ SỬA: nhãn Ngày thanh toán...Tiền thanh toán căn TRÁI, thụt lề 1.5cm giống
   .bpt-indent — thẳng mép với chữ "Family" và chữ "Lâu đài" (dòng con) phía trên. */
.bpt-pay-field-lbl { font-weight: 400; text-align: left; padding-left: 1.5cm; white-space: nowrap; color: #334155; font-size: 13px; }
.bpt-pay-field-input { width: 3cm; justify-self: end; }
/* ✅ MỚI (theo yêu cầu anh — mọi ô nhập trong khối THANH TOÁN cao bằng nhau): ô Loại
   tiền (<select>) trước đây thấp hơn các ô <input> khác do trình duyệt tự vẽ mỗi loại
   thẻ khác nhau (input/select) với padding/viền mặc định khác nhau. Ép chung 1 khung
   (height/padding/border/box-sizing) cho TẤT CẢ ô trong khối — kể cả ô Diễn giải (dòng
   THANH TOÁN phía trên và từng khối đã thêm) — để cao đúng bằng nhau, dù input, select
   hay input[type=date]. */
.bpt-pay-field-input,
.bpt-pay-note-wrap input.form-control,
.bpt-pay-block-top input.form-control,
.bpt-pay-title-note-wrap input.form-control {
  height: 30px;
  padding: 4px 8px;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
}
/* ✅ MỚI (23/07/2026, theo yêu cầu anh): ô "Diễn giải" của khoản gốc — giờ nằm CÙNG DÒNG
   với chữ "THANH TOÁN" (cột giữa của .bpt-pay-grid) thay vì 1 dòng riêng bên dưới. Thu
   ngắn lại vừa đủ (không kéo dài hết cỡ tới nút "Thêm") — chỉ ô nhập có độ rộng cố định,
   div bọc ngoài vẫn để mặc định (không canh giữa/canh phải) nên ô nằm sát ngay sau chữ
   "THANH TOÁN". */
.bpt-pay-title-note-wrap input.form-control {
  width: 260px;
  font-weight: 400;
}
/* ✅ SỬA: ô Ngân hàng kéo rộng ra hết cột, mép trái bằng mép trái ô Diễn giải. */
#bpt-pay-bank { width: 100%; justify-self: stretch; }

.bpt-pay-form { max-width: none; }
/* ✅ MỚI (theo yêu cầu anh — tối ưu diện tích phần THANH TOÁN, gộp 2 ô/dòng): thay lưới
   1 ô/dòng (.bpt-pay-field-grid, nhãn 190px + ô nhập 3cm) bằng flex 2 ô/dòng gọn hơn —
   Ngày thanh toán+Hình thức, Ngân hàng (riêng 1 dòng, ô dài), Loại tiền+Tỷ giá, Nguyên
   tệ+T.Toán. Dùng CHO CẢ form gốc (bpt-pay-form) VÀ từng khối đã thêm (bpt-pay-block) —
   y hệt id/class cũ (bpt-pay-date, bptrow-date...), CHỈ đổi khung bọc/CSS, không đụng gì
   tới logic JS đang gắn theo id/class đó. */
.bpt-pay-compact { padding-left: 1.5cm; padding-right: 86px; }
.bpt-pay-compact-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 3px 0;
}
.bpt-pay-compact-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0;
  min-width: 0;
}
.bpt-pay-compact-field-full { flex: 1 1 100%; }
.bpt-pay-compact-lbl {
  font-weight: 400;
  color: #334155;
  font-size: 13px;
  white-space: nowrap;
  flex: 0 0 auto;
}
/* ✅ MỚI (theo yêu cầu anh — ô nhập thẳng cột): nhãn ở vị trí 1 mỗi dòng (Ngày thanh
   toán/Ngân hàng/Loại tiền/Nguyên tệ) dùng chung 1 độ rộng cố định = đúng độ rộng chữ
   "Ngày thanh toán" (nhãn dài nhất cột này); nhãn ở vị trí 2 (Hình thức/Tỷ giá/T.Toán)
   dùng chung 1 độ rộng cố định = đúng độ rộng chữ "Hình thức" (nhãn dài nhất cột này).
   Vị trí/chữ của nhãn KHÔNG đổi (vẫn căn trái, text-align mặc định) — chỉ khoảng trắng
   sau nhãn ngắn giãn thêm ra, đẩy ô nhập lùi lại đúng cùng 1 mép trái giữa các dòng. */
.bpt-pay-compact-field:first-child .bpt-pay-compact-lbl { width: 140px; }
.bpt-pay-compact-field:nth-child(2) .bpt-pay-compact-lbl { width: 84px; }
/* ✅ MỚI (theo yêu cầu anh — làm nổi bật ô T.Toán): chữ "T.Toán" (nhãn vị trí 2 của
   dòng cuối "Nguyên tệ + T.Toán") và viền ô nhập T.Toán tô màu xanh --blue, áp dụng cho
   cả form gốc (#bpt-pay-vnd) lẫn từng khối đã thêm (.bptrow-vnd). */
.bpt-pay-compact-row:last-child .bpt-pay-compact-field:nth-child(2) .bpt-pay-compact-lbl {
  color: var(--blue);
}
#bpt-pay-vnd, .bptrow-vnd {
  border-color: var(--blue);
}
/* Đè lại width:3cm cố định của .bpt-pay-field-input (dùng cho bố cục 1 ô/dòng cũ) —
   trong bố cục gọn mới, ô nhập co giãn lấp đầy phần còn lại của mỗi ô trong hàng. */
.bpt-pay-compact-field .bpt-pay-field-input {
  width: auto;
  flex: 1;
  min-width: 0;
  justify-self: stretch;
}
/* ✅ MỚI (theo yêu cầu anh — căn lề phải các ô số tiền): Nguyên tệ/Tỷ giá/T.Toán (đều
   có class .js-num) căn phải cho dễ so số, giống chuẩn hiển thị tiền tệ thông thường. */
.bpt-pay-compact-field input.js-num {
  text-align: right;
}
/* ✅ MỚI (theo yêu cầu anh — căn lề phải 3 ô số): Tỷ giá/Nguyên tệ/T.Toán là các ô
   NHẬP SỐ, căn phải cho dễ đọc/dễ so sánh giữa các dòng, giống chuẩn hiển thị tiền tệ. */
#bpt-pay-rate, .bptrow-rate,
#bpt-pay-ngt, .bptrow-ngt,
#bpt-pay-vnd, .bptrow-vnd {
  text-align: right;
}
.bpt-pay-list { max-width: none; margin-top: 10px; }
/* ✅ SỬA (theo yêu cầu anh — cột giá trị của khối MỚI THÊM đang bị "hụt vào" so với
   khối 1): trước đây .bpt-pay-block có padding trái/phải 10px bọc quanh, làm lưới
   .bpt-pay-field-grid bên trong hẹp hơn + lệch vào so với form gốc phía trên (không có
   padding trái/phải) — bỏ padding ngang, chỉ giữ padding trên/dưới, để 2 cột (nhãn + ô
   nhập) của khối MỚI THÊM thẳng hàng tuyệt đối với khối 1. */
.bpt-pay-block {
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 6px 0 4px;
  margin-bottom: 8px;
  background: #f8fafc;
}
.bpt-pay-block-top {
  display: grid;
  grid-template-columns: 1fr 84px;
  align-items: center;
  column-gap: 2px;
  padding: 3px 0 5px 1.5cm;
  border-bottom: 1px dashed #e6eaf2;
  margin-bottom: 3px;
}
.bpt-pay-block-top input.form-control { width: 100%; font-weight: 400; }
.bpt-pay-block-top .bpt-pay-del {
  justify-self: start;
  width: 76px;
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}
/* ✅ SỬA: ô Ngân hàng của khối đã thêm cũng kéo rộng hết cột như ô Ngân hàng gốc
   (#bpt-pay-bank) ở form phía trên. */
.bptrow-bank { width: 100%; justify-self: stretch; }
.bpt-pay-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #475569;
  padding: 3px 0;
  border-bottom: 1px dashed #e6eaf2;
}
/* ✅ SỬA (theo yêu cầu anh — nút Xóa to bằng nút Thêm, thẳng cột): trước đây là icon
   "×" nhỏ trong suốt — giờ dùng class btn/btn-danger/btn-sm (giống hệt nút Thêm nhưng
   màu đỏ) ngay trong HTML, nên rule dưới đây CHỈ còn giữ đúng phần không đụng tới
   background/border/padding (để không đè mất style của .btn-danger/.btn-sm). */
.bpt-pay-del { white-space: nowrap; }
.bpt-remaining-total-row .bpt-tt-lbl { font-weight: 700; }
.bpt-alloc-warning {
  color: #b91c1c;
  font-size: 12.5px;
  margin-top: 4px;
}
/* ============================================================================
   ✅ MỚI (23/07/2026, theo yêu cầu anh): TAB VẬN HÀNH \ "Thu tiền booking"
   (Phiếu thu tiền) — khung 3 cột cố định chiều cao + thanh dưới cùng cố định,
   theo đúng ảnh mẫu anh gửi (DANH SÁCH / PHIẾU THU TIỀN / DANH SÁCH BOOKING).
   ============================================================================ */
#page-thu-tien-booking .card-body { padding: 0; }

.pt-wrap {
  display: grid;
  grid-template-columns: 300px 340px 1fr;
  gap: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  /* ✅ SỬA (23/07/2026, theo yêu cầu anh): chừa chỗ dưới cho .pt-footer — giờ
     position:fixed cố định sát đáy màn hình, không còn nằm trong dòng chảy nữa. */
  margin-bottom: 58px;
}

.pt-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border-right: 1px solid #e2e8f0;
  height: 640px;
}
.pt-col:last-child { border-right: none; }

.pt-col-head {
  padding: 10px 12px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  font-weight: 700;
  color: #1e293b;
  font-size: 13.5px;
  letter-spacing: .2px;
}

.pt-col-toolbar {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid #eef1f6;
  flex-wrap: wrap;
  align-items: center;
}
.pt-col-toolbar input[type="text"],
.pt-col-toolbar input[type="date"] {
  flex: 1;
  min-width: 90px;
  padding: 5px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
}

.pt-list-scroll {
  flex: 1;
  overflow-y: auto;
}

.pt-list-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pt-list-table th {
  position: sticky; top: 0;
  background: #f1f5f9;
  color: #475569;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #dbe2ec;
  font-weight: 700;
  z-index: 1;
}
.pt-list-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #eef1f6;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-list-table tr:hover td { background: #f8fafc; }
.pt-list-table tr.pt-row-active td { background: #e0ecff; }

/* ----- Cột giữa: PHIẾU THU TIỀN ----- */
.pt-form { padding: 10px 12px; overflow-y: auto; flex: 1; }
.pt-form-head {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #475569;
  margin-bottom: 6px;
}
.pt-form-head b { color: #0f172a; }

.pt-field { display: grid; grid-template-columns: 92px 1fr; gap: 6px; align-items: center; margin-bottom: 6px; }
.pt-field label { font-size: 12.5px; color: #475569; }
.pt-field-input { display: flex; gap: 4px; align-items: center; position: relative; }
.pt-field-input input,
.pt-field-input select,
.pt-field-input textarea {
  flex: 1;
  padding: 5px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12.5px;
  min-width: 0;
}
.pt-field-input textarea { resize: vertical; min-height: 46px; }
.pt-mini-btn {
  width: 24px; height: 24px; flex: none;
  border: none; border-radius: 6px;
  background: var(--blue); color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pt-mini-btn:hover { background: var(--blue-dark); }
.pt-mini-btn.pt-mini-info { background: var(--blue); }
.pt-mini-btn.pt-mini-info:hover { background: var(--blue-dark); }

.pt-autocomplete {
  position: absolute; left: 0; top: 100%; z-index: 20;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
  max-height: 220px; overflow-y: auto; width: 260px;
}
.pt-autocomplete-item { padding: 6px 9px; font-size: 12.5px; cursor: pointer; }
.pt-autocomplete-item:hover { background: #f1f5f9; }
.pt-autocomplete-empty { padding: 6px 9px; font-size: 12.5px; color: #94a3b8; }

.pt-info-box {
  position: absolute; left: 0; top: 100%; z-index: 20;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  box-shadow: 0 8px 20px rgba(15,23,42,.12);
  width: 240px; padding: 8px 10px; font-size: 12.5px; color: #334155;
}
.pt-info-box div { padding: 2px 0; }

/* ----- Cột phải: DANH SÁCH BOOKING ----- */
.pt-booking-scroll { flex: 1; overflow-y: auto; }
.pt-booking-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pt-booking-table th {
  position: sticky; top: 0;
  background: #f1f5f9; color: #475569; text-align: left;
  padding: 6px 8px; border-bottom: 1px solid #dbe2ec; font-weight: 700; z-index: 1;
}
.pt-booking-table td { padding: 5px 8px; border-bottom: 1px solid #eef1f6; color: #334155; }
.pt-booking-table td.pt-num { text-align: right; }
.pt-group-row td { background: #f8fafc; font-weight: 700; color: #1e293b; }
.pt-child-row td.pt-label { padding-left: 20px; color: #2563eb; }
.pt-alloc-cell { text-align: center; }
.pt-alloc-cell input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.pt-alloc-amount { width: 100%; text-align: right; border: 1px solid #cbd5e1; border-radius: 5px; padding: 3px 5px; font-size: 12px; }
.pt-empty-hint { padding: 24px 12px; text-align: center; color: #94a3b8; font-size: 12.5px; }

/* ----- Thanh dưới cố định -----
   ✅ SỬA (23/07/2026, theo yêu cầu anh): thanh nút XÓA/IN/SỬA/LƯU trước đây nằm cuối
   dòng chảy trang, card cao quá màn hình thì bị tụt xuống khuất phía dưới — giờ
   position:fixed cố định hẳn sát đáy màn hình như hình mẫu. Đồng thời gộp cụm nút vào
   .pt-footer-actions và cụm TỔNG CỘNG vào .pt-footer-totals: 1 spacer (flex:1) đẩy CẢ 2
   cụm sang phải, cách nhau đúng 1cm (margin-left) thay vì spacer full-width như trước. */
.pt-footer {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: #cbd5e1;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  position: fixed;
  left: 50px;
  right: 50px;
  bottom: 14px;
  z-index: 250;
  box-shadow: 0 4px 14px rgba(15,23,42,.18);
}
.pt-footer .pt-footer-spacer { flex: 1; }
.pt-footer-actions { display: flex; align-items: center; gap: 10px; }
.pt-footer-totals { display: flex; align-items: center; gap: 10px; margin-left: 1cm; }
.pt-footer-total-label { font-weight: 700; color: #1e293b; font-size: 13px; }
.pt-footer-total-box {
  min-width: 130px; text-align: right;
  background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 6px 10px; font-size: 13px; font-weight: 700; color: #0f172a;
}
.pt-footer-total-box.pt-warn { color: #b91c1c; border-color: #fca5a5; }

/* ============================================================================
   ✅ SỬA (23/07/2026, theo yêu cầu anh — BẢNG THANH TOÁN, dòng "điều chỉnh" màu
   xanh của Cơ sở/HH.Dịch vụ):
   1) Dòng "Điều chỉnh"/"Người lớn ghép..." trước đây dùng CHUNG grid-template-columns
      với màn hình Booking gốc (.booking-fac-row/.booking-hhi-row, layout RỘNG hơn
      nhiều so với khung Bảng thanh toán) -> lệch hẳn sang trái, không thẳng cột với
      Tên cơ sở/Tên HH.Dịch vụ phía trên.
   2) Với HH.Dịch vụ, lưới cũ rộng tới ~840px (8 cột cố định) trong khi khung Bảng
      thanh toán (#bpt-modal-body) hẹp hơn nhiều -> cột "Tiền điều chỉnh" (cột 7) bị
      đẩy ra NGOÀI vùng nhìn thấy, coi như "không lên tiền".
   Giờ ĐÈ RIÊNG layout của 2 dòng này khi nằm trong #bpt-modal-body, dùng ĐÚNG
   grid-template-columns + padding-left với .bpt-row (Tên/SL/Đơn giá/Thành tiền) để
   thẳng cột — CHỈ áp dụng trong Bảng thanh toán, KHÔNG đụng màn hình Booking gốc.
   ============================================================================ */
#bpt-modal-body .booking-fac-adjust-row,
#bpt-modal-body .booking-hhi-adjust-row {
  grid-template-columns: 1fr 60px 110px 110px 84px;
  gap: 2px;
  padding-left: 1.5cm;
}
#bpt-modal-body .fac-adjust-reason,
#bpt-modal-body .hhi-adjust-reason {
  grid-column: 1;
}
#bpt-modal-body .fac-adjust-sl,
#bpt-modal-body .hhi-adjust-sl {
  grid-column: 2;
  text-align: right;
}
#bpt-modal-body .fac-adjust-money,
#bpt-modal-body .hhi-adjust-money {
  grid-column: 4;
  text-align: right;
}

/* ✅ MỚI (23/07/2026, theo yêu cầu anh): nhãn "Đoàn khách" trong Danh sách booking của
   Phiếu thu tiền — bấm vào để mở thẳng booking đó. */
.pt-group-label-link { cursor: pointer; }
.pt-group-label-link:hover { text-decoration: underline; }

/* ✅ MỚI (23/07/2026, theo yêu cầu anh): mờ nút XÓA/IN/SỬA/LƯU khi đang bị khóa theo
   trạng thái Xem/Sửa của Phiếu thu tiền (xem ptUpdateButtonStates trong app-phieu-thu.js). */
.pt-footer .btn:disabled { opacity: .4; cursor: not-allowed; }

/* ✅ MỚI (23/07/2026, theo yêu cầu anh — khóa dòng "Tiền mặt" trong Danh mục Hình thức
   thanh toán): làm mờ nút Xóa khi bị khóa, ô tên readonly hiện nền xám nhẹ để dễ nhận biết. */
.pay-method-del-btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-method-name-input[readonly] { background: #f1f5f9; color: #64748b; }

/* ✅ SỬA (23/07/2026, theo yêu cầu anh): nút X đỏ đóng trang Booking khi mở từ Phiếu thu
   tiền (xem #pt-close-booking-btn trong guest.html + ptOpenBookingFromReceipt trong
   app-phieu-thu.js). Trước đây position:fixed theo tọa độ màn hình nên bị thanh
   .topbar (z-index:500) đè lên, chỉ lộ ra 1 tý màu đỏ ở góc — giờ đặt luôn trong hàng
   nút .booking-footer-right (sau "Thêm Booking"), cách nhóm LƯU/CHỜ/SỬA/Thêm Booking
   1 khoảng riêng để không dính sát. */
#pt-close-booking-btn {
  flex: none;
  margin-left: 14px;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: #dc2626;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
#pt-close-booking-btn:hover { background: #b91c1c; }
#pt-close-booking-btn.hidden { display: none; }

/* =========================================================================
   VẬN HÀNH — DANH SÁCH BOOKING (23/07/2026, theo yêu cầu anh)
   Xem logic ở app-danh-sach-booking.js (tiền tố "dsb").
   ========================================================================= */

/* ✅ MỚI (23/07/2026, theo yêu cầu anh): giãn khung bao của trang "Danh sách booking" ra
   gần sát 2 mép trái/phải (chỉ chừa lại khoảng ~1 li), thay vì chịu chung độ rộng hẹp
   32px của .content — CHỈ áp dụng riêng trang này, không đụng các trang khác. */
#page-danh-sach-booking {
  margin: 0 -28px;
}

#page-danh-sach-booking .dsb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-danh-sach-booking .dsb-filter { position: relative; min-width: 170px; }
#page-danh-sach-booking .dsb-filter label { display: block; margin-bottom: 6px; font-weight: 600; }
#page-danh-sach-booking .dsb-filter input {
  width: 100%;
  height: 32px;
  padding: 4px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  box-sizing: border-box;
}
#page-danh-sach-booking .dsb-filter-multi input { cursor: pointer; background: #fff; }
#page-danh-sach-booking .dsb-filter-multi .ac-box { width: 260px; }

#page-danh-sach-booking .dsb-empty {
  padding: 24px;
  text-align: center;
  color: #64748b;
}

/* ✅ SỬA (23/07/2026, theo yêu cầu anh — màn hình bị 2 con lăn cuộn): trước đây khung
   bảng tự cuộn riêng (max-height + overflow:auto) NẰM TRONG trang cũng đang cuộn được ->
   2 thanh cuộn dọc cùng lúc. Bỏ vùng cuộn riêng này, để CẢ TRANG cuộn chung 1 thanh duy
   nhất (bảng dài bao nhiêu thì trang dài bấy nhiêu). */
#page-danh-sach-booking .dsb-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.dsb-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dsb-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 8px;
  text-align: left;
  font-weight: 700;
  z-index: 1;
}
.dsb-table td {
  border: 1px solid #e2e8f0;
  padding: 5px 8px;
  vertical-align: middle;
}
.dsb-table .dsb-c-num { text-align: right; white-space: nowrap; }
.dsb-table .dsb-c-tt { text-align: center; }
/* ✅ SỬA (23/07/2026, theo yêu cầu anh): 5 cột gộp theo cả booking (TT/Số booking/Đoàn
   khách/Đã trả/Còn lại) — trước đây canh giữa theo chiều dọc (mặc định của "td { vertical-
   align: middle }" ở trên), giờ canh LÊN TRÊN, ngang hàng với dòng CSKD đầu tiên. */
.dsb-table td[rowspan] { vertical-align: top; }
.dsb-table .dsb-c-sub { font-style: italic; padding-left: 20px; }
.dsb-table .dsb-row-cha .dsb-c-name { font-weight: 600; }

/* Dòng "Đoàn khách" — bấm được, mở Booking (xem dsbBindEventsOnce -> click delegation) */
.dsb-table .dsb-c-doankhach { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
.dsb-table .dsb-c-doankhach:hover { background: rgba(0,0,0,0.04); }

/* ✅ MỚI (23/07/2026, theo yêu cầu anh): ô "Đã trả" — gạch chân, bấm mở thẳng Bảng thanh
   toán của booking đó (xem dsbOpenBookingPayment). */
.dsb-table .dsb-c-datra { cursor: pointer; text-decoration: underline; }
.dsb-table .dsb-c-datra:hover { background: rgba(0,0,0,0.04); }

/* Tô màu cả khối 1 booking theo trạng thái — CONFIRMED xanh / HELD("Đang CHỜ") đỏ /
   còn lại (DRAFT..., "Giữ chỗ") vàng — đúng quy tắc anh mô tả. */
.dsb-table .dsb-st-confirmed { color: #15803d; }
.dsb-table .dsb-st-held { color: #b45309; }
.dsb-table .dsb-st-waiting { color: #dc2626; }
.dsb-table .dsb-row-con.dsb-st-confirmed,
.dsb-table .dsb-row-con.dsb-st-held,
.dsb-table .dsb-row-con.dsb-st-waiting { color: #1f2937; } /* dòng con giữ màu chữ thường, chỉ dòng cha/Đoàn khách tô màu trạng thái cho dễ nhìn */

/* Khoảng cách trống giữa 2 booking liền nhau, giống bản phác thảo */
.dsb-table .dsb-row-gap td { border: none; padding: 6px 0; background: transparent; }

/* ✅ MỚI (23/07/2026, theo yêu cầu anh): dòng Thuế/Phí trong "Danh sách booking" — in
   nghiêng, MÀU XANH, giống hệt kiểu "Điều chỉnh" bên Booking/Bảng thanh toán (#1a73e8) —
   ghi đè lại màu chữ trung tính mặc định của dòng con (.dsb-row-con). */
.dsb-table .dsb-row-con td.dsb-c-sub-tax {
  color: #1a73e8 !important;
  font-style: italic;
}