/* ============================================================================
   TỜ BIỂU MẪU IN + 4 TRANG /co-dien/*  —  NỬA TRẦN TÁCH KHỎI co-dien.css
   (đợt 822, việc o72 · nối tiếp đợt 817 việc o66)
   ----------------------------------------------------------------------------
   🔴 ĐÂY KHÔNG PHẢI GIAO DIỆN CỔ ĐIỂN. Chữ "co-dien" trong tên tệp và trong các lớp
      `.to-in-co-dien` `.bang-in-co-dien` … nghĩa là MẪU GIẤY TRUYỀN THỐNG — tờ biểu mẫu
      của phần mềm đời cũ mà anh Tiến gửi ảnh 01/08/2026 — chứ KHÔNG phải chủ đề màn hình
      `data-theme="co-dien"`. Vì vậy MỌI luật ở đây cố ý KHÔNG bọc `:root[data-theme…]`:
      tờ giấy phải ra đúng một dáng dù người ta đang mở giao diện sáng hay tối.

   ⇒ VÌ SAO TÁCH RA: sau đợt 808 chỉ còn HAI giao diện (`light` · `dark`) nên toàn bộ
     36.468 byte luật bọc `:root[data-theme^="co-dien"]` trong `co-dien.css` KHÔNG còn
     khớp gì nữa — nhưng vẫn nằm chung một tệp 84.016 byte được nạp cho MỌI người ở MỌI
     trang. Đo bằng `node cong-cu/soi-pham-vi-co-dien.mjs`: chỉ 8.617 byte luật (81 luật = 78 khối cấp cao + 3 luật trong khối in)
     + khối `@media print` là còn việc để làm. Tệp này giữ đúng phần còn việc đó.

   ⛔ ĐỪNG BỎ THẺ NẠP TỆP NÀY. Đợt 817 đã ĐO và BÁC BỎ tiền đề "bỏ thẳng thẻ link" — bỏ là
     hỏng LẶNG LẼ (build xanh, test xanh) ba đường:
       ① 4 TRANG CÒN SỐNG `/co-dien/bang-cham-cong` · `/co-dien/danh-gia-thang` ·
          `/co-dien/bao-cao-tre-som` · `/co-dien/di-tre-ve-som` — dẫn từ `/bao-cao`, mọi
          tài khoản đã đăng nhập mở được; riêng `/co-dien/di-tre-ve-som` là LƯỚI DUYỆT
          thật (tick · chọn lý do · Duyệt), không phải bản in xem cho vui.
       ② Khối `@media print` ở cuối mục 13 là nơi DUY NHẤT trong toàn bộ CSS toàn cục của
          app che bộ khung của chính app lúc in (`.top-row` `.sidebar` `#blazor-error-ui`
          + bỏ đệm `.content`). Đo 17/08/2026: `bootstrap.min.css` CÓ khối `@media print`
          nhưng nhắc ba lớp đó đúng 0 lần; `app.css` nhắc `top-row` 78 lần nhưng có 0 khối
          `@media print`. Mất khối này là MỌI trang in ra giấy đều mang theo thanh nav.
       ③ `.o-ngay-vn` canh giữa ô gõ NGÀY, thuộc component DÙNG CHUNG `ChungTu/ONgay`
          (quy tắc #5 cấm `<input type="date">`) ⇒ dùng khắp app.
       ④ `.chan-co-dien { display: none }` là luật ẨN chân trang cổ điển. Mất nó thì chân
          trang ấy HIỆN RA ở mọi trang — mất luật ẩn nguy hơn mất luật trang điểm.
     Hàng rào canh: `TKNB.Tests/CoDienConDuocNapTests.cs`.

   ⚠ THỨ TỰ NẠP LÀ MỘT PHẦN CỦA LUẬT, ⛔ đừng đổi chỗ thẻ `<link>`. Trong `App.razor` tệp
     này đứng ĐÚNG chỗ `co-dien.css` cũ đứng: sau `app.css` + `TKNB.Web.styles.css` và
     TRƯỚC `bo-mau/ap-dung.css` (ap-dung phải thắng được luật màu ở đây). Đưa lên trước
     `app.css` là mọi luật không mang `!important` thua trong im lặng.

   ↩ ĐƯỜNG LUI: THÊM một thẻ <link> co-dien.css vào `App.razor` ngay dưới thẻ nạp tệp này —
     ⛔ KHÔNG phải "đổi lại tên tệp": nửa trần đã DỜI HẲN sang đây chứ không nhân đôi, nên nạp
     riêng co-dien.css là mất luôn tờ biểu mẫu + phép in. Tệp cũ còn NGUYÊN trên đĩa với nửa bọc
     theme (quy tắc #20: đóng băng, KHÔNG xóa); nạp CẢ HAI là về đúng hành vi trước đợt 822.

   📏 Đo lại bất cứ lúc nào: `node cong-cu/soi-pham-vi-co-dien.mjs <đường-dẫn-tệp>` — chạy
     trên tệp này phải ra ~100% luật trần (đúng chủ ý), chạy trên `co-dien.css` phải ra
     0 luật trần (nửa trần đã dọn hết sang đây).
   ============================================================================ */

/* ============================================================================
   13. TỜ BẢN IN CỔ ĐIỂN — trang /co-dien/bang-cham-cong (đợt 180, theo ẢNH 02)
   ----------------------------------------------------------------------------
   CỐ Ý KHÔNG đặt dưới :root[data-theme^="co-dien"]: đây là trang báo cáo RIÊNG của
   giao diện cổ điển, mở ở giao diện nào cũng phải ra đúng tờ giấy. Các lớp ở đây
   có tiền tố riêng nên không đụng trang nào khác.
   ============================================================================ */

/* Khối chọn kỳ — nhãn đi liền ô chọn, khung mảnh như biểu mẫu cũ */
.khung-chon-co-dien {
    border: 1px solid #b6c7dc;
    background-color: #f5f7fa;
    padding: .4rem .6rem;
    margin-bottom: .8rem;
}

.khung-chon-co-dien .dong-chon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .6rem;
}

.khung-chon-co-dien label {
    color: #14395e;
    font-size: 12.5px;
    margin: 0;
    white-space: nowrap;
}

/* width:auto — .form-control/.form-select của Bootstrap là khối rộng 100%, để nguyên thì mỗi ô
   chiếm trọn một dòng và khối chọn vỡ thành cột dọc (đã dính ở đợt 181) */
.khung-chon-co-dien select,
.khung-chon-co-dien input {
    width: auto;
    min-width: 110px;
    display: inline-block;
}

.khung-chon-co-dien input[type="date"] {
    min-width: 140px;
}

/* ⭐ ĐỢT 926 — THANH CÔNG CỤ CỦA BẢN IN BẢNG CHẤM CÔNG GOM VỀ MỘT HÀNG (anh Tiến 20/08/2026 tối:
   *"dòng nút và ô chọn gom thành 1 hàng và sắp lại cho đẹp"*).
   · `.o-kieu-o` — ô "Ô ngày ghi" trước đây đứng riêng một hàng với `style="width:260px"` gõ thẳng
     trong markup; nay hạ xuống 225px và đưa về CSS cho cùng chỗ với mấy luật anh em.
   · `.nhom-nut` — hai nút hành động đứng liền nhau, đẩy về cuối hàng bằng `ms-auto` ngay ở markup
     (cùng cách với `.nut-xem-bao-cao` của đợt 923: mắt cần thấy ranh giới "chọn xong thì bấm").
   ⚠ Hàng vẫn `flex-wrap: wrap` như cũ — màn hình hẹp thì cho phép xuống dòng, ⛔ đừng ép `nowrap`:
     ép cứng là ở laptop 13" nó tràn khỏi khung thay vì xuống hàng. */
.khung-chon-co-dien .o-kieu-o {
    width: 225px;
    min-width: 225px;
}

.khung-chon-co-dien .nhom-nut {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* ⭐ ĐỢT 982 — HÀNG LỌC GỌN CỦA /co-dien/di-tre-ve-som: gom hai hàng chọn thành MỘT, kèm hai nút lối đi.
   Luật chung `.khung-chon-co-dien select/input` ở trên đặt `min-width: 110px` cho MỌI ô — đủ rộng cho
   khối chọn kỳ hai hàng của tờ bản in, nhưng hàng này gánh 6 ô cộng 2 nút liên kết nên phải hẹp lại.
   ⛔ Chỉ siết trong `.dong-chon-gon`, ⛔ đừng hạ luật chung: `.khung-chon-co-dien` còn nuôi ba tờ in
     khác (bảng chấm công · báo cáo trễ/sớm · bản in đánh giá), hạ chung là bóp cả ba mà không ai xem. */
.khung-chon-co-dien .dong-chon-gon {
    gap: .3rem .45rem;
}

.khung-chon-co-dien .dong-chon-gon select,
.khung-chon-co-dien .dong-chon-gon input {
    min-width: 0;
}

/* Ô chọn phòng: tên phòng dài nhất của đơn vị vẫn đọc được, không cho nó nuốt cả hàng */
.khung-chon-co-dien .dong-chon-gon #ds-phong {
    max-width: 250px;
}

.khung-chon-co-dien .dong-chon-gon .o-loc-ten {
    width: 168px;
}

/* ⭐ ĐỢT 982 — CHÂN TRANG KIỂU TỜ GIẤY cho /co-dien/di-tre-ve-som: địa danh + ngày căn phải, rồi hai ô
   ký tên — danh sách này in ra để trình ký.
   ⛔ CỐ Ý không dùng lại `.to-in-co-dien .o-ky`: luật đó nằm TRONG tờ giấy (`.to-in-co-dien`), mà màn
     hình này là danh sách trên nền app chứ không phải tờ in — bọc cả trang vào `.to-in-co-dien` để
     mượn một luật là đổi luôn phông chữ, nền và viền của cả bảng. */
.chan-ky-co-dien {
    margin-top: 1.2rem;
}

.chan-ky-co-dien .dong-dia-danh {
    text-align: right;
    font-size: 13.5px;
    font-style: italic;
    padding-right: 3rem;
}

.chan-ky-co-dien .o-ky {
    display: flex;
    justify-content: space-between;
    margin-top: .4rem;
    font-size: 13.5px;
    font-weight: bold;
}

/* Chừa chỗ viết tay bên dưới mỗi chức danh — bản in ra giấy mới có ý nghĩa, trên màn hình thì nó chỉ
   là khoảng trắng nên không chiếm chỗ đáng kể. */
.chan-ky-co-dien .o-ky > div {
    min-height: 3.2rem;
}

/* Tờ giấy: nền trắng, viền mảnh, CHỮ CÓ CHÂN (Times New Roman) như bản in của phần mềm mẫu */
.to-in-co-dien {
    background: #fff;
    border: 1px solid #c9c9c9;
    padding: 1.2rem 1.4rem 1.6rem;
    font-family: 'Times New Roman', Times, 'Liberation Serif', serif,
                 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* đuôi emoji: đợt 386 */
    color: #000;
    overflow-x: auto;
}

.to-in-co-dien .dau-to {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.to-in-co-dien .ten-co-quan {
    font-weight: bold;
    font-size: 15px;
    line-height: 1.35;
    border-bottom: 1px solid #000;   /* gạch chân dưới khối tên cơ quan như ảnh 02 */
    padding-bottom: .2rem;
    display: inline-block;
}

.to-in-co-dien .don-vi {
    font-size: 15px;
    white-space: nowrap;
}

.to-in-co-dien .tieu-de-to {
    text-align: center;
    margin: 1.6rem 0 1rem;
}

.to-in-co-dien .ten-bieu {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: .5px;
}

.to-in-co-dien .ky-bieu {
    font-size: 16px;
    font-weight: bold;
}

/* ĐỢT 2178 (việc o1621) — DẤU TÌNH TRẠNG DUYỆT của kỳ đang in, đứng cùng hàng với kỳ báo cáo.
   Nói bằng CHỮ chứ không chỉ bằng màu: tờ này chủ yếu ra máy in ĐEN TRẮNG, và màu cũng là kênh
   người mù màu không đọc được. Dùng màu CHỮ + VIỀN, không dùng nền tô: trình duyệt mặc định
   không in nền, nên một cái nhãn tô nền sẽ biến mất đúng lúc nó cần có mặt nhất là trên giấy. */
.to-in-co-dien .dau-chot-to {
    display: inline-block;
    margin-left: .6rem;
    padding: 0 6px;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-size: 12px;
    font-weight: normal;
    vertical-align: middle;
}

.to-in-co-dien .dau-chot-to.da-chot {
    color: #146c2e;
}

.to-in-co-dien .dau-chot-to.chua-chot {
    color: #8a4b00;
}

/* Bảng bản in: KẺ Ô ĐEN toàn bộ, ô ngày hẹp, chữ nhỏ để đủ 31 cột */
.bang-in-co-dien {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

.bang-in-co-dien th,
.bang-in-co-dien td {
    border: 1px solid #000;
    padding: 2px 4px;
    vertical-align: middle;
}

.bang-in-co-dien thead th {
    text-align: center;
    font-weight: bold;
    line-height: 1.15;
}

.bang-in-co-dien .giua {
    text-align: center;
}

/* Hàng THỨ TRONG TUẦN (2 3 4 5 6 7 1) — mẫu Excel của Tổng kho có hàng này, chữ nhỏ hơn hàng ngày */
.bang-in-co-dien .c-thu {
    font-size: 10px;
    font-weight: normal;
    color: #444;
}

.bang-in-co-dien .c-stt { width: 34px; }

/* ⭐ ĐỢT 903 — CỘT MÃ NV + HỌ TÊN CO VỪA CHỮ (anh Tiến 20/08/2026: *"cột họ tên canh vừa chữ, dư
   nhiều quá còn các cột khác thì không đủ chỗ"* · *"cột mã nhân viên cũng tương tự"*).
   🔑 `width: 1%` + `white-space: nowrap` là cách bảo bảng "cột này chỉ cần đúng bề rộng nội dung":
     trình duyệt chia phần dư cho các cột KHÔNG khai bề rộng, nên đặt 1% là cột co lại tới mức không
     xuống dòng rồi thôi. ⛔ Đừng đặt một con số px "vừa mắt hôm nay" — tên dài nhất mỗi phòng mỗi
     khác, đặt cứng thì hoặc lại dư hoặc cắt chữ của người ta.
   ⚠ Cột 62px/150px cũ chính là chỗ ăn mất bề ngang của 31 cột ngày. */
.bang-in-co-dien .c-ma,
.bang-in-co-dien .c-ten {
    width: 1%;
    white-space: nowrap;
}

.bang-in-co-dien .c-chucvu { width: 96px; font-size: 11px; }
.bang-in-co-dien .c-tong { width: 44px; font-size: 10px; }
.bang-in-co-dien .c-tong-hop { font-size: 11px; }

/* ⭐ ĐỢT 926 — TRẢ BỀ NGANG CHO CỘT HỌ TÊN. Anh Tiến 20/08/2026 tối: *"xem trước khi in cho cột tên
   to ra, thu nhỏ cột ghi chú, cột nghỉ học, nghỉ không lương, nghỉ chế độ"*.
   🔑 CỘT TÊN KHÔNG ĐẶT SỐ — nó vẫn giữ `width: 1%` + `nowrap` của đợt 903, tức "chỉ cần vừa chữ".
     Nó to ra là nhờ HAI việc khác: (a) ô THÂN nay mới thật sự mang lớp `.c-ten` (trước chỉ ô tiêu đề
     có, nên ô thân vẫn vỡ hai dòng — xem chú thích trong .razor); (b) bốn cột dưới đây nhả chỗ ra.
   📏 Cộng tay theo A4 ngang (1062px dùng được) sau đợt này: stt 34 + mã ~46 + chức danh 84
     + 31×17 = 527 + Giờ công 36 + Nghỉ phép 36 + 3×24 = 72 + ghi chú 38 ≈ 873 ⇒ CÒN ~189px cho cột
     tên, trước đợt này chỉ ~120px. ⛔ Nới lại bốn số dưới là ăn thẳng vào cột tên.
   ⚠ "Giờ công" và "Nghỉ phép" CỐ Ý GIỮ NGUYÊN 44px — tháng nào chúng cũng có số; ba cột nghỉ kia
     gần như luôn trống nên thu được. ⛔ Đừng thu cả cụm cho đều tay. */
.bang-in-co-dien .c-tong-hep { width: 30px; font-size: 9px; }
.bang-in-co-dien .c-ghichu { width: 44px; font-size: 9px; }

.bang-in-co-dien .c-ngay,
.bang-in-co-dien .o-ngay {
    width: 20px;
    min-width: 20px;
    padding: 2px 1px;
}

/* Thứ Bảy / Chủ nhật / ngày lễ: cột tô XÁM suốt bảng như ảnh 02 */
.bang-in-co-dien .o-nghi {
    background-color: #b9b9b9;
}

/* HÀNG CHẴN/LẺ KHÁC MÀU (anh yêu cầu) — chỉ phần nội dung; ô ngày nghỉ giữ nguyên màu xám
   nhờ luật đứng sau ăn trước ở dòng dưới */
.bang-in-co-dien tbody tr:nth-child(even) > td {
    background-color: #eef1f5;
}

.bang-in-co-dien tbody tr:nth-child(even) > td.o-nghi {
    background-color: #b2b2b2;
}

/* Ô gõ NGÀY ở trang cổ điển — canh giữa cho dễ đọc. Bề rộng do KHUNG (.o-ngay-boc) quyết định,
   đặt qua tham số Kieu của component, đừng ép ở đây kẻo đè mất chỗ của nút lịch. */
.o-ngay-vn {
    text-align: center;
}

/* ----- Thanh công cụ XEM BÁO CÁO (ảnh 03): in + điều hướng trang + "Page 1 of N" ----- */
.thanh-bao-cao-co-dien {
    display: flex;
    align-items: center;
    gap: .25rem;
    background-image: linear-gradient(180deg, #fbfbfb 0%, #e8e8e8 100%);
    border: 1px solid #b0b0b0;
    border-bottom: 0;
    padding: .2rem .4rem;
    font-size: 12px;
}

.thanh-bao-cao-co-dien button {
    background-image: linear-gradient(180deg, #fdfdfd 0%, #e2e2e2 100%);
    border: 1px solid #9a9a9a;
    border-radius: 2px;
    padding: .05rem .4rem;
    font-size: 12px;
    cursor: pointer;
}

.thanh-bao-cao-co-dien button:hover:not(:disabled) {
    background-image: linear-gradient(180deg, #fffbe0 0%, #ffe793 100%);
    border-color: #d9b310;
}

.thanh-bao-cao-co-dien button:disabled {
    color: #6e6e6e;
    cursor: default;
}

.thanh-bao-cao-co-dien .vach {
    width: 1px;
    height: 16px;
    background: #b8b8b8;
    margin: 0 .3rem;
}

.thanh-bao-cao-co-dien .o-trang {
    margin-left: .4rem;
    color: #333;
}

/* Ba dòng tên cơ quan (ảnh 03 có thêm dòng phòng phát hành) */
.to-in-co-dien .ten-co-quan-3dong {
    font-size: 14px;
}

/* Dòng ĐƠN VỊ + khoảng ngày dưới tiêu đề báo cáo */
.to-in-co-dien .dong-don-vi {
    font-size: 14px;
    margin-bottom: .5rem;
}

.to-in-co-dien .dong-don-vi .khoang-ngay {
    display: flex;
    gap: 2.5rem;
    margin-top: .15rem;
}

/* Bảng báo cáo: cột rộng hơn bảng chấm công vì không phải nhét 31 cột ngày */
.bang-bao-cao-tre-som {
    font-size: 12.5px;
}

.bang-bao-cao-tre-som .c-ngay-dai { width: 84px; }
.bang-bao-cao-tre-som .c-gio { width: 62px; }

/* ⭐ ĐỢT 923 (việc ㉒) — CÂN LẠI BỀ RỘNG CỘT.
   Anh Tiến 20/08/2026: *"bản in đi trễ về sớm cần được cân chỉnh lại các cột, to nhỏ không logic và
   không đẹp"*.

   🔑 NGUYÊN TẮC: khóa bề rộng cho cột CHỈ-ĐỌC NGẮN (số thứ tự · mã · tên · ngày · giờ), thả cho cột
     chứa VĂN BẢN DÀI (Ý kiến lãnh đạo · Diễn giải) — chúng là chỗ người ký viết vào. Cùng loại việc
     với đợt 903 (bảng chấm công) và đợt 908 (bảng chấm phân loại).

   ⚠ `width: 1%` + `nowrap` cho Họ tên là luật DÙNG CHUNG ở trên (`.bang-in-co-dien .c-ten`) — đợt này
     chỉ cần gắn lớp cho ô THÂN trong `.razor` là nó ăn. ⛔ Đừng đặt một con số px "vừa mắt hôm nay":
     tên dài nhất mỗi phòng mỗi khác.

   ⭐ ĐỢT 997 — CỘT "TÊN PHÒNG BAN" NAY ĐÃ BỎ HẲN (chốt 22/08/2026, quyết định số 27: bỏ cột đó trên
     bản in đi trễ vì đầu tờ đã ghi "ĐƠN VỊ:"). Câu "thu hẹp, CHƯA bỏ" của đợt 923 hết hiệu lực; số đo
     của nó thì vẫn đúng và chính là lý do bỏ: bộ lọc của trang luôn chọn ĐÚNG MỘT phòng (không có mục
     "tất cả") nên cột ấy lặp cùng một giá trị ở mọi dòng, ngay dưới dòng "ĐƠN VỊ: …". Luật
     `.c-phong` của bảng này gỡ theo — không còn thẻ nào mang lớp đó. */

/* Hai cột văn bản chia đều phần dư — đây là chỗ RỘNG NHẤT của tờ giấy, đúng như nó phải thế.
   ⭐ ĐỢT 997: 22% → 27,5% mỗi cột, tức chia đôi đúng 11% mà cột "Tên phòng ban" vừa nhả ra. Trả cho
   hai cột này là đúng chỗ: đây là nơi người ký viết tay vào, mọi cột còn lại đều chỉ-đọc và ngắn. */
.bang-bao-cao-tre-som .c-van { width: 27.5%; }

/* ⭐ ĐỢT 923 (việc ㉓) — TRANG TRÍ LẠI KHỐI CHỌN LỌC (anh Tiến: *"decord và sắp xếp lại cho đẹp"*).

   Khối nay còn HAI hàng: ① chọn DỮ LIỆU nào · ② bày RA SAO + nút hành động.
   Ba thứ thêm vào, đều nhẹ và đều có việc thật:
     · `.ngan-doc` — vạch dọc mảnh ngăn hai cụm trong cùng một hàng, để mắt biết chỗ nào hết một ý.
     · `.nhom-loc` — bọc bốn nút tròn thành MỘT cụm có nền riêng, nên nút "Xem Báo Cáo" không còn
       trông như lựa chọn thứ năm (chỗ khó chịu nhất trên ảnh anh gửi).
     · `.nut-xem-bao-cao` — đẩy về cuối hàng bằng `ms-auto` của Bootstrap, dáng nhỉnh hơn một chút
       cho đúng vai NÚT HÀNH ĐỘNG.
   ⚠ Màu lấy đúng bảng màu sẵn có của biểu mẫu (`#b6c7dc` viền · `#f5f7fa` nền · `#14395e` chữ) —
     ⛔ không chế màu mới, khối này là tờ biểu mẫu cơ quan chứ không phải chỗ trang trí. */
.khung-chon-co-dien .ngan-doc {
    width: 1px;
    align-self: stretch;
    min-height: 20px;
    background: #b6c7dc;
    margin: 0 .2rem;
}

.khung-chon-co-dien .nhom-loc {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .55rem;
    padding: .1rem .45rem;
    border: 1px solid #d4dfec;
    border-radius: .35rem;
    background: #fff;
}

.khung-chon-co-dien .nut-xem-bao-cao {
    padding-left: .9rem;
    padding-right: .9rem;
    font-weight: 600;
}

/* Ô chọn "Lọc theo" dạng nút tròn như ảnh 03 */
.khung-chon-co-dien .o-loc {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #23313f;
    white-space: nowrap;
}

.to-in-co-dien .chu-giai {
    font-size: 11.5px;
    margin-top: .5rem;
    line-height: 1.45;
}

.to-in-co-dien .chu-giai-them {
    font-family: Tahoma, Verdana, Arial, 'Liberation Sans', sans-serif,
                 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; /* đuôi emoji: đợt 386 */
    color: #444;
    border-top: 1px dotted #b0b0b0;
    padding-top: .3rem;
    margin-top: .35rem;
}

.to-in-co-dien .o-ky {
    display: flex;
    justify-content: space-between;
    margin-top: 1.8rem;
    font-size: 14px;
    font-weight: bold;
}

/* ⭐ ĐỢT 903 — KHỔ GIẤY NẰM NGANG CHO RIÊNG TỜ BẢNG CHẤM CÔNG.
   Anh Tiến 20/08/2026: *"cài đặt in bảng chấm công tháng bị sai, trang in nằm ngang, tất cả các cột
   trong 1 trang"*. Đo trên ảnh anh gửi: hộp thoại in mở ra ở khổ ĐỨNG và tờ giấy chỉ chứa tới cột
   ngày 22 — 9 cột ngày cuối tháng rơi mất.

   🔑 DÙNG TRANG CÓ TÊN, ⛔ KHÔNG dùng `@page { size: landscape }` trần: tệp này nạp TOÀN CỤC cho mọi
     trang của app (đợt 822 — xem đầu mục 13), nên luật trần sẽ xoay ngang cả tờ in đánh giá và danh
     sách trễ/sớm, hai thứ vốn đúng ở khổ đứng. Trang có tên chỉ ăn vào phần tử tự khai `page:`.
   ⚠ Lề 8mm là cố ý hẹp: A4 ngang 297mm trừ hai lề còn 281mm ≈ 1062px — vừa đủ cho 4 cột đầu + 31 cột
     ngày + 5 cột tổng hợp + ghi chú sau khi đã thu ở khối `@media print` ngay dưới.
   ⓘ Trình duyệt không hiểu trang có tên thì rơi về khổ đứng như trước — không vỡ gì, chỉ là chưa được
     như anh muốn. */
@page ngang-cham-cong {
    size: A4 landscape;
    margin: 8mm;
}

.to-in-co-dien.to-ngang {
    page: ngang-cham-cong;
}

/* Khi IN GIẤY: chỉ còn tờ báo cáo, bỏ hết thanh menu/khối chọn/chân trang */
@media print {
    .top-row,
    .menu-co-dien,
    .rail-phan-he,
    .sidebar,
    .khung-chon-co-dien,
    .thanh-bao-cao-co-dien,
    .chan-co-dien,
    #blazor-error-ui {
        display: none !important;
    }

    .to-in-co-dien {
        border: 0;
        padding: 0;
    }

    .content {
        max-width: none;
        padding: 0 !important;
    }

    /* ⭐ ĐỢT 903 — THU BẢNG CHẤM CÔNG CHO ĐỦ 31 CỘT NGÀY TRONG MỘT TRANG NGANG.
       Chỉ thu Ở LƯỢT IN: trên màn hình bảng vẫn giữ cỡ chữ dễ đọc, vì màn hình cuộn ngang được còn
       tờ giấy thì không.
       📏 Cộng tay theo A4 ngang (1062px dùng được): stt 34 + mã ~46 + tên ~120 + chức danh 84
          + 31×17 = 527 + 5×36 = 180 + ghi chú 50 ≈ 1041px. ⛔ Nới lại một trong các số này là tràn
          sang trang thứ hai — đúng cái anh vừa báo. */
    .bang-in-co-dien {
        font-size: 11px;
    }

    .bang-in-co-dien .c-ngay,
    .bang-in-co-dien .o-ngay {
        width: 17px;
        min-width: 17px;
    }

    .bang-in-co-dien .c-chucvu { width: 84px; font-size: 10px; }
    .bang-in-co-dien .c-tong { width: 36px; font-size: 9px; }
    /* ĐỢT 926 — thu thêm ở LƯỢT IN (xem phép cộng tay ở luật màn hình phía trên) */
    .bang-in-co-dien .c-tong-hep { width: 24px; font-size: 8px; }
    .bang-in-co-dien .c-ghichu { width: 38px; font-size: 9px; }
}

/* ===== 14. DANH SÁCH ĐI TRỄ / VỀ SỚM / VẮNG (đợt 181, theo ẢNH 01 và 04) =====
   Không đặt dưới data-theme: đây là trang riêng của giao diện cổ điển, mở ở đâu cũng phải đúng dáng. */
/* Nút "Xuất ra Excel" CAM như ảnh 01 — đặt riêng chứ không mượn màu .btn-success của giao diện
   hiện đại, để đổi nút này không ảnh hưởng nút nào khác */
/* ⚠ ĐỢT 386c — ĐẬM THÊM MỘT NẤC NỮA. Đợt 226 đã đậm một lần nhưng chỉ tính ở ĐÁY gradient; đo lại
   bằng bộ đo (lấy điểm dừng XẤU NHẤT, tức ĐỈNH sáng #dd6a2e) thì chữ trắng chỉ được **3,40:1** —
   mà đây là nút chữ nhỏ (btn-sm) nên ngưỡng vẫn là 4,5. Nay đỉnh #c05219 đạt 4,70:1, đáy 5,9:1.
   Vẫn đúng sắc CAM của ảnh 01, chỉ sẫm hơn một nấc. */
.nut-excel-co-dien {
    background-color: #b84d16 !important;
    background-image: linear-gradient(180deg, #c05219 0%, #a03f0e 100%) !important;
    border-color: #8f360c !important;
    color: #fff !important;
    border-radius: 2px !important;
    margin-bottom: .5rem;
}

/* ⭐ ĐỢT 996 — nút Excel nay đứng CHUNG HÀNG với 🖨 In báo cáo và 📝 Đơn (anh Tiến 22/08/2026).
   Khoảng đệm dưới ở trên là của thời nó đứng riêng một hàng; để nguyên trong hàng lọc là nút tụt
   thấp hơn hai nút bên cạnh đúng .5rem — lệch nhìn thấy được ngay. */
.khung-chon-co-dien .nhom-nut .nut-excel-co-dien {
    margin-bottom: 0;
}

.bang-tre-som-co-dien {
    font-size: 12px;
    border-color: #c3c3c3;
}

.bang-tre-som-co-dien > :not(caption) > * > * {
    border: 1px solid #c3c3c3;
    padding: .22rem .4rem;
    vertical-align: middle;
}

.bang-tre-som-co-dien thead th {
    background-image: linear-gradient(180deg, #f8f8f8 0%, #e2e2e2 100%);
    box-shadow: none !important;
    color: #22344a;
    font-weight: bold;
    white-space: nowrap;
}

.bang-tre-som-co-dien tbody tr:nth-child(even) > td {
    background-color: #f4f7fb;
}

.bang-tre-som-co-dien .giua { text-align: center; }
.bang-tre-som-co-dien .c-tick { width: 32px; }

/* Dòng tóm tắt trên bảng: bao nhiêu TRƯỜNG HỢP của bao nhiêu NGƯỜI (anh Tiến nêu 02/08 —
   bảng xếp theo mã, một người trễ nhiều ngày chiếm trọn trang đầu, nhìn tưởng cả phòng có 2 người) */
.tom-tat-co-dien {
    font-size: 12px;
    color: #14395e;
    background-color: #eef5fd;
    border: 1px solid #a9c6e5;
    padding: .25rem .5rem;
    margin-bottom: .35rem;
}

/* KHUNG CUỘN cho bảng dài — đầu bảng DÍNH lại khi kéo, không mất tên cột */
.khung-cuon-bang {
    max-height: 62vh;
    overflow: auto;
    border: 1px solid #c3c3c3;
    margin-bottom: .5rem;
}

.khung-cuon-bang > .table {
    margin-bottom: 0;
    border-collapse: separate;   /* separate: viền ô mới đi theo hàng đầu bảng khi dính */
    border-spacing: 0;
}

.khung-cuon-bang thead th {
    position: sticky;
    top: 0;
    z-index: 2;
}

/* Phân trang kiểu "Trang 1/4 (37 trường hợp) [1] 2 3 4 ▸" */
.phan-trang-co-dien {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 12px;
    color: #333;
    margin-bottom: .5rem;
}

.phan-trang-co-dien .so-trang,
.phan-trang-co-dien .nut-trang {
    background: none;
    border: 0;
    color: #0645ad;
    padding: 0 .2rem;
    font-size: 12px;
    cursor: pointer;
}

.phan-trang-co-dien .so-trang.dang-xem {
    color: #000;
    font-weight: bold;
    cursor: default;
}

.phan-trang-co-dien .nut-trang:disabled {
    color: #6e6e6e;
    cursor: default;
}

/* Dòng "Lưu ý:" chữ ĐỎ như ảnh 01 — nêu hiện tượng, không quy kết */
.luu-y-co-dien {
    color: #c00000;
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: .6rem;
}

/* Khối B1) B2) B3): ô Lý do + nút Duyệt + câu hướng dẫn xanh */
.khoi-duyet-co-dien {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    border-top: 1px solid #d5d5d5;
    padding-top: .5rem;
}

.khoi-duyet-co-dien label {
    color: #14395e;
    font-size: 12.5px;
    margin: 0;
}

.khoi-duyet-co-dien select {
    width: auto;
    min-width: 220px;
}

.khoi-duyet-co-dien .huong-dan-buoc {
    color: #14559e;
    font-size: 12px;
}

/* ===== 12. CHÂN TRANG CỔ ĐIỂN — chỉ hiện ở giao diện này (ảnh 01) ===== */
.chan-co-dien {
    display: none;
}

/* ===== 16. BẢN IN "KẾT QUẢ ĐÁNH GIÁ, PHÂN LOẠI CÁ NHÂN" (đợt 231, theo sheet T*-H của mẫu thật) =====
   Không đặt dưới data-theme: đây là TỜ GIẤY, mở ở giao diện nào cũng phải ra đúng một dáng.
   (.to-in-co-dien đã cố ý giữ nền trắng ở cả 4 giao diện — xem mục 13 và 15.) */

/* Khối quốc hiệu góc phải đầu tờ — mẫu thật căn giữa trong nửa phải của trang */
.to-in-co-dien .quoc-hieu {
    text-align: center;
    font-size: 14px;
    line-height: 1.4;
    min-width: 300px;
}

.to-in-co-dien .quoc-hieu-1 {
    font-weight: bold;
}

/* Dòng "Độc lập - Tự do - Hạnh phúc" trong văn bản hành chính luôn gạch chân */
.to-in-co-dien .quoc-hieu-2 {
    font-weight: bold;
    display: inline-block;
    border-bottom: 1px solid #000;
    padding: 0 .4rem .1rem;
}

/* Dòng địa danh + ngày, căn phải trên khối chữ ký */
.to-in-co-dien .dong-ngay-ky {
    margin-top: 1.2rem;
    text-align: right;
    font-size: 14px;
    font-style: italic;
    padding-right: 3rem;
}

/* Bảng 7 cột: rộng rãi hơn bảng chấm công vì không phải nhét 31 cột ngày */
.bang-danh-gia-h {
    font-size: 13px;
}

/* BỀ RỘNG CỘT (anh Tiến 03/08: "cột tên cho dãn đủ, các cột khác còn không gian thì gom lại").
   Cột HỌ VÀ TÊN + CHỨC DANH cố ý KHÔNG đặt bề rộng và cấm xuống dòng ⇒ trình duyệt phải chừa đủ chỗ
   cho tên dài nhất; các cột còn lại đặt bề rộng vừa đủ nội dung nên phần dư dồn hết về cột tên. */
.bang-danh-gia-h .c-stt { width: 36px; }
.bang-danh-gia-h .c-ma { width: 78px; }

.bang-danh-gia-h .c-ten,
.bang-danh-gia-h .c-chucvu,
.bang-danh-gia-h tbody td:nth-child(3),
.bang-danh-gia-h tbody td:nth-child(4) {
    white-space: nowrap;
}

/* Ô để TRỐNG cho người ký điền tay — chỉ cần đủ chỗ viết, không cần rộng bằng tiêu đề */
.bang-danh-gia-h .c-o-trong { width: 96px; }

/* Cột hệ số: tiêu đề dài nhưng ô dữ liệu chỉ có "H3" ⇒ cho tiêu đề xuống dòng, cột hẹp lại */
.bang-danh-gia-h .c-heso { width: 132px; }

.bang-danh-gia-h .c-ghichu { width: 150px; }

/* Ô ký cách bảng vừa phải — dòng ngày đã tạo khoảng trắng phía trên rồi */
.to-in-co-dien .dong-ngay-ky + .o-ky {
    margin-top: .4rem;
}