@charset "UTF-8";
/* Override/tinh chỉnh theme TourKit trên nền Vuexy theme-default (primary tím #7367f0).
   Vuexy default đã là tím nên phần lớn để trống; đắp dần khi cần. */
.app-brand-logo b { color: var(--bs-primary); }

/* ===== Bù các biến màu Bootstrap mà bản Vuexy này KHÔNG khai báo =====
   Kiểm tra thực tế trên trình duyệt: --bs-heading-color, --bs-secondary-color, --bs-card-bg,
   --bs-tertiary-bg đều RỖNG. Mọi rule viết `color: var(--bs-heading-color)` vì thế im lặng rơi
   về màu kế thừa — chữ chính và chữ phụ ra CÙNG một màu, mất hẳn tầng bậc; tệ hơn là ở trong
   những khối theme tô nền tối (slide Swiper) thì kế thừa luôn màu TRẮNG và chữ biến mất.
   Khai báo một lần ở đây, lấy đúng giá trị theme đang dùng, để mọi chỗ đã viết chạy như ý.
   (Sửa ở đây thay vì sửa file vendor để không mất khi cập nhật theme.) */
:root {
  --bs-heading-color: #5d596c;      /* màu tiêu đề h1..h6 của theme */
  --bs-secondary-color: #a5a3ae;    /* .text-muted */
  --bs-card-bg: #fff;
  --bs-tertiary-bg: #f8f7fa;        /* nền trang — dùng làm nền chìm cho ô/thanh phụ */
}
html.dark-style {
  --bs-heading-color: #cfd3ec;
  --bs-secondary-color: #7983bb;
  --bs-card-bg: #2f3349;
  --bs-tertiary-bg: #25293c;
}

/* Số tiền/số lượng ở thẻ thống kê: KHÔNG được ngắt giữa số.
   Trên mobile "94,323,595,000" từng bị bẻ thành "94,323,595," + "000" — đọc ra số khác hẳn.
   Giữ NGUYÊN số đầy đủ (không rút gọn kiểu "94 tỷ" vì đây là số liệu tài chính), chỉ thu nhỏ
   cỡ chữ trên màn hẹp cho vừa khung. */
.tk-num { white-space: nowrap; }
@media (max-width: 767.98px) {
  .tk-num { font-size: 1rem; }
}
@media (max-width: 399.98px) {
  .tk-num { font-size: .9rem; }
}
/* 1400-1599: mốc xxl vừa bật 6 thẻ/hàng nên thẻ hẹp nhất ở đây — hạ 1 nấc cho số vừa khung. */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  .tk-num { font-size: 1rem; }
}

/* Bỏ giới hạn bề ngang layout: theme Vuexy khoá .container-* ở nhiều mốc (đến 1440px) —
   dùng trọn màn hình, màn rộng không còn 2 dải trống hai bên. Override tại đây thay vì sửa
   file vendor để không mất khi cập nhật theme. */
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm,
.container {
  max-width: none;
}
/* Navbar tách rời có selector 3 class (.layout-navbar.navbar-detached.container-xxl) nên
   thắng rule 1 class ở trên — phải gỡ riêng, nếu không thanh trên vẫn co lại 1392px. */
.layout-navbar.navbar-detached.container-xxl,
.layout-navbar.navbar-detached {
  max-width: none;
}

/* ===== Panel trượt phải (offcanvas) sửa/thêm: ĐẦU và CHÂN đứng yên, chỉ RUỘT cuộn =====
   Trước đây nút Lưu/Huỷ nằm cuối form nên form dài là nút trôi khỏi màn — người dùng phải cuộn
   xuống đáy mới bấm lưu được. Quy ước: .offcanvas-body.tk-oc > form > .tk-oc-fields (cuộn)
   + .tk-oc-actions (ghim đáy). Tiêu đề đã sẵn cố định vì .offcanvas-header là anh em của body. */
.offcanvas-body.tk-oc {
  display: flex; flex-direction: column; min-height: 0;
  padding: 0; overflow: hidden;
}
/* Form là cột co giãn; panel không có form (xem nhanh, tạo phiếu) thì chính body làm cột đó. */
.offcanvas-body.tk-oc > form {
  display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto;
}
.tk-oc-fields {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem;
}
.tk-oc-actions {
  flex: 0 0 auto; display: flex; align-items: center; gap: .5rem;
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-card-bg, #fff);
}
/* Cuộn tới đâu cũng thấy còn nội dung phía dưới: viền trên của chân panel đủ nói điều đó,
   thêm bóng nhẹ cho tách bạch khi danh sách dài. */
.tk-oc-actions { box-shadow: 0 -.25rem .75rem rgba(var(--bs-primary-rgb), .06); }
.tk-oc-actions .me-2:last-child { margin-right: 0 !important; }

/* ===== Nút "?" cạnh tiêu đề trang — giới thiệu tính năng + đường tới tài liệu luồng nghiệp vụ =====
   Là <button> chứ không phải <span> để tab tới được bằng bàn phím; bỏ hết vỏ nút mặc định đi vì nó
   phải trông như một dấu hỏi mờ cạnh tiêu đề, không phải một nút bấm tranh chỗ với tiêu đề. */
.tk-flow-help {
  border: 0; background: none; padding: 0; margin-left: .375rem;
  line-height: 1; vertical-align: middle;
  color: var(--bs-secondary-color); opacity: .65;
  transition: color .15s ease, opacity .15s ease;
}
.tk-flow-help:hover, .tk-flow-help:focus-visible { color: var(--bs-primary); opacity: 1; }
.tk-flow-help i { font-size: 1rem; }
/* Cỡ chữ tiêu đề h4 làm icon to quá — neo theo cỡ chữ thường cho cân. */
h1 .tk-flow-help i, h2 .tk-flow-help i, h3 .tk-flow-help i, h4 .tk-flow-help i { font-size: .875rem; }

.popover.tk-flow-pop { max-width: 22rem; }
.popover.tk-flow-pop .popover-header { font-size: .875rem; font-weight: 600; }
.popover.tk-flow-pop .popover-body { font-size: .8125rem; line-height: 1.5; }

/* ===== Panel sửa RỘNG chia hai cột: trái NHẬP LIỆU · phải NGỮ CẢNH (trợ lý AI + trao đổi) =====
   Dùng cho màn có khối phụ trợ dài. Nhồi tất cả vào một cột hẹp thì form bị đẩy dài ra và người
   dùng phải cuộn qua hết thẻ AI lẫn luồng trao đổi mới xuống tới chỗ sửa — trong khi hai thứ đó
   là để ĐỌC chứ không phải để điền.
   Hai cột cuộn RIÊNG: đọc hết nhận định AI bên phải mà form bên trái vẫn đứng yên.
   Đây là class riêng, KHÔNG đụng .tk-oc-fields vì 46 trang khác đang dùng khuôn một cột. */
/* Ghép .offcanvas để thắng .offcanvas-end{width:400px} của Bootstrap — cùng 0,1,0 thì thứ tự nạp
   quyết định, và tourkit.css nạp TRƯỚC bootstrap nên chỉ mình .tk-oc-wide sẽ thua. */
.offcanvas.tk-oc-wide { width: 80%; max-width: 100%; }

.tk-oc-split { display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tk-oc-split > .tk-oc-col {
  flex: 1 1 0; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem;
}
/* Cột ngữ cảnh hẹp hơn và nền chìm — để mắt nhận ra ngay đây không phải chỗ điền. */
.tk-oc-split > .tk-oc-aside {
  flex: 0 0 40%;
  border-left: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg, #f8f7fa);
}
/* Khối đứng đầu cột phải thì bỏ vạch ngăn trên: vạch đó sinh ra để tách nó khỏi form ở khuôn cũ. */
.tk-oc-aside > .tk-oc-comments:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Thẻ AI trong cột ngữ cảnh: bỏ vỏ thẻ đi. Cột đã có padding 1.5rem, .card-body lại thêm 1.5rem
   nữa → lề đôi, nội dung mất 66px bề ngang trên tổng 437px. Cùng cách đã dùng cho .tk-cmt-card. */
.tk-oc-aside .tk-ai-review-card { border: 0; box-shadow: none; background: transparent; }
.tk-oc-aside .tk-ai-review-card > .card-body { padding: 0; }

/* Tab của thẻ AI: mỗi loại việc một tab, chia đều bề ngang cột. */
.tk-ai-tabs { flex-wrap: nowrap; gap: 0; }
/* Khử khoảng âm của theme: core.css có `.card .nav.nav-tabs { margin: 0 -1.5rem }` để tab chạy
   full-bleed theo padding 1.5rem của thẻ. Thẻ này đã bỏ padding nên khoảng âm đó đẩy tab lòi ra
   48px và sinh thanh cuộn ngang cho cả cột. Phải viết đủ 4 lớp mới thắng được 0,3,0 của nó. */
.card .nav.nav-tabs.tk-ai-tabs { margin-left: 0; margin-right: 0; }
.tk-ai-tabs .nav-item { flex: 1 1 0; min-width: 0; }
.tk-ai-tabs .nav-link {
  width: 100%; padding: .5rem .25rem; border: 0; border-bottom: 2px solid transparent;
  background: none; font-size: .8125rem; font-weight: 500; color: var(--bs-secondary-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-ai-tabs .nav-link:hover { color: var(--bs-primary); }
.tk-ai-tabs .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: none; }

/* MOBILE — dưới lg không đủ chỗ cho hai cột: xếp dọc, panel chiếm trọn bề ngang, và trả việc cuộn
   về MỘT khối chung (hai vùng cuộn lồng nhau trên màn cảm ứng là cái bẫy rất khó thao tác). */
@media (max-width: 991.98px) {
  .offcanvas.tk-oc-wide { width: 100%; }
  .tk-oc-split { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .tk-oc-split > .tk-oc-col { overflow: visible; padding: 1.25rem; }
  .tk-oc-split > .tk-oc-aside { flex: none; border-left: 0; border-top: 1px solid var(--bs-border-color); }
}

/* ===== Bàn làm việc ===== */

/* Thẻ dashboard: MỘT khối liền, tiêu đề và nội dung KHÔNG bị kẻ ngang cắt đôi.
   (.tk-surface của màn danh sách cố ý có kẻ ngăn giữa các vùng — dùng nhầm sang đây thì mỗi thẻ
   nhìn như hai hộp chồng lên nhau.) */
.tk-card {
  --tk-card-pad: 1.25rem;
  display: flex; flex-direction: column;
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color);
  border-radius: .75rem; padding: var(--tk-card-pad);
  overflow: hidden;          /* lịch/biểu đồ kéo sát mép không được đè ra ngoài góc bo */
}
.tk-card-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: 1rem;
}
.tk-card-head h6 { color: var(--bs-heading-color); font-weight: 600; }
.tk-card-body { flex: 1 1 auto; min-height: 0; }
/* Biến thể PHẲNG: vẫn là thẻ (đệm, nền) nhưng bỏ viền + bo — dùng cho dải số phụ nằm ngay dưới
   hàng thẻ chính, để không có hai lớp hộp chồng nhau. */
.tk-card--flat { border: 0; padding: 1.25rem 0; background: transparent; }

/* FullCalendar đặt trong .tk-card: theme kéo khung lịch ra sát mép bằng `.fc-view-harness
   { margin: 0 -1.5rem }` — đúng bằng đệm 1.5rem của .card-body mà nó vốn thiết kế cho.
   Thẻ ở đây đệm 1.25rem nên lịch LÒI ra khỏi viền thẻ mỗi bên vài pixel.
   Kéo đúng bằng đệm của thẻ → cạnh lịch trùng khít viền thẻ. */
/* FullCalendar gắn class .fc lên CHÍNH #cal (không tạo thẻ .fc con) — viết `#cal .fc .fc-view-harness`
   là không khớp gì cả. */
.tk-card #cal .fc-view-harness {
  margin: 0 -1.25rem -1.25rem !important;   /* khớp đúng đệm 1.25rem của .tk-card */
}

.tk-datechip {
  display: inline-flex; align-items: center; padding: .5rem .875rem;
  background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color);
  border-radius: .5rem; font-size: .875rem; color: var(--bs-body-color); white-space: nowrap;
}

/* Thẻ số liệu: tự chia cột theo bề ngang màn — 5 thẻ trên màn rộng, 2 thẻ trên điện thoại,
   không phải khai báo col-* cho từng mốc. */
.tk-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.tk-kpi {
  background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color);
  border-radius: .75rem; padding: 1.125rem 1.25rem;
}
.tk-kpi-ic {
  width: 40px; height: 40px; border-radius: .625rem; display: inline-flex;
  align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: .875rem;
}
.tk-kpi-label { font-size: .8125rem; color: var(--bs-secondary-color); }
.tk-kpi-value {
  font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
  color: var(--bs-heading-color); font-variant-numeric: tabular-nums;
}
.tk-kpi-sub { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; margin-top: .375rem; }
.tk-big { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }

/* Dải SỐ THAM CHIẾU (Tổng quan): những con số cần có mặt nhưng không phải thứ nhìn đầu tiên.
   Gom vào một dải mảnh thay vì mỗi số một thẻ to — 12 thẻ ngang hàng thì không số nào nổi lên. */
/* KHÔNG đóng khung, cũng KHÔNG kẻ dọc: lưới ô kẻ viền đọc ra như bảng tính, mà đây chỉ là dải
   số phụ. Khoảng trắng đủ tách các mục; nhãn nhỏ mờ ở trên, số đậm ở dưới là đã thành cặp. */
.tk-figures {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem 2rem;
}
.tk-figure { display: flex; flex-direction: column; gap: .25rem; }
.tk-figure small { font-size: .75rem; color: var(--bs-secondary-color); line-height: 1.2; }
.tk-figure b {
  font-size: 1.125rem; font-weight: 600; color: var(--bs-heading-color);
  font-variant-numeric: tabular-nums; letter-spacing: -.015em; line-height: 1.2;
}

/* Thanh XẾP CHỒNG một dòng (vd tình trạng thanh toán của đơn): ba con số rời buộc phải tự chia
   nhẩm mới biết tỉ trọng; một thanh chia ba khúc là thấy ngay. */
.tk-split-label { display: flex; justify-content: space-between; font-size: .75rem; margin: 1rem 0 .375rem; }
.tk-split {
  display: flex; height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--bs-tertiary-bg, #f1f0f2);
}
.tk-split > span { display: block; height: 100%; }
.tk-split > span + span { border-left: 2px solid var(--bs-card-bg, #fff); }

/* ===== Bảng XẾP HẠNG (top khách hàng · chiến binh sales) =====
   Bảng số trơn buộc phải đọc từng dòng rồi tự so. Ở đây thứ hạng, mặt người và ĐỘ DÀI THANH
   nói ngay ai hơn ai; con số chỉ để xác nhận. */
.tk-rank { display: flex; flex-direction: column; }
.tk-rank-row {
  display: flex; align-items: center; gap: .75rem; padding: .625rem .25rem;
  text-decoration: none; color: var(--bs-body-color); border-radius: .5rem;
  border-bottom: 1px solid var(--bs-border-color);
}
.tk-rank-row:last-child { border-bottom: 0; }
a.tk-rank-row:hover { color: var(--bs-body-color); background: rgba(var(--bs-primary-rgb), .05); }
.tk-rank-no {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--bs-tertiary-bg, #f1f0f2); color: var(--bs-secondary-color);
}
/* Ba hạng đầu tô màu thương hiệu — phần thưởng của bảng xếp hạng là được nhìn thấy. */
.tk-rank-no.is-top { background: rgba(var(--bs-primary-rgb), .16); color: var(--bs-primary); }
.tk-rank-av {
  width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 600; letter-spacing: .3px;
}
.tk-rank-main { display: flex; flex-direction: column; gap: .3rem; min-width: 0; flex: 1 1 auto; }
.tk-rank-main b {
  font-weight: 500; font-size: .875rem; color: var(--bs-heading-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-rank-bar { display: block; height: 5px; border-radius: 999px; background: var(--bs-tertiary-bg, #f1f0f2); overflow: hidden; }
.tk-rank-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--bs-primary); }
.tk-rank-val { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.tk-rank-val b { font-size: .875rem; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }
.tk-rank-val small { font-size: .7rem; }

/* ===== Hiệu suất chi nhánh — mỗi chi nhánh một khối, thanh = tỉ lệ ĐÃ THU ===== */
.tk-branches { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .75rem; }
.tk-branch { border: 1px solid var(--bs-border-color); border-radius: .625rem; padding: .875rem 1rem; }
.tk-branch-head { display: flex; align-items: center; gap: .625rem; margin-bottom: .75rem; }
.tk-branch-head b { font-size: .9375rem; color: var(--bs-heading-color); }
.tk-branch-head > b.ms-auto { font-variant-numeric: tabular-nums; }
.tk-branch-head small { font-size: .75rem; }
.tk-branch-bar { height: 6px; border-radius: 999px; background: var(--bs-tertiary-bg, #f1f0f2); overflow: hidden; }
.tk-branch-bar > span { display: block; height: 100%; border-radius: 999px; }
.tk-branch-foot {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .75rem;
  font-size: .75rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums;
}

/* ===== Lịch hẹn trên Tổng quan — quét được, việc quá hạn nổi lên ===== */
.tk-cares { display: flex; flex-direction: column; }
.tk-care {
  display: flex; align-items: center; gap: .75rem; padding: .625rem .5rem;
  border-bottom: 1px solid var(--bs-border-color); border-radius: .5rem;
}
.tk-care:last-child { border-bottom: 0; }
.tk-care.is-late { background: rgba(var(--bs-danger-rgb), .04); }
.tk-care-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tk-care-main b { font-weight: 500; font-size: .875rem; color: var(--bs-heading-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-care-main small { font-size: .75rem; color: var(--bs-secondary-color); }
.tk-care-when { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; min-width: 5.5rem; }
.tk-care-when b { font-size: .8125rem; }
.tk-care-when small { font-size: .7rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

/* Bảng số liệu trong thẻ tổng quan: số phải thẳng cột mới so được bằng mắt. */
.tk-card .table > :not(caption) > * > * { padding-left: 0; padding-right: 0; }
.tk-card .table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: var(--bs-secondary-color); font-weight: 600; }
.tk-card .table td.text-end, .tk-card .table th.text-end { font-variant-numeric: tabular-nums; }
.tk-card .table > :not(:first-child) { border-top-width: 1px; }

/* Dải số phụ dưới biểu đồ / dưới dải lịch. */
.tk-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .75rem; margin-top: 1rem; }
.tk-mini {
  border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .625rem .75rem;
  display: flex; flex-direction: column; gap: .125rem;
}
.tk-mini small { font-size: .75rem; color: var(--bs-secondary-color); }
.tk-mini b { font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }

/* Danh sách "cần xử lý": cả dòng bấm được, số đếm nằm cuối. */
.tk-todo-list { display: flex; flex-direction: column; }
.tk-todo {
  display: flex; align-items: center; gap: .75rem; padding: .75rem 0; text-decoration: none;
  border-bottom: 1px solid var(--bs-border-color); color: inherit;
}
.tk-todo:last-child { border-bottom: 0; }
.tk-todo:hover { color: inherit; }
.tk-todo:hover .tk-todo-text b { color: var(--bs-primary); }
.tk-todo-ic, .tk-line-ic {
  width: 34px; height: 34px; border-radius: .5rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.tk-todo-text, .tk-line-text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.tk-todo-text b, .tk-line-text b {
  font-weight: 500; font-size: .875rem; color: var(--bs-heading-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-todo-text small, .tk-line-text small {
  font-size: .75rem; color: var(--bs-secondary-color);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tk-more { display: block; margin-top: .875rem; text-align: center; font-size: .875rem; }

/* Danh sách chung của các thẻ (việc, phiếu, thông báo). */
.tk-list { display: flex; flex-direction: column; }
.tk-line { display: flex; align-items: center; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--bs-border-color); }
.tk-line:last-child { border-bottom: 0; }
.tk-line-money { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); flex-shrink: 0; }
.tk-tabs .nav-link { padding: .375rem .75rem; font-size: .875rem; }

/* Lịch hẹn tuần này: gom theo NGÀY, mỗi ngày một đầu mục dính trên khi cuộn.
   Danh sách phẳng 7 ngày trộn lẫn thì phải tự dò xem cái nào của hôm nay. */
.tk-week { display: flex; flex-direction: column; max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }
.tk-week-day + .tk-week-day { margin-top: .25rem; }
.tk-week-head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: .5rem;
  padding: .375rem 0; background: var(--bs-card-bg, #fff);
  border-bottom: 1px solid var(--bs-border-color);
}
.tk-week-name { font-size: .8125rem; font-weight: 600; color: var(--bs-heading-color); text-transform: capitalize; }
.tk-week-date { font-size: .75rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.tk-week-head .badge { margin-left: auto; }
.tk-week-day.is-today .tk-week-name { color: var(--bs-primary); }
.tk-week-item {
  display: flex; align-items: flex-start; gap: .625rem; padding: .5rem .25rem;
  text-decoration: none; color: var(--bs-body-color); border-radius: .375rem;
}
.tk-week-item:hover { color: var(--bs-body-color); background: rgba(var(--bs-primary-rgb), .06); }
.tk-week-item .tk-time-dot { margin-top: .45rem; }

/* Lịch hôm nay: mốc giờ · chấm màu · nội dung. */
.tk-time { display: flex; flex-direction: column; }
.tk-time-row { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--bs-border-color); }
.tk-time-row:last-child { border-bottom: 0; }
.tk-time-at { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); width: 4rem; flex-shrink: 0; }
.tk-time-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: .375rem; flex-shrink: 0; }
.tk-time-text { display: flex; flex-direction: column; min-width: 0; }
.tk-time-text b { font-weight: 500; font-size: .875rem; color: var(--bs-heading-color); }
.tk-time-text small { font-size: .75rem; color: var(--bs-secondary-color); }

/* Dải thẻ tour: SLIDE lật bằng hai nút mũi tên (Swiper), không bẻ dòng. */
.tk-tour-slider { overflow: hidden; }
.tk-tour-slider .swiper-slide { width: 15.5rem; height: auto; }
.tk-tour-slider .swiper-slide > .tk-tour { height: 100%; }
/* Nút lật khi hết dải: Swiper gắn class `disabled` — làm mờ hẳn cho biết không lật thêm được. */
#tour-prev.disabled, #tour-next.disabled { opacity: .4; pointer-events: none; }
/* Dải màu thay ảnh điểm đến: model chuyến chưa có trường ảnh nên KHÔNG chèn ảnh giả. */
.tk-tour-cover {
  display: flex; align-items: center; justify-content: center; gap: .375rem;
  margin-top: .75rem; height: 4.5rem; border-radius: .5rem;
  font-size: .8125rem; font-weight: 500;
}
.tk-tour-cover > i { font-size: 1.1rem; }
.tk-rail { display: flex; gap: .875rem; overflow-x: auto; padding-bottom: .5rem; }
.tk-tour {
  flex: 0 0 15rem; display: flex; flex-direction: column; gap: .25rem;
  padding: .875rem 1rem; text-decoration: none;
  /* KHÔNG dùng `color: inherit`: swiper.css của theme đặt màu TRẮNG cho .swiper-slide,
     thẻ nằm trong slide sẽ thừa kế màu trắng và chữ biến mất trên nền trắng. */
  color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: .625rem;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.tk-tour:hover { color: var(--bs-body-color); border-color: rgba(var(--bs-primary-rgb), .35); box-shadow: 0 .35rem .75rem rgba(var(--bs-primary-rgb), .1); }
.tk-tour-date { font-size: .75rem; font-weight: 600; color: var(--bs-primary); }
.tk-tour-name { font-size: .9375rem; line-height: 1.3; color: var(--bs-heading-color); }
.tk-tour-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; font-size: .75rem; color: var(--bs-secondary-color); }

/* Thanh ngang top công nợ. */
.tk-bars { display: flex; flex-direction: column; gap: .75rem; }
.tk-bar-top { display: flex; justify-content: space-between; gap: .75rem; font-size: .8125rem; margin-bottom: .25rem; }
.tk-bar-top b { font-variant-numeric: tabular-nums; color: var(--bs-heading-color); flex-shrink: 0; }
.tk-bar-track { height: 8px; border-radius: 999px; background: var(--bs-tertiary-bg, rgba(0, 0, 0, .05)); overflow: hidden; }
.tk-bar-track > span { display: block; height: 100%; border-radius: 999px; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; font-size: .75rem; color: var(--bs-secondary-color); }
.tk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: .375rem; }

/* Dải 7 ngày khởi hành. */
.tk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .5rem; }
.tk-day { display: flex; flex-direction: column; align-items: center; gap: .25rem; text-align: center; }
.tk-day small { font-size: .7rem; color: var(--bs-secondary-color); text-transform: capitalize; }
.tk-day > span { font-size: .7rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.tk-day b {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; font-size: .875rem; font-variant-numeric: tabular-nums;
}

/* ===== Bảng Kanban — bám khuôn app-kanban của theme, chỉ chỉnh cho hợp mặt trắng tk-surface =====
   jKanban mặc định tô cột màu xám #e2e4e6 và nhồi padding 20px: đặt trên mặt trắng nhìn rất nặng. */
/* Cuộn kiểu bảng công việc thật: khung chỉ cuộn NGANG, mỗi cột tự cuộn DỌC → tiêu đề cột luôn
   nhìn thấy. Để cả khung cuộn dọc thì kéo xuống là mất hết tên cột, không biết đang ở cột nào. */
.app-kanban .kanban-wrapper { height: auto; padding: 0 0 .25rem; overflow-x: auto; overflow-y: hidden; }
.app-kanban .kanban-container { align-items: stretch; height: 100%; }
.app-kanban .kanban-board { background: transparent; display: flex; flex-direction: column; height: 100%; }
.app-kanban .kanban-board > header { padding: 0 .25rem .75rem; font-size: 1rem; flex: 0 0 auto; }
.app-kanban .kanban-board .kanban-title-board {
  display: flex; align-items: center; width: 100%; max-width: none;
  font-size: .9375rem; font-weight: 600; color: var(--bs-heading-color);
}
.tk-kb-dot { width: 8px; height: 8px; border-radius: 50%; margin-right: .5rem; flex-shrink: 0; }
.tk-kb-dot + span, .app-kanban .kanban-title-board .badge { margin-left: auto; }
.app-kanban .kanban-board .kanban-drag {
  padding: 0 .25rem 0 0; min-height: 4rem;
  flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain;
}
/* Thẻ: dùng đúng bề mặt của thẻ trong theme (nền, viền mảnh, bo góc) + nhấc lên khi rê chuột. */
.app-kanban .kanban-item {
  width: auto; padding: .875rem 1rem; margin-bottom: .75rem;
  background: var(--bs-card-bg, #fff);
  border: 1px solid var(--bs-border-color); border-radius: .5rem;
  box-shadow: 0 .125rem .25rem rgba(var(--bs-black-rgb, 0, 0, 0), .04);
  transition: box-shadow .15s ease-in-out, transform .1s ease-in-out, border-color .15s ease-in-out;
}
.app-kanban .kanban-item:hover {
  border-color: rgba(var(--bs-primary-rgb), .35);
  box-shadow: 0 .35rem .75rem rgba(var(--bs-primary-rgb), .12);
}
.app-kanban .kanban-item:active { transform: scale(.995); }
.app-kanban .kanban-item .kanban-text {
  display: block; font-weight: 500; line-height: 1.35; color: var(--bs-heading-color);
}
.app-kanban .kanban-item .item-badges .badge { font-size: .6875rem; }
.tk-kb-meta {
  margin-top: .25rem; font-size: .8125rem; color: var(--bs-secondary-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tk-kb-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .625rem; padding-top: .625rem; border-top: 1px solid var(--bs-border-color);
  font-size: .8125rem;
}
/* Cột rỗng vẫn phải nhìn ra là một cột thả được, không để khoảng trắng trơ. */
.app-kanban .kanban-drag:empty::after {
  content: "Chưa có mục nào"; display: block; padding: 1.25rem .5rem; text-align: center;
  font-size: .8125rem; color: var(--bs-secondary-color);
  border: 1px dashed var(--bs-border-color); border-radius: .5rem;
}

/* ===== Ô soạn thảo có định dạng (Quill) — mặc định Quill viền vuông, lệch hẳn với .form-control ===== */
.tk-rte .ql-toolbar.ql-snow {
  border: 1px solid var(--bs-border-color); border-bottom: 0;
  border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
  background: var(--bs-tertiary-bg, rgba(0, 0, 0, .02));
}
.tk-rte .ql-container.ql-snow {
  border: 1px solid var(--bs-border-color);
  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
  font-family: inherit; font-size: .9375rem;
}
.tk-rte .ql-editor { min-height: inherit; }
.tk-rte .ql-editor.ql-blank::before { color: var(--bs-secondary-color); font-style: normal; }
/* Bảng chọn của thanh công cụ nằm trong panel trượt — cho nổi lên trên mọi thứ trong panel. */
.tk-rte .ql-snow .ql-picker-options { z-index: 3; }

/* ── Chuông thông báo trên navbar ────────────────────────────────────────────
   Theme đặt sẵn max-height cho .dropdown-notifications-list nhưng để PerfectScrollbar lo phần
   cuộn (khởi tạo lúc tải trang, trong khi danh sách của ta nạp bằng AJAX sau đó nên PS không cập
   nhật kịp). Dùng cuộn gốc của trình duyệt cho chắc. */
.tk-bell-list { max-height: 22rem; overflow-y: auto; overflow-x: hidden; display: block; }
.tk-bell-list .list-group-item { border-left: 0; border-right: 0; }
/* Dòng chưa đọc nổi hơn một chút để liếc là thấy. */
.dropdown-notifications-item:not(.marked-as-read) { background: var(--bs-tertiary-bg, #f8f7fa); }
.dropdown-notifications-item:not(.marked-as-read) h6 { font-weight: 600; }
/* Theme đặt min-width 22rem cho dropdown navbar — trên máy hẹp sẽ tràn ra ngoài màn hình. */
@media (max-width: 575.98px) {
  #tk-bell .dropdown-menu { min-width: 0; width: calc(100vw - 2rem); }
}

/* ── Luồng trao đổi (bình luận) gắn vào màn chi tiết ─────────────────────── */
.tk-cmt-list { display: flex; flex-direction: column; gap: 1rem; }
.tk-cmt { display: flex; gap: .75rem; }
.tk-cmt-ava {
  flex: 0 0 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .8125rem; font-weight: 600;
  background: var(--bs-tertiary-bg, #f8f7fa); color: var(--bs-heading-color);
}
.tk-cmt-body { flex: 1 1 auto; min-width: 0; }
.tk-cmt-head { display: flex; align-items: center; gap: .5rem; }
.tk-cmt-author { font-weight: 600; font-size: .875rem; }
.tk-cmt-time { color: var(--bs-secondary-color); font-size: .75rem; }
/* Nút xoá chỉ hiện khi rê vào dòng — bớt nhiễu cho một luồng dài. */
.tk-cmt-del { margin-left: auto; opacity: 0; transition: opacity .12s; }
.tk-cmt:hover .tk-cmt-del, .tk-cmt-del:focus-visible { opacity: 1; }
/* Ghi chú hay có mã đơn/số điện thoại dài — cho xuống dòng thay vì tràn ngang. */
.tk-cmt-text { font-size: .9375rem; overflow-wrap: anywhere; }
/* @nhắc: ô gợi ý nhân viên + tên đã nhắc trong nội dung */
.tk-cmt-input { position: relative; }
.tk-cmt-at-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  margin-top: 2px; max-height: 15rem; overflow-y: auto;
  background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius); box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.12);
}
.tk-cmt-at-item {
  display: flex; align-items: baseline; gap: .5rem; width: 100%;
  padding: .5rem .75rem; border: 0; background: none; text-align: left; font-size: .875rem;
}
.tk-cmt-at-item:hover, .tk-cmt-at-item.active { background: var(--bs-tertiary-bg, #f8f7fa); }
.tk-cmt-at-name { font-weight: 500; }
.tk-cmt-at-dept { color: var(--bs-secondary-color); font-size: .75rem; margin-left: auto; }
.tk-cmt-at { color: var(--bs-primary); font-weight: 500; }
/* Luồng trao đổi khi nằm trong offcanvas sửa: tách khỏi form phía trên bằng một đường kẻ,
   và bỏ viền card (đã có viền của offcanvas rồi, hai lớp viền trông nặng). */
.tk-oc-comments { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--bs-border-color); }
.tk-oc-comments .tk-cmt-card { border: 0; box-shadow: none; }
.tk-oc-comments .tk-cmt-card > .card-header { padding-left: 0; padding-right: 0; }
.tk-oc-comments .tk-cmt-card > .card-body { padding-left: 0; padding-right: 0; padding-bottom: 0; }
/* Ảnh đính kèm trong bình luận */
.tk-cmt-imgs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tk-cmt-imgs img {
  width: 7.5rem; height: 7.5rem; object-fit: cover;
  border-radius: var(--bs-border-radius); border: 1px solid var(--bs-border-color);
}
/* Ảnh đã chọn nhưng chưa gửi */
.tk-cmt-drafts:not(:empty) { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.tk-cmt-draft {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .25rem .5rem .25rem .25rem; font-size: .75rem;
  background: var(--bs-tertiary-bg, #f8f7fa); border-radius: 999px;
}
.tk-cmt-draft img { width: 1.5rem; height: 1.5rem; object-fit: cover; border-radius: 50%; }
.tk-cmt-draft-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-cmt-draft-x { border: 0; background: none; line-height: 1; color: var(--bs-secondary-color); padding: 0 .125rem; }
.tk-cmt-draft-x:hover { color: var(--bs-danger); }

/* ===== Trợ lý AI (tk-ai.js) =====
   Panel rộng hơn offcanvas mặc định vì nội dung chính là BẢNG số liệu, không phải form một cột. */
.tk-ai { width: min(32rem, 100vw); }
.tk-ai .tk-ai-log { background: var(--bs-body-bg); }
.tk-ai-msg {
  max-width: 90%; padding: .625rem .875rem; border-radius: var(--bs-border-radius-lg, .5rem);
  font-size: .9375rem; line-height: 1.55; word-break: break-word;
}
.tk-ai-user { background: var(--bs-primary); color: #fff; border-bottom-right-radius: .25rem; }
.tk-ai-bot { background: var(--bs-tertiary-bg, #f8f7fa); border-bottom-left-radius: .25rem; }
/* Bảng trong bong bóng: nền trong suốt để không thành "khối trắng trong khối xám". */
.tk-ai-bot .table { background: transparent; }
.tk-ai-bot .table > :not(caption) > * > * { background: transparent; padding: .25rem .5rem; }
.tk-ai-bot .table thead th { font-size: .75rem; text-transform: none; color: var(--bs-secondary-color); }
.tk-ai .tk-ai-input { resize: none; max-height: 8.75rem; }
/* Ba chấm "đang nghĩ" — báo cho người dùng biết hệ thống còn sống trong lúc chờ model trả lời. */
.tk-ai-dots { display: inline-flex; gap: .25rem; align-items: center; height: 1.25rem; }
.tk-ai-dots span {
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--bs-secondary-color);
  animation: tk-ai-blink 1.2s infinite ease-in-out;
}
.tk-ai-dots span:nth-child(2) { animation-delay: .2s; }
.tk-ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes tk-ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tk-ai-dots span { animation: none; opacity: .5; } }

/* Thẻ "AI đánh giá" (tk-ai.js) */
.tk-ai-review-card { border: 1px solid var(--bs-border-color); box-shadow: none; }
.tk-ai-score {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: 600;
  background: var(--bs-primary); color: #fff; flex: 0 0 auto;
}
/* Văn bản AI sinh ra (tóm tắt, tin nhắn nháp) — giữ khoảng thở giữa các dòng cho dễ đọc. */
.tk-ai-text { line-height: 1.6; white-space: normal; }

/* ---- Chỉ báo ĐANG TẢI dùng chung (DataTables + Tabulator) -------------------------------------
   Bản mặc định của DataTables là ba chấm nảy trong một khung trần, còn Tabulator là dòng chữ trơn —
   hai kiểu khác nhau trong cùng một sản phẩm, và cả hai đều trông như trang chưa làm xong.
   Thay bằng LINH VẬT của TourKit (/img/branding/mascot.png): KHÔNG khung/viền — mascot thả tự nhiên
   giữa bảng, bồng bềnh lên–xuống + chữ mờ bên dưới. Lỗi tải thì rơi về viên thuốc ĐỎ gọn (không dùng
   linh vật). Dùng CHUNG một chỗ (overlay lưu form + Tabulator + DataTables) nên đổi ở đây là đổi hết. */
.tk-load {
  /* KHÔNG khung/viền/bóng — linh vật thả tự nhiên giữa bảng, chỉ mascot bồng bềnh + chữ mờ. */
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  background: none; border: 0; box-shadow: none; padding: 0;
  font-size: .8125rem; font-weight: 600; color: var(--bs-secondary-color);
  white-space: nowrap;
}
.tk-load-spin {
  display: block; width: 96px; height: 96px; border: 0; border-radius: 0;
  background: url('/img/branding/mascot.png') center / contain no-repeat;
  animation: tk-load-bay 1.9s ease-in-out infinite;
}
@keyframes tk-load-bay {
  0%, 100% { transform: translateY(-6px) rotate(-2.5deg); }
  50%      { transform: translateY(6px)  rotate(2.5deg); }
}
/* Biến thể cho lưới/bảng: ẢNH MÁY BAY nhỏ (ic-plane) bồng bềnh, CHỮ nằm DƯỚI + dấu "…" chạy —
   tách hẳn với loader của PAGE (mascot LỚN) nhờ ICON máy bay. "Viền đậm" trước đây là hộp 4px của
   Tabulator (đã gỡ ở tk-grid.css), không phải ảnh này. */
.tk-load-sm { flex-direction: column; gap: .25rem; }
.tk-load-sm .tk-load-spin {
  width: 56px; height: 42px;
  background-image: url('/img/branding/mascot/ic-plane.png');
}
/* Dấu "…" chạy sau chữ Đang tải (kiểu đang-tải quen thuộc). */
.tk-dots::after { content: ''; animation: tk-dots 1.4s steps(1, end) infinite; }
@keyframes tk-dots {
  0%   { content: ''; }
  25%  { content: '.'; }
  50%  { content: '..'; }
  75%, 100% { content: '...'; }
}

/* Lỗi tải: viên thuốc ĐỎ nằm ngang, gọn. Nền/viền RIÊNG vì .tk-load nay không còn khung. */
.tk-load-loi {
  flex-direction: row; gap: .5rem; padding: .5rem .875rem; border-radius: 999px;
  color: var(--bs-danger);
  background: var(--bs-card-bg, #fff);
  border: 1px solid rgba(var(--bs-danger-rgb), .35);
  box-shadow: none;
}

/* Người tắt hiệu ứng chuyển động: linh vật đứng yên — vẫn rõ là đang tải nhờ thẻ + chữ. */
@media (prefers-reduced-motion: reduce) {
  .tk-load-spin { animation: none; }
  .tk-boot { transition: none; }
}

/* Lớp phủ ĐANG XỬ LÝ (lưu form / thao tác chờ máy chủ): mờ nền + thẻ linh vật giữa màn.
   z-index 1050 nằm TRÊN offcanvas (1045) để phủ cả form, nhưng DƯỚI SweetAlert2 (~1060) để hộp
   báo lỗi vẫn hiện đè lên khi lưu hỏng. */
.tk-overlay {
  position: fixed; inset: 0; z-index: 1050;
  display: none; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .18); backdrop-filter: blur(2px);
}
.tk-overlay.is-on { display: flex; }

/* Màn chờ TOÀN TRANG lúc mới vào — nền đặc theo theme, tan mượt (fade) khi trang tải xong. */
.tk-boot {
  position: fixed; inset: 0; z-index: 3000;
  display: flex; align-items: center; justify-content: center;
  background: var(--bs-body-bg, #fff); transition: opacity .4s ease;
}
.tk-boot-done { opacity: 0; pointer-events: none; }

/* ---- Icon AI dùng chung -----------------------------------------------------------------------
   Một icon "AI" (chùm sao lấp lánh) để nhận diện MỌI chỗ có AI (nút bóc tài liệu, gợi ý, chấm điểm…).
   Dựng bằng MASK theo currentColor nên hoà màu với chữ ở bất kỳ ngữ cảnh nào (nút info/primary, menu,
   nhãn) và co giãn theo cỡ chữ như icon Tabler. Dùng: <i class="tk-ico-ai"></i>. */
.tk-ico-ai {
  display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.22em;
  background-color: currentColor;
  -webkit-mask: url('/svg/tk-ai.svg') center / contain no-repeat;
          mask: url('/svg/tk-ai.svg') center / contain no-repeat;
}

/* Khung mặc định của DataTables: bỏ ba chấm nảy, thu khung về đúng cỡ viên thuốc. */
div.dataTables_processing {
  width: auto; margin-left: 0; padding: 0;
  transform: translate(-50%, -50%); margin-top: 0;
  background: transparent; border: 0; box-shadow: none;
}
div.dataTables_processing > div:last-child { display: none; }

/* ===== Hài hoà BẢNG DATATABLES về đúng ngôn ngữ hình ảnh của lưới Tabulator (tk-grid) —
   áp GLOBAL cho mọi table.dataTable (báo cáo + danh mục + list dùng tk.tableClient/tk.table),
   không phải sửa từng trang. Header chữ HOA nhỏ mờ · dòng KHÔNG sọc, chỉ kẻ ngang mảnh · hover nhạt. */
table.dataTable > thead > tr > th {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 600;
  color: var(--bs-secondary-color);
  border-bottom: 1px solid var(--bs-border-color) !important; border-top: 0;
  padding-top: .7rem; padding-bottom: .7rem;
}
table.dataTable > thead > tr > th:focus { outline: none; }
table.dataTable > tbody > tr { background-color: transparent !important; transition: background-color .15s ease-in-out; }
table.dataTable > tbody > tr > td { border-top: 0; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; }
table.dataTable > tbody > tr:hover > * { background: rgba(var(--bs-primary-rgb), .05) !important; }
table.dataTable > tbody > tr:last-child > td { border-bottom: 0; }
/* ---- Bộ điều khiển: SỐ DÒNG + counter + PHÂN TRANG dồn xuống FOOTER (kẻ ngang trên như tabulator-footer),
   ô TÌM lên trên có ICON kính lúp — cho GIỐNG lưới Tabulator. ---- */
.dataTables_wrapper .tk-dt-ft { border-top: 1px solid var(--bs-border-color); }
.dataTables_wrapper .dataTables_length { margin: 0; font-size: .8125rem; color: var(--bs-secondary-color); }
.dataTables_wrapper .dataTables_length select { min-width: 4.5rem; padding: .2rem 1.6rem .2rem .6rem; border-radius: .375rem; }
.dataTables_wrapper .dataTables_info { padding: 0; }
/* Ô tìm: viền + bo góc + ICON kính lúp bên trái + placeholder (thay nhãn "Tìm:" trơn). */
.dataTables_wrapper .dataTables_filter { margin: 0; }
.dataTables_wrapper .dataTables_filter label { margin: 0; }
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--bs-border-color); border-radius: .375rem; margin: 0; font-size: .8125rem;
  padding: .35rem .7rem .35rem 2rem; min-width: 15rem;
  background: var(--bs-card-bg, #fff) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a1acb8' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m21 21-4.3-4.3'/%3e%3c/svg%3e") no-repeat .6rem center;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .15); outline: none; }
/* Phân trang: gọn + active primary như tk-grid. */
.dataTables_wrapper .pagination { margin: 0; gap: 2px; }
.dataTables_wrapper .pagination .page-link {
  border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .2rem .6rem; min-width: 2rem;
  text-align: center; color: var(--bs-body-color); font-size: .8125rem;
}
.dataTables_wrapper .pagination .page-item.active .page-link { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.dataTables_wrapper .pagination .page-item.disabled .page-link { opacity: .5; }
.dataTables_wrapper .pagination .page-link:hover { background: rgba(var(--bs-primary-rgb), .08); }

/* ---- Dòng trạng thái của ô SĐT tự tra khách ---------------------------------------------------
   Ba trạng thái phải phân biệt được NGAY bằng màu: chưa gõ đủ số (không hiện gì), đã có hồ sơ
   (xanh), chưa có ai dùng số này (vàng + nút tạo nhanh). Dùng token theme, không ghi cứng mã màu. */
.tk-khach-bao:empty { display: none; }
.tk-khach-co { color: var(--bs-success); }
.tk-khach-chua { color: var(--bs-warning); }
/* Owner 2026-10-06 ("lệch xiêu lệch vẹo"): biểu tượng + chữ + nút "Tạo nhanh" thẳng một hàng giữa, có khoảng cách; hẹp thì nút xuống dòng. */
.tk-khach-co, .tk-khach-chua { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.tk-khach-chua .btn { margin-left: .25rem; }

/* Danh sách gợi ý khách theo số đang gõ — thả xuống ngay dưới ô, cùng ngôn ngữ hình ảnh với select2. */
.tk-khach { position: relative; }
.tk-khach-goi {
  position: absolute; z-index: 1056; left: 0; right: 0; top: .125rem;
  background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color);
  border-radius: .375rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
  max-height: 15rem; overflow-y: auto; padding: .25rem;
}
.tk-khach-mot {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: .375rem .5rem; border-radius: .25rem; font-size: .8125rem; color: var(--bs-body-color);
}
.tk-khach-mot:hover, .tk-khach-mot:focus-visible { background: rgba(var(--bs-primary-rgb), .08); }

/* ---- Ô chọn ảnh dùng chung (_ImagePicker + tk-anh.js) ----
   Lưới TỰ GIÃN theo độ rộng chỗ đặt (auto-fill), nên cùng một markup vừa cột hẹp bên phải form lẫn
   panel rộng — không phải viết hai bố cục. */
.tk-anh-luoi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: .5rem;
}
.tk-anh-o { aspect-ratio: 4 / 3; cursor: grab; }
.tk-anh-o:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.tk-anh-o .placeholder { display: block; }
.tk-anh-o.sortable-ghost { opacity: .4; }
/* Nút trên ảnh: hiện khi rê chuột hoặc khi ô đang được chọn bằng bàn phím. Máy cảm ứng không có
   "rê chuột" nên LUÔN hiện — ẩn đi là người dùng điện thoại không bao giờ tìm thấy nút xoá. */
.tk-anh-o .tk-anh-thao { opacity: 0; transition: opacity .15s ease; }
.tk-anh-o:hover .tk-anh-thao, .tk-anh-o:focus-within .tk-anh-thao { opacity: 1; }
@media (hover: none) { .tk-anh-o .tk-anh-thao { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tk-anh-o .tk-anh-thao { transition: none; } }
.tk-anh-keo { outline: 2px dashed var(--bs-primary); outline-offset: 2px; background: rgba(var(--bs-primary-rgb), .06); }
/* Khung rộng (thẻ Thông tin một cột): ảnh đại diện cỡ cố định bên trái, slide bên phải — không để ảnh 4:3 phình hết
   bề ngang (owner 2026-09-25 "ảnh bán hàng để to thế là chưa hợp lý"). Khung hẹp giữ xếp dọc như cũ. */
.tk-anh-khung { container-type: inline-size; }
/* Ô ảnh đang tải: thanh tiến độ + chữ ở đáy ô (phiếu 007). */
.tk-anh-tien-do { position: absolute; inset: auto .4rem .35rem .4rem; }
.tk-anh-tien-do-chu { display: block; margin-top: .2rem; font-size: .7rem; color: var(--bs-body-color); text-align: center; }
.tk-tep-tien-do { grid-column: 1 / -1; order: 9; margin-top: .1rem; }   /* dòng tệp là grid 4 cột: thanh tiến độ nằm hàng riêng dưới cùng */
@container (min-width: 640px) {
  .tk-anh-bo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .tk-anh-bo > .tk-anh-bia-vung { margin-bottom: 0 !important; }
}

/* ---- Trình duyệt tệp (_FileBrowser + tk-files.js) ---- */
.tkf-o-tim { min-width: 12rem; }
.tkf-luoi { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.tkf-o {
  position: relative; padding: .75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg);
  cursor: pointer; background: var(--bs-paper-bg, var(--bs-body-bg)); min-width: 0;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tkf-o:hover { border-color: rgba(var(--bs-primary-rgb), .45); }
.tkf-o:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.tkf-o.tkf-da-chon { border-color: var(--bs-primary); box-shadow: 0 0 0 1px var(--bs-primary); }
.tkf-anh { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--bs-border-radius); object-fit: cover; background: var(--bs-light); }
.tkf-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; }
.tkf-icon .ti { font-size: 2.25rem; }
.tkf-icon small { font-weight: 600; letter-spacing: .02em; }
.tkf-icon-nho { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--bs-border-radius); flex-shrink: 0; }
.tkf-ten { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tkf-chon { position: absolute; top: 1.1rem; left: 1.1rem; z-index: 1; opacity: 0; transition: opacity .15s ease; }
.tkf-o:hover .tkf-chon, .tkf-o:focus-within .tkf-chon, .tkf-o.tkf-da-chon .tkf-chon { opacity: 1; }
@media (hover: none) { .tkf-chon { opacity: 1; } }
.tkf-bang tr[data-file], .tkf-bang tr[data-folder] { cursor: pointer; }
.tkf-tha {
  position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed var(--bs-primary); border-radius: var(--bs-border-radius-lg);
  background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); font-weight: 500; pointer-events: none;
}
.tkf-hang { position: fixed; right: 1.5rem; bottom: 1.5rem; width: 22rem; max-width: calc(100vw - 2rem); max-height: 50vh; overflow: auto; z-index: 1085; }
.tkf-xem.offcanvas { width: 32rem; max-width: 100%; }
.tkf-nav .nav-link {
  /* Mục điều hướng dựng bằng <button> để bấm được bằng phím: phải xoá viền/nền mặc định của nút,
     không thì trình duyệt vẽ khung đen đậm quanh từng mục. */
  width: 100%; border: 0; background: none; border-radius: var(--bs-border-radius);
  color: var(--bs-body-color); padding: .55rem .75rem;
}
.tkf-nav .nav-link:hover { background: rgba(var(--bs-body-color-rgb), .04); }
.tkf-nav .nav-link:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.tkf-cay-muc {
  display: block; width: 100%; text-align: left; border: 0; background: none; padding: .35rem .5rem;
  border-radius: var(--bs-border-radius); color: var(--bs-body-color);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tkf-cay-muc:hover { background: rgba(var(--bs-body-color-rgb), .04); }
.tkf-cay-muc.active { color: var(--bs-primary); font-weight: 500; background: rgba(var(--bs-primary-rgb), .08); }
.tkf-cay-muc:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.tkf-cay > ul { margin-left: 0 !important; }
.tkf-bo-cuc .btn.active { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); border-color: var(--bs-primary); }
.tkf-nav .nav-link.active { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .tkf-o, .tkf-chon { transition: none; } }

.tkf-dau { background: var(--bs-paper-bg, var(--bs-body-bg)); }
#tkf-modal .tkf-dau { position: sticky; top: 0; z-index: 3; }
#tkf-modal .tkf-o { cursor: pointer; }

/* ---- Vùng SOẠN nhiều dữ liệu (mẫu tour, chuyến): chữ nhỏ hơn một bậc để thấy được nhiều hơn ----
   Chỉ áp trong .tk-soan — các màn danh sách giữ cỡ chữ chung của app. */
.tk-soan { font-size: .875rem; }
.tk-soan .form-label { font-size: .75rem; margin-bottom: .25rem; color: var(--bs-secondary-color); }
.tk-soan .form-control, .tk-soan .form-select { font-size: .8125rem; padding-top: .4rem; padding-bottom: .4rem; }
.tk-soan .select2-container .select2-selection { font-size: .8125rem; }
.tk-soan h6 { font-size: .875rem; }

/* ---- Giá & dự toán (.tkdt-*) ----
   Lưới cột CỐ ĐỊNH, có độ rộng tối thiểu, CUỘN NGANG khi chỗ hẹp. Không bao giờ ép cột: ép là ô số còn
   vài pixel và tiêu đề ngắt dòng. Số canh phải, chữ số đều độ rộng để cột tiền thẳng hàng. */
.tkdt-phan { margin-bottom: 1.75rem; }
.tkdt-phan-dau { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: flex-end; margin-bottom: .75rem; }
.tkdt-phan-dau p { max-width: 70ch; }
.tkdt-khoi { border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-paper-bg, var(--bs-body-bg)); margin-bottom: 1rem; }
.tkdt-dau { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem .75rem .5rem; }
.tkdt-ncc { flex: 1 1 16rem; max-width: 26rem; }
.tkdt-tom { display: flex; align-items: center; gap: .75rem; margin-left: auto; white-space: nowrap; }
.tkdt-tom small { color: var(--bs-secondary-color); margin-right: .35rem; }
.tkdt-tom b { font-variant-numeric: tabular-nums; }
.tkdt-cuon { overflow-x: auto; }
.tkdt-luoi { padding: 0 .75rem; }
.tkdt-luoi-thu { min-width: 44rem; }
.tkdt-khoi .tkdt-luoi:not(.tkdt-luoi-thu) { min-width: 60rem; }
.tkdt-hang { display: grid; gap: .5rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--bs-border-color-translucent, var(--bs-border-color)); }
.tkdt-hang:last-child { border-bottom: 0; }
.tkdt-hang-thu { grid-template-columns: minmax(12rem, 3fr) minmax(7.5rem, 1.3fr) 4.5rem 5rem 4rem minmax(7.5rem, 1.3fr) 2.25rem; }
.tkdt-hang-chi { grid-template-columns: minmax(13rem, 2.6fr) 4.75rem 5rem 6.5rem minmax(7rem, 1.2fr) 4.5rem 4rem minmax(6rem, 1fr) minmax(7.5rem, 1.2fr) 2.25rem; }
/* Sản phẩm dịch vụ (kho sản phẩm): Dịch vụ · Số lượng · Giá vốn · Tỉ giá · Giá bán · Thành tiền vốn · xoá. */
.tkdt-hang-sp { grid-template-columns: minmax(14rem, 3fr) 5.5rem minmax(7rem, 1.2fr) 4.5rem minmax(7rem, 1.2fr) minmax(7.5rem, 1.2fr) 2.25rem; }
/* Đơn dịch vụ: dòng dịch vụ (NCC · Dịch vụ · Số lượng · Giá vốn · Thành tiền · xoá) + phần thu (Nội dung · SL · Đơn giá · Thành tiền · xoá). */
.tkdt-hang-don { grid-template-columns: minmax(12rem, 2fr) minmax(13rem, 2.4fr) 5.5rem minmax(7rem, 1.2fr) minmax(7.5rem, 1.2fr) 2.25rem; }
.tkdt-hang-thudon { grid-template-columns: minmax(12rem, 3fr) 5.5rem minmax(7.5rem, 1.3fr) minmax(7.5rem, 1.3fr) 2.25rem; }
.tkdt-khoi .tkdt-luoi.tkdt-luoi-sp { min-width: 46rem; }
.tkdt-khoi .tkdt-luoi.tkdt-luoi-don { min-width: 52rem; }
.tkdt-tieu { font-size: .75rem; font-weight: 500; color: var(--bs-secondary-color); white-space: nowrap; padding: .5rem 0; }
.tkdt-dv { display: grid; gap: .25rem; }
.tkdt-nhap, .tkdt-tien { text-align: right; font-variant-numeric: tabular-nums; }
.tkdt-tien { font-weight: 500; white-space: nowrap; padding-right: .25rem; }
.tkdt-chan { padding: .25rem .5rem .5rem; }
.tkdt-trong { padding: 1rem; color: var(--bs-secondary-color); font-size: .8125rem; }
.tkdt-cong { display: flex; justify-content: flex-end; gap: .75rem; padding: .6rem .75rem; border-top: 1px solid var(--bs-border-color); }
.tkdt-cong span { color: var(--bs-secondary-color); }
.tkdt-cong b { font-variant-numeric: tabular-nums; }
.tkdt-gia-bac { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.tkdt-gia-bac label { display: grid; gap: .25rem; margin: 0; }
.tkdt-gia-bac span { font-size: .75rem; color: var(--bs-secondary-color); }
.tkdt-tong-ket {
  display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; padding: .9rem 1.25rem; border-radius: var(--bs-border-radius-lg);
  background: rgba(var(--bs-primary-rgb), .06); border: 1px solid rgba(var(--bs-primary-rgb), .18);
}
.tkdt-tong-ket small { display: block; font-size: .75rem; color: var(--bs-secondary-color); }
.tkdt-tong-ket b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }

/* Điện thoại: mỗi dòng thành một thẻ 2 cột có nhãn — cuộn ngang 10 cột trên màn 390px là không dùng được. */
@media (max-width: 767.98px) {
  .tkdt-luoi-thu, .tkdt-khoi .tkdt-luoi:not(.tkdt-luoi-thu) { min-width: 0; }
  .tkdt-tieu { display: none; }
  .tkdt-khoi .tkdt-luoi.tkdt-luoi-sp, .tkdt-khoi .tkdt-luoi.tkdt-luoi-don { min-width: 0; }
  .tkdt-hang-thu, .tkdt-hang-chi, .tkdt-hang-sp, .tkdt-hang-don, .tkdt-hang-thudon { grid-template-columns: 1fr 1fr; padding: .75rem 0; }
  .tkdt-hang > [data-nhan]::before { content: attr(data-nhan); display: block; font-size: .7rem; color: var(--bs-secondary-color); margin-bottom: .15rem; }
  .tkdt-hang > [data-nhan="Tên dịch vụ"], .tkdt-hang > .tkdt-dv { grid-column: 1 / -1; }
  .tkdt-tien { text-align: left; }
  .tkdt-xoa { justify-self: end; }
  .tkdt-tom { margin-left: 0; }
}

/* ---- Luật bán chỗ FIT: kịch bản giá + hoa hồng theo độ tuổi (tk-luat-ban.js) ---- */
.tk-kb-luoi { display: grid; gap: .35rem; }
.tk-kb-hang { display: grid; grid-template-columns: minmax(6rem, 9rem) minmax(6rem, 9rem) minmax(8rem, 12rem) 2.25rem; gap: .5rem; align-items: center; }
.tk-kb-hang.tkdt-tieu { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
/* Tiêu đề cột nằm trên Ô NHẬP: thụt đúng bằng padding + viền của .form-control-sm (10px + 1px) để chữ tiêu đề
   thẳng mép với chữ trong ô — không thì tiêu đề dính mép trái, lệch cột (owner 2026-09-25). */
.tkdt-tieu > [role="columnheader"] { padding-inline: calc(.625rem + 1px); }
/* Ô số trong lưới nhập: bỏ mũi tên tăng/giảm — trình duyệt chỉ hiện ở ô đang trỏ/đang focus nên các ô cùng hàng
   trông lệch nhau; lưới này gõ số, không bấm mũi tên. */
.tk-kb-hang input[type="number"], .tkdt-hang input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.tk-kb-hang input[type="number"]::-webkit-inner-spin-button, .tk-kb-hang input[type="number"]::-webkit-outer-spin-button,
.tkdt-hang input[type="number"]::-webkit-inner-spin-button, .tkdt-hang input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.tk-hh-luoi { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .6rem 1.25rem; }
.tk-hh-hang { display: grid; grid-template-columns: 5.5rem minmax(7rem, 1fr) minmax(6rem, 8rem); gap: .5rem; align-items: center; }
.tk-hh-nhan { font-size: .8rem; color: var(--bs-secondary-color); }
@media (max-width: 575.98px) {
  /* minmax(0, …): mỗi hàng là một lưới riêng — 1fr giãn theo chữ nên tiêu đề không xuống dòng làm cột hàng tiêu đề rộng hơn hàng dữ liệu (lệch cột) và đẩy trang cuộn ngang ở 390px. */
  .tk-kb-hang { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) 2.25rem; }
  .tk-kb-hang.tkdt-tieu > div { white-space: normal; }
}

/* ---- Tệp đính kèm của tour (tk-dinh-kem.js) ---- */
.tk-tep-ds { display: grid; gap: .35rem; }
.tk-tep-dong {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto auto; gap: .5rem; align-items: center;
  padding: .4rem .5rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
}
.tk-tep-dong i.tk-tep-ic { font-size: 1.15rem; color: var(--bs-secondary-color); }
.tk-tep-ten { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.tk-tep-co { font-size: .72rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.tk-tep-dong.dang-tai { opacity: .65; }
.tk-tep-keo { border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .6rem; text-align: center; font-size: .78rem; color: var(--bs-secondary-color); }
.tk-tep-keo.dang-keo { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .05); }

/* ---- Tổng quan chuyến: dải số liệu ---- */
.tk-tq-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.tk-tq-so > div { padding: .7rem .9rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius-lg); }
.tk-tq-so small { display: block; font-size: .72rem; color: var(--bs-secondary-color); }
.tk-tq-so b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.tk-tq-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .35rem 1rem; margin: 0; font-size: .85rem; }
.tk-tq-dl dt { font-weight: 400; color: var(--bs-secondary-color); }
.tk-tq-dl dd { margin: 0; }

/* Thanh thẻ của trang soạn mẫu / sửa chuyến: màn hẹp CUỘN NGANG thay vì rớt một thẻ xuống dòng (soát phiếu 001). tk-tab-cuon */
#frm > .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
#frm > .nav-tabs .nav-link { white-space: nowrap; }

/* ---- Hành khách của đơn FIT (tk-hanh-khach.js, phiếu 002) ----
   4 nhóm cột (Cơ bản · Giấy tờ · Visa · Phòng & vé): chỉ hiện nhóm đang chọn + STT + Họ tên, để màn hẹp không phải
   cuộn một bảng 19 cột. Bảng vẫn có độ rộng tối thiểu và cuộn ngang trong khung khi cần. */
.tk-hk-bang { min-width: 44rem; }
.tk-hk-bang th { white-space: nowrap; }
.tk-hk-bang td { vertical-align: top; }
.tk-hk-bang td:nth-child(2) { min-width: 12rem; }
.tk-hk-bang:not([data-nhom="cb"]) .n-cb,
.tk-hk-bang:not([data-nhom="gt"]) .n-gt,
.tk-hk-bang:not([data-nhom="vs"]) .n-vs,
.tk-hk-bang:not([data-nhom="pv"]) .n-pv { display: none; }
/* Ô không được ép dưới cỡ đọc được (ảnh phiếu 002: "Số giấy tờ", ngày bị cắt còn ~80px) — thiếu chỗ thì bảng cuộn
   ngang trong khung. */
.tk-hk-bang input, .tk-hk-bang select { min-width: 8rem; }
.tk-hk-bang .tk-hk-ten { min-width: 12rem; }
.tk-hk-bang .tk-hk-so, .tk-hk-bang .tk-hk-ks, .tk-hk-bang .tk-hk-gc { min-width: 11rem; }

/* ---- Nội dung HTML từ trình soạn (phiếu 005) in ra trang tổng quan ---- */
.tk-html-hien > :last-child { margin-bottom: 0; }
.tk-html-hien p { margin-bottom: .35rem; }
.tk-html-hien ul, .tk-html-hien ol { padding-left: 1.2rem; margin-bottom: .35rem; }
.tk-html-hien table { width: auto; margin-bottom: .5rem; }
.tk-html-hien td, .tk-html-hien th { border: 1px solid var(--bs-border-color); padding: .2rem .45rem; }

/* Khung cuộn của bảng hành khách GIỮ bảng lại — thiếu min-width:0 thì thẻ (flex column) phình theo bảng 1453px và kéo
   cả trang cuộn ngang (soát 002: 1689px trên màn 1366, 989px trên 390). */
#vung-hk, #vung-hk .tk-hk-than { min-width: 0; max-width: 100%; }
/* Tiêu đề cột thẳng mép chữ trong ô nhập: padding ô bảng + padding (10px) + viền (1px) của form-control-sm. */
.tk-hk-bang > thead > tr > th:not(:first-child):not(:last-child) {
  padding-left: calc(var(--bs-table-cell-padding-x-sm, .25rem) + .625rem + 1px);
}

/* Khung cuộn ngang PHẢI là khối chứa của phần tử absolute bên trong: nhãn `.visually-hidden` (position:absolute) ở
   tiêu đề cột cuối thoát khỏi vùng cắt của .table-responsive và kéo cả trang cuộn ngang (soát phiếu 002: đơn rộng
   695px trên màn 390). Áp cho mọi khung cuộn bảng của app. */
.table-responsive, .tkdt-cuon, .tk-hk-than { position: relative; }

/* Tiêu đề bảng và chữ trên nút KHÔNG gãy dòng (máy kiểm bố cục, phiếu 002: "NHÀ CUNG CẤP / DỊCH VỤ" ép 5 dòng, nút
   "Thêm chi phí"/"Danh sách" gãy đôi trên điện thoại). Bảng nằm trong khung cuộn ngang nên cột rộng ra là cuộn trong
   khung, không vỡ trang. */
.table > thead th { white-space: nowrap; }
.btn { white-space: nowrap; flex-shrink: 0; }   /* nút không co nhỏ hơn chữ — phần tiêu đề bên cạnh co/xuống dòng */
/* Nút không co (ở trên) thì HÀNG chứa nút phải được xuống dòng khi thiếu chỗ — không thì thanh công cụ đầu trang
   (Xuất file / Thêm mới) tràn khỏi màn điện thoại (máy kiểm bố cục: 6 màn danh sách cuộn ngang ở 390px). */
.d-flex:has(> .btn, > .dropdown > .btn, > .btn-group):not(:has(> .flex-fill)) { flex-wrap: wrap; }   /* hàng lọc có nút .flex-fill (Tìm) thì nút đó co, không xuống dòng */
/* Phần tử giãn (ô tìm kiếm .flex-fill) phải CO được khi nút không co — không thì thanh lọc 1 hàng (khuôn chuẩn) rơi
   nút đặt lại xuống dòng thứ hai ở 1366px. */
.d-flex > .flex-fill, .d-flex > .flex-grow-1 { min-width: 0; }

/* Khung thả xuống select2 gắn vào <body> KHÔNG được rộng 100% trang — nếu không, mở ô ở giữa trang là trang có thanh
   cuộn ngang (owner 2026-09-25: "mở select2 mà chiều ngang tăng lên"). Trước đây luật này chỉ nằm trong tk-grid.css
   nên chỉ các màn có lưới được sửa; đặt ở đây để áp MỌI trang. */
body > .select2-container { width: auto !important; }

/* Bảng CHỈ ĐỌC trên điện thoại xếp thành THẺ (chuẩn tourkit-giao-dien): <table class="tk-bang-the">, mỗi dòng thành một thẻ lưới 2
   cột, mỗi <td data-nhan="…"> có nhãn nhỏ phía trên giá trị (cùng cách .tkdt-hang). Ô đầu (tên) và ô nút chiếm cả dòng. Ép 6 cột
   vào 390px làm chữ vỡ từng từ. */
@media (max-width: 575.98px) {
  .table-responsive:has(> .tk-bang-the) { overflow-x: visible; }
  table.tk-bang-the, .tk-bang-the > tbody, .tk-bang-the > tfoot { display: block; width: 100%; }
  .tk-bang-the > thead { display: none; }
  .tk-bang-the > tbody > tr, .tk-bang-the > tfoot > tr {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .4rem 1rem;
    padding: .7rem 1rem; border-bottom: 1px solid var(--bs-border-color);
  }
  .tk-bang-the > tbody > tr > td, .tk-bang-the > tfoot > tr > td {
    display: block; min-width: 0; border: 0; padding: 0; text-align: left !important; white-space: normal;
  }
  .tk-bang-the td[data-nhan]::before {
    content: attr(data-nhan); display: block; font-size: .7rem; font-weight: 400; color: var(--bs-secondary-color); margin-bottom: .1rem;
  }
  .tk-bang-the > tbody > tr > td:first-child, .tk-bang-the > tfoot > tr > td:first-child,
  .tk-bang-the td.tk-bang-the-stt + td, .tk-bang-the td.tk-bang-the-nut,
  .tk-bang-the > tbody > tr.tk-bang-the-rong > td { grid-column: 1 / -1; }
  .tk-bang-the td.tk-bang-the-stt, .tk-bang-the td:empty, .tk-bang-the td.tk-bang-the-nut:not(:has(*)) { display: none; }
  .tk-bang-the td.tk-bang-the-nut { text-align: right !important; }
  .tk-bang-the > tbody > tr.tk-bang-the-rong > td { text-align: center !important; }
}

/* Owner 2026-10-04 ("mấy màn tính giá ô input lớn thế làm mấy ô khác xuống dòng"): thanh lọc một hàng dùng
   <input class="form-control flex-fill" style="flex-basis:280px">. Bootstrap .flex-fill là "flex:1 1 auto !important" (đè flex-basis)
   và .form-control là width:100% → ô tìm chiếm trọn hàng, đẩy ô chọn + nút xuống dòng. Bỏ width 100% để ô tìm chỉ GIÃN phần còn trống. */
.d-flex > .form-control.flex-fill,
.d-flex > .form-select.flex-fill { width: auto; flex-basis: 280px !important; }

/* Soát giao diện 2026-10-04 (owner: "desktop nhiều kích thước, màn hơi bé rất khó sử dụng"). */
/* Tab lọc (Tất cả 101 · Nháp 1…) không bẻ nhãn và số thành hai dòng khi tab hẹp. */
.nav-tabs .nav-link, .nav-pills .nav-link, #type-tabs .nav-link { white-space: nowrap; }

/* Phiếu 021: logo công ty (cắt vuông) + tên công ty ở menu — tên dài thì cắt "…" thay vì đẩy vỡ đầu menu. */
.tk-brand-logo { border-radius: 7px; object-fit: cover; }
.tk-brand-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phiếu 021: hộp thoại cắt logo (Cropper.js cần ảnh max-width 100%) + thẻ Thương hiệu ở Hồ sơ công ty. */
.tk-logo-crop-stage { max-height: 60vh; background: repeating-conic-gradient(#f1f1f4 0 25%, #fff 0 50%) 0 0 / 18px 18px; border-radius: .5rem; overflow: hidden; }
.tk-logo-crop-stage img { display: block; max-width: 100%; }
.tk-logo-preview { width: 88px; height: 88px; border-radius: 18px; border: 1px dashed var(--bs-border-color); display: grid; place-items: center; overflow: hidden; background: #fff; flex: none; }
.tk-logo-preview img { width: 100%; height: 100%; object-fit: cover; }
.tk-swatches { display: flex; flex-wrap: wrap; gap: .5rem; }
.tk-swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--bs-border-color); cursor: pointer; padding: 0; }
.tk-swatch.is-on { box-shadow: 0 0 0 2px var(--bs-body-color); }
.tk-swatch:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }

/* Phiếu 023: bộ chọn ảnh chỉ dùng phần ảnh đại diện (ảnh bìa bài viết) — ẩn phần slide. */
.tk-anh-chi-bia .tk-anh-slide-vung { display: none; }