/* ===== 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:#141428; --chu2:#4B4B66; --chu3:#67677C;
  /* `--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:#141428;
  --vien:#E1E0EA; --nhan:#7A4FE8; --nhan-nhat:#EFE9FF;
  --tot:#1E7A50; --tot-nhat:#E1F1E8; --canh:#9A6414; --canh-nhat:#F8EEDC;
  --loi:#B3261E; --loi-nhat:#FBE9E7;
  --navy:#0B0F1E; --tim-goc:#9868F8;
  /* 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:"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)}
.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)}
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}
.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{
  .ben,.khay,.dau .hang,.nut,.thanh-lich{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. */
  .bang,.bang-cuon{overflow:visible}
  .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{margin:0}
.chu-giai-gap summary{color:var(--chu3);font-weight:500;font-size:12.5px;white-space:nowrap}
.chu-giai-gap[open] summary{margin-bottom:6px}
/* 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)}
.pc-bang .lich-hang{border-bottom:0}
.pc-bang .lich-hang.gio-tron{border-bottom: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. */
.lich{display:flex;gap:0;background:var(--the);border:1px solid var(--vien);border-radius:13px;
      overflow:auto;box-shadow:var(--bong);max-height:calc(100vh - 175px)}
.lich-gio{flex:none;width:56px;border-right:1px solid var(--vien);background:var(--chim);
          position:sticky;left:0;z-index:4}
.lich-cot{flex:1;min-width:150px;border-right:1px solid var(--vien)}
.lich-cot.hep{min-width:104px}
.lich-cot:last-child{border-right:0}
.lich-dau-cot{position:sticky;top:0;z-index:3;height:46px;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}
.lich-dau-cot .ten{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lich-dau-cot small{color:var(--chu3);font-weight:400;font-size:10.5px;white-space:nowrap;
                    font-family:"IBM Plex Mono",monospace}
.lich-dau-cot small.canh{color:var(--canh)}
.lich-than{position:relative;cursor:copy}
.lich-than.dang-tha{background:var(--nhan-nhat)}
.lich-hang{height:var(--cao-buoc,22px);border-bottom: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-bottom-style:solid}
.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}
/* 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}
.vach-bay-gio{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--loi);z-index:5;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}
.lich-cuon{flex:1;min-width:0}
.lich-cot{flex:1 0 150px;max-width:230px}
/* CỘT TEAM PHỤ TÁ — DÍNH bên trái khi cuộn ngang, ngay sau cột giờ.

   Tài liệu trong `lichhen.js` (đầu tệp, mục "Cột Team phụ tá") đã nói nó phải dính từ lâu, mà
   CSS thì không đặt gì — nên cột ấy trôi theo như mọi cột khác. Đo lại 16/09/2026 để quyết định
   theo SỐ chứ không theo câu chữ: cột rộng 320px, và **320px đúng bằng HAI cột bác sĩ** (mỗi
   cột 149–150px). Nghĩa là ghim nó lại thì bề ngang còn lại hiện được **5 cột bác sĩ** — đúng
   con số mà chính tài liệu ấy hứa ("~5 cột trên màn desktop"). Không mất cột nào.

   Vì sao đáng ghim: cả team phụ tá dồn vào MỘT cột, nên nó là cột duy nhất mà mắt phải liếc
   lại liên tục khi đang xếp chỗ cho một khách — trong khi 9 cột bác sĩ phải kéo ngang mới hết.
   Cùng lý do với cột giờ: giữ lại một hệ quy chiếu, phần còn lại trôi.

   `left:56px` = đúng bề ngang cột giờ (`.lich-gio{width:56px}`), và `z-index:3` bằng đầu cột
   để nó nằm DƯỚI hàng tiêu đề khi cuộn dọc. */
.cot-phu-ta{flex:none;width:320px;max-width:320px;position:sticky;left:56px;z-index:3;
            background:var(--the);border-right:2px solid var(--vien)}
.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}
.lich-dau-cot .avatar-pt{width:20px;height:20px;vertical-align:-5px}
/* 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}
.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}
@media (max-width:1000px){.lich-bo{flex-direction:column}.cot-xn{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. */
.doan-30{flex:none;content-visibility:auto;contain-intrinsic-size:1100px 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}
.dau-doan .chip{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 .lich-gio{width:38px}
.lich.gon .lich-cot{flex:1 0 92px;max-width:140px;min-width:92px}
.lich.gon .cot-phu-ta{width:200px;max-width:200px}
.lich.gon .lich-dau-cot{height:38px;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;text-transform:uppercase;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)}
.nut.chon .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}
.thanh-loc .o-tim{min-width:220px}
.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) ===== */
.bdv .bang table{font-size:13px}
.bdv .bang th{white-space:nowrap}
.bdv .bang td{padding:5px 8px;vertical-align:middle}
.bdv .bang input,.bdv .bang select{padding:4px 7px;font-size:13px}
.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}

/* 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{max-width:340px;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)}}


/* =====================================================================================
   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ó. */
  .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}}