/*
 |==========================================================================================
 | Bộ giao diện cho các màn BÁO CÁO — CSS thuần, không phụ thuộc Tailwind.
 |==========================================================================================
 |
 | VÌ SAO VIẾT TAY THAY VÌ DÙNG TIỆN ÍCH TAILWIND:
 |
 | Panel quản trị nạp CSS dựng sẵn của Filament (`public/css/filament/filament/app.css`).
 | Nó KHÔNG đăng ký theme riêng, và `public/build` cũng không tồn tại — nghĩa là bộ Tailwind
 | quét các file .blade.php của dự án CHƯA TỪNG được dựng, cũng chưa từng được nạp vào /admin.
 | Kiểm chứng: đếm trong chính tệp CSS đang phục vụ thì `grid-cols-4` = 0 lần, `bg-danger-500`
 | = 0 lần, `tabular-nums` = 0 lần. Mọi lớp tiện ích viết trong blade đều rơi xuống đất, và
 | trang đổ thành chữ trần — đúng thứ người dùng nhìn thấy.
 |
 | Thêm nữa, cách viết `bg-{{ $mau }}-500` KHÔNG BAO GIỜ chạy với Tailwind kể cả khi có build:
 | trình biên dịch đọc mã nguồn dạng văn bản, nó không thấy được chuỗi ghép lúc chạy.
 |
 | Nên: tên lớp CÓ NGHĨA + mức nặng truyền qua thuộc tính `data-muc`, màu lấy từ biến CSS.
 | Không build, không bước phát hành nào phải nhớ, và đổi màu một chỗ là đổi cả hệ.
 |
 | BỐN MỨC NẶNG dùng thống nhất toàn bộ báo cáo:
 |   du     — xanh   — đủ, không phải làm gì
 |   chuy   — hổ phách — cần chú ý, còn kịp xử lý
 |   thieu  — đỏ     — thiếu / quá hạn, phải xử lý
 |   trong  — xám    — không có dữ liệu, chưa kết luận được
 */

:root {
    --ck-du-nen: #ecfdf5;
    --ck-du-vien: #a7f3d0;
    --ck-du-chu: #047857;
    --ck-du-dam: #10b981;

    --ck-chuy-nen: #fffbeb;
    --ck-chuy-vien: #fde68a;
    --ck-chuy-chu: #b45309;
    --ck-chuy-dam: #f59e0b;

    --ck-thieu-nen: #fef2f2;
    --ck-thieu-vien: #fecaca;
    --ck-thieu-chu: #b91c1c;
    --ck-thieu-dam: #ef4444;

    --ck-trong-nen: #f8fafc;
    --ck-trong-vien: #e2e8f0;
    --ck-trong-chu: #64748b;
    --ck-trong-dam: #cbd5e1;

    --ck-nen: #fff;
    --ck-nen-2: #f8fafc;
    --ck-vien: #e2e8f0;
    --ck-chu: #0f172a;
    --ck-chu-mo: #64748b;
    --ck-chu-rat-mo: #94a3b8;
    --ck-lien-ket: #2563eb;
}

.dark {
    --ck-du-nen: rgba(16, 185, 129, .14);
    --ck-du-vien: rgba(16, 185, 129, .32);
    --ck-du-chu: #6ee7b7;

    --ck-chuy-nen: rgba(245, 158, 11, .14);
    --ck-chuy-vien: rgba(245, 158, 11, .32);
    --ck-chuy-chu: #fcd34d;

    --ck-thieu-nen: rgba(239, 68, 68, .15);
    --ck-thieu-vien: rgba(239, 68, 68, .34);
    --ck-thieu-chu: #fca5a5;

    --ck-trong-nen: rgba(148, 163, 184, .10);
    --ck-trong-vien: rgba(148, 163, 184, .22);
    --ck-trong-chu: #94a3b8;
    --ck-trong-dam: rgba(148, 163, 184, .45);

    --ck-nen: #18181b;
    --ck-nen-2: rgba(255, 255, 255, .03);
    --ck-vien: rgba(255, 255, 255, .10);
    --ck-chu: #f4f4f5;
    --ck-chu-mo: #a1a1aa;
    --ck-chu-rat-mo: #71717a;
    --ck-lien-ket: #93c5fd;
}

/* Mỗi phần tử mang mức nặng chỉ cần `data-muc`; ba biến dưới đây tự trỏ đúng bộ màu. */
.ck [data-muc='du'] { --nen: var(--ck-du-nen); --vien: var(--ck-du-vien); --chu: var(--ck-du-chu); --dam: var(--ck-du-dam); }
.ck [data-muc='chuy'] { --nen: var(--ck-chuy-nen); --vien: var(--ck-chuy-vien); --chu: var(--ck-chuy-chu); --dam: var(--ck-chuy-dam); }
.ck [data-muc='thieu'] { --nen: var(--ck-thieu-nen); --vien: var(--ck-thieu-vien); --chu: var(--ck-thieu-chu); --dam: var(--ck-thieu-dam); }
.ck [data-muc='trong'] { --nen: var(--ck-trong-nen); --vien: var(--ck-trong-vien); --chu: var(--ck-trong-chu); --dam: var(--ck-trong-dam); }

.ck {
    color: var(--ck-chu);
    font-variant-numeric: tabular-nums;
}

.ck * { box-sizing: border-box; }

/*------------------------------------------------------------------------ Bảng kiểm toán */

/* Mỗi việc là một dòng: mức nặng — tên việc — con số — vì sao — phải làm gì.
   Xếp dọc chứ không thành bảng nhiều cột: hai câu giải thích cần chỗ để đọc, mà nhồi vào ô
   bảng thì chúng bị bóp lại thành cột chữ hẹp không ai đọc. */
.ck-kt { display: flex; flex-direction: column; gap: .5rem; }

.ck-kt__viec {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .25rem 1rem;
    padding: .75rem 1rem .75rem 1.25rem;
    border: 1px solid var(--vien);
    border-radius: .625rem;
    background: var(--nen);
    overflow: hidden;
}

.ck-kt__viec::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: .3125rem;
    background: var(--dam);
}

.ck-kt__ten { font-size: .9375rem; font-weight: 700; color: var(--ck-chu); }

.ck-kt__so {
    grid-row: span 3;
    align-self: center;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--chu);
    text-align: right;
    white-space: nowrap;
}

.ck-kt__vi-sao { font-size: .8125rem; line-height: 1.5; color: var(--ck-chu-mo); }

.ck-kt__lam {
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ck-chu);
}

.ck-kt__lam::before {
    content: '→ ';
    color: var(--dam);
    font-weight: 700;
}

@media (max-width: 30rem) {
    .ck-kt__viec { grid-template-columns: minmax(0, 1fr); }
    .ck-kt__so { grid-row: auto; text-align: left; font-size: 1.5rem; }
}

/*----------------------------------------------------------------- Câu trả lời tổng đầu trang */

/* Bốn con số không trả lời được "nếu bị kiểm tra hôm nay thì tôi đang ở đâu". Dải này nói thẳng
   một câu, rồi mới tới chi tiết. */
.ck-ket-luan {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
    padding: .875rem 1rem .875rem 1.25rem;
    margin-bottom: .875rem;
    border: 1px solid var(--vien);
    border-radius: .75rem;
    background: var(--nen);
    overflow: hidden;
}

.ck-ket-luan::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: .3125rem;
    background: var(--dam);
}

.ck-ket-luan__trang-thai {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--chu);
}

.ck-ket-luan__trang-thai svg { width: 1.375rem; height: 1.375rem; flex: none; }
.ck-ket-luan__vi { font-size: .8125rem; color: var(--ck-chu-mo); flex: 1 1 16rem; }
.ck-ket-luan__vi b { color: var(--ck-chu); font-weight: 700; }

/*------------------------------------------------------------------ Dải trạng thái đầu trang */

.ck-dai {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.ck-o-tt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .875rem 1rem .875rem 1.25rem;
    border: 1px solid var(--vien);
    border-radius: .75rem;
    background: var(--nen);
    overflow: hidden;
}

/* Vệt màu dọc bên trái: mức nặng đọc được kể cả khi in trắng đen hoặc người dùng mù màu. */
.ck-o-tt::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: .3125rem;
    background: var(--dam);
}

.ck-o-tt__nhan {
    display: flex;
    align-items: center;
    gap: .375rem;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--chu);
}

.ck-o-tt__nhan svg { width: 1rem; height: 1rem; flex: none; }

.ck-o-tt__so {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.05;
    color: var(--chu);
}

.ck-o-tt__phu {
    font-size: .75rem;
    line-height: 1.35;
    color: var(--ck-chu-mo);
}

/*------------------------------------------------------------------------------- Ghi chú */

.ck-luu-y {
    display: flex;
    gap: .625rem;
    padding: .75rem .875rem;
    border: 1px solid var(--vien);
    border-radius: .625rem;
    background: var(--nen);
    font-size: .8125rem;
    line-height: 1.5;
}

.ck-luu-y svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--dam); margin-top: .0625rem; }
.ck-luu-y strong { color: var(--ck-chu); } /* chu nhan manh phai SANG hon chu thuong, khong mo hon */

/*-------------------------------------------------------------------------------- Khối mục */

.ck-muc { margin-top: 1.75rem; }

.ck-muc__dau {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    padding-bottom: .5rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--ck-vien);
}

.ck-muc__stt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    border-radius: .375rem;
    background: var(--ck-nen-2);
    border: 1px solid var(--ck-vien);
    font-size: .75rem;
    font-weight: 700;
    color: var(--ck-chu-mo);
    align-self: center;
}

.ck-muc__ten { font-size: 1rem; font-weight: 700; }
.ck-muc__phu { font-size: .75rem; color: var(--ck-chu-mo); margin-left: auto; }

.ck-muc__ten-phu {
    margin: 1rem 0 .5rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ck-chu-mo);
}

/*----------------------------------------------------------------------------------- Bảng */

/*
 | MỖI BẢNG PHẢI NẰM TRONG KHUNG CUỘN RIÊNG.
 |
 | Khung ngoài của Filament (`.fi-layout`) đặt `overflow-x: hidden`. Bảng nào rộng hơn màn hình
 | sẽ bị CẮT CÂM ở đó: không sinh thanh cuộn, và `document.documentElement.scrollWidth` vẫn
 | báo đúng bằng bề rộng màn hình — nghĩa là mọi phép đo "trang có tràn không" đều nói KHÔNG
 | trong khi người dùng đang mất chữ. Đo thật trên điện thoại 390px: bảng Hạn giấy tờ rộng
 | 395px, `.fi-layout` có clientWidth 390 / scrollWidth 411 → mất 21px bên phải.
 */
.ck-bang-khung { overflow-x: auto; }

.ck-bang {
    width: 100%;
    border-collapse: collapse;
    font-size: .8125rem;
}

.ck-bang th {
    padding: .375rem .5rem;
    text-align: left;
    font-size: .6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ck-chu-rat-mo);
    border-bottom: 1px solid var(--ck-vien);
    white-space: nowrap;
}

.ck-bang td {
    padding: .4375rem .5rem;
    border-bottom: 1px solid var(--ck-vien);
    vertical-align: middle;
}

.ck-bang tbody tr:last-child td { border-bottom: 0; }
.ck-bang tbody tr:hover td { background: var(--ck-nen-2); }

.ck-bang .ck-phai { text-align: right; }
.ck-bang .ck-hep { width: 1%; white-space: nowrap; }
.ck-bang .ck-mo { color: var(--ck-chu-mo); }
.ck-bang .ck-ten { font-weight: 600; }

/*------------------------------------------------------------------------- Thanh tiến độ */

.ck-thanh {
    position: relative;
    height: 1.125rem;
    min-width: 6rem;
    border-radius: .3125rem;
    background: var(--ck-trong-dam);
    overflow: hidden;
}

.ck-thanh__day {
    height: 100%;
    border-radius: .3125rem;
    background: var(--dam);
    transition: width .3s ease;
}

.ck-thanh__so {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: .375rem;
    font-size: .6875rem;
    font-weight: 700;
    color: var(--ck-chu);
    mix-blend-mode: normal;
}

/*------------------------------------------------------------------------- Lưới ô theo kỳ */

.ck-luoi {
    display: grid;
    gap: .1875rem;
    align-items: center;
}

/* Kỳ thuế: cột nhãn năm + 4 quý. BHXH: cột nhãn năm + 12 tháng + cột đếm. */
.ck-luoi--quy { grid-template-columns: 3.5rem repeat(4, minmax(0, 1fr)) 4.5rem; }
.ck-luoi--thang { grid-template-columns: 3.5rem repeat(12, minmax(0, 1fr)) 3.25rem; }

.ck-luoi__dau {
    font-size: .625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ck-chu-rat-mo);
    text-align: center;
    padding-bottom: .125rem;
}

.ck-luoi__nam {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ck-chu);
}

.ck-luoi__dem {
    font-size: .6875rem;
    color: var(--ck-chu-mo);
    text-align: right;
    white-space: nowrap;
}

.ck-o {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .1875rem;
    min-height: 1.75rem;
    padding: 0 .25rem;
    border: 1px solid var(--vien);
    border-radius: .3125rem;
    background: var(--nen);
    color: var(--chu);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ck-o svg { width: .75rem; height: .75rem; flex: none; }

/* Ô trống hẳn (kỳ chưa tới / ngoài phạm vi): gạch chéo mờ, KHÔNG để trắng trơn — trắng trơn
   dễ bị đọc nhầm là "đã kiểm và không sao". */
.ck-o--khong {
    border-style: dashed;
    background: repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--ck-trong-vien) 3px, var(--ck-trong-vien) 4px);
    color: var(--ck-chu-rat-mo);
}

/*------------------------------------------------------------------------------ Nhãn nhỏ */

.ck-nhan {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .125rem .4375rem;
    border: 1px solid var(--vien);
    border-radius: .3125rem;
    background: var(--nen);
    color: var(--chu);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.ck-nhan + .ck-nhan { margin-left: .25rem; }
.ck-nhan__so { font-weight: 700; }

/*-------------------------------------------------------------------------- Nút / liên kết */

.ck-lk {
    color: var(--ck-lien-ket);
    text-decoration: none;
    font-weight: 600;
}

.ck-lk:hover { text-decoration: underline; }

.ck-nut-nho {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .1875rem .4375rem;
    border: 1px solid var(--ck-vien);
    border-radius: .3125rem;
    background: var(--ck-nen-2);
    color: var(--ck-chu-mo);
    font-size: .6875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.ck-nut-nho:hover { border-color: var(--ck-lien-ket); color: var(--ck-lien-ket); }
.ck-nut-nho svg { width: .75rem; height: .75rem; }

/*----------------------------------------------------------------------- Chú giải & trạng thái */

.ck-chu-giai {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem 1rem;
    margin-top: .625rem;
    font-size: .6875rem;
    color: var(--ck-chu-mo);
}

.ck-chu-giai__muc { display: inline-flex; align-items: center; gap: .3125rem; }

.ck-chu-giai__cham {
    width: .625rem;
    height: .625rem;
    border-radius: .1875rem;
    background: var(--dam);
    border: 1px solid var(--vien);
    flex: none;
}

.ck-on {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem .875rem;
    border: 1px solid var(--vien);
    border-radius: .625rem;
    background: var(--nen);
    color: var(--chu);
    font-size: .8125rem;
    font-weight: 600;
}

.ck-on svg { width: 1.125rem; height: 1.125rem; flex: none; }

.ck-trong-rong {
    padding: .875rem;
    border: 1px dashed var(--ck-vien);
    border-radius: .625rem;
    color: var(--ck-chu-mo);
    font-size: .8125rem;
}

/*----------------------------------------------------------- Lưới cơ sở (widget xếp hạng) */

.ck-cs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem;
}

.ck-cs__o {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .125rem;
    padding: .5rem .625rem .5625rem;
    border: 1px solid var(--vien);
    border-radius: .5rem;
    background: var(--nen);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
}

.ck-cs__o:hover { border-color: var(--dam); }

.ck-cs__ten {
    font-size: .75rem;
    font-weight: 600;
    color: var(--ck-chu);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ck-cs__so { font-size: 1.375rem; font-weight: 700; line-height: 1.1; color: var(--chu); }
.ck-cs__phu { font-size: .6875rem; color: var(--ck-chu-mo); }

.ck-cs__thanh {
    height: .25rem;
    margin-top: .25rem;
    border-radius: 999px;
    background: var(--ck-trong-dam);
    overflow: hidden;
}

.ck-cs__thanh > i { display: block; height: 100%; background: var(--dam); }

/*---------------------------------------------------------------- Danh sách việc cần làm */

/*
 | CẢ DÒNG LÀ CÁI THANH.
 |
 | Bản trước để thanh ở cột riêng ngoài cùng bên phải, cách tên giấy một khoảng trống rộng —
 | mắt không nối được dòng nào với thanh nào, mà khoảng giữa thì bỏ không. Nay nền của chính
 | dòng đó dài ngắn theo số hồ sơ: so sánh được ngay theo chiều dọc, không tốn thêm cột nào.
 */
.ck-viec { display: flex; flex-direction: column; }

.ck-viec__dong {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: center;
    gap: .75rem;
    padding: .5rem .625rem;
    border-radius: .375rem;
    text-decoration: none;
    color: inherit;
    isolation: isolate;

    /* MÁNG chạy hết chiều ngang. Thiếu nó, phần nền màu dừng giữa chừng trông như dòng bị cắt
       cụt ngay giữa tên giấy — mắt đọc thành "chữ bị mất" chứ không thành "thanh ngắn hơn". */
    background: var(--ck-nen-2);
}

.ck-viec__dong::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--dai, 0%);
    border-radius: .375rem;
    background: var(--nen);
    border-left: .1875rem solid var(--dam);
    z-index: -1;
    transition: width .35s ease;
}

.ck-viec__dong + .ck-viec__dong { margin-top: .1875rem; }
.ck-viec__dong:hover::before { filter: brightness(1.25); }

.ck-viec__so {
    text-align: right;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--chu);
}

.ck-viec__ten { font-size: .8125rem; font-weight: 600; color: var(--ck-chu); }
.ck-viec__pham-vi { font-size: .6875rem; color: var(--ck-chu-mo); }

/*--------------------------------------------------------------------- Màn hình hẹp */

@media (max-width: 63.9375rem) {
    .ck-dai { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 47.9375rem) {
    /* Lưới 12 tháng không thể co thêm — cho cuộn ngang trong khung riêng, KHÔNG để tràn trang. */
    .ck-cuon-ngang { overflow-x: auto; }
    .ck-luoi--thang { min-width: 34rem; }
    .ck-luoi--quy { min-width: 22rem; }
    .ck-viec__dong { grid-template-columns: 2.75rem minmax(0, 1fr); }

    /* Cho tiêu đề cột xuống dòng: nowrap là thứ đẩy bảng rộng quá màn hình. */
    .ck-bang th { white-space: normal; }
    .ck-bang th, .ck-bang td { padding-left: .375rem; padding-right: .375rem; }
}

@media (max-width: 30rem) {
    .ck-dai { grid-template-columns: minmax(0, 1fr); }
    .ck-o-tt__so { font-size: 1.75rem; }
}

/*
 |==========================================================================================
 | PHÂN TRANG — sửa ngưỡng ẩn của Filament (áp dụng cho MỌI bảng trong panel)
 |==========================================================================================
 |
 | Filament v4 đặt `.fi-pagination { container-type: inline-size }` rồi giấu hai thứ quan
 | trọng nhất sau một container query rất rộng:
 |
 |     @container (min-width: 56rem) {          -- 896px
 |         .fi-pagination-overview { display: inline }   -- dòng "Đang hiện 1–10 của 487"
 |         .fi-pagination-items    { display: flex }     -- các nút số trang
 |     }
 |
 | Hẹp hơn 896px thì cả TỔNG SỐ BẢN GHI lẫn NÚT SỐ TRANG biến mất, chỉ còn "Tiếp theo".
 | Người dùng không biết có bao nhiêu trang, không nhảy tới trang cuối được, và không biết
 | tổng cộng bao nhiêu bản ghi — mà đó lại là con số họ cần nhất khi đối chiếu sổ sách.
 |
 | 896px là ngưỡng quá cao trong panel này: thanh bên chiếm ~250px, nên phải màn hình rộng
 | hơn ~1.150px mới đạt. Laptop 1.366px có phóng to 110% là rơi xuống dưới ngay.
 |
 | Hạ xuống 34rem (544px) — đủ chỗ cho dãy số trang mà vẫn không vỡ trên điện thoại. Dùng
 | cùng cơ chế container query của Filament, không dùng !important: chỉ cần đặt SAU tệp của
 | Filament là thắng theo thứ tự, và vẫn nhường lại khi khung quá hẹp.
 */
@container (min-width: 34rem) {
    .fi-pagination .fi-pagination-overview { display: inline; }
    .fi-pagination:not(.fi-simple) .fi-pagination-items { display: flex; }
}

/* Khung đủ rộng thì nút Trước/Tiếp theo là thừa — dãy số trang đã làm việc đó. Giữ nguyên
   quy tắc của Filament nhưng dời theo ngưỡng mới, kẻo hai lối điều hướng cùng hiện. */
@container (min-width: 48rem) {
    .fi-pagination:not(.fi-simple) .fi-pagination-previous-btn,
    .fi-pagination:not(.fi-simple) .fi-pagination-next-btn { display: none; }
}

/*---------------------------------------------------------------------------------- In ra */

@media print {
    .fi-sidebar, .fi-topbar, .fi-sidebar-close-overlay, nav, aside, .ck-khong-in { display: none !important; }
    .fi-main, .fi-page, .fi-main-ctn { padding: 0 !important; max-width: 100% !important; }

    /* Ép nền sáng khi in kể cả khi đang xem ở chế độ tối — nền tối tốn mực và mờ chữ. */
    .ck, .ck * { color: #000 !important; }

    .ck [data-muc='du'] { --nen: #fff; --vien: #999; --chu: #000; --dam: #666; }
    .ck [data-muc='chuy'] { --nen: #fff; --vien: #999; --chu: #000; --dam: #aaa; }
    .ck [data-muc='thieu'] { --nen: #fff; --vien: #000; --chu: #000; --dam: #000; }
    .ck [data-muc='trong'] { --nen: #fff; --vien: #ccc; --chu: #666; --dam: #ddd; }

    /* KHÔNG cấm ngắt trang giữa cả một MỤC: mục 1 dài hai bảng, cấm ngắt là nó nhảy nguyên
       sang trang sau và bỏ trống nửa trang trước. Chỉ giữ nguyên khối những đơn vị nhỏ mà
       cắt đôi sẽ đọc sai: tiêu đề phải dính với bảng, lưới kỳ không được đứt giữa chừng. */
    .ck-muc__dau { break-after: avoid; }
    .ck-muc__ten-phu { break-after: avoid; }
    .ck-bang thead { break-after: avoid; }
    .ck-o-tt, .ck-luoi, .ck-on, .ck-luu-y, .ck-ket-luan { break-inside: avoid; }
    .ck-bang tbody tr { break-inside: avoid; }
    .ck-cuon-ngang { overflow: visible !important; }
}