body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    text-align: center;
    margin-bottom: 20px;
}

.titleChucNang {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    color: #164397; 
    font-size: large; 
    text-align: center;
}

.header img {
    width: 100%;
    height: auto;
    max-height: 150px;
}

/*========= icon support*/
/* Biến màu (tùy chọn, đặt ở đầu file CSS hoặc :root) */
:root {
    --fab-main-color: #007bff; /* Màu chủ đạo cho FAB */
    --fab-hover-color: #0056b3;
    --fab-icon-color: white;
    --fab-panel-bg: #ffffff;
    --fab-panel-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    --fab-text-color: #333;
    --fab-link-color: #007bff;
}

.support-fab-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1050; /* Đảm bảo nổi trên các thành phần khác */
}

.support-fab-button {
    background-color: var(--fab-main-color);
    color: var(--fab-icon-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px; /* Kích thước icon */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease-out, box-shadow 0.3s ease;
    outline: none;
}

    .support-fab-button:hover {
        background-color: var(--fab-hover-color);
        transform: translateY(-3px) scale(1.05); /* Hiệu ứng nhấc lên và phóng to nhẹ */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }

    .support-fab-button:focus {
        outline: none;
        box-shadow: 0 0 0 0.25rem rgba(var(--fab-main-color), 0.5); /* Hiệu ứng focus của Bootstrap */
    }


.support-fab-panel {
    position: absolute;
    bottom: 75px; /* Ngay phía trên nút FAB (60px + 15px khoảng cách) */
    right: 0;
    width: 280px; /* Hoặc 300px, tùy chỉnh */
    background-color: var(--fab-panel-bg);
    border-radius: 10px;
    box-shadow: var(--fab-panel-shadow);
    padding: 0; /* Header và body sẽ có padding riêng */
    /* Hiệu ứng xuất hiện */
    visibility: hidden; /* Ẩn hoàn toàn ban đầu */
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s 0.25s;
    z-index: -1; /* Để không tương tác khi ẩn */
}

    .support-fab-panel.active {
        visibility: visible;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity 0.25s ease-out, transform 0.25s ease-out, visibility 0s 0s;
        z-index: 1; /* Đưa lên trên nút FAB khi hiển thị */
    }

.support-fab-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

    .support-fab-panel-header h4 {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--fab-text-color);
    }

.btn-close-panel {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: #888;
    cursor: pointer;
    padding: 5px;
    line-height: 1;
}

    .btn-close-panel:hover {
        color: #333;
    }

.support-fab-panel-body {
    padding: 15px;
}

    .support-fab-panel-body p {
        margin-bottom: 12px;
        font-size: 0.9rem;
        color: var(--fab-text-color);
        display: flex; /* Để căn icon và text */
        align-items: center;
    }

        .support-fab-panel-body p:last-child {
            margin-bottom: 0;
        }

    .support-fab-panel-body .support-link,
    .support-fab-panel-body .support-link-alt {
        color: var(--fab-link-color);
        text-decoration: none;
        display: flex; /* Để icon và text trong link thẳng hàng */
        align-items: center;
        width: 100%; /* Cho phép click toàn bộ dòng */
    }

        .support-fab-panel-body .support-link:hover,
        .support-fab-panel-body .support-link-alt:hover {
            text-decoration: underline;
            color: var(--fab-hover-color);
        }

    .support-fab-panel-body .support-link-alt { /* Cho các link phụ như FAQ */
        color: #555;
    }

        .support-fab-panel-body .support-link-alt:hover {
            color: #000;
        }


    .support-fab-panel-body i.fa-fw { /* Icon có độ rộng cố định */
        margin-right: 10px;
        width: 20px; /* Đảm bảo icon thẳng hàng */
        text-align: center;
    }
/*=============*/

.navbar-custom {
    background-color: #164397;
}
    .navbar-custom .nav-link {
        color: #fff; 
    }
    .navbar-custom .navbar-nav .nav-link.active {
        background-color: #02296f !important;
        color: #fff !important;
    }
    /*Active link*/
.navbar-nav .nav-item.active {
    background-color: #02296f;
    color: #fff;
    /* Thay #164397 bằng mã màu chính xác nếu cần */
    /* Optional: Thêm các style khác cho viền, padding, v.v. */
    /* Ví dụ: border-bottom: 3px solid white; */
    /* Đảm bảo nó không bị ghi đè bởi style hover nếu cần */
    /* Specificity của .nav-item.active thường đủ cao */
}

/* Style cho NAV-LINK khi hover (trạng thái bình thường) */
.navbar-nav .nav-link:hover {
    background-color: #ed1c24; /* Hoặc mã màu đỏ bạn muốn */
    color: #fff;
}

/* --- QUY TẮC KHI ACTIVE (MÀU XANH ĐẬM) --- */
/* Style cho LI cha khi LI là active */
.navbar-nav .nav-item.active {
    background-color: #02296f !important; /* Xanh đậm */
    color: #fff !important;
}
    /* Style cho link (A tag) bên trong LI khi LI là active */
    .navbar-nav .nav-item.active > .nav-link {
        background-color: #02296f !important; /* Xanh đậm */
        color: #fff !important;
    }
/* Hoặc nếu class 'active' nằm trực tiếp trên 'nav-link' */
.navbar-nav .nav-link.active {
    background-color: #02296f !important; /* Xanh đậm */
    color: #fff !important;
}


/* --- QUY TẮC KHI HOVER VÀO CHÍNH MỤC ACTIVE (MÀU ĐỎ) --- */
/* Khi hover trực tiếp vào nav-link đang active */
.navbar-custom .navbar-nav .nav-item.active > .nav-link:hover,
.navbar-custom .navbar-nav .nav-link.active:hover { /* Sử dụng cả hai selector nếu active có thể trên LI hoặc A */
    background-color: #ed1c24 !important; /* Màu nền đỏ */
    color: #fff !important; /* Đảm bảo chữ trắng */
}


/* --- QUY TẮC MỚI VÀ QUAN TRỌNG NHẤT: KHI LI CHA CÓ dropdown-parent-hover (MÀU ĐỎ) --- */
/* Mục tiêu: Đảm bảo nền đỏ khi hover vào mục con, đặc biệt khi mục cha đang active */
/* Thêm class 'active' vào selector để tăng độ ưu tiên khi có xung đột với màu xanh đậm */
.navbar-nav .nav-item.dropdown.dropdown-parent-hover.active,
.navbar-nav .nav-item.mega-menu-toggle.dropdown-parent-hover.active {
    background-color: #ed1c24 !important; /* Màu nền đỏ */
    color: #fff !important;
}

/* Quy tắc này áp dụng khi LI cha có dropdown-parent-hover (không quan tâm active hay không) */
/* Cần được đặt sau quy tắc active màu xanh đậm */
.navbar-nav .nav-item.dropdown.dropdown-parent-hover,
.navbar-nav .nav-item.mega-menu-toggle.dropdown-parent-hover {
    background-color: #ed1c24 !important; /* Màu nền đỏ */
    color: #fff !important;
}

    /* Đảm bảo link cha trong LI cũng có màu chữ trắng */
    .navbar-nav .nav-item.dropdown.dropdown-parent-hover > .nav-link,
    .navbar-nav .nav-item.mega-menu-toggle.dropdown-parent-hover > .nav-link,
    .navbar-nav .nav-item.dropdown.dropdown-parent-hover.active > .nav-link,
    .navbar-nav .nav-item.mega-menu-toggle.dropdown-parent-hover.active > .nav-link {
        color: #fff !important;
    }

.navbar-custom .navbar-nav .nav-link:hover {
    background-color: #ed1c24; /* Hoặc mã màu đỏ bạn muốn, ví dụ: #FF0000 */
    color: #fff; /* Tùy chọn: Đổi màu chữ sang trắng để dễ đọc trên nền đỏ */
}

/** Khi LI cha là .nav-item.active VÀ có .dropdown-parent-hover */
.navbar-custom .navbar-custom.navbar-custom.navbar-nav .nav-item.active.dropdown.dropdown-parent-hover,
.navbar-custom .navbar-nav .nav-item.active.mega-menu-toggle.dropdown-parent-hover {
    background-color: #ed1c24 !important; /* MÀU NỀN ĐỎ DỨT KHOÁT */
    color: #fff !important; /* Đảm bảo chữ trắng */
}

    /* Đảm bảo NAV-LINK (thẻ A) bên trong LI đó cũng có màu đỏ và chữ trắng */
    .navbar-custom .navbar-nav .nav-item.active.dropdown.dropdown-parent-hover > .nav-link,
    .navbar-custom .navbar-nav .nav-item.active.mega-menu-toggle.dropdown-parent-hover > .nav-link {
        background-color: #ed1c24 !important; /* MÀU NỀN ĐỎ DỨT KHOÁT */
        color: #fff !important; /* Đảm bảo chữ trắng */
    }

.navbar-nav .nav-link {
    padding-top: 0.8rem; /* Tăng padding trên */
    padding-bottom: 0.8rem; /* Tăng padding dưới */
    /* Giá trị mặc định của Bootstrap thường là khoảng 0.5rem */
}


/* Thay đổi màu nền thành màu đỏ */
.navbar-custom .navbar-brand:hover {
    background-color: #ed1c24; /* Hoặc mã màu đỏ bạn muốn */
    color: #fff !important;
}
.body-content {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    
}
.navbar {
    padding-top: 0px; /* Điều chỉnh giá trị này để giảm padding trên */
    padding-bottom: 0px; /* Điều chỉnh giá trị này để giảm padding dưới */
    /* Hoặc bạn có thể sử dụng thuộc tính padding ngắn gọn */
    /* padding: 8px 16px; Giảm padding trên/dưới xuống 8px, giữ nguyên padding trái/phải 16px (giá trị mặc định của Bootstrap thường khoảng 1rem ~ 16px) */
}
.footer {
    text-align: center;
    margin-top: auto;
    padding: 15px;
    background-color: #164397;
    color: #fff;
}

.btn-outline-secondary {
    border-color: #164397;
    color: black;
}
.logout {
    margin-top: 8px;
    margin-bottom: 8px;
}

.btn-outline-secondary:hover {
    background-color: #164397;
    color: #fff;
    border-color: #164397; /* Đảm bảo viền trắng khi hover */
}

/*Font size for icon Home*/
.g-font-size-28 {
    font-size: 2rem !important;
}

/* logout */
.modal-dialog-confirm-logout {
    top: 20%;
}
.text_content_logout {
    font-size: 20px;
}

/* --- Style cho Dropdown bình thường khi Hover --- */
/* Override Bootstrap's default dropdown behavior to show on hover */
.navbar-custom .navbar-nav .dropdown:hover > .dropdown-menu {
    display: block; /* Hiển thị dropdown menu khi hover vào li cha */
    margin-top: 0; /* Căn chỉnh sát với mục cha */
}

/* KHI MỞ: HIỂN THỊ LIST */
.sidebar-nav .dropdown-menu.show {
    display: block; /* Đây là quy tắc quan trọng để làm list hiển thị */
    /* Màu nền đỏ cho dropdown menu khi mở (nếu bạn muốn) */
    /* Nếu bạn muốn UL con vẫn có nền trắng, hãy bỏ dòng này */

}

/* Style màu chữ và nền cho dropdown menu */
.navbar-nav .dropdown-menu {
    background-color: white; /* Nền trắng */
    border: 1px solid rgba(0, 0, 0, .15); /* Viền nhẹ */
}

.navbar-nav .dropdown-item {
    color: black; /* Chữ màu đen */
    /* Optional: Remove hover background/color from Bootstrap default */
    /*
    &:hover {
        background-color: #f8f9fa;
        color: #1e2125;
    }
    */
}


/* --- Style cho Mega Menu của mục Home --- */


.mega-menu-content {
    display: none; /* Mặc định ẩn đi */
    position: absolute; /* Định vị tuyệt đối */
    top: 100%; /* Đặt mép trên ngay tại mép dưới của li.mega-menu-toggle */

    background-color: white; /* Nền trắng */
    border-top: 1px solid rgba(0, 0, 0, .15); /* Viền trên */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* Đổ bóng */
    z-index: 1000; /* Đảm bảo nằm trên các nội dung khác */
    padding: 15px 0; /* Khoảng đệm trên dưới */
}

/* Hiển thị Mega Menu khi hover vào mục Home */
.mega-menu-toggle:hover > .mega-menu-content {
    display: block;
}

/* Style cho các cột/phần trong Mega Menu (tùy chọn, dùng flexbox/grid để chia cột) */
.mega-menu-content .container {
    display: flex; /* Sử dụng flexbox để các mục chính nằm trên cùng một hàng */
    flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */
    gap: 30px; /* Khoảng cách giữa các mục chính */
}
    /* Style cho các cột/phần trong Mega Menu (bên trong .mega-menu-content .container) */
    .mega-menu-content .container .row { /* Đảm bảo row nằm trong container bên trong */
        display: flex; /* Sử dụng flexbox để các mục chính nằm trên cùng một hàng */
        flex-wrap: wrap; /* Cho phép xuống dòng nếu không đủ chỗ */
        gap: 30px; /* Khoảng cách giữa các mục chính */
    }

.mega-menu-section {
    /* Tùy chỉnh độ rộng của mỗi phần nếu cần */
    flex: 1; /* Mỗi phần sẽ chiếm không gian bằng nhau */
    min-width: 200px; /* Độ rộng tối thiểu */
    padding: 0 15px;
}


/* Style cho tiêu đề mục chính trong Mega Menu */
.mega-menu-section-title strong {
    color: black; /* Chữ đen */
    display: block; /* Đảm bảo tiêu đề đứng riêng một hàng */
    margin-bottom: 10px; /* Khoảng cách dưới tiêu đề */
}

/* Style cho danh sách link con trong Mega Menu */
.mega-menu-section ul {
    padding-left: 0; /* Bỏ padding mặc định của ul */
    list-style: none; /* Bỏ bullet */
}

    .mega-menu-section ul li {
        margin-bottom: 5px; /* Khoảng cách giữa các link con */
    }

.mega-menu-section .mega-menu-link {
    color: black; /* Chữ đen cho link con */
    text-decoration: none; /* Bỏ gạch chân link */
}

/* Ẩn dropdown-menu mặc định của Bootstrap cho mục Home */
.mega-menu-toggle .dropdown-menu {
    display: none !important;
}



/*Chinh chieu rong mega-menu bang voi navbar*/
.mega-menu-toggle {
    position: relative; /* Đặt vị trí tương đối cho li cha */
    /* Giữ nguyên display: static; nếu bạn đã đặt ở nơi khác và muốn căn chỉnh theo navbar tổng thể */
    /* Nhưng position: relative; trên li phổ biến hơn cho Mega Menu con */
}


/* Tăng khoảng cách dưới mỗi mục li trong Mega Menu */
.mega-menu-section ul li {
    /*margin-bottom: 15px;*/ /* Điều chỉnh giá trị (ví dụ: 10px, 15px) theo ý bạn */
    padding-bottom: 7px;
    padding-top: 7px;
    /* Giữ nguyên các style khác nếu có */
}

    /* Tùy chọn: Bỏ margin-bottom cho mục cuối cùng để không tạo khoảng trống thừa */
    .mega-menu-section ul li:last-child {
        margin-bottom: 0;
    }

/* Tăng khoảng cách dưới mỗi mục li trong Dropdown Menu */
.navbar-custom .dropdown-menu li {
    padding-bottom: 7px;
    padding-top: 7px;
}

    /* Tùy chọn: Bỏ margin-bottom cho mục cuối cùng */
    .navbar-custom .dropdown-menu li:last-child {
        margin-bottom: 0;
    }

.navbar-custom .dropdown-menu {
    position: absolute; /* Đặt vị trí tuyệt đối */
    top: 100%; /* Đặt mép trên của menu ngay dưới đáy của li cha */
    left: 0; /* Thường đặt lề trái bằng 0 để thẳng hàng với lề trái li */
    /* Giữ nguyên các style khác đã có cho dropdown menu */
    z-index: 1100; /* Đảm bảo nằm trên các nội dung khác (đã chỉnh trước) */
    min-width: 250px;
    background-color: white;
    border: 1px solid rgba(0, 0, 0, .15);
}

.navbar-custom .dropdown,
.nav-item.dropdown { /* Sử dụng selector phù hợp với cấu trúc HTML của bạn */
    position: relative; /* Quan trọng để Dropdown menu con định vị đúng */
    /* Giữ nguyên các thuộc tính khác cho li nếu có */
    /* Ví dụ: padding, margin */
}

.navbar-nav .dropdown-toggle::after {
    display: none; /* Ẩn hoàn toàn phần tử giả tạo mũi tên */
    /* Hoặc content: none; cũng có thể dùng */
}
/* 1. Đổi màu nền của LI khi rê chuột */
.navbar-custom .mega-menu-section ul li:hover {
    background-color: #164397; /* Màu nền khi rê chuột (màu xanh của navbar) */
    /* Hãy thay #164397 bằng mã màu chính xác của nền navbar nếu nó khác */
    /* Optional: transition cho hiệu ứng mượt mà */
    transition: background-color 0.3s ease;
}

    /* 2. Đổi màu chữ của link con bên trong LI khi LI được rê chuột */
    /* Điều này đảm bảo chữ link dễ đọc trên nền xanh mới */
    .mega-menu-section ul li:hover .mega-menu-link {
        color: #fff; /* Đổi màu chữ link thành trắng */
        text-decoration: none; /* (Tùy chọn) Bỏ gạch chân dưới link khi hover nếu bạn không muốn */
        /* Bạn có thể thêm transition cho màu chữ nếu muốn */
        transition: color 0.3s ease;
    }

/* 1. Đổi màu nền của LI trong Dropdown Menu khi rê chuột */
.navbar-custom .dropdown-menu li:hover {
    background-color: #164397; /* Màu nền khi rê chuột (màu xanh của navbar) */
    /* Hãy thay #164397 bằng mã màu chính xác của nền navbar nếu nó khác */
    /* Optional: transition cho hiệu ứng mượt mà */
    transition: background-color 0.3s ease;
}

    /* 2. Đổi màu chữ của link con (.dropdown-item) bên trong LI khi LI được rê chuột */
    /* Điều này đảm bảo chữ link dễ đọc trên nền xanh mới */
    .navbar-custom .dropdown-menu li:hover > .dropdown-item { /* Sử dụng selector child combinator '>' */
        color: #fff; /* Màu chữ trắng khi hover LI */
        /* Optional: Add transition */
        transition: color 0.3s ease;
    }

/* 3. Override style hover mặc định của Bootstrap cho .dropdown-item */
/* Bootstrap có style mặc định cho .dropdown-item:hover (nền xám nhạt, chữ đen) */
/* Quy tắc này đảm bảo khi bạn rê chuột trực tiếp vào link, nó vẫn dùng style của bạn */
.navbar-custom .dropdown-menu li .dropdown-item:hover { /* Chọn link item khi nó được hover (nằm trong li) */
    background-color: transparent; /* Bỏ nền xám nhạt mặc định của Bootstrap hoặc dùng màu nền khác nếu muốn */
    color: white; /* Đảm bảo màu chữ vẫn là trắng khi hover trực tiếp vào link (ghi đè style Bootstrap) */
    /* Optional: transition */
    /* transition: background-color 0.3s ease, color 0.3s ease; */
}


/* Đảm bảo trạng thái mặc định là nền trong suốt và chữ đen cho link item */
.navbar-custom .dropdown-menu li {
    background-color: transparent; /* Nền mặc định trong suốt cho LI */
    /* ... margin-bottom và các style khác ... */
}

    .navbar-custom .dropdown-menu li > .dropdown-item { /* Selector cho link item mặc định */
        color: black; /* Chữ mặc định đen */
        /* text-decoration: none; // Bootstrap thường không gạch chân item mặc định */
        /* ... các style mặc định khác cho link item ... */
    }


/* 1. CSS DÀNH RIÊNG CHO LỖI VALIDATION
/* Định dạng cho ô input có viền màu đỏ khi lỗi */
.input-validation-error {
    border-color: #dc3545 !important; /* !important để ghi đè CSS của Bootstrap */
}

    /* (Tùy chọn) Thêm hiệu ứng đẹp mắt khi người dùng click vào ô bị lỗi */
    .input-validation-error:focus {
        box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

/* Định dạng cho văn bản thông báo lỗi có màu đỏ */
.field-validation-error {
    color: #dc3545;
    font-size: 0.875em; /* Làm chữ nhỏ hơn một chút */
    font-weight: bold;
}