/* =========================================
   Nettan Solutions — Header / Navbar CSS
   Tách từ main.css để giảm kích thước file
   ========================================= */

/* =========================================
   NAVBAR
   ========================================= */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background .35s ease, border-color .35s ease,
                backdrop-filter .35s ease, box-shadow .35s ease,
                height .35s ease;
}
.navbar.scrolled {
    box-shadow: var(--shadow);
    --nav-h: 3.5rem;
}

.nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    height: var(--nav-h);
    transition: height .35s ease;
}
.nav-logo img {
    height: 48px; width: auto;
    transition: height .35s ease;
}
.navbar.scrolled .nav-logo img { height: 32px; }

.nav-menu {
    display: flex; align-items: center; gap: .25rem;
}
.nav-link {
    padding: .5rem .85rem; border-radius: 6px;
    font-size: .9rem; font-weight: 500; color: var(--text);
    transition: all var(--t); position: relative;
}
.nav-link:hover, .nav-link.active { color: var(--cyan); background: rgba(0,174,219,.08); }

/* Dropdown */
.nav-item { position: relative; }
.nav-dropdown {
    position: absolute; top: calc(100% + .5rem); left: 0;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow);
    min-width: 220px; padding: .5rem;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: all var(--t); pointer-events: none;
}
.nav-item:hover .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
    pointer-events: auto;
}
.nav-dropdown a {
    display: block; padding: .6rem 1rem; border-radius: 8px;
    font-size: .875rem; color: var(--text);
    transition: all var(--t);
}
.nav-dropdown a:hover { background: rgba(0,174,219,.08); color: var(--cyan); }

/* Nav controls */
.nav-controls {
    position: relative;
    z-index: 1001;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.lang-switcher {
    position: relative;
    z-index: 1002;
}
.lang-btn {
    display: flex; align-items: center; gap: .4rem;
    padding: .4rem .8rem; border-radius: 6px;
    font-size: .85rem; font-weight: 500; color: var(--text);
    border: 1px solid var(--border);
    transition: all var(--t);
}
.lang-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.lang-dropdown {
    position: absolute; top: calc(100% + .4rem); right: 0;
    z-index: 1003;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 10px; box-shadow: var(--shadow);
    min-width: 120px; padding: .4rem;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: all var(--t);
}
.lang-switcher:hover .lang-dropdown,
.lang-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-dropdown a {
    display: block; padding: .5rem .9rem; border-radius: 6px;
    font-size: .85rem; color: var(--text);
    transition: all var(--t);
}
.lang-dropdown a:hover { background: rgba(0,174,219,.08); color: var(--cyan); }
.lang-dropdown a.active { color: var(--cyan); font-weight: 600; }

.theme-toggle {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); border: 1px solid var(--border);
    transition: all var(--t); font-size: 1rem;
}
.theme-toggle:hover { border-color: var(--cyan); color: var(--cyan); }

.nav-cta { margin-left: .5rem; }

/* Hamburger */
.hamburger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: all var(--t);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav overlay — backdrop to close menu on tap outside */
.nav-overlay {
    position: fixed; inset: 0; z-index: 998;
    background: rgba(0,0,0,.45);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    visibility: hidden; opacity: 0;
    transition: opacity .22s ease, visibility 0s linear .22s;
}
.nav-overlay.open {
    visibility: visible; opacity: 1;
    transition: opacity .22s ease;
}

/* =========================================
   RESPONSIVE — Mobile nav
   ========================================= */
@media (max-width: 768px) {
    .hamburger { display: flex; }
    .nav-cta { display: none; }
    .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; }

    /* Menu panel: visibility+opacity transition — no display toggle needed */
    .nav-menu {
        display: flex; flex-direction: column; align-items: stretch; gap: 0;
        position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0;
        background: var(--bg); padding: 1rem; overflow-y: auto; z-index: 999;
        visibility: hidden; opacity: 0; transform: translateY(-10px); pointer-events: none;
        transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
    }
    .nav-menu.open {
        visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
        transition: opacity .22s ease, transform .22s ease;
    }

    /* Nav links on mobile — no border-bottom artifacts */
    .nav-link {
        padding: .875rem 1rem; border-bottom: none; border-radius: 10px;
        font-size: 1rem; color: var(--text);
        display: flex; align-items: center; justify-content: space-between;
    }
    .nav-link:hover { background: rgba(0,174,219,.08); color: var(--cyan); }

    /* Dropdown: max-height animation instead of display toggle */
    .nav-dropdown {
        position: static; transform: none; box-shadow: none;
        border: none; background: transparent; border-radius: 0;
        margin: 0; padding: 0 0 .5rem .5rem;
        display: block; max-height: 0; overflow: hidden;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: max-height .26s ease, opacity .2s ease, visibility 0s linear .2s;
    }
    .nav-item.open .nav-dropdown {
        max-height: 600px; opacity: 1; visibility: visible; pointer-events: auto;
        transition: max-height .28s ease, opacity .22s ease;
    }
    .nav-dropdown a {
        padding: .6rem 1rem; border-radius: 8px; font-size: .9rem; display: block;
    }
    .nav-dropdown a:hover { background: rgba(0,174,219,.08); color: var(--cyan); }
}