/* 1. Ẩn icon mặc định */
.elementor-menu-toggle__icon--open,
.elementor-menu-toggle__icon--close,
.elementor-menu-toggle i,
.elementor-menu-toggle svg {
    display: none !important;
}

/* 2. Cấu hình khung nút 24x24 */
.elementor-menu-toggle {
    position: relative;
    display: block;
    width: 24px;            /* Rộng 24px */
    height: 24px;           /* Cao 24px */
    padding: 0 !important;
    cursor: pointer;
    border: none !important; /* Bỏ viền */
    background-color: transparent !important;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* 3. Cấu hình chung cho các đường kẻ (giữ độ dày 3px) */
.elementor-menu-toggle:before,
.elementor-menu-toggle:after {
    content: '';
    position: absolute;
    height: 3px;            /* Độ dày 3px */
    border-radius: 3px;
    background-color: var(--e-global-color-neutral_900, #000);
    left: 50%;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), top 0.4s ease, width 0.4s ease, box-shadow 0.2s ease, margin-left 0.4s ease;
}

/* 4. Thanh Trên cùng (Before) & Thanh Giữa (Shadow) */
.elementor-menu-toggle:before {
    top: 2.5px;
    width: 24px;
    margin-left: -12px;
    
    /* Tạo thanh giữa bằng shadow, cách thanh trên 8px */
    box-shadow: 0 8px 0 0 var(--e-global-color-neutral_900, #000); 
}

/* 5. Thanh Dưới cùng (After) - NGẮN HƠN */
.elementor-menu-toggle:after {
    top: 18.5px;
    width: 16px;
    margin-left: -12px;      
}

/* 6. Trạng thái Active (Thành dấu X cân đối) */
.elementor-menu-toggle.elementor-active:before {
    top: 50%;
    margin-top: -1.5px;
    width: 24px;            /* Khi active thì về full width để tạo X đẹp */
    margin-left: -12px;
    box-shadow: 0 0 0 0 transparent;
    transform: rotate(45deg);
}

.elementor-menu-toggle.elementor-active:after {
    top: 50%;
    margin-top: -1.5px;
    width: 24px;            /* Khi active thì về full width */
    margin-left: -12px;
    transform: rotate(-45deg);
}

/* === STATE: Header khi menu mở === */
#tnd-header.menu-opened {
    background-color: rgba(255, 255, 255, 1) !important; /* Full trắng */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: background-color 0s ease, backdrop-filter 0s ease;
}

/* Thêm transition cho trạng thái ban đầu */
#tnd-header {
    transition: background-color 0s ease, backdrop-filter 0s ease;
}

.tnd-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown {
	margin-top: 17px;
    height: 100vh;
	background-color: #fff !important;
}

.tnd-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    transition: none !important;
}

.tnd-menu .elementor-nav-menu--toggle .elementor-menu-toggle:not(.elementor-active) + .elementor-nav-menu__container {
    display: none !important;
}

.tnd-menu .elementor-nav-menu--toggle .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container {
    display: block !important;
    max-height: none !important;
    transform: none !important;
}