.elementor-1408 .elementor-element.elementor-element-6877fd0{width:var( --container-widget-width, 104.554% );max-width:104.554%;--container-widget-width:104.554%;--container-widget-flex-grow:0;}.elementor-1408 .elementor-element.elementor-element-6877fd0.elementor-element{--flex-grow:0;--flex-shrink:0;}/* Start custom CSS for wp-widget-nav_menu, class: .elementor-element-6877fd0 *//* =========================================
   1. จัดกลุ่มเป็น 3 คอลัมน์ด้วย Grid
========================================= */
.elementor-1408 .elementor-element.elementor-element-6877fd0 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important; 
    
    /* ใช้ CSS Grid เพื่อแบ่ง 3 คอลัมน์ */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* ⭐ แบ่ง 3 คอลัมน์ขนาดเท่ากัน */
    gap: 12px 15px !important; /* ระยะห่าง บน-ล่าง 12px, ซ้าย-ขวา 15px */
    
    width: 100% !important;
    max-width: 1000px !important; /* ⭐ ขยายความกว้างสูงสุดเพื่อให้พอสำหรับ 3 คอลัมน์ */
}

.elementor-1408 .elementor-element.elementor-element-6877fd0 li::marker,
.elementor-1408 .elementor-element.elementor-element-6877fd0 li::before {
    display: none !important;
    content: "" !important;
}

/* =========================================
   2. ดีไซน์กล่องเมนู (รองรับกรณีข้อความยาว)
========================================= */
.elementor-1408 .elementor-element.elementor-element-6877fd0 li {
    margin: 0 !important; 
    width: 100% !important;
}

.elementor-1408 .elementor-element.elementor-element-6877fd0 li > a {
    display: flex !important;
    align-items: center !important; /* จัดข้อความให้อยู่กึ่งกลางแนวตั้ง กรณีบางกล่องมี 2 บรรทัด */
    height: 100% !important; 
    box-sizing: border-box !important;
    padding: 12px 18px !important; 
    text-align: left !important; 
    
    /* สีสัน */
    background-color: #f0f8ff !important; 
    color: #0b598b !important; 
    font-size: 15px !important; /* ปรับฟอนต์ลงนิดนึงเพื่อให้พอดีกับกล่องที่แคบลง */
    font-weight: bold !important; 
    text-decoration: none !important;
    line-height: 1.4 !important;
    
    /* กรอบและเงา */
    border-radius: 8px !important; 
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05) !important; 
    border: 1px solid #dcecf8 !important; 
    
    transition: all 0.3s ease !important; 
}

/* =========================================
   3. เอฟเฟกต์เวลาเอาเมาส์ไปชี้ (Hover)
========================================= */
.elementor-1408 .elementor-element.elementor-element-6877fd0 li > a:hover {
    background-color: #1a82c4 !important; 
    color: #ffffff !important; 
    
    /* เอฟเฟกต์ลอยขึ้น */
    transform: translateY(-4px) !important; 
    box-shadow: 0 8px 15px rgba(26, 130, 196, 0.25) !important; 
    
    /* เลื่อนตัวหนังสือไปทางขวานิดนึง (ปรับลดระยะลงมาเพื่อไม่ให้ข้อความชนขอบขวา) */
    padding-left: 24px !important; 
}

/* =========================================
   4. ตั้งค่าสำหรับจอมือถือและแท็บเล็ต (Responsive)
========================================= */
/* สำหรับแท็บเล็ต (หน้าจอเล็กกว่า 1024px) -> ปรับลดเหลือ 2 คอลัมน์ */
@media (max-width: 1024px) {
    .elementor-1408 .elementor-element.elementor-element-6877fd0 ul {
        grid-template-columns: repeat(2, 1fr) !important; 
        max-width: 750px !important; 
    }
}

/* สำหรับมือถือ (หน้าจอเล็กกว่า 768px) -> ปรับลดเหลือ 1 คอลัมน์ */
@media (max-width: 768px) {
    .elementor-1408 .elementor-element.elementor-element-6877fd0 ul {
        grid-template-columns: 1fr !important; 
        max-width: 400px !important; 
    }
}/* End custom CSS */