/* 
#extGallery4-y1 .photo {
    opacity: 1 !important;        
    filter: alpha(opacity=100);    
    transition: opacity 0.3s ease; 
}

#extGallery4-y1 .wrapper:hover .photo {
    opacity: 0.7 !important;     
}

#extGallery4-y1 .wrapper {
    height: auto !important;
}

#extGallery4-y1 .photo {
    height: auto !important;
    width: 100% !important;
    object-fit: contain;
} */
/* ตั้งค่าให้กล่องหุ้มเป็นจุดอ้างอิงสำหรับข้อความลอย */
/* ตั้งค่า Container หลัก */
#extGallery4-y1 .wrapper {
  position: relative;
  height: auto !important;
  /* สูงตามอัตราส่วนภาพ */
  background: #000;
  /* พื้นหลังสีดำช่วยให้ตอนภาพจางข้อความจะเด่นขึ้น */
  overflow: hidden;
}

/* ตั้งค่ารูปภาพ: เริ่มต้นชัด 100% */
#extGallery4-y1 .photo {
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  /* ปิดการเฟดเริ่มต้นของ Mobirise */
  transition: opacity 0.3s ease-in-out;
  display: block;
}

/* เมื่อเอาเมาส์วาง (Hover) ให้ภาพจางลง */
#extGallery4-y1 .wrapper:hover .photo {
  opacity: 0.5 !important;
}

/* เลเยอร์ข้อความ: ขาวชัด ไม่โปร่งแสง */
#extGallery4-y1 .mbr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  /* จัดกลางแนวตั้ง */
  justify-content: center;
  /* จัดกลางแนวนอน */
  text-align: center;
  padding: 1rem;
  pointer-events: none;
  /* ให้เมาส์คลิกทะลุไปที่รูปได้ */
  z-index: 10;
  background: transparent !important;
  /* มั่นใจว่าตัว overlay เองไม่ใส่ม่านสีทับข้อความ */
  opacity: 1 !important;
  /* ให้ container ของข้อความชัด 100% */
}

/* สไตล์ตัวอักษร: ใช้ฟอนต์หลักของเว็บ */
#extGallery4-y1 .overlay-text {
  color: #ffffff !important;
  opacity: 1 !important;
  /* ข้อความชัดเจน 100% ไม่จาง */
  line-height: 1.5;
  margin: 0;
  /* text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); */
  filter: none !important;
}

@media (max-width: 769px) {
  #extGallery4-y1 .overlay-text {
    /* ย่อขนาดฟอนต์ลง (ปรับตัวเลขตามความเหมาะสมที่ต้องการ) */
    font-size: 0.8rem !important;

    /* ลดระยะห่างระหว่างบรรทัดเพื่อให้ข้อความชิดกันขึ้น */
    line-height: 1.1 !important;

    /* ปรับระยะห่างรอบข้อความ */
    padding: 0 2px !important;

    /* ปรับเงาให้เล็กลงตามตัวอักษร */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  }

  #extGallery4-y1 .mbr-overlay {
    /* ลด padding ของกล่องครอบเพื่อให้มีพื้นที่แสดงตัวอักษรมากขึ้น */
    padding: 4px !important;
  }

  .mbr-text.display-7 {
    font-size: 0.9rem !important;
    /* ปรับขนาดฟอนต์ตามต้องการ เช่น 0.8rem หรือ 0.9rem */
    line-height: 1.4 !important;
    /* ปรับระยะห่างบรรทัดให้พอดี */
    padding-left: 10px !important;
    /* เพิ่มช่องไฟด้านข้างเล็กน้อยถ้าจำเป็น */
    padding-right: 10px !important;
  }

  /* ปรับหัวข้อ (H1) ให้เล็กลงด้วยเพื่อให้สมดุลกัน */
  .mbr-section-title.display-2 {
    font-size: 1.8rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
  }

  h1.mbr-section-title.display-2 {
    font-size: 1.5rem !important;
    /* ปรับขนาดตามต้องการ (เดิมมักจะใหญ่ประมาณ 3rem+) */
    line-height: 1.2 !important;
    /* ปรับระยะห่างระหว่างบรรทัดให้ชิดขึ้น */
    margin-top: 1.5rem !important;
    /* ลดระยะห่างด้านบน */
    margin-bottom: 1rem !important;
    /* ลดระยะห่างด้านล่าง */
  }
}