/* ================================================================
   [PHÂN LỚP 1] CORE & VARIABLES
   ================================================================ */

/* ================================================================
   CSKH — Trang chủ Tư vấn & Chốt đơn · bàn làm việc 3 khung
   GIAO DIỆN CHUẨN THIẾT KẾ:mọi khung,nút,chữ,khoảng cách đều lấy
   từ TOKEN khai báo duy nhất tại:root — trong rule CẤM px rời
   (ngoại lệ duy nhất:bề dày viền 1px và breakpoint trong @media,nơi var() không dùng được).
   Bộ màu chuẩn:memory cskh-bo-mau-chuan (USER chốt 24-07-2026).
   ================================================================ */
:root {
  /* ---- MÀU — bộ màu chuẩn theo artifact «4 Nhắc hẹn» (USER chốt 24-07-2026):https://claude.ai/code/artifact/f5188c57-15ef-47dd-8ab4-79d04ece2eab
     --mut/--faint chỉnh đạt WCAG 2.1 AA (lệnh thuc-thi-wcag-mau-app-css 25-07-2026):
     4.5:1 trên mọi nền sáng thực tế kể cả --okbg; --faint trỏ --mut vì không tồn tại
     mức nhạt hơn --mut mà vẫn đạt AA trên --okbg. ---- */

  --p: #1f5770;
  --pd: #154052;
  --ink: #13343B;
  --mut: #626f76;
  --faint: var(--mut);
  --bg: #f6f7f6;
  --trang: #ffffff;
  /* trắng duy nhất:chữ/viền trên nền đậm + surface */

  --sf: var(--trang);
  --hair: #e4e9ea;
  --vien-nhap: #7e8a90;
  /* viền ô nhập — WCAG 2.1 §1.4.11 Non-text Contrast: 3.54:1 vs trắng, 3.30:1 vs --bg
     (≥3:1); --hair chỉ 1.23:1 (nhợt/fail), --mut 5.18:1 (đậm/lóa) → tone giữa */
  --gold: #f0bf71;
  --goldbg: #fdf6e7;
  --goldbd: #f0dcae;
  --goldink: #6b5312;
  --cam: #d9730d;
  --ok: #21808D;
  --okbg: #ecf5f6;
  --okbd: #bcd9dd;
  --oktext: #1a6670;
  /* chữ teal trên nền sáng (AA) */

  --err: #C0152F;
  --errbg: #fbeff1;
  --errbd: #efc4cc;
  --rowhover: #faf6ec;
  /* nền hover hàng danh sách + thẻ làm ngay */

  --okhover: #1b6c77;
  /* nền hover nút teal */

  --nen-phu: rgba(15, 40, 50, .28);
  /* màn phủ sau toast form */

  --header-nhat: #c8dbe2;
  /* chữ phụ trên header đậm (brand span,who) */

  --phu-sang: rgba(255, 255, 255, .15);
  /* pill sáng trên nền đậm (đếm việc nhóm) */


  /* ---- CHỮ — 1 font,6 bậc cỡ,3 bậc dãn dòng.
     USER chốt 24-07:thang CHẴN 10-28,CẤM font lẻ (11/12.5/13.5/15…). ---- */

  --font: "Segoe UI", Roboto, Arial, sans-serif;
  --chu-nhan: 12px;
  /* nhãn uppercase,meta:giờ,STT,chú giải,trạng thái */

  --chu-phu: 14px;
  /* chữ phụ,nút,input,badge,mô tả */

  --chu-than: 16px;
  /* thân bài,hàng danh sách,toast */

  --chu-tieude: 18px;
  /* brand,tiêu đề form */

  --chu-kpi: 22px;
  /* số KPI khung phải */

  --chu-h1: 22px;
  /* tên khách khung giữa */

  --dong-1: 1;
  /* pill 1 dòng:badge,chip */

  --dong-chat: 1.25;
  /* số KPI,nút 2 dòng */

  --dong-than: 1.5;
  /* văn bản */

  --gian-hoa: .06em;
  /* letter-spacing nhãn uppercase trong khối */

  --gian-rong: .12em;
  /* letter-spacing nhãn mục lớn (theo artifact chuẩn màu) */


  /* ---- KHOẢNG CÁCH — thang 7 bậc,mọi padding/margin/gap lấy từ đây ---- */

  --o-0: 2px;
  --o-1: 4px;
  --o-2: 8px;
  --o-3: 12px;
  --o-4: 16px;
  --o-5: 20px;
  --o-6: 24px;
  /* ---- BO GÓC ---- */

  --bo-cham: 2px;
  /* ô vuông chú giải màu */

  --bo-nho: 6px;
  /* ô nhập,nút gọn,thẻ */

  --bo-vua: 8px;
  /* nút lớn,khối */

  --bo-lon: 10px;
  /* toast form */

  --bo-tron: 999px;
  /* pill */


  /* ---- CAO KHỐI BẤM / PILL — dùng đúng bậc,không tự chế ---- */

  --h-nut-lon: 48px;
  /* nút kết cục CHỐT/RỚT/CHECK */

  --h-nut: 40px;
  /* hành động chính:thêm khách */

  --h-nut-phu: 36px;
  /* nút form,ghi nhanh,mô phỏng */

  --h-nut-nho: 28px;
  /* nút gọn trong dòng:sửa,tab lọc */

  --h-badge: 28px;
  /* pill badge khung giữa */

  --h-the: 24px;
  /* chip nhỏ lịch chăm sóc */


  /* ---- KHUNG & KÍCH THƯỚC RIÊNG ---- */

  --cao-menu: 52px;
  /* chiều cao thanh menu chuẩn SaaS */

  --khung-ben-min: 300px;
  /* sàn khung trái khi màn hẹp (@media 1180) */

  --rong-trang-chu: 1600px;
  /* tổng bề rộng thân trang chủ (.ws) — nguồn DUY NHẤT */

  --khung-giua: 700px;
  /* bề rộng CỐ ĐỊNH khung GIỮA (USER chốt 700); 2 khung bên = 1fr chia ĐỀU phần
     còn lại → tại trần 1600px = 450·700·450; màn hẹp: giữa giữ 700, 2 bên co đều */

  --dem-khung: var(--o-4);
  /* đệm ngang DUY NHẤT của cả 3 khung — nội dung 3 cột cùng bề rộng nhìn thấy */

  --le-trang-chu: var(--o-6);
  /* lề tối thiểu 2 bên khung .ws — màn hẹp co khung nhưng KHÔNG dán sát mép màn */

  --rong-than-index: min(var(--rong-trang-chu), calc(100% - 2 * var(--le-trang-chu)));
  /* bề rộng thân Trang chủ — nguồn DUY NHẤT cho .ws (trần + lề, co theo màn) */

  --net-focus: 2px;
  /* bề dày outline focus — nguồn duy nhất cho mọi outline bàn phím/ô nhập */

  --dam-o: rgba(255, 255, 255, .14);
  /* nền phủ mờ trên băng đậm --pd (nút Sửa header thẻ giữa) */

  --dam-chu: rgba(255, 255, 255, .75);
  /* chữ phụ trên băng đậm --pd (vật dụng + viền nút Sửa header thẻ giữa) */

  --rong-ngay: 128px;
  /* bề rộng ô chọn ngày trên header khung trái */

  --vach-tab: 3px;
  /* gạch chân tab đang chọn */

  --rail: 6px;
  /* bề dày thanh rail % tiến trình */

  --noidung-max: 860px;
  /* trần bề rộng nội dung khung giữa */

  --vach: 4px;
  /* viền màu trái:hàng,thẻ làm ngay,ô kế tiếp */

  --rong-form: 470px;
  /* bề rộng toast form (chốt/chăm sóc) */

  --rong-form-tao: 700px;
  /* bề rộng form tạo/sửa khách (USER chốt 700x500) */

  --rong-form-lendon: 920px;
  /* bề rộng form lên đơn HCM (2 cột + CKEditor) */

  --cao-form-tao: 500px;
  /* chiều cao tối thiểu form tạo/sửa khách */

  --rong-toast: 300px;
  /* bề rộng thẻ nhắc hẹn góc phải-trên */

  --rong-trang-login: 340px;
  /* chiều rộng hộp đăng nhập */

  --cao-form: 33vh;
  /* tâm dọc toast form (vị trí vàng ánh nhìn) */

  --rong-stt: 22px;
  /* cột STT danh sách */

  --icon-buoc: 20px;
  /* chấm số bước tiến trình */

  --rong-gio: 96px;
  /* ô nhập giờ trong dòng */

  --rong-nhap: 170px;
  /* sàn ô nhập diễn biến */

  --rong-dongho: 32px;
  /* cột thời gian/nhãn thẻ làm ngay */

  --cao-tl: 260px;
  /* trần khung cuộn tiến trình */

  --cham: 10px;
  /* ô vuông chú giải màu */

  --cuon: 8px;
  --cuon-mau: rgba(105, 120, 128, .35);
  /* màu thanh cuộn khi hover */

  --cuon-mau-dam: rgba(105, 120, 128, .6);
  /* màu thanh cuộn khi rê trực tiếp lên thumb */
  /* bề rộng scrollbar */


  /* ---- BÓNG ---- */

  --bong-form: 0 18px 52px rgba(15, 40, 50, .32);
  --bong-toast: 0 8px 24px rgba(0, 0, 0, .3);
  --bong-chot: 0 2px 8px rgba(33, 128, 141, .28);
  --bong-khoi: 0 1px 2px rgba(15, 40, 50, .04);
  /* bóng thẻ khối — theo artifact */


  /* ---- TƯƠNG TÁC — phản hồi chuẩn SaaS,dẫn xuất từ màu chuẩn ---- */

  --chuyen: .15s ease;
  /* transition hover/focus/active */

  --thoi-hien: .22s;
  /* thời lượng hiệu ứng trượt vào toast nhắc */

  --vien-focus: 0 0 0 3px rgba(31, 87, 112, .15);
  /* focus ring quanh input (từ --p) */


  /* ---- ỐP UI 6 TRANG (plan-op-ui-6-trang-cskh) ---- */

  --cao-cot: 80px;
  /* chiều cao biểu đồ cột giờ vàng */


  /* ---- TOKEN ARTIFACT KHO KHÁCH (--sh*) ---- */

  --shbg: #eef1f1;
  --shtx: var(--ink);
  --shmut: #5b6b72;
  --shsf: var(--trang);
  --shhair: #e0e6e7;
}

/* Không có biến thể dark --sh*: surface --sf/--bg/--ink cố định sáng,đổi riêng
   --sh* làm chữ sáng đè nền sáng (soviec không có .app) — vi phạm AA. */

/* ==== NỀN & CHỮ GỐC ==== */
* {
  box-sizing: border-box;
}

/* Scrollbar dọc: overflow-y:scroll GIỮ NGUYÊN (chừa gutter cố định — mọi trang cùng
   bề rộng viewport, chuyển trang không nhảy ngang; CẤM thay bằng scrollbar-gutter:stable
   vì Chrome cộng ĐÔI: đo thật 25-07-2026 clientWidth 1902 vs 1887 → lệch 15px).
   Track native (dải xám + mũi tên) ẨN mặc định, chỉ mờ khi hover — cùng cơ chế .scroll.
   Nền đặt ở html: chuyển trang browser sơn nền html TRƯỚC khi CSS body áp — thiếu thì
   lóe khung trắng mỗi lần bấm qua trang khác (giật/nháy). */
html {
  overflow-y: scroll;
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

html:hover {
  scrollbar-color: var(--cuon-mau) transparent;
}

html::-webkit-scrollbar {
  width: var(--cuon);
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--bo-tron);
}

html:hover::-webkit-scrollbar-thumb {
  background: var(--cuon-mau);
}

html::-webkit-scrollbar-thumb:hover {
  background: var(--cuon-mau-dam);
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--chu-than);
  line-height: var(--dong-than);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
}

/* ==== CHIỀU RỘNG TRANG — ĐÓNG KHUNG PHẦN THÂN (LAYOUT BÊN TRONG),
   MỖI TRANG 1 RULE RIÊNG TRÊN BODY, CẤM DÙNG CHUNG ==== */
body.pg-index .ws {
  width: var(--rong-than-index);
  margin: 0 auto;
}

body.pg-khach .wrap {
  width: 100%;
  max-width: 1400px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

body.pg-nhachen .wrap {
  width: 1200px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

body.pg-soviec .wrap {
  width: 1200px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

body.pg-tinhtrang .wrap {
  width: 1200px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

body.pg-chiso .wrap {
  width: 1200px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

body.pg-quantri .wrap {
  width: 1200px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

body.pg-chamsoc .wrap {
  width: 1180px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}

body.pg-daydon .wrap {
  width: 1180px;
  padding-left: 0;
  padding-right: 0;
  margin: 0 auto;
}


button {
  font-family: var(--font);
}

input,
select {
  font-family: var(--font);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--chu-phu);
}

th {
  background: var(--p);
  color: var(--trang);
  font-weight: 500;
  padding: var(--o-2) var(--o-3);
  text-align: left;
  white-space: nowrap;
}

td {
  padding: var(--o-2) var(--o-3);
  border-bottom: 1px solid var(--hair);
  vertical-align: top;
}

/* ================================================================
   [PHÂN LỚP 2] GLOBAL COMPONENTS
   ================================================================ */

/* ==== PHẢN HỒI TƯƠNG TÁC CHUNG — chuẩn SaaS ==== */
button,
.nav a,
.row,
.qi {
  transition: background var(--chuyen), border-color var(--chuyen), color var(--chuyen), box-shadow var(--chuyen);
}

/* Phần tử «nút» của demo (button) khi render dạng <a> để điều hướng SSR
   không được gạch chân như link mặc định — diệt trọn lớp .row/.qi/.btn. */
.row,
.qi,
.btn,
.tab,
.the-xlc,
.hen1 .goi {
  text-decoration: none;
}

.btn:active,
.nhanh button:active,
.cfoot button:active {
  transform: translateY(1px);
}

.f input:focus,
.f select:focus,
form.hen input:focus,
.moc.ghost input:focus {
  outline: none;
  border-color: var(--p);
  background: var(--sf);
  box-shadow: var(--vien-focus);
}

/* ==== NHẮC HẸN — 1 hẹn = 1 THẺ riêng, xếp chồng ở GÓC PHẢI-TRÊN (dưới menu),
   rộng --rong-toast (300px). QUÁ HẠN (đỏ) có nút × / ĐẾN HẠN... thực ra:
   đến hạn CÓ ×, quá hạn KHÔNG × (buộc NV xử lý) — × chỉ render ở thẻ đến hạn (app.js).
   Màu: đỏ=SLA (quá hạn), vàng=hẹn (đến hạn) theo bộ màu chuẩn. Mới xếp dưới cũ. ==== */
.nhacwrap {
  position: fixed;
  top: calc(var(--cao-menu) + var(--o-3));
  right: var(--o-3);
  z-index: 60;
  width: var(--rong-toast);
  max-width: calc(100% - 2 * var(--o-3));
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
}

.nhaccard {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-left: var(--vach) solid transparent;
  border-radius: var(--bo-vua);
  box-shadow: var(--bong-form);
  padding: var(--o-2) var(--o-3);
}

@media (prefers-reduced-motion: no-preference) {
  .nhaccard {
    animation: nt-vao var(--thoi-hien) ease both;
  }

  @keyframes nt-vao {
    from {
      opacity: 0;
      transform: translateX(var(--o-4));
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

.nhaccard.nt-qh {
  border-left-color: var(--err);
  background: var(--errbg);
}

.nhaccard.nt-dh {
  border-left-color: var(--gold);
}

.nhaccard .nt-top {
  display: flex;
  align-items: center;
  gap: var(--o-2);
}

.nhaccard .nt-ic {
  flex: none;
  font-size: var(--chu-phu);
  line-height: 1;
}

.nhaccard .nt-ten {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nhaccard .nt-badge {
  flex: none;
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--o-2);
  border-radius: var(--bo-tron);
  font-size: var(--chu-nhan);
  font-weight: 700;
}

.nhaccard.nt-qh .nt-badge {
  background: var(--errbg);
  color: var(--err);
  border: 1px solid var(--errbd);
}

.nhaccard.nt-dh .nt-badge {
  background: var(--goldbg);
  color: var(--goldink);
  border: 1px solid var(--goldbd);
}

.nhaccard .nt-x {
  flex: none;
  border: none;
  background: none;
  color: var(--mut);
  font-size: var(--chu-tieude);
  line-height: 1;
  cursor: pointer;
  padding: 0 var(--o-1);
  border-radius: var(--bo-nho);
}

.nhaccard .nt-x:hover {
  color: var(--ink);
  background: var(--bg);
}

.nhaccard .nt-sub {
  margin-top: var(--o-0);
  font-size: var(--chu-nhan);
  color: var(--mut);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nhaccard .nt-sub time {
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.nhaccard .nt-go {
  display: block;
  text-align: right;
  margin-top: var(--o-1);
  color: var(--p);
  font-weight: 600;
  font-size: var(--chu-nhan);
  text-decoration: none;
}

.nhaccard .nt-go:hover {
  text-decoration: underline;
}

/* ==== BỐ CỤC 3 KHUNG ====
   USER chốt 25-07:bên:giữa:bên = 5:6:5 (tại trần 1600px = 500·600·500),
   định nghĩa tường minh tại:root;màn hẹp co đều theo tỉ lệ — không tràn;
   đệm ngang trong khung dùng chung --dem-khung. */
.ws {
  flex: 1;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--khung-giua) minmax(0, 1fr);
  min-height: 0;
  border-inline: 1px solid var(--hair);
}

/* Rãnh thanh cuộn chừa ĐỐI XỨNG 2 mép — thiếu both-edges thì thanh cuộn
   (trong suốt) chiếm riêng mép phải làm nội dung khung lệch qua trái */
.pane {
  min-height: 0;
  overflow-y: scroll;
  scrollbar-gutter: stable both-edges;
}

/* Khung trái tự cuộn ở .rows bên trong — bỏ rãnh gutter để toolbar đậm chạm mép */
.list {
  background: var(--sf);
  border-right: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.detail {
  background: var(--bg);
  padding: var(--o-5) var(--dem-khung);
}

.detail>* {
  max-width: var(--noidung-max);
  margin-inline: auto;
}

.side {
  background: var(--sf);
  border-left: 1px solid var(--hair);
  padding: var(--o-4) var(--dem-khung);
  display: flex;
  flex-direction: column;
  gap: var(--o-4);
}

/* var() không dùng được trong điều kiện @media → breakpoint để số trần */
@media(max-width:1180px) {
  .ws {
    grid-template-columns: var(--khung-ben-min) minmax(0, 1fr);
  }

  .side {
    display: none;
  }
}

@media(max-width:780px) {
  .ws {
    grid-template-columns: 1fr;
    grid-template-rows: 44vh 1fr;
  }

  .list {
    border-right: none;
    border-bottom: 1px solid var(--hair);
  }
}

/* ==== KHUNG TRÁI — header NHẸ (thanh thoát như .side h3 "HÔM NAY"):
   menu trên cùng đã nền đậm rồi → header này nền sáng, nhãn xám hoa,
   vạch ngăn dưới. Không nền đậm để tránh 2 khối đen chồng nhau. ==== */
.ltool {
  background: var(--sf);
  padding: var(--o-3) var(--dem-khung) var(--o-4);
  border-bottom: 1px solid var(--hair);
}

.ltool .r1 {
  display: flex;
  align-items: center;
  gap: var(--o-2);
}

.ltool h2 {
  margin: 0;
  flex: 1;
  font-size: var(--chu-nhan);
  letter-spacing: var(--gian-rong);
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

.ltool .them {
  border: none;
  border-radius: var(--bo-vua);
  background: var(--ok);
  color: var(--trang);
  font-weight: 700;
  font-size: var(--chu-phu);
  height: var(--h-nut-phu);
  padding: 0 var(--o-4);
  cursor: pointer;
}

.ltool .them:hover {
  background: var(--okhover);
}

/* Nút Lên đơn HCM — cùng cấp .them, hue --p để phân biệt "đẩy sang hcm" */
.lendon {
  border: none;
  border-radius: var(--bo-vua);
  background: var(--p);
  color: var(--trang);
  font-weight: 700;
  font-size: var(--chu-phu);
  height: var(--h-nut);
  padding: 0 var(--o-4);
  cursor: pointer;
}
.lendon:hover {
  background: var(--pd);
}

.ltool .r2 {
  display: flex;
  gap: var(--o-2);
  margin-top: var(--o-3);
}

.ltool .r2 form {
  display: flex;
  flex: none;
}

.ltool input {
  height: var(--h-nut-phu);
  border: 1px solid var(--vien-nhap);
  border-radius: var(--bo-vua);
  padding: 0 var(--o-3);
  min-width: 0;
  font-size: var(--chu-phu);
  background: var(--bg);
  color: var(--ink);
}

.ltool input::placeholder {
  color: var(--faint);
}

.ltool input:focus {
  outline: none;
  border-color: var(--p);
  background: var(--sf);
  box-shadow: var(--vien-focus);
}

.ltool .ngay {
  width: var(--rong-ngay);
}

.ltool .tim {
  flex: 1;
}

/* Tab đếm số:4 ô đều nhau,số lớn trên — nhãn dưới,gạch chân tab đang chọn */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--hair);
}

.tab {
  border: none;
  background: none;
  padding: var(--o-2) 0;
  font-size: var(--chu-nhan);
  font-weight: 600;
  color: var(--mut);
  border-bottom: var(--vach-tab) solid transparent;
  cursor: pointer;
}

.tab b {
  display: block;
  font-size: var(--chu-tieude);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.tab:hover {
  background: var(--rowhover);
}

.tab.on {
  border-bottom-color: var(--p);
  color: var(--p);
}

.tab.on b {
  color: var(--p);
}

/* ---- Nút chuẩn dùng chung ---- */
.btn {
  border: none;
  border-radius: var(--bo-nho);
  height: var(--h-nut-phu);
  padding: 0 var(--o-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--chu-phu);
  font-weight: 600;
  cursor: pointer;
  background: var(--p);
  color: var(--trang);
}

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

.btn.line {
  background: var(--sf);
  color: var(--ink);
  border: 1px solid var(--vien-nhap);
}

.btn.line:hover {
  background: var(--bg);
  border-color: var(--mut);
}

/* ==== FORM LÊN ĐƠN HCM — cấu trúc gốc, ĐỒNG BỘ TOKEN CSKH (bảng-màu chuẩn, không hex cứng) ==== */
#formLenDon {
  width: min(var(--rong-form-lendon), 95vw);
}
.ld-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-5);
}
.hcmbox {
  border: 1px solid var(--hair);
  border-top: var(--o-0) solid var(--err);
  background: var(--sf);
  box-shadow: var(--bong-khoi);
}
.hcmbox .hd {
  text-align: center;
  font-size: var(--chu-tieude);
  font-weight: 600;
  color: var(--pd);
  padding: var(--o-2) var(--o-3);
  border-bottom: 1px solid var(--hair);
}
.hcmbox .bd {
  padding: var(--o-4);
}
.hcmbox .fg {
  margin-bottom: var(--o-4);
}
.hcmbox .fg:last-child {
  margin-bottom: 0;
}
.fg label {
  display: block;
  margin-bottom: var(--o-1);
  font-size: var(--chu-phu);
  font-weight: 700;
  color: var(--ink);
}
.fg label i {
  color: var(--err);
  font-style: normal;
}
.fg input,
.fg select,
.fg textarea {
  width: 100%;
  border: 1px solid var(--vien-nhap);
  border-radius: var(--bo-nho);
  padding: 0 var(--o-3);
  height: var(--h-nut-phu);
  font-size: var(--chu-phu);
  font-family: var(--font);
  color: var(--ink);
  background: var(--sf);
}
.fg textarea {
  height: auto;
  padding: var(--o-2) var(--o-3);
  resize: vertical;
}
.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  outline: none;
  border-color: var(--p);
}
.ld-row3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr;
  gap: var(--o-3);
}
.ld-row3 .fg {
  margin-bottom: 0;
}
.ld-ct {
  margin-top: var(--o-5);
}
.ld-ctlbl {
  display: block;
  margin-bottom: var(--o-1);
  font-size: var(--chu-phu);
  font-weight: 700;
  color: var(--ink);
  text-transform: uppercase;
}
/* ==== KHUNG PHẢI — theo dõi ==== */
/* Nhãn mục uppercase giãn rộng,kèm đếm nhỏ màu brand bên phải */
.side h3 {
  font-size: var(--chu-nhan);
  letter-spacing: var(--gian-rong);
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
  margin: 0 0 var(--o-2);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.side h3 small {
  font-size: var(--chu-nhan);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--p);
}

.kpi.warm b {
  color: var(--err);
}

.kpi.good b {
  color: var(--ok);
}

/* ==== TOAST FORM — giữa ngang,1/3 dọc ==== */
@keyframes pop {
  from {
    transform: translate(-50%, -50%) scale(.97);
    opacity: 0;
  }

  to {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

.tform {
  position: fixed;
  left: 50%;
  top: var(--cao-form);
  transform: translate(-50%, -50%);
  width: var(--rong-form);
  max-width: 94vw;
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-lon);
  box-shadow: var(--bong-form);
  padding: var(--o-5);
  z-index: 30;
  display: none;
}

.tform.open {
  display: block;
  animation: pop .18s ease-out;
}

/* Form cao (Tạo/Sửa khách + Lên đơn) — NEO ĐỈNH ngang hàng toast phải
   (top = ngay dưới header, = vị trí .nhacwrap) + cuộn trong; thay căn-giữa-dọc
   (--cao-form) vốn cắt đỉnh khi form cao. */
#formTao,
#formSua,
#formLenDon {
  top: calc(var(--cao-menu) + var(--o-3));
  transform: translateX(-50%);
  max-height: calc(100vh - var(--cao-menu) - var(--o-5));
  overflow-y: auto;
}

#formTao.open,
#formSua.open,
#formLenDon.open {
  animation-name: pop-top;
}

@keyframes pop-top {
  from {
    transform: translateX(-50%) scale(.98);
    opacity: 0;
  }

  to {
    transform: translateX(-50%) scale(1);
    opacity: 1;
  }
}

.tback {
  position: fixed;
  inset: 0;
  background: var(--nen-phu);
  z-index: 29;
  display: none;
}

.tback.open {
  display: block;
}

.tform h2 {
  margin: 0 0 var(--o-3);
  font-size: var(--chu-tieude);
  color: var(--p);
}

.grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-3);
  position: relative;
}

.f {
  display: flex;
  flex-direction: column;
  gap: var(--o-1);
  font-size: var(--chu-phu);
  color: var(--ink);
  font-weight: 700;
}

/* Viền input dùng --vien-nhap (WCAG 1.4.11 ≥3:1) — rõ ràng, có độ nét,
   không nhợt như --hair (fail) cũng không đậm/lóa như --mut */
.f input,
.f select {
  height: var(--h-nut);
  border: 1px solid var(--vien-nhap);
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-3);
  font-size: var(--chu-than);
  background: var(--sf);
  color: var(--ink);
  font-weight: 400;
}

/* Form TẠO/SỬA khách: 700x500, ô chia đều 2x4, canh giữa dọc — hài hòa */
#formTao,
#formSua {
  width: var(--rong-form-tao);
  min-height: var(--cao-form-tao);
}

#formTao.open,
#formSua.open {
  display: flex;
  flex-direction: column;
}

#formTao .grid2,
#formSua .grid2 {
  flex: 1;
  align-content: center;
  gap: var(--o-4);
}

.f.full {
  grid-column: 1/-1;
}

.f.chk {
  flex-direction: row;
  align-items: center;
  gap: var(--o-2);
  text-transform: none;
}

/* Checkbox KHG: trả về cỡ UA — không ăn height ô nhập 40px của .f input */
.f.chk input {
  width: auto;
  height: auto;
}

.hit {
  position: absolute;
  top: calc(100% + var(--o-1));
  left: 0;
  right: 0;
  z-index: 10;
  padding: var(--o-2) var(--o-3);
  background: var(--goldbg);
  border: 1px solid var(--goldbd);
  border-radius: var(--bo-nho);
  font-size: var(--chu-phu);
  color: var(--goldink);
  box-shadow: var(--bong-toast);
}

.hit.hide {
  display: none;
}

.hit.lbl {
  margin-top: var(--o-3);
}

.tact {
  display: flex;
  gap: var(--o-2);
  margin-top: var(--o-4);
}

.tact .btn {
  flex: 1;
}

/* Biến thể nút GỌN (vừa chữ, xếp trái) — thay hành vi mặc định flex:1 (kéo full).
   Dùng chung cho footer form Tạo phiên (#formTao) + Lên đơn (#formLenDon):
   HTML gắn class "gon" → CSS khớp tường minh, không cần rule id-scope riêng. */
.tact.gon .btn {
  flex: 0 0 auto;
  padding: 0 var(--o-6);
}

/* ==== TOAST THÔNG BÁO NGẮN ==== */
.toast {
  position: fixed;
  left: 50%;
  bottom: var(--o-6);
  transform: translateX(-50%);
  background: var(--pd);
  color: var(--trang);
  border-radius: var(--bo-vua);
  padding: var(--o-3) var(--o-5);
  font-size: var(--chu-than);
  box-shadow: var(--bong-toast);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 40;
  max-width: 90vw;
}

/* Toast kết quả server (flash):overlay fixed kế thừa .toast — KHÔNG chiếm dòng
   (toast trong luồng khi sập sau 5s sẽ xô cả trang = layout shift). */
.toast.ok,
.toast.err {
  opacity: 1;
  pointer-events: auto;
  background: var(--okbg);
  border: 1px solid var(--okbd);
  color: var(--oktext);
}

.toast.err {
  background: var(--errbg);
  border-color: var(--errbd);
  color: var(--err);
}

/* ================================================================
   TRANG PHỤ (khach/chamsoc/nhachen/chiso/quantri/login) — ngoài demo Sale.
   Dùng token demo. Sale giữ .blk/.sec (demo);
  trang phụ dùng .card để không đụng.
   ================================================================ */
.mut,
.muted {
  color: var(--mut);
  font-size: var(--chu-phu);
}

.tw {
  overflow-x: auto;
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  margin: 0 var(--o-5) var(--o-3);
}

.warm {
  color: var(--err);
}

.good {
  color: var(--ok);
}

.login {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

.login-box {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-lon);
  padding: var(--o-6);
  width: var(--rong-trang-login);
  display: flex;
  flex-direction: column;
  gap: var(--o-3);
  box-shadow: var(--bong-form);
}

.login-box h1 {
  margin: 0;
  font-size: var(--chu-tieude);
  color: var(--p);
}

.login-box label {
  display: flex;
  flex-direction: column;
  gap: var(--o-1);
  font-size: var(--chu-nhan);
  color: var(--mut);
}

.login-box input {
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-3);
  font-size: var(--chu-than);
}

/* ================================================================
   HEADER DUY NHẤT toàn hệ — chuẩn demo Quản trị (USER duyệt 24-07).
   Nguồn markup:layout_header() (lib/helpers.php). 1 hàng:brand · nav · who.
   ================================================================ */
/* header.top (định danh phần tử) — KHÔNG dùng .top trần:trang Sale có
   <span class="top"> trong từng hàng danh sách,selector trần sẽ đè nền/màu. */
/* Chiều cao CỐ ĐỊNH (--cao-menu) + cấm wrap: whoHtml mỗi trang dài ngắn
   khác nhau,cho wrap là header nở 2 hàng ở trang này,1 hàng ở trang kia. */
header.top {
  background: var(--pd);
  color: var(--trang);
  height: var(--cao-menu);
  flex: none;
  /* body pg-index là flex column — cấm header co giãn theo nội dung trang */
  line-height: var(--dong-than);
  /* đặt tường minh:body thường 1.5,body.pg-art 1.6 — kế thừa là lệch giữa trang */
  padding: 0 var(--o-5);
  display: flex;
  flex-wrap: nowrap;
  gap: var(--o-4);
  align-items: center;
}

header.top .brand {
  font-size: var(--chu-than);
  font-weight: 700;
  white-space: nowrap;
}

header.top .brand span {
  font-weight: 300;
  color: var(--header-nhat);
}

header.top .who {
  margin-left: auto;
  font-size: var(--chu-nhan);
  color: var(--header-nhat);
  white-space: nowrap;
}

header.top .who b {
  color: var(--trang);
  font-variant-numeric: tabular-nums;
  display: inline-block;
  min-width: 4ch;
  text-align: center;
}

.nav {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--o-1);
  margin-left: var(--o-2);
}

/* header.top .nav a (0-2-1):phải THẮNG «.pg-art a{color:--p}» (0-1-1,đứng sau) —
   thua là chữ menu --p chìm trên nền --pd (1.38:1) ở 7 trang pg-art */
header.top .nav a {
  color: var(--trang);
  text-decoration: none;
  font-size: var(--chu-nhan);
  padding: var(--o-1) var(--o-3);
  border-radius: var(--bo-tron);
  white-space: nowrap;
  /* cấm chữ trong pill tự xuống dòng khi hẹp — nguồn nở dọc cuối cùng của menu */
  text-align: center;
}

/* Khóa bề rộng pill = bản ĐẬM (::after tàng hình lặp nhãn qua data-t):
   .on đổi weight 400→600 nở pill 1–2px làm các mục sau xê dịch mỗi lần
   chuyển trang (menu nhún) — đo thật 25-07-2026: 63→64.1 · 70.9→72.5 · 88.2→90.3. */
header.top .nav a::after {
  content: attr(data-t);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

.nav a:hover {
  background: rgba(255, 255, 255, .12);
  color: var(--trang);
}

.nav a:focus-visible {
  outline: var(--net-focus) solid var(--trang);
  outline-offset: 1px;
}

.nav a.on {
  background: var(--gold);
  color: #3a2a06;
  font-weight: 600;
}

/* ================================================================
   [PHÂN LỚP 3] SHARED UI MODULES
   ================================================================ */

/* Hàng nút / form nội dòng dùng chung (thay inline style) */
.hang-nut {
  display: flex;
  gap: var(--o-2);
  flex-wrap: wrap;
}

.hang-chon {
  display: flex;
  gap: var(--o-2);
  align-items: center;
}

.trong-dong {
  display: inline;
}

button:focus-visible,
a:focus-visible {
  outline: var(--o-0) solid var(--p);
  outline-offset: var(--o-0);
}

/* ==== SCROLLBAR — ẩn khi rảnh,mờ khi hover ==== */
.scroll {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

.scroll:hover {
  scrollbar-color: var(--cuon-mau) transparent;
}

.scroll::-webkit-scrollbar {
  width: var(--cuon);
  height: var(--cuon);
}

.scroll::-webkit-scrollbar-track {
  background: transparent;
}

.scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--bo-tron);
}

.scroll:hover::-webkit-scrollbar-thumb {
  background: var(--cuon-mau);
}

.scroll::-webkit-scrollbar-thumb:hover {
  background: var(--cuon-mau-dam);
}

.rows {
  flex: 1;
  overflow-y: scroll;
}

/* Hàng khách:STT tinh tế + chấm màu trạng thái + tên/mô tả + giờ/nhãn phải */
.row {
  display: flex;
  align-items: center;
  gap: var(--o-2);
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  cursor: pointer;
  padding: var(--o-3) var(--dem-khung);
  border-bottom: 1px solid var(--hair);
  font-size: var(--chu-than);
  color: var(--ink);
}

.row:hover {
  background: var(--rowhover);
}

.row.sel {
  background: var(--okbg);
  box-shadow: inset var(--vach-tab) 0 0 var(--p);
}

/* STT nhạt,tabular,căn phải trong cột hẹp cố định — hàng nào cũng thẳng cột,
   không tranh sự chú ý với tên khách (tinh tế) */
.row .no {
  flex: none;
  width: var(--rong-stt);
  text-align: right;
  font-size: var(--chu-nhan);
  font-weight: 600;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.row .dot {
  flex: none;
  width: var(--cham);
  height: var(--cham);
  border-radius: var(--bo-tron);
  background: var(--errbd);
}

.row.s-mo .dot {
  background: var(--p);
}

.row.s-hen .dot {
  background: var(--gold);
}

.row.s-chot .dot {
  background: var(--ok);
}

/* Phiên đã đóng:dịu bằng MÀU tường minh (--mut),KHÔNG opacity. */
.row.s-chot .mid b,
.row.s-rot .mid b {
  color: var(--mut);
  font-weight: 600;
}

.row .mid {
  flex: 1;
  min-width: 0;
}

.row .mid b {
  display: block;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row .mid small {
  font-size: var(--chu-phu);
  color: var(--mut);
}

.row .end {
  flex: none;
  text-align: right;
}

.row .end time {
  display: block;
  font-size: var(--chu-nhan);
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.row .end .st {
  font-size: var(--chu-nhan);
  font-weight: 700;
  white-space: nowrap;
}

.st.c-mo {
  color: var(--p);
}

.st.c-hen {
  color: var(--goldink);
}

.st.c-chot {
  color: var(--oktext);
}

.st.c-rot {
  color: var(--err);
}

/* ==== KHUNG GIỮA — phiên đang chọn ==== */
.empty {
  color: var(--faint);
  text-align: center;
  margin-top: calc(var(--o-6) * 3);
  font-size: var(--chu-than);
}

/* Tiêu đề màu brand --p như headrow h1 của artifact — dùng cho trang phụ */
.headrow h1 {
  margin: 0;
  font-size: var(--chu-h1);
  font-weight: 600;
  color: var(--p);
  letter-spacing: -.01em;
}

/* ---- Thẻ hồ sơ khách trang chủ (.hoso — tên riêng,không đụng .card trang phụ) ---- */
.hoso {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-lon);
  overflow: hidden;
  box-shadow: var(--bong-khoi);
}

.chead {
  background: var(--pd);
  color: var(--trang);
  padding: var(--o-3) var(--o-5);
  display: flex;
  align-items: center;
  gap: var(--o-3);
}

.chead h1 {
  margin: 0;
  font-size: var(--chu-h1);
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.chead h1 small {
  font-weight: 400;
  font-size: var(--chu-phu);
  color: var(--dam-chu);
  margin-left: var(--o-2);
}

/* Pill trạng thái trong băng đậm:hình học 1 chỗ,biến thể chỉ đổi màu */
.pill {
  flex: none;
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--o-3);
  border-radius: var(--bo-tron);
  font-size: var(--chu-nhan);
  font-weight: 700;
}

.pill.rot {
  background: var(--errbg);
  color: var(--err);
}

.pill.hen {
  background: var(--goldbg);
  color: var(--goldink);
}

.pill.ok {
  background: var(--okbg);
  color: var(--oktext);
}

.chead .sua {
  flex: none;
  border: 1px solid var(--dam-chu);
  background: none;
  color: var(--trang);
  border-radius: var(--bo-nho);
  height: var(--h-nut-nho);
  padding: 0 var(--o-3);
  font-size: var(--chu-nhan);
  font-weight: 600;
  cursor: pointer;
}

.chead .sua:hover {
  background: var(--dam-o);
}

.cmeta {
  display: flex;
  gap: var(--o-2);
  padding: var(--o-3) var(--o-5);
  border-bottom: 1px solid var(--hair);
  flex-wrap: wrap;
}

.cmeta .bdg {
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
}

.cbody {
  padding: var(--o-4) var(--o-5);
}

/* Lưới key-value thông tin khách:2 cột,vạch trái mảnh */
.kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-2) var(--o-6);
}

/* Nhãn + giá trị CÙNG 1 HÀNG (baseline) — không đẩy giá trị xuống dòng */
.kv div {
  border-left: var(--vach) solid var(--hair);
  padding-left: var(--o-3);
  display: flex;
  align-items: baseline;
  gap: var(--o-2);
  min-width: 0;
}

.kv .k {
  flex: none;
  font-size: var(--chu-nhan);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
  color: var(--mut);
  font-weight: 700;
}

.kv b {
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Dòng khách cũ (★ n lần dùng dịch vụ) — nền vàng dịu */
.khachcu {
  margin-top: var(--o-3);
  font-size: var(--chu-phu);
  font-weight: 600;
  padding: var(--o-2) var(--o-3);
  border-radius: var(--bo-nho);
  background: var(--goldbg);
  color: var(--goldink);
  border: 1px solid var(--goldbd);
}

/* Đầu tiến trình:nhãn + đếm bước + rail % */
.tlh {
  display: flex;
  align-items: baseline;
  gap: var(--o-2);
  margin: var(--o-5) 0 var(--o-3);
}

.tlh h3 {
  margin: 0;
  font-size: var(--chu-nhan);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
  color: var(--p);
  font-weight: 700;
}

.tlh .dem {
  font-size: var(--chu-nhan);
  color: var(--mut);
}

.tlh .rail {
  flex: 1;
  height: var(--rail);
  border-radius: var(--bo-tron);
  background: var(--hair);
  overflow: hidden;
}

.tlh .rail i {
  display: block;
  height: 100%;
  background: var(--ok);
}

/* Dòng mốc tiến trình:đường ray dọc nối các chấm — ray + chấm nằm TRONG
   vùng cuộn (đặt ngoài sẽ bị overflow của .mocs cắt thành nửa vòng) */
.mocs {
  position: relative;
  max-height: var(--cao-tl);
  overflow-y: auto;
}

/* Đường ray dọc canh tâm vòng tròn số (--icon-buoc):giữa cột STT */
.mocs::before {
  content: "";
  position: absolute;
  left: calc((var(--icon-buoc) - var(--o-0)) / 2);
  top: var(--o-2);
  bottom: var(--o-2);
  width: var(--o-0);
  background: var(--hair);
}

.moc {
  position: relative;
  padding: var(--o-1) 0 var(--o-1) calc(var(--icon-buoc) + var(--o-3));
  font-size: var(--chu-phu);
}

/* Số thứ tự bước:vòng tròn XANH đặc,số trắng — che ray, canh trái */
.moc-n {
  position: absolute;
  left: 0;
  top: var(--o-1);
  width: var(--icon-buoc);
  height: var(--icon-buoc);
  border-radius: var(--bo-tron);
  background: var(--p);
  color: var(--trang);
  font-size: var(--chu-nhan);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
}

.moc time {
  color: var(--faint);
  font-size: var(--chu-nhan);
  margin-right: var(--o-2);
  font-variant-numeric: tabular-nums;
}

/* Ô ghi bước kế tiếp:số mờ,viền đứt (chưa có nội dung) */
.moc.ghost .moc-n {
  background: var(--bg);
  color: var(--faint);
  border: 1px dashed var(--faint);
}

.moc.ghost {
  display: flex;
  gap: var(--o-2);
}

.moc.ghost input {
  flex: 1;
  height: var(--h-nut-phu);
  border: 1px dashed var(--vien-nhap);
  border-radius: var(--bo-vua);
  padding: 0 var(--o-3);
  font-size: var(--chu-phu);
  background: var(--bg);
  color: var(--ink);
  min-width: 0;
}

.moc.ghost input::placeholder {
  color: var(--faint);
}

.moc.ghost .ghi {
  border: none;
  border-radius: var(--bo-vua);
  background: var(--p);
  color: var(--trang);
  font-size: var(--chu-phu);
  font-weight: 600;
  padding: 0 var(--o-4);
  cursor: pointer;
}

.moc.ghost .ghi:hover {
  background: var(--pd);
}

/* Chip ghi nhanh */
.nhanh {
  display: flex;
  gap: var(--o-2);
  margin-top: var(--o-4);
  flex-wrap: wrap;
}

.nhanh button {
  border: 1px solid var(--vien-nhap);
  background: var(--sf);
  color: var(--p);
  font-size: var(--chu-phu);
  font-weight: 600;
  height: var(--h-nut-nho);
  padding: 0 var(--o-3);
  border-radius: var(--bo-tron);
  cursor: pointer;
}

.nhanh button:hover {
  border-color: var(--p);
  background: var(--okbg);
}

/* Chân thẻ kết phiên:CHỐT chính rộng gấp đôi + Chưa chốt phụ */
.cfoot {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-top: 1px solid var(--hair);
}

.cfoot form {
  display: contents;
}

.cfoot button {
  border: none;
  height: var(--h-nut-lon);
  font-size: var(--chu-phu);
  font-weight: 700;
  cursor: pointer;
}

.cfoot .win {
  background: var(--ok);
  color: var(--trang);
}

.cfoot .win:hover {
  background: var(--okhover);
}

.cfoot .win small,
.cfoot .dathen small,
.cfoot .lose small {
  display: block;
  font-size: var(--chu-nhan);
  font-weight: 400;
  opacity: .85;
}

/* Nút Đặt/Sửa hẹn giữa hàng kết thúc — nền vàng (hẹn) theo bộ màu chuẩn,
   toggle mở henBox (cskhHenMo); vạch ngăn 2 mép với CHỐT/Chưa chốt */
.cfoot .dathen {
  background: var(--goldbg);
  color: var(--goldink);
  border-left: 1px solid var(--hair);
}

.cfoot .dathen:hover {
  background: var(--gold);
}

.cfoot .lose {
  background: var(--sf);
  color: var(--err);
  border-left: 1px solid var(--hair);
}

.cfoot .lose:hover {
  background: var(--errbg);
}

.sec {
  padding: 0 0 var(--o-4);
}

/* Nhãn mục .sec dùng cho các trang phụ (khach/chamsoc/nhachen/chiso/quantri).
   Màu chữ nhãn mục = --pd (USER chốt qua devtools 24-07):rõ chữ,đạt AA.
   Hộp nhãn khai báo 1 LẦN — biến thể chỉ đổi màu,mọi nhãn cùng chiều cao. */
.sec .h {
  font-size: var(--chu-nhan);
  color: var(--pd);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
  font-weight: 700;
  padding: var(--o-2) var(--o-4);
  margin: 0 0 var(--o-3);
}

.sec+.sec {
  border-top: 1px solid var(--hair);
}

.sec:first-child .h {
  background: var(--pd);
  color: var(--trang);
}

.sec>*:not(.h) {
  margin-left: var(--o-4);
  margin-right: var(--o-4);
}

/* ==== Khung giữa mặc định: 3 thẻ khách xử lý cuối — click chọn phiên ==== */
.the-xlc {
  display: block;
  color: var(--ink);
  margin-bottom: var(--o-5);
}

.the-xlc:last-child {
  margin-bottom: 0;
}

.the-xlc:hover .hoso {
  border-color: var(--p);
}

.warnline {
  margin-top: var(--o-2);
  font-size: var(--chu-phu);
  font-weight: 600;
  padding: var(--o-2) var(--o-3);
  border-radius: var(--bo-nho);
  background: var(--errbg);
  color: var(--err);
  border: 1px solid var(--errbd);
}

/* ---- Tiến trình 5 bước ---- */
.tl {
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
  max-height: var(--cao-tl);
  overflow-y: scroll;
}

.step {
  display: flex;
  gap: var(--o-3);
  align-items: flex-start;
}

.step .n {
  flex: none;
  width: var(--icon-buoc);
  height: var(--icon-buoc);
  border-radius: 50%;
  background: var(--p);
  color: var(--trang);
  font-size: var(--chu-nhan);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--o-0);
}

.step .b {
  font-size: var(--chu-phu);
}

.step .b time {
  color: var(--faint);
  font-size: var(--chu-nhan);
  margin-right: var(--o-2);
  font-variant-numeric: tabular-nums;
}

.step.ghost .n {
  background: var(--bg);
  color: var(--faint);
  border: 1px dashed var(--faint);
}

.step.ghost .b {
  flex: 1;
}

/* Form đặt hẹn CHỈ áp cho <form> — .hen trần rò margin/display
   sang badge <span class="bdg hen"> làm badge lệch dọc */
/* Hộp đặt/sửa/xóa hẹn — ẩn mặc định, chỉ hiện khi bấm chip ⏰ (cskhHenMo) */
.henbox {
  margin-top: var(--o-2);
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
  align-items: flex-start;
}

.henbox.an {
  display: none;
}

form.hen {
  display: flex;
  align-items: center;
  gap: var(--o-2);
  font-size: var(--chu-phu);
  color: var(--mut);
  flex-wrap: wrap;
  width: 100%;
}

form.hen input {
  height: var(--h-nut-phu);
  border: 1px solid var(--vien-nhap);
  border-radius: var(--bo-nho);
  padding: var(--o-1) var(--o-2);
  font-size: var(--chu-phu);
  background: var(--bg);
  color: var(--ink);
}

/* Ô lý do hẹn (bắt buộc) chiếm phần còn lại của dòng đặt hẹn */
form.hen .lydo {
  flex: 1;
  min-width: var(--rong-nhap);
  padding-inline: var(--o-3);
}

form.hen .lydo::placeholder {
  color: var(--faint);
}

/* Nút xóa hẹn — dạng chữ, màu cảnh báo,nhẹ (hành động phá,tách khỏi lưu) */
.hen-xoa {
  border: none;
  background: none;
  color: var(--err);
  font-size: var(--chu-nhan);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.hen-xoa:hover {
  color: var(--pd);
}

/* Nút "Đã xử lý hẹn" — CHỈ có trong phiên (bắt buộc mở phiên mới bấm được),
   không đặt ở lịch hẹn/toast để tránh NV bấm cho xong không thực làm */
.hen-xong-form {
  margin-top: var(--o-2);
}

.hen-xong {
  border: none;
  border-radius: var(--bo-vua);
  background: var(--ok);
  color: var(--trang);
  font-size: var(--chu-phu);
  font-weight: 700;
  height: var(--h-nut-phu);
  padding: 0 var(--o-4);
  cursor: pointer;
}

.hen-xong:hover {
  background: var(--okhover);
}

.kpis {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-2);
}

.kpi {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--bo-nho);
  padding: var(--o-3);
  box-shadow: var(--bong-khoi);
}

.kpi b {
  display: block;
  font-size: var(--chu-kpi);
  font-weight: 700;
  color: var(--p);
  font-variant-numeric: tabular-nums;
  line-height: var(--dong-chat);
}

.kpi span {
  font-size: var(--chu-nhan);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
}

/* Thẻ Làm ngay:grid 2 cột — cột thời gian căn giữa dọc,cùng trục */
.qi {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--o-3);
  width: 100%;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-left: var(--vach) solid var(--err);
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-3);
  margin-bottom: var(--o-2);
  cursor: pointer;
  font-size: var(--chu-phu);
  color: var(--ink);
}

.qi:hover {
  background: var(--rowhover);
}

.qi b {
  grid-column: 1;
  grid-row: 1;
  font-size: var(--chu-phu);
}

.qi small {
  grid-column: 1;
  grid-row: 2;
  color: var(--mut);
}

/* ==== KHUNG PHẢI trang chủ — bảng điều khiển 4 tầng ==== */
.homnay {
  border: 1px solid var(--hair);
  border-radius: var(--bo-lon);
  overflow: hidden;
}

.kpi4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.kpi4 div {
  padding: var(--o-3) var(--o-4) var(--o-2);
  border-bottom: 1px solid var(--hair);
}

.kpi4 div:nth-child(odd) {
  border-right: 1px solid var(--hair);
}

.kpi4 b {
  display: block;
  font-size: var(--chu-kpi);
  font-weight: 700;
  color: var(--p);
  line-height: var(--dong-chat);
  font-variant-numeric: tabular-nums;
}

.kpi4 .warm b {
  color: var(--err);
}

.kpi4 .good b {
  color: var(--oktext);
}

.kpi4 span {
  font-size: var(--chu-nhan);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
  color: var(--mut);
  font-weight: 700;
}

/* Thanh tỉ lệ chốt/chưa chốt trong ngày */
.tyle {
  padding: var(--o-3) var(--o-4);
  background: var(--bg);
}

.tyle .bar {
  display: flex;
  height: var(--cham);
  border-radius: var(--bo-tron);
  overflow: hidden;
  background: var(--errbd);
}

.tyle .bar .c {
  display: block;
  height: 100%;
  background: var(--ok);
}

.tyle .cg {
  display: flex;
  justify-content: space-between;
  margin-top: var(--o-1);
  font-size: var(--chu-nhan);
  color: var(--mut);
}

.tyle .cg b {
  font-variant-numeric: tabular-nums;
}

.tyle .cg .c b {
  color: var(--oktext);
}

.tyle .cg .r b {
  color: var(--err);
}

/* Hẹn sắp tới — khối vàng,mỗi dòng giờ + tên + nút mở phiên */
.hens {
  border: 1px solid var(--goldbd);
  border-radius: var(--bo-lon);
  overflow: hidden;
}

.hen1 {
  display: flex;
  align-items: center;
  gap: var(--o-2);
  padding: var(--o-2) var(--o-3);
  background: var(--goldbg);
  border-bottom: 1px solid var(--goldbd);
  font-size: var(--chu-phu);
}

.hen1:last-child {
  border-bottom: none;
}

.hen1 time {
  flex: none;
  font-size: var(--chu-nhan);
  font-weight: 700;
  color: var(--goldink);
  font-variant-numeric: tabular-nums;
  width: var(--rong-gio);
}

.hen1 .ai {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hen1 .ai b {
  font-weight: 600;
}

.hen1 .ai small {
  color: var(--mut);
}

.hen1 .goi {
  flex: none;
  border: none;
  background: var(--gold);
  color: var(--goldink);
  font-size: var(--chu-nhan);
  font-weight: 700;
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--o-2);
  border-radius: var(--bo-tron);
  cursor: pointer;
}

.hen1 .goi:hover {
  background: var(--goldink);
  color: var(--trang);
}

/* Hẹn QUÁ GIỜ — nền đỏ dịu, nhãn "quá giờ" đỏ (đẩy lên đầu nhờ ORDER BY hen ASC) */
.hen1.quagio {
  background: var(--errbg);
  border-bottom-color: var(--errbd);
}

.hen1 time .qg {
  display: block;
  color: var(--err);
  font-weight: 700;
}

/* Khách đang chọn */
.lsu {
  border: 1px solid var(--hair);
  border-radius: var(--bo-lon);
  overflow: hidden;
}

.lsu .khach {
  display: flex;
  align-items: center;
  gap: var(--o-3);
  padding: var(--o-3);
}

.lsu .tron {
  flex: none;
  width: var(--h-nut);
  height: var(--h-nut);
  border-radius: var(--bo-tron);
  background: var(--okbg);
  color: var(--p);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lsu .tt {
  flex: 1;
  min-width: 0;
}

.lsu .tt b {
  display: block;
  font-weight: 600;
}

.lsu .tt small {
  color: var(--mut);
  font-size: var(--chu-phu);
}

.lsu .moi {
  background: var(--bg);
  border-top: 1px solid var(--hair);
  padding: var(--o-2) var(--o-3);
  font-size: var(--chu-phu);
  color: var(--mut);
}

.lsu .khach+.moi {
  border-top: 1px solid var(--hair);
}

.lsu .moi:first-child {
  border-top: none;
}

.lsu .moi b {
  color: var(--oktext);
}

/* Chân khung phải ghim đáy:người trực + đăng xuất */
.cuoi {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--hair);
  padding-top: var(--o-3);
}

.truc {
  font-size: var(--chu-phu);
  color: var(--mut);
  display: flex;
  align-items: center;
  gap: var(--o-2);
}

.truc i {
  width: var(--o-2);
  height: var(--o-2);
  border-radius: var(--bo-tron);
  background: var(--ok);
}

.truc b {
  color: var(--ink);
}

.out {
  border: 1px solid var(--vien-nhap);
  background: var(--sf);
  border-radius: var(--bo-vua);
  height: var(--h-nut-phu);
  padding: 0 var(--o-4);
  font-size: var(--chu-phu);
  font-weight: 600;
  color: var(--mut);
  cursor: pointer;
}

.out:hover {
  color: var(--err);
  border-color: var(--errbd);
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.search {
  display: flex;
  gap: var(--o-2);
  margin: var(--o-4) var(--o-5);
}

.search input {
  flex: 1;
  border: 1px solid var(--mut);
  border-radius: var(--bo-vua);
  padding: var(--o-2) var(--o-3);
  font-size: var(--chu-phu);
  background: var(--sf);
  color: var(--ink);
}

.cycle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  align-items: center;
  font-size: var(--chu-phu);
  color: var(--mut);
  margin: 0 var(--o-5) var(--o-4);
}

.cycle b {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-tron);
  padding: var(--o-1) var(--o-3);
  color: var(--p);
  font-weight: 600;
}

.cs-ghi,
.cs-doi {
  display: flex;
  gap: var(--o-1);
  align-items: center;
}

.cs-ghi input,
.cs-ghi select,
.cs-doi input {
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-1) var(--o-2);
  font-size: var(--chu-phu);
  background: var(--bg);
}

.lb {
  font-size: var(--chu-phu);
  color: var(--mut);
  margin: var(--o-3) 0 var(--o-1);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-1);
}

.tag {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--bo-tron);
  padding: var(--o-1) var(--o-3);
  font-size: var(--chu-phu);
}

.cfg {
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
}

.cfg label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--o-2);
  font-size: var(--chu-phu);
}

.cfg input {
  width: 110px;
  text-align: right;
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-1) var(--o-2);
}

.ggrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--o-4);
  margin: 0 var(--o-5);
}

.group {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  overflow: hidden;
}

.group .gh {
  background: var(--pd);
  color: var(--trang);
  padding: var(--o-3) var(--o-4);
  font-size: var(--chu-phu);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.group .gh .km {
  background: var(--phu-sang);
  border-radius: var(--bo-tron);
  padding: var(--o-0) var(--o-3);
  font-size: var(--chu-nhan);
}

.group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.group li {
  padding: var(--o-3) var(--o-4);
  border-bottom: 1px solid var(--hair);
  display: flex;
  justify-content: space-between;
  gap: var(--o-3);
  align-items: center;
  font-size: var(--chu-phu);
}

.group .gf {
  padding: var(--o-3) var(--o-4);
  background: var(--bg);
}

.gnote {
  width: 100%;
  border: 1px dashed var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-1) var(--o-3);
  font-size: var(--chu-phu);
  background: var(--sf);
}

/* ================================================================
   ỐP UI 6 TRANG (plan-op-ui-6-trang-cskh) — 100% token,cặp đôi với
   markup PHP từng trang. Tái dùng .bd/.btn/.card/.tw/.qi (trang phụ cũ — đã gỡ) sẵn có.
   ================================================================ */
/* -- Headrow + pulse:tiêu đề trang + cụm số nhịp (chamsoc/nhachen/chiso) -- */
.headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--o-4) var(--o-6);
  margin: var(--o-4) var(--o-5);
}

.headrow .sub {
  color: var(--mut);
  font-size: var(--chu-phu);
}

.pulse {
  display: flex;
  gap: var(--o-6);
  margin-left: auto;
  text-align: right;
}

.pulse div b {
  display: block;
  font-size: var(--chu-kpi);
  font-weight: 700;
  color: var(--p);
  font-variant-numeric: tabular-nums;
  line-height: var(--dong-chat);
}

.pulse div span {
  font-size: var(--chu-nhan);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
}

.pulse .warm b {
  color: var(--err);
}

.pulse .good b {
  color: var(--ok);
}

.bdg {
  font-size: var(--chu-nhan);
  padding: var(--o-1) var(--o-2);
  border-radius: var(--bo-tron);
  background: var(--bg);
  color: var(--mut);
  border: 1px solid var(--hair);
}

.bdg.hen {
  background: var(--goldbg);
  border-color: var(--goldbd);
  color: var(--goldink);
  font-weight: 600;
}

.bdg.okk {
  background: var(--okbg);
  border-color: var(--okbd);
  color: var(--oktext);
  font-weight: 600;
}

/* Nút .b CHỈ áp cho <a>/<button> — .b trần nuốt luôn div nội dung .step .b
   (tiến trình trang chủ/khach) thành nút đậm nowrap gây méo/tràn chữ */
a.b,
button.b {
  border: none;
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-4);
  font-weight: 600; font-size: var(--chu-nhan); line-height: var(--dong-1); font-family: var(--font);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  background: var(--p);
  color: var(--trang);
}

a.b:hover,
button.b:hover {
  background: var(--pd);
}

a.b.soft,
button.b.soft {
  background: var(--sf);
  color: var(--p);
  border: 1px solid var(--hair);
}

a.b.sm,
button.b.sm {
  padding: var(--o-1) var(--o-3);
  font-size: var(--chu-nhan);
}

a.b.luu,
button.b.luu {
  margin-top: var(--o-3);
  align-self: flex-start;
}

/* ===== Panel chi tiết công việc (CSKH thi công · Nhắc hẹn · Giám sát khách cũ) ===== */
.cvd {
  border: 1px solid var(--hair);
  border-radius: var(--bo-nho);
  background: var(--sf);
  margin: 0 0 var(--o-2);
}

.cvd>summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--o-3);
  padding: var(--o-2) var(--o-3);
  font-size: var(--chu-phu);
  min-height: var(--h-nut-phu);
}

.cvd>summary::-webkit-details-marker {
  display: none;
}

.cvd>summary::before {
  content: "▸";
  color: var(--faint);
  font-size: var(--chu-nhan);
}

.cvd[open]>summary::before {
  content: "▾";
}

.cvd-t {
  font-weight: 600;
  color: var(--ink);
}

.cvd-x {
  color: var(--mut);
  font-size: var(--chu-nhan);
  margin-left: auto;
  white-space: nowrap;
}

.cvd-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--o-1) var(--o-4);
  padding: var(--o-2) var(--o-3) var(--o-3);
  border-top: 1px solid var(--hair);
  font-size: var(--chu-phu);
  color: var(--ink);
}

.cvd-r {
  display: contents;
}

.cvd-r .k {
  color: var(--faint);
  font-size: var(--chu-nhan);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
}

.cvd-r b {
  font-weight: 600;
}

/* ===== Tab thời gian (CSKH thi công · Giám sát) ===== */
.tc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  align-items: center;
  margin: 0 0 var(--o-3);
}

.tc-tab {
  height: var(--h-nut-nho);
  display: inline-flex;
  align-items: center;
  padding: 0 var(--o-3);
  border: 1px solid var(--hair);
  border-radius: var(--bo-tron);
  font-size: var(--chu-phu);
  color: var(--mut);
  text-decoration: none;
  background: var(--sf);
}

.tc-tab.on {
  background: var(--p);
  border-color: var(--p);
  color: var(--trang);
  font-weight: 600;
}

.tc-info {
  color: var(--faint);
  font-size: var(--chu-nhan);
  margin-left: auto;
}

.tc-list {
  margin: 0 0 var(--o-6);
}

/* ===== Lưới 11 cột Trang CSKH (STT · … · Lần · C · Chăm sóc) ===== */
.csk-grid {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  overflow-x: auto;
  margin: 0 0 var(--o-6);
}

.csk-grid .rw {
  display: grid;
  grid-template-columns: 40px minmax(150px, .8fr) 92px minmax(100px, 1.3fr) 72px 48px 86px minmax(100px, 1.3fr) 54px 46px 90px;
  gap: var(--o-3);
  align-items: center;
  padding: var(--o-2) var(--o-4);
  border-bottom: 1px solid var(--hair);
  font-size: var(--chu-phu);
  font-variant-numeric: tabular-nums;
  min-width: 1030px;
}

.csk-grid .rw:last-child {
  border-bottom: none;
}

.csk-grid .rw.hd {
  font-size: var(--chu-nhan);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
  font-weight: 600;
  align-items: center;
}

.csk-grid .rw>b {
  font-weight: 600;
  color: var(--ink);
}

.csk-grid .rw>span,
.csk-grid .rw>b {
  color: var(--ink);
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.csk-grid .rw .lan,
.csk-grid .rw .stt,
.csk-grid .rw .cc {
  text-align: center;
}

.csk-grid .rw .stt,
.csk-grid .rw .cc {
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}

/* ===== Trang khách: bảng lớn theo THÁNG chứa quạt xếp NGÀY (học pg-soviec) ===== */
.pg-khach .kh-thang {
  margin: 0 0 var(--o-6);
}

.pg-khach .day-b .csk-grid {
  margin: 0;
}

.csk-grid .rw .num {
  font-variant-numeric: tabular-nums;
  color: var(--mut);
  /* Đè .num toàn cục (text-align:right) — data phải canh trái khớp header cột */
  text-align: left;
}

.csk-grid .rw .bdg {
  justify-self: start;
}

.prog {
  font-size: var(--chu-nhan);
  min-width: 0;
}

.prog>summary {
  cursor: pointer;
  color: var(--oktext);
  list-style: none;
}

.prog>summary::-webkit-details-marker {
  display: none;
}

.prog-body {
  margin-top: var(--o-2);
}

.cs-act {
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
  margin-top: var(--o-2);
}

/* Divider ngăn cách lịch sử xử lý (tiến trình) với phần Chăm sóc trong card */
.cs-divider {
  border-top: 1px solid var(--hair);
  margin: var(--o-4) 0 var(--o-3);
}

/* Số chăm sóc (1·2·3) — cùng cơ chế .step .n nhưng NỀN CAM để phân biệt tiến trình (xanh) */
.pg-art .step.cam .n {
  background: var(--cam);
}

/* Chăm sóc CHƯA làm — viền rỗng/mờ (ghost), KHÔNG tô cam; đè .pg-art .step .n */
.pg-art .step.ghost .n {
  background: var(--bg);
  color: var(--faint);
  border: 1px dashed var(--faint);
}

/* Header "Chăm sóc": chữ xanh menu + nhích step sát lên (bớt khoảng cách dưới header).
   .pg-art .cs-card .cs-cham-hd (0-3-0) để ĐÈ .pg-art .seclbl (0-2-0, đứng sau trong file) */
.pg-art .cs-card .cs-cham-hd {
  color: var(--p);
  margin-bottom: 0;
}

.cs-cham-hd + .cs-act {
  margin-top: var(--o-1);
}

.cs-cham-hd + .cs-act .tl {
  margin-top: var(--o-1);
}

/* ===== Card chăm sóc (trang CSKH) — overlay tform, cùng cơ chế mở Phiên Trang chủ ===== */
.cs-card {
  width: calc(var(--rong-form) * 1.5);
  max-height: 82vh;
  overflow-y: auto;
}

.cs-card h2 small {
  color: var(--faint);
  font-size: var(--chu-phu);
  font-weight: 400;
}

.cs-card-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  align-items: center;
  margin: 0 0 var(--o-3);
  font-size: var(--chu-phu);
}

/* Chốt lại + Đóng cùng 1 hàng, chiều rộng vừa chữ (đè flex:1 của .tact .btn + .b2.win) */
.cs-card .tact {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.cs-card .tact .btn,
.cs-card .tact .b2.win {
  flex: 0 0 auto;
  width: auto;
}

/* ================================================================
   [PHÂN LỚP 4] SCOPED ARTIFACTS
   ================================================================ */

/* ================================================================
   TRANG KHO KHÁCH — ARTIFACT f244adef 1:1 (LỆNH USER 24-07,không ngoại lệ).
   CSS chép NGUYÊN TRỊ SỐ artifact,chỉ thêm scope .pg-artđể không đè
   class trùng tên của các trang khác. Biến --sh* dùng chung mức:root.
   ================================================================ */
/* margin auto giữ khung trang căn giữa — CẤM margin:0 đè rule chiều rộng body.pg-* */
body.pg-art {
  margin: 0 auto;
  background: var(--shbg);
  color: var(--shtx);
  font-size: var(--chu-phu); line-height: var(--dong-than); font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  display: block;
}

.pg-art .wrap {
  margin: 0 auto;
  padding: var(--o-6) var(--o-5) 60px;
}

.pg-art .app {
  background: var(--bg);
  border: 1px solid var(--shhair);
  border-radius: var(--bo-lon);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 40, 50, .06);
}

.pg-art .pad {
  padding: var(--o-6) var(--o-6) var(--o-6);
}

.pg-art .search {
  display: flex;
  gap: var(--o-2);
  margin: 0 0 var(--o-6);
}

.pg-art .search input {
  flex: 1;
  border: 1px solid var(--mut);
  border-radius: var(--bo-vua);
  padding: var(--o-3) var(--o-4);
  font-size: var(--chu-than); line-height: var(--dong-1); font-family: var(--font);
  background: var(--sf);
  color: var(--ink);
}

.pg-art .search input::placeholder {
  color: var(--faint);
}

/* ===== HEADER production — shell dùng chung khach (demo-header-cskh) + soviec (demo-header-soviec) ===== */
.pg-khach .kh-hd, .pg-soviec .kh-hd, .pg-tracuu .kh-hd{
  background:var(--sf);border:1px solid var(--hair);border-radius:16px;
  box-shadow:0 1px 1px rgba(15,42,51,.04), 0 20px 40px -28px rgba(15,42,51,.35);
  overflow:hidden;margin:0 0 var(--o-6);
}
.pg-khach .kh-cmd, .pg-soviec .kh-cmd, .pg-tracuu .kh-cmd{display:flex;align-items:center;gap:14px;padding:16px 20px}
.pg-khach .kh-fld, .pg-tracuu .kh-fld{position:relative;flex:1 1 auto;min-width:280px}
.pg-khach .kh-fld svg, .pg-tracuu .kh-fld svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--faint)}
.pg-khach .kh-fld input, .pg-tracuu .kh-fld input{width:100%;height:44px;border:1px solid var(--vien-nhap);
  border-radius:10px;padding:0 16px 0 42px;font-size:15px;font-family:var(--font);
  color:var(--ink);background:#fbfcfc}
.pg-khach .kh-fld input::placeholder, .pg-tracuu .kh-fld input::placeholder{color:var(--mut)}
.pg-khach .kh-fld input:focus, .pg-tracuu .kh-fld input:focus{outline:none;border-color:var(--p);background:var(--sf);
  box-shadow:0 0 0 3px var(--okbg)}

.pg-art .kh-seg{display:inline-flex;background:var(--bg);border:1px solid var(--hair);
  border-radius:10px;padding:3px;gap:2px;flex:0 0 auto}
.pg-art .kh-seg a{background:transparent;color:var(--mut);cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:600;padding:0 14px;height:36px;
  display:inline-flex;align-items:center;border-radius:7px;text-decoration:none}
.pg-art .kh-seg a.on{background:var(--sf);color:var(--p);
  box-shadow:0 1px 2px rgba(15,42,51,.12)}

.pg-art .kh-nav{display:inline-flex;align-items:center;border:1px solid var(--vien-nhap);
  border-radius:10px;height:44px;flex:0 0 auto;background:#fbfcfc;overflow:hidden}
.pg-art .kh-nav b{padding:0 12px;font-size:14px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  width:200px;text-align:center;box-sizing:border-box}
.pg-art .kh-nav a,.pg-art .kh-nav span.off{width:38px;height:100%;display:grid;
  place-items:center;color:var(--mut);font-size:17px;text-decoration:none}
.pg-art .kh-nav a:first-of-type,.pg-art .kh-nav span.off:first-of-type{border-right:1px solid var(--hair)}
.pg-art .kh-nav a:last-of-type,.pg-art .kh-nav span.off:last-of-type{border-left:1px solid var(--hair)}
.pg-art .kh-nav a:hover{color:var(--p);background:var(--okbg)}
.pg-art .kh-nav span.off{opacity:.35;cursor:default}

.pg-khach .kh-go, .pg-tracuu .kh-go{height:44px;flex:0 0 auto;padding:0 22px;border:none;border-radius:10px;
  background:var(--p);color:var(--trang);font-weight:600;font-size:14px;cursor:pointer}
.pg-khach .kh-go:hover, .pg-tracuu .kh-go:hover{background:var(--pd)}

.pg-khach .kh-band, .pg-soviec .kh-band, .pg-tracuu .kh-band{display:flex;align-items:center;gap:30px;flex-wrap:wrap;
  padding:18px 22px;border-top:1px solid var(--hair);
  background:linear-gradient(180deg,#fafcfc,#f4f8f8)}
.pg-khach .kh-band.ngay{background:linear-gradient(180deg,#f4faf9,#eaf5f3)}

.pg-khach .kh-period, .pg-soviec .kh-period, .pg-tracuu .kh-period{display:flex;flex-direction:column;gap:6px;min-width:240px}
.pg-khach .kh-period .r1, .pg-soviec .kh-period .r1, .pg-tracuu .kh-period .r1{display:flex;align-items:baseline;gap:10px}
.pg-khach .kh-period .kw, .pg-soviec .kh-period .kw, .pg-tracuu .kh-period .kw{font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--p)}
.pg-khach .kh-period .val, .pg-soviec .kh-period .val, .pg-tracuu .kh-period .val{font-size:26px;font-weight:700;line-height:1;letter-spacing:-.015em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.pg-khach .kh-period .dow, .pg-soviec .kh-period .dow, .pg-tracuu .kh-period .dow{font-size:12px;font-weight:600;color:var(--oktext);
  background:var(--okbg);border-radius:999px;padding:2px 10px}
.pg-khach .kh-period .sub{font-size:13px;color:var(--mut)}
.pg-khach .kh-period .sub b{color:var(--ink);font-weight:600}

.pg-khach .kh-metrics, .pg-soviec .kh-metrics, .pg-tracuu .kh-metrics{margin-left:auto;display:flex;align-items:center;gap:26px}
.pg-khach .kh-mgrid, .pg-soviec .kh-mgrid, .pg-tracuu .kh-mgrid{display:flex;align-items:center}
.pg-khach .kh-m, .pg-soviec .kh-m, .pg-tracuu .kh-m{display:flex;flex-direction:column;gap:4px;padding:0 16px;width:134px;box-sizing:border-box}
.pg-khach .kh-m + .kh-m, .pg-soviec .kh-m + .kh-m, .pg-tracuu .kh-m + .kh-m{border-left:1px solid var(--hair)}
.pg-khach .kh-m .n, .pg-soviec .kh-m .n, .pg-tracuu .kh-m .n{font-size:24px;font-weight:700;line-height:1;letter-spacing:-.015em;
  color:var(--ink);font-variant-numeric:tabular-nums}
.pg-khach .kh-m.chua .n, .pg-soviec .kh-m.chua .n{color:var(--cam)}
.pg-khach .kh-m.chot .n, .pg-soviec .kh-m.chot .n{color:var(--oktext)}
.pg-khach .kh-m .l, .pg-soviec .kh-m .l, .pg-tracuu .kh-m .l{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--mut);display:flex;align-items:center;gap:6px;white-space:nowrap}
.pg-khach .kh-m .l::before, .pg-soviec .kh-m .l::before, .pg-tracuu .kh-m .l::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--p)}
.pg-khach .kh-m.chua .l::before, .pg-soviec .kh-m.chua .l::before{background:var(--cam)}
.pg-khach .kh-m.chot .l::before, .pg-soviec .kh-m.chot .l::before{background:var(--oktext)}

.pg-khach .kh-ring{display:flex;align-items:center;gap:12px;padding-left:26px;
  border-left:1px solid var(--hair)}
.pg-khach .kh-donut{width:56px;height:56px;border-radius:50%;position:relative;
  display:grid;place-items:center}
.pg-khach .kh-donut::before{content:"";position:absolute;width:42px;height:42px;
  border-radius:50%;background:var(--sf)}
.pg-khach .kh-donut span{position:relative;font-size:13px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.pg-khach .kh-ring .rl{font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);max-width:64px;line-height:1.3}

@media(max-width:900px){
  .pg-khach .kh-cmd, .pg-soviec .kh-cmd, .pg-tracuu .kh-cmd{flex-wrap:wrap}
  .pg-khach .kh-fld, .pg-tracuu .kh-fld{flex:1 1 100%}
  .pg-khach .kh-metrics, .pg-soviec .kh-metrics, .pg-tracuu .kh-metrics{margin-left:0;flex-wrap:wrap;gap:16px}
}

.pg-art .search .b {
  border: none;
  border-radius: var(--bo-vua);
  padding: 0 var(--o-6);
  font-weight: 600; font-size: var(--chu-phu); line-height: var(--dong-1); font-family: var(--font);
  background: var(--p);
  color: var(--trang);
  cursor: pointer;
}

.pg-art .seclbl {
  font-size: var(--chu-nhan);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 var(--o-3);
  display: flex;
  align-items: baseline;
  gap: var(--o-2);
}

.pg-art .seclbl small {
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
  color: var(--faint);
}

.pg-art .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-4);
  margin: 0;
}

@media(max-width:920px) {
  .pg-art .grid {
    grid-template-columns: 1fr;
  }
}

.pg-art .card {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  padding: var(--o-5) var(--o-5);
  box-shadow: var(--bong-khoi);
  margin: 0;
}

.pg-art .tl {
  margin: var(--o-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
  max-height: none;
  overflow: visible;
}

.pg-art .step {
  display: flex;
  gap: var(--o-3);
  align-items: flex-start;
}

.pg-art .step .n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--p);
  color: var(--trang);
  font-size: var(--chu-nhan);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--o-0);
}

.pg-art .step .b {
  font-size: var(--chu-phu);
  color: var(--ink);
  min-height: 0;
  padding: 0;
  background: none;
  display: inline;
}

.pg-art .step .b time {
  color: var(--faint);
  font-size: var(--chu-nhan);
  margin-right: var(--o-2);
  font-variant-numeric: tabular-nums;
}

.pg-art .rowin {
  display: flex;
  gap: var(--o-2);
}

.pg-art .rowin input[type=text] {
  flex: 1;
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-3);
  font-size: var(--chu-phu); line-height: var(--dong-1); font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
}

.pg-art .rowin input[type=text]::placeholder {
  color: var(--faint);
}

.pg-art .b2 {
  border: none;
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-4);
  font-weight: 600; font-size: var(--chu-nhan); line-height: var(--dong-1); font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pg-art .b2.save {
  background: var(--p);
  color: var(--trang);
}

.pg-art .b2.win {
  background: var(--ok);
  color: var(--trang);
  flex: 1;
}

/* ===== Toast xác nhận (thay confirm() trình duyệt) ===== */
.xn-back {
  position: fixed;
  inset: 0;
  background: var(--nen-phu);
  z-index: 80;
  display: none;
}

.xn-back.open {
  display: block;
}

.xn-toast {
  position: fixed;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  width: 400px;
  max-width: 92vw;
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-lon);
  box-shadow: var(--bong-form);
  padding: var(--o-5);
  z-index: 81;
  display: none;
}

.xn-toast.open {
  display: block;
  animation: pop .18s ease-out;
}

.xn-msg {
  margin: 0 0 var(--o-4);
  font-size: var(--chu-than);
  color: var(--ink);
  line-height: var(--dong-than);
}

.xn-act {
  display: flex;
  gap: var(--o-2);
  justify-content: flex-end;
}

/* Nút hoàn tác chốt (Sửa: chưa chốt) — viền đỏ cảnh báo, không đặc để không nhầm nút chính */
.pg-art .b2.lose {
  background: var(--sf);
  color: var(--err);
  border: 1px solid var(--errbd);
}

.cs-card .cs-hoan {
  display: contents;
}

.pg-art .done {
  margin: var(--o-6) 0 0;
}

.pg-art .done details {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  box-shadow: none;
}

.pg-art .done summary {
  cursor: pointer;
  padding: var(--o-4) var(--o-5);
  font-size: var(--chu-phu);
  font-weight: 600;
  color: var(--p);
  list-style: none;
}

.pg-art .done summary::-webkit-details-marker {
  display: none;
}

.pg-art .done summary small {
  color: var(--faint);
  font-weight: 400;
  margin-left: var(--o-2);
}

.pg-art .rows {
  border-top: 1px solid var(--hair);
  overflow: visible;
}

.pg-art .mut {
  color: var(--mut);
  font-size: var(--chu-nhan);
}

.pg-art a {
  color: var(--p);
}

/* ================================================================
   TRANG CSKH — ARTIFACT 76919240 1:1 (LỆNH USER 24-07,không ngoại lệ).
   CSS nguyên trị số artifact,scope .pg-chamsoc;
  vỏ trang dùng chung .pg-art.
   ================================================================ */
.pg-chamsoc .headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--o-4) var(--o-6);
  margin: 0 0 var(--o-5);
}

.pg-chamsoc .headrow h1 {
  margin: 0;
  font-size: var(--chu-h1);
  font-weight: 600;
  color: var(--p);
  letter-spacing: -.01em;
}

.pg-chamsoc .headrow .sub {
  color: var(--mut);
  font-size: var(--chu-phu);
}

.pg-chamsoc .pulse {
  display: flex;
  gap: var(--o-6);
  margin-left: auto;
  text-align: right;
}

.pg-chamsoc .pulse div b {
  display: block;
  font-size: var(--chu-h1);
  font-weight: 700;
  color: var(--p);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.pg-chamsoc .pulse div span {
  font-size: var(--chu-nhan);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pg-chamsoc .pulse .warm b {
  color: var(--err);
}

.pg-chamsoc .cycle {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  align-items: center;
  font-size: var(--chu-nhan);
  color: var(--mut);
  margin: 0 0 var(--o-6);
}

.pg-chamsoc .cycle b {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-tron);
  padding: var(--o-1) var(--o-3);
  color: var(--p);
  font-weight: 600;
}

.pg-chamsoc .cycle b.end {
  border-color: var(--ok);
  color: var(--ok);
}

.pg-chamsoc .seclbl {
  font-size: var(--chu-nhan);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: var(--o-6) 0 var(--o-2);
  display: block;
}

.pg-chamsoc .seclbl:first-of-type {
  margin-top: 0;
}

.pg-chamsoc .seclbl.red {
  color: var(--err);
}

.pg-chamsoc .q {
  display: flex;
  flex-direction: column;
  gap: var(--o-2);
}

.pg-chamsoc .qi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--o-2) var(--o-3);
  background: var(--sf);
  border: 1px solid var(--hair);
  border-left: 5px solid var(--p);
  border-radius: var(--bo-vua);
  padding: var(--o-3) var(--o-4);
  box-shadow: var(--bong-khoi);
  margin: 0;
  cursor: default;
  text-align: left;
  width: auto;
  font-size: var(--chu-phu);
  color: var(--ink);
}

.pg-chamsoc .qi.late {
  border-left-color: var(--err);
  background: #fffbfb;
}

.pg-chamsoc .qi.done {
  border-left-color: var(--ok);
}

/* Đã cứu:dịu bằng MÀU tường minh (--mut),KHÔNG opacity — opacity kéo chữ nhỏ dưới AA */
.pg-chamsoc .qi.done .w b {
  color: var(--mut);
}

.pg-chamsoc .qi .w {
  flex: 1;
  min-width: 220px;
}

.pg-chamsoc .qi .w b {
  font-size: var(--chu-phu);
}

.pg-chamsoc .qi .w small {
  display: block;
  color: var(--mut);
  font-size: var(--chu-nhan);
}

.pg-chamsoc .cs-ghi,
.pg-chamsoc .cs-doi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
  align-items: center;
  margin: 0;
}

.pg-chamsoc .cs-ghi select,
.pg-chamsoc .cs-ghi input,
.pg-chamsoc .cs-doi input {
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-2);
  font-size: var(--chu-nhan); line-height: var(--dong-1); font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
}

/* ================================================================
   TRANG NHẮC HẸN — ARTIFACT f5188c57 1:1 (LỆNH USER 24-07,không ngoại lệ).
   CSS nguyên trị số artifact,scope .pg-nhachen;
  vỏ dùng chung .pg-art.
   ================================================================ */
.pg-nhachen .headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--o-4) var(--o-6);
  margin: 0 0 var(--o-5);
}

.pg-nhachen .headrow h1 {
  margin: 0;
  font-size: var(--chu-h1);
  font-weight: 600;
  color: var(--p);
  letter-spacing: -.01em;
}

.pg-nhachen .headrow .sub {
  color: var(--mut);
  font-size: var(--chu-phu);
}

.pg-nhachen .pulse {
  display: flex;
  gap: var(--o-6);
  margin-left: auto;
  text-align: right;
}

.pg-nhachen .pulse div b {
  display: block;
  font-size: var(--chu-h1);
  font-weight: 700;
  color: var(--p);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.pg-nhachen .pulse div span {
  font-size: var(--chu-nhan);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.pg-nhachen .pulse .good b {
  color: var(--ok);
}

.pg-nhachen .seclbl {
  font-size: var(--chu-nhan);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: var(--o-6) 0 var(--o-2);
  display: block;
}

.pg-nhachen .seclbl:first-of-type {
  margin-top: 0;
}

.pg-nhachen .qi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--o-2) var(--o-3);
  background: var(--sf);
  border: 1px solid var(--hair);
  border-left: 5px solid var(--p);
  border-radius: var(--bo-vua);
  padding: var(--o-3) var(--o-4);
  margin: 0 0 var(--o-2);
  cursor: default;
  text-align: left;
  width: auto;
  font-size: var(--chu-phu);
  color: var(--ink);
  box-shadow: none;
}

.pg-nhachen .qi .w {
  flex: 1;
  min-width: 220px;
}

.pg-nhachen .qi .w b {
  font-size: var(--chu-phu);
}

.pg-nhachen .qi .w small {
  display: block;
  color: var(--mut);
  font-size: var(--chu-nhan);
}

.pg-nhachen .ggrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--o-3);
  margin: 0;
}

.pg-nhachen .group {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  overflow: hidden;
  box-shadow: var(--bong-khoi);
}

.pg-nhachen .group .gh {
  background: var(--pd);
  color: var(--trang);
  padding: var(--o-2) var(--o-4);
  font-size: var(--chu-phu);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--o-2);
}

.pg-nhachen .group .gh b {
  font-size: var(--chu-phu);
}

.pg-nhachen .group .gh .km {
  background: var(--phu-sang);
  border-radius: var(--bo-tron);
  padding: var(--o-0) var(--o-2);
  font-size: var(--chu-nhan);
}

.pg-nhachen .group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pg-nhachen .group li {
  padding: var(--o-2) var(--o-4);
  border-bottom: 1px solid var(--hair);
  font-size: var(--chu-phu);
  display: flex;
  justify-content: space-between;
  gap: var(--o-2);
  align-items: center;
}

.pg-nhachen .group .gf {
  padding: var(--o-2) var(--o-4);
  background: var(--bg);
}

.pg-nhachen .gnote {
  width: 100%;
  border: 1px dashed var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-2);
  font-size: var(--chu-nhan); line-height: var(--dong-1); font-family: var(--font);
  color: var(--mut);
  background: var(--sf);
}

/* ================================================================
   TRANG GIÁM SÁT — ARTIFACT 1bb423b8 1:1 (LỆNH USER 24-07,không ngoại lệ).
   CSS nguyên trị số artifact,scope .pg-chiso;
  vỏ dùng chung .pg-art.
   ================================================================ */
.pg-chiso .headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--o-4) var(--o-6);
  margin: 0 0 var(--o-5);
}

.pg-chiso .headrow h1 {
  margin: 0;
  font-size: var(--chu-h1);
  font-weight: 600;
  color: var(--p);
}

.pg-chiso .headrow .sub {
  color: var(--mut);
  font-size: var(--chu-phu);
}

.pg-chiso .seclbl {
  font-size: var(--chu-nhan);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: var(--o-6) 0 var(--o-2);
  display: block;
}

.pg-chiso .seclbl:first-of-type {
  margin-top: 0;
}

.pg-chiso .kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: var(--o-2);
  margin: 0;
}

.pg-chiso .kpi {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  padding: var(--o-3) var(--o-4);
  box-shadow: none;
}

.pg-chiso .kpi .l {
  font-size: var(--chu-nhan);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pg-chiso .kpi .v {
  font-size: var(--chu-kpi);
  font-weight: 700;
  color: var(--p);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.pg-chiso .kpi .d {
  font-size: var(--chu-nhan);
  color: var(--mut);
}

.pg-chiso .rows {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  overflow-x: auto;
  display: block;
  margin: 0;
}

.pg-chiso .rw {
  display: grid;
  grid-template-columns: 1.1fr .7fr .5fr .6fr .8fr 1.6fr;
  gap: var(--o-2);
  align-items: center;
  padding: var(--o-2) var(--o-4);
  border-bottom: 1px solid var(--hair);
  font-size: var(--chu-phu);
  min-width: 720px;
}

.pg-chiso .rw:last-child {
  border-bottom: none;
}

.pg-chiso .rw.hd {
  font-size: var(--chu-nhan);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}

.pg-chiso .rw:not(.hd):hover {
  background: var(--rowhover);
}

.pg-chiso .rw b {
  font-weight: 600;
}

.pg-chiso .rw .num {
  font-variant-numeric: tabular-nums;
  color: var(--mut);
}

.pg-chiso .rw .top1 {
  color: var(--p);
  font-weight: 700;
}

/* ===== Bảng tỉ lệ chốt (Giám sát) — cột rõ ràng ===== */
.pg-chiso .gs4 .rw {
  grid-template-columns: 1.4fr .8fr .7fr .7fr;
  min-width: 0;
}

.pg-chiso .gs3 .rw {
  grid-template-columns: 1.4fr 1fr .7fr;
  min-width: 0;
}

/* ================================================================
   TRANG QUẢN TRỊ — DEMO 7166008f 1:1 (USER duyệt 24-07).
   1 header duy nhất;
  scope .pg-quantri;
  xám AA riêng trang (không dark token:surface cố định sáng — xem ghi chú --sh*).
   ================================================================ */
.pg-quantri {
  --qmut: #556067;
  --qfaint: #646f75;
  --qhov: var(--rowhover);
}

.pg-quantri .headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--o-2) var(--o-6);
  margin: 0 0 var(--o-5);
}

.pg-quantri .headrow h1 {
  margin: 0;
  font-size: var(--chu-h1);
  font-weight: 600;
  color: var(--p);
  letter-spacing: -.01em;
}

.pg-quantri .headrow .sub {
  color: var(--qmut);
  font-size: var(--chu-phu);
}

.pg-quantri .tomtat {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--o-3);
  margin: 0 0 var(--o-6);
}

.pg-quantri .tt {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  padding: var(--o-3) var(--o-4);
  display: flex;
  flex-direction: column;
  gap: var(--o-0);
}

.pg-quantri .tt .l {
  font-size: var(--chu-nhan);
  color: var(--qfaint);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.pg-quantri .tt .v {
  font-size: var(--chu-kpi);
  font-weight: 700;
  color: var(--p);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.pg-quantri .tt .v.chu {
  font-size: var(--chu-than);
  font-weight: 600;
  line-height: 1.4;
  color: var(--goldink);
}

.pg-quantri .tt .d {
  font-size: var(--chu-nhan);
  color: var(--qmut);
}

.pg-quantri .seclbl {
  font-size: var(--chu-nhan);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--qfaint);
  margin: var(--o-6) 0 var(--o-2);
  display: block;
}

.pg-quantri .seclbl:first-of-type {
  margin-top: 0;
}

.pg-quantri .dongbo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--o-2) var(--o-3);
  background: var(--goldbg);
  border: 1px solid var(--goldbd);
  border-radius: var(--bo-vua);
  padding: var(--o-3) var(--o-4);
  margin: 0 0 var(--o-3);
  font-size: var(--chu-phu);
  color: var(--goldink);
}

.pg-quantri .dongbo b {
  font-weight: 600;
}

.pg-quantri .dongbo small {
  display: block;
  font-size: var(--chu-nhan);
}

.pg-quantri .dongbo .w {
  flex: 1;
  min-width: 260px;
}

.pg-quantri .rows {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  overflow-x: auto;
  display: block;
  margin: 0;
}

.pg-quantri .rw {
  display: grid;
  grid-template-columns: .4fr .9fr .9fr 1fr .5fr .6fr 1.3fr;
  gap: var(--o-2);
  align-items: center;
  padding: var(--o-2) var(--o-4);
  border-bottom: 1px solid var(--hair);
  font-size: var(--chu-phu);
  min-width: 760px;
  margin: 0;
}

.pg-quantri .rw:last-child {
  border-bottom: none;
}

.pg-quantri .rw.hd {
  font-size: var(--chu-nhan);
  color: var(--qfaint);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  position: sticky;
  top: 0;
  background: var(--sf);
}

.pg-quantri .rw:not(.hd):hover {
  background: var(--qhov);
}

.pg-quantri .rw .num {
  font-variant-numeric: tabular-nums;
  color: var(--qmut);
}

.pg-quantri .rw b {
  font-weight: 600;
}

.pg-quantri .rw .note {
  color: var(--qmut);
  font-size: var(--chu-nhan);
}

.pg-quantri .bdg {
  font-size: var(--chu-nhan);
  padding: var(--o-0) var(--o-2);
  border-radius: var(--bo-tron);
  background: var(--bg);
  color: var(--qmut);
  border: 1px solid var(--hair);
  white-space: nowrap;
  justify-self: start;
}

.pg-quantri .bdg.ql {
  background: var(--goldbg);
  border-color: var(--goldbd);
  color: var(--goldink);
  font-weight: 600;
}

.pg-quantri .bdg.off {
  background: var(--errbg);
  border-color: var(--errbd);
  color: var(--err);
  font-weight: 600;
}

.pg-quantri .tg-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.pg-quantri .tg-wrap input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.pg-quantri .tg {
  display: inline-block;
  width: 34px;
  height: 19px;
  border-radius: var(--bo-tron);
  background: var(--qmut);
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
}

.pg-quantri .tg::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  transition: left .15s ease, right .15s ease;
}

.pg-quantri .tg-wrap input:checked+.tg {
  background: var(--ok);
}

.pg-quantri .tg-wrap input:checked+.tg::after {
  left: auto;
  right: 3px;
}

.pg-quantri .tg.khoa {
  background: var(--hair);
  cursor: not-allowed;
}

.pg-quantri .sum {
  margin: var(--o-2) 0 0;
  font-size: var(--chu-nhan);
  color: var(--qmut);
}

.pg-quantri .sum b {
  color: var(--oktext);
}

.pg-quantri .rong {
  background: var(--sf);
  border: 1px dashed var(--hair);
  border-radius: var(--bo-vua);
  padding: var(--o-6) var(--o-5);
  text-align: center;
  color: var(--qmut);
  font-size: var(--chu-phu);
}

.pg-quantri .rong b {
  display: block;
  color: var(--ink);
  font-size: var(--chu-phu);
  margin-bottom: var(--o-1);
}

.pg-quantri .grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--o-3);
  align-items: stretch;
  margin: var(--o-3) 0 0;
}

@media(max-width:940px) {
  .pg-quantri .grid2 {
    grid-template-columns: 1fr;
  }
}

.pg-quantri .card {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  padding: var(--o-4) var(--o-5);
  display: flex;
  flex-direction: column;
  margin: 0;
  box-shadow: none;
}

.pg-quantri .card h3 {
  margin: 0 0 var(--o-3);
  font-size: var(--chu-phu);
  color: var(--p);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pg-quantri .lb {
  font-size: var(--chu-nhan);
  color: var(--qmut);
  margin: var(--o-3) 0 var(--o-2);
}

.pg-quantri .lb:first-of-type {
  margin-top: 0;
}

.pg-quantri .tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--o-2);
}

.pg-quantri .tag {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--bo-tron);
  padding: var(--o-1) var(--o-3);
  font-size: var(--chu-nhan);
  color: var(--ink);
}

.pg-quantri .tag.add {
  border-style: dashed;
  color: var(--qfaint);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.pg-quantri .tag.add:hover {
  color: var(--p);
  border-color: var(--p);
}

.pg-quantri .tag-add-form {
  display: inline-flex;
  gap: var(--o-2);
  align-items: center;
}

.pg-quantri .tag-add-form input {
  border: 1px solid var(--mut);
  border-radius: var(--bo-tron);
  padding: var(--o-1) var(--o-3);
  font-size: var(--chu-nhan); line-height: var(--dong-1); font-family: var(--font);
  width: 130px;
  background: var(--bg);
  color: var(--ink);
}

.pg-quantri .cfg {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: var(--o-2) var(--o-3);
  font-size: var(--chu-phu);
  align-items: center;
}

.pg-quantri .cfg input {
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: var(--o-2) var(--o-2);
  font-size: var(--chu-phu); line-height: var(--dong-1); font-family: var(--font);
  text-align: right;
  background: var(--bg);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  width: auto;
}

.pg-quantri .cfg input::placeholder {
  color: var(--qfaint);
}

.pg-quantri .cfg input:focus {
  outline: none;
  border-color: var(--p);
  background: var(--sf);
}

.pg-quantri .mode {
  margin: var(--o-3) 0 0;
  padding: var(--o-2) var(--o-3);
  background: var(--goldbg);
  border: 1px dashed var(--goldbd);
  border-radius: var(--bo-nho);
  font-size: var(--chu-nhan);
  color: var(--goldink);
  display: block;
}

.pg-quantri .chedo {
  display: inline-flex;
  border: 1px solid var(--hair);
  border-radius: var(--bo-tron);
  overflow: hidden;
  margin-top: var(--o-2);
}

.pg-quantri .chedo button {
  border: none;
  background: var(--sf);
  color: var(--qmut);
  font-weight: 600; font-size: var(--chu-nhan); line-height: var(--dong-1); font-family: var(--font);
  padding: var(--o-2) var(--o-3);
  cursor: pointer;
}

.pg-quantri .chedo button.on {
  background: var(--p);
  color: var(--trang);
}

/* ===== Trang tình trạng (sheet Status) — lưới tuần ===== */
.pg-tinhtrang .weeknav {
  display: flex;
  align-items: center;
  gap: var(--o-3);
  margin: 0 0 var(--o-4);
  flex-wrap: wrap;
}

.pg-tinhtrang .weeknav .wk {
  font-weight: 600;
  color: var(--ink);
}

.pg-tinhtrang .weeknav .b {
  text-decoration: none;
}

.pg-tinhtrang .tt-grid {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-vua);
  overflow-x: auto;
  margin: 0 0 var(--o-3);
}

.pg-tinhtrang .tt-grid .rw {
  display: grid;
  grid-template-columns: .5fr .9fr .7fr .8fr .9fr .7fr 1fr .5fr 1.6fr;
  gap: var(--o-3);
  align-items: center;
  padding: var(--o-2) var(--o-4);
  border-bottom: 1px solid var(--hair);
  font-size: var(--chu-phu);
  min-width: 900px;
  margin: 0;
}

.pg-tinhtrang .tt-grid .rw:last-child {
  border-bottom: none;
}

.pg-tinhtrang .tt-grid .rw.hd {
  font-size: var(--chu-nhan);
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
  font-weight: 600;
}

.pg-tinhtrang .tt-grid .rw.now {
  background: var(--rowhover);
}

.pg-tinhtrang .tt-grid .num {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pg-tinhtrang .tt-grid .num.up {
  color: var(--oktext);
  font-weight: 600;
}

.pg-tinhtrang .tt-grid .num.down {
  color: var(--err);
  font-weight: 600;
}

.pg-tinhtrang .tt-grid .act-nhan {
  color: var(--oktext);
  font-weight: 600;
}

.pg-tinhtrang .tt-grid .act-doi {
  color: var(--err);
  font-weight: 600;
}

.pg-tinhtrang .tt-grid .act-du {
  color: var(--mut);
}

.pg-tinhtrang .tt-grid .ci,
.pg-tinhtrang .tt-grid .cn {
  height: var(--h-nut-nho);
  width: 100%;
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: 0 var(--o-2);
  font: inherit;
  font-size: var(--chu-phu);
  color: var(--ink);
}

.pg-tinhtrang .tt-grid .ci {
  text-align: center;
}

.pg-tinhtrang .tt-foot {
  margin: var(--o-2) 0 0;
  font-size: var(--chu-nhan);
  color: var(--mut);
}

.pg-tinhtrang .tt-foot b {
  color: var(--oktext);
  font-weight: 600;
}


/* ===== Trang sổ việc — quạt xếp theo ngày (áp artifact d28e2087 1:1) ===== */

.pg-soviec .wrap {
  margin: 0 auto;
  padding: var(--o-6) var(--o-4) 56px;
}

/* ===== header soviec + tracuu — daynav + chips + ring buoi (soviec: button/i; tracuu: a) ===== */
.pg-soviec .daynav{display:inline-flex;align-items:center;border:1px solid var(--vien-nhap);
  border-radius:10px;height:46px;background:#fbfcfc;overflow:hidden;flex:0 0 auto}
.pg-soviec .daynav i{width:36px;height:100%;display:grid;place-items:center;color:var(--mut);
  font-size:17px;cursor:pointer;font-style:normal}
.pg-soviec .daynav i:hover{color:var(--p);background:var(--okbg)}

.pg-soviec .chips{display:flex;gap:7px;overflow:auto;flex:1 1 auto}
.pg-soviec .chips button{height:46px;padding:0 15px;border:1px solid var(--hair);border-radius:10px;
  background:var(--sf);color:var(--ink);font-family:var(--font);cursor:pointer;white-space:nowrap;
  display:flex;flex-direction:column;justify-content:center;gap:2px}
.pg-soviec .chips .d{font-size:13px;font-weight:600}
.pg-soviec .chips .m{font-size:11px;color:var(--faint);display:flex;align-items:center;gap:5px}
.pg-soviec .chips .m em{font-style:normal;font-weight:700;color:var(--cam)}
.pg-soviec .chips .m em.ok{color:var(--oktext)}
.pg-soviec .chips button.on{background:var(--p);color:var(--trang);border-color:var(--p)}
.pg-soviec .chips button.on .m{color:var(--header-nhat)}
.pg-soviec .chips button.on .m em{color:#f2b366}

.pg-soviec .synced{font-size:12px;color:var(--faint);white-space:nowrap;flex:0 0 auto}
.pg-soviec .kh-period .st, .pg-tracuu .kh-period .st{font-size:13px;color:var(--mut)}

.pg-soviec .buoi, .pg-tracuu .buoi{display:flex;align-items:center;gap:12px;padding-left:24px;border-left:1px solid var(--hair)}
.pg-soviec .buoi .donut, .pg-tracuu .buoi .donut{width:56px;height:56px;border-radius:50%;position:relative;display:grid;place-items:center}
.pg-soviec .buoi .donut::before, .pg-tracuu .buoi .donut::before{content:"";position:absolute;width:40px;height:40px;border-radius:50%;background:var(--sf)}
.pg-soviec .buoi .donut b, .pg-tracuu .buoi .donut b{position:relative;font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pg-soviec .buoi .lg, .pg-tracuu .buoi .lg{display:flex;flex-direction:column;gap:4px;font-size:12px;width:78px}
.pg-soviec .buoi .lg span, .pg-tracuu .buoi .lg span{display:flex;align-items:center;gap:6px;color:var(--mut)}
.pg-soviec .buoi .lg span::before, .pg-tracuu .buoi .lg span::before{content:"";width:8px;height:8px;border-radius:2px}
.pg-soviec .buoi .lg .s::before, .pg-tracuu .buoi .lg .s::before{background:var(--oktext)}
.pg-soviec .buoi .lg .c::before, .pg-tracuu .buoi .lg .c::before{background:var(--cam)}
.pg-soviec .buoi .lg b, .pg-tracuu .buoi .lg b{color:var(--ink);font-variant-numeric:tabular-nums}

.pg-soviec .chips button:focus-visible,
.pg-soviec .day-h:focus-visible,
.pg-khach .day-h:focus-visible,
.pg-soviec .note input:focus-visible {
  outline: var(--net-focus) solid var(--p);
  outline-offset: 2px;
}

.pg-soviec .hint {
  color: var(--faint);
  font-size: var(--chu-nhan);
  margin: 4px 0 var(--o-6);
  letter-spacing: .02em;
}

.pg-art .stack {
  display: flex;
  flex-direction: column;
}

.pg-art .day {
  background: var(--sf);
  border: 1px solid var(--hair);
  border-radius: var(--bo-lon);
  box-shadow: 0 1px 2px rgba(19, 52, 59, .06);
  transition: margin .2s ease, box-shadow .2s ease, transform .12s ease;
}

.pg-art .day+.day {
  margin-top: calc(-1 * var(--o-2));
}

.pg-art .day.open {
  margin: var(--o-4) 0;
  box-shadow: 0 10px 28px rgba(19, 52, 59, .16);
  position: relative;
  z-index: 2;
  border-color: var(--okbd);
}

.pg-art .day.open+.day {
  margin-top: 0;
}

.pg-art .day:not(.open):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(19, 52, 59, .10);
  z-index: 1;
  position: relative;
  border-color: var(--okbd);
}

.pg-art .day-h {
  display: flex;
  align-items: center;
  gap: var(--o-3);
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: var(--o-2) var(--o-4) var(--o-2) var(--o-2);
  min-height: 60px;
  border-radius: var(--bo-lon);
}

.pg-art .day.open .day-h {
  background: linear-gradient(to bottom, var(--okbg), var(--sf));
  border-radius: var(--bo-lon) var(--bo-lon) 0 0;
}

.pg-art .leaf {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: var(--bo-vua);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--hair);
  line-height: 1;
}

.pg-art .leaf b {
  font-size: var(--chu-kpi);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pg-art .leaf i {
  font-style: normal;
  font-size: var(--chu-nhan);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: var(--o-0);
}

.pg-art .day.open .leaf {
  background: var(--p);
  border-color: var(--p);
}

.pg-art .day.open .leaf b,
.pg-art .day.open .leaf i {
  color: var(--trang);
}

.pg-soviec .day.today .leaf {
  background: var(--goldbg);
  border-color: var(--goldbd);
}

.pg-soviec .day.today .leaf b {
  color: var(--goldink);
}

.pg-soviec .day.today .leaf i {
  color: var(--goldink);
}

.pg-soviec .day.today.open .leaf {
  background: var(--gold);
  border-color: var(--gold);
}

.pg-soviec .day.today.open .leaf b,
.pg-soviec .day.today.open .leaf i {
  color: var(--pd);
}

.pg-art .dh-mid {
  display: flex;
  flex-direction: column;
  gap: var(--o-0);
  min-width: 0;
}

.pg-art .dh-mid .thu {
  font-weight: 700;
  font-size: var(--chu-than);
}

.pg-art .dh-mid .ng {
  font-size: var(--chu-nhan);
  color: var(--mut);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.pg-soviec .badge {
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
  border-radius: var(--bo-tron);
  padding: 0 var(--o-2);
  font-size: var(--chu-nhan);
  font-weight: 600;
}

.pg-soviec .badge.homnay {
  background: var(--goldbg);
  border: 1px solid var(--goldbd);
  color: var(--goldink);
}

.pg-art .dh-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--o-2);
}

.pg-art .chipsc {
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
  gap: var(--o-1);
  border-radius: var(--bo-tron);
  padding: 0 var(--o-2);
  font-size: var(--chu-nhan);
  font-variant-numeric: tabular-nums;
  background: var(--bg);
  border: 1px solid var(--hair);
  color: var(--mut);
}

.pg-art .chipsc b {
  color: var(--ink);
  font-weight: 600;
}

.pg-art .count {
  height: var(--h-badge);
  display: inline-flex;
  align-items: center;
  border-radius: var(--bo-tron);
  padding: 0 var(--o-3);
  font-size: var(--chu-phu);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--okbg);
  border: 1px solid var(--okbd);
  color: var(--oktext);
}

.pg-art .count.trong {
  background: var(--bg);
  border-color: var(--hair);
  color: var(--mut);
  font-weight: 400;
}

.pg-art .caret {
  flex: none;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--mut);
  border-bottom: 2px solid var(--mut);
  transform: rotate(45deg);
  transition: transform .2s ease;
  margin: 0 var(--o-1) var(--o-1) var(--o-0);
}

.pg-art .day.open .caret {
  transform: rotate(225deg);
  margin-bottom: calc(-1 * var(--o-1));
}

.pg-art .day-b {
  display: none;
  padding: 0 var(--o-4) var(--o-4);
}

.pg-art .day.open .day-b {
  display: block;
}

.pg-art .tw {
  overflow-x: auto;
}

.pg-soviec table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--chu-phu);
}

.pg-soviec th {
  font-size: var(--chu-nhan);
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: var(--gian-hoa);
  text-align: left;
  padding: var(--o-2) var(--o-2);
  border-bottom: 2px solid var(--hair);
  white-space: nowrap;
}

.pg-soviec td {
  padding: var(--o-2) var(--o-2);
  border-bottom: 1px solid var(--hair);
  vertical-align: middle;
}

.pg-soviec tbody tr:nth-child(even) td {
  background: var(--bg);
}

.pg-soviec tbody tr:hover td {
  background: var(--rowhover);
}

.pg-soviec .c-stt {
  width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}

.pg-soviec .c-sl {
  width: 84px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.pg-soviec .c-hen {
  width: 150px;
  white-space: nowrap;
}

.pg-soviec .hen {
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
  border-radius: var(--bo-tron);
  padding: 0 var(--o-2);
  font-size: var(--chu-nhan);
  font-variant-numeric: tabular-nums;
  background: var(--goldbg);
  border: 1px solid var(--goldbd);
  color: var(--goldink);
}

.pg-soviec .hen.kx {
  background: var(--bg);
  border-color: var(--hair);
  color: var(--mut);
}

.pg-soviec .xong {
  height: var(--h-the);
  display: inline-flex;
  align-items: center;
  border-radius: var(--bo-tron);
  padding: 0 var(--o-2);
  font-size: var(--chu-nhan);
  background: var(--okbg);
  border: 1px solid var(--okbd);
  color: var(--oktext);
  margin-left: var(--o-2);
}

.pg-soviec tr.done td {
  color: var(--mut);
}

.pg-soviec .c-note {
  min-width: 180px;
}

.pg-soviec .note {
  display: block;
}

.pg-soviec .note input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--mut);
  border-radius: var(--bo-nho);
  padding: 0 var(--o-2);
  font: var(--chu-phu) var(--font);
  color: var(--ink);
  background: var(--sf);
}

.pg-soviec .note input::placeholder {
  color: var(--faint);
}

.pg-soviec .note input:hover {
  border-color: var(--okbd);
}

.pg-soviec tfoot td {
  font-weight: 700;
  background: var(--okbg);
  border-top: 2px solid var(--okbd);
  border-bottom: 0;
  color: var(--oktext);
  font-variant-numeric: tabular-nums;
}

.pg-soviec tfoot tr:hover td {
  background: var(--okbg);
}

@media (prefers-reduced-motion: reduce) {

  .pg-soviec .day,
  .pg-soviec .caret,
  .pg-soviec .day:hover,
  .pg-khach .day,
  .pg-khach .caret,
  .pg-khach .day:hover {
    transition: none;
    transform: none;
  }
}

@media (max-width: 640px) {
  .pg-soviec .chipsc {
    display: none;
  }
}