/* =============================================================================
   Kho dữ liệu y tế tỉnh Thanh Hóa — 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-1: 4px;
  --kc-2: 8px;
  --kc-3: 12px;
  --kc-4: 16px;
  --kc-5: 20px;
  --kc-6: 24px;
  --kc-7: 32px;
  --kc-8: 48px;

  /* --- 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: #1e3a8a;    /* 10,36:1 trên trắng */
  --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 */

  --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) */
  --chu-mo: #64748b;      /* chữ phụ — 4,76:1 trên trắng, vẫn đạt AA */

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

  /* 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à lãnh đạo Sở,
     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); }
a:hover { text-decoration-thickness: 2px; }

: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 → #1e1b4b) 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; }
.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; }
.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; }
.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; }
.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-5) var(--kc-6) var(--kc-7);
  scroll-behavior: smooth;
}
/* 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; }

/* ---------------------------------------------------------------- Đầ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;
  padding: 0 0 var(--kc-3);
  margin: 0 0 var(--kc-4);
  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-dam);
  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 tỉnh, 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-4);
}
.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-4); flex-wrap: wrap; }
.hang-the > .the { flex: 1 1 240px; 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-4); }
.luoi-2 { margin-bottom: var(--kc-4); }
.luoi-3 { margin-bottom: var(--kc-4); }
.luoi-o.luoi-noi-dung { gap: var(--kc-3) var(--kc-3); }
.luoi-2.luoi-noi-dung, .luoi-3.luoi-noi-dung { gap: var(--kc-4); }
/* 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-4); }
/* 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-4); 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;
}
.so-lon-nho { font-size: var(--cc-7); }
.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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kc-1);
  min-height: 112px;
  padding: var(--kc-4);
  color: var(--chu-mo);
  text-align: center;
  border: 1px dashed var(--vien-o-nhap);
  border-radius: var(--bo-2);
  background: var(--the-dinh);
}
.rong-chinh { font-weight: 600; color: var(--chu); }
.rong-phu { font-size: var(--cc-3); }

/* ---------------------------------------------------------------- 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; }
.ds-canh-bao .cb-cau { flex: 1 1 auto; min-width: 0; }
.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: #7f1d1d; }
.ds-canh-bao li.cb-vang { color: #7c3d00; }

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

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; }
.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: var(--kc-4); }

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

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

/* Hàng có nút đứng cạnh ô nhập: nút cao đúng bằng ô nhập nên chân hai thứ thẳng nhau. */
form.mau .hang-nut { display: flex; gap: var(--kc-2); flex-wrap: wrap; align-items: center; margin-top: var(--kc-3); }
form.mau .hang > .hang-nut { margin-top: 0; 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); }

/* ---------------------------------------------------------------- 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: #7c3d00; }
.loi { background: var(--do-nen); border-color: var(--do); color: #7f1d1d; }
.thanh-cong { background: var(--luc-nen); border-color: var(--luc); color: #14532d; }
.mach { background: var(--xanh-nhat); border-color: var(--xanh); color: #1e3a8a; }
.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: #fffbe6;
  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); 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: #475569;
  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); background: var(--xanh-nhat); }
button[role="tab"][aria-selected="true"], .tab-nut[aria-current="true"] {
  color: var(--xanh-dam);
  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: #e2e8f0;
  color: #475569;
  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: #475569; }

.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: #fbfcfe; 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: #cbd5e1; }
/* Ô 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: #16a34a; }
.o-chuoi-do { background: #dc2626; }
.o-chuoi-tim { background: var(--tim); }
.o-chuoi-mo { background: #cbd5e1; }
.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-dam);
  line-height: 1.3;
}
.ho-so-nhom-ic { flex: none; color: var(--xanh); }
.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-dam); }
/* Ô 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: #94a3b8; }
.ho-so-khuyet { font-size: var(--cc-3); color: #94a3b8; 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);
  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-dam); }
.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-dam); 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;
}
body.trang-cong .chan-trang { background: rgba(255, 255, 255, .06); border-top-color: rgba(255, 255, 255, .14); color: #c3d3f0; }
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; } }

.cong-gioi-thieu { color: #e7eeff; }
.cong-dau { display: flex; align-items: center; gap: var(--kc-3); margin-bottom: var(--kc-5); }
.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; }
.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); }
.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; }
.the-cong .nut { width: 100%; height: 38px; }
.the-cong .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 { max-width: 520px; margin: 0 auto; }

/* ---------------------------------------------------------------- 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-dam); padding: 1px var(--kc-1); border-radius: 3px; }
pre.ma {
  font-family: var(--phong-so);
  font-size: var(--cc-3);
  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; }

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

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

.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. */
.xem-truoc-in { background: #6b7280; padding: var(--kc-5); }
.to-a4 {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto var(--kc-5);
  padding: 14mm 12mm 16mm;
  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;
}
.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; }
.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 {
  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; }
table.bang-in th, table.bang-in td { border: 0.75pt solid #000; padding: 1mm 1.5mm; text-align: left; vertical-align: top; }
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; }
.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). */
.thanh-in {
  display: flex;
  align-items: center;
  gap: var(--kc-3);
  padding: var(--kc-2) var(--kc-5);
  background: #1f2937;
  color: #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 10;
}
.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-4) var(--kc-4) var(--kc-6); }
  .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;
}
/* 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; }

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

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