/* ====== Reset & base ====== */
:root {
  /* ✅ SỬA (theo yêu cầu anh): đổi TOÀN BỘ màu xanh dương thương hiệu cũ (#2f80ed) VÀ màu
     teal riêng đang dùng ở thanh menu/trang Trạng thái-Booking (#0d9488) thành DUY NHẤT
     1 mã màu #006C50 — đồng bộ tuyệt đối toàn app. --blue-dark/--blue-light/--border là
     các sắc độ đậm/nhạt suy ra từ đúng tông màu #006C50 (không phải xanh dương nữa). */
  --blue: #006C50;
  --blue-light: #e3f3ec;
  --blue-dark: #00503b;
  --border: #4fa98a;
  --bg: #f7fbff;
  --danger: #ff3b30;
  --text: #333;
  /* 1 màu DÙNG CHUNG duy nhất giữa thanh menu trên cùng (tab đang chọn) và 2 nút LẬP
     BOOKING/BOOKING CHARTER khi rê chuột vào — khai báo ở :root để cả .topbar lẫn
     #page-business (2 nhánh DOM khác nhau) cùng đọc được đúng 1 giá trị. Giờ trùng luôn
     với --blue ở trên để cả app chỉ còn 1 màu thương hiệu duy nhất. */
  --brand-accent: #006C50;
}

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

/* ✅ SỬA (theo anh — rà soát kỹ, chặn TẬN GỐC mọi trường hợp "2 thanh cuộn ngang"):
   nguyên nhân là khi 1 khối bên trong (vd lưới Tài sản ".asg-pick-row", bảng
   ".xdv-table-wrap"...) bị nới rộng vượt khung chứa của nó, một số trình duyệt (đặc biệt
   Chrome) vẫn tính khối đó vào vùng cuộn của CẢ TRANG (html/body) dù khối cha đã
   overflow-x:auto/hidden riêng — sinh thêm 1 thanh cuộn ngang NGOÀI CÙNG của cả trang,
   chồng lên thanh cuộn ngang RIÊNG của khối đó. Mọi nơi cần cuộn ngang trong app (bảng,
   lưới Tài sản, lưới chiếm dụng...) đều ĐÃ tự có thanh cuộn ngang RIÊNG của chính nó rồi —
   nên khóa overflow-x ở "html" để chặn thanh cuộn ngang thừa đó.
   ⚠️ SỬA LỖI (theo anh — 09/08/2026, đây chính là lý do ".booking-header"/".booking-footer"
   "position:sticky" bị đứng yên/trôi lên dù đã cấu hình đúng): TRƯỚC ĐÂY khai cả
   "overflow-x:hidden" ở "html" LẪN "body" — theo đúng chuẩn CSS, hễ 1 trục overflow (x
   hoặc y) của 1 phần tử KHÔNG phải "visible" thì trục còn lại tự động tính thành "auto"
   (dù không khai báo) — nghĩa là "body" tự nhiên có thêm "overflow-y:auto" NGẦM, biến
   chính "body" thành 1 khung cuộn dọc RIÊNG (tách khỏi khung cuộn của viewport/trang) —
   mọi phần tử "position:sticky" bên trong "body" từ đó tính "dính" theo khung cuộn của
   chính "body" đó thay vì trang, dễ sinh sai lệch/không dính đúng như ý. Giờ CHỈ khai
   overflow-x:hidden ở "html" (đã đủ để chặn thanh cuộn ngang thừa — trình duyệt tự đẩy
   overflow của "html" lên viewport khi "body" KHÔNG tự khai overflow riêng), bỏ hẳn khai
   báo overflow-x ở "body" — "body" quay lại đúng nghĩa "cuộn theo trang" bình thường,
   "position:sticky" mới tính đúng theo khung cuộn của TRANG (viewport) như thiết kế ban
   đầu. */
html { overflow-x: hidden; }
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* ✅ MỚI (theo yêu cầu anh — đi cùng với việc đổi ".topbar" sang position:fixed ở
     trên): đẩy TOÀN BỘ nội dung trong ".app" xuống đúng bằng chiều cao thật của thanh
     menu (biến --topbar-h, đo bằng JS mỗi khi tải trang/đổi cỡ màn hình — xem
     wingoSyncTopbarHeightVar() ở app-core.js), để không bị thanh menu (giờ đã cố định,
     nổi trên cùng) che mất phần đầu trang. 96px là giá trị dự phòng, chỉ dùng cho tích
     tắc trước khi JS kịp đo xong. */
  padding-top: var(--topbar-h, 96px);
}

/* ====== Top bar ====== */
/* ✅ SỬA (theo yêu cầu anh — quay lại đúng tông màu xanh-teal của ảnh mẫu hình 2, KHÔNG
   dùng màu xanh dương sáng --blue của app nữa): khai báo riêng 2 biến --nav-teal/
   --nav-teal-dark CHỈ dùng trong phạm vi .topbar, không đụng tới --blue dùng chung cho
   các nút khác trong toàn app. */
.topbar {
  /* ✅ SỬA (theo yêu cầu anh — giảm tông NỀN của nút xuống 1 tông, tăng tông VIỀN lên 1
     tông so với bản trước; 2 giá trị này gặp nhau đúng ở --brand-accent dùng chung toàn
     cục — xem khai báo ở :root đầu file): */
  --nav-teal: var(--brand-accent);       /* viền tab — tăng 1 tông so với bản trước */
  --nav-teal-dark: var(--brand-accent);  /* nền tab đang chọn — giảm 1 tông so với bản trước */
  --nav-teal-light: var(--blue-light);   /* ✅ SỬA (theo yêu cầu anh): hết mã teal cũ sót lại, giờ suy ra từ #006C50 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 32px;
  border-bottom: none;
  background: #fff;
  /* ✅ SỬA (theo yêu cầu anh — "Thanh menu cố định", không được cuộn mất): trước đây
     dùng position:sticky — VẪN có thể bị 1 khối khác đè lên/che khuất tuỳ ngữ cảnh cuộn
     (như modal "BẢNG TÀI SẢN" từng bị lỗi chồng lên ở trên). Giờ đổi hẳn sang
     position:fixed, ghim CỐ ĐỊNH đúng mép trên cùng viewport, luôn hiện xuyên suốt dù
     cuộn trang kiểu gì — không còn phụ thuộc "ngữ cảnh cuộn gần nhất" nữa. Bù lại, đẩy
     nội dung bên dưới xuống đúng bằng chiều cao thật của thanh này (xem biến CSS
     --topbar-h, đo bằng JS ở wingoSyncTopbarHeightVar() trong app-core.js, áp cho
     ".app" ngay bên dưới) để không bị che mất phần đầu trang. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
}

.brand {
  font-size: 22px;
  font-weight: bold;
  margin-right: 32px;
  color: var(--nav-teal-dark);
}

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

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  padding: 8px 16px;
  border: 1px solid var(--nav-teal);
  background: #fff;
  color: #000;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, color .15s, border-color .15s;
}

/* ✅ SỬA (theo yêu cầu anh): tab đang chọn (active) giữ NGUYÊN đúng màu của hiệu ứng hover
   (nền teal + chữ TRẮNG) kể cả khi con trỏ đã rời đi, không quay lại chữ đen — nhìn giống
   hệt lúc đang rê chuột vào. Chỉ các tab CHƯA chọn mới chữ đen ở trạng thái tĩnh. */
.tab.active {
  background: var(--nav-teal-dark);
  border-color: var(--nav-teal-dark);
  color: #fff;
}

/* ✅ SỬA (theo yêu cầu anh): rê chuột vào BẤT KỲ tab nào (kể cả tab đang chọn) -> đổ nền
   teal đặc + chữ TRẮNG, để phân biệt rõ với trạng thái tĩnh (chữ đen). */
.tab:hover {
  background: var(--nav-teal-dark);
  border-color: var(--nav-teal-dark);
  color: #fff;
}

.tab .tab-icon {
  display: inline-flex;
  flex: 0 0 auto;
}

.user-email {
  margin-left: auto;
  font-size: 13px;
  color: #000;
  display: inline-flex;
  align-items: center;
}

/* ====== 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;
  /* ✅ SỬA (30/08/2026, theo yêu cầu anh Phong — thêm cột "Tính chất gốc" ở bảng "Cơ sở"
     bên phải, cần thêm chỗ): lấy bớt diện tích từ mảng TRÁI ("CƠ SỞ KINH DOANH") sang mảng
     PHẢI (bảng "Cơ sở") — trước đây 1.1fr/1.3fr (~45.8%/54.2%), giờ 0.85fr/1.55fr (~35%/65%). */
  grid-template-columns: 0.85fr 1.55fr;
  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;
  /* ✅ SỬA (30/08/2026, theo yêu cầu anh Phong): thêm 1 cột "Tính chất gốc" — chèn NGAY
     TRƯỚC cột "Tính chất" (Mã / Tên cơ sở / Tính chất gốc / Tính chất / Mô tả / Chọn / Xóa). */
  grid-template-columns: 0.55fr 0.85fr 0.8fr 0.8fr 1.1fr 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;
}

/* ✅ SỬA (theo yêu cầu anh): TOÀN BỘ nút "Xóa" (.btn-danger) dùng chung trong app — đổi từ
   nền đỏ đặc + chữ trắng sang kiểu viền: nền trắng, chữ đỏ, viền đỏ. */
.btn-danger {
  background: #fff;
  color: var(--danger);
  border: 1.5px solid var(--danger);
}

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

.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;
}

/* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong — "giãn đều 2 bên và chiều cao giống Danh mục
   HH.Dịch vụ"): cùng kỹ thuật đã dùng ở "#page-hhservice" — bù margin của ".content"
   (16px trên/32px trái-phải-dưới) bằng margin âm để "khung bao" (".card") giãn sát lề màn
   hình lẫn sát thanh menu/tài khoản phía trên, chỉ chừa lại đúng "1 li". */
#page-schedule.page{
  margin: -12px -28px -28px;
}
#page-schedule .card{
  padding: 4px;
  margin-bottom: 4px;
}
#page-schedule .card-header{
  margin-bottom: 4px;
}
#page-schedule .card-header h2{
  margin: 0;
}

/* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong): ô tìm kiếm mới, nằm ngay dưới tiêu đề —
   style copy từ ".hh-search-row" (Danh mục HH.Dịch vụ) cho đồng bộ. Lọc theo Mã/Tên lịch
   trình (xem applyScheduleSearchFilter() ở app-core.js). */
.schedule-search-row {
  margin-bottom: 6px;
}
.schedule-search-row input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
}

/* ====== Schedule table ====== */
.schedule-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "chiều cao giống Danh mục HH.Dịch vụ, tiêu
     đề cố định khi cuộn"): trước "overflow:hidden" (chỉ để bo góc, không cho cuộn) — đổi
     "overflow-y:auto" để bảng tự cuộn dọc riêng khi danh sách dài, "max-height" giới hạn
     đúng phần màn hình còn lại (trừ thanh menu cố định "--topbar-h" + phần đầu/chân trang
     — cùng kỹ thuật với "#page-hhservice .hh-left,.hh-right"/"#page-assets .asset-left-
     panel"), nhờ vậy KHÔNG còn cần cuộn NGOÀI cả trang — chỉ còn đúng 1 thanh cuộn bên
     trong bảng, tiêu đề/nút Thêm-Gộp/ô tìm kiếm phía trên (nằm NGOÀI phần cuộn) luôn đứng
     yên. Số trừ "76px" ước lượng phần chrome còn lại của trang này (đo thử: 60px tràn
     ~16px, 90px dư ~27px — 76px là mức vừa đủ, chỉ còn dư đúng "1 li"). */
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - var(--topbar-h, 96px) - 76px);
}

.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 {
  /* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong): dán cố định dòng tiêu đề ở đầu khung cuộn
     (".schedule-table" phía trên) — cuộn danh sách xuống vẫn luôn thấy tên cột. */
  position: sticky;
  top: 0;
  z-index: 1;
  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;
}

/* ✅ MỚI (theo yêu cầu anh Phong — 3 nút "Chi tiết"/"Xếp dịch vụ"/"Tổng hợp" ở màn "Lập
   kế hoạch cung ứng", thay cho ô tích "Tổng hợp" cũ): xem cuUpdateViewButtons() ở
   app-cung-ung.js. ✅ SỬA (đối chiếu hình anh vẽ — gộp chung 1 hàng với bộ lọc, xem
   ".cu-toolbar-row" bên dưới): bỏ "margin-bottom" riêng, để ".cu-toolbar-row" lo khoảng
   cách chung cho cả hàng. */
.cu-view-buttons {
  flex: none;
}

/* ✅ MỚI (theo yêu cầu anh Phong — gộp hàng 3 nút chế độ xem + hàng bộ lọc "Lập kế hoạch
   cung ứng" thành 1 hàng ngang duy nhất): CHỈ áp dụng riêng trang Cung ứng, không đụng
   khung ".dsb-filters" dùng chung ở các trang khác. */
#page-cung-ung .cu-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
/* Nút của chế độ ĐANG XEM (Chi tiết/Tổng hợp) — hiện viền xanh/nền trắng để phân biệt RÕ
   với 2 nút còn lại (nền xanh đặc, xem ".btn"/".btn-primary" — 2 class này mặc định CÙNG
   1 màu xanh nên KHÔNG tự phân biệt được, phải thêm hẳn class riêng này). Độ ưu tiên CSS
   (3 class) đủ thắng ".btn" (1 class, nền xanh mặc định). */
#page-cung-ung .cu-view-buttons .btn.cu-view-btn-active {
  background: #fff;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
#page-cung-ung .cu-view-buttons .btn.cu-view-btn-active:hover {
  background: #f0fdf7;
}

/* ✅ MỚI (theo yêu cầu anh Phong — đối chiếu hình anh vẽ, đổi ô lọc "Lập kế hoạch cung
   ứng" thành dạng pill bo tròn, chữ mờ placeholder ngay trong ô, bỏ nhãn chữ đậm phía
   trên): CHỈ áp dụng riêng ".cu-filters-pill" (gắn thêm ở #page-cung-ung, không đụng
   ".dsb-filter" gốc dùng chung ở Danh sách booking/Phiếu nhận khách/Báo cáo khách lưu
   trú — các trang đó vẫn giữ nguyên kiểu có nhãn cũ).
   ⚠️ SỬA (30/08/2026, theo yêu cầu anh Phong — "chỉnh ô Chọn CSKD/Lịch trình/nhóm/Ngày
   thành khung vuông cạnh giống các ô chọn ở bảng khác"): BỎ kiểu pill bo tròn ở trên —
   height/border/border-radius/padding giờ khớp Y HỆT ".dsb-filter input" gốc (xem khối
   "#page-danh-sach-booking .dsb-filter input, ..." ở dưới file) đang dùng ở "Quản lý
   booking"/"Phiếu nhận khách" — chỉ còn giữ lại phần layout riêng (bỏ nhãn/margin/gap) của
   ".cu-filters-pill".
   ⚠️ SỬA LỖI (04/09/2026, theo báo lỗi anh Phong — "nút Chi tiết/Xếp dịch vụ/Tổng hợp bị
   lệch thấp hơn ô Chọn CSKD"): khối này ("#page-cung-ung .cu-filters-pill", 1 ID + 1
   class) và khối dùng chung ở nhiều trang khác ("#page-danh-sach-booking .dsb-filters,
   #page-cung-ung .dsb-filters, ...", cũng 1 ID + 1 class — xem cuối file) có ĐỘ ƯU TIÊN
   CSS BẰNG NHAU, mà khối kia nằm SAU trong file nên THẮNG, âm thầm đè "align-items:center"
   -> "align-items:flex-end" + "margin-bottom:0" -> "margin-bottom:14px". "margin-bottom"
   trên 1 item flex hàng ngang cũng tính vào phần được canh giữa theo trục dọc
   (align-items) -> cả khối bộ lọc bị đẩy xuống thấp hơn khối 3 nút 1 khoảng bằng đúng nửa
   margin-bottom bị đè đó, y hệt lỗi anh thấy. Sửa bằng cách thêm ".cu-toolbar-row" vào
   selector (khớp đúng cấu trúc HTML thật — ".cu-filters-pill" luôn nằm trong
   ".cu-toolbar-row") để TĂNG độ ưu tiên (thêm 1 class) — thắng chắc chắn bất kể thứ tự
   file, không phụ thuộc "ai đứng sau" nữa. */
#page-cung-ung .cu-toolbar-row .cu-filters-pill {
  margin-bottom: 0;
  gap: 8px;
  align-items: center;
}
#page-cung-ung .cu-filters-pill .dsb-filter {
  min-width: 150px;
}
#page-cung-ung .cu-filters-pill .dsb-filter input {
  height: 28px;
  border-radius: 2px;
  border: 1px solid #999;
  padding: 4px 10px;
  box-sizing: border-box;
  font-size: 13px;
}
#page-cung-ung .cu-filters-pill .dsb-filter input::placeholder {
  color: #94a3b8;
}

/* ⚠️ SỬA (30/08/2026, theo yêu cầu anh Phong — lần 2, "chỉnh đồng bộ tất cả bao gồm các
   nút có chữ 13, nút Chi tiết/Xếp dịch vụ/Tổng hợp đang lệch với ô chọn, chỉnh cho cân
   bằng và giảm chiều cao đồng loạt xuống 2 ly, chỉnh chiều cao nút In/Sửa/Lưu = với nó"):
   ĐỒNG BỘ chiều cao 28px (giảm 4px so với 32px lần trước — "2 ly") + cỡ chữ 13px cho CẢ 3
   nhóm: ô lọc (khối ngay trên), 3 nút Chi tiết/Xếp dịch vụ/Tổng hợp (.cu-view-buttons) VÀ
   3 nút In/Sửa/Lưu (.cu-header-buttons) — trước đây CHỈ sửa mỗi nhóm nút xem, chưa đụng
   nhóm In/Sửa/Lưu nên 2 nhóm nút vẫn lệch nhau. Dùng flex + box-sizing:border-box để chữ
   luôn canh giữa đúng khi ép chiều cao. */
#page-cung-ung .cu-view-buttons .btn,
#page-cung-ung .cu-header-buttons .btn {
  height: 28px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-size: 13px;
}

/* ✅ MỚI (theo yêu cầu anh — 07/08/2026): 3 nút In/Sửa/Lưu ở màn Cung ứng — "Sửa"/"Lưu"
   mờ/nổi đổi qua lại theo đang khóa hay đang sửa (xem cuSetEditMode() ở
   app-cung-ung.js), "In" luôn nổi/bấm được. */
#cu-btn-sua.cu-btn-dim,
#cu-btn-luu.cu-btn-dim,
#ge-btn-sua.cu-btn-dim,
#ge-btn-luu.cu-btn-dim,
#ge-btn-them.cu-btn-dim {
  opacity: 0.45;
  filter: grayscale(40%);
}

/* Đang KHÓA (chưa bấm "Sửa") -> toàn bộ bảng Chi tiết/Tổng hợp không thao tác được,
   mờ nhẹ để anh biết đang ở chế độ chỉ xem. Vùng lọc (cu-filters) KHÔNG bị khóa — vẫn
   lọc/xem thoải mái lúc đang khóa. */
#cu-table-wrap.cu-locked,
#ge-table-wrap.cu-locked {
  pointer-events: none;
  user-select: none;
  opacity: 0.7;
}

/* ✅ MỚI (theo yêu cầu anh — 07/08/2026): cột "Xác nhận" ở màn Cung ứng — nội dung NCC
   trả lời qua link email, có thể khá dài, giới hạn chiều rộng + tự xuống dòng cho gọn
   bảng, không đẩy tràn ngang. */
#page-cung-ung .cu-c-xacnhan {
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
  font-size: 13px;
  color: #334155;
}

/* ✅ SỬA (theo yêu cầu anh — 07/08/2026): chỉ tô MÀU CHỮ theo trạng thái email, GIỮ
   NGUYÊN màu nền — VÀNG ĐẬM = đã gửi, NCC CHƯA trả lời; XANH LÁ ĐẬM = NCC ĐÃ trả lời
   (xem cuRowStatusClass() ở app-cung-ung.js). Trước đây tô cả nền, giờ đổi lại thành chỉ
   tô chữ theo đúng yêu cầu anh. */
#page-cung-ung tr.cu-row-pending td {
  color: #a16207;
}
#page-cung-ung tr.cu-row-confirmed td {
  color: #15803d;
}

@media print {
  .topbar, .tabs, .cu-filters, .cu-header-buttons, #cu-hh-picker-modal {
    display: none !important;
  }
  #page-cung-ung .card {
    box-shadow: none;
    border: none;
  }
}

/* ====== 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. */
/* ✅ SỬA (18/08/2026, theo yêu cầu anh): tăng max-width để đủ chỗ cho cột mới "Tên
   khách/Đoàn khách" (6cm) chen giữa "Ngày lập" và "Cơ sở kinh doanh" — không co hẹp các
   cột còn lại (giữ nguyên white-space:nowrap của các cột đó), bảng chỉ MỞ RỘNG ra; nếu
   màn hình hẹp hơn tổng chiều rộng bảng thì dialog tự cuộn ngang (đã có overflow:auto).
   ✅ SỬA (09/09/2026, theo yêu cầu anh Phong — "mở rộng hết chiều ngang sang 2 bên" để đủ
   chỗ cột "Người lập" cuối bảng, trước hay bị khuất/cuộn ngang mới thấy): bỏ hẳn mốc cứng
   1230px, cho dialog rộng gần hết màn hình (96vw) như các modal rộng khác trong app. */
.biz-xn-modal-dialog{
  max-width: 96vw;
  width: 96vw;
  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;
}
/* ✅ MỚI (18/08/2026, theo yêu cầu anh): cột "Tên khách/Đoàn khách" — chiều rộng cố định
   6cm, không tính theo nội dung như các cột khác (tránh đẩy/co các cột còn lại), tên dài
   thì tự XUỐNG DÒNG trong đúng 6cm này thay vì kéo rộng thêm. */
.biz-xn-list-table th.biz-xn-col-guestname,
.biz-xn-list-table td.biz-xn-col-guestname{
  width: 6cm;
  min-width: 6cm;
  max-width: 6cm;
  white-space: normal;
  word-break: break-word;
}
.biz-xn-list-row{
  cursor: pointer;
}
.biz-xn-list-row:hover{
  background: #eaf2ff;
}
/* ✅ MỚI (09/09/2026, theo yêu cầu anh Phong): tô màu chữ cả dòng theo tình trạng booking —
   ĐÚNG 3 màu đang dùng cho chữ Lịch trình trên lưới (Xanh=Xác nhận/Vàng=Giữ/Đỏ=Chờ, xem
   .biz-schedule-line-confirmed/-held/-cho, styles.css) — chỉ khác selector vì bảng này
   dùng riêng, không nằm trong #page-business (modal gắn thẳng vào body).
   ⚠️ SỬA LỖI (09/09/2026, theo báo lỗi anh Phong — "tô màu chữ vẫn chưa được"): "--pb-green"/
   "--pb-amber" KHÔNG phải biến toàn cục ở :root — chúng chỉ được khai báo CỤC BỘ bên trong
   "#page-business{...}" (xem dòng ~3516), nên chỉ những phần tử NẰM BÊN TRONG #page-business
   mới đọc được. Modal "biz-xn-list-modal" lại được JS gắn THẲNG vào <body> (KHÔNG nằm trong
   #page-business) -> var(--pb-green)/var(--pb-amber) ở đây luôn RỖNG, "color" bị trình duyệt
   coi là giá trị không hợp lệ và bỏ qua hẳn khai báo đó (rơi về màu chữ mặc định #333, y hệt
   như KHÔNG có "confirmed"/"held" gì cả) — trong khi dòng "cho" dùng thẳng mã hex "#dc2626"
   (không qua biến) nên vẫn tô đúng, khiến a chỉ thấy đúng 1/3 trạng thái có màu. Đổi 2 dòng
   trên sang thẳng mã hex (giống hệt giá trị gốc của 2 biến đó, xem "--pb-green: #16a34a" /
   "--pb-amber: #d97706" trong #page-business) để không còn phụ thuộc phạm vi biến CSS nữa. */
.biz-xn-list-table .biz-xn-st-confirmed td{ color: #16a34a; }
.biz-xn-list-table .biz-xn-st-held td{ color: #d97706; }
.biz-xn-list-table .biz-xn-st-cho td{ color: #dc2626; }

.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 ====== */
/* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong — "giãn khung bao ra sát 2 bên lề cách 1 li,
   khung trong cũng giãn ra cách khung ngoài 1 li"): ".content" (khung chứa mọi trang) mặc
   định chừa 32px lề trái/phải — kéo "khung bao" (".card") ra gần sát lề hơn (chỉ còn ~4px)
   bằng margin âm, giống hệt cách các trang khác đã làm (".cskd-setting-layout" ở trên,
   "#page-danh-sach-booking"...). ".card" mặc định cũng có padding riêng (12px 18px 18px) —
   giảm xuống còn ~4px để "khung trong" (".hh-left"/".hh-right") giãn ra sát "khung ngoài"
   (viền ".card") luôn, không chỉ sát lề màn hình. CHỈ áp dụng RIÊNG trang này. */
/* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "giãn tiếp chiều cao: sát tài khoản phía
   trên 1 li, tiêu đề sát khung trong 1 li, khung dưới sát lề dưới 1 li"): trước chỉ bù
   margin ngang (trái/phải); nay bù THÊM margin-top (16px padding-top của ".content" ->
   còn ~4px) và margin-bottom (32px padding-bottom của ".content" -> còn ~4px) để "khung
   bao ngoài cùng" (".card") giãn sát PHÍA TRÊN (gần thanh menu/tài khoản) lẫn PHÍA DƯỚI
   (gần lề dưới màn hình), không chỉ 2 bên như trước. */
#page-hhservice.page{
  margin: -12px -28px -28px;
}
#page-hhservice .card{
  padding: 4px;
  margin-bottom: 4px;
}
/* Tiêu đề "Danh mục HH.Dịch vụ" sát xuống "khung trong" (.hh-layout) chỉ còn ~1 li —
   trước đó cộng dồn 3 khoảng cách (margin-bottom của h2 + của .card-header + margin-top
   của .hh-layout) mới ra khoảng hở lớn nhìn thấy trong ảnh; giờ chỉ giữ lại đúng 1 khoảng
   4px (".card-header"), 2 khoảng còn lại bỏ hẳn. */
#page-hhservice .card-header{
  margin-bottom: 4px;
}
#page-hhservice .card-header h2{
  margin: 0;
}
.hh-layout {
  display: grid;
  grid-template-columns: 60fr 40fr;
  gap: 10px;
  margin-top: 0;
}

.hh-left,
.hh-right {
  border: 1px solid var(--border);
  padding: 8px;
  background: #fff;
  /* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong — "cố định phần tiêu đề khi cuộn xuống, cho
     con lăn độc lập giữa 2 mảng trái/phải"): flex column, y hệt kiểu 2 khung cuộn độc lập
     đã làm ở "Cài đặt CSKD" (".cskd-setting-left,.cskd-setting-right") — phần bảng bên
     trong (".hh-table"/".hh-member-table") chiếm hết chỗ còn lại ("flex:1;min-height:0"
     khai ở 2 class đó) và tự cuộn riêng khi tràn, còn tiêu đề/ô tìm kiếm phía trên (nằm
     NGOÀI phần cuộn) luôn đứng yên, không bị ẩn theo.
     ✅ SỬA (06/09/2026, theo báo lỗi anh Phong — "kéo xuống hết cỡ thì con lăn NGOÀI của cả
     trang vẫn hoạt động, đẩy mất phần cố định"): "height:640px" CỐ ĐỊNH là nguyên nhân —
     640px CỘNG với phần tiêu đề trang + footer phía dưới đôi khi VƯỢT quá chiều cao màn
     hình thật, buộc cả TRANG phải cuộn (che mất phần đáng lẽ đứng yên). Đổi sang
     "max-height" tính theo ĐÚNG phần màn hình còn lại (trừ thanh menu cố định "--topbar-h"
     + phần đầu/chân trang, xem "#page-assets .asset-left-panel" — cùng kỹ thuật).
     ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "giãn tiếp, phía dưới sát lề dưới 1 li"):
     số trừ 170px lúc đầu ước lượng RỘNG RÃI hơn thực tế cần — sau khi đã dồn hết khoảng
     cách phía trên/dưới về đúng "1 li" (xem "#page-hhservice.page"/"#page-hhservice .card"/
     ".hh-footer" phía trên/dưới), phần chừa lại chỉ còn: ~4px (lề trên) + 4px (đệm .card
     trên) + ~22px (tiêu đề) + 37px (".hh-footer": margin-top 10px + nút LƯU ~27px) + 4px
     (đệm .card dưới) + 4px (margin dưới .card) + 4px (lề dưới) ~79px — giảm 170px xuống
     80px (đo thử thực tế: để 100px dư ~36px ở mép dưới, để 70px lại thiếu ~7px làm lộ lại
     con lăn ngoài — 80px là mức vừa đủ, chỉ còn dư đúng "1 li" mà không tràn). */
  max-height: calc(100vh - var(--topbar-h, 96px) - 80px);
  min-height: 240px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.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;
}

/* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong): dòng tìm kiếm bảng "HH.Dịch vụ" (bên trái)
   chia thành 2 ô — ô "Tìm nhóm" lọc riêng theo cột Nhóm (xem applyHHSearchFilter() ở
   app-core.js). Chỉ đổi RIÊNG dòng tìm kiếm bên trái (".hh-left .hh-search-row") — dòng
   tìm kiếm "HH.Dịch vụ thành viên" bên phải dùng CHUNG class ".hh-search-row" nhưng còn có
   khung kết quả gợi ý (#hh-member-search-results) cần nằm DƯỚI ô nhập như cũ, không được
   đổi sang flex ngang. */
.hh-left .hh-search-row {
  display: flex;
  gap: 6px;
}
#hh-search-input {
  flex: 1 1 auto;
  min-width: 0;
}
#hh-group-search-input {
  flex: 0 0 160px;
}

/* Bảng HH.Dịch vụ */
.hh-table {
  border: 1px solid var(--border);
  border-radius: 3px;
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "cho con lăn độc lập, cố định tiêu đề khi
     cuộn"): trước "overflow:hidden" (chỉ để bo góc, không cho cuộn) — đổi "overflow-y:auto"
     để bảng tự cuộn dọc riêng khi danh sách dài, "overflow-x:hidden" giữ nguyên tác dụng bo
     góc. "flex:1;min-height:0" để bảng chiếm hết chỗ còn lại trong khung cha (".hh-left" đã
     là "display:flex;flex-direction:column;height:...") — "min-height:0" bắt buộc phải có
     thì flex item mới chịu co lại nhỏ hơn nội dung để "overflow-y:auto" phát huy tác dụng. */
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.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.
     ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "dồn TT/Mã/Tên sát nhau sang trái để mở
     rộng Nhóm, mở rộng Loại sang phải sát nút Sửa"): giảm TT (36px -> 28px) + Mã (90px ->
     68px) + "column-gap" (6px -> 4px) dồn hẳn phần dư đó cho Nhóm (0.9fr -> 1.3fr, đè bớt
     0.1fr của Tên HH.Dịch vụ — 1.5fr -> 1.4fr); Đơn vị tính giảm (0.8fr -> 0.5fr, giá trị
     vốn ngắn như "Kg"/"Suất"/"Lon") dồn cho Loại (0.7fr -> 1.1fr) để giãn sát nút Sửa hơn.
     ⚠️ Nguyên nhân CHÍNH của khoảng trắng "Loại" cách xa "Sửa" hóa ra là cột Actions cố
     định 150px trong khi 2 nút "Sửa"/"Xóa" (canh phải bằng "justify-content:flex-end" ở
     ".hh-row .hh-col-actions" bên dưới) chỉ chiếm ~90px — dư gần 60px TRỐNG ngay sau
     "Loại" (trước khi tới nút, vì nút dán sát mép PHẢI của cột 150px chứ không phải mép
     trái). Giảm thẳng cột Actions 150px -> 100px mới thật sự hết khoảng trắng đó. */
  grid-template-columns: 60px 28px 68px 1.4fr 1.3fr 0.5fr 1.1fr 100px;
  align-items: center;
  padding: 4px 6px;
  column-gap: 4px;
  border-bottom: 1px solid #e0e8f5;
  font-size: 12px;
}

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


.hh-row.header {
  /* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong): dán cố định dòng tiêu đề ở đầu khung cuộn
     (".hh-table" phía trên) — cuộn danh sách xuống vẫn luôn thấy tên cột, không cần kéo
     lên lại. */
  position: sticky;
  top: 0;
  z-index: 1;
  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],
.hh-row textarea[disabled] {
  color: #333;
  cursor: default;
  -webkit-text-fill-color: #333; /* Safari/Chrome: textarea[disabled] mặc định tô chữ nhạt hơn màu CSS thường, phải ép riêng mới đúng #333 như input/select cùng bảng */
}
.hh-row input[disabled]:hover,
.hh-row select[disabled]:hover,
.hh-row textarea[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"],
.hh-row textarea {
  width: 100%;
  padding: 3px 4px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 2px;
  font-size: 12px;
}

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

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

/* ✅ MỚI (theo yêu cầu anh — ô nào chữ dài quá tràn ra ngoài thì tự giãn cao xuống dòng
   thay vì bị cắt mất): "Mã"/"Tên HH.Dịch vụ"/"Đơn vị tính" đổi từ <input> sang <textarea>
   1 dòng (rows="1"), JS (hhAutoGrowCell(), app-core.js) tự đo và giãn chiều cao mỗi khi gõ
   hoặc mỗi khi đổ dữ liệu lên — CSS ở đây chỉ lo phần "nhìn giống input 1 dòng" lúc chưa
   tràn: không viền cuộn riêng, không kéo tay được, chữ giữ nguyên font/cỡ chữ như input
   cùng bảng, tự xuống dòng ở khoảng trắng hoặc giữa từ nếu 1 từ quá dài không có chỗ ngắt.*/
.hh-row textarea {
  resize: none;
  overflow: hidden;
  min-height: 22px;
  line-height: 1.35;
  font-family: inherit;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: middle;
}

.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;
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "cho con lăn độc lập, cố định tiêu đề khi
     cuộn"): y hệt lý do đã đổi ở ".hh-table" phía trên. */
  overflow-x: hidden;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.hh-member-row {
  display: grid;
  /* ✅ SỬA (theo yêu cầu anh): thêm 2 cột Đơn giá + Thành tiền, xen giữa Số lượng và nút
     Xóa — thứ tự Số lượng - Đơn giá - Thành tiền.
     ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "dồn các cột để mở rộng cột Tên"): giảm
     Đơn vị tính (1.1fr -> 0.8fr) + Số lượng (0.9fr -> 0.7fr) + Đơn giá (1.2fr -> 1.0fr) +
     Thành tiền (1.3fr -> 1.1fr) dồn hẳn cho "Tên HH.Dịch vụ thành viên" (2.2fr -> 2.8fr) —
     Đơn vị tính/Số lượng KHÔNG giảm sâu hơn vì tiêu đề cột 2 chữ ("Đơn vị tính"/"Số lượng")
     cần đủ rộng để xuống dòng gọn 2 dòng, giảm quá tay sẽ vỡ chữ giữa từ. */
  grid-template-columns: 2.8fr 0.8fr 0.7fr 1.0fr 1.1fr 80px;
  align-items: center;
  padding: 4px 6px;
  border-bottom: 1px solid #e0e8f5;
  font-size: 12px;
}

.hh-member-row.header {
  /* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong): dán cố định dòng tiêu đề, y hệt lý do đã
     đổi ở ".hh-row.header" phía trên. */
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--blue-light);
  font-weight: bold;
}

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

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

/* ✅ MỚI (theo yêu cầu anh — giao diện các dòng "HH.Dịch vụ thành viên" giống hệt bảng
   "HH.Dịch vụ" bên trái): "Đơn vị tính"/"Đơn giá"/"Thành tiền" đổi từ <input disabled>
   sang <textarea disabled rows="1"> để tự giãn cao xuống dòng khi chữ dài tràn ô (giống
   hệt "Mã"/"Tên HH.Dịch vụ"/"Đơn vị tính" bên bảng trái — xem .hh-row textarea) — CSS lo
   phần "nhìn giống input" lúc chưa tràn. Riêng "Số lượng" (.hhm-qty-input) VẪN giữ
   <input> như cũ, KHÔNG đổi sang textarea — ô này có gắn sẵn bộ tự động định dạng số kiểu
   Việt Nam dùng chung toàn hệ thống (class "js-num", xem initWingoNumberInputsVN() ở
   app-booking.js) mà bộ đó CHỈ nhận diện đúng "input.js-num" — đổi sang textarea sẽ làm
   ô này lặng lẽ MẤT định dạng số (dấu phẩy thập phân, tự bôi đen khi bấm vào...), số lượng
   HH.Dịch vụ thành viên vốn ngắn (VD "0,05") cũng hiếm khi tràn ô nên không cần đổi. */
.hh-member-row textarea {
  resize: none;
  overflow: hidden;
  min-height: 22px;
  line-height: 1.35;
  font-family: inherit;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: middle;
}

/* Chữ trong ô đã khóa (chưa bấm "Sửa" ở dòng HH.Dịch vụ cha bên trái) vẫn rõ, đậm như
   bảng "HH.Dịch vụ" bên trái — trước đây không khai riêng, các ô disabled ở bảng này bị
   trình duyệt tự hạ màu nhạt hơn (khác hẳn bảng trái), nhìn "mờ mờ" không đồng bộ. */
.hh-member-row select[disabled],
.hh-member-row input[disabled],
.hh-member-row textarea[disabled] {
  color: #333;
  cursor: default;
  -webkit-text-fill-color: #333;
}
.hh-member-row select[disabled]:hover,
.hh-member-row input[disabled]:hover,
.hh-member-row textarea[disabled]:hover {
  border-color: transparent;
}

/* ✅ MỚI (theo yêu cầu anh): Đơn giá + Thành tiền — số tiền canh lề phải cho dễ đọc,
   đúng quy ước hiển thị số tiền trong toàn hệ thống. */
.hh-member-row .hhm-col-price,
.hh-member-row .hhm-col-amount {
  text-align: right;
}
.hh-member-row .hhm-price-input,
.hh-member-row .hhm-amount-input {
  text-align: right;
  color: #334155;
}

.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;
  /* ✅ SỬA (theo yêu cầu anh — 07/08/2026): thêm cột "Tài khoản đăng nhập" (thay chỗ nút
     "Gọi" cũ), CĂN ĐỀU các cột dữ liệu dạng chữ (đều 1fr) — chỉ giữ cố định px cho 3 cột
     không cần co giãn theo nội dung (Chọn/Loại/Xóa). Thứ tự: Chọn, Tên, Viết tắt, SĐT,
     Tài khoản đăng nhập, Email, Địa chỉ, Loại, Xóa. */
  grid-template-columns: 60px 1fr 1fr 1fr 1fr 1fr 1.2fr 110px 70px;
  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-account,
.cust-col-email,
.cust-col-address,
.cust-col-type,
.cust-col-actions {
  display: flex;
  align-items: center;
}

.customer-row input[type="text"],
.customer-row input[type="email"],
.customer-row input[type="tel"],
.customer-row select {
  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;
}

/* 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;
  /* ✅ SỬA (09/09/2026, theo yêu cầu anh Phong — "sửa cách chọn CSKD giống cách chọn Tính
     chất"): 220px KHÔNG đủ chỗ cho tên CSKD dài hơn (VD "Dragon Legend 01", "Limouzine
     01") — chữ bị vỡ xuống 2-3 dòng xấu (khác hẳn ô Tính chất, chữ ngắn nên vừa 220px,
     nhìn như 2 kiểu khác nhau dù dùng CHUNG đúng 1 khung .price-sched-ac). Nới lên 300px —
     áp dụng ĐỀU cho cả ".facility-property-ac" bên dưới để 2 ô nhìn NHẤT QUÁN với nhau. */
  width: 300px;
}
.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;
  /* ✅ SỬA (24/08/2026, theo yêu cầu anh): thêm cột "Giá mua" chen giữa Cơ sở kinh doanh
     và Giá (VND) — kích thước bằng đúng cột Giá (VND) nên 2 cột sau cùng đều 1fr. */
  grid-template-columns: 2fr 1fr 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;
}

/* ✅ MỚI (24/08/2026, theo yêu cầu anh): gộp dòng chữ "Giá theo khách" vào CHUNG 1 ô với
   Tên Cơ sở (trước đây là 1 <span> nằm CẠNH ô tên) — khung ".price-bu-name-box" đóng vai
   trò khung input (border/padding riêng), hiển thị Tên Cơ sở và "Giá theo khách" thành 2
   dòng xếp chồng bên trong CÙNG 1 ô. Input tên bên trong bỏ border/padding riêng để
   không bị viền đôi (viền đã có ở khung ngoài .price-bu-name-box). */
.price-bu-cskd-row .price-bu-name-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 24px;
  padding: 2px 4px;
  border-radius: 2px;
  border: 1px solid var(--border);
  background: #fff;
  box-sizing: border-box;
}
.price-bu-cskd-row .price-bu-name-box input {
  width: 100%;
  height: auto;
  padding: 0;
  border: none;
  font-size: 12px;
  background: transparent;
}
.price-bu-cskd-row .price-bu-name-sub {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
  white-space: nowrap;
}

/* Ẩ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;
  /* ✅ SỬA (theo yêu cầu anh): thêm cột "Loại" xen giữa CSKD và Theo tỷ lệ %. */
  /* ✅ SỬA (14/09/2026, theo yêu cầu anh Phong): thêm cột "Theo SL" xen giữa Loại và Theo
     tỷ lệ % (giống hệt vị trí tương ứng ở Cài đặt CSKD > HH.Dịch vụ). */
  grid-template-columns: 1fr 180px 140px 130px 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,
#page-adjust-reasons select.adj-reason-type,
#page-adjust-reasons select.adj-reason-slloai{
  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)
   =========================== */
/* ✅ MỚI (23/08/2026, theo yêu cầu anh Phong — "giãn khung tổng ra sát 2 bên cách lề 1
   li"): ".content" (khung chứa mọi trang) mặc định chừa 32px lề trái/phải — kéo khung
   "Cài đặt CSKD" ra gần sát lề hơn (chỉ còn ~4px) bằng margin âm, giống hệt cách trang
   "Cơ sở kinh doanh" (#page-business) đã làm trước đây, CHỈ áp dụng RIÊNG trang này,
   không đụng tới các trang khác. */
#page-cskd-settings.page{
  margin: 0 -28px;
}
.cskd-setting-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

/* ✅ SỬA (theo yêu cầu anh — giao diện "Cài đặt CSKD" đổi cho giống hệt "Danh mục
   HH.Dịch vụ": trước đây trang này tự vẽ riêng 1 kiểu "SaaS hiện đại" khác hẳn — viền
   xanh dương/bo tròn to/đổ bóng/chữ hoa cách chữ — không khớp màu xanh lá + kiểu phẳng
   đang dùng chung toàn app (xem .hh-left/.hh-right/.hh-row trong CHÍNH file này). Đổi lại
   dùng ĐÚNG các biến màu chung (var(--border)/var(--blue-light)) và kiểu phẳng, không đổ
   bóng/không bo tròn to, y hệt bảng "HH.Dịch vụ". CHỈ đổi phần MÀU SẮC/KIỂU DÁNG — KHÔNG
   đụng vào cột/khoảng cách (grid-template-columns, flex, gap...) của bảng bên phải (9
   cột: TT/Tên/SL/Giờ/Theo SL/T.Ngày/P.Bổ/Phí/Xóa) vì phần đó đã mất nhiều đợt sửa mới
   đúng, đụng vào dễ tái phát đúng mấy lỗi "khe hở/tràn khung" đã từng gặp. */
/* ✅ MỚI (theo yêu cầu anh — 2 khung cuộn ĐỘC LẬP nhau, cuộn bên này không kéo bên kia):
   đổi "min-height" (chỉ đặt SÀN, nội dung nhiều vẫn đẩy khung cao thêm mãi, kéo theo cuộn
   chung cả TRANG) sang "height" CỐ ĐỊNH + "display:flex;flex-direction:column" — phần bảng
   dữ liệu bên trong (.cskd-setting-table/.cskd-hh-table) chiếm hết chỗ còn lại
   ("flex:1;min-height:0" khai ở đúng 2 class đó) và tự có thanh cuộn riêng khi tràn, còn
   tiêu đề/ô tìm kiếm/nút Lưu phía trên-dưới luôn đứng yên, không bị cuộn theo. */
.cskd-setting-left,
.cskd-setting-right{
  border:1px solid var(--border);
  border-radius:3px;
  padding:8px;
  background:#fff;
  height: 560px;
  display:flex;
  flex-direction:column;
  box-shadow:none;
}

.cskd-setting-search-row input{
  width:100%;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:3px;
  font-size:12px;
  margin-bottom:6px;
  background:#fff;
}
.cskd-setting-search-row input:focus{
  outline:none;
  border-color: var(--border);
  box-shadow:none;
  background-color:#fff;
}

.cskd-setting-table{
  border:1px solid var(--border);
  border-radius:3px;
  overflow-x:hidden;
  overflow-y:auto;
  padding-top:0;
  /* ✅ MỚI: chiếm hết chỗ còn lại trong khung (".cskd-setting-left" đã là
     "display:flex;flex-direction:column;height:..."), tự cuộn riêng khi danh sách dài —
     "min-height:0" bắt buộc phải có thì flex item mới chịu co lại nhỏ hơn nội dung để
     "overflow-y:auto" phát huy tác dụng (nếu không khung sẽ tự giãn cao theo nội dung như
     cũ, không bao giờ hiện thanh cuộn). */
  flex:1;
  min-height:0;
}

.cskd-setting-row{
  display:grid;
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "thu hẹp cột Cơ sở ~1.5cm, đẩy nút Xóa
     sát mép phải cách lề 1 li, đều để mở rộng cột Lịch trình"): giảm Cơ sở (1fr -> 0.7fr)
     dồn hẳn 0.3fr đó cho Lịch trình (1fr -> 1.3fr) — 0.3fr chênh lệch tương ứng ~1.5cm trên
     chiều rộng thực tế của khung trái; Tên CSKD giữ nguyên tỷ lệ cũ (1.1fr), không đụng.
     Đồng thời giảm "gap" (6px -> 3px, "1 li" — cùng đơn vị đã dùng ở bảng HH.Dịch vụ bên
     phải) + lề phải của "padding" (6px -> 3px) để nút Xóa nằm sát mép phải khung hơn, phần
     dư ra cũng góp thêm cho 3 cột co giãn ở trên. */
  grid-template-columns: 1.1fr 0.7fr 1.3fr 68px;
  gap:3px;
  align-items:center;
  padding:4px 3px 4px 6px;
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  transition: background-color .12s;
  font-size:12px;
}
/* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "đẩy nút Xóa sát mép phải"): <button> KHÔNG
   tự giãn hết chiều rộng ô lưới theo "justify-items:stretch" mặc định như 1 <div> thường
   (browser không co giãn control dạng này) — nên trước đây nút luôn nằm sát bên TRÁI của ô
   68px, để hở khoảng trống lớn bên phải dù đã giảm "gap"/"padding" ở trên. Biến ô cuối
   (chứa nút Xóa) thành flex + "justify-content:flex-end" để tự đẩy nút sang phải, giống
   hệt cách ô Xóa bên bảng HH.Dịch vụ (".cskd-hh-col-del") đã làm. */
.cskd-setting-row > div:last-child{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
.cskd-setting-data-row:hover{
  background:transparent;
}

.cskd-setting-row.header{
  /* ✅ MỚI: dán cố định dòng tiêu đề ở đầu khung cuộn (".cskd-setting-table" phía trên) —
     cuộn danh sách xuống vẫn luôn thấy tên cột, không cần kéo lên lại. */
  position:sticky;
  top:0;
  z-index:1;
  font-weight:bold;
  font-size:12px;
  letter-spacing:normal;
  text-transform:none;
  color:inherit;
  background:var(--blue-light);
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  padding:4px 3px 4px 6px;
  margin-bottom:0;
}

.cskd-setting-row input,
.cskd-setting-row textarea{
  width:100%;
  height:auto;
  padding:3px 4px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:12px;
  background:transparent;
  transition: border-color .15s;
}
.cskd-setting-row input:hover,
.cskd-setting-row textarea:hover{
  border-color:#d0d7de;
}
.cskd-setting-row input:focus,
.cskd-setting-row textarea:focus{
  outline:none;
  border-color: var(--border);
  background:#fff;
  box-shadow:none;
}
/* ✅ MỚI (theo yêu cầu anh — ô nào chữ tràn ra thì tự giãn cao xuống dòng thay vì bị cắt
   mất): "Tên CSKD"/"Cơ sở" đổi từ <input> sang <textarea> 1 dòng (rows="1"), JS
   (hhAutoGrowCell(), app-core.js — dùng lại đúng hàm của bảng HH.Dịch vụ) tự đo và giãn
   chiều cao — CSS ở đây chỉ lo phần "nhìn giống input 1 dòng" lúc chưa tràn.
   ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "toàn bộ các cột đều giãn cao khi tràn"):
   "Lịch trình" (.cskd-schedule-input) lúc đầu KHÔNG đổi vì cần thuộc tính "list" (native
   datalist, <textarea> không hỗ trợ) — nay đổi luôn sang <textarea> + autocomplete tự vẽ
   (attachAutocomplete(), xem app-core.js) nên dùng chung style này. */
.cskd-setting-row textarea{
  resize: none;
  overflow: hidden;
  min-height: 20px;
  line-height: 1.35;
  font-family: inherit;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: middle;
}

.cskd-setting-data-row.selected{
  background:#fff6d8;
  box-shadow:none;
  border-radius:0;
  padding:4px 6px;
}

/* ✅ SỬA (theo yêu cầu anh — đổi giống hệt ".hh-right-header" bên Danh mục HH.Dịch vụ): bỏ
   đường viền phân cách + màu chữ riêng (#233047) kiểu cũ, dùng chữ đậm mặc định. */
.cskd-setting-right-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
  font-weight:bold;
}

.cskd-hh-table{
  /* ✅ SỬA (theo yêu cầu anh — đổi giống hệt ".hh-table" bên Danh mục HH.Dịch vụ): viền
     bao quanh cả bảng + bo góc nhẹ, thay vì chỉ 1 đường kẻ mờ phía trên như kiểu cũ. */
  border:1px solid var(--border);
  border-radius:3px;
  /* ✅ SỬA (theo yêu cầu anh — khung này tự có thanh cuộn riêng, không kéo theo khung bên
     trái): trước "overflow:hidden" (chỉ để bo góc, không cho cuộn) — đổi "overflow-y:auto"
     để cuộn dọc riêng khi danh sách dài, "overflow-x:hidden" giữ nguyên tác dụng bo góc. */
  overflow-x:hidden;
  overflow-y:auto;
  /* ✅ MỚI (04/09/2026): xem giải thích đầy đủ ở ".cskd-hh-row" bên dưới — thiếu dòng này
     là 1 trong 2 chỗ (cùng với "#page-cskd-settings .cskd-setting-right" ở dưới) khiến khung
     bên phải bị đẩy tràn ra ngoài khi tổng các cột cố định vượt quá chỗ trống thật có.
     ⚠️ GIỮ NGUYÊN — không đụng: đây là fix cấu trúc (layout), không liên quan tới giao diện. */
  min-width:0;
  /* ✅ MỚI: chiếm hết chỗ còn lại trong khung phải (".cskd-setting-right" đã là
     "display:flex;flex-direction:column;height:...") — "min-height:0" bắt buộc phải có để
     "overflow-y:auto" phía trên phát huy tác dụng (xem giải thích y hệt ở
     ".cskd-setting-table"). "flex:1" đã khai riêng ở "#page-cskd-settings .cskd-hh-table"
     phía dưới file (giữ nguyên, không trùng lặp lại ở đây). */
  min-height:0;
}

.cskd-hh-row{
  /* ✅ SỬA (02/09/2026, theo yêu cầu anh Phong — "dồn nút xóa sang phải, các cột khác
     dồn sát Xóa để mở rộng ô Tên HH.dịch vụ"): CSS Grid trước đây (grid-template-columns)
     không phân bổ khoảng trống thừa cho cột Tên như mong muốn trên máy anh Phong (khe hở
     bất thường giữa "Giờ" và "Theo SL"), nên đổi hẳn sang Flexbox — các cột cố định khai
     "flex:0 0 <px>" (không co/giãn), RIÊNG cột Tên (".cskd-hh-col-name") khai
     "flex:1 1 auto" để LUÔN hút hết toàn bộ khoảng trống còn thừa, đẩy nút "Xóa" luôn nằm
     sát mép phải cùng dòng (là item cuối cùng trong hàng flex).
     ✅ SỬA (03/09/2026, theo yêu cầu anh Phong — "dồn TT sang trái, dồn SL/Giờ/Theo SL/
     T.Ngày/P.Bổ sát Xóa, khoảng cách giữa các cột cách nhau 1 li, mở rộng cột Tên sang cả
     2 bên"): giảm hẳn "gap" từ 10px xuống còn 3px ("1 li") — vì cột Tên là item DUY NHẤT
     có "flex:1 1 auto" trong hàng, hễ khoảng cách (gap) giữa BẤT KỲ 2 cột nào trong hàng
     co lại, phần dư ra sẽ tự động chảy hết vào cột Tên (không cần chỉnh tay từng cột) —
     vừa mở rộng Tên sang trái (khoảng TT-Tên hẹp lại) vừa mở rộng sang phải (khoảng
     Tên-SL-Giờ-TheoSL-TNgay-PBo-Xóa đều hẹp lại theo).
     ✅ SỬA (04/09/2026, theo yêu cầu anh Phong — "dồn hết các cột lại để mở rộng cột Tên
     HH.dịch vụ ra"): thêm hẳn "min-width:0" (xem .cskd-hh-table/.cskd-setting-right bên
     dưới) — lỗi "khe hở bất thường giữa Giờ và Theo SL" y hệt lần trước (comment 02/09/2026
     ở trên) đã QUAY LẠI, nhưng lần này do NGUYÊN NHÂN KHÁC: mặc định trình duyệt, 1 flex/
     grid item KHÔNG co nhỏ hơn kích thước NỘI DUNG TỐI THIỂU của nó trừ khi khai tay
     "min-width:0" — cột Tên (".cskd-hh-col-name") ĐÃ khai "min-width:0" nên co được trong
     PHẠM VI hàng ".cskd-hh-row" này, NHƯNG ".cskd-hh-table" (bọc ngoài hàng) và
     ".cskd-setting-right" (khung bọc ngoài cùng, là 1 ô trong CSS Grid 2 cột) thì CHƯA khai
     — nên khi tổng các cột cố định (TT+SL+Giờ+TheoSL+TNgay+PBo+Phí+Xóa) sau khi thêm cột
     "Phí" mới vượt quá khoảng trống thật sự có, 2 lớp bọc ngoài đó tự ĐÒI rộng ra bằng đúng
     kích thước tối thiểu của TOÀN BỘ nội dung bên trong (không chịu co), đẩy cả khung bên
     phải TRÀN ra ngoài (quá nửa màn hình dành cho nó) — nhìn giống hệt "khe hở" dù bản chất
     khác hẳn lần trước. */
  /* ⚠️ GIỮ NGUYÊN — không đụng: display/gap/min-width là fix cấu trúc (chống tràn/khe hở
     khung, xem chú thích dài phía trên) — CHỈ đổi màu/bo góc/khoảng đệm bên dưới cho giống
     ".hh-row". */
  display:flex;
  align-items:center;
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "dồn các cột sát nhau + sang phải hơn nữa
     để mở rộng thêm cột Tên"): giảm tiếp "gap" (3px -> 2px) + lề phải của "padding" (6px
     -> 3px, "1 li" — giống hệt bảng bên trái) — cột Tên (".cskd-hh-col-name") đang là item
     DUY NHẤT có "flex:1 1 auto" nên toàn bộ phần dư ra tự động chảy hết vào đó, không cần
     đụng gì thêm ở chính cột Tên. */
  gap:2px;
  padding:4px 3px 4px 6px;
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  transition: background-color .12s;
  min-width:0;
}
/* ✅ MỚI (23/08/2026, theo yêu cầu anh Phong): cột "Giờ" — giờ sử dụng cố định (24 giờ)
   của dòng HH.Dịch vụ, nằm ngay sau cột Số lượng.
   ✅ SỬA (23/08/2026): đổi từ <input type="time"> (hiển thị theo định dạng đồng hồ của
   HỆ ĐIỀU HÀNH/trình duyệt — Windows/Chrome nhiều máy hiện AM/PM thay vì 24 giờ dù giá
   trị lưu vẫn đúng "HH:mm") sang 2 ô số Giờ/Phút riêng, LUÔN hiển thị đúng định dạng 24
   giờ trên MỌI máy, không phụ thuộc cài đặt hệ thống — giống hệt cách ô "Ngày giờ sử
   dụng" ở Kèm theo (Booking) đang làm (.booking-dt-hour-input/.booking-dt-min-input). */
.cskd-hh-gio-wrap{
  display:flex;
  align-items:center;
  gap:3px;
}
/* ✅ MỚI (02/09/2026): khai flex-basis cố định cho từng cột trong hàng flex mới — cột
   "Giờ" áp dụng chung cho cả header (chỉ có .cskd-hh-col-gio) lẫn dòng dữ liệu (có thêm
   .cskd-hh-gio-wrap) nên khai trực tiếp trên .cskd-hh-col-gio. */
.cskd-hh-col-gio{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 96px -> 84px — dồn bớt cho cột Tên
     (xem 2 ô Giờ/Phút thu nhỏ theo, ".cskd-hh-row .cskd-hh-gio-hour-input" bên dưới). */
  flex:0 0 84px;
}
.cskd-hh-col-name{
  flex:1 1 auto;
  min-width:0;
}
.cskd-hh-col-sl{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 48px -> 42px — dồn bớt cho cột Tên. */
  flex:0 0 42px;
}
/* ✅ SỬA (03/09/2026, theo yêu cầu anh Phong — "dồn nút Xóa ra sát mép phải cách 1 li để
   lấy diện tích"): lúc đầu thử bù riêng margin-left ÂM chỉ cho mỗi cột này — sau đổi cách
   làm gọn hơn: giảm thẳng "gap" chung của CẢ hàng xuống 3px (xem .cskd-hh-row phía trên),
   áp dụng đều cho MỌI cột luôn, không cần bù riêng ở đây nữa. */
.cskd-hh-col-del{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 68px -> 60px — dồn bớt cho cột Tên. */
  flex:0 0 60px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
}
/* Cần .cskd-hh-row đứng trước để độ ưu tiên (specificity) cao hơn quy tắc chung
   ".cskd-hh-row input{ width:100%; ... }" bên dưới — nếu không 2 ô Giờ/Phút bị ép full
   width theo quy tắc chung, không co lại đúng 38px như ý. */
.cskd-hh-row .cskd-hh-gio-hour-input,
.cskd-hh-row .cskd-hh-gio-min-input{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 38px -> 34px — dồn bớt cho cột Tên. */
  width:34px;
  min-width:34px;
  flex:0 0 auto;
  text-align:center;
  padding-left:2px;
  padding-right:2px;
}
.cskd-hh-gio-sep{
  font-weight:600;
  color:#5b6b85;
}
/* Ẩn nút tăng/giảm mặc định của input number cho gọn (chrome/edge) */
.cskd-hh-gio-hour-input::-webkit-inner-spin-button,
.cskd-hh-gio-hour-input::-webkit-outer-spin-button,
.cskd-hh-gio-min-input::-webkit-inner-spin-button,
.cskd-hh-gio-min-input::-webkit-outer-spin-button{
  -webkit-appearance:none;
  margin:0;
}
.cskd-hh-gio-hour-input,
.cskd-hh-gio-min-input{
  -moz-appearance:textfield;
}
/* ✅ SỬA (04/09/2026, theo yêu cầu anh Phong — "dồn hết các cột lại để mở rộng cột Tên"):
   giảm 4 cột tích chọn (Theo SL/T.Ngày/P.Bổ/Phí) từ 56px -> 42px mỗi cột (ô tròn tích chỉ
   18px, 42px vẫn đủ rộng, không bị chật) — dồn thêm được 56px nữa cho cột Tên.
   ✅ SỬA (14/09/2026, theo yêu cầu anh Phong — "Theo SL: thay dấu tích = cách chọn danh
   mục N.Lớn/T.Em/M.Phí"): cột này đổi từ ô tích tròn 18px sang <select> hiện chữ ("N.Lớn"/
   "T.Em"/"M.Phí"), 36px không đủ chỗ — tăng lên 62px (bớt lại của cột Tên, chấp nhận được vì
   Tên vẫn là cột duy nhất "flex:1 1 auto", tự hút hết phần còn thừa). */
.cskd-hh-col-bysl{
  flex:0 0 62px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
/* ✅ MỚI (14/09/2026): kiểu <select> cột "Theo SL" — nhỏ gọn khớp chiều cao/hover/focus của
   các ô input khác trong hàng (".cskd-hh-row input/textarea" ở dưới, nhưng "select" không
   nằm trong selector đó nên phải khai riêng ở đây), chỉ khác font nhỏ hơn 1 chút (11px thay
   vì 12px) để "N.Lớn"/"T.Em"/"M.Phí" không bị tràn khỏi 62px. */
.cskd-hh-row .cskd-hh-bysl-select{
  width:100%;
  height:26px;
  padding:2px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:11px;
  background:transparent;
  cursor:pointer;
  transition: border-color .15s;
}
.cskd-hh-row .cskd-hh-bysl-select:hover{
  border-color:#d0d7de;
}
.cskd-hh-row .cskd-hh-bysl-select:focus{
  outline:none;
  border-color: var(--border);
  background:#fff;
  box-shadow:none;
}
/* ✅ MỚI (01/09/2026, theo yêu cầu anh Phong): cột "T.Ngày" — checkbox mới, nằm giữa
   "Theo SL" và nút Xóa. */
.cskd-hh-col-tngay{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 42px -> 36px — dồn bớt cho cột Tên. */
  flex:0 0 36px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
/* ✅ MỚI (03/09/2026, theo yêu cầu anh Phong): cột "P.Bổ" — checkbox mới, nằm giữa "T.Ngày"
   và nút Xóa (chuẩn bị cho bảng tính phân bổ chi phí sau này — chưa gắn logic nghiệp vụ
   gì, hiện tại chỉ lưu/hiện đúng trạng thái tích chọn, y hệt "T.Ngày"/"Theo SL"). */
.cskd-hh-col-pbo{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 42px -> 36px — dồn bớt cho cột Tên. */
  flex:0 0 36px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
/* ✅ MỚI (04/09/2026, theo yêu cầu anh Phong): cột "Phí" — checkbox mới, nằm giữa "P.Bổ" và
   nút Xóa (đánh dấu dòng HH.Dịch vụ có tính vào Chi phí của CSKD hay không, dùng cho "Bảng
   giá thành" đang bàn). Cùng cỡ/kiểu với "P.Bổ" — vì hàng đang là Flexbox nên thêm cột cố
   định này tự động đẩy nút "Xóa" (item cuối, luôn dính sát mép phải) sang phải thêm, không
   cần chỉnh gì thêm ở ".cskd-hh-col-del". */
.cskd-hh-col-phi{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 42px -> 36px — dồn bớt cho cột Tên. */
  flex:0 0 36px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
/* ✅ SỬA (01/09/2026, theo yêu cầu anh Phong): đổi 2 ô tích "Theo SL"/"T.Ngày" từ checkbox
   vuông mặc định sang dạng tích TRÒN (giống hệt kiểu tích "Từ ngày"/"Đến ngày" ở bảng
   Combo — ".combo-product-col-ngay input[type=radio]") — vẫn LÀ checkbox (đọc/lưu qua
   ".checked" như cũ, không đổi logic gì), chỉ đổi HÌNH THỨC: viền tròn xám khi chưa tích,
   tròn xanh + chấm trắng ở giữa khi đã tích — tự vẽ bằng "appearance:none" vì trình duyệt
   không có sẵn kiểu tròn cho checkbox (chỉ có sẵn cho radio). */
/* ⚠️ LƯU Ý: phải viết ".cskd-hh-row .cskd-hh-tngay-input" (thêm tiền tố ".cskd-hh-row")
   thay vì chỉ ".cskd-hh-tngay-input" — nếu không, độ đặc hiệu (specificity) thấp hơn rule
   chung ".cskd-hh-row input{ width:100%; height:30px; ... }" (nằm SAU trong file) sẽ đè
   mất "width/height" vừa khai ở đây, y hệt lỗi đã gặp + đã sửa với ô Giờ/Phút (xem chú
   thích ở ".cskd-hh-row .cskd-hh-gio-hour-input" phía trên).
   ✅ SỬA (14/09/2026, theo yêu cầu anh Phong): bỏ ".cskd-hh-bysl-input" khỏi nhóm 4 ô tích
   tròn này — cột "Theo SL" giờ là <select> (".cskd-hh-bysl-select", kiểu riêng ở trên), ô
   input checkbox không còn tồn tại trong HTML nữa. Chỉ còn 3 cột T.Ngày/P.Bổ/Phí dùng kiểu
   tích tròn này. */
.cskd-hh-row .cskd-hh-tngay-input,
.cskd-hh-row .cskd-hh-pbo-input,
.cskd-hh-row .cskd-hh-phi-input{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  min-width:18px;
  border:2px solid #c6ccd6;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  position:relative;
  margin:0;
  flex:0 0 auto;
  padding:0;
}
.cskd-hh-row .cskd-hh-tngay-input:checked,
.cskd-hh-row .cskd-hh-pbo-input:checked,
.cskd-hh-row .cskd-hh-phi-input:checked{
  border-color: var(--blue);
  background: var(--blue);
}
.cskd-hh-row .cskd-hh-tngay-input:checked::after,
.cskd-hh-row .cskd-hh-pbo-input:checked::after,
.cskd-hh-row .cskd-hh-phi-input:checked::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%, -50%);
}
/* ✅ MỚI (23/08/2026, theo yêu cầu anh Phong): cột "TT" — số thứ tự ngày áp dụng của
   dòng HH.Dịch vụ, đặt đầu tiên bên trái (giống cột TT ở khối "Địa điểm" bên Booking). */
.cskd-hh-col-tt{
  /* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong): giảm 40px -> 34px — dồn bớt cho cột Tên. */
  flex:0 0 34px;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
.cskd-hh-tt-input{
  text-align:center;
  font-weight:600;
}
.cskd-hh-data-row:hover{
  background:transparent;
}

.cskd-hh-row.header{
  /* ✅ MỚI: dán cố định dòng tiêu đề ở đầu khung cuộn (".cskd-hh-table" phía trên) — cuộn
     danh sách xuống vẫn luôn thấy TT/Tên/SL/Giờ/Theo SL/T.Ngày/P.Bổ/Phí, không cần kéo lên
     lại. */
  position:sticky;
  top:0;
  z-index:1;
  font-weight:bold;
  font-size:12px;
  letter-spacing:normal;
  text-transform:none;
  color:inherit;
  background:var(--blue-light);
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  padding:4px 3px 4px 6px;
  margin-bottom:0;
}

.cskd-hh-row input,
.cskd-hh-row textarea{
  width:100%;
  height:auto;
  padding:3px 4px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:12px;
  background:transparent;
  transition: border-color .15s;
}
.cskd-hh-row input:hover,
.cskd-hh-row textarea:hover{
  border-color:#d0d7de;
}
.cskd-hh-row input:focus,
.cskd-hh-row textarea:focus{
  outline:none;
  border-color: var(--border);
  background:#fff;
  box-shadow:none;
}
/* ✅ MỚI (theo yêu cầu anh — ô nào chữ tràn ra thì tự giãn cao xuống dòng thay vì bị cắt
   mất): "Tên HH.Dịch vụ" đổi từ <input> sang <textarea> 1 dòng (rows="1") — CSS ở đây chỉ
   lo phần "nhìn giống input 1 dòng" lúc chưa tràn, JS (hhAutoGrowCell()) lo phần giãn cao.
   Các cột còn lại (TT/SL/Giờ/Phút/4 ô tích tròn) VẪN LÀ <input> như cũ, không đổi. */
.cskd-hh-row textarea{
  resize: none;
  overflow: hidden;
  min-height: 20px;
  line-height: 1.35;
  font-family: inherit;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: middle;
}

.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) ===== */
/* ✅ MỚI: khung bọc chung cho input + ac-box khi KHÔNG nằm trong 1 ô bảng có sẵn
   position:relative — dùng cho ô "Tên cơ quan" (Danh mục khách hàng, gợi ý theo Danh mục
   Nhóm) và các ô tương tự sau này. */
.ac-wrap { position: relative; }
/* ✅ SỬA (theo yêu cầu anh — ô "Tên cơ quan" bị hẹp hơn "Điện thoại"): input bên trong
   ".ac-wrap" là con của 1 div thường (không phải trực tiếp con của ".form-field" — flex
   column ở đó chỉ tự giãn full-width cho CON TRỰC TIẾP), nên không tự giãn full-width như
   input các ô khác — phải khai báo tay. */
.ac-wrap input{
  width: 100%;
  box-sizing: border-box;
}
.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;
  /* ✅ SỬA (theo yêu cầu anh — khung phải cuộn riêng, không kéo theo khung trái): đổi
     "min-height" (chỉ đặt sàn, nội dung nhiều vẫn đẩy khung cao thêm mãi) sang "height"
     CỐ ĐỊNH, khớp đúng chiều cao khung trái (".cskd-setting-left, .cskd-setting-right"
     phía trên, 560px) để 2 khung luôn bằng nhau — phần bảng bên trong
     (".cskd-hh-table") chiếm hết chỗ còn lại và tự cuộn khi tràn (xem "flex:1" khai ở
     "#page-cskd-settings .cskd-hh-table" bên dưới + "min-height:0" ở ".cskd-hh-table"). */
  height: 560px;
  /* ✅ MỚI (04/09/2026): xem giải thích đầy đủ ở ".cskd-hh-row" — ".cskd-setting-right" là
     1 ô trong CSS Grid 2 cột (".cskd-setting-layout"), mặc định KHÔNG co nhỏ hơn nội dung
     tối thiểu bên trong nó trừ khi khai tay "min-width:0" — thiếu dòng này khiến khung bên
     phải tự đòi rộng hơn đúng 1/2 màn hình khi bảng HH.Dịch vụ có nhiều cột, tràn ra ngoài. */
  min-width:0;
}

/* ✅ SỬA (theo yêu cầu anh — đổi giao diện giống HH.Dịch vụ): ".cskd-setting-right" (khung
   bao) trước đây có "padding:16px" nên bảng HH phải kéo lùi sang trái bằng margin-left ÂM
   (-13px) mới còn cách mép trái ~3px ("1 li") như anh yêu cầu hồi 03/09/2026. Nay đã đổi
   padding khung xuống còn 8px (khớp ".hh-left/.hh-right" bên Danh mục HH.Dịch vụ — xem
   ".cskd-setting-left, .cskd-setting-right" phía trên) nên KHÔNG cần bù âm nữa — bỏ hẳn
   "margin-left" (nếu vẫn để -13px sẽ bị lệch, bảng lòi ra ngoài khung bên trái ~5px). */
#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;
}
/* ===========================
   CÀI ĐẶT COMBO (✅ MỚI — theo yêu cầu anh Phong, 18/08/2026)
   Layout SAO Y HỆT "CÀI ĐẶT CSKD" ở trên (trái = Danh sách Combo, phải = Sản phẩm dịch
   vụ Combo của Combo đang chọn) — chỉ khác số cột (thêm "TT" + bảng phải thêm Từ ngày/
   Đến ngày).
   =========================== */
/* ✅ MỚI (theo yêu cầu anh Phong — 18/08/2026): mở rộng khung trang này ra sát 2 lề màn
   hình (chỉ chừa 1 khoảng rất nhỏ, "cách lề 1 li") — ".content" mặc định có padding trái/
   phải 32px (dùng chung cho MỌI trang khác, không đụng vào) nên bù lại bằng margin ÂM chỉ
   riêng cho trang "Cài đặt combo", để khung card thật sự giãn ra gần hết chiều ngang màn
   hình thay vì bị bó hẹp như các trang khác. */
#page-combo-settings{
  margin-left: -26px;
  margin-right: -26px;
}
.combo-setting-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:16px;
}

/* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "giao diện Danh mục Combo giống hệt Cài đặt
   CSKD"): đổi TOÀN BỘ style bên dưới (viền/bo góc/đổ bóng/màu nền/khoảng cách) từ kiểu
   "SaaS hiện đại" cũ sang ĐÚNG kiểu phẳng, dùng chung biến màu (var(--border)/
   var(--blue-light)) như "Cài đặt CSKD" (#page-cskd-settings) — 2 khung cuộn ĐỘC LẬP nhau
   (height cố định + flex column, xem giải thích đầy đủ ở ".cskd-setting-left,
   .cskd-setting-right" trong styles.css) thay vì "min-height" giãn theo nội dung như cũ. */
.combo-setting-left,
.combo-setting-right{
  border:1px solid var(--border);
  border-radius:3px;
  padding:8px;
  background:#fff;
  height: 560px;
  display:flex;
  flex-direction:column;
  box-shadow:none;
}

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

.combo-setting-table{
  border:1px solid var(--border);
  border-radius:3px;
  overflow-x:hidden;
  overflow-y:auto;
  padding-top:0;
  flex:1;
  min-height:0;
}

.combo-setting-row{
  display:grid;
  grid-template-columns: 36px 1.1fr 1fr 1fr 1fr 68px;
  gap:3px;
  align-items:center;
  padding:4px 3px 4px 6px;
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  transition: background-color .12s;
  font-size:12px;
}
.combo-setting-data-row:hover{
  background:transparent;
}
/* Nút "Xóa" (<button>) KHÔNG tự giãn hết ô lưới theo "justify-items:stretch" mặc định như
   1 <div> thường — đẩy sang phải bằng flex, y hệt ".cskd-setting-row > div:last-child". */
.combo-setting-row > div:last-child{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.combo-setting-row.header{
  position:sticky;
  top:0;
  z-index:1;
  font-weight:bold;
  font-size:12px;
  letter-spacing:normal;
  text-transform:none;
  color:inherit;
  background:var(--blue-light);
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  padding:4px 3px 4px 6px;
  margin-bottom:0;
}

.combo-setting-row input,
.combo-setting-row textarea{
  width:100%;
  height:auto;
  padding:3px 4px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:12px;
  background:transparent;
  transition: border-color .15s;
}
.combo-setting-row input:hover,
.combo-setting-row textarea:hover{
  border-color:#d0d7de;
}
.combo-setting-row input:focus,
.combo-setting-row textarea:focus{
  outline:none;
  border-color: var(--border);
  background:#fff;
  box-shadow:none;
}
.combo-setting-row textarea{
  resize: none;
  overflow: hidden;
  min-height: 20px;
  line-height: 1.35;
  font-family: inherit;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: middle;
}

.combo-setting-data-row.selected{
  background:#fff6d8;
  box-shadow:none;
  border-radius:0;
  padding:4px 3px 4px 6px;
}

.combo-setting-tt,
.combo-product-tt{
  text-align:center;
  color:#8a97ab;
  font-size:12px;
}

/* ✅ SỬA (theo anh Phong xác nhận — 18/08/2026): "Từ ngày"/"Đến ngày" ở bảng phải KHÔNG
   phải ô chọn ngày — là 2 ô tích chọn (radio, CHỈ được chọn 1 trong 2/dòng) đánh dấu sản
   phẩm này ăn theo "Từ ngày" hay "Đến ngày" của booking lúc lập (chi tiết áp dụng vào
   Booking sẽ làm ở đợt sau, theo mô tả của anh). */
.combo-product-col-ngay{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
}
/* ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "giao diện giống hệt Cài đặt CSKD"): đổi
   kiểu tích chọn vuông mặc định của trình duyệt sang dạng TRÒN tự vẽ, cùng màu/kiểu với 4
   ô tích tròn bên bảng "HH.Dịch vụ" của Cài đặt CSKD (xem ".cskd-hh-row .cskd-hh-bysl-input"
   trong styles.css) — vẫn LÀ input[type=radio] (đọc/lưu qua ".checked" như cũ). */
.combo-product-col-ngay input[type="radio"]{
  appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  min-width:18px;
  border:2px solid #c6ccd6;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  position:relative;
  margin:0;
  padding:0;
}
.combo-product-col-ngay input[type="radio"]:checked{
  border-color: var(--blue);
  background: var(--blue);
}
.combo-product-col-ngay input[type="radio"]:checked::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  width:6px; height:6px;
  border-radius:50%;
  background:#fff;
  transform:translate(-50%, -50%);
}

.combo-product-table{
  border:1px solid var(--border);
  border-radius:3px;
  overflow-x:hidden;
  overflow-y:auto;
  padding-top:0;
  flex:1;
  min-height:0;
}

.combo-product-row{
  display:grid;
  /* ✅ SỬA (theo yêu cầu anh Phong — 18/08/2026): "Từ ngày"/"Đến ngày" giờ chỉ là 1 nút
     tích chọn (radio) mỗi ô, không cần rộng như ô nhập ngày cũ — thu hẹp lại (110px ->
     56px) và nhường phần rộng ra thêm cho 3 cột "Cơ sở kinh doanh"/"Cơ sở"/"Lịch trình"
     (vẫn đang ăn theo "fr" nên tự động giãn rộng thêm, không cần sửa gì khác). */
  grid-template-columns: 36px 1fr 1fr 1fr 56px 56px 68px;
  gap:3px;
  align-items:center;
  padding:4px 3px 4px 6px;
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  transition: background-color .12s;
  font-size:12px;
}
.combo-product-data-row:hover{
  background:transparent;
}
.combo-product-row > div:last-child{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}

.combo-product-row.header{
  position:sticky;
  top:0;
  z-index:1;
  font-weight:bold;
  font-size:12px;
  letter-spacing:normal;
  text-transform:none;
  color:inherit;
  background:var(--blue-light);
  border-bottom:1px solid #e0e8f5;
  border-radius:0;
  padding:4px 3px 4px 6px;
  margin-bottom:0;
}

.combo-product-row input:not([type="radio"]),
.combo-product-row textarea{
  width:100%;
  height:auto;
  padding:3px 4px;
  border:1px solid transparent;
  border-radius:2px;
  font-size:12px;
  background:transparent;
  transition: border-color .15s;
}
.combo-product-row input:not([type="radio"]):hover,
.combo-product-row textarea:hover{
  border-color:#d0d7de;
}
.combo-product-row input:not([type="radio"]):focus,
.combo-product-row textarea:focus{
  outline:none;
  border-color: var(--border);
  background:#fff;
  box-shadow:none;
}
.combo-product-row textarea{
  resize: none;
  overflow: hidden;
  min-height: 20px;
  line-height: 1.35;
  font-family: inherit;
  box-sizing: border-box;
  white-space: pre-wrap;
  word-break: break-word;
  vertical-align: middle;
}

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

.combo-setting-del-btn,
.combo-product-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;
}
.combo-setting-del-btn:hover,
.combo-product-del-btn:hover{
  background:#fdeceb !important;
  border-color:#e2483b !important;
}

#page-combo-settings .combo-setting-row > div,
#page-combo-settings .combo-product-row > div{
  position:relative;
}

/* ✅ MỚI (theo yêu cầu anh Phong — 18/08/2026): ô "Cơ sở kinh doanh" (DANH SÁCH COMBO) đổi
   từ input 1 dòng sang textarea chọn nhiều CSKD, mỗi CSKD 1 dòng, tự giãn cao.
   ✅ SỬA (06/09/2026, theo yêu cầu anh Phong — "giao diện giống hệt Cài đặt CSKD"): đổi
   style viền/bo góc/focus từ kiểu cũ sang kiểu phẳng, khớp các ô textarea khác trong CHÍNH
   trang này (".combo-setting-row textarea") — chỉ giữ riêng "min-height:30px" vì ô này có
   thể hiện nhiều dòng CSKD cùng lúc. */
#page-combo-settings textarea.combo-cskd-input{
  width:100%;
  min-height:30px;
  padding:3px 4px;
  border:1px solid transparent;
  border-radius:2px;
  outline:none;
  font-size:12px;
  font-family:inherit;
  background:transparent;
  line-height:1.35;
  transition: border-color .15s;
}
#page-combo-settings textarea.combo-cskd-input:hover{
  border-color:#d0d7de;
}
#page-combo-settings textarea.combo-cskd-input:focus{
  border-color: var(--border);
  background:#fff;
  box-shadow:none;
}

/* Đẩy nút LƯU xuống đáy khung phải, giống Cài đặt CSKD */
#page-combo-settings .combo-setting-right{
  display: flex;
  flex-direction: column;
  height: 560px;
  min-width:0;
}
#page-combo-settings .combo-setting-left{
  min-width:0;
}
#page-combo-settings .combo-product-table{
  flex: 1;
}
#page-combo-settings .combo-setting-footer{
  margin-top: auto;
  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;
  /* ✅ SỬA (19/08/2026, theo yêu cầu anh): nới cột "Mã" từ 100px -> 150px, đủ chỗ hiện
     rõ chữ của danh sách chọn sẵn MỚI ("ndhbk – Ngày đến hạn"/"thue – Thuế"/"phi – Phí
     phục vụ", xem <select class="ds-item-code"> — trước đây là ô chữ tự do 100px). */
  grid-template-columns: 150px 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);
}

/* ✅ MỚI (19/08/2026, theo yêu cầu anh): style cho <select class="ds-item-code"> (cột
   "Mã", vừa đổi từ ô chữ tự do sang danh sách chọn sẵn) — dùng CHUNG kiểu dáng với ô
   chữ ở trên cho đồng bộ (trước đây CSS chỉ có luật cho input[type="text"], select
   không khớp luật nào nên hiện mặc định của trình duyệt, không đồng bộ giao diện). */
#page-default-settings .default-setting-row select.ds-item-code{
  width:100%;
  height:34px;
  padding:6px 8px;
  border:1px solid #cbd5e1;
  border-radius:6px;
  outline:none;
  font-size:13px;
  background:#fff;
  cursor:pointer;
}

#page-default-settings .default-setting-row select.ds-item-code: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;
}
/* ✅ MỚI (theo yêu cầu anh — Danh mục Nhóm thêm cột "Thứ tự"): riêng #page-groups có 3
   cột (Thứ tự / Tên / nút Xóa) thay vì 2 — độ ưu tiên CSS cao hơn rule 2 cột chung ở trên
   nhờ nhiều selector hơn (không cần !important). */
#page-groups .property-row{
  grid-template-columns: 70px 1fr 90px;
}
#page-groups .group-order-input{
  text-align: center;
}

#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;
}

/* ✅ MỚI (14/09/2026, theo yêu cầu anh Phong — thêm cột "Xếp riêng" ở màn Tính chất): riêng
   #page-properties có 3 cột (Tên / Xếp riêng / nút Xóa) thay vì 2 — độ ưu tiên CSS cao hơn
   rule 2 cột chung ở trên nhờ nhiều selector hơn (không cần !important), giống cách
   #page-groups đã làm cho cột "Thứ tự" ở trên. */
#page-properties .property-row{
  grid-template-columns: 1fr 120px 90px;
}
#page-properties .property-xep-rieng-cell{
  display: flex;
  align-items: center;
  justify-content: center;
}
#page-properties .property-xep-rieng-label{
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: #444;
  white-space: nowrap;
  user-select: none;
}
/* Ghi đè rule "#page-properties .property-row input" ngay trên (width:100%/height:34px/viền
   dày dùng cho ô nhập TEXT) — nếu không, checkbox sẽ bị kéo giãn thành 1 ô vuông to xấu xí
   thay vì 1 checkbox nhỏ bình thường. Độ ưu tiên cao hơn nhờ nhiều selector hơn (class
   .property-xep-rieng-input cụ thể hơn "input" chung). */
#page-properties .property-row input.property-xep-rieng-input{
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #999;
  border-radius: 2px;
  box-sizing: border-box;
  flex: none;
}

#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;
}

/* ✅ MỚI (theo yêu cầu anh): bỏ viền khung ngoài cùng bao quanh cả khối lọc + bảng (viền
   xanh của .card dùng chung toàn app) — chỉ bỏ RIÊNG ở trang này, các trang khác vẫn giữ
   nguyên viền .card như cũ. */
#page-business .card{
  border: none;
}
#page-business{
  /* ✅ SỬA (theo yêu cầu anh — hiệu ứng đổ màu của nút LẬP BOOKING/BOOKING CHARTER phải
     khớp TUYỆT ĐỐI với màu ô đang chọn trên thanh menu): dùng chung đúng 1 biến
     --brand-accent (khai báo ở :root) thay vì 1 giá trị hex riêng — đảm bảo không bao
     giờ lệch màu dù sau này còn chỉnh lại --brand-accent ở 1 chỗ duy nhất. */
  /* ✅ SỬA (theo yêu cầu anh — dò hết các chỗ SÓT lại còn mã teal cũ (#0f766e/#0b5c56/
     #eafbf8/#a7e8de) chưa tự đổi theo #006C50: viền nút thu gọn nhóm, nền khi hover nút
     đó, viền + màu chữ ô ngày...): giờ TẤT CẢ đều suy ra từ đúng --blue-dark/--blue-light/
     --border (đã đổi theo #006C50 ở :root) — không còn hex rời rạc nữa. CHỈ RIÊNG màu nền
     của các Ô BOOKING (xanh lá nhạt/vàng nhạt báo Đã xác nhận/Giữ chỗ) là GIỮ NGUYÊN, đặt
     ở --pb-green-bg/--pb-amber-bg bên dưới, không liên quan tới màu thương hiệu này. */
  --pb-teal: var(--brand-accent);
  --pb-teal-dark: var(--blue-dark);
  --pb-teal-darker: var(--blue-dark);
  --pb-teal-light: var(--blue-light);
  --pb-teal-border: var(--border);
  --pb-green: #16a34a;
  --pb-green-bg: #eafaf0;
  --pb-amber: #d97706;
  --pb-amber-bg: #fff8e1;
  --pb-gray-border: #e2e8f0;
}
#page-business .biz-filters{
  display:grid;
  /* ✅ SỬA (theo yêu cầu anh — lần trước mở rộng 2 cột nút làm TRÀN cả hàng ra ngoài khung
     card, khiến nút BOOKING CHARTER bị hụt mất 1 phần bên phải; giờ THU HẸP bớt 2 cột
     CSKD/Lịch trình + Từ ngày/Đến ngày để nhường chỗ, thay vì cộng thêm bề rộng).
     ✅ SỬA (09/09/2026, theo báo lỗi anh Phong — nút "Chi tiết" mới thêm bị đẩy xuống dòng
     riêng): số cột ở đây PHẢI khớp ĐÚNG số ô lọc/nút thật trong ".biz-filters" — trước chỉ
     khai 7 cột cho 7 ô (tiêu đề + CSKD + Lịch trình + Từ ngày + Đến ngày + LẬP BOOKING +
     BOOKING CHARTER), thêm nút "Chi tiết" thành 8 ô mà không thêm cột thì CSS Grid tự đẩy
     ô dư ra XUỐNG DÒNG MỚI (grid tự chia hàng khi thiếu cột đã khai) — thêm hẳn cột thứ 8
     cho nút này.
     ✅ SỬA LỖI (09/09/2026, đợt 2, theo báo lỗi anh Phong — thêm cột thứ 8 xong bị TRÀN ra
     ngoài khung, nút "Chi tiết" khuất mất): thêm cột mới mà KHÔNG bớt cột nào khác thì tổng
     bề rộng chắc chắn vượt khung — đúng lỗi CŨ đã từng gặp (xem ghi chú đợt sửa đầu tiên ở
     trên). Giờ THU HẸP lại TẤT CẢ 6 cột còn lại (CSKD/Lịch trình 200->170px, Từ ngày/Đến
     ngày 150->130px, LẬP BOOKING/BOOKING CHARTER 170->155px) — tổng 6 cột đó giảm 130px,
     đủ bù cho cột "Chi tiết" (110px) + 1 khoảng "gap" mới phát sinh, tổng CẢ 8 cột giờ còn
     NHỎ HƠN tổng 6 cột cũ, chắc chắn không tràn nữa.
     ✅ SỬA (09/09/2026, đợt 3, theo báo lỗi anh Phong — "BOOKING CHARTER" (16 ký tự) bị dồn
     xuống 2 dòng vì cả 2 nút chia đều 155px, trong khi "LẬP BOOKING" (11 ký tự) còn dư
     nhiều chỗ trống): san lại KHÔNG đều 2 cột này thay vì chia đều — bớt "LẬP BOOKING"
     155->125px (chữ ngắn hơn, vẫn thừa chỗ), cộng hẳn 30px đó sang "BOOKING CHARTER"
     155->185px — TỔNG 2 cột giữ NGUYÊN 310px như cũ, không đụng gì tới các cột khác.
     ✅ SỬA (09/09/2026, đợt 4, theo yêu cầu anh Phong): bỏ hẳn cột tiêu đề "CƠ SỞ KINH
     DOANH" (auto) — nhường chỗ đó cho cột "Chọn Tháng" mới, chèn giữa Lịch trình và Từ
     ngày (150px, đủ rộng cho nhãn dài nhất "Hà Nội - Yên Đúc - Hạ Long"... không, đủ cho
     "Tháng này"/"Tháng 12"). Bỏ "auto" (~160-180px cho chữ hoa đậm 15px) và thêm cột mới
     150px — tổng bề rộng gần như không đổi so với trước, không tràn khung. */
  grid-template-columns: 170px 170px 150px 130px 130px 125px 185px 110px;
  gap:6px;
  align-items:end;
  justify-content: space-between;
  margin-top:8px;
}
/* ✅ SỬA (09/09/2026, đợt 5, theo yêu cầu anh Phong): khi đang xem bảng "Tổng hợp", ẩn 2
   nút LẬP BOOKING/BOOKING CHARTER (không dùng ở chế độ này) và dồn các ô lọc còn lại
   (CSKD/Lịch trình/Chọn Tháng/Từ ngày/Đến ngày) sang sát bên phải, liền với nút Chi tiết
   — chỉ còn 6 cột thật sự hiển thị nên khai lại grid-template-columns cho khớp, đổi
   justify-content sang flex-end để dồn hết các cột về phía phải thay vì dàn đều. */
#page-business .biz-filters.biz-filters-summary-mode{
  grid-template-columns: 170px 170px 150px 130px 130px 110px;
  justify-content: flex-end;
}
#page-business .biz-filters.biz-filters-summary-mode #biz-build-btn-col,
#page-business .biz-filters.biz-filters-summary-mode #biz-build-charter-btn-col{
  display:none;
}
#page-business .biz-filter label{
  display:block;
  margin-bottom:6px;
  font-weight:600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #55636b;
}
/* ✅ 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:34px;
  padding:4px 12px;
  border:1px solid #d5dde0;
  border-radius:8px;
  box-sizing:border-box;
  font-size:13px;
  transition: border-color .15s, box-shadow .15s;
}
#page-business .biz-filter input:focus{
  outline: none;
  border-color: var(--pb-teal);
  box-shadow: 0 0 0 3px rgba(0,108,80,.15);
}
/* ✅ SỬA (theo yêu cầu anh): cả 2 nút LẬP BOOKING / BOOKING CHARTER mặc định đều nền
   trắng rỗng, chữ ĐEN (không teal) — chỉ khi rê chuột vào mới đổ màu teal + chữ trắng. */
#page-business .biz-filter-action #biz-build-btn,
#page-business .biz-filter-action #biz-build-charter-btn{
  height:34px;
  width:100%;
  box-sizing:border-box;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  background: #fff;
  border: 1.5px solid var(--pb-teal);
  color: #000;
  transition: background-color .15s, border-color .15s, color .15s;
}
#page-business .biz-filter-action #biz-build-btn:hover,
#page-business .biz-filter-action #biz-build-charter-btn:hover{
  background: var(--pb-teal);
  border-color: var(--pb-teal);
  color: #fff;
}
/* ✅ MỚI (09/09/2026, theo yêu cầu anh Phong): nút "Chi tiết"/"Tổng hợp" — cùng khổ/bo góc
   với LẬP BOOKING/BOOKING CHARTER cho thẳng hàng, nhưng nền XANH ĐẶC (không phải viền
   rỗng) để phân biệt đây là nút CHUYỂN CHẾ ĐỘ xem, không phải hành động mở màn hình mới. */
#page-business .biz-filter-action #biz-view-toggle-btn{
  height:34px;
  width:100%;
  box-sizing:border-box;
  border-radius:8px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.2px;
  background: var(--pb-teal);
  border: 1.5px solid var(--pb-teal);
  color: #fff;
  transition: background-color .15s, border-color .15s;
}
#page-business .biz-filter-action #biz-view-toggle-btn:hover{
  background: var(--pb-teal-dark, var(--pb-teal));
  border-color: var(--pb-teal-dark, var(--pb-teal));
}

/* ===== 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 var(--pb-gray-border);
  border-radius:10px;
  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 */
  /* ✅ SỬA LỖI (01/09/2026, theo báo lỗi anh Phong — "cột Tên cơ sở bị khuất đi khi chọn
     dài ngày"): TRƯỚC ĐÂY không khai "width" — mỗi ".biz-row" (khối flex chứa cột dính
     trái + các ô ngày) mặc định chỉ rộng bằng ĐÚNG phần khung nhìn thấy được của
     ".biz-table-wrap" (VD ~900px), KHÔNG rộng theo đúng tổng bề ngang thật của nội dung
     (240px cột dính + N ô ngày x 184px, có thể lên tới vài nghìn px khi chọn nhiều ngày) —
     dù các ô ngày vẫn TRÀN ra ngoài hộp đó bình thường (nhờ "min-width" cố định từng ô,
     không co lại), khiến ".biz-table-wrap" vẫn cuộn ngang được đúng hết chiều dài thật.
     NHƯNG "position:sticky" của cột dính trái CHỈ được phép "dính" trong phạm vi hộp CHỨA
     nó (chính ".biz-row" này) — hộp đó chỉ rộng ~900px, nằm cố định từ đầu dòng (x=0) tới
     hết khung nhìn ban đầu. Cuộn ngang QUÁ chiều rộng đó (chỉ xảy ra khi chọn dài ngày, đủ
     nhiều cột ngày để vượt quá ~900px) thì chính hộp chứa ấy đã trôi ra khỏi màn hình từ
     lâu — cột dính trái mất luôn "chỗ dựa" để dính vào, biến mất theo. Giờ thêm
     "width:max-content" — ép ".biz-row" tự giãn đúng bằng tổng bề rộng THẬT của nội dung
     bên trong (khớp đúng bề ngang thật mà ".biz-table-wrap" đang cho cuộn), để cột dính
     trái luôn có đủ "chỗ dựa" dính lại được xuyên suốt, dù cuộn xa cỡ nào. */
  width:max-content;
  min-width:100%;
}

/* 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 var(--pb-teal-border);
  border-radius:8px;
  padding:6px 8px;
  font-size:13px;
  font-weight:700;
  background:var(--pb-teal-light);
  color: var(--pb-teal-darker);
  text-align:center;
  width:180px;
  min-width:180px;
  box-sizing:border-box;
}

/* Thanh tiêu đề từng nhóm CSKD — nền trắng/nhạt, chỉ phân tách bằng viền dưới thay vì
   dải màu đậm như trước, gọn và trung tính hơn */
#page-business .biz-row-group .biz-row-sticky,
#page-business .biz-row-group .biz-row-cells{
  background:#fafcfc;
  border-bottom:1px solid var(--pb-gray-border);
}
#page-business .biz-row-group .biz-row-sticky{
  font-weight:700;
  color:#1e2a2e;
  border-right:none;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
#page-business .biz-group-icon{
  display:inline-flex;
  color: var(--pb-teal);
  flex:0 0 auto;
}
#page-business .biz-group-name{
  text-transform:uppercase;
  letter-spacing:.2px;
  font-size:13px;
}
/* ✅ SỬA (23/08/2026, theo yêu cầu anh — bỏ nút mũi tên riêng, bấm THẲNG vào dòng CSKD
   để thu gọn/mở rộng): thay ".biz-group-toggle" (nút tròn ▲/▼ cũ, đã bỏ) bằng con trỏ
   "pointer" + nền hover nhạt trên CẢ dòng tiêu đề CSKD, báo hiệu cả dòng bấm được. */
#page-business .biz-row-group{
  cursor:pointer;
}
#page-business .biz-row-group:hover .biz-row-sticky,
#page-business .biz-row-group:hover .biz-row-cells{
  background: var(--pb-teal-light);
}
#page-business .biz-row-group .biz-row-cells{
  padding:8px 10px;
}

/* Ô tổng hợp Đã xác nhận/Giữ chỗ/Trống theo từng ngày, hiển thị dạng chip có chấm màu
   (giữ nguyên Ý NGHĨA số liệu như cũ — chỉ đổi HÌNH THỨC hiển thị) */
/* ✅ SỬA (23/08/2026, theo yêu cầu anh — tối ưu Lưới chiếm dụng, gộp "XN"/"Giữ"/"Trống"
   xuống CHUNG 1 dòng thay vì 3 dòng xếp chồng như trước, đỡ chiếm chiều cao mỗi ô ngày):
   flex-direction đổi column -> row, thêm flex-wrap phòng khi màn hẹp/số liệu dài không
   đủ chỗ vừa 1 dòng thì tự xuống dòng tiếp, KHÔNG bị cắt/tràn ra ngoài. */
#page-business .biz-group-summary{
  width:180px;
  min-width:180px;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 8px;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
#page-business .biz-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#3f4a4d;
}
/* ⚠️ SỬA (23/08/2026, theo yêu cầu anh): bỏ hẳn chấm tròn màu (từng ở đây:
   ".biz-chip-dot"/".biz-chip-dot-outline") đứng trước mỗi nhãn "XN"/"Giữ"/"Trống" — đã
   THỪA vì chữ tự nó đã tô màu riêng theo đúng ý nghĩa rồi (3 dòng màu ngay dưới đây),
   không cần thêm chấm tròn cùng màu nữa (xem HTML mẫu ở bizPopulateCells()). */
#page-business .biz-chip-confirmed{ color: var(--pb-green); }
#page-business .biz-chip-hold{ color: var(--pb-amber); }
#page-business .biz-chip-empty{ color:#64748b; }

/* ============================================================================
   ✅ MỚI (09/09/2026, theo yêu cầu anh Phong): BẢNG "TỔNG HỢP" (nút "Chi tiết"/"Tổng hợp"
   phía trên lưới) — CSS riêng, KHÔNG đụng gì tới các lớp ".biz-row-group"/".biz-cell"...
   của bảng "Chi tiết" (renderGrid()/bizPopulateCells() ở app-luoi-chiemdung.js), tránh làm
   lệch bảng đang chạy tốt. Xem bizPopulateSummaryTable()/bizOpenSummaryPickModal().
   ============================================================================ */
/* Dòng CHA (1 CSKD) — mượn lại ĐÚNG kiểu nền/chữ đậm của ".biz-row-group" bên bảng Chi
   tiết cho đồng bộ giao diện, chỉ đặt tên lớp riêng để không dùng chung "collapsedGroups". */
#page-business .biz-sum-row-group .biz-row-sticky,
#page-business .biz-sum-row-group .biz-row-cells{
  background:#fafcfc;
  border-bottom:1px solid var(--pb-gray-border);
}
#page-business .biz-sum-row-group .biz-row-sticky{
  font-weight:700;
  color:#1e2a2e;
  border-right:none;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
}
#page-business .biz-sum-row-group{
  cursor:pointer;
}
#page-business .biz-sum-row-group:hover .biz-row-sticky,
#page-business .biz-sum-row-group:hover .biz-row-cells{
  background: var(--pb-teal-light);
}
#page-business .biz-sum-row-group .biz-row-cells{
  padding:8px 10px;
}
/* Dòng CON (1 Tính chất gốc) — thụt lề giống dòng Cơ sở của bảng Chi tiết.
   ⚠️ SỬA LỖI (09/09/2026, theo báo lỗi anh Phong — "chữ Tính chất bị canh GIỮA, không phải
   canh TRÁI + cách lề 1.5cm như đã khai padding-left"): ".biz-row-sticky" (lớp gốc) là
   "flex-direction:column" — với hướng column, "align-items" điều khiển trục NGANG (không
   phải "justify-content" như hay nhầm) — "align-items:center" ở đây vô tình CĂN GIỮA
   NGANG toàn bộ nội dung, làm "padding-left:calc(8px + 1.5cm)" gần như mất tác dụng (chữ
   tự co lại rồi trôi ra giữa khoảng trống còn lại, không dính sát theo đúng lề trái +
   1.5cm nữa). Đổi "center" -> "flex-start" để chữ THẬT SỰ canh trái, cách lề đúng 1.5cm
   như "padding-left" đã khai — vẫn giữ canh GIỮA THEO CHIỀU DỌC như cũ (do
   "justify-content:center" của ".biz-row-sticky" gốc lo, không đụng tới ở đây). */
#page-business .biz-sum-row-property .biz-row-sticky{
  padding-left:calc(8px + 1.5cm);
  align-items:flex-start;
}
/* Ô ngày — dùng chung cho cả dòng cha (Mã lịch trình | Số trống) lẫn dòng con
   (Trống(Xác nhận-Chờ)). ✅ SỬA (09/09/2026, theo yêu cầu anh Phong — "thu cột sát lại
   tối đa"): 180px (bằng ô ngày bảng Chi tiết) -> 100px, đủ chỗ cho nội dung ngắn của bảng
   này ("1 Đêm  6" / "2 (1-1)"), không cần rộng như bảng Chi tiết (có Tên khách/Lịch
   trình dài hơn nhiều). Phải đổi ĐÚNG BẰNG NHAU với ".biz-view-summary .biz-day-chip"
   ngay dưới đây — 2 chỗ cùng 1 con số — nếu không dòng tiêu đề ngày sẽ LỆCH cột so với
   các dòng dữ liệu bên dưới (2 dòng đang là 2 ".biz-row" tách rời, chỉ thẳng cột nhau nhờ
   độ rộng ô bằng nhau, không phải nhờ 1 bảng <table> thật).
   ✅ SỬA (09/09/2026, đợt 2, theo báo lỗi anh Phong — "cột ngày đè chữ Thứ xuống dòng 2"):
   100px không đủ chỗ cho "09/09/2026 (T4)" trên 1 dòng — nới lên 140px (đổi ĐỀU với
   ".biz-view-summary .biz-day-chip" ngay dưới, lý do giữ bằng nhau y hệt trên).
   ✅ SỬA (09/09/2026, đợt 3, theo báo lỗi anh Phong — "( 1 )" bị dư dấu cách quanh số,
   đúng ra phải là "(1)"): nguyên nhân là "gap" của flex box này — khi 1 ô có CẢ số ngoài
   ngoặc lẫn cụm " (n-n)" (chữ "(" "-" ")" là TEXT THƯỜNG, không bọc <span>, nhưng flexbox
   vẫn tự coi mỗi đoạn text liền nhau là 1 "flex item ẩn danh" riêng — xem đặc tả CSS
   Flexbox), "gap" áp dụng LUÔN giữa các đoạn text ẩn danh đó với các <span> số màu xen kẽ,
   đẩy dư khoảng trắng quanh "(" ")" "-" dù chuỗi JS (bizPopulateSummaryTable(),
   app-luoi-chiemdung.js) vốn đã ghép ĐÚNG khoảng cách cần thiết rồi. Bỏ hẳn "gap" ở đây —
   không cần vì nội dung tự căn giữa nhờ "justify-content:center" là đủ. */
#page-business .biz-sum-cell{
  width:140px;
  min-width:140px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}
/* Cột ngày ở dòng tiêu đề (".biz-day-chip") CHỈ thu hẹp khi #biz-table-wrap đang mang lớp
   "biz-view-summary" (bảng Tổng hợp tự gắn/gỡ lớp này — xem bizPopulateSummaryTable()/
   renderGrid()) — bảng Chi tiết KHÔNG bị ảnh hưởng, vẫn giữ nguyên 180px như cũ.
   ✅ SỬA (09/09/2026, theo báo lỗi anh Phong — chữ "(T4)" bị đè xuống dòng 2): 100px ->
   140px, đổi ĐỀU với ".biz-sum-cell" ở trên (xem giải thích đầy đủ ở đó). */
#page-business .biz-table-wrap.biz-view-summary .biz-day-chip{
  width:140px;
  min-width:140px;
  box-sizing:border-box;
  padding:6px 4px;
  white-space:nowrap;
}
/* ✅ MỚI (09/09/2026, theo yêu cầu anh Phong — "giao diện có dòng kẻ ngang dọc giống
   excel, kẻ mờ đi 1 độ"): bảng Tổng hợp mặc định KHÔNG có dòng kẻ dọc giữa các cột ngày
   (chỉ cách nhau bằng "gap"), và dòng CON (Tính chất) cũng chưa có kẻ ngang riêng (chỉ
   dòng CHA/CSKD mới có, xem ".biz-sum-row-group .biz-row-sticky,.biz-row-cells" ở trên) —
   giờ thêm ĐỦ cả kẻ ngang (dưới MỌI dòng, kể cả dòng Tính chất) lẫn kẻ dọc (giữa MỌI cột
   ngày, kể cả dòng tiêu đề) bằng viền MỜ (xám nhạt, không phải viền đậm mặc định của
   trình duyệt) — bỏ hẳn "gap" giữa các ô ngày (".biz-row-cells") để 2 viền dọc của 2 ô
   cạnh nhau NHÍCH SÁT vào nhau, nhìn liền 1 đường thẳng đúng kiểu Excel thay vì đứt đoạn
   theo từng cụm 4px như "gap" cũ. CHỈ áp dụng cho bảng Tổng hợp (".biz-view-summary") —
   không đụng gì tới bảng Chi tiết. */
#page-business .biz-table-wrap.biz-view-summary .biz-row-cells{
  gap:0;
}
#page-business .biz-table-wrap.biz-view-summary .biz-row{
  border-bottom:1px solid #e7ebf0;
}
#page-business .biz-table-wrap.biz-view-summary .biz-sum-cell{
  border-right:1px solid #e7ebf0;
}
#page-business .biz-table-wrap.biz-view-summary .biz-row-header .biz-day-chip{
  border-right:1px solid #e7ebf0;
}
/* ✅ SỬA (09/09/2026, đợt 5, theo yêu cầu anh Phong): trước đây bỏ hẳn "gap" của
   .biz-sum-cell để sửa lỗi cách khoảng thừa ở "( 1 )" của dòng Tính chất (con), nhưng vô
   tình làm dòng CSKD (cha) mất luôn khoảng cách giữa mã lịch trình và số phòng trống, 2 chữ
   dính sát vào nhau. Ở ĐÂY thêm lại khoảng cách riêng cho 2 span này bằng padding + 1 vạch
   kẻ đứng ở giữa (border-right mờ), KHÔNG đụng tới gap chung của .biz-sum-cell nên không
   ảnh hưởng dòng Tính chất. */
#page-business .biz-sum-schedule-code{
  opacity:.75;
  padding-right:8px;
  border-right:1px solid #c9d2d8;
}
/* ✅ SỬA (09/09/2026, đợt 6, theo báo lỗi anh Phong — "số lượng phòng trống bị đè ở
   dưới"): thủ phạm là "text-decoration: underline dotted" — gạch chấm nằm sát ngay dưới
   chữ số đậm (font-weight:700), nhìn qua tưởng như có 1 số khác bị che dưới số thật. Bỏ hẳn
   gạch chân, chỉ giữ màu + con trỏ tay + đổi màu khi hover để vẫn báo hiệu bấm được. */
#page-business .biz-sum-remaining-total.biz-sum-pick-btn{
  font-weight:700;
  color: var(--pb-teal-darker);
  cursor:pointer;
  padding-left:8px;
}
#page-business .biz-sum-remaining-total.biz-sum-pick-btn:hover{
  color: var(--pb-teal);
  text-decoration: underline;
}
#page-business .biz-sum-confirmed{ color: var(--pb-green); font-weight:700; }
#page-business .biz-sum-pending{ color: var(--pb-amber); font-weight:700; }
/* ✅ MỚI (09/09/2026, theo yêu cầu anh Phong): số trong ngoặc ở dòng Tính chất (con) bấm
   được để mở "Danh sách booking" — dùng ĐÚNG kiểu báo hiệu bấm-được đã có sẵn ở bảng Chi
   tiết (con trỏ tay + gạch chân khi hover, xem ".biz-schedule-clickable"), không đổi màu
   chữ (giữ nguyên xanh/vàng của biz-sum-confirmed/biz-sum-pending bên trong). */
#page-business .biz-sum-booked-btn{
  cursor:pointer;
}
#page-business .biz-sum-booked-btn:hover{
  text-decoration: underline;
}
/* ⚠️ SỬA LỖI (09/09/2026, theo báo lỗi anh Phong — "3(2-1)" dính sát số Trống): lấy khoảng
   cách với phần tử đứng trước bằng margin (không phụ thuộc dấu cách trần — dễ bị flex layout
   co mất, xem giải thích ở app-luoi-chiemdung.js chỗ build "bookedStr"). */
#page-business .biz-sum-booked-wrap{
  margin-left:4px;
}

/* ✅ SỬA (09/09/2026, đợt 5, theo yêu cầu anh Phong): trước đè cứng rộng 900px nên khi nội
   dung ít bị dư khoảng trống 2 bên trông mất cân đối — đổi sang width tự co theo nội dung
   (fit-content), chỉ giữ min/max để không quá hẹp hoặc quá tràn màn hình nhỏ. */
#biz-sum-pick-modal .modal-dialog{
  width:fit-content !important;
  min-width:420px;
  max-width:96vw !important;
}
/* nút "Đóng" mới: dời lên góc phải phía trên modal, khung viền + chữ màu đỏ (theo đúng
   pattern nút xóa màu đỏ đã dùng ở nơi khác trong app, VD .cskd-setting-del-btn), thay cho
   nút "Đóng" cũ ở hàng dưới cùng đã bỏ. */
#biz-sum-pick-modal .biz-sum-pick-close-x{
  position:absolute;
  top:12px;
  right:12px;
  background:#fff;
  color:#e2483b;
  border:1px solid #f3c6c1;
  border-radius:8px;
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition: background .15s, border-color .15s;
}
#biz-sum-pick-modal .biz-sum-pick-close-x:hover{
  background:#fdeceb;
  border-color:#e2483b;
}
#biz-sum-pick-modal .biz-sum-pick-cols{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  max-height:60vh;
  overflow:auto;
}
#biz-sum-pick-modal .biz-sum-pick-col{
  min-width:140px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
#biz-sum-pick-modal .biz-sum-pick-col-head{
  font-weight:700;
  text-align:center;
  padding-bottom:4px;
  border-bottom:1px solid var(--pb-gray-border);
}
/* ⚠️ SỬA (09/09/2026, theo báo lỗi anh Phong — "click vào rồi mà không hiện khung hình
   kèm theo"): bản trước dùng "outline" (không đẩy layout, nhưng ở modal này lại KHÔNG
   hiện ra được — nghi do "outline" bị chính khung modal/scroll nuốt mất trên máy anh).
   Đổi hẳn sang "border" dày 2px LUÔN CÓ SẴN (mặc định màu xám nhạt, box-sizing:border-box
   để đổi màu KHÔNG làm phồng/lệch kích thước ô) — ĐÚNG kiểu khung hình anh gửi làm mẫu
   (khung viền đậm quanh ô "4.000"), chắc chắn hiện được vì không phụ thuộc "outline". */
#biz-sum-pick-modal .biz-sum-pick-item{
  box-sizing:border-box;
  border:2px solid var(--pb-gray-border);
  border-radius:6px;
  padding:6px 10px;
  text-align:center;
  cursor:pointer;
  font-size:13px;
  background:#fff;
}
/* Viền xanh "đi theo con trỏ" khi rê chuột qua (lớp "biz-sum-pick-hover", JS thêm ở
   mouseenter/mouseleave, xem bizOpenSummaryPickModal()) — để biết ngay đang rê tới ô nào,
   TRƯỚC KHI bấm chọn. */
#biz-sum-pick-modal .biz-sum-pick-item.biz-sum-pick-hover{
  border-color: var(--pb-teal);
}
#biz-sum-pick-modal .biz-sum-pick-item.biz-sum-pick-confirmed{
  background:#EAF7F1;
  border-color:#16A34A;
  color:#16A34A;
}
#biz-sum-pick-modal .biz-sum-pick-item.biz-sum-pick-held{
  background:#FFFDE5;
  border-color:#F4E410;
  color:#946200;
}
/* Ô ĐANG ĐƯỢC CHỌN trong modal — viền đậm + tô nền teal nhạt + chữ đậm, hiện RÕ RÀNG dù
   ô đó đang có màu nền Xác nhận/Chờ hay không (đặt SAU 2 luật màu ở trên nên luôn thắng
   khi 1 ô VỪA có màu trạng thái VỪA đang được chọn). */
#biz-sum-pick-modal .biz-sum-pick-item.biz-sum-pick-selected{
  border-color: var(--pb-teal-dark);
  background: var(--pb-teal-light);
  color: var(--pb-teal-darker);
  font-weight:700;
}

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

/* ✅ MỚI (01/09/2026, theo yêu cầu anh Phong): thụt lề dòng Tên cơ sở vào 1,5cm so với
   dòng tiêu đề CSKD (VD "DRAGON LEGEND 01") phía trên, để phân biệt rõ 2 cấp — CSKD (cha)
   và Cơ sở (con) — trong cột "CƠ SỞ" dính trái. */
#page-business .biz-row-facility .biz-row-sticky{
  padding-left:calc(8px + 1.5cm);
}
#page-business .biz-facility-name{
  font-weight:600;
  font-size:13px;
}
#page-business .biz-facility-sub{
  font-size:13px;
  color:#64748b;
  font-weight:400;
}

#page-business .biz-cell{
  width:180px;
  min-width:180px;
  /* ⚠️ SỬA LỖI (19/08/2026, đợt 35 — theo báo lỗi anh Phong, tìm ra sau khi tra tận gốc
     bằng dữ liệu thật + đo trực tiếp toạ độ DOM bằng Playwright): TRƯỚC ĐÂY "height:54px"
     CỐ ĐỊNH (không phải "min-height") — đủ chỗ cho tối đa ĐÚNG 2 dòng Lịch trình khác nhau
     cùng chiếm 1 ô (trường hợp phổ biến nhất từ trước tới giờ). Khi 1 ô có tới 3 booking
     khác Lịch trình cùng chiếm (VD 3 booking CSKD "Xe ghép" cùng Cơ sở "Limousine" cùng
     ngày — đúng ca anh báo, booking "180826-29" Hà Nội - Yên Đúc), dòng thứ 3 vẫn được vẽ
     ĐÚNG vào DOM (đã kiểm chứng: dữ liệu backend + code render đều đúng, KHÔNG hề bị bỏ
     sót) nhưng bị "overflow:hidden" bên dưới CẮT MẤT vì tràn quá 54px — biến mất hoàn toàn
     khỏi màn hình dù dữ liệu vẫn còn nguyên, KHÔNG có cách nào nhìn thấy được (kể cả cuộn),
     giống hệt như "chưa bao giờ tồn tại". Đổi "height" cố định thành "min-height" — ô vẫn
     cao 54px như cũ khi có tối đa 2 dòng (hành vi cũ giữ nguyên), nhưng tự CAO THÊM khi cần
     (nhờ "align-items:stretch" sẵn có ở ".biz-row-cells", các ô CÙNG dòng Cơ sở tự giãn
     theo ô cao nhất, không bị lệch hàng) khi có từ 3 booking khác Lịch trình trở lên. */
  /* ✅ SỬA (24/08/2026, theo yêu cầu anh — "chỉnh chiều cao của các ô lưới chiếm dụng thu
     phía dưới lại 2 li"): 54px -> 48px. Từ khi đồng bộ cỡ chữ khu vực này về 13px (đợt
     23/08/2026), nội dung 2 dòng (Tên khách + Lịch trình) đã THẤP hơn trước nhưng
     "min-height" vẫn giữ nguyên 54px như cũ -> dư ra khoảng trắng khá rõ phía DƯỚI ô (nội
     dung luôn neo ở TRÊN nhờ "justify-content:flex-start" sẵn có bên dưới). Giảm thẳng
     "min-height" (không đụng padding) là đúng ý "thu phía dưới lại" — ô tự thấp bớt đúng
     phần dư ở đáy, KHÔNG ảnh hưởng tới nội dung phía trên; ô vẫn dùng "min-height" (không
     phải "height" cố định) nên trường hợp có từ 3 dòng Lịch trình trở lên (đợt 35) vẫn tự
     cao thêm bình thường, không bị cắt mất như mô tả ở đoạn giải thích trên. */
  min-height:48px;
  border:1px solid var(--pb-gray-border);
  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;
  /* ✅ SỬA (23/08/2026, theo yêu cầu anh — "giãn khoảng cách dòng lịch trình và tên
     khách xuống cách thêm 1 li"): 2px -> 5px, giãn thêm 1 chút khoảng cách dọc giữa hàng
     Tên khách (.biz-cell-top) và hàng Lịch trình (.biz-schedule-info-row) ngay dưới, đỡ
     bị dính sát nhau. */
  gap: 5px;
  box-sizing:border-box;
  position: relative; /* để ghim mặt cười vào đúng bên trong ô */
  overflow: hidden; /* ✅ MỚI (23/07/2026): 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 — vẫn GIỮ LẠI (an toàn, chặn tràn ngang), giờ
    chỉ còn tác dụng khi nội dung tràn NGANG (chữ dài — đã có text-overflow:ellipsis riêng
    ở từng dòng) vì chiều CAO đã tự giãn đủ theo "min-height" ở trên, không còn co cứng
    54px để tràn dọc nữa. */
}
/* ✅ SỬA (theo yêu cầu anh — đúng mẫu hình gửi): ô có booking Xác nhận -> nền xanh nhạt +
   viền trái xanh đậm + TOÀN BỘ chữ trong ô (tên khách/Lịch trình/nhãn XN) đổi sang màu
   xanh đậm đồng bộ (không còn nền trắng + chữ đen như bản trước). */
#page-business .biz-cell.biz-cell-confirmed{
  background: #EAF7F1;
  border-left: 2px solid #16A34A;
}
/* ✅ SỬA (theo yêu cầu anh — đổi dần từng bước): chữ trong ô đổi thành màu ĐEN, chỉ còn
   nền + viền trái giữ nguyên màu theo trạng thái. */
#page-business .biz-cell.biz-cell-confirmed .biz-price,
#page-business .biz-cell.biz-cell-confirmed .biz-schedule-icon{
  color: #000;
}
/* ⚠️ SỬA (23/08/2026, theo yêu cầu anh — thay hàng "XN/Giữ/Chờ" đã bỏ bằng màu chữ Lịch
   trình): trước đây ở đây ép luôn ".biz-schedule-info" về màu đen theo NỀN Ô + 2 dòng ép
   màu đen cho nhãn "Giữ"/"Chờ" (target ".biz-cell-status .biz-status-giu/-cho", khối
   "XN/Giữ/Chờ" đã bỏ hẳn khỏi HTML) — GIỜ chữ Lịch trình PHẢI giữ ĐÚNG màu theo trạng
   thái riêng của chính nó (Xanh=Xác nhận/Vàng=Giữ/Đỏ=Chờ, xem .biz-schedule-line-
   confirmed/-held/-cho bên dưới), không ép đen theo màu NỀN Ô nữa — màu nền ô và màu chữ
   Lịch trình là 2 khái niệm khác nhau (1 ô đang tô nền Xác nhận vẫn có thể đang hiện đại
   diện 1 Lịch trình của booking Giữ/Chờ khác cùng chiếm ô, xem addToLine() trong
   bizPopulateCells()). */
/* Ô có booking Giữ HOẶC Chờ (không có Xác nhận) -> nền vàng nhạt + viền trái vàng cam đậm
   + chữ nâu vàng đồng bộ. */
#page-business .biz-cell.biz-cell-held{
  background: #FFFDE5;
  border-left: 2px solid #F4E410;
}
#page-business .biz-cell.biz-cell-held .biz-price,
#page-business .biz-cell.biz-cell-held .biz-schedule-icon{
  color: #000;
}
/* Đê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{
  visibility: hidden;
}
/* ✅ MỚI (09/08/2026, theo yêu cầu anh — nút "M" từ ngày thứ 2 trở đi): RIÊNG nút "M"
   (và nút "x" hủy chuyển đi kèm) vẫn phải hiện + bấm được ở các ô "đêm ở-giữa"
   (biz-cell-minimal) — ghi đè lại visibility:visible CHỈ cho 2 nút này (các phần tử khác
   trong .biz-cell-top như Giá/mặt cười vẫn ẩn nguyên như cũ). Nhờ vậy anh chuyển được Cơ
   sở bắt đầu từ BẤT KỲ đêm nào trong kỳ lưu trú, không chỉ riêng đêm Nhận đầu tiên. */
#page-business .biz-cell.biz-cell-minimal .biz-danhsach-btn,
#page-business .biz-cell.biz-cell-minimal .biz-move-cancel-btn{
  visibility: visible;
  pointer-events: auto;
}
/* ✅ 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: 2px;
  right: 2px;
  bottom: 4px;
  text-align: center;
  font-size: 13px;
  color: #7a6a2a;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 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-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-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-schedule-info-row{
  opacity: 0.35;
}
#page-business .biz-cell-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
/* ✅ MỚI (theo yêu cầu anh): icon người (mặt cười check-in cũ, đổi hình) nằm ĐẦU DÒNG,
   ngay trước tên khách — gộp chung 1 hàng ngang với ".biz-price". */
#page-business .biz-price-row{
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}
#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. */
/* ✅ SỬA (theo yêu cầu anh): bỏ icon người trang trí trước tên khách — trùng ý nghĩa với
   mặt cười check-in đã có sẵn trong ô (dễ gây nhầm lẫn có 2 icon hình người cùng lú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 TEAL để 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: var(--pb-teal);
}
/* ✅ SỬA (09/08/2026, theo yêu cầu anh — bước 1/2): tên khách tô ĐỎ ở MỌI ngày KHÔNG PHẢI
   ngày Nhận (không riêng gì đoạn đã Chuyển nữa) — để phân biệt "khách mới nhận hôm nay"
   (chữ thường) với "phòng đang lưu khách từ hôm trước" (chữ đỏ).
   ⚠️ SỬA LỖI (theo báo lỗi anh — chữ không đỏ dù đã đúng logic JS): 2 luật phía trên
   (".biz-cell-confirmed .biz-price" và ".biz-cell-held .biz-price") ép màu đen theo NỀN Ô,
   có ĐỘ ƯU TIÊN CAO HƠN luật đỏ này (nhiều class ancestor hơn) nên luôn thắng, đè mất màu
   đỏ dù JS đã gắn đúng class "biz-price-transferred". Giờ viết lại luật đỏ với ĐẦY ĐỦ
   NGỮ CẢNH ô (.biz-cell-confirmed / .biz-cell-held) để độ ưu tiên CAO HƠN 2 luật kia,
   thắng chắc chắn bất kể ô đang Xác nhận hay Giữ. */
#page-business .biz-cell.biz-cell-confirmed .biz-price.biz-price-transferred,
#page-business .biz-cell.biz-cell-held .biz-price.biz-price-transferred{
  color: #dc2626;
}
/* Viền "đi theo con trỏ" — chỉ hiện ở ô CÓ THỂ chọn được ngay lúc này (xem JS) — ✅ SỬA
   (theo yêu cầu anh): đổi sang màu teal đặc trưng của trang này thay vì xanh dương cũ. */
#page-business .biz-cell.biz-select-hover{
  outline: 2px solid var(--pb-teal);
  outline-offset: -2px;
  cursor: pointer;
}
/* Ô ĐÃ ĐƯỢC CHỌN — CHỈ viền teal đánh dấu, không đổi màu nền của ô */
#page-business .biz-cell.biz-cell-selected{
  outline: 3px solid var(--pb-teal);
  outline-offset: -3px;
  cursor: pointer;
}
/* ⚠️ SỬA (23/08/2026, theo yêu cầu anh): bỏ hẳn hàng "XN/Giữ/Chờ" riêng phía dưới ô
   (từng ở đây: .biz-cell-status, .biz-cell-status-left, .biz-status-xn/-giu/-cho...) —
   trạng thái giờ tô THẲNG lên màu chữ Lịch trình (xem .biz-schedule-line-confirmed/
   -held/-cho bên dưới), Số booking dời lên chung 1 hàng với Lịch trình (xem
   .biz-schedule-info-row/.biz-cell-bookingno ngay dưới đây). */
/* Số booking — chữ nhỏ, màu nhạt hơn chữ Lịch trình để không giành sự chú ý, luôn nằm
   sát mép phải ô cùng hàng với Lịch trình (không co giãn/không wrap, ô hẹp quá thì tự
   ẩn bớt chữ Lịch trình trước, nhường chỗ). */
#page-business .biz-cell-bookingno{
  flex: 0 0 auto;
  font-size: 13px;
  color: #94a3b8;
  white-space: nowrap;
}
/* Hàng thông tin Lịch trình — ✅ SỬA (theo yêu cầu anh — giống mẫu hình 2): đổi lại CĂN
   TRÁI (thẳng lề với tên khách), thêm icon giường nhỏ đứng trước Mã lịch trình.
   ✅ SỬA (23/08/2026, theo yêu cầu anh): thêm Số booking (.biz-cell-bookingno) làm phần
   tử thứ 3 trong CÙNG hàng này (trước đây nằm riêng ở hàng XN/Giữ/Chờ đã bỏ). */
#page-business .biz-schedule-info-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}
#page-business .biz-schedule-icon{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: #334155;
}
#page-business .biz-schedule-icon.biz-hidden{ display: none; }
/* 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: 13px;
  color: #334155;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  /* ✅ MỚI (23/08/2026, theo yêu cầu anh): flex:1 để tự chiếm hết khoảng trống còn lại
     trong ".biz-schedule-info-row" (đẩy Số booking mới thêm sát mép phải ô), min-width:0
     để "overflow:hidden + text-overflow:ellipsis" phía trên thật sự cắt được chữ khi
     chật chỗ thay vì bị đẩy tràn ra ngoài ô. */
  flex: 1 1 auto;
  min-width: 0;
  /* ⚠️ SỬA LỖI (23/08/2026, theo báo lỗi anh — "Lịch trình căn sát lề bên trái giúp
     anh"): ".biz-cell" (cha xa) đặt "text-align:center" chung cho cả ô — TRƯỚC ĐÂY không
     sao vì ".biz-schedule-info" chưa có "flex:1 1 auto" ở trên, bề rộng hộp ăn khít luôn
     theo đúng độ dài chữ nên tâm hộp ~ trùng luôn với mép trái, không thấy lệch. Từ khi
     thêm "flex:1 1 auto" (để đẩy Số booking sát mép phải, xem comment ngay trên) — hộp
     GIỜ giãn ra chiếm hết khoảng trống còn lại trong hàng, "text-align:center" kế thừa
     từ ".biz-cell" khiến chữ Lịch trình trôi ra GIỮA hộp (lệch phải so với icon giường),
     không còn sát lề trái nữa. Ép riêng "text-align:left" ở đây (giống hệt ".biz-price"
     đã làm) để chữ luôn dính sát icon/mép trái bất kể hộp rộng bao nhiêu. */
  text-align: left;
}
#page-business .biz-schedule-info.biz-schedule-info-multi{
  color: var(--pb-teal);
  font-weight: 700;
}
/* ✅ MỚI (23/08/2026, theo yêu cầu anh — thay cho hàng "XN/Giữ/Chờ" đã bỏ): ô CHỈ có
   ĐÚNG 1 Lịch trình -> chữ Lịch trình tô màu theo trạng thái (dùng chung 3 class màu
   .biz-schedule-line-confirmed/-held/-cho bên dưới) + bấm được để mở "Danh sách booking",
   con trỏ tay + gạch chân khi rê chuột báo hiệu bấm được — giống hệt hành vi mỗi dòng
   trong trường hợp NHIỀU Lịch trình (.biz-schedule-line) bên dưới. */
#page-business .biz-schedule-info.biz-schedule-clickable{
  cursor: pointer;
}
#page-business .biz-schedule-info.biz-schedule-clickable:hover{
  text-decoration: underline;
}
/* ✅ MỚI (18/08/2026, theo yêu cầu anh): cùng 1 ngày, 1 Cơ sở có HƠN 1 Lịch trình khác
   nhau đang chiếm -> mỗi Lịch trình xuống 1 DÒNG riêng (không còn nối "; " trên 1 dòng
   nữa), kèm SL khách canh phải, tô màu theo đúng trạng thái (Xanh = Xác nhận, Vàng = Giữ,
   Đỏ = Chờ) — bấm vào 1 dòng để mở "Danh sách booking" của đúng lịch trình đó. */
#page-business .biz-schedule-info.biz-schedule-info-multi{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  max-width: 100%;
}
#page-business .biz-schedule-line{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
}
#page-business .biz-schedule-line:hover .biz-schedule-line-name{
  text-decoration: underline;
}
#page-business .biz-schedule-line-name{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
  text-align: left;
}
#page-business .biz-schedule-line-sl{
  flex: 0 0 auto;
  font-weight: 700;
}
#page-business .biz-schedule-line-confirmed{ color: var(--pb-green); }
#page-business .biz-schedule-line-held{ color: var(--pb-amber); }
#page-business .biz-schedule-line-cho{ color: #dc2626; }
/* ✅ MỚI (18/08/2026, theo yêu cầu anh): ô đang hiện NHIỀU dòng Lịch trình (>1) -> ẩn hẳn
   dòng Tên khách + icon Check in/out ở hàng trên (".biz-price-row" gồm cả 2 — xem HTML ở
   bizPopulateCells()), nhường chỗ cho các dòng Lịch trình.
   ⚠️ SỬA LỖI (19/08/2026, đợt 35b — theo báo lỗi anh Phong: "đang bị khoảng trống phía
   trên, hình như đang dành chỗ cho mục nào đó — sửa cho khi nào hợp điều kiện thì mới
   sinh ra"): TRƯỚC ĐÂY dùng "visibility:hidden" (ẩn nhưng vẫn CHIẾM CHỖ) — cố ý làm vậy
   để không làm lệch vị trí nút "M". Nhưng thực tế nút "M" CHỈ hiện khi ô có ĐÚNG 1 booking
   Xác nhận/Giữ (xem `totalXnGiu === 1` trong bizPopulateCells()) — mà điều kiện đó KHÔNG
   THỂ xảy ra cùng lúc với "nhiều hơn 1 dòng Lịch trình" (multi-schedule luôn có từ 2
   booking/Lịch trình khác nhau trở lên) — nghĩa là mỗi khi hàng Tên khách bị ẩn vì multi-
   schedule, nút "M" CHẮC CHẮN cũng đang ẩn theo (không có gì cần giữ chỗ). Khoảng trống
   "chiếm chỗ" đó vì vậy LUÔN THỪA, không phục vụ mục đích gì — chỉ làm ô cao hơn cần thiết
   (càng rõ sau khi đổi "height" ô thành "min-height" ở đợt 35a, ô co giãn theo nội dung
   nên khoảng trống thừa này lộ hẳn ra thành 1 mảng trắng ở đầu ô). Đổi "visibility:hidden"
   thành "display:none" — hàng Tên khách chỉ THỰC SỰ sinh ra (chiếm chỗ) đúng khi có nội
   dung để hiện (ô có ĐÚNG 1 booking, không multi-schedule). Vẫn còn 1 ca hiếm cần giữ chỗ
   đúng: nút "x" (hủy Chuyển, khác nút "M") có thể hiện ngay cả ở ô multi-schedule trong lúc
   đang Chuyển Cơ sở dở dang (xem `.biz-move-cancel-btn`) — thêm quy tắc riêng ngay dưới để
   dồn nút này (khi có) về sát lề phải, không cần hàng Tên khách giữ chỗ nữa. */
#page-business .biz-cell.biz-cell-multi-schedule .biz-price-row{
  display: none;
}
#page-business .biz-cell.biz-cell-multi-schedule .biz-cell-top{
  justify-content: flex-end;
}
/* Khối chứa nút M + nút x (hủy) — mặt cười/icon người check-in đã dời ra đầu dòng tên
   khách (".biz-price-row"), không còn nằm trong khối này nữa. */
#page-business .biz-cell-actions{
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
#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(--pb-teal);
  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 ô */
  transition: background-color .15s;
}
/* 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(--pb-teal-dark);
}
/* ✅ SỬA (theo yêu cầu anh): thay icon mặt cười check-in bằng icon hình người, đặt ĐẦU
   DÒNG ngay trước tên khách (trong ".biz-price-row") — bỏ ghim tuyệt đối, giờ nằm trong
   dòng chảy bình thường cạnh tên khách. Vẫn giữ nguyên chức năng bấm để Check in/out +
   2 màu trạng thái (xanh = chưa check-in, vàng = đã check-in). */
#page-business .biz-face{
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  color: #3ecf8e; /* Mặc định (chưa check-in / đã check-out): icon màu xanh */
  display: none; /* chỉ hiện khi có booking Xác nhận — bật lại bằng class .is-visible */
}
#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{
  /* ✅ SỬA (theo yêu cầu anh): đã check-in -> đổi từ vàng sang đỏ nổi nhất (đỏ thuần) */
  color: #ff0000;
}
/* ===== 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: 13px;
}
#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;
  /* ✅ MỚI (theo yêu cầu anh — cố định luôn dòng "BOOKING ... Ngày lập/Số", không cho
     trôi lên khi cuộn trang Booking): dính (sticky) ngay sát dưới ".booking-footer" (thanh
     nút XÓA/HỦY/.../SỬA/Thêm Booking — đã dính từ trước). "top" gán bằng JS (xem
     bookingSyncFooterStickyTop() ở app-core.js) = chiều cao thanh menu + chiều cao
     .booking-footer cộng lại, để 2 khối luôn dính khít nhau, không đè lên nhau. */
  position: sticky;
  z-index: 399;
}

.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;
}
/* ✅ SỬA (18/08/2026, theo yêu cầu anh Phong): 3 cột -> 2 cột (Số booking / Cơ sở kinh
   doanh) — hàng lọc dùng CHUNG layout này nên cũng còn 2 ô (Từ ngày/Đến ngày). */
.booking-list-head,
.booking-list-filter,
.booking-list-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  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;
}

/* ✅ MỚI (30/08/2026, theo yêu cầu anh Phong): "Thêm CSKD"/"Booking Charter" giờ nằm ngay
   dưới "#booking-bu-area" (xem guest.html) thay vì trong hàng tiêu đề — không còn nằm
   trong 1 hàng flex có justify-content:space-between của cha để tự đẩy sang phải nữa, nên
   cần tự canh phải + chừa khoảng cách với khối CSKD cuối cùng ở trên. */
.booking-title-actions-bottom {
  justify-content: flex-end;
  margin-top: 10px;
}

.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;
  /* ✅ SỬA (30/08/2026, theo yêu cầu anh Phong — "dòng BOOKING/Tên/Email/Số/Ngày đang còn 1
     khe hở, đẩy sát lên mảng các nút cho hết khe hở"): BỎ margin-bottom (trước đây 8px, cố
     tình chừa khoảng đệm giữa thanh nút này và dòng "BOOKING ... Ngày lập/Số" ngay dưới) —
     giờ đẩy khít hẳn, không còn khe hở. Đã đồng bộ bỏ luôn phần cộng "footerMarginBottom"
     tương ứng ở bookingSyncFooterStickyTop() (app-core.js) để lúc cuộn trang (2 khối dính
     sticky) cũng khít y hệt lúc chưa cuộn, không lệch. */
  margin-bottom: 0;
}

.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;
}

/* ✅ MỚI (theo yêu cầu anh — 08/08/2026): "Xác nhận lúc: dd/mm/yyyy HH:mm" cạnh nút CÔNG
   NỢ — chữ nhỏ, màu nhạt, không lấn nút. */
.booking-congno-xacnhan-time {
  font-size: 12.5px;
  color: #64748b;
  white-space: nowrap;
  margin-left: 4px;
}

.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; }

/* ✅ MỚI (15/09/2026, theo yêu cầu anh Phong — "Lịch sử tác động"): dòng "Tài khoản -
   Người lập" (#booking-congno-xacnhan-info-row, xem app-booking-changelog.js) đổi màu ĐỎ
   + có thể bấm vào xem khi booking này có ít nhất 1 lần Lưu "đáng chú ý" (JS tự thêm/gỡ
   class ".booking-changelog-alert" — KHÔNG đụng gì tới nội dung/hiển thị mặc định của
   dòng này khi không có gì đáng chú ý). */
#booking-congno-xacnhan-info-row.booking-changelog-alert {
  color: #dc2626;
  font-weight: 700;
  cursor: pointer;
}
#booking-congno-xacnhan-info-row.booking-changelog-alert:hover {
  text-decoration: underline;
}

/* Modal "Lịch sử tác động" — bảng phỏng theo .biz-xn-list-table cho quen mắt.
   ⚠️ SỬA (15/09/2026, theo báo lỗi anh Phong — "khung Lịch sử tác động bị ẩn dưới"): modal
   này đang dùng z-index mặc định 200 của ".modal" nên bị ".booking-footer" (z-index:400,
   thanh nút XÓA/HỦY/...)/".booking-header" (z-index:399, tiêu đề BOOKING) đè lên — nâng
   riêng lên 2100, ĐÚNG cách đã sửa cho "#booking-bu-modal"/"#booking-facility-modal" (xem
   giải thích đầy đủ ở khối "III. CƠ SỞ KINH DOANH" phía trên). */
#booking-changelog-modal {
  z-index: 2100;
}
.booking-changelog-dialog {
  width: min(1080px, 96vw);
  max-width: 1080px;
}
.booking-changelog-table-wrap {
  max-height: 70vh;
  overflow: auto;
}
.booking-changelog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.booking-changelog-table th {
  background: #f5f7fb;
  text-align: left;
  padding: 8px 10px;
  border-bottom: 2px solid #cbd5e1;
  white-space: nowrap;
  position: sticky;
  top: 0;
}
.booking-changelog-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #e7ebf2;
  vertical-align: top;
}
.booking-changelog-table td.changelog-col-stt,
.booking-changelog-table td.changelog-col-time,
.booking-changelog-table td.changelog-col-actor {
  white-space: nowrap;
}
.booking-changelog-reason-line {
  display: block;
}
.booking-changelog-empty {
  padding: 20px 4px;
  color: #64748b;
  font-size: 13px;
  text-align: center;
}


/* =========================================================
   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 */
/* ✅ MỚI (theo yêu cầu anh): modal này đang dùng z-index mặc định 200 của ".modal" nên
   bị đè dưới ".booking-footer" (z-index:400, thanh nút XÓA/HỦY/Danh sách khách/THANH
   TOÁN/CÔNG NỢ) và ".booking-header" (z-index:399, tiêu đề BOOKING) — nâng riêng lên
   cao hơn cả ".topbar" (z-index:2000) để modal luôn nổi lên trên cùng, giống cách đã
   làm cho "#asg-asset-picker-modal". */
#booking-bu-modal {
  z-index: 2100;
}
.booking-pick-dialog { width: min(900px, 92vw); }

/* ✅ MỚI (theo yêu cầu anh): modal "CHỌN HH.DỊCH VỤ" — chia cột theo Nhóm, mỗi cột
   5cm, có ô tìm kiếm + cuộn riêng, cho tích chọn nhiều. Cũng nâng z-index như modal
   "Thêm CSKD" ở trên (lý do tương tự — tránh bị .booking-footer/.booking-header đè). */
#booking-hhpick-modal {
  z-index: 2100;
}

/* ✅ MỚI (15/09/2026, theo báo lỗi anh Phong — "khung Thêm cơ sở bị ẩn dưới"): modal
   "Chọn Cơ sở" (bookingOpenFacilityModal(), app-booking-facility.js) cũng đang dùng z-index
   mặc định 200 của ".modal" -> bị ".booking-footer"/".booking-header" đè lên y hệt lý do đã
   sửa cho "#booking-bu-modal"/"#booking-hhpick-modal" ở trên — nâng z-index theo đúng cách
   đó để modal luôn nổi lên trên cùng. */
#booking-facility-modal {
  z-index: 2100;
}
/* ⚠️ SỬA LỖI (16/09/2026, theo báo lỗi anh Phong — "bấm Thêm cs xong không bấm được nút Xác
   nhận/Hủy ở bảng Chọn Cơ sở trên điện thoại"): ".modal-dialog"/".booking-pick-table" KHÔNG
   có giới hạn chiều cao (max-height) hay cuộn riêng nào — khi 1 CSKD có nhiều Cơ sở, bảng
   liệt kê giãn cao tự do, mà ".modal" canh giữa dialog theo CHIỀU DỌC (align-items:center) ->
   hộp thoại cao hơn màn hình bị đẩy TRÀN ĐỀU cả 2 phía, đúng y hệt lỗi đã gặp (và đã sửa) ở
   "#asg-asset-picker-modal" (xem ghi chú ở đó) — phần chân dialog chứa 2 nút "Xác nhận"/"Hủy"
   bị đẩy khuất dưới mép màn hình, không cuộn tới được nên nhìn như "bấm không ăn". Trên PC
   màn hình cao thường không lộ lỗi này (đủ chỗ chứa hết), trên điện thoại (viewport thấp) thì
   lộ ngay chỉ với vài Cơ sở. Áp ĐÚNG cách đã dùng cho "#asg-asset-picker-modal": ép
   ".modal-dialog" không vượt quá 90vh + chia flex-column, khoá cứng phần đầu/chân
   (flex-shrink mặc định vẫn giữ nguyên kích thước chữ), CHỈ phần bảng Cơ sở
   (".booking-pick-table") giãn nở chiếm chỗ còn lại và tự cuộn riêng — 2 nút "Xác nhận"/"Hủy"
   luôn đứng yên, luôn bấm được. */
#booking-facility-modal .modal-dialog {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
#booking-facility-modal .booking-pick-table {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
#booking-facility-modal .modal-actions {
  flex-shrink: 0;
}
.booking-hhpick-dialog {
  padding: 0;
  width: auto;
  max-width: none;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.booking-hhpick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #cfd6e4;
  background: #f8fafc;
  border-radius: 4px 4px 0 0;
}
.booking-hhpick-title { font-weight: 700; font-size: 16px; }
.booking-hhpick-actions { display: flex; align-items: center; gap: 8px; }
.booking-hhpick-columns {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
}
/* ✅ MỚI (theo yêu cầu anh): rộng thêm 1,5cm (5cm -> 6,5cm) để đủ chỗ hiện thêm Đơn giá
   ngay sau tên ("Tên (Đơn vị): Đơn giá"). ✅ SỬA tiếp: rộng thêm 2cm nữa (6,5cm ->
   8,5cm) — modal này dùng chung cho cả "HH.Dịch vụ" lẫn "Kèm theo" nên chỉ cần sửa 1
   chỗ này là áp dụng cho cả 2 mảng. */
.booking-hhpick-col {
  flex: 0 0 8.5cm;
  width: 8.5cm;
  border-right: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
}
.booking-hhpick-col:last-child { border-right: none; }
.booking-hhpick-col-title {
  text-align: center;
  font-weight: 700;
  padding: 8px 6px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.booking-hhpick-col-search { padding: 6px; border-bottom: 1px solid #e2e8f0; }
.booking-hhpick-col-search input {
  width: 100%;
  box-sizing: border-box;
  height: 26px;
  text-align: center;
  border: 1px solid #d8dee9;
  border-radius: 4px;
}
.booking-hhpick-col-list {
  max-height: 360px;
  overflow-y: auto;
}
.booking-hhpick-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid #eef1f6;
  cursor: pointer;
  font-size: 13px;
}
.booking-hhpick-item:hover { background: #f3f6fb; }
.booking-hhpick-item input[type="checkbox"] { flex: 0 0 auto; margin-top: 2px; }
/* ✅ MỚI (theo yêu cầu anh): dòng HH.Dịch vụ dài (tên dài + giá) thì xuống dòng (đẩy
   xuống dưới) thay vì tràn ra ngoài cột. */
.booking-hhpick-item-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 8px;
  row-gap: 2px;
}
.booking-hhpick-item-name {
  min-width: 0;
  flex: 1 1 auto;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* ✅ MỚI (theo yêu cầu anh): đẩy số tiền sát lề phải của cột thay vì đi liền ngay
   sau tên (margin-left:auto trong flex row, xuống dòng riêng nếu tên quá dài). */
.booking-hhpick-item-price {
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
  font-weight: 600;
  color: #1f6f4a;
}
.booking-hhpick-empty { padding: 10px; color: #94a3b8; text-align: center; font-size: 12px; }
.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/Giữ/Chờ ở "Danh sách booking" (dsbStatusClass(), app-danh-sach-booking.js —
   .dsb-st-confirmed/.dsb-st-held/.dsb-st-waiting) để dễ nhận biết, ĐÚNG 1 quy ước màu
   dùng chung toàn app. ⚠️ SỬA (15/09/2026, theo yêu cầu anh Phong — "Giữ vàng, Xác nhận
   xanh, Chờ và hết hạn đỏ"): tách riêng "Giữ" (conflict-giu, DRAFT còn hạn — vàng) khỏi
   "Chờ/Quá hạn" (conflict-cho, HELD hoặc DRAFT/OVERDUE đã quá "Ngày đến hạn" — đỏ), trước
   đây 2 trạng thái này gộp chung 1 màu "conflict-hold". */
.booking-pick-row.conflict-confirmed { color: #16A34A; }
.booking-pick-row.conflict-giu { color: #a16207; }
.booking-pick-row.conflict-cho { color: #dc2626; }

/* ✅ MỚI (18/08/2026, theo yêu cầu + mô tả anh Phong, đợt 19): modal "BẢNG CHỌN COMBO" —
   xem bookingOpenComboPickModal() ở app-booking-bu.js. Dùng lại khung ".booking-pick-
   dialog" có sẵn (rộng vừa đủ, z-index đã nâng sẵn cho mọi modal Booking — xem ghi chú
   ở trên) — chỉ thêm phần header riêng (tiêu đề + nút "Đóng" đỏ, giống đúng ảnh mẫu anh
   gửi) và bảng theo layout riêng (6 cột, khác 3 cột của ".booking-pick-row" mặc định). */
/* ⚠️ SỬA LỖI (30/08/2026, theo báo lỗi anh Phong — "Bảng chọn combo đang bị nằm dưới, nút
   X đỏ đóng đang bị khuất"): ghi chú NGAY TRÊN đây ("z-index đã nâng sẵn cho mọi modal
   Booking") là NHẦM — z-index:2100 chỉ gán riêng theo ID (VD "#booking-bu-modal", xem
   mục III phía trên), KHÔNG "đi kèm" theo class dùng chung ".booking-pick-dialog" (chỉ
   quyết định chiều rộng khung, không quyết định z-index). "#booking-combo-pick-modal"
   vẫn đang dùng z-index:200 mặc định của ".modal" -> bị đè dưới ".booking-footer"
   (z-index:400)/".booking-header" (z-index:399, tiêu đề BOOKING/Ngày lập/Số — đúng y hệt
   phần đang che khuất nút "Đóng" trong ảnh anh gửi). Nâng riêng ID này lên 2100, giống hệt
   "#booking-bu-modal"/"#booking-hhpick-modal" ở mục III. */
#booking-combo-pick-modal {
  z-index: 2100;
}
/* ✅ SỬA (18/08/2026, theo yêu cầu anh Phong): bảng bị chật — nới rộng khung thêm tổng
   5cm (~189px ở màn hình thường), chia ĐỀU cho cả 6 cột (~32px/cột, xem
   ".combo-pick-row" bên dưới) thay vì chỉ để các cột "fr" tự giãn theo khung.
   ⚠️ PHÁT HIỆN khi test: ".modal-dialog" mặc định có "max-width: 520px" — nếu chỉ đặt
   "width" ở ".combo-pick-dialog" (không kèm !important + không đè "max-width") thì
   KHÔNG ăn thua gì, khung vẫn bị kẹp ở 520px (đã tự bắt được lỗi này qua Playwright
   trước khi gửi anh, xem ghi chú kiểm tra ở project doc). Sửa theo ĐÚNG pattern đã có
   sẵn cho các modal cần rộng hơn 520px trong app (VD "#booking-dc-modal .modal-dialog.
   booking-pick-dialog") — đè cả "width" LẪN "max-width", có !important, SCOPE riêng
   theo #booking-combo-pick-modal để không đụng modal khác. */
#booking-combo-pick-modal .modal-dialog {
  width: min(950px, 96vw) !important;
  max-width: 96vw !important;
}
.combo-pick-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.combo-pick-title {
  font-weight: 700;
  font-size: 15px;
}
.combo-pick-table {
  border: 1px solid #d8dee9;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.combo-pick-row {
  display: grid;
  /* ✅ SỬA (18/08/2026, theo yêu cầu anh Phong): nới rộng cả 6 cột so với bản gốc
     (1.1fr 0.9fr 92px 60px 1.6fr 50px) — 3 cột cố định (Ngày/Giờ/Chọn) +32px mỗi cột
     (~5cm/6 cột chia đều); 3 cột co giãn (CSKD/Cơ sở/Lịch trình) giữ nguyên tỷ lệ "fr"
     nhưng tự nhận thêm phần rộng còn lại vì khung ".combo-pick-dialog" đã nới rộng hơn
     (xem ở trên) — GHI CHÚ: "calc(<fr> + <px>)" KHÔNG hợp lệ trong grid-template-columns
     (thử ban đầu bị trình duyệt bỏ qua cả dòng, bảng vỡ layout thành 1 cột dọc) nên
     KHÔNG dùng calc() cho cột fr, chỉ cộng thẳng số px cho 3 cột cố định. */
  grid-template-columns: 1.1fr 0.9fr 124px 92px 1.6fr 82px;
  gap: 6px;
  padding: 8px 10px;
  align-items: center;
  border-top: 1px solid #e7ebf2;
  font-size: 12.5px;
}
.combo-pick-row.header {
  background: #f5f7fb;
  font-weight: 600;
  border-top: none;
  font-size: 12px;
}
.combo-pick-row .col-pick { display: flex; justify-content: center; align-items: center; }
.combo-pick-row .col-pick input[type="checkbox"] {
  cursor: pointer;
  transform: scale(1.3);
  accent-color: var(--blue);
}
/* Hết chỗ -> mờ dòng + không cho tích, tránh chồng lấn (xem
   bookingComboPickRemainingCapacity() ở app-booking-bu.js). */
.combo-pick-row.combo-pick-row-blocked { color: #b91c1c; opacity: .75; }
.combo-pick-empty {
  padding: 16px 10px;
  color: #64748b;
  font-size: 13px;
}

/* 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;
}
/* ✅ MỚI (theo yêu cầu anh — giao diện Booking Charter): riêng khối BOOKING CHARTER (có
   thêm nhãn "Chọn CSKD Charter" phía trên ô CSKD, cao hơn 1 dòng so với khối CSKD thường)
   — căn theo mép DƯỚI thay vì căn giữa, để ô Diễn giải/cụm nút vẫn thẳng hàng với Ô CSKD
   thay vì bị đẩy lệch lên do khối CSKD giờ cao hơn. KHÔNG đụng tới khối CSKD thường (vẫn
   giữ nguyên "align-items: center" ở trên). */
.booking-bu-head-charter { align-items: flex-end; }
.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 — giao diện Booking Charter): ô "Tên CSKD (Charter)" chuyển
   lên đầu khối, đứng ngay trước ô Diễn giải, cùng hàng với cụm nút Thêm địa điểm/Thêm
   Charter/Xóa — cố định chiều rộng (không co giãn như ô Diễn giải), cao 27px cho thẳng
   hàng với các ô/nút cạnh nó. */
.bu-charter-cskd-head-wrap { flex: 0 0 220px; }
/* ✅ MỚI (theo yêu cầu anh): thêm dòng nhãn "Chọn CSKD Charter" phía trên ô CSKD — cho
   khung tiêu đề của khối BOOKING CHARTER đỡ trống trải (trước đây chỉ có mỗi ô input
   trơn, không nhãn, nhìn hụt hẫng so với các khối CSKD thường có nhãn phía trên). */
.bu-charter-cskd-head-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 3px;
  color: #334155;
}
.bu-charter-cskd-head {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  padding: 4px 8px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
}
/* ✅ 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;
  /* ✅ SỬA (theo yêu cầu anh): bỏ cột "Tên CSKD (Charter)" (đã chuyển lên đầu khối, xem
     .bu-charter-cskd-head) — còn lại 7 cột, "Nhóm khách" giãn rộng ra thay chỗ. */
  grid-template-columns: 2.6fr 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: var(--blue);
  border: 1px solid var(--blue);
}
.booking-charter-row .charter-dc-btn:hover { background: var(--blue-light); }
/* "+": 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: 2.6fr 90px 130px 130px 32px 32px 32px;
  gap: 6px;
  padding: 1px 8px 6px;
  margin-top: -4px;
  color: #1a73e8;
  font-size: 13px;
  font-style: italic;
}
/* ✅ SỬA (theo yêu cầu anh — bỏ cột "Tên CSKD (Charter)"): cập nhật lại vị trí cột cho
   khớp đúng lưới 7 cột mới (Nhóm khách/Số lượng/Đơn giá/Thành tiền/ĐC/+/Xóa) — "Nhóm
   khách" giờ CHỈ còn 1 cột (đã giãn rộng ra thay chỗ cột CSKD cũ), Số lượng dịch từ cột
   3 -> cột 2, Thành tiền dịch từ cột 5 -> cột 4. */
.booking-charter-adjust-row .fac-adjust-reason { grid-column: 1; }
.booking-charter-adjust-row .fac-adjust-sl { grid-column: 2; text-align: center; }
.booking-charter-adjust-row .fac-adjust-money { grid-column: 4; 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;
}
/* ✅ SỬA (09/09/2026, theo yêu cầu anh Phong): ô "Tính chất" của Booking Charter cũng đổi
   sang textarea tự giãn cao — y hệt CSKD thường ở trên (.booking-fac-row textarea.fac-
   property), dùng chung 1 hàm bookingBindFacilityPropertyAutocomplete(). */
.booking-charter-fac-row .bf textarea.fac-property {
  width: 100%;
  min-height: 26px;
  box-sizing: border-box;
  padding: 3px 8px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  resize: none;
  overflow: hidden;
  cursor: pointer;
  line-height: 1.3;
}

/* 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; }
/* ✅ SỬA (09/09/2026, theo yêu cầu anh Phong — đổi ô "Tính chất" sang textarea tự giãn cao,
   giống hệt Cấu hình ĐVKD, xem bookingBindFacilityPropertyAutocomplete()): bỏ mốc cứng
   height:27px của ".fac-prop-ac" khi có NHIỀU giá trị đã chọn (mỗi giá trị 1 dòng, textarea
   cần cao hơn 1 dòng) — chỉ giữ làm CHIỀU CAO TỐI THIỂU, để ô tự cao lên theo nội dung. */
.booking-fac-row .fac-prop-ac { height: auto; min-height: 27px; }
.booking-fac-row .fac-prop-ac textarea.fac-property {
  width: 100%;
  min-height: 27px;
  box-sizing: border-box;
  padding: 3px 8px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  resize: none;
  overflow: hidden;
  cursor: pointer;
  line-height: 1.3;
}
.booking-fac-row .btn { width: 100%; height: 27px; white-space: nowrap; padding: 0; }
/* ⚠️ SỬA LỖI (09/09/2026, theo báo lỗi anh Phong — "nút Đồng ý quá to"): hộp chọn Tính
   chất (".price-sched-ac", tạo động bởi wingoBindMultiSelectTextarea()) được JS chèn làm
   con của ".fac-prop-ac" — vốn NẰM BÊN TRONG ".booking-fac-row" — nên nút "Đồng ý"
   (".price-sched-ac-ok", cũng là ".btn") vô tình bị luật ".booking-fac-row .btn" ở trên
   (width:100%/height:27px/padding:0, specificity cao hơn ".price-sched-ac-ok" 1 lớp class)
   đè mất kích thước gốc — giãn hết chiều ngang hộp, cao 27px + hết padding, trông "to bè".
   Ghi đè NGAY TẠI ĐÂY (2 lớp class, thắng specificity ".booking-fac-row .btn") để nút
   "Đồng ý" giữ đúng kích thước tự nhiên như mọi nơi khác đang dùng ".price-sched-ac-ok". */
.booking-fac-row .price-sched-ac-ok,
.booking-charter-fac-row .price-sched-ac-ok {
  width: auto;
  height: auto;
  padding: 6px 18px;
}
.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 "M" (Chuyển) — cùng kích thước hình vuông 32x27, nằm sát nhau quanh
   Thành tiền. ✅ SỬA (09/08/2026, theo yêu cầu anh): đổi từ ".fac-pickup-toggle-btn" (nút
   "+" cũ, đã ẩn) sang ".fac-transfer-toggle-btn" (nút "M" mới). */
.booking-fac-row .fac-dc-btn,
.booking-fac-row .fac-transfer-toggle-btn {
  width: 32px;
  height: 27px;
  padding: 0;
  font-weight: 700;
}

/* ✅ MỚI (16/07, theo yêu cầu anh): "ĐC" và "M" 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-transfer-toggle-btn {
  background: #fff !important;
  color: var(--blue) !important;
  border: 1px solid var(--blue) !important;
}
.booking-fac-row .fac-dc-btn:hover,
.booking-fac-row .fac-transfer-toggle-btn:hover {
  background: var(--blue-light) !important;
}

/* Nút "M" (Chuyển) riêng của 1 Cơ sở — cùng màu xanh với nút ĐC */
.booking-fac-row .fac-transfer-toggle-btn {
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 4px;
}
.booking-fac-row .fac-transfer-toggle-btn:hover { background: var(--blue-dark); }
.booking-fac-row .fac-transfer-toggle-btn:disabled {
  background: #cbd5e1 !important;
  color: #fff !important;
  border: none !important;
  cursor: not-allowed;
}

/* 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; }

/* ✅ SỬA (09/08/2026, theo yêu cầu anh — "khung và nền giống các dòng Cơ sở gốc"): dòng
   phụ "Chuyển" hiện dưới mỗi dòng Cơ sở — 4 phần: CSKD (autocomplete) | Cơ sở đích
   (autocomplete) | Từ ngày/giờ → Đến ngày/giờ (Đến luôn = Đến ngày booking, không sửa
   được) | nút M (chuyển tiếp)/Xóa (bỏ dòng chưa lưu). TRƯỚC ĐÂY tô nền xanh/vàng nhạt +
   viền trái màu để phân biệt hẳn với dòng Cơ sở gốc — giờ bỏ hết, dùng NỀN TRẮNG + đường
   kẻ mảnh dưới mỗi dòng, giống hệt cách các dòng Cơ sở gốc phân cách nhau (không còn nổi
   bật khác biệt, chỉ còn phân biệt qua vị trí thụt vào + cỡ chữ nhỏ hơn). */
.booking-fac-transfer-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 32px;
  gap: 6px;
  align-items: center;
  padding: 4px 0 4px 18px;
  margin-right: -10px;
  border-bottom: 1px solid #eef1f6;
}
.booking-fac-transfer-row .fac-transfer-cskd-ac,
.booking-fac-transfer-row .fac-transfer-facility-ac { position: relative; }
.booking-fac-transfer-row .fac-transfer-cskd-input,
.booking-fac-transfer-row .fac-transfer-facility-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;
}
.booking-fac-transfer-row .fac-transfer-cskd-input:read-only,
.booking-fac-transfer-row .fac-transfer-facility-input:read-only {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}
.booking-fac-transfer-row .fac-transfer-cskd-acbox,
.booking-fac-transfer-row .fac-transfer-facility-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;
}
.booking-fac-transfer-row .fac-transfer-datetime {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #334155;
  white-space: nowrap;
}
.booking-fac-transfer-row .fac-transfer-fromdate {
  height: 27px;
  box-sizing: border-box;
  padding: 2px 4px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  width: 130px;
}
.booking-fac-transfer-row .fac-transfer-fromdate:disabled {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}
/* ✅ SỬA (09/08/2026, theo yêu cầu anh — "tách ô Từ giờ ra, cho sửa giờ"): ô Giờ giờ là
   input[type=time] thật (sửa được ở dòng mới thêm), thay cho span chữ tĩnh trước đây. */
.booking-fac-transfer-row .fac-transfer-fromtime-input {
  height: 27px;
  box-sizing: border-box;
  padding: 2px 4px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-family: inherit;
  font-size: 12px;
  width: 88px;
}
.booking-fac-transfer-row .fac-transfer-fromtime-input:disabled {
  background: #f8fafc;
  color: #475569;
  border-color: #e2e8f0;
}
.booking-fac-transfer-row .fac-transfer-totime {
  color: #64748b;
}
.booking-fac-transfer-row .fac-transfer-arrow { color: #94a3b8; }
.booking-fac-transfer-row .fac-transfer-todate {
  color: #64748b;
}
.booking-fac-transfer-row .fac-transfer-actions {
  display: flex;
  gap: 4px;
}
.booking-fac-transfer-row .fac-transfer-actions .btn {
  width: 32px;
  height: 27px;
  padding: 0;
  font-weight: 700;
}

/* Tính chất autocomplete */
.fac-prop-ac { position: relative; }
/* ⚠️ SỬA LỖI (30/08/2026, theo báo lỗi anh Phong — "bấm chọn Tính chất gốc bị dồn hàng"):
   ô "Tính chất gốc" (mới thêm) dùng hộp gợi ý RIÊNG `.fac-prop-goc-acbox` (khác class với
   `.fac-prop-acbox` của ô "Tính chất" cũ), nhưng lại QUÊN thêm CSS `position: absolute` cho
   class MỚI này — hộp gợi ý vì vậy nằm THEO DÒNG bình thường (position: static mặc định),
   đẩy hẳn các dòng Cơ sở phía dưới xuống mỗi khi mở ra, thay vì NỔI ĐÈ lên trên như ô "Tính
   chất" cũ. Giờ gộp chung 1 rule cho CẢ 2 class, y hệt style nhau. */
.fac-prop-acbox,
.fac-prop-goc-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; }

/* ✅ MỚI (09/09/2026, theo yêu cầu anh Phong): ô "Tính chất" trong Cấu hình ĐVKD cho phép
   chọn NHIỀU giá trị — làm y hệt kiểu ô "CSKD" ở Danh mục "Lý do điều chỉnh"
   (#page-adjust-reasons textarea.adj-reason-cskd + .price-sched-ac, xem app-core.js
   ensureAdjReasonCskdMultiSelect()): 1 ô textarea readonly, tự giãn cao theo số dòng, mỗi
   giá trị đã chọn hiện 1 dòng riêng — bấm vào mở dropdown checkbox + nút "Đồng ý" để chọn
   từ Danh mục Tính chất chung (không gõ tự do trực tiếp ở đây nữa). "Tính chất gốc" bên
   cạnh KHÔNG đổi, vẫn chỉ chọn 1 giá trị như trước. */
.facility-row textarea.facility-property{
  width: 100%;
  min-height: 24px;
  padding: 2px 4px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 12px;
  font-family: inherit;
  background: #fff;
  resize: none;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  line-height: 1.3;
}
/* Dropdown chọn nhiều Tính chất — tái dùng khung ".price-sched-ac" (Bảng giá CSKD) nhưng
   cố định chiều rộng như ".adj-reason-cskd-ac" vì cột "Tính chất" cũng hẹp. */
.facility-property-ac{
  right: auto !important;
  /* ✅ SỬA (09/09/2026): nới lên 300px cùng lúc với ".adj-reason-cskd-ac" — giữ 2 ô ĐỒNG
     BỘ với nhau, xem giải thích đầy đủ ở đó. */
  width: 300px;
}
.facility-property-ac .price-sched-ac-list{
  overflow-x: hidden;
}

/* 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;
}

/* ✅ MỚI (theo yêu cầu anh): dòng tiêu đề "KÈM THEO" / "HH.DỊCH VỤ" — nền và màu chữ
   LẤY Y HỆT tiêu đề "CƠ SỞ KINH DOANH" (.booking-section-title: nền #f3f6fb, chữ
   #333, viền dưới #cfd6e4), KHÔNG set font-size riêng (kế thừa mặc định) để cỡ chữ
   khớp đúng luôn. Mục đích: tách rõ 4 phần của booking — Khách hàng / Cơ sở kinh
   doanh / Kèm theo / HH.Dịch vụ. */
.booking-addon-title,
.booking-hhi-title {
  font-weight: 700;
  color: #333;
  background: #f3f6fb;
  padding: 4px 10px;
  margin: 0 -10px 6px -10px;
  border-bottom: 1px solid #cfd6e4;
}
/* ✅ MỚI (theo yêu cầu anh): thêm ô "Diễn giải" ngay trên dòng tiêu đề "KÈM THEO", chiếm
   hết phần diện tích còn lại — đổi tiêu đề "KÈM THEO" thành 1 hàng flex (chữ "KÈM THEO"
   bên trái, ô Diễn giải bên phải). KHÔNG đụng "HH.DỊCH VỤ" (".booking-hhi-title" vẫn giữ
   nguyên dạng khối chữ đơn thuần, không có ô Diễn giải nào ở đây). */
.booking-addon-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.booking-addon-title-text {
  white-space: nowrap;
}
.booking-addon-title input.booking-addon-note {
  flex: 1;
  min-width: 0;
  height: 24px;
  box-sizing: border-box;
  padding: 2px 8px;
  border: 1px solid #cfd6e4;
  border-radius: 4px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
}
.booking-addon-head {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin: 6px -10px 0 -10px;
  padding: 6px 10px;
  background: #f3f6fb;
  border-radius: 4px;
}
/* ✅ MỚI (theo yêu cầu anh): các dòng "Kèm theo" cũng thụt vào đầu dòng 1cm, đồng bộ
   với các dòng "HH.Dịch vụ" bên dưới. */
.booking-addon-table { margin-top: 2px; margin-left: 1cm; }
.booking-addon-row {
  display: grid;
  grid-template-columns: 36px 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; }
/* ✅ MỚI (23/08/2026, theo yêu cầu anh Phong): cột "TT" — số thứ tự ngày áp dụng của
   dòng Kèm theo, đặt đầu tiên bên trái, giống hệt cột TT của khối "Địa điểm". */
.booking-addon-row input.addon-tt { text-align: center; font-weight: 600; }
.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: var(--blue) !important;
  border: 1px solid var(--blue) !important;
}
.booking-addon-row .addon-addnew-btn:hover {
  background: var(--blue-light) !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: 4.5cm 1fr 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,
.booking-hhi-group-head input.hhi-group-note {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  text-align: left;
}
/* ✅ MỚI (theo yêu cầu anh): ô "Diễn giải" ngắn lại 1cm (thụt vào so với trước) —
   không kéo dài hết phần còn lại của dòng nữa. */
.booking-hhi-group-head .hhi-group-note-wrap {
  margin-right: 1cm;
}
.booking-hhi-group-head .hhi-group-del-btn {
  height: 27px;
  padding: 0;
  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. Nút "+" thêm dòng (hhi-group-addrow-btn) giờ nằm trên TỪNG dòng HH.Dịch
   vụ (giữa Thành tiền và Xóa) thay vì cạnh ô Diễn giải như trước. */
.hhi-addnew-btn,
.hhi-group-addrow-btn,
.hhi-dc-btn {
  background: #fff !important;
  color: var(--blue) !important;
  border: 1px solid var(--blue) !important;
}
.hhi-addnew-btn:hover,
.hhi-group-addrow-btn:hover,
.hhi-dc-btn:hover {
  background: var(--blue-light) !important;
}
.booking-hhi-row .hhi-group-addrow-btn { text-align: center; }

/* 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. */
/* ✅ MỚI (theo yêu cầu anh): các dòng HH.Dịch vụ thụt vào đầu dòng 1cm (ngắn lại 1cm so
   với dòng Lịch trình/Diễn giải phía trên) — để phân biệt trực quan "con" của cụm Lịch
   trình. */
.booking-hhi-table { margin-top: 6px; margin-left: 1cm; }
.booking-hhi-row {
  display: grid;
  grid-template-columns: 1fr 36px 175px 70px 110px 120px 32px 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 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;
  /* ✅ SỬA (01/09/2026, theo yêu cầu anh Phong): trước đây "width: 112px" cố định khiến
     tên Cơ sở dài (kèm "(SL chuẩn, SL thêm, ext ...)") bị bể xuống nhiều dòng trong khung
     hẹp. Giờ bỏ width cố định, cho khung tự co giãn theo đúng độ dài nội dung (kết hợp
     ".booking-table-chip-name" white-space: nowrap bên dưới để LUÔN hiện đúng 1 dòng). */
  width: auto;
  min-width: 112px;
  min-height: 53px;
  border: 2px solid #b9b9b9;
  border-radius: 16px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px 8px;
  box-sizing: border-box;
}
.booking-table-chip-name { text-align: center; font-size: 13px; line-height: 1.2; color: #222; white-space: nowrap; }
.booking-table-chip-del {
  /* ✅ SỬA (01/09/2026, theo yêu cầu anh Phong): đưa dấu X ra sát mép phải/trên của khung
     (trước "right: 10px" còn cách mép khá xa, nhìn như đè lên chữ). */
  position: absolute;
  top: 4px; right: 4px;
  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); }

/* ✅ MỚI (30/08/2026, theo yêu cầu anh Phong): badge "(n)" SL khách đã tự động chia cho
   đúng chip Khu vực này (xem bookingRenderFacilityRowsHTML(), app-booking-facility.js —
   dùng lại đúng class ".fac-sl-split-badge" đã có ở dòng Cơ sở chế độ thường).
   ✅ SỬA (01/09/2026, theo yêu cầu anh Phong): trước "display: block" đẩy "(n)" xuống
   dòng riêng bên dưới tên — giờ đổi "inline-block" + margin-left để nằm CÙNG 1 dòng với
   tên (dòng cha ".booking-table-chip-name" đã có white-space: nowrap nên không tự bể
   dòng nữa). */
.booking-table-chip-badge {
  display: inline-block;
  margin-left: 5px;
  font-weight: 700;
  color: #1a7f37;
  font-size: 12px;
}


/* =========================================================
   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
   ========================================================= */

/* ✅ SỬA (theo yêu cầu anh — 3 điểm):
   1) Các ô tiền (Tổng tiền/Đã thanh toán/Còn lại) rộng ĐỀU NHAU — cố định 1 giá trị
      width duy nhất cho input, không còn phụ thuộc độ dài nhãn hay có/không nút "...".
   2) 3 dòng đưa lên chung 1 HÀNG NGANG (trước đây xếp dọc 3 dòng) — .booking-pay-left
      đổi sang display:flex.
   3) Khung thu hẹp lại theo đúng nội dung (không còn full-width) + cố định (position:
      fixed) sát đáy màn hình, nổi trên nội dung — cùng quy ước với .pt-footer (thanh
      dưới cố định của trang Thu tiền booking). */
/* ✅ SỬA (theo yêu cầu anh — chỉnh tiếp lần 3): "position:fixed; left:0; right:0" lấy
   theo TOÀN VIEWPORT nên lấn cả sang phần danh sách booking bên trái (.booking-body chỉ
   là cột PHẢI của .booking-main-layout, không tính từ mép trái màn hình). Đổi sang
   "position: sticky" — bám đúng theo chiều rộng THẬT của .booking-body (khung Booking,
   không gồm sidebar), vẫn dính sát đáy màn hình khi cuộn như fixed. */
/* ✅ SỬA (theo yêu cầu anh — lần mới nhất): bỏ hẳn "dính cố định đáy màn hình" (trước
   đây position:sticky; bottom:0), để khối Tổng tiền/Đã thanh toán/Còn lại chỉ nằm ĐÚNG
   VỊ TRÍ CUỐI CÙNG của Booking (sau khối Cơ sở kinh doanh) và cuộn theo trang như nội
   dung bình thường — không còn nổi/che nội dung phía dưới khi cuộn nữa. */
.booking-payment {
  background: #dcdcdc;
  border: 1px solid #cfd6e4;
  border-radius: 10px;
  padding: 9px 18px;
  margin-top: 12px;
}
.booking-payment-grid {
  display: flex;
  justify-content: flex-start;
}
.booking-pay-left {
  display: flex;
  align-items: center;
  gap: 22px;
}
.booking-pay-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.booking-pay-label { text-align: left; font-size: 13px; white-space: nowrap; }
.booking-pay-inline { display: flex; gap: 6px; align-items: center; }
/* ✅ 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 — 3 ô rộng bằng nhau): cố định ĐÚNG 1 chiều rộng cho input
   tiền, dùng chung cho cả ô đứng riêng (Tổng tiền) lẫn ô bọc trong .booking-pay-inline
   (Đã thanh toán/Còn lại) — không còn tính theo % cột nữa nên luôn bằng nhau tuyệt đối. */
.booking-pay-row > input.form-control,
.booking-pay-inline input.form-control {
  width: 150px;
  flex: none;
}
/* ✅ 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;
}
/* Chừa khoảng trống ở đáy nội dung Booking để không bị thanh Tổng tiền (giờ cố định)
   che mất dòng cuối cùng. */
.booking-body {
  padding-bottom: 70px;
}


/* =========================================================
   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 .bu-combo-toggle-btn,
#page-booking .bu-add-charter-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;
}

/* ✅ MỚI (18/08/2026, theo yêu cầu anh Phong): đổi 3 nút "Địa điểm"/"+ Kèm theo"/
   "+ HH.Dịch vụ" ở cuối mỗi khối CSKD trong Booking từ dạng nút nền xanh đặc sang dạng
   CHỮ (không nền/không viền) — xanh lá, in đậm, in nghiêng, có gạch chân, giống hệt ảnh
   mẫu anh gửi. CHỈ áp dụng cho 3 nút này — nút "Combo" (.bu-combo-toggle-btn) và các nút
   khác trong cùng cụm giữ nguyên dạng nút cũ, không đổi. */
#page-booking .bu-pickup-toggle-btn,
#page-booking .booking-addon-add-btn,
#page-booking .booking-hhi-add-btn {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  color: #16a34a;
  font-weight: 700;
  font-style: italic;
  text-decoration: underline;
}

#page-booking .bu-pickup-toggle-btn:hover,
#page-booking .booking-addon-add-btn:hover,
#page-booking .booking-hhi-add-btn:hover {
  background: transparent !important;
  color: #15803d;
}

/* Nút "Địa điểm" đang MỞ (bu._pickupOpen) — vẫn giữ dạng chữ, chỉ đậm màu hơn để phân
   biệt trạng thái đang mở/đóng (trước đây không có kiểu riêng cho ".active" ở nút này). */
#page-booking .bu-pickup-toggle-btn.active {
  color: #15803d;
}

/* Ô 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;
  /* ✅ MỚI (theo yêu cầu anh): đồng bộ cỡ chữ 13 cho toàn màn hình Tài khoản — các phần
     tử có font-size riêng (h3, .btn, input/select...) được ghi đè lại thành 13px ở các
     rule scoped bên dưới. */
  font-size: 13px;
}

/* 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: 13px;
}
/* ✅ MỚI (theo yêu cầu anh — đồng bộ cỡ chữ 13, đồng bộ chiều cao 3 nút "+ Thêm tài
   khoản"/"LƯU TÀI KHOẢN"/"LƯU QUYỀN" theo đúng chiều cao nút "LƯU TÀI KHOẢN"): trước đó
   "+ Thêm tài khoản" và "LƯU QUYỀN" dùng class btn-sm (11px, thấp hơn) còn "LƯU TÀI
   KHOẢN" dùng btn thường (12px, cao hơn) — giờ cả 3 nút này ghi đè về CÙNG 1 cỡ chữ
   (13px) và CÙNG 1 chiều cao (32px), không phụ thuộc class btn/btn-sm gốc nữa. */
#page-users .btn { font-size: 13px; }
#page-users #user-add-btn,
#page-users #user-save-btn,
#page-users #perm-save-btn {
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#page-users .user-row {
  display: grid;
  /* ✅ SỬA (theo yêu cầu anh — lần trước "Tên đăng nhập" bị hiểu NGƯỢC, thành ô hẹp nhất
     thay vì rộng nhất): trước đó lỡ đặt 3 cột Họ tên/Vai trò/Trạng thái quá rộng (190/150/
     180px) nên trên màn hình bình thường "Tên đăng nhập" (phần rộng dư ra) bị bóp lại rất
     hẹp, email hiện không đủ. Giờ đổi lại: "Tên đăng nhập" có bề rộng TỐI THIỂU 220px (đủ
     hiện trọn email dài) và tự giãn thêm nếu còn dư chỗ; 3 cột Họ tên/Vai trò/Trạng thái
     thu lại vừa khít nội dung (không dư), cột Xóa vừa đủ chỗ cho nút — nhờ vậy Xóa luôn sát
     ngay sau Trạng thái và sát mép phải khung.
  */
  grid-template-columns: minmax(220px, 1fr) 150px 120px 160px 55px;
  gap: 10px;
  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;
  font-size: 13px;
}
#page-users .user-field-error {
  color: #dc2626;
  font-size: 11px;
  margin-top: 2px;
  line-height: 1.3;
}
/* 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;
}
/* ✅ MỚI (theo yêu cầu anh): nút "LƯU TÀI KHOẢN" chuyển sang bên phải, nằm ngay dưới cột
   nút Xóa (thay vì nằm bên trái như trước). */
#page-users .bank-footer {
  display: flex;
  justify-content: flex-end;
}

/* 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;
}
/* ✅ SỬA (theo yêu cầu anh — ô tích Xem/Thêm/Sửa/Xóa phải cùng kích thước với ô Xem): áp
   dụng chung 1 kích thước 18x18 cho MỌI checkbox trong bảng (kể cả 4 ô "tích/bỏ tích cả
   cột" ở dòng tiêu đề #perm-check-all-view/-add/-edit/-delete, không chỉ checkbox từng
   dòng dữ liệu) — thêm margin:0 và flex:none để trình duyệt không tự co/thêm lề khác
   nhau giữa ô nằm CẠNH CHỮ (dòng tiêu đề) và ô đứng MỘT MÌNH (dòng dữ liệu). */
#page-users .perm-row input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  cursor: pointer;
}
#page-users .perm-row-head > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
#page-users .perm-row-head > div:first-child {
  justify-content: flex-start;
}
#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;
}

/* ✅ MỚI (19/08/2026, đợt 39 — "thao tác chuyển khách"): cột "TT" bấm được để CHỌN dòng
   khách cần chuyển phòng — con trỏ tay + tô sáng nhẹ khi rê chuột, báo hiệu bấm được. */
table.gl-table tbody td.col-tt.gl-tt-cell{ cursor: pointer; }
table.gl-table tbody td.col-tt.gl-tt-cell:hover{ background: #eff6ff; color: #1a73e8; font-weight: 700; }

/* ✅ MỚI (đợt 39): dòng khách đang được CHỌN để chuyển phòng — viền NÉT ĐỨT màu GHI (không
   bôi đậm chữ, đúng yêu cầu anh — xem hình mẫu anh gửi) chạy quanh trọn vẹn cả dòng. Dùng
   border-top/bottom trên mọi ô + border-left/right riêng ở ô đầu/cuối (bảng dùng
   border-collapse nên không outline được thẳng theo <tr>, phải ghép viền qua từng <td>). */
table.gl-table tbody tr.gl-guest-row.gl-row-picking td{
  border-top: 1px dashed #9ca3af;
  border-bottom: 1px dashed #9ca3af;
}
table.gl-table tbody tr.gl-guest-row.gl-row-picking td:first-child{
  border-left: 1px dashed #9ca3af;
}
table.gl-table tbody tr.gl-guest-row.gl-row-picking td:last-child{
  border-right: 1px dashed #9ca3af;
}

/* ✅ MỚI (19/08/2026, theo yêu cầu anh — "click vào thứ tự mà chưa chuyển thì giữ màu tích ở
   đó để biết"): viền nét đứt quanh cả dòng (ở trên) đôi khi khó nhận ra ngay, đặc biệt khi
   cuộn ngang sang các cột bên phải. Tô hẳn NỀN cột "TT" của dòng đang chọn thành màu xanh
   đậm (số đổi trắng) — cột này LUÔN hiện dù kéo bảng sang phải (sticky, xem luật ở trên) nên
   là chỗ chắc chắn nhất để anh luôn thấy rõ đang chọn dòng nào, GIỮ NGUYÊN màu này cho tới
   khi chuyển xong hoặc bấm bỏ chọn (không chỉ khi rê chuột qua như luật hover phía trên). */
table.gl-table tbody tr.gl-guest-row.gl-row-picking td.col-tt.gl-tt-cell{
  background: #1a73e8;
  color: #fff;
  font-weight: 700;
}

/* ✅ MỚI (đợt 39): đang ở chế độ "chọn để chuyển phòng" (1 dòng đã được bấm chọn) -> tô
   sáng + đổi con trỏ khi rê chuột qua dòng TIÊU ĐỀ các phòng (Bấm vào đó để chuyển khách
   đang chọn sang phòng này), giúp anh biết ngay bấm vào đâu để hoàn tất chuyển phòng. */
table.gl-table.gl-picking-active tbody tr.gl-group-header:hover td{
  background: #c7ddf5;
  cursor: pointer;
}
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 ===== */
/* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong — "Cố định từ nút Thêm từ cấu hình và nút
   thêm mới - không bị khuất khi kéo xuống"): ghim (position:sticky) 2 nút này ngay dưới
   thanh menu trên cùng — dùng chung biến CSS "--topbar-h" (chiều cao thật của ".topbar",
   đo bằng JS ở wingoSyncTopbarHeightVar() trong app-core.js, xem khai báo ở đầu file) làm
   khoảng cách "top", để 2 nút LUÔN thấy/bấm được dù kéo (cuộn) trang xuống bao xa — không
   còn bị trôi mất lên trên khuất sau thanh menu như trước. "background:#fff" để nội dung
   cuộn bên dưới không lộ ra xuyên qua khi thanh này đang dính. */
#page-assets .asset-toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 12px;
  position: sticky;
  top: var(--topbar-h, 96px);
  z-index: 100;
  background: #fff;
  padding: 6px 0;
}

/* ✅ MỚI (30/08/2026, theo yêu cầu anh Phong — "mở rộng khung bao ra sát mép cách 1 ly,
   khung bên trong ra sát khung bên ngoài cách 1 ly"): cùng kỹ thuật đã dùng ở trang Xếp
   dịch vụ/Tài khoản (bù lại padding 32px 2 bên của .content bằng margin âm, chỉ chừa lại
   4px) — kéo khung "Danh mục Tài sản" (.card ngoài cùng) ra gần sát 2 mép màn hình. Đồng
   thời giảm hẳn padding của chính .card đó, để 2 khung con "DANH SÁCH CƠ SỞ"/"THÔNG TIN
   QUẢN LÝ" (.asset-left-panel/.asset-right-panel) áp SÁT vào khung ngoài, chỉ còn cách
   đúng ~1 ly (padding 4px), không còn khoảng hở lớn như trước. */
#page-assets {
  margin-left: -32px;
  margin-right: -32px;
  padding-left: 4px;
  padding-right: 4px;
}
#page-assets > .card {
  padding: 6px 4px 4px;
}

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

/* ✅ MỚI (06/09/2026, theo yêu cầu anh Phong — "Mảng bên trái và bên phải có con lăn độc
   lập không ảnh hưởng nhau"): giới hạn chiều cao mỗi khung theo đúng phần màn hình còn
   lại (trừ thanh menu cố định "--topbar-h" + toolbar "Thêm từ cấu hình"/"Thêm mới" vừa
   ghim sticky ở trên — xem "#page-assets .asset-toolbar") — mỗi khung tự có 1 thanh cuộn
   DỌC RIÊNG của chính nó khi danh sách dài hơn khung, cuộn khung này KHÔNG kéo/ảnh hưởng
   gì tới khung kia (trước đây cả 2 khung chỉ cao theo đúng nội dung, cuộn CHUNG theo cả
   trang). Số trừ "170px" là ước lượng phần còn lại phía trên (padding trang + tiêu đề thẻ
   + toolbar) — không cần chính xác tuyệt đối, chỉ cần đủ chừa chỗ cho toolbar sticky. */
#page-assets .asset-left-panel,
#page-assets .asset-right-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: #fff;
  max-height: calc(100vh - var(--topbar-h, 96px) - 170px);
  min-height: 240px;
  overflow-y: auto;
  overflow-x: auto;
}
/* LƯU Ý: 3 dòng "Đơn vị"/"Quản lý"/"Thuộc CSKD" nằm ngay ĐẦU khung phải này (xem
   fixedRowsHtml trong renderInfoPanel() ở app-core.js) nên hộp gợi ý/chọn của chúng
   (.asset-mgr-acbox) hầu như luôn đủ chỗ hiện ra bình thường; nếu sau này khung phải bị
   cuộn xuống sâu, hộp gợi ý có thể bị khung này (overflow-y:auto) cắt bớt ở mép dưới —
   chưa xử lý vì chưa phát sinh, cần JS định vị lại (position:fixed theo tọa độ ô input)
   mới triệt để nếu anh Phong báo gặp lỗi này. */

#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-tt {
  width: 32px;
  height: 27px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  background: #fff;
}
#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; }
/* ✅ MỚI (03/09/2026, theo yêu cầu anh Phong): bấm dòng TÀI SẢN (khối) -> mở "THÔNG TIN
   QUẢN LÝ" — thêm viền nổi bật khi khối đang được chọn, giống hệt nguyên tắc
   .asset-fac-row.selected bên dưới (dùng cho dòng Cơ sở -> "HÀNG HÓA DỊCH VỤ"). */
#page-assets .asset-block-header.selected {
  outline: 1px solid var(--blue);
}
/* ✅ MỚI (03/09/2026, theo yêu cầu anh Phong — "cho khi rê chuột có khung bao giống kiểu ở
   danh mục bảng giá CSKD"): rê chuột qua dòng Tài sản -> nổi khung bao xanh (giống hệt
   ".price-bu-row.editing" ở Bảng giá CSKD — box-shadow inset 2px), báo hiệu bấm vào đây sẽ
   mở "THÔNG TIN QUẢN LÝ". */
/* ✅ SỬA (03/09/2026, theo yêu cầu anh Phong — "hiện dòng tài sản chỉ rê chuột vào được 1
   lần - sau khi click vào thì không rê chuột vào được nữa"): BỎ ":not(.selected)" — trước
   đây hover chỉ hiện khi khối CHƯA được chọn, nên bấm chọn 1 lần xong thì rê chuột lại
   không còn thấy khung bao nổi lên nữa (do khối đã có class "selected"). Giờ hover LUÔN
   hiện khung bao, kể cả khi khối đang được chọn sẵn. */
#page-assets .asset-block-header:hover {
  box-shadow: inset 0 0 0 2px var(--blue);
  cursor: pointer;
}

#page-assets .asset-fac-row {
  display: grid;
  /* ✅ MỚI (31/08/2026, theo yêu cầu anh Phong): thêm cột "Tính chất gốc" (113px, ngay
     trước "Tính chất") — thu hẹp bớt 3 cột Số lượng/SL Thêm/Ext để lấy chỗ. */
  grid-template-columns: 36px 1.4fr 113px 113px 1fr 65px 65px 50px 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;
}
/* ✅ SỬA (03/09/2026, theo yêu cầu anh Phong, lần 2 — "Dòng cơ sở: có 1 mảng HH.dịch vụ -
   độc lập giữa các cơ sở với nhau và độc lập với Tài sản", ví dụ "1 khách sạn có 1 kho
   riêng - các phòng của khách sạn để hh vào đó là 1 kho riêng"): dòng Cơ sở LẠI có "chọn"
   được (mở kho HH RIÊNG của đúng dòng đó bên phải) — khôi phục khung bao chọn (.selected)
   + hiệu ứng hover, y hệt dòng Tài sản ở trên (KHÔNG dùng ":not(.selected)" vì lý do tương
   tự — hover phải LUÔN hiện, kể cả khi dòng đã được chọn sẵn). */
#page-assets .asset-fac-row.selected {
  outline: 1px solid var(--blue);
}
#page-assets .asset-fac-row:not(.header):hover {
  box-shadow: inset 0 0 0 2px var(--blue);
  cursor: pointer;
}
#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; }

/* ✅ MỚI (theo yêu cầu anh — 09/08/2026): 2 dòng cố định "Đơn vị"/"Quản lý" — nền hơi
   ngả xám để phân biệt với các dòng "Nội dung/Giá trị" gõ tay tự do bên dưới; ô "Nội
   dung" của 2 dòng này chỉ là NHÃN cố định (readonly+disabled), không sửa được. */
#page-assets .asset-info-row-fixed { background: #f8fafc; }
#page-assets .asset-info-row-fixed .asset-info-noidung {
  background: #f1f5f9;
  color: #334155;
  font-weight: 600;
  cursor: default;
}

/* ✅ MỚI (02/09/2026, theo yêu cầu anh Phong): mảng "HÀNG HÓA DỊCH VỤ" — nằm ngay dưới
   "THÔNG TIN QUẢN LÝ", cùng khung .asset-right-panel — style lặp lại y hệt
   .asset-right-title/.asset-info-row ở trên cho đồng bộ giao diện. */
#page-assets .asset-hh-title {
  font-weight: 700;
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #1e293b;
}
#page-assets .asset-hh-title .btn { width: 32px; height: 27px; padding: 0; }

#page-assets .asset-hh-row {
  display: grid;
  /* ✅ SỬA (02/09/2026, theo yêu cầu anh Phong): thêm cột "Phí" (46px, tích chọn) — nằm
     giữa "S.Lượng" và nút Xóa. */
  grid-template-columns: 32px 1fr 100px 46px 32px;
  gap: 6px;
  align-items: center;
  padding: 3px 0;
  border-bottom: 1px solid #eef1f5;
}
#page-assets .asset-hh-row.header {
  font-weight: 600;
  color: #334155;
  border-bottom: 1px solid #cbd5e1;
  font-size: 12px;
}
#page-assets .asset-hh-row input {
  width: 100%;
  height: 27px;
  box-sizing: border-box;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 13px;
}
/* ✅ MỚI (02/09/2026, theo yêu cầu anh Phong): ô "Tên HH.Dịch vụ" đổi readonly, chỉ chọn
   qua modal "CHỌN HH.DỊCH VỤ" (bấm/click vào ô) — đổi con trỏ thành pointer để gợi ý bấm
   được, nền hơi ngả xám giống các ô readonly khác trong trang (VD "Thuộc CSKD"). */
#page-assets .asset-hh-name-input {
  cursor: pointer;
  background: #f8fafc;
}
#page-assets .asset-hh-col-phi { display: flex; justify-content: center; align-items: center; text-align: center; }
#page-assets .asset-hh-col-phi input[type="checkbox"] { width: auto; height: auto; cursor: pointer; }
#page-assets .asset-hh-row .asset-hh-del-btn { width: 100%; height: 27px; padding: 0; font-size: 12px; }

/* Khung gõ-để-tìm của ô "Giá trị" ở 2 dòng "Đơn vị"/"Quản lý" — nguồn Danh mục Khách
   hàng (Loại "Mua"/"Mua & Bán"), y hệt kiểu ".fac-prop-ac"/".fac-prop-acbox" đang dùng
   cho ô "Tính chất". */
#page-assets .asset-mgr-ac { position: relative; }
#page-assets .asset-mgr-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;
}

/* ✅ MỚI (30/08/2026, theo yêu cầu anh Phong): hộp chọn NHIỀU CSKD (checkbox) của dòng
   "Thuộc CSKD" — dùng lại khung ".asset-mgr-acbox" ở trên (định vị/viền/đổ bóng), chỉ
   thêm style riêng cho từng dòng checkbox bên trong. */
#page-assets .asset-cskd-link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
}
#page-assets .asset-cskd-link-item:hover { background: #f5f7fb; }
#page-assets .asset-cskd-link-item input[type="checkbox"] { margin: 0; cursor: pointer; }

#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; }
/* ✅ MỚI (24/08/2026, theo yêu cầu anh Phong): nút "Làm mới" CHUYỂN lên đúng dòng tiêu đề
   XẾP DỊCH VỤ, nằm ở cột thứ 3 của lưới .card-header (1fr auto 1fr), đẩy sát góc phải bằng
   justify-self: end — LUÔN hiển thị (không còn ẩn/hiện theo đã-lưu-hay-chưa như trước). */
#page-xep-dich-vu .xdv-header-refresh-btn { grid-column: 3; justify-self: end; height: 24px; padding: 0 10px; }

#page-xep-dich-vu .xdv-main-layout {
  display: grid;
  /* ✅ SỬA (theo yêu cầu anh): thu hẹp mảng phải (Gán Tài sản) còn 35% bề rộng, mảng
     trái (bảng Xếp dịch vụ) lấy phần còn lại 65% — trước đây tỉ lệ ~53.5% / 46.5%. */
  grid-template-columns: 65% 35%;
  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;
  /* ✅ SỬA (theo báo lỗi anh): CSS Grid mặc định không cho 1 ô lưới co lại nhỏ hơn kích
     thước "tự nhiên" của nội dung bên trong nó (min-width: auto ngầm định) — nên khi bảng
     Xếp dịch vụ phình rộng ra (do sinh nhiều cột Địa điểm), cả khung .xdv-left-panel bị
     phình theo, ĐẨY mảng "Gán Tài sản" bên phải ra khỏi màn hình luôn, thay vì để bảng tự
     cuộn ngang bên trong khung của nó. min-width: 0 buộc khung tôn trọng đúng tỉ lệ cột
     1.15fr/1fr đã khai báo, nhường việc cuộn ngang cho .xdv-table-wrap (đã có sẵn
     overflow: auto) xử lý — mảng phải luôn hiện đủ, không bị đẩy mất nữa. */
  min-width: 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;
}
/* ✅ MỚI (theo yêu cầu anh — 09/08/2026): khoá CẢ mảng phải ("Gán Tài sản") y hệt mảng
   trái khi CHƯA bấm "SỬA" — trước đây chỉ mảng trái bị khoá, mảng phải vẫn bấm "Chọn Tên
   Tài sản" được bình thường dù chưa ở chế độ sửa. */
#page-xep-dich-vu .xdv-right-panel.xdv-readonly {
  opacity: .6;
  pointer-events: none;
  user-select: none;
}
/* ❌ BỎ (24/08/2026, theo yêu cầu anh Phong): nút "Làm mới" đã CHUYỂN ra khỏi
   .xdv-left-panel (lên dòng tiêu đề, ngoài mọi khung bị khoá bởi chế độ SỬA/xem), nên rule
   pointer-events:auto riêng cho nó bên trong .xdv-left-panel.xdv-readonly không còn cần
   thiết nữa — bỏ hẳn, chỉ còn lại đoạn comment giải thích để tra cứu về sau. */

#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-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; }
/* ✅ MỚI (theo yêu cầu anh): tô màu tên CSKD trong dropdown "Chọn CSKD" — XANH = đã xếp
   Tài sản HẾT toàn bộ khách của CSKD đó trong ngày đang chọn, VÀNG = còn khách chưa xếp
   hết (xem renderCskdOptions()/xdvFetchCskdStatusForDate() ở app-van-hanh.js). */
#page-xep-dich-vu .xdv-ac-item .xdv-cskd-full { color: #15803d; font-weight: 600; }
#page-xep-dich-vu .xdv-ac-item .xdv-cskd-partial { color: #b45309; font-weight: 600; }
#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. */
/* ✅ SỬA (theo yêu cầu anh): mở rộng modal này ra gần FULL màn hình theo CHIỀU NGANG
   (trước đây bị giới hạn max-width: 1040px chung với .modal-xl) — riêng modal này cần
   rộng để hiện đủ 5 Tài sản kèm kết cấu Cơ sở mỗi hàng.
   ⚠️ ĐÃ SỬA LẠI (che mất nút "Chọn"): bản trước ép cứng height + display:flex trên chính
   .modal-dialog làm hỏng bố cục (header bị đẩy mất). Giờ CHỈ đổi WIDTH, còn chiều cao vẫn
   để .modal-body tự giới hạn + cuộn riêng (max-height/overflow) — ĐÚNG cách các modal to
   khác trong hệ thống đang làm (VD .biz-xn-modal-dialog), đã test ổn định. */
/* ✅ SỬA LẠI (08/08/2026, theo báo lỗi anh — "xếp khách vào chiều cao bảng giãn lên trên
   che mất nút chọn"): bản trước CHỈ giới hạn ".modal-body" (max-height: 85vh) mà KHÔNG
   giới hạn chính ".modal-dialog" — khi cộng thêm chiều cao header (~50px) + padding của
   dialog, TỔNG chiều cao dễ vượt quá 100vh dù modal-body mới chạm 85vh. Modal cha
   (".modal") canh giữa THEO CHIỀU DỌC bằng flex "align-items:center" — hộp thoại cao hơn
   màn hình bị đẩy TRÀN ĐỀU cả 2 phía, phần header phía TRÊN (chứa nút "Chọn") bị đẩy lên
   trên mép màn hình, khuất hẳn không thấy. Giờ ép ĐÚNG ".modal-dialog" (hộp thoại) không
   bao giờ vượt quá 90vh + chia flex-column: header khoá cứng "flex-shrink:0" (luôn đứng
   yên, luôn thấy được), chỉ ".modal-body" (lưới Tài sản) giãn nở chiếm phần còn lại và tự
   cuộn riêng — có thanh cuộn DỌC thật để kéo lên/kéo xuống như anh yêu cầu. */
/* ✅ SỬA LẠI (09/08/2026, theo yêu cầu anh — "màn hình Chọn tài sản cần nhìn RỘNG NHẤT,
   mở rộng cả ngang dọc, phủ kín cả thanh menu"): bỏ hẳn kiểu neo dưới thanh menu (padding-
   top + max-height co lại) ở trên — giờ modal này chiếm TRỌN VẸN màn hình (100vw x 100vh),
   không chừa khoảng trống nào, kể cả đè lên trên thanh menu cố định (.topbar, z-index:2000)
   — nâng z-index của modal này lên 2100 (cao hơn z-index:2000 của .topbar) để làm được
   việc đó, đồng thời bỏ luôn border-radius/margin cho khít đúng 4 cạnh màn hình. */
#asg-asset-picker-modal {
  align-items: stretch;
  justify-content: stretch;
  padding-top: 0;
  z-index: 2100; /* cao hơn .topbar (2000) -> phủ kín được cả thanh menu */
  box-sizing: border-box;
}
#asg-asset-picker-modal .modal-dialog {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  display: flex;
  flex-direction: column;
}
#asg-asset-picker-modal .asg-picker-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
#asg-asset-picker-modal .asg-picker-title { font-weight: 700; font-size: 16px; color: #1e293b; }
/* ✅ MỚI (23/08/2026, theo yêu cầu anh Phong): hiện "Ngày chọn xếp" (đúng ngày đang lọc ở
   ô #xdv-date-input bên mảng trái trang Xếp dịch vụ) ngay bên phải tiêu đề "BẢNG TÀI
   SẢN" — gom chung 1 khối để 2 nút "Lấy mẫu"/"Chọn" ở bên phải không bị đẩy lệch (xem
   asgRenderAssetPickerGrid() ở app-van-hanh.js, nơi gán lại nội dung badge này). */
#asg-asset-picker-modal .asg-picker-title-wrap { display: flex; align-items: baseline; gap: 10px; }
#asg-asset-picker-modal .asg-picker-date-badge {
  font-size: 13px;
  font-weight: 600;
  color: #1d4ed8;
  background: #eef4ff;
  border: 1px solid #dbe6fb;
  border-radius: 6px;
  padding: 3px 10px;
}
#asg-asset-picker-modal .asg-picker-date-badge:empty { display: none; }
#asg-asset-picker-modal .asg-picker-actions { display: flex; gap: 8px; }
/* ✅ SỬA (theo anh — bỏ bớt 1 trong 2 thanh cuộn ngang): trước đây modal-body không khóa
   overflow-x, nên khi mỗi ô ".asg-pick-cell" được nới rộng thêm (2cm/ô) làm hàng
   ".asg-pick-row" rộng hơn khung, modal-body TỰ sinh thêm 1 thanh cuộn ngang của riêng nó
   (thanh dưới cùng) — CHỒNG với thanh cuộn ngang vốn có của từng hàng ".asg-pick-row"
   (thanh phía trên). Giờ khóa overflow-x:hidden ở modal-body, CHỈ còn đúng 1 thanh cuộn
   ngang duy nhất do ".asg-pick-row" xử lý (đúng ý ban đầu). */
#asg-asset-picker-modal .modal-body { padding: 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }

/* ✅ SỬA (theo yêu cầu anh — hiện đủ kết cấu Cơ sở như mảng phải, 5 Tài sản/hàng, Tài sản
   nào có NHIỀU Lịch trình thì sinh thêm thẻ NẰM SÁT BÊN PHẢI, đẩy hàng đó rộng ra và tự
   cuộn ngang riêng): bỏ CSS Grid cũ (chia đều 4 cột, tự xuống hàng) — giờ mỗi HÀNG
   (.asg-pick-row) là 1 hàng flex KHÔNG xuống dòng, tự cuộn ngang khi rộng hơn khung; JS
   (asgRenderAssetPickerGrid) tự chia đúng 5 Tài sản/hàng, hàng nào có Tài sản bị tách
   nhiều thẻ thì hàng đó rộng hơn — không ảnh hưởng các hàng khác. */
#asg-picker-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.asg-pick-row {
  display: flex;
  /* ✅ SỬA (23/08/2026, theo báo lỗi anh Phong — "Chiều cao của các Tài sản ko bị ảnh
     hưởng nhau, hiện Limousine 9 chỗ đang bị giãn theo Dragon Legend 1 và 2"): mặc định
     flex align-items là "stretch" -> MỌI ô/cột trong 1 hàng (.asg-pick-cell/
     .asg-pick-pair-col) tự bị kéo cao BẰNG ô cao nhất trong hàng đó (dù nội dung ngắn),
     y hệt lỗi trong ảnh. Đổi sang "flex-start" để mỗi ô/cột tự cao đúng theo nội dung
     riêng của nó, không ảnh hưởng lẫn nhau nữa. */
  align-items: flex-start;
  /* ✅ SỬA (29/08/2026, đợt 3, theo yêu cầu anh Phong — "khoảng cách giữa 2 cột đang cách xa
     nhau, đưa sát lại"): thu hẹp khoảng cách giữa các cột (10px -> 4px) — nhớ đổi ĐỒNG BỘ
     hằng số "4" (số gap giữa 5 Ô/hàng) trong "--asg-slot-w" ngay dưới (4 gap × 4px = 16px)
     và trong JS (asgRenderAssetPickerGrid()/spanStyle()) nếu đổi lại số này lần sau. */
  gap: 4px;
  overflow-x: auto;
  padding-bottom: 4px; /* chừa chỗ cho thanh cuộn ngang, đỡ đè lên nội dung */
  /* ✅ MỚI (29/08/2026): bề rộng "1 Ô Tài sản chuẩn" — khai báo 1 LẦN DUY NHẤT ở đây thành
     biến CSS, dùng lại (var(--asg-slot-w)) ở MỌI cấp lồng nhau bên dưới (dù ".asg-pick-cell"
     nằm trực tiếp trong hàng, hay lồng sâu thêm 1-2 cấp qua ".asg-pick-pair-col"/
     ".asg-pick-unit-row") — biến CSS kế thừa xuống con cháu KHÔNG đổi giá trị theo cấp lồng
     như "%" (dùng "%" ở cấp lồng sâu hơn sẽ tính theo bề rộng phần tử CHA GẦN NHẤT, không
     còn là bề rộng cả hàng nữa, sai kích thước). Nhờ vậy 1 "Ô Tài sản" LUÔN đúng 1 kích cỡ
     duy nhất dù đứng ở đâu trong lưới. Giá trị CHUẨN THẬT SỰ do JS đo bằng px và ghi đè lại
     ngay khi vẽ lưới (xem asgRenderAssetPickerGrid()) — công thức "calc()" ở đây chỉ là dự
     phòng cho khoảnh khắc trước khi JS kịp đo (hiếm khi hiện ra vì cùng 1 lượt đồng bộ).
  */
  --asg-slot-w: calc((100% - 16px) / 5);
}
/* 5 Tài sản vừa đúng 1 hàng — mỗi ô chiếm khoảng 1/5 bề rộng, KHÔNG co lại nhỏ hơn (để
   khi 1 Tài sản sinh thêm thẻ, hàng tự rộng ra thay vì ép các thẻ co nhỏ lại). */
#asg-picker-grid .asg-pick-cell {
  flex: 0 0 var(--asg-slot-w);
  min-height: 128px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff9e6;
  padding: 10px 12px;
  cursor: pointer;
  transition: outline-color .1s;
  box-sizing: border-box;
  position: relative; /* ✅ MỚI: làm điểm neo cho nút "X" đỏ xóa Tài sản Lấy mẫu (góc phải) */
}
/* ✅ MỚI (theo yêu cầu anh): Tài sản "nhỏ" (tối đa 2 Cơ sở) ghép chung 1 cột với Tài sản
   nhỏ liền kề, xếp CHỒNG trên-dưới thay vì mỗi Tài sản chiếm nguyên 1 cột riêng (đỡ thừa
   khoảng trống, xem asgGroupSmallAssetsIntoColumns() ở app-van-hanh.js). Cột ghép mặc định
   chiếm ĐÚNG bề rộng 1 "Ô Tài sản" bình thường — riêng cột nào có (các) Ô bị giãn rộng hơn
   (nhiều Lịch trình/bản sao cạnh nhau, đợt 29/08 bên dưới) thì JS tự nới "flex-basis" của
   CHÍNH cột đó qua "style" nội tuyến (spanStyle()), CSS ở đây chỉ là bề rộng MẶC ĐỊNH.
   Bên trong cột: các Ô xếp dọc, mỗi Ô cao tự nhiên theo nội dung. */
.asg-pick-pair-col {
  flex: 0 0 var(--asg-slot-w);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}
/* ✅ MỚI (29/08/2026, theo yêu cầu anh Phong — "Tài sản được xếp 2 Lịch trình trở lên thì
   xếp ngay cạnh nhau trong CÙNG 1 khung Ô, giãn cả Ô/cột đó ra — CÒN chính Tài sản KHÔNG
   giãn ra theo, giữ nguyên kích cỡ gốc"): 1 "Ô" (".asg-pick-unit-row") có thể chứa NHIỀU
   ".asg-pick-cell" cạnh nhau theo chiều ngang (nhiều Lịch trình/bản sao của CÙNG 1 Tài sản
   đang có khách) — xem asgGroupSmallAssetsIntoColumns(). Bề rộng CẢ khung Ô (hoặc cả cột
   ghép ".asg-pick-pair-col" chứa nó, khi Ô này ghép chung cột với Ô khác) do JS tính sẵn
   qua "style" nội tuyến (spanStyle()) — CHỈ khung Ô/cột đó rộng ra, còn TỪNG ".asg-pick-cell"
   bên trong LUÔN giữ đúng 1 bề rộng chuẩn (var(--asg-slot-w), KHÔNG co giãn — "flex: 0 0")
   dù đứng 1 mình hay cạnh (các) Tài sản khác trong CÙNG 1 Ô — Ô nào chỉ có 1 Tài sản mà đứng
   trong 1 cột đã bị nới rộng (vì có Ô khác cùng cột nhiều Tài sản hơn) thì ĐƠN GIẢN dư ra
   khoảng trắng bên phải, KHÔNG kéo giãn Tài sản đó ra để lấp đầy. */
.asg-pick-unit-row {
  display: flex;
  gap: 4px;
  box-sizing: border-box;
}
#asg-picker-grid .asg-pick-unit-row .asg-pick-cell {
  flex: 0 0 var(--asg-slot-w);
  width: auto;
}
/* ✅ MỚI (theo yêu cầu anh — 09/08/2026): nút "X" đỏ góc phải — CHỈ hiện ở Tài sản "Lấy
   mẫu" (bản sao), xóa hẳn Tài sản đó (kèm mọi khách đã xếp vào nó). */
#asg-picker-grid .asg-pick-cell-del-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 20px; height: 20px;
  border: 1px solid var(--danger);
  border-radius: 50%;
  background: #fff;
  color: var(--danger);
  font-size: 12px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 2;
}
#asg-picker-grid .asg-pick-cell-del-btn:hover { background: var(--danger); color: #fff; }
/* ✅ MỚI (23/08/2026, theo yêu cầu anh Phong — thêm "Số hiệu" + "Chọn Quản lý" ngay trên
   đầu mỗi thẻ Tài sản ở "BẢNG TÀI SẢN"): hàng đầu thẻ gồm Tên Tài sản (trái) + Số hiệu
   (phải) nằm chung 1 hàng ngang, thay cho tên căn giữa 1 mình như trước. */
#asg-picker-grid .asg-pick-cell-header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin-bottom: 4px;
}
/* ✅ MỚI (29/08/2026, theo yêu cầu anh Phong — badge TỔNG "Tên Tài sản : N" chèn NGAY SAU
   Tên, TRƯỚC ô Số hiệu): gói Tên + badge chung 1 nhóm — nhóm này (không phải riêng Tên)
   mới là phần "flex: 1 1 auto" co giãn để đẩy ô Số hiệu về sát bên phải, nhờ vậy badge nằm
   NGAY SÁT Tên (không bị đẩy dạt hẳn sang phải, cạnh ô Số hiệu) — xem
   asgRenderAssetPickerCellsHtml() ở app-van-hanh.js. */
#asg-picker-grid .asg-pick-cell-name-wrap {
  display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0;
}
/* ✅ SỬA (23/08/2026, theo yêu cầu anh Phong — "cho tên tài sản = cỡ chữ 13"): cỡ chữ Tên
   Tài sản trước đây không đặt riêng (ăn theo mặc định to hơn) — giờ cố định 13px. */
#asg-picker-grid .asg-pick-cell-name {
  font-weight: 700; text-align: left; color: #1e293b; flex: 0 1 auto; min-width: 0;
  overflow-wrap: break-word; font-size: 13px;
}
/* Badge TỔNG số khách — riêng trong "BẢNG TÀI SẢN" giữ nguyên hàng, không co giãn. */
#asg-picker-grid .asg-pick-cell-total-badge { flex: 0 0 auto; white-space: nowrap; }
/* Số hiệu ĐÃ CÓ (Danh mục Tài sản / đã từng gõ) — chỉ đọc, hiện như 1 nhãn nhỏ. */
#asg-picker-grid .asg-pick-cell-sohieu-ro {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #7c3aed;
  background: #ede9fe; border-radius: 4px; padding: 2px 8px; white-space: nowrap;
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; cursor: default;
}
/* Số hiệu CHƯA CÓ — cho gõ ngay tại đây. */
#asg-picker-grid .asg-pick-cell-sohieu-input {
  flex: 0 0 auto; width: 76px; font-size: 12px; padding: 3px 6px;
  border: 1px solid #cbd5e1; border-radius: 4px; text-align: center;
}
#asg-picker-grid .asg-pick-cell-sohieu-input:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
/* "Chọn Quản lý" — riêng cho từng thẻ Tài sản, nằm ngay dưới hàng tên/Số hiệu, trên các
   Cơ sở (cream) bên dưới. Dùng lại đúng khung gợi ý ".booking-addon-acbox" nên chỉ cần
   chỉnh khoảng cách/độ rộng cho vừa trong 1 ô Tài sản (hẹp hơn nhiều so với ô Booking). */
#asg-picker-grid .asg-pick-cell-manager-row {
  margin-bottom: 6px;
}
#asg-picker-grid .asg-pick-cell-manager-input {
  width: 100%; box-sizing: border-box; font-size: 12px; padding: 4px 8px;
  border: 1px solid #cbd5e1; border-radius: 4px; background: #fff;
}
#asg-picker-grid .asg-pick-cell-manager-input:focus {
  outline: none; border-color: #2563eb; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
#asg-picker-grid .asg-pick-cell-manager-acbox {
  max-height: 160px; overflow-y: auto; z-index: 5;
}
/* ✅ MỚI: nhãn Lịch trình riêng của thẻ (khi 1 Tài sản bị tách nhiều thẻ theo Lịch
   trình) — hiện ngay dưới tên Tài sản để phân biệt thẻ nào ứng với Lịch trình nào. */
#asg-picker-grid .asg-pick-cell-sched-label {
  text-align: center; font-size: 12px; font-weight: 600; color: #0f766e;
  background: #ccfbf1; border-radius: 4px; padding: 1px 6px; margin: 0 auto 6px; width: fit-content;
}
#asg-picker-grid .asg-pick-cell-empty {
  font-size: 12px; text-align: center; color: #94a3b8; font-style: italic;
}
/* ✅ SỬA (theo yêu cầu anh — thẻ Cơ sở trong modal phải GIỐNG HỆT thẻ ở mảng phải): bỏ
   hẳn CSS riêng tự đặt trước đây (asg-pick-fac-row/main/guest) — giờ JS dùng LUÔN đúng
   class ".asg-fac-card/.asg-fac-card-body/.asg-fac-assigned-line/..." của mảng phải (xem
   asgRenderPickerFacilityRowHtml() ở app-van-hanh.js), tự động thừa hưởng màu nền trắng/
   viền xám/chữ xanh — không cần định nghĩa lại màu sắc ở đây nữa. ".asg-pick-cell-facs"
   chỉ còn tác dụng giới hạn/cuộn RIÊNG bên trong modal nếu cần (hiện để mặc định, không
   giới hạn cao thêm — cả ô ".asg-pick-cell" tự cao theo nội dung, khớp yêu cầu "không cắt
   bớt dòng nào" đã áp dụng nhất quán từ mảng phải). */
#asg-picker-grid .asg-pick-cell-facs {
  display: flex; flex-direction: column; gap: 6px;
}
/* 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;
}
/* ✅ MỚI (theo yêu cầu anh — nút "Xếp" bên Cung ứng): chế độ modal đang mở để GÁN 1
   HH.Dịch vụ vào Tài sản (khác chế độ chọn nhiều Tài sản bình thường):
   - Rê chuột vào 1 Tài sản -> hiện bảng cảnh báo nhỏ phía trên (yêu cầu #3), thuần CSS
     (::after), không cần thêm JS riêng cho phần hover.
   - Ẩn 2 nút "Lấy mẫu"/"Chọn" ở góc (không dùng trong chế độ này — xác nhận ngay khi bấm
     vào Tài sản, xem asgHandleCungUngPickerClick()). */
#asg-asset-picker-modal.asg-picker-cungung-mode #asg-picker-grid .asg-pick-cell {
  position: relative; cursor: pointer;
}
#asg-asset-picker-modal.asg-picker-cungung-mode #asg-picker-grid .asg-pick-cell:hover::after {
  content: "Bạn chọn xếp khách vào tài sản này";
  position: absolute; top: -32px; left: 50%; transform: translateX(-50%);
  background: #1e293b; color: #fff; font-size: 12px; padding: 5px 10px;
  border-radius: 4px; white-space: nowrap; z-index: 20;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}
#asg-asset-picker-modal.asg-picker-cungung-mode #asg-picker-grid .asg-pick-cell:hover {
  outline: 2px solid var(--brand-accent); outline-offset: -2px;
}
/* Thẻ khoản Cung ứng — tái dùng ".asg-fac-card" nhưng thêm nút X nằm gọn bên phải,
   không kéo giãn theo chiều cao card. */
/* ✅ SỬA (theo yêu cầu anh — bỏ nhãn "Cung ứng - Ngày" riêng, gộp vào dòng khách đã xếp
   bình thường): dòng 1 của khoản Cung ứng cần chỗ cho nút "X" nhỏ bên phải -> tự thêm 1
   hàng flex ngang cho ĐÚNG dòng đó (không ảnh hưởng dòng khách xếp phòng thật khác). */
#page-xep-dich-vu .asg-cungung-line {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
#page-xep-dich-vu .asg-cungung-del-btn { flex: none; }


#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; }
/* ✅ MỚI (17/08/2026, theo yêu cầu anh): dòng nhỏ hiện Lịch trình ĐÃ XẾP ngay dưới mỗi
   Ngày ở cột "Từ ngày, giờ"/"Đến ngày, giờ" (VD Ngày 19/08 hiện "HN-HL" ngay dưới) — chữ
   nhỏ hơn, không in đậm, cho phép xuống dòng riêng dù ô cha đang "nowrap". */
#page-xep-dich-vu .xdv-table .xdv-ngay-schedule-sub {
  white-space: normal; font-weight: 600; font-size: 12px; color: var(--text, #1f2937);
  margin-top: 2px;
}
#page-xep-dich-vu .xdv-table .col-diadiem {
  min-width: 5cm; max-width: 5cm; color: var(--text);
  font-weight: 400; white-space: normal; word-break: break-word;
  vertical-align: top; padding-top: 6px;
}
/* ✅ MỚI (theo yêu cầu anh): ô Điểm đón/Điểm trả giờ CLICK được để mở form sửa ngay tại
   trang Xếp dịch vụ (xem xdvOpenLocationEditModal() ở app-van-hanh.js). */
#page-xep-dich-vu .xdv-table .xdv-loc-cell { cursor: pointer; }
#page-xep-dich-vu .xdv-table .xdv-loc-cell:hover { background: #eff6ff; }
#page-xep-dich-vu .xdv-left-panel.xdv-readonly .xdv-loc-cell { cursor: default; }
#page-xep-dich-vu .xdv-left-panel.xdv-readonly .xdv-loc-cell:hover { background: transparent; }
/* ✅ MỚI (18/08/2026, theo yêu cầu anh): ô "Diễn giải" giờ CLICK được để mở form sửa ngay
   tại trang Xếp dịch vụ, y hệt ô Điểm đón/Điểm trả (xem xdvOpenNoteEditModal() ở
   app-van-hanh.js). */
#page-xep-dich-vu .xdv-table .xdv-note-cell { cursor: pointer; }
#page-xep-dich-vu .xdv-table .xdv-note-cell:hover { background: #eff6ff; }
#page-xep-dich-vu .xdv-left-panel.xdv-readonly .xdv-note-cell { cursor: default; }
#page-xep-dich-vu .xdv-left-panel.xdv-readonly .xdv-note-cell:hover { background: transparent; }
#page-xep-dich-vu .xdv-table .col-diengiai {
  min-width: 140px; max-width: 220px; color: #64748b;
  font-weight: 400; white-space: normal; word-break: break-word;
  vertical-align: top; padding-top: 6px;
}
/* ✅ MỚI (theo yêu cầu anh): thay cho cột "Đã xếp" riêng (đã bỏ, tiết kiệm 110px) —
   trạng thái "đã xếp" giờ hiện thành 1 nhãn nhỏ màu xanh ngay cạnh tên khách. */
#page-xep-dich-vu .xdv-table .xdv-daxep-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #15803d;
  background: #dcfce7;
  white-space: nowrap;
}
/* ✅ 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 (09/09/2026, theo yêu cầu anh Phong): bấm THẲNG vào dòng "Tên CSKD/Tên cơ sở -
   Lịch trình" (Cấp 3) -> chọn/bỏ chọn 1 LƯỢT CẢ NHÓM khách thuộc đúng Cơ sở đó, khỏi phải
   click từng dòng khách 1 (tiện cho nhóm đông khách) — xem xử lý click ở app-van-hanh.js. */
#page-xep-dich-vu .xdv-left-panel:not(.xdv-readonly) .xdv-facility-row { cursor: pointer; }
#page-xep-dich-vu .xdv-left-panel:not(.xdv-readonly) .xdv-facility-row:hover td { background: #f1f5f9; }


/* ✅ 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; }

/* ✅ SỬA (theo báo lỗi anh — 08/08/2026): TRƯỚC ĐÂY panel này VÀ ".asg-assets-wrap" bên
   trong nó (dòng dưới) CÙNG "overflow: auto" — 2 khung cuộn lồng nhau khiến trình duyệt
   đôi khi cuộn NHẦM khung NGOÀI (kéo mất luôn cả ".asg-filters" — "Chọn Tên Tài sản" —
   lên trên, ra khỏi màn hình, không kéo lại xuống được vì khung ngoài không có thanh
   cuộn hiện rõ). Giờ khung ngoài KHÔNG tự cuộn nữa — chỉ đúng 1 khung cuộn DUY NHẤT là
   ".asg-assets-wrap" (khung chứa các card Tài sản) — ".asg-filters" luôn đứng yên, luôn
   thấy được, giống hệt cách ".xdv-left-panel" đang làm (chỉ ".xdv-table-wrap" cuộn, phần
   lọc phía trên luôn cố định). */
/* ✅ SỬA LẦN 2 (theo anh — 08/08/2026, đúng như anh đoán): lần sửa trước em tắt cuộn ở
   khung NGOÀI (".xdv-right-panel") để tránh cuộn chồng — nhưng khi khách xếp vào nhiều,
   ".asg-filters" (không có "flex-shrink: 0") bị CO NHỎ LẠI (gần như mất hẳn, chỉ còn 1
   sợi mảnh) để nhường chỗ cho khung card bên dưới, vì khung ngoài "overflow: hidden"
   không cho phép tràn ra ngoài — ĐÚNG như anh mô tả "chiều cao bị dồn lên, che mất nút
   chọn", KHÔNG có thanh cuộn nào để kéo lại. Giờ làm theo đúng ý anh — thêm hẳn 1 thanh
   cuộn DỌC cho khung ngoài này (overflow-y: auto), ĐỔI LẠI khung card bên trong (".asg-
   assets-wrap", xem bên dưới) không tự cuộn riêng nữa — chỉ còn ĐÚNG 1 thanh cuộn duy
   nhất cho toàn bộ khung phải. ".asg-filters" được khoá cứng "flex-shrink: 0" nên KHÔNG
   BAO GIỜ bị co nhỏ mất nữa, dù khách xếp bao nhiêu đi nữa — tràn tới đâu, cuộn tới đó. */
#page-xep-dich-vu .xdv-right-panel { min-height: 200px; overflow-y: auto; overflow-x: hidden; }
#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;
  /* ✅ MỚI (theo anh — 08/08/2026): khoá cứng, KHÔNG BAO GIỜ cho phép khối này bị co nhỏ
     lại (mặc định flexbox cho phép co — đây chính là nguyên nhân bị "ẩn mất" trước đó). */
  flex-shrink: 0;
}
#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; }
/* ✅ MỚI (theo yêu cầu anh): hàng chứa "Chọn Tên Tài sản" (thu ngắn lại) + "Chọn Quản
   lý" (mới) nằm CÙNG 1 HÀNG thay vì "Chọn Tên Tài sản" chiếm hết cả hàng như trước. */
#page-xep-dich-vu .asg-filter-row1 { display: flex; gap: 10px; }
#page-xep-dich-vu .asg-filter-row1 .asg-field { min-width: 0; }
#page-xep-dich-vu .asg-filter-row1 .asg-field-asset { flex: 1; }
#page-xep-dich-vu .asg-filter-row1 .asg-field-manager { flex: 1; }
#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-manager-input {
  height: 32px; border: 1px solid #cbd5e1; border-radius: 4px;
  padding: 2px 26px 2px 8px; font-size: 13px; box-sizing: border-box;
}
#page-xep-dich-vu #asg-schedule-input { cursor: pointer; }
/* ✅ SỬA (17/08/2026, theo yêu cầu anh): "Từ ngày giờ" vẫn CHỈ ĐỌC (tự nhận theo Lịch
   trình/Ngày đang chọn) -> giữ nền xám như cũ. "Đến ngày giờ" giờ CHO SỬA TAY được -> tách
   riêng, nền trắng + viền xanh nhạt khi focus để phân biệt rõ với ô chỉ đọc bên cạnh. */
#page-xep-dich-vu #asg-tungay-input { background: #f8fafc; color: #475569; }
#page-xep-dich-vu #asg-denngay-input { background: #fff; color: #0f172a; }
#page-xep-dich-vu #asg-denngay-input:focus { border-color: #93c5fd; outline: none; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }

/* ✅ SỬA (theo anh — 08/08/2026): trước đây khung này TỰ cuộn riêng (flex:1 + overflow:
   auto) — giờ bỏ tự cuộn riêng, để đúng 1 thanh cuộn DUY NHẤT ở khung ngoài (".xdv-right-
   panel", xem phía trên) xử lý, tránh 2 khung cuộn lồng nhau gây lỗi trước đó. */
#page-xep-dich-vu .asg-assets-wrap { }
#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: var(--blue); font-size: 13px;
  background: var(--blue-light); padding: 5px 8px; border-radius: 4px; margin: 10px 0 6px;
  display: flex; align-items: center; gap: 6px;
}
#page-xep-dich-vu .asg-asset-heading:first-child { margin-top: 0; }
/* ✅ MỚI (theo yêu cầu anh — 09/08/2026): ô Số hiệu SỬA ĐƯỢC ngay tại tiêu đề, CHỈ hiện
   với Tài sản BẢN SAO ("Lấy mẫu") — xem asgRenderCards()/asgIsCloneName() ở app-van-hanh.js. */
#page-xep-dich-vu .asg-asset-sohieu-sep { font-weight: 400; opacity: .7; }
#page-xep-dich-vu .asg-asset-sohieu-input {
  font-weight: 700; color: var(--blue); font-size: 13px;
  border: 1px solid #b9d4f5; border-radius: 4px; background: #fff;
  padding: 2px 6px; height: 24px; min-width: 90px;
}
#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. */
/* ✅ SỬA (theo yêu cầu anh): đổi từ xanh dương (#1a73e8) sang đúng màu xanh truyền
   thống của PM (--brand-accent, dùng chung toàn hệ thống — vd viền tab, nút chính). */
#page-xep-dich-vu .asg-fac-assigned-line {
  font-size: 13px; color: var(--brand-accent); font-weight: 400; word-break: break-word;
}
/* ✅ MỚI (31/08/2026, theo yêu cầu anh Phong — "nút X đỏ cho gán với đoàn khách, thay vì
   gán với Cơ sở hiện tại"): hàng chứa dòng "1. Tên đoàn..." + nút X RIÊNG của đoàn đó,
   nằm CÙNG 1 hàng ngang (nút X không còn dùng chung 1 cái duy nhất ở cuối thẻ nữa). */
#page-xep-dich-vu .asg-fac-assigned-row {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
}
#page-xep-dich-vu .asg-fac-assigned-row .asg-fac-assigned-line { flex: 1; min-width: 0; }
#page-xep-dich-vu .asg-fac-assigned-row .asg-fac-del-btn { flex: none; }
/* ✅ 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. */
/* ✅ SỬA (theo yêu cầu anh): đổi từ xanh dương (#5b8def) sang xanh truyền thống của PM,
   pha nhạt hơn dòng 1 bằng opacity thay vì 1 mã hex xanh dương riêng. */
#page-xep-dich-vu .asg-fac-assigned-source {
  font-size: 12px; color: var(--brand-accent); opacity: .75; font-weight: 400; word-break: break-word;
}
/* ✅ MỚI (theo yêu cầu anh): dòng "Điểm đón/Điểm trả N" hiện dưới mỗi đoàn trong thẻ Gán
   Tài sản — chữ nhỏ, màu xám trung tính (không phải xanh) để tách biệt rõ với 2 dòng
   thông tin đoàn khách phía trên. */
#page-xep-dich-vu .asg-fac-assigned-location {
  font-size: 11.5px; color: #64748b; 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; }
/* ✅ MỚI (29/08/2026, theo yêu cầu anh Phong — hiện "Đã xếp: N khách" cạnh "SL: x - y" ở
   cả mảng "Gán Tài sản" chính lẫn "BẢNG TÀI SẢN" xem trước): chữ xanh lá, đậm nhẹ để dễ
   phân biệt với "SL" (sức chứa, màu đen mặc định) ngay cạnh nó. */
#page-xep-dich-vu .asg-fac-daxep-count { color: #16a34a; font-weight: 600; }
#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: var(--blue); }

/* ========================================================================
   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;
  /* ✅ SỬA (24/08/2026, theo yêu cầu anh): thu hẹp RIÊNG lề phải xuống còn 4px (~1 ly,
     trước 8px ~2 ly) để khung "ÁP DỤNG CHO CƠ SỞ KINH DOANH & KHÁCH HÀNG" bên phải có
     thêm chỗ mở rộng sang phải, chỉ còn cách mép phải trang đúng 1 ly (không đụng lề
     trái, khung bên trái vẫn giữ nguyên vị trí cũ). */
  padding-right: 4px;
}

/* 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 {
  /* ✅ SỬA (24/08/2026, theo yêu cầu anh — "mở rộng khung bao ngoài sang bên phải cách
     lề 1 li"): (66%+2cm) + (33%-2cm) chỉ ra đúng 99% chiều rộng hàng — thừa lại ~1%
     "khoảng trống vô hình" phía bên phải khung này (trước cả phần lề trang phía trên) mà
     không hiển thị gì. Đổi lên 34%-2cm để khung bên phải CHIẾM HẾT phần thừa đó, áp sát
     luôn ra tới mép lề trang (lề phải trang đã thu hẹp còn 1 ly ở trên). */
  flex: 0 0 calc(34% - 2cm);
  max-width: calc(34% - 2cm);
}

/* ✅ MỚI (24/08/2026, theo yêu cầu anh — "khung bao bên trong sát khung bao bên ngoài
   cách 1 li"): khung "ÁP DỤNG CHO CƠ SỞ KINH DOANH & KHÁCH HÀNG" (khung bao NGOÀI, dùng
   chung class .card mặc định padding trái/phải 18px) thu hẹp RIÊNG padding trái/phải
   xuống còn 4px (~1 ly) để khung bao TRONG (bảng Giá CSKD/Khách hàng) áp sát khung bao
   ngoài hơn, nhường lại phần trống cho 2 cột "Giá mua"/"Giá" bên dưới (xem
   .price-bu-charter-cskd-row).*/
#page-price-bu-charter .price-bu-charter-right-card {
  padding-left: 4px;
  padding-right: 4px;
}

@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 130px 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),
.price-bu-charter-row-cont > div:nth-child(8) {
  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;
  /* ✅ SỬA (09/09/2026, theo yêu cầu anh Phong — "sửa cách chọn CSKD giống cách chọn Tính
     chất"): 220px KHÔNG đủ chỗ cho tên CSKD dài hơn (VD "Dragon Legend 01", "Limouzine
     01") — chữ bị vỡ xuống 2-3 dòng xấu (khác hẳn ô Tính chất, chữ ngắn nên vừa 220px,
     nhìn như 2 kiểu khác nhau dù dùng CHUNG đúng 1 khung .price-sched-ac). Nới lên 300px —
     áp dụng ĐỀU cho cả ".facility-property-ac" bên dưới để 2 ô nhìn NHẤT QUÁN với nhau. */
  width: 300px;
}
.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;
  /* ✅ SỬA (24/08/2026, theo yêu cầu anh): thêm cột "Giá mua" chen giữa Cơ sở kinh doanh
     và Giá (VND) — kích thước bằng đúng cột Giá (VND) nên 2 cột sau cùng đều 1fr.
     ⚠️ SỬA TIẾP (24/08/2026, theo yêu cầu anh — "diện tích trống mở ra chia đều cho 2
     cột giá mua và giá"): cột Tên đổi từ "2fr" (tỉ lệ, tự phình theo bề rộng khung) sang
     PX CỐ ĐỊNH — đủ rộng cho tên dài như "Nhà hàng Sen Á Đông" không bị tràn chữ — để
     phần diện tích mới có được (do mở khung bao ngoài + thu hẹp khung bao trong ở trên)
     KHÔNG bị cột Tên "ăn" mất theo tỉ lệ, mà dồn HẾT + CHIA ĐỀU cho đúng 2 cột Giá mua/
     Giá (vẫn "1fr 1fr" nên tự chia đều phần dư còn lại cho nhau). */
  grid-template-columns: 140px 1fr 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. */
/* ✅ SỬA (theo yêu cầu anh — 09/08/2026, giống hệt lỗi đã sửa ở modal "BẢNG TÀI SẢN":
   nút IN/LƯU/× bị thanh menu cố định (.topbar, position:fixed) đè lên/che khuất): modal
   này TRƯỚC ĐÂY căn GIỮA màn hình theo chiều dọc (".modal" mặc định align-items:center)
   — nội dung dài đẩy tràn lên cả 2 phía, đẩy hàng nút lên đè vào thanh menu. Giờ đổi
   sang neo CỐ ĐỊNH mép trên, đúng dưới thanh menu + 1cm, y hệt cách đã làm cho
   "#asg-asset-picker-modal" — không bao giờ trôi lên che thanh menu nữa. */
#bpt-modal {
  align-items: flex-start;
  padding-top: calc(var(--topbar-h, 96px) + 1cm);
  box-sizing: border-box;
}
#bpt-modal .modal-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h, 96px) - 1cm - 16px);
}
/* ✅ 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;
  /* ✅ MỚI (theo yêu cầu anh — cố định tiêu đề "BẢNG THANH TOÁN", không cho trôi lên khi
     cuộn nội dung dài bên trong modal): dính (sticky) ngay đỉnh khung cuộn riêng của modal
     (#bpt-modal-body, đã có overflow-y:auto) — nền trắng để nội dung cuộn phía dưới không
     hiện xuyên qua. */
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  padding: 10px 0 8px;
  border-bottom: 1px solid #e6eaf2;
}
.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 — 15/08/2026): ô nhập số tiền Phân bổ (P.Bổ) — Dragon Legen 01/
   Limouzine 01/HH.Dịch vụ (theo từng CSKD)... — căn lề PHẢI, giống chuẩn hiển thị tiền tệ
   (đúng như các ô số khác trong Bảng thanh toán, VD Nguyên tệ/T.Toán). */
.bpt-alloc-input { text-align: right; }
/* ✅ 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%; }
/* ✅ SỬA (theo yêu cầu anh — 15/08/2026): nút "P.Bổ" giữ NGUYÊN vị trí ô T.Toán (không
   chèn vào dòng flex nữa, xem bptPayCompactFieldsHtml) — thay vào đó neo bằng toạ độ
   tuyệt đối, THẲNG CỘT với nút "Thêm" (cùng cột 84px ngoài cùng bên phải mà ".bpt-tt-btn"/
   ".bpt-pay-grid" đang dùng — .bpt-pay-block-root làm mốc "position:relative", nút nổi
   lên trên, không đẩy nội dung khác lệch đi), ngang hàng dòng "Nguyên tệ/T.Toán" (dòng
   cuối cùng của khối Thanh toán gốc).
   ⚠️ SỬA LỖI (24/08/2026, theo báo lỗi anh — nút "P.Bổ" của khoản "Thêm" bị rớt xuống
   góc phải MÀN HÌNH thay vì nằm cạnh ô T.Toán): trước đây chỉ ".bpt-pay-block-root"
   (riêng khoản GỐC) có "position: relative" làm mốc — khoản "Thêm" chỉ có class
   ".bpt-pay-block" (không có "-root") nên KHÔNG có mốc relative nào ở gần, khiến
   ".bpt-phanbo-btn-wrap" (position:absolute) trồi lên neo theo mốc relative XA NHẤT tìm
   được phía trên (khung modal), rớt hẳn xuống góc dưới-phải màn hình. Đổi mốc sang TẤT
   CẢ ".bpt-pay-block" (gồm cả khoản gốc lẫn khoản "Thêm") để mỗi khối tự làm mốc riêng
   cho đúng nút P.Bổ của khối đó. */
.bpt-pay-block { position: relative; }
.bpt-phanbo-btn-wrap {
  position: absolute;
  right: 7px;
  bottom: 9px;
}
.bpt-phanbo-btn-wrap .btn.btn-sm { width: 76px; white-space: nowrap; padding-left: 0; padding-right: 0; text-align: center; }
.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; }
/* ✅ MỚI (24/08/2026, theo yêu cầu anh — nút "Thêm mới" mờ đi khi đang có 1 phiếu thu
   MỚI chưa lưu, tránh bấm thêm nhiều phiếu nháp cùng lúc — xem ptSetAddButtonEnabled()
   ở app-phieu-thu.js): #pt-add-btn không nằm trong ".pt-footer" (nút Lưu/Xóa/Sửa/In ở
   cột giữa) nên không có sẵn kiểu ":disabled" — thêm riêng ở đây. */
#pt-add-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Dòng "nháp" đại diện phiếu thu MỚI chưa lưu, chèn tạm ở đầu DANH SÁCH lúc bấm "Thêm
   mới" (ptInsertDraftPlaceholderRow()) — chữ nghiêng nhạt, không bấm được (chưa có id
   thật để mở lại), biến mất ngay khi Lưu/Xóa/chọn phiếu khác (ptLoadList() vẽ lại từ
   server, hoặc ptRemoveDraftPlaceholderRow() xoá tay). */
.pt-list-table tr.pt-draft-row td { font-style: italic; color: #94a3b8; cursor: default; }

/* ----- 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;
}

/* ✅ MỚI (theo yêu cầu anh): "Lập kế hoạch cung ứng" cũng giãn sát mép y hệt "Quản lý
   booking" — bảng này nhiều cột, cần tối đa chiều rộng. */
#page-cung-ung {
  margin: 0 -28px;
}

/* ✅ MỚI (theo yêu cầu anh — màn "Lập kế hoạch cung ứng" dùng chung layout bộ lọc với
   "Quản lý booking"): mở rộng các rule trên sang cả #page-cung-ung. */
/* ✅ MỚI (24/08/2026, theo yêu cầu anh Phong — "Báo cáo khách lưu trú" "Giao diện giống
   các báo cáo khác"): mở rộng thêm sang #page-bao-cao-khach-luu-tru, dùng lại NGUYÊN VẸN
   khung bộ lọc .dsb-filters/.dsb-filter/.ac-box đã có, không viết CSS riêng. */
#page-danh-sach-booking .dsb-filters,
#page-cung-ung .dsb-filters,
#page-phieu-nhan-khach .dsb-filters,
#page-bao-cao-khach-luu-tru .dsb-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-danh-sach-booking .dsb-filter,
#page-cung-ung .dsb-filter,
#page-phieu-nhan-khach .dsb-filter,
#page-bao-cao-khach-luu-tru .dsb-filter { position: relative; min-width: 170px; }
#page-danh-sach-booking .dsb-filter label,
#page-cung-ung .dsb-filter label,
#page-phieu-nhan-khach .dsb-filter label,
#page-bao-cao-khach-luu-tru .dsb-filter label { display: block; margin-bottom: 6px; font-weight: 600; }
#page-danh-sach-booking .dsb-filter input,
#page-cung-ung .dsb-filter input,
#page-phieu-nhan-khach .dsb-filter input,
#page-bao-cao-khach-luu-tru .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,
#page-cung-ung .dsb-filter-multi input,
#page-phieu-nhan-khach .dsb-filter-multi input,
#page-bao-cao-khach-luu-tru .dsb-filter-multi input { cursor: pointer; background: #fff; }
#page-danh-sach-booking .dsb-filter-multi .ac-box,
#page-cung-ung .dsb-filter-multi .ac-box,
#page-phieu-nhan-khach .dsb-filter-multi .ac-box,
#page-bao-cao-khach-luu-tru .dsb-filter-multi .ac-box { width: 260px; }

/* ✅ MỚI (theo yêu cầu anh — 08/08/2026): 4 nút vuông lọc nhanh theo trạng thái booking,
   đặt cạnh "Đến ngày" ở màn "Quản lý booking". Cao = 1/2 chiều cao ô input (32px -> 16px),
   bo cạnh nhẹ (không phải hình tròn). Bấm 1 cái = CHỌN (viền đậm nổi lên, filter theo
   đúng trạng thái đó), bấm lại cái đó = BỎ CHỌN. Có thể chọn NHIỀU nút cùng lúc (kiểu
   OR — hiện booking khớp BẤT KỲ trạng thái nào đang được chọn); không chọn nút nào =
   hiện tất cả (không lọc theo trạng thái). Xem dsbBindStatusFilterButtons() ở
   app-danh-sach-booking.js. */
#page-danh-sach-booking .dsb-status-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
}
#page-danh-sach-booking .dsb-status-btn {
  width: 16px;
  height: 16px;
  padding: 0;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  box-sizing: border-box;
  outline-offset: 2px;
}
#page-danh-sach-booking .dsb-status-btn-confirmed { background: #16A34A; }
#page-danh-sach-booking .dsb-status-btn-held      { background: #EAB308; }
#page-danh-sach-booking .dsb-status-btn-waiting   { background: #DC2626; }
/* "Đỏ viền trắng" — nền đỏ, viền trắng đậm để phân biệt rõ với ô Đỏ thường bên cạnh */
#page-danh-sach-booking .dsb-status-btn-reverted  { background: #DC2626; border-color: #fff; box-shadow: 0 0 0 1px #DC2626; }
/* Trạng thái ĐANG CHỌN — viền đen nổi hẳn lên quanh nút, dễ nhận biết đang lọc theo nút nào */
#page-danh-sach-booking .dsb-status-btn.dsb-status-active { outline: 2px solid #111827; }

#page-danh-sach-booking .dsb-empty,
#page-cung-ung .dsb-empty,
#page-phieu-nhan-khach .dsb-empty,
#page-bao-cao-khach-luu-tru .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,
#page-cung-ung .dsb-table-wrap,
#page-phieu-nhan-khach .dsb-table-wrap,
#page-bao-cao-khach-luu-tru .dsb-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

/* ✅ MỚI (24/08/2026, đợt 2, theo yêu cầu anh Phong): ô "Loại báo cáo" (select) ở
   "BÁO CÁO KHÁCH LƯU TRÚ" — các trang dùng chung .dsb-filter khác chỉ có <input>, style
   riêng cho <select> ở ĐÚNG trang này (không đụng tới các trang khác). */
#page-bao-cao-khach-luu-tru .dsb-filter select {
  width: 100%;
  height: 32px;
  padding: 4px 10px;
  border: 1px solid #999;
  border-radius: 2px;
  box-sizing: border-box;
  background: #fff;
  cursor: pointer;
}

/* ✅ MỚI (24/08/2026, theo yêu cầu anh Phong): "BÁO CÁO KHÁCH LƯU TRÚ" — phần "Tiêu đề in"
   (Tên đơn vị/Địa chỉ/SĐT lấy từ Cấu hình ĐVKD) + tiêu đề báo cáo, đặt giữa bộ lọc và
   bảng, đúng bố cục ảnh mẫu anh gửi (letterhead kiểu công văn). Ẩn hẳn khi KHÔNG in (chỉ
   hiện trên bản xem trước "Đang tải/đã có ngày" để anh biết trước khi bấm "In") — xem
   bkltRenderLetterhead() ở app-report-khach-luu-tru.js.
   ✅ SỬA (24/08/2026): ẩn khi trống ngày lọc thay vì luôn hiện, tránh hiện thừa 1 khối
   trống phía trên ô "Anh chọn Chọn ngày...". */
#page-bao-cao-khach-luu-tru .bklt-letterhead {
  text-align: center;
  margin-bottom: 4px;
}
#page-bao-cao-khach-luu-tru .bklt-letterhead.hidden { display: none; }
#page-bao-cao-khach-luu-tru .bklt-unit-name {
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
}
#page-bao-cao-khach-luu-tru .bklt-unit-addr {
  font-size: 13px;
  color: #334155;
}
#page-bao-cao-khach-luu-tru .bklt-title {
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  margin: 10px 0 2px;
  letter-spacing: .3px;
}
#page-bao-cao-khach-luu-tru .bklt-subtitle {
  text-align: center;
  font-size: 13px;
  color: #475569;
  margin-bottom: 14px;
}
#page-bao-cao-khach-luu-tru .bklt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
#page-bao-cao-khach-luu-tru .bklt-table th {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 8px;
  text-align: center;
  font-weight: 700;
  white-space: nowrap;
}
#page-bao-cao-khach-luu-tru .bklt-table td {
  border: 1px solid #e2e8f0;
  padding: 6px 8px;
  vertical-align: top;
}
#page-bao-cao-khach-luu-tru .bklt-table .bklt-c-num { text-align: center; white-space: nowrap; }
#page-bao-cao-khach-luu-tru .bklt-table .bklt-c-date { text-align: center; white-space: nowrap; }

@media print {
  #page-bao-cao-khach-luu-tru .topbar,
  #page-bao-cao-khach-luu-tru .tabs,
  #page-bao-cao-khach-luu-tru .dsb-filters,
  #page-bao-cao-khach-luu-tru .bklt-header-buttons {
    display: none !important;
  }
  #page-bao-cao-khach-luu-tru .card {
    box-shadow: none;
    border: none;
  }
}

/* ✅ MỚI (theo yêu cầu anh — 08/08/2026): báo cáo "PHIẾU NHẬN KHÁCH" — dùng lại khung
   bảng .dsb-table sẵn có, chỉ thêm vài kiểu riêng: Tính chất (Double/Tiwn...) chữ xanh lá
   nghiêng cạnh tên Cơ sở đã xếp, và mỗi dòng Ghi chú (BK/PT/CSKD/HHDV) xuống dòng riêng. */
.pnk-property-tag { color: #16A34A; font-style: italic; font-size: 12px; margin-left: 4px; }
.pnk-note-line { display: block; }
.pnk-note-line + .pnk-note-line { margin-top: 4px; }
.pnk-loc-line { display: block; color: #475569; }
.pnk-loc-line + .pnk-loc-line { margin-top: 2px; }

/* ⚠️ SỬA (theo yêu cầu anh 17/08/2026 — đồng bộ cỡ chữ toàn bảng Lập kế hoạch cung ứng
   về 13px): trước đây mỗi chỗ 1 cỡ khác nhau (12px/12.5px, riêng input/select/button lại
   không kế thừa font của bảng do trình duyệt tự set font mặc định cho các thẻ form) nhìn
   không đều mắt. Giờ gom về ĐÚNG 1 cỡ 13px (bằng .dsb-table gốc) cho mọi chữ trong bảng. */
.cu-table .cu-unit { color: #64748b; font-size: 13px; }
.cu-table .cu-nogia { color: #b91c1c; font-size: 13px; font-style: italic; }
/* ✅ MỚI (theo yêu cầu anh — bảng Cung ứng thêm cột "Giá TT" nên rộng hơn, không muốn các
   cột bị ép co nhỏ lại vừa khung): cho bảng được rộng ra TỰ NHIÊN theo đúng nội dung
   (không còn bị "width:100%" của .dsb-table dùng chung ép co lại) — khung bọc ngoài
   (#cu-table-wrap) đã có sẵn "overflow:auto" nên tự hiện thanh cuộn NGANG khi bảng rộng
   hơn khung, không cần sửa gì thêm ở khung ngoài. */
#page-cung-ung .cu-table {
  min-width: 100%;
}
/* ✅ MỚI (06/08/2026 — theo yêu cầu anh, sửa 1 ô xong màn hình bị "nhảy"): khi đang tải
   lại bảng (sau khi sửa 1 ô), GIỮ NGUYÊN bảng cũ trên màn hình, chỉ làm mờ nhẹ báo hiệu
   đang tải — không xóa DOM nên trang không bị co giãn/giật. */
#cu-table-wrap.cu-loading { opacity: .5; pointer-events: none; transition: opacity .1s; }
/* ✅ SỬA (06/08/2026 — theo yêu cầu anh, các cặp cột phải BẰNG NHAU thật sự trên màn
   hình): "table-layout:fixed" chỉ khóa cứng độ rộng từng cột khi bản thân <table> có độ
   rộng CỤ THỂ (px) — để "width:max-content" thì trình duyệt lại tự nới cột theo nội dung
   chữ (vd "07/08/2026"), làm 2 cột set bằng nhau vẫn hiện KHÁC NHAU. Gán rộng = đúng
   tổng các cột bên dưới cho từng bảng để khóa cứng, các cặp cột luôn bằng nhau.
   ✅ SỬA (17/08/2026, theo yêu cầu anh — thêm cột "HH.Dịch vụ" 6cm + "Thành viên" nới từ
   200px lên 6cm): 1510px cũ trừ đi 200px (độ rộng cũ của "Thành viên") rồi cộng thêm 2
   lần 6cm (1 cho cột "HH.Dịch vụ" hoàn toàn mới, 1 cho "Thành viên" vừa nới) — dùng
   calc() để cộng thẳng đơn vị cm, khỏi quy đổi tay ra px dễ lệch số.
   ⚠️ SỬA (17/08/2026 — lần 3, đồng bộ cỡ chữ 13px): cộng thêm 10px vì cột "Xếp"
   (dsb-c-center) vừa nới 60px->70px ở trên (chữ nút to lên 13px làm chữ "Xếp" xuống
   dòng nếu giữ nguyên 60px).
   ⚠️ SỬA LỖI (24/08/2026, theo báo lỗi anh Phong — "cột Xác nhận email và Zalo bị đè lên
   nhau"): 2 cột CUỐI CÙNG của bảng Chi tiết — "Xác nhận" (cu-c-xacnhan) và "Xác nhận
   Zalo" (cu-c-zaloxacnhan) — TRƯỚC ĐÂY hoàn toàn CHƯA có khai báo "width" riêng (chỉ
   "cu-c-xacnhan" có "max-width:220px" khai báo ở chỗ khác, "cu-c-zaloxacnhan" thì không
   có gì cả). Vì bảng dùng "table-layout:fixed" + tổng độ rộng CỐ ĐỊNH ở dòng NGAY DƯỚI
   (".cu-table-detail{width:...}") — mà tổng đó CHỈ VỪA ĐỦ cộng dồn đúng các cột ĐÃ khai
   báo width (từ "TT" tới "Thành tiền" ở khối phía trên, KHÔNG hề tính phần cho 2 cột
   Xác nhận) — nên trình duyệt không còn dư khoảng trống nào để chia cho 2 cột này, ép
   chúng gần như co về 0 -> chữ 2 cột đè chồng lên nhau y hệt ảnh anh chụp. Cách sửa: khai
   báo THẲNG width cho cả 2 cột (180px cho "Xác nhận" — đủ chỗ chữ NCC trả lời qua email
   khá dài đã có sẵn "white-space:normal" để xuống dòng; 140px cho "Xác nhận Zalo" — chữ
   ngắn "Xác nhận"/"Hủy"/"(chưa xác nhận)") NGAY Ở KHỐI ".cu-table-detail th.cu-c-..."
   phía trên (2 dòng mới, xem ngay sau khối "cu-c-thanhtien") + cộng đúng 180px + 140px =
   320px vào tổng độ rộng bảng ở dòng dưới đây, để 2 cột này có đúng khoảng trống riêng,
   không còn phải "giành" chỗ của các cột khác nữa.
   ⚠️ SỬA (theo yêu cầu anh Phong — gộp 3 cột "Ngày booking"/"Số khách"/"Diễn giải" vào
   chung 1 cột "Đoàn khách", xem cuRenderDetailTable()/cuBuildCskdGroups() ở
   app-cung-ung.js): bớt đúng 3 cột đó (90px + 60px + (110px + 2cm) = 260px + 2cm), đồng
   thời nới cột "Đoàn khách" từ 110px lên 220px (đủ chỗ hiện nhiều dòng gộp: Tên khách/
   Ngày/N.Lớn/T.Em/Diễn giải — thêm 110px). Tổng mới = tổng cũ - 260px - 2cm + 110px =
   calc(1510px - 200px + 6cm + 6cm + 10px + 320px - 260px - 2cm + 110px), quy đổi thẳng
   thành calc(1490px + 10cm) cho gọn (đã kiểm lại bằng cách cộng tay từng cột còn lại —
   xem đủ danh sách ở khối "width" từng cột ngay bên dưới). */
/* ⚠️ SỬA (04/09/2026, theo yêu cầu anh Phong — thêm 2 cột "S.Lượng"/"Tổng Đ.Mức" ở bảng
   Cung ứng): cả 2 cột mới đều dùng chung class "dsb-c-num" (90px/cột, xem khối
   ".cu-table-detail th.dsb-c-num, td.dsb-c-num" phía dưới) — cộng thêm đúng 2 × 90px =
   180px vào tổng độ rộng cố định của bảng, nếu không "table-layout:fixed" sẽ tự co hết
   MỌI cột lại cho vừa đúng tổng cũ (bảng nhìn bị bóp nhỏ dù mỗi cột vẫn khai đúng width). */
.cu-table-detail { width: calc(1490px + 10cm + 180px); }
/* ⚠️ SỬA HOÀN TOÀN (04/09/2026, theo báo lỗi anh Phong — "bảng Tổng hợp các cột cuối bị
   đè lên nhau"): TRƯỚC ĐÂY bảng Tổng hợp định width theo "nth-child" (đếm vị trí TUYỆT
   ĐỐI trong dòng, xem khối cũ ngay dưới đã xóa) — CHỈ ĐÚNG khi số cột không đổi. Khi thêm
   2 cột "S.Lượng"/"Tổng Đ.Mức" (04/09/2026), TOÀN BỘ vị trí nth-child từ cột 6 trở đi bị
   lệch (nth-child(6) giờ trỏ nhầm sang "S.Lượng" thay vì "Đ.mức", v.v...), và 4 cột cuối
   (Giá TT/Thành tiền/Xác nhận/Xác nhận Zalo) hoàn toàn KHÔNG có width nào được khai (trước
   chỉ khai tới nth-child(10)) -> bị "table-layout:fixed" ép co gần về 0, chữ đè chồng lên
   nhau y hệt ảnh anh chụp — ĐÚNG LỖI Y HỆT đã từng xảy ra ở bảng Chi tiết (24/08/2026, xem
   giải thích ở trên) nhưng bảng Chi tiết đã sửa bằng CLASS nên không bị lại, còn bảng Tổng
   hợp vẫn dùng nth-child nên giờ mới lộ ra khi thêm cột. Sửa TẬN GỐC: đổi HẲN sang chọn
   theo CLASS (mọi ô của bảng Tổng hợp — dựng qua cuTailCellsHtml() dùng CHUNG hàm với bảng
   Chi tiết — đã sẵn có đúng class ngữ nghĩa: dsb-c-tt/cu-c-name/dsb-c-center/cu-c-ncc/
   cu-c-ngaysd/dsb-c-num/cu-c-giatt/cu-c-thanhtien/cu-c-xacnhan/cu-c-zaloxacnhan), KHÔNG
   còn phụ thuộc vị trí cột nữa — thêm/bớt cột sau này không còn tự vỡ layout nữa (xem
   khối rule mới ngay dưới, thay thế 10 dòng nth-child cũ). */
.cu-table-agg { width: 1690px; }
#page-cung-ung .cu-table th,
#page-cung-ung .cu-table td {
  white-space: nowrap;
}
/* ✅ SỬA (theo yêu cầu anh — bỏ khung viền cho gọn mắt, đồng bộ NHÀ CUNG CẤP/Đ.mức/T.Tế/
   Giá KH/Giá TT/Thành tiền): tất cả các ô này giờ KHÔNG viền mặc định, nhìn như chữ
   thường trong bảng — Đ.mức/Giá KH/Thành tiền LUÔN readonly (không cho sửa, nền xám như
   nhau, con trỏ mặc định); T.Tế/Giá TT/Nhà cung cấp vẫn sửa được (hiện nền xám nhạt khi
   rê chuột, hiện viền rõ khi bấm vào để sửa, để người dùng biết đang ở ô sửa được). */
#page-cung-ung .cu-table select.cu-supplier-select,
#page-cung-ung .cu-table input.cu-soluong-input,
#page-cung-ung .cu-table input.cu-dinhmuc-input,
#page-cung-ung .cu-table input.cu-tte-input,
#page-cung-ung .cu-table input.cu-tongdinhmuc-input,
#page-cung-ung .cu-table input.cu-giakh-input,
#page-cung-ung .cu-table input.cu-giatt-input,
#page-cung-ung .cu-table input.cu-thanhtien-input {
  /* ⚠️ SỬA (theo yêu cầu anh 17/08/2026 — đồng bộ cỡ chữ 13px): các thẻ <select>/<input>
     mặc định trình duyệt KHÔNG tự kế thừa font/cỡ chữ của bảng bên ngoài (khác hẳn thẻ
     chữ thường), nên trước đây nhìn to/nhỏ khác nhau dù cùng 1 bảng — giờ ép về ĐÚNG font
     + 13px như mọi chữ khác trong bảng. */
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  height: 28px;
  border: none;
  border-radius: 4px;
  padding: 2px 6px;
  box-sizing: border-box;
  vertical-align: middle;
  background: transparent;
}
/* Các cột LUÔN readonly — nền xám cố định, không đổi khi rê chuột/bấm vào. */
#page-cung-ung .cu-table input.cu-soluong-input,
#page-cung-ung .cu-table input.cu-dinhmuc-input,
#page-cung-ung .cu-table input.cu-tongdinhmuc-input,
#page-cung-ung .cu-table input.cu-giakh-input,
#page-cung-ung .cu-table input.cu-thanhtien-input {
  text-align: right;
  background: #f1f5f9;
  color: #64748b;
  cursor: default;
}
#page-cung-ung .cu-table input.cu-giakh-input::placeholder {
  color: #b91c1c;
  font-style: italic;
  opacity: 1;
}
/* 3 cột CHO SỬA — chỉ hiện nền/viền khi rê chuột hoặc đang bấm vào sửa. */
#page-cung-ung .cu-table input.cu-tte-input {
  text-align: right;
}
#page-cung-ung .cu-table select.cu-supplier-select:hover,
#page-cung-ung .cu-table input.cu-tte-input:hover {
  background: #f1f5f9;
}
#page-cung-ung .cu-table select.cu-supplier-select:focus,
#page-cung-ung .cu-table input.cu-tte-input:focus {
  background: #fff;
  border: 1px solid #94a3b8;
}
#page-cung-ung .cu-giatt-input {
  text-align: right;
}
#page-cung-ung .cu-giatt-input:hover {
  background: #f1f5f9;
}
#page-cung-ung .cu-giatt-input:focus {
  background: #fff;
  border: 1px solid #94a3b8;
}

/* ✅ SỬA (theo yêu cầu anh — thêm cột "Giá TT" nên số thứ tự cột bị lệch, "Thành tiền"
   cần rộng hơn): quy định rõ độ rộng từng cột thay vì để trình duyệt tự chia đều — 2
   bảng (chi tiết/tổng hợp) có SỐ CỘT KHÁC NHAU nên phải tách riêng 2 bộ nth-child
   (.cu-table-detail 14 cột / .cu-table-agg 9 cột, tính từ khi có thêm "Giá TT"). */
.cu-table { table-layout: fixed; }
.cu-table th, .cu-table td { overflow-wrap: break-word; }

/* ✅ SỬA (06/08/2026 — theo yêu cầu anh): cột "Tên HH.Dịch vụ" chữ dài thì xuống dòng,
   tự nới cao dòng thay vì bị cắt/tràn (khác các cột khác vẫn giữ 1 dòng — "nowrap" ở
   trên). Cột "Xếp" cũng cho xuống dòng để khớp cột đã thu hẹp — nút "✓ Đã xếp" (dài hơn
   "Xếp") tự xuống 2 dòng thay vì tràn ra ngoài cột.
   ⚠️ SỬA LẦN 2 (06/08/2026 — dùng "nth-child" bị lỗi): bảng Chi tiết dùng rowspan (TT/
   CSKD/Đoàn khách/.../Diễn giải) nên từ DÒNG THỨ 2 trở đi trong CÙNG 1 nhóm sẽ có ÍT ô
   <td> hơn -> ô "Tên HH.Dịch vụ"/"Xếp" của các dòng đó KHÔNG còn đúng thứ tự nth-child
   như dòng đầu nhóm nữa (vd nth-child(7) tụt xuống nth-child(1)) -> luật nth-child ở
   trên chỉ ăn đúng DÒNG ĐẦU mỗi nhóm, các dòng sau bị bỏ sót (không xuống dòng được, chữ
   tràn ra ngoài, bị cột "Xếp" đè lên). Đổi sang chọn theo CLASS cố định (đã có sẵn trong
   HTML, không phụ thuộc vị trí) — đúng cho MỌI dòng bất kể có bị rowspan che hay không. */
#page-cung-ung .cu-table-detail td.dsb-c-sub,
#page-cung-ung .cu-table-agg td.cu-c-name,
/* ⚠️ SỬA LỖI (24/08/2026, theo báo lỗi anh Phong — "cột Ngày booking bị đè chữ"): cột
   "CSKD/Lịch trình" (dsb-c-name) chỉ rộng 130px nhưng tên CSKD + Lịch trình gộp lại (VD
   "Dragon Legend 01 - 1 Đêm") thường DÀI hơn 130px — do luật CHUNG "white-space:nowrap"
   áp cho MỌI ô trong bảng Cung ứng (xem "#page-cung-ung .cu-table th, .cu-table td" phía
   trên) nên chữ dài không tự xuống dòng được, TRÀN NGANG đè thẳng lên cột "Ngày booking"
   ngay bên phải (2 cột đều dùng rowspan nên đè lên nhau y hệt ảnh anh chụp — không phải
   lỗi độ rộng cột "Ngày booking"). Phải khai báo NGAY TẠI ĐÂY (cùng khối với "dsb-c-sub"/
   "dsb-c-center" — có tiền tố "#page-cung-ung" để đủ độ ưu tiên CSS thắng luật nowrap
   chung ở trên; khai riêng ở khối width phía dưới — không có tiền tố "#page-cung-ung" —
   sẽ KHÔNG thắng được vì luật nowrap chung có độ ưu tiên cao hơn, đúng lỗi ban đầu). */
#page-cung-ung .cu-table-detail td.dsb-c-name {
  white-space: normal;
}
#page-cung-ung .cu-table-detail th.dsb-c-center,  #page-cung-ung .cu-table-detail td.dsb-c-center,
#page-cung-ung .cu-table-agg th.dsb-c-center,     #page-cung-ung .cu-table-agg td.dsb-c-center {
  white-space: normal;
  text-align: center;
}
#page-cung-ung .cu-table .cu-xep-btn {
  white-space: normal;
  width: 100%;
}

/* Chi tiết: TT / CSKD-Lịch trình / Ngày booking / Đoàn khách / Số khách / HH.Dịch vụ /
   Diễn giải / Thành viên / Xếp / Chọn NCC / Ngày sử dụng / Đ.mức / T.Tế / Giá KH /
   Giá TT / Thành tiền / Xác nhận / Xác nhận Zalo
   ✅ SỬA HOÀN TOÀN (17/08/2026, theo yêu cầu anh — thêm cột "HH.Dịch vụ" + nới rộng cột
   "Thành viên" ra 6cm): bảng Chi tiết dùng RẤT NHIỀU rowspan (TT/CSKD/Ngày booking/Đoàn
   khách/Số khách/HH.Dịch vụ/Diễn giải) — dòng nào bị 1 trong các cột đó che (rowspan từ
   dòng trước) thì có ÍT ô <td> hơn hẳn, nên "nth-child" (đếm vị trí TUYỆT ĐỐI trong
   dòng) tính SAI hoàn toàn cho những dòng đó, gây đúng lỗi anh báo (cột "HH.Dịch vụ"/
   "Thành viên" bị bóp hẹp/tràn chữ ở các dòng thành viên thứ 2 trở đi). Đổi HẲN toàn bộ
   sang chọn theo CLASS cố định (gắn trực tiếp trong HTML, không phụ thuộc vị trí ô) cho
   MỌI cột — đúng cho MỌI dòng bất kể bị rowspan che hay không, giống đúng cách đã làm
   cho "Thành viên"/"Xếp" trước đó. Mọi cột GIỮ NGUYÊN độ rộng cũ, chỉ 2 cột "HH.Dịch vụ"
   (mới)/"Thành viên" (đổi tên từ "Tên HH.Dịch vụ", trước 200px) đổi thành 6cm — các cột
   còn lại tự bị đẩy sang phải theo đúng vị trí mới, không đụng độ rộng của chúng. */
.cu-table-detail th.dsb-c-tt,          .cu-table-detail td.dsb-c-tt          { width: 40px; }
/* ⚠️ SỬA LỖI (24/08/2026, theo báo lỗi anh Phong — "cột Ngày booking bị đè chữ"): cột này
   (CSKD/Lịch trình) chỉ rộng 130px nhưng nội dung (VD "Dragon Legend 01 - 1 Đêm") thường
   dài hơn hẳn — trước đây không xuống dòng được (kế thừa "white-space:nowrap" chung của
   cả bảng) nên TRÀN NGANG đè lên cột "Ngày booking" ngay bên phải. Đã thêm riêng
   "white-space:normal" cho ĐÚNG cột này ở khối "#page-cung-ung .cu-table-detail
   td.dsb-c-sub, ..." phía trên (bắt buộc phải có tiền tố "#page-cung-ung" mới đủ độ ưu
   tiên CSS thắng được luật nowrap chung — xem giải thích đầy đủ ở đó). */
.cu-table-detail th.dsb-c-name,        .cu-table-detail td.dsb-c-name        { width: 130px; }
/* ⚠️ SỬA (theo yêu cầu anh Phong — gộp "Ngày booking"/"Số khách"/"Diễn giải" vào chung
   cột "Đoàn khách", xem giải thích đầy đủ ở ".cu-table-detail{width:...}" phía trên): đã
   bỏ hẳn 2 dòng khai báo width riêng của "dsb-c-ngaybooking"/"dsb-c-sokhach" (2 cột này
   không còn render nữa — xem cuRenderDetailTable() ở app-cung-ung.js), nới "Đoàn khách"
   từ 110px lên 220px để đủ chỗ hiện nhiều dòng gộp, cho xuống dòng bình thường (bỏ
   "nowrap" kế thừa chung của bảng — nội dung nhiều dòng nên KHÔNG thể ép 1 dòng được). */
.cu-table-detail th.dsb-c-doankhach,   .cu-table-detail td.dsb-c-doankhach   { width: 220px; white-space: normal; vertical-align: top; }
/* ⚠️ SỬA (theo yêu cầu anh 17/08/2026 — lần 4): thu hẹp "HH.Dịch vụ" 6cm -> 4cm (bớt
   2cm). ✅ SỬA (theo yêu cầu anh Phong — bỏ hẳn cột "Diễn giải" riêng, xem ghi chú ở
   "dsb-c-doankhach" ngay trên): 2cm từng cộng thêm cho "Diễn giải" giờ không còn cột đó
   nữa — đã tính lại trong tổng calc() mới ở trên, không còn dòng khai báo riêng cho
   "dsb-c-diengiai" ở đây nữa. */
.cu-table-detail th.dsb-c-hhname,      .cu-table-detail td.dsb-c-hhname      { width: 4cm; }  /* HH.Dịch vụ — bớt 2cm (6cm -> 4cm) */
.cu-table-detail th.dsb-c-sub,         .cu-table-detail td.dsb-c-sub         { width: 6cm; }  /* Thành viên — trước 200px, nới ra 6cm */
.cu-table-detail th.dsb-c-center,      .cu-table-detail td.dsb-c-center      { width: 70px; }  /* Xếp — nới thêm 10px (60px->70px) vì chữ "Xếp" bị xuống dòng khi đồng bộ cỡ chữ nút lên 13px (17/08/2026) */
.cu-table-detail th.cu-c-ncc,          .cu-table-detail td.cu-c-ncc          { width: 150px; }
.cu-table-detail th.cu-c-ngaysd,       .cu-table-detail td.cu-c-ngaysd       { width: 100px; }  /* Ngày sử dụng = Thành tiền */
.cu-table-detail th.dsb-c-num,         .cu-table-detail td.dsb-c-num         { width: 90px; }  /* Đ.mức/T.Tế/Giá KH */
.cu-table-detail th.cu-c-giatt,        .cu-table-detail td.cu-c-giatt        { width: 90px; }  /* Giá TT */
.cu-table-detail th.cu-c-thanhtien,    .cu-table-detail td.cu-c-thanhtien    { width: 100px; }  /* Thành tiền = Ngày sử dụng */
/* ✅ MỚI (24/08/2026, xem giải thích đầy đủ ở ".cu-table-detail{width:...}" phía dưới —
   sửa lỗi "cột Xác nhận email và Zalo bị đè lên nhau"): trước đây 2 cột cuối này CHƯA có
   width riêng, bị bảng "table-layout:fixed" ép co gần về 0 vì tổng độ rộng bảng không hề
   tính phần cho chúng. */
.cu-table-detail th.cu-c-xacnhan,      .cu-table-detail td.cu-c-xacnhan      { width: 180px; }  /* Xác nhận (email NCC trả lời) */
.cu-table-detail th.cu-c-zaloxacnhan,  .cu-table-detail td.cu-c-zaloxacnhan  { width: 140px; }  /* Xác nhận Zalo */

/* ✅ MỚI (theo yêu cầu anh Phong, đối chiếu hình anh vẽ — gộp "Ngày booking"/"Số khách"/
   "Diễn giải" vào chung 1 cột "Đoàn khách", xem cuRenderDetailTable() ở app-cung-ung.js):
   Tên khách/Tên đoàn đậm, các dòng Ngày/N.Lớn/T.Em/Diễn giải nhỏ + màu xám nhạt hơn cho
   dễ phân biệt với dòng tên, xếp chồng từng dòng riêng (không dùng "white-space:nowrap"
   kế thừa chung của bảng nữa — đã gỡ ở "dsb-c-doankhach" phía trên). */
.cu-doankhach-name { font-weight: 600; color: #0f172a; }
.cu-doankhach-line { display: block; color: #64748b; font-size: 12px; margin-top: 2px; }

/* ✅ MỚI (30/08/2026, theo yêu cầu anh Phong — bảng "Xếp dịch vụ" gộp NHIỀU đoàn khách
   vào chung 1 ô "Đoàn khách", mỗi đoàn khách 1 khối chi tiết như bảng Chi tiết, xem
   cuRenderAssetTable() ở app-cung-ung.js): cách đều + có đường kẻ mảnh ngăn giữa các khối
   đoàn khách liền nhau trong CÙNG 1 ô, cho dễ phân biệt khối này với khối kia. */
.cu-doankhach-block { padding: 6px 0; border-top: 1px dashed #e2e8f0; }
.cu-doankhach-block:first-child { padding-top: 0; border-top: none; }

/* Tổng hợp: TT / Tên HH.DV / Xếp(MỚI, LUÔN khóa vì gộp nhiều booking) / Chọn NCC /
   Ngày sử dụng / S.Lượng / Đ.mức / T.Tế / Tổng Đ.Mức / Giá KH / Giá TT / Thành tiền /
   Xác nhận / Xác nhận Zalo
   ⚠️ SỬA HOÀN TOÀN (04/09/2026, xem giải thích đầy đủ ở ".cu-table-agg{width:...}" phía
   trên): đổi từ "nth-child" sang CLASS cố định — cùng cách bảng Chi tiết đã dùng, không
   còn vỡ khi thêm/bớt cột nữa. */
.cu-table-agg th.dsb-c-tt,          .cu-table-agg td.dsb-c-tt          { width: 50px; }
.cu-table-agg th.cu-c-name,         .cu-table-agg td.cu-c-name         { width: 310px; }  /* Tên HH.Dịch vụ — lấy phần rộng bù từ cột Xếp */
.cu-table-agg th.dsb-c-center,      .cu-table-agg td.dsb-c-center      { width: 70px; }  /* Xếp — nới thêm 10px (60px->70px), đồng bộ với bảng Chi tiết (17/08/2026) */
.cu-table-agg th.cu-c-ncc,          .cu-table-agg td.cu-c-ncc          { width: 200px; }
.cu-table-agg th.cu-c-ngaysd,       .cu-table-agg td.cu-c-ngaysd       { width: 100px; }  /* Ngày sử dụng = Thành tiền */
.cu-table-agg th.dsb-c-num,         .cu-table-agg td.dsb-c-num         { width: 90px; }  /* S.Lượng/Đ.mức/T.Tế/Tổng Đ.Mức/Giá KH */
.cu-table-agg th.cu-c-giatt,        .cu-table-agg td.cu-c-giatt        { width: 90px; }  /* Giá TT */
.cu-table-agg th.cu-c-thanhtien,    .cu-table-agg td.cu-c-thanhtien    { width: 100px; }  /* Thành tiền = Ngày sử dụng */
.cu-table-agg th.cu-c-xacnhan,      .cu-table-agg td.cu-c-xacnhan      { width: 180px; }  /* Xác nhận (email NCC trả lời) */
.cu-table-agg th.cu-c-zaloxacnhan,  .cu-table-agg td.cu-c-zaloxacnhan  { width: 140px; }  /* Xác nhận Zalo */


/* ✅ MỚI (theo yêu cầu anh): nút "Xếp" — xanh chữ trắng, ĐÚNG màu xanh chủ đạo hệ thống
   (--brand-accent, dùng chung khắp nơi: viền tab, nút chính, nút "Ghi chú" ở Xếp dịch vụ). */
#page-cung-ung .cu-xep-btn {
  /* ⚠️ SỬA (theo yêu cầu anh 17/08/2026 — đồng bộ cỡ chữ 13px): thêm font-family:inherit
     (nút <button> mặc định không tự kế thừa font bảng) + đổi cỡ chữ 12.5px -> 13px cho
     khớp mọi chữ khác trong bảng. */
  font-family: inherit;
  background: var(--brand-accent); color: #fff; border: none; border-radius: 4px;
  padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#page-cung-ung .cu-xep-btn:hover { opacity: .9; }
#page-cung-ung .cu-xep-btn:disabled {
  background: #cbd5e1; color: #64748b; cursor: not-allowed;
}
#page-cung-ung .cu-xep-btn-done { background: #16a34a; }
/* ✅ MỚI (theo yêu cầu anh — 06/08/2026, nút "Thêm" ở Tổng hợp): nút "Xóa" của dòng
   Thêm chung — cùng kích cỡ nút "Xếp" nhưng màu đỏ nhạt để phân biệt là hành động xóa. */
#page-cung-ung .cu-general-del-btn {
  /* ⚠️ SỬA (theo yêu cầu anh 17/08/2026 — đồng bộ cỡ chữ 13px): tương tự nút "Xếp". */
  font-family: inherit;
  background: #fee2e2; color: #b91c1c; border: 1px solid #fecaca; border-radius: 4px;
  padding: 4px 10px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
#page-cung-ung .cu-general-del-btn:hover { background: #fecaca; }
#page-cung-ung .dsb-c-center { text-align: center; }

/* min-width các ô trong bảng Cung ứng đã set 0 để không phá vỡ table-layout:fixed. */
.cu-table input.cu-soluong-input,
.cu-table input.cu-dinhmuc-input,
.cu-table input.cu-tte-input,
.cu-table input.cu-tongdinhmuc-input,
.cu-table input.cu-giakh-input,
.cu-table input.cu-thanhtien-input {
  min-width: 0;
}
.cu-table select.cu-supplier-select { min-width: 0; }

.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).
   ✅ SỬA (30/08/2026, theo báo lỗi anh Phong — cột "Đoàn khách" ở bảng "Xếp dịch vụ" mới
   hiện con trỏ tay + gạch chân chấm dù KHÔNG bấm mở được gì (Tài sản có thể gộp NHIỀU
   booking khác nhau, không mở đúng 1 Booking cụ thể được, xem cuRenderAssetTable() ở
   app-cung-ung.js)): CHỈ áp dụng kiểu "bấm được" này khi ô THẬT SỰ có gắn kèm ID Booking
   để mở (data-dsb-open-id ở Danh sách booking / data-cu-open-id ở Cung ứng Chi tiết) —
   trước đây áp dụng cho MỌI ô "dsb-c-doankhach" bất kể có bấm được hay không.  */
.dsb-table .dsb-c-doankhach[data-dsb-open-id],
.dsb-table .dsb-c-doankhach[data-cu-open-id] { cursor: pointer; text-decoration: underline; text-decoration-style: dotted; }
.dsb-table .dsb-c-doankhach[data-dsb-open-id]:hover,
.dsb-table .dsb-c-doankhach[data-cu-open-id]: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 hiện khung nhỏ chia
   2 nguồn "Bảng thanh toán booking" / "Phiếu thu tiền booking" (xem dsbShowDaTraBreakdown,
   sửa 24/08/2026 — trước đó bấm mở THẲNG Bảng thanh toán, không chọn được nguồn). */
.dsb-table .dsb-c-datra { cursor: pointer; text-decoration: underline; }
.dsb-table .dsb-c-datra:hover { background: rgba(0,0,0,0.04); }

/* ✅ MỚI (24/08/2026, theo yêu cầu anh): khung nhỏ hiện lúc bấm cột "Đã trả" — định vị
   "position: fixed" tính thẳng từ toạ độ ô vừa bấm (xem dsbShowDaTraBreakdown ở
   app-danh-sach-booking.js), không dựa vào khung cha "position: relative" nào (ô nằm
   trong <table>, không có sẵn khung cha phù hợp như các ô lọc dùng ".ac-box" ở trên). */
.dsb-datra-popup {
  position: fixed;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  border-radius: 6px;
  z-index: 1000;
  min-width: 260px;
  overflow: hidden;
}
.dsb-datra-popup-item {
  padding: 9px 14px;
  font-size: 12.5px;
  color: #334155;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 1px solid #f1f5f9;
}
.dsb-datra-popup-item:last-child { border-bottom: none; }
.dsb-datra-popup-item:hover { background: var(--blue-light); }
.dsb-datra-popup-item b { margin-left: 8px; color: #0f172a; }

/* Tô màu cả khối 1 booking theo trạng thái — 5 mức ĐÚNG như anh mô tả (08/08/2026):
   Xác nhận=xanh / Giữ=vàng (dùng lại đúng màu #a16207 như bên Cung Ứng) / Chờ-quá hạn=đỏ
   (chữ) / booking đã từng Xác nhận nhưng về lại Giữ-Chờ=đỏ (NỀN) chữ trắng / Hủy=đen. */
.dsb-table .dsb-st-confirmed { color: #16A34A; }
.dsb-table .dsb-st-held { color: #a16207; }
.dsb-table .dsb-st-waiting { color: #dc2626; }
/* ✅ MỚI (theo yêu cầu anh — 08/08/2026): booking ĐÃ TỪNG xác nhận (có tiền/Công nợ/
   Ngày giờ xác nhận) nhưng giờ lại về trạng thái Giữ/Chờ — nền ĐỎ, chữ TRẮNG, nổi bật
   hơn hẳn 2 màu Giữ/Chờ thường để cảnh báo (mục 2.4). */
.dsb-table .dsb-st-reverted { background: #dc2626; color: #fff; }
/* ✅ MỚI (theo yêu cầu anh — 08/08/2026): booking đã Hủy (bấm nút HỦY) — chữ đen thường,
   không tô nổi bật (mục 2.5). */
.dsb-table .dsb-st-cancelled { color: #111827; }
/* ✅ SỬA (theo yêu cầu anh): đã Check out — bôi nền màu ghi (xám nhạt) cho CẢ dòng,
   không chỉ đổi màu chữ như trước, để phân biệt rõ với các dòng đang hoạt động khác. */
.dsb-table .dsb-st-checkout { background: #F1F2F4; color: #111827; }
.dsb-table .dsb-row-con.dsb-st-confirmed,
.dsb-table .dsb-row-con.dsb-st-held,
.dsb-table .dsb-row-con.dsb-st-waiting,
.dsb-table .dsb-row-con.dsb-st-cancelled { 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 */
.dsb-table .dsb-row-con.dsb-st-reverted { background: #dc2626; color: #fee2e2; } /* dòng con vẫn giữ nền đỏ đồng bộ cả khối, chỉ nhạt chữ hơn dòng cha */
.dsb-table .dsb-row-con.dsb-st-checkout { background: #F1F2F4; color: #4b5563; } /* dòng con vẫn giữ nền ghi đồng bộ cả khối, chỉ nhạt chữ hơn dòng cha */

/* 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;
}

/* ============================================================================
   MỚI, theo yêu cầu anh: BÁO CÁO \ "Báo cáo công suất" (#page-report-dt-congsuat)
   — dùng lại đúng bố cục bộ lọc/kiểu bảng của "Danh sách booking" (.dsb-*) cho
   đồng bộ giao diện, đổi tiền tố sang .rcs- để không đụng CSS của trang kia.
   ============================================================================ */
#page-report-dt-congsuat .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-dt-congsuat .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-dt-congsuat .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-dt-congsuat .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-dt-congsuat .rcs-filter-multi { position: relative; min-width: 320px; flex: 1; }
#page-report-dt-congsuat .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-report-dt-congsuat .rcs-filter-multi .ac-box { width: 100%; }

/* ✅ MỚI (theo yêu cầu anh — 07/08/2026): "Báo cáo tổng hợp theo khách hàng"
   (#page-report-dt-th-khach) — bố cục bộ lọc + màu dòng cha/con (class ".rth-row-cskd"/
   ".rth-row-schedule" — dòng cha = Khách hàng, dòng con = CSKD). */
#page-report-dt-th-khach .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-dt-th-khach .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-dt-th-khach .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-dt-th-khach .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-dt-th-khach .rcs-filter-multi { position: relative; min-width: 320px; flex: 1; }
#page-report-dt-th-khach .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-report-dt-th-khach .rcs-filter-multi .ac-box { width: 100%; }

#page-report-dt-th-khach .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-dt-th-khach .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

#page-report-dt-th-khach .rth-row-schedule td {
  color: #475569;
  font-weight: 400;
}
#page-report-dt-th-khach .rth-row-cskd td {
  font-weight: 700;
  background: #f8fafc;
}

/* ✅ LÀM LẠI (theo yêu cầu anh — 07/08/2026): "Báo cáo tổng hợp theo CSKD"
   (#page-report-dt-th-cskd) — bố cục bộ lọc + màu dòng cha/con y hệt trang khách hàng
   ở trên (dùng CHUNG class ".rth-row-cskd"/".rth-row-schedule" — dòng cha = CSKD, dòng
   con = Lịch trình/HH.Dịch vụ). */
#page-report-dt-th-cskd .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-dt-th-cskd .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-dt-th-cskd .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-dt-th-cskd .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-dt-th-cskd .rcs-filter-multi { position: relative; min-width: 320px; flex: 1; }
#page-report-dt-th-cskd .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-report-dt-th-cskd .rcs-filter-multi .ac-box { width: 100%; }

#page-report-dt-th-cskd .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-dt-th-cskd .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
#page-report-dt-th-cskd .rth-row-schedule td {
  color: #475569;
  font-weight: 400;
}
#page-report-dt-th-cskd .rth-row-cskd td {
  font-weight: 700;
  background: #f8fafc;
}

/* ✅ MỚI (theo yêu cầu anh — 07/08/2026): "Báo cáo tổng hợp công nợ theo CSKD"
   (#page-report-congno-th) — DÙNG LẠI Y HỆT bố cục bộ lọc của 2 báo cáo trên (không có
   ô "Chọn CSKD" — báo cáo này cần nhìn TOÀN BỘ CSKD cùng lúc). */
#page-report-congno-th .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-congno-th .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-congno-th .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-congno-th .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-congno-th .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-congno-th .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

/* ✅ MỚI (theo yêu cầu anh — 08/08/2026): "Báo cáo tổng hợp công nợ theo Bộ phận"
   (#page-report-congno-bophan) — bố cục bộ lọc đơn giản (không có ô chọn nhiều) + màu
   dòng cha/con dùng CHUNG class ".rth-row-cskd"/".rth-row-schedule" (dòng cha = Bộ
   phận, dòng con = Cán bộ). */
#page-report-congno-bophan .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-congno-bophan .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-congno-bophan .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-congno-bophan .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-congno-bophan .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-congno-bophan .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
#page-report-congno-bophan .rth-row-schedule td {
  color: #475569;
  font-weight: 400;
}
#page-report-congno-bophan .rth-row-cskd td {
  font-weight: 700;
  background: #f8fafc;
}

/* ✅ MỚI (03/09/2026, theo yêu cầu anh Phong): "Báo cáo lỗ lãi theo Cơ sở kinh doanh"
   (#page-report-lo-lai-cskd) — bố cục bộ lọc giống các báo cáo khác (thêm select "Loại
   báo cáo"/"Chọn tháng"), 3 cấp dòng dữ liệu: CSKD (đậm, nền xám) / Lịch trình (đậm vừa,
   1 khối BookingBU) / dòng dịch vụ chi tiết (chữ thường) hoặc dòng phụ Điều chỉnh-Thuế-
   Phí (XANH NGHIÊNG, giống các báo cáo chi tiết khác). */
#page-report-lo-lai-cskd .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-lo-lai-cskd .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-lo-lai-cskd .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-lo-lai-cskd .rcs-filter input,
#page-report-lo-lai-cskd .rcs-filter select {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-lo-lai-cskd .rcs-filter select { min-width: 140px; }
#page-report-lo-lai-cskd .rcs-filter-multi { position: relative; min-width: 260px; flex: 1; }
#page-report-lo-lai-cskd .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-report-lo-lai-cskd .rcs-filter-multi .ac-box { width: 100%; }
#page-report-lo-lai-cskd .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-lo-lai-cskd .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
/* Dòng CSKD (cấp 1) — đậm, nền xám nhẹ. */
#page-report-lo-lai-cskd .rll-row-cskd td {
  font-weight: 700;
  background: #f1f5f9;
}
/* Dòng Lịch trình (cấp 2, = 1 khối BookingBU) — đậm vừa. */
#page-report-lo-lai-cskd .rll-row-lichtrinh td {
  font-weight: 600;
}
/* Dòng dịch vụ chi tiết (cấp 3, loại DICH_VU) — chữ thường. */
#page-report-lo-lai-cskd .rll-row-item td {
  color: #334155;
}
/* Dòng Điều chỉnh/Thuế cskd/Phí cskd (cấp 3, loại PHU) — xanh nghiêng, giống các báo cáo khác. */
#page-report-lo-lai-cskd .rll-row-adjust td {
  color: #16a34a;
  font-style: italic;
}
#page-report-lo-lai-cskd .rll-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
}
#page-report-lo-lai-cskd .rll-ngaygio {
  font-weight: 400;
  color: #64748b;
  font-size: 12px;
}

/* ✅ MỚI (04/09/2026, theo yêu cầu anh Phong): "Bảng giá thành" (#page-ban-gia-thanh) — bố
   cục bộ lọc DÙNG LẠI Y HỆT các báo cáo trên.
   ✅ SỬA (04/09/2026, đợt 2 — theo yêu cầu anh Phong): đổi sang bố cục 2 cột (".bgt-wrap")
   giống hệt màn "Thu tiền booking" — cột trái "DANH SÁCH" (dùng lại NGUYÊN các class
   ".pt-col/.pt-col-head/.pt-list-scroll/.pt-list-table/.pt-row-active" đã có sẵn, KHÔNG
   scope riêng theo #page-thu-tien-booking nên dùng lại thoải mái), cột phải hiện ĐÚNG 1
   bảng giá thành của dòng đang chọn bên trái. Màu dòng cột phải: "bgt-row-group" (cấp
   HH.Dịch vụ bôi đậm) -> "bgt-row-member" (cấp Thành viên, chữ thường) — giống hệt tôn ti
   "rll-row-lichtrinh/rll-row-item" ở Báo cáo Lỗ lãi.
   ✅ SỬA (04/09/2026, đợt 3 — theo yêu cầu anh Phong): bỏ CSKD khỏi cột trái — giờ mỗi dòng
   DANH SÁCH chỉ còn 1 Ngày (đã gộp hết CSKD ở backend, xem GiaThanhService). */
#page-ban-gia-thanh .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-ban-gia-thanh .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-ban-gia-thanh .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-ban-gia-thanh .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-ban-gia-thanh .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
/* Khung 2 cột (trái: DANH SÁCH Ngày+CSKD / phải: chi tiết bảng giá thành) — cùng "họ" với
   ".pt-wrap" (Thu tiền booking) nhưng chỉ 2 cột thay vì 3. */
#page-ban-gia-thanh .bgt-wrap {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 0;
  border: 1px solid #d7dee8;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
#page-ban-gia-thanh .bgt-wrap .pt-col { height: 640px; }
#page-ban-gia-thanh .bgt-wrap .rcs-table-wrap {
  flex: 1;
  overflow: auto;
  border: none;
  border-radius: 0;
}
#page-ban-gia-thanh .bgt-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
}
/* Dòng HH.Dịch vụ bôi đậm — đậm vừa, giống rll-row-lichtrinh. */
#page-ban-gia-thanh .bgt-row-group td {
  font-weight: 600;
  background: #f8fafc;
}
/* Dòng Thành viên — chữ thường, giống rll-row-item. */
#page-ban-gia-thanh .bgt-row-member td {
  color: #334155;
}

/* ✅ MỚI (theo yêu cầu anh — 07/08/2026): "Báo cáo tổng hợp công nợ theo Khách hàng"
   (#page-report-congno-khach) — DÙNG LẠI Y HỆT bố cục bộ lọc + màu dòng cha/con của các
   báo cáo trên. */
#page-report-congno-khach .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-congno-khach .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-congno-khach .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-congno-khach .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-congno-khach .rcs-filter-multi { position: relative; min-width: 320px; flex: 1; }
#page-report-congno-khach .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-report-congno-khach .rcs-filter-multi .ac-box { width: 100%; }
#page-report-congno-khach .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-congno-khach .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
#page-report-congno-khach .rth-row-schedule td {
  color: #475569;
  font-weight: 400;
}
#page-report-congno-khach .rth-row-cskd td {
  font-weight: 700;
  background: #f8fafc;
}

/* ✅ MỚI (11/08/2026, theo yêu cầu anh): "Phiếu đón khách" (#page-phieu-don-khach) — bố
   cục bộ lọc giống các báo cáo trên (Từ ngày/Đến ngày/Chọn khách hàng kiểu Báo cáo tổng
   hợp công nợ theo Khách hàng), chỉ đổi tên field cho khớp (Chọn ngày/Chọn Tài sản). */
#page-phieu-don-khach .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-phieu-don-khach .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-phieu-don-khach .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-phieu-don-khach .rcs-filter input,
#page-phieu-don-khach .rcs-filter select {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-phieu-don-khach .rcs-filter select { min-width: 160px; }
#page-phieu-don-khach .rcs-filter-multi { position: relative; min-width: 260px; flex: 1; }
#page-phieu-don-khach .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-phieu-don-khach .rcs-filter-multi .ac-box { width: 100%; }
/* ✅ MỚI (25/08/2026, theo yêu cầu anh Phong): ô "Chọn Lịch trình" đặt SÁT GÓC PHẢI hàng
   bộ lọc, tách hẳn khỏi cụm "Loại báo cáo"/"Chọn ngày"/"Chọn CSKD-Tài sản" bên trái — đẩy
   bằng margin-left:auto (không phụ thuộc độ rộng biến động của các ô đứng trước). */
#page-phieu-don-khach .rcs-filter-right { margin-left: auto; flex: 0 0 260px; }
#page-phieu-don-khach .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-phieu-don-khach .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

/* ✅ MỚI (11/08/2026, theo yêu cầu anh): "Đánh giá vận hành" (#page-danh-gia-van-hanh) —
   bố cục bộ lọc giống các báo cáo trên, thêm ô "select" Chọn tháng/năm (không phải input
   text) nên khai riêng 1 dòng CSS cho height/border khớp với các ô input cạnh nó. */
#page-danh-gia-van-hanh .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-danh-gia-van-hanh .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-danh-gia-van-hanh .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-danh-gia-van-hanh .rcs-filter input,
#page-danh-gia-van-hanh .rcs-filter select {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
#page-danh-gia-van-hanh .rcs-filter select { min-width: 180px; }
#page-danh-gia-van-hanh .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-danh-gia-van-hanh .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
#page-danh-gia-van-hanh .dgvh-row-total td {
  font-weight: 700;
  background: #f8fafc;
}

/* ✅ MỚI (theo yêu cầu anh — 07/08/2026): "Báo cáo chi tiết công nợ theo Khách hàng"
   (#page-report-congno-chitiet-khach) — bố cục bộ lọc giống các báo cáo trên, thêm màu
   riêng cho 4 loại dòng (Khách hàng/Booking/CSKD/dòng Điều chỉnh-Thuế-Phí xanh nghiêng). */
#page-report-congno-chitiet-khach .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-congno-chitiet-khach .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-congno-chitiet-khach .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-congno-chitiet-khach .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-congno-chitiet-khach .rcs-filter-multi { position: relative; min-width: 320px; flex: 1; }
#page-report-congno-chitiet-khach .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-report-congno-chitiet-khach .rcs-filter-multi .ac-box { width: 100%; }
#page-report-congno-chitiet-khach .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-congno-chitiet-khach .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
/* Dòng Khách hàng (cấp 1) — đậm, số La Mã, nền xám nhẹ phân tách rõ nhóm. */
#page-report-congno-chitiet-khach .rcc-row-khach td {
  font-weight: 700;
  background: #f1f5f9;
}
/* Dòng Booking (cấp 2) — đậm vừa, không nền, để phân biệt với dòng CSKD/chi tiết bên dưới. */
#page-report-congno-chitiet-khach .rcc-row-booking td {
  font-weight: 600;
}
/* Dòng khối CSKD (cấp 3) — đậm, nền trắng ngà nhạt. */
#page-report-congno-chitiet-khach .rcc-row-cskd td {
  font-weight: 700;
  background: #fafafa;
}
/* Dòng Cơ sở/HH.Dịch vụ (cấp 4, loại ITEM) — chữ thường. */
#page-report-congno-chitiet-khach .rcc-row-item td {
  color: #334155;
}
/* Dòng Điều chỉnh/Thuế/Phí (cấp 4, loại ADJUST) — XANH NGHIÊNG, đúng ảnh anh gửi. */
#page-report-congno-chitiet-khach .rcc-row-adjust td {
  color: #16a34a;
  font-style: italic;
}
/* Dòng lịch sử trả tiền — chữ nhạt, nền hơi khác để tách khỏi các dòng dịch vụ phía trên. */
#page-report-congno-chitiet-khach .rcc-row-payment td {
  color: #64748b;
  background: #fcfcfd;
}
#page-report-congno-chitiet-khach .rcc-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
}

/* ✅ MỚI (theo yêu cầu anh — 08/08/2026): "Báo cáo chi tiết doanh thu"
   (#page-report-dt-chitiet) — DÙNG LẠI Y HỆT bố cục + màu 4 loại dòng của "Báo cáo chi
   tiết công nợ theo Khách hàng" ở trên (báo cáo này KHÔNG có dòng lịch sử trả tiền —
   .rcc-row-payment không dùng tới ở đây, nhưng để nguyên rule cho gọn, không hại gì). */
#page-report-dt-chitiet .rcs-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
  margin-bottom: 14px;
}
#page-report-dt-chitiet .rcs-filter { display: flex; flex-direction: column; gap: 4px; }
#page-report-dt-chitiet .rcs-filter label { font-size: 12.5px; font-weight: 600; color: #475569; }
#page-report-dt-chitiet .rcs-filter input {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
}
#page-report-dt-chitiet .rcs-filter-multi { position: relative; min-width: 260px; flex: 1; }
#page-report-dt-chitiet .rcs-filter-multi input { cursor: pointer; background: #fff; width: 100%; }
#page-report-dt-chitiet .rcs-filter-multi .ac-box { width: 100%; }
#page-report-dt-chitiet .rcs-empty { padding: 24px; text-align: center; color: #64748b; }
#page-report-dt-chitiet .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}
#page-report-dt-chitiet .rcc-row-khach td {
  font-weight: 700;
  background: #f1f5f9;
}
#page-report-dt-chitiet .rcc-row-booking td {
  font-weight: 600;
}
#page-report-dt-chitiet .rcc-row-cskd td {
  font-weight: 700;
  background: #fafafa;
}
#page-report-dt-chitiet .rcc-row-item td {
  color: #334155;
}
#page-report-dt-chitiet .rcc-row-adjust td {
  color: #16a34a;
  font-style: italic;
}
#page-report-dt-chitiet .rcc-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
}

#page-report-dt-congsuat .rcs-empty { padding: 24px; text-align: center; color: #64748b; }

#page-report-dt-congsuat .rcs-table-wrap {
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
}

.rcs-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rcs-table th {
  position: sticky;
  top: 0;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  padding: 6px 8px;
  text-align: center;
  font-weight: 700;
  z-index: 1;
}
.rcs-table td {
  border: 1px solid #e2e8f0;
  padding: 5px 8px;
  vertical-align: middle;
}
.rcs-table .rcs-c-num { text-align: right; white-space: nowrap; }
.rcs-table .rcs-row-total { background: #f8fafc; font-weight: 700; color: #0f172a; }

/* =========================================================================
   ✅ SỬA (theo yêu cầu anh — 17/08/2026): modal "BẢNG CHỌN HH.DỊCH VỤ" ở màn Cung ứng
   giờ dùng CHUNG kết cấu/class ".booking-hhpick-*" với modal "CHỌN HH.DỊCH VỤ" bên
   Booking (xem #booking-hhpick-modal ở trên) — chia cột theo Nhóm, mỗi cột có ô tìm
   kiếm + cuộn riêng, tích chọn nhiều bằng checkbox, thay cho lưới ô bấm chọn cũ. Vì
   dùng chung class nên KHÔNG cần thêm CSS riêng gì nữa ở đây (bên Booking rộng cột ra
   sau này thì bên đây tự rộng theo, không phải sửa 2 chỗ).
   ========================================================================= */

/* Tên HH.Dịch vụ ở bảng Cung ứng — cho bấm mở modal (chỉ dòng KHÔNG có thành viên). */
/* ✅ SỬA (theo yêu cầu anh — 06/08/2026): chữ màu ĐEN, bỏ in nghiêng (trước đây kế
   thừa "font-style: italic" từ ".dsb-c-sub" dùng chung nhiều màn khác — giờ chỉ tắt
   RIÊNG ở #page-cung-ung, không đụng màn khác). Vẫn giữ gạch chân chấm để biết là bấm
   được + đổi màu xanh khi hover cho dễ nhận biết. */
#page-cung-ung .dsb-table .dsb-c-sub{ font-style: normal; }
#page-cung-ung .cu-hh-name-clickable{
  cursor: pointer; color: #0f172a; text-decoration: underline dotted;
}
#page-cung-ung .cu-hh-name-clickable:hover{ color: var(--blue-dark, #1a5fb4); }
/* ✅ MỚI (theo yêu cầu anh): phần HH.Dịch vụ GỐC hiện trong ngoặc (sau khi Đổi) — màu
   vàng, để phân biệt với tên HIỆN TẠI (màu đen ở trên). */
#page-cung-ung .cu-hh-name-original{ color: #b45309; }
/* ✅ MỚI (theo yêu cầu anh): dòng HH.Dịch vụ được "Thêm" (ADD, không có gốc để đối
   chiếu) — hiện NGUYÊN DÒNG màu vàng để phân biệt với dòng gốc/dòng đã Đổi. */
#page-cung-ung .cu-hh-name-clickable.cu-hh-name-added,
#page-cung-ung .cu-hh-name-clickable.cu-hh-name-added:hover{ color: #b45309; }
/* ✅ MỚI (theo yêu cầu anh 17/08/2026): dòng Ghi chú (từ ô "Ghi chú" bên Kèm theo) hiện
   xuống dòng riêng bên dưới tên HH.Dịch vụ trong bảng Cung ứng.
   ⚠️ SỬA (theo yêu cầu anh 17/08/2026 — lần 2, "chữ đen, đang bị mờ"): đổi từ màu xám/chữ
   nghiêng sang chữ ĐEN đậm rõ như tên chính ở trên (không còn mờ).
   ⚠️ SỬA (theo yêu cầu anh 17/08/2026 — lần 3, đồng bộ cỡ chữ 13px): bỏ cỡ chữ riêng
   (12px) — dùng chung đúng 13px như mọi chữ khác trong bảng, chỉ còn khác ở việc xuống
   dòng riêng để phân biệt với dòng tên. */
#page-cung-ung .cu-hh-name-note{
  display: inline-block; color: #0f172a; font-size: 13px; text-decoration: none; font-style: normal;
}