/* Mobile Menu Styles */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    /* background: #000; */
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    padding-top: 80px;
    /* ค่าเริ่มต้น จะถูก override ด้วย JavaScript */
}

.mobile-menu.active {
    transform: translateY(0);
}

.mobile-menu-container {
    background: #000;
    /* ค่าเริ่มต้น */
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
}

/* พื้นหลังเมนูตามสีหน้า - เพิ่ม !important เพื่อให้แน่ใจ */
.mobile-menu-container.dark-theme {
    background: #000 !important;
}


body.dark-mode .mobile-menu-container.light-theme {
    background: #000000 !important;
}

.mobile-menu-container.light-theme {
    background: #fff !important;
}

.mobile-menu-header {
    display: none;
    /* ซ่อน header */
}

.mobile-menu-title {
    display: none;
    /* ซ่อนชื่อเมนู */
}

.mobile-menu-close {
    display: none;
    /* ซ่อนปุ่มปิด */
}

.mobile-menu-back {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 25px;
    text-decoration: none;
    color: #fff;
    /* ค่าเริ่มต้น */
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #333;
    /* ค่าเริ่มต้น */
    cursor: pointer;
    width: 100%;
    margin: 0;
    border-radius: 0;
}

/* สีข้อความตามธีม - เพิ่ม !important */
.mobile-menu-container.dark-theme .mobile-menu-back {
    color: #fff !important;
    border-bottom: 1px solid #333 !important;
}

.mobile-menu-container.light-theme .mobile-menu-back {
    color: #000 !important;
    border-bottom: 1px solid #ddd !important;
}

.mobile-menu-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-container.dark-theme .mobile-menu-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.mobile-menu-container.light-theme .mobile-menu-back:hover {
    background: rgba(0, 0, 0, 0.1);
}

.mobile-menu-content {
    height: 100%;
    overflow-y: auto;
    position: relative;
    padding-top: 20px;
    /* เพิ่ม padding ด้านบน */
}

.menu-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: transparent;
    /* จะถูกกำหนดโดย parent container */
    transform: translateX(0);
    transition: transform 0.3s ease-in-out;
}

.menu-level.slide-left {
    transform: translateX(-100%);
}

.menu-level.slide-right {
    transform: translateX(100%);
}

.mobile-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-menu li {
    border-bottom: 1px solid transparent;
    /* ค่าเริ่มต้น */
}

/* สีขอบตามธีม - เพิ่ม !important */
.mobile-menu-container.dark-theme .mobile-menu li {
    border-bottom: 1px solid #333 !important;
}

.mobile-menu-container.light-theme .mobile-menu li {
    border-bottom: 1px solid #ddd !important;
}

.mobile-menu a,
.mobile-menu .mobile-menu-link {
    display: flex;
    justify-content: center;
    /* จัดกลาง */
    align-items: center;
    padding: 20px 25px;
    text-decoration: none;
    color: #fff;
    /* ค่าเริ่มต้น */
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    /* เพิ่มเพื่อจัดตำแหน่งลูกศร */
}

/* สีข้อความเมนูตามธีม - เพิ่ม specificity สูงสุด */
.mobile-menu-container.dark-theme .mobile-menu a,
.mobile-menu-container.dark-theme .mobile-menu .mobile-menu-link,
.mobile-menu-container.dark-theme .mobile-menu-back,
.mobile-menu-container.dark-theme .mobile-menu li a,
.mobile-menu-container.dark-theme .mobile-menu ul li a {
    color: #fff !important;
}

.mobile-menu-container.light-theme .mobile-menu a,
.mobile-menu-container.light-theme .mobile-menu .mobile-menu-link,
.mobile-menu-container.light-theme .mobile-menu-back,
.mobile-menu-container.light-theme .mobile-menu li a,
.mobile-menu-container.light-theme .mobile-menu ul li a,
.mobile-menu-container.light-theme ul.mobile-nav-menu li a {
    color: #000 !important;
}

/* เพิ่ม CSS สำหรับ override ทุกกรณี รวม submenu */
#mobileMenu .mobile-menu-container.light-theme a,
#mobileMenu .mobile-menu-container.light-theme .mobile-menu-link,
#mobileMenu .mobile-menu-container.light-theme .mobile-menu-back-link,
div.mobile-menu-container.light-theme .mobile-menu a,
div.mobile-menu-container.light-theme .mobile-menu .mobile-menu-link,
div.mobile-menu-container.light-theme .mobile-menu .mobile-menu-back-link,
.mobile-menu-container.light-theme .menu-level a,
.mobile-menu-container.light-theme .menu-level .mobile-menu-link,
.mobile-menu-container.light-theme .menu-level .mobile-menu-back-link {
    color: #000 !important;
}

body.dark-mode #mobileMenu .mobile-menu-container.light-theme a,
body.dark-mode #mobileMenu .mobile-menu-container.light-theme .mobile-menu-link,
body.dark-mode #mobileMenu .mobile-menu-container.light-theme .mobile-menu-back-link,
body.dark-mode div.mobile-menu-container.light-theme .mobile-menu a,
body.dark-mode div.mobile-menu-container.light-theme .mobile-menu .mobile-menu-link,
body.dark-mode div.mobile-menu-container.light-theme .mobile-menu .mobile-menu-back-link,
body.dark-mode .mobile-menu-container.light-theme .menu-level a,
body.dark-mode .mobile-menu-container.light-theme .menu-level .mobile-menu-link,
body.dark-mode .mobile-menu-container.light-theme .menu-level .mobile-menu-back-link {
    color: #ffffff !important;
}

/* สำหรับ dark theme ด้วย */
#mobileMenu .mobile-menu-container.dark-theme a,
#mobileMenu .mobile-menu-container.dark-theme .mobile-menu-link,
#mobileMenu .mobile-menu-container.dark-theme .mobile-menu-back-link,
div.mobile-menu-container.dark-theme .mobile-menu a,
div.mobile-menu-container.dark-theme .mobile-menu .mobile-menu-link,
div.mobile-menu-container.dark-theme .mobile-menu .mobile-menu-back-link,
.mobile-menu-container.dark-theme .menu-level a,
.mobile-menu-container.dark-theme .menu-level .mobile-menu-link,
.mobile-menu-container.dark-theme .menu-level .mobile-menu-back-link {
    color: #fff !important;
}

/* ปุ่มกลับให้ข้อความอยู่กลาง แต่ลูกศรชิดซ้าย */
.mobile-menu .mobile-menu-back-link {
    justify-content: center;
    /* ข้อความอยู่กลาง */
    text-align: center;
    padding-left: 25px;
    /* เพิ่ม padding ซ้ายให้พอกับลูกศร */
    padding-right: 25px;
    /* รักษา padding ขวาเดิม */
    position: relative;
}

/* ซ่อนลูกศรขวาสำหรับปุ่ม Back */
.mobile-menu .mobile-menu-back-link .menu-arrow {
    display: none !important;
}

/* ลูกศรซ้ายสำหรับปุ่ม Back */
.menu-arrow-left {
    font-size: 16px;
    font-weight: bold;
    margin-right: 15px;
    position: absolute;
    left: 25px;
    color: #fff;
    /* ค่าเริ่มต้น */
}

/* สีลูกศรซ้ายตามธีม */
.mobile-menu-container.dark-theme .menu-arrow-left {
    color: #fff !important;
}

.mobile-menu-container.light-theme .menu-arrow-left {
    color: #000 !important;
}

body.dark-mode .mobile-menu-container.light-theme .menu-arrow-left {
    color: #fff !important;
}

.mobile-menu a:hover,
.mobile-menu .mobile-menu-link:hover {
    background: rgba(255, 255, 255, 0.1);
    /* ค่าเริ่มต้น */
}

/* สี hover ตามธีม - เพิ่ม !important */
.mobile-menu-container.dark-theme .mobile-menu a:hover,
.mobile-menu-container.dark-theme .mobile-menu .mobile-menu-link:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.mobile-menu-container.light-theme .mobile-menu a:hover,
.mobile-menu-container.light-theme .mobile-menu .mobile-menu-link:hover {
    background: rgba(0, 0, 0, 0.1) !important;
}

.menu-arrow {
    font-size: 14px;
    color: #fff;
    /* ค่าเริ่มต้น */
    position: absolute;
    right: 25px;
    /* วางลูกศรด้านขวา */
}

/* สีลูกศรตามธีม - เพิ่ม !important และครอบคลุม submenu */
.mobile-menu-container.dark-theme .menu-arrow,
.mobile-menu-container.dark-theme .menu-level .menu-arrow {
    color: #fff !important;
}

.mobile-menu-container.light-theme .menu-arrow,
.mobile-menu-container.light-theme .menu-level .menu-arrow {
    color: #000 !important;
}
body.dark-mode .mobile-menu-container.light-theme .menu-arrow,
body.dark-mode  .mobile-menu-container.light-theme .menu-level .menu-arrow {
    color: #ffffff !important;
}

/* ลบสไตล์ HFE ที่ไม่ต้องการ */
.mobile-nav-menu {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.mobile-nav-menu li {
    background: none !important;
    margin: 0 !important;
}

/* ทำให้ HFE container มี position relative เพื่อวางปุ่ม hamburger */
.hfe-nav-menu,
.elementor-widget-container {
    position: relative !important;
}

.hamburger-menu {
    display: none;
    flex-direction: column;
    cursor: pointer;
    padding: 12px;
    background: transparent;
    /* ทำให้โปร่งใสเพื่อให้เห็นพื้นหลัง */
    border-radius: 6px;
    z-index: 1000;
    position: absolute;
    left: 15px;
    /* วางซ้ายของบาร์ */
    top: 63%;
    transform: translateY(-50%);
    /* จัดกึ่งกลางแนวตั้ง */
    backdrop-filter: blur(5px);
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    margin: 3px 0;
    transition: 0.3s;
    display: block;
    border-radius: 1px;
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Responsive */
@media (max-width: 768px) {
    .mobile-menu {
        display: block;
    }

    .hamburger-menu {
        display: flex;
    }

    /* ซ่อนเมนูเดิมในมือถือ */
    .desktop-menu,
    .hfe-nav-menu__layout-horizontal {
        display: none !important;
    }

    /* ซ่อน HFE toggle button ในมือถือ */
    .hfe-nav-menu__toggle {
        display: none !important;
    }

    /* แสดงปุ่ม hamburger แทน */
    .hamburger-menu {
        position: absolute;
        z-index: 10;
    }
}

/* Alternative styles for different backgrounds */
/* เมื่อพื้นหลังเป็นสีดำ - ปุ่มเป็นสีขาว */
.elementor-element[data-settings*="background_background"] .hamburger-menu,
.elementor-element-2a4d181 .hamburger-menu,
.elementor-element[data-id="2a4d181"] .hamburger-menu,
.dark-background .hamburger-menu,
[style*="background-color: #000"] .hamburger-menu,
[style*="background-color: rgb(0, 0, 0)"] .hamburger-menu,
[style*="background: #000"] .hamburger-menu,
[style*="background: rgb(0, 0, 0)"] .hamburger-menu {
    /* background: rgba(27, 27, 27, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
}

.elementor-element[data-settings*="background_background"] .hamburger-menu span,
.elementor-element-2a4d181 .hamburger-menu span,
.elementor-element[data-id="2a4d181"] .hamburger-menu span,
.dark-background .hamburger-menu span,
[style*="background-color: #000"] .hamburger-menu span,
[style*="background-color: rgb(0, 0, 0)"] .hamburger-menu span,
[style*="background: #000"] .hamburger-menu span,
[style*="background: rgb(0, 0, 0)"] .hamburger-menu span {
    /* background: #fff; */
    /* box-shadow: 0 1px 3px rgba(0,0,0,0.3); */
}

/* เมื่อพื้นหลังเป็นสีขาว - ปุ่มเป็นสีดำ */
.light-background .hamburger-menu,
[style*="background-color: #fff"] .hamburger-menu,
[style*="background-color: rgb(255, 255, 255)"] .hamburger-menu,
[style*="background: #fff"] .hamburger-menu,
[style*="background: rgb(255, 255, 255)"] .hamburger-menu {
    /* background: rgba(0, 0, 0, 0.1); */
    /* border: 1px solid rgba(0, 0, 0, 0.3); */
}

.light-background .hamburger-menu span,
[style*="background-color: #fff"] .hamburger-menu span,
[style*="background-color: rgb(255, 255, 255)"] .hamburger-menu span,
[style*="background: #fff"] .hamburger-menu span,
[style*="background: rgb(255, 255, 255)"] .hamburger-menu span {
    /* background: #333; */
    /* box-shadow: 0 1px 3px rgba(255,255,255,0.3); */
}

/* สำหรับ container ที่มี class เฉพาะ */
.sp-main-menu .hamburger-menu {
    /* background: rgba(255, 255, 255, 0.1); */
    /* border: 1px solid rgba(255, 255, 255, 0.3); */
}

.sp-main-menu .hamburger-menu span {
    /* background: #fff; */
}

/* CSS classes สำหรับ JavaScript control */
.hamburger-menu.on-dark-bg {
    /* background: rgba(255, 255, 255, 0.1) !important; */
}

.hamburger-menu.on-dark-bg span {
    background-color: #ffffff !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

.hamburger-menu.on-light-bg {
    /* background: rgba(0, 0, 0, 0.1) !important; */
}

.hamburger-menu.on-light-bg span {
    background-color: #000000 !important;
    color: #000000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* เพิ่ม specificity สูงสุดเพื่อให้แน่ใจ */
.elementor-element .hamburger-menu.on-dark-bg span,
.hamburger-menu.on-dark-bg span,
header .hamburger-menu.on-dark-bg span {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

body.dark-mode .elementor-element .hamburger-menu.on-light-bg span,
.hamburger-menu.on-light-bg span,
header .hamburger-menu.on-light-bg span {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.elementor-element .hamburger-menu.on-light-bg span,
.hamburger-menu.on-light-bg span,
header .hamburger-menu.on-light-bg span {
    background: #000000 !important;
    background-color: #000000 !important;
}

@media (min-width: 769px) {
    .mobile-menu {
        display: none !important;
    }

    .hamburger-menu {
        display: none !important;
    }
}