/* มั่นใจว่า Navbar อยู่บนสุดเสมอ */
#mainNav {
    z-index: 1060 !important;
    background: #fff;
}

.menu-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    background-color: #ffffff;
    z-index: -9999; /* อยู่ใต้ Navbar เล็กน้อย */
    
    /* ตั้งค่าเริ่มต้นให้ซ่อนอยู่ด้านบน */
    top: 0;
    transform: translateY(-100%); 
    opacity: 0;
    visibility: hidden;
    
    /* Transition นุ่มๆ แบบในคลิป */
    transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1), 
                opacity 0.6s ease,
                visibility 0.8s;
    
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    overflow-y: auto;
    max-height: 100vh;
}

/* เมื่อเมนูเปิด (Active) */
.menu-overlay.open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;

    /* ขาลงอาจจะให้เร็วกว่าขาปิดเล็กน้อยเพื่อให้ดูตอบสนองไว (0.6s) */
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), 
                opacity 0.4s ease;
}

/* Transition สำหรับเนื้อหาด้านใน (ให้ค่อยๆ Fade ตามมา) */
.menu-overlay .container {
    opacity: 0;
    transform: translateY(-5px); 
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), 
                opacity 0.3s ease;
}

.menu-overlay.open .container {
    opacity: 1;
    transform: translateY(0);

    /* ใส่ delay เล็กน้อยเพื่อให้แผ่นเมนูเริ่มลงมาก่อน เนื้อหาค่อยๆ ตามมา */
    transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1) 0.2s, 
                opacity 0.6s ease 0.2s;
}