/* ===== Màu chủ đạo ===== */
:root {
    --tblr-primary: #b91c1c;
    --tblr-primary-rgb: 185, 28, 28;
    --tblr-primary-darken: #991b1b;
    --tblr-font-sans-serif: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --chieu-cao-header: 5.5rem;   /* Giá trị dự phòng; site.js đo chiều cao thật của header và ghi đè biến này */
}

body { font-size: 15px; }   /* Chữ lớn hơn mặc định, dễ đọc */

/* ===== Logo cờ Đảng/Tổ quốc: hiệu ứng bay nhẹ nhàng trong gió (chỉ xoay/nghiêng rất nhẹ, không giật) ===== */
.co-bay {
    transform-origin: left center;
    animation: coBay 3.6s ease-in-out infinite;
    will-change: transform;
}
@keyframes coBay {
    0%, 100% { transform: rotate(0deg) skewY(0deg) scaleY(1); }
    25%      { transform: rotate(-1.6deg) skewY(1.1deg) scaleY(.985); }
    50%      { transform: rotate(.6deg) skewY(-.8deg) scaleY(1.01); }
    75%      { transform: rotate(-.9deg) skewY(.7deg) scaleY(.99); }
}
@media (prefers-reduced-motion: reduce) {
    .co-bay { animation: none; }
}

.btn-primary { --tblr-btn-bg: #b91c1c; --tblr-btn-hover-bg: #991b1b; --tblr-btn-active-bg: #7f1d1d; --tblr-btn-border-color: #b91c1c; }

.navbar-qlnv {
    background: linear-gradient(90deg, #991b1b 0%, #b91c1c 60%, #c2410c 100%);
    --tblr-navbar-color: rgba(255, 255, 255, .85);
    --tblr-navbar-hover-color: #fff;
    --tblr-navbar-active-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.navbar-qlnv .navbar-brand, .navbar-qlnv .nav-link { color: #fff; }

/* ===== Header trên cùng: logo/chữ – icon user luôn gọn 1 hàng, không bị vỡ dòng dù màn hình hẹp ===== */
.navbar-qlnv .container-fluid { flex-wrap: nowrap; align-items: center; }
.navbar-qlnv .navbar-brand {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    margin-right: .5rem;
}
.navbar-qlnv .navbar-brand img { flex: 0 0 auto; }
.navbar-qlnv .navbar-brand .fw-bold,
.navbar-qlnv .navbar-brand small { white-space: normal; overflow-wrap: break-word; }
.navbar-qlnv .navbar-nav.flex-row { flex: 0 0 auto; }
@media (max-width: 767.98px) {
    .navbar-qlnv .navbar-brand img { width: 80px; }
    .navbar-qlnv .navbar-brand .fw-bold { font-size: .95rem; line-height: 1.25; }
    .navbar-qlnv .navbar-brand small { font-size: .72rem; }
}

/* ===== Sidebar dọc (menu chính): bấm nút mũi tên để thu gọn (chỉ icon) / mở rộng (icon + chữ).
   Áp dụng cùng một kiểu cho mọi kích thước màn hình, kể cả di động.
   Header + menu trái luôn cố định khi cuộn: nền đỏ của sidebar vẫn kéo dài hết chiều cao nội dung
   (align-items: stretch), nhưng phần nút + danh sách menu (.sidebar-qlnv-dinh) dính lại ngay dưới
   header nhờ position: sticky, nên luôn nằm trong tầm mắt dù nội dung bên phải dài cỡ nào. ===== */
.layout-qlnv { display: flex; align-items: stretch; min-height: calc(100vh - var(--chieu-cao-header)); }
.layout-qlnv > .page-wrapper { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.layout-qlnv > .page-wrapper > .page-body { flex: 1 0 auto; }
.sidebar-qlnv {
    flex: 0 0 auto;
    width: 15rem;
    background: linear-gradient(180deg, #991b1b 0%, #7f1d1d 100%);
    transition: width .15s ease;
}
.sidebar-qlnv.thu-gon { width: 4.25rem; }
.sidebar-qlnv-dinh {
    position: sticky;
    top: var(--chieu-cao-header);
    max-height: calc(100vh - var(--chieu-cao-header));
    overflow-x: hidden;  /* Thay cho overflow:hidden ở .sidebar-qlnv (đã bỏ) — overflow trên tổ tiên sẽ phá sticky */
    overflow-y: auto;
    z-index: 1020;
}
.sidebar-qlnv-top { display: flex; justify-content: flex-end; padding: .6rem .6rem 0; }
.sidebar-qlnv-toggle {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 2rem; height: 2rem; border: 0; border-radius: .5rem;
    background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer;
}
.sidebar-qlnv-toggle:hover { background: rgba(255, 255, 255, .24); }
.sidebar-qlnv-toggle .icon { transition: transform .15s ease; }
.sidebar-qlnv.thu-gon .sidebar-qlnv-toggle .icon { transform: rotate(180deg); }
.sidebar-qlnv-nav { display: flex; flex-direction: column; gap: .2rem; padding: .75rem; }
.sidebar-qlnv-link {
    display: flex; align-items: center; gap: .7rem;
    padding: .65rem .9rem; border-radius: .5rem;
    color: rgba(255, 255, 255, .85); font-weight: 500; text-decoration: none;
    white-space: nowrap;
}
.sidebar-qlnv-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.sidebar-qlnv-link.active { background: rgba(255, 255, 255, .18); color: #fff; font-weight: 700; }
.sidebar-qlnv-link .icon { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; }
.sidebar-qlnv.thu-gon .sidebar-qlnv-top { justify-content: center; padding-inline: 0; }
.sidebar-qlnv.thu-gon .sidebar-qlnv-link { justify-content: center; padding-inline: 0; }
.sidebar-qlnv.thu-gon .sidebar-qlnv-link .nhan { display: none; }

.trang-dang-nhap { background: radial-gradient(circle at top, #fde8e8 0%, #f6f8fb 55%); display: flex; flex-direction: column; }

/* Ẩn khung báo lỗi tổng khi không có lỗi */
.validation-summary-valid { display: none; }
.validation-summary-errors ul { margin: 0; padding-left: 1rem; }
.input-validation-error { border-color: var(--tblr-danger); }

/* ===== Footer đỏ giống header, luôn nằm cuối trang ===== */
.footer-qlnv {
    background: linear-gradient(90deg, #991b1b 0%, #b91c1c 60%, #c2410c 100%);
    color: rgba(255, 255, 255, .92);
    border-top: 0;
    padding: .9rem 0;
    margin-top: 1px;
}
.footer-qlnv a { color: #fff; }
.trang-dang-nhap { min-height: 100vh; }
.trang-dang-nhap .page { flex: 1 0 auto; }

/* ===== Thẻ thống kê: nền màu đậm theo nhóm + mũi tên góc phải =====
   height: 100% + flex để 4 thẻ trong cùng hàng luôn cao bằng nhau,
   kể cả khi 1 thẻ có thêm dòng "ghi-chu" làm nội dung dài hơn các thẻ còn lại. */
.card-thong-ke {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    border: 0;
    border-radius: .75rem;
    padding: 1rem 2.75rem 1rem 1.1rem;
    text-decoration: none;
    background: #f1f5f9;
    color: #334155;
    transition: transform .12s, box-shadow .12s;
}
.card-thong-ke .ten { font-size: .875rem; font-weight: 600; color: inherit; opacity: .85; }
.card-thong-ke .so { font-size: 1.75rem; font-weight: 700; line-height: 1.15; margin-top: .2rem; }
.card-thong-ke .ghi-chu { font-size: .8rem; opacity: .85; margin-top: .15rem; }
.card-thong-ke .mui-ten {
    position: absolute; top: .9rem; right: .9rem;
    width: 1.6rem; height: 1.6rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .08); color: inherit;
}
.card-thong-ke .mui-ten .icon { width: 1rem; height: 1rem; }
a.card-thong-ke:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .1); color: inherit; }
.card-thong-ke.the-nhat { background: #fde8e8; color: #7f1d1d; }
.card-thong-ke.the-xanh { background: #dcfce7; color: #14532d; }
.card-thong-ke.the-xanh .so { color: #15803d; }
.card-thong-ke.the-vang { background: #fef3c7; color: #713f12; }
.card-thong-ke.the-vang .so { color: #b45309; }
.card-thong-ke.the-do {
    background: linear-gradient(135deg, #b91c1c 0%, #7f1d1d 100%);
    color: #fff;
}
.card-thong-ke.the-do .so, .card-thong-ke.the-do .ten, .card-thong-ke.the-do .ghi-chu { color: #fff; }
.card-thong-ke.the-do .mui-ten { background: rgba(255, 255, 255, .22); }
.card-thong-ke.the-dang-chon { box-shadow: 0 0 0 2px #b91c1c, 0 4px 12px rgba(185, 28, 28, .18); }

/* ===== Nhãn tiến độ (đúng màu mẫu báo cáo) ===== */
.td {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.3;
}
.td-thuong   { background: #eef2f7; color: #475569; }
.td-xanh     { background: #c6e0b4; color: #1e4620; }
.td-vang     { background: #ffff00; color: #5c4b00; }
.td-cam      { background: #f4b183; color: #6b2e00; }
.td-do       { background: #ff0000; color: #fff; }
.td-xong     { background: #2fb344; color: #fff; }
.td-xong-tre { background: #fee2e2; color: #991b1b; }

/* ===== Màu nền xen kẽ các dòng trong mọi bảng danh sách, dễ đọc hơn khi nhiều dòng.
   Đặt trước các rule màu theo trạng thái bên dưới để những rule đó (cụ thể hơn, nhắm vào td)
   luôn thắng và giữ đúng màu trạng thái (hoàn thành, trễ hạn...) bất kể dòng chẵn/lẻ. ===== */
.card-table tbody tr:nth-of-type(even) { background-color: #fffbea; }

/* ===== Bảng nhiệm vụ: vừa khít chiều ngang, KHÔNG thanh cuộn ngang ===== */
.bang-nhiem-vu { width: 100%; table-layout: auto; }
.bang-nhiem-vu th { white-space: nowrap; }
.bang-nhiem-vu td { vertical-align: top; padding-top: .75rem; padding-bottom: .75rem; }
.bang-nhiem-vu .cot-stt      { width: 1%; white-space: nowrap; }
.bang-nhiem-vu .cot-noi-dung { min-width: 220px; overflow-wrap: anywhere; }
.bang-nhiem-vu .noi-dung { white-space: pre-line; }
.bang-nhiem-vu .cot-van-ban  { width: 9rem; overflow-wrap: anywhere; }
.bang-nhiem-vu .cot-can-bo   { width: 10rem; }
.bang-nhiem-vu .cot-don-vi   { width: 14rem; }
.bang-nhiem-vu .cot-ngay     { width: 1%; white-space: nowrap; }
.bang-nhiem-vu .cot-tien-do  { width: 11rem; }
.bang-nhiem-vu .cot-tien-do .td { white-space: normal; }
.bang-nhiem-vu .cot-thao-tac { width: 1%; white-space: nowrap; text-align: right; }

/* Viền màu đầu dòng giúp quét nhanh bằng mắt */
.bang-nhiem-vu tbody tr > td:first-child { border-left: 4px solid transparent; }
.bang-nhiem-vu tr.dong-td-xanh > td:first-child { border-left-color: #8fbf6d; }
.bang-nhiem-vu tr.dong-td-vang > td:first-child { border-left-color: #e6d800; }
.bang-nhiem-vu tr.dong-td-cam  > td:first-child { border-left-color: #f08a4b; }
.bang-nhiem-vu tr.dong-td-do   > td:first-child { border-left-color: #ff0000; }
.bang-nhiem-vu tr.dong-td-xong > td,
.bang-nhiem-vu tr.dong-td-xong-tre > td { background: #fafbfc; }

/* Màn hình vừa (laptop nhỏ): thu gọn chữ & khoảng cách */
@media (max-width: 1399.98px) {
    .bang-nhiem-vu { font-size: .875rem; }
    .bang-nhiem-vu td, .bang-nhiem-vu th { padding-left: .5rem; padding-right: .5rem; }
    .bang-nhiem-vu .cot-don-vi { width: 11rem; }
    .bang-nhiem-vu .cot-can-bo { width: 8rem; }
}

/* Màn hình hẹp (tablet, điện thoại): mỗi nhiệm vụ thành 1 thẻ, nút luôn hiện đủ */
@media (max-width: 1099.98px) {
    .bang-nhiem-vu thead { display: none; }
    .bang-nhiem-vu, .bang-nhiem-vu tbody, .bang-nhiem-vu tr, .bang-nhiem-vu td { display: block; width: 100% !important; }
    .bang-nhiem-vu tr {
        border-bottom: 1px solid var(--tblr-border-color);
        border-left: 4px solid transparent;
        padding: .5rem 0;
    }
    .bang-nhiem-vu tbody tr > td:first-child { border-left: 0; }
    .bang-nhiem-vu tr.dong-td-xanh { border-left-color: #8fbf6d; }
    .bang-nhiem-vu tr.dong-td-vang { border-left-color: #e6d800; }
    .bang-nhiem-vu tr.dong-td-cam  { border-left-color: #f08a4b; }
    .bang-nhiem-vu tr.dong-td-do   { border-left-color: #ff0000; }
    .bang-nhiem-vu td { border: 0 !important; padding: .2rem 1rem !important; white-space: normal !important; text-align: left; }
    .bang-nhiem-vu td[data-nhan]::before {
        content: attr(data-nhan) ": ";
        font-weight: 600;
        color: var(--tblr-secondary);
        font-size: .8rem;
    }
    .bang-nhiem-vu .cot-noi-dung::before { display: block; }
    .bang-nhiem-vu .cot-van-ban div { display: inline; }
    .bang-nhiem-vu .cot-van-ban div + div::before { content: " · "; }
    .bang-nhiem-vu .cot-stt { display: none; }
    .bang-nhiem-vu .cot-thao-tac { padding-top: .5rem !important; }
    .bang-nhiem-vu .cot-thao-tac > div { justify-content: flex-start !important; }
    .bang-nhiem-vu tr.dong-trong td::before { content: none; }
}

/* Biểu tượng trong nút / menu */
.btn .icon { margin-right: .25rem; }
.btn-icon .icon { margin: 0; }
.dropdown-item .dropdown-item-icon { margin-right: .5rem; }

/* Tom Select khớp giao diện Tabler.
   Lưu ý: CSS gốc của tom-select-bootstrap5 dùng biến --bs-*, nhưng Tabler chỉ định nghĩa
   biến --tblr-* nên --bs-border-color/--bs-body-bg không tồn tại → ô chọn mất viền và
   trong suốt. Khai báo cứng màu ở đây để control luôn có viền + nền rõ ràng, dễ quan sát. */
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; }
.ts-control {
    min-height: 2.5rem;
    background-color: #fff !important;
    border: 1px solid #d0d5dd !important;
}
.ts-wrapper.focus .ts-control { border-color: #b91c1c !important; box-shadow: 0 0 0 .25rem rgba(185, 28, 28, .15); }
.ts-wrapper.disabled .ts-control { background-color: #f1f5f9 !important; }
.ts-dropdown { background-color: #fff; border-color: #d0d5dd; }

/* Ô ngày Flatpickr: ô gốc (ẩn, type=hidden) vẫn là :first-child trong .input-group nên
   ô hiển thị dd/mm/yyyy (.ngay-vn-hien-thi) bị Tabler bỏ bo góc trái — trả lại cho đúng. */
.input-group > .ngay-vn-hien-thi {
    border-top-left-radius: var(--tblr-border-radius);
    border-bottom-left-radius: var(--tblr-border-radius);
    margin-inline-start: 0;
}

@media print {
    .navbar, .footer, .footer-qlnv, .d-print-none { display: none !important; }
    .bang-nhiem-vu { font-size: 10pt; }
    .page-body { margin: 0; }
    .card { box-shadow: none; border: 0; }
    .td { border: 1px solid #999; }
}