html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow-x: hidden; /* Chặn thanh cuộn ngang của toàn trang */
}

/* === CẤU HÌNH BẢNG & THANH CUỘN (CHUẨN CSCC_AT) === */

/* Khung chứa bảng: Giới hạn chiều cao, tự động hiện scrollbar của chính nó */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: 72vh; /* Chiều cao cố định để đóng băng Header */
    border: 1px solid #dee2e6;
    background-color: #fff;
    margin-bottom: 30px; /* Chừa chỗ cho thanh cuộn giả */
}

/* Bảng: Ép bung rộng theo nội dung */
.table {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

    /* Header dính (Sticky Top) */
    .table thead th {
        position: sticky;
        top: 0;
        background-color: #212529;
        color: white;
        z-index: 10;
        white-space: nowrap;
        vertical-align: middle;
        text-align: center;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }

    /* Cột đầu dính (Sticky Left) - Mã CV */
    .table .sticky-col {
        position: sticky;
        left: 0;
        background-color: #fff;
        z-index: 5;
        border-right: 2px solid #dee2e6;
        min-width: 100px;
    }

    /* Ô giao nhau góc trái trên */
    .table thead th.sticky-col {
        z-index: 15;
        background-color: #212529;
    }

/* Thanh cuộn giả (Fixed Bottom) */
.fake-scrollbar-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #ccc;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 9999;
    display: none; /* JS sẽ bật */
}

.fake-scrollbar-content {
    height: 1px;
    padding-top: 1px;
    .table-responsive

{
    display: block;
    width: 100%;
    overflow-x: auto; /* Scroll ngang của chính khung này */
    overflow-y: auto;
    max-height: 72vh; /* Giới hạn chiều cao để đóng băng Header */
    border: 1px solid #dee2e6;
    background-color: #fff;
    margin-bottom: 30px; /* Chừa chỗ cho thanh cuộn giả */
    /* Fix lỗi scrollbar trình duyệt quá dài: */
    /* Ép nội dung bên trong (table) phải tuân thủ kích thước của khung cha */
    position: relative;
}

/* Bảng: */
.table {
    width: max-content; /* Bung rộng theo nội dung */
    min-width: 100%;
    margin-bottom: 0;
    border-collapse: separate; /* Cần thiết cho sticky header */
    border-spacing: 0;
}

    /* Header dính (Sticky Top) */
    .table thead th {
        position: sticky;
        top: 0;
        background-color: #212529;
        color: white;
        z-index: 10;
        white-space: nowrap;
        vertical-align: middle;
        text-align: center;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }

    /* Cột đầu dính (Sticky Left) - Mã CV */
    .table .sticky-col {
        position: sticky;
        left: 0;
        background-color: #fff;
        z-index: 5;
        border-right: 2px solid #dee2e6;
        min-width: 100px;
    }

    .table thead th.sticky-col {
        z-index: 15;
        background-color: #212529;
    }

/* Thanh cuộn giả (Fixed Bottom) */
.fake-scrollbar-wrapper {
    position: fixed;
    bottom: 0;
    left: 0; /* Sẽ được JS cập nhật left/width cho chuẩn */
    width: 100%;
    height: 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #ccc;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 9999;
    display: none;
}

.fake-scrollbar-content {
    height: 1px;
    padding-top: 1px;
}

/* === SỬA LỖI CỘT PHỐI HỢP === */
.col-phoi-hop {
    width: 150px; /* Độ rộng cố định */
    min-width: 150px; /* Không được co nhỏ hơn */
    max-width: 150px; /* Không được giãn to hơn */
    white-space: normal !important; /* Bắt buộc xuống dòng */
    word-wrap: break-word; /* Ngắt từ nếu quá dài */
    vertical-align: middle;
}
}

/* === HIỆU ỨNG MÀU & CHỮ === */
.font-big {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    line-height: 1;
}

.chat-truncate {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #555;
    font-style: italic;
}

@keyframes blink-red {
    0% {
        background-color: transparent;
        color: #dc3545;
    }

    50% {
        background-color: #dc3545 !important;
        color: white !important;
    }

    100% {
        background-color: transparent;
        color: #dc3545;
    }
}

.blink-danger {
    animation: blink-red 1s infinite;
}

@keyframes blink-yellow {
    0% {
        background-color: transparent;
        color: #ffc107;
    }

    50% {
        background-color: #ffc107 !important;
        color: black !important;
    }

    100% {
        background-color: transparent;
        color: #ffc107;
    }
}

.blink-warning {
    animation: blink-yellow 1.5s infinite;
}

@keyframes blink-green {
    0% {
        background-color: transparent;
        color: #198754;
    }

    50% {
        background-color: #198754 !important;
        color: white !important;
    }

    100% {
        background-color: transparent;
        color: #198754;
    }
}

.blink-success {
    animation: blink-green 2s infinite;
}

.sidebar {
    min-height: 100vh;
    background-color: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

.nav-link.active {
    background-color: #e9ecef;
    font-weight: bold;
    color: #0d6efd;
}

.fw-unread {
    font-weight: 900 !important;
    color: #000 !important;
}

.fw-read {
    font-weight: 400;
    color: #495057;
}

/* Màu tím cho Lịch họp */
.text-purple {
    color: #6f42c1 !important;
    font-weight: 900 !important;
}

/* === CSS CHO Ô LỊCH CÔNG TÁC (TỐI ƯU ĐỘ RỘNG) === */

/* Cột Buổi (Cột đầu tiên): Nhỏ gọn */
.table-calendar th:first-child,
.table-calendar td:first-child {
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    vertical-align: middle; /* Căn giữa theo chiều dọc cho đẹp */
    padding: 5px !important;
}

/* Các ngày trong tuần (T2 - T6): Rộng hơn */
.table-calendar th:not(:first-child),
.table-calendar td:not(:first-child) {
    width: 15.2%; /* (100% - 50px - 24%) / 5 ngày */
    min-width: 140px;
    vertical-align: top;
}

/* Thứ 7 và CN (2 cột cuối): Nhỏ lại chút */
.table-calendar th:nth-last-child(-n+2),
.table-calendar td:nth-last-child(-n+2) {
    width: 12%;
    min-width: 110px;
}

/* Nội dung bên trong ô lịch */
.calendar-item {
    white-space: normal !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* === RESPONSIVE MENU CHO MOBILE === */

/* Mặc định trên Desktop: Sidebar hiện, Nút Toggle ẩn */
@media (min-width: 768px) {
    .sidebar {
        display: block !important; /* Luôn hiện trên máy tính */
    }

    .navbar-toggler {
        display: none !important; /* Ẩn nút 3 gạch trên máy tính */
    }
}

/* Trên Mobile (< 768px) */
@media (max-width: 767.98px) {
    /* 1. Thanh Sidebar mặc định ẩn */
    .sidebar {
        display: none;
        position: fixed;
        top: 56px; /* Nằm dưới Header */
        left: 0;
        width: 250px; /* Độ rộng menu */
        height: calc(100vh - 56px);
        z-index: 1000;
        background-color: #f8f9fa;
        border-right: 1px solid #dee2e6;
        overflow-y: auto;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

        /* Khi có class .show -> Hiện ra */
        .sidebar.show {
            display: block;
        }

    /* 2. Nút 3 gạch (Toggle) phải hiện rõ */
    .navbar-toggler {
        display: block !important;
        border: 1px solid rgba(255,255,255,0.5);
        padding: 0.25rem 0.5rem;
        font-size: 1.25rem;
        color: rgba(255,255,255,0.8);
        background-color: transparent;
        border-radius: 0.25rem;
    }

    /* Icon 3 gạch */
    .navbar-toggler-icon {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        vertical-align: middle;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.5%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }
}