/* Khi navbar-toggler bị collapsed, ẩn đi hoặc thay đổi opacity */
.navbar-toggler.collapsed {
    transform: rotate(180deg);
    /* Tạo hiệu ứng xoay nếu cần */
    opacity: 0.5;
}

/* Thêm transition cho body khi no-scroll được thêm vào */
body.no-scroll {
    overflow: hidden;
    /* Ngừng cuộn trang khi navbar mở */
    transition: overflow 0.3s ease;
}

#navbarNav {
    transform: translateY(-100%);
    /* Ban đầu, navbar ở phía trên ngoài màn hình */
    opacity: 0;
    /* Ban đầu navbar là ẩn */
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
    /* Thêm hiệu ứng chuyển động mượt mà */
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
    /* Loại bỏ bất kỳ bóng nào khi nút được nhấn */
}

/* Khi navbar xuất hiện */
#navbarNav.show {
    transform: translateY(0);
    /* Cuộn từ trên xuống */
    opacity: 1;
    /* Đưa navbar về trạng thái hiển thị và mờ dần */
}

/* Khi navbar bị ẩn */
#navbarNav.hide {
    transform: translateY(100%);
    /* Cuộn xuống dưới */
    opacity: 0;
    /* Ẩn navbar */
}





#header-mobile {
    z-index: 99;
}

#navbarNav {
    max-height: 800px;
    /* Đặt chiều cao tối đa */
    min-height: 800px;
    /* Đặt chiều cao tối đa */
    overflow-y: auto;
    /* Bật cuộn theo trục dọc */
    overflow-x: hidden;
    /* Ngăn cuộn ngang nếu không cần thiết */
    padding-bottom: 300px;
}


#header-desktop {
    box-shadow: 0 2px 10px rgba(10, 0, 0, 0.125) !important;
    transition: box-shadow 0.3s ease;
}

.navbar {
    flex-wrap: wrap;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.navbar-collapse {
    width: 100%;
}

.navbar-nav {
    width: 100%;
}

/* Hiệu ứng cho dropdown */
.custom-dropdown {
    position: absolute;
    top: 68px;
    /* Dưới header */
    left: 0;
    width: 100vw;
    display: none;
    /* Ẩn mặc định */
    background-color: white;
    z-index: 99;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

* {
    box-sizing: border-box;
}


.text-decoration-none {
    text-decoration: none;
}

.bold-text {
    font-weight: 700;
}

.dropdown-menu {
    display: none;
    /* Ẩn menu mặc định */
    opacity: 0;
    transform: scaleY(0);
    transition: opacity 0.3s, transform 0.3s;
}

.dropdown-menu.open {
    display: block;
    /* Hiển thị menu khi có class 'open' */
    opacity: 1;
    transform: scaleY(1);
}

.custom-dropdown.show,
.custom-dropdown-resource.show,
.custom-dropdown-storage.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Hiệu ứng cho dropdown */
.custom-dropdown-resource,
.custom-dropdown,
.custom-dropdown-storage {
    position: absolute;
    top: 68px;
    display: none;
    /* Ẩn mặc định */
    background-color: white;
    z-index: 99;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
}

#dropdown-storage {
    display: none;
    /* Ẩn dropdown mặc định */
    position: absolute;
    /* Định vị tuyệt đối */
    top: 100%;
    /* Hiển thị ngay dưới mục cha */
    left: -60;
    /* Căn theo bên trái */
    z-index: 1000;
    /* Đảm bảo nó xuất hiện trên các thành phần khác */
    background-color: white;
    min-width: 300px;
    /* Đảm bảo chiều rộng tối thiểu */
}

#storage-toggle:hover+#dropdown-storage,
#dropdown-storage:hover {
    display: block;
    /* Hiện dropdown khi hover */
}


.custom-dropdown-resource {
    left: 900;
}

.padding-content-header {
    padding: 13px 13px 0px 13px;
}

.custom-dropdown-storage {
    left: 65vw;
    min-width: 300px;
}

/* Hiệu ứng thanh active */
.nav-item.active {
    border-bottom: 2px solid #f8c509;
    /* Màu hồng */
    padding-bottom: 5px;
}

/* Thêm padding và hover cho các mục menu */
.nav-item:hover {
    cursor: pointer;
    color: #ff007f;
}

.nav-item.dropdown.open .dropdown-menu {
    display: block;
}


nav {
    align-items: center;
    justify-content: center;
}

nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Điều chỉnh padding nếu cần */
    text-align: center;
    /* Đảm bảo text bên trong a nằm ở giữa */
}

/* Thêm hiệu ứng cho các mục trong nav */
nav a {
    position: relative;
    display: inline-block;
}

/* Đảm bảo không có dấu gạch chân */
nav a.text-dark {
    text-decoration: none;
}

.text-dark.text-decoration-none.nav-item {
    height: 68px !important;
}

.icon-wrapper {
    background-color: rgba(169, 181, 0, 0.1);
    /* Màu nền nhẹ cho icon */
    border-radius: 50%;
    margin-bottom: 15px;
    /* Để icon nằm trong vòng tròn */
    display: flex;
    /* Sử dụng Flexbox */
    justify-content: center;
    /* Căn giữa icon ngang */
    align-items: center;
    /* Căn giữa icon dọc */
    width: 60px;
    /* Đặt kích thước của vòng tròn */
    height: 60px;
    /* Đặt kích thước của vòng tròn */
}

.icon-wrapper i {
    font-size: 18px;
    /* Điều chỉnh kích thước của icon */
}

.hover-feature:hover {
    cursor: pointer;
    background-color: rgb(255, 240, 244);
    border-radius: 15px;
}

.navbar {
    animation: slide-in-left 0.5s ease-out;
}

.navbar-brand img {
    animation: fade-in 0.5s ease-out;
}

.navbar-toggler {
    border: none;
    outline: none;
    animation: rotate-in 0.5s ease-out;
}

.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M6 18L18 6M6 6l12 12'/%3e%3c/svg%3e");
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@keyframes slide-in-left {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.rotate {
    transition: transform 0.3s ease;
    transform: rotate(180deg);
}

@keyframes rotate-in {
    0% {
        transform: rotate(-180deg);
        opacity: 0;
    }

    100% {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* Đẩy các item qua bên trái */
.navbar-nav .nav-link {
    text-align: left;
    margin-left: 16px;
    width: 100%;
}

/* Thêm khoảng cách cho menu cha */
.navbar-nav .dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Tùy chỉnh icon */
.navbar-nav .dropdown-toggle::after {
    content: '\f107';
    /* Icon fa-angle-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 10px;
}

.navbar-nav .dropdown-toggle.collapsed::after {
    content: '\f106';
    /* Icon fa-angle-up */
}

/* Hiển thị sub-menu khi mở */
.dropdown-menu {
    display: none;
}

.dropdown-menu.show {
    display: block;
}

/* Thêm hiệu ứng chuyển đổi */
.dropdown-menu {
    transition: all 0.3s ease-in-out;
}

/* Ẩn khoảng trống khi đóng */
.collapse:not(.show) .dropdown-menu {
    display: none;
}

.btn-pink {
    background-color: #f67c98;
    color: white;
}

.btn-yellow {
    background-color: rgb(255 164 27);
    color: white;
}

.btn-yellow:hover {
    border: 1px solid;
}

.btn-outline-pink {
    background-color: transparent;
    color: #f67c98;
    border: 2px solid #f67c98;
}

.btn-outline-yellow {
    background-color: transparent;
    color: rgb(255 164 27);
    border: 2px solid #f67c98;
}

.btn-outline-slider {
    background-color: transparent !important;
    color: #fff !important;
    font-weight: 600 !important;
    border: 2px solid #fff !important;
}

.btn-outline-slider:hover {
    background-color: #f67c98 !important;
    color: white !important;
}

.btn-outline-pink:hover {
    background-color: #f67c98 !important;
    color: white !important;
}

.btn-pink:hover {
    background-color: #e15e7d;
    color: white;
}

#mobile-header .nav>li>a {
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0em;
    color: var(--primary-text-color);
    text-transform: none;
}

.dropdown-hover:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
    margin-top: 0;
}

.dropdown-menu .content-container {
    width: 600px;
    padding: 20px;
}

/* Adjust alignment for angle-down icon */
.dropdown-toggle::after {
    display: none;
}

.dropdown a {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-item.dropdown.active {
    background-color: rgb(255, 240, 244);
    border-radius: 15px;
    border: none;
}