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

/* Owner 2026-10-09: thanh trên GỌN và LIỀN với menu trái — dải phẳng cố định từ mép menu tới mép phải màn (không còn thẻ
   nổi bo góc cách lề), cao 52px, chỉ một đường kẻ dưới; nội dung trang bắt đầu ngay dưới thanh để dành đất cho dữ liệu. */
.layout-navbar.navbar-detached,
.layout-navbar-fixed .layout-navbar.navbar-detached,
.layout-navbar-fixed.layout-menu-collapsed .layout-navbar.navbar-detached {
  width: auto !important;
  margin: 0;
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid var(--bs-border-color);
}
@media (max-width: 991.98px) {
  .layout-navbar.navbar-detached { padding: 0 1rem; }
}
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page,
.layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
  padding-top: 3.25rem !important;
}
.content-wrapper > .container-p-y:not([class^=pt-]):not([class*=" pt-"]) {
  padding-top: 1rem !important;
}

/* ===== 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%; }
/* AI tắt → không có trợ lý để đọc: ẩn cột phải, panel về cỡ một cột (owner 2026-10-09 thấy nửa phải trống trên máy chủ). */
html.tk-ai-off .tk-oc-split > .tk-oc-aside { display: none; }
html.tk-ai-off .offcanvas.tk-oc-wide:has(.tk-oc-aside) { width: min(44rem, 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; }
/* "Doanh thu theo thời gian" (owner 2026-10-10): kỳ + gom là 2 ô chọn gọn cùng hàng với công tắc so sánh, nằm góc phải tiêu đề thẻ.
   Hẹp (≤ 575px): 2 ô chọn chia đôi một hàng, ô khoảng ngày + công tắc xuống dòng. */
.tk-trend-title { flex: 1 1 12rem; min-width: 0; }
.tk-trend-tools { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem 1rem; }
.tk-trend-selects { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.tk-trend-selects .input-group { width: auto; flex-wrap: nowrap; }
.tk-trend-selects .form-select { min-width: 7.5rem; padding-right: 1.75rem; background-position: right .5rem center; }
.tk-trend-selects .input-group-text { padding-inline: .5rem .25rem; }
.tk-trend-dates { width: 13.5rem; }
@media (max-width: 575.98px) {
  .tk-trend-tools { width: 100%; justify-content: flex-start; }
  .tk-trend-selects { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .tk-trend-selects .input-group { width: 100%; }
  .tk-trend-selects .form-select { min-width: 0; }
  .tk-trend-dates { grid-column: 1 / -1; width: 100%; }
}
/* 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 */
}

/* Khối "Thông tin của tôi" (phiếu 058, partial _MyProfileCard): người · liên hệ/hoạt động · nút đổi ảnh trên MỘT hàng ở
   màn rộng; hẹp thì xếp dọc. Ảnh cắt tròn bằng object-fit (ảnh gốc giữ tỉ lệ). */
.tk-me-body { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.tk-me-who { display: flex; align-items: center; gap: 1rem; min-width: 0; flex: 1 1 260px; }
.tk-me-avatar img { object-fit: cover; }
.tk-me-facts { display: grid; gap: .375rem; min-width: 0; flex: 1 1 240px; font-size: .875rem; }
.tk-me-facts li { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.tk-me-facts i { font-size: 1rem; flex-shrink: 0; }
.tk-me-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 0 0 auto; }
@media (max-width: 575.98px) { .tk-me-actions { flex: 1 1 100%; } }

/* Ô chọn ảnh đại diện (phiếu 058, partial _AvatarPicker): khung TRÒN cố định, ảnh phủ kín bằng object-fit. */
.tk-avatar-picker-img { width: 88px; height: 88px; }

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

/* Phiếu 059: tiêu đề NHÓM khối trên Tổng quan (Việc của tôi · Kinh doanh · Toàn công ty) — nhỏ, không đóng khung, để mắt
   biết đang ở phần cá nhân hay phần công ty mà không thêm một tầng thẻ. */
.tk-home-section { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0 0 1rem; }
.tk-home-section h5 { margin: 0; font-size: 1.0625rem; font-weight: 600; }
/* 5 thẻ số Kinh doanh: một hàng trên màn rộng (bản vẽ đã duyệt), tự xuống hàng khi hẹp. */
@media (min-width: 576px) { .tk-kpi-row.tk-kpi-5 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
@media (max-width: 575.98px) { .tk-home-figures-2 .tk-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } }
.tk-kpi a.tk-kpi-value { color: var(--bs-heading-color); }
/* Lịch khởi hành tháng gọn: mỗi ô ngày là số chuyến — nhìn là thấy tuần nào dày, bấm ô để xem chuyến. */
.tk-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .375rem; }
.tk-month-head { font-size: .75rem; color: var(--bs-secondary-color); text-align: center; padding-bottom: .125rem; }
.tk-month-day {
  display: flex; flex-direction: column; align-items: flex-start; gap: .125rem; min-height: 3.75rem; padding: .375rem .5rem;
  border: 1px solid var(--bs-border-color); border-radius: .5rem; background: var(--bs-card-bg, #fff); color: var(--bs-body-color);
  font: inherit; text-align: left;
}
.tk-month-day:disabled { opacity: 1; cursor: default; }
/* Khung "các chuyến khởi hành trong ngày" (owner 2026-10-10): mỗi chuyến một thẻ căn trái, đọc trên xuống — tên tuyến đậm, mã nhỏ màu
   phụ, badge trạng thái, chỗ đã bán + thanh mảnh, đón / điều hành. Cả thẻ là link (mở tab mới); danh sách cuộn trong offcanvas-body,
   nút "Mở lịch điều hành" bám chân khung. */
.tk-dep-day { display: flex; flex-direction: column; }
.tk-dep-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.tk-dep-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: .375rem;
  padding: .875rem 1rem; border: 1px solid var(--bs-border-color); border-radius: .5rem;
  color: var(--bs-body-color); text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.tk-dep-item:hover, .tk-dep-item:focus-visible { border-color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .04); color: var(--bs-body-color); }
.tk-dep-title { font-weight: 600; color: var(--bs-heading-color); line-height: 1.35; }
.tk-dep-code { font-size: .8125rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; margin-top: -.25rem; }
.tk-dep-badges { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .125rem; }
.tk-dep-seats { display: flex; flex-direction: column; gap: .3rem; width: 100%; }
.tk-dep-seats-text { font-size: .8125rem; color: var(--bs-secondary-color); }
.tk-dep-seats-text b { color: var(--bs-heading-color); font-weight: 600; }
.tk-dep-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: var(--bs-border-color); overflow: hidden; }
.tk-dep-bar > i { display: block; height: 100%; background: var(--bs-success); border-radius: inherit; }
.tk-dep-line { display: flex; align-items: flex-start; gap: .375rem; font-size: .8125rem; color: var(--bs-secondary-color); line-height: 1.4; }
.tk-dep-line > i { font-size: 1rem; line-height: 1.1rem; flex-shrink: 0; }
.tk-dep-open { font-size: .8125rem; font-weight: 500; color: var(--bs-primary); margin-top: .125rem; }
.tk-dep-empty { text-align: center; padding: 2.5rem 1rem; }
.tk-dep-empty > i { font-size: 2rem; color: var(--bs-secondary-color); display: block; margin-bottom: .5rem; }
.tk-dep-foot {
  position: sticky; bottom: calc(-1 * var(--bs-offcanvas-padding-y, 1.5rem));
  padding-block: .875rem; margin-top: .75rem; background: var(--bs-offcanvas-bg, var(--bs-paper-bg, #fff)); display: flex; justify-content: flex-start;
  border-top: 1px solid var(--bs-border-color);
}
.tk-month-day.is-out { opacity: .45; }
.tk-month-day.is-today { border-color: var(--bs-primary); box-shadow: inset 0 0 0 1px var(--bs-primary); }
.tk-month-day.has { background: rgba(var(--bs-primary-rgb), .06); cursor: pointer; }
.tk-month-day.has:hover { background: rgba(var(--bs-primary-rgb), .12); }
.tk-month-num { font-size: .8125rem; font-weight: 600; }
.tk-month-count { font-size: .75rem; color: var(--bs-primary); font-weight: 600; }
@media (max-width: 575.98px) {
  .tk-month { gap: .25rem; }
  .tk-month-day { min-height: 2.75rem; padding: .25rem; }
  .tk-month-count { font-size: .6875rem; }
}

/* 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; }
a.tk-line { color: inherit; }
a.tk-line:hover .tk-line-text b { color: var(--bs-primary); }
/* Phiếu 101 — Tổng quan trên điện thoại: thẻ liếc nhanh (việc, phiếu chờ duyệt, thông báo) hiện 4 dòng; phần còn lại ở link "Tất cả" của thẻ
   (trang trước dài 10,2 màn). */
@media (max-width: 575.98px) {
  [data-home-card] .tk-list > :nth-child(n+5) { display: none; }
}
.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) — phiếu 091, bố cục "Khung chat gọn" owner chọn 2026-10-12 =====
   Chuẩn hoá theo taste-skill nhưng GIỮ token dự án (biến Bootstrap/Vuexy): một màu nhấn (--bs-primary), một thang bo góc
   (khối 12px · nút / ô nhỏ 8px · ô nhập 16px), trạng thái trống / đang tải (khung xương) / lỗi ngay tại chỗ, không hiệu ứng thừa. */
.tk-ai {
  --tk-ai-r: .75rem; --tk-ai-r-sm: .5rem; --tk-ai-pad: 1rem;
  width: min(30rem, 100vw); display: flex; flex-direction: column; background: var(--bs-card-bg, #fff);
}
.tk-ai-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  padding: .875rem var(--tk-ai-pad) .75rem; border-bottom: 1px solid var(--bs-border-color);
}
.tk-ai-head-main { min-width: 0; }
.tk-ai-title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1rem; font-weight: 600; color: var(--bs-heading-color); }
.tk-ai-title .tk-ico-ai { color: var(--bs-primary); }
.tk-ai-credits { margin-top: .125rem; font-size: .8125rem; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.tk-ai-credits.is-low { color: var(--bs-warning-text-emphasis, var(--bs-warning)); font-weight: 500; }
.tk-ai-credits.is-out { color: var(--bs-danger); font-weight: 500; }
.tk-ai-head-actions { display: flex; gap: .25rem; flex-shrink: 0; }
.tk-ai-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 2rem; padding: 0 .375rem;
  border: 0; border-radius: var(--tk-ai-r-sm); background: transparent; color: var(--bs-secondary-color); font-size: .8125rem;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.tk-ai-icon-btn .ti { font-size: 1.125rem; }
.tk-ai-icon-btn:hover, .tk-ai-icon-btn[aria-pressed="true"] { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); }
.tk-ai-icon-btn:active { transform: scale(.96); }
.tk-ai-icon-btn:focus-visible, .tk-ai-suggest-item:focus-visible, .tk-ai-detail-toggle:focus-visible, .tk-ai-go:focus-visible,
.tk-ai-hist-open:focus-visible, .tk-ai-more:focus-visible, .tk-ai-back:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb), .5); outline-offset: 2px;
}

/* Vùng hội thoại */
.tk-ai-log { flex: 1 1 auto; overflow-y: auto; padding: var(--tk-ai-pad); scroll-padding-top: var(--tk-ai-pad); }
.tk-ai-row { display: flex; margin-bottom: .875rem; }
.tk-ai-row.is-user { justify-content: flex-end; }
.tk-ai-msg { max-width: 92%; font-size: .9375rem; line-height: 1.55; word-break: break-word; }
.tk-ai-user {
  max-width: 85%; padding: .5rem .8125rem; border-radius: var(--tk-ai-r) var(--tk-ai-r) .25rem var(--tk-ai-r);
  background: var(--bs-primary); color: var(--bs-white, #fff);
}
.tk-ai-bot {
  width: 100%; padding: .75rem .875rem; border: 1px solid var(--bs-border-color); border-radius: .25rem var(--tk-ai-r) var(--tk-ai-r) var(--tk-ai-r);
  background: var(--bs-card-bg, #fff);
}
.tk-ai-text p { margin: 0 0 .375rem; }
.tk-ai-text p:last-child { margin-bottom: 0; }
.tk-ai-text strong { font-weight: 600; color: var(--bs-heading-color); }
.tk-ai-list, .tk-ai-steps { margin: .25rem 0 .5rem; padding-left: 1.25rem; }
.tk-ai-list li, .tk-ai-steps li { margin-bottom: .25rem; }
.tk-ai-steps li::marker { color: var(--bs-primary); font-weight: 600; }
.tk-ai-text.is-clamped { max-height: 9.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.tk-ai-more {
  border: 0; background: none; padding: .25rem 0; color: var(--bs-primary); font-size: .8125rem; font-weight: 500;
}
.tk-ai-more:hover { text-decoration: underline; }
.tk-ai-next { display: flex; flex-wrap: wrap; align-items: baseline; gap: .375rem; margin: .625rem 0 0 !important; font-size: .875rem; }
.tk-ai-next-label {
  padding: .0625rem .4375rem; border-radius: var(--tk-ai-r-sm); background: rgba(var(--bs-primary-rgb), .1);
  color: var(--bs-primary); font-size: .75rem; font-weight: 600;
}

/* Thẻ số: nhãn nhỏ + số gọn lớn; 2 cột trong khung hẹp */
.tk-ai-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.tk-ai-kpi {
  display: flex; flex-direction: column; gap: .125rem; min-width: 0; padding: .5625rem .6875rem;
  border-radius: var(--tk-ai-r-sm); background: var(--bs-body-bg);
}
.tk-ai-kpi-label { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ai-kpi-value { font-size: 1.1875rem; font-weight: 600; line-height: 1.25; color: var(--bs-heading-color); font-variant-numeric: tabular-nums; }
.tk-ai-kpi-note { font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ai-kpi.is-success .tk-ai-kpi-value { color: var(--bs-success); }
.tk-ai-kpi.is-warning .tk-ai-kpi-value { color: var(--bs-warning-text-emphasis, var(--bs-warning)); }
.tk-ai-kpi.is-danger .tk-ai-kpi-value { color: var(--bs-danger); }

/* Chi tiết gập */
.tk-ai-detail { margin-top: .625rem; border-top: 1px solid var(--bs-border-color); padding-top: .375rem; }
.tk-ai-detail-toggle {
  display: inline-flex; align-items: center; gap: .25rem; border: 0; background: none; padding: .25rem 0;
  color: var(--bs-secondary-color); font-size: .8125rem; font-weight: 500;
}
.tk-ai-detail-toggle:hover { color: var(--bs-primary); }
.tk-ai-detail-toggle .ti { transition: transform .15s ease; }
.tk-ai-detail-toggle[aria-expanded="true"] .ti { transform: rotate(90deg); }
.tk-ai-detail-body { margin-top: .25rem; }
.tk-ai-table { font-size: .8125rem; background: transparent; }
.tk-ai-table > :not(caption) > * > * { background: transparent; padding: .3125rem .5rem; }
.tk-ai-table thead th { font-size: .75rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--bs-secondary-color); white-space: nowrap; }
.tk-ai-table td { font-variant-numeric: tabular-nums; }

/* Nút mở màn (tab mới) */
.tk-ai-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.tk-ai-go {
  display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; font-weight: 500;
  color: var(--bs-primary); text-decoration: none;
}
.tk-ai-links .tk-ai-go {
  padding: .3125rem .625rem; border: 1px solid rgba(var(--bs-primary-rgb), .3); border-radius: var(--tk-ai-r-sm);
  transition: background-color .15s ease;
}
.tk-ai-links .tk-ai-go:hover { background: rgba(var(--bs-primary-rgb), .08); }
.tk-ai-text .tk-ai-go:hover { text-decoration: underline; }

/* Trống: chào + gợi ý theo màn (dòng câu hỏi căn trái có ›) */
.tk-ai-empty { padding-top: .25rem; }
.tk-ai-hello { font-size: 1.0625rem; font-weight: 600; color: var(--bs-heading-color); }
.tk-ai-suggest-head { margin: .25rem 0 .625rem; font-size: .875rem; color: var(--bs-secondary-color); }
.tk-ai-suggest { display: flex; flex-direction: column; gap: .25rem; }
.tk-ai-suggest.placeholder-glow .placeholder { height: 2.25rem; border-radius: var(--tk-ai-r-sm); margin-bottom: .25rem; }
.tk-ai-suggest-item {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .625rem; text-align: left;
  border: 1px solid var(--bs-border-color); border-radius: var(--tk-ai-r-sm); background: var(--bs-card-bg, #fff);
  color: var(--bs-body-color); font-size: .875rem; transition: border-color .15s ease, background-color .15s ease, transform .1s ease;
}
.tk-ai-suggest-item span { color: var(--bs-primary); font-weight: 600; }
.tk-ai-suggest-item:hover { border-color: rgba(var(--bs-primary-rgb), .35); background: rgba(var(--bs-primary-rgb), .06); }
.tk-ai-suggest-item:active { transform: scale(.99); }
.tk-ai-muted { font-size: .8125rem; color: var(--bs-secondary-color); }
.tk-ai-hidden { margin-top: .5rem; }
.tk-ai-error { display: flex; gap: .5rem; align-items: flex-start; color: var(--bs-danger); font-size: .875rem; }
.tk-ai-error .ti { font-size: 1.125rem; flex-shrink: 0; margin-top: .0625rem; }
.tk-ai-loading { display: flex; flex-direction: column; gap: .5rem; }
.tk-ai-loading .placeholder { height: 1rem; border-radius: var(--tk-ai-r-sm); }

/* Lịch sử */
.tk-ai-hist-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; font-weight: 600; color: var(--bs-heading-color); }
.tk-ai-back { display: inline-flex; align-items: center; gap: .25rem; border: 0; background: none; padding: .25rem 0; color: var(--bs-secondary-color); font-size: .8125rem; }
.tk-ai-back:hover { color: var(--bs-primary); }
.tk-ai-hist-list { display: flex; flex-direction: column; }
.tk-ai-hist-item { display: flex; align-items: center; gap: .25rem; border-radius: var(--tk-ai-r-sm); }
.tk-ai-hist-item + .tk-ai-hist-item { border-top: 1px solid var(--bs-border-color); }
.tk-ai-hist-item.is-current { background: rgba(var(--bs-primary-rgb), .06); }
.tk-ai-hist-open {
  display: flex; flex-direction: column; gap: .125rem; flex: 1 1 auto; min-width: 0; padding: .5625rem .5rem;
  border: 0; background: none; text-align: left;
}
.tk-ai-hist-open:hover .tk-ai-hist-title { color: var(--bs-primary); }
.tk-ai-hist-title { font-size: .875rem; color: var(--bs-body-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ai-hist-meta { font-size: .75rem; color: var(--bs-secondary-color); }
.tk-ai-hist-del:hover, .tk-ai-hist-del.is-confirm { background: rgba(var(--bs-danger-rgb), .1); color: var(--bs-danger); }
.tk-ai-hist-empty { padding: 1.5rem 0; text-align: center; }
.tk-ai-hist-note { margin-top: 1rem; }
.tk-ai-hist-more { align-self: flex-start; margin-top: .5rem; }

/* Ô nhập: bo tròn, nút gửi nằm trong ô */
.tk-ai-foot { padding: .625rem var(--tk-ai-pad) .75rem; border-top: 1px solid var(--bs-border-color); }
.tk-ai-composer {
  display: flex; align-items: flex-end; gap: .5rem; padding: .375rem .375rem .375rem .875rem;
  border: 1px solid var(--bs-border-color); border-radius: 1rem; background: var(--bs-card-bg, #fff);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.tk-ai-composer:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 .1875rem rgba(var(--bs-primary-rgb), .12); }
.tk-ai-input {
  flex: 1 1 auto; min-height: 2rem; max-height: 8.75rem; padding: .3125rem 0; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--bs-body-color); font-size: .9375rem; line-height: 1.4;
}
.tk-ai-input::placeholder { color: var(--bs-secondary-color); opacity: 1; }
.tk-ai-send {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem;
  border: 0; border-radius: var(--tk-ai-r-sm); background: var(--bs-primary); color: var(--bs-white, #fff);
  transition: opacity .15s ease, transform .1s ease;
}
.tk-ai-send .ti { font-size: 1.125rem; }
.tk-ai-send:active { transform: scale(.94); }
.tk-ai-send:disabled { opacity: .45; }
.tk-ai-note { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: .375rem; font-size: .75rem; color: var(--bs-secondary-color); }
.tk-ai-note .ti { font-size: .875rem; cursor: help; }

/* Nút ✦ trên thanh trên cùng: chấm cảnh báo khi sắp / đã hết lượt AI */
#tk-ai-launch .nav-link { position: relative; }
#tk-ai-launch .nav-link.tk-ai-launch-low::after {
  content: ""; position: absolute; top: .375rem; right: .25rem; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--bs-warning); box-shadow: 0 0 0 2px var(--bs-card-bg, #fff);
}

/* 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; }
  .tk-ai-icon-btn, .tk-ai-suggest-item, .tk-ai-send, .tk-ai-detail-toggle .ti { transition: none; }
}
@media (max-width: 575.98px) {
  .tk-ai { --tk-ai-pad: .875rem; }
  .tk-ai-kpi-value { font-size: 1.0625rem; }
}

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

/* ---- Ô chọn DANH MỤC kèm nút "+" thêm nhanh (phiếu 043, TagHelper <tk-select-quick> + tk-select-quick.js) ----------------
   Ô chiếm phần còn lại, nút vuông cùng chiều cao ô ngay bên phải; lỗi jQuery Validate (chèn sau khung select2, nằm TRONG khối) xuống
   hàng riêng bên dưới. Không có quyền tạo → không có nút, ô rộng trọn hàng. Một luật chung, không CSS riêng từng ô. */
.tk-sq { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 .5rem; }
.tk-sq > select, .tk-sq > .select2-container { flex: 1 1 0; min-width: 0; width: auto !important; }
.tk-sq > .tk-sq-add { flex: 0 0 auto; width: calc(2.25rem + 2px); height: calc(2.25rem + 2px); }
.tk-sq > .invalid-feedback, .tk-sq > .form-text { flex-basis: 100%; order: 3; }
/* Dòng cuối danh sách select2: "+ Thêm … “chữ đang gõ”". */
.tk-sq-foot {
  display: flex; align-items: center; width: 100%; border: 0; border-top: 1px solid var(--bs-border-color);
  background: transparent; color: var(--bs-primary); font-weight: 500; text-align: left; padding: .5rem .75rem;
}
.tk-sq-foot:hover, .tk-sq-foot:focus-visible { background: rgba(var(--bs-primary-rgb), .08); }
/* Modal thêm nhanh chồng lên modal khác (khách trong "Dùng mẫu") — nằm trên modal cha (Vuexy --bs-modal-zindex 1090) và nền của nó. */
.modal.tk-qa-stacked { z-index: 1100; }
.modal-backdrop.tk-qa-stacked-backdrop { z-index: 1099; }
/* Cảnh báo "Khách này đã có" / "Có thể đã có trong kho": chữ đậm tối trên nền vàng nhạt (chữ cam mặc định chỉ ~2:1). */
.tk-qa-match .alert-warning, .tk-qa-dup.alert-warning { color: var(--bs-warning-text-emphasis, #6b3d00); }
.tk-qa-match .alert-warning strong, .tk-qa-dup.alert-warning strong { color: inherit; }
/* Gợi ý trùng (điểm đến) và khách có số gần giống (khách hàng) trong modal. */
.tk-qa-dup-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; }
.tk-qa-near { border: 1px solid var(--bs-border-color); border-radius: .375rem; padding: .375rem; }
.tk-qa-near-row {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: .375rem .5rem; border-radius: .25rem; color: var(--bs-body-color);
}
.tk-qa-near-row:hover, .tk-qa-near-row: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; }
/* min-width:0 + trần 100%: tên NCC dài không được kéo ô chọn rộng hơn màn (390px từng cuộn ngang cả trang — select2 giữ chữ một dòng). */
.tkdt-ncc { flex: 1 1 16rem; min-width: 0; max-width: min(26rem, 100%); }
.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; }
/* Cột minmax(0,1fr): cột ngầm định "auto" co theo chữ một dòng của select2 → ô Dịch vụ tràn khỏi thẻ ở 390px. */
.tkdt-dv { display: grid; grid-template-columns: minmax(0, 1fr); 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: .5rem; padding: .25rem .75rem .75rem; }   /* ô không dính sát viền khung */
/* Các dòng bậc nằm trong #ds-kb (rowgroup) — phải có khoảng cách riêng, không thì dính sát nhau (owner 2026-10-09). */
.tk-kb-luoi > [role="rowgroup"] { display: grid; gap: .5rem; }
.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-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; }

/* MỌI ô chọn (select2 một/nhiều lựa chọn) cùng MỘT kiểu của hệ thống (owner 2026-10-08, phiếu 035: "select mỗi cái mỗi kiểu khó
   chịu quá"): chiều cao, thẻ đã chọn, nút ×, chữ, lề lấy đúng mặc định Vuexy — KHÔNG viết CSS riêng cho một ô (#id .select2-…).
   Ô nào cần dòng gợi ý 2 tầng (tên + tỉnh) thì dùng templateResult, chữ phụ tự đổi màu theo dòng đang trỏ ở luật dưới.
   Máy chặn: ArchTests Select2_NoPerFieldCss. */
/* Ô select2 báo lỗi (jQuery Validate gắn .is-invalid lên khung select2) — viền đỏ như form-control. */
.select2-container .select2-selection.is-invalid { border-color: var(--bs-danger) !important; }
.select2-results__option--highlighted .text-muted,
.select2-results__option--highlighted .small { color: inherit !important; opacity: .85; }
/* Điện thoại: vùng chạm lớn hơn cho MỌI ô chọn — một luật dùng chung, không riêng ô nào. Nút × của thẻ chiếm cả chiều cao thẻ
   và rộng 2rem; dòng gợi ý cao ≥ 44px; ô gõ tìm 16px để iOS không tự phóng to trang. */
@media (max-width: 575.98px) {
  .select2-container--default .select2-selection--multiple .select2-selection__choice { padding: .55rem 2.25rem .55rem .75rem; }
  html:not([dir=rtl]) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    top: 0; bottom: 0; right: 0; width: 2rem; margin: 0; display: flex; align-items: center; justify-content: center;
  }
  .select2-results__option { min-height: 44px; padding-block: .6rem; }
  .select2-search__field, .select2-search--dropdown .select2-search__field { font-size: 16px !important; }
  /* Nút "+" thêm nhanh (phiếu 043): vùng chạm 44px, vẫn cùng hàng với ô. */
  .tk-sq > .tk-sq-add { width: 44px; }
}

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

/* Ô CHỌN BIỂU TƯỢNG dùng chung (_IconPicker.cshtml + tk-icon-picker.js, phiếu 035). Lưới mở NGAY DƯỚI ô (không popup nổi) để dùng
   được trong offcanvas/modal; ô vuông 40px (44px trên điện thoại) để bấm trúng. */
.tk-icon-pick-btn { display: flex; align-items: center; gap: .5rem; text-align: start; cursor: pointer; }
.tk-icon-pick-ic { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: .375rem;
  background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); font-size: 1.1rem; flex: 0 0 auto; }
.tk-icon-pick-panel { margin-top: .5rem; padding: .75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  background: var(--bs-body-bg); }
.tk-icon-pick-grid { max-height: 18rem; overflow-y: auto; margin-top: .5rem; }
.tk-icon-pick-title { font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); margin: .5rem .25rem .25rem; }
.tk-icon-pick-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr)); gap: .25rem; }
.tk-icon-opt { display: inline-flex; align-items: center; justify-content: center; height: 2.5rem; border: 1px solid transparent; border-radius: .375rem;
  background: transparent; color: var(--bs-body-color); font-size: 1.25rem; }
.tk-icon-opt:hover, .tk-icon-opt:focus-visible { background: rgba(var(--bs-primary-rgb), .08); border-color: rgba(var(--bs-primary-rgb), .4); color: var(--bs-primary); }
.tk-icon-opt.active { background: var(--bs-primary); color: #fff; }
@media (max-width: 575.98px) {
  .tk-icon-pick-opts { grid-template-columns: repeat(auto-fill, minmax(2.75rem, 1fr)); }
  .tk-icon-opt { height: 2.75rem; }
}

/* Khối SỐ KHÁCH dùng chung (_PaxInput.cshtml, phiếu 035). Phiếu 076 (owner 2026-10-11 "giao diện hơi lệch… chỉnh lại cho cân đối"): các ô
   CHIA ĐỀU một lưới, lấp kín cột chứa nó (trần 52rem để hàng toàn trang không kéo dãn quá); ô Tổng là một ô cùng nhịp (nhãn nhỏ + hộp cao
   bằng ô số) — không trôi lơ lửng; điện thoại xếp 2×2, Tổng một hàng dưới. Bản nhỏ (thanh công cụ) giữ ô rộng cố định. */
.tk-pax { margin-bottom: 1rem; }
.tk-pax-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; max-width: 52rem; align-items: start; }
.tk-pax-cell { min-width: 0; }
.tk-pax-hint { font-size: .75rem; color: var(--bs-secondary-color); margin-top: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-pax-total { display: flex; align-items: center; gap: .3rem; white-space: nowrap; border-color: transparent;
  background: rgba(var(--bs-primary-rgb), .08); }
.tk-pax-total b { color: var(--bs-primary); }
.tk-pax-sm { margin-bottom: 0; }
.tk-pax-sm .tk-pax-row { display: flex; flex-wrap: wrap; gap: .5rem; max-width: none; }
.tk-pax-sm .tk-pax-cell { width: 5.5rem; }
.tk-pax-sm .tk-pax-sum { width: auto; }
@media (max-width: 575.98px) {
  .tk-pax-row, .tk-pax-sm .tk-pax-row { display: grid; grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .tk-pax-cell, .tk-pax-sm .tk-pax-cell { width: auto; }
  .tk-pax-sum { grid-column: 1 / -1; }
}

/* Phiếu 041 — hộp thoại chuẩn <tk-modal>: thân dài tự cuộn TRONG thân (thay modal-dialog-scrollable bị cấm, vì bản đó kéo nút
   đóng Vuexy vào trong khung, lệch mẫu). Chừa chỗ cho đầu + chân + lề trên/dưới. */
.tk-modal-scroll .modal-body { max-height: calc(100vh - 12.5rem); overflow-y: auto; }
@media (max-width: 991.98px) {
  /* Toàn màn trên màn hẹp: Bootstrap đã cho thân cuộn hết chiều cao còn lại. */
  .modal-fullscreen-lg-down.tk-modal-scroll .modal-body { max-height: none; }
  /* Vuexy chỉ kéo nút đóng vào trong cho .modal-fullscreen; bản -lg-down thì nút nổi ra ngoài màn → bị cắt. */
  html:not([dir=rtl]) .modal-fullscreen-lg-down .btn-close,
  html:not([dir=rtl]) .modal-fullscreen-lg-down .btn-close:hover { transform: translate(0, 0) !important; box-shadow: none; }
  /* …và lề 0.75rem hai bên của Vuexy (≤767px, trừ .modal-fullscreen) làm "toàn màn" hở hai mép. */
  .modal .modal-dialog.modal-fullscreen-lg-down { padding: 0 !important; }
}

/* ===== Đầu trang chuẩn (phiếu 040, owner 2026-10-09: "header tốn diện tích… chuẩn hoá lại TẤT CẢ") =====
   Do layout vẽ (_PageHeader): MỘT hàng — [← danh sách] tiêu đề 18px [mã] [badge] … nút phải. Không dòng đường dẫn, không câu
   mô tả (vào nút "?"). Điện thoại: hàng dính dưới thanh trên, nút còn icon (chữ vẫn là tên truy cập vì chỉ thu cỡ chữ về 0). */
.tk-page-header { display: flex; align-items: center; gap: .5rem 1rem; min-height: 2.25rem; margin-bottom: .75rem; }
.tk-page-heading { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1 1 auto; }
.tk-page-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; margin: 0; min-width: 0;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--bs-heading-color); }
.tk-page-sub { font-size: .8125rem; color: var(--bs-secondary-color); white-space: nowrap; flex-shrink: 0; }
.tk-page-meta { display: inline-flex; align-items: center; gap: .375rem; flex-shrink: 0; white-space: nowrap; }
.tk-page-back { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; font-size: .8125rem; white-space: nowrap;
                color: var(--bs-secondary-color); padding-right: .625rem; border-right: 1px solid var(--bs-border-color); }
.tk-page-back:hover { color: var(--bs-primary); }
.tk-page-actions { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; margin-left: auto; flex-wrap: nowrap; }
.tk-page-actions > form { margin: 0; }
.tk-page-actions .btn:not(.btn-icon) { padding: .375rem .875rem; font-size: .8125rem; line-height: 1.25rem; }
.tk-page-actions .btn-icon { width: 2rem; height: 2rem; }
.tk-stats-toggle.active { color: var(--bs-primary); }
/* Màn kiểu ứng dụng: tên màn + nút nằm TRÊN thanh trên cùng; ô tìm chung co lại. */
.tk-nav-app { display: flex; align-items: center; gap: .75rem; min-width: 0; margin-right: 1rem; flex: 0 1 auto; }
.tk-nav-app .tk-page-title { font-size: 1rem; }
.tk-nav-search--compact input { width: 9rem; }
@media (max-width: 1199.98px) { .tk-nav-search--compact { display: none !important; } }
/* Owner 2026-10-13 ("phía trên bị tràn giao diện"): cụm nút màn App không co (nowrap) nên đè lên ô tìm chung (phiếu 098). Thứ tự nhường chỗ:
   tên màn co lại "…" trước, ô tìm co tiếp (tối thiểu 6rem), cụm nút giữ nguyên — không phần tử nào chồng lên phần tử khác. */
.tk-nav-app .tk-page-title { min-width: min(12rem, 22vw); flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-nav-app .tk-page-actions { flex: 0 0 auto; margin-left: 0; }
.tk-nav-search--compact { flex: 1 1 6rem; min-width: 6rem; max-width: 16rem; }
.tk-nav-search--compact .nav-item { width: 100%; min-width: 0; }
.tk-nav-search--compact input { width: 100%; min-width: 0; text-overflow: ellipsis; }
@media (max-width: 575.98px) {
  .tk-page-header { position: sticky; top: 3.25rem; z-index: 9; background: var(--bs-body-bg); min-height: 2.75rem;
                    margin: -.25rem 0 .5rem; padding: .125rem 0; }
  .tk-page-title { font-size: 1rem; }
  .tk-page-back span, .tk-page-sub { display: none; }
  .tk-page-actions { gap: .375rem; }
  .tk-page-actions .btn:not(.btn-icon):has(> i.ti) { font-size: 0; padding: .375rem .5rem; }
  .tk-page-actions .btn:not(.btn-icon):has(> i.ti) > i { font-size: 1.125rem; margin: 0 !important; }
  .tk-nav-app .tk-page-actions .btn:not(.btn-icon) { font-size: 0; }
}
/* Lọc kỳ báo cáo (_LocKy) đứng trên hàng tiêu đề (phiếu 040): bỏ lề khung, một hàng. Điện thoại: xuống hàng riêng dưới tên màn. */
.tk-page-actions #frm-ky { padding: 0 !important; flex-wrap: nowrap !important; gap: .5rem !important; margin: 0; }
.tk-page-actions #frm-ky .form-control { flex: 0 1 15rem !important; min-width: 11rem; height: 2rem; padding-top: .25rem; padding-bottom: .25rem; font-size: .8125rem; }
@media (max-width: 767.98px) {
  .tk-page-header:has(#frm-ky) { flex-wrap: wrap; position: static; }
  .tk-page-header:has(#frm-ky) { column-gap: .375rem; }
  .tk-page-header:has(#frm-ky) .tk-page-heading { flex: 1 1 0; }
  .tk-page-actions:has(#frm-ky) { display: contents; }
  .tk-page-actions #frm-ky { order: 9; flex: 1 1 100%; }
  .tk-page-actions #frm-ky .form-control { flex: 1 1 auto !important; min-width: 0; }
}
/* Record ở điện thoại: hàng 1 = ← · tên · nút; badge / mã / ngày (PageMeta) xuống hàng 2 thay vì ép tên về 0. */
@media (max-width: 575.98px) {
  .tk-page-header--record .tk-page-heading { flex-wrap: wrap; row-gap: .25rem; }
  .tk-page-header--record .tk-page-title { flex: 1 1 0; }
  .tk-page-header--record .tk-page-meta { flex: 1 1 100%; order: 9; flex-wrap: wrap; white-space: normal; row-gap: .25rem; min-width: 0; max-width: 100%; }
  .tk-page-header--record .tk-page-meta > .d-flex { flex-wrap: wrap; }
  .tk-page-header--record .tk-page-meta > small { flex: 1 1 0; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 575.98px) {
  .tk-nav-app { margin-right: .5rem; gap: .375rem; }
  .tk-nav-app .tk-page-title { max-width: 34vw; font-size: .9375rem; }
  .tk-nav-app .tk-page-meta { display: none; }
  .tk-nav-app .tk-page-actions .btn:not(.btn-icon):has(> i.ti) { font-size: 0; padding: .375rem .5rem; }
  .tk-nav-app .tk-page-actions .btn:not(.btn-icon):has(> i.ti) > i { font-size: 1.125rem; margin: 0 !important; }
}

/* ===== Phiếu 040 — sửa sau soát giao diện độc lập ===== */
/* Tiêu đề (tên / mã bản ghi) KHÔNG bị cắt trước: giữ tối thiểu 16rem; dòng phụ trong PageMeta mới là phần co lại "…" (title đọc đủ). */
.tk-page-title { flex: 0 1 auto; min-width: min(100%, 16rem); }
.tk-page-meta { flex: 0 1 auto; min-width: 0; }
.tk-page-meta > .d-flex { flex-wrap: nowrap !important; min-width: 0; }
.tk-page-meta small, .tk-page-meta .small, .tk-page-meta .text-muted { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-page-meta .badge, .tk-page-meta .dropdown, .tk-page-meta a { flex-shrink: 0; }
/* Nút phụ trên đầu trang: viền rõ thay cho nền xám nhạt (trông như bị vô hiệu). */
.tk-page-actions .btn-label-secondary:not(.active) { background: var(--bs-card-bg, #fff); border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.tk-page-actions .btn-label-secondary:not(.active):hover { border-color: var(--bs-primary); color: var(--bs-primary); }
/* Menu "⋯" (tk-page-header.js): nhãn của nút số liệu chỉ hiện trong menu. */
.tk-page-actions .tk-menu-text { display: none; }
.tk-more .dropdown-menu .tk-menu-text { display: inline; margin-left: .5rem; }
.tk-more .dropdown-menu .dropdown-item > i { margin-right: .5rem; }
.tk-more .dropdown-menu .btn-group { display: flex; }
@media (max-width: 575.98px) {
  .tk-page-title { min-width: 45%; }
  .tk-page-actions .btn:not(.btn-icon):has(> i) { font-size: 0; padding: .375rem .5rem; }
  .tk-page-actions .btn:not(.btn-icon):has(> i) > i { font-size: 1.125rem; margin: 0 !important; }
}
/* Thẻ KPI bảng điều khiển (Tổng quan, Bàn làm việc) — soát 040: thẻ ~160px, điện thoại xếp dọc ~640px. Giữ dạng thẻ (cảm giác bảng
   điều khiển) nhưng icon nằm TRÁI, số cạnh nhãn: máy tính ≤ 90px; điện thoại lưới 2×2 bỏ icon + dòng phụ, cả khối ≤ ~120px. */
.tk-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: .75rem; align-items: center;
          padding: .75rem 1rem; }
.tk-kpi > .tk-kpi-ic { grid-row: 1 / span 3; margin-bottom: 0; width: 36px; height: 36px; font-size: 1.1rem; align-self: center; }
.tk-kpi > :not(.tk-kpi-ic) { grid-column: 2; min-width: 0; }
.tk-kpi .tk-kpi-value { font-size: 1.375rem; }
.tk-kpi .tk-kpi-sub { margin-top: .125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 767.98px) {
  .tk-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .tk-kpi { display: block; padding: .5rem .75rem; }
  .tk-kpi > .tk-kpi-ic, .tk-kpi > .tk-kpi-sub { display: none; }
  .tk-kpi .tk-kpi-label { font-size: .75rem; }
  .tk-kpi .tk-kpi-value { font-size: 1.125rem; }
}
/* Bảng trong card cuộn ngang ở điện thoại: bóng mờ hai mép khi còn cột bị khuất (soát 040: cột "Đã thu" bị cắt không gợi ý cuộn). */
@media (max-width: 767.98px) {
  .card .table-responsive, .tk-surface .table-responsive {
    background:
      linear-gradient(to right, var(--bs-card-bg, #fff) 30%, rgba(255, 255, 255, 0)) left center / 24px 100% no-repeat local,
      linear-gradient(to left, var(--bs-card-bg, #fff) 30%, rgba(255, 255, 255, 0)) right center / 24px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .14), transparent) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .14), transparent) right center / 10px 100% no-repeat scroll;
  }
  /* Tab trạng thái cuộn ngang: mờ mép phải để biết còn tab. */
  .tk-surface .nav-tabs { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
/* Toast SweetAlert2 (tk.toast …): chữ theo cỡ chuẩn — theme để tiêu đề swal 1.875rem nên toast hiện chữ ~32px (soát 033/040). */
.swal2-popup.swal2-toast .swal2-title { font-size: .9375rem; font-weight: 500; margin: .25rem .5rem; }
.swal2-popup.swal2-toast .swal2-icon { transform: scale(.8); margin: 0 .25rem; }
/* ===== Toast M-Travel (tk.toast) — owner 2026-10-09: "chỉnh lại cho đẹp theo bộ nhận diện M-Travel".
   Màu lấy từ logo: xanh #0B4F63 (nét, vạch, vòng), cam #F08A45 (thanh thời gian). Có bản nền tối. */
.swal2-popup.swal2-toast.mt-toast {
  --mt-brand: #0B4F63; --mt-brand-soft: #E3F1F4; --mt-accent: #F08A45;
  padding: .7rem .9rem .8rem .85rem; min-width: 18rem; max-width: 26rem; overflow: hidden;
  background: #fff; color: #1d2a33; border: 1px solid #e3e8ea; border-left: 4px solid var(--mt-brand);
  border-radius: .75rem; box-shadow: 0 10px 28px rgba(11, 79, 99, .16), 0 2px 6px rgba(11, 79, 99, .08);
}
.swal2-popup.swal2-toast.mt-toast .mt-toast-html { margin: 0; padding: 0; text-align: left; overflow: visible; }
.mt-toast-body { display: flex; align-items: center; gap: .7rem; }
.mt-toast-ic {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--mt-brand-soft); color: var(--mt-brand); font-size: 1.1rem;
}
.mt-toast-ic svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mt-toast-msg { font-size: .9375rem; font-weight: 500; line-height: 1.4; }
.swal2-popup.swal2-toast.mt-toast .mt-toast-bar { background: var(--mt-accent); height: 3px; opacity: .85; }
.swal2-popup.swal2-toast.mt-toast-warn { --mt-brand: #B45309; --mt-brand-soft: #FEF3E2; }
html.dark-style .swal2-popup.swal2-toast.mt-toast {
  --mt-brand: #8FD3DE; --mt-brand-soft: rgba(143, 211, 222, .14); --mt-accent: #F6A066;
  background: #1e2a33; color: #e6eef1; border-color: #2c3b45; border-left-color: var(--mt-brand);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
html.dark-style .swal2-popup.swal2-toast.mt-toast-warn { --mt-brand: #F6B26B; --mt-brand-soft: rgba(246, 178, 107, .14); }
@keyframes mt-toast-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes mt-toast-out { to { opacity: 0; transform: translateX(12px); } }
.mt-toast-in { animation: mt-toast-in .22s ease-out both; }
.mt-toast-out { animation: mt-toast-out .18s ease-in both; }
@media (prefers-reduced-motion: reduce) { .mt-toast-in, .mt-toast-out { animation: none; } }
@media (max-width: 575.98px) { .swal2-popup.swal2-toast.mt-toast { min-width: 0; max-width: calc(100vw - 2rem); } }
/* Tổng quan chuyến: dải số (tk-tq-so) ở điện thoại — gọn thay cho 5 thẻ cao xếp dọc (soát 040: ~270px) — 3 cột. */
@media (max-width: 575.98px) {
  .tk-tq-so { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .375rem; }
  .tk-tq-so b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tk-tq-so > div { padding: .375rem .625rem; }
  .tk-tq-so small { font-size: .6875rem; }
  .tk-tq-so b { font-size: .9375rem; }
}
@media (max-width: 575.98px) {
  .tk-cfg-card .card-body { padding: .625rem .75rem; }
  .tk-cfg-card .card-body > .d-flex { margin-bottom: 0 !important; }
  .tk-cfg-card .avatar { width: 2rem; height: 2rem; margin-right: .5rem !important; }
  .tk-cfg-card h6 { font-size: .8125rem; }
}

/* Phiếu 045 — dịch vụ trong ngày lịch trình: tranh màu nước (phương tiện, bữa ăn, nơi nghỉ) cạnh chữ. Dùng chung trình soạn + trang chi tiết. */
.tk-ngay-tranh { width: 24px; height: 24px; object-fit: contain; vertical-align: middle; margin-right: .375rem; flex: none; }
.tk-ngay-tranh-nho { width: 18px; height: 18px; margin-right: .25rem; }
.tk-ngay-muc { display: inline-flex; align-items: center; }

/* Phiếu 098: ô "Tìm kiếm" trên thanh đầu trang — khung kết quả gom theo loại (khách / lead / đơn / báo giá). */
.tk-gs-host { position: relative; }
/* position ép absolute: dưới navbar-expand-xl Bootstrap đặt .navbar-nav .dropdown-menu { position: static } (khung chen vào thanh trên). */
.tk-gs-panel { position: absolute !important; top: calc(100% + .5rem); left: 0; width: min(30rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); overflow-y: auto; padding: .25rem 0; }
.tk-gs-panel .dropdown-header { font-size: .75rem; text-transform: uppercase; letter-spacing: .02em; padding-top: .75rem; }
.tk-gs-row { display: flex; align-items: center; gap: .5rem; padding-right: .75rem; }
.tk-gs-row .tk-gs-item { flex: 1 1 auto; min-width: 0; white-space: normal; }
.tk-gs-title { display: block; font-weight: 500; }
.tk-gs-sub { display: block; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-gs-act { flex: 0 0 auto; }
.tk-gs-panel .tk-gs-item.active, .tk-gs-panel .tk-gs-item:focus { background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-body-color); }

/* Phiếu 100 — MỤC LỤC DÍNH của màn xem (chi tiết chuyến): một hàng neo dính ngay dưới thanh trên cùng, cuộn ngang khi hẹp; mục đang xem tô
   màu nhấn. Owner 2026-10-13: màn xem dùng mục lục dính, KHÔNG chia tab mới. */
.tk-muc-luc { position: sticky; top: 4rem; z-index: 8; display: flex; gap: .25rem; overflow-x: auto; white-space: nowrap;
              padding: .375rem .5rem; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
              scrollbar-width: thin; }
.tk-muc-luc a { padding: .25rem .625rem; border-radius: var(--bs-border-radius-sm); color: var(--bs-secondary-color); font-size: .8125rem; }
.tk-muc-luc a:hover { color: var(--bs-primary); background: var(--bs-tertiary-bg); }
.tk-muc-luc a.active { color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .1); font-weight: 500; }
@media (max-width: 575.98px) { .tk-muc-luc { top: 6.25rem; } }