/* Hiệu ứng mờ dần và trượt lên */
.reveal {
    opacity: 0;
    transform: translateY(3rem);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Khi Navbar được cuộn */
.nav-scrolled {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 1);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.dark .nav-scrolled {
    background-color: rgba(5, 5, 5, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Menu Mobile */
#mobile-menu {
    transition: all 0.3s ease-in-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}
#mobile-menu.open {
    max-height: 300px;
    opacity: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
}