/* * MODULE: HEADER STYLES
 * Description: Sticky logic, Components, Animations
 */

/* ==========================================================================
   2. HEADER STRUCTURE (CORE LAYOUT)
   ========================================================================== */

/* Wrapper chính bao bọc toàn bộ Header */
.site-header-wrapper {
    position: fixed !important; 
    top: 0;
    left: 0;
    z-index: 9999;              
    width: 100%;                
    background-color: #ffffff;  
    transition: all 0.3s ease-in-out; 
    padding: 0 !important;
    box-shadow: none; 
}

/* ==========================================================================
   3. HEADER COMPONENTS
   ========================================================================== */

/* --- Top Bar (Chứa SĐT, Social) --- */
.header-top-bar {
    width: 100%;
    max-height: 60px;           
    opacity: 1;                 
    overflow: hidden;           
    transform-origin: top;      
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid #f0f0f0; 
}

/* --- Main Bar (Chứa Logo, Menu) --- */
.header-main-bar {
    width: 100%;
    transition: padding 0.3s ease; 
}

/* --- Tagline (Dòng chữ bên cạnh Logo) --- */
.header-tagline {
    margin-left: 15px !important;
    padding-left: 15px;
    border-left: 1px solid #e0e0e0; 
    transition: opacity 0.3s ease;
}

/* ==========================================================================
   4. SCROLL ANIMATIONS (STATE: .is-scrolled)
   ========================================================================== */

/* Tạo bóng đổ nhẹ giúp tách biệt Header với nội dung */
.site-header-wrapper.is-scrolled {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Biến mất Top Bar: Thu chiều cao về 0 và làm mờ */
.site-header-wrapper.is-scrolled .header-top-bar {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    margin: 0 !important;
}

/* Thu gọn Main Bar: Giảm padding để Header thanh thoát hơn */
.site-header-wrapper.is-scrolled .header-main-bar {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Ẩn Tagline: Để dành không gian cho Menu khi Header nhỏ lại */
.site-header-wrapper.is-scrolled .header-tagline {
    opacity: 0;
    pointer-events: none;
}