/* ========== HEADER — Cố định, scroll đổi style, nav hover gạch chân ========== */

#site-header { background: rgba(255, 255, 255, 0.06); border-bottom: 1px solid transparent; } #site-header.scrolled { border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); }

/* Desktop nav link */
.nav-link-24h {
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.25s ease;
}

/* Nav màu gần trắng ở theme tối */
html[data-theme="dark"] .nav-link-24h {
    color: #f9fafb;
}

.nav-link-24h:hover {
    color: rgb(39, 240, 255);
}



.nav-link-line {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, rgb(39, 240, 255), rgba(39, 240, 255, 0.6));
    border-radius: 2px;
    transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-link-24h:hover .nav-link-line {
    width: 100%;
}

/* CTA nút Liên Hệ (header) */
#site-header a[href="#contact"].rounded-full {
    transition: transform 0.25s ease, box-shadow 0.3s ease;
}

#site-header a[href="#contact"].rounded-full:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 36px rgba(11, 102, 108, 0.5);
}

/* Mobile menu */
#mobile-nav a:not(.rounded-full) {
    transition: color 0.2s ease, padding-left 0.2s ease;
}

#mobile-nav a:not(.rounded-full):hover {
    color: rgb(39, 240, 255);
    padding-left: 0.5rem;
}

#nav-toggle:focus {
    outline: 2px solid rgba(39, 240, 255, 0.4);
    outline-offset: 2px;
}

/* Logo sáng, không viền/spotlight */
/*.logo-spotlight {*/
/*    background: radial-gradient(*/
/*        circle at 50% 50%,*/
/*        rgba(255, 255, 255, 0.92) 0%,*/
/*        rgba(255, 255, 255, 0.55) 42%,*/
/*        transparent 90%*/
/*    );*/
/*}*/

/*.logo-spotlight {*/
/*    position: relative;*/
/*    border-radius: 999px;*/
/*    overflow: hidden;*/

/*    background: radial-gradient(*/
/*        circle at 50% 50%,*/
/*        rgba(255, 255, 255, 0.92) 0%,*/
/*        rgba(255, 255, 255, 0.55) 42%,*/
/*        transparent 90%*/
/*    );*/

/*    backdrop-filter: blur(10px);*/
/*    -webkit-backdrop-filter: blur(10px);*/
/*}*/

/*.logo-spotlight::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    inset: -35%;*/
/*    border-radius: 999px;*/

/*    background:*/
/*        radial-gradient(*/
/*            circle at 50% 0%,*/
/*            rgba(255, 255, 255, 0.68) 0%,*/
/*            transparent 58%*/
/*        ),*/
/*        radial-gradient(*/
/*            circle at 0% 0%,*/
/*            rgba(148, 163, 184, 0.18) 0%,*/
/*            transparent 52%*/
/*        );*/

/*    filter: blur(18px);*/
/*    opacity: 1;*/
/*    pointer-events: none;*/
/*}*/

/* Theme sáng: header và mobile nav trên nền trắng */
html[data-theme="light"] #site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    border-bottom-color: rgba(148, 163, 184, 0.18);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] #mobile-nav {
    background: rgba(255, 255, 255, 0.96);
    border-top-color: rgba(148, 163, 184, 0.18);
}
html[data-theme="light"] #mobile-nav a:not(.rounded-full) {
    color: var(--color-text-main, #0f172a);
}
html[data-theme="light"] .nav-link-24h {
    color: var(--color-text-main, #0f172a);
}
html[data-theme="light"] .nav-link-24h:hover {
    color: var(--color-primary-hover, #1d4ed8);
}