.navbar-nav .dropdown:hover .dropdown-menu {
     display: block;
     margin-top: 0;
     animation: fadeIn 0.3s ease-in-out;
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .navbar-nav .nav-link {
     font-weight: bold;
     position: relative;
     padding: 0.5rem 1rem;
 }

 .nav-link,
 .navbar-brand,
 .dropdown-toggle {
     white-space: nowrap;
 }

 .navbar-nav .nav-link::after {
     content: "";
     position: absolute;
     width: 0;
     height: 2px;
     bottom: -5px;
     left: 0;
     background-color: green;
     transition: width 0.3s;
 }

 .nav-link:hover {
     color: yellow;
 }

 .navbar-nav .nav-link:hover::after,
 .navbar-nav .nav-link.active::after {
     width: 100%;
     color: green;
 }

 .dropdown-toggle::after {
     display: inline-block;
     margin-left: 0.4em;
     vertical-align: 0.255em;
     content: "";
     border-top: 0.3em solid;
     border-right: 0.3em solid transparent;
     border-left: 0.3em solid transparent;
 }

 .dropdown-menu {
     border: none;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }

 .btn-yellow {
     background-color: #ffc107;
     color: #000;
     font-weight: bold;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 6px;
 }

 .btn-yellow:hover {
     background-color: #e0a800;
 }

 .btn-blue {
     background-color: #007bff;
     color: #fff;
     font-weight: bold;
     border: none;
     padding: 0.5rem 1rem;
     border-radius: 6px;
 }

 .btn-blue:hover {
     background-color: #0069d9;
 }

 .offcanvas-header-custom {
     padding: 1rem;
     border-bottom: 1px solid #eee;
 }

 .offcanvas-body {
     padding: 1rem;
 }

 .accordion-button {
     background: none;
     box-shadow: none;
     width: auto;
     padding: 0;
     flex: 0 0 auto;
 }

 .accordion-button:not(.collapsed)::after {
     transform: rotate(180deg);
 }

 .list-link {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-bottom: 1px solid #eee;
 }

 .list-link a {
     flex: 1;
     padding: 0.75rem 0;
     font-weight: bold;
     text-decoration: none;
     color: green;
 }

 .offcanvas-body {
     padding: 1rem;
     overflow-y: auto;
     scrollbar-gutter: stable;
 }

 /* Scrollbar đẹp (optional) */
 .offcanvas-body::-webkit-scrollbar {
     width: 8px;
 }

 .offcanvas-body::-webkit-scrollbar-thumb {
     background: #ccc;
     border-radius: 4px;
 }

 .offcanvas-body::-webkit-scrollbar-thumb:hover {
     background: #888;
 }

 .nav-text {
     font-size: 13px;
     text-transform: uppercase;
     color: white;
 }

 .fake_header {
     display: none;
 }

 /* Khi ở mobile (<= 767px) */
 @media screen and (max-width: 991px) {
     .nav-text {
         color: #013B5D;
         /* hoặc màu bạn muốn, ví dụ: xanh lá cây */
     }

     .list-link a {
         flex: 1;
         padding: 0.75rem 0;
         font-weight: bold;
         text-decoration: none;
         color: #013B5D;
     }

     .fake_header {
         display: block;
     }
 }

@media (max-width: 576px) {
    .offcanvas-fullscreen-mobile {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
 /* Logo */
 .border-glow-wrapper {
     position: relative;
     display: inline-block;
     padding: 5px;
     border-radius: 8px;
     overflow: hidden;
 }

 .border-glow-wrapper::before {
     content: "";
     position: absolute;
     top: -2px;
     left: -2px;
     width: calc(100% + 4px);
     height: calc(100% + 4px);
     background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta, red);
     background-size: 400% 400%;
     animation: borderScan 3s linear infinite;
     z-index: 0;
     border-radius: 10px;
     padding: 3px;
     box-sizing: border-box;
     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
     pointer-events: none;
 }

 .border-glow-wrapper img {
     display: block;
     position: relative;
     z-index: 1;
     border-radius: 6px;
 }

 @keyframes borderScan {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

 /* Nút toggle */
 .navbar-toggler {
     border: 0;
     background-color: white;
 }

 .navbar-toggler:focus {
     outline: none;
     box-shadow: none;
 }
.bg-nav{
    background-color: var(--background-nav) ;
}