.site-header {
    background: var(--primary-blue-blur);
}

.site-header__right {
    z-index: 10;
    gap: 16px;
}

.site-header__background {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    object-fit: cover;
    object-position: center;
}

.site-header__left {
    z-index: 1;
}

.site-header__inner {
    padding-top: 16px;
    padding-bottom: 16px;
}

.site-header__logo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    object-position: center;
}

.site-header__title {
    color: var(--text-light);
    font-family: Inter;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%; /* 24px */
}

.site-header__description {
    color: var(--text-light);
    font-family: Inter;
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
    line-height: 120%; /* 24px */
}

.header-search__input {
    display: flex;
    width: 195px;
    min-width: 120px;
    padding: var(--sds-size-space-300) var(--sds-size-space-400);
    align-items: center;
    border-radius: var(--sds-size-radius-full);
    border: var(--sds-size-stroke-border) solid var(--sds-color-border-default-default);
    background: var(--sds-color-background-default-default);
    color: var(--sds-color-text-default-tertiary);
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 21px */
}

.header-search__icon {
    top: 13px;
    position: absolute;
    right: 13px;
}

.header-actions__login-btn,
.account-access > a {
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 24px */
    color: white !important;
}

    .header-actions__login-btn:hover,
    .account-access > a:hover {
        color: #fff
    }


.rbt-admin-profile .username {
    font-size: 14px;
}


#list_menu_header ul {
    list-style-type: none;
}

    #list_menu_header ul li {
        position: relative; /* Để tiện cho việc đặt vị trí cho submenu */
    }

    #list_menu_header ul .submenu {
        z-index: 100;
        display: none; /* Ẩn menu con mặc định */
        position: absolute; /* Định vị menu con */
        left: 0;
        background-color: #fff; /* Màu nền cho menu con */
        /*border: 1px solid #D9D9D9;*/ /* Khung cho menu con */
        border-top: 0px;
        border-radius: 8px;
        border-start-start-radius: 0px;
        border-start-end-radius: 0px;
        box-shadow: 0 16px 32px -8px #0C0C0D66;
        padding: 8px;
    }

    #list_menu_header ul li:hover .submenu {
        display: block; /* Hiển thị menu con khi hover vào item chính */
    }



#list_menu_header .submenu li {
    margin: 0;
    padding: 8px;
    white-space: nowrap;
    display: flex;
    justify-content: space-between;
    width: 226px;
    font-size: 14px;
    font-weight: 500;
}

    #list_menu_header .submenu li:hover {
        background-color: #F5F5F5;
        border-radius: 8px;
        color: #1251EE;
    }

        #list_menu_header .submenu li:hover a {
            color: #1251EE;
        }
/*    .submenu a {
        font-size: 14px;
        color: var(--Alias-Reverse-Theme, #27272A);
    }*/
.main-navigation {
    background-color: var(--dark-blue);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    /*height: 54px;*/
}

#list_menu_header ul li {
    margin-top: 0;
    margin-bottom: 0;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    gap: 8px;
}

    .nav-links li {
        position: relative;
    }

.nav-link {
    font-weight: 700;
    display: flex;
    align-items: center;
    padding: 12px 8px;
    color: #fff;
    gap: 2px;
    text-decoration: none;
    /*border-bottom: 2px solid transparent;*/
    transition: background-color 0.2s ease, border-bottom-color 0.2s ease;
    font-size: 16px;
}


    .nav-link img {
        width: 10px;
        height: auto;
    }

    .nav-link:hover {
        background: rgba(255, 255, 255, 0.10);
        border-bottom-color: #FFF;
        color: #fff;
    }

    .nav-link,
    .nav-link:visited {
        color: #fff;
        text-decoration: none;
    }

/* Xóa border cho mục cuối */
.nav-links li:last-child .nav-link {
    border-right: none;
}

/* submenu item */
#trainingProgramMenu li {
    display: flex;
    align-items: center;
    justify-content: space-between; /* text bên trái, mũi tên bên phải */
    white-space: nowrap; /* không xuống dòng */
    padding: 14px 20px;
}


    #trainingProgramMenu li a {
        flex-shrink: 1; /* text có thể co lại nếu quá dài */
        overflow: hidden;
        text-overflow: ellipsis; /* cắt text dài bằng ... */
    }

    #trainingProgramMenu li img {
        flex-shrink: 0; /* mũi tên không co lại */
        width: 12px;
        height: 12px;
        object-fit: contain;
        margin-left: 10px; /* khoảng cách với text */
    }

.view-all {
    display: flex;
    align-items: center; /* căn giữa theo chiều dọc */
    gap: 6px; /* khoảng cách giữa các phần tử */
}

    .view-all a {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--primary-blue);
    }

    .view-all svg {
        color: var(--primary-blue-blur);
        width: 14px;
        height: 14px;
    }

    .view-all > svg {
        width: 6px;
        height: 11px;
    }

li.view-all-siderbar > a {
    color: var(--dark-blue);
}

a.view-all-title {
    background-color: var(--dark-blue);
}

li.view-all-siderbar,
li.view-all-siderbar-item {
    margin: 0;
}

    li.view-all-siderbar a,
    li.view-all-siderbar-item a {
        padding: 10px 10px;
    }

        li.view-all-siderbar a > span {
            display: flex;
            align-items: center;
            gap: 6px;
        }

.course-card-content {
    padding: 10px 0;
}

.header-mobile-title {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

#header_mobile {
    display: none;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    flex-direction: column;
    background-color: #2A7FFF;
}

    #header_mobile .site-header__logo {
        width: 40px;
        height: 40px;
    }

    #header_mobile .site-header__title {
        font-size: 14px;
    }

    #header_mobile .site-header__description {
        font-size: 12px;
    }

.header-mobile-top {
    padding: 16px;
}

.title-main-mobile {
    color: white;
    font-size: 17px !important;
}

.header-mobile-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.account-access {
    margin: 0;
}

.menu-link {
    column-gap: 10px;
    display: flex;
    align-items: center;
}

.menu-icon {
    width: 20px;
    height: 20px;
}

.menu-last {
    margin-top: 20px !important;
    padding: 0 !important;
}

    .menu-last a {
        padding: 9px 10px;
        justify-content: center;
        border-radius: 4px;
        color: #B60002;
        background-color: rgba(7, 16, 239, 0.10);
    }

        .menu-last a span {
            color: #003B8E;
        }

.rbt-default-sidebar-list li a:hover {
    color: var(--color-primary) !important;
}

.dashboard-mainmenu li a.active .menu-icon {
    filter: brightness(0) saturate(100%) invert(15%) sepia(32%) saturate(7234%) hue-rotate(209deg) brightness(94%) contrast(101%);
}

.dashboard-mainmenu li a.active span {
    color: #003B8E;
}

.feather-log-out {
    color: #003B8E;
}

@media only screen and (max-width: 768px) {
    .rbt-mini-notification .rbt-notification-count {
        top: -7px;
        right: -4px;
        left: auto;
    }

    header {
        display: none;
    }

    #header_mobile {
        display: flex;
    }
}

.header-mobile-img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

#rbt_user_menu_list_wrapper {
    z-index: 99999;
}

.rbt-user-wrapper:hover .rbt-user-menu-list-wrapper {
    z-index: 99999;
}

#popular-popup {
    background: white;
    position: absolute;
    width: 300px;
    min-height: 200px;
    top: 5rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.trending-icon {
    width: 2rem;
}

.popular-item {
    padding: .5rem;
}

    .popular-item:hover {
        background-color: #f2f4f5;
        border-radius: 4px;
    }

#header-search-page-size {
    width: 70px;
    height: 40px;
    font-size: 14px;
    padding: 0;
    border: none;
    background-color: transparent;
    box-shadow: none;
    border: 1px solid;
    padding-left: 17px;
}

#popular-keyword-list {
    overflow-y: auto;
    max-height: 300px;
}

.search-icon {
    font-size: 18px;
    color: white !important;
}

    .search-icon:hover {
        color: white !important;
    }

.side-nav-opened body::before, .close_side_menu, .popup-mobile-menu, .rbt-offcanvas-side-menu {
    backdrop-filter: none !important;
}

.side-nav-opened body::before {
    top: 100px !important;
}

.site-header__right .header-actions {
    gap: 16px;
}

header-actions__login-btn

.site-header__right .user-info #user-display {
    font-size: 14px;
    font-weight: 600;
    color: white;
    line-height: 150%;
}

.site-header__right #local_time {
    font-size: 12px;
    font-weight: 400;
    color: white;
    line-height: 150%;
    margin-top: 3px;
}


.popup-mobile-menu .inner-wrapper {
    padding: 8px 16px;
    background-color: #002D69;
    color: white;
}

.popup-mobile-menu .mainmenu {
    padding: 0px;
}

#header_mobile .mobile-menu-bar {
    z-index: 1;
}

.popup-mobile-menu .mainmenu li {
    padding: 8px 12px;
}

    .popup-mobile-menu .mainmenu li.has-menu-child-item {
        padding: 0;
    }

        .popup-mobile-menu .mainmenu li.has-menu-child-item > a {
            padding: 8px 12px;
        }


    .popup-mobile-menu .mainmenu li + li {
        border: none;
    }

.rbt-information-list li a {
    color: white;
}

    .rbt-information-list li a:hover {
        color: white;
    }


.popup-mobile-menu .mainmenu li a {
    color: white;
    font-weight: 600;
    font-size: 16px;
    padding: 0px;
}

.popup-mobile-menu .mainmenu .has-menu-child-item > a::after, .popup-mobile-menu .mainmenu .has-dropdown > a::after {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.6925 7.94254L10.4425 14.1925C10.3845 14.2506 10.3156 14.2967 10.2397 14.3282C10.1638 14.3597 10.0825 14.3758 10.0003 14.3758C9.91821 14.3758 9.83688 14.3597 9.76101 14.3282C9.68514 14.2967 9.61621 14.2506 9.55816 14.1925L3.30816 7.94254C3.19088 7.82526 3.125 7.6662 3.125 7.50035C3.125 7.3345 3.19088 7.17544 3.30816 7.05816C3.42544 6.94088 3.5845 6.875 3.75035 6.875C3.9162 6.875 4.07526 6.94088 4.19253 7.05816L10.0003 12.8668L15.8082 7.05816C15.8662 7.00009 15.9352 6.95403 16.011 6.9226C16.0869 6.89117 16.1682 6.875 16.2503 6.875C16.3325 6.875 16.4138 6.89117 16.4897 6.9226C16.5655 6.95403 16.6345 7.00009 16.6925 7.05816C16.7506 7.11623 16.7967 7.18517 16.8281 7.26104C16.8595 7.33691 16.8757 7.41823 16.8757 7.50035C16.8757 7.58247 16.8595 7.66379 16.8281 7.73966C16.7967 7.81553 16.7506 7.88447 16.6925 7.94254Z" fill="white"/> </svg> ');
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

.popup-mobile-menu .mainmenu .has-menu-child-item > a.open::after, .popup-mobile-menu .mainmenu .has-dropdown > a.open::after {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16.6925 7.94254L10.4425 14.1925C10.3845 14.2506 10.3156 14.2967 10.2397 14.3282C10.1638 14.3597 10.0825 14.3758 10.0003 14.3758C9.91821 14.3758 9.83688 14.3597 9.76101 14.3282C9.68514 14.2967 9.61621 14.2506 9.55816 14.1925L3.30816 7.94254C3.19088 7.82526 3.125 7.6662 3.125 7.50035C3.125 7.3345 3.19088 7.17544 3.30816 7.05816C3.42544 6.94088 3.5845 6.875 3.75035 6.875C3.9162 6.875 4.07526 6.94088 4.19253 7.05816L10.0003 12.8668L15.8082 7.05816C15.8662 7.00009 15.9352 6.95403 16.011 6.9226C16.0869 6.89117 16.1682 6.875 16.2503 6.875C16.3325 6.875 16.4138 6.89117 16.4897 6.9226C16.5655 6.95403 16.6345 7.00009 16.6925 7.05816C16.7506 7.11623 16.7967 7.18517 16.8281 7.26104C16.8595 7.33691 16.8757 7.41823 16.8757 7.50035C16.8757 7.58247 16.8595 7.66379 16.8281 7.73966C16.7967 7.81553 16.7506 7.88447 16.6925 7.94254Z" fill="white"/> </svg> ');
    background-size: contain;
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

.popup-mobile-menu .mainmenu .rbt-megamenu {
    padding: 0px;
}

    /*    .popup-mobile-menu .mainmenu .rbt-megamenu .wrapper {
        margin-top: 1px;
    }
*/
    .popup-mobile-menu .mainmenu .rbt-megamenu .wrapper li {
        background-color: #00193A;
        border-top: 1px solid #002D69;
    }

.popup-mobile-menu .mainmenu .has-menu-child-item > a.open, .popup-mobile-menu .mainmenu .has-dropdown > a.open {
    background-color: #00224F;
    border-radius: 8px;
    border-end-start-radius: 0px;
    border-end-end-radius: 0px;
}

.with-megamenu.has-menu-child-item .rbt-megamenu .single-mega-item li:last-child {
    border-radius: 8px;
    border-start-start-radius: 0px;
    border-start-end-radius: 0px;
}