/* Start custom CSS for wp-widget-nav_menu, class: .elementor-element-a4b4f90 */https://wellwishes.royaloffice.th/    .....ถวายพระพร
..........................................................................
สีไม่จาง
..........................................................................

/* เอาเงาสีมืดที่บังรูปออกทั้งหมด */
.elementor-2606 .elementor-element.elementor-element-a4b4f90 .elementor-post__thumbnail__link::after,
.elementor-2606 .elementor-element.elementor-element-a4b4f90 .elementor-post__thumbnail::after,
.elementor-2606 .elementor-element.elementor-element-a4b4f90 .elementor-post__card-data {
    background: none !important;
    opacity: 0 !important;
}

/* ปรับความคมชัดและสว่างของรูป */
.elementor-2606 .elementor-element.elementor-element-a4b4f90 img {
    filter: none !important;
    opacity: 1 !important;
    object-fit: contain !important;
}
..........................................................................


เมนู หน้าย่อย
/* =========================================
   1. จัดกลุ่มกล่องให้อยู่กึ่งกลางหน้า
========================================= */
.elementor-2606 .elementor-element.elementor-element-a4b4f90 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important; 
    
    /* ใช้ Flexbox ดันกล่องทั้งหมดให้อยู่ตรงกลางคอลัมน์ */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    width: 100% !important;
}

.elementor-2606 .elementor-element.elementor-element-a4b4f90 li::marker,
.elementor-2606 .elementor-element.elementor-element-a4b4f90 li::before {
    display: none !important;
    content: "" !important;
}

/* =========================================
   2. ดีไซน์กล่องเมนู (ตัวหนังสือชิดซ้าย)
========================================= */
.elementor-2606 .elementor-element.elementor-element-a4b4f90 li {
    margin-bottom: 10px !important; 
    width: 100% !important;
    /* จำกัดความกว้างของกล่องให้เท่ากันทุกข้อ (ปรับลด-เพิ่มตัวเลข 350px นี้ได้ครับ) */
    max-width: 350px !important; 
}

.elementor-2606 .elementor-element.elementor-element-a4b4f90 li > a {
    display: block !important;
    padding: 14px 25px !important; 
    text-align: left !important; /* ⭐ บังคับตัวหนังสือให้ชิดซ้าย */
    
    /* สีสัน */
    background-color: #f0f8ff !important; 
    color: #0b598b !important; 
    font-size: 16px !important;
    font-weight: bold !important; 
    text-decoration: none !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-2606 .elementor-element.elementor-element-a4b4f90 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: 32px !important; 
}



.....................................................................
เมนูเกิน 5 รายการ
....................................................................

/* =========================================
   1. จัดกลุ่มเป็น 2 คอลัมน์ด้วย Grid
========================================= */
.elementor-2606 .elementor-element.elementor-element-a4b4f90 ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important; 
    
    /* ใช้ CSS Grid เพื่อแบ่ง 2 คอลัมน์ */
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* แบ่ง 2 คอลัมน์ขนาดเท่ากัน (1fr 1fr) */
    gap: 12px 20px !important; /* ระยะห่าง: บน-ล่าง 12px, ซ้าย-ขวา 20px */
    
    width: 100% !important;
    max-width: 750px !important; /* ขยายความกว้างกล่องใหญ่เพื่อให้พอสำหรับ 2 คอลัมน์ */
}

.elementor-2606 .elementor-element.elementor-element-a4b4f90 li::marker,
.elementor-2606 .elementor-element.elementor-element-a4b4f90 li::before {
    display: none !important;
    content: "" !important;
}

/* =========================================
   2. ดีไซน์กล่องเมนู (ตัวหนังสือชิดซ้าย)
========================================= */
.elementor-2606 .elementor-element.elementor-element-a4b4f90 li {
    margin: 0 !important; /* เอา margin ออกเพราะใช้ gap จัดระยะห่างแล้ว */
    width: 100% !important;
}

.elementor-2606 .elementor-element.elementor-element-a4b4f90 li > a {
    display: block !important;
    height: 100% !important; /* บังคับให้กล่องสูงเท่ากัน กรณีที่ข้อความบางข้อแอบยาวกว่า */
    box-sizing: border-box !important;
    padding: 14px 20px !important; 
    text-align: left !important; /* บังคับตัวหนังสือให้ชิดซ้าย */
    
    /* สีสัน */
    background-color: #f0f8ff !important; 
    color: #0b598b !important; 
    font-size: 16px !important;
    font-weight: bold !important; 
    text-decoration: none !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-2606 .elementor-element.elementor-element-a4b4f90 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: 28px !important; 
}

/* =========================================
   4. ตั้งค่าสำหรับจอมือถือ (Responsive)
========================================= 
*/
/* ถ้าหน้าจอเล็กกว่า 768px (แท็บเล็ต/มือถือ) ให้กลับมาแสดงแค่ 1 คอลัมน์ */
@media (max-width: 768px) {
    .elementor-2606 .elementor-element.elementor-element-a4b4f90 ul {
        grid-template-columns: 1fr !important; /* สั่งให้เหลือคอลัมน์เดียว */
        max-width: 400px !important; /* ลดความกว้างลง */
    }
}


.....................................................................
เมนูเกิน 3 คอลัม
....................................................................
/* =========================================
   1. จัดกลุ่มเป็น 3 คอลัมน์ด้วย Grid
========================================= */
.elementor-2606 .elementor-element.elementor-element-a4b4f90 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-2606 .elementor-element.elementor-element-a4b4f90 li::marker,
.elementor-2606 .elementor-element.elementor-element-a4b4f90 li::before {
    display: none !important;
    content: "" !important;
}

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

.elementor-2606 .elementor-element.elementor-element-a4b4f90 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-2606 .elementor-element.elementor-element-a4b4f90 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-2606 .elementor-element.elementor-element-a4b4f90 ul {
        grid-template-columns: repeat(2, 1fr) !important; 
        max-width: 750px !important; 
    }
}

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