/*site.systemmenu.css*/
.nav-link {
    /*left: 20px;*/
    border-bottom: 0px;
}

/* Đảm bảo các li trong navbar-nav có position: relative để dropdown-menu con căn chỉnh */
/* Giả sử các li cha là .nav-item hoặc .dropdown */
.nav-item.dropdown {
    position: relative; /* Quan trọng để định vị .dropdown-menu con */
    border-bottom: 2px;
    /*border-left: 1px solid #f9f9f9;*/
}
    .nav-item.dropdown:hover {
        border-bottom: 2px solid var(--bs-primary); /* Ví dụ: 3px solid màu xanh dương */
        font-weight: 550;
        /*transform: scale(1.1);*/ /* Nhẹ nhàng phóng to icon khi hover */
    }


/* Ẩn menu con mặc định */
.dropdown .dropdown-menu {
    display: none;
    position: absolute; /* Đặt vị trí tuyệt đối để căn chỉnh với li cha */
    z-index: 1000;
    min-width: 200px;
    /* Căn chỉnh theo yêu cầu: căn phải với menu cha và trôi về bên trái (nếu cần) */
    /* Với menu ở bìa cùng bên phải, bạn muốn dropdown cũng căn phải */
    /*right: 0;
    left: auto;*/ /* Đảm bảo right hoạt động đúng */
    /* Thay đổi quan trọng: Căn lề trái thay vì lề phải */
    left: 0; /* Căn lề trái của dropdown-menu khớp với lề trái của LI cha (.nav-item.dropdown) */
    right: auto; /* Đảm bảo không xung đột với left */
    top: 100% !important; /* Đã có trong hover rule, có thể thêm vào đây hoặc để nguyên */
    margin-top: 2px; /* Đặt khoảng cách từ menu cha xuống menu con */

    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* Thêm đổ bóng cho đẹp */
    background-color: #f9f9f9; /* Màu nền cho dropdown */
    border: 1px solid #ddd; /* Viền nếu muốn */

}

.dropdown-item {
    border-bottom: 2px;
}

/* Hiện dropdown menu khi hover */
.dropdown:hover > .dropdown-menu {
    display: block;
    top: 100%;
    left: 0;
}

/* Tùy chỉnh hiển thị các mục bên trong */
.dropdown-menu .dropdown-item {
    font-size: 13px;
    position: relative;
    white-space: nowrap; /*Ngăn nội dung bị xuống dòng*/
    padding: 2px 12px;
    transition: background-color 0.2s;
    display: block; /* Đảm bảo là block để padding và hover hoạt động tốt */
    line-height:30px;
}

    .dropdown-menu .dropdown-item:hover {
        /*background-color: #9ee1ff;*/
        /* Màu nền xanh nhạt, không làm chìm icon */
        /*color: inherit;*/
        /* Không thay đổi màu chữ */
        /*background-color: var(--bs-primary, #0d6efd);
        color: white;*/
        border-bottom: 2px solid var(--bs-primary, #0d6efd);
    }

    .dropdown-menu .dropdown-item img,
    .dropdown-menu .dropdown-item i {
        transition: transform 0.2s ease;
        margin-right: 8px; /* Khoảng cách giữa icon và text */
    }

    .dropdown-menu .dropdown-item:hover img,
    .dropdown-menu .dropdown-item:hover i {
        transform: scale(1.1); /* Nhẹ nhàng phóng to icon khi hover */
    }

/* submenu nằm bên phải */
.dropdown-submenu {
    position: relative;
    /* Đảm bảo nền của dropdown-item chứa submenu không bị trong suốt, để chuột không bị lọt qua */
    /* Có thể cần đặt background-color cho .dropdown-item của .dropdown-submenu nếu cần */
}

    .dropdown-submenu .sub-menu {
        display: none; /* Mặc định ẩn sub-menu */
        position: absolute;
        top: 0px; /* Điều chỉnh để sub-menu khớp chiều cao với item cha, có thể là 0 hoặc giá trị âm nhỏ */
        left: 100%; /* Đặt sub-menu ngay bên phải của item cha */
        min-width: 200px;
        border-top: 0; /* Có thể bỏ nếu không cần */
        z-index: 1001; /* Đảm bảo sub-menu nằm trên dropdown-menu cấp 1 */
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        background-color: #f9f9f9;
        border: 1px solid #ddd;
    }

    /* Hover vào mục có submenu thì hiển thị menu bên phải */
    .dropdown-submenu:hover > .sub-menu {
        display: block;
    }


.dropdown-menu .dropdown-divider {
    margin: 0 0; /* Tăng margin cho divider nếu cần */
    padding: 0 0; /* Khoảng cách trên và dưới của divider */
    border-top: 1px solid #e9ecef; /* Màu divider */
}

/* Các lớp nav-item và nav-link có thể cần điều chỉnh thêm nếu có bất kỳ style nào gây xung đột */
/* Ví dụ: .nav-item.dropdown .nav-link.dropdown-toggle */
.nav-link.dropdown-toggle {
    padding-right: 25px; /* Tạo không gian cho mũi tên dropdown */
    position: relative; /* Cho phép định vị icon mũi tên nếu dùng :after */
}

/* Thêm mũi tên cho dropdown-toggle nếu thư viện không tự tạo */
/* Nếu bạn đang dùng Bootstrap, mũi tên đã có sẵn. */
/* Nếu không, có thể thêm CSS này: */
/* .nav-link.dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
} */