/*site.systemmenu.css*/
.nav-link {
    /*left: 20px;*/
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
}

/* Đả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 solid transparent;
    box-sizing: border-box;
    /*border-left: 1px solid #f9f9f9;*/
}
    .nav-item.dropdown:hover {
        border-bottom-color: var(--bs-primary); /* Chỉ đổi màu, không đổi độ dày để tránh giật layout */
        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: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    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: 0;
    padding-top: 0;
    padding-bottom: 0;

    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 */
    border-width: 0;
    transition: opacity 0.12s ease, visibility 0s linear 0.12s, max-height 0s linear 0.12s;
}

.dropdown-item {
    border-bottom: 2px solid transparent;
    box-sizing: border-box;
}

/* Hiện dropdown menu khi hover */
.dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    max-height: calc(100dvh - var(--nav-height, 42px) - 6px);
    overflow-y: auto;
    overscroll-behavior: contain;
    top: 100%;
    left: 0;
    margin-top: 2px;
    padding-top: .5rem;
    padding-bottom: .5rem;
    border-width: 1px;
    transition-delay: 0.28s, 0.28s, 0.28s;
}

.navbar .dropdown:hover > .dropdown-menu:has(.dropdown-submenu) {
    overflow: visible;
    z-index: 2000;
}

.atf-user-menu.dropdown > .atf-user-dropdown-menu,
.atf-user-menu.dropdown:hover > .atf-user-dropdown-menu {
    left: auto !important;
    right: 0 !important;
    min-width: max-content;
    margin-right: 0;
}

/* Username is a header control, not a primary navigation item. */
.navbar .atf-user-menu {
    align-self: center;
    border-bottom: 0 !important;
    height: auto;
    margin-bottom: 0;
}

.navbar .atf-user-menu > a {
    align-items: center;
    border-bottom: 0 !important;
    display: inline-flex;
    line-height: 1.2;
    margin-bottom: 0;
    vertical-align: middle;
}

.navbar .atf-user-menu:hover {
    border-bottom-color: transparent !important;
}

.navbar .dropdown > .dropdown-menu.dropdown-menu-right,
.navbar .dropdown:hover > .dropdown-menu.dropdown-menu-right {
    left: auto !important;
    right: 0 !important;
    margin-right: 0;
}

/* Tùy chỉnh hiển thị các mục bên trong */
.dropdown-menu .dropdown-item {
    font-size: var(--atf-control-font-size, 12px);
    position: relative;
    width: auto;
    white-space: nowrap; /*Ngăn nội dung bị xuống dòng*/
    padding: 2px 12px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    min-height: 30px;
    line-height: 1.2;
}

    .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-color: var(--bs-primary, #0d6efd);
    }

    .dropdown-menu .dropdown-item img,
    .dropdown-menu .dropdown-item i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 1.15em;
        width: 1.15em;
        height: 1.15em;
        line-height: 1;
        transition: transform 0.2s ease;
        margin-right: 8px; /* Khoảng cách giữa icon và text */
    }

    .dropdown-menu .dropdown-item .caret-icon {
        margin-left: auto !important;
        margin-right: 0 !important;
        align-self: center;
    }

    .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: block;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        max-height: 0;
        overflow: hidden;
        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;
        border-width: 0;
        padding-top: 0;
        padding-bottom: 0;
        transition: opacity 0.12s ease, visibility 0s linear 0.12s, max-height 0s linear 0.12s;
    }

    /* Hover vào mục có submenu thì hiển thị menu bên phải */
    .dropdown-submenu:hover > .sub-menu {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        max-height: calc(100dvh - var(--nav-height, 42px) - 6px);
        overflow-y: auto;
        overscroll-behavior: contain;
        z-index: 2100;
        padding-top: .5rem;
        padding-bottom: .5rem;
        border-width: 1px;
        transition-delay: 0.18s, 0.18s, 0.18s;
    }


.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; /* #e9ecef; Màu divider */
}

.dropdown-menu .dropdown-divider-bold {
    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: 2px solid #e9ecef;
}

/* 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;
} */

@media (max-width: 767.98px) {
    .navbar {
        z-index: 1060;
    }

    .navbar-collapse {
        max-height: calc(100dvh - var(--nav-height, 42px));
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        align-items: stretch !important;
    }

    .navbar-nav {
        width: 100%;
    }

    .nav-item.dropdown {
        position: static;
        width: 100%;
    }

    .nav-link.dropdown-toggle {
        width: 100%;
        justify-content: flex-start;
    }

    .dropdown .dropdown-menu,
    .dropdown:hover > .dropdown-menu,
    .navbar .dropdown:hover > .dropdown-menu:has(.dropdown-submenu) {
        position: static !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        width: 100%;
        min-width: 0;
        max-height: min(62dvh, 520px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
        margin: 0;
        box-shadow: none;
        border-width: 1px;
        border-radius: 0;
        padding-top: .35rem;
        padding-bottom: .35rem;
        overscroll-behavior: contain;
    }

    .dropdown-submenu {
        width: 100%;
    }

    .dropdown-submenu .sub-menu,
    .dropdown-submenu:hover > .sub-menu {
        position: static !important;
        left: auto !important;
        top: auto !important;
        width: 100%;
        min-width: 0;
        max-height: min(46dvh, 420px);
        overflow-x: hidden !important;
        overflow-y: auto !important;
        margin: .15rem 0 .35rem 0;
        padding-left: .75rem;
        box-shadow: none;
        border-width: 1px;
        border-radius: 0;
        overscroll-behavior: contain;
    }

    .dropdown-menu .dropdown-item {
        min-height: 36px;
        white-space: normal;
        align-items: flex-start;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .dropdown-menu .dropdown-item .caret-icon {
        transform: rotate(90deg);
    }

    /*
       Dropdown desktop dùng visibility để tạo hiệu ứng hover. Khi đưa về
       position: static trên mobile, phần tử visibility:hidden vẫn chiếm chiều
       cao và làm các mục menu chính bị giãn rất xa nhau.
    */
    .navbar .dropdown > .dropdown-menu,
    .navbar .dropdown-submenu > .sub-menu {
        display: none !important;
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        max-height: none;
    }

    .navbar .dropdown.atf-mobile-open > .dropdown-menu,
    .navbar .dropdown > .dropdown-menu.show,
    .navbar .dropdown-submenu.atf-mobile-open > .sub-menu {
        display: block !important;
    }

    .atf-navbar-start,
    .atf-navbar-end {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .atf-navbar-end {
        border-top: 1px solid var(--atf-line, #d9e2ec);
    }
}