body {
    /* background-color: #f0f2f5; */
    /* Thay #f0f2f5 bằng mã màu bạn muốn */
    /* Ví dụ các màu khác: */
    /* background-color: lightblue; */
    background-color: #e9ecef;
    padding-top: 70px;
    /* Màu xám nhạt */
}
/* Hiệu ứng hover cho các link chính trong navbar */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    /* :focus cũng quan trọng cho người dùng bàn phím */
    color: #0d6efd;
    /* Màu xanh dương chính của Bootstrap - Bạn có thể đổi màu khác */
    /* Ví dụ màu khác: */
    /* color: #198754; */
    /* Màu xanh lá cây success */
    /* color: #dc3545; */
    /* Màu đỏ danger */
    /* color: #ffc107; */
    /* Màu vàng warning */

    /* (Tùy chọn) Thêm hiệu ứng chuyển màu mượt mà */
    transition: color 0.2s ease-in-out;
}

/* (Tùy chọn) Nếu bạn muốn thêm hiệu ứng chuyển màu mượt, */
/* bạn nên đặt transition cho trạng thái mặc định của link */
.navbar-nav .nav-link {
    transition: color 0.2s ease-in-out;
}

/* Giữ màu cho link active nếu có (để không bị hiệu ứng hover ghi đè) */
/* .navbar-nav .nav-link.active {
    /* Có thể giữ màu mặc định của Bootstrap hoặc đặt màu riêng */
    /* color: #000; */
    /* Ví dụ: màu đen */
/* } */ 

/* .navbar-nav .nav-link.active:hover, */
/* .navbar-nav .nav-link.active:focus { */
    /* Đảm bảo màu active không bị đổi khi hover */
    /* color: #000; */
    /* Giữ nguyên màu active */
    /* Hoặc có thể làm nó tối hơn một chút nếu muốn */
    /* filter: brightness(90%); */
/* } */
select.border-danger {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25);
}

/* CSS để Select2 hiển thị đúng kích thước với form Bootstrap */
.select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: .25rem;
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
    padding-right: 2.25rem;
    /* Chừa chỗ cho mũi tên dropdown */
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    margin-top: 0.3125rem;
    /* Điều chỉnh vị trí các item đã chọn */
    margin-right: 4px;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
}
/* Định vị lại badge một chút nếu cần (Bootstrap mặc định đã khá tốt) */
#notification-count-badge {
    /* Ví dụ: Điều chỉnh vị trí nếu muốn */
    /* top: -2px; */
    /* start: 95%; */
    /* font-size: 0.65em; */
    /* Có thể chỉnh lại kích thước nếu cần */
    /* padding: 0.25em 0.5em; */
    /* Thêm hiệu ứng nhẹ khi số lượng thay đổi (tùy chọn) */
    transition: transform 0.2s ease-out;
}

/* Hiệu ứng nhỏ khi badge có giá trị > 0 */
/* #notification-count-badge:not(:empty):not([style*="display: none"]) { */
    /* Ví dụ: scale nhẹ */
    /* transform: scale(1.1); */
/* } */

/* Container dropdown thông báo */
#notification-dropdown-list {
    /* Các style inline đã khá ổn, có thể thêm ở đây nếu muốn */
    /* min-width: 300px; */
    /* max-height: 400px; */
    /* overflow-y: auto; */
    padding-top: 0;
    /* Bỏ padding trên cùng nếu muốn item sát viền */
    padding-bottom: 0;
    /* Bỏ padding dưới cùng nếu muốn item sát viền */
}

/* Từng mục thông báo trong dropdown */
#notification-dropdown-list .notification-item {
    white-space: normal;
    /* Cho phép xuống dòng */
    border-bottom: 1px solid #eee;
    /* Ngăn cách các item */
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    transition: background-color 0.15s ease-in-out;
    /* Hiệu ứng hover */
}

#notification-dropdown-list .notification-item:last-child {
    border-bottom: none;
    /* Bỏ border cho item cuối */
}

#notification-dropdown-list .notification-item:hover {
    background-color: #f8f9fa;
    /* Màu nền khi hover */
}

/* Style cho message và timestamp trong dropdown item */
#notification-dropdown-list .notification-item .small {
    line-height: 1.4;
    /* Tăng khoảng cách dòng nếu cần */
}

#notification-dropdown-list .notification-item .text-muted {
    font-size: 0.8em;
    /* Timestamp nhỏ hơn chút */
}

/* Link "Xem tất cả" trong dropdown */
#notification-dropdown-list li>a.text-center {
    padding: 0.5rem 1rem;
    background-color: #e9ecef;
    color: #495057;
    font-weight: 500;
}

#notification-dropdown-list li>a.text-center:hover {
    background-color: #dee2e6;
}


/* --- Styling cho Trang Danh sách Thông báo (/notifications/) --- */

/* Container chính của danh sách */
/* #notification-list-container {
    /* Thêm padding hoặc margin nếu cần */
/* } */ 

/* Từng mục thông báo trên trang danh sách */
.notification-list-item {
    margin-bottom: 0.75rem;
    /* Khoảng cách giữa các item */
    border-radius: 0.375rem;
    /* Bo góc nhẹ */
    /* Thêm hiệu ứng đổ bóng nhẹ */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.1); */
}

/* Phân biệt rõ hơn thông báo chưa đọc */
.notification-list-item.list-group-item-light {
    /* background-color: #f8f9fa; */
    /* Có thể dùng màu nền khác thay vì chỉ fw-bold */
    border-left: 4px solid var(--bs-primary);
    /* Thêm viền trái màu primary */
    padding-left: 1.25rem;
}

/* Đã đọc */
.notification-list-item.list-group-item-secondary {
    border-left: 4px solid #ccc;
    padding-left: 1.25rem;
    opacity: 0.85;
    /* Làm mờ nhẹ thông báo đã đọc */
}


/* Message trong danh sách */
/* .notification-list-item .notification-message {
    font-size: 0.95rem; */
/* } */

/* Icon trạng thái (Info, Success, Warning, Error) */
.notification-list-item .bi {
    font-size: 1.1em;
    vertical-align: middle;
}

/* Các nút hành động trên trang danh sách */
/* .notification-list-item .btn {
    /* Có thể thêm style chung cho các nút ở đây */
/* } */ 

/* Nút "Đánh dấu đã đọc" riêng */
.notification-list-item .mark-one-read-btn {
    /* Ví dụ: Chỉ hiển thị icon */
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

/* Hiệu ứng khi hover vào item trên trang list */
.notification-list-item:hover {
    background-color: #e9ecef;
}

.container.main-content {
    padding-top: 70px !important;
}


/* css cho profle phần con cái  */
.list-group-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
}

.list-group-item .d-flex.flex-column {
    flex: 1;
    min-width: 0;
    /* Đảm bảo không bị tràn khi nội dung dài */
}

.list-group-item small {
    margin-top: 0.25rem;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 300px;
    /* Giới hạn độ dài dòng */
}