/* --- SMART STICKY HEADER --- */
#tnd-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999; /* Đảm bảo đè lên các thành phần khác */
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s ease, backdrop-filter 0.25s ease !important; /* Animation mượt chuẩn Material Design */
    will-change: transform; /* Bật GPU Acceleration */
    
    /* Khắc phục lỗi rung lắc trên 1 số trình duyệt */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Tự động bù khoảng cách padding-top cho body bằng đúng chiều cao header để nội dung bên dưới không bị đè lên */
body:has(#tnd-header),
body.has-tnd-header {
    padding-top: var(--tnd-header-height, 80px) !important;
}

/* Trường hợp header trong suốt đè lên banner (tùy chọn) */
body:has(#tnd-header.tnd-header-transparent),
body.has-transparent-header {
    padding-top: 0 !important;
}

/* Tương thích với thanh công cụ WordPress Admin Bar khi đăng nhập */
.admin-bar #tnd-header {
    top: 32px;
}
.admin-bar:has(#tnd-header),
.admin-bar.has-tnd-header {
    padding-top: calc(var(--tnd-header-height, 80px) + 32px) !important;
}

@media screen and (max-width: 782px) {
    .admin-bar #tnd-header {
        top: 46px;
    }
    .admin-bar:has(#tnd-header),
    .admin-bar.has-tnd-header {
        padding-top: calc(var(--tnd-header-height, 80px) + 46px) !important;
    }
}

/* Class ẩn header */
#tnd-header.tnd-header-hidden {
    transform: translateY(-100%) !important;
}

/* Class trong suốt (nếu cần lúc ở đỉnh trang) - Optional */
#tnd-header.tnd-header-transparent {
    background-color: transparent;
    box-shadow: none;
}

/* Vô hiệu hóa Sticky khi đang trong trình chỉnh sửa Elementor để không cản trở thao tác kéo thả và chọn vùng */
.elementor-editor-active #tnd-header,
.elementor-editor-preview #tnd-header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    z-index: auto !important;
}

body.elementor-editor-active,
body.elementor-editor-preview,
body.elementor-editor-active:has(#tnd-header),
body.elementor-editor-preview:has(#tnd-header) {
    padding-top: 0 !important;
}