body { background: #f5f7fb; }
.menu-trai .nav-link { color: #333; padding: .4rem 1rem; border-left: 3px solid transparent; }
.menu-trai .nav-link:hover { background: #e9eef8; }
.menu-trai .nav-link.active { background: #dde6f7; border-left-color: #0d6efd; font-weight: 600; }
.menu-trai .nav-link i { width: 1.3rem; display: inline-block; }
.menu-nhom { font-size: .72rem; text-transform: uppercase; color: #6c757d; padding: .8rem 1rem .2rem; letter-spacing: .04em; }
.card-chi-so .so { font-size: 1.6rem; font-weight: 600; }
.table td.so, .table th.so { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.table-sm td, .table-sm th { vertical-align: middle; }
/* Bảng tự dồn theo nội dung: mỗi cột rộng bằng dòng chữ dài nhất + đệm tối đa 6pt (8px) mỗi bên.
   Giữ rộng 100% cho bảng nhập liệu dạng sheet (.bang-sheet) và bảng gắn lớp .bang-rong (lịch).
   Ô nhập trong bảng gọn (giải trình, cấu hình) giữ rộng tối thiểu để gõ được. */
.table:not(.bang-rong):not(.bang-sheet) { width: auto; max-width: 100%; }
.table:not(.bang-rong):not(.bang-sheet) td .form-control:not([type=hidden]),
.table:not(.bang-rong):not(.bang-sheet) td .form-select,
.table:not(.bang-rong):not(.bang-sheet) td textarea { min-width: 16rem; }
/* Mọi bảng kẻ ô như bảng ma trận ở Tổng quan (giống .table-bordered của Bootstrap); tiêu đề cột căn giữa. */
.table > :not(caption) > * { border-width: var(--bs-border-width) 0; }
.table > :not(caption) > * > * { border-width: 0 var(--bs-border-width); }
.table > thead th { text-align: center !important; vertical-align: middle; }
.bang-sheet input.form-control, .bang-sheet select.form-select { padding: .15rem .35rem; font-size: .85rem; }
.bang-sheet td { padding: .15rem; }
.dong-nhap { background: #fff8e1; }
.dong-khac-chuan { box-shadow: inset 3px 0 0 #fd7e14; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }
.trang-tieu-de { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.trang-tieu-de h1 { font-size: 1.35rem; margin: 0; }
.o-ma-tran { text-align: right; }
/* Các cột chỉ số rộng bằng nhau (bằng cột "% tiến độ" cũ: chữ tiêu đề + đệm 4px mỗi bên ở bảng .small .table-sm). */
.table .o-deu { width: 5.1em; min-width: 5.1em; }
/* Danh sách lớp: cột Tên lớp hẹp còn khoảng 1/2, chữ tự xuống dòng. */
/* Ô ngày nhập trong bảng (Hoàn thành HS, Quyết toán): vừa đủ dd/mm/yyyy + nút lịch. */
.table td .form-control.o-ngay { min-width: 0 !important; width: 8.6rem; }
.table .cot-ten-lop { width: 24rem; min-width: 16rem; max-width: 24rem; white-space: normal; overflow-wrap: anywhere; }
a.o-ma-tran { text-decoration: none; display: block; }
/* Ma trận viên chức (Tổng quan Viện), yêu cầu 17:31 11/11: các cột chỉ số (Quỹ giờ … Chờ XN) rộng bằng nhau, bằng
   cột Giảng ("384/218"); cột cuối "Lịch làm việc tháng" lấy phần còn lại để mép phải bảng luôn thẳng mép khối trên. */
.ma-tran-vc { font-size: .8rem; width: 100%; }
.ma-tran-vc .cot-lich-thang { width: 100%; min-width: 14rem; }
.ma-tran-vc th { white-space: normal; }
.ma-tran-vc .o-ten { white-space: nowrap; }
.ma-tran-vc .o-deu { width: 4.9em; min-width: 4.9em; }
/* Lịch theo dõi lớp (Tổng quan Viện): 2 tháng cạnh nhau, ô ngày ghi mã lớp gọn. */
.lich-bang { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .78rem; }
.lich-bang th { text-align: center; font-weight: 600; color: #6c757d; padding: 2px 0; border-bottom: 1px solid #dee2e6; }
.lich-bang td { height: 2.7rem; vertical-align: top; padding: 2px 3px; border: 1px solid #edf0f4; background: #fff; }
.lich-bang .cuoi-tuan { background: #f8f9fb; color: #b02a37; }
.lich-bang td.ngoai { background: #fafbfc; }
.lich-bang td.co-lop { background: #f3f8ff; }
.lich-bang td.hom-nay { outline: 2px solid #0d6efd; outline-offset: -2px; }
.lich-bang td.hom-nay .so-ngay { color: #0d6efd; font-weight: 700; }
.lich-bang .so-ngay { font-size: .72rem; line-height: 1; color: #495057; }
.lich-bang .cuoi-tuan .so-ngay { color: #b02a37; }
.ma-lop { display: inline-block; font-size: .7rem; font-weight: 600; line-height: 1.15; padding: 0 3px; margin: 1px 1px 0 0;
  border: 1px solid; border-radius: 3px; text-decoration: none; }
.ma-lop.them { border-color: #ced4da; color: #6c757d; background: #f1f3f5; }
.lich-chu-giai { border-top: 1px dashed #dee2e6; padding-top: 4px; line-height: 1.9; }
.lich-lop .nut-lich { padding: 0 .45rem; line-height: 1.5; }
.lich-lop .lich-than { overflow: hidden; }
.truot-tu-phai > * { animation: lichTuPhai .28s ease-out; }
.truot-tu-trai > * { animation: lichTuTrai .28s ease-out; }
@keyframes lichTuPhai { from { transform: translateX(40px); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes lichTuTrai { from { transform: translateX(-40px); opacity: .2; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .truot-tu-phai > *, .truot-tu-trai > * { animation: none; } }
.badge-chua-xn { background: #ffe5b4; color: #8a5300; }
@media print { nav, .offcanvas-lg, .khong-in { display: none !important; } main { width: 100% !important; } }