/* ===========================================
   General Nav Container
   =========================================== */
.my-custom-nav-container {
    position: relative;
    z-index: 100;
    width: 100%;
}

.my-custom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    max-width: var(--e-global-container-width, 1140px); 
    margin: 0 auto;
    padding: 0 10px;
}

/* ===========================================
   Branding
   =========================================== */
.my-custom-nav-branding {
    flex-shrink: 0;
    margin-right: 20px;
    padding: 10px 0;
}

.my-custom-nav-brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    gap: 12px;
}

.my-custom-nav-logo {
    max-height: 50px;
    width: auto;
    display: block;
}

.my-custom-nav-text-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.2;
}

.my-custom-nav-title {
    font-size: 1.2em;
    font-weight: bold;
}

.my-custom-nav-slogan {
    font-size: 0.85em;
    font-weight: normal;
    opacity: 0.8;
}

/* ===========================================
   Right Wrapper (Menu + Extras)
   =========================================== */
.my-custom-nav-right-wrapper {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-grow: 1;
    justify-content: flex-end;
}

/* ===========================================
   Main Menu
   =========================================== */
.my-custom-nav-ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.my-custom-nav-ul > li { margin: 0; position: relative; }
.my-custom-nav-ul > li:not(:last-child) { margin-right: 20px; }

.my-custom-nav-ul > li > a {
    text-decoration: none;
    display: block;
    padding: 10px 0;
    transition: all 0.3s ease;
}

/* ===========================================
   Extras (Social + Button)
   =========================================== */
.my-custom-nav-extras {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 10px;
}

.my-custom-nav-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.my-custom-nav-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.3s;
    font-size: 18px; 
}
.my-custom-nav-social-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}
.my-custom-nav-social-link:hover { opacity: 0.8; }

.my-custom-nav-button-link {
    display: inline-block;
    text-decoration: none;
    transition: all 0.3s;
    white-space: nowrap;
    
    /* Default Styles */
    background-color: #333; 
    color: #fff;
    padding: 10px 20px;
    border: 1px solid transparent; 
}

.my-custom-nav-button-link:hover {
    opacity: 0.9;
}

/* ===========================================
   Dropdown Menu (Desktop)
   =========================================== */
.my-custom-nav-ul ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 180px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 101;
    padding: 10px 0;
    border-radius: 4px;
    list-style: none;
}

.my-custom-nav-ul li:hover > ul { display: block; }
.my-custom-nav-ul ul li { display: block; margin: 0; }
.my-custom-nav-ul ul li a { padding: 8px 20px; color: inherit; display: block; }
.my-custom-nav-ul ul li a:hover { background-color: #f5f5f5; }

/* Arrow */
.my-custom-nav-ul li.menu-item-has-children > a:after {
    content: "";
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    margin-left: 6px;
    vertical-align: middle;
    position: relative; top: -1px;
    transition: transform .25s ease;
}
.my-custom-nav-ul li.menu-item-has-children:hover > a:after { transform: rotate(180deg); }

/* ===========================================
   Sticky Nav
   =========================================== */
.my-custom-nav-container.is-sticky {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    transition: all 0.3s ease;
    padding: 5px 0;
}

.my-custom-nav-container.is-sticky .my-custom-nav-inner {
    max-width: var(--e-global-container-width, 1140px);
    margin: 0 auto;
    padding: 0 10px;
}

body.my-sticky-nav-active {
    padding-top: var(--my-sticky-nav-height);
}

/* ===========================================
   Mobile Menu (Hamburger)
   =========================================== */
.my-custom-nav-toggle-wrapper { display: none; }
.my-custom-nav-toggle {
    background: none; border: none; font-size: 24px; cursor: pointer; padding: 0; color: inherit;
    /* เพิ่ม Z-index ให้ปุ่ม เพื่อให้กดได้แน่นอน */
    position: relative;
    z-index: 1001; 
}


/* ===========================================
   Mobile View Styles (Final Polish)
   =========================================== */

/* 1. จัด Layout Container: โลโก้ซ้าย - ปุ่มขวา */
.my-custom-nav-container.is-mobile-view .my-custom-nav-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1001;
}

/* 2. ตัวปุ่ม (Button Wrapper) */
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle-wrapper {
    display: block !important;
    margin-left: auto; /* ดันไปขวาสุด */
    order: 2;
    position: relative;
    z-index: 1002;
}

/* 3. สไตล์ปุ่มกด (กรอบ) */
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* พื้นหลังและขอบ */
    background-color: transparent; /* พื้นหลังใส (ดูสะอาดตา) */
    border: 1px solid #ddd; /* ขอบสีจางๆ */
    border-radius: 4px; /* มุมมนเล็กน้อย */
    
    padding: 0;
    width: 44px;  /* ความกว้างปุ่ม */
    height: 40px; /* ความสูงปุ่ม */
    cursor: pointer;
    transition: all 0.3s;
}

/* Effect เมื่อเอาเมาส์ชี้ */
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle:hover {
    background-color: #f9f9f9;
    border-color: #bbb;
}

/* 4. สร้างไอคอน 3 ขีด ด้วย CSS (คมกริบ) */
/* เส้นกลาง */
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle i {
    display: block;
    position: relative;
    width: 22px;      /* ความกว้างเส้น */
    height: 2px;      /* ความหนาเส้น */
    background-color: #333; /* สีดำเข้ม */
    transition: background-color 0.3s;
    
    /* ลบค่าเดิมที่อาจติดมา */
    font-size: 0 !important; 
    line-height: 0 !important;
}

/* เส้นบน และ เส้นล่าง */
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle i::before,
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle i::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;      /* ความหนาเส้น */
    background-color: #333; /* สีดำเข้ม */
    left: 0;
    transition: all 0.3s;
}

/* ตำแหน่งเส้นบน */
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle i::before {
    top: -7px; /* ระยะห่างเส้นบน */
}

/* ตำแหน่งเส้นล่าง */
.my-custom-nav-container.is-mobile-view .my-custom-nav-toggle i::after {
    top: 7px; /* ระยะห่างเส้นล่าง */
}

/* (Option) เปลี่ยนเป็นกากบาท (X) เมื่อเมนูเปิด */
.my-custom-nav-container.is-mobile-view.menu-open .my-custom-nav-toggle i {
    background-color: transparent; /* ซ่อนเส้นกลาง */
}
.my-custom-nav-container.is-mobile-view.menu-open .my-custom-nav-toggle i::before {
    top: 0;
    transform: rotate(45deg); /* หมุนเส้นบน */
}
.my-custom-nav-container.is-mobile-view.menu-open .my-custom-nav-toggle i::after {
    top: 0;
    transform: rotate(-45deg); /* หมุนเส้นล่าง */
}


/* 5. Wrapper เมนู (ซ่อนความสูง) */
.my-custom-nav-container.is-mobile-view .my-custom-nav-right-wrapper {
    display: block !important;
    width: 100%;
    height: 0;
    overflow: visible;
    order: 3;
    margin: 0;
    padding: 0;
    position: static;
}

/* ===========================================
   6. ส่วนแสดงผลรายการเมนู (Mobile Menu List) - Final Fix
   =========================================== */

/* กล่องเมนูหลักที่เลื่อนลงมา */
.my-custom-nav-container.is-mobile-view .my-custom-nav-ul {
    display: none; /* เริ่มต้นซ่อนไว้ (JS จะสั่ง slideDown) */
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 999;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    padding: 0;
    margin-top: 15px;
    border-radius: 4px;
    
    /* [แก้ไขสำคัญ] เอา overflow: hidden ออก เพื่อให้เมนูยืดขยายได้ */
    /* overflow: hidden;  <-- ลบบรรทัดนี้ออก */
    
    text-align: left;
    align-items: stretch;
}

/* รายการเมนูแต่ละบรรทัด */
.my-custom-nav-container.is-mobile-view .my-custom-nav-ul li {
    width: 100%;
    margin: 0;
    display: block;
    position: relative;
    border-bottom: 1px solid #f0f0f0;
}

/* ลิงก์เมนู */
.my-custom-nav-container.is-mobile-view .my-custom-nav-ul li a {
    padding: 15px 20px;
    display: block;
    width: 100%;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: background-color 0.2s;
    box-sizing: border-box; /* สำคัญ: รวม padding ในความกว้าง */
}

.my-custom-nav-container.is-mobile-view .my-custom-nav-ul li a:hover {
    background-color: #f9f9f9;
}

/* --- จัดการ Submenu (เมนูย่อย) --- */

/* [แก้ไขสำคัญ] ต้องมั่นใจว่า sub-menu ไม่ได้ถูกซ่อนด้วย !important จากที่อื่น */
.my-custom-nav-container.is-mobile-view .my-custom-nav-ul .sub-menu {
    background-color: #f7f7f7;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
    
    display: none; /* ซ่อนไว้เริ่มต้น JS จะใช้ slideToggle เพื่อเปิด */
    
    padding: 0;
    margin: 0;
    width: 100%;
    position: relative; /* ให้มันไหลต่อจากแม่ ไม่ใช่ลอยทับ */
    z-index: 1;
}

/* บังคับให้แสดงเมื่อ JS เติม style="display: block" */
/* (ปกติ jQuery slideToggle จะใส่ inline style ให้เอง) */

/* ย่อหน้าเมนูย่อย */
.my-custom-nav-container.is-mobile-view .my-custom-nav-ul .sub-menu li a {
    padding-left: 40px; 
    font-size: 15px;
    color: #555;
    border-bottom: 1px solid #e0e0e0;
}

/* --- ลูกศร (Arrow) --- */
.my-custom-nav-container.is-mobile-view .my-custom-nav-ul li.menu-item-has-children > a:after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 50%; /* 20px จากด้านบน (ปรับตามความสูงบรรทัด) */
    margin-top: -3px; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid #888;
    transition: transform 0.3s;
    pointer-events: none; /* [เพิ่ม] ให้คลิกทะลุไปโดน <a> ได้ง่ายขึ้น */
}

/* หมุนลูกศรเมื่อเปิด */
.my-custom-nav-container.is-mobile-view .my-custom-nav-ul li.menu-item-has-children.open > a:after {
    transform: rotate(180deg);
    border-top-color: #333;
}

/* ซ่อน Extras */
.my-custom-nav-container.is-mobile-view .my-custom-nav-extras {
    display: none !important;
}


/* ซ่อน Extras */
.my-custom-nav-container.is-mobile-view .my-custom-nav-extras {
    display: none !important;
}

/* ===========================================
   Custom Slide Widget Styles
   =========================================== */
.my-custom-swiper {
    width: 100%;
    position: relative;
    padding-bottom: 40px; 
    overflow: hidden; 
}

.my-custom-swiper .swiper-wrapper {
    display: flex;
}

.my-custom-swiper .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    flex-shrink: 0;
}

.my-custom-swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: 100%;
    border-radius: 8px;
}

.my-custom-swiper .swiper-button-next, 
.my-custom-swiper .swiper-button-prev {
    color: #333;
    z-index: 10;
}

.my-custom-swiper .swiper-pagination-bullet {
    width: 8px; height: 8px;
    background: #ccc; opacity: 1;
}
.my-custom-swiper .swiper-pagination-bullet-active {
    background: #333;
}






/* ===========================================
   Smart Box Widget Styles
   =========================================== */
   
   
   
   
/* ===========================================
   Smart Box Widget Styles (Cleaned)
   =========================================== */
.phayoune-smart-box {
    display: flex;
    width: 100%;
    /* flex-direction จะถูกกำหนดโดย Elementor Control ในหน้า Editor เอง */
}

/* --- Media Group --- */
.phayoune-sb-media-group {
    flex-shrink: 0; 
    /* Alignment จะถูกคุมด้วย Elementor Control */
}

.phayoune-sb-image img {
    display: block;
    max-width: 100%;
    height: auto;
}

.phayoune-sb-title {
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 10px;
}

.phayoune-sb-subtitle {
    font-size: 0.9em;
    color: #666;
    margin-top: 5px;
}

/* --- Content --- */
.phayoune-sb-content {
    flex-grow: 1;
}