/* Giữ sidebar cố định khi cuộn trên màn hình lớn */
@media (min-width: 992px) {
    .sidebar-sticky {
        position: sticky;
        top: 1rem;
        height: calc(100vh - 1rem);
    }
}

.sidebar .nav-link {
    color: #495057;
    /* Màu chữ mặc định */
    padding: 0.75rem 1.5rem;
    transition: all 0.2s ease-in-out;
    border-left: 3px solid transparent;
    /* Đường viền trái trong suốt */
}

.sidebar .nav-link:hover {
    background-color: #e9ecef;
    /* Màu nền khi hover */
    /* border-left-color: #adb5bd; */
    /* Màu viền trái khi hover */
}

.sidebar .nav-link.active {
    color: #0d6efd;
    /* Màu chữ của mục đang hoạt động */
    /* font-weight: 600; */
    background-color: #e0eaf8;
    /* border-left-color: #0d6efd; */
    /* Màu viền trái của mục đang hoạt động */
}

/* Style cho menu con (submenu) */
.submenu {
    /* padding-left: 1.25rem; */
    /* Thụt lề cho menu con */
    background-color: #f8f9fa;
    /* Nền nhẹ cho menu con */
}

.submenu .nav-link {
    font-size: 0.9rem;
    /* Cỡ chữ nhỏ hơn cho mục con */
    padding-left: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.submenu .nav-link.active {
    /* font-weight: 600; */
}

/* Style cho nút bấm collapse */
.collapse-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Icon mũi tên */
.collapse-toggle::after {
    content: '\f282';
    /* Mã icon mũi tên xuống của Bootstrap Icons */
    font-family: 'bootstrap-icons';
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
}

.collapse-toggle[aria-expanded="true"]::after {
    transform: rotate(-180deg);
    /* Xoay mũi tên khi menu mở */
}