/* =============================================================================
   Kho quản trị bệnh viện — ngôn ngữ thiết kế
   Rút từ bộ control dùng chung của His_Site_TheoVaiTro
   (Views/Home/ControlController.cshtml, Css/partCss/master.css, Css/module-shell.css,
   Css/tabscroll.css, Css/hoso-benhnhan.css, Css/exComponent/grouppanel.css).
   Xem docs/kientruc/NGON_NGU_THIET_KE.md.

   Ba ràng buộc định hình toàn bộ tệp này:

   1. Chính sách bảo mật nội dung đặt style-src 'self', KHÔNG có unsafe-inline.
      Mọi style="" do Razor sinh bị trình duyệt chặn IM LẶNG (thanh biểu đồ dài 0, không báo lỗi).
      Vì vậy: không có thuộc tính style nội tuyến ở đâu cả; biểu đồ và sơ đồ là SVG sinh từ máy chủ,
      dùng thuộc tính trình bày của SVG (width, x, y, fill, stroke-dasharray) — thuộc tính XML,
      chính sách không đụng tới.
   2. Trình duyệt đích gồm Firefox ESR 102/115 và Chrome cũ ở trạm y tế xã.
      KHÔNG dùng :has(), color-mix(), @container — chúng bị bỏ qua lặng lẽ và làm hỏng
      bố cục đúng ở nơi khó phát hiện nhất. (His_Site có color-mix trong grouppanel.css;
      ở đây thay bằng giá trị màu tính sẵn.)
   3. Khung ứng dụng là khung CỐ ĐỊNH kiểu .ms-root của module-shell.css: đầu trang và
      chân trang đứng yên, CHỈ vùng nội dung cuộn. Khi in thì khung này phải tan ra
      (xem @media print ở cuối tệp) nếu không bản in chỉ ra đúng một màn hình.
   ============================================================================= */

:root {
  /* --- Phông ------------------------------------------------------------
     Segoe UI trên Windows; ba tên giữa chắc chắn có trên Linux và đủ tổ hợp dấu chồng
     tiếng Việt (ữ, ặ, ễ, ỡ, ộ) — không để system-ui rơi về Cantarell vốn thiếu. */
  --phong: system-ui, -apple-system, "Segoe UI", "Noto Sans", "Liberation Sans", "DejaVu Sans", Arial, sans-serif;
  --phong-so: ui-monospace, "Cascadia Mono", "Consolas", "Liberation Mono", "DejaVu Sans Mono", monospace;
  /* Bản in giấy tờ pháp lý ở His_Site dùng Times New Roman — giữ đúng thói quen đọc của cán bộ. */
  --phong-in: "Times New Roman", "Liberation Serif", "DejaVu Serif", Times, serif;

  /* --- Thang cỡ chữ, 9 bậc (gốc 16px) -----------------------------------
     Dùng rem tuyệt đối, KHÔNG dùng em: em lồng nhau là nguyên nhân cột "Lỗi" và
     nhật ký kiểm toán tụt xuống 12,3px ở bản trước (0.93 × 0.88 × 16px). */
  --cc-1: 0.6875rem; /* 11px — chú thích trong bảng, đơn vị đo */
  --cc-2: 0.75rem;   /* 12px — nhãn phụ, mã kỹ thuật */
  --cc-3: 0.8125rem; /* 13px — ô bảng dày dữ liệu (cỡ chuẩn của His_Site) */
  --cc-4: 0.875rem;  /* 14px — chữ phụ, chân trang */
  --cc-5: 1rem;      /* 16px — thân bài, ô nhập, nút */
  --cc-6: 1.125rem;  /* 18px — tiêu đề thẻ */
  --cc-7: 1.375rem;  /* 22px — tiêu đề mục */
  --cc-8: 1.625rem;  /* 26px — tiêu đề trang */
  --cc-9: 2.125rem;  /* 34px — số lớn trên ô chỉ số */

  /* --- Thang khoảng cách, 8 bậc, lưới 4px -------------------------------- */
  --kc-0: 2px;   /* nửa bậc — ngưỡng dính khối (ADR-0110), không dùng làm đệm */
  --kc-1: 4px;
  --kc-2: 8px;
  --kc-3: 12px;
  --kc-4: 16px;
  --kc-5: 20px;
  --kc-6: 24px;
  --kc-7: 32px;
  --kc-8: 48px;
  /* NHỊP KHỐI (luật 21): khoảng cách giữa hai khối xếp kề nhau — MỘT biến, mọi trang như nhau. Vùng nội dung tự
     giữ nhịp này (xem «Nhịp khối» dưới .noi-dung), khối con không tự đặt lề dọc. --kc-khoi-toi-thieu là ngưỡng
     DINH_KHOI của tools/giaodien/kiem-chong-khoi.js: hai khung độc lập cách nhau ít hơn là «dính». */
  /* ADR-0110 (người dùng 28/09, kèm ảnh Bộ báo cáo chuẩn): «padding/margin giữa các vùng chỉ 2–4px, không để khoảng trống
     rộng giữa các khung». Nhịp khối hạ từ 16px xuống 4px, ngưỡng dính từ 8px xuống 2px; --kc-vung là đệm của vùng nội
     dung quanh các khối (trước 20/24/32px). Đo bằng KHE_VUNG_RONG (tools/giaodien/kiem-bo-cuc-vung.js). Đệm BÊN TRONG
     thẻ/ô (chữ cách viền) không đổi — luật này là khe GIỮA các vùng. */
  --kc-khoi: var(--kc-1);
  --kc-khoi-toi-thieu: var(--kc-0);
  --kc-vung: var(--kc-1);

  /* --- Màu ---------------------------------------------------------------
     Gốc: --main-color #2563eb của master.css His_Site. Hạ một bậc xuống #1d4ed8 để chữ trắng
     trên nền đạt 6,70:1 thay vì 5,17:1 — đầu trang là mảng màu lớn nhất màn hình. */
  --xanh: #1d4ed8;        /* chính: nút, liên kết, tiêu đề — 6,70:1 trên trắng */
  /* --xanh-dam là màu NỀN đậm (ô số nhấn, nút khi rê chuột) — chữ trắng đặt trên nó. KHÔNG dùng làm màu chữ:
     ở chế độ tối nó phải tối đi để chữ trắng còn đọc được, nên chữ dùng nó sẽ chìm. Chữ nhấn dùng --xanh-chu. */
  --xanh-dam: #1e3a8a;
  --xanh-rat-dam: #0f204d;/* mép trái dải chuyển sắc đầu trang */
  --xanh-nhat: #eff4ff;   /* nền nhấn nhẹ, tiêu đề bảng */
  --xanh-nhat-2: #dce8ff; /* nền nhấn đậm hơn một bậc */
  --xanh-vien: #c7d7fe;   /* viền vùng nhấn */
  /* NỀN LỚN màu xanh dịu — cho những mảng nền RỘNG cần không khí "xanh phân hệ" nhưng không được
     chói mắt như --xanh (dành cho nút/nhấn nhỏ) hay đen kịt như --xanh-rat-dam (mép dải gradient
     đầu trang). Thêm 23/09 theo yêu cầu của agent đầu trang qua Leader: dải đầu trang ở chế độ
     tối cần một nền xanh lớn, êm mắt. Chữ trắng trên nó vẫn đọc được ở cả hai chế độ. */
  --xanh-diu: #2c4a78;

  --nen: #eef1f6;         /* nền trang */
  --nen-sau: #e4e9f1;     /* nền khay dưới thẻ, rãnh */
  --the-nen: #ffffff;     /* nền thẻ, bảng */
  --the-dinh: #f5f7fb;    /* nền tiêu đề thẻ, hàng sọc */
  --chu: #16202e;         /* chữ thân (--p-tx của hoso-benhnhan.css) */
  /* Chữ phụ. Bản trước #64748b: 4,76:1 trên TRẮNG thì đạt, nhưng nền thật của trang là #eef1f6 và nền tiêu đề
     thẻ là #f5f7fb — trên hai nền đó chỉ còn 4,20 và 4,44, tức TRƯỢT AA ở đúng nơi nó hay đứng. Phép đo
     TUONG_PHAN_KEM bắt được 468 chỗ như vậy. #5b6b80 đạt 4,81 trên nền trang, 5,07 trên nền tiêu đề thẻ. */
  --chu-mo: #5b6b80;

  /* Hai loại đường kẻ, tách bạch vì hai yêu cầu khác nhau:
     --vien chỉ là đường phân cách trang trí (ô bảng, mép thẻ) — không có ngưỡng tương phản.
     --vien-o-nhap là ranh giới THÀNH PHẦN GIAO DIỆN (ô nhập, tab, nút viền) — WCAG 1.4.11
     đòi tối thiểu 3:1. */
  --vien: #d9dfe8;        /* đường phân cách trang trí */
  --vien-nhat: #eceff4;   /* kẻ trong bảng dày dữ liệu (--p-ln2) */
  --vien-o-nhap: #6b7280; /* 4,83:1 — mọi ranh giới thành phần tương tác */

  --do: #b91c1c;          /* nguy hiểm, lỗi */
  --do-nen: #fee2e2;
  --luc: #15803d;         /* thành công, đạt */
  --luc-nen: #dcfce7;
  --vang: #b45309;        /* cảnh báo, chờ xử lý */
  --vang-nen: #fef3c7;
  --tim: #6d28d9;         /* nhấn phụ: sơ đồ dữ liệu, trường bị che */
  --tim-nen: #f3f0ff;
  /* VIỀN của viên/chip trạng thái — một bậc giữa --X-nen và --X (đậm nhạt): dùng cho viên tình trạng
     kiểu ".hs-vien-*" và chip cảnh báo. Thêm 23/09 khi gom màu viết cứng ở ho-so-tong-hop.css và
     nguoi-benh.css: trước đó ba nơi lặp lại đúng ba mã #bbf7d0/#fde68a/#fecaca mà không có biến. */
  --luc-vien: #bbf7d0;
  --vang-vien: #fde68a;
  --do-vien: #fecaca;
  /* NỀN đậm riêng cho nút nguy hiểm tô đặc (.nut-nguy) — khác --do vì --do còn phải đóng vai trò
     CHỮ/biểu tượng trên nền tối (đủ sáng để đọc được ở đó); dùng thẳng --do làm NỀN cho chữ trắng
     ở chế độ tối chỉ đạt 3,37:1 (đúng vết nứt --xanh-dam/--xanh-chu đã gặp, giờ lặp lại với đỏ).
     Ở chế độ sáng --do vốn đã đủ đậm (6,47:1) nên biến này không đổi gì; chỉ có tác dụng trong
     chế độ tối, xem `.che-do-toi .nut-nguy*` ở che-do-mau.css. */
  --do-dam: #7f1d1d;

  /* CHỮ trên nền nhạt của cùng trạng thái. Tách khỏi màu nền vì hai chế độ đảo ngược nhau: ở chế độ sáng
     chữ phải ĐẬM hơn nền, ở chế độ tối chữ phải SÁNG hơn nền. Nhờ tách, luật CSS chỉ viết một lần.
     --xanh-chu là màu CHỮ và LIÊN KẾT; --xanh vẫn là màu NỀN của nút chính (chữ trắng trên đó). */
  --xanh-chu: #1d4ed8;
  --do-chu: #7f1d1d;
  --luc-chu: #14532d;
  --vang-chu: #7c3d00;
  --tim-chu: #5b21b6;
  /* Chữ PHỤ (đề mục nhỏ, ít nổi bật hơn tiêu đề) đặt trên nền --xanh/--xanh-dam (dải xanh đậm của hộp
     thoại, thẻ số nhấn) — khác --xanh-chu vì đó là chữ/liên kết trên nền TRUNG TÍNH. Thêm 23/09: trước
     là #c7d7fe viết cứng ở hai nơi, đo được 3,23:1 trên --xanh của chế độ tối (chế độ tối tô --xanh
     SÁNG hơn để làm nền nút, nên tông xanh nhạt cũ không còn đủ tương phản trên đó nữa). */
  --xanh-chu-phu: #c7d7fe;
  /* KHỐI NHẤN — cặp nền/chữ dùng chung cho một khối nổi bật đứng riêng (nút gốc của sơ đồ, thẻ
     mở đầu…), tách khỏi --xanh-dam vì biến đó đã có vai trò khác (nền nút khi rê chuột) và không
     có bạn CHỮ đi kèm dùng an toàn ở cả hai chế độ. Thêm 23/09 theo yêu cầu qua Leader: nút gốc
     "Lượt khám" của sơ đồ tương tác dùng thẳng mã hex #1e3a8a/#c7d7fe (đúng giá trị SÁNG của cặp
     này) nên không đổi theo chế độ — chữ tối trên nền tối ở chế độ tối. Giá trị kế thừa từ cặp
     --xanh-dam/--xanh-chu-phu đã đo: 7,19:1 (sáng), 6,44:1 (tối). */
  --khoi-nhan-nen: #1e3a8a;
  --khoi-nhan-chu: #c7d7fe;
  /* Chữ MỜ trên --khoi-nhan-nen (dòng phụ của khối nhấn: tên loại sơ đồ, chú chân của nút gốc). Thêm 23/09 khi
     sửa lỗi «chữ ở nút gốc sơ đồ bị tối trên nền tối»: nút gốc có ba dòng và trước đó dòng mờ dùng --xanh-vien,
     biến đó ở chế độ tối là VIỀN tối (#2f4a73) nên chỉ còn 1,39:1 trên nền nút. Đo trên --khoi-nhan-nen:
     5,26:1 (sáng), 4,96:1 (tối) — đạt AA 4,5:1 ở cả hai chế độ, và vẫn mờ hơn --khoi-nhan-chu (7,19 / 6,44)
     nên thứ bậc dòng chính / dòng phụ còn nguyên. */
  --khoi-nhan-chu-mo: #9fb9f0;
  --nen-nhat: #e2e8f0;    /* nền viên đếm, nền nhấn trung tính */
  --o-mo: #cbd5e1;        /* ô/chấm chú giải chưa có dữ liệu, nút bị vô hiệu */
  --nen-khung: #fbfcfe;   /* nền khung sơ đồ, khung xem trước */

  /* Bảng màu chuỗi số liệu — lấy nguyên của dash-echarts.js, thứ tự giữ nguyên để
     biểu đồ ở đây và ở His_Site đọc ra cùng một hệ màu. */
  --chuoi-1: #3b82f6;
  --chuoi-2: #14b8a6;
  --chuoi-3: #f59e0b;
  --chuoi-4: #8b5cf6;
  --chuoi-5: #ef4444;
  --chuoi-6: #06b6d4;
  --chuoi-7: #84cc16;
  --chuoi-8: #ec4899;

  /* --- Bo góc -----------------------------------------------------------
     His_Site có hai hệ đối nghịch: "PHẲNG radius 0" cho màn hình nhập liệu dày và
     radius 12px cho Bàn làm việc. Ta lấy hệ Bàn làm việc: người xem là hội đồng quản trị,
     màn hình thưa, thẻ bo góc đọc dễ chịu hơn. */
  --bo-1: 4px;   /* nhãn nhỏ, ô nhập */
  --bo-2: 8px;   /* thẻ, bảng, nút */
  --bo-3: 12px;  /* thẻ lớn, hộp nổi */
  --bo-tron: 999px;

  /* --- Đổ bóng: ba tầng, tầng càng cao càng nổi -------------------------- */
  --bong-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --bong-2: 0 2px 4px rgba(15, 23, 42, .05), 0 8px 20px -6px rgba(15, 23, 42, .14);
  --bong-3: 0 10px 40px -8px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .10);
  --bong-dau: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 2px 12px rgba(10, 20, 45, .30);

  /* --- Chiều cao thành phần ---------------------------------------------
     MỘT giá trị duy nhất cho ô nhập, select và nút, đúng lối "control 28–30px" của
     module-shell.css nhưng nới lên 34px cho màn hình thưa của lãnh đạo. */
  --cao-o: 34px;
  --cao-o-nho: 28px;
  --cao-dau-1: 58px;  /* tầng nhận diện của đầu trang */
  --cao-dau-2: 42px;  /* tầng điều hướng */
  --cao-chan: 34px;

  --nhanh: 160ms;
  --vua: 220ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; height: 100%; }

/* ---------------------------------------------------------------- Khung ứng dụng
   Lối .ms-root của module-shell.css: cả trang là một cột flex cao đúng màn hình;
   đầu trang và chân trang flex:0 0 auto nên đứng yên, vùng giữa flex:1 1 auto với
   min-height:0 (thiếu min-height:0 thì flex item không co được và thanh cuộn nhảy
   ra body, kéo cả chân trang trôi theo). */
body {
  font-family: var(--phong);
  margin: 0;
  color: var(--chu);
  background: var(--nen);
  font-size: var(--cc-5);
  /* 1,55 để dấu chồng tiếng Việt (ữ, ặ, ễ) không chạm dòng trên. */
  line-height: 1.55;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

a { color: var(--xanh-chu); }
/* MÀU khi trỏ chuột phải lấy lại từ biến: bootstrap của thư viện His đặt `a:hover{color:#0056b3}` (mã cứng). Quy tắc
   a:hover ở đây trước nay không khai color nên bản của bootstrap thắng ở trạng thái hover — ở chế độ TỐI thành
   1,97:1 trên nền thẻ (bộ đo: TUONG_PHAN_KEM). Luật 15: màu luôn lấy từ biến CSS. */
a:hover { text-decoration-thickness: 2px; color: var(--xanh-chu); }

:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; border-radius: var(--bo-1); }

h1 { font-size: var(--cc-8); line-height: 1.25; margin: 0 0 var(--kc-3); letter-spacing: -0.015em; }
h2 { font-size: var(--cc-7); line-height: 1.3; margin: var(--kc-6) 0 var(--kc-3); letter-spacing: -0.01em; }
h3 { font-size: var(--cc-6); line-height: 1.35; margin: var(--kc-4) 0 var(--kc-2); }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- Đầu trang
   Hai tầng: tầng trên mang nhận diện (logo, tên cơ quan, tên hệ thống, người dùng),
   tầng dưới là điều hướng. Dải chuyển sắc chéo lấy lối --p-hd của hoso-benhnhan.css
   (linear-gradient 90deg #312e81 → chàm sẫm) nhưng đổi sang tông xanh của ngành. */
.dau-trang {
  flex: 0 0 auto;
  background: var(--xanh-rat-dam);
  background-image: linear-gradient(104deg, #0f204d 0%, #16306e 42%, #1d4ed8 128%);
  color: #fff;
  box-shadow: var(--bong-dau);
  position: relative;
  z-index: 30;
}
.dau-trang a { color: #fff; text-decoration: none; }

.dau-trang-tren {
  display: flex;
  align-items: center;
  gap: var(--kc-4);
  height: var(--cao-dau-1);
  padding: 0 var(--kc-6);
}

.thuong-hieu { display: flex; align-items: center; gap: var(--kc-3); min-width: 0; }
.thuong-hieu-dau { flex: none; display: block; width: 38px; height: 38px; }
.thuong-hieu-chu { min-width: 0; }
/* mau-co-dinh: ĐẦU TRANG là dải xanh đậm ở CẢ HAI chế độ — chữ trên nó luôn là chữ sáng */
.thuong-hieu-co-quan {
  display: block;
  font-size: var(--cc-1);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a9c1f5;
  line-height: 1.3;
}
.thuong-hieu-he-thong { display: block; font-size: var(--cc-6); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
/* mau-co-dinh: cùng dải đầu trang xanh đậm */
.thuong-hieu-khau-hieu { display: block; font-size: var(--cc-1); color: #a9c1f5; line-height: 1.3; }

.nguoi-dung { margin-left: auto; display: flex; align-items: center; gap: var(--kc-3); font-size: var(--cc-4); }
/* Nút trên nền xanh đậm phải là nút "bóng": .nut-phu để chữ màu --xanh, nhưng quy tắc .dau-trang a
   (cùng hạng đặc hiệu 0-2-0, đứng trước) ép chữ thành trắng → nút trắng chữ trắng, không đọc được gì.
   Ba lớp ở đây (0-3-0) thắng dứt khoát thay vì dựa vào thứ tự khai báo. */
.dau-trang .nguoi-dung .nut {
  background: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}
.dau-trang .nguoi-dung .nut:hover { background: rgba(255, 255, 255, .22); border-color: #fff; color: #fff; }
.nguoi-dung-khoi {
  text-align: right;
  padding-right: var(--kc-3);
  border-right: 1px solid rgba(255, 255, 255, .18);
  max-width: 320px;
}
.nguoi-dung-ten { display: block; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* mau-co-dinh: cùng dải đầu trang xanh đậm */
.nguoi-dung-vai { display: block; font-size: var(--cc-2); color: #a9c1f5; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tầng dưới: điều hướng. Một hàng, không xuống dòng, cuộn ngang khi chật — đúng lối
   .his-tabscroll của tabscroll.css (flex-wrap:nowrap; overflow-x:auto; ẩn thanh cuộn).
   Mục đang mở đánh dấu bằng aria-current="page"; CSS bám vào chính thuộc tính đó nên
   trạng thái thị giác và trạng thái trợ năng không thể lệch nhau. */
.dau-trang-duoi { background: rgba(0, 0, 0, .18); box-shadow: 0 1px 0 rgba(255, 255, 255, .10) inset; }
.menu {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0;
  padding: 0 var(--kc-6);
  height: var(--cao-dau-2);
}
.menu::-webkit-scrollbar { height: 0; width: 0; display: none; }
/* mau-co-dinh: thanh điều hướng nằm trên dải xanh đậm ở cả hai chế độ */
.menu a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--kc-2);
  height: var(--cao-dau-2);
  padding: 0 var(--kc-4);
  font-size: var(--cc-4);
  font-weight: 600;
  color: #dbe6fb;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.menu a:hover { background: rgba(255, 255, 255, .10); color: #fff; }
.menu a[aria-current="page"] { background: rgba(255, 255, 255, .14); border-bottom-color: #ffbf00; color: #fff; }
/* Biểu tượng mục điều hướng: SVG sinh từ máy chủ, tô theo màu chữ của mục. */
.menu-ic { flex: none; width: 16px; height: 16px; display: block; opacity: .85; }
.menu a[aria-current="page"] .menu-ic { opacity: 1; }
.menu-vach { flex: 0 0 auto; align-self: center; width: 1px; height: 18px; margin: 0 var(--kc-2); background: rgba(255, 255, 255, .20); }

.noi-dong { display: inline; }

/* ---------------------------------------------------------------- Thân trang
   ĐÂY là phần tử cuộn duy nhất của ứng dụng. Nội dung dùng hết bề ngang: không
   max-width, chỉ chừa lề an toàn — màn hình rộng của phòng họp không còn hai dải trắng. */
.noi-dung {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--kc-vung);
  scroll-behavior: smooth;
}
/* ---------------------------------------------------------------- Nhịp khối (luật 21)
   Người dùng (23/09, viết hoa, kèm ảnh Thẻ điểm tháng): hàng thẻ số dính và đè lên đáy khung bộ lọc — «TUYỆT ĐỐI KHÔNG
   CÓ THỂ LOẠI NÀY NHÉ». Cơ chế gốc không nằm ở trang đó: khoảng cách giữa các khối trước đây do TỪNG KHỐI tự đặt
   (margin-bottom của .the, .luoi-o, .thanh-loc…), nên khối nào không có lề đáy — .thanh-cong-cu vốn là dải TRONG thẻ,
   hay hàng thẻ số bị `.luoi-noi-dung { margin: 0 }` (GD-27) xoá lề — là dính luôn vào khối kế tiếp, ở bất kỳ trang nào.
   Nay vùng nội dung giữ nhịp: xếp cột, `gap: var(--kc-khoi)`, khối con không tự đặt lề dọc. `gap` bỏ qua phần tử ẩn
   (<link>/<script> đầu trang, panel tab đang hidden) nên không có khe thừa như lối `* + *`.
     · flex-shrink: 0 — khối có overflow:hidden (.the-bang) không bị ép thấp hơn nội dung rồi cắt mất bảng;
       trang «vừa khung» (vua-khung.css) vẫn cho đúng .the-vua giãn/co như trước (độ đặc hiệu cao hơn).
     · Khối CUỐI giữ lề đáy của nó: bảng điều khiển dùng lề âm ở đó để lấp đệm đáy (bang-dieu-khien.css).
     · Trang công khai (.noi-dung-giua) căn giữa theo cách riêng, không áp. */
main.noi-dung:not(.noi-dung-giua) { display: flex; flex-direction: column; gap: var(--kc-khoi); }
main.noi-dung:not(.noi-dung-giua) > * { flex-shrink: 0; margin-top: 0; }
main.noi-dung:not(.noi-dung-giua) > :not(:last-child) { margin-bottom: 0; }
/* Thanh công cụ đứng RIÊNG ở cấp trang (không nằm trong thẻ — Thẻ điểm tháng): tự thành một khung như thẻ, đủ bốn
   viền; nhãn ô hiện (không AnNhan) nên hàng nút hạ xuống đúng tầng ô nhập như mọi thanh lọc khác. */
main.noi-dung > .thanh-cong-cu { border: 1px solid var(--vien); border-radius: var(--bo-2); box-shadow: var(--bong-1); padding: var(--kc-3) var(--kc-5); }
/* max-width:100% — nhóm nút là flex:0 0 auto (không co), nên ba nút xuất + dòng phạm vi ở 430px dài hơn khung và đẩy cả
   trang cuộn ngang; chặn bề ngang để nút tự xuống dòng TRONG nhóm (.hang-nut có flex-wrap). */
main.noi-dung > .thanh-cong-cu .thanh-loc-hang > .hang-nut { margin-top: var(--o-tang-nhan); max-width: 100%; }

/* Trang không đăng nhập (đăng nhập, lỗi, từ chối): căn giữa theo cả hai chiều. */
.noi-dung-giua { display: flex; align-items: center; justify-content: center; padding: var(--kc-6); }

.chan-trang {
  flex: 0 0 auto;
  min-height: var(--cao-chan);
  padding: 0 var(--kc-6);
  font-size: var(--cc-2);
  color: var(--chu-mo);
  background: var(--the-nen);
  border-top: 1px solid var(--vien);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--kc-4);
  z-index: 20;
}
.chan-trang a { color: var(--chu-mo); }
.chan-trang-cuoi { margin-left: auto; }
/* GD2-19 (nghiệm thu 29/09): ở 430px chân trang cố định gãy 4 dòng (~75px), cùng dải tab chỉ còn ~650px cho nội dung. Màn
   hẹp giữ hai liên kết hướng dẫn (một dòng) và câu bắt buộc theo nghiệp vụ (một dòng), đệm dọc 4px; tên cơ quan, dòng hỗ trợ
   và số phiên bản chỉ hiện ở màn rộng. */
@media (max-width: 600px) {
  .chan-trang { min-height: 0; padding: var(--kc-1) var(--kc-3); gap: 0 var(--kc-3); line-height: 1.35; }
  .chan-trang > span:not(.chan-trang-cuoi), .chan-trang-pb { display: none; }
  .chan-trang-cuoi { margin-left: 0; flex-basis: 100%; }
}

/* ---------------------------------------------------------------- Đầu mục trang
   Dải tiêu đề trang: tên trang bên trái, nhãn phạm vi và thao tác bên phải.
   Thay cho <h1> trôi nổi giữa nền trắng — mọi trang có một khối mở đầu rõ ranh giới. */
.dau-muc {
  display: flex;
  align-items: flex-end;
  gap: var(--kc-4);
  flex-wrap: wrap;
  /* ADR-0110: vùng nội dung chỉ đệm 4px quanh các khối, nên dải tiêu đề tự đệm ngang một bậc để chữ không sát mép. */
  padding: var(--kc-1) var(--kc-2) var(--kc-2);
  margin: 0 0 var(--kc-khoi);
  border-bottom: 2px solid var(--vien);
}
.dau-muc-chu { min-width: 0; flex: 1 1 320px; }
.dau-muc h1 { margin: 0; }
.dau-muc-mo-ta { display: block; margin: var(--kc-1) 0 0; font-size: var(--cc-4); color: var(--chu-mo); }
.dau-muc-nut { display: flex; align-items: center; gap: var(--kc-2); flex-wrap: wrap; }

/* Nhãn phạm vi dữ liệu — nội dung nghiệp vụ bắt buộc, không phải trang trí. */
.nhan-pham-vi {
  display: inline-flex;
  align-items: center;
  gap: var(--kc-2);
  padding: var(--kc-1) var(--kc-3);
  border: 1px solid var(--xanh-vien);
  border-radius: var(--bo-tron);
  background: var(--xanh-nhat);
  color: var(--xanh-chu);
  font-size: var(--cc-2);
  font-weight: 600;
  /* KHÔNG nowrap: câu phạm vi dài nhất ("Phạm vi dữ liệu: toàn hệ thống, chế độ giả danh…") rộng 516px,
     nên ở điện thoại 430px nó một mình đẩy cả trang cuộn ngang. Nó là nội dung nghiệp vụ bắt buộc
     hiện, không được cắt cụt — nên cho xuống dòng. */
  max-width: 100%;
  text-align: left;
}
.nhan-pham-vi-cham { flex: none; width: 8px; height: 8px; border-radius: var(--bo-tron); background: var(--xanh); }

/* Tiêu đề mục trong trang: chữ nhỏ in hoa dãn chữ, có vạch kéo dài hết hàng. */
.muc-nho {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  margin: var(--kc-6) 0 var(--kc-3);
  font-size: var(--cc-2);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chu-mo);
}
.muc-nho::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--vien); }
.muc-nho:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- Thẻ */
.the {
  background: var(--the-nen);
  border: 1px solid var(--vien);
  border-radius: var(--bo-2);
  box-shadow: var(--bong-1);
  padding: var(--kc-4) var(--kc-5);
  margin-bottom: var(--kc-khoi);
}
.the > h2, .the > h3 { margin-top: 0; }

.the-dau {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  flex-wrap: wrap;
  margin: calc(-1 * var(--kc-4)) calc(-1 * var(--kc-5)) var(--kc-4);
  padding: var(--kc-2) var(--kc-5);
  min-height: 40px;
  background: var(--the-dinh);
  border-bottom: 1px solid var(--vien);
  border-radius: var(--bo-2) var(--bo-2) 0 0;
}
.the-dau h2, .the-dau h3 { margin: 0; font-size: var(--cc-5); font-weight: 700; }
.the-dau .nho { margin-left: auto; }
/* Vạch màu đứng trước tiêu đề thẻ — dấu hiệu phân nhóm rẻ tiền nhất mà mắt bắt ngay. */
.the-dau::before { content: ""; flex: none; width: 3px; align-self: stretch; margin: var(--kc-2) 0; border-radius: 2px; background: var(--xanh); }
.the-dau.dau-luc::before { background: var(--luc); }
.the-dau.dau-vang::before { background: var(--vang); }
.the-dau.dau-do::before { background: var(--do); }
.the-dau.dau-tim::before { background: var(--tim); }

/* Tiêu đề thẻ "nhẹ": dùng cho thanh lọc — có tên khối nhưng không nặng như tiêu đề thẻ dữ liệu. */
.the-dau-nhe { background: transparent; border-bottom: 1px solid var(--vien-nhat); }
.the-dau-nhe h2 { font-size: var(--cc-2) !important; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--chu-mo); }
.the-dau-nhe::before { background: var(--vien) !important; }

.hang-the { display: flex; gap: var(--kc-khoi); flex-wrap: wrap; }
.hang-the > .the { flex: 1 1 240px; margin-bottom: 0; }
/* ADR-0110: thẻ trong lưới khối không mang lề đáy riêng — lề đó cộng vào khe lưới/vùng nội dung thành 8px. */
.luoi-o > .the, .luoi-2 > .the, .luoi-3 > .the, .luoi-chinh-le > .the { margin-bottom: 0; }

/* Lưới ô chỉ số: tối thiểu 210px mỗi ô, tự xuống dòng. */
/* GD-27. Ba lưới này KHÔNG còn repeat(auto-fit, minmax(...)): xem mục "HỆ LƯỚI THEO BỀ RỘNG
   NỘI DUNG" ở cuối tệp. Chúng mang thêm lớp .luoi-noi-dung trong Razor và nhận số cột từ đó,
   nên số thẻ một hàng là con số ĐỊNH TRƯỚC theo bề rộng khung nhìn thay vì hệ quả tình cờ của
   một ngưỡng pixel (ở 1920 thì minmax(420px) sinh ra BỐN cột, ở 1441 sinh ra BA — không ai
   định thế, và đó là lý do bố cục nhảy khác nhau giữa hai máy). */
.luoi-o { margin-bottom: var(--kc-khoi); }
.luoi-2 { margin-bottom: var(--kc-khoi); }
.luoi-3 { margin-bottom: var(--kc-khoi); }
.luoi-o.luoi-noi-dung { gap: var(--kc-khoi); }
.luoi-2.luoi-noi-dung, .luoi-3.luoi-noi-dung { gap: var(--kc-khoi); }
/* Lối cũ giữ lại cho trang chưa chuyển: không có .luoi-noi-dung thì vẫn là một cột, không tràn. */
.luoi-o:not(.luoi-noi-dung), .luoi-2:not(.luoi-noi-dung), .luoi-3:not(.luoi-noi-dung) { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--kc-khoi); }
/* Cột rộng — hẹp cho bố cục "nội dung chính + bên lề". Xuống một cột ở màn hình hẹp. */
.luoi-chinh-le { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr); gap: var(--kc-khoi); align-items: start; }
@media (max-width: 1100px) { .luoi-chinh-le { grid-template-columns: minmax(0, 1fr); } }

/* Ô chỉ số: dải màu dọc bên trái + số lớn. Bản trước dùng dải ngang 3px trên đỉnh;
   dải dọc đọc nhanh hơn khi các ô xếp thành hàng vì mắt quét theo chiều ngang. */
.o-so {
  position: relative;
  background: var(--the-nen);
  border: 1px solid var(--vien);
  border-left: 4px solid var(--xanh);
  border-radius: var(--bo-2);
  box-shadow: var(--bong-1);
  padding: var(--kc-3) var(--kc-4);
  overflow: hidden;
  min-width: 0;
}
.o-so.o-luc { border-left-color: var(--luc); }
.o-so.o-vang { border-left-color: var(--vang); }
.o-so.o-do { border-left-color: var(--do); }
.o-so.o-tim { border-left-color: var(--tim); }
/* Ô chỉ số bấm được (nhảy tới trang chi tiết): nổi lên một bậc khi rê chuột. */
a.o-so { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--nhanh) ease, transform var(--nhanh) ease; }
a.o-so:hover { box-shadow: var(--bong-2); transform: translateY(-1px); }

.o-so-nhan {
  display: block;
  font-size: var(--cc-1);
  color: var(--chu-mo);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.so-lon {
  display: block;
  font-size: var(--cc-9);
  font-weight: 700;
  line-height: 1.12;
  color: var(--chu);
  /* Chữ số đều bề ngang: số không nhảy cột khi giá trị đổi. */
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  /* Q9 (24/09): mốc chưa có công cụ đo hiện chữ thay số (vd «Chưa có danh sách ban hành», /chi-so/hieu-qua-de-an)
     — không có chỗ ngắt, tràn vùng nội dung ở 430px (435 > 430). .cgc-o .so-lon đã tự vá riêng; đưa thẳng vào đây
     để mọi chỗ dùng lại .so-lon cho CHỮ (không chỉ số) đều an toàn. Số không có khoảng trắng nên không đổi cách hiện. */
  overflow-wrap: anywhere;
}
.so-lon-nho { font-size: var(--cc-7); }
/* ADR-0106: chỗ của con số lớn mà giá trị là CHỮ trạng thái («Chưa có danh sách ban hành») — cỡ thân, đậm vừa, màu mờ: đọc được là
   trạng thái, không bị nhìn nhầm thành số và không lấn hàng. */
.so-lon-chu { display: block; font-size: var(--cc-4); font-weight: 600; color: var(--chu-mo); line-height: 1.35; }
.o-so-phu { display: block; font-size: var(--cc-2); color: var(--chu-mo); line-height: 1.4; }
.o-so-day { display: flex; align-items: flex-end; gap: var(--kc-3); }
.o-so-day > .o-so-hinh { flex: none; }

/* Trạng thái rỗng tử tế — dùng khi ô chưa có dữ liệu. Không bao giờ hiện số giả. */
.rong {
  /* Duyệt designer 22/09: bản cũ là khung đứt nét cao 112px trên nền xám — hệ thống đang ở giai đoạn nhiều
     danh mục, nhiều ô CHƯA có dữ liệu, nên người dùng gặp trạng thái rỗng liên tục và mỗi lần là một mảng
     trống to như trang hỏng. Nay: một-hai dòng chữ mờ, không khung, không nền, chiều cao theo chữ; hành
     động (nếu có) đứng ngay cạnh câu. kiem-giao-dien.js đo RONG_QUA_NANG để không quay lại kiểu cũ. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--kc-1) var(--kc-3);
  min-height: 0;
  padding: var(--kc-4) var(--kc-5);
  color: var(--chu-mo);
  font-size: var(--cc-4);
  text-align: center;
}
.rong-chinh { font-weight: 600; color: var(--chu-mo); }
.rong-phu { flex-basis: 100%; font-size: var(--cc-3); }
/* Trong ô bảng (colspan): canh TRÁI theo cột đầu. Canh giữa một ô rộng 1.000px thì ở màn 430px câu nằm
   ngoài khung nhìn, phải cuộn ngang mới thấy. */
td > .rong { justify-content: flex-start; text-align: left; padding: var(--kc-2) 0; }

/* ---------------------------------------------------------------- Danh sách cảnh báo vận hành
   Mỗi dòng: chấm màu theo mức, câu việc cần làm, nút dẫn thẳng tới chỗ xử lý.
   Không dùng biểu tượng cảm xúc; mức đọc được cả khi in đen trắng nhờ chữ đứng đầu dòng. */
.ds-canh-bao { list-style: none; margin: 0; padding: 0; }
.ds-canh-bao > li {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  padding: var(--kc-2) 0;
  border-bottom: 1px solid var(--vien-nhat);
  font-size: var(--cc-4);
}
.ds-canh-bao > li:last-child { border-bottom: 0; }
/* ADR-0106: câu việc in phông THÂN của site. canh-bao.css dùng trùng tên lớp .cb-cau cho ô «câu truy vấn» SQL (phông đơn cách)
   nên «Việc của tôi hôm nay» của hội đồng quản trị từng in như mã máy (26/09). Độ đặc hiệu 0,2,0 thắng luật 0,1,0 kia bất kể thứ tự tệp. */
.ds-canh-bao .cb-cau { flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: inherit; line-height: 1.45; }
.ds-canh-bao .cb-cham { flex: none; width: 10px; height: 10px; border-radius: var(--bo-tron); background: var(--chu-mo); }
.ds-canh-bao .cb-do .cb-cham, .ds-canh-bao li.cb-do .cb-cham { background: var(--do); }
.ds-canh-bao li.cb-vang .cb-cham { background: var(--vang); }
.ds-canh-bao li.cb-luc .cb-cham { background: var(--luc); }
.ds-canh-bao li.cb-xanh .cb-cham { background: var(--xanh); }
.ds-canh-bao li.cb-do { color: var(--do-chu); }
.ds-canh-bao li.cb-vang { color: var(--vang-chu); }

/* ---------------------------------------------------------------- Bảng
   Lối newGrid của exComponent/04-grid.js: tiêu đề dính, hàng sọc, cột số canh phải,
   chữ 13px, đường kẻ mảnh. */
/* Hình thức lưới (viền, tiêu đề dính, sọc, cột số) nay ở control-chung.css —
   quy tắc dùng chung cho cả `table.luoi` của bộ control và `table.bang` của các
   trang đã có. Dưới đây CHỈ còn các biến thể riêng của dự án. */

/* ---- Bảng dữ liệu thô (GD-28) --------------------------------------------------------------
   Ô tiêu đề CHỈ mang mã trường. Trước đây nó mang cả mã LẪN câu đặc tả rút gọn, nên tiêu đề cao
   ba dòng, vẫn bị cắt cụt bằng dấu ba chấm, và — nặng nhất — chính CÂU CHÚ THÍCH quyết định bề
   rộng cột thay vì dữ liệu. Ảnh người dùng gửi cho thấy hệ quả: ô DIEN_BIEN_LS dài 74 ký tự phải
   xuống BẢY dòng trong khi bốn cột bên cạnh rỗng hoàn toàn. Câu đặc tả nay ở thuộc tính title.  */
table.bang.bang-tho thead th.ma-cot {
  font-family: var(--phong-so);
  font-size: var(--cc-1);
  font-weight: 700;
  color: var(--chu);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: bottom;
  cursor: help;
}
/* Bậc bề rộng cột, do máy chủ tính từ độ dài lớn nhất và trung vị của chính cột đó
   (HaTang/BangTho.cs). Truyền bằng data-w chứ không style nội tuyến — chính sách đặt
   style-src 'self' và style nội tuyến bị chặn IM LẶNG.

   Dùng cả min-width và max-width: min để cột mã không bị bóp thành hai chữ một dòng, max để cột
   văn bản dài không kéo bảng ra vô tận. Đơn vị ch chứ không px: nó theo đúng cỡ chữ của bảng. */
table.bang.bang-tho td[data-w="1"] { min-width: 9ch;  max-width: 14ch; }
table.bang.bang-tho td[data-w="2"] { min-width: 12ch; max-width: 22ch; }
table.bang.bang-tho td[data-w="3"] { min-width: 16ch; max-width: 32ch; }
table.bang.bang-tho td[data-w="4"] { min-width: 24ch; max-width: 46ch; }
table.bang.bang-tho td[data-w="5"] { min-width: 32ch; max-width: 64ch; }
table.bang.bang-tho th[data-w="1"] { min-width: 9ch; }
table.bang.bang-tho th[data-w="2"] { min-width: 12ch; }
table.bang.bang-tho th[data-w="3"] { min-width: 16ch; }
table.bang.bang-tho th[data-w="4"] { min-width: 24ch; }
table.bang.bang-tho th[data-w="5"] { min-width: 32ch; }
/* Trần bề ngang chỉ đặt cho Ô DỮ LIỆU, không cho ô tiêu đề: mã trường dài nhất của đặc tả là 12
   ký tự, đặt trần cho tiêu đề thì chính mã trường bị cắt — và đó là thứ cột này tồn tại để cho đọc.
   Ô dữ liệu KHÔNG dùng nowrap ở bất kỳ bậc nào: một giá trị ngoại lệ dài hơn bậc của cột thì thà
   xuống hai dòng còn hơn tràn ra ngoài ô. */
table.bang.bang-tho td { white-space: normal; overflow-wrap: break-word; }
table.bang.bang-tho th.so, table.bang.bang-tho td.so { min-width: 40px; width: 40px; }

/* Cột cơ sở không gửi gì cả: ẩn, không xoá. Đầu khối đã ghi "5/9 trường" và có nút mở ra xem đủ,
   nên không ai tưởng hồ sơ đủ. Không có JavaScript thì hiện đủ mọi cột (quy tắc .khong-js dưới). */
table.bang.bang-tho .cot-rong { display: none; }
table.bang.bang-tho.hien-cot-rong .cot-rong { display: table-cell; }
.khong-js table.bang.bang-tho .cot-rong { display: table-cell; }
.hang-nut-bang { margin: 0 var(--kc-4) var(--kc-2); }

/* Bảng một dòng (Bảng 1 ở mặt dữ liệu thô): hai cột, mã trường cỡ cố định. */
table.bang.bang-mot-dong { width: 100%; }
table.bang.bang-mot-dong .cot-ma-truong {
  width: 21ch;
  font-family: var(--phong-so);
  font-size: var(--cc-2);
  white-space: nowrap;
}
table.bang.bang-mot-dong thead th.cot-ma-truong { cursor: default; }
table.bang.bang-mot-dong tbody td.cot-ma-truong { cursor: help; }
table.bang.bang-mot-dong tbody td:last-child { white-space: normal; overflow-wrap: break-word; }

/* Ô giá trị ngắn, cố định (loại gói, mốc giờ, trạng thái) KHÔNG được bẻ dòng: "PDF / bệnh / án" xếp ba dòng
   làm mỗi hàng cao gấp ba ở màn 430px (duyệt designer 22/09). Bảng rộng hơn thì đã có .cuon cuộn ngang. */
table.bang td.mot-dong, table.bang th.mot-dong { white-space: nowrap; }

/* /kho-ho-so/muon — cột «Quyết định»: [số ngày cấp][Duyệt] [Từ chối…] trên MỘT hàng (trước: ô số và nút chồng dọc, ô lý do trần trong bảng). */
.muon-quyet { display: flex; align-items: center; gap: var(--kc-2); flex-wrap: nowrap; }
.muon-duyet { display: flex; align-items: center; gap: 6px; margin: 0; }
.muon-duyet .o-truong { width: 76px; flex: none; }
/* /kho-ho-so/quan-ly — vùng lô rộng một nửa mặc định (bảng lô 6 cột không bị cắt cột «Quyết định»); người dùng kéo được. */
.ql-khung { --cv-mac-dinh-1: 50%; --cv-san-1: 420px; --cv-san-2: 460px; }

table.bang caption { caption-side: top; text-align: left; padding-bottom: var(--kc-2); color: var(--chu-mo); font-size: var(--cc-3); }
/* Cột phụ: thu gọn ở màn hình hẹp, vẫn in đủ. */
table.bang .cot-phu { color: var(--chu-mo); }
@media (max-width: 900px) { table.bang .cot-phu { display: none; } }

/* Bảng nằm sát mép thẻ: bỏ padding của thẻ để đường kẻ chạm mép. */
.the-bang { padding: 0; overflow: hidden; }
.the-bang > .the-dau { margin: 0; border-radius: var(--bo-2) var(--bo-2) 0 0; }
.the-bang > .cuon {
  max-height: 62vh;
  overflow: auto;
  /* position: relative (không static): nhãn .an-nhin của ô nhập TRONG bảng là position:absolute; không có tổ tiên
     định vị thì chúng bám khung chứa đầu tiên (tài liệu) và NẰM NGOÀI vùng cắt của .cuon — bảng rộng 1.064px kéo
     tài liệu ra 842px ở khung 430px, sinh thanh cuộn TRANG (bộ đo: TRAN_NGANG) dù không thấy gì tràn. Cùng một bệnh
     đã gặp ở cây danh mục (xem chú thích .dm-trai trong danh-muc.css). */
  position: relative;
}
.the-bang table.bang th:first-child, .the-bang table.bang td:first-child { padding-left: var(--kc-5); }
.the-bang table.bang th:last-child, .the-bang table.bang td:last-child { padding-right: var(--kc-5); }
.the-bang table.bang tbody tr:last-child td { border-bottom: 0; }
.the-bang > .rong { margin: 0; }
/* Hộp thông báo đứng SAU bảng trong thẻ bảng (Vận hành, Hướng dẫn kết nối): thẻ bảng không đệm nên hộp dính sát đáy bảng
   (DINH_KHOI 0px) — lùi vào như lề chữ của bảng, cách bảng và đáy thẻ một nhịp nhỏ. */
.cuon + .canh-bao, .cuon + .loi, .cuon + .thanh-cong, .cuon + .mach { margin-top: var(--kc-2); }
.the-bang > .cuon + .canh-bao, .the-bang > .cuon + .loi, .the-bang > .cuon + .thanh-cong, .the-bang > .cuon + .mach { margin: var(--kc-2) var(--kc-5) var(--kc-3); }

/* ---------------------------------------------------------------- Biểu mẫu
   Hình thức lấy của textBoxStyle/numberStyle/dateTimeStyle (exComponent/02-inputs.js):
   ô phẳng, bo 3–4px, viền theo tông phân hệ khi có tiêu điểm, nhãn 12px nằm trên. */
/* GD-30. Ở đây KHÔNG còn quy tắc nào đặt HÌNH THỨC cho control theo tổ tiên.

   Ba lượt liền bị bác vì cùng một loại lỗi, nên nói thẳng ra để lần sau không tái phạm:
   quy tắc cũ ở chỗ này là

       form.mau label, .o-nhap-nhan { display: block; font-size: var(--cc-2); … }

   Độ đặc hiệu của `form.mau label` là (0,1,2), THẮNG `.o-tick` (0,1,0) của bộ control chung.
   Hệ quả: ô tích "Ghi nhớ đăng nhập" nằm trong <form class="mau"> bị ép display:block, nên
   align-items:center của .o-tick thành vô nghĩa, ô tích rơi về vertical-align:baseline và ngồi
   trên đường chân chữ — lệch tâm 3,5px — còn chữ tụt từ 14px xuống 12px. Nhãn nằm ngoài
   form.mau thì lại đúng. Đúng kiểu lỗi chỉ lộ ra ở một trang.

   Luật chung từ nay: hình thức của control gắn vào CHÍNH THẺ hoặc chính lớp của control
   (.o-nhan, .o-tick, .o-tick-hop, .nut …), không bao giờ gắn theo tổ tiên. Ở đây chỉ còn BỐ CỤC
   thuần tuý — thứ thuộc về biểu mẫu chứ không thuộc về control. Test
   BoControlChungTests.KhongConLuatBoTheoToTien đọc CSS và đỏ nếu quy tắc kiểu cũ quay lại.
   Nhãn của biểu mẫu mang sẵn lớp .o-nhan do mảnh _ONhap/_OXo sinh, nên không mất hình thức. */
.o-nhap-nhan {
  display: block;
  max-width: 620px;
  margin: 0 0 var(--kc-1);
  font-weight: 600;
  font-size: var(--cc-2);
  color: var(--chu);
}

form.mau .hang { display: flex; gap: var(--kc-3); flex-wrap: wrap; align-items: flex-end; }
form.mau .hang > div { flex: 1 1 200px; }
/* Ô rộng hết hàng (ô tìm kiếm, lý do xem định danh). BỐ CỤC, không phải hình thức: chỉ nới trần
   bề ngang, không đặt display/font-size/height/padding/border cho control. */
form.mau .o-rong .o-nhap, form.mau .o-rong .o-xo, form.mau .o-rong .o-van-ban { max-width: none; }

/* GD-32. Khoảng thở giữa hàng nút và phần trên CHỈ áp cho hàng nút là con TRỰC TIẾP của biểu mẫu.

   Trước đây luật này viết `form.mau .hang-nut` — bó tổ tiên, và tệ hơn: độ đặc hiệu của nó là
   (0,2,1) vì có thêm tên thẻ `form`, nên nó ĐÈ cả `.o-hang > .hang-nut` (0,2,0) là luật của chính
   thành phần hàng trường. Hệ quả đo được ở dòng chi tiết "Sửa tài khoản": nút "Lưu" nhận
   margin-top 12px thay vì tầng nhãn, và tụt 19,4px dưới ô số bên cạnh. Dùng tổ hợp CON (>) để nó
   không với được vào hàng nút nằm trong .o-hang.

   Phần display/gap/align đã có ở luật .hang-nut gắn vào chính lớp — không lặp lại ở đây. */
form.mau > .hang-nut { margin-top: var(--kc-3); }
form.mau .hang > .hang-nut { flex: 0 0 auto; }

/* Thanh lọc: khối riêng có nền, không để ô nhập trôi trên nền trang. */
.thanh-loc {
  background: var(--the-nen);
  border: 1px solid var(--vien);
  border-radius: var(--bo-2);
  box-shadow: var(--bong-1);
  padding: var(--kc-3) var(--kc-4);
  margin-bottom: var(--kc-4);
}
.thanh-loc-nhan {
  display: block;
  margin-bottom: var(--kc-2);
  font-size: var(--cc-1);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--chu-mo);
}

/* .o-chon: cụm nhãn + ô tích. Hình thức của chính ô tích nằm ở .o-tick-hop (control-chung.css),
   không đặt ở đây theo tổ tiên — xem GD-30 ở trên. */
.o-chon { display: inline-flex; align-items: center; gap: var(--kc-2); font-weight: 400; margin-right: var(--kc-4); }
fieldset.nhom-chon { border: 0; padding: 0; margin: 0; }
fieldset.nhom-chon > legend { padding: 0; margin: 0 0 var(--kc-1); font-weight: 600; font-size: var(--cc-2); }
/* LUẬT 12 (không nhấp nhô): nhóm ô tích đứng trong MỘT HÀNG TRƯỜNG (.o-hang) phải cao đúng bằng ô nhập bên
   cạnh, nếu không cả hàng gãy — đo được: ô «Phạm vi» xếp hai ô tích theo cột nên cao hơn ô «Tên khoá» 16px và
   đỉnh lệch 8px (kiem-giao-dien.js: LECH_HANG). Trong hàng trường thì các ô tích nằm NGANG và khối cao đúng
   --o-cao; ngoài hàng trường (biểu mẫu dọc) vẫn xếp như cũ. */
.o-hang fieldset.nhom-chon > legend { font-size: var(--cc-3); margin-bottom: var(--o-khe-nhan, 4px); }
.o-hang fieldset.nhom-chon {
  --o-tick-cao: var(--o-cao, 32px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--kc-4);
  row-gap: 0;
}
.o-hang fieldset.nhom-chon > legend { flex: 0 0 100%; }
/* Hình thức của ô tích gắn vào CHÍNH nó, không bó theo tổ tiên (test KhongConLuatBoTheoToTien):
   hàng trường chỉ đặt biến, ô tích tự đọc biến đó. Bó theo tổ tiên là đúng kiểu lỗi đã ba lần làm
   ô tích lệch hàng, vì một luật ở chỗ khác có độ ưu tiên cao hơn sẽ thắng mà không ai thấy. */
.o-tick { min-height: var(--o-tick-cao, 0); }

/* ---------------------------------------------------------------- Nút
   Chuyển hẳn sang control-chung.css (.nut, .nut-phu, .nut-trung, .nut-nguy,
   .nut-tran, .nut-nho, .hang-nut) để nút và ô nhập lấy chiều cao từ CÙNG MỘT
   biến --o-cao. Trước đây hai bộ quy tắc ở hai chỗ nên lệch nhau 2px. */

/* ---------------------------------------------------------------- Thông báo */
.canh-bao, .loi, .thanh-cong, .mach {
  padding: var(--kc-3) var(--kc-4);
  border-radius: var(--bo-2);
  border: 1px solid;
  border-left-width: 4px;
  margin: 0 0 var(--kc-4);
  font-size: var(--cc-4);
}
.canh-bao { background: var(--vang-nen); border-color: var(--vang); color: var(--vang-chu); }
.loi { background: var(--do-nen); border-color: var(--do); color: var(--do-chu); }
.thanh-cong { background: var(--luc-nen); border-color: var(--luc); color: var(--luc-chu); }
.mach { background: var(--xanh-nhat); border-color: var(--xanh); color: var(--xanh-chu); }
.canh-bao ul, .loi ul, .thanh-cong ul { margin: var(--kc-1) 0 0; padding-left: var(--kc-5); }

.mot-lan {
  font-family: var(--phong-so);
  font-size: var(--cc-4);
  background: var(--vang-nen);
  border: 2px dashed var(--vang);
  border-radius: var(--bo-1);
  padding: var(--kc-3);
  margin-top: var(--kc-2);
  word-break: break-all;
  user-select: all;
}

/* Nhãn trạng thái (.nhan và các biến thể màu) ở control-chung.css. */

.che-do { display: inline-block; font-weight: 700; padding: 2px var(--kc-3); border-radius: var(--bo-1); font-size: var(--cc-2); letter-spacing: 0.06em; vertical-align: middle; }
.che-do-gia-danh { background: var(--xanh-nhat); color: var(--xanh-chu); border: 1px solid var(--xanh-vien); }
.che-do-dinh-danh { background: var(--do-nen); color: var(--do); border: 1px solid var(--do); }

/* ---------------------------------------------------------------- Tab thật
   Yêu cầu người dùng: khối thông tin cuộn dọc dài quá khó đọc, đổi thành tab.
   Không có tab thuần CSS ở đây: bản trước ẩn mọi bảng rồi dựa vào :target và :has(),
   mà Firefox ESR 102/115 và Chrome cũ bỏ qua :has() nên bảng hiện chồng lên nhau.
   Nay JavaScript (mang nonce) gắn role=tablist/aria-selected và ẩn panel bằng thuộc tính
   hidden của HTML. Không có JavaScript thì MỌI panel hiện tuần tự — đọc vẫn đủ, chỉ dài hơn.
   Khi in, quy tắc ở @media print bung mọi panel ra kể cả panel đang hidden. */
.dai-tab {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: var(--kc-1);
  margin: 0 0 calc(-1px);
  padding: 0;
  list-style: none;
  border-bottom: 2px solid var(--vien);
}
.dai-tab::-webkit-scrollbar { height: 0; width: 0; display: none; }
button[role="tab"], .tab-nut {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--kc-2);
  height: 38px;
  padding: 0 var(--kc-4);
  border: 0;
  border-bottom: 3px solid transparent;
  background: none;
  color: var(--chu-mo);
  font-family: inherit;
  font-size: var(--cc-4);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  margin-bottom: -2px;
}
button[role="tab"]:hover, .tab-nut:hover { color: var(--xanh-chu); background: var(--xanh-nhat); }
button[role="tab"][aria-selected="true"], .tab-nut[aria-current="true"] {
  color: var(--xanh-chu);
  border-bottom-color: var(--xanh);
  background: var(--xanh-nhat);
}
.dai-tab .dem-tab {
  display: inline-block;
  min-width: 20px;
  padding: 0 5px;
  border-radius: var(--bo-tron);
  background: var(--nen-nhat);
  /* --chu-mo trên --nen-nhat chỉ 4,41:1 — hụt AA đúng 0,09 vì chữ 11px không đạt cỡ "chữ lớn"
     được miễn xuống 3:1. --chu ở đây vẫn đọc như một viên đếm phụ (nền nhạt, cỡ nhỏ), chỉ đổi
     đúng lượng cần để qua ngưỡng. */
  color: var(--chu);
  font-size: var(--cc-1);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
button[role="tab"][aria-selected="true"] .dem-tab { background: var(--xanh); color: #fff; }
button[role="tab"][disabled], .tab-nut[disabled] { opacity: .45; cursor: default; }
button[role="tab"][disabled]:hover, .tab-nut[disabled]:hover { background: none; color: var(--chu-mo); }

.khung-tab { background: var(--the-nen); border: 1px solid var(--vien); border-radius: 0 var(--bo-2) var(--bo-2) var(--bo-2); box-shadow: var(--bong-1); }
.khung-tab > .dai-tab { border-bottom: 1px solid var(--vien); padding: 0 var(--kc-3); background: var(--the-dinh); border-radius: var(--bo-2) var(--bo-2) 0 0; }
.o-tab { padding: var(--kc-4) var(--kc-5); }
.o-tab > h2:first-child, .o-tab > h3:first-child { margin-top: 0; }
/* Panel chưa được chọn: JavaScript đặt hidden. Không JavaScript → mọi panel hiện,
   mỗi panel tự có tiêu đề nên đọc tuần tự vẫn đúng nghĩa. */
.o-tab[hidden] { display: none; }
.o-tab-tieu-de { display: none; }
/* Tiêu đề panel chỉ hiện khi KHÔNG có tab (không JavaScript) và khi in. */
.khong-js .o-tab-tieu-de { display: block; }

/* ---------------------------------------------------------------- Khối đóng mở trượt
   Lối .phc-sg-bd / .gp-than của His_Site: grid-template-rows 0fr → 1fr.
   Hiệu ứng do trình duyệt hợp thành, không đo chiều cao, không JavaScript mỗi khung hình,
   nên không xập xoè như lối max-height/scrollHeight. */
.khoi-gap {
  border: 1px solid var(--vien);
  border-radius: var(--bo-2);
  background: var(--the-nen);
  box-shadow: var(--bong-1);
  margin-bottom: var(--kc-3);
  overflow: hidden;
}
.khoi-gap-dau {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  width: 100%;
  min-height: 38px;
  padding: var(--kc-2) var(--kc-4);
  border: 0;
  background: var(--the-dinh);
  color: var(--chu);
  font-family: inherit;
  font-size: var(--cc-4);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.khoi-gap-dau:hover { background: var(--xanh-nhat); }
.khoi-gap-caret { flex: none; width: 12px; height: 12px; color: var(--chu-mo); transition: transform var(--vua) ease; }
.khoi-gap.mo > .khoi-gap-dau .khoi-gap-caret { transform: rotate(90deg); }
.khoi-gap-ten { flex: 0 0 auto; }
.khoi-gap-tt { flex: 1 1 auto; min-width: 0; font-weight: 400; font-size: var(--cc-2); color: var(--chu-mo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.khoi-gap-dem { flex: none; display: flex; gap: var(--kc-3); font-weight: 400; font-size: var(--cc-2); color: var(--chu-mo); }
.khoi-gap-than {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--vua) ease;
}
.khoi-gap.mo > .khoi-gap-than { grid-template-rows: 1fr; }
.khoi-gap-cat { overflow: hidden; min-height: 0; }
.khoi-gap.mo > .khoi-gap-than > .khoi-gap-cat { border-top: 1px solid var(--vien); }
.khoi-gap-noi { padding: var(--kc-3) var(--kc-4); }
.khoi-gap-noi.khoi-gap-bang { padding: 0; }
/* KHÔNG đặt trần chiều cao ở đây: khối đã thu/mở được rồi, thêm một vùng cuộn lồng trong vùng cuộn
   của trang là đúng thứ người dùng kêu "thao tác không tiện". Chỉ cuộn NGANG khi bảng rộng. */
/* Bảng rộng trong khối gấp: chỉ vùng .cuon bên trong được cuộn ngang, khối không tự phình. */
.khoi-gap-noi.khoi-gap-bang > .cuon { max-width: 100%; }

/* Không JavaScript: mọi khối mở sẵn, nút đầu khối chỉ còn là tiêu đề.
   (Trước đây luật này CHẾT vì dòng trên để hở một dấu ">" nên bộ chọn nối vào thành
   ".khoi-gap-noi.khoi-gap-bang > .khong-js .khoi-gap-than" — không khớp gì cả, và bỏ
   JavaScript đi là mọi khối gấp đóng sập không mở lại được.) */
.khong-js .khoi-gap-than { grid-template-rows: 1fr; }
.khong-js .khoi-gap-caret { display: none; }

@media (prefers-reduced-motion: reduce) {
  .khoi-gap-than, .khoi-gap-caret, .noi-dung, a.o-so { transition: none; scroll-behavior: auto; }
}

/* ---------------------------------------------------------------- Danh sách khoá – giá trị
   Lối .phc-gridkv của hoso-benhnhan.css: nhãn cột trái cỡ cố định, giá trị đậm,
   mỗi dòng một đường kẻ mảnh. Xếp nhiều cột khi rộng. */
/* GD-27. Trước đây: repeat(auto-fill, minmax(320px, 1fr)) với dt/dd trần, nên "Chẩn đoán ra viện"
   và "Giới tính" rộng bằng nhau — cái thì xuống ba dòng, cái thì bỏ trống 80%. Nay mỗi cặp
   nhãn–giá trị được bọc trong một .o-kv mang data-col do máy chủ tính, và lưới là 24 rãnh dùng
   chung của .luoi-noi-dung. */
dl.hanh-chinh { margin: 0; }
dl.hanh-chinh:not(.luoi-noi-dung) { display: block; }
.o-kv { min-width: 0; }
dl.hanh-chinh dt {
  font-weight: 500;
  color: var(--chu-mo);
  font-size: var(--cc-2);
  padding: var(--kc-2) 0 0;
}
dl.hanh-chinh dd {
  margin: 0 0 var(--kc-2);
  padding-bottom: var(--kc-2);
  border-bottom: 1px solid var(--vien-nhat);
  font-size: var(--cc-4);
  font-weight: 600;
  color: var(--chu);
  word-break: break-word;
}
/* Hai cột thật: nhãn và giá trị nằm cùng hàng (dùng khi giá trị ngắn). */
dl.hanh-chinh-doc { display: block; }
dl.hanh-chinh-doc dt { display: block; }
dl.hanh-chinh-doc dd { display: block; }

/* ---------------------------------------------------------------- Sơ đồ SVG
   Mọi sơ đồ sinh từ máy chủ. Vì style nội tuyến bị chính sách chặn, kích thước và màu
   nằm ở thuộc tính SVG; đây chỉ là khung chứa. */
.so-do { display: block; width: 100%; max-width: 920px; height: auto; overflow: visible; }
/* Hình vuông nhỏ (vành khuyên) không được kéo rộng bằng cả thẻ: width:100% trên một viewBox 180×180
   sẽ phóng to gấp nhiều lần và nuốt hết chỗ của các ô bên cạnh. */
.so-do-tron { max-width: 210px; margin: 0 auto; }
.so-do-khung { overflow-x: auto; padding: var(--kc-2) 0; }
/* Sơ đồ luồng rộng hơn màn hình: cuộn ngang trong khung riêng, giữ tỉ lệ chữ đọc được
   thay vì ép cả hình bé lại đến mức không đọc nổi nhãn. */
.so-do-luong { overflow-x: auto; padding: var(--kc-3) 0; background: var(--nen-khung); border: 1px solid var(--vien-nhat); border-radius: var(--bo-2); }
.so-do-luong > svg { width: 800px; max-width: none; margin: 0 auto; }
.so-do a:hover rect { stroke-width: 2.5; }
.chu-giai { display: flex; flex-wrap: wrap; gap: var(--kc-2) var(--kc-4); margin-top: var(--kc-3); font-size: var(--cc-2); color: var(--chu-mo); }
.chu-giai-muc { display: inline-flex; align-items: center; gap: var(--kc-2); }
.chu-giai-o { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--o-mo); }
/* Ô chú giải phải là màu ĐẶC của chuỗi số liệu, không phải nền nhạt của nhãn trạng thái:
   chú giải nằm cạnh biểu đồ nên phải trùng đúng màu cột, nếu không người đọc ghép nhầm. */
.o-chuoi-xanh { background: var(--chuoi-1); }
.o-chuoi-luc { background: var(--luc); }
.o-chuoi-do { background: var(--do); }
.o-chuoi-tim { background: var(--tim); }
.o-chuoi-mo { background: var(--o-mo); }
.chu-giai-duong { display: inline-block; width: 22px; height: 0; border-top: 2px solid var(--chu-mo); }

/* ---------------------------------------------------------------- Dòng thời gian lượt khám */
.dong-tg { list-style: none; margin: 0; padding: 0; }
.dong-tg > li { position: relative; padding: 0 0 var(--kc-4) var(--kc-7); }
/* Đường dọc nối các mốc; mốc cuối không kéo đường xuống nữa. */
.dong-tg > li::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 20px;
  bottom: 0;
  width: 2px;
  background: var(--vien);
}
.dong-tg > li:last-child::before { display: none; }
.dong-tg-cham {
  position: absolute;
  left: 3px;
  top: 5px;
  width: 16px;
  height: 16px;
  border-radius: var(--bo-tron);
  background: var(--the-nen);
  border: 3px solid var(--xanh);
}
.dong-tg-cham.cham-do { border-color: var(--do); }
.dong-tg-cham.cham-vang { border-color: var(--vang); }
.dong-tg-cham.cham-luc { border-color: var(--luc); }
.dong-tg-ngay { font-size: var(--cc-1); font-weight: 700; color: var(--chu-mo); text-transform: uppercase; letter-spacing: 0.05em; }
.dong-tg-tieu-de { font-size: var(--cc-5); font-weight: 600; margin: 0; line-height: 1.35; }
.dong-tg-phu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-1) var(--kc-3); font-size: var(--cc-2); color: var(--chu-mo); margin-top: var(--kc-1); }

/* ---------------------------------------------------------------- Hồ sơ tổng hợp (GD-19)
   Mặt ĐỌC của Bảng 1. Thay cho bảng ba cột dài hơn sáu mươi dòng: sáu nhóm nghiệp vụ, mỗi nhóm
   một thẻ có tiêu đề, bên trong là lưới cặp nhãn–giá trị nhiều cột.

   Nhịp thị giác đặt theo ba bậc chứ không phải một: NHÃN nhỏ và nhạt (11px, chữ hoa nhỏ) —
   GIÁ TRỊ cỡ thân bài — GIÁ TRỊ QUAN TRỌNG (tổng chi, chẩn đoán chính, kết quả điều trị) to hơn
   một bậc và đậm. Nhờ ba bậc này mắt bắt được câu trả lời trước khi kịp đọc hết nhãn, điều mà bảng
   ba cột không thể làm vì mọi dòng đều nặng như nhau.

   Lối lấy của .phc-* trong hoso-benhnhan.css (thẻ hồ sơ người bệnh của His_Site) và của
   .gp-nhom trong exComponent/grouppanel.css (nhóm có tiêu đề, viền 1px, bo 4px). */
/* Mỗi nhóm là một DẢI NGANG chiếm hết bề ngang, xếp theo thứ tự đọc của hồ sơ: người bệnh là ai →
   thẻ bảo hiểm → khám khi nào ở đâu → chẩn đoán gì → hết bao nhiêu tiền → ra viện thế nào.
   Không xếp các nhóm thành lưới hai ba cột: nhóm có 16 trường và nhóm có 5 trường cạnh nhau thì
   chiều cao vênh nhau, sinh khoảng trắng lớn, và mắt mất thứ tự đọc. Bù lại, TRƯỜNG bên trong mỗi
   nhóm mới xếp nhiều cột — đúng yêu cầu "cặp nhãn và giá trị nhiều cột". */
.ho-so-tong {
  display: flex;
  flex-direction: column;
  gap: var(--kc-4);
  margin: var(--kc-4) 0 0;
}
.ho-so-nhom {
  border: 1px solid var(--vien);
  border-radius: var(--bo-2);
  background: var(--the-nen);
  box-shadow: var(--bong-1);
  overflow: hidden;
  break-inside: avoid;
}
.ho-so-nhom-dau {
  display: flex;
  align-items: center;
  gap: var(--kc-2);
  margin: 0;
  padding: var(--kc-2) var(--kc-4);
  background: var(--xanh-nhat);
  border-bottom: 1px solid var(--xanh-vien);
  font-size: var(--cc-4);
  font-weight: 700;
  color: var(--xanh-chu);
  line-height: 1.3;
}
.ho-so-nhom-ic { flex: none; color: var(--xanh-chu); }
.ho-so-nhom-ten { flex: 1 1 auto; min-width: 0; }
.ho-so-nhom-dem { flex: none; font-size: var(--cc-1); font-weight: 600; color: var(--chu-mo); font-variant-numeric: tabular-nums; }

/* GD-27. Lưới của nhóm hồ sơ giờ là lưới 24 rãnh dùng chung (.luoi-noi-dung), mỗi trường khai
   data-col theo bề rộng nội dung thật. Không còn minmax(188px, 1fr) chia đều, nên không còn
   cảnh "Họ và tên … đang che" xuống dòng cạnh ô "Dân tộc 01" trống 80%. */
dl.ho-so-luoi {
  margin: 0;
  padding: var(--kc-3) var(--kc-4) var(--kc-4);
}
dl.ho-so-luoi:not(.luoi-noi-dung) { display: block; }
.ho-so-o { min-width: 0; }
.ho-so-luoi dt {
  font-size: var(--cc-1);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--chu-mo);
  line-height: 1.35;
  margin: 0 0 2px;
}
.ho-so-luoi dd {
  margin: 0;
  font-size: var(--cc-4);
  line-height: 1.45;
  color: var(--chu);
  overflow-wrap: break-word;
}
.ho-so-tri { font-variant-numeric: tabular-nums; }
/* Bậc nhấn: giá trị quan trọng to hơn một bậc, đậm, và có vạch màu bên trái. */
.ho-so-o-manh { border-left: 3px solid var(--xanh); padding-left: var(--kc-2); }
.ho-so-o-manh dd { font-size: var(--cc-6); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.ho-so-o-manh dt { color: var(--xanh-chu); }
/* Ô rỗng: nhạt hẳn đi nhưng KHÔNG ẩn — ẩn thì người đọc tưởng hồ sơ đủ. */
.ho-so-o-trong dt { color: var(--chu-mo); }
.ho-so-khuyet { font-size: var(--cc-3); color: var(--chu-mo); font-style: italic; }
/* Mã gốc đứng cạnh tên lấy từ danh mục: "Nữ" kèm "2", "Khỏi" kèm "1". */
.ho-so-ma {
  display: inline-block;
  margin-left: var(--kc-1);
  padding: 0 5px;
  border-radius: 2px;
  background: var(--the-dinh);
  border: 1px solid var(--vien);
  font-family: var(--phong-so);
  font-size: var(--cc-1);
  font-weight: 600;
  color: var(--chu-mo);
  vertical-align: 2px;
}
.ho-so-o-manh .ho-so-ma { vertical-align: 4px; }
.ho-so-loi-ra { margin: var(--kc-4) 0 0; font-size: var(--cc-3); color: var(--chu-mo); }

/* Không còn quy tắc riêng ép về một cột ở 700px: bậc thu nhỏ chung của .luoi-noi-dung đã lo,
   và lo theo tỉ lệ (12 → 8 → 6 → 4 → 2 → 1) chứ không nhảy thẳng một bước. */

/* ---------------------------------------------------------------- Chỉ định ↔ kết quả
   Lối .phc-yl-* của hoso-benhnhan.css: mỗi chỉ định một dòng, loại chỉ định là nhãn màu,
   các mục con thụt vào, và nút bên phải mở thẳng tới dòng kết quả tương ứng.
   Nút mang lớp .co khi thật sự có kết quả nối được — không có thì để trơ, không lừa mắt. */
/* GD-18. Trước đây mỗi chỉ định là một dòng gạch chân sát dòng kế tiếp, nên hai chục chỉ định
   đọc thành một khối chữ liền. Nay mỗi chỉ định là một THẺ có nền và viền riêng: mắt đếm được
   ngay có bao nhiêu chỉ định, và bảng kết quả bên trong thuộc rõ về chỉ định nào. */
.dsc-chi-dinh { list-style: none; margin: var(--kc-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--kc-3); }
.dsc-chi-dinh > li {
  border: 1px solid var(--vien);
  border-left: 3px solid var(--xanh-vien);
  border-radius: var(--bo-2);
  background: var(--the-nen);
  padding: var(--kc-3) var(--kc-4);
  break-inside: avoid;
}
/* Chỉ định đã có kết quả: vạch trái đậm màu — phân biệt được khi cuộn nhanh. */
.dsc-chi-dinh > li:hover { border-left-color: var(--xanh); }
.dsc-chi-dinh > li > .cuon { margin-top: var(--kc-3); border: 1px solid var(--vien-nhat); border-radius: var(--bo-1); }
.cd-dau { display: flex; align-items: center; gap: var(--kc-2) var(--kc-3); flex-wrap: wrap; }
.cd-loai {
  flex: none;
  font-weight: 700;
  font-size: var(--cc-1);
  color: var(--xanh-chu);
  background: var(--xanh-nhat);
  border: 1px solid var(--xanh-vien);
  border-radius: var(--bo-1);
  padding: 0 var(--kc-2);
}
.cd-ten { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: var(--cc-3); }
.cd-phu { flex: none; font-size: var(--cc-2); color: var(--chu-mo); font-variant-numeric: tabular-nums; }
.cd-noi { margin: var(--kc-1) 0 0; padding: 0 0 0 var(--kc-4); list-style: none; }
.cd-noi > li { display: flex; align-items: center; gap: var(--kc-2); font-size: var(--cc-3); padding: 2px 0; }
.cd-noi > li::before { content: "–"; color: var(--chu-mo); flex: none; }
.cd-noi-ten { flex: 1 1 auto; min-width: 0; }
/* Giá trị ngoài khoảng tham chiếu: đỏ, đậm, kèm chữ Cao/Thấp — không dùng nhấp nháy
   (His_Site có animation phcBlink; ở đây bỏ vì màn hình chiếu trong phòng họp). */
.gt-bat-thuong { color: var(--do); font-weight: 700; }
.co-hl { display: inline-block; margin-left: var(--kc-1); padding: 0 var(--kc-1); border-radius: 2px; color: #fff; font-size: var(--cc-1); font-weight: 800; }
.hl-cao { background: var(--do); }
.hl-thap { background: var(--xanh); }

/* Đợt dùng thuốc: mỗi đợt một khối, ngày dùng là tiêu đề đợt. */
/* GD-18. Mỗi đợt dùng thuốc là một thẻ: ngày y lệnh làm tiêu đề có nền, các dòng thuốc
   giãn ra 6px trên dưới thay vì 2px. Đọc theo đợt là cách bác sĩ đọc y lệnh. */
.dot-thuoc {
  border: 1px solid var(--vien);
  border-left: 3px solid var(--xanh-vien);
  border-radius: var(--bo-2);
  background: var(--the-nen);
  margin: 0 0 var(--kc-3);
  overflow: hidden;
  break-inside: avoid;
}
.dot-thuoc-dau {
  display: flex; align-items: baseline; gap: var(--kc-3); flex-wrap: wrap;
  padding: var(--kc-2) var(--kc-4);
  background: var(--the-dinh);
  border-bottom: 1px solid var(--vien-nhat);
  font-size: var(--cc-2); color: var(--chu-mo); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.dot-thuoc-dau > span:first-child { color: var(--xanh-chu); }
.dot-thuoc-ds { list-style: none; margin: 0; padding: var(--kc-1) var(--kc-4) var(--kc-2); }
.dot-thuoc-ds > li { display: flex; align-items: baseline; gap: var(--kc-3); font-size: var(--cc-3); padding: 6px 0; border-bottom: 1px solid var(--vien-nhat); }
.dot-thuoc-ds > li:last-child { border-bottom: 0; }
.dot-thuoc-ten { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.dot-thuoc-lieu { flex: none; color: var(--chu-mo); }
.dot-thuoc-tien { flex: none; font-variant-numeric: tabular-nums; }

/* Dòng diễn biến lâm sàng. */
/* GD-18. Diễn biến là dòng thời gian: vạch dọc, chấm mốc, và nội dung mỗi mốc nằm trong một
   khối nền nhạt để hai mốc liền nhau không đọc lẫn vào nhau. */
.dien-bien { list-style: none; margin: var(--kc-3) 0 0; padding: 0; }
.dien-bien > li { position: relative; padding: 0 0 var(--kc-5) var(--kc-6); border-left: 2px solid var(--vien); margin-left: 5px; }
.dien-bien > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.dien-bien-cham { position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: var(--bo-tron); background: var(--xanh); border: 3px solid var(--the-nen); box-shadow: 0 0 0 1px var(--xanh-vien); }
.dien-bien-luc { font-size: var(--cc-1); font-weight: 700; color: var(--xanh-chu); text-transform: uppercase; letter-spacing: 0.05em; margin-right: var(--kc-2); }
.dien-bien-noi {
  margin-top: var(--kc-2);
  padding: var(--kc-2) var(--kc-3);
  background: var(--the-dinh);
  border-left: 2px solid var(--vien);
  border-radius: 0 var(--bo-1) var(--bo-1) 0;
  font-size: var(--cc-3);
  line-height: 1.55;
  white-space: pre-wrap;
}

/* ---------------------------------------------------------------- Nhóm mở rộng (details thuần HTML)
   Giữ lại cho các trang không cần trượt; tab và .khoi-gap gánh phần chính. */
details.nhom { border: 1px solid var(--vien); border-radius: var(--bo-2); background: var(--the-nen); margin-bottom: var(--kc-3); box-shadow: var(--bong-1); }
details.nhom > summary {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  padding: var(--kc-2) var(--kc-4);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--cc-4);
  background: var(--the-dinh);
  border-radius: var(--bo-2);
  list-style: none;
}
details.nhom[open] > summary { border-bottom: 1px solid var(--vien); border-radius: var(--bo-2) var(--bo-2) 0 0; }
details.nhom > summary::-webkit-details-marker { display: none; }
details.nhom > summary::before { content: "▸"; color: var(--chu-mo); font-size: var(--cc-4); }
details.nhom[open] > summary::before { content: "▾"; }
details.nhom > summary .dem { margin-left: auto; display: flex; gap: var(--kc-3); font-weight: 400; font-size: var(--cc-2); color: var(--chu-mo); }
details.nhom > .than { padding: var(--kc-3) var(--kc-4); }
details.nhom > .cuon { max-height: 56vh; overflow: auto; }

/* ---------------------------------------------------------------- Trang đăng nhập
   Bản trước là một thẻ trắng trôi giữa nền xám, chân trang dính vào giữa màn hình.
   Nay: cả màn hình là một mảng chuyển sắc có hoạ tiết SVG tự lưu trữ; thẻ đăng nhập
   nổi hẳn lên bằng bóng ba tầng; chân trang nằm đúng đáy màn hình vì khung ứng dụng
   đã là cột flex cao 100%. */
body.trang-cong {
  background: var(--xanh-rat-dam);
  background-image: url("/img/nen-dang-nhap.svg"), linear-gradient(140deg, #0b1830 0%, #12295e 46%, #1d4ed8 120%);
  background-repeat: no-repeat, no-repeat;
  background-size: cover, cover;
  background-position: center, center;
}
/* mau-co-dinh: TRANG CÔNG (đăng nhập) — nền tối cố định ở CẢ HAI chế độ, không theo bảng màu site (xem body.trang-cong ở trên) */
body.trang-cong .chan-trang { background: rgba(255, 255, 255, .06); border-top-color: rgba(255, 255, 255, .14); color: #c3d3f0; }
/* mau-co-dinh: TRANG CÔNG (đăng nhập) — nền tối cố định ở CẢ HAI chế độ, không theo bảng màu site (xem body.trang-cong ở trên) */
body.trang-cong .chan-trang a { color: #dbe6fb; }

.khoi-cong { width: 100%; max-width: 900px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: var(--kc-8); align-items: center; }
@media (max-width: 860px) { .khoi-cong { grid-template-columns: minmax(0, 1fr); gap: var(--kc-6); max-width: 420px; } }

/* mau-co-dinh: TRANG CÔNG (đăng nhập) — nền tối cố định ở CẢ HAI chế độ, không theo bảng màu site (xem body.trang-cong ở trên) */
.cong-gioi-thieu { color: #e7eeff; }
.cong-dau { display: flex; align-items: center; gap: var(--kc-3); margin-bottom: var(--kc-5); }
/* mau-co-dinh: TRANG CÔNG (đăng nhập) — nền tối cố định ở CẢ HAI chế độ, không theo bảng màu site (xem body.trang-cong ở trên) */
.cong-co-quan { display: block; font-size: var(--cc-2); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #a9c1f5; }
.cong-ten { display: block; font-size: var(--cc-7); font-weight: 700; line-height: 1.2; }
.cong-tieu-de { font-size: 2rem; line-height: 1.2; font-weight: 700; margin: 0 0 var(--kc-3); letter-spacing: -0.02em; }
/* mau-co-dinh: TRANG CÔNG (đăng nhập) — nền tối cố định ở CẢ HAI chế độ, không theo bảng màu site (xem body.trang-cong ở trên) */
.cong-mo-ta { font-size: var(--cc-5); color: #c3d3f0; margin: 0 0 var(--kc-5); max-width: 46ch; }
.cong-diem { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--kc-2); }
/* mau-co-dinh: TRANG CÔNG (đăng nhập) — nền tối cố định ở CẢ HAI chế độ, không theo bảng màu site (xem body.trang-cong ở trên) */
.cong-diem > li { display: flex; align-items: flex-start; gap: var(--kc-3); font-size: var(--cc-4); color: #dbe6fb; }
.cong-diem-ic { flex: none; width: 18px; height: 18px; margin-top: 2px; }
@media (max-width: 860px) { .cong-gioi-thieu { text-align: center; } .cong-diem, .cong-dau { display: none; } }

.the-cong {
  background: var(--the-nen);
  border-radius: var(--bo-3);
  box-shadow: var(--bong-3);
  padding: var(--kc-6);
  border: 1px solid rgba(255, 255, 255, .5);
}
.the-cong h1 { font-size: var(--cc-7); margin: 0 0 var(--kc-1); }
.the-cong-phu { display: block; font-size: var(--cc-3); color: var(--chu-mo); margin: 0 0 var(--kc-5); }
.the-cong form.mau input { max-width: none; }
/* GD-32. Hai luật cũ ở đây — `.the-cong .nut { width:100%; height:38px }` và
   `.the-cong .hang-nut { margin-top }` — là khung chứa với tay vào đổi kích thước và bố cục của
   control dùng chung. Nút nay mang lớp biến thể `.nut-rong` do chính bộ control định nghĩa; khe
   trên hàng nút dùng tổ hợp CON để không với được vào hàng nút nằm sâu bên trong. */
.the-cong form.mau > .hang-nut { margin-top: var(--kc-4); }
.the-cong-chan { margin: var(--kc-4) 0 0; padding-top: var(--kc-3); border-top: 1px solid var(--vien-nhat); font-size: var(--cc-2); color: var(--chu-mo); }

/* Trang hẹp (đổi mật khẩu, từ chối, lỗi) khi đã đăng nhập. */
.trang-hep { width: 100%; max-width: 520px; margin: 0 auto; } /* width:100% — trong cột flex, lề auto co khối về bề rộng nội dung */

/* ---------------------------------------------------------------- Vụn */
.nho { font-size: var(--cc-3); color: var(--chu-mo); }
.rat-nho { font-size: var(--cc-1); color: var(--chu-mo); }
.ghi-chu-nghiep-vu {
  margin: var(--kc-5) 0 0;
  padding: var(--kc-2) var(--kc-3);
  border-left: 3px solid var(--vien);
  background: var(--the-dinh);
  border-radius: 0 var(--bo-1) var(--bo-1) 0;
  font-size: var(--cc-2);
  color: var(--chu-mo);
}
code { font-family: var(--phong-so); font-size: 0.9em; background: var(--xanh-nhat); color: var(--xanh-chu); padding: 1px var(--kc-1); border-radius: 3px; }
/* Tham chiếu kỹ thuật trong câu (MaHienThi.CauCoMa — trang hướng dẫn): đường dẫn tệp dài xuống dòng ở bất kỳ ký tự nào trong <code>. */
code.ma-trong-cau { overflow-wrap: anywhere; }
pre.ma {
  font-family: var(--phong-so);
  font-size: var(--cc-3);
  /* mau-co-dinh: khối mã luôn là nền tối ở cả hai chế độ — đọc mã trên nền sáng chói hơn hẳn */
  background: #0f172a;
  color: #e2e8f0;
  padding: var(--kc-3) var(--kc-4);
  border-radius: var(--bo-2);
  overflow-x: auto;
  line-height: 1.5;
  margin: 0 0 var(--kc-3);
}
pre.ma code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ---------------------------------------------------------------- Khối mã có tô màu cú pháp (GD-22)
   Máy chủ tô màu rồi gửi HTML tĩnh: chính sách bảo mật nội dung đặt style-src 'self' và
   script-src 'nonce-…' (QD-065), nên KHÔNG có style="color:…" nội tuyến và KHÔNG có thư viện tô
   màu phía trình duyệt. Màu phải là lớp, và lớp phải nằm ở đây.
   Nền khối là nền tối của pre.ma (#0f172a); mọi màu dưới đây đo được ≥ 6,9:1 trên nền đó. */
/* overflow-wrap:anywhere là thứ NGĂN cuộn ngang trên điện thoại: white-space:pre-wrap chỉ xuống dòng ở
   khoảng trắng, mà một dòng curl hay một chuỗi băm SHA-256 không có khoảng trắng nào — nó đẩy rộng cả
   vùng nội dung (đo được 592 > 430 ở bề rộng 430). Nội dung chép ra không đổi một ký tự nào. */
.khoi-ma { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; max-height: none; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-the        { color: #7dd3fc; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-thuoc-tinh { color: #c4b5fd; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-gia-tri    { color: #86efac; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-khoa       { color: #7dd3fc; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-so         { color: #fcd34d; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-tu-khoa    { color: #f0abfc; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-chu-thich  { color: #94a3b8; font-style: italic; }
/* mau-co-dinh: nền khối mã luôn tối (xem pre.ma phía trên) — màu cú pháp đo ≥ 6,9:1 trên nền đó ở cả hai chế độ */
.khoi-ma .x-dau        { color: #cbd5e1; }

/* Hàng đầu khối mã: nhãn ngôn ngữ bên trái, nút chép bên phải. */
/* min-width:0 — ô lưới/flex mặc định min-width:auto nên KHÔNG chịu co nhỏ hơn nội dung dài nhất của nó,
   và một khối mã làm phình cả cột. Đây là chỗ sinh ra TRAN_NGANG ở 430 điểm ảnh. */
.khoi-ma-hop { margin: 0 0 var(--kc-4); min-width: 0; }
/* Hàng đầu khối mã: nhãn và nút chép cùng một chiều cao cố định (luật 12) — không để nút đẩy hàng
   cao hơn ở khối này mà thấp hơn ở khối bên cạnh. */
.khoi-ma-dau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kc-2);
  height: var(--nut-cao-nho);
  margin: 0 0 var(--kc-1);
  font-size: var(--cc-2);
  color: var(--chu-mo);
}
.khoi-ma-dau .nhan-ngon-ngu { text-transform: uppercase; letter-spacing: 0.04em; }

/* Ca ví dụ: yêu cầu bên trái, phản hồi bên phải; dưới 1100px xếp dọc.
   Luật 12 (không nhấp nhô): hai khối cùng hàng phải cùng đỉnh, cùng đáy, cùng chiều cao — nên lưới
   kéo giãn (stretch) và chính thẻ <pre> nở ra lấp phần còn lại, thay vì mỗi khối một chiều cao theo
   số dòng của nó. Trước đây dùng align-items:start nên hai hộp mã lệch đáy tới vài trăm điểm ảnh. */
.cap-vi-du { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kc-4); align-items: stretch; }
.cap-vi-du > .khoi-ma-hop { display: flex; flex-direction: column; margin: 0; min-width: 0; }
.cap-vi-du > .khoi-ma-hop > pre.khoi-ma { flex: 1 1 auto; margin: 0; }
@media (max-width: 1100px) { .cap-vi-du { grid-template-columns: 1fr; } }

/* Một ca ví dụ: tiêu đề, dòng điểm cuối, rồi cặp gửi đi / trả về. */
.ca-vi-du { margin: 0 0 var(--kc-6); padding: 0 0 var(--kc-4); border-bottom: 1px solid var(--vien); }
.ca-vi-du:last-child { border-bottom: 0; }
.ca-vi-du h4 { margin: 0 0 var(--kc-1); font-size: var(--cc-5); display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-2); }
.ca-vi-du > p { margin: 0 0 var(--kc-3); }

/* Khối dài (nội dung tệp XML ví dụ) gập lại bằng <details> của trình duyệt — không cần JavaScript,
   và bản in bung ra được qua @media print. */
.khoi-xem-them { margin: 0 0 var(--kc-4); }
.khoi-xem-them > summary {
  cursor: pointer;
  padding: var(--kc-2) var(--kc-3);
  background: var(--the-dinh);
  border: 1px solid var(--vien);
  border-radius: var(--bo-1);
  font-size: var(--cc-3);
  color: var(--chu-mo);
}
.khoi-xem-them > summary:hover { color: var(--xanh-chu); border-color: var(--xanh); }
.khoi-xem-them[open] > summary { margin: 0 0 var(--kc-2); }

/* Mã HTTP của phản hồi ví dụ — hình thức mượn .nhan, chỉ khác ở chỗ dùng phông số. */
.ma-http { font-family: var(--phong-so); font-weight: 600; }

iframe.pdf { width: 100%; height: 74vh; border: 1px solid var(--vien); border-radius: var(--bo-2); background: var(--the-nen); }

.duong-dan { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-2); font-size: var(--cc-2); color: var(--chu-mo); margin: 0 0 var(--kc-3); }
.duong-dan a { color: var(--chu-mo); }
.duong-dan a:hover { color: var(--xanh-chu); }

.hang-nut { display: flex; gap: var(--kc-2); flex-wrap: wrap; align-items: center; }

/* Ẩn về mặt thị giác nhưng trình đọc màn hình vẫn đọc (nhãn bắt buộc của ô nhập trong bảng). */
.an-nhin {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Bảng hồ sơ hiện tuần tự khi không dùng tab (không JavaScript, và khi in). */
.bang-ho-so { display: block; }
.bang-ho-so:target { scroll-margin-top: var(--kc-4); box-shadow: var(--bong-2), 0 0 0 2px var(--xanh); }

/* ---------------------------------------------------------------- Khung in A4
   Hạ tầng in (chờ đặc tả mẫu của BA trong dacta/mau-in/): mỗi tờ là một .to-a4 kích thước
   đúng A4, đầu trang ba khối theo lối giấy tờ hành chính, chân trang có số trang do
   MÁY CHỦ tính (Chrome và Firefox đều không hỗ trợ counter(page) trong @page nên số
   trang phải nằm sẵn trong HTML). Trên màn hình các tờ xếp dọc như bản xem trước. */
/* mau-co-dinh: vùng xem trước bản in mô phỏng TỜ GIẤY — luôn trắng/đen như .to-a4 phía trên, không theo chế độ */
/* `body` của _LayoutIn cũng là khung cột flex cao đúng màn hình (overflow: hidden) như .ms-root — thiếu
   flex:1 1 auto + min-height:0 + overflow-y:auto ở ĐÂY thì không có phần tử nào cuộn được: mẫu nhiều
   trang bị cắt cụt, không xem được tới trang cuối (người dùng chê 23/09: "không cuộn được"). Cùng lối với
   .noi-dung phía trên — đây là phần tử cuộn duy nhất của bố cục bản in. */
/* min-width:0: cùng lỗi min-height ở .noi-dung phía trên nhưng ở TRỤC NGANG — .xem-truoc-in là flex item của body
   (cột flex), mặc định min-width:auto khiến nó nở theo bề ngang tờ giấy cố định (A4 ngang ~297mm) thay vì co lại
   theo màn hình; overflow-x:hidden trên chính nó không cứu được vì hộp đã nở TO HƠN body trước khi overflow kịp cắt
   — kết quả là TRANG cuộn ngang ở 430px (đo thật 24/09: body.scrollWidth 526 > 430). */
.xem-truoc-in { background: #6b7280; padding: var(--kc-5); flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; }
.to-a4 {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto var(--kc-5);
  padding: 14mm 12mm 16mm;
  /* mau-co-dinh: TỜ A4: giấy trắng mực đen ở cả hai chế độ — bản in ra giấy không có chế độ tối */
  background: #fff;
  color: #000;
  font-family: var(--phong-in);
  font-size: 11pt;
  line-height: 1.4;
  box-shadow: var(--bong-3);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* mau-co-dinh: vùng xem trước bản in mô phỏng TỜ GIẤY — luôn trắng/đen như .to-a4 phía trên, không theo chế độ */
.to-a4-dau { display: flex; align-items: flex-start; gap: 8mm; border-bottom: 1px solid #000; padding-bottom: 3mm; margin-bottom: 4mm; }
.to-a4-dau-trai { flex: 1 1 auto; min-width: 0; text-align: center; }
.to-a4-co-quan { font-size: 10pt; text-transform: uppercase; }
.to-a4-don-vi { font-size: 11pt; font-weight: 700; text-transform: uppercase; }
.to-a4-dau-phai { flex: 0 0 52mm; font-size: 9.5pt; text-align: right; }
.to-a4-ten { text-align: center; font-size: 15pt; font-weight: 700; text-transform: uppercase; margin: 2mm 0 1mm; letter-spacing: 0.02em; }
.to-a4-ten-phu { text-align: center; font-size: 10pt; font-style: italic; margin: 0 0 4mm; }
.to-a4-than { flex: 1 1 auto; min-height: 0; }
/* mau-co-dinh: vùng xem trước bản in mô phỏng TỜ GIẤY — luôn trắng/đen như .to-a4 phía trên, không theo chế độ */
.to-a4-chan { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 6mm; border-top: 1px solid #000; padding-top: 2mm; margin-top: 4mm; font-size: 9pt; }
.to-a4-so-trang { white-space: nowrap; }
.to-a4-ky { display: flex; justify-content: flex-end; gap: 14mm; margin-top: 8mm; text-align: center; font-size: 10.5pt; }
.to-a4-ky-o { min-width: 48mm; }
.to-a4-ky-chuc { font-weight: 700; text-transform: uppercase; }
.to-a4-ky-ghi { font-style: italic; font-size: 9.5pt; }
.to-a4-ky-cho { height: 20mm; }
/* Dấu bản giả danh: bắt buộc ghi rõ trên mọi bản in không có quyền định danh. */
.to-a4-gia-danh {
  /* mau-co-dinh: dấu bản giả danh trên tờ A4: theo mực đen của bản in */
  border: 1.5pt solid #000;
  padding: 1.5mm 3mm;
  margin: 0 0 4mm;
  font-size: 10pt;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
table.bang-in { width: 100%; border-collapse: collapse; font-size: 10pt; }
/* mau-co-dinh: vùng xem trước bản in mô phỏng TỜ GIẤY — luôn trắng/đen như .to-a4 phía trên, không theo chế độ */
table.bang-in th, table.bang-in td { border: 0.75pt solid #000; padding: 1mm 1.5mm; text-align: left; vertical-align: top; }
/* mau-co-dinh: vùng xem trước bản in mô phỏng TỜ GIẤY — luôn trắng/đen như .to-a4 phía trên, không theo chế độ */
table.bang-in th { background: #e8e8e8; font-weight: 700; text-align: center; }
table.bang-in td.so { text-align: right; font-variant-numeric: tabular-nums; }
/* GD-27. Bìa bản in A4 cũng dùng lưới theo bề rộng nội dung, chỉ khác là 12 rãnh thay vì 24 —
   khổ giấy hẹp hơn màn hình nên 12 cột con là quá vụn.

   Trước đây khối này là dt/dd display:inline và dựa vào việc nhãn có sẵn dấu hai chấm ở cuối
   ("Khoa: "). Khi nhãn chuyển sang dữ liệu thì dấu đó mất, và bản in ra "KhoaK02",
   "Vào viện18/04/2025 13:26" — chữ dính liền, không đọc được. Nay nhãn và giá trị là hai dòng
   trong một ô của lưới, không phụ thuộc dấu câu nào cả. */
.to-a4 dl.hanh-chinh.luoi-noi-dung { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2mm 6mm; }
.to-a4 dl.hanh-chinh .o-kv { min-width: 0; break-inside: avoid; }
/* mau-co-dinh: vùng xem trước bản in mô phỏng TỜ GIẤY — luôn trắng/đen như .to-a4 phía trên, không theo chế độ */
.to-a4 dl.hanh-chinh dt { display: block; font-size: 9pt; color: #333; font-weight: 400; padding: 0; line-height: 1.2; }
.to-a4 dl.hanh-chinh dd { display: block; margin: 0; padding: 0; border: 0; font-size: 11pt; font-weight: 700; line-height: 1.25; }
/* Bậc cột trên giấy: ba ô một hàng cho trường ngắn, hai cho trường vừa, cả hàng cho trường dài.
   Độ đặc hiệu (0,3,0) nên thắng mọi bậc thu nhỏ theo khung nhìn — tờ giấy không đổi bề rộng
   theo cửa sổ trình duyệt. */
.to-a4 .luoi-noi-dung > [data-col="1"],
.to-a4 .luoi-noi-dung > [data-col="2"],
.to-a4 .luoi-noi-dung > [data-col="3"] { grid-column: span 4; }
.to-a4 .luoi-noi-dung > [data-col="4"],
.to-a4 .luoi-noi-dung > [data-col="5"],
.to-a4 .luoi-noi-dung > [data-col="6"] { grid-column: span 6; }
.to-a4 .luoi-noi-dung > [data-col="7"],
.to-a4 .luoi-noi-dung > [data-col="8"],
.to-a4 .luoi-noi-dung > [data-col="9"],
.to-a4 .luoi-noi-dung > [data-col="10"],
.to-a4 .luoi-noi-dung > [data-col="11"],
.to-a4 .luoi-noi-dung > [data-col="12"] { grid-column: span 12; }

/* Thanh công cụ của trang xem trước bản in (không ra giấy). N10 (24/09): trang góp thêm control qua section
   "ThanhCongCu" (mẫu in, Xem, In, Tải PDF, phóng to/thu nhỏ, Trang x/y) — nhiều hơn một nút "Quay lại" như trước,
   nên PHẢI xuống dòng ở màn hẹp (flex-wrap), không thì dải này tự tràn ngang cả TRANG (đo thật: body.scrollWidth
   526 > 430 ở 430px — .thanh-in không co được vì flex item mặc định min-width:auto, không phải vì .xem-truoc-in). */
.thanh-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kc-3);
  padding: var(--kc-2) var(--kc-5);
  /* mau-co-dinh: dải công cụ của bản xem trước bản in: khung quanh tờ giấy, không theo chế độ */
  background: #1f2937;
  color: #e2e8f0;
  /* N10 (24/09, người dùng: "nền tối inputs sáng, tệ"): dải này CỐ Ý tối bất kể sáng/tối (mau-co-dinh ở
     trên), nhưng .o-xo/.nut-phu lấy màu theo BIẾN CHUNG của trang (--o-nen trắng ở chế độ sáng, --the-nen
     trắng ở chế độ sáng) — ghép vào dải tối cố định thành khối trắng chói. Định lại ĐÚNG những biến mà
     hai lớp đó dùng, CHỈ trong phạm vi dải này, bằng tông tối khớp nền #1f2937 — nhờ vậy kết quả GIỐNG
     NHAU ở cả hai chế độ hiển thị của trang (không phụ thuộc [data-theme]), tự nhiên "đúng cả sáng lẫn
     tối" vì không đọc theo chế độ nào cả. Số đo: xem tools/giaodien/kiem-mau-in.js phần "thanh công cụ". */
  --o-nen: #111827;
  --o-nen-tat: #0b1220;
  --o-chu-mau: #e2e8f0;
  --o-vien: #64748b;
  --o-vien-mo: #374151;
  --o-vien-tieu-diem: #60a5fa;
  --o-quang-tieu-diem: 0 0 3px 1px rgba(96, 165, 250, .55);
  --o-cho: #94a3b8;
  --the-nen: #111827;
  --xanh-chu: #93c5fd;
}
/* mau-co-dinh: vùng xem trước bản in mô phỏng TỜ GIẤY — luôn trắng/đen như .to-a4 phía trên, không theo chế độ */
.thanh-in .nho { color: #cbd5e1; }


/* Khối lệnh mẫu (curl nhiều dòng) được phép cuộn ngang RIÊNG NÓ: bọc dòng lệnh shell lại làm
   người đọc chép sai. Lớp .cuon-ngang nói rõ đây là vùng cuộn CỐ Ý, và script kiểm giao diện
   đọc chính lớp này để không báo là thanh cuộn lồng ngoài ý muốn. */
.cuon-ngang { overflow-x: auto; max-width: 100%; }

/* Dải tab LỒNG bên trong một khối (chuyển mặt "Theo nhóm / Dữ liệu thô" của Bảng 1): nhẹ hơn dải
   tab cấp trang — không viền ngoài, không bo góc, nền trắng — để mắt vẫn thấy rõ đâu là tab của
   trang, đâu là tab của một khối bên trong trang. */
.khung-tab-trong { border: 0; border-radius: 0; background: none; box-shadow: none; }
.khung-tab-trong > .dai-tab { background: none; border-radius: 0; padding: 0; }
.khung-tab-trong > .o-tab { padding: var(--kc-3) 0 0; }
/* Tiêu đề của panel lồng ("Tổng hợp lượt khám theo nhóm nghiệp vụ") do quy tắc .o-tab-tieu-de
   chung ẩn trên màn hình và hiện lại khi KHÔNG có JavaScript hoặc khi in — không cần luật riêng. */

/* =============================================================================
   GD-31 — KHUNG ỨNG DỤNG Ở BỀ RỘNG ĐIỆN THOẠI

   Ba chỗ làm cả TRANG cuộn ngang ở 430 điểm ảnh, đo bằng tools/giaodien/kiem-giao-dien.js:

   1. Khối người dùng ở đầu trang. Tên đầy đủ + vai + đơn vị + nút Đăng xuất nằm một hàng
      không co, rộng 429px, cộng lề của thương hiệu là 469px. Sửa: ở điện thoại đầu trang
      xuống hai hàng, khối người dùng chỉ còn nút Đăng xuất (tên và vai đã có ở trang Đổi mật
      khẩu và ở chính nút, không mất thông tin nào không tra lại được).

   2. Nhãn phạm vi dữ liệu — sửa ở mục nhãn phía trên, cho xuống dòng.

   3. Tờ A4 của bản xem trước bản in rộng cứng 210mm (794px). Ở điện thoại cho nó co theo
      bề ngang màn hình; khi IN thì quy tắc @media print lấy lại đúng 210mm, nên giấy không đổi.
   ============================================================================= */
@media (max-width: 639.98px) {
  .dau-trang-tren { flex-wrap: wrap; height: auto; padding: var(--kc-2) var(--kc-4); row-gap: var(--kc-2); }
  .thuong-hieu-khau-hieu { display: none; }
  .nguoi-dung-khoi { display: none; }
  .nguoi-dung { gap: var(--kc-2); }
  .menu { padding: 0 var(--kc-4); }
  .noi-dung { padding: var(--kc-vung); }
  .xem-truoc-in { padding: var(--kc-3); }
  .to-a4 {
    width: 100%;
    min-height: 0;
    padding: var(--kc-4);
    font-size: 10pt;
  }
  /* Tờ giấy co bằng bề ngang điện thoại thì ba ô một hàng là quá chật: mỗi trường một hàng. */
  .to-a4 .luoi-noi-dung > [data-col] { grid-column: span 12; }
}

/* =============================================================================
   GD-27 — HỆ LƯỚI THEO BỀ RỘNG NỘI DUNG (thay lối "chia đều cột")

   Vì sao có mục này. Gần như mọi lưới của tệp này từng viết
       grid-template-columns: repeat(auto-fit, minmax(Npx, 1fr))
   nghĩa là MỌI Ô RỘNG BẰNG NHAU bất kể nội dung dài ngắn. Người dùng chụp ảnh khối
   "Hành chính người bệnh" và nói đúng hiện tượng: ô "HỌ VÀ TÊN NB-ZMJJQ74MDJJNXFVZ"
   bị xuống dòng, nhãn phụ "đang che" rơi xuống dòng thứ hai, trong khi ô "DÂN TỘC 01"
   và "QUỐC TỊCH VN" cùng hàng bỏ trống hơn 80% bề ngang — "chia đều cột, xuống dòng
   toán loạn, đọc chả hiểu được".

   Cách làm mới, ba điều:

   1. Lưới nền là SỐ CỘT CỐ ĐỊNH, 12 cột (ngôn ngữ chung kiểu Bootstrap theo GD-21).
      Nhưng bên trong CSS dùng 24 RÃNH chứ không 12: chỉ với 24 rãnh mới xuống được
      đúng bậc 12 → 8 → 6 → 4 → 2 → 1 cột (24/2, 24/3, 24/4, 24/6, 24/12, 24/24).
      Với 12 rãnh thì bậc 8 cột không tồn tại. Một ô khai data-col="N" (N = 1..12)
      chiếm 2N rãnh ở bậc rộng nhất.

      Khe 16px nằm giữa MỌI rãnh, nhưng ô chiếm nhiều rãnh thì ăn luôn khe bên trong
      nó, nên tổng bề ngang vẫn khớp: 12 ô × (2 rãnh + 1 khe) + 11 khe = 24 rãnh + 23 khe.

   2. Mỗi ô KHAI SỐ CỘT NÓ CẦN qua thuộc tính data-col, và số đó do MÁY CHỦ TÍNH theo
      độ dài nội dung thật (HaTang/CotNoiDung.cs) — không khai tay từng trường. Trường
      nào dài thì tự được thêm cột. Dùng thuộc tính data-* + bộ chọn thuộc tính chứ
      KHÔNG dùng style="" nội tuyến: chính sách đặt style-src 'self', style nội tuyến
      bị chặn IM LẶNG.

   3. Bậc thu nhỏ là thật, và số cột mỗi trường co THEO TỈ LỆ (nhân 1,5 → 2 → 3 → 6 → 12)
      chứ không nhảy thẳng về một cột: ô hai cột ở màn rộng vẫn còn hơn ô một cột khi hẹp.

   Ràng buộc kiểm được bằng số: tools/giaodien/kiem-giao-dien.js đo từng ô ở năm bề rộng
   (1920, 1440, 1280, 900, 430) và đỏ nếu giá trị của trường ngắn phải xuống dòng, hoặc
   một ô xuống dòng trong khi ô cùng hàng bỏ trống quá nửa bề ngang.
   ============================================================================= */
.luoi-noi-dung {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: var(--kc-3) var(--kc-4);
  margin: 0;
}
/* Hàng THẺ SỐ / hàng thẻ (.luoi-o, .luoi-2, .luoi-3) là KHỐI, không phải lưới khoá–giá trị: `margin: 0` ở trên (viết
   cho dl.hanh-chinh, dl.ho-so-luoi) từng xoá luôn lề đáy của chúng vì cùng độ đặc hiệu mà viết sau `.luoi-o {
   margin-bottom }` — hàng thẻ số trong một thẻ dính sát bảng ngay dưới (Thẻ điểm tháng, Hồ sơ người bệnh). Luật
   này phải đứng SAU luật xoá lề (test HangTheSo_KhongMatLeKhiNamTrongThe). Ở cấp trang thì nhịp khối lo, lề này bị bỏ. */
.luoi-noi-dung:where(.luoi-o, .luoi-2, .luoi-3) { margin-bottom: var(--kc-khoi); }
/* min-width:0 bắt buộc: không có nó thì nội dung dài ép rãnh phình ra và lưới tràn ngang. */
.luoi-noi-dung > * { min-width: 0; }
/* Mặc định an toàn cho ô CHƯA khai cột: cả hàng. Thà một ô một hàng còn hơn chữ tràn.
   Viết trong :where() nên độ ưu tiên bằng 0 — mọi luật data-col ở dưới đều thắng. */
.luoi-noi-dung > :where(*) { grid-column: span 24; }

/* --- Bậc rộng nhất: 12 cột (khung nhìn từ 1400 điểm ảnh) --- */
.luoi-noi-dung > [data-col="1"] { grid-column: span 2; }
.luoi-noi-dung > [data-col="2"] { grid-column: span 4; }
.luoi-noi-dung > [data-col="3"] { grid-column: span 6; }
.luoi-noi-dung > [data-col="4"] { grid-column: span 8; }
.luoi-noi-dung > [data-col="5"] { grid-column: span 10; }
.luoi-noi-dung > [data-col="6"] { grid-column: span 12; }
.luoi-noi-dung > [data-col="7"] { grid-column: span 14; }
.luoi-noi-dung > [data-col="8"] { grid-column: span 16; }
.luoi-noi-dung > [data-col="9"] { grid-column: span 18; }
.luoi-noi-dung > [data-col="10"] { grid-column: span 20; }
.luoi-noi-dung > [data-col="11"] { grid-column: span 22; }
.luoi-noi-dung > [data-col="12"] { grid-column: span 24; }

/* Mặc định theo từng loại lưới. Đặt trong :where() để mọi data-col vẫn thắng. */
.luoi-noi-dung:where(.luoi-o) > :where(*) { grid-column: span 6; }   /* 4 ô chỉ số một hàng */
.luoi-noi-dung:where(.luoi-2) > :where(*) { grid-column: span 12; }  /* 2 thẻ một hàng */
.luoi-noi-dung:where(.luoi-3) > :where(*) { grid-column: span 8; }   /* 3 thẻ một hàng */
.luoi-noi-dung:where(.dong-chi-tiet-cot) > :where(*) { grid-column: span 8; }

/* GD2-15 (nghiệm thu 29/09): hàng thẻ số 4 ô một hàng mà số ô không chia hết cho 4 để lại hàng cuối thưa — Thẻ điểm tháng
   10 thẻ thì hàng cuối 2 thẻ, nửa phải trống. Đếm số ô bằng bộ chọn số lượng (:nth-last-child, chạy cả Firefox ESR 102 —
   không :has) và dàn LẠI mấy hàng cuối cho đủ hàng: dư 3 → hàng cuối 3 ô; dư 2 → hai hàng cuối 3 + 3 (chỉ 2 ô → 2 ô nửa
   hàng); dư 1 → hai hàng cuối 3 + 2. Chỉ ô không khai data-col, chỉ bậc 4 ô một hàng (≥ 1400px). */
@media (min-width: 1400px) {
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(3):not([data-col]),
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(4n+3) ~ :nth-last-child(-n+3):not([data-col]),
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(6):not([data-col]),
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(4n+6) ~ :nth-last-child(-n+6):not([data-col]),
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(5):not([data-col]),
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(4n+5) ~ :nth-last-child(-n+5):not([data-col]) { grid-column: span 8; }
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(4n+5) ~ :nth-last-child(-n+2):not([data-col]),
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(2):not([data-col]),
  .luoi-o.luoi-noi-dung > :first-child:nth-last-child(2) ~ :not([data-col]) { grid-column: span 12; }
}

/* --- Bậc 8 cột (đến 1399.98 điểm ảnh): mỗi trường nhân 1,5 cột --- */
@media (max-width: 1399.98px) {
  .luoi-noi-dung > [data-col="1"] { grid-column: span 3; }
  .luoi-noi-dung > [data-col="2"] { grid-column: span 6; }
  .luoi-noi-dung > [data-col="3"] { grid-column: span 9; }
  .luoi-noi-dung > [data-col="4"] { grid-column: span 12; }
  .luoi-noi-dung > [data-col="5"] { grid-column: span 15; }
  .luoi-noi-dung > [data-col="6"] { grid-column: span 18; }
  .luoi-noi-dung > [data-col="7"] { grid-column: span 21; }
  .luoi-noi-dung > [data-col="8"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="9"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="10"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="11"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="12"] { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-o) > :where(*) { grid-column: span 8; }
  .luoi-noi-dung:where(.luoi-2) > :where(*) { grid-column: span 12; }
  .luoi-noi-dung:where(.luoi-3) > :where(*) { grid-column: span 12; }
  .luoi-noi-dung:where(.dong-chi-tiet-cot) > :where(*) { grid-column: span 12; }
}

/* --- Bậc 6 cột (đến 1099.98 điểm ảnh): mỗi trường nhân 2 cột --- */
@media (max-width: 1099.98px) {
  .luoi-noi-dung > [data-col="1"] { grid-column: span 4; }
  .luoi-noi-dung > [data-col="2"] { grid-column: span 8; }
  .luoi-noi-dung > [data-col="3"] { grid-column: span 12; }
  .luoi-noi-dung > [data-col="4"] { grid-column: span 16; }
  .luoi-noi-dung > [data-col="5"] { grid-column: span 20; }
  .luoi-noi-dung > [data-col="6"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="7"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="8"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="9"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="10"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="11"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="12"] { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-o) > :where(*) { grid-column: span 12; }
  .luoi-noi-dung:where(.luoi-2) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-3) > :where(*) { grid-column: span 12; }
  .luoi-noi-dung:where(.dong-chi-tiet-cot) > :where(*) { grid-column: span 12; }
}

/* --- Bậc 4 cột (đến 899.98 điểm ảnh): mỗi trường nhân 3 cột --- */
@media (max-width: 899.98px) {
  .luoi-noi-dung > [data-col="1"] { grid-column: span 6; }
  .luoi-noi-dung > [data-col="2"] { grid-column: span 12; }
  .luoi-noi-dung > [data-col="3"] { grid-column: span 18; }
  .luoi-noi-dung > [data-col="4"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="5"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="6"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="7"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="8"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="9"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="10"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="11"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="12"] { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-o) > :where(*) { grid-column: span 12; }
  .luoi-noi-dung:where(.luoi-2) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-3) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.dong-chi-tiet-cot) > :where(*) { grid-column: span 24; }
}

/* --- Bậc 2 cột (đến 639.98 điểm ảnh): mỗi trường nhân 6 cột --- */
@media (max-width: 639.98px) {
  .luoi-noi-dung > [data-col="1"] { grid-column: span 12; }
  .luoi-noi-dung > [data-col="2"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="3"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="4"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="5"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="6"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="7"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="8"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="9"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="10"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="11"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="12"] { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-o) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-2) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-3) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.dong-chi-tiet-cot) > :where(*) { grid-column: span 24; }
}

/* --- Bậc một cột (đến 479.98 điểm ảnh): mỗi trường nhân 12 cột --- */
@media (max-width: 479.98px) {
  .luoi-noi-dung > [data-col="1"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="2"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="3"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="4"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="5"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="6"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="7"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="8"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="9"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="10"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="11"] { grid-column: span 24; }
  .luoi-noi-dung > [data-col="12"] { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-o) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-2) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.luoi-3) > :where(*) { grid-column: span 24; }
  .luoi-noi-dung:where(.dong-chi-tiet-cot) > :where(*) { grid-column: span 24; }
}


/* ---------------------------------------------------------------- Bản in (A4)
   Lỗi trước: .bang-ho-so { display: none } khiến in hồ sơ chỉ ra 1 trong 15 bảng.
   Khi in phải hiện đủ mọi bảng có dữ liệu, mọi tab, mọi khối gấp; bỏ thanh điều hướng,
   nút và khung cuộn. Khung ứng dụng cố định cũng phải tan ra, nếu không bản in dừng lại
   ở đúng một màn hình. */
@media print {
  @page { size: A4 portrait; margin: 12mm 12mm 14mm; }

  html, body { height: auto; overflow: visible; display: block; }
  body { background: #fff; color: #000; font-size: 10.5pt; line-height: 1.4; }

  .dau-trang, .chan-trang, .dai-tab, .nut, .nut-nho, .nut-tran, .khong-in,
  form.mau, iframe.pdf, .thanh-loc, .duong-dan, details.nhom > summary::before {
    display: none !important;
  }

  .noi-dung { display: block; overflow: visible !important; padding: 0; max-width: none; flex: none; }
  /* Bản in: khung cột flex của nhịp khối tan ra (Firefox chia trang kém với flex) — khoảng cách giữ bằng lề đáy. */
  main.noi-dung:not(.noi-dung-giua) { display: block; }
  main.noi-dung:not(.noi-dung-giua) > :not(:last-child) { margin-bottom: var(--kc-khoi); }

  .the, .o-so, details.nhom, .khoi-gap, .khung-tab {
    border: 1px solid #999;
    box-shadow: none;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 6pt;
  }

  .the-dau { background: none; border-bottom: 1px solid #999; }
  .the-dau::before { display: none; }

  /* Khung cuộn phải mở ra hết: max-height trên màn hình sẽ cắt cụt bảng khi in. */
  .cuon, .the-bang > .cuon, details.nhom > .cuon, .khoi-gap-noi.khoi-gap-bang > .cuon,
  .so-do-khung, .so-do-luong { overflow: visible !important; max-height: none !important; }

  /* MỌI tab bung ra khi in: panel đang hidden vẫn phải ra giấy, kèm tiêu đề của nó.
     Đây là điều kiện nghiệm thu "khi in vẫn phải ra đủ mọi tab". */
  .o-tab { display: block !important; break-inside: auto; }
  .o-tab[hidden] { display: block !important; }
  .o-tab-tieu-de { display: block !important; font-size: 12pt; font-weight: 700; margin: 8pt 0 4pt; border-bottom: 1px solid #999; }

  /* Mọi khối gấp bung ra: bản in phải đủ, không phụ thuộc người dùng đã mở khối nào. */
  .khoi-gap-than { display: block !important; grid-template-rows: none !important; }
  .khoi-gap-cat { overflow: visible !important; }
  .khoi-gap-dau { background: none; border-bottom: 1px solid #999; font-size: 11pt; }
  .khoi-gap-caret { display: none; }

  /* Hồ sơ tổng hợp (GD-19): in hai cột trên A4 dọc, mỗi nhóm không bị cắt qua trang. */
  .ho-so-tong { display: block; }
  .ho-so-nhom { border: 1px solid #999; box-shadow: none; margin-bottom: 6pt; break-inside: avoid; page-break-inside: avoid; }
  .ho-so-nhom-dau { background: #eee; border-bottom: 1px solid #999; font-size: 11pt; }
  /* Bản in A4: lưới 24 rãnh thu về 12 rãnh (mỗi ô data-col N chiếm N rãnh → hai cột cho ô
     một cột, cả hàng cho ô nửa trang). Giấy hẹp hơn màn hình nên không giữ 12 cột. */
  dl.ho-so-luoi.luoi-noi-dung, dl.hanh-chinh.luoi-noi-dung { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4pt 10pt; }
  dl.ho-so-luoi { padding: 5pt 8pt; }
  .luoi-noi-dung > [data-col="1"], .luoi-noi-dung > [data-col="2"], .luoi-noi-dung > [data-col="3"] { grid-column: span 4; }
  .luoi-noi-dung > [data-col="4"], .luoi-noi-dung > [data-col="5"], .luoi-noi-dung > [data-col="6"] { grid-column: span 6; }
  .luoi-noi-dung > [data-col="7"], .luoi-noi-dung > [data-col="8"], .luoi-noi-dung > [data-col="9"],
  .luoi-noi-dung > [data-col="10"], .luoi-noi-dung > [data-col="11"], .luoi-noi-dung > [data-col="12"] { grid-column: span 12; }
  .luoi-noi-dung:where(.luoi-o) > :where(*) { grid-column: span 4; }
  .luoi-noi-dung:where(.luoi-2) > :where(*), .luoi-noi-dung:where(.luoi-3) > :where(*) { grid-column: span 12; }
  .ho-so-luoi dt { font-size: 7.5pt; }
  .ho-so-luoi dd { font-size: 9.5pt; }
  .ho-so-o-manh dd { font-size: 11pt; }
  .ho-so-loi-ra { display: none; }

  .bang-ho-so { display: block !important; break-inside: auto; box-shadow: none; }
  details.nhom > .than, details.nhom > .cuon { display: block !important; }
  details.nhom:not([open]) > .than { display: block !important; }

  table.bang { font-size: 9pt; }
  table.bang thead { display: table-header-group; }
  table.bang thead th { position: static; background: #e5e5e5; color: #000; border-bottom: 1px solid #000; }
  table.bang tbody tr:nth-child(even) { background: none; }
  table.bang th, table.bang td { border: 1px solid #666; }
  table.bang tr { break-inside: avoid; }

  a[href]::after { content: ""; }
  a { color: #000; text-decoration: none; }

  /* Đầu trang bản in: chỉ hiện khi in, theo mẫu ba khối của giấy tờ hành chính. */
  .in-dau-trang { display: block !important; }
  .in-chan-trang { display: block !important; }

  /* Tờ A4 dựng sẵn: mỗi tờ đúng một trang giấy, không bóng, không nền xem trước. */
  .xem-truoc-in { background: none; padding: 0; flex: none; min-height: 0; overflow: visible; }
  .to-a4 {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
    break-after: page;
    page-break-after: always;
  }
  .to-a4:last-child { break-after: auto; page-break-after: auto; }

  /* Khối mã khi in: nền trắng, chữ đen, phân biệt bằng ĐẬM/NGHIÊNG chứ không bằng màu — máy in
     đen trắng biến mọi màu nhạt thành cùng một mức xám. */
  pre.ma, .khoi-ma {
    background: #fff;
    color: #000;
    border: 1px solid #999;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .khoi-ma .x-the, .khoi-ma .x-khoa { color: #000; font-weight: 700; }
  .khoi-ma .x-thuoc-tinh, .khoi-ma .x-tu-khoa { color: #000; font-weight: 600; }
  .khoi-ma .x-gia-tri, .khoi-ma .x-so, .khoi-ma .x-dau { color: #333; }
  .khoi-ma .x-chu-thich { color: #555; font-style: italic; }
  .khoi-ma-dau .nut { display: none; }
  .cap-vi-du { display: block; }
}

/* Khối chỉ dành cho bản in, ẩn trên màn hình. */
.in-dau-trang, .in-chan-trang { display: none; }

/* Ô tích ghi nhớ đăng nhập: chỉ BỐ CỤC. Hình thức của ô tích và của nhãn thuộc về .o-tick-hop
   và .o-tick trong control-chung.css — xem GD-30. */
.o-ghi-nho { display: flex; align-items: center; margin: 12px 0 4px; }