/* ===== BẢNG MÀU DENTAL 135 — kế thừa VPSTTT (docs/THUONG-HIEU-THIET-KE.md §1.3) =====
   Tím thương hiệu #9868F8 của VPSTTT không đủ tương phản cho chữ trên nền trắng, nên nền sáng
   dùng #7A4FE8 (5.9:1), nền tối dùng #A78BFA; tím gốc chỉ ở dấu trên nền navy. Ba màu trạng thái
   (tốt · cần để ý · sai) KHÔNG đổi theo thương hiệu. Không mã hex nào ngoài tệp này. */
:root{
  --nen:#F6F5FA; --the:#FFFFFF; --chim:#EEEDF4;
  /* `--chu3` là màu chữ PHỤ, và nó được dùng ở 120 chỗ — nhãn ô nhập, đầu cột bảng, dòng phụ
     dưới tiêu đề, nhãn giờ trên lưới. Đo ngày 16/09/2026: #7C7C94 chỉ đạt **3.49:1** trên nền
     `--chim` và **4.06:1** trên thẻ trắng — dưới chuẩn AA 4.5:1 cho chữ nhỏ, tức là đúng những
     dòng chữ mà người dùng phải đọc nhiều nhất lại là những dòng khó đọc nhất. #67677C đạt
     5.51 / 5.08 / 4.74 trên thẻ / nền / nền phụ: vẫn là "chữ mờ" về mặt phân tầng, nhưng đọc được. */
  --chu:#1F2937; --chu2:#4B5563; --chu3:#6B7280;
  /* `--chu1` được dùng ở **12 chỗ** trong tệp này mà chưa từng được khai — nên mọi khai báo
     `color:var(--chu1)` đều là khai báo CHẾT: thuộc tính ấy bị bỏ và phần tử thừa hưởng màu
     của cha. Đúng loại lỗi im lặng: không lỗi cú pháp, không cảnh báo, chỉ là thứ đáng đậm thì
     không đậm. Nay nó là token thật, cùng giá trị với `--chu`. */
  --chu1:#1F2937;
  /* `--nhan-nhat` và `--canh-nhat` là NỀN của chữ cùng họ (chip đếm, mục thanh bên đang chọn,
     chip bác sĩ). Đo 18/09/2026: `--nhan` trên `--nhan-nhat` = 4,32:1 và `--canh` trên
     `--canh-nhat` = 4,34:1 — cả hai DƯỚI ngưỡng AA 4,5:1, và chúng là TOKEN nên một con số sai
     là 138–162 chỗ thiếu tương phản. Chữ trên đó là 11px đậm; ngưỡng 3:1 chỉ dành cho chữ
     ≥18,66px đậm, nên đây là vi phạm thật, không phải "chữ nhỏ nên bỏ qua".
     Chữa ở NỀN chứ không ở chữ: `--nhan` là màu thương hiệu, đổi nó là đổi cả nhận diện. */
  --vien:#E5E7EB; --nhan:#6C42EC; --nhan-nhat:#EEE9FD;
  /* Thanh bên TÍM THAN có lụa chuyển màu (chủ dự án 27/09/2026) — token ở đây để khối cuối app.css không mang mã hex */
  --xoay1:#F3EFFE; --xoay2:#E7DFFB; --xoay-icon:#4C3A78; --xoay-tim0:#9D74FA; --xoay-tim:#8B5CF6; --xoay-tim2:#6D3FE0;
  --xoay-bong:rgba(76,58,120,.45); --xoay-bong-tim:rgba(109,63,224,.75); --xoay-vach:rgba(76,58,120,.16); --xoay-sang:rgba(255,255,255,.55); --xoay-kinh:rgba(255,255,255,.88); --xoay-phu:#6E6485;
  --ben-nen:#170A2B; --ben-nen2:#2B1152; --ben-nen3:#0E0619; --ben-lua1:rgba(168,120,255,.36); --ben-lua2:rgba(120,64,220,.30);
  --ben-chu:#F1ECFF; --ben-chu2:#CBBFEA; --ben-chu3:#9C8DC6; --ben-mo:rgba(255,255,255,.07); --ben-chon:rgba(176,146,255,.22);
  --ben-icon:#D3C4FF; --ben-dem:#8B5CF6; --ben-gap:#EF4444; --ben-trang:#FFFFFF;
  --tot:#1E7A50; --tot-nhat:#E1F1E8; --canh:#9A6414; --canh-nhat:#FBF4E8;
  --loi:#B3261E; --loi-nhat:#FBE9E7;
  --navy:#0B0F1E; --tim-goc:#7C3AED;
  /* năm quy trình chính của bộ SOP — sắc riêng để lưu đồ đọc được, đổi theo chế độ tối */
  --sop-p1:#B5266A; --sop-p1-nhat:#FBE7F0; --sop-p2:#C25E12; --sop-p2-nhat:#FDF0E4; --sop-p3:#6D3FB8; --sop-p3-nhat:#F1E9FB;
  --sop-p4:#0E7A6E; --sop-p4-nhat:#E2F3F0; --sop-p5:#6B4A3A; --sop-lien-ket:#1F5FBF; --sop-lien-ket-nhat:#EAF1FB;
  --bong:0 1px 2px rgba(20,20,40,.05), 0 8px 24px -18px rgba(20,20,40,.3);
}
@media (prefers-color-scheme:dark){:root{
  --nen:#0B0F1E; --the:#141A2E; --chim:#10162A;
  /* Nền tối: #7C7C94 trên thẻ #141A2E chỉ 4.25:1 — vẫn dưới ngưỡng. #8E8EA8 đạt 5.41:1. */
  --chu:#ECEBF5; --chu2:#B0AFC6; --chu3:#8E8EA8; --chu1:#ECEBF5;
  --vien:#26304A; --nhan:#A78BFA; --nhan-nhat:#241B47;
  --tot:#5FC28E; --tot-nhat:#11241B; --canh:#D9A441; --canh-nhat:#241C0E;
  --loi:#F2B8B5; --loi-nhat:#2A1512;
  --sop-p1:#F48FB1; --sop-p1-nhat:#2A1520; --sop-p2:#FFB27A; --sop-p2-nhat:#2A1C10; --sop-p3:#C4A6F5; --sop-p3-nhat:#22183A;
  --sop-p4:#6FD3C4; --sop-p4-nhat:#0F2924; --sop-p5:#C9A38F; --sop-lien-ket:#8FB6F5; --sop-lien-ket-nhat:#14213A;
  --bong:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--nen);color:var(--chu);font-family:"Plus Jakarta Sans","Be Vietnam Pro",system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* đăng nhập */
.dn{min-height:100vh;display:grid;place-items:center;padding:24px}
.dn-hop{background:var(--the);border:1px solid var(--vien);border-radius:16px;padding:32px;max-width:460px;width:100%;box-shadow:var(--bong)}
.dn-hop h1{margin:0 0 4px;font-size:26px;font-weight:700;letter-spacing:-.02em}
.dn-hop p{margin:0 0 22px;color:var(--chu3);font-size:14px}
.vai{display:flex;flex-direction:column;gap:10px}
.vai button{display:flex;align-items:center;gap:14px;text-align:left;background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.12s}
.vai button:hover{border-color:var(--nhan);background:var(--nhan-nhat)}
.vai button:focus-visible{outline:2px solid var(--nhan);outline-offset:2px}
.vai .ma{flex:none;width:44px;height:44px;border-radius:10px;background:var(--nhan-nhat);color:var(--nhan);display:grid;place-items:center;font-weight:700;font-size:13px}
.vai b{display:block;font-weight:600;font-size:15px}
.vai small{color:var(--chu3);font-size:12.5px;line-height:1.4}

/* khung */
.khung{display:grid;grid-template-columns:252px 1fr;min-height:100vh}
.ben{background:var(--the);border-right:1px solid var(--vien);display:flex;flex-direction:column;gap:2px;padding:16px 12px;position:sticky;top:0;height:100vh}
.hieu{padding:6px 10px 16px;font-weight:700;letter-spacing:-.01em;font-size:17px;
      display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.hieu small{display:block;font-weight:400;font-size:11.5px;color:var(--chu3);letter-spacing:.02em}
.hieu>span{flex:1;min-width:0}
/* Chuông đứng cạnh tên phần mềm — thứ liếc vào mỗi lần mở, không phải thứ đào ở đáy menu. */
.hieu .chuong{flex:none;align-self:center}

/* ---------- thanh bên thu gọn ---------- */
.nut-gon{flex:none;width:28px;height:28px;border:1px solid var(--vien);border-radius:8px;
         background:none;color:var(--chu3);cursor:pointer;font-size:14px;line-height:1;padding:0}
.nut-gon:hover{background:var(--chim);color:var(--chu)}
.khung.gon{grid-template-columns:52px 1fr}
/* thu gọn thanh bên là để LẤY CHỖ — nội dung phải nở ra hết bề ngang còn lại */
.khung.gon .chinh{max-width:none;padding:26px 22px 60px}
.ben.gon{padding:12px 8px;gap:8px;align-items:center;overflow-y:auto}
.ben.gon .muc-gon{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:9px;
                  font-size:13.5px;font-weight:600;color:var(--chu2)}
.ben.gon .muc-gon.chon{background:var(--nhan-nhat);color:var(--nhan)}
.ben.gon .toi-gon{margin-top:auto}
@media (max-width:820px){.nut-gon{display:none}}
.ben a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;color:var(--chu2);text-decoration:none;font-size:14.5px;cursor:pointer}
.ben a:hover{background:var(--chim)}
.ben a.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.toi{margin-top:auto;border-top:1px solid var(--vien);padding:12px 11px 2px;font-size:13px;color:var(--chu3)}
.toi{display:flex;flex-direction:column;gap:2px}
.toi b{color:var(--chu);font-size:13.5px;font-weight:600}
.toi button{margin-top:6px;align-self:flex-start;background:none;border:0;color:var(--nhan);cursor:pointer;padding:0;font-size:13px}

/* min-width:0 — là ô lưới 1fr, không có nó nội dung rộng (bảng lịch) banh cả cột ra và
   trang cuộn ngang thay vì cuộn bên trong bảng */
.chinh{padding:26px 30px 60px;max-width:1180px;width:100%;min-width:0}
@media (max-width:600px){.chinh{padding:18px 16px 48px}}
.dau{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.dau h2{margin:0;font-size:23px;font-weight:700;letter-spacing:-.02em}
.dau p{margin:2px 0 0;color:var(--chu3);font-size:13.5px}

.the{background:var(--the);border:1px solid var(--vien);border-radius:13px;box-shadow:var(--bong)}
.luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.so{padding:16px 18px}
.so .n{font-family:"IBM Plex Mono",monospace;font-size:27px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.so .l{font-size:12.5px;color:var(--chu3);margin-top:2px}

table{border-collapse:collapse;width:100%;font-size:14px}
/* KHUNG BẢNG và VÙNG CUỘN NGANG là HAI phần tử, không phải một.

   Bản cũ để `overflow-x:auto` thẳng trên `.bang`. Hệ quả không ai thấy cho tới khi đo: một
   `overflow` khác `visible` trên tổ tiên làm `position:sticky` của `<th>` neo vào CHÍNH khung
   ấy — mà khung ấy cao đúng bằng nội dung nên không bao giờ cuộn dọc, và đầu cột dính trở
   thành vô hiệu. Đo được: `top` của `<thead>` đi từ 154 xuống **-546** khi cuộn trang, trong
   khi CSS ghi `position:sticky;top:0`.

   Tách ra: `.bang` giữ viền + bo góc (khung), `.bang-cuon` lo cuộn ngang, `<table>` ở trong.
   Nhờ vậy `<th>` neo vào khung nhìn trang và dính thật. */
.bang{border:1px solid var(--vien);border-radius:13px;background:var(--the)}
.bang-cuon{overflow-x:auto}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--vien)}
th{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--chu3);font-weight:600;background:var(--chim);white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr.bam{cursor:pointer}
tbody tr.bam:hover{background:var(--chim)}
td.tien{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}

.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--chim);color:var(--chu2);white-space:nowrap}
.chip.tot{background:var(--tot-nhat);color:var(--tot)}
.chip.canh{background:var(--canh-nhat);color:var(--canh)}
.chip.loi{background:var(--loi-nhat);color:var(--loi)}
.chip.nhan{background:var(--nhan-nhat);color:var(--nhan)}

.nut{background:var(--nhan);color:#fff;border:0;border-radius:9px;padding:9px 15px;font-size:14px;font-weight:600;cursor:pointer}
.nut:hover{filter:brightness(1.08)}
.nut:disabled{opacity:.5;cursor:not-allowed}
.nut.phu{background:var(--the);color:var(--chu2);border:1px solid var(--vien)}
/* Nút phụ ĐANG BẬT — trước nay `chon` gắn lên `.nut.phu` không có luật nào, nên "Lọc ▾" mở ra
   trông y hệt lúc đóng và tín hiệu "đang có cột bị ẩn" hoàn toàn câm. */
.nut.phu.chon{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan)}
.nut.phu.chon .dem{background:var(--nhan);color:#fff}
.nut.nho{padding:5px 11px;font-size:13px;border-radius:7px}
.hang{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

input[type=text],input[type=date],input[type=time],input[type=month],input[type=number],select,textarea{
  width:100%;padding:9px 12px;border:1px solid var(--vien);border-radius:9px;background:var(--the)}
/* Ô TÌM ĐỨNG RIÊNG, KHÔNG GHÉP VÀO DÒNG TRÊN. Danh sách trên liệt kê tay từng kiểu ô và bỏ sót
   `search` — nên 10 ô tìm trong app mang nguyên viền mặc định của trình duyệt (2px inset, góc
   vuông) đứng cạnh những ô có viền --vien bo 9px. Cùng họ với lỗi `input[type=month]` đã bắt ở
   đợt trước. Không gộp vào dòng trên vì ở đó có `width:100%`: ô tìm trong `.dau .hang` sẽ xuống
   dòng chiếm trọn một hàng. */
input[type=search]{padding:9px 12px;border:1px solid var(--vien);border-radius:9px;background:var(--the)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--nhan);outline-offset:-1px;border-color:transparent}
label{display:block;font-size:12.5px;color:var(--chu3);margin-bottom:5px;font-weight:500}
.o{margin-bottom:14px}
.doi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.doi{grid-template-columns:1fr}}

.lop{position:fixed;inset:0;background:rgba(10,20,19,.45);display:grid;place-items:center;padding:20px;z-index:50}
.hop{background:var(--the);border-radius:16px;padding:24px;max-width:560px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 60px -20px rgba(0,0,0,.5)}
.hop h3{margin:0 0 16px;font-size:19px;font-weight:700}

.bao{padding:12px 15px;border-radius:10px;margin-bottom:16px;font-size:14px;display:flex;gap:10px;align-items:flex-start}
.bao.loi{background:var(--loi-nhat);color:var(--loi)}
.bao.tot{background:var(--tot-nhat);color:var(--tot)}
.bao.canh{background:var(--canh-nhat);color:var(--canh)}
.bao b{font-weight:600}

.trong{padding:44px 20px;text-align:center;color:var(--chu3)}
.trong b{display:block;color:var(--chu2);font-weight:600;margin-bottom:4px}
.dang{padding:40px;text-align:center;color:var(--chu3)}
.an{display:none}
.moc{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--vien)}
.moc:last-child{border-bottom:0}
.moc .gio{flex:none;width:52px;font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--chu3)}

/* điều hướng đầy đủ */
.ben{overflow-y:auto}
.nhan-nhom{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--chu3);font-weight:600;padding:14px 11px 6px}
.ben a.nhom{font-size:13.5px;font-weight:600;color:var(--chu);gap:6px;text-transform:none;letter-spacing:0;line-height:1.35}
.ben a.nhom .mui{font-size:10px;color:var(--chu3);width:10px}
.ben a.nhom .dem{margin-left:auto;flex:none;font-size:11px;color:var(--chu3);font-family:"IBM Plex Mono",monospace}
.ben a.nhom.co{color:var(--nhan)}
.con-nhom{padding-left:6px;border-left:1px solid var(--vien);margin-left:14px}
.ben a.con{font-size:13px;padding:6px 10px;color:var(--chu2);line-height:1.35}
.ben a.con.mo{color:var(--chu3);font-size:12px}
.nhom-o{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--chu3);font-weight:600;margin:4px 0 10px}
details summary{cursor:pointer;font-size:13px;color:var(--nhan);font-weight:500;padding:4px 0}
details summary:focus-visible{outline:2px solid var(--nhan);outline-offset:3px;border-radius:4px}

/* thông báo nổi */
.khay{position:fixed;right:18px;bottom:18px;z-index:100;display:flex;flex-direction:column;gap:8px;max-width:400px}
/* Ở chế độ 30 ngày có nút nổi "Chưa xác nhận" ngồi đúng góc phải-dưới. Nâng khay lên cho khỏi
   đè: thứ TẠM THỜI (thông báo) nhường thứ THƯỜNG TRỰC (nút việc). Chỉ áp ở màn có nút ấy. */
body:has(.popup-xn) .khay{bottom:64px}
.khay .bao{box-shadow:0 10px 30px -10px rgba(0,0,0,.35);margin:0;animation:vao .2s ease-out;align-items:center}
@keyframes vao{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.khay .bao{animation:none}}

textarea{font-family:inherit;resize:vertical}

/* ---------- sơ đồ răng ---------- */
.nhan-cung{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--chu3);font-weight:600;margin:0 0 8px}
.cung{display:flex;justify-content:center;gap:3px;margin-bottom:10px;overflow-x:auto;padding-bottom:2px}
.giua-cung{flex:none;width:12px;border-left:1px dashed var(--vien)}
.rang{flex:none;width:38px;display:flex;flex-direction:column;align-items:center;gap:2px}
.rang-o{width:38px;height:38px;display:block}
.rang-so{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--chu3);cursor:pointer;padding:0 3px;border-radius:4px;line-height:1.5}
.rang-so:hover{background:var(--chim)}
.rang-so.chon{background:var(--nhan);color:#fff;font-weight:700}
.chu-giai{display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--vien);font-size:12.5px;color:var(--chu2)}
.chu-giai span{display:flex;align-items:center;gap:6px}
.chu-giai i{width:12px;height:12px;border-radius:3px;border:1px solid var(--vien);display:block}
@media (max-width:720px){.cung{justify-content:flex-start}}

/* ---------- in ---------- */
@media print{
  /* Thanh lọc, cửa sổ lọc và dòng "đang lọc" không thuộc về tờ giấy — chúng là điều khiển.
     `.hang-tin` thì KHÔNG ẩn: ở màn Khu vực nó là dòng ngày duy nhất còn lại sau khi
     `.thanh-lich` bị ẩn, và ở Lịch hẹn nó giữ cảnh báo CHƯA XẾP CA — thứ đáng in. */
  .ben,.khay,.dau .hang,.nut,.thanh-lich,.thanh-loc,.loc-cua,.dang-loc{display:none!important}
  .khung{display:block}
  .chinh{padding:0;max-width:none}
  .lich{max-height:none;height:auto!important}
  .the,.bang{box-shadow:none;border-color:#bbb}
  body{background:#fff;color:#000;font-size:12px}
  .rang-o{width:30px;height:30px}
  /* BẢNG khi in: trên màn hình .bang cuộn ngang (overflow-x:auto), nhưng giấy không cuộn
     được — phần tràn bị CẮT, và cái bị cắt là hai cột cuối "Thời lượng · Thu tại buổi" của
     bảng Từng buổi hẹn: đúng hai cột khách cần nhất. In thì bảng phải TỰ CO cho vừa trang. */
  /* Khung cuộn dọc của đầu cột dính là style NỘI TUYẾN (canDayManHinhBang) — muốn thắng nó
     trên giấy phải `!important`, nếu không bảng dài in ra bị CẮT đúng ở mép khung nhìn. */
  .bang,.bang-cuon{overflow:visible!important}
  .bang-cuon{max-height:none!important}
  .bang.dinh thead th{position:static}
  .bang table{width:100%;table-layout:auto;font-size:10.5px}
  .bang th,.bang td{padding:4px 6px;white-space:normal;word-break:break-word}
  .bang tr{break-inside:avoid}
  .bang thead{display:table-header-group}       /* bảng dài sang trang: đầu cột in lại */
  .buoc-tv{break-inside:auto}
  .buoc-dau{break-after:avoid}
  /* cột chỉ chứa nút hành động: nút đã ẩn, ô rỗng không cần chiếm giấy */
  .bang td:empty{padding:0}
  select,input{border:none;background:none}
}

/* ---------- màn hẹp ----------
   Khối @media ở đầu file bị chính quy tắc .ben viết sau nó đè mất (cùng độ ưu tiên, đứng sau
   thì thắng), nên thanh bên vẫn cao 100vh và đẩy toàn bộ nội dung xuống dưới màn hình đầu tiên.
   Đặt lại ở cuối file cho đúng thứ tự. */
@media (max-width:820px){
  .khung{grid-template-columns:1fr}
  .ben{position:static;height:auto;max-height:46vh;overflow-y:auto;
       border-right:0;border-bottom:1px solid var(--vien);padding:10px}
  .ben .hieu{padding-bottom:8px}
  .toi{margin-top:10px}
  .chinh{padding:18px 16px 48px}
}

/* ---------- lịch hẹn: thanh công cụ ----------
   MỘT hàng duy nhất, DÍNH trên cùng khi cuộn: tiêu đề · đi lại giữa các ngày · chế độ xem ·
   (đẩy sang phải) hành động. Bảng lịch cuộn BÊN TRONG nó nên thanh này không bao giờ bị
   kéo theo — dù kéo ngang hay kéo dọc — và không chiếm thêm một dòng nào cho tiêu đề riêng. */
.thanh-lich{position:sticky;top:0;z-index:40;background:var(--nen);
            display:flex;align-items:center;gap:10px;flex-wrap:wrap;
            padding:10px 0;margin:0 0 8px;border-bottom:1px solid var(--vien)}
.tieu-lich{margin:0;font-size:19px;font-weight:700;letter-spacing:-.02em;white-space:nowrap}
.day-day{flex:1}
.nhom-nut{display:inline-flex;border-radius:9px;overflow:hidden;
          background:var(--the);
          /* Cụm nút cao ĐÚNG BẰNG nút đứng cạnh nó.

             Nút bên trong đã 36px; nếu cụm thêm `border:1px` thì nó thành **38px** — đo được
             trên thanh công cụ Lịch hẹn: cụm "Ngày · 30 ngày" 38px trong khi "◀ Hôm nay ▶" cạnh
             nó 36px. Hai nhúm lệch 2px trên cùng một hàng là thứ mắt bắt được ngay.

             `outline` thay `border`: `outline` KHÔNG chiếm chỗ trong luồng, nên đường bao vẫn
             vẽ mà chiều cao đóng góp bằng 0. `outline-offset:-1px` để nó nằm đúng trên mép khối
             (mặc định outline vẽ ra ngoài nên trông như một khung rời). */
          outline:1px solid var(--vien);outline-offset:-1px}
.nhom-nut .nut{border:0;border-radius:0;background:var(--the);color:var(--chu2);font-weight:500}
.nhom-nut .nut+.nut{border-left:1px solid var(--vien)}
.nhom-nut .nut:hover{background:var(--chim);filter:none}
.nhom-nut .nut.chon{background:var(--nhan);color:#fff;font-weight:600}
.thanh-lich input[type=date]{max-width:150px}
.chu-giai-gap,.mach-nuoc-gap{margin:0}
.chu-giai-gap summary,.mach-nuoc-gap summary{color:var(--chu3);font-weight:500;font-size:12.5px;
                                             white-space:nowrap;cursor:pointer}
.chu-giai-gap[open] summary,.mach-nuoc-gap[open] summary{margin-bottom:6px}
/* Dòng dạy dùng của bảng lịch: gập lại thì nó là một dòng 18px thay vì một khối 40px, và
   người đọc lần thứ 500 không phải đọc lại. Bỏ lề trên của `.mach-nuoc` khi nằm trong. */
.mach-nuoc-gap{margin-top:10px}
.mach-nuoc-gap .mach-nuoc{margin-top:0}
/* hàng thông tin mỏng dưới thanh công cụ: [chú giải ▸] [🛌 off] — một dòng, không phí chỗ */
.hang-tin{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0 0 8px}

/* ---------- chế độ Ghế: bảng phân công ca trực ---------- */
/* thẻ CA TRỰC (kiểu Google Calendar): chân dung + tên + khoảng trực, kéo-thả được */
.the-ca{position:absolute;border-radius:8px;padding:4px 7px;overflow:hidden;z-index:2;
        font-size:12.5px;line-height:1.3;color:var(--chu);cursor:grab;
        box-shadow:0 1px 2px rgba(18,32,31,.14)}
.the-ca:active{cursor:grabbing}
.the-ca .dong-ten{display:flex;align-items:center;gap:5px;min-width:0}
.the-ca .dong-ten b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.the-ca small{display:block;opacity:.75;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
              margin-top:1px}
.the-ca .avatar-pt{width:22px;height:22px}
.keo-ca{position:absolute;left:0;right:0;bottom:0;height:8px;cursor:ns-resize;
        border-radius:0 0 8px 8px}
.keo-ca:hover{background:rgba(15,139,141,.25)}
/* bảng phân công có DIỆN MẠO RIÊNG — viền + đầu cột ám màu thương hiệu, nhìn phát biết
   ngay không phải bảng lịch hẹn khách */
.pc-bang{border-color:var(--nhan)}
.pc-bang .lich-dau-cot{background:var(--nhan-nhat)}
/* NỀN SẠCH: bỏ gạch chéo và lưới 15′ của lịch hẹn — giờ không người trực là XÁM PHẲNG,
   có người trực là trắng, chỉ kẻ một vạch mảnh mỗi giờ tròn. Mắt chỉ còn thấy thẻ ca. */
.pc-bang .lich-than.ngoai-ca{background:var(--chim)}
/* Đổi theo `.lich-hang` (vạch chuyển từ cuối hàng sang đầu hàng). Không đổi thì bảng Phân ca
   nhận cả vạch mới ở trên lẫn vạch cũ ở dưới — mỗi mốc giờ hai nét. */
.pc-bang .lich-hang{border-top:0}
.pc-bang .lich-hang.gio-tron{border-top:1px solid var(--vien)}
.pc-bang .lich-gio{background:var(--the)}
.tin-nho{font-size:12.5px;color:var(--chu3);margin-top:6px;line-height:1.55}
.tin-nho b{color:var(--chu2)}
.pc-the{cursor:pointer;touch-action:none}
.pc-than.dang-tha{background:var(--nhan-nhat);outline:2px dashed var(--nhan);outline-offset:-2px}
.pc-goc{opacity:.35}
.pc-keo{position:fixed!important;z-index:120;pointer-events:none;margin:0;
        box-shadow:0 14px 34px -8px rgba(0,0,0,.5)}
.pc-nhan-gio{position:fixed;z-index:121;pointer-events:none;background:var(--chu);color:var(--nen);
             font-family:"IBM Plex Mono",monospace;font-size:12.5px;font-weight:600;
             padding:3px 9px;border-radius:7px;box-shadow:var(--bong);white-space:nowrap}
.lich.gon .the-ca{font-size:10px;padding:2px 4px;border-radius:5px}
.lich.gon .the-ca .dong-ten b{font-size:10px}
.lich.gon .the-ca small{font-size:8.5px}
.lich.gon .the-ca .avatar-pt{width:14px;height:14px}
/* chấm tình trạng THỰC của ghế ngay lúc này */
.cham-song{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--chu3);
           margin-right:5px;flex:none;vertical-align:1px}
.cham-song.co{background:var(--tot);box-shadow:0 0 0 3px var(--tot-nhat);animation:nhip 1.5s infinite}
@keyframes nhip{50%{box-shadow:0 0 0 5px transparent}}
@media (prefers-reduced-motion:reduce){.cham-song.co{animation:none}}
.cs-thap{color:var(--canh)}
.lich-dau-cot small .avatar-pt{width:15px;height:15px;vertical-align:-4px;margin:0 1px 0 0}
/* cột KHU VỰC (Vô trùng, Kho, X-quang…) — nền ám nhẹ, không nhận lịch hẹn */
.lich-cot.khu{background:var(--chim)}
.lich-cot.khu .lich-dau-cot .chip.hang-ghe{background:var(--vien);color:var(--chu2)}
.lich-cot.khu .lich-than{cursor:default}

/* cột NHÂN LỰC THEO BỘ PHẬN (màn Khu vực Điều trị) */
/* CỘT EKIP tự cuộn riêng, không kéo dài cả trang.

   Đo 16/09/2026: cột nhân lực cao **2317px** trong khi lưới phân công bên cạnh đã bị chặn cao
   và tự cuộn (`.lich`). Hai vùng cuộn giành nhau trên cùng một trang — cuộn xuống đọc hết ekip
   là lưới đã trôi khỏi màn hình, mà lưới mới là thứ cần đối chiếu. Nay cột ấy dính và tự cuộn
   trong đúng phần màn hình còn lại, cùng độ cao với lưới.

   `calc(100vh - 215px)` = trừ phần thanh công cụ phía trên (đo tại chỗ, không đoán). */
.cot-ekip{width:268px;max-height:calc(100vh - 215px);overflow-y:auto;position:sticky;top:60px;
          padding-right:4px}
/* Dưới 1000px lưới xếp dọc, nên cột ekip không còn gì để dính vào — trả nó về luồng thường. */
@media (max-width:1000px){
  .cot-ekip{width:auto;max-height:none;overflow:visible;position:static;padding-right:0}
}
.dau-ekip{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.dau-ekip b{font-size:14px}
.dau-ekip .chip{margin-left:auto}
.nhom-khoi{margin-bottom:14px}
.dau-khoi{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
          color:var(--chu3);padding:0 0 4px;border-bottom:1px solid var(--vien);margin-bottom:8px}
.nhom-bp{margin:0 0 10px}
.dau-bp{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
        color:var(--chu2);margin:0 0 5px}
.dau-bp .dem{margin-left:auto;font-size:11px;font-weight:500;color:var(--chu3);
             background:var(--chim);border-radius:9px;padding:0 6px}
.the-ekip{border:1px solid var(--vien);border-radius:9px;background:var(--the);
          padding:8px 10px;margin-bottom:8px;font-size:13px}
.the-ekip.canh{border-color:var(--canh)}
.the-ekip.loi{border-color:var(--loi);border-left-width:3px}
.the-ekip .dong-ten{display:flex;align-items:center;gap:6px}
.the-ekip .dong-ten b{font-size:13px;line-height:1.3}
.the-ekip .dong-ca{font-size:12px;color:var(--chu2);margin-top:3px}
.the-ekip .dong-ca .mono{font-size:11.5px;color:var(--chu3)}
.the-ekip .chip.loi,.the-ekip .chip.canh{display:block;margin-top:5px;white-space:normal;line-height:1.4}
.the-ekip .nut.nho{width:100%;margin-top:6px}

/* ghi chú bác sĩ OFF của ngày */
.off-bs{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
        font-size:12.5px;color:var(--chu3)}
.off-bs b{color:var(--chu2);font-weight:600;flex:none}
.off-bs .chip{font-weight:500}
.lich.gon+.off-gon,.off-gon{font-size:10.5px;margin:4px 2px 0;color:var(--chu3);max-width:100%}

/* ---------- chỉ thị màu: lịch cần chú ý đặc biệt ----------
   Doanh thu cao hoặc rủi ro vận hành (implant, mài/gắn sứ, tư vấn hợp đồng lớn, khách mới
   lần đầu). Vạch dọc mép PHẢI của khối — mép trái đã là màu trạng thái, hai tín hiệu không
   giẫm nhau. */
.lich-khoi .vach-qt{position:absolute;right:0;top:0;bottom:0;width:4px;
                    border-radius:0 5px 5px 0;pointer-events:none}
.cham-qt{display:inline-block;width:8px;height:8px;border-radius:50%;flex:none;
         margin-right:4px;vertical-align:1px}

/* ---------- lịch hẹn: ghế × giờ ----------
   max-height theo màn hình để cuộn dọc xảy ra BÊN TRONG bảng — nhờ vậy hàng tiêu đề cột
   (team phụ tá, tên bác sĩ — position:sticky top) mới dính lại khi kéo xuống. */
/* `align-items:flex-start` CHỨ KHÔNG PHẢI stretch mặc định.

   `.lich` là hộp cuộn: khung nhìn cao 358px còn nội dung cao 774px. Với `stretch`, mỗi cột bị
   kéo cho bằng chiều cao của KHUNG (358), không phải của NỘI DUNG (774) — nên nền xám của cột
   giờ và viền phải của cột Team phụ tá vẽ hết ở mốc 358 rồi ĐỨT, đúng chỗ giữa lưới. Cuộn xuống
   thì nửa dưới cột giờ trắng trơn và cột phụ tá mất vạch ngăn: hai cột làm hệ quy chiếu lại là
   hai cột trông như bị cắt cụt.

   `flex-start` cho mỗi cột tự cao bằng nội dung của nó (46px đầu cột + 56 hàng), nên nền và
   viền chạy suốt từ trên xuống dưới. Các cột đều dựng cùng số hàng nên chúng vẫn bằng nhau. */
.lich{display:flex;gap:0;align-items:flex-start;background:var(--the);
      border:1px solid var(--vien);border-radius:13px;
      overflow:auto;box-shadow:var(--bong);max-height:calc(100vh - 175px)}
/* Bề ngang cột giờ để trong MỘT biến, vì cột phụ tá ghim vào đúng mép phải của nó. Trước đây
   hai chỗ ghi hai con số rời (`width:56px` ở đây, `left:56px` ở `.cot-phu-ta`) — và chế độ 30
   ngày thu cột giờ còn 38px mà quên sửa chỗ thứ hai, để lại một KHE TRẮNG 18px giữa hai cột
   dính, chạy suốt chiều cao bảng. Một biến thì không thể lệch nữa. */
.lich{--rong-gio:56px;--cao-dau:60px}
.lich-gio{flex:none;width:var(--rong-gio);border-right:1px solid var(--vien);background:var(--chim);
          position:sticky;left:0;z-index:4}
.lich-cot{flex:1;min-width:182px;border-right:1px solid var(--vien)}
/* `flex-basis` chứ không chỉ `min-width`: `.lich-cot` khai `flex:1 0 150px` nên cơ sở 150px
   mới là thứ quyết định bề ngang — đặt mỗi `min-width` là viết một luật chết, cột 6+ bác sĩ
   chưa bao giờ hẹp lại như thiết kế hứa. */
/* +21% cùng nhịp với cột thường (150→182): sáu bác sĩ trở lên vẫn phải đọc được tên. */
.lich-cot.hep{flex-basis:126px;min-width:126px}
.lich-cot:last-child{border-right:0}
.lich-dau-cot{position:sticky;top:0;z-index:3;height:var(--cao-dau);background:var(--chim);border-bottom:1px solid var(--vien);
              padding:4px 9px;font-weight:600;font-size:13px;display:flex;flex-direction:column;justify-content:center;gap:0}
/* Hàng tên: avatar sát mép trái (lề trái của đầu cột đã lo khoảng cách), rồi nhãn vai NHỎ, rồi
   tên ĐẬM — cắt thì cắt phần đuôi tên chứ không cắt mất chỗ của avatar. */
.lich-dau-cot .ten{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                   display:flex;align-items:center;gap:3px;min-width:0}
.lich-dau-cot .ten .avatar-pt{margin:0 2px 0 0;flex:none}
.lich-dau-cot .vai-ngan{font-style:normal;font-size:10px;font-weight:600;color:var(--chu3);flex:none}
.lich-dau-cot .ten b{overflow:hidden;text-overflow:ellipsis;font-weight:600}
/* `overflow:hidden` là BẮT BUỘC đi kèm `nowrap`: chuỗi ca "08:00–12:00 · 13:30–17:30" đã dài
   hơn lòng cột 150px, và ở cột hẹp 104px thì nó tràn hẳn sang đầu cột bên cạnh (chữ vẽ đè, nền
   `--chim` của ô kế không cắt được). */
.lich-dau-cot small{color:var(--chu3);font-weight:400;font-size:10.5px;white-space:nowrap;
                    overflow:hidden;text-overflow:ellipsis;
                    font-family:"IBM Plex Mono",monospace}
.lich-dau-cot small.canh{color:var(--canh)}
.lich-than{position:relative;cursor:copy}
/* `outline` chứ không chỉ `background`: nền của `.lich-than` bị chính con của nó — `.trong-ca`
   (nền trắng đục phủ kín khoảng trong ca) — vẽ đè, nên vệt tím báo "thả vào đây" chỉ hiện ở
   vùng gạch chéo NGOÀI ca, còn đúng chỗ người ta thả thì trắng trơn. `outline` không bị con vẽ
   đè và không chiếm chỗ. Cùng lối bảng Phân công ghế đã dùng (`.pc-than.dang-tha`). */
.lich-than.dang-tha{background:var(--nhan-nhat);outline:2px dashed var(--nhan);outline-offset:-2px}
/* ---------- VỆT CHỌN KHOẢNG GIỜ (nhấn giữ và kéo) ----------
   Vệt phải ĐỌC ĐƯỢC NGAY trong lúc tay còn đang kéo — người ta kéo tới khi con số đúng ý thì
   thả, chứ không kéo bừa rồi vào biểu mẫu sửa lại. Nên nó mang sẵn "09:00–10:30 · 90′" chứ
   không chỉ là một mảng màu. `z-index:5` để nằm trên thẻ hẹn (`.lich-khoi` z mặc định) — kéo
   ngang qua một lịch đã có thì vẫn thấy vệt, và thấy luôn là mình đang định chồng lên ai.
   `pointer-events:none`: vệt nằm dưới ngón tay, bắt chuột thì `pointermove` đứt ngay. */
.vet-chon{position:absolute;left:2px;right:2px;z-index:5;pointer-events:none;
          border-radius:6px;background:var(--nhan-nhat);border:2px dashed var(--nhan);
          display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;
          overflow:hidden;color:var(--nhan);font-size:11px;line-height:1.2;text-align:center;
          font-family:"IBM Plex Mono",monospace}
.vet-chon b{font-size:13px}
/* Đang vẽ thì đừng bôi đen chữ trên lưới, và đừng để trình duyệt tự cuộn theo ngón tay. */
.lich-than.dang-chon-gio{user-select:none;touch-action:none;cursor:ns-resize}
/* ---------- VẠCH GIỜ VẼ Ở ĐẦU HÀNG, KHÔNG PHẢI CUỐI HÀNG ----------

   Mỗi `.lich-hang` là một bước 15 phút, và bản trước vẽ đường kẻ bằng `border-bottom` — tức là
   ở CUỐI hàng. Hệ quả: hàng mang nhãn "08:00" kẻ vạch đậm của nó ở mốc 08:15.

   Đo trên bản chạy thật: hàng nhãn 08:00 chạy 389,9→402,9 và vạch đậm nằm ở 402,9; thẻ hẹn lúc
   08:15 có `top` tính ra đúng 402,9 — nằm ĐÈ lên cái vạch mang tên 8 giờ. Mắt neo vào vạch đậm,
   nên mọi thẻ trông như lệch xuống một ô so với giờ của nó. Chủ dự án mô tả đúng hiện tượng:
   "lịch lúc 8:00 thấp hơn một khoảng".

   Vạch phải nằm ở ĐẦU hàng thì nó mới trùng mốc thời gian của chính hàng ấy — và nhãn giờ khi
   đó nằm ngay dưới vạch của nó, đúng quy ước lịch mà ai cũng quen. Hàng đầu tiên bỏ vạch, vì
   viền dưới của hàng tiêu đề đã là vạch mở đầu rồi; hai vạch chồng nhau thành một nét dày. */
.lich-hang{height:var(--cao-buoc,22px);border-top:1px dashed var(--vien);font-size:10.5px;color:var(--chu3);
           padding-right:6px;text-align:right;font-family:"IBM Plex Mono",monospace;box-sizing:border-box}
.lich-hang.gio-tron{border-top-style:solid}
.lich-hang:first-child{border-top:0}
.lich-gio .lich-hang{line-height:1;padding-top:1px}
.lich-khoi{position:absolute;border-radius:6px;padding:2px 6px;overflow:hidden;
           cursor:pointer;font-size:12px;line-height:1.3;box-shadow:0 1px 2px rgba(18,32,31,.12)}
.lich-khoi:hover{filter:brightness(.97);box-shadow:0 2px 8px -2px rgba(18,32,31,.3)}
.lich-khoi.mo{opacity:.55;text-decoration:line-through}
.lich-khoi.chia{box-shadow:0 0 0 1px var(--loi-nhat) inset}
/* Nút ✓ hiện khi rê chuột — nhưng bàn phím cũng phải thấy nó. Không có dòng này thì Tab dừng
   lại ở một ô vuông 19px TRỐNG RỖNG (`opacity:0`), điểm dừng Tab duy nhất của cả lưới. */
.khoi-den:focus-visible{opacity:1}
/* Màn cảm ứng không có "rê chuột", nên nút ✓ — việc lặp nhiều nhất trong ngày của lễ tân —
   trước nay KHÔNG BAO GIỜ hiện trên điện thoại/tablet. Chỉ chừa chỗ cho khối THỰC SỰ có nút. */
@media (pointer:coarse){
  .lich-khoi:has(.khoi-den){padding-right:26px}
  .khoi-den{opacity:1}
}
/* thẻ đủ cao thì nội dung XUỐNG HÀNG trong thẻ; thẻ lùn (.lun, dưới ~30px) mới cắt đuôi */
.lich-dong1{white-space:normal;overflow:hidden;line-height:1.3;overflow-wrap:break-word}
.lich-dong2{font-size:11px;opacity:.8;white-space:normal;overflow:hidden;overflow-wrap:break-word}
.lich-khoi.lun .lich-dong1,.lich-khoi.lun .lich-dong2{
  white-space:nowrap;text-overflow:ellipsis}
.lich-khoi.lun .avatar-pt{width:14px;height:14px;vertical-align:-3px}
.lich-bt{margin-left:3px;font-size:11px}

/* ô gợi ý khách khi gõ SĐT */
.goi-y{display:flex;flex-direction:column;margin-top:4px}
.goi-y a{display:flex;flex-direction:column;padding:7px 10px;border:1px solid var(--vien);border-bottom:0;
         cursor:pointer;font-size:13.5px;background:var(--the)}
.goi-y a:first-child{border-radius:8px 8px 0 0}
.goi-y a:last-child{border-bottom:1px solid var(--vien);border-radius:0 0 8px 8px}
.goi-y a:hover{background:var(--nhan-nhat)}
.goi-y a small{color:var(--chu3);font-size:11.5px}
.goi-y a.moi{color:var(--nhan);font-weight:600}
.da-chon{display:flex;align-items:center;gap:8px;margin-top:6px;padding:8px 11px;
         background:var(--nhan-nhat);border-radius:8px;font-size:13.5px}

/* ---------- hàng chờ: bảng 3 cột ---------- */
.bang-cho{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:start}
@media (max-width:860px){.bang-cho{grid-template-columns:1fr}}
.cot-cho{background:var(--chim);border:1px solid var(--vien);border-radius:13px;padding:10px;min-height:150px}
.cot-cho.dang-tha{background:var(--nhan-nhat);border-color:var(--nhan)}
.cot-dau{display:flex;align-items:center;gap:8px;font-size:11.5px;text-transform:uppercase;
         letter-spacing:.07em;color:var(--chu3);font-weight:600;padding:2px 4px 10px}
.cot-dau .dem{margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:12px}
.cot-trong{padding:26px 0;text-align:center;color:var(--chu3);font-size:13px}
.the-cho{background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:10px 11px;
         margin-bottom:9px;cursor:grab;box-shadow:0 1px 2px rgba(18,32,31,.05)}
.the-cho:active{cursor:grabbing}
.the-cho.lau{border-color:var(--canh)}
.the-cho.rat-lau{border-color:var(--loi)}
.the-dau{display:flex;align-items:center;gap:7px;font-size:14px}
.the-dau .stt{flex:none;min-width:24px;height:24px;padding:0 5px;border-radius:6px;background:var(--chim);
              color:var(--chu2);display:grid;place-items:center;font-family:"IBM Plex Mono",monospace;
              font-size:12px;font-weight:600}
.the-phu{font-size:12.5px;color:var(--chu3);margin-top:3px}
.the-chan{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.the-chan .dong-ho{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--chu2)}
.the-nhac{margin-top:7px;font-size:12px;color:var(--canh)}
.the-cho.rat-lau .the-nhac{color:var(--loi)}
.the-nut{margin-top:9px;padding-top:8px;border-top:1px solid var(--vien)}

/* ---------- thẻ khách hàng ---------- */
.luoi-khach{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:10px}
.the-khach{background:var(--the);border:1px solid var(--vien);border-radius:11px;padding:12px 14px;
           box-shadow:0 1px 2px rgba(18,32,31,.05)}
.the-khach.bam{cursor:pointer}
.the-khach.bam:hover{border-color:var(--nhan);background:var(--nhan-nhat)}
.the-khach .the-chan{margin-top:9px;padding-top:8px;border-top:1px solid var(--vien);gap:8px}

/* ---------- ca làm việc trên lịch ----------
   Ngoài ca thì gạch chéo mờ: chỗ TRỐNG TRONG CA mới là chỗ đặt được, và đó chính là thứ
   lễ tân đang dò bằng mắt. Vẽ ngược lại (tô chỗ bận) thì mắt phải làm phép trừ. */
.lich-than.ngoai-ca{background:repeating-linear-gradient(45deg,
   transparent, transparent 5px, var(--chim) 5px, var(--chim) 10px)}
.trong-ca{position:absolute;left:0;right:0;background:var(--the);z-index:0}
/* z-index:2 chứ không phải 5: `.lich-than` là `position:relative` z-index auto nên KHÔNG tạo
   ngăn xếp riêng — vạch đỏ ở nấc 5 leo thẳng lên ngăn xếp của `.lich` và kẻ ngang qua cả hàng
   tiêu đề cột lẫn hai cột đã ghim. Phải xuống dưới nấc 3 của đầu cột; 2 là nấc cao nhất còn
   lại, vẫn trên nền ca (0) và hàng giờ (1), ngang khối lịch (2) nhưng đứng sau trong DOM nên
   vẫn vẽ trên chúng — đúng ý. */
.vach-bay-gio{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--loi);z-index:2;pointer-events:none}
.vach-bay-gio::before{content:'';position:absolute;left:-4px;top:-4px;width:7px;height:7px;
                      border-radius:50%;background:var(--loi)}
.lich-khoi{z-index:2}
.lich-hang{position:relative;z-index:1}
.khoi-den{position:absolute;right:3px;top:2px;width:19px;height:19px;border-radius:5px;border:0;
          background:var(--nhan);color:#fff;font-size:12px;line-height:1;cursor:pointer;opacity:0;
          transition:.12s;padding:0}
.lich-khoi:hover .khoi-den{opacity:1}
.khoi-den:hover{filter:brightness(1.12)}
.loc-cot{margin:0 0 10px}
.chip.bam{cursor:pointer;border:1px solid transparent}
.chip.bam:not(.nhan){opacity:.45;text-decoration:line-through}
.chip.bam small{font-family:"IBM Plex Mono",monospace;opacity:.7}
.mach-nuoc{margin:12px 0 0;color:var(--chu3);font-size:12.5px;max-width:88ch;line-height:1.6}
/* kết quả tìm lịch KHÔNG nhốt trong ô cuộn bé — cả hộp thoại (max 88vh) cuộn tự do */
.khung-trong{margin-top:6px}
.hop.rong{max-width:920px}
/* hộp chọn NHIỀU (dịch vụ · bác sĩ · phụ tá) trong Tìm khung trống */
.hop-chon{max-height:132px;overflow-y:auto;border:1px solid var(--vien);border-radius:9px;
          padding:6px 10px;display:flex;flex-direction:column;gap:1px;background:var(--the)}
.hop-chon label{display:flex;align-items:center;gap:8px;margin:0;font-size:13px;color:var(--chu);
                cursor:pointer;font-weight:400}
.hop-chon input[type=checkbox]{accent-color:var(--nhan)}
/* khoảng trống NGẮN hơn yêu cầu (≤15′) — hiện nhưng mang màu cảnh báo */
.nut.thieu{background:var(--canh-nhat);color:var(--canh);border:1px solid var(--canh)}

/* ---------- lịch hẹn: bố cục ba vùng của lễ tân ----------
   [Chưa xác nhận — neo cố định] [Team phụ tá — dính khi cuộn] [các cột bác sĩ — cuộn ngang]
   Cột bác sĩ bị GIỚI HẠN bề ngang để màn desktop thấy ~5 cột; nhiều bác sĩ hơn thì kéo sang,
   nhưng cột giờ và cột team phụ tá dính lại bên trái — hai thứ đó là hệ quy chiếu. */
.lich-bo{display:flex;gap:12px;align-items:flex-start}
/* `max-width:100%` KHÔNG THỪA: ở màn hẹp `.lich-bo` đổi sang `flex-direction:column`, và trong
   hướng cột thì `flex:1` khống chế CHIỀU CAO chứ không khống chế bề ngang. `.lich-cuon` là
   `display:block` nên nó nở theo con — lưới 2000px kéo nó rộng 2000px, rồi cả trang tràn theo:
   đo ở 390px được `body.scrollWidth` = 2016. Lúc ấy `overflow-x:auto` của `.lich` vô hiệu, vì
   khung bao quanh cũng rộng bằng nội dung nên chẳng có gì để cuộn — cuộn ngang bị ĐẨY LÊN cấp
   trang, kéo theo cả tiêu đề và thanh công cụ. */
.lich-cuon{flex:1;min-width:0;width:100%;max-width:100%}
/* +10% rồi +10% nữa (150 → 165 → 182): tên bác sĩ nhiều chữ mới đủ chỗ cạnh ảnh. */
.lich-cot{flex:1 0 182px;max-width:265px}
/* ---------- CỘT TEAM PHỤ TÁ — KHÔNG GHIM NỮA (v1.80) ----------

   Từ v1.62 cột này được ghim bên trái cùng cột giờ, với lý lẽ hợp lý lúc ấy: cả team dồn vào một
   cột nên nó là hệ quy chiếu mà mắt phải liếc lại liên tục, trong khi 9 cột bác sĩ thì kéo ngang
   mới hết.

   Lý lẽ ấy ĐỔ khi cột nới được ×2 ×3. Một cột ghim rộng 640–960px không còn là hệ quy chiếu —
   nó là một tấm chắn: kéo sang phải bao nhiêu nó vẫn đứng đó phủ kín chỗ của bác sĩ, tức càng
   mở rộng để xem cho rõ thì càng không xem được gì. Chủ dự án chốt 18/09: bỏ ghim.

   CỘT GIỜ THÌ VẪN GHIM — nó rộng 38–56px, không bao giờ thành tấm chắn, và mất nó là mất trục
   thời gian khi kéo ngang. Đó là khác biệt giữa hai cột, không phải sự thiếu nhất quán. */
.cot-phu-ta{flex:none;width:320px;max-width:320px;
            background:var(--the);border-right:2px solid var(--vien)}
/* TRẠNG THÁI THU GỌN — khai ở CẤP CAO NHẤT, không nằm trong media query nào.
   `flex:none` + `min-width` phải nhắc lại cả ba: `.lich-cot{flex:1 0 182px;min-width:182px}`
   khai sau nên cơ sở của nó nuốt `width:42px`, và `min-width` kéo cột thu gọn về lại 182px —
   đúng cái "thu mà không thấy thu được gì". Lần thứ tư trong đợt này `flex-basis` nuốt `width`. */

/* Ở màn rất hẹp: CỘT GIỜ VẪN GHIM — không có nó thì kéo sang phải là mất luôn trục thời gian.
   Chỉ cột phụ tá thôi ghim, vì 320px ghim trên một màn 375px là phủ kín. `z-index:auto` là phần
   bắt buộc đi kèm: thôi ghim mà vẫn giữ nấc 4 thì nó vẫn vẽ đè lên cột giờ đang ghim. */
/* Màn rất hẹp: cột team thu hẹp cho vừa một màn điện thoại. Không còn `position:static` ở đây —
   cột đã thôi ghim ở MỌI cỡ màn (xem luật gốc phía trên). */
@media (max-width:430px){
  .cot-phu-ta{width:230px;max-width:230px}
}
.avatar-pt{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
           margin:0 4px 0 0;vertical-align:-6px;flex:none;overflow:hidden}
.avatar-pt svg{width:100%;height:100%;display:block}
/* +30%: gương mặt là thứ nhận ra cột nhanh hơn chữ, nên nó đáng chỗ. */
.lich-dau-cot .avatar-pt{width:26px;height:26px;vertical-align:-7px}
/* icon dịch vụ chính trên thẻ phụ tá */
.ic-dv{font-size:12px;margin-right:3px;vertical-align:-1px}
.lich-dau-cot .avatar-pt{margin-left:4px;margin-right:0}
.chip.hang-ghe{margin-left:6px;font-size:10px;padding:0 5px;vertical-align:1px}

/* vệt CĐHA trước giờ hẹn — sọc nghiêng, không phải khối lịch, không kéo-thả được */
.lich-cdha{position:absolute;border-radius:6px 6px 0 0;z-index:2;pointer-events:auto;
           background:repeating-linear-gradient(-45deg,
             var(--nhan-nhat), var(--nhan-nhat) 4px, transparent 4px, transparent 8px);
           border:1px dashed var(--nhan);border-bottom:0;font-size:10px;text-align:center;
           color:var(--nhan);overflow:hidden;line-height:1.4}

/* huy hiệu bảng kiểm vật tư trên khối lịch */
.kiem-bt{margin-left:4px;font-size:10px;font-family:"IBM Plex Mono",monospace;
         background:rgba(255,255,255,.55);border-radius:4px;padding:0 3px}
.kiem-bt.du{color:var(--tot);font-weight:700}

/* bảng kiểm vật tư trong hộp chi tiết */
.kiem-vat-tu{margin-top:14px;border:1px solid var(--vien);border-radius:10px;padding:10px 12px;
             background:var(--chim)}
.kiem-vat-tu .dau-kiem{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.muc-kiem{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:13.5px;cursor:pointer}
.muc-kiem input{accent-color:var(--tot)}
.muc-kiem.het-kho span:first-of-type{color:var(--loi)}

/* ---------- cột "Chưa xác nhận" — neo cố định, không đổi theo ngày ---------- */
.cot-xn{flex:none;width:210px;background:var(--the);border:1px solid var(--vien);
        border-radius:13px;padding:10px;box-shadow:var(--bong);
        position:sticky;top:12px;max-height:80vh;overflow-y:auto}
.dau-xn{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 2px 10px}
.dau-xn small{width:100%;color:var(--chu3);font-size:11px}
.the-xn{border:1px solid var(--canh);border-left-width:3px;border-radius:9px;background:var(--canh-nhat);
        padding:8px 10px;margin-bottom:8px;font-size:13px}
.the-xn.bam{cursor:pointer}
/* Giữ `border-left-color` để vạch trạng thái 3px không bị nuốt. Không thêm bóng: `.cot-xn` có
   `overflow-y:auto` nên bóng bị hộp cuộn xén ở hai mép. */
.the-xn.bam:hover{border-color:var(--nhan);border-left-color:var(--canh)}
.the-xn .dong1{display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.the-xn .dong1 small{color:var(--chu3);font-family:"IBM Plex Mono",monospace;font-size:10.5px;flex:none}
.the-xn .dong2{font-size:12.5px;margin-top:2px}
.the-xn .dong3{font-size:11.5px;color:var(--chu3);margin-top:2px}
/* `order:2` — không có nó thì ở màn hẹp cột "Chưa xác nhận" (đứng trước trong DOM) nhảy lên
   TRÊN bảng lịch, và người mở màn ra gặp một danh sách chờ trước khi thấy lịch của mình. */
@media (max-width:1000px){.lich-bo{flex-direction:column}
  .cot-xn{order:2;width:100%;position:static;max-height:none}}

/* ---------- chế độ 30 ngày ----------
   KẾ THỪA bảng của chế độ một ngày: mỗi ngày là MỘT bảng bác-sĩ × giờ y hệt, chỉ nén lại
   (cột hẹp hơn, hàng thấp hơn — biến thể .lich.gon) — chứ không dồn 30 ngày vào một màn hình.
   Cuộn ngang đi qua từng ngày, mỗi ngày rộng cỡ một khung nhìn; hôm nay viền nổi, nằm giữa. */
.cuon-30{display:flex;gap:16px;overflow-x:auto;padding:4px 2px 14px;align-items:flex-start}
/* content-visibility: ngày ngoài màn hình không tốn công vẽ — 30 bảng to mà vẽ hết là giật;
   contain-intrinsic-size giữ chỗ gần đúng cho thanh cuộn. */
/* `auto` trong `contain-intrinsic-size`: không có nó, một ngày đã vẽ rồi mà trôi ra khỏi tầm
   nhìn sẽ bị bỏ vẽ và PHÌNH VỀ 1100×900 dự phòng — dải 30 ngày giật ngang dưới tay người đang
   cuộn. Với `auto`, trình duyệt nhớ kích thước thật lần cuối. Viết đủ bốn giá trị
   (`auto W auto H`): dạng hai giá trị lẫn `auto` không hợp lệ ở một số bộ phân tích, mà cú pháp
   hỏng là cả khai báo bị bỏ → khối bỏ vẽ co về 0 và dải vỡ hẳn. */
.doan-30{flex:none;max-width:100%;content-visibility:auto;
         contain-intrinsic-size:auto 1100px auto 900px}
.dau-doan{display:flex;align-items:baseline;gap:8px;margin:0 2px 6px;font-size:13.5px;white-space:nowrap}
.dau-doan b{font-size:14.5px}
/* Con trỏ bàn tay chỉ dành cho thứ BẤM ĐƯỢC. `.dau-doan .chip` gán cho MỌI chip nên nhãn
   "hôm nay" — một cái nhãn thuần tuý — cũng mời người ta bấm rồi không làm gì. Chip "⤢ phóng
   to" vẫn có con trỏ nhờ `.chip.bam`. */
.dau-doan .chip.bam{cursor:pointer}
.doan-30.homnay .dau-doan b{color:var(--nhan)}
.doan-30.homnay .lich{border-color:var(--nhan);box-shadow:0 0 0 2px var(--nhan-nhat)}
.doan-30.chu-nhat{opacity:.72}
/* ô "Đang tải" rộng cỡ một bảng thật — ngày tải xong không làm cả dải nhảy bề ngang */
.doan-30 .dang{padding:24px 30px;font-size:12.5px;width:860px}
.doan-nghi{width:120px;padding:30px 12px;text-align:center;color:var(--chu3);font-size:12px;
           background:var(--chim);border:1px dashed var(--vien);border-radius:13px}

/* biến thể NÉN của bảng ngày — dùng trong chế độ 30 ngày.
   Cao theo màn hình (nội dung thẻ hiện được nhiều hơn), cuộn trong bảng để tiêu đề cột dính. */
.lich.gon{overflow:auto;max-height:calc(100vh - 215px)}
.lich.gon{--rong-gio:38px}
.lich.gon .lich-cot{flex:1 0 92px;max-width:140px;min-width:92px}
/* Gấp đôi (chủ dự án chốt 18/09): ở 30 ngày cột này bị nén còn 200px trong khi nó gánh CẢ
   team — 14 người, avatar, giờ, tên dịch vụ — nên chữ vỡ vụn thành từng mẩu. 400px vẫn nhỏ hơn
   một khung nhìn ngang của một ngày, không phá nhịp cuộn 30 ngày. */
/* `flex:none` phải NHẮC LẠI ở đây. `.lich.gon .lich-cot` (0,3,0) đặt `flex:1 0 92px`, thắng
   `.cot-phu-ta{flex:none}` (0,1,0) — mà trong flexbox thì `flex-basis` quyết định bề ngang chứ
   không phải `width`. Vì thế cột phụ tá ở 30 ngày đã bị bóp còn ĐÚNG 92px suốt từ đầu, dù luật
   ngay dưới ghi 200px: chữ vỡ vụn, avatar chồng nhau. Cùng họ với lỗi `.lich-cot.hep`. */
.lich.gon .cot-phu-ta{flex:none;width:400px;max-width:400px}
.lich.gon{--cao-dau:44px}
.lich.gon .lich-dau-cot{font-size:11px;padding:2px 6px}
.lich.gon .lich-dau-cot small{font-size:9px}
.lich.gon .lich-hang{font-size:8.5px;padding-right:3px}
.lich.gon .lich-khoi{font-size:10px;padding:1px 4px;border-left-width:2px!important;border-radius:4px}
.lich.gon .lich-dong2{display:none}
.lich.gon .avatar-pt{width:15px;height:15px;vertical-align:-3px}
.lich.gon .ic-dv{font-size:10px;margin-right:2px}
.lich.gon .khoi-den{width:15px;height:15px;font-size:10px}
.lich.gon .chip.hang-ghe{display:none}

/* cửa sổ nổi "Chưa xác nhận" của chế độ 30 ngày */
.popup-xn{position:fixed;right:18px;bottom:14px;z-index:40;width:250px;
          display:flex;flex-direction:column-reverse}
.popup-xn .nut-xn{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;
        border:1px solid var(--canh);background:var(--canh-nhat);color:var(--canh);
        border-radius:10px;padding:8px 12px;font-weight:600;font-size:13px;cursor:pointer;
        box-shadow:var(--bong)}
.popup-xn .ruot-xn{display:none;margin-bottom:8px}
.popup-xn.mo .ruot-xn{display:block}
.popup-xn .cot-xn{width:100%;position:static;max-height:52vh}

/* ================= HỒ SƠ BỆNH ÁN ================= */

/* Cảnh báo đỏ CỐ ĐỊNH — bảng trắng gọi đúng tên như vậy. Nằm ngoài mọi tab, dính lại khi
   cuộn: thứ này chỉ có giá trị nếu nó ở đó vào đúng lúc bác sĩ đang làm việc khác. */
/* DẢI CẢNH BÁO ĐỎ — không dính, và đó là chủ ý.

   Bản trước đặt `position:sticky;top:0` cho dải này, mà dải ấy nằm NGAY ĐẦU hồ sơ nên dính hay
   không cũng nhìn thấy như nhau. Cái giá thì thật: thanh 9 TAB của hồ sơ nằm SAU nó và cũng cần
   chỗ dính, nên dải đỏ đã chiếm mất — cuộn xuống là mất đường chuyển tab, trong khi một hồ sơ
   bệnh án dài vài màn hình và người ta đổi tab liên tục. Nay chỗ dính nhường cho thanh tab. */
.canh-bao-do{display:flex;flex-wrap:wrap;align-items:baseline;
             gap:6px 14px;margin:0 0 14px;padding:10px 14px;border-radius:10px;
             background:var(--loi-nhat);border:1px solid var(--loi);border-left-width:4px}
.canh-bao-do>b{color:var(--loi);letter-spacing:.04em;font-size:12.5px;flex:none}
.canh-bao-do .cb-muc{font-size:13px;color:var(--chu2)}
.canh-bao-do .cb-muc b{color:var(--loi);font-weight:600}

/* THANH TAB CỦA HỒ SƠ BỆNH ÁN dính lại khi cuộn.

   Chín tab, mỗi tab là một màn làm việc thật, và hồ sơ dài vài màn hình — cuộn tới giữa tab
   "Kế hoạch điều trị" rồi muốn sang tab khác thì phải cuộn ngược lên đầu, mỗi lần. Nền phải
   đặc (`--nen`) chứ không trong suốt: nội dung chạy phía sau một thanh tab trong suốt là chữ
   chồng chữ. */
.tab-ba{display:flex;flex-wrap:wrap;gap:6px;margin:18px 0 0;
        padding:8px 0 12px;border-bottom:1px solid var(--vien);
        position:sticky;top:0;z-index:20;background:var(--nen)}
.tab-ba .nut .dem{margin-left:5px;padding:0 5px;border-radius:8px;font-size:11px;
                  background:var(--chim);color:var(--chu3)}
.tab-ba .nut.chon .dem{background:rgba(255,255,255,.25);color:inherit}

/* ---- PHIẾU KHÁM TƯ VẤN & CHẨN ĐOÁN: năm bước, đọc từ trên xuống ----
   Số thứ tự to và rõ vì đây là một CHUỖI LẬP LUẬN mà ba người cùng đọc (bác sĩ giải thích,
   khách quyết, lễ tân báo giá) — mất dấu đang ở bước nào là mất mạch câu chuyện. */
.phieu-tv{margin-top:16px}
.buoc-tv{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--vien)}
.buoc-tv:first-of-type{border-top:0;padding-top:0}
.buoc-dau{display:flex;gap:12px;align-items:flex-start;margin:0 0 12px}
.buoc-so{flex:none;width:26px;height:26px;border-radius:50%;background:var(--nhan);color:#fff;
         display:grid;place-items:center;font-size:13px;font-weight:700}
.buoc-dau h3{margin:2px 0 0;font-size:16px}
.buoc-dau p{margin:2px 0 0;font-size:13px;color:var(--chu3);max-width:78ch}
.buoc-than{padding-left:38px}
@media (max-width:700px){.buoc-than{padding-left:0}}

/* ---- Màn TƯ VẤN: các phương án đứng cạnh nhau, hướng về khách ----
   Bảng trắng, ke_hoach_dt › ux: "2–3 cột phương án, giá tổng lớn, số buổi, ưu/nhược, nút
   Chọn; ngôn ngữ đời thường." Giá to vì đó là câu khách hỏi trước mọi câu khác. */
.luoi-pa{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.cot-pa{border:1px solid var(--vien);border-radius:12px;background:var(--the);padding:16px 18px;
        display:flex;flex-direction:column;gap:8px}
.cot-pa.chon{border-color:var(--tot);border-width:2px;background:var(--tot-nhat)}
.pa-ma{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;
       letter-spacing:.06em;color:var(--chu3)}
.cot-pa h4{margin:0;font-size:16px;line-height:1.35}
.pa-tien{font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pa-so,.pa-vl{font-size:13px;color:var(--chu2)}
.pa-uu,.pa-nhuoc{font-size:13px;line-height:1.5}
.pa-uu b{color:var(--tot)} .pa-nhuoc b{color:var(--canh)}
.pa-ly-do{margin:0;font-size:12.5px;color:var(--chu3)}
.pa-dong{margin:4px 0 0;padding-left:18px;font-size:13px;color:var(--chu2);line-height:1.7}
.cot-pa .nut{margin-top:auto}

/* Lưới ô CHỈ ĐỌC của bệnh án — hai cột, ô dài thì chiếm cả hàng. */
.o-luoi{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px;padding:18px}
.o-luoi>.o.rong{grid-column:1/-1}
.o-luoi>.o>label{display:block;font-size:12px;color:var(--chu3);margin-bottom:2px}
.o-luoi>.o .gt{font-size:14px;color:var(--chu);white-space:pre-wrap}

/* ---- Bố cục BÊN GHẾ của phiếu điều trị ----
   Bảng trắng: "máy tính bảng ngang: trái = sơ đồ răng bấm chọn; giữa = danh sách thủ thuật".
   Sơ đồ dính lại khi cuộn vì danh sách thủ thuật dài ra còn cung hàm thì không. */
.ben-ghe{display:grid;grid-template-columns:minmax(420px,46%) 1fr;gap:22px;align-items:start}
.ben-ghe .bg-rang{position:sticky;top:0}
@media (max-width:1100px){.ben-ghe{grid-template-columns:1fr}.ben-ghe .bg-rang{position:static}}

/* Bản nén của sơ đồ khi nằm trong phiếu — nhỏ lại vừa nửa màn hình, vẫn bấm được từng mặt. */
.so-do-gon .rang{width:30px}
.so-do-gon .rang-so{font-size:10px}
.so-do-gon .chu-giai{font-size:11.5px;gap:4px 10px}

/* ---- khối "theo kế hoạch" trong phiếu điều trị ----
   Truy ngược về lời hứa đã chốt với khách: lần này thuộc kế hoạch nào, còn việc gì chưa làm. */
.theo-kh{padding:14px 18px;margin-bottom:16px;border-left:3px solid var(--nhan)}
.theo-kh .kh-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.theo-kh .kh-nhan{margin-top:8px;font-size:13px;color:var(--chu3)}
.theo-kh .kh-con .moc{padding:6px 0}
.theo-kh .kh-con .gio{width:44px}

/* ---- kế hoạch đã thống nhất, trên màn bên ghế ---- */
.kh-tien{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;margin:10px 0 4px;
  padding:9px 12px;border:1px solid var(--vien);border-radius:9px;background:var(--nen);font-size:13px}
.kh-than{margin-top:6px}
.kh-buoi{border:1px solid var(--vien);border-radius:9px;padding:8px 12px;margin-top:8px}
.kh-buoi.xong{opacity:.62}
.kh-buoi-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.kh-dong{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:5px 0;
  border-top:1px dashed var(--vien);font-size:13.5px}
.kh-dong:first-of-type{border-top:none}
.kh-dong.xong{color:var(--chu3)}
.nho-chip{font-size:10.5px;padding:1px 7px}

/* ---- thu ngân: dòng tiền trong hộp chi tiết / hộp thu ---- */
.ct-tien{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13.5px}
.ct-tien.dam{border-top:1px solid var(--vien);margin-top:4px;padding-top:8px;font-size:15px}
.ct-tien.dam b{color:var(--canh)}
.kh-cuoi-buoi{display:flex;gap:16px;flex-wrap:wrap;align-items:baseline;margin-top:8px;
  padding:9px 12px;border:1.5px solid var(--nhan);border-radius:9px;font-size:13.5px;
  background:color-mix(in srgb,var(--nhan) 6%,transparent)}
.kh-cuoi-buoi .cb-chot{font-size:14.5px}
.kh-cuoi-buoi .cb-chot b{color:var(--nhan)}

/* ---- bản in trong app ---- */
.lop-in{z-index:60}
.hop-in{width:min(920px,94vw);height:92vh;display:flex;flex-direction:column;padding:14px 16px}
.khung-in{flex:1;width:100%;border:1px solid var(--vien);border-radius:8px;background:#fff}

/* ---- TAB CON THEO NGÀY (phiếu khám, tờ khai tiền sử, phim) ----
   Mỗi tờ một ngày, tờ mới nhất mở sẵn. Ngày là tên tab vì đó là thứ người dùng nhớ về một lần
   khám — không ai nhớ "phiếu số 3". */
.tab-ngay{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 14px;
          padding:10px 12px;border-radius:10px;background:var(--chim)}
.tab-ngay .tn-nhan{font-size:12px;font-weight:600;color:var(--chu3);flex:none;
                   text-transform:uppercase;letter-spacing:.05em}
.tab-ngay .nut small{font-weight:400;opacity:.75;font-size:10.5px}

/* ---- thanh chọn PHẠM VI trên sơ đồ răng ---- */
.thanh-pv{margin:0 0 12px;padding:12px 14px;border:1px solid var(--vien);border-radius:10px;
          background:var(--the)}
.pv-dang-chon{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;
              padding-top:10px;border-top:1px dashed var(--vien)}
.pv-dang-chon .nut{margin-left:auto}
/* răng đang nằm trong vùng đã chọn — viền dày, nền nhấn */
.rang.vung .rang-o{outline:2px solid var(--nhan);outline-offset:1px;border-radius:3px}
.rang.vung .rang-so{background:var(--nhan);color:#fff;border-radius:4px;font-weight:700}

/* ---- thẻ CHẨN ĐOÁN và các cách xử lý ---- */
.the-chan-doan{border:1px solid var(--vien);border-radius:12px;background:var(--the);
               padding:14px 16px;margin:0 0 12px}
.cd-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cd-vung{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
         color:var(--nhan);background:var(--nhan-nhat);border-radius:6px;padding:2px 7px;flex:none}
.cd-hau-qua{margin:8px 0 0;font-size:13px;color:var(--chu2);line-height:1.5}
.cd-hau-qua b{color:var(--canh)}
.cd-nhan-cach{margin:12px 0 6px;font-size:12px;font-weight:600;color:var(--chu3);
              text-transform:uppercase;letter-spacing:.05em}
.luoi-cach{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.cach-xu-ly{border:1px solid var(--vien);border-radius:10px;padding:11px 13px;background:var(--nen)}

/* THỨ BẬC NỔI BẬT: BỆNH NHÂN CHỌN > BÁC SĨ KHUYẾN NGHỊ.

   Bản trước làm ngược: khuyến nghị của bác sĩ có nền xanh kín, còn lựa chọn của khách chỉ có
   một đường viền mảnh. Trên một ca đơn giản thì không sao; nhưng một phác đồ phức tạp có sáu
   bảy chẩn đoán, mỗi chẩn đoán hai ba cách xử lý — nhìn xuống là cả một lưới thẻ xanh của
   bác sĩ, còn thứ khách đã chốt thì lẫn vào đám ấy. Mà đúng cái đã chốt mới là thứ quyết định
   tiền, số buổi và lịch hẹn; khuyến nghị chỉ là gợi ý ban đầu.

   Nên: khách chọn = nền xanh lá đậm + viền dày + vệt bên trái (cùng hệ màu #2E9E44 với gạch
   chân "đã chốt" trên biểu đồ răng, vì hai chỗ nói cùng một sự kiện). Bác sĩ khuyến nghị chỉ
   còn viền mảnh và chip ★ — đủ để thấy, không đủ để át. */
.cach-xu-ly.khuyen{border-color:var(--tot)}
.cach-xu-ly.bn-chon{border:1.5px solid #2E9E44;border-left-width:5px;
  background:color-mix(in srgb,#2E9E44 10%,var(--the));
  box-shadow:0 1px 2px rgba(46,158,68,.14), 0 6px 18px -12px rgba(46,158,68,.5)}
/* Khuyến nghị của bác sĩ KHÔNG bị làm mờ khi khách đã chốt cách khác: nó vẫn là một phương
   án đang bày ra để so, và khách còn đổi ý được. Làm mờ nó là đẩy xuống hạng "đã loại" —
   trong khi việc cần làm chỉ là cho lựa chọn của khách nổi lên trên, không phải dìm cái kia
   xuống. Hai thẻ vẫn đọc rõ như nhau; chỉ một cái được tô đậm hơn. */
.chip.bn{background:color-mix(in srgb,#2E9E44 18%,transparent);color:#217A34;border-color:#2E9E44}
.cach-dau{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.cach-so{margin-top:4px;font-size:13px;color:var(--chu2)}
.cach-so b{font-size:16px}
.cach-dv{margin-top:3px;font-size:12.5px;color:var(--chu3)}

/* ---- hộp GỘP thành phương án ---- */
.gop-dong{padding:10px 0;border-bottom:1px solid var(--vien)}
.gop-dong:last-child{border-bottom:0}
.gop-dong.bo{opacity:.45}
.gop-vd{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.gop-dong .nut small{font-weight:400;opacity:.8;font-size:10.5px}
.ds-dv{margin:6px 0}

/* ---- bảng dòng thủ thuật trong hộp "cách xử lý" ---- */
.hop .bang table{font-size:13px}
.hop .bang th{white-space:nowrap;font-size:11.5px}
.hop .bang td{padding:5px 8px;vertical-align:middle}
.hop .bang input,.hop .bang select{padding:5px 7px;font-size:13px}
.hop .bang select{min-width:150px;max-width:230px}
.tong-hop{margin-top:12px;padding:14px 16px;border:1px solid var(--vien);border-radius:10px;
          background:var(--nen)}
.tong-hop .th-tien{display:flex;align-items:baseline;justify-content:space-between;
                   padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--vien)}
.tong-hop .th-tien label{font-size:13px;font-weight:600;color:var(--chu2)}
.tong-hop .th-tien b{font-size:22px;font-variant-numeric:tabular-nums}
.tong-hop .th-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
                   gap:10px 14px;margin-bottom:10px}
.tong-hop .th-luoi:last-child{grid-template-columns:1fr 1fr;margin-bottom:0}
.tong-hop .th-o label{display:block;font-size:12px;color:var(--chu3);margin-bottom:3px}
.tong-hop .th-o input,.tong-hop .th-o textarea{width:100%}

/* bảng dòng thu nhỏ, hiện ngay trên thẻ cách xử lý — khách thấy trả tiền cho những gì */
.bang-cach{width:100%;border-collapse:collapse;margin:6px 0 2px;font-size:12.5px}
.bang-cach td{padding:2px 0;color:var(--chu2);vertical-align:top}
.bang-cach td:first-child{width:auto;max-width:96px;color:var(--chu3);padding-right:8px}
.bang-cach td:nth-child(3){width:34px;text-align:right;color:var(--chu3)}
.bang-cach td:last-child{text-align:right;white-space:nowrap;padding-left:8px}

/* ---- danh mục vấn đề trong hộp chẩn đoán: CHỌN, không gõ ---- */
.ds-van-de{max-height:260px;overflow:auto;margin-top:8px;padding:2px 2px 6px}
.nhom-vd{margin-bottom:10px}
.nhom-vd-ten{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
             color:var(--chu3);margin:0 0 5px}
.ds-van-de .chip.bam{white-space:normal;text-align:left;line-height:1.35;max-width:100%}

/* ---- cách xử lý MẪU trong hộp ---- */
.khoi-mau{margin:0 0 14px;padding:11px 13px;border:1px dashed var(--nhan);border-radius:10px;
          background:var(--nhan-nhat)}
.khoi-mau .km-nhan{font-size:12.5px;color:var(--chu2);margin-bottom:7px}
.khoi-mau .nut small{font-weight:400;opacity:.75;font-size:10.5px}
/* Không có mẫu là chuyện thường, không phải lỗi — khối vẫn hiện, chỉ đổi sang tông trung tính
   để nó không đòi sự chú ý ngang một khối gợi ý thật. */
.khoi-mau.trong-mau{border-color:var(--vien);background:transparent}

/* ---- bảng CHI TIẾT từng phương án (bước 4, v1.23) ---- */
.pa-chi-tiet{margin:0 0 16px;padding:10px 12px;border:1px solid var(--vien);border-radius:10px}
.pa-chi-tiet.chon{border-color:#2E9E44;background:color-mix(in srgb,#2E9E44 5%,transparent)}
/* Phương án đã LỆCH khỏi bước 3 — viền cảnh báo, vì con số trên đó không còn đáng tin. */
.pa-chi-tiet.lech{border-color:var(--canh)}
/* Phương án TỰ SINH từ lựa chọn của khách — nổi hơn các phương án máy xếp sẵn, vì nó là hệ
   quả của những câu khách đã trả lời chứ không phải một cột để so. */
.cot-pa.tu-sinh{border-color:#2E9E44;border-width:2px;
                background:color-mix(in srgb,#2E9E44 6%,transparent);order:-1}
.cot-pa.tu-sinh .pa-ma{color:#217A34;font-weight:700}
.pa-chi-tiet input,.pa-chi-tiet select{padding:3px 5px}
.pa-chi-tiet table{font-size:12.5px}
.pa-chi-tiet tfoot td{border-top:1.5px solid var(--vien);padding-top:6px}

/* ---- dải TIẾN ĐỘ của một tờ phiếu khám ----
   Năm bước bên dưới dài vài màn hình; dải này trả lời "còn thiếu gì" mà không phải cuộn hết. */
.tien-do{margin:0 0 14px;padding:11px 14px;border:1px solid var(--vien);border-radius:10px;
         background:var(--the)}
/* Bảy ô tên bước thu thành một hàng CHẤM: vẫn thấy toàn cảnh mà không đọc thành bảy câu.
   Tên bước nằm trong `title` — rê chuột là biết, không chiếm chỗ trên mặt tiền. */
.td-buoc{display:flex;gap:5px;align-items:center}
.td-o{font-size:13px;line-height:1;color:var(--chu3);cursor:default}
.td-o.xong{color:var(--tot)}
/* Dòng "việc kế tiếp": chữ bên trái, nút bên phải, luôn một dòng. */
.td-con{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.td-con > span{flex:1 1 auto}
.td-con .nut{flex:0 0 auto}
.td-con{margin-top:8px;padding-top:8px;border-top:1px dashed var(--vien);
        font-size:12.5px;color:var(--chu2)}
.td-con small{color:var(--chu3)}
.td-con.xong{color:var(--tot);border-top-color:var(--tot-nhat)}

/* ---- bảng XEM TRƯỚC của các nút ⚡ (v1.9: máy điền sẵn, người sửa) ----
   Mỗi dòng là một thứ SẮP được ghi vào hồ sơ, nên nó phải đọc được như một dòng hồ sơ chứ
   không như một mục danh sách: ô tick trước, vùng răng, tên vấn đề, rồi mới tới các chip. */
.ds-de-xuat{max-height:340px;overflow:auto;border:1px solid var(--vien);border-radius:10px}
.dx-dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;
         border-bottom:1px solid var(--vien);cursor:pointer;font-size:13px}
.dx-dong:last-child{border-bottom:none}
.dx-dong:hover{background:var(--nhan-nhat)}
.dx-dong input{margin:0}
.bang-cach-nho{font-size:12.5px;color:var(--chu2);margin:4px 0 2px;line-height:1.7}

/* ---- v1.10: mối nối bước 2 → bước 3 của phiếu khám tư vấn ----
   Dấu ✓ trên chiếc răng đã có chẩn đoán trong tờ phiếu đang mở. Dấu nằm ở SỐ RĂNG chứ không
   phải trên hình: màu trên hình đã dành cho tình trạng răng, chồng thêm một màu nữa là hai
   nghĩa trên cùng một chỗ. */
.rang.da-cd .rang-so{position:relative;color:var(--tot);font-weight:700}
.rang.da-cd .rang-so::after{content:"✓";position:absolute;top:-1px;right:-6px;font-size:9px;color:var(--tot)}
.noi-buoc{padding:12px 14px;border:1px solid var(--vien);border-left:3px solid var(--canh);
          border-radius:10px;background:var(--the)}
.noi-buoc.xong{border-left-color:var(--tot)}
.noi-buoc .nb-ds{margin-top:8px;font-size:13px;color:var(--chu2);line-height:1.9}
.noi-buoc .nb-ds i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px}

/* ---- v1.12: khối an toàn trước thủ thuật, bảo hành & hậu mãi ---- */
.khoi-at{margin-top:12px;padding:10px 12px;border:1px solid var(--vien);border-left:3px solid var(--canh);
         border-radius:9px;background:var(--the)}
.khoi-at.chan{border-left-color:var(--loi);background:var(--loi-nhat)}
.khoi-at.nhe{border-left-color:var(--vien)}
.khoi-at .at-nhan{font-size:13px;font-weight:700;margin-bottom:6px}
.khoi-at .at-dong{font-size:12.5px;color:var(--chu2);line-height:1.6;padding:4px 0;
                  border-top:1px dashed var(--vien)}
.khoi-at .at-dong:first-of-type{border-top:none}
.khoi-at summary{font-size:13px;font-weight:700;cursor:pointer}
.bh-dong{font-size:12.5px;color:var(--chu2);line-height:1.65;margin-top:5px}
.bh-dong.loai{color:var(--loi)}

/* ---- v1.13: màn hình Bộ chuẩn chuyên môn ---- */
.thanh-phu{height:7px;border-radius:4px;background:var(--chim);overflow:hidden;margin-top:9px}
.thanh-phu i{display:block;height:100%;background:var(--nhan)}
td.o-phu{text-align:center;font-weight:700;color:var(--tot);width:52px}
td.o-phu.khong-can{color:var(--vien);font-weight:400}
td.o-phu .thieu{color:var(--canh)}
tr.bam{cursor:pointer}
tr.bam:hover td{background:var(--nhan-nhat)}
.luoi-mat{display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:12px;margin-top:16px}
.mat-chuan{border:1px solid var(--vien);border-radius:10px;padding:11px 13px;background:var(--the)}
.mat-chuan .mat-ds{margin-top:7px;display:flex;flex-direction:column;gap:6px;
                   font-size:12.5px;color:var(--chu2);line-height:1.55}
.mat-chuan .mat-ds > div{padding-top:6px;border-top:1px dashed var(--vien)}
.mat-chuan .mat-ds > div:first-child{border-top:none;padding-top:0}

/* =====================================================================================
   v1.14 — BIỂU ĐỒ RĂNG. Lớp quyết định MÀU, ký hiệu quyết định HÌNH.
   Men răng màu ngà, viền xanh navy như chart giấy của nghề; ký hiệu mới là chỗ dùng màu mạnh.
   Bốn màu, và chỉ bốn: bệnh lý đang có (đỏ) · phục hình đang có (xanh dương) · sẽ làm theo
   phương án đã chốt (đỏ nét đứt) · vừa làm xong (xanh lá). */
.bieu-do{--bd-hien:#C62828; --bd-daco:#1B5FB0; --bd-ke:#C62828; --bd-lam:#1B5FB0;
         --bd-net:#31527A; --bd-men:#F6EED6; --bd-nhai:#FCFAF3; --bd-chan:#EFE3C4}
:root[data-theme="dark"] .bieu-do{--bd-hien:#F2938B; --bd-daco:#7FB3F2; --bd-ke:#F2938B;
         --bd-lam:#7FB3F2; --bd-net:#6E8CB5; --bd-men:#2A2E27; --bd-nhai:#1E241F; --bd-chan:#242720}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .bieu-do{--bd-hien:#F2938B; --bd-daco:#7FB3F2; --bd-ke:#F2938B;
         --bd-lam:#7FB3F2; --bd-net:#6E8CB5; --bd-men:#2A2E27; --bd-nhai:#1E241F; --bd-chan:#242720}
}
.bd-khung{overflow-x:auto;padding:8px 4px 4px;background:var(--the);
          border:1px solid var(--vien);border-radius:12px}

/* ---- BỐ CỤC HAI CỘT: hình bên trái, chú giải bên phải ----

   Biểu đồ răng kéo hết chiều ngang thì đẩy mọi thứ khác xuống dưới màn hình: bảng phương án
   theo vị trí răng nằm ngoài tầm nhìn, và buổi tư vấn thành ra kéo lên kéo xuống. Mà hai thứ
   ấy phải nhìn CÙNG LÚC — bác sĩ chỉ vào chiếc răng rồi đọc phương án của nó.

   Nên khống chế hình ở 60% bề ngang và đưa chú giải sang phải. Chú giải là thứ TRA khi cần,
   không phải thứ đọc liên tục, nên nó hợp với một cột hẹp bên cạnh hơn là một dải ngang ăn
   hết chiều cao dưới hình. Bảng phương án thì nằm NGAY DƯỚI hình, trong cùng cột — sát chỗ
   đang chỉ tay.

   Đo bằng CONTAINER QUERY chứ không theo bề ngang màn hình: cùng một màn 1512px, thanh menu
   mở cho khối 1082px còn thu gọn cho ~1290px — cái quyết định có đủ chỗ hay không là bề ngang
   THẬT của khối, không phải của màn hình. Ngưỡng 1000px, và trong chế độ hai cột hạ bề ngang
   tối thiểu của hình xuống 560px để cột 60% chứa vừa mà không phải cuộn ngang (một biểu đồ
   răng phải cuộn ngang thì không chỉ tay vào được). Hẹp hơn ngưỡng thì xếp dọc như cũ. */
/* Container đặt trên KHỐI CHA (`main.chinh`), không đặt trên chính `.bieu-do`: một phần tử
   không truy vấn được kích thước của chính nó — `@container` bên trong một container chỉ áp
   cho CON của nó. Đặt nhầm chỗ thì rule không bao giờ khớp, mà cũng không báo lỗi gì. */
main.chinh{container-type:inline-size;container-name:khu-lam-viec}
@container khu-lam-viec (min-width:1060px){
  .bieu-do > .bd-khung .bd-svg{min-width:560px}
  .bieu-do{display:grid;grid-template-columns:minmax(0,60%) minmax(260px,1fr);
           gap:12px 18px;align-items:start}
  .bieu-do > .bd-khung{grid-column:1;grid-row:1}
  .bieu-do > .pavt{grid-column:1;grid-row:2;margin-top:0}
  /* Chú giải chiếm cả cột phải và tự cuộn: hồ sơ nhiều ghi nhận thì danh sách dài, nhưng nó
     KHÔNG được đẩy hình cao lên — hình phải đứng yên ở đầu để còn chỉ vào. */
  .bieu-do > .bd-chu-giai{grid-column:2;grid-row:1 / span 2;margin-top:0;
           align-self:start;position:sticky;top:12px;
           max-height:calc(100vh - 120px);overflow:auto;
           padding-left:16px;border-left:1px solid var(--vien)}
  /* Cột hẹp: danh sách ký hiệu về MỘT cột thay vì lưới 21rem */
  .bieu-do > .bd-chu-giai .cg-ds{grid-template-columns:1fr}
  .bieu-do > .bd-chu-giai .cg-lop{flex-direction:column;gap:6px}
}
.bd-svg{display:block;min-width:660px;width:100%;height:auto;touch-action:pan-x pan-y}
.bieu-do.gon .bd-svg{min-width:540px}
/* Trên màn cảm ứng, mỗi ô mặt răng chỉ ~10px — quá nhỏ cho đầu ngón tay (chuẩn ~44px điểm
   chạm). Phóng biểu đồ rộng ra và cuộn ngang: mục tiêu chạm to lên theo cùng tỉ lệ. */
@media (pointer:coarse){
  .bd-svg{min-width:900px}
  .bieu-do.gon .bd-svg{min-width:720px}
}

.bd-net{stroke:var(--bd-net);stroke-width:.9;stroke-linejoin:round}
.bd-than{fill:var(--bd-men)}
.bd-chan-net{fill:var(--bd-chan)}
.bd-mat{fill:var(--bd-nhai)}
.bd-so{font-family:"IBM Plex Mono",monospace;font-size:10px;fill:var(--chu2);font-weight:600}
.bd-so.mat{fill:var(--bd-hien);text-decoration:line-through}
.bd-nhan-cung{font-size:10px;fill:var(--chu3);font-weight:700;letter-spacing:.06em;
              text-transform:uppercase}
.bd-rang.vung .bd-than,.bd-rang.vung .bd-mat{stroke:var(--nhan);stroke-width:1.7}
/* Chuột & cảm ứng: rê vào một Ô MẶT NHAI thì cả chiếc răng sáng nhẹ (biết mình đang ở răng
   nào) và đúng mặt đang trỏ sáng rõ; bấm giữ (active) tô đậm hơn — cảm ứng không có hover
   nên đây là phản hồi duy nhất trước khi hộp ghi mở ra. */
.bd-nhai:hover .bd-mat{fill:color-mix(in srgb,var(--nhan) 7%,var(--bd-nhai))}
.bd-mat{transition:fill .1s}
.bd-mat:hover{fill:var(--nhan-nhat);stroke:var(--nhan);stroke-width:1.4}
.bd-mat:active{fill:color-mix(in srgb,var(--nhan) 30%,var(--bd-nhai))}
.bd-so-vung{fill:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bd-ngoac-net{fill:none;stroke:var(--bd-hien,#c2410c);stroke-width:1.9;stroke-linecap:round;pointer-events:none}
.bd-ghi-chu-ham{font-size:9.5px;fill:var(--bd-hien,#c2410c);font-weight:600;pointer-events:none;paint-order:stroke;stroke:var(--nen,#fff);stroke-width:3px}
.bd-ngoac.chon .bd-ngoac-net{stroke-width:2.8}
.bd-so-vung:hover{fill:var(--nhan-nhat)}
.bd-so-vung.chon{fill:var(--nhan-nhat);stroke:var(--nhan);stroke-width:1}
.bd-so.chon{fill:var(--nhan)}
.bd-so-vung + .bd-so{pointer-events:none}

/* nhãn ghi chú cạnh răng, kèm đường chỉ — như chart giấy */
.bd-chi{stroke:var(--vien);stroke-width:.8;stroke-dasharray:1.5 2}
.bd-giua{stroke:var(--vien);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
/* Nhãn ngang xếp tầng: quầng sáng màu nền (paint-order) để chữ nổi trên đường chỉ đi qua */
/* Chọn kép (.bd-svg .bd-nhan) để thắng .bd-ke-hoach/.bd-hien-trang phía dưới: các lớp ấy đặt
   stroke màu + nét đứt cho KÝ HIỆU, còn ở chữ thì stroke phải là QUẦNG màu nền — chữ mang
   stroke đỏ nét đứt là chữ bị băm nát. */
.bd-svg .bd-nhan{font-size:9.5px;font-weight:600;fill:var(--chu2);
  paint-order:stroke;stroke:var(--the);stroke-width:3px;stroke-linejoin:round;
  stroke-dasharray:none}
/* Nhãn của vùng đã CHỐT tư vấn (khách chọn xong cách xử lý): gạch chân xanh lá — màu thứ ba,
   cố ý khác đỏ/xanh biển của hai lớp ký hiệu, vì nó nói về TIẾN ĐỘ TƯ VẤN chứ không về răng. */
.bd-svg .bd-nhan.da-chot{text-decoration:underline;text-decoration-thickness:2px;
                         text-decoration-color:#2E9E44;text-underline-offset:2px}
.bd-nhan.bd-hien-trang{fill:var(--bd-hien)} .bd-nhan.bd-da-co{fill:var(--bd-daco)}
.bd-nhan.bd-ke-hoach{fill:var(--bd-ke)} .bd-nhan.bd-da-lam{fill:var(--bd-lam)}

/* màu theo LỚP — người ghi không chọn màu */
.bd-hien-trang{stroke:var(--bd-hien);fill:var(--bd-hien)}
.bd-da-co{stroke:var(--bd-daco);fill:var(--bd-daco)}
.bd-ke-hoach{stroke:var(--bd-ke);fill:var(--bd-ke);stroke-dasharray:3 2}
.bd-da-lam{stroke:var(--bd-lam);fill:var(--bd-lam)}

/* hình theo KIỂU VẼ */
/* KHÔNG đặt fill:none ở lớp nền .bd-kh: nó đứng sau .bd-hien-trang/.bd-da-lam trong tệp nên
   ĐÈ MẤT màu tô của lớp — mọi ký hiệu "Tô đặc" (sâu răng, trám amalgam, chốt) tàng hình,
   người ghi tưởng ghi hỏng. Kiểu nào cần rỗng ruột thì tự khai fill:none ở kiểu đó. */
.bd-kh{stroke-width:1.4;pointer-events:none}
.bd-kh.kieu-to{fill-opacity:.8;stroke:none}
/* Viền trên MẶT RĂNG là mảng nhạt có viền, không phải nét kẻ trần: một đường mảnh trên ô 22px
   lẫn ngay vào nét chia mặt sẵn có — nhìn không ra là có phục hồi ở đó. */
.bd-kh.kieu-vien{fill-opacity:.16}
.bd-kh.kieu-cheo{fill-opacity:.14}
.bd-kh.kieu-cham{stroke-dasharray:1.5 2;stroke-width:2.4}
.bd-kh.kieu-soc,.bd-kh.kieu-duong,.bd-kh.kieu-zig,.bd-kh.kieu-x,
.bd-kh.kieu-muiten,.bd-kh.kieu-vach,.bd-kh.kieu-noi{fill:none}
.bd-kh.kieu-x{stroke-width:2.2}
.bd-kh.kieu-noi{stroke-width:3.4;stroke-linecap:round}
.bd-kh.kieu-vach{stroke-width:1.6}
.bd-kh.kieu-tron{fill:none;stroke-width:1.7}
.bd-kh.kieu-chu{font-family:"Bricolage Grotesque","Helvetica Neue",sans-serif;
                font-size:10px;font-weight:700;stroke:none}

/* ---- chú giải: chỉ ký hiệu ĐANG có trên biểu đồ này ---- */
.bd-chu-giai{margin-top:10px}
.cg-lop{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--chu2);
        padding-bottom:8px;border-bottom:1px dashed var(--vien);margin-bottom:8px}
.cg-lop-mau{display:inline-flex;align-items:center;gap:5px}
.cg-lop-mau i{width:11px;height:11px;border-radius:3px;display:inline-block;border:1.5px solid}
.cg-lop-mau small{color:var(--chu3)}
.cg-lop-mau.bd-hien-trang i{border-color:var(--bd-hien);background:color-mix(in srgb,var(--bd-hien) 22%,transparent)}
.cg-lop-mau.bd-da-co i{border-color:var(--bd-daco);background:color-mix(in srgb,var(--bd-daco) 22%,transparent)}
.cg-lop-mau.bd-ke-hoach i{border-color:var(--bd-ke);border-style:dashed;background:none}
.cg-lop-mau.bd-da-lam i{border-color:var(--bd-lam);background:color-mix(in srgb,var(--bd-lam) 22%,transparent)}
.cg-ds{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:8px 20px}
.cg-dong{display:flex;align-items:baseline;gap:6px;font-size:12.5px;color:var(--chu2);
         padding:2px 0;line-height:1.45}
.cg-dong b{color:var(--chu1);font-weight:600;white-space:nowrap}
.cg-dong small{color:var(--chu3);flex:1}
.cg-rang{color:var(--chu3);font-size:11px;white-space:nowrap}
.cg-o{flex:none;width:15px;height:15px;border:1px solid var(--vien);border-radius:3px;
      display:inline-flex;align-items:center;justify-content:center;position:relative}
.cg-o i{width:9px;height:9px;display:block;font-style:normal;font-size:8px;font-weight:700;
        line-height:9px;text-align:center}
.cg-o.bd-hien-trang i,.cg-o.bd-ke-hoach i{color:var(--bd-hien)}
.cg-o.bd-da-co i{color:var(--bd-daco)}
.cg-o.bd-da-lam i{color:var(--bd-lam)}
.cg-o i.kieu-to{background:currentColor;opacity:.8}
.cg-o i.kieu-vien,.cg-o i.kieu-tron{border:1.4px solid currentColor;border-radius:50%}
.cg-o i.kieu-cheo{background:repeating-linear-gradient(45deg,currentColor 0 1.5px,transparent 1.5px 4px)}
.cg-o i.kieu-soc{background:repeating-linear-gradient(0deg,currentColor 0 1.2px,transparent 1.2px 3px)}
.cg-o i.kieu-x::before{content:"✕"}
.cg-o i.kieu-muiten::before{content:"→"}
.cg-o i.kieu-zig::before{content:"⚡"}
.cg-o i.kieu-vach::before{content:"‖"}
.cg-o i.kieu-noi::before{content:"—"}
.cg-o i.kieu-cham::before{content:"•"}

/* ---- v1.14: bảng chọn ký hiệu trong hộp ghi nhận ---- */
.ds-ky-hieu{max-height:230px;overflow:auto;margin-top:8px;padding:2px 2px 6px}
.nhom-kh{margin-bottom:10px}
.nhom-kh-ten{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
             color:var(--chu3);margin:0 0 5px}
.kh-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:20px;
         border:1px solid var(--vien);background:var(--the);font-size:12.5px;color:var(--chu1);
         cursor:pointer;font-family:inherit}
.kh-chip:hover{border-color:var(--nhan)}
.kh-chip.chon{border-color:var(--nhan);background:var(--nhan-nhat);font-weight:600}
.kh-chip .cg-o{width:14px;height:14px}

/* ---------- bước 6 phiếu khám: thực hiện bởi & khối ký ---------- */
.thuc-hien-boi{margin-top:18px;border-top:1px dashed var(--vien);padding-top:12px}
.thb-pk{margin-bottom:10px;font-size:13px;color:var(--chu2)}
.thb-pk b{display:block;font-size:14.5px;color:var(--chu1)}
.thb-ky{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:14px;margin-top:8px}
.ky-o{text-align:center;font-size:13px}
.ky-chuc{color:var(--chu3);font-size:12px;margin-bottom:4px}
.ky-cho{height:0}
@media print{
  .ky-cho{height:52px}                 /* chỗ ký chỉ chiếm giấy khi IN */
  .thuc-hien-boi{break-inside:avoid}
}

/* ---------- kéo chọn vùng trên biểu đồ răng ---------- */
.bd-khung.keo-duoc{position:relative;user-select:none;-webkit-user-select:none}
.keo-chon{position:absolute;pointer-events:none;z-index:5;border-radius:5px;
  border:1.5px dashed var(--nhan);background:color-mix(in srgb,var(--nhan) 12%,transparent)}

/* ---------- chọn mặt răng & thanh ghi nhận (v1.16) ---------- */
.bd-mat.chon{fill:color-mix(in srgb,var(--nhan) 32%,var(--bd-nhai));stroke:var(--nhan);stroke-width:1.6}
.bd-than:hover,.bd-chan-net:hover{stroke:var(--nhan);stroke-width:1.4}
.thanh-ghi-nhan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding:10px 14px;border:1.5px solid var(--nhan);border-radius:12px;
  background:color-mix(in srgb,var(--nhan) 7%,var(--the))}
.thanh-ghi-nhan .mono{font-size:12.5px}
.khoi-cd{border-top:1px dashed var(--vien);margin-top:6px;padding-top:4px}

/* ---------- v1.17: mức độ sâu răng đậm dần · vị trí chọn thân/chân ---------- */
.bd-kh.kieu-to.muc-1{fill-opacity:.32}   /* sâu men, chớm — chưa chắc phải can thiệp */
.bd-kh.kieu-to.muc-2{fill-opacity:.62}   /* sâu ngà, vừa */
.bd-kh.kieu-to.muc-3{fill-opacity:.95}   /* sâu lớn, gần/tới tuỷ */
.bd-kh.kieu-cham{fill:none}
.bd-kh.kieu-cham-tron{fill:none;stroke-dasharray:2 2;stroke-width:1.6}
.bd-than.chon{stroke:var(--nhan);stroke-width:2;fill:color-mix(in srgb,var(--nhan) 14%,var(--bd-men))}
.bd-chan-net.chon{stroke:var(--nhan);stroke-width:2;fill:color-mix(in srgb,var(--nhan) 16%,var(--bd-chan))}

/* Đã CHỌN thì màu chọn thắng cả lúc chuột còn đè lên — không thì bấm xong màu chưa đổi,
   rời chuột ra mới đổi, người bấm tưởng máy chậm. */
.bd-mat.chon,.bd-mat.chon:hover{fill:color-mix(in srgb,var(--nhan) 32%,var(--bd-nhai));
  stroke:var(--nhan);stroke-width:1.6}
.bd-than.chon:hover{stroke:var(--nhan);stroke-width:2;
  fill:color-mix(in srgb,var(--nhan) 14%,var(--bd-men))}
.bd-chan-net.chon:hover{stroke:var(--nhan);stroke-width:2;
  fill:color-mix(in srgb,var(--nhan) 16%,var(--bd-chan))}

/* ---------- hộp ghi nhận v1.19: danh sách mục đã chọn + mức độ ---------- */
.gn-da-chon{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.gn-dong{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--vien);border-radius:10px;padding:7px 10px;background:var(--nen)}
.gn-dong>b{font-size:13.5px}
.kh-chip.chon{border-color:var(--nhan);background:color-mix(in srgb,var(--nhan) 12%,var(--the));
  font-weight:600}
.gn-dong.cu{background:var(--the);border-style:dashed}

/* ---------- ghi chép dưới biểu đồ, trình bày lại (v1.20) ---------- */
.cg-dong{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--chu2)}
.cg-dong .cg-o{margin-top:2px}
.cg-noi{min-width:0;flex:1}
.cg-d1{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cg-d1 b{color:var(--chu1);font-weight:600;white-space:nowrap}
.cg-d1 .cg-rang{white-space:normal;overflow-wrap:anywhere;font-size:11.5px}
.cg-mo{display:block;color:var(--chu3);margin-top:1px;font-size:11.5px;line-height:1.45}

/* ---------- nút & hộp thư viện ký hiệu (v1.21) ---------- */
.nut-thu-vien{position:absolute;top:8px;right:8px;z-index:6;width:34px;height:34px;
  border-radius:10px;border:1px solid var(--vien);background:var(--the);cursor:pointer;
  font-size:16px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.nut-thu-vien:hover{border-color:var(--nhan)}
.nut-pa-vi-tri{right:48px}

/* ---- bảng PHƯƠNG ÁN THEO VỊ TRÍ RĂNG dưới biểu đồ (v1.23) ---- */
.pavt{margin:10px 0 4px;padding:11px 13px;border:1.5px solid var(--nhan);border-radius:12px;
      background:var(--the)}
.pavt-vung{padding:9px 0;border-top:1px dashed var(--vien)}
.pavt-vung:first-of-type{border-top:none}
.pavt-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;
           margin-top:7px}
.pavt-cach{border:1px solid var(--vien);border-radius:9px;padding:8px 10px;background:var(--nen)}
.pavt-cach.khuyen{border-color:var(--tot)}
.pavt-cach.bn-chon{border:1.5px solid #2E9E44;border-left-width:5px;
  background:color-mix(in srgb,#2E9E44 10%,var(--the));
  box-shadow:0 1px 2px rgba(46,158,68,.14)}
.pavt-so{font-size:12.5px;color:var(--chu2);margin-top:2px}
.pavt-bang{width:100%;border-collapse:collapse;margin:6px 0 4px;font-size:11.5px}
.pavt-bang td{padding:2px 4px;border-bottom:1px dashed var(--vien);vertical-align:top}
.pavt-bang td:first-child{color:var(--chu3);white-space:nowrap}
.pavt-cach .pa-uu,.pavt-cach .pa-nhuoc{font-size:11.5px;margin-top:3px}
.pavt-vung.chot > .hang > .cd-vung{text-decoration:underline;text-decoration-thickness:2px;
      text-decoration-color:#2E9E44;text-underline-offset:2px}
/* Vùng chứa RĂNG ĐANG TRỎ trên hình: tô sáng và đưa lên đầu — nối hình với bảng mà không
   giấu mất các vùng còn lại. */
.pavt-vung.trung{background:var(--nhan-nhat);border-radius:8px;
                 box-shadow:inset 3px 0 0 var(--nhan);padding-left:9px}

/* ---- bảng buổi & bảng thu tiền (bước 5, v1.24) ---- */
.bl-gd td{background:var(--nen);border-top:1.5px solid var(--vien);
          padding-top:9px !important;font-size:12.5px}
.bl-viec + .bl-viec{margin-top:4px;padding-top:4px;border-top:1px dashed var(--vien)}
.tt-moc td{border-top:1.5px solid var(--vien)}
.tt-con td{padding-top:3px !important;padding-bottom:3px !important;
           background:color-mix(in srgb,var(--nen) 60%,transparent)}
.tt-con td:nth-child(2){padding-left:18px !important}
.tv-kh{padding:7px 0;border-bottom:1px dashed var(--vien)}
.tv-cach{margin:4px 0 0 23px}
.tv-cach summary{font-size:12.5px;color:var(--nhan);cursor:pointer}
.tv-cach-dong{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:12.5px;padding:4px 0 2px}

/* ==================== TỆP & ẢNH (v1.27) ==================== */
.o-anh{display:flex;align-items:center;justify-content:center;overflow:hidden;
  border:1px solid var(--vien);border-radius:8px;background:var(--chim);
  font-size:12px;color:var(--chu3);flex:none}
.o-anh.tron{border-radius:50%}
.o-anh img{width:100%;height:100%;object-fit:cover;display:block}
.o-anh.dang-tai{background:linear-gradient(90deg,var(--chim) 25%,var(--vien) 50%,var(--chim) 75%);
  background-size:200% 100%;animation:anh-cho 1.1s linear infinite}
.o-anh.hong{color:var(--loi);border-color:var(--loi)}
@keyframes anh-cho{from{background-position:200% 0}to{background-position:-200% 0}}

.vung-tha{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:14px;border:1.5px dashed var(--vien);border-radius:10px;background:var(--chim);
  text-align:center;transition:border-color .12s,background .12s}
.vung-tha:hover,.vung-tha.dang-keo{border-color:var(--nhan);background:var(--nhan-nhat)}
.vung-tha small{color:var(--chu3);font-size:11.5px}

.khoi-ky{margin-top:4px}
.canvas-ky{width:100%;display:block;border:1.5px dashed var(--vien);border-radius:8px;
  background:#fff;touch-action:none;cursor:crosshair}

/* ==================== HỒ SƠ BỆNH ÁN 9 TAB (v1.27) ==================== */
.dai-ho-so{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.khoi-avatar{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.khoi-avatar .o-anh.trong{font-size:34px;font-weight:600;color:var(--nhan);
  background:var(--nhan-nhat);border-style:solid}
.thanh-day{display:flex;align-items:center;gap:8px;margin-bottom:3px}
.thanh-day-trong{flex:1;height:7px;border-radius:99px;background:var(--chim);overflow:hidden;max-width:260px}
.thanh-day-trong i{display:block;height:100%;background:var(--canh);border-radius:99px;transition:width .3s}
.thanh-day-trong.du i{background:var(--tot)}
.thanh-day small{color:var(--chu2);font-size:12px;white-space:nowrap}

.luoi-ho-so{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.khoi-ho-so{margin:0}
.o-luoi .gt.chua-khai{color:var(--chu3);font-style:italic;font-size:13px}
.dong-lh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 0;
  border-top:1px dashed var(--vien);font-size:13.5px}
.o-tick{display:flex;align-items:center;gap:7px;font-size:13.5px;padding:6px 0}

/* ---- tờ khai tiền sử: checklist có mã ---- */
.nhom-ts{margin:10px 0}
.nhom-ts-ten{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;color:var(--nhan);
  padding-bottom:4px;border-bottom:1px solid var(--vien);margin-bottom:7px}
.nhom-ts-ten small{font-weight:400;color:var(--chu3);text-transform:none;letter-spacing:0}
.luoi-ts{display:grid;gap:4px 12px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.muc-ts{display:flex;align-items:flex-start;gap:7px;font-size:13.5px;line-height:1.4;
  padding:5px 7px;border-radius:7px;cursor:pointer;border:1px solid transparent}
.muc-ts:hover{background:var(--chim)}
.muc-ts input{margin-top:2px;flex:none}
.muc-ts:has(input:checked){background:var(--nhan-nhat);border-color:var(--nhan)}
.muc-ts.co-do:has(input:checked){background:var(--loi-nhat);border-color:var(--loi)}
.muc-ts .chip.loi{padding:0 6px;font-weight:700}
.sau-tick{margin:0 0 8px 26px;padding:7px 9px;border-left:2px solid var(--nhan);
  background:var(--chim);border-radius:0 7px 7px 0}
.sau-tick small{display:block;color:var(--chu2);font-size:12px;margin-bottom:4px}
.sau-tick input{width:100%}

/* ---- tab Hình ảnh ---- */
.dai-phim{display:flex;gap:7px;flex-wrap:wrap}
.o-phim-nho{cursor:pointer;border-radius:8px;overflow:hidden;transition:transform .12s}
.o-phim-nho:hover{transform:scale(1.04)}
.luoi-phim{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.the-phim{border:1px solid var(--vien);border-radius:10px;overflow:hidden;cursor:pointer;
  background:var(--the);transition:border-color .12s,box-shadow .12s}
.the-phim:hover{border-color:var(--nhan);box-shadow:var(--bong)}
.the-phim.da-doc{border-left:3px solid var(--tot)}
.the-phim .o-anh{border:0;border-radius:0;width:100%}
.the-phim-than{padding:7px 9px;display:flex;flex-direction:column;gap:2px}
.the-phim-than b{font-size:13px}
.the-phim-than small{font-size:11.5px;color:var(--chu3)}
.the-phim-than .phim-doc{color:var(--tot);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.hop-phim .phim-to{margin-bottom:12px}
.hop-phim .phim-to .o-anh{width:100%}
.so-phim{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.so-phim small{display:block;font-size:11.5px;color:var(--chu3);margin-bottom:3px}
.so-phim .o-anh{width:100%}
.ds-tep{margin:8px 0;display:flex;flex-direction:column;gap:3px}
.dong-tep{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 8px;
  background:var(--chim);border-radius:6px}
.dong-tep span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dong-tep small{color:var(--chu3);flex:none}

/* ---- tab Hợp đồng ---- */
.the-vb{border-left:3px solid var(--vien);padding:9px 0 9px 12px;margin-bottom:10px}
.the-vb.da-ky{border-left-color:var(--tot)}
.the-vb.bi-thay{opacity:.6;border-left-style:dashed}
.the-vb small{font-size:12px;color:var(--chu2)}
.dk-xem{margin-top:7px}
.dk-xem summary{cursor:pointer;font-size:12.5px;color:var(--nhan)}
.dk-dong{display:flex;gap:7px;align-items:baseline;font-size:12.5px;padding:3px 0;
  border-top:1px dashed var(--vien)}
.dk-chon{max-height:230px;overflow:auto;border:1px solid var(--vien);border-radius:8px;padding:6px}
.dong-dy{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 0;
  border-top:1px dashed var(--vien)}

/* ---- dải VÒNG ĐỜI HỢP ĐỒNG ---- */
.chang-hd{display:flex;gap:6px;flex-wrap:wrap}
.chang{flex:1;min-width:132px;display:flex;gap:8px;align-items:flex-start;padding:8px 10px;
  border:1px solid var(--vien);border-radius:9px;opacity:.5}
.chang.qua{opacity:1;border-color:color-mix(in srgb,var(--tot) 45%,transparent)}
.chang.dang{opacity:1;border-color:var(--nhan);border-width:2px;
  background:color-mix(in srgb,var(--nhan) 7%,transparent)}
.chang.mo{opacity:.4}
.chang-cham{flex:none;width:20px;height:20px;border-radius:50%;background:var(--vien);
  color:var(--chu2);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.chang.qua .chang-cham{background:var(--tot);color:#fff}
.chang.dang .chang-cham{background:var(--nhan);color:#fff}
.chang b{font-size:12.5px}

/* ---- hộp KÝ: đọc từng dòng cùng khách ----
   Khung cuộn có chiều cao CỐ ĐỊNH là điều kiện để "cuộn hết mới ký được" có nghĩa: khung tự
   giãn theo nội dung thì không bao giờ có gì để cuộn, và cái cổng ấy hoặc luôn mở hoặc luôn
   đóng. */
.ky-cuon{max-height:44vh;min-height:120px;overflow:auto;border:1px solid var(--vien);
  border-radius:10px;padding:10px 12px;background:var(--nen)}
.ky-het{text-align:center;font-size:12px;color:var(--chu3);padding:10px 0 2px;
  border-top:1px dashed var(--vien);margin-top:8px}
.dk-ky{display:flex;gap:9px;align-items:flex-start;padding:8px 9px;border-radius:8px;
  border:1px solid transparent;margin-bottom:3px}
.dk-ky .dk-chu{flex:1;min-width:0;font-size:13px;line-height:1.45}
.dk-ky.co{background:color-mix(in srgb,var(--tot) 9%,transparent);border-color:color-mix(in srgb,var(--tot) 30%,transparent)}
.dk-ky.khong{background:color-mix(in srgb,var(--loi) 8%,transparent);border-color:color-mix(in srgb,var(--loi) 30%,transparent)}
.dk-ky.khong .dk-chu{text-decoration:line-through;color:var(--chu3)}
.ky-phan{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--nhan);border-bottom:2px solid var(--nhan);padding-bottom:4px;margin:4px 0 8px}
.dk-ky.doc{background:transparent;border-color:transparent;padding:5px 9px;align-items:baseline}
.dk-ky.doc .dk-chu{color:var(--chu2)}
.ky-tom{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.ky-tom .bao{width:100%}
.dk-dong.dk-co{border-left:2px solid var(--tot);padding-left:6px}
.dk-dong.dk-khong{border-left:2px solid var(--loi);padding-left:6px;opacity:.75}
.dk-dong.dk-chua{border-left:2px solid var(--canh);padding-left:6px}

/* ---- tab Thanh toán ---- */
.luoi-so{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.the-so{border:1px solid var(--vien);border-radius:10px;padding:10px 12px;background:var(--the)}
.the-so small{display:block;font-size:11.5px;color:var(--chu3);text-transform:uppercase;letter-spacing:.03em}
.the-so b{display:block;font-size:19px;margin:2px 0;font-variant-numeric:tabular-nums}
.the-so .the-so-mo{text-transform:none;letter-spacing:0;font-size:11.5px}
.the-so.tot b{color:var(--tot)} .the-so.canh b{color:var(--canh)} .the-so.loi b{color:var(--loi)}
.dong-tg{border-left:2px solid var(--vien);margin-left:8px;padding-left:0}
.moc-ct,.moc-cs{display:flex;gap:12px;padding:9px 0 9px 14px;position:relative}
.moc-ct::before,.moc-cs::before{content:'';position:absolute;left:-5px;top:15px;width:8px;height:8px;
  border-radius:50%;background:var(--vien)}
.moc-ct.moc-hd::before{background:var(--nhan)}
.moc-ct.moc-coc::before{background:var(--canh)}
.moc-ct.da-hoan{opacity:.6}
.moc-luc{flex:none;width:76px;font-size:12px;color:var(--chu3);font-variant-numeric:tabular-nums;padding-top:2px}
.moc-than{flex:1;min-width:0}
.moc-than small{display:block;font-size:12px;color:var(--chu2)}
.moc-than .tien{font-weight:650}
.so-to{text-align:center;font-size:26px;font-weight:700;margin:6px 0 14px;color:var(--nhan)}
.so-to small{display:block;font-size:12px;font-weight:400;color:var(--chu3)}

/* ---- tab CSKH ---- */
.moc-cs{border-left:2px solid var(--vien);margin-left:8px}
.moc-cs.loi::before{background:var(--loi)} .moc-cs.canh::before{background:var(--canh)}
.moc-cs.tot::before{background:var(--tot)} .moc-cs.tot{opacity:.72}

/* ---- mẫu đơn thuốc ---- */
.mau-don{border:1px solid var(--vien);border-radius:9px;padding:8px 10px;margin-bottom:7px}
.mau-don.hop{border-color:var(--tot);background:var(--tot-nhat)}
.mau-thuoc{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px}
.xem-mau{margin-top:10px;border-top:1px dashed var(--vien);padding-top:10px}

/* ---- gợi ý điền phiếu khám ---- */
.mach-o{display:block;color:var(--chu3);font-size:11.5px;line-height:1.45;margin-top:3px}
.chip-mau{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.chip-nut{border:1px solid var(--vien);background:var(--chim);color:var(--chu2);
  border-radius:99px;padding:3px 10px;font-size:12px;cursor:pointer;font-family:inherit;
  transition:border-color .12s,background .12s,color .12s}
.chip-nut:hover{border-color:var(--nhan);background:var(--nhan-nhat);color:var(--nhan)}
.gt.chua-khai{color:var(--chu3);font-style:italic;font-size:12.5px}

/* ---- tiến độ điều trị ---- */
.luoi-tien-do{display:grid;gap:4px 10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-top:8px}
.o-tien-do{display:flex;gap:6px;align-items:baseline;font-size:12.5px;color:var(--chu3)}
.o-tien-do.xong{color:var(--tot)}
.o-tien-do span{font-weight:700}

/* ---- màn CSKH ---- */
.dong-cskh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:9px 0;
  border-bottom:1px dashed var(--vien)}
.dong-cskh:last-child{border-bottom:0}
.dong-cskh.tre{background:linear-gradient(90deg,var(--loi-nhat),transparent 60%);
  margin:0 -14px;padding-left:14px;padding-right:14px}
.cs-bieu{font-size:20px;flex:none;width:26px;text-align:center}
.cs-nguoi{flex:0 0 190px;min-width:150px;display:flex;flex-direction:column}
.cs-nguoi small{color:var(--chu3);font-size:11.5px}
.cs-viec{flex:1;min-width:190px;display:flex;flex-direction:column}
.cs-viec small{color:var(--chu3);font-size:11.5px}
.cs-viec .cs-kq{color:var(--tot)}
.cs-han{flex:none;width:88px;font-size:12.5px;font-variant-numeric:tabular-nums;
  display:flex;flex-direction:column}
.cs-han .cs-tre{color:var(--loi);font-weight:600;font-size:11px}
.nhom-ts-ten.loi{color:var(--loi);border-bottom-color:var(--loi)}
.nhom-ts-ten.canh{color:var(--canh);border-bottom-color:var(--canh)}
.nhom-ts-ten.tot{color:var(--tot);border-bottom-color:var(--tot)}

/* ---- hộp xác nhận tự vẽ (thay window.confirm) ---- */
.hop-hoi{max-width:460px}
.hop-hoi h3{margin:0 0 6px;font-size:16px;line-height:1.45}
.hop-hoi .hoi-phu{margin:6px 0 0;font-size:13.5px;color:var(--chu2);line-height:1.5}
/* Ô nhập ĐANG SAI: viền đỏ. Trước v1.66 không có lớp nào cho việc này — mỗi chỗ tự bôi màu
   inline một kiểu, và chỗ nào quên thì ô rỗng trông y hệt ô đã điền. */
.o-loi{border-color:var(--loi) !important;box-shadow:0 0 0 2px var(--loi-nhat)}
.hop-hoi textarea{width:100%;margin-top:4px}
.nut.nguy{background:var(--loi);border-color:var(--loi);color:#fff}
.nut.nguy:hover{filter:brightness(1.08)}

/* Chip "khách đã chọn" phải đọc được từ xa; chip khuyến nghị lùi lại một bậc. */
.chip.bn.manh{background:#2E9E44;color:#fff;border-color:#2E9E44;font-weight:700;letter-spacing:.02em}
.chip.tot.nhat{background:transparent;color:var(--tot);border-color:var(--tot);font-weight:500}

/* ---- bảng báo giá bước 4: gộp ô theo nhóm chẩn đoán ---- */
.bang-bao-gia{min-width:900px}          /* hẹp hơn thì cột chữ bị bóp thành cột dọc từng chữ */
.bang-bao-gia th,.bang-bao-gia td{padding:8px 10px}
.bang-bao-gia .o-nhom{vertical-align:top;background:color-mix(in srgb,var(--chim) 55%,transparent);
  border-right:1px solid var(--vien)}
.bang-bao-gia tr.dau-nhom > td{border-top:1.5px solid var(--vien)}
.bang-bao-gia tr.dau-nhom:first-child > td{border-top:0}
.bang-bao-gia td{vertical-align:middle}
/* Chia bề ngang theo VIỆC của từng cột: hai cột chữ (vấn đề · thủ thuật) cần chỗ để đọc thành
   câu; các cột số thì càng hẹp càng dễ so hàng dọc. Không chia thì trình duyệt dàn đều và
   "Abutment Titan + mão sứ Zirconia trên implant" rơi xuống sáu dòng. */
.bang-bao-gia th:nth-child(1){width:38px;text-align:center}
.bang-bao-gia td:nth-child(1){text-align:center;color:var(--chu3)}
.bang-bao-gia th:nth-child(2){width:82px}
.bang-bao-gia th:nth-child(3){width:19%}
.bang-bao-gia th:nth-child(4){width:22%}
.bang-bao-gia th:nth-child(5){width:14%}      /* mức độ: đủ chỗ cho tên bậc xuống 1–2 dòng */
.bang-bao-gia th:nth-child(9){width:15%}      /* ghi chú */
/* Ô chọn bậc mức độ cần đủ chỗ đọc được tên bậc ("Trám 2 mặt · 520.000 ₫"); bóp lại thì nó
   hiện "– chọn" cụt lủn và người dùng không biết đang ở bậc nào. Đặt bề ngang TỐI THIỂU rồi
   để cột tự giãn, thay vì ấn định bề ngang cột — vì có rowspan nên đếm cột theo thứ tự dễ
   lệch giữa dòng đầu nhóm và các dòng sau. */

.bang-bao-gia input[type=number]{max-width:100%}
.bang-bao-gia input[type=text]{width:100%;min-width:92px}
/* Ghi chú: ô nhiều dòng tự cao, không thanh cuộn riêng, không kéo tay được (kéo tay làm vỡ
   chiều cao hàng của bảng). */
.bang-bao-gia .o-ghi-chu{width:100%;min-width:110px;font-size:12px;line-height:1.45;
  resize:none;overflow:hidden;padding:5px 7px;font-family:inherit}
/* Hai cột chữ dài phải NGẮT được giữa từ dài, nếu không một tên thủ thuật dài đẩy cả cột rộng ra */
.bang-bao-gia td:nth-child(3),.bang-bao-gia td:nth-child(4){overflow-wrap:anywhere}

/* ---- bậc mức độ: chữ xuống dòng được, bấm để đổi ---- */
.o-bac{display:block;width:100%;min-width:104px;text-align:left;background:none;border:1px dashed var(--vien);
  border-radius:7px;padding:4px 7px;font:inherit;font-size:12px;line-height:1.4;color:var(--chu);
  cursor:pointer;overflow-wrap:anywhere}
.o-bac:hover{border-color:var(--nhan);border-style:solid;background:var(--nhan-nhat)}
.o-bac.chua{color:var(--chu3);font-style:italic}
/* Vì sao máy chọn bậc này — chữ nhỏ ngay dưới tên bậc. Một con số tự đổi mà không giải thích
   thì bác sĩ hoặc không tin, hoặc tin mà không soát; cả hai đều tệ hơn là nói thẳng căn cứ. */
.vi-sao-bac{display:block;margin-top:2px;font-size:11px;color:var(--chu3);line-height:1.35}
@media print{.vi-sao-bac{color:#555}}
.ds-bac{display:flex;flex-direction:column;gap:7px;max-height:56vh;overflow:auto}
.the-bac{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  border:1px solid var(--vien);border-radius:10px;padding:9px 11px;background:var(--the)}
.the-bac:hover{border-color:var(--nhan);background:var(--nhan-nhat)}
.the-bac.dang{border-color:var(--tot);background:var(--tot-nhat)}
.the-bac small{display:block;color:var(--chu2);font-size:12px;line-height:1.45;margin-top:3px}
.the-bac .bac-phu{color:var(--chu3);font-size:11.5px}

/* chế độ XEM TRƯỚC qua iframe từ lưu đồ SOP (#xem=1) — chỉ nhìn, không thanh bên */
.xem-truoc .ben{display:none}
.xem-truoc .khung{grid-template-columns:1fr}
.xem-truoc .chinh{max-width:none;padding:12px 16px}

/* Khối vừa được nhảy tới từ dải cảnh báo đầu màn "Công việc của tôi" — sáng lên MỘT nhịp rồi
   tắt. Cuộn tới mà không đánh dấu thì trên một trang dài người dùng không biết mình đã tới nơi. */
.vt-nhay{outline:2px solid var(--canh);animation:vt-tat 1.6s ease-out 1}
@keyframes vt-tat{0%{background:var(--canh-nhat)}100%{background:transparent}}

/* Thang chấm 1→5 của hộp "Chấm kỳ" phụ tá — nút bấm thấy cả thang, không phải ô chọn xổ xuống */
.vt-tc{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--vien)}
.vt-tc:last-of-type{border-bottom:0}
.vt-diem{display:flex;gap:5px;flex:none}
.vt-diem .vd{width:36px;height:32px;border:1px solid var(--vien);border-radius:8px;background:var(--the);
  cursor:pointer;font-weight:600;font-size:13.5px;color:var(--chu3)}
.vt-diem .vd:hover{border-color:var(--chu3)}
.vt-diem .vd.on{background:var(--tot);border-color:var(--tot);color:#fff}

/* Huy hiệu số trên nút tab (Công việc của tôi) — tách khỏi nhãn, không dính chữ */
.nut .dem{margin-left:6px;padding:1px 7px;border-radius:99px;font-size:11px;font-weight:700;
  background:var(--canh-nhat);color:var(--canh)}
/* Huy hiệu trên nút ĐANG CHỌN. `:not(.phu)` là bắt buộc: luật này viết cho nút nền tím đặc,
   mà nút gập "Lọc ▾"/"Cột ▾" là `nut nho phu chon` — nền TRẮNG. Không chặn thì con số đếm bộ
   lọc đang bật thành chữ trắng trên nền trắng, đúng lúc nó cần đọc được nhất. */
.nut.chon:not(.phu) .dem{background:rgba(255,255,255,.25);color:#fff}

/* Bảng Năng lực chuyên môn — bản ký hiệu, mật độ cao */
.vt-gon table td{padding:6px 8px;font-size:13px}
.vt-gon table th{font-size:11px}
.vt-ky{display:inline-block;min-width:20px;text-align:center;font-weight:700;font-size:14px}
.vt-ky.tot{color:var(--tot)} .vt-ky.nhan{color:var(--nhan)} .vt-ky.canh{color:var(--canh)} .vt-ky.mo{color:var(--chu3);font-weight:400}
.vt-nutky{width:26px;height:24px;border:1px solid var(--vien);border-radius:7px;background:var(--the);
  cursor:pointer;font-size:13px;line-height:1;color:var(--chu3)}
.vt-nutky:hover{border-color:var(--chu3);color:inherit}
.vt-nutky.on{background:var(--tot-nhat);border-color:var(--tot);color:var(--tot);font-weight:700}

/* ---------- NHẬT KÝ CHUYÊN MÔN (SOP-CM-05) ----------
   Tường đọc như BẢNG TIN: bài là bài đăng đầy đủ — avatar + tên bác sĩ, mô tả cắt 3 dòng,
   ảnh hiện thẳng (bấm là phóng to), chân thẻ là dãy icon. Lướt là nắm ca, mở bài chỉ để
   chấm điểm, bình luận và xem hình to. */
.nk-no{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.nk-no-o{display:flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--vien);
  border-radius:99px;background:var(--the);font-size:13px;color:var(--chu2)}
.nk-no-o b{font-size:15px;color:var(--chu)}
.nk-no-o.do{border-color:#f4c6c0;background:#fffbfa}
.nk-no-o.do b{color:#b42318}
.nk-no-o.xanh b{color:#1a7f37}
.nk-no-ic{font-size:15px}
.nk-loc select{width:auto;min-width:150px;max-width:225px;padding:6px 10px;font-size:13px}

/* HAI CỘT: tường trái · chi tiết phải. Cột phải DÍNH (sticky) và tự cuộn riêng — đọc chi tiết
   một bài dài mà tường cuộn theo là mất cả hai chỗ đang đứng. */
.nk-doi{display:grid;grid-template-columns:minmax(360px,1fr) minmax(420px,1.05fr);gap:16px;align-items:start}
.nk-trai{min-width:0}
.nk-phai{min-width:0;position:sticky;top:8px;max-height:calc(100vh - 96px);overflow:auto;
  border:1px solid var(--vien);border-radius:14px;background:var(--the);padding:14px 16px}
.nk-phai .dau{margin-bottom:10px}
.nk-phai .dau h2{font-size:19px}
.nk-phai .khoi{margin-bottom:14px}
@media (max-width:1179px){.nk-doi{grid-template-columns:minmax(0,1fr)}.nk-phai{position:static;max-height:none}}

.nk-tuong{display:flex;flex-direction:column;gap:14px;max-width:760px}
.nk-tuong.hep{max-width:none}
.nk-the.dang-chon{border-color:var(--nhan);box-shadow:0 0 0 2px var(--nhan-nhat, #d7ece9)}
.nk-the{border:1px solid var(--vien);border-radius:14px;padding:14px 16px;background:var(--the);
  cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.nk-the:hover{box-shadow:0 2px 10px rgba(0,0,0,.08)}
.nk-the.co-do{border-left:4px solid #d92d20}
.nk-the.khoa{background:#fafafa}
.nk-dau{display:flex;gap:10px;align-items:center}
.nk-dau .o-anh{flex:none;border-radius:50%}
.nk-dau .avatar-pt{width:40px;height:40px;flex:none}
.nk-dau .avatar-pt svg{width:40px;height:40px}
.nk-dau-chu{flex:1;min-width:0;line-height:1.35}
.nk-dau-chu b{font-size:14.5px}
.nk-dau-phu{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px}
.nk-dau-phai{display:flex;gap:5px;align-items:center;flex:none}
.nk-khach{font-size:12.5px;margin:6px 0 4px}
.nk-do{margin:6px 0;padding:6px 10px;border-radius:8px;background:#fef3f2;color:#912018;font-size:13px}
.nk-do.to{padding:10px 14px;margin-bottom:14px}
.nk-tom{white-space:pre-wrap;font-size:13.5px;line-height:1.5;margin:4px 0}
.nk-tom.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nk-xem-them{border:0;background:none;color:var(--nhan);font-size:12.5px;cursor:pointer;
  padding:0;font-weight:600}
.nk-xem-them:hover{text-decoration:underline}
.nk-canh-mota{margin:4px 0;padding:6px 10px;border-radius:8px;background:var(--canh-nhat);
  color:var(--canh);font-size:13px}
/* LƯỚI ẢNH đổi bố cục theo SỐ ẢNH — một phim thì phim ấy là nội dung chính, bốn phim thì
   người đọc cần thấy cả bốn cùng lúc để so. Ảnh cắt bằng object-fit, không bóp méo. */
.nk-luoi{display:grid;gap:3px;margin:8px 0 2px;border-radius:10px;overflow:hidden;
  border:1px solid var(--vien)}
.nk-luoi.n1{grid-template-columns:1fr;height:300px}
.nk-luoi.n2{grid-template-columns:1fr 1fr;height:230px}
.nk-luoi.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;height:260px}
.nk-luoi.n3>*:first-child{grid-row:span 2}
.nk-luoi.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;height:280px}
.nk-luoi-o{position:relative;border:0;padding:0;background:#0f1115;cursor:zoom-in;overflow:hidden}
.nk-luoi-o .o-anh{width:100%;height:100%;border:0;border-radius:0;background:#0f1115}
.nk-luoi-o .o-anh img{width:100%;height:100%;object-fit:cover}
.nk-luoi-o:hover .o-anh img{opacity:.9}
.nk-luoi-du{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(15,17,21,.55);color:#fff;font-size:26px;font-weight:700;letter-spacing:-.5px}
/* ĐÈN XEM ẢNH — khung NẰM NGANG 4:3 CỐ ĐỊNH.
   Đặt chiều cao theo từng tấm thì hộp nhảy một cỡ khác mỗi lần bấm "Sau ›", và mắt phải định
   vị lại từ đầu — mà đọc phim là so tấm này với tấm kia. `contain` để không cắt mất rìa phim
   (một tấm panorama bị `cover` xén hai đầu là mất đúng phần răng khôn). */
.nk-den-khung{position:relative}
.nk-den-anh{background:#0f1115;border-radius:10px;overflow:hidden;display:flex;
  align-items:center;justify-content:center;aspect-ratio:4/3;width:100%;
  cursor:pointer;touch-action:pan-y}
.nk-den-anh .o-anh{border:0;border-radius:0;background:#0f1115;width:100%;height:100%}
.nk-den-anh .o-anh img{object-fit:contain}
.nk-den-nhan{font-size:13px;color:var(--chu2)}
.nk-den-mui{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:56px;
  border:0;border-radius:8px;background:rgba(0,0,0,.42);color:#fff;font-size:26px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center}
.nk-den-mui:hover{background:rgba(0,0,0,.66)}
.nk-den-mui.trai{left:8px}
.nk-den-mui.phai{right:8px}

/* BÌNH LUẬN HAI CẤP — trả lời thụt vào và có một sợi chỉ dọc, để mắt biết ngay câu nào trả
   lời câu nào mà không phải đọc tên. Sâu hơn hai cấp thì không có kiểu nào cứu được. */
.nk-bl-nhanh{display:flex;flex-direction:column;gap:6px}
.nk-bl-nhom{display:flex;flex-direction:column;gap:6px;
  margin-left:16px;padding-left:12px;border-left:2px solid var(--vien)}
.nk-bl-nhanh.tra-loi .nk-bl-dong{background:transparent;padding-left:0}
.nk-bl-anh{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.nk-bl-anh-o{border:1px solid var(--vien);border-radius:8px;padding:0;background:#0f1115;
  cursor:zoom-in;overflow:hidden;line-height:0}
.nk-bl-anh-o:hover{border-color:var(--nhan)}
.nk-bl-anh-o .o-anh{border:0;border-radius:0;min-width:92px;background:#0f1115}
.nk-bl-soan{margin-top:8px}
.nk-bl-soan.tra-loi{margin-left:16px;padding-left:12px;border-left:2px solid var(--vien)}
.nk-bl-chon{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.nk-bl-chon .chip{display:inline-flex;align-items:center;gap:4px}
/* Nút chỉ-là-chữ: dùng cho "Trả lời" và "✕" — một nút viền đầy đủ ở đây nặng hơn việc nó làm. */
.nut-chu{border:0;background:none;padding:0;font:inherit;font-size:12px;
  color:var(--nhan);cursor:pointer}
.nut-chu:hover{text-decoration:underline}

.nk-anh{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px}
.nk-anh-o{border:1px solid var(--vien);border-radius:9px;padding:0;background:var(--the);
  cursor:zoom-in;overflow:hidden;display:flex;flex-direction:column}
.nk-anh-o:hover{border-color:var(--nhan)}
.nk-anh-o .o-anh{border:0;border-radius:0;min-width:96px}
.nk-anh-nhan{font-size:10.5px;color:var(--chu2);padding:2px 6px;max-width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;text-align:left}
.nk-chan{gap:8px;flex-wrap:wrap;align-items:center;font-size:12.5px;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--vien)}

.nk-cot{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.nk-cot{grid-template-columns:minmax(0,1fr)}}
.nk-cot.mot{grid-template-columns:minmax(0,1fr)}
.nk-thang{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.nk-num{display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:6px 10px;text-align:left;min-width:128px;line-height:1.25}
.nk-num span{font-size:11px;opacity:.75;font-weight:400}
.nk-num-doi{outline:2px dashed #d92d20;outline-offset:1px}
.nk-doi-chieu{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--canh-nhat);font-size:13px}
.nk-cham-lai{margin-top:12px;padding:10px 12px;border:1px solid var(--vien);
  border-left:3px solid #d92d20;border-radius:8px;background:#fffbfa}
.nk-cham-lai>b{display:block;margin-bottom:2px}
.nk-cham-lai select{width:auto;min-width:190px;max-width:300px;padding:6px 10px;font-size:13px}
.nk-bl{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.nk-bl-dong{display:flex;gap:8px;align-items:flex-start;font-size:13px;
  padding:8px 10px;border-radius:10px;background:var(--nen, #f7f8f8)}
.nk-bl-dong .o-anh,.nk-bl-dong .avatar-pt{flex:none;width:30px;height:30px;border-radius:50%}
.nk-bl-dong .avatar-pt svg{width:30px;height:30px}
.nk-bl-chuc{font-size:11px}


/* ĐĂNG NHẬP THEO GHẾ — lưới ghế, ghế chưa có tài khoản để XÁM chứ không giấu đi:
   một ghế không thấy được là một ghế không ai nhớ ra là mình quên dựng. */
.dn-nhom{font-size:12px;color:var(--chu3);line-height:1.5;margin:0 0 6px;padding-bottom:5px;
  border-bottom:1px solid var(--vien)}
.dn-ghe{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:6px}
.dn-o{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;
  padding:8px 10px;border:1px solid var(--vien);border-radius:9px;background:var(--the);
  cursor:pointer;font:inherit;color:inherit}
.dn-o:hover{border-color:var(--nhan);background:var(--chim)}
.dn-o b{font-size:12.5px;line-height:1.3}
.dn-o small{font-size:11px;color:var(--chu2)}
.dn-o .ma{font-size:10px;color:var(--chu3);letter-spacing:.02em}
.dn-o.tat{opacity:.42;cursor:not-allowed}
.dn-o.tat:hover{border-color:var(--vien);background:var(--the)}
.dn-hop{max-width:860px}


/* CHẤT THẢI — chọn DÒNG THẢI là nút có chú giải, không phải một ô xổ.
   Chọn nhầm dòng là sai lầm đắt nhất của cả quy trình (amalgam vào bao vàng đem đốt), và nó
   xảy ra vì người ta không nhớ dòng nào đi đường nào — nên nghĩa phải nằm ngay trên nút. */
.ct-dong{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.ct-o{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;
  padding:8px 10px;border:1px solid var(--vien);border-radius:9px;background:var(--the);
  cursor:pointer;font:inherit;color:inherit}
.ct-o:hover{border-color:var(--nhan)}
.ct-o.chon{border-color:var(--nhan);background:var(--chim);box-shadow:inset 0 0 0 1px var(--nhan)}
.ct-o b{font-size:12.5px}
.ct-o small{font-size:11px;color:var(--chu2);line-height:1.35}


/* BÀN LÀM VIỆC PC — tên khách là NÚT, vì mỗi ngày người ta bấm nó vài chục lần.
   Một ô bảng có chữ rồi mới có nút "Mở" bên cạnh là bắt nhắm hai lần cho một việc. */
.pc-khach{display:flex;flex-direction:column;align-items:flex-start;gap:0;
  border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pc-khach b{font-size:13px;line-height:1.3}
.pc-khach small{font-size:11px;color:var(--chu2)}
.pc-khach:hover b{color:var(--nhan);text-decoration:underline}

/* ---------- xem trước ĐẦU TRANG CHỨNG TỪ (màn Hồ sơ phòng khám) ----------
   Dựng lại đúng bố cục `dauTrang()` của server/in.js: logo trái · khối cơ sở · mã chứng từ
   phải, gạch chân đậm. Nền trắng và chữ đen CỐ ĐỊNH kể cả ở giao diện tối — đây là bản xem
   trước của một tờ GIẤY, và giấy không có chế độ tối. */
.dau-trang-xem{display:flex;gap:12px;align-items:flex-start;background:#fff;color:#000;
  border:1px solid var(--vien);border-radius:8px;padding:14px 16px;margin:12px 18px 18px;
  font-family:"Times New Roman",Times,serif;font-size:13px;line-height:1.45}
.dau-trang-xem .dtx-logo{flex:none}
.dau-trang-xem .dtx-logo .o-anh{border:1px dashed #bbb;background:#fafafa;color:#888;font-size:10px}
.dau-trang-xem .dtx-cs{flex:1;min-width:0;border-bottom:1.5px solid #000;padding-bottom:6px}
.dau-trang-xem .dtx-cs b{display:block;text-transform:uppercase;font-size:13.5px;letter-spacing:.01em}
.dau-trang-xem .dtx-cs span{display:block;font-size:11.5px}
.dau-trang-xem .dtx-cs i{color:#a33;font-style:italic}
.dau-trang-xem .dtx-ct{flex:none;text-align:right;font-size:11px;white-space:nowrap;color:#333}
@media (max-width:520px){.dau-trang-xem{flex-wrap:wrap}.dau-trang-xem .dtx-ct{text-align:left}}

/* ---------- CHUÔNG & HỘP VIỆC (v1.54) ----------
   Chuông đứng cạnh nút Đăng xuất ở chân thanh bên, không đứng ở đầu: nó là thứ liếc qua vài
   lần một ca, không phải thứ nhìn liên tục. Số đếm nằm TRONG nút chứ không nổi ra góc — một
   chấm đỏ nổi ngoài viền là mẫu quen của mạng xã hội, và nó kéo mắt suốt ca làm. */
.chuong{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:13px;
  padding:5px 10px;border-radius:8px;border:1px solid var(--vien);background:var(--the);
  color:var(--chu2);cursor:pointer}
.chuong:hover{border-color:var(--nhan);color:var(--chu1)}
.chuong .dem{background:var(--vien);color:var(--chu1);border-radius:20px;padding:0 6px;
  font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums}
.chuong.gap{border-color:var(--loi);color:var(--loi)}
.chuong.gap .dem{background:var(--loi);color:#fff}
/* Thanh bên THU GỌN: chuông thành một ô vuông như các nút gọn khác, số đếm chồng lên góc —
   52px không đủ chỗ cho cả biểu tượng lẫn con số nằm ngang. */
.chuong-gon{position:relative;font-size:14px}
.chuong-gon .dem{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;
  border-radius:9px;background:var(--vien);color:var(--chu1);font-size:10.5px;font-weight:700;
  line-height:16px;text-align:center;padding:0 3px}
.chuong-gon.gap{border-color:var(--loi);color:var(--loi)}
.chuong-gon.gap .dem{background:var(--loi);color:#fff}



/* Liên kết TRONG CHỮ — nút chuyển tab nằm giữa một câu văn. Trước v1.56 lớp này được dùng mà
   chưa có định nghĩa, nên nó rơi về chữ thường và không ai biết bấm được. */
.lien-ket{color:var(--nhan);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.lien-ket:hover{color:var(--chu1)}

/* ================= NGĂN KÉO THÔNG BÁO =================
   Không phải hộp thoại giữa màn: hộp thoại che mất thứ người ta đang làm. Ngăn kéo giữ nguyên
   nửa trái màn hình và có đủ bề rộng cho câu VÌ SAO của mỗi dòng — câu ấy mới là thứ làm người
   ta biết nên làm gì, và nó không sống nổi trong một cột hẹp. */
.tb-lop{position:fixed;inset:0;z-index:60;background:rgba(10,20,19,.34);
  display:flex;justify-content:flex-end}
.tb-ngan{width:min(440px,100vw);height:100%;background:var(--the);display:flex;flex-direction:column;
  box-shadow:-18px 0 48px -24px rgba(0,0,0,.5);animation:tb-vao .16s ease-out}
@keyframes tb-vao{from{transform:translateX(24px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.tb-ngan{animation:none}}

.tb-ngan>header{display:flex;align-items:flex-start;gap:10px;padding:18px 18px 14px;
  border-bottom:1px solid var(--vien)}
.tb-ngan>header b{font-size:17px;letter-spacing:-.01em;display:block}
.tb-ngan>header small{display:block;font-size:12.5px;color:var(--chu3);margin-top:2px}
.tb-ngan>header>div{flex:1;min-width:0}
.tb-dong-nut{flex:none;width:30px;height:30px;border:1px solid var(--vien);border-radius:9px;
  background:none;color:var(--chu3);cursor:pointer;font-size:13px;line-height:1;padding:0}
.tb-dong-nut:hover{background:var(--chim);color:var(--chu1)}
.tb-cuon{flex:1;overflow:auto;padding:4px 0 24px}

.tb-khoi{padding:14px 0 4px}
.tb-khoi h4{margin:0 18px 2px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chu3);display:flex;align-items:center;gap:7px}
.tb-khoi h4 span{background:var(--vien);color:var(--chu1);border-radius:20px;padding:1px 7px;
  font-size:10.5px;letter-spacing:0;font-variant-numeric:tabular-nums}
.tb-khoi>p{margin:0 18px 8px;font-size:12px;color:var(--chu3);line-height:1.5}

/* Một DÒNG: chấm mức độ · thân (tiêu đề + vì sao) · phải (GẤP, nút thôi hiện).
   Vị trí đặt tường minh — lưới tự xếp từng bóp cột tiêu đề còn một chữ mỗi hàng. */
.tb-dong{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0 11px;
  align-items:flex-start;padding:11px 18px;cursor:pointer;text-decoration:none;color:inherit;
  border-left:3px solid transparent}
.tb-dong:hover{background:color-mix(in srgb,var(--nhan) 6%,var(--the))}
.tb-cham{grid-column:1;width:8px;height:8px;border-radius:50%;background:var(--vien);margin-top:6px}
.tb-than{grid-column:2;min-width:0}
.tb-than b{display:block;font-size:14px;font-weight:600;line-height:1.4;color:var(--chu1);
  overflow-wrap:anywhere}
.tb-than small{display:block;font-size:12.5px;color:var(--chu3);line-height:1.55;margin-top:2px}
.tb-phai{grid-column:3;display:flex;align-items:center;gap:6px;margin-top:2px}

.tb-gap{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--loi);
  border:1px solid var(--loi);border-radius:5px;padding:1px 5px;line-height:1.5}
.tb-dong.tb-gap{border-left-color:var(--loi)}
.tb-dong.tb-gap .tb-cham{background:var(--loi)}
.tb-dong.tb-thuong .tb-cham{background:var(--canh)}
.tb-dong.tb-tin .tb-cham{background:var(--vien)}

/* Nút thôi-hiện mờ tới khi rê chuột: nó là lối thoát, không phải lời mời. */
.tb-tat{background:none;border:0;color:var(--chu3);font-size:13px;line-height:1;
  padding:4px 5px;border-radius:6px;cursor:pointer;opacity:0}
.tb-dong:hover .tb-tat,.tb-tat:focus{opacity:1}
.tb-tat:hover{background:var(--vien);color:var(--chu1)}

.tb-chan{margin:14px 18px 0;padding-top:12px;border-top:1px dashed var(--vien);
  font-size:12px;color:var(--chu3);line-height:1.6}
.tb-sach{padding:56px 26px;text-align:center}
.tb-sach-hinh{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;
  background:var(--ok-nen,color-mix(in srgb,var(--tot) 14%,transparent));color:var(--tot);
  font-size:22px;line-height:46px}
.tb-sach b{display:block;font-size:15px;margin-bottom:6px}
.tb-sach p{margin:0;font-size:12.5px;color:var(--chu3);line-height:1.6}
@media print{.tb-lop{display:none}}


/* ===== CÔNG TẮC BẬT/TẮT (v1.60) — màn Cài đặt phòng khám, Quy tắc nâng cao =====
   Một checkbox thật bên dưới (bàn phím, đọc màn hình đều hiểu), vẽ thành công tắc. */
.cong-tac{position:relative;display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.cong-tac input{position:absolute;opacity:0;width:0;height:0}
.cong-tac .ct{width:38px;height:22px;border-radius:22px;background:var(--chim);position:relative;
  transition:background .15s;flex:none}
.cong-tac .ct::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.cong-tac input:checked + .ct{background:var(--tot)}
.cong-tac input:checked + .ct::after{left:19px}
.cong-tac input:disabled + .ct{opacity:.45;cursor:not-allowed}
.cong-tac input:focus-visible + .ct{outline:2px solid var(--nhan);outline-offset:2px}
.cong-tac.tat .ct{background:var(--chim)}

/* Danh sách dòng cài đặt: nhãn + giải thích trái, công tắc phải */
.dong-cai-dat{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid var(--vien)}
.dong-cai-dat:last-child{border-bottom:0}
.dong-cai-dat b{display:block;font-size:14px}
.dong-cai-dat p{margin:2px 0 0;font-size:12.5px;color:var(--chu3);line-height:1.5}
.dong-cai-dat.mo b{color:var(--chu3)}

/* Chip vị trí trong danh sách nhân sự: ghế chính đậm */
.chip.ghe-chinh{background:var(--nhan);color:#fff}

/* ===== MA TRẬN PHÂN QUYỀN (v1.60) ===== */
.pq-khung{display:grid;grid-template-columns:240px 1fr;gap:16px;align-items:start}
@media(max-width:900px){.pq-khung{grid-template-columns:1fr}}
.pq-trai{position:sticky;top:12px;max-height:calc(100vh - 120px);overflow:auto;background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:8px}
.pq-vt{display:block;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--chu)}
.pq-vt:hover{background:var(--chim)}
.pq-vt.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.pq-vt small{color:var(--chu3);font-size:11px}
.pq-bang table{width:100%}
.pq-bang th{text-align:center;font-size:12px}
.pq-bang th:first-child{text-align:left}
.pq-bang td{text-align:center;padding:4px 6px}
.pq-bang td:first-child{text-align:left}
.pq-ph td{background:var(--chim);font-weight:600;font-size:12.5px;text-align:left;padding:6px 10px}
.pq-dong-tat td:first-child{opacity:.5}
.pq-o{display:inline-block;min-width:34px;height:26px;line-height:24px;border-radius:6px;border:1px solid var(--vien);
  background:var(--the);font-size:11.5px;font-weight:600;cursor:pointer;padding:0 6px;color:var(--chu2)}
.pq-o.vai{background:var(--chim)}
.pq-o.cap{background:var(--tot-nhat);color:var(--tot);border-color:var(--tot)}
.pq-o.thu{background:var(--loi-nhat);color:var(--loi);border-color:var(--loi);text-decoration:line-through}
.pq-o.tat{opacity:.35;cursor:not-allowed}
.pq-o.khong{color:var(--chu3);background:transparent}
.pq-o:hover:not(.tat){outline:2px solid var(--nhan)}
.pq-chu-giai{font-size:12.5px;color:var(--chu3);margin:10px 0}
.pq-chu-giai .pq-o{cursor:default;min-width:28px}

.cd-man{margin:0 0 6px 18px;padding:0 12px;border-left:2px solid var(--vien)}
.dong-cai-dat.nho{padding:7px 0}
.dong-cai-dat.nho b{font-size:13px}

/* ===== DẤU HIỆU (server/web/hieu.js) ===== */
.logo-d135{display:inline-flex;align-items:center;gap:8px;color:var(--nhan);line-height:1}
.logo-d135 .logo-chu{font-size:15px;letter-spacing:.02em;color:var(--chu)}
.logo-d135 .logo-chu b{font-weight:700}
.logo-d135 .logo-so{font-weight:500;color:var(--nhan);margin-left:4px}
.logo-d135 .logo-phu{display:block;width:100%;font-size:11px;color:var(--chu3);letter-spacing:.01em;margin-top:6px}
.logo-d135.sang .logo-chu,.logo-d135.sang .logo-chu b{color:#fff}
.logo-d135.sang .logo-so{color:var(--tim-goc)}
.logo-d135.sang{flex-wrap:wrap}
.hieu .logo-d135{margin-bottom:2px}
/* màn đăng nhập: navy VPSTTT, dấu tím gốc */
.dn{background:linear-gradient(160deg,var(--navy) 0%,#151c38 100%)}
.dn-hop h1{display:none}
.dn-hop .logo-d135{margin-bottom:6px}

/* ===== BỘ MẢNH CHUẨN v1.61 ===== */
.dai-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.dai-so .the.so{margin:0}
.the.so .n small{font-size:13px;font-weight:500;color:var(--chu3);margin-left:3px}
.xu{font-size:11.5px;font-weight:600;color:var(--chu3)}
.xu.tot{color:var(--tot)}.xu.loi{color:var(--loi)}
.mieng{color:var(--nhan);vertical-align:middle}
.thanh-tab{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.thanh-loc{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.bat-buoc{color:var(--loi)}
.xep-hang th.chinh,.xep-hang td.chinh{background:var(--nhan-nhat)}
.xep-hang tr.top td:first-child{color:var(--tot);font-weight:700}
.xep-hang tr.cuoi td:first-child{color:var(--canh);font-weight:700}

.thanh-loc select{width:auto;max-width:220px;flex:0 1 auto}
.thanh-loc > .hang:last-child{margin-left:auto;flex-wrap:wrap}

/* ===== CHỌN NHIỀU CÓ Ô TÌM (chung.js › chonNhieu) ===== */
.chon-nhieu{border:1px solid var(--vien);border-radius:9px;background:var(--the);overflow:hidden}
.chon-nhieu .cn-chip{display:flex;flex-wrap:wrap;gap:4px;padding:6px 6px 0}
.chon-nhieu .cn-chip:empty{display:none}
.chon-nhieu .cn-tim{width:100%;border:0;border-bottom:1px solid var(--vien);border-radius:0;padding:7px 10px;background:transparent}
.chon-nhieu .cn-tim:focus{outline:none;border-bottom-color:var(--nhan)}
.chon-nhieu .cn-list{overflow-y:auto}
.cn-muc{display:flex;align-items:flex-start;gap:8px;padding:5px 10px;font-size:13px;cursor:pointer}
.cn-muc:hover{background:var(--chim)}
.cn-muc.goi-y{background:var(--nhan-nhat)}
.cn-muc input[type=checkbox]{accent-color:var(--nhan);margin-top:3px;flex:none}
.cn-muc .cn-ten{min-width:0}
.cn-muc small{color:var(--chu3)}
.cn-muc .cn-sao{color:var(--nhan)}
.cn-muc .cn-vi-sao{color:var(--nhan)}
/* khoảng ngày theo tuần */
.kt-khoang{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.kt-khoang input[type=number]{width:64px}
.kt-ra{font-size:13px;color:var(--chu2);background:var(--chim);border-radius:8px;padding:6px 10px}
.kt-ra b{color:var(--chu)}
.kt-goi-y{background:var(--nhan-nhat);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px}
.kt-goi-y b{color:var(--nhan)}
.kt-goi-y .hang{gap:6px;flex-wrap:wrap;margin-top:6px}

/* ---- v1.62 · AI ghi chép bên ghế (aighichep.js) — chỉ dùng token, không mã màu ---- */
.ai-khoi{display:flex;flex-direction:column;gap:10px}
.ai-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ai-tt{font-size:12px;color:var(--chu3);padding:2px 8px;border:1px solid var(--vien);border-radius:999px}
.ai-tt.bat{color:var(--tot);border-color:var(--tot);font-weight:600}
.ai-muc{display:inline-block;width:90px;height:6px;background:var(--vien);border-radius:3px;overflow:hidden}
.ai-muc i{display:block;height:100%;background:var(--tot);width:0;transition:width .1s}
.ai-dk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.ai-dk label{display:flex;align-items:center;gap:4px}
.ai-go{flex:1;min-width:220px;padding:6px 9px;border:1px solid var(--vien);border-radius:7px;background:var(--the);color:var(--chu);font:inherit;font-size:13px}
.ai-loi{color:var(--loi);font-size:13px}
.ai-nhat-ky{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow:auto}
.ai-cau-khoi{border:1px solid var(--vien);border-radius:9px;padding:8px 10px;background:var(--the)}
.ai-cau-khoi.sai{border-color:var(--loi)}
/* LỜI KHÁCH nhìn phải KHÁC HẲN lời bác sĩ, ngay từ đuôi mắt: cả khối đổi nền và có vạch bên trái.
   Huy hiệu nhỏ xíu ở đầu dòng thì lúc bận không ai kịp đọc, mà đây đúng là chỗ không được đọc nhầm. */
.ai-cau-khoi.ai-cua-khach{background:var(--nen2,#f7f7f9);border-left:3px solid var(--nhan,#8b5cf6)}
.ai-nguoi{flex:none;min-width:30px;padding:1px 5px;border-radius:6px;border:1px solid var(--vien);
  background:var(--the);font-size:11px;font-weight:700;cursor:pointer;line-height:1.5}
.ai-nguoi-bs{color:var(--chinh,#0369a1);border-color:var(--chinh,#0369a1)}
.ai-nguoi-bn{color:var(--nhan,#8b5cf6);border-color:var(--nhan,#8b5cf6)}
.ai-nguoi-\?{color:var(--chu3);border-style:dashed}
.ai-khach-ke{border:1px dashed var(--nhan,#8b5cf6);border-radius:9px;padding:9px 11px;margin-top:8px}
.ai-khach-ke li{margin:3px 0}
/* CHỮ TẠM phải trông rõ ràng là CHƯA XONG: mờ, nghiêng, viền đứt. Một dòng chữ trông như đã ghi
   mà thật ra chưa ghi là kiểu hiểu nhầm đắt nhất trong cả khối này. */
.ai-cau-tam{border:1px dashed var(--vien);border-radius:9px;padding:7px 10px;margin-bottom:8px;
  opacity:.62;font-style:italic;background:transparent}
.ai-cau-tam small{color:var(--chu3);font-style:normal;display:block;margin-bottom:2px}
.ai-cau-dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.ai-cau{flex:1;min-width:240px;padding:4px 8px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--chu);font:inherit;font-size:14px}
.ai-cau:focus{border-color:var(--vien);background:var(--nen);outline:none}
.ai-gio,.ai-tin,.ai-da-sua{font-size:11px;color:var(--chu3)}
.ai-lenh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;padding:3px 0 3px 6px;border-left:3px solid var(--vien)}
.ai-lenh.ghi{border-left-color:var(--tot)}
.ai-lenh.cho{border-left-color:var(--canh)}
.ai-lenh.loai,.ai-lenh.loi{border-left-color:var(--loi)}
.ai-lenh.hoan,.ai-lenh.bo{opacity:.55;text-decoration:line-through}
.ai-lenh-tt{font-size:11px;font-weight:600;min-width:84px}
.ai-canh{color:var(--canh)}
.ai-cho .ai-lenh{border-left-color:var(--canh)}

/* ===== BẢNG DÒNG DỊCH VỤ (tờ báo giá lúc đặt hẹn) =====

   BẢY CỘT MANG Ô NHẬP TRONG MỘT HỘP THOẠI — bài toán chật nhất của phần mềm này, và bản
   trước thua nó ở cả ba chỗ (đo 18/09/2026, màn 1280px, hộp "Đặt lịch hẹn", 2 dòng dịch vụ):

     · sàn rộng của bảng **804px** trong lòng hộp **630px** → tràn **174px**;
     · không có khung cuộn riêng nên phần tràn đẩy vào `.hop`, tức phải kéo ngang CẢ BIỂU MẪU;
     · năm cột số khoá cứng bằng pixel (74+150+56+104+96) nên cột duy nhất còn co được lại
       chính là **TÊN DỊCH VỤ** — nó bị ép còn **84px**, "Trám bít hố rãnh" xuống ba dòng.
       Cột đáng đọc nhất là cột chịu trận: đó là dấu hiệu bảng đang tự sắp xếp ngược.

   Chữa theo đúng thứ tự ấy: `.bang-cuon` (ở JS) giữ phần tràn lại trong bảng · các ô số thu
   về bề rộng THẬT của nội dung (đơn giá bảy chữ số vừa 92px) · `min-width` cho cột tên để nó
   không còn là chỗ nhường. Còn dưới 760px thì bảy cột không cách nào xếp ngang được nữa —
   xem khối gập thành thẻ ở cuối phần này. */
.bdv .bang table{font-size:13px}
.bdv .bang th{white-space:nowrap}
.bdv .bang td{padding:5px 6px;vertical-align:middle}
.bdv .bang input,.bdv .bang select{padding:4px 7px;font-size:13px}
/* Luật chung `.hop .bang select{min-width:150px}` sinh ra cho những bảng một-hai ô chọn.
   Ở đây nó là 150px chết cứng giữa bảy cột — gỡ đúng trong phạm vi bảng này. */
.bdv .bang select{min-width:0}
.bdv .bdv-ten{min-width:124px}
.bdv .bdv-xoa{width:1%;white-space:nowrap}
.bdv .bdv-thanh{font-weight:600;text-align:right;white-space:nowrap}
.bdv .thieu-rang{border-color:var(--loi);background:var(--loi-nhat)}
.bdv-tong{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end;align-items:baseline;
  padding:9px 12px;background:var(--chim);border-radius:0 0 9px 9px;font-size:13px}
.bdv-tong > div{display:flex;gap:8px;align-items:baseline}
.bdv-tong .bdv-phai-tra{font-size:15px}
.bdv-tong .bdv-phai-tra b{color:var(--nhan);font-size:17px}
.bdv .cn-muc{cursor:pointer;text-decoration:none}

/* ---------- DƯỚI 760px: BẢNG GẬP THÀNH THẺ ----------

   Cuộn ngang là cách chữa TRÀN, không phải cách chữa CHẬT. Trên điện thoại lòng hộp còn
   ~330px mà bảng cần ~700px: để nguyên dạng bảng thì lễ tân phải kéo qua kéo lại bốn lần
   cho MỖI dòng — mà đây là lúc đang cầm điện thoại đọc giá cho khách nghe.

   Nên dưới 760px mỗi dòng thành một THẺ: tên dịch vụ trên cùng (thứ được đọc ra), nút bỏ dòng
   nép góc phải, rồi răng · mức độ, rồi SL · đơn giá · ưu đãi, và thành tiền đóng thẻ ở dòng
   cuối. Đầu cột biến mất nên nhãn in ra từ `data-nhan` của chính ô ấy — một nguồn, không có
   cơ hội lệch với đầu cột.

   760px chứ không phải 430px: sàn rộng của bảng là ~700px, nên đúng chỗ bảng hết vừa là đúng
   chỗ phải gập. Đặt ngưỡng ở kích thước điện thoại sẽ để lại một dải máy tính bảng mà bảng
   vẫn cuộn ngang — chữa nửa vời. */
@media (max-width:760px){
  .bdv .bang-cuon{overflow-x:visible}
  .bdv .bang table,.bdv .bang tbody,.bdv .bang tr,.bdv .bang td{display:block}
  .bdv .bang thead{display:none}
  .bdv .bang tbody tr{display:grid;gap:6px 10px;padding:10px 12px;align-items:center;
    grid-template-columns:76px minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"ten ten xoa" "rang muc muc" "sl gia uu" "thanh thanh thanh";
    border-bottom:1px solid var(--vien)}
  .bdv .bang tbody tr:last-child{border-bottom:0}
  .bdv .bang tbody td{padding:0;border:0}
  .bdv .bang tbody td:nth-child(1){grid-area:rang}
  .bdv .bang tbody td:nth-child(2){grid-area:ten}
  .bdv .bang tbody td:nth-child(3){grid-area:muc}
  .bdv .bang tbody td:nth-child(4){grid-area:sl}
  .bdv .bang tbody td:nth-child(5){grid-area:gia}
  .bdv .bang tbody td:nth-child(6){grid-area:uu}
  .bdv .bang tbody td:nth-child(7){grid-area:thanh}
  /* `width:1%` là mẹo của DẠNG BẢNG để cột nút co sát nội dung. Ở dạng lưới nó thành một ô
     rộng 1% thật (~3px) và cái nút 34px thò ra ngoài mép phải — đo được 21px. Trả về auto. */
  .bdv .bang tbody td:nth-child(8){grid-area:xoa;justify-self:end;width:auto}
  /* Nhãn cột hoá nhãn ô. Chỉ TÊN là không cần — nó tự nói được nó là gì. Ô RĂNG thì CẦN:
     khi trống nó chỉ là một khung đỏ ghi "bắt buộc", không nhãn thì không ai đoán ra bắt buộc
     điền GÌ vào đó. */
  .bdv .bang tbody td[data-nhan]::before{content:attr(data-nhan);display:block;
    font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--chu3);margin-bottom:2px}
  .bdv .bang tbody td.bdv-ten::before{content:none}
  .bdv .bang tbody td.bdv-ten{font-size:14px;line-height:1.35}
  /* Dòng thành tiền: nhãn và số nằm cùng hàng, gạch ngang mảnh tách khỏi phần nhập phía trên. */
  .bdv .bang tbody td.bdv-thanh{display:flex;justify-content:space-between;align-items:baseline;
    border-top:1px dashed var(--vien);padding-top:6px;font-size:15px}
  .bdv .bang tbody td.bdv-thanh::before{margin:0}
  /* Ô nhập lấp đầy ô lưới thay vì giữ bề rộng pixel của bảng — trên thẻ đã có chỗ. */
  .bdv .bang tbody td:nth-child(1) input,
  .bdv .bang tbody td:nth-child(4) input{width:100%!important}
  .bdv .bang tbody td:nth-child(5) input,
  .bdv .bang tbody td:nth-child(6) input{width:100%!important;text-align:right}
  /* Ô "chưa có dòng nào" là một `td colspan=8` — ở dạng thẻ nó phải trải hết bề ngang, nếu
     không nó rơi vào ô lưới đầu tiên rộng 76px. */
  .bdv .bang tbody td[colspan]{grid-column:1 / -1}
}

/* v1.62 · AI: nút nhỏ trong thanh phiếu + ngăn kéo ẩn */
.ai-goc{display:inline-flex;align-items:center;gap:6px;margin-left:auto}
.ai-nut{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--vien);border-radius:999px;background:var(--the);color:var(--chu2);font:inherit;font-size:13px;cursor:pointer}
.ai-nut .ai-cham{width:8px;height:8px;border-radius:50%;background:var(--vien);display:inline-block}
.ai-nut.bat{border-color:var(--tot);color:var(--tot);font-weight:600}
.ai-nut.bat .ai-cham{background:var(--tot)}
.ai-nut.loi{border-color:var(--loi);color:var(--loi)}
.ai-nk{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:92vw;background:var(--the);border-left:1px solid var(--vien);box-shadow:var(--bong);z-index:60;display:flex;flex-direction:column}
.ai-nk[hidden]{display:none}
.ai-nk-dau{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--vien)}
.ai-nk-dau b{flex:1}
.ai-nk-than{padding:12px 14px;overflow:auto;flex:1}
.ai-nk .ai-go{width:100%;box-sizing:border-box;margin:8px 0}
.ai-nk .ai-nhat-ky{max-height:none}
/* AI bên ghế — đề xuất bổ sung (lượt hậu kiểm) */
.ai-de-xuat{margin-top:6px;padding:6px 8px;border:1px dashed var(--vien);border-radius:8px;background:var(--nen2,#faf9ff);font-size:12.5px}
.ai-dx-tieu-de{font-weight:700;color:var(--chu2);margin-bottom:4px}
.ai-dx-dong{padding:4px 0;border-top:1px dotted var(--vien)}
.ai-dx-dong:first-of-type{border-top:0}
.ai-dx-cum{color:var(--chu)}
.ai-dx-ts{color:var(--loi);font-weight:600}

/* BĂNG PHƯƠNG ÁN CỦA KHÁCH — một dòng, một hành động. Nút nằm cùng hàng với chữ, không xuống dòng
   thành một khối riêng: băng chiếm hai dòng là băng đã bắt đầu thành bảng thông báo. */
.ai-bang-kh { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.ai-bang-kh > span { flex:1 1 auto; }
.ai-bang-kh .nut { flex:0 0 auto; }
/* Nháy viền khi băng cuộn tới một thẻ — để mắt bắt được thẻ nào vừa được chỉ đến. */
@keyframes nhay-vien { 0%,100% { box-shadow:none } 30%,70% { box-shadow:0 0 0 3px var(--vang, #f5a623) } }
.the-chan-doan.nhay { animation: nhay-vien 1.5s ease-in-out; }
@media (prefers-reduced-motion: reduce) { .the-chan-doan.nhay { animation:none; outline:2px solid var(--vang, #f5a623) } }

/* MENU "…" của thẻ — việc hiếm lùi vào đây để mặt tiền chỉ còn một nút chính mỗi thẻ. */
.menu-nho{position:absolute;z-index:60;min-width:210px;padding:5px;border-radius:9px;
          background:var(--the);border:1px solid var(--vien);box-shadow:0 8px 26px rgba(0,0,0,.14)}
.menu-muc{display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:6px;
          background:none;font:inherit;font-size:13px;color:var(--chu);cursor:pointer}
.menu-muc:hover,.menu-muc:focus-visible{background:var(--nen2, rgba(0,0,0,.05))}
.menu-muc.nguy{color:var(--loi)}

/* Bản nháp máy soạn: mờ hơn chữ thật, để mắt biết đây là đề nghị chứ không phải điều đã ghi. */
.gt.nhap-may{color:var(--chu3);font-style:italic;white-space:pre-wrap}

/* =====================================================================================
   NỀN TẢNG DÙNG CHUNG — đợt nâng cấp UX/UI (v1.70)

   Khối này KHÔNG thay luật thiết kế (docs/THUONG-HIEU-THIET-KE.md) — nó áp luật ấy cho
   đều hơn ở đúng những chỗ mà 50 tệp giao diện cùng đi qua: bảng, trạng thái rỗng, thẻ,
   hộp thoại, tiêu điểm bàn phím. Đặt ở CUỐI tệp để không phải sửa lại 50 quy tắc cũ và để
   mọi thứ nó siết lại nằm trong một khối đọc được một mạch.

   Luật xuyên suốt: một màn chỉ có MỘT màu nhấn, ba màu trạng thái giữ nguyên nghĩa, và mọi
   màu vẫn là token — không mã màu mới nào ngoài `:root`.
   ===================================================================================== */

/* ---------- ① NHỊP DỌC: một thang, không mỗi màn một kiểu ----------
   8 · 12 · 16 · 24 (luật §2.10). Biến hoá để màn mới không phải đoán số. */
:root{
  --d1:8px; --d2:12px; --d3:16px; --d4:24px; --d5:32px;
  --bo-o:8px; --bo-the:12px; --bo-hop:16px;
  --cao-o:36px;                       /* chiều cao chuẩn của ô nhập và nút — toolbar không so le */
  --vien-mem:color-mix(in srgb, var(--vien) 62%, transparent);
  --bong-the:0 1px 2px rgba(20,20,40,.04), 0 1px 3px rgba(20,20,40,.03);
  /* `--vang` được hai chỗ dùng mà chưa từng được khai: `@keyframes nhay-vien` và nhánh
     `prefers-reduced-motion` của nó rơi về mã hex gõ cứng — tức luật "mọi màu là token" bị
     phá từ chính chỗ không ai đọc. Nay nó là token thật, cùng họ với `--canh`. */
  --vang:#D9A441;
}
@media (prefers-color-scheme:dark){:root{--vang:#E0B45C;}}

/* ---------- ② BẢNG: kẻ mảnh, không sọc ngựa vằn, rê chuột nâng cả dòng ----------
   Nguồn: kho tham chiếu thiết kế Inspo — archetype "comparison table": *"thin rules, no zebra
   striping (zebras shout), hover lifts the row so the eye can track across columns without a
   colour change."* Giữ đúng tinh thần ấy, chỉ khác là dòng ở đây bấm được. */
.bang{border-radius:var(--bo-the)}
.bang th{background:var(--chim);border-bottom:1px solid var(--vien)}
.bang td{border-bottom:1px solid var(--vien-mem)}
/* Dòng cuối không kẻ: đường kẻ ấy trùng viền khung, nhìn thành hai nét. */
.bang tbody tr:last-child td{border-bottom:0}
.bang tbody tr:hover td{background:var(--nhan-nhat)}
.bang tbody tr.bam{cursor:pointer}
/* Cột số và tiền thẳng cột theo chữ số — mắt so sánh được mà không cần đọc từng số. */
.bang td.tien,.bang td.mono,.bang th.so{font-variant-numeric:tabular-nums}
/* Đầu cột BẤM ĐƯỢC để sắp xếp (chung.js › bangDl): con trỏ và mũi tên chỉ hiện khi có tác dụng. */
.bang th.sap-xep{cursor:pointer;user-select:none;white-space:nowrap}
.bang th.sap-xep:hover{color:var(--chu)}
.bang th.sap-xep::after{content:'';display:inline-block;width:0;margin-left:4px}
.bang th.sap-xep[data-chieu="tang"]::after{content:'▲';font-size:8px;color:var(--nhan)}
.bang th.sap-xep[data-chieu="giam"]::after{content:'▼';font-size:8px;color:var(--nhan)}
/* Bảng NHIỀU dòng thì đầu cột dính lại khi cuộn — đọc dòng thứ 60 vẫn biết cột nào là cột nào. */
.bang.dinh thead th{position:sticky;top:0;z-index:2}

/* ---------- ③ TRẠNG THÁI RỖNG: nói việc kế tiếp, không phải "Chưa có dữ liệu" ----------
   Luật §2.5. `trong()` cũ chỉ có hai dòng chữ; thêm được BIỂU TƯỢNG và NÚT HÀNH ĐỘNG
   (chung.js › trong có tham số thứ ba) để màn rỗng vẫn là một màn có việc để làm. */
.trong{display:flex;flex-direction:column;align-items:center;gap:2px}
.trong .trong-ico{font-size:26px;line-height:1;opacity:.5;margin-bottom:6px}
.trong .trong-viec{color:var(--chu3);font-size:13px;max-width:52ch}
.trong .trong-nut{margin-top:12px}
/* Trạng thái rỗng nằm TRONG bảng: bỏ nền ám của ô để nó đọc như một khối, không như một dòng. */
.bang td .trong{padding:36px 20px}
.bang tr:only-child td{border-bottom:0}

/* ---------- ④ THẺ & KHỐI: một độ nổi, không bóng nặng ---------- */
.the{box-shadow:var(--bong-the)}
.the.bam{cursor:pointer;transition:border-color .12s, box-shadow .12s, transform .12s}
.the.bam:hover{border-color:var(--nhan);box-shadow:var(--bong)}
.the.bam:active{transform:translateY(1px)}
/* Thẻ có TIÊU ĐỀ RIÊNG (h3 bên trong .the) — khoảng cách đều nhau giữa các khối cùng màn. */
.the > h3:first-child{margin:0 0 10px;font-size:15px;font-weight:650}

/* ---------- ⑤ HỘP THOẠI: nền mờ, đầu/cuối dính, Esc luôn thoát ---------- */
.lop{background:color-mix(in srgb, var(--navy) 52%, transparent);backdrop-filter:blur(2px)}
.hop{border:1px solid var(--vien);border-radius:var(--bo-hop);max-width:min(680px,94vw);padding:22px 24px}
.hop h3{font-size:18px;letter-spacing:-.01em}
.hop-hoi{max-width:520px}
/* Hộp dài: phần thân cuộn, nút Lưu ở chân KHÔNG trôi mất. */
.hop > .hang:last-child{position:sticky;bottom:-22px;background:var(--the);padding:14px 0 2px;margin-top:16px}

/* ---------- ⑥ TIÊU ĐIỂM BÀN PHÍM: mọi thứ bấm được đều thấy mình đang ở đâu ----------
   Trước khối này chỉ một vài chỗ tự khai `:focus-visible`, nên đi bằng Tab thì phần lớn màn
   hình không nói người dùng đang đứng ở nút nào. Một quy tắc chung, một vòng tiêu điểm. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--nhan);outline-offset:2px;border-radius:var(--bo-o)}
:where(.ben a,.chip,.cn-muc):focus-visible{outline-offset:0}
/* Ô nhập đang lỗi: viền đỏ, và CHỈ viền — không đổi nền, để chữ vẫn đọc được. */
input.o-loi,select.o-loi,textarea.o-loi{border-color:var(--loi);background:var(--loi-nhat)}

/* ---------- ⑦ CHI TIẾT NHỎ ĂN CẢ MÀN ---------- */

/** NÚT SƠ CẤP VÀ NÚT PHỤ CAO BẰNG NHAU — bằng cách cho cả hai cùng có viền.

    Đo được trên chính phần mềm (16/09/2026): trong CÙNG một hàng, `.nut` (nút đậm, không viền)
    cao **30px** còn `.nut.phu` (nút phụ, có `border:1px`) cao **32px** — vì `box-sizing:border-box`
    tính cả viền vào chiều cao, mà nút đậm thì không có viền nào để tính. Một hàng có "Lưu" cạnh
    "Huỷ" là hai nút lệch nhau 2px, và mắt bắt được ngay dù không gọi tên được.

    Cách sửa: nút đậm nhận một viền TRONG SUỐT cùng độ dày. Không đổi màu, không đổi bề rộng
    chữ — chỉ đổi chiều cao, và đổi cho cả hai loại cùng lúc nên không có gì phải chỉnh lại. */
.nut{border:1px solid transparent}
.nut.nho{border-width:1px}
.nut,.thanh-loc .o-tim,input[type=date],input[type=search],select{min-height:var(--cao-o)}
.nut,.chip,.the.bam{transition:background-color .12s,border-color .12s,color .12s,filter .12s}
/* Nút NGUY HIỂM: hành động không lùi được phải khác nút thường, không chỉ khác chữ. */
.nut.nguy{background:var(--loi)}
.nut.nguy:hover{filter:brightness(1.1)}
/* Thanh cuộn mảnh — bảng lịch và danh sách dài cuộn rất nhiều, thanh cuộn mặc định ăn chỗ. */
*{scrollbar-width:thin;scrollbar-color:var(--vien) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:var(--vien);border-radius:20px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--chu3);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
/* Nội dung chỉ-đọc trong bảng dài: số điện thoại, mã khách — chọn được, không xuống dòng. */
.mono,.ma-kh{font-variant-numeric:tabular-nums}

/* ---------- ⑧ CHUYỂN ĐỘNG: tôn trọng lựa chọn của hệ điều hành ----------
   Trước khối này chỉ ba chỗ tự tắt hiệu ứng. Người bật "giảm chuyển động" thường bật vì
   chóng mặt — không phải vì khó tính. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- ⑨ NỀN TỐI: những chỗ còn sót màu sáng ----------
   Chế độ tối đã có token từ đầu, nhưng vài mảng tự đặt nền sáng vẫn giữ nguyên trong tối —
   lịch, ô rỗng, và dải ngày. Đây là chỗ vá, không phải bảng màu thứ hai. */
@media (prefers-color-scheme:dark){
  .lop{background:rgba(0,0,0,.62)}
  .nut{color:#12102A}
  .nut.phu{color:var(--chu2)}
  .bang tbody tr:hover td{background:var(--nhan-nhat)}
  .rang-so.chon{color:#12102A}
  .chip{background:var(--chim)}
  .hop > .hang:last-child{background:var(--the)}
}
/* Ô nhập trong nền tối: viền phải đọc được, `--vien` tối khá gần nền thẻ. */
@media (prefers-color-scheme:dark){
  input,select,textarea{background:var(--the)}
  input:hover,select:hover,textarea:hover{border-color:var(--chu3)}
}

/* =====================================================================================
   SÁU CLASS GIAO DIỆN GỌI MÀ CHƯA TỪNG CÓ LUẬT CSS

   Đo được ngày 16/09/2026 bằng cách đối chiếu từng tên class trong `server/web/*.js` với
   `app.css`: sáu cái dưới đây được các màn phát ra nhưng không có một dòng luật nào, nên
   chúng im lặng không làm gì. Đây đúng loại lỗi mà một phép thử không bắt được — mã vẫn
   chạy, màn vẫn vẽ, chỉ là thứ đáng lẽ ra phải khác thì y nguyên.

   Sửa ở đây, một chỗ, thay vì đi sửa từng màn: cùng một tên class ở năm tệp thì phải có
   cùng một nghĩa.
   ===================================================================================== */

/* ① `.moc.bam` — dòng mốc BẤM ĐƯỢC. `kham.js:46` và `khachhang.js:217,230,238,244` phát nó
   cho những dòng mở ra chi tiết, nhưng không có luật nào nên con trỏ vẫn là mũi tên và rê
   chuột không có phản hồi: người dùng không biết dòng ấy bấm được. */
.moc.bam{cursor:pointer;border-radius:var(--bo-o);transition:background-color .12s}
.moc.bam:hover{background:var(--chim)}
.moc.bam:focus-visible{outline:2px solid var(--nhan);outline-offset:-2px}

/* ② `.mo` — dòng phụ mờ. Nghĩa này đã có ở bảy chỗ dưới dạng ghép (`.ben a.con.mo`,
   `.vt-ky.mo`…) nhưng chưa bao giờ đứng một mình, trong khi `viectoi.js` và `viecpc.js` phát
   nó trần cho dòng "mã khách · SĐT" nằm ngay dưới tên đậm — hai dòng cùng cỡ, cùng màu. */
.mo{color:var(--chu3);font-size:12.5px;line-height:1.45}

/* ③ `.phai` — đẩy sang phải trong một `.hang`. `viecpc.js` dùng nó cho số tiền; thiếu luật
   nên số tiền nằm sát lề trái, ngay sau nhãn, đọc thành một cột số không thẳng hàng. */
.hang > .phai{margin-left:auto}
td.phai,th.phai{text-align:right;font-variant-numeric:tabular-nums}

/* ④ `.cot` — xếp dọc có nhịp. Năm hộp thoại của `viectoi.js` gọi nó kèm `style="gap:…"`, mà
   `gap` trên một `div` block KHÔNG có tác dụng: các ô dính liền nhau, không có khoảng thở. */
.cot{display:flex;flex-direction:column;gap:var(--d2)}

/* ⑤ `.the.so` mang màu trạng thái. `viectoi.js:140` ghép `'the so ' + mau` cho ba thẻ số
   ("công nợ còn lại", "labo trễ", "tái khám đúng hẹn") — không luật nào nên thẻ nợ xấu
   trông y hệt thẻ lành. Luật §1.3: màu trạng thái chỉ mang nghĩa trạng thái, và đây đúng
   nghĩa ấy — một vạch màu bên trái, KHÔNG tô nền, để con số vẫn là thứ đọc trước. */
.the.so{position:relative;overflow:hidden}
.the.so::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.the.so.tot::before{background:var(--tot)}
.the.so.canh::before{background:var(--canh)}
.the.so.loi::before{background:var(--loi)}
.the.so.nhan::before{background:var(--nhan)}

/* ⑥ `.nhan-o` — nhãn của một ô chỉ-đọc. `khachhang.js:149` gọi `el('label')` cho sáu trường
   chỉ hiển thị: một `<label>` không trỏ tới ô nhập nào là nhãn giả, và trình đọc màn hình
   đọc nó thành nhãn của ô kế tiếp. Đây là `div` mang đúng hình dáng ấy, không mang nghĩa ô. */
.nhan-o{display:block;font-size:12.5px;color:var(--chu3);margin-bottom:5px;font-weight:500}

/* ⑦ `.khoi-dau` — tiêu đề một khối trong màn. Bốn màn đang tự viết inline với bốn cỡ khác
   nhau (15px · 16px · 16px · 11.5px in hoa) và bốn nhịp margin khác nhau. Một class, một tầng. */
.khoi-dau{margin:0 0 var(--d2);font-size:16px;font-weight:650;letter-spacing:-.01em}
.khoi-dau .dem{margin-left:8px;font-size:12px;font-weight:500;color:var(--chu3)}

/* ⑧ `.chu3` — chữ phụ. `chung.js` và `lichhen.js` phát class này ở 17 chỗ (`el('small',
   {class:'chu3'})`, `el('div',{class:'chu3'})`) nhưng `app.css` **chưa từng có rule nào** cho
   nó: dòng phụ render đúng cỡ và đúng màu của dòng chính, nên hai tầng chữ nằm chung một tầng.
   Một dòng luật, 17 chỗ được sửa. */
.chu3{color:var(--chu3)}
small.chu3,.chu3 small{font-size:12.5px}

/* ⑨ Đầu cột BẤM ĐƯỢC của màn danh sách dùng chung (`generic.js`) — sắp xếp do MÁY CHỦ làm.
   Khác `th.sap-xep` (sắp xếp tại trình duyệt trên những dòng đã có): cái này gọi lại API nên
   sắp đúng cả bảng chứ không chỉ trang đang xem. */
.bang th .th-sap{display:inline-flex;align-items:center;gap:4px;cursor:pointer;
  border-radius:6px;padding:2px 4px;margin:-2px -4px;transition:background-color .12s,color .12s}
.bang th .th-sap:hover{background:var(--nhan-nhat);color:var(--nhan)}
.bang th .th-sap.dang{color:var(--nhan)}
/* Ô tìm: mặc định vừa phải; khi nằm trong THANH LỌC thì nở ra chiếm chỗ còn lại.
   `text-overflow` không phải chuyện thẩm mỹ: trên màn 430px, chuỗi gợi ý dài hơn ô nên nó bị
   cắt giữa chữ — đọc ra một câu cụt thay vì một câu gợi ý. */
.o-tim{width:min(340px,100%);text-overflow:ellipsis}
.o-tim::placeholder{text-overflow:ellipsis}
.thanh-loc .o-tim{flex:1 1 260px;min-width:200px;max-width:none}
/* Ô nhập trong SUỐT lúc chưa được trỏ vào: viền xám vẽ sẵn một khung quanh ô rỗng, làm ô tìm
   trên màn hẹp trông như đang được chọn. */
input[type=search]{background:var(--the)}

/* ⑪ `.the` BỌC `.bang` — bỏ khung trong, giữ khung ngoài.

   Nhiều màn đặt `bangDl()` vào trong một `.the` (hoadon.js, congno.js, khovetinh.js…), mà cả
   hai đều là khung: `.the` có viền + bo góc + bóng, `.bang` cũng có viền + bo góc. Kết quả là
   hai đường viền cách nhau vài pixel và hai bán kính bo góc không đồng tâm — nhìn như lỗi vẽ
   chứ không như một khối. Đo 16/09/2026: 3 chỗ chỉ riêng màn Hoá đơn.

   Luật: khung NGOÀI là khung. Bảng nằm trong một khung rồi thì không tự làm khung nữa. */
.the > .bang{border:0;border-radius:0;box-shadow:none;background:transparent}

/* ⑩ MÀN LƯỚI ĐƯỢC BỀ NGANG — `rong: true` trên màn (MAN_TAY), `.khung.rong` do `ve()` gắn.

   Trần `max-width` của `.chinh` là luật cho màn ĐỌC: dòng chữ quá dài thì mắt phải quay đầu.
   Nhưng Lịch hẹn và Khu vực Điều trị không phải màn đọc — chúng là LƯỚI, và lưới bị trần ấy
   bóp: đo được lưới lịch cần 1876px mà chỉ nhận 898px, tức là hiện 4 trong 9 cột bác sĩ, trong
   khi màn 1600px còn 420px trống nằm chết ở hai bên.

   Chỉ bỏ trần, KHÔNG bỏ lề: lề 24px giữ cho nội dung không dính mép màn hình. Thanh bên thu
   lại 16px để phần lưới được thêm chút nữa. */
.khung.rong .chinh{max-width:none;padding:26px 24px 60px}
@media (min-width:1100px){
  .khung.rong{grid-template-columns:236px minmax(0,1fr)}
  /* GON PHẢI THẮNG RONG — hai cờ độc lập về ý nghĩa nhưng cùng ghi vào MỘT thuộc tính.
     `.khung.gon` khai ở đầu tệp (dòng ~70), `.khung.rong` khai ở đây; hai bộ chọn CÙNG độ
     ưu tiên (0,2,0) nên cái khai SAU thắng — tức `rong` luôn thắng. Hậu quả đo được
     18/09/2026: ở Lịch hẹn và Khu vực Điều trị (đúng hai màn mang cờ `rong`), bấm nút « thì
     class `gon` được gắn mà thanh bên vẫn 236px — **nút thu gọn không có tác dụng** trên mọi
     màn ≥1100px. Ở 10 màn còn lại nút chạy bình thường, nên lỗi này lọt qua mọi lần thử tay.
     Ai gập thanh bên là đang XIN CHỖ cho lưới; ý ấy phải thắng. */
  .khung.rong.gon{grid-template-columns:52px minmax(0,1fr)}
}


/* =====================================================================================
   VỎ ỨNG DỤNG — thanh bên, mục đang mở, ngăn kéo màn hẹp (v1.70)

   Thanh bên là chỗ được nhìn nhiều nhất trong cả phần mềm: 37 màn trong 7 nhóm, mỗi lần
   đổi màn là mỗi lần mắt đi qua nó. Ba thứ dưới đây sửa đúng ba chỗ mắt phải làm việc mà
   không được trả công.
   ===================================================================================== */

/* ① MỤC ĐANG MỞ phải nhận ra được TỪ ĐUÔI MẮT, không phải đọc chữ.
   Bản cũ chỉ đổi nền sang tím nhạt — trên nền thẻ trắng, giữa 37 mục na ná nhau, một nền
   nhạt là tín hiệu yếu. Nay thêm một vạch màu ở lề trái (dấu hiệu mạnh nhất và không tốn
   thêm bề ngang) và đậm chữ lên. */
.ben a.chon{position:relative;background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.ben a.chon::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--nhan)}
.ben a.con.chon::before{top:5px;bottom:5px}
/* Nhóm đang chứa màn mở: nhãn nhóm sáng lên, để biết mình đang ở nhánh nào khi nhóm gập. */
.ben a.nhom.co{color:var(--nhan)}

/* ② NHỊP THANH BÊN: mục 36px, nhóm có khoảng thở trước nó. Trước đây `gap:2px` trên toàn
   thanh làm mọi mục dính thành một khối chữ, không đọc ra được đâu là nhóm. */
.ben{gap:1px;padding:14px 12px 18px}
.ben a{padding:8px 11px}
.ben a.con{padding:6px 10px}
.nhan-nhom{padding:18px 11px 6px}
.ben a.nhom{margin-top:2px;padding:7px 11px;border-radius:var(--bo-o)}
.con-nhom{margin-top:2px}

/* ③ KHỐI TÀI KHOẢN ở chân thanh bên: tách hẳn khỏi danh sách màn bằng một khoảng thở, và
   nút Đăng xuất là một nút thật — trước đây nó là chữ tím trần nằm ngay dưới tên người dùng,
   đọc như một dòng thông tin chứ không như một hành động. */
.toi{margin-top:var(--d4);border-top:1px solid var(--vien);padding:14px 11px 4px}
.toi b{font-size:13.5px}
.toi .toi-vai{font-size:12px;color:var(--chu3)}
.toi button{margin-top:10px;align-self:flex-start;background:none;border:1px solid var(--vien);
  border-radius:var(--bo-o);color:var(--chu2);cursor:pointer;padding:5px 11px;font-size:12.5px;
  min-height:30px;transition:background-color .12s,border-color .12s,color .12s}
.toi button:hover{background:var(--loi-nhat);border-color:var(--loi);color:var(--loi)}

/* ④ NGĂN KÉO MÀN HẸP — nút mở và lớp phủ.
   Thanh bên ở màn hẹp trước đây là một khối cao tới 46vh nằm ĐÈ LÊN đầu nội dung: mở phần
   mềm trên máy tính bảng là phải cuộn qua 37 mục trước khi thấy việc của mình. Nay nó là
   ngăn kéo trượt, đóng sẵn, mở bằng một nút — và TỰ ĐÓNG khi chọn xong một màn.

   `.lop-ben` phải `display:none` NGOÀI màn hẹp, và đây không phải chuyện thẩm mỹ: `.khung`
   là một lưới hai cột, nên một phần tử thứ ba nằm trong luồng sẽ bị đẩy xuống HÀNG DƯỚI và
   chiếm mất ô của nội dung — đo được ngay lần dựng đầu: `chinhW` còn 252px. */
.lop-ben{display:none}
.nut-mo-ben{display:none}
/* Lớp bọc nút-mở-thanh-bên: `display:contents` để nó KHÔNG tạo hộp lưới nào — `.khung` vẫn
   là lưới hai cột nhận đúng hai con của nó. */
.vo-app{display:contents}
@media (max-width:820px){
  .khung{grid-template-columns:1fr}
  .ben{position:fixed;left:0;top:0;bottom:0;width:280px;max-height:100vh;z-index:80;
       height:100dvh;border-right:1px solid var(--vien);border-bottom:0;
       transform:translateX(-100%);transition:transform .18s ease-out;overflow-y:auto;
       box-shadow:0 0 40px -12px rgba(0,0,0,.45)}
  .khung.ben-mo .ben{transform:none}
  .lop-ben{display:block;position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:79;border:0;padding:0}
  .khung:not(.ben-mo) .lop-ben{display:none}
  .chinh{padding:56px 16px 48px}
  /* Nút mở thanh bên: `fixed` vì nó nằm ngoài `.chinh`, và `.chinh` được chừa 56px đỉnh để
     tiêu đề màn không chui xuống dưới nó. */
  /* ---------- TRÊN ĐIỆN THOẠI: KHÔNG GHIM LỚP PHỤ TRỢ, CHỈ GHIM TIÊU ĐỀ CỘT ----------

     Ghim `.thanh-lich` trên màn hẹp là ghim luôn tiêu đề màn + cụm ngày + cụm chế độ + hai nút
     hành động — đo được chiếm gần một phần ba màn hình, và nó đứng đó suốt trong khi người ta
     chỉ muốn kéo xem lịch. Thứ đáng ghim khi đang đọc lưới là HÀNG TIÊU ĐỀ CỘT: không có nó thì
     cuộn tới trưa là không biết cột nào của ai.

     Nên: thanh công cụ trôi đi như mọi nội dung khác, và bỏ trần chiều cao của `.lich` để lưới
     KHÔNG còn là một hộp cuộn lồng trong trang — trang tự cuộn, `.lich-dau-cot` (sticky top:0)
     bám mép trên khung nhìn, và khi cuộn hết bảng thì nó rời ra theo đúng lẽ tự nhiên.
     `overflow-y:clip` giữ cho cuộn NGANG vẫn nằm trong lưới mà không dựng lại một hộp cuộn dọc. */
  .thanh-lich{position:static}
  /* Lấy lại từng pixel cho lưới: cột giờ hẹp hơn (nhãn "08:00" chỉ cần 38px), lề trang mỏng
     hơn, và bảng bỏ bo góc/viền ngoài — trên một màn 375px thì 3 thứ ấy cộng lại là gần 60px,
     tức thêm được gần nửa một cột bác sĩ. */
  .khung .chinh{padding-left:8px;padding-right:8px}
  .lich{--rong-gio:38px;border-radius:0;border-left:0;border-right:0;margin-left:-8px;margin-right:-8px}
  .lich-hang{font-size:9.5px;padding-right:3px}
  /* `:not(.cot-phu-ta)` là BẮT BUỘC: `flex-basis` của luật này đặc hiệu hơn `.cot-phu-ta{flex:none}`
     nên nếu quét cả cột team thì nó bị bóp về 132px, và hai nút ×2 ×3 bên dưới thành vô nghĩa.
     Đây là lần thứ NĂM `flex-basis` nuốt `width` trong tệp này. */
  .lich-cot:not(.cot-phu-ta){flex-basis:132px;min-width:132px}
  /* Lưới cao gần trọn khung nhìn, và tự cuộn bên trong: kéo trang tới đây là nó chiếm cả màn,
     hàng tiêu đề cột ghim lại ở mép trên của chính nó, cuộn hết bảng thì trang đi tiếp.
     `dvh` chứ không `vh`: trên iOS `vh` tính theo khung nhìn LỚN NHẤT (lúc thanh địa chỉ đã
     thu), nên dùng `vh` là lưới luôn cao hơn chỗ thật có và đáy bảng nằm dưới thanh công cụ. */
  .lich,.lich.gon{max-height:calc(100dvh - 10px)}
  /* NÚT NÍU cho lưới về đúng mép trên. Trang vẫn cuộn tự do, nhưng khi ngón tay rời ra gần chỗ
     lưới thì nó tự khớp lên đầu khung nhìn — từ đó trở đi mọi cú vuốt là cuộn TRONG lưới, và
     hàng tiêu đề cột ghim ở mép trên. Cuộn hết bảng thì trang đi tiếp như thường.
     `proximity` chứ không `mandatory`: mandatory là ép, và ép người dùng ở một trang dài là
     cách nhanh nhất để họ không tới được chỗ mình muốn. */
  .chinh{scroll-snap-type:y proximity}
  .lich-bo{scroll-snap-align:start;scroll-margin-top:4px}
  .nut-mo-ben{display:inline-flex;position:fixed;left:14px;top:12px;z-index:78;
    align-items:center;gap:8px;background:var(--the);border:1px solid var(--vien);
    border-radius:var(--bo-o);min-height:36px;padding:0 13px;font-size:13.5px;font-weight:600;
    color:var(--chu2);cursor:pointer;box-shadow:var(--bong-the)}
  .nut-mo-ben:hover{border-color:var(--nhan);color:var(--nhan)}
}
@media (prefers-reduced-motion:reduce){.ben{transition:none}}

/* ---------- Ô NHẬP TRONG THANH CÔNG CỤ CAO BẰNG NÚT ĐỨNG CẠNH ----------
   `min-height:var(--cao-o)` chỉ là chiều cao TỐI THIỂU: nút `.nut.nho` tự cao 32px nên bị kéo
   lên đúng 36px, còn ô nhập lấy font 15px/1.55 + đệm 9px+9px + viền = 43,25px nên min-height
   không chạm tới. Chênh 7px, và vì `align-items:center` nên cả mép trên lẫn mép dưới đều so le
   — hai hàng công cụ trông gợn sóng. Ghim chiều cao THẬT cho ô nhập trong đúng hai thanh ấy. */
.thanh-lich input:not([type=checkbox]):not([type=radio]),
.thanh-lich select,
.thanh-loc input:not([type=checkbox]):not([type=radio]),
.thanh-loc select{height:var(--cao-o);padding-top:0;padding-bottom:0}

/* =====================================================================================
   MẶT BỘ LỌC LỊCH HẸN v1.74 — cửa sổ nhỏ neo dưới nút

   Không có ngăn nằm trong luồng: mỗi mục lọc (và cả Chú giải, dải Off) là một cửa sổ neo dưới
   nút của chính nó, nên mở ra KHÔNG đẩy lưới xuống. `.loc-oanh` là mỏ neo — cửa sổ tuyệt đối
   phải nằm trong nó, vì cái nghe "bấm ra ngoài thì đóng" nhận diện bằng `closest('.loc-oanh')`.

   `.loc-chon` là lớp MỚI, cố ý không tái dùng `.chip.bam`: luật `.chip.bam:not(.nhan)` đã mang
   sẵn nghĩa "đang TẮT" (mờ 45% + gạch ngang), nên dùng nó cho chip lọc thì lúc chưa chọn gì cả
   cửa sổ trông như đã bị vô hiệu hoá toàn bộ.
   ===================================================================================== */
.loc-oanh{position:relative;display:inline-flex}
.loc-cua{position:absolute;top:calc(100% + 6px);right:0;z-index:30;min-width:250px;
         max-width:min(420px,92vw);max-height:min(52vh,420px);overflow:auto;
         background:var(--the);border:1px solid var(--vien);border-radius:11px;padding:10px;
         box-shadow:0 14px 34px -12px rgba(18,32,31,.34)}
.loc-cua.rong{min-width:280px;max-width:min(520px,92vw)}
.loc-cua-mo{margin:0 0 8px;font-size:11.5px;line-height:1.45;color:var(--chu3)}
/* Cửa sổ neo bên PHẢI nút, nhưng nút đầu hàng thì neo phải sẽ chạy ra ngoài mép trái màn hẹp —
   ở đó neo trái. */
@media (max-width:620px){.loc-cua{right:auto;left:0}}
.loc-chips{display:flex;flex-wrap:wrap;gap:6px}
/* Tiêu đề một nhóm vai (Bác sĩ · Phụ tá · PC · Lễ tân) — chiếm trọn một dòng của lưới gói. */
.loc-nhom{flex-basis:100%;margin:6px 0 0;font-size:10px;text-transform:uppercase;
          letter-spacing:.07em;color:var(--chu3);font-weight:600}
.loc-nhom:first-child{margin-top:0}
/* KHÔNG cắt tên ở 15 ký tự nữa: "BS. Nguyễn Văn An" bị cắt thành "BS. Nguyễn V…" thì mười hai
   bác sĩ trông giống hệt nhau — đúng phần phân biệt bị bỏ đi. Cho rộng tới 26 ký tự và để cửa
   sổ tự nở; danh sách gói dòng vẫn gọn vì đã gom theo vai. */
.loc-chon{display:inline-flex;align-items:center;gap:6px;max-width:26ch;
          padding:5px 10px;border:1px solid var(--vien);border-radius:7px;background:var(--the);
          color:var(--chu2);font-size:12.5px;font-weight:500;cursor:pointer}
.loc-chon .ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loc-chon small{font-family:"IBM Plex Mono",monospace;font-size:10.5px;color:var(--chu3);flex:none}
.loc-chon:hover{border-color:var(--nhan);color:var(--nhan)}
.loc-chon.chon{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan);font-weight:600}
.loc-chon.chon small{color:var(--nhan)}
/* Mục đếm 0: viền ĐỨT chứ không chỉ mờ — chỉ khác độ mờ thì nó lại trông "sống" hơn chip đang tắt. */
.loc-chon[disabled]{opacity:.45;cursor:default;border-style:dashed}

/* Dòng "đang lọc" — KHÔNG gập được, không phụ thuộc cửa sổ nào. Chốt chặn của §2.11. */
.dang-loc{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 12px;
          font-size:12.5px;color:var(--chu3)}
.dang-loc > b{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--chu3)}
.dang-loc .loc-go{cursor:pointer;border:1px solid var(--nhan);font-weight:500}
.dang-loc .loc-go:hover{background:var(--nhan);color:var(--the)}

/* ---------- Ô TÌM GÁNH LUÔN "MỌI NGÀY" ----------
   Cùng một việc (tìm một khách), chỉ khác phạm vi — nên cùng một chỗ. Nút nằm trong lòng ô, nền
   trong suốt, chỉ hiện rõ khi rê chuột: nó không được tranh chỗ với con trỏ gõ. */
.o-tim-boc{position:relative;display:flex;align-items:center;flex:1 1 260px;min-width:180px}
.o-tim-boc .o-tim{width:100%;padding-right:104px}
.nut-trong-o{position:absolute;right:4px;top:50%;transform:translateY(-50%);
             border:0;background:none;color:var(--chu3);font-size:11.5px;cursor:pointer;
             padding:5px 8px;border-radius:7px;white-space:nowrap}
.nut-trong-o:hover{background:var(--chim);color:var(--nhan)}

/* ---------- ⑥ TINH GỌN: một hàng điều khiển, phần còn lại là lưới ----------
   Thanh công cụ và hàng lọc là thứ liếc vài giây; lưới là thứ nhìn suốt ca. Siết lề dọc của
   hai dải ấy và bỏ trần bề ngang để lưới ăn hết chỗ còn lại. */
.thanh-lich{padding-top:8px;padding-bottom:8px}
.loc-lich{margin-bottom:8px;gap:6px}
.loc-lich .o-tim-boc{flex:1 1 220px;max-width:420px}
@media (max-width:820px){
  .loc-lich{gap:5px}
  .o-tim-boc{flex:1 1 100%}
}

/* Chip MỘT NGƯỜI: gương mặt + mã vị trí + tên. Dùng ở danh sách Off và mọi chỗ liệt kê người. */
.chip-nguoi{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px}
.chip-nguoi .avatar-pt{width:20px;height:20px;margin:0;vertical-align:0}

/* ---------- CỘT TEAM PHỤ TÁ THU GỌN ĐƯỢC ----------
   320px ghim bên trái là hợp lý trên desktop, nhưng trên điện thoại nó ăn gần trọn bề ngang.
   Thu lại còn một dải 42px: vẫn thấy các gương mặt xếp dọc và vẫn ghim làm hệ quy chiếu, mà
   cột bác sĩ có chỗ để hiện. */
/* Bề ngang của trạng thái thu khai ở MỘT chỗ duy nhất (`.cot-phu-ta.thu` phía trên, cạnh luật
   của cột phụ tá). Trước đó tệp này có hai luật cùng tên: cái sau chỉ đặt `width` mà quên
   `min-width`, nên `min-width:165px` của `.lich-cot` kéo cột thu gọn về lại 165px — đúng cái
   "cột trắng trống trơn" nhìn thấy trên màn. */
/* Nút ẩn/mở cột Team phụ tá — ngồi ở Ô GÓC của bảng, chỗ luôn nhìn thấy. */
/* Ô góc bảng: nút ẩn/mở cột team, và hai nút nới ×2 ×3. Xếp dọc cho vừa bề ngang 38–56px. */
.goc-nut{display:flex;flex-direction:column;gap:2px;align-items:center}
.nut-thu{min-width:22px;height:17px;padding:0 3px;border:1px solid var(--vien);border-radius:6px;
         background:var(--the);color:var(--chu3);font-size:10px;line-height:1;cursor:pointer}
.nut-thu:hover{border-color:var(--nhan);color:var(--nhan)}
.nut-thu.chon{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan);font-weight:600}
.lich-gio .lich-dau-cot{align-items:center;justify-content:center;padding:1px 2px}

/* Nới bề ngang cột team — `!important` vì `.lich-cot{flex-basis}` đặc hiệu hơn và sẽ nuốt `width`
   (cạm bẫy đã cắn bốn lần trong tệp này). */
.cot-phu-ta.rong-x2{flex:none!important;width:640px!important;max-width:640px!important;flex-basis:640px!important}
.cot-phu-ta.rong-x3{flex:none!important;width:960px!important;max-width:960px!important;flex-basis:960px!important}
@media (max-width:820px){
  .cot-phu-ta.rong-x2{width:min(640px,92vw)!important;max-width:92vw!important;flex-basis:min(640px,92vw)!important}
  .cot-phu-ta.rong-x3{width:min(960px,96vw)!important;max-width:96vw!important;flex-basis:min(960px,96vw)!important}
}

/* Vòng chỉ thị quanh ảnh phụ tá CHƯA có lịch nào: xanh = đang rảnh, gọi được ngay. Dùng
   `box-shadow` chứ không `border` — border ăn vào kích thước ảnh, mà hàng avatar này đã chật. */
/* ---------- VÒNG CÔNG SUẤT QUANH GƯƠNG MẶT ----------

   Một vòng tròn lấp dần, đọc được bằng đuôi mắt: nó trả lời "người này còn nhận khách được
   không" mà không bắt ai đọc con số nào. Đo bằng PHÚT (giờ đã đặt / giờ ca đăng ký), vì ba ca
   implant 90 phút khác hẳn ba ca cạo vôi 20 phút.

     `trong`     chưa có lịch nào   → vòng ĐỎ kín, thứ đáng để mắt nhất
     (mặc định)  đang lấp dần       → cung XANH chạy đúng tỉ lệ `--ti`
     `day`       kín ca             → vòng XANH đầy
     `qua`       vượt giờ đăng ký   → thêm cung CAM dài theo `--du`
     `qua-nhieu` vượt quá 125%      → cung ĐỎ: tăng ca đang dày lên

   `conic-gradient` chứ không SVG: một phần tử, không thẻ con, không phải tính chu vi cung —
   và nó nằm ở lớp NỀN nên ảnh thật vẫn nằm trọn bên trên, không bị vòng cắt vào mặt. */
/* Bề dày vòng 4px, và avatar chỉ còn viền trắng 1px — bản trước để vòng 2px trong khi avatar
   mang `box-shadow 0 0 0 2px var(--the)`, tức vòng trắng của avatar PHỦ KÍN đúng 2px vòng màu.
   Nhìn ra một cái vòng trắng, không thấy màu nào cả — đúng chỗ chủ dự án chỉ.
   `from -90deg` để cung xanh chạy từ ĐỈNH đồng hồ, đúng cách người ta đọc một vòng lấp dần. */
.mat-vong{display:inline-grid;place-items:center;border-radius:50%;padding:4px;flex:none;
          background:conic-gradient(from -90deg, var(--tot) calc(var(--ti,0) * 1%), var(--vien) 0)}
.mat-vong.trong{background:var(--loi)}
.mat-vong.day{background:var(--tot)}
.mat-vong.qua{background:conic-gradient(from -90deg, var(--canh) calc(var(--du,0) * 1%), var(--tot) 0)}
.mat-vong.qua-nhieu{background:conic-gradient(from -90deg, var(--loi) calc(var(--du,0) * 1%), var(--tot) 0)}
.mat-vong .avatar-pt{margin:0;box-shadow:0 0 0 1px var(--the)}

/* MỘT CỠ GƯƠNG MẶT CHO CẢ BÁC SĨ LẪN PHỤ TÁ — cùng một thứ thông tin thì cùng một cỡ; lệch cỡ
   là mắt tự hiểu thành lệch tầm quan trọng. */
.lich-dau-cot .avatar-pt,.hang-mat .avatar-pt{width:26px;height:26px}

/* Đầu cột Team phụ tá: hàng trên là tiêu đề + ghi chú, hàng dưới dành trọn cho gương mặt. */
/* ĐẦU CỘT TEAM PHẢI CAO ĐÚNG BẰNG CÁC CỘT KHÁC. Cho nó tự cao theo nội dung thì thân cột tụt
   xuống 44px so với cột bác sĩ — đo được — và mọi thẻ lịch của phụ tá hiện SAI GIỜ, lệch nguyên
   ba hàng mười lăm phút. Hàng gương mặt vì thế bị cắt chứ không được đẩy: thứ tự đã xếp sao cho
   người đáng nhìn nhất đứng đầu, và tổng số người vẫn nằm ở ghi chú bên cạnh tiêu đề. */
.cot-phu-ta .lich-dau-cot{gap:0;overflow:hidden;padding:2px 6px}
.cot-phu-ta .lich-dau-cot .ten{flex-wrap:nowrap}
.ghi-chu-team{color:var(--chu3);font-weight:400;font-size:10px;white-space:nowrap;
              font-family:"IBM Plex Mono",monospace;margin-left:6px}
/* Đầu cột team dành TRỌN cho gương mặt: hai hàng vừa đúng chiều cao đầu cột, nên hiện được
   gấp đôi số người so với bản có chữ. Gương mặt nhỏ hơn cột bác sĩ một chút vì ở đây cần SỐ
   LƯỢNG, còn ở cột bác sĩ chỉ có một người. */
.hang-mat{display:flex;flex-wrap:wrap;gap:3px;align-items:flex-start;align-content:flex-start;
          overflow:hidden;height:100%;padding:2px 0}
.hang-mat .avatar-pt{width:22px;height:22px}
.hang-mat .avatar-pt{margin:0;flex:none}
/* Gương mặt trên đầu cột team nhỏ hơn avatar của cột bác sĩ: ở đây cần HIỆN ĐƯỢC NHIỀU NGƯỜI,
   còn ở cột bác sĩ chỉ có một người nên gương mặt đáng to. */


/* =====================================================================================
   LỊCH HẸN v1.82 — GIAO DIỆN THEO MẪU STITCH CỦA CHỦ DỰ ÁN (18/09/2026)

   Chủ dự án đưa một ảnh mẫu và nói: "thiết kế lại view lịch hẹn theo phong cách này, đảm bảo
   toàn vẹn tính năng hiện tại nhưng giao diện mới". Nên khối này là LỚP PHỦ đặt ở CUỐI tệp:
   nó không xoá luật nào phía trên, chỉ đè đúng những thứ đổi hình — và mọi thao tác (kéo thả,
   kéo chọn giờ, ×2 ×3, vòng công suất, lọc, gạch xéo ngoài ca) giữ nguyên bên dưới.

   NHỮNG GÌ LẤY TỪ MẪU: nền lavender rất nhạt, thẻ trắng bo 12–16px, viền mảnh, chip bo tròn,
   nút chính tím đầy, cụm nút phân đoạn, đầu cột hai tầng (mặt · tên · chuyên khoa / ca · ghế),
   thẻ hẹn bốn tầng (giờ · tên · dịch vụ · chip trạng thái), bảng Chờ xếp lịch dạng thẻ có ô
   ghi chú tô nhạt và thanh hiệu suất ở chân, nhãn giờ hiện tại đỏ, ô "⊕ Trống" theo con trỏ.

   NHỮNG GÌ CỐ Ý KHÔNG LẤY: mẫu đóng cửa giờ trưa ("Nghỉ trưa & Vô trùng toàn diện") — phòng
   khám này có ca trưa và ≥2 bác sĩ làm xuyên trưa, nên lưới trưa là lưới làm việc. Mẫu tô màu
   thẻ theo NHÓM DỊCH VỤ — ở đây màu là TRẠNG THÁI (xem chú thích ở `veKhoi`). Mẫu có nhãn "ƯU
   TIÊN", "Đã cọc", "Tuần", "Ghế khám", phím tắt N/T — không có dữ liệu hay tính năng tương
   ứng, không bịa. */

/* ---------- tiêu đề + thanh công cụ ---------- */
.thanh-lich{gap:10px 12px;padding:12px 0 12px;border-bottom:0}
.thanh-lich .dau h2{font-size:24px;letter-spacing:-.025em}
.thanh-lich .tieu-phu{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:13px;color:var(--chu2)}
.cham-ngay{width:8px;height:8px;border-radius:50%;background:var(--chu3);display:inline-block}
.cham-ngay.nay{background:var(--tot);box-shadow:0 0 0 3px var(--tot-nhat)}
.thanh-lich .nhom-nut{border-radius:11px;padding:3px;background:var(--the);outline-color:var(--vien);gap:2px}
.thanh-lich .nhom-nut .nut{border-radius:8px;min-height:30px;height:30px;padding:0 12px;font-size:13px}
.thanh-lich .nhom-nut .nut+.nut{border-left:0}
.thanh-lich .nhom-nut .nut.chon{box-shadow:0 1px 2px rgba(20,20,40,.12)}
.thanh-lich input[type=date]{border-radius:11px;background:var(--the);font-weight:600;color:var(--chu)}
.nut.cta-lich{border-radius:12px;padding:0 18px;font-size:14px;font-weight:700;
              box-shadow:0 6px 16px -8px var(--nhan)}

/* ---------- hàng tìm + lọc ---------- */
.loc-lich{margin-bottom:12px;gap:8px}
.loc-lich .o-tim-boc{background:var(--the);border-radius:12px}
.loc-lich .o-tim-boc input{border-radius:12px;padding-left:36px;
  background:var(--the) no-repeat 12px center/16px url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367677C' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.5-3.5'/></svg>")}
.loc-lich .hang .nut{border-radius:11px;background:var(--the);font-weight:600;padding:0 13px}
.loc-lich .hang .nut.chon{background:var(--nhan-nhat);border-color:var(--nhan)}
.chip.ghe-dung{height:var(--cao-o);display:inline-flex;align-items:center;padding:0 12px;
  border-radius:11px;font-size:12.5px;font-weight:600;border:1px solid var(--vien);background:var(--the)}
.chip.ghe-dung.tot{background:var(--tot-nhat);border-color:transparent;color:var(--tot)}

/* ---------- khung lưới ---------- */
.lich-bo{gap:16px}
.lich{border-radius:16px;box-shadow:var(--bong-the);border-color:var(--vien-mem)}
.lich{--cao-dau:76px}
.lich-gio{background:var(--the)}
.lich-hang{border-top-color:color-mix(in srgb, var(--vien) 55%, transparent)}
.lich-hang.gio-tron{border-top-color:var(--vien)}
.lich-hang.nua-gio{border-top-style:solid;border-top-color:color-mix(in srgb, var(--vien) 75%, transparent)}
.lich-gio .lich-hang{font-size:11.5px;color:var(--chu3);padding-right:8px;padding-top:3px}
.lich-gio .lich-hang.gio-tron{color:var(--chu2);font-weight:600}
.lich-gio .nhan-nua{font-size:9.5px;opacity:.75}
.lich-than.ngoai-ca{background:repeating-linear-gradient(45deg,
   transparent, transparent 6px, var(--chim) 6px, var(--chim) 12px)}

/* đầu cột hai tầng */
.lich-dau-cot{background:var(--the);padding:8px 10px 6px;gap:5px;justify-content:flex-start}
.lich-dau-cot .dau-nguoi{gap:8px;align-items:center}
.lich-dau-cot .dau-ten{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.lich-dau-cot .dau-ten b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.lich-dau-cot .dau-ten .vai-ngan{font-size:10.5px;color:var(--chu3)}
.lich-dau-cot .dau-vi{font-family:inherit;font-size:10.5px;color:var(--chu3);font-weight:500}
.lich-dau-cot .dau-ca{display:flex;align-items:center;gap:6px;min-width:0}
.lich-dau-cot .ca-nhan{display:inline-block;background:var(--nhan-nhat);color:var(--nhan);
  border-radius:7px;padding:2px 7px;font-weight:600;font-size:10.5px;min-width:0}
.lich-dau-cot .ca-nhan.canh{background:var(--canh-nhat);color:var(--canh)}
.lich-dau-cot .ghe-nhan{font-family:inherit;font-size:10.5px;color:var(--chu3);font-weight:500;flex:none}
.lich-dau-cot .avatar-pt,.hang-mat .avatar-pt{width:30px;height:30px}
.lich-dau-cot .mat-vong{padding:3px}
/* Cột hẹp (≥ 6 bác sĩ): chuyên khoa và ghế nhường chỗ cho ca. */
.lich-cot.hep .dau-vi,.lich-cot.hep .ghe-nhan{display:none}
.lich-cot.hep .lich-dau-cot{padding:6px 7px 5px}
.lich-cot.hep .lich-dau-cot .avatar-pt{width:26px;height:26px}
/* Ô góc (cột giờ) và cột team giữ cùng chiều cao đầu cột — chúng KHÔNG có hai tầng chữ. */
.lich-gio .lich-dau-cot{background:var(--the);padding:4px 2px;justify-content:center}
.cot-phu-ta .lich-dau-cot{padding:4px 8px;justify-content:center}
.hang-mat{padding:0}

/* thẻ hẹn bốn tầng */
.lich-khoi{border-radius:9px;padding:4px 7px 4px 8px;border-left-width:3px;
  box-shadow:0 1px 2px rgba(20,20,40,.08);font-size:12px;line-height:1.28}
.lich-khoi:hover{box-shadow:0 4px 12px -4px rgba(20,20,40,.28);filter:none}
.lich-dong0{display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.lich-dong0 .gio-hen{font-size:11.5px;font-weight:700;letter-spacing:-.01em;
  font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.ghe-chip{margin-left:auto;flex:none;font-size:9.5px;font-weight:700;padding:1px 5px;border-radius:5px;
  background:rgba(255,255,255,.7);color:inherit;font-family:"IBM Plex Mono",monospace}
.lich-khoi .lich-dong1{font-weight:700;color:var(--chu);font-size:12.5px;margin-top:1px}
.lich-khoi.lun .lich-dong1{font-weight:600;font-size:11.5px;margin-top:0}
.lich-khoi .lich-dong2{color:var(--chu2);opacity:1;font-size:11px;margin-top:1px}
.lich-chan{margin-top:4px;display:flex;align-items:center;gap:4px}
.tt-chip{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:6px;
  background:rgba(255,255,255,.72);color:inherit;letter-spacing:.01em}
.lich-khoi.mo .tt-chip{text-decoration:none}
/* nút ✓ "đã đến" dời xuống góc dưới phải, tránh chồng lên chip ghế ở dòng đầu */
.khoi-den{top:auto;bottom:3px;right:3px;border-radius:6px}
@media (pointer:coarse){.lich-khoi:has(.khoi-den){padding-right:7px;padding-bottom:22px}}
/* chi tiết cần chú ý (implant, sứ…): vạch mép phải giữ nguyên nghĩa, chỉ bo theo thẻ */
.lich-khoi .vach-qt{border-radius:0 9px 9px 0}

/* nhãn giờ hiện tại trên cột giờ */
.nhan-bay-gio{position:absolute;left:4px;right:4px;top:calc(var(--cao-dau) + var(--y,0px) - 9px);
  z-index:5;background:var(--loi);color:#fff;font-size:10.5px;font-weight:700;text-align:center;
  border-radius:6px;padding:2px 0;line-height:1.3;font-family:"IBM Plex Mono",monospace;pointer-events:none}
.vach-bay-gio::before{display:none}
.vach-bay-gio{border-top-width:2px}

/* ô gợi ý theo con trỏ */
.o-trong-goi{position:absolute;left:3px;right:3px;height:var(--cao-buoc,22px);z-index:1;pointer-events:none;
  border-radius:7px;border:1.5px dashed var(--nhan);background:color-mix(in srgb, var(--nhan-nhat) 70%, transparent);
  color:var(--nhan);font-size:10.5px;font-weight:600;display:flex;align-items:center;justify-content:center;
  gap:3px;white-space:nowrap;overflow:hidden}
.o-trong-goi b{font-family:"IBM Plex Mono",monospace}
.lich-than.dang-chon-gio .o-trong-goi{display:none}

/* ---------- bảng Chờ xếp lịch ---------- */
.cot-xn{width:232px;border-radius:16px;padding:14px 12px 12px;box-shadow:var(--bong-the);
  border-color:var(--vien-mem);display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 175px)}
.dau-xn{padding:0 2px 2px;gap:8px}
.dau-xn > b{font-size:15px;letter-spacing:-.01em}
.dau-xn .chip{border-radius:8px}
.dau-xn small{font-size:11.5px;line-height:1.45;color:var(--chu3)}
.the-xn{margin:0;border:1px solid var(--vien);border-left-width:1px;background:var(--the);
  border-radius:12px;padding:11px 12px 10px;box-shadow:var(--bong-the);font-size:12.5px}
.the-xn.bam:hover{border-color:var(--nhan);border-left-color:var(--nhan);box-shadow:0 4px 12px -6px var(--nhan)}
.the-xn .dong1{align-items:center;gap:8px}
.the-xn .dong1 b{font-size:14px}
.the-xn .dong1 .chip{flex:none;font-size:10px;padding:2px 8px}
.the-xn .dong-sdt,.the-xn .dong2{display:flex;align-items:center;gap:6px;margin-top:5px;color:var(--chu2)}
.the-xn .dong-sdt i,.the-xn .dong2 i{font-style:normal;font-size:11px;color:var(--chu3);flex:none}
.the-xn .dong2{color:var(--chu);font-weight:500}
.the-xn .dong3{margin-top:7px;padding:7px 9px;border-radius:8px;background:var(--nhan-nhat);
  color:var(--chu2);font-size:11.5px;line-height:1.45}
.the-xn .dong3 b{color:var(--chu);font-weight:600}
.the-xn .chan-xn{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:9px;padding-top:8px;border-top:1px solid var(--vien-mem)}
.the-xn .chan-xn small{color:var(--chu3);font-size:11px}
.the-xn .chan-xn .nut{min-height:28px;height:28px;padding:0 11px;border-radius:8px;font-size:12px}
.hs-pk{margin-top:auto;padding:11px 12px;border-radius:12px;background:var(--chim);border:1px solid var(--vien-mem)}
.hs-dau{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px}
.hs-so{color:var(--nhan);font-size:16px;font-family:"IBM Plex Mono",monospace}
.hs-thanh{height:6px;border-radius:3px;background:var(--vien);margin:8px 0 6px;overflow:hidden}
.hs-thanh i{display:block;height:100%;border-radius:3px;background:var(--nhan)}
.hs-chan{display:flex;justify-content:space-between;font-size:11px;color:var(--chu3)}

/* ---------- 30 ngày (gon): đầu cột về một tầng ---------- */
.lich.gon{--cao-dau:44px}
.lich.gon .lich-dau-cot{padding:2px 6px;gap:1px}
.lich.gon .dau-vi,.lich.gon .ghe-nhan,.lich.gon .nhan-nua,.lich.gon .lich-chan,.lich.gon .ghe-chip{display:none}
.lich.gon .ca-nhan{padding:0 4px;font-size:9px;border-radius:4px}
.lich.gon .lich-dau-cot .avatar-pt,.lich.gon .hang-mat .avatar-pt{width:18px;height:18px}
.lich.gon .lich-dong0 .gio-hen{font-size:9.5px}
.lich.gon .lich-khoi .lich-dong1{font-size:10px}

/* ---------- điện thoại ---------- */
@media (max-width:820px){
  .lich{--cao-dau:70px}
  .lich-dau-cot{padding:6px 7px 5px}
  .lich-dau-cot .dau-vi{display:none}
  .cot-xn{width:100%;max-height:none}
  .nut.cta-lich{padding:0 14px;font-size:13px}
}
/* Bác sĩ hai ca: ô ca nhỏ chữ một nấc để vừa một dòng (đo: "08:00–12:00 · 13:30–17:30" ở 10.5px
   tràn khỏi cột 182px và bị cắt thành "· …"). */
.lich-dau-cot .ca-nhan.nhieu{font-size:9.5px;padding:2px 5px;letter-spacing:-.01em}
/* Nút Xếp lịch không gãy dòng — thẻ chờ rộng 208px, "Xếp lịch" gãy thành hai dòng đo được. */
.the-xn .chan-xn .nut{white-space:nowrap;flex:none}
/* MỖI CA MỘT Ô, xuống dòng được. Bản gộp "08:00–12:00 · 13:30–17:30" trong MỘT ô vẫn bị cắt ở
   cột hẹp 126px (≥ 6 bác sĩ) dù đã nhỏ chữ — đo được. Hai ô rời thì ở cột thường đứng cạnh
   nhau, ở cột hẹp xếp hai tầng; đầu cột cao thêm 6px khi bảng có cột hẹp để tầng hai không bị
   cắt. Chiều cao vẫn CỐ ĐỊNH qua biến — mọi thân cột cùng mốc. */
.lich-dau-cot .dau-ca{flex-wrap:wrap;gap:3px 5px}
.lich-dau-cot .ca-nhan{flex:none}
.lich:has(.lich-cot.hep){--cao-dau:82px}
/* Cột hẹp giấu giờ kết thúc trên thẻ (vẫn có trong `title`): ở 126px hoặc trên điện thoại,
   "10:35–11:35" + mặt + icon không đủ một dòng và bị cắt thành "10:35–". */
.lich-cot.hep .lich-khoi .gio-cuoi{display:none}
@media (max-width:820px){.cot-phu-ta .lich-khoi .gio-cuoi{display:none}}
/* Chip ghế / trạng thái trên thẻ: nền lấy từ token thẻ chứ không phải trắng cứng — trong nền
   tối, rgba trắng thành một ô sáng chói trên thẻ tím (đo bằng ảnh chụp chế độ tối). */
.ghe-chip,.tt-chip{background:color-mix(in srgb, var(--the) 72%, transparent)}

/* =====================================================================================
   LỊCH HẸN v1.83 — PHẲNG: BỎ ĐƯỜNG KẺ, CHỈ CÒN MẢNG MÀU (18/09/2026, lượt hai)

   Chủ dự án xem bản v1.82 và chốt: "loại bỏ tối đa đường kẻ đường viền, các đối tượng chỉ
   phân biệt bằng các mảng màu chuyển nhẹ nhàng tinh tế, bỏ luôn cả nền kẻ sọc phía sau, bỏ các
   line dọc ngang phân biệt khung giờ".

   Nguyên tắc của lớp này: MỘT ĐỐI TƯỢNG = MỘT MẢNG MÀU, KHÔNG VIỀN. Cái gì trước đây nói bằng
   nét (viền cột, vạch giờ, gạch xéo, vạch trái thẻ, viền chip) thì nay nói bằng độ đậm nhạt
   của nền:
     · trong ca  = ô trắng bo góc     · ngoài ca = nền lavender của trang (không sọc)
     · thẻ hẹn   = mảng màu trạng thái, không vạch trái, không bóng
     · cột       = khe hở 6px giữa các mảng, không đường
     · giờ       = chỉ còn nhãn ở cột giờ; vạch đỏ "bây giờ" là đường DUY NHẤT còn lại,
                   vì nó không phân chia mà chỉ điểm.
   Gạch xéo bỏ nhưng NGHĨA không bỏ: ngoài ca vẫn nhận ra được vì nó không có ô trắng. */
.lich{background:transparent;border:0;box-shadow:none;border-radius:0;gap:6px}
.lich-gio{border-right:0;background:var(--nen)}
.lich-cot{border-right:0}
.cot-phu-ta{border-right:0;background:transparent}
.lich-dau-cot,.lich-gio .lich-dau-cot,.cot-phu-ta .lich-dau-cot{background:var(--nen);border-bottom:0}
.lich-hang,.lich-hang.gio-tron,.lich-hang.nua-gio,.lich-hang:first-child{border-top:0}
.lich-gio .lich-hang{color:var(--chu3)}
.lich-gio .lich-hang.gio-tron{color:var(--chu2)}
/* trong ca = ô trắng bo góc; ngoài ca = nền trang. Không sọc. */
.lich-than,.lich-than.ngoai-ca{background:transparent}
.trong-ca{background:var(--the);border-radius:12px;left:0;right:0}
.lich-than.dang-tha{background:var(--nhan-nhat);outline:0;border-radius:12px}
/* thẻ hẹn: chỉ mảng màu. `!important` vì vạch trái được đặt inline theo trạng thái. */
.lich-khoi{border-left:0!important;box-shadow:none;border-radius:10px;padding:5px 8px}
.lich-khoi:hover{box-shadow:none;filter:brightness(.965)}
.lich-khoi.chia{box-shadow:none}
/* Vạch mép PHẢI (loại cần chú ý) cũng bỏ — chủ dự án: "các chú thích này đã thể hiện trong view
   detail". Nghĩa còn nguyên ở `title` của thẻ, ở hộp chi tiết và ở bộ lọc Cần chú ý. */
.lich-khoi .vach-qt{display:none}
.ghe-chip,.tt-chip,.kiem-bt{background:color-mix(in srgb, var(--the) 55%, transparent)}
.lich-cdha{border:0;border-radius:10px 10px 0 0;
  background:color-mix(in srgb, var(--nhan-nhat) 80%, transparent)}
/* vệt kéo chọn & ô gợi ý: mảng tím nhạt, không nét đứt */
.vet-chon{border:0;background:color-mix(in srgb, var(--nhan) 18%, var(--the));border-radius:10px}
.o-trong-goi{border:0;background:color-mix(in srgb, var(--nhan) 10%, var(--the));border-radius:8px}
/* nhãn "bây giờ": giữ đường đỏ mảnh — đường duy nhất còn lại, nó điểm chứ không chia */
.vach-bay-gio{border-top:1.5px solid var(--loi);opacity:.9}

/* ---------- thanh công cụ & bộ lọc: nút không viền ---------- */
.thanh-lich .nhom-nut{outline:0;background:var(--chim)}
.thanh-lich .nhom-nut .nut{background:transparent}
.thanh-lich .nhom-nut .nut.chon{background:var(--the);color:var(--nhan);box-shadow:0 1px 3px rgba(20,20,40,.10)}
.thanh-lich input[type=date]{border-color:transparent;background:var(--chim)}
.loc-lich .o-tim-boc,.loc-lich .o-tim-boc input{border-color:transparent;background-color:var(--chim)}
.loc-lich .hang .nut{border-color:transparent;background:var(--chim)}
.loc-lich .hang .nut:hover{background:var(--nhan-nhat)}
.loc-lich .hang .nut.chon{background:var(--nhan-nhat);border-color:transparent;color:var(--nhan)}
.chip.ghe-dung{border-color:transparent;background:var(--chim)}
.loc-cua{border:0;box-shadow:0 12px 32px -12px rgba(20,20,40,.35)}
.loc-chon{border-color:transparent;background:var(--chim)}
.loc-chon.chon{border-color:transparent}
.nut.cta-lich{box-shadow:none}

/* ---------- Chờ xếp lịch: bảng trắng, thẻ là mảng xám nhạt ---------- */
.cot-xn{border:0;box-shadow:none;background:var(--the)}
.the-xn{border:0;background:var(--chim);box-shadow:none}
.the-xn.bam:hover{background:var(--nhan-nhat);box-shadow:none}
.the-xn .dong3{background:var(--the)}
.the-xn .chan-xn{border-top:0;padding-top:4px}
.the-xn .chan-xn .nut{border-color:transparent;background:var(--the)}
.hs-pk{border:0;background:var(--nhan-nhat)}
.hs-thanh{background:color-mix(in srgb, var(--nhan) 18%, transparent)}
/* Trong nền tối các mảng đảo vai: ô trong ca sáng hơn nền một nấc chứ không trắng. */
@media (prefers-color-scheme:dark){
  .trong-ca{background:var(--chim)}
  .lich-dau-cot,.lich-gio .lich-dau-cot,.cot-phu-ta .lich-dau-cot,.lich-gio{background:var(--nen)}
}

/* ---------- v1.83b — lấy nốt phần ngôn ngữ còn thiếu của mẫu ----------
   Chủ dự án: "vẫn còn một số ngôn ngữ thiết kế chưa được đưa vào và phối lại một cách triệt để".
   Đối chiếu từng vùng của mẫu với ảnh chụp bản v1.83, còn thiếu: ① tiêu đề · ngày · chi nhánh
   trên MỘT dòng; ② chuyên khoa TÍM dưới tên bác sĩ; ③ ô giờ trống là những Ô MỀM RỜI NHAU chứ
   không phải một dải trắng liền; ④ thẻ hẹn màu ĐẬM hơn — mẫu dùng mint/lavender bão hoà, bản
   cũ là tông nhạt của biểu mẫu; ⑤ Chờ xếp lịch là DANH SÁCH THOÁNG trên nền trắng, không phải
   hộp xám; ⑥ chú giải màu luôn hiện dưới lưới; ⑦ thanh bên cùng tông (mục đang chọn tím trên
   nền tím nhạt, số đếm là huy hiệu tròn). */
/* ① */
.thanh-lich .dau > div{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.thanh-lich .tieu-phu{margin-top:0}
/* ② */
.lich-dau-cot .dau-vi{color:var(--nhan);font-weight:600}
.lich-cot.hep .dau-vi{display:block}
.lich-dau-cot .dau-ten b{font-size:13.5px}
/* ③ ô mềm: dải trong ca cắt thành từng ô 30 phút bằng khe 3px nền trang; thẻ nằm đè lên. */
.trong-ca{background:repeating-linear-gradient(to bottom,
  var(--the) 0 calc(var(--cao-buoc,22px) * 2 - 3px), transparent 0 calc(var(--cao-buoc,22px) * 2));
  border-radius:10px;left:2px;right:2px}
/* ④ màu thẻ theo trạng thái, đậm hơn tông biểu mẫu. `!important` vì nền đặt inline. */
.lich-khoi.tt-pending{background:#FBEBC8!important;color:#7A4D0A!important}
.lich-khoi.tt-confirmed{background:#E4DDFB!important;color:#4B2FB0!important}
.lich-khoi.tt-arrived{background:#CFE1FA!important;color:#1B4C99!important}
.lich-khoi.tt-in_treatment{background:#6C4EE8!important;color:#fff!important}
.lich-khoi.tt-in_treatment .lich-dong1,.lich-khoi.tt-in_treatment .lich-dong2{color:#fff}
.lich-khoi.tt-in_treatment .lich-dong2{opacity:.85}
.lich-khoi.tt-completed{background:#BDEFD7!important;color:#0E5C38!important}
.lich-khoi.tt-cancelled{background:var(--chim)!important;color:var(--chu3)!important}
.lich-khoi.tt-no_show{background:#F9D9D3!important;color:#8C2A1F!important}
@media (prefers-color-scheme:dark){
  .lich-khoi.tt-pending{background:#3A2A0C!important;color:#F1C36B!important}
  .lich-khoi.tt-confirmed{background:#2A2050!important;color:#C9B8FF!important}
  .lich-khoi.tt-arrived{background:#16294A!important;color:#9DC1F7!important}
  .lich-khoi.tt-completed{background:#0F3324!important;color:#7FDCA8!important}
  .lich-khoi.tt-no_show{background:#3A1712!important;color:#F2A69C!important}
}
/* ⑤ */
.cot-xn{gap:0;padding:14px 14px 12px}
.dau-xn{padding-bottom:8px}
.the-xn{background:transparent;border-radius:0;padding:12px 2px 12px;
  border-bottom:1px solid color-mix(in srgb, var(--vien) 55%, transparent)}
.the-xn:last-of-type{border-bottom:0}
.the-xn.bam:hover{background:transparent}
.the-xn.bam:hover .dong1 b{color:var(--nhan)}
.the-xn .dong3{background:color-mix(in srgb, var(--nhan-nhat) 70%, var(--the))}
.the-xn .chan-xn .nut{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.the-xn .chan-xn .nut:hover{background:var(--nhan);color:#fff}
.hs-pk{margin-top:12px}
/* ⑥ */
.chu-giai-day{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:10px 2px 0;
  font-size:12px;color:var(--chu2)}
.chu-giai-day > b{font-weight:600;color:var(--chu3);margin-right:2px}
.chu-giai-day span{display:inline-flex;align-items:center;gap:6px}
.chu-giai-day i{width:10px;height:10px;border-radius:50%;display:inline-block}
/* ⑦ thanh bên */
.ben{border-right:0;background:var(--the)}
.ben a{border-radius:10px}
.ben a.chon::before{display:none}
.ben a.nhom .dem,.ben .dem{margin-left:auto;font-family:inherit;font-size:11px;font-weight:600;
  min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--chim);color:var(--chu2);
  display:inline-flex;align-items:center;justify-content:center}
.ben a.chon .dem,.ben a.nhom.co .dem{background:var(--nhan-nhat);color:var(--nhan)}
.toi{border-top:0;background:var(--chim);border-radius:12px;padding:12px 12px;margin:var(--d4) 0 0}

/* =====================================================================================
   PHIẾU KHÁM & TƯ VẤN v1.85 — HAI CỘT, PHẲNG, THEO MẪU STITCH (18/09/2026)

   Chủ dự án: "nâng cấp giao diện Phiếu khám & Tư vấn, tinh gọn phần kế hoạch chi tiết; dừng ở
   khuyến nghị bác sĩ – khách chọn; bên phải liệt kê chẩn đoán, chỉ định từng răng, dự toán; chú
   thích ẩn thành nút; thêm mô hình 3D; sơ đồ răng đổi từ đường viền sang mảng màu". Cùng luật với
   Lịch hẹn v1.83: một đối tượng = một mảng màu, không viền. */
.ptv-luoi{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start;margin-top:14px}
.ptv-phai{display:flex;flex-direction:column;gap:14px;position:sticky;top:12px}
@media (max-width:1100px){.ptv-luoi{grid-template-columns:1fr}.ptv-phai{position:static}}
.ptv-khoi{background:var(--the);border-radius:16px;padding:14px 16px}
.ptv-khoi-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ptv-khoi-dau b{font-size:14px}
.ptv-khoi-dau small{color:var(--chu3);font-size:11.5px}
.ptv-khoi .bao{margin:0 0 10px}
/* bước: bỏ đường kẻ trên, số bước là chấm tím nhỏ */
.ptv-moi .buoc-tv{border-top:0;padding-top:0;margin:18px 0 0}
.ptv-moi .buoc-so{width:22px;height:22px;font-size:12px}
.ptv-moi .buoc-dau h3{font-size:15px}
.ptv-moi .buoc-than{padding-left:0}
.ptv-moi .tien-do,.ptv-moi .o-luoi,.ptv-moi .the{border:0;box-shadow:none;background:var(--the);border-radius:14px}
.ptv-moi .td-con{border-top:0}
/* chẩn đoán gọn */
.cdg-ds{display:flex;flex-direction:column;gap:8px}
.cdg{background:var(--chim);border-radius:12px;padding:10px 12px;cursor:pointer;transition:background .12s}
.cdg:hover{background:var(--nhan-nhat)}
.cdg.tro{background:var(--nhan-nhat);box-shadow:inset 3px 0 0 var(--nhan)}
.cdg.xong{opacity:.72}
.cdg-dau{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13.5px}
.cdg-rang{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:700;color:var(--nhan);
  background:var(--the);border-radius:6px;padding:1px 6px}
.cdg-mo{font-size:12px;color:var(--chu3);margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cdg-chi{font-size:12.5px;margin-top:5px;display:flex;align-items:center;gap:5px;flex-wrap:wrap;color:var(--chu2)}
.cdg-chi b{color:var(--chu)}
.cdg-chi.thieu{color:var(--canh)}
.cdg-nut{display:flex;gap:6px;justify-content:flex-end;margin-top:6px}
.cdg-nut .nut{min-height:26px;height:26px;padding:0 9px;font-size:12px;border-color:transparent;background:var(--the)}
.cdg-nut .nut.nguy{color:var(--loi)}
.chip.nhat{background:var(--the);color:var(--chu2)}
/* dự toán */
.dt-ds{display:flex;flex-direction:column;gap:6px}
.dt-dong{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:var(--chim);font-size:13px}
.dt-dong small{display:block;color:var(--chu3);font-size:11.5px;margin-top:1px}
.dt-dong .mono{white-space:nowrap;font-weight:600}
.dt-tong{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;padding:10px 12px;border-radius:12px;background:var(--nhan-nhat)}
.dt-tong span{font-weight:600;font-size:13px}
.dt-tong b{color:var(--nhan);font-size:20px}
.dt-ghi{display:block;color:var(--chu3);font-size:11.5px;margin-top:8px;line-height:1.4}
/* nút chốt */
.ptv-chot{background:var(--the);border-radius:16px;padding:12px 16px 14px}
.nut.cta-chot{width:100%;border-radius:12px;min-height:44px;font-size:14px;font-weight:700}
.ptv-chot .hang .nut{flex:1;border-color:transparent;background:var(--chim)}
/* mô hình 3D */
.r3d{position:relative;border-radius:12px;background:var(--chim);overflow:hidden}
.r3d-cv{display:block;width:100%;cursor:grab;touch-action:none}
.r3d-cv:active{cursor:grabbing}
.r3d-nut{position:absolute;top:8px;right:8px;display:flex;gap:4px}
.r3d-nut .nut{min-height:26px;height:26px;width:26px;padding:0;border-color:transparent;background:color-mix(in srgb,var(--the) 85%,transparent);font-size:13px}
.r3d-ghi{padding:10px 12px;font-size:12.5px;background:var(--the)}
.r3d-goi{color:var(--chu3);font-size:12px;line-height:1.45}
.r3d-so{font-family:"IBM Plex Mono",monospace;font-weight:700;color:var(--nhan);margin-bottom:4px}
.r3d-cd{margin-top:5px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.r3d-cd.xong{opacity:.7}
.r3d-chi{width:100%;display:flex;flex-wrap:wrap;gap:5px;align-items:center;color:var(--chu2);margin-top:2px}
.r3d-tt{margin-top:6px;display:flex;flex-wrap:wrap;gap:4px}
.r3d-lanh{color:var(--tot);font-size:12.5px}
.hop .r3d-cv{min-height:420px}
/* bảng phương án theo vị trí: mảng màu, thẻ khuyến nghị / khách chọn nổi */
.pavt{background:var(--the);border-radius:14px;padding:12px 14px;margin-top:10px}
.pavt-vung{border:0;background:transparent;padding:0;margin-top:8px}
.pavt-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.cach-xu-ly{border:0!important;border-radius:14px;background:var(--chim);padding:12px 14px;box-shadow:none}
.cach-xu-ly.khuyen{background:color-mix(in srgb,var(--tot) 9%,var(--the));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--tot) 45%,transparent)}
.cach-xu-ly.bn-chon{background:var(--nhan-nhat);box-shadow:inset 0 0 0 2px var(--nhan)}
.cach-xu-ly .cach-so b{font-size:20px;color:var(--chu)}
.cach-xu-ly.khuyen .cach-so b{color:var(--tot)}
.cach-xu-ly.bn-chon .cach-so b{color:var(--nhan)}
.cach-xu-ly .nut{border-color:transparent;background:var(--the)}
.cach-xu-ly .nut:not(.phu){background:var(--nhan);color:#fff}
.the-chan-doan{border:0;border-radius:14px;background:var(--the)}
/* chú giải ẩn sau nút ⓘ — vẫn còn nguyên, chỉ thôi chiếm chỗ */
.bd-chu-giai.cg-gap{margin-top:8px;padding:10px 12px;border-radius:12px;background:var(--chim)}
.nut-chu-giai{right:auto;left:8px}
.nut-chu-giai.chon{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan)}
/* SƠ ĐỒ RĂNG: mảng màu thay đường viền. Ký hiệu bệnh lý giữ nguyên hình, chỉ mềm nét. */
.bd-khung{border-radius:14px;background:var(--the)}
.bd-net{stroke:color-mix(in srgb,var(--chu3) 35%,transparent);stroke-width:.7}
.bd-than{fill:#F4EFE6}
.bd-chan-net{fill:#EAE3D6}
.bd-mat{fill:#FBF9F4}
.bd-mat:hover{fill:var(--nhan-nhat);stroke:var(--nhan);stroke-width:1.2}
.bd-rang.vung .bd-than,.bd-rang.vung .bd-mat{stroke:var(--nhan);stroke-width:1.5}
.bd-so{fill:var(--chu3)}
.bd-so.chon{fill:var(--nhan)}
.bd-so-vung.chon{fill:var(--nhan-nhat);stroke:none}
.bd-so-vung:hover{fill:var(--nhan-nhat)}
.bd-chi,.bd-giua{opacity:.5}
.bieu-do{--bd-hien:#C9584A; --bd-daco:#2E6FD9; --bd-ke:#C9584A; --bd-lam:#2E6FD9}
.bd-hien-trang{fill-opacity:.85}.bd-da-lam,.bd-da-co{fill-opacity:.85}
/* thẻ Điều trị: khối kế hoạch */
.kh-dt{background:var(--the);border-radius:16px;padding:6px 18px 16px;margin-top:14px}
.kh-dt .buoc-tv{border-top:0;padding-top:0}
.kh-dt .buoc-than{padding-left:0}
/* tab hồ sơ dạng pill số */
.tab-ba{gap:6px;padding:4px;border-radius:14px;background:var(--chim)}
.tab-ba .nut{border-color:transparent;background:transparent;border-radius:10px}
.tab-ba .nut.chon{background:var(--nhan);color:#fff}
.tab-ba .nut:not(.chon):hover{background:var(--the)}
/* token màu của mô hình 3D — canvas đọc qua getComputedStyle, không có mã màu nào trong JS */
:root{--r3d-lanh:#F4EFE6; --r3d-lanh-ben:#E2DACB; --r3d-vd:#F8D8D2; --r3d-vd-ben:#E9B8B0; --r3d-vd-vien:#C9584A;
     --r3d-lam:#D3E3FA; --r3d-lam-ben:#B4CCF0; --r3d-so-lam:#1B4C99; --r3d-chon:#CDB9FF; --r3d-chon-ben:#CBB8FF;
     --r3d-go:rgba(255,255,255,.75); --r3d-truc:color-mix(in srgb,var(--chu) 12%,transparent)}
@media (prefers-color-scheme:dark){:root{--r3d-lanh:#3A3630; --r3d-lanh-ben:#2A2621; --r3d-vd:#4A2420; --r3d-vd-ben:#3A1A17;
     --r3d-lam:#1E2F4A; --r3d-lam-ben:#16233A; --r3d-so-lam:#9DC1F7; --r3d-chon-ben:#3A2C6A; --r3d-go:rgba(255,255,255,.18)}}
/* nút ⓘ chú giải xuống góc DƯỚI trái — góc trên trái là nhãn "Răng vĩnh viễn" của hình */
.nut-chu-giai{top:auto;bottom:8px;left:8px}
/* ---------- v1.85b: HÌNH DÙNG TRỌN CỘT, THANH CÔNG CỤ TRÊN ĐẦU HÌNH ----------
   Luật container-query cũ xếp hình 60% · chú giải 40%. Trong phiếu khám hai cột, chú giải đã ẩn
   mà cột 40% vẫn còn — hình bị ép còn nửa cột và CẮT MẤT răng 26–28 / 36–38 (đo trên bản chạy:
   chỉ thấy 18–25). Trong `.ptv-moi` hình là một khối, dùng hết bề ngang, co theo cột. */
.ptv-moi .bieu-do{display:block}
.ptv-moi .bieu-do > .bd-khung .bd-svg,.ptv-moi .bd-svg{min-width:0;width:100%}
.ptv-moi .bd-khung{border:0;padding:6px 4px 2px}
.ptv-moi .bieu-do > .pavt{margin-top:12px}
.ptv-moi .bieu-do > .bd-chu-giai{position:static;max-height:none;border-left:0;padding-left:12px}
.bd-thanh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 8px}
.bd-thanh .nhom-nut{outline:0;background:var(--chim);border-radius:11px;padding:3px}
.bd-thanh .nhom-nut .nut{background:transparent;border:0;border-radius:8px;height:30px;min-height:30px;padding:0 12px}
.bd-thanh .nhom-nut .nut.chon{background:var(--the);color:var(--nhan);box-shadow:0 1px 3px rgba(20,20,40,.10)}
.bd-thanh .nhom-nut .nut+.nut{border-left:0}
.bd-nut-thanh{width:34px;padding:0!important;border-color:transparent!important;background:var(--chim)!important;font-size:15px}
.bd-nut-thanh.chon{background:var(--nhan-nhat)!important;color:var(--nhan)}
.bd-mau-gon{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:0 0 8px 2px;font-size:12px;color:var(--chu2)}
.bd-mau-gon span{display:inline-flex;align-items:center;gap:6px}
.bd-mau-gon i{width:12px;height:12px;border-radius:3px;display:inline-grid;place-items:center;font-style:normal;font-size:10px;line-height:1}
.bd-mau-gon .bd-hien-trang i{background:color-mix(in srgb,var(--bd-hien) 22%,transparent);box-shadow:inset 0 0 0 1.5px var(--bd-hien)}
.bd-mau-gon .bd-da-lam i{background:color-mix(in srgb,var(--bd-lam) 22%,transparent);box-shadow:inset 0 0 0 1.5px var(--bd-lam)}
.bd-mau-gon .bd-mat i{color:var(--bd-hien);font-weight:700}
.bd-mau-gon .bd-chon i{background:var(--nhan-nhat);box-shadow:inset 0 0 0 1.5px var(--nhan)}
.bd-mau-gon small{color:var(--chu3);margin-left:auto}
.bd-mau-gon .bd-hien-trang,.bd-mau-gon .bd-da-lam,.bd-mau-gon .bd-mat,.bd-mau-gon .bd-chon{fill:none;stroke:none;color:var(--chu2)}
/* cột phải rộng hơn một nấc, mô hình 3D cao hơn */
.ptv-luoi{grid-template-columns:minmax(0,1fr) 364px}
:root{--r3d-nuou:#F3C9CB}
@media (prefers-color-scheme:dark){:root{--r3d-nuou:#5A2E33}}
/* ---------- v1.85c: HỌC TRIỆT ĐỂ NGÔN NGỮ MÀU CỦA MẪU ----------
   Chủ dự án: "học hỏi triệt để ngôn ngữ thiết kế, màu sắc ở thiết kế demo tôi gửi". Đối chiếu
   từng vùng: nền lavender xám · thẻ trắng bo 16 · chẩn đoán TÔ THEO MỨC (đỏ / cam / xám) · phương
   án khuyến nghị và khách chọn tông XANH LÁ · số tab vòng tròn · tiêu đề vị trí răng có số tròn
   tím · thống kê ba màu dưới sơ đồ và dưới mô hình 3D. */
:root{--nen:#F3F4F8; --chim:#EEF0F5}
/* tab: số tròn + tên */
.tab-so-nut{display:inline-flex;align-items:center;gap:7px}
.tab-so{width:20px;height:20px;border-radius:50%;display:inline-grid;place-items:center;font-style:normal;
  font-size:11px;font-weight:700;background:var(--the);color:var(--chu2)}
.tab-ba .nut.chon .tab-so{background:rgba(255,255,255,.22);color:#fff}
/* thẻ chẩn đoán theo mức độ */
.cdg.muc-nang{background:#FDECEA;box-shadow:inset 3px 0 0 #E35D5B}
.cdg.muc-vua{background:#FEF3E6;box-shadow:inset 3px 0 0 #F0A35A}
.cdg.muc-nhe{background:var(--chim);box-shadow:inset 3px 0 0 #C9CDD6}
.cdg.muc-xong{background:#EAF7F0;box-shadow:inset 3px 0 0 #10B981;opacity:.85}
.cdg.tro{box-shadow:inset 3px 0 0 var(--nhan),0 0 0 2px var(--nhan-nhat)}
.cdg-dau b{flex:1 1 auto}
.cdg-chi b{color:var(--nhan)}
.chip.manh{font-weight:700}
.chip.loi.manh{background:#E35D5B;color:#fff}
.chip.canh.manh{background:#F0A35A;color:#fff}
.chip.tot.manh{background:#10B981;color:#fff}
.chip.nhan-nhat{background:var(--nhan-nhat);color:var(--nhan)}
.cdg-nut .nut{background:transparent;color:var(--chu2);text-decoration:none;padding:0 6px}
.cdg-nut .nut.nguy{color:#E35D5B}
/* đầu bảng phương án theo vị trí */
.pavt-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pavt-so{width:36px;height:36px;border-radius:50%;background:var(--nhan);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:15px;flex:none}
.pavt-ten{display:flex;flex-direction:column;min-width:0}
.pavt-ten b{font-size:15px}
.pavt-ten small{color:var(--chu3);font-size:12px}
.pavt .pavt-dau + .hang .nut,.pavt .nut.phu{border-color:transparent;background:var(--chim)}
/* phương án: khuyến nghị & khách chọn tông XANH LÁ (mẫu); còn lại trung tính */
.cach-xu-ly{background:var(--chim);box-shadow:none}
.cach-xu-ly.khuyen{background:#F0FAF5;box-shadow:inset 0 0 0 1.5px #A7E3C7}
.cach-xu-ly.bn-chon{background:#EAF7F0;box-shadow:inset 0 0 0 2px #10B981}
.cach-xu-ly .cach-so b{font-size:22px;color:var(--chu)}
.cach-xu-ly.khuyen .cach-so b,.cach-xu-ly.bn-chon .cach-so b{color:#0E8A62}
.cach-xu-ly .chip.bn.manh{background:#10B981;color:#fff;font-weight:700}
.cach-xu-ly .chip.tot.nhat{background:#DDF3E8;color:#0E8A62;font-weight:600}
.cach-xu-ly .pa-uu b{color:#0E8A62}.cach-xu-ly .pa-nhuoc b{color:#D97706}
.cach-xu-ly .nut:not(.phu){background:var(--nhan);color:#fff;border-radius:10px}
.cach-xu-ly.bn-chon .nut.phu{background:#fff}
/* thống kê dưới sơ đồ */
.bd-thong-ke{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 2px 0;font-size:12.5px;color:var(--chu3)}
.bd-thong-ke b{font-family:"IBM Plex Mono",monospace}
.tk-loi{color:#E35D5B}.tk-tot{color:#10B981}.tk-lam{color:#2E6FD9}.tk-nhan{color:var(--nhan)}
/* 3D: tỉ lệ cung răng */
.r3d-ti-le{padding:10px 2px 0}
.r3d-thanh{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:6px;background:var(--chim);gap:2px}
.r3d-thanh i{display:block;min-width:0}
.r3d-thanh .khoe{background:#10B981}.r3d-thanh .vd{background:#E35D5B}.r3d-thanh .ph{background:var(--nhan)}
/* dự toán: hàng có tiêu đề & phụ đề như mẫu, tổng tím */
.dt-dong{background:transparent;padding:6px 2px;border-radius:0}
.dt-dong + .dt-dong{border-top:1px solid color-mix(in srgb,var(--vien) 60%,transparent)}
.dt-tong b{font-size:22px}
/* nút chốt như mẫu: đầy, có bóng tím nhẹ */
.nut.cta-chot{box-shadow:0 8px 20px -10px var(--nhan)}
.ptv-chot .hang .nut{background:var(--chim);border-radius:10px}

/* ===== v1.86 — hai cửa mở phiếu điều trị =====
   Không viền, chỉ mảng màu — cùng ngôn ngữ với thẻ lịch hẹn và phiếu khám. */
.luoi-cua{display:grid;gap:12px;margin-top:12px}
@container chinh (min-width:900px){.luoi-cua{grid-template-columns:1fr 1fr}}
.the.cua-phieu{margin:0;padding:14px 16px;border:0}
.ds-buoi{display:flex;flex-direction:column;gap:6px}
.buoi-dong{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 10px;
  border-radius:12px;background:var(--chim)}
.buoi-dong.xong{opacity:.62}
.buoi-so{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-weight:700;font-size:13px;background:var(--nhan-nhat);color:var(--nhan)}
.buoi-dong.xong .buoi-so{background:var(--chim);color:var(--chu3)}
.buoi-dong .chip.nho-chip{margin-left:6px}

/* ===== v1.86 — mô hình răng 3D (three.js): token mô + tùy chọn hiển thị ===== */
/* Token của mô hình 3D khai ở :root chứ không ở .r3d — three.js đọc màu bằng getComputedStyle,
   và một phần tử CHƯA gắn vào trang thì computed style rỗng tuốt: cả men răng lẫn ÁNH SÁNG rơi
   về màu dự phòng, cả hàm xám đen. Khai ở gốc thì đọc ở đâu cũng ra. */
:root{--r3d-men:#F2E8D8;--r3d-xuong:#E6DCC8;--r3d-sang-tren:#FFFFFF;--r3d-sang-duoi:#C9C2B6;
      --r3d-den:#FFF8EC}
.r3d{background:var(--chim)}
.r3d-cv{display:block}
.r3d-nhan{position:absolute;transform:translate(-50%,-140%);padding:2px 9px;border-radius:9px;
  background:var(--nhan);color:#fff;font-weight:700;font-size:12.5px;pointer-events:none;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
.r3d-tuy-chon{margin-top:10px;border-radius:14px;background:var(--chim);padding:10px 12px}
.r3d-lop{display:flex;gap:2px;background:var(--the);border-radius:12px;padding:4px;
  box-shadow:0 0 0 1.5px var(--nhan-nhat) inset}
.r3d-lop-o{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;
  border:0;background:transparent;border-radius:9px;padding:6px 9px;cursor:pointer;text-align:left;
  font:inherit;color:var(--chu)}
.r3d-lop-o:hover{background:var(--chim)}
.r3d-lop-o.day{background:var(--nhan-nhat)}
.r3d-lop-o.an{opacity:.5}
.r3d-lop-ten{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.r3d-lop-nac{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--nhan)}
.r3d-lop-nac i{width:10px;height:10px;border-radius:50%;border:2px solid var(--nhan);background:var(--nhan)}
.r3d-lop-o.mo .r3d-lop-nac i{background:linear-gradient(90deg,var(--nhan) 50%,transparent 50%)}
.r3d-lop-o.an .r3d-lop-nac{color:var(--chu3)}
.r3d-lop-o.an .r3d-lop-nac i{border-color:var(--chu3);background:transparent}
.r3d-lop-o small{font-size:10.5px;color:var(--chu3)}
.r3d-tuy-dau{margin-top:8px}
.r3d-tuy-dau b{display:block;font-size:13.5px}
.r3d-tuy-dau small{color:var(--chu3);font-size:12px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--r3d-men:#D9CDB8;--r3d-xuong:#8E8371;
    --r3d-sang-tren:#6B6355;--r3d-sang-duoi:#2A2620;--r3d-den:#FFF3E0}
}
.r3d-nguon{display:block;margin-top:4px;font-size:10.5px;color:var(--chu3);opacity:.85}

/* =====================================================================================
   PHIẾU KHÁM v1.87 — TỐI GIẢN THEO MẪU STITCH (19/09/2026)
   Chủ dự án: "tối giản, bỏ tối đa đường viền, bỏ chỉ thị màu ở viền thẻ, dùng các mảng màu
   chuyển nhẹ nhàng và tinh tế (như đã làm ở Lịch hẹn)". Bố cục lấy từ màn Stitch
   docs/anh/stitch-phieu-kham/mobile-v2.png; toàn khối này nối cuối tệp nên thắng mọi luật cũ. */

/* LỖI 390px: dòng 3184 khai lại `.ptv-luoi{…364px}` SAU @media 1100 nên lưới hai cột thắng cả
   trên điện thoại — cột trái bị ép còn 40px, chữ vỡ một từ một dòng. Khai lại media ở đây. */
/* `1fr` = minmax(auto,1fr): cột co theo min-content nên sơ đồ 640px kéo cả cột ra 680px — phải
   khoá đáy bằng minmax(0,1fr) thì khung cuộn bên trong mới có việc để làm. */
@media (max-width:1100px){.ptv-luoi{grid-template-columns:minmax(0,1fr)}.ptv-phai{position:static}
  .ptv-trai,.ptv-phai{min-width:0;max-width:100%}.ptv-moi .bd-khung{overflow-x:auto;max-width:100%}}

/* ---- đầu hồ sơ: thanh tab cuộn ngang một hàng trên màn hẹp ---- */
@media (max-width:760px){
  .tab-ba{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .tab-ba::-webkit-scrollbar{display:none}
  .tab-ba .nut{flex:none;white-space:nowrap}
}

/* ---- thanh phiếu: chọn tờ · khám mới · AI — một dải chìm, không viền ---- */
.ptv-moi .thanh-phieu{background:var(--the);border-radius:16px;padding:10px 12px;border:0;box-shadow:none;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ptv-moi .thanh-phieu .tn-nhan{display:none}
.ptv-moi .thanh-phieu .nut.chon{background:var(--nhan-nhat);color:var(--nhan);border-color:transparent}
.ptv-moi .thanh-phieu .nut.chon small{color:var(--nhan)}

/* ---- tiến độ: bảy đoạn có tên ---- */
.ptv-moi .tien-do{border:0;padding:12px 14px;border-radius:16px}
.td-dau{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:13px}
.td-dau small{color:var(--chu3);font-weight:600}
.ptv-moi .td-buoc{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.ptv-moi .td-o{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:12px;color:var(--chu3);cursor:default}
.ptv-moi .td-o i{display:block;height:6px;border-radius:4px;background:var(--chim)}
.ptv-moi .td-o.xong i{background:var(--nhan)}
.ptv-moi .td-o small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--chu3)}
.ptv-moi .td-o.xong small{color:var(--nhan);font-weight:600}
@media (max-width:760px){.ptv-moi .td-o small{display:none}}
.ptv-moi .td-con{border-top:0;margin-top:10px;padding:8px 12px;border-radius:12px;background:#FFF8E1;color:#6B4E00}
.ptv-moi .td-con.xong{background:#EAF7F0;color:#0E8A62}
.ptv-moi .td-con .nut{background:#B27B00;color:#fff;border-color:transparent}
.ptv-moi .td-con.xong .nut{display:none}

/* ---- dòng hành chính của phiếu: chữ nhỏ + nút chuyển trạng thái + ⋯ ---- */
.dau-phieu-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 4px 8px;font-size:12.5px;color:var(--chu3)}
.dpm-chu{flex:1 1 320px;min-width:0;line-height:1.7}
.dpm-chu b{color:var(--chu)}
.dpm-chu .chip{vertical-align:middle}
.dpm-nut{display:flex;gap:6px;flex:none}

/* ---- ba ô ghi nhận: nhãn hoa nhỏ, khối chìm, ba cột trên màn rộng ---- */
.ptv-moi .the.o-luoi{border:0;box-shadow:none;background:var(--the);border-radius:16px;padding:14px;gap:10px}
.ptv-moi .o-luoi .o{background:#F5F6FA;border-radius:12px;padding:10px 12px}
.ptv-moi .o-luoi .o label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chu3)}
.ptv-moi .o-luoi .o .gt{font-size:13.5px;line-height:1.55;margin-top:4px}
@container chinh (min-width:1100px){.ptv-moi .the.o-luoi{grid-template-columns:repeat(3,1fr)}.ptv-moi .o-luoi .o.rong{grid-column:auto}}

/* ---- bước: thẻ trắng bo 16, nhãn "BƯỚC n" tím nhạt thay chấm số ---- */
.ptv-moi .buoc-tv{background:var(--the);border-radius:16px;padding:14px 16px;margin:14px 0 0;border:0}
.ptv-moi .buoc-so{width:auto;height:22px;padding:0 8px;border-radius:8px;background:var(--nhan-nhat);color:var(--nhan);
  font-size:11px;font-weight:700;letter-spacing:.04em}
.ptv-moi .buoc-so::before{content:"BƯỚC "}
.ptv-moi .buoc-dau p{font-size:12.5px;color:var(--chu3)}
.ptv-moi .buoc-than .the{border:0;box-shadow:none;background:#F5F6FA;border-radius:12px}

/* ---- sơ đồ răng: thanh công cụ chìm, bỏ viền khung ---- */
.ptv-moi .bd-thanh{background:#F5F6FA;border-radius:12px;padding:6px 8px;border:0}
.ptv-moi .bd-bo-rang .nut{border-color:transparent}
.ptv-moi .thanh-pv{background:#F5F6FA;border-radius:12px;padding:8px 10px;margin-top:8px}
.ptv-moi .thanh-pv .nut{border-color:transparent;background:var(--the)}
.ptv-moi .thanh-pv .nut.chon{background:var(--nhan-nhat);color:var(--nhan)}
.ptv-moi .thanh-pv .mach-nuoc{display:none}
.ptv-moi .bd-khung{border:0;box-shadow:none;background:var(--the)}
@media (max-width:760px){.ptv-moi .thanh-pv .hang{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.ptv-moi .thanh-pv .nut{flex:none}}

/* ---- phương án theo vị trí: thẻ không viền, khách chọn = mảng xanh nhạt ---- */
.ptv-moi .pavt{border:0;box-shadow:none;background:#F5F6FA;border-radius:14px}
.ptv-moi .cach-xu-ly{border:0;box-shadow:none;background:var(--the);border-radius:12px}
.ptv-moi .cach-xu-ly.khuyen{background:#F0FAF5;box-shadow:none}
.ptv-moi .cach-xu-ly.bn-chon{background:#E3F5EC;box-shadow:none;border:0}
.ptv-moi .the-chan-doan{border:0;box-shadow:none;background:var(--the)}

/* ---- chẩn đoán theo răng: KHÔNG dải màu cạnh trái, chỉ mảng màu + chip nhạt ---- */
.ptv-moi .cdg,.ptv-moi .cdg.muc-nang,.ptv-moi .cdg.muc-vua,.ptv-moi .cdg.muc-nhe,.ptv-moi .cdg.muc-xong,.ptv-moi .cdg.tro{box-shadow:none}
.ptv-moi .cdg{border-radius:14px;padding:12px 14px}
.ptv-moi .cdg.muc-nang{background:#FBEFED}
.ptv-moi .cdg.muc-vua{background:#FDF4E7}
.ptv-moi .cdg.muc-nhe{background:#F5F6FA}
.ptv-moi .cdg.muc-xong{background:#EAF7F0}
.ptv-moi .cdg.tro{outline:2px solid var(--nhan-nhat);outline-offset:0}
.ptv-moi .cdg-rang{background:transparent;padding:0;font-size:12.5px}
.ptv-moi .cdg.muc-nang .cdg-rang{color:#B3261E}.ptv-moi .cdg.muc-vua .cdg-rang{color:#9A6414}
/* chip mức: nền nhạt + chữ đậm cùng sắc, không nền đặc */
.ptv-moi .chip.loi.manh{background:#F6D9D5;color:#8C1D18}
.ptv-moi .chip.canh.manh{background:#F8E3C4;color:#6B4E00}
.ptv-moi .chip.tot.manh{background:#CDEEDC;color:#0E6B4B}
.ptv-moi .cdg-nut .nut{background:transparent;color:var(--chu3)}
.ptv-moi .cdg-nut .nut.nguy{color:#B3261E}

/* ---- khối cột phải: bỏ mọi viền ---- */
.ptv-moi .ptv-khoi{border:0;box-shadow:none}
.ptv-moi .r3d-lop{box-shadow:none;background:#F5F6FA}
.ptv-moi .r3d-lop-o.day{background:var(--the)}
.ptv-moi .r3d-tuy-chon{background:transparent;padding:8px 0 0}
.ptv-moi .r3d-ghi .r3d-the{background:#FBEFED;border-radius:12px;padding:10px 12px}
.ptv-moi .dt-tong{background:var(--nhan-nhat);border-radius:12px;padding:10px 12px;margin-top:8px}
.ptv-moi .dt-tong b{color:var(--nhan);font-size:18px}
.ptv-moi .dt-dong{border:0;border-radius:10px;padding:8px 10px}
.ptv-moi .dt-dong:nth-child(odd){background:#F5F6FA}

/* ---- kết luận & khối ký: khối chìm, bốn ô ký ---- */
.ptv-moi .thuc-hien-boi{border-top:0;background:#F5F6FA;border-radius:12px;padding:12px 14px}
.ptv-moi .thb-ky{grid-template-columns:repeat(4,1fr);gap:8px}
.ptv-moi .ky-o{background:var(--the);border-radius:10px;padding:8px 6px}
@media (max-width:760px){.ptv-moi .thb-ky{grid-template-columns:repeat(2,1fr)}}

/* ---- nút chốt: dính đáy trên di động, chừa chỗ cho tay ---- */
@media (max-width:760px){
  .ptv-moi .ptv-chot{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--the);box-shadow:0 -6px 24px rgba(0,0,0,.08);border-radius:16px 16px 0 0}
  .ptv-moi .ptv-chot .hang{justify-content:center}
  .phieu-tv.ptv-moi{padding-bottom:110px}
}
/* viền còn sót ở chip & nút phụ trong tờ phiếu */
.ptv-moi .chip{border-color:transparent}
.ptv-moi .nut.phu{border-color:transparent;background:#F5F6FA}
/* v1.87b — bốn chỗ còn sót sau khi soi ảnh 390/1400 */
/* sơ đồ răng trên điện thoại: 32 răng ép vào 390px thì không bấm nổi — cho cuộn ngang trong khung */
@media (max-width:760px){.ptv-moi .bd-khung{overflow-x:auto}.ptv-moi .bieu-do > .bd-khung .bd-svg,.ptv-moi .bd-khung .bd-svg{min-width:640px;width:640px}}
/* khối "còn N răng chưa chẩn đoán" và băng cảnh báo đỏ: mảng màu, không viền */
.ptv-moi .noi-buoc{border:0;box-shadow:none;background:#FFF8E1;border-radius:14px;padding:12px 14px}
.ptv-moi .noi-buoc.xong{background:#EAF7F0}
.canh-bao-do{border:0;border-radius:14px;background:#FBEFED}
/* container của khu làm việc tên là `khu-lam-viec`, không phải `chinh` — hai luật dưới trước nay chưa từng khớp */
/* khu làm việc = màn trừ thanh bên (~1050px ở màn 1400) nên ngưỡng phải là 900 */
@container khu-lam-viec (min-width:900px){.ptv-moi .the.o-luoi{grid-template-columns:repeat(3,1fr)}.ptv-moi .o-luoi .o.rong{grid-column:auto}}
@container khu-lam-viec (min-width:900px){.luoi-cua{grid-template-columns:1fr 1fr}}
/* phương án theo vị trí trên điện thoại: một cột — hai thẻ 230px không nhét vừa 390px */
@media (max-width:760px){.ptv-moi .luoi-cach{grid-template-columns:1fr}.ptv-moi .pavt{overflow:hidden}}

/* =====================================================================================
   PHIẾU KHÁM v1.88 (19/09/2026) — theo năm góp ý của chủ dự án:
   ① 2D và 3D cùng một răng đang chọn · ② hộp 3D toàn màn trên điện thoại · ③ sửa được chẩn
   đoán ngay từ thẻ ghi chú · ④ nhắc hành chính gom vào một nút · ⑤ thẻ phương án bỏ hết viền
   và dải màu cạnh trái · ⑥ cột phải cuộn độc lập, thanh tab không che nội dung. */

/* ⑥ — cột phải là một cột CUỘN RIÊNG, neo dưới thanh tab.
   Trước: `top:12px` nên thanh tab (dính ở top:0, cao 60–96px tuỳ số tab và bề ngang) đè lên
   đầu cột; và vì cột cao hơn màn nên nó "mất neo" ở cuối trang. Nay cột tự cuộn trong khung
   cao bằng màn, `overscroll-behavior:contain` chặn cuộn lan ra trang — kéo mô hình 3D thì
   chỉ cột ấy chạy, trang đứng yên. */
@media (min-width:1101px){
  .ptv-luoi{grid-template-columns:minmax(0,1fr) clamp(340px,29vw,460px);gap:20px}
  .ptv-phai{position:sticky;top:calc(var(--cao-tab,88px) + 8px);
            max-height:calc(100vh - var(--cao-tab,88px) - 20px);
            overflow-y:auto;overscroll-behavior:contain;padding-right:2px;scrollbar-width:thin}
  .ptv-phai::-webkit-scrollbar{width:6px}
  .ptv-phai::-webkit-scrollbar-thumb{background:var(--chim);border-radius:3px}
  /* mốc cuộn của từng bước nằm dưới thanh tab, không bị nó nuốt */
  .ptv-moi .buoc-tv,.ptv-moi .the-chan-doan,.ptv-moi .cdg{scroll-margin-top:calc(var(--cao-tab,88px) + 12px)}
}

/* ⑤ — thẻ phương án: KHÔNG viền, KHÔNG dải màu cạnh trái. Trạng thái nói bằng mảng nền và chip. */
.ptv-moi .pavt{border:0;box-shadow:none}
.ptv-moi .pavt-vung{border-top:0;padding:0;margin-top:10px}
.ptv-moi .pavt-vung.trung{background:transparent;box-shadow:none;padding-left:0}
.ptv-moi .pavt-vung.chot > .hang > .cd-vung{text-decoration:none}
.ptv-moi .pavt-cach,.ptv-moi .pavt-cach.khuyen,.ptv-moi .pavt-cach.bn-chon{border:0;box-shadow:none}
.ptv-moi .pavt-cach{background:var(--the);border-radius:12px}
.ptv-moi .pavt-cach.khuyen{background:#F4FBF7}
.ptv-moi .pavt-cach.bn-chon{background:#E3F5EC}
.ptv-moi .pavt-bang td{border-bottom:0;padding:2px 4px}
.ptv-moi .cach-xu-ly .chip.bn.manh{background:#CDEEDC;color:#0E6B4B}
.ptv-moi .cach-xu-ly .nut.phu{background:var(--the)}
.ptv-moi .cach-xu-ly.bn-chon .nut.phu{background:#fff}
.ptv-moi .cd-vung{background:transparent;padding:0;color:var(--chu3)}

/* ③ — nút sửa trong thẻ ghi chú của mô hình 3D */
.r3d-sua{margin-top:8px}
.r3d-sua .nut{background:var(--nhan-nhat);color:var(--nhan);border-color:transparent}

/* ④ — nút gom nhắc hành chính, cạnh tên khách */
.nhac-ho-so{display:inline-flex;align-items:center;gap:5px;flex:none;
  background:#FDF4E7;color:#9A6414;border-color:transparent}
.nhac-ho-so .nhs-so{min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;
  background:#9A6414;color:#fff;font-size:11px;font-weight:700}
.nhs-muc{padding:10px 12px;border-radius:12px;background:var(--chim);margin-bottom:10px}
.nhs-muc b{display:block;margin-bottom:4px}
.nhs-muc p{margin:4px 0;font-size:13px;color:var(--chu2);line-height:1.5}

/* ② — hộp mô hình 3D: TOÀN MÀN trên điện thoại, mô hình trên · ghi chú dưới, cả hai cùng thấy */
.hop.hop-3d{display:flex;flex-direction:column;gap:0;padding:14px 16px}
.hop-3d > h3{margin:0 0 10px;font-size:16px}
.hop-3d .r3d-trong-hop{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
.hop-3d .r3d{flex:0 0 auto}
.hop-3d .r3d-ghi{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  background:transparent;padding:10px 0 0}
.hop-3d .r3d-tuy-chon.gon{background:transparent;padding:8px 0 0;margin:0}
.hop-3d .r3d-tuy-chon.gon .r3d-tuy-dau{margin-top:6px}
.hop .r3d-cv{min-height:0}
@media (max-width:760px){
  .lop:has(.hop-3d){padding:0}
  .hop.hop-3d{max-width:100%;width:100%;height:100dvh;max-height:100dvh;border-radius:0;
    padding:12px 14px calc(8px + env(safe-area-inset-bottom))}
  .hop-3d .r3d-the{background:#FBEFED;border-radius:12px;padding:10px 12px}
  .hop-3d > .hang:last-child{position:static;padding-top:6px}
}
/* Nút "☰ Màn hình" cố định ở góc trái trên (z-index 78) đè lên tiêu đề hộp toàn màn — ẩn nó
   khi đang mở hộp mô hình 3D: lúc ấy màn hình chỉ có một việc, và nút Đóng đã ở ngay dưới. */
body:has(.hop-3d) .nut-mo-ben{display:none}
/* `.moc .gio` rộng cố định 52px — vừa cho "09:30", tràn cho "18/9/2026", và chữ ngày đè lên
   nội dung bên cạnh. Trong tờ phiếu cho nó co giãn theo chữ và bỏ đường kẻ dưới. */
.ptv-moi .moc{border-bottom:0;padding:8px 0;gap:10px}
.ptv-moi .moc .gio{width:auto;min-width:62px;flex:none;white-space:nowrap}
/* v1.89 — hai tab 2D · 3D trong bước 2 trên màn hẹp; 3D đứng đúng chỗ sơ đồ */
.kr-tab{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:#F5F6FA;margin-bottom:10px}
.kr-tab .nut{border-color:transparent;background:transparent}
.kr-tab .nut.chon{background:var(--the);color:var(--nhan);box-shadow:none}
.ptv-moi .r3d-ghi[hidden]{display:none}

/* v1.90 — form sửa trọn một chẩn đoán */
.hop.hop-sua-rang{max-width:min(1040px,96vw)}
.sr-khoi{background:#F5F6FA;border-radius:14px;padding:12px 14px}
.sr-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.sr-dau b{font-size:14.5px}.sr-dau small{color:var(--chu3)}
.sr-luoi{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:10px}
@media (max-width:760px){.sr-luoi{grid-template-columns:1fr}}
.sr-ds-cach{display:flex;flex-direction:column;gap:10px}
.sr-cach{background:var(--the);border-radius:14px;padding:0 14px 12px;box-shadow:inset 0 0 0 1.5px #EEF0F5}
.sr-cach > summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;list-style:none;cursor:pointer;padding:12px 0 8px;font-size:14px}
.sr-cach > summary::-webkit-details-marker{display:none}
.sr-cach > summary::before{content:"▸";color:var(--chu3);font-size:12px}
.sr-cach[open] > summary::before{content:"▾"}
.sr-tom{color:var(--chu2);font-weight:500}
.sr-cach .sua-cach .khoi-mau{margin-top:4px}
/* "Bỏ" trong form: chữ đỏ trên nền trong, không phải khối đỏ đặc — luật toàn cục `.nut.nguy` tô
   nền đỏ cho nút xoá ở nơi khác (và PHẢI giữ nguyên ở đó); trong form mỗi cách có một nút "Bỏ",
   ba khối đỏ đặc là ba tiếng còi cho một việc hiếm. */
.sua-rang .nut.nguy{background:transparent;color:#B3261E;border-color:transparent}
.sua-rang .nut.nguy:hover{background:#FBEFED;filter:none}
body:has(.hop-sua-rang) .nut-mo-ben{display:none}

/* v1.91 — bảng răng tối giản: tên răng → chẩn đoán (một dòng) → thẻ cách xử lý */
.ptv-moi .pavt{padding:12px 14px;margin-top:10px}
.pv-ten{font-size:15px;font-weight:800;color:var(--nhan);margin-bottom:6px}
.pv-dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.pv-dong.mo{opacity:.75;font-size:13px;margin-top:6px}
.pv-dong small{color:var(--chu3)}
.ptv-moi .pavt-luoi{margin-top:8px}
.ptv-moi .pavt-vung + .pavt-vung{margin-top:14px}
.pv-cu{margin-top:10px}
/* khối 3D: hình + một hàng lớp + ⓘ, không gì khác */
.ptv-moi .r3d-khoi{padding:8px}
.r3d-tuy-chon.gon{display:flex;align-items:center;gap:6px;background:transparent;padding:8px 0 0;margin:0}
.r3d-tuy-chon.gon .r3d-lop{flex:1 1 auto}
.r3d-tuy-chon.gon .r3d-lop-o{padding:5px 8px}
.r3d-tuy-chon.gon .r3d-lop-o small{display:none}
.r3d-i{flex:none;width:30px;height:30px;padding:0;border-radius:50%;border-color:transparent;background:#F5F6FA;color:var(--chu3)}
.hop-3d .r3d-tuy-chon.gon{padding:8px 0 0}
/* thanh công cụ sơ đồ 2D: một hàng cuộn ngang, bỏ "Phạm vi:" */
.ptv-moi .thanh-pv > .hang > span:first-child{display:none}
/* v1.91 — bỏ câu dẫn dưới tên bước: chủ dự án "tối giản tối đa … giải thích, tiêu đề, dẫn dắt" */
.ptv-moi .buoc-dau p{display:none}

/* ===== v1.92 — KHÁCH XEM PHIẾU ONLINE (#xem-khach=<mã>): tờ phiếu tương tác, chỉ đọc =====
   Mọi nút GHI đã biến mất vì máy chủ ép cờ `duoc.*` về false; ở đây chỉ giấu phần khung của
   nhân viên: thanh bên, nút quay lại, thanh tab hồ sơ, dải chọn phiếu, tiến độ, AI nghe, xuất
   bản, in tóm tắt, nút chốt. Sơ đồ 2D, mô hình 3D, bảng răng, dự toán, kết luận: giữ nguyên. */
.xem-khach .ben,.xem-khach .nut-mo-ben,.xem-khach .lop-ben{display:none!important}
.xem-khach .khung{grid-template-columns:1fr}
.xem-khach main.chinh > .hang:first-child{display:none}         /* nút ← quay lại */
.xem-khach .tab-ba,.xem-khach .thanh-phieu,.xem-khach .tien-do,.xem-khach .dpm-nut,
.xem-khach .ptv-chot,.xem-khach .nhac-ho-so,.xem-khach .dau .nut{display:none!important}
.xem-khach .phieu-tv.ptv-moi{padding-bottom:24px}
.xem-khach .dau-phieu-meta{margin-top:4px}
/* khách không "chọn" trên tờ này — nút Khách chọn / … đã mất theo cờ; chỉ còn đọc */
.xem-khach .cdg{cursor:default}
/* khách xem: trong các bước không còn nút nào ngoài công cụ XEM (tab 2D/3D · lớp 3D · ⓘ · ⟲ ⤢ ·
   bộ răng · phạm vi · chú giải). "Bỏ" trên dòng ghi nhận và "Ghi kết luận" là nút ghi — ẩn. */
.xem-khach .buoc-tv .nut{display:none!important}
.xem-khach .kr-tab .nut,.xem-khach .r3d-nut .nut,.xem-khach .r3d-i,.xem-khach .bd-thanh .nut,
.xem-khach .thanh-pv .nut,.xem-khach .bd-bo-rang .nut,.xem-khach .bd-nut-thanh{display:inline-flex!important}
.xem-khach .thanh-pv .mach-nuoc{display:none}

/* =====================================================================================
   PHIẾU KHÁM v1.93 (19/09/2026) — mười góp ý của chủ dự án sau khi dùng v1.92 trên iPhone:
   ① bước 2 gọn bằng icon · ② chẩn đoán + dự toán TRƯỚC kết luận trên màn hẹp · ③ cảnh báo vào
   nút ⚠, chia sẻ nằm ở nút chọn phiếu, một nút chốt · ④ số bước & tên bước nổi · ⑤⑥ vẽ lại nhẹ,
   giữ cuộn ngang · ⑦ bấm mặt/thân/chân là bảng răng theo · ⑧ tab đang mở ở giữa · ⑨ nhãn vùng
   trên dòng chẩn đoán, lưu ý một dòng có popup · ⑩ bảng dòng trong form thành thẻ trên di động. */

/* ④ — bước: nhãn "BƯỚC n" tím đặc, tên bước to hơn, hàng đầu rõ ràng */
.ptv-moi .buoc-dau{align-items:center;gap:10px;margin:0 0 12px}
.ptv-moi .buoc-so{display:inline-flex;align-items:center;white-space:nowrap;height:26px;padding:0 10px;border-radius:9px;background:var(--nhan);color:#fff;font-size:12px;letter-spacing:.06em}
.ptv-moi .buoc-dau h3{font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.25}
@media (max-width:760px){.ptv-moi .buoc-dau h3{font-size:16.5px}}

/* ① — thanh công cụ sơ đồ: MỘT hàng cuộn ngang, toàn nút tròn/gọn; không bảng màu, không câu dẫn */
.ptv-moi .bd-thanh{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:6px;padding:6px}
.ptv-moi .bd-thanh::-webkit-scrollbar{display:none}
.ptv-moi .bd-thanh .nut{flex:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap;height:32px;min-height:32px;padding:0 10px;border-radius:10px;background:var(--the);border-color:transparent}
.ptv-moi .bd-thanh .nut small{font-size:12px;font-weight:600}
.ptv-moi .bd-thanh .nut.chon{background:var(--nhan-nhat);color:var(--nhan)}
.ptv-moi .bd-thanh .day-day{flex:1 1 auto}
.ptv-moi .bd-mau-gon{display:none}
.ptv-moi .thanh-pv.gon{margin:8px 0 0;padding:8px 10px}
.ptv-moi .thanh-pv.gon .pv-dang-chon{margin:0;padding:0;border:0;gap:8px}
.ptv-moi .thanh-pv.gon .pv-dang-chon > div{flex:1 1 auto;min-width:0}
.ptv-moi .thanh-pv.gon .pv-dang-chon .nut{margin-left:0}
.kr-thanh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.kr-thanh .kr-tab{margin-bottom:0}
.bd-chup{background:#FDF4E7!important;color:#9A6414!important;border-color:transparent!important}
/* hộp chú giải mở từ ⓘ: bảng màu + bảng ký hiệu đầy đủ */
.hop .bd-mau-gon{display:flex;margin:0 0 10px}
.hop .bd-chu-giai{display:block;max-height:none}

/* ② — màn hẹp: chẩn đoán từng răng + dự toán là hai thẻ giữa bước 2 và bước 3 */
@media (max-width:1100px){
  .ptv-moi .ptv-trai > .ptv-khoi{background:var(--the);border-radius:16px;padding:14px 16px;margin:14px 0 0}
  .ptv-moi .ptv-phai:empty{display:none}
}

/* ③ — dải chọn phiếu: tờ đang mở mang ⤴ (bấm lại là xuất bản) */
.tp-chia-se{font-style:normal;margin-left:6px;opacity:.85}
.ptv-moi .thanh-phieu .nut.chon{padding-right:10px}
.nhac-ho-so.loi{background:#FBEFED;color:#B3261E}
.nhac-ho-so.loi .nhs-so{background:#B3261E}
.nhs-muc.loi{background:#FBEFED}
.kl-dau{gap:8px;flex-wrap:wrap;margin-bottom:10px}
.kl-dau:empty{display:none}
/* nút chốt dính đáy chỉ còn MỘT nút — thấp hơn, chừa ít chỗ hơn */
@media (max-width:760px){.phieu-tv.ptv-moi{padding-bottom:84px}}

/* ⑨ — chip phạm vi trên dòng chẩn đoán (chẩn đoán ghi cho vùng rộng hơn răng đang trỏ) */
.pv-dong .chip.pv-vung{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
/* lưu ý một dòng trong form + popup */
.at-ghi-chu{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;padding:8px 10px;border-radius:12px;background:#F5F6FA;font-size:13px}
.at-ghi-chu > b{margin-right:2px}
.at-ghi-chu .chip.bam{cursor:pointer;border-color:transparent;background:var(--the)}
.at-ghi-chu .chip.bam.canh{background:#FDF4E7;color:#9A6414}
.at-ghi-chu .chip.bam.loi{background:#F6D9D5;color:#8C1D18}
.at-popup .khoi-at{margin-top:0;border:0;border-radius:12px;background:#F5F6FA}
.at-popup .khoi-at.chan{background:#FBEFED}

/* ⑩ — form sửa: bảng dòng cuộn ngang trên máy tính, THẺ hai cột trên điện thoại */
.sua-cach .bang{overflow-x:auto}
@media (max-width:760px){
  .hop.hop-sua-rang{max-width:100%;width:100%;max-height:100dvh;height:100dvh;border-radius:0;padding:14px 12px calc(10px + env(safe-area-inset-bottom))}
  .lop:has(.hop-sua-rang){padding:0}
  .sua-cach .bang{overflow:visible;border:0;background:transparent}
  .sua-cach .bang table,.sua-cach .bang tbody{display:block;width:100%}
  .sua-cach .bang thead{display:none}
  .sua-cach .bang tr{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;padding:10px 12px;margin-bottom:8px;border-radius:12px;background:#F5F6FA}
  .sua-cach .bang td{display:block;padding:0!important;border:0;min-width:0}
  .sua-cach .bang td[data-nhan]::before{content:attr(data-nhan);display:block;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--chu3);margin-bottom:3px}
  .sua-cach .bang td.sc-stt{display:none}
  .sua-cach .bang td.sc-dv,.sua-cach .bang td.sc-bac{grid-column:1 / -1}
  .sua-cach .bang td input,.sua-cach .bang td select{width:100%!important;max-width:100%!important;box-sizing:border-box}
  .sua-cach .bang td.sc-bo{grid-column:1 / -1;text-align:right}
  .sua-cach .bang td.sc-bo .nut{width:auto}
  .sua-cach .bang td.tien{font-weight:700;font-size:15px}
  .tong-hop .th-luoi:last-child{grid-template-columns:1fr}
  .sr-cach{padding:0 10px 10px}
}
.ptv-moi .buoc-so::before{content:"BƯỚC\00a0"}
/* "còn N răng chưa chẩn đoán" trong tờ phiếu: một hàng — chip + nút ⚡, danh sách nằm sau ⚠ */
.ptv-moi .noi-buoc.gon{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px}
.ptv-moi .noi-buoc.gon .nut{margin-left:auto}
.ptv-moi .bd-thanh .nut.bd-nut-thanh{width:auto;min-width:32px}
.ptv-moi .noi-buoc.gon{background:#F5F6FA}
.nhs-muc .bao{display:block}
.nhs-muc .bao .nut{margin-top:8px}
.ptv-moi .bd-thanh .nut.bd-nut-thanh{padding:0 10px!important;background:var(--the)!important}
.ptv-moi .bd-thanh .nut.bd-nut-thanh.chon{background:var(--nhan-nhat)!important}
.ptv-moi .thanh-pv.gon{margin:0 0 8px;background:var(--nhan-nhat)}
.ptv-moi .thanh-pv.gon .nut:not(.phu){background:var(--nhan);color:#fff}
.ptv-moi .thanh-pv.gon .nut:not(.phu):disabled{opacity:.45}

/* ===== v1.94 — mô hình 3D: khí cụ · răng mất trong suốt · chip lớp nhỏ · không nhãn số răng ===== */
:root{--r3d-su:#FBFAF6;--r3d-kim-loai:#B9BCC2;--r3d-titan:#9AA0A8;--r3d-khay:#CFE6F7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--r3d-su:#E8E2D6;--r3d-kim-loai:#8E9299;--r3d-titan:#767C84;--r3d-khay:#7FA6C4}}
:root[data-theme="dark"]{--r3d-su:#E8E2D6;--r3d-kim-loai:#8E9299;--r3d-titan:#767C84;--r3d-khay:#7FA6C4}
.r3d-lop.gon{display:flex;gap:4px;padding:0;background:transparent;box-shadow:none}
.r3d-lop.gon .r3d-lop-o{flex:0 0 auto;flex-direction:row;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:13px;
  background:#F5F6FA;font-size:12px;font-weight:600;color:var(--chu2)}
.r3d-lop.gon .r3d-lop-o > i{width:9px;height:9px;border-radius:50%;border:2px solid var(--nhan);background:var(--nhan);flex:none}
.r3d-lop.gon .r3d-lop-o.mo > i{background:linear-gradient(90deg,var(--nhan) 50%,transparent 50%)}
.r3d-lop.gon .r3d-lop-o.an{opacity:.55}
.r3d-lop.gon .r3d-lop-o.an > i{background:transparent;border-color:var(--chu3)}
.r3d-lop.gon .r3d-lop-o.day{background:var(--nhan-nhat);color:var(--nhan)}
.r3d-lop.gon .r3d-lop-ten{font-size:12px;font-weight:600}
.r3d-tuy-chon.gon .r3d-lop-o{padding:0 9px}
.r3d-nhan{display:none}
.hop-3d .r3d-ghi .pavt{margin-top:8px;padding:10px 12px}
.hop-3d .r3d-ghi .luoi-cach,.hop-3d .r3d-ghi .pavt-luoi{grid-template-columns:1fr}
.hop-3d .r3d-ghi .pavt{border:0;box-shadow:none;background:#F5F6FA;border-radius:14px}
.hop-3d .r3d-tt{display:flex;gap:6px;flex-wrap:wrap;margin:8px 4px 0}
.hop-3d .pavt-vung,.hop-3d .pavt-vung.trung{border:0;box-shadow:none;background:transparent;padding:0;margin-top:10px}
.hop-3d .cach-xu-ly,.hop-3d .cach-xu-ly.khuyen,.hop-3d .cach-xu-ly.bn-chon{border:0;box-shadow:none;border-radius:12px}
.hop-3d .cach-xu-ly{background:var(--the)}.hop-3d .cach-xu-ly.khuyen{background:#F0FAF5}.hop-3d .cach-xu-ly.bn-chon{background:#E3F5EC}
.hop-3d .chip,.hop-3d .nut.phu{border-color:transparent}
/* v1.95 — thanh chọn răng dưới mô hình 3D: tên răng · nút ghi · bỏ chọn */
.r3d-chon{display:flex;align-items:center;gap:8px;margin-top:8px;padding:8px 10px;border-radius:12px;background:var(--nhan-nhat);font-size:13.5px}
.r3d-chon b{color:var(--nhan)}
.r3d-chon .nut.phu{background:var(--the)}

/* =====================================================================================
   THANH BÊN v1.96 (19/09/2026) — theo mẫu Stitch, chủ dự án đặt bài:
   "Thiết kế lại thanh menu này. Gợi ý: khi ở chế độ thu gọn trên desktop, lướt chuột đến sẽ
   hiện ngay tên view tương ứng."
   Triết lý giữ nguyên mạch v1.87→v1.93: bỏ đường viền, bỏ vạch ngăn, trạng thái nói bằng
   MẢNG MÀU CHUYỂN NHẸ và trọng số chữ. Khối này nối cuối tệp nên thắng các luật cũ. */

/* ---- biểu tượng: nét, ăn theo màu chữ của mục nên không cần một luật màu riêng nào ---- */
.bt-ben{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.ben a.chon .bt-ben,.ben a.nhom.co .bt-ben{opacity:1}
.ben .muc-ten{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- lối bày đầy đủ ---- */
.ben{gap:2px;padding:14px 10px 16px}
.hieu{padding:6px 8px 14px}
/* Nút thu gọn và chuông là ICON TRẦN, không phải hộp có viền — hai thứ bấm mỗi ngày một lần
   không đáng mang khung. */
.nut-gon{border:0;background:transparent;width:26px;height:26px;border-radius:8px}
.nut-gon:hover{background:var(--chim)}
.ben a{gap:9px;padding:8px 10px;border-radius:10px}
.ben a.nhom{gap:9px;padding:8px 10px}
.ben a.nhom .mui{margin-left:0;width:auto;font-size:9px;opacity:.6;order:3}
.ben a.nhom .dem{order:2;margin-left:auto}
/* Mục đứng một mình mang hình; chúng là hai mục bấm nhiều nhất trong ngày nên đứng sát đầu. */
.ben .con-nhom.mo-san{padding-left:0;margin-left:0;border-left:0}
/* Nhóm con: thụt lề bằng KHOẢNG TRỐNG, không bằng một vạch kẻ dọc. */
.con-nhom{padding-left:0;margin-left:27px;border-left:0}
.ben a.con{padding:6px 10px;border-radius:9px}
.nhan-nhom{padding:12px 10px 4px}

/* ---- dải THU GỌN: hình + nhãn bay khi rê chuột ---- */
.ben.gon{padding:12px 6px;gap:4px}
.ben.gon .muc-gon{position:relative;width:38px;height:38px;border-radius:11px;color:var(--chu2)}
.ben.gon .muc-gon:hover{background:var(--chim);color:var(--chu)}
.ben.gon .muc-gon.chon{background:var(--nhan-nhat);color:var(--nhan)}
.ben.gon .muc-gon .bt-ben{width:19px;height:19px}
.ben.gon .muc-gon .bt-chu{font-size:13px;font-weight:700}
/* Khoảng trống giữa hai TỔ — cùng một hình lặp trong một tổ thì đây là thứ duy nhất nói ra
   "từ đây sang chuyện khác". */
.ben.gon .muc-gon.dau-to{margin-top:12px}
/* v2.00 — bảng bay liệt kê các màn của tổ. `fixed` + gắn vào `body` để thoát cả khung cuộn của
   dải lẫn mọi tầng xếp lớp; toạ độ do JS đo lúc rê chuột. */
.ben-bay{position:fixed;z-index:90;min-width:190px;max-width:260px;padding:6px;border-radius:12px;
  background:var(--the);box-shadow:0 12px 32px -10px rgba(20,20,40,.32);display:flex;flex-direction:column;gap:1px}
.ben-bay .bb-dau{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--chu3);padding:6px 10px 4px}
.ben-bay .bb-muc{display:block;padding:8px 10px;border-radius:9px;color:var(--chu2);font-size:13.5px;
  cursor:pointer;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ben-bay .bb-muc:hover{background:var(--chim);color:var(--chu)}
.ben-bay .bb-muc.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
/* con số nhỏ trên icon: tổ này có mấy màn — biết trước khi bung bảng */
.ben.gon .muc-gon{position:relative}
.ben.gon .muc-gon .mg-dem{position:absolute;top:-2px;right:-3px;min-width:15px;height:15px;padding:0 3px;
  border-radius:8px;background:var(--chim);color:var(--chu3);font-size:9.5px;font-weight:700;font-style:normal;
  display:grid;place-items:center;box-shadow:0 0 0 2px var(--the)}
.ben.gon .muc-gon.chon .mg-dem{background:var(--nhan);color:#fff}
.ben.gon .nut-gon{width:38px;height:38px}

/* ---- thẻ người dùng dưới đáy: khối chìm, không đường kẻ ---- */
.toi{border-top:0;background:var(--chim);border-radius:14px;padding:11px 12px;gap:1px}
.toi button{margin-top:8px;border:0;background:transparent;color:var(--chu3);padding:0;min-height:0}
.toi button:hover{background:transparent;border-color:transparent;color:var(--loi)}

/* =====================================================================================
   LỊCH HẸN v1.96 — hai lỗi chủ dự án chỉ ra, MỘT gốc.

   "Chỉ thị màu hiệu suất của bác sĩ đang ở dạng hình ovan không phải hình tròn, và khi bác sĩ
   đăng ký 3 ca làm việc thì tên bác sĩ bị đẩy lên ẩn mất."

   Đo được trên máy: đầu cột là hộp flex DỌC cao cố định 82px. Ba chip ca làm nội dung vượt
   chiều cao ấy, và luật co giãn của flex bóp hàng đầu tiên — hàng TÊN — từ 36px xuống 4px:
   tên tràn lên trên khung 6px (mất hút), còn vòng công suất bị nén thành 34×32 (méo thành
   ô-van). Một gốc, hai triệu chứng.

   Sửa ở gốc: hàng nhận dạng KHÔNG BAO GIỜ bị bóp, và vòng luôn vuông (nên luôn tròn). Kèm
   theo, `lichhen.js` rút ca thứ hai trở đi thành một viên "+N" để nội dung không còn đòi
   nhiều chiều cao hơn khung. */
.lich-dau-cot .ten{flex:none}
.lich-dau-cot .dau-ca{flex:none}
.mat-vong{aspect-ratio:1;align-self:center}
/* Viên "+N ca" — đứng cạnh chip ca đầu, nói còn mấy ca nữa mà không chiếm một hàng. */
.lich-dau-cot .ca-them{flex:none;font-family:inherit;font-size:10.5px;font-weight:700;
  background:var(--chim);color:var(--chu3);border-radius:7px;padding:2px 6px;cursor:default}
/* ---- v1.96b: bốn chỗ soi ảnh mới thấy ---- */
/* ① Nhãn bay phải NỔI TRÊN nội dung. `.ben` dính (sticky) nên nó tự mở một tầng xếp lớp riêng;
   `z-index:80` của nhãn chỉ có nghĩa BÊN TRONG tầng ấy, mà cả tầng lại nằm dưới khu làm việc
   (vẽ sau trong tài liệu). Nâng chính `.ben` lên — vẫn dưới hộp thoại (50) và menu nổi (60).

   CHỈ Ở MÀN RỘNG. Bản đầu viết luật này ngoài mọi media query, nên nó đè luôn `z-index:80` mà
   khối ≤820px đặt cho NGĂN KÉO (media query không cộng thêm độ ưu tiên; luật sau thắng). Hệ quả
   trên điện thoại: ngăn kéo tụt xuống DƯỚI lớp phủ `.lop-ben` (79), mọi cú chạm rơi vào lớp phủ
   và đóng ngăn kéo — chủ dự án báo "không tương tác được menu khi mở trên điện thoại".
   Dải thu gọn (chỗ duy nhất cần nhãn bay) vốn chỉ có ở màn rộng, nên khoá luật vào đúng đó. */
@media (min-width:821px){.ben{z-index:20}}
/* ② Chuông ở thanh bên là ICON TRẦN: khung viền đỏ quanh nó là tiếng còi thứ hai cho một việc
   mà con số đỏ đã nói rồi. Giữ nguyên chuông ở mọi chỗ khác. */
.hieu .chuong{border:0;background:transparent;padding:4px 6px}
.hieu .chuong:hover{background:var(--chim)}
.hieu .chuong.gap{border-color:transparent;color:var(--chu2)}
/* ③ Hàng thương hiệu: tên phần mềm và tên phòng khám được trọn bề ngang, chuông + « xuống
   một hàng riêng bên phải, không đè lên chữ. */
.hieu{align-items:center;gap:4px;flex-wrap:nowrap}
.hieu>span{flex:1 1 auto;min-width:0}
.hieu .logo-d135{max-width:100%}
/* ④ "+N ca" phải đứng CẠNH chip ca, không rớt xuống hàng dưới — rớt hàng là đúng cái đã đẩy
   tên bác sĩ ra khỏi khung. */
.lich-dau-cot .dau-ca{flex-wrap:nowrap;overflow:hidden}
/* ---- v1.96c: dải lọc lịch hẹn trên điện thoại — MỘT hàng cuộn ngang ----
   Chủ dự án: "View lịch hẹn vẫn chưa thật sự tối giản, tinh tế". Đo ở khổ 390: dải lọc quấn
   thành bốn hàng chip, đẩy bảng lịch xuống quá một màn hình — mở Lịch hẹn ra không thấy lịch.
   Cùng lối đã dùng cho thanh tab hồ sơ và thanh công cụ sơ đồ răng: chip không quấn, cuộn
   ngang trong chính dải của nó. Không chip nào mất đi. */
@media (max-width:820px){
  .loc-lich.thanh-loc > .hang:last-child{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .loc-lich.thanh-loc > .hang:last-child::-webkit-scrollbar{display:none}
  .loc-lich.thanh-loc > .hang:last-child > *{flex:none}
}

/* =====================================================================================
   THÔNG BÁO ĐẨY v1.97 — dải mời bật, và dòng trạng thái trong ngăn kéo chuông.
   Cùng lối tối giản đang theo: mảng màu chuyển nhẹ, không viền, không khung. */
.nhac-day{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 14px;
  border-radius:14px;background:var(--nhan-nhat);color:var(--chu)}
.nhac-day .nd-hinh{flex:none;font-size:18px;line-height:1}
.nhac-day .nd-chu{flex:1;min-width:0}
.nhac-day .nd-chu b{display:block;font-size:13.5px;line-height:1.35}
.nhac-day .nd-chu small{display:block;margin-top:2px;font-size:12px;color:var(--chu3);line-height:1.45}
.nhac-day .nut{flex:none}
.nhac-day .nd-bo{background:transparent;color:var(--chu3);width:28px;padding:0}
@media (max-width:600px){
  .nhac-day{flex-wrap:wrap;gap:8px}
  .nhac-day .nd-chu{flex:1 1 100%;order:2}
  .nhac-day .nut{order:3}
  .nhac-day .nd-bo{order:1;margin-left:auto}
}
/* dòng trạng thái đẩy trong ngăn kéo chuông */
.tb-day{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 16px;
  background:var(--chim);font-size:12.5px;color:var(--chu2)}
.tb-day > span{flex:1;min-width:0}
.tb-day .nut{flex:none}

/* =====================================================================================
   LỊCH HẸN v1.98 (19/09/2026) — ba góp ý của chủ dự án:
   ① khung giờ bác sĩ KHÔNG đăng ký vẫn có ô, chỉ tối hơn một chút · ② phụ tá vòng ngoài có cột
   riêng · ③ gương mặt bác sĩ to bằng phụ tá, kèm gương mặt phụ tá được phân công. */

/* ① Ngoài ca: BỎ gạch chéo, thay bằng một mảng xám tím rất nhạt.
   Gạch chéo nói "không dùng được" bằng một hoa văn — nó gây nhiễu thị giác trên mười hai cột và
   để lại cảm giác cột trống hoác. Một sắc độ nhạt hơn nói đúng chừng ấy mà im lặng hơn: mắt đọc
   "chỗ sáng là đặt được", không phải làm phép trừ với hoa văn. */
/* BA TẦNG, THEO ĐÚNG THỨ TỰ SÁNG DẦN — chủ dự án nói lại cho rõ: "nhân bản các ô màu trắng thể
   hiện giờ đăng ký ra cả những thời gian không đăng ký, chỉ khác một chút về màu, nhưng vẫn phải
   nổi bật hơn so với màu nền dưới cùng".
     · nền trang        `--nen`  #F3F4F8   — tầng dưới cùng, chỉ còn thấy ở khe giữa các cột
     · ô NGOÀI ca                ≈#F7F6FE  — vẫn là một mảng NỔI, chỉ ngả tím rất nhạt
     · ô TRONG ca       `--the`  #FFFFFF   — trắng hẳn, đây mới là chỗ đặt được
   Bản đầu tôi trộn với `--chim` nên ra TỐI HƠN nền trang — cột chìm xuống đúng cái cảm giác
   "trống trải" mà chủ dự án đang muốn bỏ. Phải sáng hơn nền, không phải tối hơn. */
.lich-than.ngoai-ca{background:color-mix(in srgb, var(--nhan) 4%, var(--the))}
.trong-ca{background:var(--the)}
/* Đường kẻ giờ phải thấy được TRÊN CẢ HAI mảng — hai nền nay gần nhau nên nét cũ chìm mất. */
.lich-than > .lich-hang{border-top-color:color-mix(in srgb, var(--nhan) 10%, transparent)}
.lich-than > .lich-hang.gio-tron{border-top-color:color-mix(in srgb, var(--nhan) 20%, transparent)}

/* ① Khoảng cách giữa các cột hẹp lại → thẻ rộng ra. Lề trong của thẻ đã rút ở `lichhen.js`
   (3px→1px mỗi bên); ở đây rút nốt bề ngang tối thiểu của cột và đường kẻ dọc. */
.lich-cot{border-right-color:color-mix(in srgb, var(--vien) 55%, transparent)}

/* ③ Gương mặt bác sĩ TO BẰNG phụ tá. Trước đây từ sáu bác sĩ trở lên cột co lại và ảnh bác sĩ
   tụt xuống 26px trong khi ảnh phụ tá ở cột team vẫn 30px — cùng một thứ thông tin mà hai cỡ,
   mắt đọc thành hai mức quan trọng. Nay một cỡ, và to hơn một nấc. */
.lich-dau-cot .avatar-pt,.hang-mat .avatar-pt{width:34px;height:34px}
.lich-cot.hep .lich-dau-cot .avatar-pt{width:34px;height:34px}
.lich-dau-cot .mat-vong{padding:2.5px}
/* Vòng công suất: vuông tuyệt đối ở mọi nơi, không cho một luật flex nào bóp méo nó. */
.mat-vong{aspect-ratio:1;flex:none;align-self:center;box-sizing:content-box}
.mat-vong > .avatar-pt{aspect-ratio:1;flex:none}

/* ③ Cụm gương mặt: bác sĩ + phụ tá được phân công, phụ tá nhỏ hơn và THẤP HƠN một chút. */
.cum-mat{display:flex;align-items:flex-end;flex:none}
.cum-mat.co-pt{margin-right:2px}
.cum-mat .mat-pt{display:inline-flex;margin-left:-9px;margin-bottom:-3px;flex:none}
.cum-mat .mat-pt .avatar-pt{width:23px;height:23px;margin:0;box-shadow:0 0 0 2px var(--the)}
.cum-mat .mat-pt + .mat-pt{margin-left:-11px}
/* Tên phụ tá thay chỗ chức danh — in như một CÁI TÊN (đậm hơn, sắc nhấn), vì nó là người để gọi. */
.lich-dau-cot .dau-vi.dau-pt{color:var(--nhan);font-weight:600}
.lich-cot.hep .dau-vi.dau-pt{display:block}      /* cột hẹp giấu chức danh, nhưng tên người thì giữ */
/* ② Cột phụ tá vòng ngoài — đứng sau cột bác sĩ, nhãn vai "PT." đủ để phân biệt, không cần khung */
.lich-cot.cot-pt-rieng .lich-dau-cot .vai-ngan{color:var(--nhan)}
/* ③b — TÊN KHÔNG BAO GIỜ NHƯỜNG CHỖ CHO ẢNH. Thử lượt đầu: cụm ảnh (bác sĩ + hai phụ tá) ăn
   hết bề ngang cột và tên cụt thành "BS. …". Khoá một bề ngang tối thiểu cho khối chữ; ảnh co
   trước, chữ co sau. */
.lich-dau-cot .dau-ten{flex:1 1 auto;min-width:56px}
.lich-dau-cot .dau-nguoi{min-width:0}
.cum-mat{flex:0 1 auto;min-width:0}
.cum-mat{flex:none;min-width:auto}
.lich-dau-cot .dau-ten{flex:1 1 auto;min-width:0}
/* ③c — CÂN LẠI BỀ NGANG. Đo: cột "hẹp" (từ sáu cột trở lên) rộng 126px, trừ lề và cụm ảnh 66px
   thì tên chỉ còn 34px → "BS. …". Ba việc cùng lúc: nới cột hẹp, siết cụm ảnh (phụ tá chồng sâu
   hơn, nhỏ hơn một nấc), và tên được phần còn lại. */
.lich-cot.hep{flex-basis:152px;min-width:152px}
.cum-mat .mat-pt{margin-left:-13px;margin-bottom:-2px}
.cum-mat .mat-pt .avatar-pt{width:21px;height:21px}
.lich-dau-cot .dau-nguoi{gap:6px}

/* ---- v1.99: ô "giữ đăng nhập" + lối vào lại ở màn đăng nhập ---- */
.dn-giu{margin-top:16px;display:flex;flex-direction:column;gap:10px}
.dn-vao-lai{width:100%;justify-content:center}
.dn-giu-o{display:flex;align-items:flex-start;gap:9px;cursor:pointer;padding:10px 12px;
  border-radius:12px;background:var(--chim)}
.dn-giu-o input{margin-top:2px;flex:none}
.dn-giu-o b{display:block;font-size:13px}
.dn-giu-o small{display:block;margin-top:2px;font-size:11.5px;color:var(--chu3);line-height:1.45}
/* v2.01 — ẢNH PHỤ TÁ XẾP SAU ẢNH BÁC SĨ. Chủ dự án: "hình phụ tá xếp sau". Trước đây nó đứng sau
   trong DOM nên VẼ ĐÈ LÊN bác sĩ — nhìn vào không biết ai là người chính. Nay bác sĩ ở tầng trên,
   phụ tá nhô ra từ phía sau. */
.cum-mat .mat-vong{position:relative;z-index:2}
.cum-mat .mat-pt{position:relative;z-index:1}
/* Nhãn vai "PT." trước tên phụ tá — cùng cỡ, cùng sắc với "BS." ở dòng trên. */
.lich-dau-cot .dau-vi.dau-pt .vai-ngan{color:var(--chu3);font-weight:600}

/* =====================================================================================
   LỊCH HẸN v2.02 — nền là NHIỀU Ô 30 PHÚT xếp gần nhau, không phải một dải liền.
   Chủ dự án: "lẽ ra phải là nhiều mảng chữ nhật xếp gần nhau, giờ thấy thẳng một đường từ trên
   xuống". Khe giữa hai ô CHÍNH LÀ đường chia giờ — nên bỏ hết đường kẻ mảnh cũ. */
.lich-than:not(.pc-than){background:transparent}
.lich-than:not(.pc-than) > .lich-hang{display:none}          /* lưới kẻ cũ: khe giữa các ô đã thay việc của nó */
.o-gio{position:absolute;left:2px;right:2px;z-index:0;border-radius:8px;
  background:color-mix(in srgb, var(--nhan) 5%, var(--the))}
.o-gio.co-ca{background:var(--the)}

/* =====================================================================================
   LỊCH HẸN v2.03 — BA TẦNG PHẢI THẤY ĐƯỢC BẰNG MẮT, VÀ HAI CỘT SÁT NHAU HƠN.
   Chủ dự án: "các mảng màu lịch không đăng ký chưa đủ nổi bật, cần sáng lên nữa, và cần tách
   bạch không bị dính vào màu lịch đã đăng ký. Mảng màu trắng cũng cần chia khoảng dạng lưới như
   trước. Khoảng cách giữa 2 cột cần thu hẹp nữa, tốt nhất là bằng khoảng 2 mảng khung giờ."

   Gốc của việc "không thấy gì": `.lich` vốn nền TRẮNG, nên ô trong ca (trắng) nằm trên nền trắng
   — khe 3px giữa hai ô không hiện ra, cả cột đọc thành MỘT dải liền; còn ô ngoài ca thì chỉ hơn
   nền 4 nấc sáng. Sửa ở tầng dưới cùng: cho thân cột một nền TỐI HƠN CẢ HAI, rồi mới nói tới màu
   của ô. Thứ tự sáng dần đo được: nền thân ≈234 · ngoài ca ≈243 · trong ca 255. */
.lich-than:not(.pc-than){background:color-mix(in srgb, var(--nhan) 9%, var(--nen));border-radius:10px}
.o-gio{background:color-mix(in srgb, var(--nhan) 8%, var(--the))}
.o-gio.co-ca{background:var(--the)}
/* Lưới 15 phút TRONG mỗi ô: ô nền là 30 phút nhưng bước đặt hẹn vẫn 15 — một nét mảnh ở giữa ô
   trả lại cái lưới cũ mà không cần thêm một lớp đường kẻ chạy suốt cột. */
.o-gio::after{content:'';position:absolute;left:7px;right:7px;top:50%;
  border-top:1px solid color-mix(in srgb, var(--nhan) 11%, transparent)}
/* Khoảng hở giữa hai cột = khoảng hở giữa hai ô trên dưới (3px). Cột vốn đã không còn đường kẻ
   dọc (app.css:2922) — cái tách hai cột xưa nay là khe 6px của flex; nay khe ấy do chính ô nền
   tạo ra, nên `gap` về 0 và chỉ dải ĐẦU CỘT giữ một nét chia (phần ấy không có ô nền). */
.lich-cot:not(.pc-cot) > .lich-dau-cot{border-right:1px solid var(--vien)}
.lich-cot:not(.pc-cot):last-child > .lich-dau-cot{border-right:0}
.o-gio{left:1.5px;right:1.5px}
.lich{gap:0}                                   /* 6px khe cột của bản cũ: nay khe do chính ô nền tạo */
/* Nền tối thì thứ tự SÁNG DẦN vẫn phải giữ nguyên ý nghĩa "càng sáng càng đặt được" — mà ở đây
   `--the` (thẻ) lại tối hơn chính nền trang, nên ba tầng phải khai lại, không dùng lại công thức
   của nền sáng. Đo: thân ≈14 · ngoài ca ≈35 · trong ca ≈53. */
@media (prefers-color-scheme:dark){
  /* KHÔNG dùng `--nen` ở đây: app.css:3192 khai đè `--nen` NGOÀI mọi media query nên ở nền tối
     biến ấy vẫn giữ giá trị sáng (#F3F4F8) — một lỗi cũ của bảng màu, đã báo chủ dự án. */
  .lich-than:not(.pc-than){background:color-mix(in srgb, black 45%, var(--the))}
  .o-gio{background:color-mix(in srgb, var(--nhan) 7%, var(--the))}
  .o-gio.co-ca{background:color-mix(in srgb, white 12%, var(--the))}
  .o-gio::after{border-top-color:color-mix(in srgb, white 7%, transparent)}
}

/* =====================================================================================
   LỊCH HẸN v2.04 — Ô NGOÀI CA KHÔNG CÒN LÀ MỘT LỚP ĐẮP LÊN, NÓ CHÍNH LÀ NỀN.
   Chủ dự án: "mảng màu lịch chưa đăng ký vẫn còn hơi tối, cần sáng hơn nữa. Ngoài ra, cảm giác
   như phần màu lịch chưa đăng ký bị vẽ đè lên màu lịch đã đăng ký, không đẹp."

   Cái cảm giác "đè lên" ấy có thật và đến từ bản v2.03: nền thân cột (231) TỐI HƠN cả hai loại
   ô, nên khe 3px giữa ô trắng và ô ngoài ca hiện ra thành một VỆT SẪM — mắt đọc vệt sẫm là bóng
   đổ, tức là có một tấm nằm đè lên tấm kia.
   Đảo lại quan hệ: nền thân cột NAY CHÍNH LÀ màu ngoài ca (sáng lên hẳn, ≈247). Ô ngoài ca do đó
   trong suốt — nó không phải một tấm đắp lên nữa, chỉ còn một nét viền rất mảnh để giữ lưới 30
   phút. Ô TRONG ca là tấm trắng NỔI LÊN trên nền ấy, khe quanh nó cùng màu nền nên không đâu còn
   vệt sẫm. Một tầng nổi, không phải hai tầng chồng. */
.lich-than:not(.pc-than){background:color-mix(in srgb, var(--nhan) 5%, var(--the))}
.o-gio{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nhan) 7%, transparent)}
.o-gio.co-ca{background:var(--the);box-shadow:none}
@media (prefers-color-scheme:dark){
  .lich-than:not(.pc-than){background:color-mix(in srgb, white 6%, var(--the))}
  .o-gio{background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb, white 7%, transparent)}
  .o-gio.co-ca{background:color-mix(in srgb, white 15%, var(--the));box-shadow:none}
}

/* v2.04b — chủ dự án: "bỏ phần gạch giữa thể hiện 15' đi, phần mảng lịch đã đăng ký (màu trắng)
   hãy tách hẳn thành lưới bằng các mảng màu riêng biệt".
   Nét 15' bỏ hẳn. Ô TRẮNG nay cũng mang một nét viền mảnh như ô ngoài ca — vì nền thân cột đã
   sáng gần bằng ô trắng (247 vs 255), một mình cái khe 3px không đủ để mắt thấy ranh giới; có
   viền thì mỗi nửa giờ đứng riêng thành một mảng, cả cột đọc thành LƯỚI chứ không thành dải. */
.o-gio::after{content:none}
.o-gio.co-ca{box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--nhan) 12%, transparent)}
@media (prefers-color-scheme:dark){
  .o-gio.co-ca{box-shadow:inset 0 0 0 1px color-mix(in srgb, white 10%, transparent)}
}

/* v2.05 — chủ dự án: "sao dùng đường kẻ nữa". Viền quanh ô bỏ hẳn: ô là MẢNG, không phải khung.
   Cái tách hai mảng chỉ là KHE hở lộ nền — và đây là chỗ tôi đo sai hai lần: phía sau thân cột
   KHÔNG phải nền trang mà là một tấm TRẮNG (khung `.lich-bo`), nên hễ thân cột trong suốt thì
   khe giữa hai ô trắng lại... trắng, và cả cột đọc thành một dải liền (đúng cái v2.02 mắc phải).
   Thân cột vì thế phải mang một nền RIÊNG, xám lạnh trung tính `--chim` (≈240): không tím để
   không thành "bóng đổ" quanh ô tím (lỗi v2.03), không sáng bằng ô tím để ô tím còn là một
   mảng (lỗi v2.04). Ba tầng: nền thân 240 < ô ngoài ca 249 < ô trong ca 255. */
.lich-than:not(.pc-than){background:var(--chim);border-radius:0}
.o-gio{background:color-mix(in srgb, var(--nhan) 4%, var(--the));box-shadow:none}
.o-gio.co-ca{background:var(--the);box-shadow:none}
/* Ô nền chỉ để NHÌN. Mọi cú nhấn, rê, kéo đi thẳng vào thân cột như thời còn lưới kẻ — không
   để một phần tử mới chen vào giữa ngón tay và bộ chọn giờ (chủ dự án báo mất nhấn-kéo). */
.o-gio{pointer-events:none}
@media (prefers-color-scheme:dark){
  .lich-than:not(.pc-than){background:color-mix(in srgb, black 35%, var(--the))}
  .o-gio{background:color-mix(in srgb, var(--nhan) 6%, var(--the));box-shadow:none}
  .o-gio.co-ca{background:color-mix(in srgb, white 14%, var(--the));box-shadow:none}
}

/* =====================================================================================
   v2.06 — NÚT MỞ MENU TRÊN ĐIỆN THOẠI CHỈ CÒN MỘT ICON.
   Chủ dự án: "nút ra lại màn hình (menu) đang chắn diện tích sử dụng khá nhiều → thiết kế lại
   thành icon nhỏ gọn nhất có thể". Từ một viên thuốc 36px có chữ thành một hình tròn 34px chỉ
   có ba vạch, nền hơi trong để nội dung lướt qua bên dưới vẫn thấy; phần đỉnh chừa cho nó rút
   từ 56 xuống 46px. */
@media (max-width:820px){
  .nut-mo-ben{left:8px;top:8px;width:34px;height:34px;min-height:34px;padding:0;justify-content:center;
    border-radius:50%;gap:0;font-size:0;color:var(--chu2);
    background:color-mix(in srgb, var(--the) 84%, transparent);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .nut-mo-ben svg{display:block}
  .chinh{padding-top:46px}
}

/* =====================================================================================
   KẾ HOẠCH ĐIỀU TRỊ v2.07 — theo màn Stitch đã duyệt (docs/anh/stitch-ke-hoach).
   Ba tầng: thanh tình trạng DÍNH · phương án so ngang · lịch & tiền hai thẻ; mọi thứ "trước
   khi làm" gập lại có đếm. Không viền, mảng phân biệt bằng tông. */
.kh-tinh-trang{position:sticky;top:0;z-index:4;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 16px;padding:10px 14px;border-radius:14px;background:var(--the);box-shadow:var(--bong)}
.kh-chang{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--chu3);white-space:nowrap}
.kh-chang .kc{display:inline-flex;align-items:center;gap:5px;padding:2px 6px;border-radius:20px}
.kh-chang .kc::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--vien)}
.kh-chang .kc.qua::before{background:var(--tot)}
.kh-chang .kc.dang{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.kh-chang .kc.dang::before{background:var(--nhan)}
.kh-chang .kc.mo{opacity:.5}
.kh-chang .kc+.kc{margin-left:2px}
.kh-chon{flex:1 1 auto;font-size:13px;color:var(--chu2);min-width:0}
.kh-chon .no{color:var(--canh);font-weight:600}
.kh-tinh-trang > .nut{flex:none}
.kh-menu{position:relative}
.kh-menu > summary{list-style:none;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;
  border-radius:50%;background:var(--chim);font-weight:700;color:var(--chu2)}
.kh-menu > summary::-webkit-details-marker{display:none}
.kh-menu-than{position:absolute;right:0;top:38px;z-index:5;display:flex;flex-direction:column;gap:6px;min-width:200px;
  padding:8px;border-radius:12px;background:var(--the);box-shadow:0 12px 32px -10px rgba(20,20,40,.32)}
.kh-menu-than .nut{justify-content:flex-start}
.kh-mang{margin:0 0 22px}
.kh-mang-dau{margin:0 0 10px}
.kh-mang-dau h3{margin:0;font-size:17px}
.kh-mang-dau p{margin:2px 0 0;font-size:13px;color:var(--chu3)}
/* Thẻ phương án: không viền, thẻ đã chọn ngả xanh; hàng so sánh thẳng hàng qua các thẻ. */
.cot-pa{border:0;border-radius:16px;padding:16px 18px;box-shadow:none;position:relative}
.cot-pa.chon{border:0;background:color-mix(in srgb, #10B981 9%, var(--the))}
.cot-pa.tu-sinh{border:0;background:color-mix(in srgb, #10B981 5%, var(--the))}
.cot-pa .pa-tien{padding:10px 12px;border-radius:10px;background:var(--chim);font-size:24px}
.cot-pa.chon .pa-tien{background:var(--the)}
.pa-bang{display:flex;flex-direction:column;gap:2px}
.pa-hang{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:8px;font-size:13px}
.pa-hang:nth-child(odd){background:color-mix(in srgb, var(--chim) 60%, transparent)}
.cot-pa.chon .pa-hang:nth-child(odd){background:color-mix(in srgb, var(--the) 55%, transparent)}
.pa-hang span{color:var(--chu3)} .pa-hang b{text-align:right;font-weight:600}
.cot-pa .nut.phu{margin-top:auto;width:100%;justify-content:center}
.pa-menu{position:absolute;top:12px;right:12px}
.pa-menu > summary{list-style:none;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb, var(--chim) 80%, transparent);color:var(--chu3);font-weight:700}
.pa-menu > summary::-webkit-details-marker{display:none}
.pa-menu-than{position:absolute;right:0;top:32px;z-index:5;display:flex;flex-direction:column;gap:6px;min-width:170px;
  padding:8px;border-radius:12px;background:var(--the);box-shadow:0 12px 32px -10px rgba(20,20,40,.32)}
.pa-menu-than small{color:var(--chu3);padding:4px 6px}
.pa-ma{padding-right:34px}
/* Chi tiết từng phương án: gập (`.pa-gap` — KHÔNG trùng `.pa-chi-tiet` là khối bảng cũ), mở sẵn
   cái khách chọn; bảng cuộn ngang trong khung. */
.pa-chi-tiet-cum{margin-top:14px}
.pa-gap{margin:0 0 8px;border-radius:12px;background:var(--the)}
.pa-gap > summary{cursor:pointer;padding:10px 14px;font-size:13.5px;list-style:none;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.pa-gap > summary::before{content:'▸';color:var(--chu3);transition:transform .15s}
.pa-gap[open] > summary::before{transform:rotate(90deg)}
.pa-gap > summary::-webkit-details-marker{display:none}
.pa-gap.chon > summary{color:var(--tot)}
.pa-gap > .pa-chi-tiet{margin:0 10px 10px;border:0!important;box-shadow:none;padding:0}
.pa-gap > .pa-chi-tiet.chon{background:transparent}
.cot-pa{min-width:0}
.pa-ma{flex-wrap:wrap}
.bang.bang-cuon .bang-bao-gia{min-width:900px}
/* Lịch & tiền: hai thẻ cạnh nhau. */
.kh-lt{display:grid;grid-template-columns:1.15fr 1fr;gap:14px;align-items:start}
.kh-lt > .the{padding:14px 16px;border:0;box-shadow:none}
.kh-lt h4{font-size:15px}
/* Trước khi làm: các hàng gập có đếm. */
.kh-tkl{margin-top:22px}
.kh-tkl-dau{margin:0 0 8px;font-size:17px}
.gap-tkl{margin:0 0 8px;border-radius:12px;background:var(--the)}
.gap-tkl > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:14px}
.gap-tkl > summary::-webkit-details-marker{display:none}
.gap-tkl > summary::after{content:'⌄';margin-left:auto;color:var(--chu3);font-size:16px;line-height:1}
.gap-tkl[open] > summary::after{content:'⌃'}
.gap-tkl > .gap-than{padding:0 14px 14px}
/* Khối con đã có tiêu đề riêng — trong hàng gập thì tiêu đề ấy thừa (summary đã nói). */
.gap-tkl > .gap-than > div > h4:first-child,.gap-tkl > .gap-than > div > .hang:first-child > h4{display:none}
.gap-tkl > .gap-than > div[style*="margin-top:22px"]{margin-top:0!important}
.kh-tkl-cum{margin-top:14px}
.kh-tkl-cum .gap-tkl .the{border:0;box-shadow:none;background:var(--chim)}
@media (max-width:820px){
  .kh-tinh-trang{top:46px;padding:8px 12px;gap:8px}
  .kh-chang{width:100%;overflow-x:auto;scrollbar-width:none}
  .kh-chon{flex-basis:100%}
  /* Phương án: dải cuộn ngang, mỗi thẻ 84% bề ngang, níu từng thẻ. */
  .luoi-pa{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;margin:0 -8px;padding:0 8px 6px;scrollbar-width:none}
  .cot-pa{flex:0 0 84%;scroll-snap-align:center}
  .kh-lt{grid-template-columns:1fr}
  /* Bảng buổi thành THẺ buổi: mỗi hàng một khối, ô nào ra dòng nấy. */
  .kh-buoi table,.kh-buoi thead,.kh-buoi tbody,.kh-buoi tr,.kh-buoi td{display:block}
  .kh-buoi thead{display:none}
  .kh-buoi tbody tr{margin:0 0 8px;padding:10px 12px;border-radius:12px;background:var(--chim)}
  .kh-buoi tbody tr.bl-gd{background:transparent;padding:4px 0}
  .kh-buoi tbody tr.bl-gd td{background:transparent;border:0;padding:0}
  .kh-buoi td{padding:2px 0;border:0}
  .kh-buoi td:first-child{float:left;margin-right:8px;padding:1px 8px;border-radius:20px;background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
  .kh-buoi td:first-child::before{content:'Buổi '}
  .kh-buoi td:last-child{text-align:right;margin-top:4px}
}

/* ===== v2.08 — dải chọn kế hoạch (nhiều kế hoạch cho một khách) ===== */
.dai-kh{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;margin:0 0 14px;scrollbar-width:none}
.dk-the{flex:0 0 auto;min-width:210px;max-width:280px;text-align:left;padding:10px 12px;border:0;border-radius:14px;
  background:var(--chim);color:var(--chu);cursor:pointer;display:flex;flex-direction:column;gap:4px;font:inherit}
.dk-the.chon{background:var(--nhan-nhat);box-shadow:inset 0 0 0 2px var(--nhan)}
.dk-the.dong{opacity:.7}
.dk-the > b{display:flex;align-items:center;gap:6px;font-size:14px}
.dk-phu{color:var(--chu3);font-size:12px}
.dk-tien{display:flex;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--chu2)}
.dk-tien .no{color:var(--canh);font-weight:600}
.dai-kh.gon .dk-the{min-width:170px;padding:8px 10px}
@media (max-width:820px){.dai-kh{margin-left:-8px;margin-right:-8px;padding-left:8px;padding-right:8px}.dk-the{min-width:78%}}

/* ===== Lọc đăng ký ca — dsh, 20/09/2026 =====
   Chip lọc trạng thái trên bảng "Đăng ký của tôi"; `--nhan-nhat` là nền chip đang chọn, cùng
   tông với chip đếm dùng chung. `dk-ghichu` cắt ghi chú duyệt còn MỘT dòng — nội dung đầy đủ
   nằm trong `title`, không để cột phình theo câu chữ. */
.dk-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:20px;
  border:1px solid var(--vien);background:var(--the);color:var(--chu2);font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer}
.dk-chip.chon{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan)}
.dk-chip .dem{font-variant-numeric:tabular-nums;font-weight:700;opacity:.75}
.dk-ghichu{display:block;max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ===== Nhân sự — bàn làm việc nhiều tab: Nghỉ phép · Chấm công (dsh, 21/09/2026) =====
   Dải tab cùng khuôn `.tab-ba` của hồ sơ bệnh án. Hai lưới (lịch off · bảng công) dùng chung
   một khuôn: cột tên dính trái, ô ngày 22px bo 6, cuối tuần nền chìm, hôm nay vạch đầu cột.
   Không viền thừa — phân mảng bằng tông `--chim`/`--nhan-nhat`; mọi màu qua biến. */
.ns-dai-tab{margin-top:14px}
.ns-tab-noi{display:flex;flex-direction:column;gap:14px}
.ns-dai-o{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ns-o-so{background:var(--chim);border:0;border-radius:13px;padding:12px 14px;text-align:left;
  font:inherit;color:var(--chu)}
.ns-o-so.ns-bam{cursor:pointer;transition:background .15s}
.ns-o-so.ns-bam:hover{background:var(--nhan-nhat)}
.ns-nhan{font-size:13px;color:var(--chu3);margin-bottom:4px}
.ns-so{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.ns-khoi{background:var(--the);border-radius:16px;padding:14px}
.ns-khoi-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ns-chu-thich{margin-left:auto;font-size:12px}
.ns-nut-phai{display:inline-flex;gap:6px;margin-left:auto}
.ns-the-don{background:var(--chim);border-radius:13px;padding:12px;margin-bottom:8px}
.ns-don-hang1{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ns-don-hang2{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:6px;font-size:13px;color:var(--chu2)}
.ns-don-ly-do{margin-top:6px;font-size:13px;color:var(--chu2);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.ns-don-canh{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.ns-don-nut{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.ns-the-nguoi{background:var(--chim);border-radius:13px;padding:10px 12px;margin-bottom:8px}
.ns-nguoi-hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ns-nguoi-ten{min-width:0;flex:1}
.ns-ca{margin-top:4px;font-size:12.5px}
.ns-nhieu{opacity:.6}
.ns-cong{font-size:12.5px;font-weight:600;color:var(--tot);white-space:nowrap}
.ns-o{width:22px;height:22px;border-radius:6px;flex:none;display:grid;place-items:center;
  position:relative;font-size:10px;line-height:1;font-style:normal}
.ns-o.cuoi-tuan{background:var(--chim)}
.ns-o.hom-nay{border-top:2px solid var(--nhan)}
.ns-o.ns-o-off{background:var(--nhan-nhat)}
.ns-o.ns-o-cho{border:1.5px dotted color-mix(in srgb, var(--nhan) 50%, transparent)}
.ns-cham{width:5px;height:5px;border-radius:50%;background:var(--nhan);display:block}
.ns-o.ns-o-du{background:color-mix(in srgb, var(--nhan) 30%, var(--the))}
.ns-o.ns-o-nua{background:linear-gradient(90deg, var(--nhan-nhat) 50%, transparent 50%)}
.ns-o.ns-o-tre{background:color-mix(in srgb, var(--nhan) 30%, var(--the))}
.ns-cham-cam{position:absolute;top:1px;right:1px;width:6px;height:6px;border-radius:50%;background:var(--canh)}
.ns-o.ns-o-nghi{background:var(--chim);
  background-image:linear-gradient(transparent 45%, var(--chu3) 45%, var(--chu3) 55%, transparent 55%)}
.ns-o.ns-o-vang{border:1.5px solid color-mix(in srgb, var(--loi) 55%, transparent)}
.ns-luoi-cuon{background:var(--the);border-radius:13px}
.ns-luoi{display:inline-block;min-width:100%;padding:4px}
.ns-luoi-hang{display:flex;align-items:center;gap:2px;min-height:26px}
.ns-luoi-hang+.ns-luoi-hang{border-top:1px solid var(--vien)}
.ns-luoi-ten{position:sticky;left:0;z-index:2;flex:none;width:140px;display:flex;align-items:center;gap:6px;
  background:var(--the);padding-right:8px;font-size:12.5px}
.ns-luoi-goc{font-weight:600;color:var(--chu3);font-size:12px}
.ns-luoi-ngay{flex:none;width:22px;text-align:center;font-size:10px;color:var(--chu3)}
.ns-luoi-ngay.cuoi-tuan{background:var(--chim);border-radius:6px 6px 0 0}
.ns-luoi-ngay.hom-nay{border-top:2px solid var(--nhan);color:var(--nhan);font-weight:700}
.ns-luoi-cuoi{flex:none;width:64px;margin-left:8px;text-align:right;font-size:12px}
.ns-luoi-cuoi-dau{font-weight:600;color:var(--chu3);font-size:12px}
.ns-cuoi-tong b{font-size:14px}
.ns-nguoi{display:flex;align-items:center;gap:6px;min-width:0}
.ns-ten{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns-chu-giai{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:var(--chu3)}
.ns-cg{display:inline-flex;align-items:center;gap:5px}
.ns-cg .ns-o{width:16px;height:16px}
.ns-gap{margin-top:12px}
.ns-gap>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--chu2)}
.ns-ls{margin-top:8px}
.ns-ls-dong{padding:6px 0;border-top:1px solid var(--vien);font-size:13px}
.ns-sua-cong{min-width:min(420px,80vw)}
.ns-sua-hang{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
@media (max-width:820px){
  .ns-dai-o{gap:8px}
  .ns-o-so{padding:10px}
  .ns-so{font-size:20px}
  .ns-nhan{font-size:12px}
  .ns-luoi-ten{width:120px}
  .ns-nguoi-hang{align-items:flex-start}
  .ns-nut-phai{margin-left:0;width:100%}
}

/* ===== Việc của tôi — Nghỉ phép & Chấm công (dsh, 21/09/2026) =====
   Hai tab mới của NGƯỜI LAO ĐỘNG. Mobile-first 390px: thẻ xếp dọc, form tự xuống hàng, nút
   chấm công cao 48px full bề ngang. Không hex — mọi màu qua biến. */
/* Ô phép còn: nền chìm để tách khỏi thẻ trắng, chữ số to như các ô số liệu khác. */
.vt-phep{padding:16px 18px;background:var(--chim);margin-bottom:14px}
.vt-phep .n{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:600;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.vt-phep .l{font-size:12.5px;color:var(--chu3);margin-top:2px}
/* Form xin nghỉ. */
.vt-form{gap:10px}
.vt-hang-ngay{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.vt-hang-ngay label{flex:1;min-width:130px}
.vt-hang-ngay input{width:100%}
.vt-ngay-o{font-size:13px;font-weight:600;color:var(--nhan);padding-bottom:8px}
.vt-ngay{font-variant-numeric:tabular-nums}
.vt-cong-tac{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px;cursor:pointer}
.vt-cong-tac small{color:var(--chu3);font-weight:400}
/* Đơn nghỉ: thẻ theo dòng, ghi chú duyệt mờ, nút huỷ gọn. */
.vt-don{padding:12px 14px}
.vt-don-dau{gap:8px;align-items:baseline;flex-wrap:wrap;margin:0}
.vt-don-so{color:var(--chu3);font-size:12.5px}
.vt-ghichu{margin-top:6px;font-size:12.5px;color:var(--chu3)}
.vt-don-nut{margin-top:8px}
/* Chấm công hôm nay. */
.vt-ca{font-size:13.5px;color:var(--chu2);margin-bottom:6px}
.vt-cham-trang{font-size:20px;font-weight:700;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vt-cham-trang .chip{font-size:12px}
.vt-cong{color:var(--chu2);font-weight:600;font-size:14px}
.vt-nut-o{margin-top:12px}
.vt-nutcham{width:100%;height:48px;font-size:16px}
/* Lịch tháng: 7 cột, ô ký hiệu; tuần bắt đầu Thứ Hai. */
.vt-lich{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.vt-thu{text-align:center;font-size:11px;font-weight:600;color:var(--chu3);padding:2px 0}
.vt-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1px;min-height:40px;border:0;border-radius:8px;background:var(--chim);color:var(--chu2);
  font:inherit;cursor:default;padding:2px}
.vt-o.trong{background:transparent}
.vt-o.vt-bam{cursor:pointer}
.vt-o.vt-bam:hover{box-shadow:inset 0 0 0 2px var(--nhan)}
.vt-o-ngay{font-size:11px;color:var(--chu3);font-variant-numeric:tabular-nums}
.vt-o b{font-size:13px;line-height:1;font-weight:700}
.vt-o.tot b{color:var(--tot)}
.vt-o.canh b{color:var(--canh)}
.vt-o.nhan b{color:var(--nhan)}
.vt-o.loi{background:var(--loi-nhat)}
.vt-o.loi b{color:var(--loi)}
.vt-tong{margin-top:10px;font-size:13.5px;font-weight:600}
.vt-chugiai{margin-top:4px;font-size:11.5px;color:var(--chu3);line-height:1.5}
/* Huy hiệu GẤP của tab Chấm công: chấm đỏ, không phải con số. */
.nut .dem.loi{background:var(--loi);color:var(--the)}
@media (max-width:480px){
  .vt-hang-ngay label{min-width:100%}
  .vt-o{min-height:44px}
}
/* NS3-web-PC */
/* Phân công phụ tá: bàn ở Khu vực Điều trị · một nguồn ở Lịch hẹn · nối Xoay tua (dsh 24/09/2026) */
.kv-pc{margin:8px 0;padding:12px 16px}
.kv-pc-dau{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.kv-pc-dau b{font-size:15px}
.kv-pc-hang{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--vien);flex-wrap:wrap}
.kv-pc-hang:first-of-type{border-top:0}
.kv-pc-trai{display:flex;align-items:center;gap:8px;flex:1 1 320px;min-width:0;flex-wrap:wrap}
.kv-pc-trai b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.kv-pc-ca{color:var(--chu3);font-size:12.5px;white-space:nowrap}
.kv-pc-phai{display:flex;align-items:center;gap:6px;flex:0 1 340px;justify-content:flex-end}
.kv-pc-chon{min-width:220px;max-width:100%}
.kv-pc-mo{color:var(--chu3)}
.kv-pc-trong{color:var(--chu3);font-size:13px;margin:4px 0}
.kv-pc-chan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--vien)}
.kv-pc-chua{color:var(--chu3);font-size:12.5px;flex:1 1 auto;min-width:0}
.kv-pc-ten{border:0;background:transparent;color:var(--nhan);font:inherit;font-size:12.5px;
  cursor:pointer;padding:0}
.kv-pc-ten:hover{text-decoration:underline}
.kv-pc-dan{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--nhan-nhat);border-radius:8px;padding:8px 12px;margin:0 0 12px}
.kv-pc-dan p{flex:1 1 320px}
.kv-pc-cchn{margin-top:0}
.kv-pc-nguon{font-size:11.5px;padding:1px 6px}
/* Mobile 390: thẻ xếp dọc, ô chọn phụ tá full ngang. */
@media (max-width:560px){
  .kv-pc-hang{flex-direction:column;align-items:stretch;gap:6px}
  /* Đo hộp (Fable 21/09): xếp dọc thì flex-basis 320/340px thành CHIỀU CAO → mỗi hàng 683px. */
  .kv-pc-trai,.kv-pc-phai{flex:0 0 auto}
  .kv-pc-phai{flex-direction:column;align-items:stretch;justify-content:flex-start}
  .kv-pc-chon{width:100%;min-width:0}
  .kv-pc-chon-o{flex:1 1 auto;width:100%}
  .kv-pc-loc-hang{width:100%}
  .kv-pc-phai .nut{width:100%}
}

/* NS3-web-NS */
/* ===== Nhân sự NS3 — danh sách theo bộ phận · hồ sơ nhiều tab · cơ cấu (dsh, 25/09/2026) =====
   Mobile-first 390px: không cuộn ngang, chip tự xuống hàng. Không hex — mọi màu qua biến; chỉ ô
   NHẬN THẢ mới có viền (viền trong, hiện khi kéo đè). */
/* A. Thanh lọc tab Danh sách. */
.ns-loc{background:var(--the);border-radius:16px;padding:12px;margin-bottom:12px;display:flex;
  flex-direction:column;gap:10px}
.ns-loc-hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ns-loc-hang input[type=search]{flex:1 1 200px;min-width:0}
.ns-loc-hang select{flex:1 1 180px;min-width:0}
.ns-dem{font-size:12.5px;font-weight:600;color:var(--chu2);white-space:nowrap}
.ns-loc-chip,.ns-loc-khoi{display:flex;gap:6px;flex-wrap:wrap}
/* B. Nhóm theo bộ phận + thẻ hàng người. */
.ns-ds{display:flex;flex-direction:column;gap:12px}
.ns-nhom{background:var(--the);border-radius:16px;padding:12px}
.ns-nhom.canh .ns-nhom-dau{color:var(--canh)}
.ns-nhom-dau{cursor:pointer;font-size:14.5px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ns-truong{margin-left:auto;font-size:12px}
.ns-the-hang{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--chim);border-radius:12px;padding:8px 12px;margin-top:8px}
.ns-mat .avatar-pt{width:36px;height:36px}
.ns-hang-ten{min-width:0;flex:1 1 140px}
.ns-vai{font-size:12px;color:var(--chu3)}
.ns-nut-hs{white-space:nowrap}
/* C. Hộp hồ sơ nhiều tab. */
.ns-hs-tab{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
.ns-hs-noi{min-height:80px}
.ns-hs-dau{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ns-hs-dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:var(--chim);border-radius:12px;padding:8px 12px;margin-bottom:8px}
.ns-hs-dong.bam{cursor:pointer}
.ns-hs-dong.bam:hover{background:var(--nhan-nhat)}
.ns-hs-dong-chinh{display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;min-width:0;flex:1 1 200px}
.ns-hs-xoa{flex:none}
.ns-tep{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* D. Cây cơ cấu 3 cấp. */
.ns-cc-dau{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ns-cc-dau .ns-dai-o{flex:1 1 320px}
.ns-cc-than{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
.ns-cc-cay{display:flex;flex-direction:column;gap:8px;min-width:0}
.ns-cc-khoi{background:var(--the);border-radius:16px;padding:12px}
.ns-cc-khoi-dau{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ns-cc-khoi-ten{font-size:15px}
.ns-cc-bp{background:var(--chim);border-radius:12px;padding:8px;margin-top:8px}
.ns-cc-bp-dau{cursor:pointer;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:14px;padding:2px 4px}
.ns-cc-truong{display:inline-flex;align-items:center;gap:6px;color:var(--chu2);font-size:12.5px}
.ns-cc-mo{color:var(--chu3)}
.ns-cc-vt{background:var(--the);border-radius:12px;padding:8px 10px;margin-top:8px}
.ns-cc-vt.ngung{background:var(--chim)}
.ns-cc-vt-dau{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ns-cc-ma{font-size:11.5px;color:var(--chu3)}
.ns-cc-vt-ten{font-size:13.5px}
.ns-cc-vt-so{font-size:12px;color:var(--chu2);font-variant-numeric:tabular-nums}
/* Ô NHẬN THẢ — viền trong chỉ hiện khi có thẻ kéo đè lên. */
.ns-cc-vt.ns-tha{box-shadow:inset 0 0 0 2px var(--nhan);background:var(--nhan-nhat)}
.ns-cc-nguoi-list{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.ns-cc-nguoi{display:flex;align-items:center;gap:6px;background:var(--chim);border-radius:10px;
  padding:4px 8px;cursor:grab}
.ns-cc-mat .avatar-pt{width:24px;height:24px}
.ns-cc-mat.nho .avatar-pt{width:18px;height:18px}
.ns-cc-ten{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns-cc-ten.chinh{font-weight:700}
/* Vùng chạm ≥ 32×32 cho MỌI nút thao tác trong cây cơ cấu (✎ · + người · + Vị trí · + trưởng ·
   nút ×). Tay người dùng trên 390px không nhắm được nút 20px. (dsh, 21/09/2026) */
.ns-cc-than .nut{min-width:32px;min-height:32px;display:inline-flex;align-items:center;justify-content:center}
.ns-cc-x{margin-left:auto;border:0;background:transparent;color:var(--chu3);cursor:pointer;
  font-size:16px;line-height:1;min-width:32px;min-height:32px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center}
.ns-cc-x:hover{color:var(--loi)}
.ns-cc-rong{font-size:12px;padding:4px 2px}
.ns-cc-chua{background:var(--the);border-radius:16px;padding:12px}
.ns-cc-chua-dau{margin-bottom:8px}
.ns-cc-vai{display:flex;gap:6px;flex-wrap:wrap}
.ns-cc-vai .chip input{margin-right:4px}
@media (max-width:760px){
  .ns-cc-than{grid-template-columns:minmax(0,1fr)}
  .ns-cc-chua{order:-1}
}
@media (max-width:560px){
  .ns-the-hang{align-items:flex-start}
  .ns-hang-ten{flex-basis:100%}
  .ns-cc-dau .ns-dai-o{flex-basis:100%}
}

/* ===== TT1-web ===== */
/* Màn Thu ngân dựng lại quanh PHIÊN: thẻ phiên (mở/đóng/4 ô số/két dự kiến), khối chờ xác
   nhận ngân hàng, hoàn chờ duyệt, lọc ngày. Trên 560px, JS chỉ dựng BẢNG; dưới 560px chỉ dựng
   THẺ — hai luật `display` dưới đây là lưới an toàn khi `matchMedia` không có. Màu chỉ dùng
   token, không mã hex. (dsh, 21/09/2026) */
.tn-phien{margin-bottom:14px}
.tn-phien-hop{padding:12px 14px}
.tn-dang-tai{color:var(--chu3);font-size:13px}
.tn-chu3{color:var(--chu3)}
.tn-phien-nut{margin-top:8px}
.tn-phien-dau{align-items:flex-start;gap:8px;flex-wrap:wrap}
.tn-luoi-so{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.tn-o{background:var(--chim);border-radius:10px;padding:8px 10px;min-width:0}
.tn-o small{display:block;color:var(--chu3);font-size:12px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.tn-o b{font-size:15px;white-space:nowrap}
.tn-ket{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:10px;
  padding-top:8px;border-top:1px solid var(--vien)}
.tn-ket-so{font-size:18px}
.tn-lich-su{margin-top:10px}
.tn-lich-su summary{cursor:pointer;color:var(--chu2);font-size:13px}
.tn-lech,.tn-thieu{color:var(--loi)}
.tn-lech-xem{margin-top:8px}
.tn-nhac-ngan-hang{margin-top:8px}
.tn-thua{margin-top:4px;font-size:13px;color:var(--chu2)}
.tn-cho-ngan-hang{margin:14px 0}
.tn-the-ck{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;padding:8px 0;
  border-top:1px solid var(--vien)}
.tn-cho-ngan-hang .tn-the-ck:first-of-type{border-top:0}
.tn-ck-than{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.tn-ck-nut{margin-left:auto}
.tn-hoan-hop{margin:14px 0}
.tn-hoan{padding:10px 0;border-top:1px solid var(--vien)}
.tn-hoan-than{display:flex;flex-direction:column;gap:2px}
.tn-hoan-ly{color:var(--chu2)}
.tn-hoan-nut{margin-top:8px}
.tn-nk-gia{margin-top:10px}
.tn-nk-gia>label{display:block;font-size:13px;color:var(--chu3);margin-bottom:4px}
.tn-nk-dong{padding:4px 0;border-top:1px solid var(--vien)}
.tn-nut-dong{margin-top:4px}
.tn-con-no{color:var(--canh)}
.tn-loc{margin-bottom:12px}
.tn-loc .o-tim{flex:1;min-width:180px}
.tn-loc-ngay{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--chu2)}
.tn-the-bk{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.tn-the-dong{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tn-ds-the{display:none}
@media (max-width:560px){
  .tn-luoi-so{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tn-bang{display:none}
  .tn-ds-the{display:block}
  .tn-ck-nut{margin-left:0;width:100%}
  .tn-hoan-nut .nut{flex:1}
}

/* ===== TT2-web ===== */
/* Màn Công nợ theo khách: bộ lọc tuổi nợ, thẻ mỗi khách, danh sách khoản gập, khối tạm ứng
   cấn vào bảng kê ở hồ sơ. Chỉ dùng token màu, không mã hex. (dsh, 22/09/2026) */
.cn-loc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0 14px}
.cn-loc-chip{display:flex;flex-wrap:wrap;gap:6px}
.cn-loc-nut{border:1px solid var(--vien);background:var(--the);color:var(--chu2);
  border-radius:999px;padding:4px 12px;font-size:12.5px;cursor:pointer}
.cn-loc-nut.chon{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan)}
.cn-tim-kiem{flex:1;min-width:180px;border:1px solid var(--vien);background:var(--the);
  color:var(--chu);border-radius:8px;padding:7px 10px}
.cn-ds{display:flex;flex-direction:column;gap:10px}
.cn-the{background:var(--the);border:1px solid var(--vien);border-radius:12px;overflow:hidden}
.cn-the.cn-mo{border-color:var(--nhan)}
.cn-dau{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer}
.cn-dau:focus-visible{outline:2px solid var(--nhan);outline-offset:-2px}
.cn-giua{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cn-kh-ten{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cn-phu{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--chu3)}
.cn-sdt{color:var(--nhan);text-decoration:none}
.cn-ky-toi{font-size:12.5px;color:var(--chu2)}
.cn-nhac{font-size:12px;color:var(--chu3)}
.cn-hen{font-size:12.5px;color:var(--canh)}
.cn-phai{text-align:right;white-space:nowrap}
.cn-tong{font-size:16px;color:var(--loi)}
.cn-phai small{display:block;color:var(--chu3);font-size:11.5px}
.cn-nut{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 12px;justify-content:flex-end}
.cn-khoan{border-top:1px solid var(--vien);background:var(--chim)}
.cn-khoan-dong{display:flex;align-items:center;gap:10px;padding:7px 14px;font-size:13px;
  border-top:1px solid var(--vien)}
.cn-khoan-dong:first-child{border-top:0}
.cn-khoan-no{margin-left:auto;color:var(--loi)}
.cn-sao-ke h4{margin:12px 0 4px;font-size:13px}
.cn-sao-ke-dau{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.cn-sao-ke-tong{margin-top:10px}
.cn-tam-ung{margin-bottom:10px}
@media (max-width:390px){
  /* Xếp DỌC bằng `flex-direction:column`, không khoá `flex-basis` cứng: màn hẹp mà ép bề rộng
     cơ sở là chữ tràn hoặc co về 0. (dsh, 22/09/2026) */
  .cn-dau{flex-direction:column;gap:6px}
  .cn-phai{text-align:left;margin-left:0}
  .cn-nut{justify-content:stretch}
  .cn-nut .nut{flex:1 1 auto}
  .cn-loc{flex-direction:column;align-items:stretch}
  .cn-tim-kiem{width:100%}
  .cn-khoan-dong{flex-wrap:wrap}
}

/* ===== TT3-web-NV ===== */
/* Hai tab TIỀN của người lao động: Hoa hồng · Phiếu lương. Mobile-first 390px: thẻ xếp dọc,
   nút full ngang. Chỉ dùng token màu, không mã hex. (dsh, 26/09/2026) */
/* Hoa hồng — ô tổng đậm + bốn ô vai. */
.vt-hh-dau{padding:16px 18px;margin-bottom:14px}
.vt-hh-dau .l{font-size:12.5px;color:var(--chu3)}
.vt-hh-tong{font-family:"IBM Plex Mono",monospace;font-size:28px;font-weight:700;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:2px 0 12px}
.vt-hh-vai{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vt-hh-o{background:var(--chim);border-radius:10px;padding:8px 10px}
.vt-hh-o .l{font-size:11.5px;color:var(--chu3)}
.vt-hh-o .n{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.vt-hh-dan{margin:12px 0 0;font-size:12.5px;color:var(--chu3);line-height:1.5}
/* Dòng âm (hoàn/huỷ) đỏ + chú thích; không tô nền để bảng vẫn đọc được. */
.vt-hh-am td{color:var(--loi)}
.vt-hh-phu{display:block;font-size:11px;font-style:italic;color:var(--chu3)}
@media (max-width:480px){ .vt-hh-vai{grid-template-columns:repeat(2,1fr)} }
/* Phiếu lương — thực lĩnh rất đậm, khối khoản tách rõ, nút full ngang. */
.vt-pl-the{padding:16px 18px;margin-bottom:14px}
.vt-pl-nhan{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--chu3);
  text-transform:uppercase}
.vt-pl-net-l{font-size:12.5px;color:var(--chu3);margin-top:8px}
.vt-pl-net{font-family:"IBM Plex Mono",monospace;font-size:30px;font-weight:800;
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15}
.vt-pl-cong{font-size:13.5px;font-weight:600;color:var(--chu2);margin-top:4px}
.vt-pl-luc{font-size:12.5px;color:var(--chu3)}
.vt-pl-khoi{padding:14px 16px;margin-bottom:12px}
.vt-pl-nhom{font-size:12.5px;font-weight:600;color:var(--chu3);text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:8px}
.vt-pl-ds{display:flex;flex-direction:column;gap:4px}
.vt-pl-dong{display:flex;align-items:baseline;gap:10px;font-size:13.5px;padding:3px 0}
.vt-pl-dong span{flex:1;min-width:0}
.vt-pl-dong b{font-variant-numeric:tabular-nums;white-space:nowrap}
.vt-pl-dong b.loi{color:var(--loi)}
.vt-pl-trong{font-size:13px;color:var(--chu3)}
.vt-pl-congdong{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--vien);font-size:13.5px}
.vt-pl-congdong b{font-variant-numeric:tabular-nums}
.vt-pl-nut{margin-bottom:14px}
@media (max-width:390px){
  .vt-pl-nut{flex-direction:column;align-items:stretch}
  .vt-pl-nut .nut{width:100%}
  .vt-hh-tong{font-size:24px}
  .vt-pl-net{font-size:26px}
}

/* ===== TT3-web-QL ===== */
/* Màn Bảng lương & Hoa hồng (CPK/QL): chọn tháng dùng chung, bảng người ở tab Tháng, bảng
   người × 4 vai ở tab Hoa hồng, lưới dịch vụ × 4 vai ở tab Bảng giá. KHÔNG viền — phân tách
   bằng tông nền; ô tiền dùng chữ số đều. Chỉ token màu, không mã hex. (dsh, 21/09/2026) */
.bl-dai-tab{margin:10px 0}
.bl-thang{margin:0}
.bl-dai-tt{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  background:var(--chim);border-radius:12px;padding:12px 14px;margin-bottom:12px}
/* Dải xám từng phình cao vì `.dai-so` là con flex `flex-grow:0` nên lưới auto-fit chỉ giải ra
   MỘT cột, ba thẻ số xếp dọc. Cho nó giãn hết bề ngang còn lại và khoá ĐÚNG 3 cột trên desktop
   (≤560px mới dọc) — không đụng `.dai-so` toàn cục vì 10 màn khác dùng. (dsh, 22/09/2026) */
.bl-dai-tt .dai-so{flex:1 1 auto;min-width:0;margin-bottom:0;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.bl-dai-tt-chip{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bl-tt-cau{font-size:12.5px;color:var(--chu3)}
.bl-nut-dau{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.bl-nguoi{display:flex;align-items:center;gap:8px;text-align:left}
.bl-nguoi-ten{display:flex;flex-direction:column;line-height:1.25}
.bl-vt{font-size:11.5px;color:var(--chu3);font-weight:400}
.bl-tien{font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-dam b{font-weight:700}
.bl-am{color:var(--loi)}
.bl-canh-bao{display:flex;flex-wrap:wrap;gap:6px}
.bl-bam-ten{border:0;background:none;padding:0;cursor:pointer;color:inherit;font:inherit;text-align:left}
.bl-bam-tien{border:0;background:none;padding:0;cursor:pointer;color:var(--nhan);font:inherit;
  font-variant-numeric:tabular-nums}
.bl-bam{border:0;cursor:pointer;font:inherit}
.bl-hang-nut{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;align-items:center}
/* MENU ⋯ CỦA HÀNG: một nút chính (Duyệt) + việc hiếm lùi vào đây, mặt tiền không còn 4 nút cùng
   cỡ rớt dòng. Dùng `<details>` để mở/đóng bằng chính trình duyệt (không JS, sandbox thử được).
   Menu nằm TRONG luồng (không `position:absolute`): `.bang-cuon` có `overflow-x:auto` nên mọi
   menu nổi sẽ bị cắt ở mép bảng — thà đẩy hàng cao lên một chút. */
.bl-menu{position:relative}
.bl-menu > summary{list-style:none;cursor:pointer;width:30px;height:30px;display:grid;
  place-items:center;border-radius:8px;background:var(--chim);color:var(--chu);font-size:17px;
  line-height:1;user-select:none}
.bl-menu > summary::-webkit-details-marker{display:none}
.bl-menu[open] > summary{background:var(--nhan-nhat);color:var(--nhan)}
.bl-menu-than{display:flex;flex-direction:column;min-width:168px;margin-top:4px;padding:5px;
  border-radius:10px;background:var(--the);border:1px solid var(--vien);text-align:left}
/* Không dựa vào luật UA của `<details>` (bản cũ có thể bị `display:flex` của ta đè): đóng thì ẩn. */
.bl-menu:not([open]) > .bl-menu-than{display:none}
.bl-menu-muc{display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:6px;
  background:none;color:var(--chu);font:inherit;cursor:pointer}
.bl-menu-muc:hover{background:var(--chim)}
.bl-ds-the{display:none;flex-direction:column;gap:10px}
.bl-the{background:var(--the);border-radius:12px;padding:12px 14px}
.bl-the-dau{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bl-the-dong{display:flex;justify-content:space-between;gap:10px;padding:3px 0;font-size:13.5px}
.bl-the-tong{display:flex;justify-content:space-between;gap:10px;margin-top:8px;
  background:var(--chim);border-radius:8px;padding:8px 10px;font-size:15px}
.bl-chi-tiet{min-width:min(560px,86vw)}
.bl-chi-tiet-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.bl-nhom-item{margin-top:12px}
.bl-nhom-ten{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--chu3);margin-bottom:6px}
.bl-item{display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:13.5px}
.bl-item-ten{flex:1;min-width:0}
.bl-item-tien{font-variant-numeric:tabular-nums;white-space:nowrap}
.bl-item-trong{margin:0;font-size:13px}
.bl-ct{background:var(--chim);border-radius:8px;padding:10px 12px;font-size:12px;
  font-family:"IBM Plex Mono",monospace;white-space:pre-wrap;overflow-x:auto;margin:0}
.bl-khoi-dong{margin-top:16px}
.bl-gia-dau{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.bl-gia-thieu{font-weight:600}
.bl-nhom{margin-bottom:10px}
.bl-nhom-dau{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--chim);border-radius:10px;padding:8px 12px;cursor:pointer;list-style:none}
.bl-nhom-dau::-webkit-details-marker{display:none}
.bl-o-gia{border:0;background:var(--chim);border-radius:8px;padding:5px 10px;cursor:pointer;
  color:var(--chu);font:inherit;font-variant-numeric:tabular-nums;min-width:74px}
.bl-o-gia.trong{color:var(--chu3)}
.bl-o{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bl-o label{min-width:110px;font-size:12.5px;color:var(--chu3)}
@media (max-width:560px){
  .bl-bang{display:none}
  .bl-ds-the{display:flex}
  .bl-dai-tt{flex-direction:column;align-items:stretch}
  .bl-dai-tt .dai-so{grid-template-columns:1fr}
  .bl-nut-dau .nut{flex:1}
  .bl-o{flex-direction:column;align-items:stretch;gap:4px}
  .bl-o label{min-width:0}
  .bl-chi-tiet{min-width:0}
}

/* ===== PC-anh ===== */
/* Ô chọn phụ tá CÓ ẢNH ĐẠI DIỆN + bảng thả nhóm theo trùng giờ (Stitch stitch-phan-cong).
   Bảng thả tuyệt đối 360px; ≤560px JS mở `moHop` toàn màn. Mọi màu qua token, không mã hex. */
.kv-pc-chon-o{position:relative;flex:0 1 340px;min-width:0}
.kv-pc-trai .kv-pc-mat40 .avatar-pt{width:40px;height:40px}
.kv-pc-mat40 .avatar-pt{width:40px;height:40px}
.kv-pc-mat32 .avatar-pt{width:32px;height:32px}
.kv-pc-mat28 .avatar-pt{width:28px;height:28px}
.kv-pc-mat24 .avatar-pt{width:24px;height:24px}
.kv-pc-chon{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:6px 8px;
  color:var(--chu);font:inherit;cursor:pointer}
.kv-pc-chon:hover{border-color:var(--nhan)}
.kv-pc-chon:disabled{cursor:default;opacity:.7}
.kv-pc-chon-than{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.kv-pc-chon-ten{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-pc-chon-ca{color:var(--chu3);font-size:12px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.kv-pc-chon-mui{color:var(--chu3);flex:none;margin-left:auto}
.kv-pc-chon-o .kv-pc-mat28.mo{opacity:.55}
.kv-pc-chon-o.mo .kv-pc-chon{border-color:var(--nhan)}
.kv-pc-tha{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:60;
  width:360px;max-width:min(360px,92vw);max-height:60vh;overflow:auto;
  background:var(--the);border:1px solid var(--vien);border-radius:12px;
  box-shadow:0 12px 32px color-mix(in srgb, var(--chu) 18%, transparent);padding:8px}
.kv-pc-chon-o.mo .kv-pc-tha{display:block}
.kv-pc-tha.trong-hop{position:static;display:block;width:auto;max-width:none;max-height:none;
  box-shadow:none;border:0;padding:0}
.kv-pc-tha-dau{position:sticky;top:0;background:var(--the);padding-bottom:6px;z-index:1}
.kv-pc-tim{width:100%;box-sizing:border-box}
.kv-pc-ds{display:flex;flex-direction:column;gap:2px}
.kv-pc-nhom{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;
  color:var(--chu3);padding:8px 6px 4px}
.kv-pc-dong{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px;cursor:pointer}
.kv-pc-dong:hover{background:var(--nhan-nhat)}
.kv-pc-dong.mo{opacity:.55;cursor:default}
.kv-pc-dong.mo:hover{background:transparent}
.kv-pc-dong-than{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.kv-pc-dong-than b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kv-pc-dong-than small{color:var(--chu3);font-size:12px}
.kv-pc-loc-hang{display:flex;gap:6px;flex-wrap:wrap}
.kv-pc-loc{border:1px solid var(--vien);background:var(--the);cursor:pointer;font:inherit}
.kv-pc-loc.chon{background:var(--nhan-nhat);border-color:var(--nhan)}
.kv-pc-loc-hang .chip{margin:0}


/* ===== LD-web-cc ===== */
/* CHẤM CÔNG DI ĐỘNG (viectoi.js) + MÀN CHẤM CÔNG/CÀI ĐẶT (chamcong.js) — v2.14, dsh 27/09/2026.
   Điện thoại 390px trước, màn cài đặt desktop-first (3 thẻ ngang, ≤900px xếp dọc). Mọi màu
   qua biến; chỉ ẩn/hiện và bo góc — không viền thừa. */
@keyframes cc-xoay{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes cc-tho{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.04);opacity:1}}

/* ----- Tab Chấm công của "Việc của tôi" ----- */
.cc-the-ca{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-bottom:12px}
.cc-ca-icon{flex:none;width:32px;height:32px;border-radius:10px;background:var(--nhan-nhat);
  color:var(--nhan);display:grid;place-items:center;font-size:16px}
.cc-ca-giua{flex:1;min-width:0}
.cc-ca-ten{font-size:13.5px;font-weight:800;color:var(--chu)}
.cc-ca-ghe{color:var(--nhan)}
.cc-ca-phu{font-size:11.5px;color:var(--chu3);margin-top:2px}

.cc-cham{display:flex;flex-direction:column;align-items:center;padding:16px 14px 14px;margin-bottom:12px}
.cc-cam{position:relative;width:240px;height:240px;max-width:74vw;max-height:74vw;border-radius:50%;
  border:2px solid var(--nhan);background:var(--chim);display:grid;place-items:center;padding:0;
  cursor:pointer;overflow:hidden;animation:cc-tho 3s ease-in-out infinite;
  box-shadow:0 0 0 6px color-mix(in srgb, var(--nhan) 12%, transparent)}
.cc-cam.khong{border-style:dashed;border-color:var(--vien);cursor:default;animation:none;box-shadow:none}
.cc-video{width:100%;height:100%;object-fit:cover;border-radius:50%}
.cc-cam-icon{font-size:44px;opacity:.45}
.cc-cam-vien{position:absolute;inset:6px;border-radius:50%;pointer-events:none;
  border:2px dashed color-mix(in srgb, var(--nhan) 45%, transparent);animation:cc-xoay 16s linear infinite}
.cc-cam.khong .cc-cam-vien{display:none}
.cc-cam-dan{font-size:12px;color:var(--chu3);margin:10px 0 12px;text-align:center}

.cc-kt{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-bottom:14px}
.cc-kt-o{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;
  border-radius:10px;background:var(--chim);color:var(--chu2)}
.cc-kt-o.tot{background:var(--tot-nhat);color:var(--tot)}
.cc-kt-o.canh{background:var(--canh-nhat);color:var(--canh)}
.cc-kt-icon{font-size:17px;line-height:1}
.cc-kt-ten{font-size:10px;font-weight:700}
.cc-kt-tt{font-size:9.5px;font-weight:800;text-align:center}

.cc-nut{width:100%;height:56px;font-size:15px;font-weight:800;border-radius:12px}
.cc-canh-bao{display:flex;justify-content:flex-end;width:100%;margin-top:8px}

.cc-tl,.cc-thang{padding:14px;margin-bottom:12px}
.cc-dau{display:flex;align-items:center;gap:6px;margin-bottom:10px}
.cc-dau-icon{font-size:15px;color:var(--nhan)}
.cc-dau-phu{margin-left:auto;font-size:11px;color:var(--chu3);font-weight:600}
.cc-tl-hang{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;
  background:var(--chim);font-size:12.5px;margin-bottom:6px}
.cc-tl-cham{flex:none;width:8px;height:8px;border-radius:50%;background:var(--chu3)}
.cc-tl-cham.tot{background:var(--tot)}
.cc-tl-gio{font-weight:700;color:var(--chu)}
.cc-tl-chu{color:var(--chu2);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-tl-hang .chip{margin-left:auto}

.cc-so-hang{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.cc-so{padding:8px;border-radius:10px;background:var(--chim);text-align:center}
.cc-so.canh{background:var(--canh-nhat)}
.cc-so.nhan{background:var(--nhan-nhat)}
.cc-so-n{font-size:16px;font-weight:800;color:var(--chu);font-variant-numeric:tabular-nums}
.cc-so.canh .cc-so-n{color:var(--canh)}
.cc-so.nhan .cc-so-n{color:var(--nhan)}
.cc-so-l{font-size:10px;font-weight:700;color:var(--chu3);text-transform:uppercase}
.cc-lich{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--chim);
  border-radius:10px;padding:8px}
.cc-thu{text-align:center;font-size:10px;font-weight:700;color:var(--chu3)}
.cc-o{display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 1px;border:0;
  border-radius:7px;background:transparent;color:var(--chu2);font:inherit;cursor:default}
.cc-o.cc-bam{cursor:pointer}
.cc-o.cc-bam:hover{background:var(--the)}
.cc-o.trong{opacity:.4}
.cc-o-ngay{font-size:11px;font-variant-numeric:tabular-nums}
.cc-o-cham{width:6px;height:6px;border-radius:50%;background:transparent}
.cc-o-cham.tot{background:var(--tot)}
.cc-o-cham.canh{background:var(--canh)}
.cc-o-cham.nhan{background:var(--nhan)}
.cc-o-cham.loi{background:var(--loi)}
.cc-fab{position:fixed;right:18px;bottom:18px;width:46px;height:46px;border-radius:50%;border:0;
  background:var(--nhan);color:var(--the);font-size:19px;cursor:pointer;z-index:30;
  box-shadow:0 8px 20px -4px rgba(0,0,0,.28)}
.cc-fab:hover{filter:brightness(1.08)}
/* Nút ✓/✕ trong chip "chờ xác nhận" (dùng chung với màn Nhân sự). */
.cc-vs-nut{border:0;background:transparent;color:inherit;font:inherit;font-weight:800;
  cursor:pointer;padding:0 3px}
.cc-vs-nut:hover{color:var(--nhan)}
@media (max-width:480px){
  .cc-cam{width:216px;height:216px;max-width:none;max-height:none}
}

/* ----- Màn "Chấm công" — tab Cài đặt ----- */
.cc-cd-dau-hang{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.cc-cd-dau-hang .mo{flex:1}
.cc-cd-luu{padding:8px 26px;font-weight:800;border-radius:11px}
.cc-cd-luoi{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.cc-cd-luoi2{display:grid;grid-template-columns:5fr 7fr;gap:14px;align-items:start;margin-top:14px}
.cc-cd-the{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--the);
  border:1px solid var(--vien);border-radius:13px;box-shadow:var(--bong)}
.cc-cd-the-dau{display:flex;align-items:center;gap:10px}
.cc-cd-icon{flex:none;width:32px;height:32px;border-radius:10px;background:var(--nhan-nhat);
  display:grid;place-items:center;font-size:16px}
.cc-cd-the-ten{flex:1;min-width:0;display:flex;flex-direction:column}
.cc-cd-the-ten b{font-size:14px;color:var(--chu)}
.cc-cd-the-phu{font-size:11px;color:var(--chu3)}
.cc-cd-nut-phu{margin-top:auto;width:100%;border-radius:11px}

/* Công tắc. */
.cc-cd-tat{position:relative;display:inline-block;width:38px;height:22px;flex:none;cursor:pointer}
.cc-cd-tat input{opacity:0;width:0;height:0;position:absolute}
.cc-cd-truot{position:absolute;inset:0;background:var(--chim);border-radius:20px;transition:.2s}
.cc-cd-truot::before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;
  background:var(--the);border-radius:50%;transition:.2s;box-shadow:0 1px 2px var(--vien)}
.cc-cd-tat input:checked + .cc-cd-truot{background:var(--nhan)}
.cc-cd-tat input:checked + .cc-cd-truot::before{transform:translateX(16px)}

/* Thẻ Khuôn mặt. */
.cc-cd-hop{background:var(--chim);border-radius:11px;padding:10px}
.cc-cd-nhan-hang{display:flex;justify-content:space-between;font-size:12px;font-weight:600;margin-bottom:6px}
.cc-cd-nhan-n{color:var(--nhan);font-weight:800;background:var(--nhan-nhat);padding:1px 7px;border-radius:6px}
.cc-cd-range{width:100%;accent-color:var(--nhan)}
.cc-cd-nhan-muc{display:flex;justify-content:space-between;font-size:10px;color:var(--chu3);margin-top:4px}
.cc-cd-dem{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--chu2)}
.cc-cd-tien{height:6px;border-radius:20px;background:var(--chim);overflow:hidden}
.cc-cd-tien-con{display:block;height:100%;background:var(--nhan);border-radius:20px}
.cc-cd-mat-hang{display:flex;align-items:center;gap:8px}
.cc-cd-mat-ds{display:flex}
.cc-cd-mat{width:24px;height:24px;border-radius:50%;background:var(--nhan-nhat);color:var(--nhan);
  display:inline-grid;place-items:center;font-size:10px;font-weight:800;margin-left:-6px;
  box-shadow:0 0 0 2px var(--the)}
.cc-cd-mat-con{font-size:11px;color:var(--chu3)}
.cc-cd-ds{display:flex;flex-direction:column;gap:6px}
.cc-cd-ds-hang{display:flex;align-items:center;gap:8px}
.cc-cd-ds-ten{font-size:13px}

/* Thẻ GPS. */
.cc-cd-ban-do{position:relative;height:112px;border-radius:11px;background:var(--chim);
  display:grid;place-items:center;overflow:hidden}
.cc-cd-vong{width:84px;height:84px;border-radius:50%;background:var(--nhan-nhat);
  border:1px solid var(--nhan);display:grid;place-items:center;animation:cc-tho 3s ease-in-out infinite}
.cc-cd-cham{display:block;width:14px;height:14px;border-radius:50%;background:var(--nhan);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--nhan) 25%, transparent)}
.cc-cd-nhan-vong{position:absolute;bottom:8px;background:var(--the);color:var(--chu2);
  border-radius:20px;padding:1px 9px;font-size:10px;font-weight:700}
.cc-cd-hang-o{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.cc-cd-o{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--chu3)}
.cc-cd-o-so{padding:7px 9px}
.cc-cd-dia-chi{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--chu2)}

/* Thẻ WiFi/Mạng. */
.cc-cd-nhan-nho{font-size:11px;font-weight:700;color:var(--chu3);text-transform:uppercase;
  letter-spacing:.05em}
.cc-cd-chip-hang{display:flex;flex-wrap:wrap;gap:6px}
.cc-cd-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 9px;border-radius:10px;
  background:var(--chim);font-size:12px}
.cc-cd-chip-x{border:0;background:transparent;color:var(--chu3);cursor:pointer;font:inherit;padding:0}
.cc-cd-chip-x:hover{color:var(--loi)}
.cc-cd-them{position:relative;display:flex;align-items:center}
.cc-cd-o-text{padding:7px 34px 7px 10px}
.cc-cd-them-nut{position:absolute;right:4px;border:0;background:transparent;color:var(--chu3);
  font-size:17px;cursor:pointer;padding:2px 6px}
.cc-cd-them-nut:hover{color:var(--nhan)}
.cc-cd-ip{display:flex;align-items:center;gap:8px;justify-content:space-between;
  background:var(--chim);border-radius:11px;padding:8px 10px;font-size:11.5px;flex-wrap:wrap}
.cc-cd-ip-nut{border:0;background:var(--nhan-nhat);color:var(--nhan);font:inherit;font-size:11px;
  font-weight:700;border-radius:8px;padding:3px 9px;cursor:pointer}

/* Thẻ Quy tắc + Thiết bị. */
.cc-cd-qt{display:flex;align-items:center;gap:10px;background:var(--chim);border-radius:11px;
  padding:10px}
.cc-cd-qt-icon{flex:none;width:30px;height:30px;border-radius:9px;background:var(--the);
  display:grid;place-items:center;font-size:15px}
.cc-cd-qt-chu{flex:1;min-width:0;display:flex;flex-direction:column}
.cc-cd-qt-chu b{font-size:12.5px;color:var(--chu)}
.cc-cd-qt-chu .mo{font-size:11px}
.cc-cd-tb-nguoi{display:flex;align-items:center;gap:8px;white-space:nowrap}

@media (max-width:900px){
  .cc-cd-luoi,.cc-cd-luoi2{grid-template-columns:1fr}
}
@media (max-width:480px){
  .cc-cd-hang-o{grid-template-columns:1fr 1fr}
}

/* ===== LD-web-lich ===== */
/* Màn "Lịch đi làm" (v2.14). Tông nhạt, ít chữ, mọi con số đều tabular-nums. */
.ld-dau{align-items:center}
.ld-dau-ten{display:flex;align-items:baseline;gap:8px}
.ld-info{color:var(--chu3);cursor:help;font-size:14px}
.ld-dau-nut{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-che{display:inline-flex;background:var(--chim);border-radius:10px;padding:2px}
.ld-che button{border:0;background:none;color:var(--chu2);font:inherit;font-size:12.5px;
  font-weight:600;padding:5px 12px;border-radius:8px;cursor:pointer}
.ld-che button.chon{background:var(--the);color:var(--nhan);font-weight:700;box-shadow:var(--bong)}
.ld-luot{display:flex;align-items:center;gap:4px;background:var(--the);border:1px solid var(--vien);
  border-radius:10px;padding:3px 6px}
.ld-luot-nut{border:0;background:none;color:var(--chu2);cursor:pointer;font-size:12px;padding:2px 6px}
.ld-luot-hom{border:0;background:none;color:var(--nhan);font-weight:700;font-size:12.5px;
  cursor:pointer;padding:3px 8px;border-radius:7px}
.ld-luot-hom:hover{background:var(--nhan-nhat)}
.ld-luot-ngay{font-size:12.5px;font-weight:600;color:var(--chu);padding-left:4px;
  font-variant-numeric:tabular-nums}
.ld-dk{white-space:nowrap}
.ld-bon .the.so .n{font-size:28px}
.ld-bon .the.so .l{font-size:12px}
/* Mọi con số trên màn này đều xếp cột — cột số nhảy là mắt phải dò lại. */
.ld-bang-ngay,.ld-bang-tuan,.ld-thang,.ld-thang-cot,.ld-chi,.ld-o-tong,.ld-tuan-tong,
.ld-m-tab,.ld-ngan-ti,.ld-ngan-meta{font-variant-numeric:tabular-nums}

/* ---- lưới NGÀY ---- */
.ld-bang-ngay{font-size:12.5px}
.ld-bang-ngay th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--chu3);
  background:var(--chim)}
.ld-bang-ngay th .ld-gio{display:block;font-size:11px;text-transform:none;letter-spacing:0;
  color:var(--chu3);font-variant-numeric:tabular-nums}
.ld-th-bp{width:210px}
.ld-bp{vertical-align:top;white-space:nowrap}
.ld-bp b{display:block;font-weight:700;color:var(--chu)}
.ld-bp small{color:var(--chu3);font-size:11px}
.ld-o{vertical-align:top;cursor:pointer;min-width:140px;padding:8px 10px;border-radius:8px}
.ld-o.ld-du{background:color-mix(in srgb, var(--tot) 10%, var(--the))}
.ld-o.ld-thieu{background:color-mix(in srgb, var(--canh) 12%, var(--the))}
.ld-o.ld-khong{background:var(--chim)}
.ld-o.ld-chon{border:2px solid var(--nhan-nhat)}
.ld-o-ruot{display:flex;flex-direction:column;gap:5px}
.ld-o-so{font-size:19px;font-weight:700;color:var(--chu);line-height:1.1}
.ld-o-hc{text-align:center}
.ld-hc-nhan{font-size:11.5px;font-weight:700;color:var(--nhan);margin-bottom:6px}
.ld-o-hc .ld-o-ruot{align-items:center}
.ld-trong-o{color:var(--chu3)}
.ld-mat{display:flex;align-items:center}
.ld-mat .avatar-pt{width:24px;height:24px;font-size:9px;font-weight:700;border:2px solid var(--the);
  display:inline-grid;place-items:center;border-radius:50%;overflow:hidden}
.ld-mat .avatar-pt+.avatar-pt{margin-left:-8px}
.ld-mat-them{background:var(--chim);color:var(--chu2);font-size:9px}
.ld-icons{display:flex;flex-wrap:wrap;gap:4px}
.ld-ic{font-size:10.5px;font-weight:600;border-radius:6px;padding:1px 5px;background:var(--chim);
  color:var(--chu2);font-variant-numeric:tabular-nums}
.ld-ic-som{background:color-mix(in srgb, var(--sop-lien-ket) 12%, var(--the));color:var(--sop-lien-ket)}
.ld-ic-vt{background:var(--nhan-nhat);color:var(--nhan)}
.ld-ic-tc{background:var(--canh-nhat);color:var(--canh)}
.ld-ic-nghi{background:var(--chim);color:var(--chu2)}
.ld-ic-cho{background:var(--canh-nhat);color:var(--canh)}

/* dải NHIỆM VỤ của Tổ Phụ tá & Điều dưỡng */
.ld-nv-hang td{background:color-mix(in srgb, var(--canh) 6%, var(--the))}
.ld-nv-o{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ld-nv{display:flex;align-items:center;gap:6px;flex-wrap:wrap;background:var(--the);
  border:1px dashed var(--vien);border-radius:9px;padding:6px 8px}
.ld-nv-ten{font-weight:700;color:var(--chu)}
.ld-nv-tram{font-size:11px;color:var(--chu3)}
.ld-nv-trong{font-size:10.5px}
.ld-nv-lap{font-size:11px;padding:3px 8px}

/* ---- NGĂN KÉO PHẢI ---- */
.ld-ngan{position:fixed;top:0;right:0;bottom:0;width:360px;background:var(--the);
  border-left:1px solid var(--vien);box-shadow:var(--bong);display:flex;flex-direction:column;z-index:40}
.ld-ngan-dau{padding:16px 18px;border-bottom:1px solid var(--vien)}
.ld-ngan-pill{display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--nhan);background:var(--nhan-nhat);border-radius:20px;padding:2px 9px}
.ld-ngan-dong{float:right;border:0;background:none;color:var(--chu3);font-size:15px;cursor:pointer}
.ld-ngan-dau h3{margin:8px 0 2px;font-size:16px}
.ld-ngan-meta{font-size:12px;color:var(--chu3);font-variant-numeric:tabular-nums}
.ld-ngan-ti{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;
  background:var(--chim);border-radius:10px;padding:8px 12px;font-size:12px;color:var(--chu3)}
.ld-ngan-ti b{font-size:17px;color:var(--chu)}
.ld-ngan-than{flex:1;overflow-y:auto;padding:10px 14px}
.ld-nhom{border-bottom:1px solid var(--vien);padding:6px 0}
.ld-nhom summary{cursor:pointer;font-weight:700;font-size:13px;padding:4px 2px}
.ld-ngan-ds{display:flex;flex-direction:column;gap:8px;padding:4px 2px 8px}
.ld-ngan-nguoi{display:flex;align-items:center;gap:9px}
.ld-ngan-nguoi>.avatar-pt{width:32px;height:32px;flex:none}
.ld-ngan-nguoi.ld-mo{opacity:.62}
.ld-ngan-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.ld-ngan-tt b{font-size:12.5px;font-weight:700;color:var(--chu)}
.ld-ngan-tt small{font-size:11px;color:var(--chu3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ld-ngan-dk{display:flex;gap:3px;flex-wrap:wrap}
.ld-ngan-chan{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;
  border-top:1px solid var(--vien)}

/* ---- TUẦN ---- */
.ld-loc{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ld-loc-nhan{font-size:12px;font-weight:600;color:var(--chu3)}
.ld-loc-chip{border:1px solid var(--vien);background:var(--the);color:var(--chu2);font:inherit;
  font-size:12px;font-weight:600;border-radius:20px;padding:5px 12px;cursor:pointer}
.ld-loc-chip.chon{background:var(--nhan-nhat);border-color:var(--nhan);color:var(--nhan)}
.ld-cong-tac{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--chu2);cursor:pointer}
.ld-bang-tuan{font-size:12px;min-width:1020px}
.ld-bang-tuan th{background:var(--chim);font-size:11px;text-transform:uppercase;color:var(--chu3);
  text-align:center;white-space:nowrap}
.ld-bang-tuan th .ld-gio{display:block;font-size:10px;text-transform:none;font-variant-numeric:tabular-nums}
.ld-bang-tuan td{vertical-align:top;padding:6px 8px}
.ld-toanpk td{background:color-mix(in srgb, var(--nhan) 5%, var(--the));font-weight:700}
.ld-toanpk .ld-bp b{font-size:13px}
.ld-o-tong{text-align:center}
.ld-o-tuan{min-width:118px}
.ld-hom-nay{background:color-mix(in srgb, var(--nhan) 8%, var(--the))}
.ld-hom-nay-cot{color:var(--nhan)}
.ld-vach-o{display:flex;flex-direction:column;gap:3px}
.ld-vach{display:flex;justify-content:space-between;gap:6px;border-radius:7px;padding:2px 6px;
  font-size:10.5px}
.ld-vach i{font-style:normal;font-weight:800}
.ld-vach.du{background:color-mix(in srgb, var(--tot) 12%, var(--the));color:var(--tot)}
.ld-vach.thieu{background:color-mix(in srgb, var(--canh) 12%, var(--the));color:var(--canh)}
.ld-vach.khong{background:var(--chim);color:var(--chu3)}
.ld-chams{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding-top:3px}
.ld-cham{width:6px;height:6px;border-radius:50%;display:inline-block;background:var(--chu3)}
.ld-cham-som{background:var(--sop-lien-ket)}
.ld-cham-vt{background:var(--nhan)}
.ld-cham-tc{background:var(--canh)}
.ld-cham-nghi{background:var(--chu3)}
.ld-cham-cho{background:var(--canh);box-shadow:0 0 0 1px var(--canh-nhat)}
.ld-cham-nv{display:inline-flex;gap:3px;margin-left:4px}
.ld-cham-nv1{background:var(--tot)}
.ld-cham-nv2{background:var(--canh)}
.ld-cham-nv3{background:var(--loi)}
.ld-tuan-tong{text-align:center;white-space:nowrap;font-weight:700;color:var(--chu)}
.ld-thanh{display:flex;gap:2px;height:5px;border-radius:20px;overflow:hidden;background:var(--chim);margin-top:5px}
.ld-thanh i{height:100%}
.ld-thanh .b1{background:var(--tot)}
.ld-thanh .b2{background:var(--canh)}
.ld-thanh .b3{background:var(--chu3)}
.ld-duoi{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:16px}
.ld-khoi{padding:14px 16px}
.ld-khoi-dau{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ld-khoi-dau b{font-size:14px}
.ld-ds-cho,.ld-ds-vang{display:flex;flex-direction:column;gap:10px}
.ld-cho-dong,.ld-vang-dong{display:flex;align-items:center;gap:10px}
.ld-cho-dong>.avatar-pt,.ld-vang-dong>.avatar-pt{width:28px;height:28px;flex:none}
.ld-cho-nut{display:flex;gap:6px}
.ld-nut-ok,.ld-nut-x{border:0;border-radius:8px;width:28px;height:28px;cursor:pointer;font-size:13px;font-weight:700}
.ld-nut-ok{background:var(--nhan);color:#fff}
.ld-nut-x{background:var(--chim);color:var(--chu2)}
.ld-loa{color:var(--chu3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}

/* ---- THÁNG ---- */
.ld-thang{display:grid;grid-template-columns:1fr 280px;gap:16px}
.ld-thang-luoi{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.ld-thang-thu{text-align:center;font-size:11.5px;font-weight:700;text-transform:uppercase;color:var(--chu3)}
.ld-thang-o{background:var(--the);border:1px solid var(--vien);border-radius:12px;padding:8px;
  display:flex;flex-direction:column;gap:4px;cursor:pointer;min-height:86px}
.ld-thang-o.ld-ngoai{opacity:.5}
.ld-thang-o.ld-le{background:color-mix(in srgb, var(--loi) 8%, var(--the))}
.ld-thang-o.ld-hom-nay{border:2px solid var(--nhan)}
.ld-thang-dau{display:flex;justify-content:space-between;align-items:center}
.ld-thang-dau b{font-size:12px}
.ld-thang-so{font-size:12px;color:var(--chu2);font-weight:700}
.ld-thang-cot{display:flex;flex-direction:column;gap:10px}
.ld-thang-cot h3{margin:0;font-size:15px}
.ld-chi-so{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ld-chi{display:flex;flex-direction:column;gap:2px;background:var(--chim);border-radius:12px;padding:10px 12px}
.ld-chi span{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--chu3)}
.ld-chi b{font-size:18px;color:var(--chu)}
.ld-chi.tot b{color:var(--tot)}
.ld-chi.canh b{color:var(--canh)}

/* ---- MOBILE 390 ---- */
.ld-m-tuan{display:flex;gap:6px;overflow-x:auto;padding:4px 0;margin-bottom:8px}
.ld-m-ngay{flex:1 0 46px;border:1px solid var(--vien);background:var(--the);border-radius:12px;
  padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer}
.ld-m-ngay span{font-size:10px;color:var(--chu3)}
.ld-m-ngay b{font-size:14px;color:var(--chu)}
.ld-m-ngay.hom-nay b{color:var(--nhan)}
.ld-m-ngay.chon{background:var(--nhan);border-color:var(--nhan)}
.ld-m-ngay.chon span,.ld-m-ngay.chon b{color:#fff}
.ld-m-che{display:inline-flex;background:var(--chim);border-radius:10px;padding:2px;margin-bottom:10px}
.ld-m-che button{border:0;background:none;color:var(--chu2);font:inherit;font-size:12px;font-weight:600;
  padding:4px 11px;border-radius:8px;cursor:pointer}
.ld-m-che button.chon{background:var(--the);color:var(--nhan);font-weight:700}
.ld-m-so{margin-bottom:10px}
.ld-m-so .dai-so{margin-bottom:0;grid-template-columns:1fr 1fr}
.ld-m-toi,.ld-m-the{margin-bottom:10px;padding:12px 14px}
.ld-m-toi-than,.ld-m-the-dau{display:flex;align-items:center;gap:10px}
.ld-m-toi-than .avatar-pt,.ld-m-the-dau .avatar-pt{width:32px;height:32px;flex:none}
.ld-m-the-dau{cursor:pointer}
.ld-m-the-dau b{flex:1;min-width:0;font-size:13px}
.ld-m-mui{color:var(--chu3);font-size:13px}
.ld-m-ds{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--vien)}
.ld-m-nguoi{display:flex;align-items:center;gap:9px}
.ld-m-nguoi>.avatar-pt{width:32px;height:32px;flex:none}
.ld-m-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--chim);
  border-radius:12px;padding:4px;margin-bottom:10px}
.ld-m-tab{border:0;background:none;border-radius:9px;padding:7px 4px;display:flex;flex-direction:column;
  align-items:center;gap:2px;cursor:pointer;font:inherit}
.ld-m-tab b{font-size:12.5px;color:var(--chu2)}
.ld-m-tab small{font-size:10px;color:var(--chu3);font-variant-numeric:tabular-nums}
.ld-m-tab.chon{background:var(--the)}
.ld-m-tab.chon b,.ld-m-tab.chon small{color:var(--nhan);font-weight:700}
.ld-fab{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;border:0;
  background:var(--nhan);color:#fff;font-size:26px;line-height:1;cursor:pointer;z-index:45;box-shadow:var(--bong)}
.ld-m-chu-giai{display:flex;gap:12px;overflow-x:auto;font-size:10.5px;color:var(--chu3);white-space:nowrap;padding:6px 0}

/* ---- HỘP ĐĂNG KÝ ---- */
.ld-hop{max-width:560px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.ld-h-dau{display:flex;align-items:flex-start;gap:10px}
.ld-h-ten{display:flex;align-items:center;gap:8px;flex:1;flex-wrap:wrap}
.ld-h-ten h3{margin:0;font-size:16px}
.ld-h-dong{border:0;background:none;color:var(--chu3);font-size:16px;cursor:pointer}
.ld-h-phu{margin:4px 0 0;font-size:12px;color:var(--chu3)}
.ld-h-than{padding:14px 2px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.ld-h-nhan{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--chu3)}
.ld-h-chips{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ld-h-chip{border:1px solid var(--vien);background:var(--chim);color:var(--chu2);font:inherit;
  font-size:11px;font-weight:600;border-radius:10px;padding:8px 4px;cursor:pointer;text-align:center}
.ld-h-chip.chon{background:var(--nhan);border-color:var(--nhan);color:#fff;font-weight:700}
.ld-h-car{background:color-mix(in srgb, var(--nhan) 5%, var(--the));border:1px solid var(--nhan-nhat);
  border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:9px}
.ld-h-car-dau{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ld-h-car-thu{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ld-seg{display:inline-flex;background:var(--the);border:1px solid var(--nhan-nhat);border-radius:8px;padding:2px}
.ld-seg button{border:0;background:none;font:inherit;font-size:11px;color:var(--chu2);border-radius:6px;
  padding:4px 9px;cursor:pointer}
.ld-seg button.chon{background:var(--nhan);color:#fff;font-weight:700}
.ld-thu-chips{display:flex;gap:5px}
.ld-thu-chip{width:26px;height:26px;border-radius:50%;border:1px solid var(--vien);background:var(--the);
  color:var(--chu2);font:inherit;font-size:10.5px;font-weight:700;cursor:pointer}
.ld-thu-chip.chon{background:var(--nhan);border-color:var(--nhan);color:#fff}
.ld-h-luoi{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ld-h-luoi label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;color:var(--chu2)}
.ld-h-luoi input,.ld-h-luoi select,.ld-h-luoi textarea{border:1px solid var(--vien);background:var(--chim);
  border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--chu)}
.ld-h-rong{grid-column:1/-1}
.ld-tu-tinh{font-size:11px;font-weight:700;color:var(--nhan);align-self:flex-start}
.ld-h-dotxuat{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--chim);
  border-radius:11px;padding:10px 12px;cursor:pointer}
.ld-h-nguoi{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:var(--chim);
  border:1px solid var(--vien);border-radius:11px;padding:7px;min-height:42px}
.ld-h-nguoi-chip{display:inline-flex;align-items:center;gap:6px;background:var(--the);border:1px solid var(--vien);
  border-radius:8px;padding:3px 7px;font-size:12px}
.ld-h-nguoi-chip .avatar-pt{width:16px;height:16px;display:inline-grid;place-items:center;font-size:9px}
.ld-h-bo{border:0;background:none;color:var(--chu3);cursor:pointer;font-size:12px}
.ld-h-tim{border:0;background:none;font:inherit;font-size:12px;color:var(--chu2);min-width:120px;padding:4px}
.ld-h-su{border-top:1px solid var(--vien);padding-top:8px}
.ld-h-su-dau{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;
  background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--chu2);cursor:pointer;padding:4px 0}
.ld-h-su-ds{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ld-h-su-dong{display:flex;align-items:center;gap:8px;background:var(--chim);border-radius:10px;padding:9px 10px;font-size:12px}
.ld-h-su-dong small{color:var(--chu3);font-variant-numeric:tabular-nums}
.ld-h-lydo{margin-left:auto;border:0;background:none;color:var(--loi);font:inherit;font-size:10.5px;
  font-weight:700;cursor:pointer}
.ld-h-chan{display:flex;justify-content:flex-end;gap:10px;padding-top:12px;border-top:1px solid var(--vien)}
.ld-h-huy{border:0;background:none;color:var(--chu2);font:inherit;font-size:13px;font-weight:600;cursor:pointer;padding:8px 12px}
.ld-h-chan .bat-buoc,.ld-h-nhan .bat-buoc{color:var(--loi)}

@media (max-width:900px){
  .ld-thang{grid-template-columns:1fr}
  .ld-duoi{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ld-ngan{width:100%}
  .ld-h-chips{grid-template-columns:repeat(3,1fr)}
  .ld-h-luoi{grid-template-columns:1fr}
  .ld-nv-o{grid-template-columns:1fr}
  .ld-bon .the.so .n{font-size:22px}
}


/* ===== TU-CL-web ===== */
/* Tạm ứng lương (màn `tam-ung`) · Chi lương + dải tiến trình 6 bước (tab của `bang-luong`).
   Lớp tiền tố `tu-` cho tạm ứng, `cl-` cho chi lương; dải bước dùng chung `bl-buoc-*`.
   Màu chỉ qua biến, không mã hex. (dsh, 28/09/2026) */

/* ---------- dải tiến trình 6 bước (tab Tháng + tab Chi lương) ---------- */
.bl-buoc-dai{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;margin-bottom:4px}
.bl-buoc{display:flex;flex-direction:column;gap:2px;flex:1 1 0;min-width:104px;
  border:1px solid var(--vien);border-radius:11px;background:var(--the);padding:8px 10px}
.bl-buoc.hien{border-color:var(--nhan);background:var(--nhan-nhat)}
.bl-buoc-cot{display:flex;align-items:center;gap:5px}
.bl-buoc-cham{color:var(--vien);font-weight:700}
.bl-buoc.xong .bl-buoc-cham{color:var(--tot)}
.bl-buoc-ten{font-size:12.5px;font-weight:600;color:var(--chu2)}
.bl-buoc.hien .bl-buoc-ten{color:var(--nhan)}
.bl-buoc-dem{font-size:12px;color:var(--chu3);font-variant-numeric:tabular-nums}

/* ---------- khối "Cần xử lý trước khi duyệt" ---------- */
.bl-xu{margin:0 0 14px;padding:14px 16px}
.bl-xu-ten{margin:0 0 8px;font-size:15px}
.bl-xu-dong{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--vien)}
.bl-xu-dong:first-of-type{border-top:0}
.bl-xu-than{flex:1;min-width:0;display:flex;flex-direction:column}
.bl-xu-than b{font-size:13.5px}
.bl-xu-than small{color:var(--chu3);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Cảnh báo lệch > 20% là chú thích của chip, KHÔNG phải chip thứ hai. */
.bl-lech{display:block;margin-top:2px;color:var(--canh);font-size:11.5px;white-space:nowrap}
/* Cột Nhân sự rộng tối thiểu 200px; số tiền không xuống dòng (`td.tien` đã nowrap). */
.bl-bang td:first-child,.bl-bang-vung td:nth-child(2){min-width:200px}

/* ---------- tab Chi lương ---------- */
.cl-lo-khoi{margin:0 0 14px;padding:14px 16px}
.cl-lo-ten{margin:0 0 8px;font-size:15px}
.cl-lo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 0;border-top:1px solid var(--vien)}
.cl-lo:first-of-type{border-top:0}
.cl-lo-than{flex:1;min-width:140px;display:flex;flex-direction:column}
.cl-lo-than small{color:var(--chu3);font-size:12px}
.cl-lo-nut{display:flex;gap:8px;flex-wrap:wrap}
.cl-loc{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}
.cl-bang-vung{padding-bottom:78px}
.cl-o{width:34px}
.cl-o-chon{width:20px;height:20px;min-height:20px;padding:0;cursor:pointer}
.cl-o-khong{display:inline-block;width:20px}
.cl-thanh{position:sticky;bottom:0;z-index:6;display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;background:var(--the);border:1px solid var(--nhan-nhat);border-radius:12px;
  padding:10px 14px;margin-top:-64px;box-shadow:0 -6px 18px -12px rgba(20,20,40,.45)}
.cl-thanh-cau{font-size:13.5px;color:var(--chu2)}
.cl-thanh .nut{min-height:44px}

/* ---------- màn Tạm ứng lương ---------- */
.tu-canh{background:var(--canh-nhat)}
.tu-thang{gap:6px}
.tu-khoi{margin:0 0 16px}
.tu-khoi-ten{margin:0 0 10px;font-size:15px}
.tu-ds-the{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tu-the{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.tu-the-dau{display:flex;align-items:center;gap:9px}
.tu-the-ten{display:flex;flex-direction:column;line-height:1.25}
.tu-vt{font-size:11.5px;color:var(--chu3)}
.tu-the-tien{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:700;
  font-variant-numeric:tabular-nums}
.tu-the-ly{font-size:13px;color:var(--chu2)}
.tu-han-muc{display:flex;flex-direction:column;gap:5px}
.tu-han-muc-nen{height:7px;border-radius:6px;background:var(--chim);overflow:hidden}
.tu-han-muc-day{height:100%;background:var(--nhan);border-radius:6px}
.tu-han-muc-cau{font-size:11.5px;color:var(--chu3);font-variant-numeric:tabular-nums}
.tu-canh-bao{font-size:12px;font-weight:600;color:var(--canh);background:var(--canh-nhat);
  border-radius:8px;padding:5px 8px}
.tu-the-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.tu-the-nut .nut{min-height:44px}
.tu-duyet{border-color:var(--nhan);color:var(--nhan)}
.tu-nguoi{display:inline-flex;align-items:center;gap:8px}
.tu-bang td:first-child{white-space:nowrap}

/* ---------- thẻ Tạm ứng trong "Thu nhập" (viectoi.js) ---------- */
.vt-tu-the{padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px}
.vt-tu-dau{justify-content:space-between;margin:0}
.vt-tu-dau .nut{min-height:44px}
.vt-tu-ten{margin:0;font-size:15px}
.vt-tu-han{display:flex;flex-direction:column;gap:2px}
.vt-tu-han b{font-size:19px;font-variant-numeric:tabular-nums}
.vt-tu-han span{font-size:12px;color:var(--chu3)}
.vt-tu-dan{color:var(--chu3);font-size:12.5px;margin:0}
.vt-tu-cho{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.vt-tu-dong{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--chim);
  border-radius:10px;padding:8px 10px;font-size:13px}
.vt-tu-dong .nut{min-height:44px}

@media (max-width:560px){
  .tu-ds-the{grid-template-columns:1fr}
  .bl-buoc{min-width:88px}
  .cl-thanh{margin-top:-70px}
}

/* ===== TU-CL-web-sua ===== */
/* Một nút đậm theo bước · một nguồn dải bước · thẻ gọn ≤760px · ô số 2–3 cột · điều kiện
   chi tiền mặt. Chỉ token màu, không mã hex. (dsh, 28/09/2026) */

/* Hàng nút hành động dồn về GÓC PHẢI đầu màn; hàng nút của bảng không xuống dòng hai. */
.bl-nut-dau{justify-content:flex-end}
.bl-hang-nut{flex-wrap:nowrap}
/* Tab đang mở là TAB, không phải nút đậm của bước — làm nhạt để màn chỉ còn MỘT nút đậm. */
.bl-dai-tab .nut.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}

/* THẺ GỌN: một hàng mỗi người — ảnh · tên/vị trí · thực lĩnh (đậm, phải) · một chip. */
.bl-the,.cl-the{display:flex;align-items:center;gap:10px;width:100%;box-sizing:border-box;
  background:var(--the);border:0;border-radius:12px;padding:8px 12px;height:64px;
  cursor:pointer;text-align:left;color:inherit;font:inherit;overflow:hidden}
.bl-the .avatar-pt,.cl-the .avatar-pt{flex:none}
.bl-the-than{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;line-height:1.25}
.bl-the-than b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-the .bl-the-tien,.cl-the .bl-the-tien{margin-left:auto;font-size:14px}
.bl-the .chip,.cl-the .chip{flex:none}
.cl-the .cl-o-chon{flex:none;width:22px;height:22px;min-height:22px;margin:0}
.bl-ds-the,.cl-ds-the{display:none;flex-direction:column;gap:8px;margin-bottom:10px}

/* ≤760px: ẩn bảng người, hiện thẻ gọn; ô số 2–3 cột, số 20px. */
@media (max-width:760px){
  .bl-bang{display:none}
  .bl-ds-the{display:flex}
  .cl-bang-vung{display:none}
  .cl-ds-the{display:flex;padding-bottom:78px}
  .bl-dai-tt .dai-so{grid-template-columns:repeat(3,minmax(0,1fr))}
  .tu-so-dai .dai-so{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cl-so .dai-so{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-dai-tt .the.so .n,.tu-so-dai .the.so .n,.cl-so .the.so .n{font-size:20px}
  .bl-dai-tt .the.so .l,.tu-so-dai .the.so .l,.cl-so .the.so .l{font-size:12px}
  .bl-the,.cl-the{height:auto;min-height:56px;max-height:72px}
}

/* ===== QC-1 quy chế & lương — tab "Quy chế & thu nhập", hồ sơ Lương, vị trí quy chế =====
   (dsh, 2026-09-25) Ba việc: (①) ô số tiền đầu màn Bảng lương không rớt "₫" xuống dòng hai;
   (②) hàng nút hành động cuối khối không chật ở 390px; (③) khối mới của tab Quy chế & thu
   nhập và mục Lương trong hồ sơ nhân sự. Lớp mới tiền tố `qc-`, `vt-qc-`, `sop-vt-`, `ns-luong-`. */

/* ① Số tiền là MỘT khối: "1.234.567 ₫" phải nằm cùng hàng dù ô hẹp. */
.bl-o-so .n{white-space:nowrap}
/* ② Hàng nút cuối khối trên điện thoại: xếp 2 cột cho dễ chạm; hàng trong bảng cuộn ngang
   trong khung chứ không ép chữ xuống dòng. */
@media (max-width:760px){
  .bl-o-so .n{font-size:clamp(15px,5.4vw,20px)}
  .bl-nut-dau{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .bl-nut-dau .nut{width:100%;min-height:44px}
  .bl-hang-nut{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}
}

/* ③ Khối của tab Quy chế & thu nhập. */
.vt-qc-the{padding:16px 18px;margin-bottom:14px}
.vt-qc-dau{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.vt-qc-dau h3{margin:0;font-size:15px}
.vt-qc-luong{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.vt-qc-luong b{font-size:24px}
.vt-qc-phu-dong{display:flex;align-items:baseline;gap:10px;padding:4px 0;font-size:13.5px}
.vt-qc-phu-dong b{margin-left:auto;white-space:nowrap}
.vt-qc-qc{border-top:1px solid var(--vien);padding:12px 0}
.vt-qc-qc:first-of-type{border-top:0}
.vt-qc-qc-dau{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vt-qc-thay{color:var(--canh);font-size:12.5px;margin:6px 0}
.vt-qc-noi-dung{margin:8px 0}
.vt-qc-buoc{display:flex;gap:10px;padding:5px 0;font-size:13.5px}
.vt-qc-so{flex:none;width:24px;height:24px;border-radius:50%;background:var(--chim);
  display:grid;place-items:center;font-size:12px;font-weight:600}

/* ③b Ô chọn nhiều vị trí cho quy chế lương thưởng (sop.js). */
.sop-vt-chon{margin-top:8px;padding-top:8px;border-top:1px dashed var(--vien)}
.sop-vt-ds{display:flex;flex-wrap:wrap;gap:8px 16px;margin:6px 0}
.sop-vt-o{display:inline-flex;align-items:center;gap:6px;font-size:13px;min-height:44px}

/* ③c Mục Lương trong hồ sơ nhân sự (nhansu.js). */
.ns-luong-dau{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ns-luong-dau b{font-size:22px}
.ns-luong-bang td,.ns-luong-bang th{white-space:nowrap}
.ns-luong-ly{white-space:normal;min-width:160px}
.ns-luong-phu{display:flex;align-items:baseline;gap:10px;padding:3px 0}

/* ④ KPI trong hộp chi tiết lương (luong.js). */
.bl-kpi .bl-nhom-ten{color:var(--nhan)}
.bl-vuot-tran{margin-bottom:10px}

/* ===== SUA1-web =====
   Tràn ngang ở 390px (ảnh iPhone chủ dự án): Safari mở rộng khung trang theo phần tử tràn nên
   cả trang bị thu nhỏ, lề phải trống. Ba gốc tràn: hàng tab hồ sơ, dải trạng thái hợp đồng và
   băng chuyền thẻ phương án. Luật thiết kế cũng cấm chữ in hoa toàn bộ. (dsh, 2026-10-01) */

/* Nhãn thẻ phương án và chip "tổ hợp từ lựa chọn từng vấn đề" đọc như câu, không in hoa toàn bộ;
   tiêu đề cột bảng báo giá cũng vậy — `.pa-ma` là cha của chip nên gỡ ở đây là gỡ luôn cho chip. */
.pa-ma{text-transform:none}
.chip.bn{text-transform:none}
.bang-bao-gia th{text-transform:none}

/* Cột Nhân sự bảng Sổ ứng (tamung.js): đủ rộng cho họ tên, tên tối đa hai dòng; mã phiếu
   không xuống hàng. */
.tu-bang th:nth-child(2),.tu-bang td:nth-child(2){min-width:200px}
.tu-bang .tu-ten{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tu-bang td:first-child{white-space:nowrap}

/* Khối soạn/xem ĐIỀU KHOẢN của "Quy chế lương thưởng" (sop.js). Tiền tố `.qcdk-` RIÊNG, không
   dùng lại `.dk-dong`/`.dk-xem` của tab Hợp đồng (đã có ở trên) — định nghĩa đè lên hai lớp ấy
   làm vỡ camket.js/benhan.js/lichtien.js (kiểm toán V11, dsh 2026-10-01). */
.qcdk-ds{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.qcdk-dong{border:1px solid var(--vien);border-radius:12px;padding:10px 12px;background:var(--the);
  display:flex;flex-direction:column;gap:6px}
.qcdk-dau{display:flex;align-items:center;gap:6px}
.qcdk-so{font-weight:700;font-size:13px;margin-right:auto}
.qcdk-ten{font-weight:600}
.qcdk-noidung{min-height:52px;resize:vertical}
.qcdk-xem{padding:6px 0;font-size:13.5px;line-height:1.5}
.qcdk-xem b{font-weight:700}

@media (max-width:760px){
  /* Lưới an toàn ở gốc: cắt tràn ngang thay vì để Safari nới rộng cả trang. `clip` không tạo
     khung cuộn nên `position:sticky` của hàng tab vẫn chạy. */
  html,body{overflow-x:clip}
  /* Hàng tab hồ sơ: một dải cuộn riêng, chặn tràn ngược, chừa lề trái bằng nút ☰ cố định
     (8px lề + 34px nút + 4px khe) để nút không đè lên tab đầu. */
  .tab-ba{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;padding-left:46px}
  .tab-ba .nut{flex:none}
  /* Dải trạng thái hợp đồng xuống dòng thay vì bị cắt mất chữ. */
  .kh-chang{flex-wrap:wrap;width:auto;overflow-x:visible;white-space:normal}
  .kh-chang .kc{white-space:normal}
  /* Băng chuyền thẻ phương án: khung cuộn riêng, níu từng thẻ ở mép trái. */
  .luoi-pa{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory}
  .cot-pa{scroll-snap-align:start}
  /* Số tiền trong dải "Khách chọn … còn nợ" giữ ký hiệu ₫ trên một hàng. */
  .kh-chon .mono,.kh-chon .no{white-space:nowrap}
}

/* ===== Nhân sự của tôi · sửa khung lịch trình (dsh, 23/09/2026) ===== */
/* 390px (Fable đo): thẻ buổi `.kh-lt > .kh-buoi` rộng 471px trong khung 338px — con flex/grid
   mặc định `min-width:auto` bị BẢNG bên trong ép phình, rồi `overflow-x:clip` cắt mất ~107px
   bên phải. Cho thẻ co được; bảng `.bang.dinh` nằm trong khung `.bang-cuon` (`chung.js ›
   bangDl`) tự cuộn ngang nên không còn tràn. */
.kh-lt > .kh-buoi{min-width:0;max-width:100%}
/* Màn "Nhân sự của tôi": dải tab cuộn NGANG trong khung dưới 760px (`.tab-ba`), không tràn trang. */
.nsct-dai-tab{margin-top:14px}

/* ===== LÀN-HRM (đêm 23/09 — làm lại UI HRM; chỉ nối SAU mốc này, TRƯỚC mốc LÀN-SAAS) ===== */

/* ---------- HRM-UI-1 (dsh, 23/09/2026): Tạm ứng · Phiếu lương · Chi lương ----------
   Làm lại theo luật 8 (chữ ít) · luật 2 (ba tầng nhìn) · luật 3 (một nút đậm) và khuôn
   Stitch đã duyệt (`docs/ra-ux/stitch-hrm`). Lớp mới tiền tố `hru-`; màu chỉ qua token. */

/* Tạm ứng — thẻ số "Chờ duyệt" nền hổ phách nhạt (bọc `.hru-canh`, `display:contents` để
   thẻ vẫn là con trực tiếp của lưới `.dai-so`). */
.hru-canh{display:contents}
.hru-canh > .the.so{background:var(--canh-nhat)}

/* Tạm ứng — lưới thẻ "Chờ duyệt": ảnh + tên/vị trí · số xin ứng lớn · lý do · thanh hạn mức
   · dòng cảnh báo hổ phách · hai nút viền. */
.hru-luoi-the{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.hru-the{padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.hru-the-dau{display:flex;align-items:center;gap:9px}
.hru-the-ten{display:flex;flex-direction:column;line-height:1.25}
.hru-vt{font-size:11.5px;color:var(--chu3)}
.hru-tien{font-family:"IBM Plex Mono",monospace;font-size:22px;font-weight:700;
  font-variant-numeric:tabular-nums}
.hru-ly{font-size:13px;color:var(--chu2)}
.hru-han{display:flex;flex-direction:column;gap:5px}
.hru-han-nen{height:7px;border-radius:6px;background:var(--chim);overflow:hidden}
.hru-han-day{height:100%;background:var(--nhan);border-radius:6px}
.hru-han-cau{font-size:11.5px;color:var(--chu3);font-variant-numeric:tabular-nums}
.hru-canh-bao{font-size:12px;font-weight:600;color:var(--canh);background:var(--canh-nhat);
  border-radius:8px;padding:5px 8px}
.hru-the-nut{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.hru-the-nut .nut{min-height:44px}
.hru-duyet{border-color:var(--nhan);color:var(--nhan)}
.hru-bang td:first-child{white-space:nowrap}
.hru-bang td:nth-child(2){min-width:200px}
.hru-ten{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Phiếu lương chi tiết — thẻ thực lĩnh lớn · hai bảng khoản · hàng nút. */
.hru-phieu{min-width:min(560px,86vw)}
.hru-thuc-linh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  background:var(--nhan-nhat);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.hru-thuc-linh .l{font-size:12.5px;color:var(--chu2)}
.hru-thuc-linh .n{font-family:"IBM Plex Mono",monospace;font-size:28px;font-weight:800;
  font-variant-numeric:tabular-nums;color:var(--nhan)}
.hru-khoan-ten{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--chu3);margin:12px 0 6px}
.hru-nut-hang{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:14px}
.hru-nut-hang .nut{min-height:44px}

/* 390px: lưới thẻ xuống MỘT cột; bảng nhiều cột vẫn cuộn trong `.bang-cuon`; nút đủ 44px. */
@media (max-width:560px){
  .hru-luoi-the{grid-template-columns:1fr}
  .hru-phieu{min-width:0}
  .hru-thuc-linh{flex-direction:column;align-items:flex-start;gap:4px}
  .hru-nut-hang .nut{flex:1}
  .hru-the-nut .nut{flex:1}
}

/* ---------- HRM-UI-2 (dsh, 23/09/2026) — KPI chu kỳ · Nhân sự & vị trí · Thu nhập của tôi ----------
   Làm lại theo luật 8 (chữ ít) · luật 2 (ba tầng nhìn) và khuôn Stitch 5–8. Lớp mới tiền tố
   `hru2-`; màu chỉ qua token, không mã hex. Bảng nhiều cột luôn nằm trong `.bang.bang-cuon`. */

/* KPI chu kỳ — khối việc làm; tiêu đề khối không in hoa, chú thích dài vào `title`. */
.hru2-khoi{padding:14px 16px;margin-bottom:14px}
.hru2-khoi-ten{margin:0 0 10px;font-size:15px;font-weight:650;display:flex;align-items:baseline;gap:6px}
.hru2-khoi-mo{font-size:12px;color:var(--chu3);font-weight:400;cursor:help}
.hru2-bang td:first-child{white-space:nowrap}
.hru2-bang td:nth-child(2){min-width:150px}
.hru2-dai-canh{margin:0 0 14px}
.hru2-nav .nut{min-height:44px}

/* Nhân sự & vị trí — người trong bảng nhóm: ảnh + tên + mã; chip vị trí; nút Hồ sơ đủ 44px. */
.hru2-nguoi{display:flex;align-items:center;gap:9px;min-width:0}
.hru2-hang-ten{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.hru2-ma{font-size:11.5px;color:var(--chu3)}
.hru2-vt{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.hru2-vt-chip{font-size:11.5px}
.hru2-nut-hs{min-height:44px}
.hru2-cchn.loi{color:var(--loi)}
.hru2-cchn.canh{color:var(--canh)}
.hru2-cchn.tot{color:var(--tot)}

/* Thu nhập của tôi — một cột; dòng khoản thoáng; nút đủ 44px. */
.hru2-thu-nhap{display:flex;flex-direction:column}
.hru2-thu-nhap .dai-so{margin-bottom:10px}
.hru2-thu-nhap .vt-pl-nhom,.hru2-thu-nhap .vt-pl-nhan{text-transform:none}
.hru2-thu-nhap .vt-pl-net{font-size:28px}
.hru2-thu-nhap .vt-pl-dong{padding:10px 0;font-size:15px}
.hru2-thu-nhap .vt-pl-khoi,.hru2-thu-nhap .vt-hh-dau,.hru2-thu-nhap .vt-tu-the{padding:14px 16px}
.hru2-thu-nhap .vt-pl-nut .nut,.hru2-thu-nhap .vt-tu-dau .nut{min-height:44px}

/* 390px: MỘT cột; bảng trong khung cuộn; vùng bấm ≥ 44px. (dsh, 23/09/2026 — HRM-UI-2) */
@media (max-width:560px){
  .hru2-thu-nhap .dai-so{grid-template-columns:1fr}
  .hru2-thu-nhap .vt-pl-dong{flex-wrap:wrap}
  .hru2-thu-nhap .vt-pl-nut{flex-direction:column;align-items:stretch}
  .hru2-thu-nhap .vt-pl-nut .nut{width:100%}
  .hru2-thu-nhap .vt-hh-vai{grid-template-columns:repeat(2,1fr)}
  .hru2-thu-nhap .vt-tu-dong{flex-wrap:wrap}
  .hru2-thu-nhap .vt-tu-dong .nut{flex:1;min-height:44px}
  .hru2-thu-nhap .vt-pl-dong,.hru2-thu-nhap .vt-tu-dong{min-height:44px}
}

/* ===== LÀN-SAAS (đêm 23/09 — trang chủ, đăng ký, khởi tạo, gói, nhà phát hành) ===== */

/* ---------- MÀN ĐĂNG NHẬP / ĐĂNG KÝ / DEMO / LỜI MỜI (web/dangnhap.js) ----------
   Nền navy đã có sẵn ở `.dn` (nhận diện VPSTTT: dấu tím gốc trên nền navy). Ở đây chỉ dựng
   phần thẻ trắng + các mảnh con; mọi màu đi qua biến, không hex. Vùng bấm ≥ 44px. */
.dn-quay-dev{position:fixed;top:14px;left:14px;z-index:30}
.dn-the{background:var(--the);border-radius:14px;padding:22px;max-width:420px;width:100%;
        box-shadow:var(--bong);display:flex;flex-direction:column;gap:12px}
.dn-the-rong{max-width:620px}
.dn-the .logo-d135{margin-bottom:2px}
.dn-tua{margin:0;font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--chu)}
.dn-dan{margin:0;color:var(--chu2);font-size:13.5px;line-height:1.5}
.dn-dan.dn-nho,.dn-chan.dn-nho{font-size:12px;color:var(--chu3)}
.dn-dang{margin:0;color:var(--chu3);font-size:14px}
.dn-chan{margin:2px 0 0;color:var(--chu2);font-size:13px;text-align:center}
.dn-truong{display:flex;flex-direction:column;gap:5px;min-width:0}
.dn-nhan{font-size:12.5px;font-weight:600;color:var(--chu2)}
.dn-sao{color:var(--loi)}
.dn-vao{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--vien);border-radius:8px;
        background:var(--the);color:var(--chu);font-size:14px}
.dn-vao:focus{outline:none;border-color:var(--nhan);box-shadow:0 0 0 3px var(--nhan-nhat)}
.dn-vao-boc{position:relative;display:flex}
.dn-vao-boc .dn-vao{padding-right:62px}
.dn-hien{position:absolute;right:4px;top:0;bottom:0;min-width:48px;min-height:44px;
         border:0;background:none;color:var(--nhan);font-size:12.5px;font-weight:600;cursor:pointer;padding:0}
.dn-hien:hover{text-decoration:underline}
.dn-loi{margin:0;color:var(--loi);font-size:12px}
.dn-bao-loi{background:var(--loi-nhat);color:var(--loi);border-radius:8px;padding:9px 11px;font-size:12.5px}
.dn-lk{border:0;background:none;color:var(--nhan);font-weight:600;font-size:13px;cursor:pointer;
       min-height:44px;display:inline-flex;align-items:center;padding:0 2px;text-decoration:none}
.dn-lk:hover{text-decoration:underline}
.dn-hang{display:flex;justify-content:flex-end;margin-top:-4px}
.dn-nut-chinh{min-height:46px;border:0;border-radius:8px;background:var(--nhan);color:#fff;
              font-weight:700;font-size:14.5px;cursor:pointer;padding:10px 14px;transition:.12s}
.dn-nut-chinh:hover{filter:brightness(1.07)}
.dn-nut-vien{min-height:46px;border:1px solid var(--nhan);border-radius:8px;background:var(--the);
             color:var(--nhan);font-weight:600;font-size:14px;cursor:pointer;padding:10px 14px;
             display:flex;align-items:center;justify-content:center;gap:8px;transition:.12s}
.dn-nut-vien:hover{background:var(--nhan-nhat)}
.dn-nut-rong{width:100%;justify-content:center;margin-top:6px}
.dn-g{display:inline-flex;color:var(--chu2)}
.dn-hoac{display:flex;align-items:center;gap:10px;color:var(--chu3);font-size:12px}
.dn-hoac::before,.dn-hoac::after{content:'';flex:1;height:1px;background:var(--vien)}
.dn-quen{padding:10px 12px;background:var(--chim);border-radius:8px}
.dn-tab-dai{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:6px}
.dn-tab{min-height:44px;padding:8px 12px;border:0;border-radius:8px;background:none;color:var(--chu2);
        font-size:12.5px;font-weight:600;cursor:pointer}
.dn-tab.chon{background:var(--nhan-nhat);color:var(--nhan)}
.dn-tab:hover{color:var(--nhan)}

/* thẻ hổ phách quá số thiết bị / chọn phòng khám */
.dn-canh-bao{background:var(--canh-nhat);border-radius:12px;padding:14px;display:flex;
             flex-direction:column;gap:8px;margin-top:2px}
.dn-canh-nhan{background:var(--nhan-nhat)}
.dn-canh-tua{margin:0;font-size:13.5px;font-weight:700;color:var(--canh)}
.dn-canh-nhan .dn-canh-tua{color:var(--nhan)}
.dn-canh-mo{margin:0;font-size:12px;color:var(--chu2)}
.dn-ds-may{display:flex;flex-direction:column;gap:6px}
.dn-may{display:flex;align-items:center;gap:10px;min-height:52px;background:var(--the);
        border:1px solid var(--vien);border-radius:10px;padding:8px 10px;cursor:pointer}
.dn-may:hover{border-color:var(--nhan)}
.dn-radio{flex:none;width:20px;height:20px;accent-color:var(--nhan)}
.dn-may-hinh{flex:none;color:var(--chu3);font-size:18px;line-height:1}
.dn-may-ten{min-width:0}
.dn-may-ten b{display:block;font-size:13px;color:var(--chu);font-weight:600}
.dn-may-ten small{display:block;font-size:11px;color:var(--chu3)}

/* demo */
.dn-dai-demo{background:var(--canh-nhat);color:var(--canh);border-radius:8px;padding:7px 10px;
             font-size:12px;font-weight:600}
.dn-nhom-demo{margin-top:10px}
.dn-ten-nhom{font-size:11px;letter-spacing:.05em;color:var(--chu3);margin-bottom:5px}
.dn-ghe-demo{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px}
.dn-ghe-o{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
          min-height:52px;border:1px solid var(--vien);border-radius:10px;background:var(--the);
          padding:8px 10px;cursor:pointer;transition:.12s}
.dn-ghe-o:hover{border-color:var(--nhan);background:var(--nhan-nhat)}
.dn-ghe-o b{font-size:12.5px}
.dn-ghe-o small{font-size:11px;color:var(--chu3)}

/* đăng ký: 2 cột desktop → 1 cột mobile */
.dn-luoi{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.dn-quy-mo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dn-quy-o{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;
          min-height:74px;border:1px solid var(--vien);border-radius:12px;padding:9px 6px;cursor:pointer;
          background:var(--the)}
.dn-quy-o.chon{border-color:var(--nhan);background:var(--nhan-nhat)}
.dn-quy-o .dn-radio{display:none}
.dn-quy-o b{font-size:12.5px;color:var(--chu)}
.dn-quy-o.chon b{color:var(--nhan)}
.dn-quy-o small{font-size:11px;color:var(--chu3)}
.dn-dong-y{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--chu2)}
.dn-dong-y input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--nhan)}
.dn-bot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

@media (max-width:560px){
  .dn{padding:14px}
  .dn-the{padding:18px 16px;max-width:100%}
  .dn-luoi{grid-template-columns:1fr}
  .dn-quy-mo{grid-template-columns:1fr}
  .dn-quy-o{min-height:56px;flex-direction:row;justify-content:space-between;padding:10px 12px;text-align:left}
  .dn-quy-o small{margin-left:auto}
  .dn-tua{font-size:19px}
}

/* ---------- MÀN ĐĂNG KÝ: HAI CỘT Ở DESKTOP (khuôn 3.html) ----------
   Trước đây màn đăng ký chỉ một cột dọc. Chủ dự án chốt lấy khuôn 3.html: trái nền tím nhạt
   mang dấu hiệu + bốn bước, phải là biểu mẫu. `.dn-dk` phủ lên `.dn-the` (bỏ lề/căn giữa của
   thẻ) để cột trái chạm mép thẻ; dưới 900px xếp dọc, dải tím nằm trên biểu mẫu. (dsh, 23/09/2026) */
.dn-dk{display:grid;grid-template-columns:1fr;gap:0;padding:0;max-width:620px;overflow:hidden}
.dn-dk-trai{display:flex;flex-direction:column;gap:12px;background:var(--nhan-nhat);padding:22px 20px}
.dn-dk-tua{margin:0;font-size:16px;font-weight:700;line-height:1.35;color:var(--chu)}
.dn-dk-buoc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.dn-dk-buoc-o{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--chu2);line-height:1.45}
.dn-dk-so{flex:none;width:26px;height:26px;border-radius:50%;background:var(--nhan);color:var(--the);
          font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;display:flex;
          align-items:center;justify-content:center;margin-top:1px}
.dn-dk-ghi{background:var(--the);border:1px solid rgba(108,66,236,.12);border-radius:12px;
           padding:12px 14px;font-size:12.5px;color:var(--chu2)}
.dn-dk-ghi b{color:var(--chu)}
.dn-dk-phai{display:flex;flex-direction:column;gap:12px;padding:22px}
@media (min-width:900px){
  .dn-dk{grid-template-columns:minmax(280px,340px) 1fr;max-width:900px}
  .dn-dk-trai{padding:30px 26px}
  .dn-dk-phai{padding:30px;justify-content:center}
  .dn-dk-tua{font-size:18px}
}

/* ===== LÀN-FIX (đêm 23/09 — hoàn thiện tính năng cũ) ===== */

/* ===== dsh 29/09/2026 — đầu cột lưới lịch: TÊN luôn đọc được =====
   Đo được trên cột hẹp 126px: hàng tên còn ~0px vì `.cum-mat` là `flex:none` (không co) còn
   `.dau-ten` bị ép `min-width:0`, trong khi chip nguồn + chip hạng ghế vẫn chiếm chỗ. Kết quả:
   mười hai cột đều chỉ còn "BS. …", không biết cột nào của ai. Sửa ở đây thay vì sửa luật cũ
   để không phá phép thử v1.98 đang khoá nguyên văn `.cum-mat{flex:none;min-width:auto}`:
   giữ một bề ngang TỐI THIỂU cho khối chữ (tên cắt bằng "…"), và cho chip co được/ẩn đuôi
   trước khi tên biến mất — TÊN quan trọng hơn nhãn nguồn. */
.lich-dau-cot .ten .dau-ten{flex:1 1 auto;min-width:64px}
.lich-dau-cot .ten .dau-ten > b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lich-dau-cot .ten .chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* ===== LÀN-SAAS — Khởi tạo · Gói & thanh toán · Tài khoản (dsh, 23/09/2026) ===== */

/* --- Khởi tạo phòng khám: đầu mỏng, thanh 6 bước, hai cột thân, chân dính --- */
.kt-man{display:flex;flex-direction:column;gap:16px}
.kt-dau{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--the);border-radius:12px;padding:10px 14px}
.kt-dau-trai{display:flex;align-items:center;gap:12px;min-width:0}
.kt-dau-pk{background:var(--nhan-nhat);color:var(--nhan);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kt-thanh-buoc{display:flex;gap:8px;overflow-x:auto;padding:12px;background:var(--the);border-radius:12px;overscroll-behavior-x:contain}
.kt-buoc-o{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:76px;text-align:center}
.kt-buoc-so{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--chim);color:var(--chu3)}
.kt-buoc-o.kt-xong .kt-buoc-so{background:var(--ok-nen);color:var(--tot)}
.kt-buoc-o.kt-dang .kt-buoc-so{background:var(--nhan);color:var(--the)}
.kt-buoc-ten{font-size:11.5px;color:var(--chu2)}
.kt-buoc-o.kt-dang .kt-buoc-ten{color:var(--nhan);font-weight:700}
.kt-buoc-o.kt-bo .kt-buoc-ten{color:var(--chu3)}
.kt-buoc-o.kt-bo small{font-size:10.5px;color:var(--chu3)}
.kt-than{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}
.kt-buoc-than{background:var(--the);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}
.kt-buoc-than h3{margin:0;font-size:16px}
.kt-dung-san{background:var(--nhan-nhat);border-radius:12px;padding:16px;position:sticky;top:12px}
.kt-dung-san b{display:block;color:var(--nhan);margin-bottom:8px}
.kt-dung-san ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--chu2)}
.kt-dung-san small{display:block;margin-top:10px;color:var(--chu3)}
.kt-tich{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.kt-tich-o{display:flex;align-items:center;gap:8px;background:var(--chim);border-radius:8px;padding:10px;font-size:13px;min-height:44px}
.kt-tich-o input{width:18px;height:18px;accent-color:var(--nhan);flex:none}
.kt-tich-o small{color:var(--chu3);font-size:11px;margin-left:auto}
.kt-ghe-ds{display:flex;flex-direction:column;gap:8px}
.kt-ghe-hang{display:flex;align-items:center;gap:8px}
.kt-ghe-hang input{flex:1;min-width:0}
.kt-ghe-so{width:34px;color:var(--chu3);font-size:12px;flex:none}
.kt-kq{display:flex;flex-direction:column;gap:6px;background:var(--chim);border-radius:8px;padding:10px}
.kt-kq b{font-size:12.5px;color:var(--chu2)}
.kt-kq-dong{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px}
.kt-kq-ten{font-weight:600;min-width:90px}
.kt-kq-link{flex:1;min-width:160px;font-family:'IBM Plex Mono',monospace;font-size:12px}
.kt-kq-dong.kt-loi{color:var(--loi)}
.kt-moi-bang .bang{margin:0}
.kt-chan{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--the);border-radius:12px;padding:10px 14px;box-shadow:var(--bong)}

/* --- Gói & thanh toán --- */
.goi-than{display:flex;flex-direction:column;gap:16px}
.goi-dai{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.goi-beta{background:var(--nhan-nhat);color:var(--nhan);border-radius:12px;padding:10px 14px;font-weight:600;font-size:13px}
.goi-canh{font-weight:600}
.goi-gia{display:flex;flex-direction:column;gap:12px}
.goi-gia-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.goi-gia-than{display:flex;flex-direction:column;gap:8px;background:var(--chim);border-radius:12px;padding:14px}
.goi-dem{display:inline-flex;align-items:center;gap:8px}
.goi-dem-so{min-width:56px;text-align:center;font-size:16px;font-weight:800;font-family:'IBM Plex Mono',monospace}
.goi-tinh{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--vien);padding-top:10px}
.goi-tinh-dong{display:flex;align-items:baseline;gap:8px;justify-content:space-between;font-size:13px;flex-wrap:wrap}
.goi-tra{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--chim);border-radius:12px;padding:16px}
.goi-qr{width:200px;height:200px;background:var(--the);border-radius:12px;padding:8px;display:flex;align-items:center;justify-content:center}
.goi-qr-anh{width:100%;height:100%;object-fit:contain}
.goi-qr-trong{font-size:12.5px;color:var(--canh);text-align:center;padding:10px}
.goi-ngan-hang{text-align:center;font-size:12.5px;color:var(--chu2);display:flex;flex-direction:column;gap:2px}
.goi-noi-dung-hop{display:flex;align-items:center;gap:8px;background:var(--the);border-radius:8px;padding:8px;width:100%;flex-wrap:wrap}
.goi-noi-dung-nhan{font-size:10px;color:var(--chu3);text-transform:uppercase}
.goi-noi-dung{flex:1;min-width:140px;font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--nhan);border:0;background:transparent}
.goi-hd h3{margin:0 0 10px}
.goi-chan{font-size:12px}

/* --- Tài khoản của tôi · Tài khoản nhân viên --- */
.tk-than,.tknv-than{display:flex;flex-direction:column;gap:16px}
.tk-thiet-bi h3,.tk-doi h3,.tknv-bang h3{margin:0 0 8px}
.tknv-gia{display:flex;flex-direction:column;gap:10px}
.tknv-gia-the{display:flex;flex-direction:column;gap:8px}
.tknv-gia-dong{display:flex;justify-content:space-between;gap:12px;font-size:13px}
.tknv-gia-dong.kt-tong{border-top:1px solid var(--vien);padding-top:8px;font-size:15px}

@media (max-width:820px){
  .kt-than{grid-template-columns:1fr}
  .kt-dung-san{position:static}
  .kt-chan{flex-wrap:wrap}
  .goi-qr{width:100%;max-width:220px;height:auto;aspect-ratio:1/1}
}
@media (max-width:560px){
  .kt-dau{flex-direction:column;align-items:flex-start}
  .kt-kq-link{min-width:0;width:100%}
  .goi-tinh-dong{flex-direction:column;align-items:flex-start}
  .tknv-gia-dong{flex-direction:column;gap:2px}
}

/* ===== dsh 30/09/2026 — CRUD danh mục phòng khám (dịch vụ · ghế · kho · xưởng · NCC) =====
   Bảng danh mục nay có cột nút hành động. Giữ hai nút trên MỘT hàng (bảng đã cuộn ngang
   trong `.bang-cuon`), không cho nhãn "Ngưng dùng" xuống dòng ở 390px. Màu đi qua biến,
   không mã cứng. */
.dm-thao-tac{gap:6px;flex-wrap:nowrap}
.dm-thao-tac .nut{white-space:nowrap}

/* ===== LÀN-SAAS — Nhà phát hành (SA): tổng quan · phòng khám · hoá đơn · khách tiềm năng
   (dsh, 30/09/2026). Lớp tiền tố `nph-`, màu qua biến, không mã hex. Ngăn kéo 420px, mobile
   toàn màn; cột mảnh 30 ngày vẽ bằng CSS thuần. ===== */
.nph-man{display:flex;flex-direction:column;gap:16px}
.nph-man > .dai-so{margin-bottom:0}
.nph-than-tab{display:block}

/* --- Tổng quan --- */
.nph-2cot{display:grid;grid-template-columns:3fr 2fr;gap:16px;align-items:start}
.nph-khoi{padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.nph-khoi-dau{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.nph-khoi-dau h3{margin:0;font-size:15px}
.nph-khoi-dau p{margin:2px 0 0;font-size:12px}
.nph-pheu{display:flex;flex-direction:column;gap:12px}
.nph-pheu-nhan{display:flex;justify-content:space-between;gap:8px;font-size:12px;margin-bottom:5px}
.nph-pheu-bar{height:14px;background:var(--chim);border-radius:20px;overflow:hidden}
.nph-pheu-fill{height:100%;background:var(--nhan);border-radius:20px;transition:width .2s}
.nph-cot-wrap{display:flex;align-items:flex-end;gap:2px;height:148px;padding:4px 2px 0}
.nph-cot{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0}
.nph-cot-fill{width:100%;min-height:2px;background:var(--nhan-nhat);border-radius:2px 2px 0 0}
.nph-cot-moi .nph-cot-fill{background:var(--nhan)}

/* --- Dải việc cần xử lý --- */
.nph-viec{background:var(--canh-nhat);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}
.nph-viec-dau{display:flex;align-items:center;gap:8px;color:var(--canh)}
.nph-viec-than{background:var(--the);border-radius:8px;overflow:hidden}
.nph-viec-dong{display:flex;align-items:center;gap:10px;padding:10px 12px}
.nph-viec-dong + .nph-viec-dong{border-top:1px solid var(--vien)}
.nph-cham{width:8px;height:8px;border-radius:50%;background:var(--canh);flex:none}
.nph-viec-chu{flex:1;min-width:0;font-size:13px;color:var(--chu)}
.nph-viec .nph-viec-nut{flex:none;border:0;background:none;color:var(--nhan);font-weight:700}

/* --- Ngăn kéo chi tiết phòng khám --- */
.nph-nk{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:100%;background:var(--the);
        box-shadow:var(--bong);z-index:60;display:flex;flex-direction:column}
.nph-nk-dau{display:flex;align-items:center;justify-content:space-between;gap:8px;
            padding:12px 14px;border-bottom:1px solid var(--vien)}
.nph-nk-hop{padding:14px;overflow:auto;flex:1;min-height:0}
.nph-nk-than{display:flex;flex-direction:column;gap:14px}
.nph-nk-khoi{background:var(--chim);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.nph-nk-khoi h3{margin:0;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--chu3)}
.nph-nk-luoi{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nph-nk-o span{display:block;font-size:11px;color:var(--chu3)}
.nph-nk-o b{font-size:13px;overflow-wrap:anywhere}
.nph-nk-giay{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid var(--vien);
             padding-top:8px;font-size:12px}
.nph-ghi-chu{width:100%;box-sizing:border-box;border:1px solid var(--vien);border-radius:8px;
             padding:8px;font-size:13px;background:var(--the);color:var(--chu);resize:vertical;font-family:inherit}
.nph-nk-hang{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.nph-nk-nut{display:flex;flex-direction:column;gap:8px}
.nph-lien-ket{flex:1;min-width:0;border:1px solid var(--vien);border-radius:8px;padding:8px;background:var(--the)}
.nph-nhac{background:var(--canh-nhat);color:var(--canh);border-radius:8px;padding:9px 11px;
          font-size:12.5px;font-weight:600;margin:0 0 8px}
.nph-bang-hop{min-width:0}

@media (max-width:820px){
  .nph-2cot{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nph-nk{width:100%}
  .nph-nk-luoi{grid-template-columns:1fr}
}

/* ===== LÀN-FIX (dsh, 01/10/2026) — hộp có biểu mẫu đã gõ thì bấm nền không đóng =====
   Dòng nhắc + rung nhẹ giữ chỗ cho `confirm()` của trình duyệt: nền không đóng khi người
   dùng đã gõ, nhưng phải NÓI RA đường thoát thay vì im lặng. Màu đi qua biến, không mã cứng. */
.hop .hop-nhac{display:none;margin:10px 0 0;font-size:12.5px;color:var(--canh)}
.hop .hop-nhac.hien{display:block}
.hop.rung{animation:hop-rung .4s}
@keyframes hop-rung{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}

/* ===== Gói: chọn trả tháng / trả năm (24/09/2026) ===== */
.goi-ky-hop { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--nen2, rgba(0,0,0,.05)); }
.goi-ky { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; color: var(--chu2); cursor: pointer; }
.goi-ky.dang { background: var(--the); color: var(--nhan); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* ===== Khung phòng khám chưa xác minh (24/09/2026) ===== */
.xm-khung { min-height: 100vh; background: var(--nen); }
.xm-khung-dau { display: flex; align-items: center; gap: 12px; padding: 14px 16px; max-width: 760px; margin: 0 auto; }
.xm-khung-dau .chu3 { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xm-khung-than { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }

/* ===== LÀN-XAC-MINH (dsh, 24/09/2026) — màn nộp giấy tờ & chờ xác minh =====
   Mobile-first 390px: hai ô tải ảnh xếp DỌC trên điện thoại (ô lớn, dễ chạm), hai cột trên máy
   rộng. Màu đi qua biến, không mã cứng. */
.xm-than{max-width:640px}
.xm-ly{background:var(--nhan-nhat);color:var(--chu);border-radius:12px;padding:12px 14px;
       font-size:13.5px;line-height:1.5;margin:0 0 16px}
.xm-luoi{display:grid;grid-template-columns:1fr;gap:12px}
.xm-o{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:6px;text-align:center;border:1.5px dashed var(--vien);border-radius:14px;padding:22px 14px;
      background:var(--the);cursor:pointer;min-height:150px;overflow:hidden}
.xm-o:hover{border-color:var(--nhan);background:var(--nhan-nhat)}
.xm-o-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
          background:var(--nhan-nhat);color:var(--nhan);font-size:24px;font-weight:700}
.xm-o b{font-size:13.5px;color:var(--chu)}
.xm-o small{font-size:12px;color:var(--chu3);line-height:1.4}
.xm-nhap{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.xm-xem{max-width:100%}
.xm-anh{max-width:100%;max-height:220px;border-radius:10px;margin-top:8px;display:block}
.xm-loi{color:var(--loi);font-size:12.5px;margin-top:6px}
.xm-sua{background:var(--loi-nhat);border-radius:12px;padding:12px 14px;margin:0 0 16px;
        font-size:13px;color:var(--chu);line-height:1.5}
.xm-ds-loi,.xm-ds-canh{margin:6px 0 0;padding-left:18px}
.xm-ds-loi li{color:var(--loi);font-size:13px;margin:4px 0}
.xm-ds-canh li{color:var(--canh);font-size:13px;margin:4px 0}
.xm-nhac{font-size:12.5px;color:var(--chu3);margin:12px 0;line-height:1.45}
.xm-gui{width:100%;padding:13px;font-size:15px}
.xm-gui-lai{margin-top:4px}

/* Danh sách tiến độ 7 mục */
.xm-buoc-ds{display:flex;flex-direction:column;gap:8px}
.xm-buoc{display:flex;gap:12px;align-items:flex-start;background:var(--the);
         border:1px solid var(--vien);border-radius:12px;padding:12px 14px}
.xm-buoc-ico{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
             font-weight:700;font-size:14px;background:var(--chim);color:var(--chu3)}
.xm-tt-dat .xm-buoc-ico{background:var(--tot-nhat);color:var(--tot)}
.xm-tt-canh_bao .xm-buoc-ico{background:var(--canh-nhat);color:var(--canh)}
.xm-tt-khong_dat .xm-buoc-ico{background:var(--loi-nhat);color:var(--loi)}
.xm-tt-cho .xm-buoc-ico{background:var(--chim);color:var(--chu3)}
.xm-tt-dang .xm-buoc-ico{background:var(--nhan-nhat);color:var(--nhan)}
.xm-buoc-than{min-width:0}
.xm-buoc-than b{font-size:13.5px}
.xm-buoc-chu{font-size:12.5px;color:var(--chu2);margin-top:3px;line-height:1.45}
.xm-quay{width:14px;height:14px;border-radius:50%;border:2px solid var(--nhan-nhat);
         border-top-color:var(--nhan);animation:xm-quay .8s linear infinite;display:block}
@keyframes xm-quay{to{transform:rotate(360deg)}}
.xm-cho{font-size:12.5px;color:var(--chu3);margin:12px 0 0}

/* Đã duyệt */
.xm-xong{text-align:center}
.xm-dau-vuong{width:72px;height:72px;border-radius:50%;background:var(--tot-nhat);color:var(--tot);
              font-size:38px;font-weight:700;display:grid;place-items:center;margin:8px auto 14px}
.xm-tua{font-size:20px;margin:0 0 18px}
.xm-tom-tat{text-align:left;background:var(--the);border:1px solid var(--vien);border-radius:12px;
            padding:14px;display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.xm-dong{display:flex;justify-content:space-between;gap:10px;font-size:13.5px}
.xm-dong span{color:var(--chu3)}
.xm-dong b{text-align:right;overflow-wrap:anywhere}
.xm-vao{width:100%;padding:13px;font-size:15px}

@media (min-width:521px){
  .xm-luoi{grid-template-columns:1fr 1fr}
  .xm-gui,.xm-vao{width:auto;min-width:180px}
}

/* ===== LÀN-XAC-MINH-SA (dsh, 24/09/2026) — khối "Hồ sơ xác minh" đầu ngăn kéo nhà phát hành.
   Mobile-first 390px: lưới so sánh và lưới ảnh gập về MỘT cột, ảnh thu nhỏ cao 160px; từ 521px
   trở lên mới thành hai cột. Màu qua biến, không mã cứng. ===== */
.nph-xm{gap:10px}
.nph-xm-dau{display:flex;align-items:center;justify-content:space-between;gap:8px}
.nph-xm-dau h3{margin:0}
.nph-xm-meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--chu3)}
.nph-xm-meta b{color:var(--chu)}

/* 7 bước chấm: màu theo ý nghĩa dat / canh_bao / khong_dat */
.nph-xm-buoc-ds{display:flex;flex-direction:column;gap:6px}
.nph-xm-buoc{display:flex;gap:10px;align-items:flex-start;background:var(--the);
             border:1px solid var(--vien);border-radius:10px;padding:8px 10px}
.nph-xm-ico{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
            font-weight:700;font-size:12px;background:var(--chim);color:var(--chu3)}
.nph-xm-dat .nph-xm-ico{background:var(--tot-nhat);color:var(--tot)}
.nph-xm-canh_bao .nph-xm-ico{background:var(--canh-nhat);color:var(--canh)}
.nph-xm-khong_dat .nph-xm-ico{background:var(--loi-nhat);color:var(--loi)}
.nph-xm-dang .nph-xm-ico{background:var(--nhan-nhat);color:var(--nhan)}
.nph-xm-buoc-than{min-width:0}
.nph-xm-buoc-than b{font-size:12.5px}
.nph-xm-buoc-chu{font-size:12px;color:var(--chu2);margin-top:2px;line-height:1.4}

/* Lưới so sánh GPKD / GP KBCB — 1 cột ở 390px, 2 cột từ 521px */
.nph-xm-luoi,.nph-xm-anh-luoi{display:grid;grid-template-columns:1fr;gap:10px}
.nph-xm-cot{background:var(--the);border:1px solid var(--vien);border-radius:10px;padding:10px;
            display:flex;flex-direction:column;gap:6px;min-width:0}
.nph-xm-cot-dau{font-size:12px;color:var(--nhan)}
.nph-xm-dong{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
.nph-xm-dong span{color:var(--chu3);flex:none}
.nph-xm-dong b{text-align:right;overflow-wrap:anywhere}

.nph-xm-tra-cuu{margin:0;font-size:12.5px;color:var(--tot)}
.nph-xm-tra-cuu.loi{color:var(--loi)}

/* Ảnh giấy tờ: ẩn khi chưa có blob, bấm mở to trong hộp */
.nph-xm-anh-o{margin:0;display:flex;flex-direction:column;gap:4px}
.nph-xm-anh-o figcaption{font-size:11.5px;color:var(--chu3)}
.nph-xm-anh-hop{position:relative;min-height:80px;display:flex;align-items:center;justify-content:center;
                background:var(--chim);border-radius:10px;overflow:hidden}
.nph-xm-anh{height:160px;width:100%;object-fit:cover;display:block;cursor:zoom-in}
.nph-xm-anh:not([src]){display:none}
.nph-xm-anh-cho{position:absolute;font-size:12px;color:var(--chu3)}
.nph-xm-anh-to{max-width:100%;max-height:78vh;display:block;border-radius:10px}
.nph-xm-anh-loi{font-size:12px;color:var(--loi)}

.nph-xm-duyet{width:100%;padding:11px;font-size:14px}
.nph-xm-nguon{display:flex;align-items:center;gap:8px}
.nph-xm-nhan{font-size:10.5px;padding:2px 7px}

@media (min-width:521px){
  .nph-xm-luoi,.nph-xm-anh-luoi{grid-template-columns:1fr 1fr}
}

/* ===== Hồ sơ năng lực v2 — thiết kế Stitch (Fable, 24/09/2026) ===== */
.hnl-loc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:4px 0 18px}
.hnl-chips{display:flex;flex-wrap:wrap;gap:8px}
.hnl-chips button{border:0;background:var(--the);color:var(--chu2);border-radius:999px;padding:8px 14px;font:inherit;font-size:13.5px;cursor:pointer;box-shadow:0 1px 2px rgba(20,20,40,.06)}
.hnl-chips button b{font-weight:600;color:var(--chu3);margin-left:2px}
.hnl-chips button.chon{background:var(--nhan);color:#fff}.hnl-chips button.chon b{color:#fff;opacity:.85}
.hnl-tim{border:0;background:var(--the);border-radius:12px;padding:10px 14px;font:inherit;min-width:min(320px,100%);box-shadow:0 1px 2px rgba(20,20,40,.06)}
.hnl-dem{color:var(--nhan);font-weight:600}
/* dải đề nghị nâng bậc */
.hnl-dn-khoi{background:var(--nhan-nhat);border-radius:18px;padding:16px 18px;margin-bottom:22px}
.hnl-dn-khoi h3{margin:0 0 12px;font-size:15px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.hnl-dn-khoi h3 small{margin-left:auto;font-weight:400;color:var(--chu3);font-size:12px}
.hnl-dn-dai{display:flex;gap:12px;overflow-x:auto;padding-bottom:4px;scroll-snap-type:x mandatory}
.hnl-dn{flex:0 0 280px;scroll-snap-align:start;background:var(--the);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:8px}
.hnl-dn-muc{display:flex;gap:6px;align-items:baseline;font-size:12.5px;color:var(--canh)}.hnl-dn-muc b{color:var(--tot)}
.hnl-dn-tien{height:6px;border-radius:999px;background:var(--vien);overflow:hidden}.hnl-dn-tien i{display:block;height:100%;background:var(--nhan);border-radius:999px}
.hnl-dn-so{display:flex;justify-content:space-between;font-size:12px;color:var(--chu3)}
.hnl-dn-ly-do{color:var(--chu2);font-size:12px;line-height:1.4}
.hnl-dn-nut{display:flex;justify-content:flex-end;gap:6px;margin-top:auto}
/* lưới thẻ hồ sơ */
.hnl-luoi-dau{display:flex;justify-content:space-between;align-items:baseline;margin:0 2px 12px}.hnl-luoi-dau small{color:var(--chu3)}
.hnl-luoi{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:760px){.hnl-luoi{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.hnl-luoi{grid-template-columns:repeat(3,1fr)}}
.hnl-the{position:relative;text-align:left;font:inherit;color:inherit;border:2px solid transparent;background:var(--the);border-radius:16px;padding:16px;
  display:flex;flex-direction:column;gap:12px;cursor:pointer;box-shadow:0 1px 3px rgba(20,20,40,.06),0 10px 24px -18px rgba(40,30,90,.25);transition:transform .15s,box-shadow .15s}
.hnl-the:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(40,30,90,.35)}
.hnl-the.chon{border-color:var(--nhan)}
.hnl-dang-mo{position:absolute;top:-11px;right:14px;background:var(--nhan);color:#fff;font-size:11px;font-weight:600;border-radius:999px;padding:3px 10px}
.hnl-dau{display:flex;gap:12px;align-items:center}
.hnl-anh .avatar-pt{width:60px;height:60px;border-radius:50%;box-shadow:0 0 0 3px var(--the),0 0 0 4px var(--vien);overflow:hidden;display:block}
.hnl-anh.nho .avatar-pt{width:40px;height:40px}
.hnl-anh.to .avatar-pt{width:84px;height:84px;box-shadow:0 0 0 4px var(--the),0 0 0 5px var(--nhan-nhat)}
.hnl-ten{display:flex;flex-direction:column;gap:3px;min-width:0}
.hnl-ten b{font-size:15.5px;line-height:1.25}.hnl-ten small{color:var(--chu3);font-size:12.5px}
.hnl-ten h2{margin:0;font-size:21px}
.hnl-hoc-vi{align-self:flex-start;background:var(--nhan-nhat);color:var(--nhan);font-size:11.5px;font-weight:600;border-radius:999px;padding:3px 10px;margin-top:2px}
.hnl-giay{display:flex;flex-wrap:wrap;gap:6px}
.hnl-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;border-radius:999px;padding:3px 10px;background:var(--nen);color:var(--chu2);white-space:nowrap}
.hnl-chip.tot{background:color-mix(in srgb,var(--tot) 12%,transparent);color:var(--tot)}
.hnl-chip.canh{background:color-mix(in srgb,var(--canh) 14%,transparent);color:var(--canh)}
.hnl-chip.loi{background:color-mix(in srgb,var(--loi) 12%,transparent);color:var(--loi)}
.hnl-muc{background:var(--nen);border-radius:12px;padding:10px 12px}
.hnl-muc-so{display:flex;gap:10px;align-items:baseline;font-size:12.5px;margin-bottom:7px}
.hnl-muc-so b{margin-left:auto;font-size:12px;color:var(--chu2)}
.hnl-m3{color:var(--nhan);font-weight:600}.hnl-m2{color:color-mix(in srgb,var(--nhan) 65%,var(--chu))}.hnl-m1{color:var(--canh)}
.hnl-muc-thanh{display:flex;gap:3px;height:7px}.hnl-muc-thanh i{border-radius:999px}
.hnl-muc-thanh i.hnl-m3{background:var(--nhan)}.hnl-muc-thanh i.hnl-m2{background:color-mix(in srgb,var(--nhan) 55%,white)}
.hnl-muc-thanh i.hnl-m1{background:color-mix(in srgb,var(--canh) 60%,white)}
.hnl-nhom{display:flex;flex-wrap:wrap;gap:6px}.hnl-nhom span{font-size:12px;border:1px solid var(--vien);border-radius:999px;padding:3px 10px;color:var(--chu2)}
.hnl-chan{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--chu3);border-top:1px solid var(--vien);padding-top:10px;margin-top:auto}
.hnl-mui{font-size:20px;color:var(--nhan)}
/* ngăn bên */
.hnl-man-che{position:fixed;inset:0;background:rgba(15,20,40,.28);z-index:60}
.hnl-ngan{position:fixed;top:0;right:0;bottom:0;width:min(540px,100vw);background:var(--the);z-index:61;display:flex;flex-direction:column;
  box-shadow:-24px 0 60px -20px rgba(15,20,40,.35);animation:hnlVao .22s ease-out}
@keyframes hnlVao{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.hnl-ngan-dau{display:flex;gap:16px;align-items:center;padding:22px 22px 16px;position:relative}
.hnl-dong{position:absolute;top:14px;right:14px;border:0;background:var(--nen);border-radius:50%;width:36px;height:36px;font-size:15px;cursor:pointer;color:var(--chu2)}
.hnl-ngan-than{flex:1;overflow-y:auto;padding:4px 22px 22px}
.hnl-muc-dau{display:flex;align-items:baseline;gap:6px;font-size:13px;text-transform:none;letter-spacing:.02em;margin:18px 0 10px;color:var(--chu)}
.hnl-muc-dau small{margin-left:auto;font-weight:400;color:var(--chu3);font-size:12px}
.hnl-giay-ds{display:flex;flex-direction:column;gap:8px}
.hnl-giay-dong{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;background:var(--nen);border-radius:12px;padding:10px 12px}
.hnl-giay-dong b{font-size:13.5px;display:block}.hnl-giay-dong small{color:var(--chu3);font-size:11.5px;line-height:1.4}
.hnl-giay-bieu{width:36px;height:36px;border-radius:10px;background:var(--the);display:flex;align-items:center;justify-content:center;font-size:17px}
.hnl-ngan .hnl-tim{width:100%;background:var(--nen);box-shadow:none;margin-bottom:10px}
.hnl-tab{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.hnl-tab button{border:0;background:var(--nen);border-radius:999px;padding:6px 12px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--chu2)}
.hnl-tab button.chon{background:var(--nhan);color:#fff}
.hnl-tt{background:var(--nen);border-radius:14px;padding:12px 14px;margin-bottom:10px;border:1.5px solid transparent}
.hnl-tt.doi{border-color:var(--nhan);background:var(--nhan-nhat)}
.hnl-tt-dau{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.hnl-tt-dau b{font-size:14px}
.hnl-tt-nhom{font-size:11px;color:var(--chu3);white-space:nowrap}
.hnl-tt-ca{display:block;color:var(--chu3);font-size:12px;margin:3px 0 9px}
.hnl-muc-chon{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--the);border-radius:10px;padding:3px}
.hnl-muc-chon button{border:0;background:transparent;border-radius:8px;padding:8px 4px;font:inherit;font-size:12.5px;color:var(--chu2);cursor:pointer;white-space:nowrap}
.hnl-muc-chon button:disabled{cursor:default}
.hnl-muc-chon button.chon.hnl-mc0{background:color-mix(in srgb,var(--loi) 14%,transparent);color:var(--loi);font-weight:600}
.hnl-muc-chon button.chon.hnl-mc1{background:color-mix(in srgb,var(--canh) 18%,transparent);color:var(--canh);font-weight:600}
.hnl-muc-chon button.chon.hnl-mc2,.hnl-muc-chon button.chon.hnl-mc3{background:var(--nhan);color:#fff;font-weight:600}
.hnl-ngan-chan{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 22px;border-top:1px solid var(--vien);background:var(--the)}
@media (max-width:560px){ .hnl-muc-chon button{font-size:11.5px;padding:8px 2px} .hnl-ngan-dau{padding:18px 16px 12px} .hnl-ngan-than{padding:4px 16px 16px} }

/* ===== Nhật ký chuyên môn — bố cục 3 vùng theo thiết kế Stitch (Fable, 24/09/2026) ===== */
.nk3{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
.nk3-trai{display:flex;flex-direction:column;gap:6px}
.nk3-trai h4{margin:14px 2px 4px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--chu3)}
.nk3-so-luoi{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.nk3-so{background:var(--the);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:baseline;box-shadow:0 1px 2px rgba(20,20,40,.05)}
.nk3-so small{grid-column:1/-1;color:var(--chu3);font-size:11.5px}
.nk3-so b{font-size:22px;font-weight:700;color:var(--chu)}.nk3-so span{font-size:12px;color:var(--chu3)}
.nk3-so.do{background:color-mix(in srgb,var(--loi) 9%,var(--the))}.nk3-so.do b{color:var(--loi)}
.nk3-so.vang{background:color-mix(in srgb,var(--canh) 11%,var(--the))}.nk3-so.vang b{color:var(--canh)}
.nk3-so.xanh b{color:var(--tot)}
.nk3-no-nho{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--chu3);padding:2px 4px}
.nk3-goc{display:flex;flex-direction:column;gap:2px}
.nk3-muc{display:flex;justify-content:space-between;align-items:center;border:0;background:transparent;border-radius:10px;padding:9px 12px;font:inherit;font-size:14px;color:var(--chu2);cursor:pointer;text-align:left}
.nk3-muc:hover{background:var(--the)}
.nk3-muc.chon{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.nk3-muc em{font-style:normal;font-size:12px;color:var(--chu3);background:var(--the);border-radius:999px;padding:1px 8px}
.nk3-muc em.do{color:var(--loi)}
.nk3-chip{display:flex;flex-wrap:wrap;gap:6px}
.nk3-chip button{border:1px solid var(--vien);background:var(--the);border-radius:999px;padding:5px 11px;font:inherit;font-size:12.5px;color:var(--chu2);cursor:pointer}
.nk3-chip button.chon{background:var(--nhan);border-color:var(--nhan);color:#fff}
.nk3-bs{display:flex;flex-direction:column;gap:2px}
.nk3-bs-dong{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;border:0;background:transparent;border-radius:10px;padding:6px 8px;font:inherit;cursor:pointer;text-align:left}
.nk3-bs-dong:hover{background:var(--the)}.nk3-bs-dong.chon{background:var(--nhan-nhat)}
.nk3-bs-anh{width:32px;height:32px;border-radius:50%;overflow:hidden;display:block}
.nk3-bs-anh > *{width:32px!important;height:32px!important;border-radius:50%}
.nk3-bs-ten{font-size:13.5px;color:var(--chu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nk3-bs-dong em{font-style:normal;font-size:11.5px;color:var(--chu3);font-family:"IBM Plex Mono",monospace}
.nk3-them{display:flex;flex-direction:column;gap:6px}.nk3-them select,.nk3-them input{width:100%!important}
.nk3-dau-tuong{display:flex;align-items:baseline;gap:8px;margin:0 2px 12px}
.nk3-giua .nk-tuong{max-width:none}
@media (min-width:1180px){
  .nk3{grid-template-columns:250px minmax(0,1fr)}
  .nk3.co-phai{grid-template-columns:250px minmax(0,1fr) minmax(360px,.85fr)}
  .nk3-trai{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;padding-right:2px}
  .nk3 .nk-phai{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}
}
@media (max-width:1179px){
  .nk3-so-luoi{grid-template-columns:repeat(4,1fr)}
  .nk3-goc{flex-direction:row;flex-wrap:wrap}.nk3-goc .nk3-muc{background:var(--the)}
  .nk3-bs{flex-direction:row;overflow-x:auto}.nk3-bs-dong{flex:0 0 auto}
}
@media (max-width:560px){ .nk3-so-luoi{grid-template-columns:repeat(2,1fr)} }
/* Tự chấm gọn (Stitch 24/09): hàng 5 nút, bậc chọn tô theo mức, nghĩa bậc chọn ở dòng nhãn */
.nk-nhan-thang{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.nk-nghia{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--chu3)}
.nk-thang{display:grid!important;grid-template-columns:repeat(5,1fr);gap:6px}
.nk-thang .nk-num{padding:7px 0;justify-content:center;text-align:center;min-height:0;min-width:0;width:100%;box-sizing:border-box;opacity:1!important;background:var(--the);border:1px solid var(--vien);color:var(--chu2)}
.nk-thang .nk-num span{display:none}
.nk-thang .nk-num b{font-family:"IBM Plex Mono",monospace;font-size:13px}
.nk-thang .nk-num.chon{color:#fff;border-color:transparent}
.nk-thang .nk-num.chon.nk-num-v1,.nk-thang .nk-num.chon.nk-num-v2{background:var(--loi)}
.nk-thang .nk-num.chon.nk-num-v3{background:var(--canh)}
.nk-thang .nk-num.chon.nk-num-v4,.nk-thang .nk-num.chon.nk-num-v5{background:var(--tot)}
.nk-nghia.nk-num-v1,.nk-nghia.nk-num-v2{color:var(--loi)}.nk-nghia.nk-num-v3{color:var(--canh)}.nk-nghia.nk-num-v4,.nk-nghia.nk-num-v5{color:var(--tot)}
.nk-thang .nk-num{display:flex!important;align-items:center;justify-content:center}
/* Sửa 390px (24/09): cột con của lưới nhật ký không được nở theo nội dung cuộn ngang (chip, hàng bác sĩ) — tràn khỏi màn;
   ngăn hồ sơ năng lực đứng trên nút menu nổi của ứng dụng. */
.nk3 > *, .nk3-trai, .nk3-giua{min-width:0}
.nk3-bs{max-width:100%}
.hnl-man-che{z-index:1000}.hnl-ngan{z-index:1001}
.nk3-loc-gap > summary{cursor:pointer;list-style:none;margin:10px 0 2px;padding:10px 12px;border-radius:10px;background:var(--the);font-size:13.5px;font-weight:600;color:var(--chu2)}
.nk3-loc-gap > summary::-webkit-details-marker{display:none}
.nk3-loc-gap > summary::after{content:" ▾";color:var(--chu3)}
.nk3-loc-gap[open] > summary::after{content:" ▴"}
.nk3-loc-gap > summary em{font-style:normal;color:var(--nhan)}
@media (min-width:1180px){ .nk3-loc-gap > summary{display:none} }

/* ===== Quy trình & SOP — tra cứu nhiều cấp, thiết kế Stitch (Fable, 24/09/2026) ===== */
.tc-dau{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;margin-bottom:10px}
.tc-dau h1{margin:0;font-size:26px}.tc-dau p{margin:2px 0 0}
@media (min-width:1100px){.tc-dau{grid-template-columns:auto minmax(360px,1fr) auto}}
.tc-tim-boc{position:relative}
.tc-tim{width:100%;border:0;background:var(--the);border-radius:14px;padding:13px 16px 13px 42px;font:inherit;font-size:15px;
  box-shadow:0 1px 3px rgba(20,20,40,.08);background-image:radial-gradient(circle at 20px 50%,transparent 6px,transparent 7px)}
.tc-tim-boc::before{content:"🔎";position:absolute;left:14px;top:50%;transform:translateY(-50%);font-size:15px;opacity:.6;pointer-events:none}
.tc-kq{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30}
.tc-kq-hop{background:var(--the);border-radius:14px;box-shadow:0 18px 40px -12px rgba(20,20,60,.35);padding:8px;max-height:60vh;overflow:auto}
.tc-kq-dau{font-size:12.5px;color:var(--chu3);padding:4px 10px 6px}
.tc-kq-hop h5{margin:8px 10px 4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--chu3)}
.tc-kq-dong{display:flex;gap:8px;align-items:center;width:100%;border:0;background:transparent;border-radius:9px;padding:8px 10px;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;color:var(--chu)}
.tc-kq-dong:hover{background:var(--nhan-nhat)}
.tc-kq-dong code{font-size:11.5px;color:var(--nhan);background:var(--nhan-nhat);border-radius:6px;padding:1px 6px;flex:none}
.tc-kq-dong span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-kq-dong em{font-style:normal;font-size:11.5px;color:var(--chu3);flex:none}.tc-kq-dong em.tot{color:var(--tot)}
mark.tc-to{background:color-mix(in srgb,var(--canh) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px}
.tc-loc{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 16px}
.tc-chip{border:0;background:var(--the);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;color:var(--chu2);cursor:pointer;box-shadow:0 1px 2px rgba(20,20,40,.06)}
.tc-chip b{margin-left:4px;font-weight:600}
.tc-chip.chon{background:var(--nhan);color:#fff}
.tc-chip.vang:not(.chon){background:color-mix(in srgb,var(--canh) 14%,var(--the));color:var(--canh)}
.tc-cham{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--chu3);flex:none}
.tc{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:1180px){.tc{grid-template-columns:290px minmax(0,1fr) 300px}
  .tc-cay,.tc-phai{position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto}}
@media (min-width:900px) and (max-width:1179px){.tc{grid-template-columns:260px minmax(0,1fr)}.tc-phai{grid-column:1/-1}}
.tc > *{min-width:0}
/* cây */
.tc-cay{background:var(--the);border-radius:16px;padding:10px}
.tc-cay-dau{display:flex;justify-content:space-between;align-items:baseline;padding:4px 6px 8px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--chu3)}
.tc-cay-dau small{text-transform:none;letter-spacing:0}
.tc-cay-p{margin-bottom:2px}
.tc-cay-p-dau{display:flex;align-items:center;border-radius:10px}
.tc-cay-p-dau.chon,.tc-cay-p-dau:hover{background:var(--nen)}
.tc-mo{border:0;background:transparent;width:26px;height:32px;cursor:pointer;color:var(--chu3);font-size:12px;flex:none}
.tc-cay-p-ten{flex:1;min-width:0;display:flex;gap:8px;align-items:center;border:0;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--chu);text-align:left;cursor:pointer;padding:6px 6px 6px 0}
.tc-cay-p-ten span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-cay-p-ten em{font-style:normal;font-size:11px;font-weight:500;color:var(--chu3);background:var(--nen);border-radius:999px;padding:1px 7px;font-family:"IBM Plex Mono",monospace}
.tc-cay-con{padding:2px 0 6px 20px;display:flex;flex-direction:column;gap:1px}
.tc-cay-sop{display:grid;grid-template-columns:auto 1fr auto auto;gap:6px;align-items:center;border:0;background:transparent;border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;color:var(--chu2);text-align:left;cursor:pointer}
.tc-cay-sop:hover{background:var(--nen)}
.tc-cay-sop.chon{background:var(--nhan-nhat);color:var(--chu)}
.tc-cay-sop.chon code{background:var(--nhan);color:#fff}
.tc-cay-sop.nhap{color:var(--chu3);font-style:italic}
.tc-cay-sop code{font-size:10.5px;color:var(--chu3);font-family:"IBM Plex Mono",monospace;border-radius:5px;padding:1px 4px}
.tc-cay-sop span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-tt{width:7px;height:7px;border-radius:50%;background:var(--vien)}.tc-tt.tot{background:var(--tot)}
.tc-da-doc{color:var(--tot);font-size:12px}
/* giữa */
.tc-giua{display:flex;flex-direction:column;gap:14px}
.tc-duong{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--chu3)}
.tc-duong button{display:inline-flex;gap:6px;align-items:center;border:0;background:transparent;font:inherit;color:var(--nhan);cursor:pointer;padding:0}
.tc-van-ban-dau{background:var(--the);border-radius:16px;padding:18px 20px;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start}
.tc-van-ban-dau h2{margin:0 0 10px;font-size:22px}
.tc-the-chip{display:flex;flex-wrap:wrap;gap:6px}
.tc-nho{font-size:12px;background:var(--nen);color:var(--chu2);border-radius:999px;padding:4px 10px}
.tc-nho.tot{background:color-mix(in srgb,var(--tot) 12%,transparent);color:var(--tot)}
.tc-nho.canh{background:color-mix(in srgb,var(--canh) 14%,transparent);color:var(--canh)}
.tc-pham-vi{margin:10px 0 0;color:var(--chu2);font-size:13.5px}
.tc-nut{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.tc-khoi{background:var(--the);border-radius:16px;padding:14px 16px}.tc-khoi h3{margin:0 0 10px;font-size:14px}
.tc-con-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.tc-con-the{border:0;background:var(--nen);border-radius:12px;padding:10px 12px;text-align:left;font:inherit;cursor:pointer;display:flex;flex-direction:column;gap:3px}
.tc-con-the:hover{background:var(--nhan-nhat)}
.tc-con-the code{font-size:11px;color:var(--nhan)}.tc-con-the b{font-size:13.5px}.tc-con-the small{color:var(--chu3);font-size:11.5px}
.tc-giai-doan{display:flex;flex-direction:column;gap:10px}
.tc-gd-dau{display:flex;align-items:center;gap:10px;margin-top:6px}
.tc-gd-so{width:26px;height:26px;border-radius:50%;background:var(--nhan);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;flex:none}
.tc-gd-dau b{font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--nhan)}
.tc-gd-dau small{margin-left:auto;color:var(--chu3)}
.tc-buoc{display:grid;grid-template-columns:44px 1fr;gap:12px;background:var(--the);border-radius:14px;padding:14px 16px;box-shadow:0 1px 2px rgba(20,20,40,.05)}
.tc-buoc.sang{box-shadow:0 0 0 2px var(--nhan)}
.tc-buoc-so{font-size:17px;font-weight:700;color:var(--nhan);padding-top:2px}
.tc-buoc-dau{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
.tc-buoc-dau h4{margin:0;font-size:15px;line-height:1.35}
.tc-vai{font-size:12px;background:var(--nhan-nhat);color:var(--nhan);border-radius:999px;padding:4px 10px;white-space:nowrap;font-weight:600}
.tc-buoc-than p{margin:6px 0 0;color:var(--chu2);font-size:13.5px;line-height:1.5}
.tc-chuan{color:var(--tot)!important;font-size:12.5px!important}
.tc-buoc-chan{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;align-items:center}
.tc-man,.tc-lk{border:0;background:var(--nen);border-radius:999px;padding:4px 10px;font:inherit;font-size:12px;cursor:pointer;color:var(--nhan)}
.tc-man:hover,.tc-lk:hover{background:var(--nhan-nhat)}
.tc-giao{font-size:12px;color:var(--canh);font-weight:600}
/* phải */
.tc-phai{display:flex;flex-direction:column;gap:12px}
.tc-khoi-phai{background:var(--the);border-radius:16px;padding:14px}
.tc-khoi-phai h4{margin:0 0 8px;font-size:14px;display:flex;justify-content:space-between;align-items:baseline}
.tc-khoi-phai h4 small{font-weight:400;color:var(--chu3);font-size:11.5px}
.tc-khoi-phai > small{display:block;margin:8px 0 4px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--chu3)}
.tc-lk-the{display:flex;flex-direction:column;gap:2px;width:100%;border:0;background:var(--nen);border-radius:10px;padding:8px 10px;margin-bottom:6px;text-align:left;font:inherit;cursor:pointer}
.tc-lk-the:hover{background:var(--nhan-nhat)}
.tc-lk-the code{font-size:11px;color:var(--nhan)}.tc-lk-the b{font-size:13px}
.tc-vai-dong{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;padding:5px 0}
.tc-vai-chu{width:32px;height:32px;border-radius:50%;background:var(--nhan-nhat);color:var(--nhan);display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.tc-vai-dong em{font-style:normal;font-size:11.5px;color:var(--nhan);background:var(--nhan-nhat);border-radius:999px;padding:2px 8px}
.tc-doc{display:flex;gap:12px;align-items:center}
.tc-vong{--p:0;width:64px;height:64px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,var(--the) 74%,transparent 76%),conic-gradient(var(--nhan) calc(var(--p)*1%),var(--nen) 0)}
.tc-vong b{font-size:14px;color:var(--nhan)}
.tc-doc p{margin:0;font-size:12.5px}
.tc-han{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--vien);font-size:12.5px;color:var(--chu3)}
.tc-han b{color:var(--chu);background:var(--nen);border-radius:8px;padding:2px 8px}
@media (max-width:560px){ .tc-buoc{grid-template-columns:30px 1fr;padding:12px} .tc-van-ban-dau{padding:14px} .tc-nut{width:100%} }
.tc-tim-boc .tc-tim{padding-left:42px!important}
.tc-tim-boc::before{z-index:1}

/* ===== SOP · BẢN ĐỒ TỔNG THỂ v2 (Fable 24/09/2026 · Stitch 7-sop-ban-do) ===== */
.bdq{display:flex;flex-direction:column;gap:12px}
.bdq-so{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.bdq-so-o{background:var(--the);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:1px;box-shadow:0 1px 2px rgba(20,20,40,.05)}
.bdq-so-o b{font-size:22px;font-family:"IBM Plex Mono",monospace;color:var(--chu);letter-spacing:-.02em}
.bdq-so-o span{font-size:13px;font-weight:600;color:var(--chu2)}
.bdq-so-o small{font-size:11.5px;color:var(--chu3)}
.bdq-dan{margin:2px 0 0;font-size:13px;line-height:1.5}
.bdq-chu-giai{white-space:nowrap;margin-left:6px}
.bdq-cham{display:inline-block;width:8px;height:8px;border-radius:50%;border:1.5px solid var(--chu3);background:transparent;flex:none;vertical-align:middle}
.bdq-cham.tot{background:var(--tot);border-color:var(--tot)}
.bdq-vung{background:color-mix(in srgb,var(--m) 5%,var(--the));border:1px solid color-mix(in srgb,var(--m) 22%,transparent);border-radius:20px;padding:16px 18px 18px}
.bdq-vung.truc{border-width:1.5px;box-shadow:0 10px 30px -18px color-mix(in srgb,var(--m) 60%,transparent)}
.bdq-vung-dau{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.bdq-vung-ten{display:flex;align-items:center;gap:12px;border:0;background:transparent;padding:0;text-align:left;cursor:pointer;font:inherit;color:var(--chu);min-width:0}
.bdq-vung-ten>span:last-child{display:flex;flex-direction:column;min-width:0}
.bdq-vung-ten b{font-size:17px}
.bdq-vung.truc .bdq-vung-ten b{font-size:19px}
.bdq-vung-ten small{font-size:12.5px;color:var(--chu3);margin-top:1px}
.bdq-vung-ten:hover b{color:var(--m)}
.bdq-huy{width:40px;height:40px;border-radius:12px;background:var(--m);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.bdq-vung-phai{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bdq-dem{font-family:"IBM Plex Mono",monospace;font-size:12px;background:var(--the);border:1px solid var(--vien);border-radius:999px;padding:3px 10px;color:var(--chu2)}
.bdq-dem.du{background:var(--tot);border-color:var(--tot);color:#fff}
.bdq-link{border:0;background:transparent;font:inherit;font-size:13px;color:var(--m);cursor:pointer;font-weight:600;padding:4px 2px}
.bdq-link:hover{text-decoration:underline}
.bdq-gds{display:flex;flex-wrap:wrap;gap:16px 22px}
.bdq-gd{min-width:0}
.bdq-gd-ten{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--chu2);margin-bottom:8px}
.bdq-gd-ten i{font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--m);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:0}
.bdq-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.bdq-the{position:relative;display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:var(--chu);background:var(--the);border:1px solid var(--vien);border-radius:14px;padding:11px 12px 10px;cursor:pointer;min-height:108px;transition:transform .12s,box-shadow .12s,border-color .12s}
.bdq-the:hover{transform:translateY(-1px);border-color:var(--m);box-shadow:0 8px 20px -12px rgba(20,20,60,.35)}
.bdq-the.nhap{border-style:dashed;background:color-mix(in srgb,var(--the) 70%,transparent)}
.bdq-the.nhap .bdq-the-ten{color:var(--chu2);font-weight:500}
.bdq-the.toi{border-color:var(--nhan);box-shadow:0 0 0 2px color-mix(in srgb,var(--nhan) 22%,transparent)}
.bdq-the-dau{display:flex;justify-content:space-between;align-items:center;gap:6px}
.bdq-the-dau .bdq-the-toi{margin-left:auto}
.bdq-the-dau code{font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;color:var(--m)}
.bdq-the-ten{font-size:13.5px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bdq-the-chan{margin-top:auto;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--chu3)}
.bdq-the-chan>span:first-child{font-family:"IBM Plex Mono",monospace}
.bdq-the-toi{font-style:normal;font-size:10.5px;font-weight:600;color:var(--nhan);background:var(--nhan-nhat);border-radius:999px;padding:1px 7px}
.bdq-pct{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-family:"IBM Plex Mono",monospace}
.bdq-pct i{width:34px;height:4px;border-radius:4px;background:var(--nen);position:relative;overflow:hidden}
.bdq-pct i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--tot);border-radius:4px}
.bdq-rong{margin:0}
.bdq-noi{display:flex;justify-content:center;margin:-2px 0}
.bdq-noi span{font-size:12.5px;color:var(--chu2);background:var(--the);border:1px solid var(--vien);border-radius:999px;padding:5px 14px}
.bdq-nen{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px;align-items:start}
.bdq-nen .bdq-luoi{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.bdq-gd .bdq-luoi{display:flex;flex-wrap:wrap;gap:10px}
.bdq-gd .bdq-the{width:196px}
@media (max-width:640px){.bdq-gd,.bdq-gd .bdq-luoi{width:100%}.bdq-gd .bdq-luoi{display:grid}.bdq-gd .bdq-the{width:auto}.bdq-vung{padding:14px 12px}.bdq-nen{grid-template-columns:1fr}.bdq-luoi,.bdq-nen .bdq-luoi{grid-template-columns:1fr 1fr}.bdq-the{min-height:96px}.bdq-so{grid-template-columns:1fr 1fr}}

/* ===== SOP · CHUỖI GIÁ TRỊ v2 (Fable 24/09/2026) ===== */
.sop-ma{display:inline-flex;align-items:center;gap:4px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;font-weight:600;color:var(--m);background:color-mix(in srgb,var(--m) 9%,var(--the));border:1px solid color-mix(in srgb,var(--m) 30%,transparent);border-radius:7px;padding:2px 7px;text-decoration:none;line-height:1.4}
.sop-ma.bh::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--tot)}
.sop-ma.qh{border-style:dashed;background:transparent;opacity:.75}
.sop-ma:hover{background:var(--m);color:#fff}
.cgt{display:flex;flex-direction:column;gap:12px}
.cgt-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.cgt-dau p{margin:0;font-size:13.5px;line-height:1.55;max-width:900px}
.cgt-dau p b{color:var(--chu)}
.cgt-khung{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:stretch}
.cgt-trai{min-width:0;display:flex;flex-direction:column;gap:8px}
.cgt-nhom{display:flex;align-items:baseline;gap:10px;margin:6px 0 0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--chu2)}
.cgt-nhom span{letter-spacing:0;text-transform:none;font-weight:500;color:var(--chu3);font-size:12.5px}
.cgt-bang{display:grid;grid-template-columns:240px 1fr auto;gap:6px 18px;align-items:start;background:var(--the);border-radius:14px;padding:12px 14px 12px 18px;position:relative;box-shadow:0 1px 2px rgba(20,20,40,.05)}
.cgt-bang::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:5px;border-radius:0 4px 4px 0;background:var(--m)}
.cgt-bang-ten{display:flex;flex-direction:column;gap:2px}
.cgt-bang-ten b{font-size:14.5px;color:var(--m)}
.cgt-bang-ten small{font-size:12px;color:var(--chu3);line-height:1.4}
.cgt-bang-giua p{margin:0 0 7px;font-size:13px;color:var(--chu2);line-height:1.5}
.cgt-bang-phai{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cgt-bang .cgt-ct{grid-column:1/-1}
.cgt-ma-ds{display:flex;flex-wrap:wrap;gap:5px}
.cgt-dem{font-family:"IBM Plex Mono",monospace;font-size:11.5px;border-radius:999px;padding:2px 9px;background:var(--nen);color:var(--chu2);white-space:nowrap}
.cgt-dem::after{content:" ban hành";font-family:inherit}
.cgt-dem.du{background:color-mix(in srgb,var(--tot) 14%,transparent);color:var(--tot)}
.cgt-mo{border:0;background:transparent;font:inherit;font-size:12px;color:var(--nhan);cursor:pointer;padding:2px 0;white-space:nowrap}
.cgt-mo:hover{text-decoration:underline}
.cgt-chinh{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-items:stretch}
.cgt-chang{display:flex;flex-direction:column;min-width:0}
.cgt-mui{position:relative;background:var(--m);color:#fff;min-height:58px;padding:8px 26px 8px 22px;display:flex;align-items:center;gap:8px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%,16px 50%)}
.cgt-chang:first-child .cgt-mui{clip-path:polygon(0 0,calc(100% - 16px) 0,100% 50%,calc(100% - 16px) 100%,0 100%);padding-left:14px;border-radius:12px 0 0 12px}
.cgt-mui i{font-style:normal;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;flex:none}
.cgt-mui b{font-size:13px;line-height:1.25}
.cgt-than{flex:1;margin-top:6px;background:var(--the);border-radius:12px;padding:10px 11px;display:flex;flex-direction:column;gap:7px;border-top:3px solid var(--m);box-shadow:0 1px 2px rgba(20,20,40,.05)}
.cgt-bo-phan{font-size:11.5px;color:var(--chu3);line-height:1.4}
.cgt-than p{margin:0;font-size:12.5px;line-height:1.5;color:var(--chu2)}
.cgt-than-chan{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:6px;flex-wrap:wrap}
.cgt-ct{border-top:1px dashed var(--vien);padding-top:8px;margin-top:2px;font-size:12.5px}
.cgt-gt{margin:0 0 6px;font-style:italic;color:var(--chu2)}
.cgt-ct dl{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:4px 12px}
.cgt-chang .cgt-ct dl{grid-template-columns:1fr}
.cgt-ct dt{color:var(--chu3);font-size:11.5px}
.cgt-ct dd{margin:0}
.cgt-ct dd small{display:block;color:var(--chu3);margin-top:2px}
.cgt-doi-tac{display:inline-block;background:var(--nen);border-radius:6px;padding:1px 7px;margin:0 4px 3px 0;font-size:12px}
.cgt-bien{position:relative;background:linear-gradient(180deg,color-mix(in srgb,var(--tot) 72%,white),var(--tot));border-radius:14px 0 0 14px;clip-path:polygon(0 0,62% 0,100% 50%,62% 100%,0 100%);display:flex;align-items:center;justify-content:flex-start;padding-left:18px}
.cgt-bien span{writing-mode:vertical-rl;transform:rotate(180deg);color:#fff;font-weight:800;letter-spacing:.3em;font-size:14px}
.cgt-h3{margin:14px 0 0;font-size:17px}
.cgt-margin{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
@media (max-width:900px){.cgt-margin{grid-template-columns:1fr}}
.cgt-m-the{background:var(--the);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(20,20,40,.05)}
.cgt-m-so{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--tot);font-weight:700}
.cgt-m-the>b{font-size:14px;line-height:1.35}
.cgt-m-tu{display:flex;flex-wrap:wrap;gap:5px}
.cgt-m-tu span{font-size:11.5px;font-weight:600;color:var(--m);background:color-mix(in srgb,var(--m) 10%,transparent);border-radius:999px;padding:2px 9px}
@media (max-width:1100px){.cgt-chinh{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}}
@media (max-width:760px){.cgt-khung{grid-template-columns:1fr}.cgt-bien{clip-path:none;border-radius:12px;min-height:44px;justify-content:center;padding:0}.cgt-bien span{writing-mode:horizontal-tb;transform:none}
.cgt-bang{grid-template-columns:1fr;padding-left:16px}.cgt-bang-phai{flex-direction:row;justify-content:space-between;align-items:center}
.cgt-chinh{grid-template-columns:1fr 1fr}.cgt-dau{flex-direction:column}}
.cgt-tam{background:var(--the);border-radius:14px;padding:12px 16px;border-left:5px solid var(--m)}
.cgt-tam-dau{display:flex;justify-content:space-between;align-items:center}
.cgt-tam-dau b{color:var(--m);font-size:14.5px}
.cgt-tam .cgt-ct{border-top:0;padding-top:4px}

/* ===== SOP · công tắc chế độ xem + DANH SÁCH v2 (Fable 24/09/2026) ===== */
.sop-seg{display:inline-flex;background:var(--the);border-radius:999px;padding:4px;gap:2px;box-shadow:0 1px 2px rgba(20,20,40,.06);flex-wrap:wrap}
.sop-seg button{border:0;background:transparent;border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;font-weight:500;color:var(--chu2);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sop-seg button i{font-style:normal;font-size:13px}
.sop-seg button:hover{background:var(--nen)}
.sop-seg button.chon{background:var(--nhan);color:#fff;font-weight:600}
.sop-seg.nho button{padding:5px 12px;font-size:12.5px}
.sds-cong-cu{display:grid;grid-template-columns:minmax(220px,340px) 1fr auto;gap:12px;align-items:center;margin:14px 0 6px}
.sds-tim{padding-top:10px;padding-bottom:10px;font-size:14px}
.sds-than{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.sds-nhom h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px}
.sds-nhom h3 small{font-weight:400;font-size:12.5px;color:var(--chu3)}
.sds-dem{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--nen);border-radius:999px;padding:1px 8px;color:var(--chu2);font-weight:500}
.sds-cuon{background:var(--the);border-radius:16px;overflow:auto;box-shadow:0 1px 2px rgba(20,20,40,.05)}
.sds-bang{width:100%;border-collapse:collapse;font-size:13.5px}
.sds-bang th{text-align:left;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--chu3);font-weight:600;padding:10px 14px;border-bottom:1px solid var(--vien);white-space:nowrap}
.sds-bang td{padding:10px 14px;border-bottom:1px solid color-mix(in srgb,var(--vien) 60%,transparent);vertical-align:middle}
.sds-bang tbody tr:last-child td{border-bottom:0}
.sds-hang{cursor:pointer}.sds-hang:hover td{background:color-mix(in srgb,var(--nhan) 4%,transparent)}
.sds-ma{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--m);background:color-mix(in srgb,var(--m) 9%,transparent);border-radius:7px;padding:3px 8px;white-space:nowrap}
.sds-ten b{display:block;font-weight:600;line-height:1.35}
.sds-phu{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--chu3);margin-top:3px}
.sds-cap{font-style:normal;font-size:10.5px;font-weight:600;border-radius:5px;padding:0 6px}
.sds-cap.c1{background:var(--sop-p4-nhat);color:var(--sop-p4)}.sds-cap.c2{background:var(--sop-p2-nhat);color:var(--sop-p2)}.sds-cap.c3{background:var(--sop-p3-nhat);color:var(--sop-p3)}
.sds-giua{text-align:center}
.sds-tt{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--m);white-space:nowrap}
.sds-tt::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--m)}
.sds-pct{margin-left:0;font-size:12px;color:var(--chu2)}
.sds-qua-han{color:var(--loi);font-weight:600}
@media (max-width:900px){.sds-cong-cu{grid-template-columns:1fr}.sds-bang th:nth-child(3),.sds-bang td:nth-child(3),.sds-bang th:nth-child(5),.sds-bang td:nth-child(5){display:none}}

/* ===== SOP · MÀN CHI TIẾT v2 (Fable 24/09/2026 · Stitch 6-sop-luu-do) ===== */
.sct-vet{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--chu3);margin-bottom:8px}
.sct-vet button{border:0;background:transparent;font:inherit;color:var(--nhan);cursor:pointer;padding:0}
.sct-vet button:hover{text-decoration:underline}
.sct-vet code{font-family:"IBM Plex Mono",monospace;font-size:12px;background:var(--nhan-nhat);color:var(--nhan);border-radius:6px;padding:1px 7px}
.sct-dau{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;background:var(--the);border-radius:18px;padding:18px 20px;box-shadow:0 1px 2px rgba(20,20,40,.05)}
.sct-dau-trai{min-width:0;flex:1 1 520px}
.sct-dau h1{margin:0 0 10px;font-size:24px;line-height:1.25}
.sct-ma{font-family:"IBM Plex Mono",monospace;font-size:.78em;color:var(--nhan);margin-right:10px;font-weight:600}
.sct-chips{display:flex;flex-wrap:wrap;gap:6px}
.sct-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;background:var(--nen);color:var(--chu2);border-radius:999px;padding:4px 11px}
.sct-chip b{color:var(--chu);font-weight:600}
.sct-chip.tt i{width:8px;height:8px;border-radius:50%}
.sct-chip.tt{font-weight:600;color:var(--chu)}
.sct-chip.cap{background:color-mix(in srgb,var(--m) 12%,transparent);color:var(--m);font-weight:600}
.sct-chip.tot{background:color-mix(in srgb,var(--tot) 12%,transparent);color:var(--tot);font-weight:600}
.sct-chip.canh{background:color-mix(in srgb,var(--canh) 14%,transparent);color:var(--canh);font-weight:600}
.sct-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sct-the{display:flex;gap:4px;border-bottom:1px solid var(--vien);margin:16px 0 14px;overflow-x:auto}
.sct-the button{border:0;background:transparent;font:inherit;font-size:14px;color:var(--chu2);padding:10px 14px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:7px;align-items:center}
.sct-the button b{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;background:var(--nen);border-radius:999px;padding:1px 7px;color:var(--chu2)}
.sct-the button.chon{color:var(--nhan);font-weight:600;border-bottom-color:var(--nhan)}
.sct-the button.chon b{background:var(--nhan-nhat);color:var(--nhan)}
.sct-tt{background:var(--the);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.sct-tt-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px 18px;padding-bottom:12px;border-bottom:1px dashed var(--vien)}
.sct-tt-luoi label{display:flex;flex-direction:column;gap:3px;font-size:13.5px}
.sct-tt-luoi label>span,.sct-tt-dong>span{font-size:11.5px;color:var(--chu3);letter-spacing:.02em}
.sct-tt-dong{display:grid;grid-template-columns:160px 1fr;gap:12px;font-size:13.5px;align-items:baseline}
.sct-doc{background:var(--the);border-radius:16px;padding:16px 18px}
.sct-doc-dau{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.sct-doc-dau p{margin:2px 0 0;font-size:13px}
.sct-doc-ds{display:flex;flex-wrap:wrap;gap:8px}
.sct-nguoi{display:inline-flex;align-items:center;gap:8px;background:var(--nen);border-radius:999px;padding:4px 12px 4px 4px;font-size:13px}
.sct-nguoi i{font-style:normal;width:26px;height:26px;border-radius:50%;background:var(--nhan);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.sct-nguoi small{color:var(--chu3);font-size:11px}
@media (max-width:640px){.sct-dau{padding:14px}.sct-dau h1{font-size:19px}.sct-tt-dong{grid-template-columns:1fr;gap:2px}}

/* ===== ĐIỆN THOẠI: KHÔNG TỰ PHÓNG TO KHI CHẠM Ô NHẬP (24/09/2026) =====
   Safari iOS tự zoom khi ô nhập có cỡ chữ < 16px — mở form thêm/sửa là màn phóng to, phải tự thu nhỏ lại (chủ dự án).
   16px cho mọi ô nhập ở màn hẹp là cách chuẩn, không khoá zoom của người dùng. */
@media (max-width:760px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
}

/* ===== Thu ngân · hàng phiếu thu trong hộp chi tiết bảng kê (QA go-live 26/09/2026) =====
   Thêm nút "Hoàn tiền" làm hàng chật ở 390px: số phiếu gãy đôi, số tiền rớt dòng. Số không gãy; nhóm nút xuống dòng riêng. */
.tn-phieu-dong { flex-wrap: wrap; align-items: center; }
.tn-phieu-dong b.mono, .tn-phieu-dong .tien { white-space: nowrap; }
.tn-phieu-nut { display: flex; gap: 6px; }
@media (max-width: 560px) {
  .tn-phieu-nut { flex-basis: 100%; justify-content: flex-end; }
}
/* ===== Khách hàng: danh sách lọc được (26/09/2026) =====
   Chủ dự án: "mục khách hàng thì cần trình bày theo dạng danh sách để dễ dàng lọc khách". Không viền: dải lọc là một
   mảng nền nhạt, ô tìm và các ô chọn là viên trắng trên mảng ấy; ô đang lọc đổi sang tím nhạt để nhìn là biết bộ lọc
   nào đang bật. Bảng bỏ khung `.bang` (viền 1px) — chỉ còn nền trắng bo góc và vạch ngăn dòng cùng tông nền. */
.khl-loc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px;margin:0 0 12px;
  background:var(--chim);border-radius:13px}
.khl-loc .o-tim{flex:1 1 260px;min-width:0;width:auto;border:0;background:var(--the)}
.khl-chon,.khl-bat{width:auto;max-width:200px;border:0;border-radius:20px;background:var(--the);color:var(--chu2);
  padding:7px 12px;font-size:13px;cursor:pointer;text-overflow:ellipsis}
.khl-chon.bat,.khl-bat.bat{background:var(--nhan-nhat);color:var(--nhan);font-weight:600}
.khl-bo{border:0;background:none;color:var(--chu3);font-size:13px;padding:6px 8px;cursor:pointer;white-space:nowrap}
.khl-bo:hover{color:var(--nhan)}
.khl-kq{transition:opacity .15s}
.khl-kq.khl-dang{opacity:.55}
.bang.khl-bang{border:0;background:var(--the)}
.khl-bang th,.khl-bang td{padding:9px 10px;border-bottom:1px solid var(--chim)}
.khl-bang th:first-child,.khl-bang td:first-child{padding-left:14px}
.khl-hen .chip{font-size:11px;padding:2px 8px}
.khl-bang td{vertical-align:middle}
.khl-bang tr:last-child td{border-bottom:0}
.khl-ma{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--chu3);white-space:nowrap}
.khl-ten{min-width:170px}
.khl-ten b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.khl-ten small{display:block;color:var(--chu3);font-size:12.5px;font-variant-numeric:tabular-nums}
.khl-co{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.khl-co .chip{font-size:10.5px;padding:1px 7px}
.khl-nho{font-size:13px;color:var(--chu2);white-space:nowrap}
/* Nguồn và tên PC là chữ tự do, dài ngắn bất kỳ — cho xuống dòng thay vì đẩy cột Còn nợ ra khỏi màn laptop. */
.khl-bang td.khl-gian{white-space:normal;min-width:84px;max-width:130px}
.khl-hen{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:13px}
.khl-bang td.khl-no{color:var(--loi);font-weight:600}
.khl-trang{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:10px}
.khl-trang[hidden]{display:none}
.khl-dem{color:var(--chu3);font-size:13px;margin-right:4px;font-variant-numeric:tabular-nums}
.khl-trang button{width:36px;height:36px;border:0;border-radius:10px;background:var(--chim);color:var(--chu2);
  font-size:19px;line-height:1;cursor:pointer}
.khl-trang button:hover:not(:disabled){background:var(--nhan-nhat);color:var(--nhan)}
.khl-trang button:disabled{opacity:.4;cursor:default}
/* Màn hẹp: ô tìm chiếm trọn dòng đầu, các ô lọc xếp thành hàng viên nhỏ bên dưới (tự xuống dòng). */
.khl-loc-hang{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 auto;min-width:0}
.khl-chon,.khl-bat,.khl-bo{flex:none}
/* Màn hẹp: ô tìm chiếm trọn dòng đầu, các ô lọc thành MỘT hàng viên cuộn ngang bên dưới. */
@media (max-width:600px){
  .khl-loc{padding:8px;gap:6px}
  .khl-loc .o-tim{flex-basis:100%}
  .khl-loc-hang{flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:6px;scrollbar-width:none;padding-bottom:1px}
  .khl-loc-hang::-webkit-scrollbar{display:none}
  .khl-chon,.khl-bat{padding:6px 10px;max-width:none}
  .khl-dem{margin-right:auto}
  /* Ô đang lọc và nút Bỏ lọc dồn lên ĐẦU hàng cuộn — không thì bộ lọc đang bật nằm khuất bên phải, người dùng thấy
     "1 hồ sơ khớp" mà không biết vì sao. */
  .khl-loc-hang > span{order:-2}
  .khl-loc-hang > .bat{order:-1}
}

/* ===== Cảnh báo & chú thích vào icon ⚠ (26/09/2026) — không dải cố định trên màn làm việc ===== */
.vo-canh{position:relative;display:inline-flex}
.nut-canh{display:inline-flex;align-items:center;gap:5px;border:0;background:var(--the);color:var(--chu3);border-radius:999px;
  padding:6px 11px;font:inherit;font-size:13px;cursor:pointer;min-height:34px}
.nut-canh .so{font-weight:600;font-variant-numeric:tabular-nums}
.nut-canh.canh{background:var(--canh-nhat);color:var(--canh)}
.nut-canh.loi{background:var(--loi-nhat);color:var(--loi)}
.pop-canh{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(440px, calc(100vw - 32px));max-height:min(70vh, 560px);
  overflow:auto;background:var(--the);border-radius:14px;padding:12px;box-shadow:var(--bong)}
.pop-canh[hidden]{display:none}
.pop-canh .bao{margin-bottom:8px}
.pop-canh .bao:last-child,.pop-canh .mach-nuoc:last-child{margin-bottom:0}
.pop-canh .mach-nuoc{margin:0 0 8px;padding:8px 4px;max-width:none}
@media (max-width:560px){.pop-canh{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:70vh}}

/* ===== Lịch của tôi (Nhân sự của tôi) — dòng hôm nay ===== */
.lct-nay td{background:var(--nhan-nhat)}


/* ===== Thanh bên tím than (chủ dự án 27/09/2026: "menu nên dùng màu nền tím than, có lồng thêm yếu tố chuyển màu"; KHÔNG viền,
   KHÔNG vạch chỉ thị cạnh trái, icon MỘT tông thương hiệu) — số VIỆC thay số màn; chân: ảnh · tên · vị trí · tên đăng nhập ===== */
nav.ben{border-right:0;box-shadow:none;color:var(--ben-chu);
  background:radial-gradient(150% 34% at 105% 16%,var(--ben-lua1) 0%,transparent 62%),
    radial-gradient(130% 28% at -10% 46%,var(--ben-lua2) 0%,transparent 60%),
    radial-gradient(160% 30% at 110% 80%,var(--ben-lua2) 0%,transparent 64%),
    linear-gradient(168deg,var(--ben-nen2) 0%,var(--ben-nen) 52%,var(--ben-nen3) 100%)}
nav.ben .hieu,nav.ben .hieu .logo-d135{color:var(--ben-trang)}
nav.ben .hieu small,nav.ben .nhan-nhom{color:var(--ben-chu3)}
nav.ben a,nav.ben a.con,nav.ben .con-nhom a{color:var(--ben-chu2);box-shadow:none;border:0}
nav.ben a.nhom{color:var(--ben-chu);font-weight:600}
nav.ben a:hover{background:var(--ben-mo);color:var(--ben-trang)}
nav.ben a.chon,nav.ben a.nhom.co{background:var(--ben-chon);color:var(--ben-trang);box-shadow:none}
nav.ben a.chon::before,nav.ben a::before{display:none}
nav.ben a.nhom .mui{color:var(--ben-chu3)}
nav.ben .con-nhom{border-left:0}
nav.ben .bt-ben{width:30px;height:30px;padding:6px;border-radius:9px;opacity:1;stroke:var(--ben-icon);stroke-width:1.8;
  background:var(--ben-mo);box-shadow:none}
nav.ben a.chon .bt-ben,nav.ben a.nhom.co .bt-ben{background:var(--ben-dem);stroke:var(--ben-trang)}
nav.ben .dem.viec,nav.ben a .dem.viec,nav.ben a.nhom.co .dem.viec{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  display:inline-grid;place-items:center;background:var(--ben-dem);color:var(--ben-trang);font-size:11px;font-weight:700;font-family:inherit;line-height:1}
nav.ben .dem.viec.gap,nav.ben a.nhom.co .dem.viec.gap{background:var(--ben-gap)}
nav.ben a.chon .dem.viec{background:var(--ben-trang);color:var(--ben-nen)}
nav.ben.gon .muc-gon{color:var(--ben-icon)}
nav.ben.gon .muc-gon.chon{background:var(--ben-chon)}
nav.ben.gon .muc-gon .mg-dem{background:var(--ben-dem);color:var(--ben-trang)}
nav.ben.gon .muc-gon .mg-dem.gap{background:var(--ben-gap)}
nav.ben .nut-gon,nav.ben .chuong{background:var(--ben-mo);border:0;color:var(--ben-chu)}
nav.ben .chuong .dem{background:var(--ben-dem);color:var(--ben-trang)}
nav.ben .chuong.gap .dem{background:var(--ben-gap)}
nav.ben .toi.toi-the{margin-top:auto;display:flex;flex-direction:row;align-items:center;gap:8px;padding:10px;border-radius:14px;
  background:var(--ben-mo);border:0;box-shadow:none}
nav.ben .toi-mo{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:none;border:0;padding:0;margin:0;cursor:pointer;
  color:inherit;text-align:left;font:inherit}
nav.ben .toi-mo .avatar-pt{width:40px;height:40px;flex:none;font-size:15px;overflow:hidden;box-shadow:none}
nav.ben .toi-chu{display:flex;flex-direction:column;min-width:0;gap:1px}
nav.ben .toi-chu b{color:var(--ben-trang);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.ben .toi-chu .toi-vai{color:var(--ben-chu2);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.ben .toi-chu .toi-dn{color:var(--ben-chu3);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.ben .toi-nut{display:flex;flex-direction:column;gap:4px;flex:none}
nav.ben .toi .toi-ico{margin:0;width:30px;height:30px;padding:0;border:0;border-radius:9px;background:transparent;color:var(--ben-chu2);
  font-size:15px;line-height:1;cursor:pointer;display:grid;place-items:center}
nav.ben .toi .toi-ico:hover{background:var(--ben-mo);color:var(--ben-trang)}
nav.ben .toi .toi-ico.thoat:hover{color:var(--ben-trang);background:var(--ben-chon)}
nav.ben.gon .toi-gon{color:var(--ben-chu2);background:var(--ben-mo);border:0}
/* ===== Thanh bên — hiệu ứng mở rộng / thu gọn + vòng viền ảnh đại diện (27/09/2026). Chỉ chạy khi vừa bấm « / » (.vua-doi) hoặc khi
   ngăn kéo điện thoại mở (.khung.ben-mo); tắt hẳn với "giảm chuyển động". ===== */
@property --goc{syntax:'<angle>';inherits:false;initial-value:0deg}
.khung{transition:grid-template-columns .42s cubic-bezier(.22,.9,.26,1)}
nav.ben{position:sticky;top:0;isolation:isolate;overflow-x:hidden}   /* sticky giữ cột bám màn khi cuộn — relative làm lộ khoảng trắng dưới menu (27/09) */
nav.ben::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;transform:translateX(-120%);
  background:linear-gradient(112deg,transparent 28%,var(--ben-lua1) 48%,transparent 68%)}
nav.ben.vua-doi,.khung.ben-vua-mo nav.ben{animation:ben-nen .7s cubic-bezier(.2,.8,.2,1) both}
nav.ben.vua-doi::after,.khung.ben-vua-mo nav.ben::after{animation:ben-quet .95s cubic-bezier(.3,.7,.2,1) .05s both}
nav.ben.vua-doi>*,.khung.ben-vua-mo nav.ben>*{animation:ben-vao .5s cubic-bezier(.2,.8,.2,1) both}
nav.ben.vua-doi>:nth-child(2),.khung.ben-vua-mo nav.ben>:nth-child(2){animation-delay:.04s}
nav.ben.vua-doi>:nth-child(3),.khung.ben-vua-mo nav.ben>:nth-child(3){animation-delay:.08s}
nav.ben.vua-doi>:nth-child(4),.khung.ben-vua-mo nav.ben>:nth-child(4){animation-delay:.12s}
nav.ben.vua-doi>:nth-child(5),.khung.ben-vua-mo nav.ben>:nth-child(5){animation-delay:.16s}
nav.ben.vua-doi>:nth-child(6),.khung.ben-vua-mo nav.ben>:nth-child(6){animation-delay:.2s}
nav.ben.vua-doi>:nth-child(7),.khung.ben-vua-mo nav.ben>:nth-child(7){animation-delay:.24s}
nav.ben.vua-doi>:nth-child(8),.khung.ben-vua-mo nav.ben>:nth-child(8){animation-delay:.28s}
nav.ben.vua-doi>:nth-child(n+9),.khung.ben-vua-mo nav.ben>:nth-child(n+9){animation-delay:.32s}
nav.ben.vua-doi .bt-ben,.khung.ben-vua-mo nav.ben .bt-ben{animation:ben-icon .6s cubic-bezier(.3,1.35,.5,1) .12s both}
nav.ben.vua-doi .muc-ten,.khung.ben-vua-mo nav.ben .muc-ten{animation:ben-chu .5s cubic-bezier(.2,.8,.2,1) .18s both}
nav.ben.vua-doi :is(.hieu small,.toi-vai,.toi-dn,.nhan-nhom),.khung.ben-vua-mo nav.ben :is(.hieu small,.toi-vai,.toi-dn,.nhan-nhom){animation:ben-mo-phu .6s ease .3s both}
nav.ben.gon.vua-doi .muc-gon{animation:ben-icon .5s cubic-bezier(.3,1.35,.5,1) both}
@keyframes ben-nen{from{background-size:100% 170%;background-position:0 40%}to{background-size:100% 100%;background-position:0 0}}
@keyframes ben-quet{0%{opacity:0;transform:translateX(-120%)}30%{opacity:1}100%{opacity:0;transform:translateX(130%)}}
@keyframes ben-vao{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes ben-icon{from{opacity:0;transform:scale(.55) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes ben-chu{from{opacity:0;transform:translateX(-6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes ben-mo-phu{from{opacity:0;letter-spacing:.02em}to{opacity:1}}
/* vòng viền ảnh đại diện: dải chuyển màu thương hiệu quay một vòng rồi đứng lại khi menu mở */
nav.ben .toi-vong{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:none}
nav.ben .toi-vong .avatar-pt{width:38px;height:38px;margin:0}   /* .avatar-pt chung mang margin-right:4px → ảnh lệch trái 2px trong vòng (27/09/2026) */
nav.ben .toi-vong::before{content:'';position:absolute;inset:0;border-radius:50%;padding:2px;opacity:.9;
  background:conic-gradient(from var(--goc),var(--ben-dem),var(--ben-icon),var(--ben-lua1),var(--ben-dem));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
nav.ben .toi-vong::after{content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;opacity:0;box-shadow:0 0 16px 2px var(--ben-lua1)}
nav.ben.vua-doi .toi-vong::before,.khung.ben-vua-mo nav.ben .toi-vong::before{animation:vong-ve 1.2s cubic-bezier(.2,.8,.2,1) .2s both}
nav.ben.vua-doi .toi-vong::after,.khung.ben-vua-mo nav.ben .toi-vong::after{animation:vong-sang 1.4s ease .25s both}
nav.ben .toi-mo:hover .toi-vong::before{animation:vong-ve 1.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes vong-ve{from{--goc:-200deg;opacity:0;transform:scale(.82)}55%{opacity:1}to{--goc:160deg;opacity:.9;transform:none}}
@keyframes vong-sang{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.khung{transition:none}nav.ben,nav.ben *,nav.ben::after,nav.ben .toi-vong::before,nav.ben .toi-vong::after{animation:none!important}}
nav.ben{background-repeat:no-repeat}
/* ===== Thanh bên — trình diễn công nghệ (chủ dự án 27/09/2026: "như các hãng xe ô tô công nghệ hàng đầu, nhưng vẫn tinh tế, nhận diện
   thương hiệu"): lụa tím than trôi chậm · quầng sáng theo con trỏ · viên sáng cho mục đang chọn · nét icon tự vẽ khi mở. Chỉ tím/trắng. ===== */
nav.ben .ben-lua{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
nav.ben .ben-lua::before{content:'';position:absolute;inset:-45% -60%;will-change:transform;
  background:radial-gradient(60% 9% at 30% 30%,var(--ben-lua1) 0%,transparent 70%),
    radial-gradient(70% 7% at 60% 52%,var(--ben-lua2) 0%,transparent 72%),
    radial-gradient(55% 8% at 40% 74%,var(--ben-lua1) 0%,transparent 70%),
    radial-gradient(80% 12% at 70% 88%,var(--ben-lua2) 0%,transparent 72%);
  filter:blur(18px);transform:rotate(-16deg);animation:lua-troi 26s ease-in-out infinite alternate}
@keyframes lua-troi{0%{transform:rotate(-16deg) translate3d(-4%,-3%,0)}50%{transform:rotate(-11deg) translate3d(3%,2%,0)}
  100%{transform:rotate(-19deg) translate3d(-2%,4%,0)}}
nav.ben .ben-den{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .45s ease;
  background:radial-gradient(240px circle at var(--mx,-400px) var(--my,-400px),var(--ben-lua1),transparent 68%)}
nav.ben:hover .ben-den{opacity:.7}
nav.ben>:not(.ben-lua):not(.ben-den){position:relative;z-index:1}
nav.ben.vua-doi>.ben-lua,nav.ben.vua-doi>.ben-den,.khung.ben-vua-mo nav.ben>.ben-lua,.khung.ben-vua-mo nav.ben>.ben-den{animation-delay:0s}
nav.ben.vua-doi>.ben-lua,.khung.ben-vua-mo nav.ben>.ben-lua{animation:none}
nav.ben.vua-doi>.ben-den,.khung.ben-vua-mo nav.ben>.ben-den{animation:none}
/* viên sáng: mục đang chọn — mảng chuyển màu + quầng dịu, không viền, không vạch cạnh */
nav.ben a{transition:background-color .25s ease,color .25s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
nav.ben a:hover{transform:translateX(2px)}
nav.ben a.chon,nav.ben a.nhom.co{background:linear-gradient(100deg,var(--ben-chon),var(--ben-mo));
  box-shadow:0 10px 26px -14px var(--ben-dem)}
nav.ben a:hover .bt-ben{background:var(--ben-chon);stroke:var(--ben-trang)}
nav.ben .bt-ben{transition:background-color .25s ease,stroke .25s ease}
nav.ben a.chon .bt-ben{box-shadow:0 0 18px -2px var(--ben-dem)}
/* nét icon tự vẽ khi thanh bên mở */
nav.ben.vua-doi .bt-ben path,.khung.ben-vua-mo nav.ben .bt-ben path{stroke-dasharray:1;stroke-dashoffset:1;animation:ve-net .95s cubic-bezier(.45,0,.2,1) .18s forwards}
@keyframes ve-net{to{stroke-dashoffset:0}}
/* số việc: viên có quầng; việc gấp thở nhẹ */
nav.ben .dem.viec{box-shadow:0 0 12px -3px var(--ben-dem)}
nav.ben .dem.viec.gap{animation:dem-tho 2.4s ease-in-out infinite}
@keyframes dem-tho{0%,100%{box-shadow:0 0 0 0 var(--ben-gap)}50%{box-shadow:0 0 12px 1px var(--ben-gap)}}
/* logo lấp lánh một lượt khi mở */
nav.ben.vua-doi .hieu .logo-d135,.khung.ben-vua-mo nav.ben .hieu .logo-d135{animation:logo-sang 1.1s ease .1s both}
@keyframes logo-sang{0%{opacity:0;filter:blur(4px) brightness(1.8)}60%{opacity:1;filter:blur(0) brightness(1.4)}100%{filter:none}}
/* vòng ảnh đại diện: quay chậm khi rê vào thẻ người dùng */
nav.ben .toi-the:hover .toi-vong::before{animation:vong-quay 3.2s linear infinite}
@keyframes vong-quay{from{--goc:0deg}to{--goc:360deg}}
@media (prefers-reduced-motion:reduce){nav.ben .ben-lua::before,nav.ben .dem.viec.gap,nav.ben .toi-the:hover .toi-vong::before,
  nav.ben .bt-ben path{animation:none!important;stroke-dashoffset:0!important}nav.ben a:hover{transform:none}}
/* ===== Thông báo: mục riêng đầu thanh bên + Trung tâm thông báo (27/09/2026) — tách khỏi vùng thương hiệu, icon nét cùng bộ, đầu trung tâm
   mang lụa tím than của thanh bên; thẻ không viền, phân biệt bằng mảng nền; không vạch cạnh trái. ===== */
nav.ben .muc-tb{margin:2px 0 4px;font-weight:600;color:var(--ben-chu)}
nav.ben .muc-tb.gap .bt-ben{background:var(--ben-chon);stroke:var(--ben-trang);animation:tb-rung 3.2s ease-in-out infinite}
@keyframes tb-rung{0%,86%,100%{transform:none}89%{transform:rotate(-12deg)}92%{transform:rotate(10deg)}95%{transform:rotate(-6deg)}}
nav.ben.gon .muc-tb{position:relative}
.tb-lop{background:var(--ben-mo);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);justify-content:flex-end}
.tb-ngan{border-radius:18px 0 0 18px;overflow:hidden;box-shadow:var(--bong);animation:tb-truot .42s cubic-bezier(.2,.8,.2,1) both}
@keyframes tb-truot{from{transform:translateX(40px);opacity:0}to{transform:none;opacity:1}}
.tb-ngan>header{border-bottom:0;padding:22px 20px 18px;color:var(--ben-trang);
  background:radial-gradient(140% 90% at 100% 0%,var(--ben-lua1) 0%,transparent 60%),linear-gradient(160deg,var(--ben-nen2),var(--ben-nen))}
.tb-ngan>header b{color:var(--ben-trang)}
.tb-ngan>header small{color:var(--ben-chu2)}
.tb-ngan .tb-dong-nut{border:0;background:var(--ben-mo);color:var(--ben-chu)}
.tb-ngan .tb-dong-nut:hover{background:var(--ben-chon);color:var(--ben-trang)}
.tb-loc{display:flex;gap:6px;padding:12px 16px 4px;overflow-x:auto}
.tb-loc-nut{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;
  background:var(--chim);color:var(--chu2);cursor:pointer}
.tb-loc-nut span{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;opacity:.75}
.tb-loc-nut.chon{background:var(--nhan);color:var(--ben-trang)}
.tb-loc-nut.gap:not(.chon) span{color:var(--loi);opacity:1}
.tb-ngan .tb-khoi h4 span{background:var(--chim)}
.tb-ngan .tb-dong{border-left:0;margin:4px 12px;padding:12px;border-radius:14px;background:var(--chim);align-items:center;
  transition:background-color .2s ease,transform .2s ease}
.tb-ngan .tb-dong:hover{background:var(--nhan-nhat);transform:translateX(-2px)}
.tb-ngan .tb-ico{grid-column:1;display:grid;place-items:center}
.tb-ngan .tb-ico .bt-ben{width:34px;height:34px;padding:7px;border-radius:10px;fill:none;stroke:var(--nhan);stroke-width:1.8;
  background:var(--nhan-nhat)}
.tb-ngan .tb-gap-dong .tb-ico .bt-ben,.tb-ngan .tb-dong.tb-gap .tb-ico .bt-ben{background:var(--loi-nhat);stroke:var(--loi)}
.tb-ngan .tb-khoi{padding-top:10px}
.tb-ngan .tb-cai{padding:10px 16px 16px;background:var(--the)}
.tb-ngan .tb-cai .tb-day{border-radius:12px;background:var(--chim);border:0}
@media (max-width:560px){.tb-ngan{border-radius:18px 18px 0 0;height:88vh;margin-top:auto;width:100vw}.tb-lop{align-items:flex-end}
  @keyframes tb-truot{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}}
@media (prefers-reduced-motion:reduce){.tb-ngan{animation:none}nav.ben .muc-tb.gap .bt-ben{animation:none}}
/* ===== Thanh bên — vùng THƯƠNG HIỆU PHÒNG KHÁM (27/09/2026): logo · tên · slogan của phòng khám; dòng nhẹ "design by …" về app;
   thu gọn vẫn giữ logo trên cùng. Hiệu ứng khi menu mở: logo bật sáng + vệt quét, tên hiện rõ dần, slogan lộ dần, dòng app sau cùng. ===== */
nav.ben .hieu.hieu-pk{display:flex;align-items:flex-start;gap:8px;padding:6px 6px 4px}
nav.ben .pk-thuong-hieu{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
nav.ben .pk-logo{position:relative;width:48px;height:48px;border-radius:15px;flex:none;display:grid;place-items:center;overflow:hidden;
  background:linear-gradient(140deg,var(--ben-dem),var(--ben-nen2));box-shadow:0 10px 24px -12px var(--ben-dem)}
nav.ben .pk-logo.co-anh{background:var(--ben-trang)}
nav.ben .pk-logo img{width:100%;height:100%;object-fit:cover;display:block}
nav.ben .pk-logo-chu{color:var(--ben-trang);font-weight:800;font-size:16px;letter-spacing:.02em}
nav.ben .pk-logo::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transform:translateX(-120%);
  background:linear-gradient(115deg,transparent 30%,var(--ben-trang) 50%,transparent 70%)}
nav.ben .pk-chu{display:flex;flex-direction:column;min-width:0;gap:3px}
nav.ben .pk-ten{color:var(--ben-trang);font-size:15.5px;font-weight:700;line-height:1.25;letter-spacing:-.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
nav.ben .pk-slogan{color:var(--ben-chu2);font-size:12px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
nav.ben .app-ky{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:2px 12px 12px;margin-bottom:4px;
  font-size:10.5px;letter-spacing:.03em;color:var(--ben-chu3)}
nav.ben .app-ky b{font-weight:600;color:var(--ben-chu2)}
nav.ben .app-ky span+span::before{content:'·';margin-right:8px;opacity:.6}
nav.ben .pk-gon{display:grid;place-items:center;padding:2px 0 6px}
nav.ben .pk-gon .pk-logo{width:36px;height:36px;border-radius:11px}
nav.ben .pk-gon .pk-logo-chu{font-size:12.5px}
/* hiệu ứng khi mở */
nav.ben.vua-doi .pk-logo,.khung.ben-vua-mo nav.ben .pk-logo{animation:pk-logo-vao .8s cubic-bezier(.3,1.3,.5,1) both}
nav.ben.vua-doi .pk-logo::after,.khung.ben-vua-mo nav.ben .pk-logo::after{animation:pk-quet 1s cubic-bezier(.3,.7,.2,1) .35s both}
nav.ben.vua-doi .pk-ten,.khung.ben-vua-mo nav.ben .pk-ten{animation:ben-chu .6s cubic-bezier(.2,.8,.2,1) .18s both}
nav.ben.vua-doi .pk-slogan,.khung.ben-vua-mo nav.ben .pk-slogan{animation:pk-lo .9s cubic-bezier(.2,.8,.2,1) .32s both}
nav.ben.vua-doi .app-ky,.khung.ben-vua-mo nav.ben .app-ky{animation:ben-mo-phu .7s ease .5s both}
@keyframes pk-logo-vao{0%{opacity:0;transform:scale(.6) rotate(-8deg);box-shadow:0 0 0 0 var(--ben-dem)}
  60%{opacity:1;transform:scale(1.06);box-shadow:0 0 28px 4px var(--ben-lua1)}100%{transform:none;box-shadow:0 10px 24px -12px var(--ben-dem)}}
@keyframes pk-quet{0%{opacity:0;transform:translateX(-120%)}35%{opacity:.55}100%{opacity:0;transform:translateX(130%)}}
@keyframes pk-lo{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){nav.ben .pk-logo,nav.ben .pk-logo::after,nav.ben .pk-ten,nav.ben .pk-slogan,nav.ben .app-ky{animation:none!important}}
/* thẻ thương hiệu: hàng logo + nút thu gọn; tên · slogan trải hết chiều ngang; hai dòng nhẹ về app */
nav.ben .hieu.hieu-pk{align-items:center;padding:6px 6px 10px}
nav.ben .pk-logo{width:52px;height:52px;border-radius:16px}
nav.ben>.pk-chu{padding:0 12px;gap:4px}
nav.ben>.pk-chu .pk-ten{font-size:17px;-webkit-line-clamp:2}
nav.ben>.pk-chu .pk-slogan{font-size:12.5px}
nav.ben .app-ky{flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px 12px}
nav.ben .app-ky span+span::before{content:none}
/* dải thu gọn: icon đủ lớn, không ô nền lồng trong ô */
nav.ben.gon .muc-gon{width:40px;height:40px;border-radius:12px;position:relative}
nav.ben.gon .muc-gon .bt-ben{width:22px;height:22px;padding:0;background:none;box-shadow:none}
nav.ben.gon .muc-gon.chon .bt-ben{stroke:var(--ben-trang)}
nav.ben.gon .muc-gon.chon{background:var(--ben-dem);box-shadow:0 8px 20px -10px var(--ben-dem)}
nav.ben.gon .muc-gon:hover{background:var(--ben-mo)}
nav.ben.gon .muc-gon .mg-dem{top:-3px;right:-4px}
@media (max-width:820px){nav.ben{position:fixed}}   /* màn hẹp: thanh bên là ngăn kéo cố định (luật .ben ở dòng ~2511) */

/* 27/09/2026 (ảnh iPhone của chủ dự án) — ① NỀN ĐỨT NGANG: lớp lụa/đèn `inset:0` trong khung CUỘN chỉ phủ một khung nhìn đầu rồi trôi
   theo nội dung → phần dưới lộ nền tối thành một vệt ngang. Ghim hai lớp vào khung nhìn (sticky, cao đúng khung, không chiếm chỗ).
   ② Tên dài ("BS. Nguyễn Hồng Châu") bị cắt một dòng → cho hai dòng. */
nav.ben>.ben-lua,nav.ben>.ben-den{position:sticky;inset:auto;top:-16px;display:block;flex:none;width:auto;
  margin:-16px -24px 0;height:calc(100vh + 32px);height:calc(100dvh + 32px);margin-bottom:calc(-100vh - 16px);margin-bottom:calc(-100dvh - 16px)}   /* -16 trên + (100dvh+32) − (100dvh+16) = 0: lớp nền không chiếm chỗ, không kéo logo lên (27/09) */
nav.ben .toi-chu b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
nav.ben .toi .toi-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
nav.ben{scrollbar-width:thin;scrollbar-color:var(--ben-mo) transparent}   /* thanh cuộn mặc định sáng trắng trên nền tím than */

/* ===== THANH XOAY đáy màn hình — điện thoại (27/09/2026, chủ dự án duyệt bản thử: thấp nhất có thể, nền tím nhạt, icon rõ,
   tên màn chỉ hiện khi nhấn giữ). Máy tính / máy tính bảng không hiện. ===== */
.xoay,.xoay-bong{display:none}
@media (max-width:820px){
  /* KIỂU C "kính lúp" (chủ dự án chọn 27/09): dải bo góc nổi cách mép; icon phóng dần khi vào tâm như Dock; icon ở tâm đứng trên thẻ
     trắng nhô lên khỏi dải, kèm chấm tím. clip-path thay overflow:hidden để thẻ trắng + icon nhô được lên trên mép dải. */
  .xoay{display:block;position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:40;height:56px;border-radius:20px;
    background:linear-gradient(180deg,var(--xoay1) 0%,var(--xoay2) 100%);box-shadow:0 16px 30px -18px var(--xoay-bong);
    touch-action:none;user-select:none;-webkit-user-select:none;clip-path:inset(-16px 0 -30px 0 round 20px)}
  .xoay[hidden]{display:none}
  .xoay-ho{position:absolute;left:50%;top:-10px;width:52px;height:56px;margin-left:-26px;border-radius:17px;pointer-events:none;
    background:var(--ben-trang);box-shadow:0 10px 22px -10px var(--xoay-bong);transition:transform .2s}
  .xoay-ho::after{content:'';position:absolute;left:50%;bottom:6px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--xoay-tim)}
  .xoay.do .xoay-ho{transform:scale(1.08)}
  .xoay-ho.nay{animation:xoay-nay .16s cubic-bezier(.3,1.6,.5,1)}   /* nấc: viên tím nảy khi một icon vào tâm */
  .xoay-dai{position:absolute;left:0;top:0;height:100%;will-change:transform}
  .xoay-dai.muot{transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .xoay-muc{position:absolute;top:8px;width:44px;height:40px;margin:0 0 0 -22px;padding:0;border:0;border-radius:14px;background:none;
    display:grid;place-items:center;color:var(--xoay-icon);box-shadow:none;transition:opacity .2s}
  .xoay-muc .bt-xoay{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 60%}
  .xoay-dai.muot .bt-xoay{transition:transform .26s cubic-bezier(.2,.8,.2,1)}
  .xoay-muc.giua{color:var(--xoay-tim2)}
  .xoay-dem{position:absolute;top:1px;right:3px;min-width:14px;height:14px;padding:0 4px;border-radius:7px;background:var(--ben-gap);color:var(--ben-trang);
    font-size:9px;font-weight:700;line-height:14px;text-align:center;box-shadow:0 0 0 2px var(--xoay1)}
  .xoay-dem[hidden]{display:none}
  .xoay-vach{display:none}
  /* bóng chữ khi nhấn giữ — "vừa đủ nhìn" (chủ dự án 27/09): viên kính sáng một dòng, không khối tối */
  .xoay-bong{display:flex;align-items:baseline;gap:6px;white-space:nowrap;position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:41;
    padding:6px 13px;border-radius:999px;background:var(--xoay-kinh);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
    color:var(--xoay-icon);pointer-events:none;opacity:0;transform:translate(-50%,6px);transition:opacity .15s,transform .15s;box-shadow:0 6px 18px -10px var(--xoay-bong)}
  .xoay-bong.hien{opacity:1;transform:translate(-50%,0)}
  .xoay-bong small{color:var(--xoay-phu);font-size:10.5px;font-weight:500}
  .xoay-bong small::after{content:' ·'}
  .xoay-bong b{font-size:13px;font-weight:600}
  .xoay-muc:focus{outline:none}
  .xoay-muc:focus-visible{outline:2px solid var(--xoay-tim);outline-offset:2px}
  /* nội dung chừa chỗ cho thanh; nút nổi đáy (về chat, trợ lý) đứng trên thanh */
  body.co-xoay main.chinh{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  /* Tin nhắn cao cố định theo khung nhìn → trừ chiều cao thanh để ô nhập tin đứng trên thanh */
  body.co-xoay .cht-khung,body.co-xoay .cht-khung.mo-phu{height:calc(100dvh - 70px - env(safe-area-inset-bottom,0px))}
  body.co-xoay main.chinh:has(.cht-khung){padding-bottom:0}
  /* CỐ ĐỊNH như app thật (chủ dự án 27/09): trang không trượt ngang, không nảy, không phóng to; bảng rộng cuộn trong khung riêng */
  html,body{overflow-x:hidden;overflow-x:clip;overscroll-behavior:none}   /* clip: cắt tràn ngang mà KHÔNG biến body thành khung cuộn (giữ sticky) */
  html{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
  .vo-app{overflow-x:clip}
}
@media (prefers-reduced-motion:reduce){.xoay-dai.muot,.xoay-muc,.xoay-muc .bt-xoay,.xoay-bong,.xoay-ho{transition:none}}

/* Đổi màn trên điện thoại: nội dung mới hiện dần + trượt nhẹ (theo hướng lướt thanh xoay) — `datMuot` gắn/gỡ lớp `vao-man`. */
@media (max-width:820px){main.chinh.vao-man{animation:man-vao .28s cubic-bezier(.2,.8,.2,1) both}}
@keyframes man-vao{from{opacity:0;transform:translate(var(--vao-x,0px),8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){main.chinh.vao-man{animation:none}}

@keyframes xoay-nay{0%{transform:scale(.9)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.xoay-ho.nay{animation:none}}

/* Trung tâm thông báo: nút "Xử lý ›" rõ trên mỗi dòng; dòng "đang xem một nhóm"; con số trên menu bấm được (27/09/2026) */
.tb-di{font-size:12px;font-weight:700;color:var(--xoay-tim);white-space:nowrap}
.tb-bo-loc{display:block;margin-top:4px;padding:0;border:0;background:none;color:var(--xoay-tim);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
nav.ben .dem.viec,nav.ben .mg-dem.viec{cursor:pointer}
.tb-than small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* mô tả tối đa 2 dòng — hành động mới là chính */

/* Nút quay lại Trung tâm thông báo sau khi bấm "Xử lý" + khối đích sáng nhẹ (27/09/2026) */
.tb-ve{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:45;display:flex;align-items:center;gap:2px;padding:4px;border-radius:999px;
  background:var(--ben-nen);box-shadow:0 12px 28px -12px var(--xoay-bong);animation:tb-ve-vao .28s cubic-bezier(.2,.8,.2,1) both}
.tb-ve button{border:0;background:none;color:var(--ben-trang);font:inherit;cursor:pointer;box-shadow:none}
.tb-ve-mo{padding:8px 14px;font-size:13px;font-weight:600;border-radius:999px}
.tb-ve-mo:hover{background:var(--ben-mo)}
.tb-ve-tat{width:30px;height:30px;border-radius:50%;font-size:12px;opacity:.7}
@media (max-width:820px){body.co-xoay .tb-ve{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
@keyframes tb-ve-vao{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translateX(-50%)}}
.tb-dich{animation:tb-dich 1.6s ease both}
@keyframes tb-dich{0%,40%{box-shadow:0 0 0 3px var(--xoay-tim)}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.tb-ve,.tb-dich{animation:none}}

/* Tin nhắn trên điện thoại (27/09/2026, ảnh chủ dự án): TRONG một cuộc trò chuyện thì ẩn thanh xoay như app nhắn tin thật — thanh chỉ
   ở danh sách hội thoại; bàn phím mở thì ẩn thanh xoay và khung chat cao đúng phần nhìn thấy để ô gõ nằm ngay trên bàn phím. */
@media (max-width:820px){
  body:has(.cht-khung.mo-hoi) .xoay,body.ban-phim .xoay,body:has(.cht-khung.mo-hoi) .xoay-bong,body.ban-phim .xoay-bong{display:none}
  /* trong cuộc trò chuyện: cao ĐÚNG vùng nhìn thấy (visualViewport, chat.js) — 100dvh không co khi bàn phím iOS mở nên ô gõ bị che
     (chủ dự án 27/09, lần 2). Đệm thanh home do ô soạn tự lo — khung không cộng thêm lần nữa. */
  body.co-xoay:has(.cht-khung.mo-hoi) .cht-khung{height:var(--cht-vh,100dvh);padding-bottom:0}
  body.ban-phim .cht-khung,body.ban-phim .cht-khung.mo-phu{height:var(--cht-vh,var(--vv,100dvh))!important;padding-bottom:0}
  body.ban-phim .tb-ve{display:none}
}

/* ===== LD-v3 lịch đi làm mới (27/09/2026 — chủ dự án duyệt bản thử; web/lichdilam.js tiền tố ldx-) ===== */
.ldx-dau{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.ldx-dau h2{margin:0;font-size:26px;letter-spacing:-.02em}
.ldx-gian{flex:1}
.ldx-doan{display:inline-flex;align-items:center;gap:2px;background:var(--the);border-radius:12px;padding:3px;box-shadow:var(--bong)}
.ldx-doan button{border:0;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--chu2);padding:7px 12px;border-radius:9px;cursor:pointer}
.ldx-doan button[aria-pressed="true"]{background:var(--nhan);color:var(--ben-trang)}
.ldx-luot button{color:var(--chu);padding:7px 10px}
.ldx-luot .ldx-hn{color:var(--nhan)}
.ldx-nhan-ngay{font-size:13px;font-weight:600;color:var(--chu);padding:0 10px 0 4px;white-space:nowrap}
.ldx-dai-so{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ldx-so{display:flex;align-items:baseline;gap:6px;background:var(--the);border:0;border-radius:14px;padding:10px 14px;font:inherit;color:var(--chu);box-shadow:var(--bong)}
.ldx-so b{font-size:20px;font-weight:600}
.ldx-so span{font-size:12.5px;color:var(--chu2)}
.ldx-so.canh{background:var(--canh-nhat)} .ldx-so.canh b{color:var(--canh)}
button.ldx-so{cursor:pointer}
.ldx-luoi{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.ldx-chinh{min-width:0}
.ldx-phai{display:flex;flex-direction:column;gap:12px}
@media (max-width:1100px){.ldx-luoi{grid-template-columns:minmax(0,1fr)}}
.ldx-khoi h3{margin:0 0 8px;font-size:14px;display:flex;align-items:center;gap:8px}
.ldx-dem{font-size:11px;font-weight:700;background:var(--canh-nhat);color:var(--canh);border-radius:999px;padding:1px 8px}
.ldx-dong{display:flex;align-items:center;gap:10px;padding:7px 0}
.ldx-dong .avatar-pt{width:30px;height:30px;flex:none}
.ldx-tt{flex:1;min-width:0}
.ldx-tt b{display:block;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldx-tt small{display:block;font-size:11.5px;color:var(--chu2)}
.ldx-chip{font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;background:var(--chim);color:var(--chu2);white-space:nowrap}
.ldx-chip.canh{background:var(--canh-nhat);color:var(--canh)}
.ldx-chip.tot{background:var(--tot-nhat);color:var(--tot)}
.ldx-chip.thieu{background:var(--loi-nhat);color:var(--loi)}
/* NGÀY — dòng thời gian (tên tổ | trục 7h–21h) */
.ldx-tl{--ldx-ten:190px;padding:14px}
.ldx-hang{display:grid;grid-template-columns:var(--ldx-ten) minmax(0,1fr);align-items:center;min-height:46px;border-radius:12px}
.ldx-than{position:relative}
.ldx-than>.ldx-hang:nth-child(odd){background:var(--chim)}
.ldx-hang-gio{min-height:18px;margin-bottom:4px}
.ldx-gio{position:relative;height:18px}
.ldx-gio span{position:absolute;transform:translateX(-50%);font-size:10.5px;color:var(--chu3);font-variant-numeric:tabular-nums}
.ldx-ten{display:flex;flex-direction:column;gap:1px;padding:6px 10px;min-width:0;border:0;background:none;font:inherit;color:var(--chu);text-align:left}
button.ldx-ten{cursor:pointer}
.ldx-ten b{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldx-ten small{font-size:11.5px;color:var(--chu2);display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.ldx-ten small i{font-style:normal;font-weight:700}
.ldx-tt-thieu{color:var(--loi)} .ldx-tt-du{color:var(--tot)} .ldx-tt-khong{color:var(--chu3)}
.ldx-hang.mo>.ldx-ten b::after{content:' ▾';color:var(--chu3);font-weight:500}
.ldx-con .ldx-ten{padding-left:22px}
.ldx-con .ldx-ten b{font-weight:500}
.ldx-truc{position:relative;height:46px}
.ldx-luoi-gio{position:absolute;top:6px;bottom:6px;width:1px;background:color-mix(in srgb,var(--chu3) 16%,transparent)}
.ldx-thanh{position:absolute;top:9px;height:28px;border-radius:9px;display:flex;align-items:center;gap:4px;padding:0 6px;overflow:hidden;white-space:nowrap;font-size:11.5px;font-weight:600}
.ldx-sang{background:var(--nhan-nhat);color:var(--nhan)}
.ldx-chieu{background:color-mix(in srgb,var(--nhan) 20%,var(--the));color:var(--chu)}
.ldx-toi{background:var(--xoay-icon);color:var(--ben-trang)}
.ldx-hc{background:var(--sop-lien-ket-nhat);color:var(--sop-lien-ket)}
.ldx-thanh.thieu{box-shadow:inset 0 0 0 2px var(--loi)}
.ldx-so-o{margin-left:auto;font-size:10.5px;opacity:.85}
.ldx-nhan-hc{font-size:11px}
.ldx-gio-o{font-size:10.5px}
.ldx-chong{display:inline-flex;flex:none}
.ldx-chong .avatar-pt{width:20px;height:20px;margin-left:-6px;box-shadow:0 0 0 2px var(--the)}
.ldx-chong .avatar-pt:first-child{margin-left:0}
.ldx-thanh>.avatar-pt{width:20px;height:20px;flex:none}
.ldx-dks{display:inline-flex;gap:3px}
.ldx-dk{font-size:10px;line-height:16px;min-width:16px;text-align:center;border-radius:999px;background:var(--chim);color:var(--chu2)}
.ldx-dk.cho{background:var(--canh-nhat);color:var(--canh)}
.ldx-nghi{opacity:.6}
.ldx-nghi-nhan{position:absolute;left:8px;top:15px;font-size:12px;color:var(--chu2)}
.ldx-bay{position:absolute;top:-4px;bottom:-4px;left:calc(var(--ldx-ten) + (100% - var(--ldx-ten)) * var(--f));width:2px;background:var(--loi);border-radius:2px;pointer-events:none;z-index:2}
.ldx-bay::before{content:'';position:absolute;top:-3px;left:-3px;width:8px;height:8px;border-radius:50%;background:var(--loi)}
.ldx-chu-giai{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font-size:11.5px;color:var(--chu2)}
.ldx-chu-giai>span{display:inline-flex;align-items:center;gap:6px}
.ldx-chu-giai i{display:inline-block;width:14px;height:10px;border-radius:3px}
.ldx-cg-thieu{box-shadow:inset 0 0 0 2px var(--loi)}
.ldx-chu-giai i.ldx-cg-bay{width:2px;background:var(--loi)}
/* TUẦN — độ phủ ca */
.ldx-tuan-the{padding:12px;overflow-x:auto}
.ldx-tuan{display:grid;grid-template-columns:190px repeat(7,minmax(0,1fr));gap:4px;min-width:640px}
.ldx-tuan-h{font-size:11px;color:var(--chu3);text-align:center;padding:4px 0}
.ldx-tuan-h b{display:block;font-size:14px;color:var(--chu)}
.ldx-tuan-h.nay b{color:var(--nhan)}
.ldx-tuan-bp{padding:8px 10px;font-size:13px;font-weight:600;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ldx-tuan-bp small{font-weight:500;color:var(--chu2);font-size:11px}
.ldx-toanpk{font-weight:700}
.ldx-o-tuan{border:0;font:inherit;color:var(--chu);background:var(--chim);border-radius:10px;padding:6px;display:flex;flex-direction:column;gap:3px;justify-content:center;cursor:pointer;min-height:52px}
.ldx-o-tuan.nay{background:var(--nhan-nhat)}
.ldx-o-tuan small{font-size:10px;color:var(--chu2);text-align:center}
.ldx-o-tong b{font-size:14px;text-align:center}
.ldx-vach{display:block;height:7px;border-radius:4px}
.ldx-vach.du{background:var(--tot)} .ldx-vach.vua{background:var(--canh)} .ldx-vach.thieu{background:var(--loi)} .ldx-vach.khong{background:color-mix(in srgb,var(--chu3) 22%,transparent)}
/* THÁNG — lịch */
.ldx-thang{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ldx-thang-h{font-size:11px;font-weight:700;color:var(--chu3);text-align:center;letter-spacing:.06em}
.ldx-o-thang{border:0;font:inherit;color:var(--chu);text-align:left;background:var(--the);border-radius:12px;padding:8px;min-height:86px;display:flex;flex-direction:column;gap:6px;cursor:pointer;box-shadow:var(--bong);min-width:0}
.ldx-o-thang.ngoai{opacity:.35}
.ldx-o-thang.nay{box-shadow:inset 0 0 0 2px var(--nhan)}
.ldx-o-thang.le .ldx-n{color:var(--loi)}
.ldx-n{font-weight:700;font-size:14px}
.ldx-phu{display:block;width:100%;height:6px;border-radius:3px;background:color-mix(in srgb,var(--chu3) 18%,transparent);overflow:hidden}
.ldx-phu .ldx-vach{height:100%;border-radius:3px}
.ldx-pt{font-size:10.5px;color:var(--chu2)}
.ldx-cham{display:flex;gap:4px;flex-wrap:wrap}
.ldx-cham span{font-size:10.5px;border-radius:999px;padding:1px 6px}
.ldx-c-nghi{background:var(--nhan-nhat);color:var(--nhan)}
.ldx-c-cho{background:var(--canh-nhat);color:var(--canh)}
/* ĐIỆN THOẠI */
@media (max-width:560px){
  .ldx-dau h2{font-size:22px;flex:1 1 100%}
  .ldx-dau .ldx-gian{display:none}
  .ldx-che,.ldx-luot{flex:none}
  .ldx-luot .ldx-nhan-ngay{padding-right:6px}
  .ldx-so{padding:8px 12px}
  .ldx-so b{font-size:17px}
  .ldx-tuan-the{padding:8px}
  .ldx-tuan{grid-template-columns:72px repeat(7,minmax(0,1fr));gap:3px;min-width:0}
  .ldx-tuan-bp{font-size:11px;padding:6px 4px}
  .ldx-tuan-bp small{display:none}
  .ldx-o-tuan{min-height:44px;padding:5px 4px}
  .ldx-o-thang{min-height:54px;padding:6px 4px;gap:4px;align-items:center}
  .ldx-thang{gap:4px}
  .ldx-cham span{padding:0;width:6px;height:6px;font-size:0}
  .ldx-c-nghi{background:var(--nhan)} .ldx-c-cho{background:var(--canh)}
}
.ldx-m-toi{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding:14px;border-radius:18px;color:var(--ben-trang);
  background:linear-gradient(135deg,var(--xoay-tim),var(--xoay-tim2));box-shadow:0 14px 28px -18px var(--xoay-bong-tim)}
.ldx-m-toi .avatar-pt{width:36px;height:36px;flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.ldx-m-toi .ldx-tt b{font-size:15px;white-space:normal}
.ldx-m-toi .ldx-tt small{color:inherit;opacity:.85;font-size:12px}
.ldx-m-toi-nut{margin-left:auto;flex:none;border:0;border-radius:10px;background:rgba(255,255,255,.2);color:inherit;font:inherit;font-size:12px;font-weight:700;padding:7px 11px;cursor:pointer}
.ldx-m-bp{background:var(--the);border-radius:16px;padding:12px;margin-bottom:8px;box-shadow:var(--bong)}
.ldx-m-bp-dau{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;font:inherit;color:var(--chu);padding:0;text-align:left;cursor:pointer}
.ldx-m-bp-dau b{flex:1;font-size:14px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ldx-m-truc{position:relative;height:22px;margin-top:10px;background:var(--chim);border-radius:7px}
.ldx-m-truc .ldx-thanh{top:3px;height:16px;padding:0;border-radius:5px}
.ldx-bay-m{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--loi);border-radius:2px}
.ldx-m-gio{position:relative;height:14px;margin-top:3px}
.ldx-m-gio span{position:absolute;transform:translateX(-50%);font-size:9.5px;color:var(--chu3)}
.ldx-m-gio span:first-child{transform:none}
.ldx-m-gio span:last-child{transform:translateX(-100%)}
.ldx-m-ds{margin-top:8px}
.ldx-m-muc{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--chu3);margin:14px 2px 8px}
.ldx-m-tuan-toi{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:6px}
.ldx-m-tuan-toi button{border:0;font:inherit;color:var(--chu);background:var(--the);border-radius:12px;padding:8px 2px;text-align:center;cursor:pointer;box-shadow:var(--bong)}
.ldx-m-tuan-toi button.nay{background:var(--nhan);color:var(--ben-trang)}
.ldx-m-tuan-toi button.nghi{opacity:.6}
.ldx-m-tuan-toi span{display:block;font-size:10px;opacity:.7}
.ldx-m-tuan-toi b{display:block;font-size:14px}
.ldx-m-tuan-toi i{display:block;font-style:normal;font-size:9.5px;margin-top:2px;font-weight:700}
@media (max-width:560px){.ldx-tl{--ldx-ten:96px}}
/* nút + đăng ký nổi trên thanh xoay (kiểu C cao 56px, cách đáy 10px) */
@media (max-width:820px){body.co-xoay .ld-fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}}
.ldx-gom{min-height:40px}
.ldx-gom .ldx-ten b{font-weight:600;color:var(--chu2)}
.ldx-gom-ten{font-size:11.5px;color:var(--chu3);padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* trục nhỏ điện thoại: thanh ca sáng đậm hơn một nấc để nổi trên nền trục */
.ldx-m-truc .ldx-sang{background:color-mix(in srgb,var(--nhan) 38%,var(--the))}
.ldx-m-truc .ldx-chieu{background:color-mix(in srgb,var(--nhan) 60%,var(--the))}
.ldx-m-tuan-toi i+i{margin-top:0}


/* ===== Phần tử dính/nổi ở ĐÁY tránh thanh xoay kiểu C (QA G6 28/09/2026) =====
   Thanh xoay cố định cách đáy 10px, cao 56px → chiếm 66px + safe-area. 889db5e đã dời .tb-ve/.ld-fab nhưng sót các phần tử
   dưới: hành trình G6 ở 390px thấy nút "Tiếp tục" của trình khởi tạo (.kt-chan dính bottom:0) bị thanh xoay che — chủ phòng
   khám mới đăng ký trên điện thoại KHÔNG đi tiếp được. Luật chung: phần tử nào bám đáy thì khi có thanh xoay phải đứng trên nó.
   Quét mọi tệp CSS 28/09: phần tử bám đáy có z-index ≤ 40 (thanh xoay) nằm trong luồng chính → bị che; phần tử trong lớp phủ
   cao hơn (ngăn chuyển đổi .cdx-chan, hộp .lop) thì không, nên không dời. Nút trợ lý nổi (z 55) đè NGƯỢC lên thanh → dời cả
   khung chat bật lên của nó. Phép thử canh: test-qa.js "thanh xoay không che phần tử bám đáy". */
@media (max-width:820px){
  body.co-xoay .kt-chan,body.co-xoay .nkx-soan,body.co-xoay .cl-thanh,body.co-xoay .ptv-chot{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  body.co-xoay .khay,body.co-xoay .pop-canh,body.co-xoay .popup-xn,body.co-xoay .cc-fab,body.co-xoay .cdx-noi-nut{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body.co-xoay .cdx-noi-khung{bottom:calc(152px + env(safe-area-inset-bottom,0px));height:min(620px,calc(100dvh - 176px))}
}

/* ===== Thanh xoay (gộp R12a 07/10/2026): thanh đáy của Hội nhập (.hnx-lt-chan) và cổng tự khai (.tkx-chan) dời lên trên thanh xoay như .kt-chan ===== */
@media (max-width:820px){body.co-xoay .hnx-lt-chan,body.co-xoay .tkx-chan{bottom:calc(74px + env(safe-area-inset-bottom,0px))}}