/* ── Header transition CSS ───────────────────────────────────────────────
     Đặt ở đây để áp dụng ngay khi DOM parse, tránh FOUC
──────────────────────────────────────────────────────────────────────────── */
.floating-header-wrapper {
    /*
     * Dùng translate thay opacity/visibility để tránh layout shift.
     * GPU composite-only property → không trigger reflow → mượt nhất.
     * will-change khai báo trước để browser chuẩn bị layer sẵn.
     */
    transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1),
                opacity  0.42s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, opacity;
    transform: translateY(0);
    opacity: 1;
}

/* Trạng thái ẩn: trượt lên đúng bằng chiều cao của chính nó */
.floating-header-wrapper.is-hidden {
    transform: translateY(-110%);
    opacity: 0;
}

/* --- Header Theme Động --- */
body.header-theme-purple .header-left-box {
    background-color: var(--c-primary) !important;
}
body.header-theme-purple .header-left-box a,
body.header-theme-purple .header-left-box span,
body.header-theme-purple .header-left-box i,
body.header-theme-purple .header-left-box .text-accent {
    color: var(--c-white) !important;
}

/* Container Navigation Mới */
.header-nav-container {
    background-color: var(--c-white);
    padding: 4px;
    border-radius: var(--radius-md);
    transition: background-color 0.4s ease;
}

/* Ghi đè nav-item bên trong container để có hiệu ứng trượt */
.header-nav-container .nav-item {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

body.header-theme-purple .header-nav-container {
    background-color: var(--c-primary) !important;
}

body.header-theme-purple .nav-item {
    background-color: var(--c-primary) !important;
    color: var(--c-white) !important;
}
body.header-theme-purple .nav-item:hover {
    background-color: var(--c-white) !important;
    color: var(--c-primary) !important;
}

/* Đảm bảo hiệu ứng trượt ghi đè đúng trên theme tím */
body.header-theme-purple .header-nav-container .nav-item {
    background-color: transparent !important;
}
body.header-theme-purple .header-nav-container .nav-item::before {
    background-color: var(--c-white) !important;
}
body.header-theme-purple .header-nav-container .nav-item:hover {
    color: var(--c-primary) !important;
    background-color: transparent !important;
}

body.header-theme-purple .nav-item {
    background-color: var(--c-primary) !important;
    color: var(--c-white) !important;
}
body.header-theme-purple .nav-item:hover {
    background-color: var(--c-white) !important;
    color: var(--c-primary) !important;
}

/* Đảm bảo hiệu ứng trượt ghi đè đúng trên theme tím */
body.header-theme-purple .header-nav-container .nav-item {
    background-color: transparent !important;
}
body.header-theme-purple .header-nav-container .nav-item::before {
    background-color: var(--c-white) !important;
}
body.header-theme-purple .header-nav-container .nav-item:hover {
    color: var(--c-primary) !important;
    background-color: transparent !important;
}

/* Dropdown Dịch vụ (Giữ nguyên nền trắng cho menu con nếu muốn, hoặc đổi) */
body.header-theme-purple .group:hover .bg-white a {
    color: var(--c-primary) !important;
}