body {
  background-color: #000000;
  /* padding-top: 96px; */
}

/* @media (max-width: 991px) {
            body {
                padding-top: 80px;
            }
        } */

html {
  scroll-behavior: auto;
}

// ---------------------------------language switcher ---------------------------------
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 10px;
}

.lang-flag {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.lang-flag {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-block;
}

.lang-flag img {
  display: block;
  width: 20px;
  height: 20px;
  max-width: none;
  flex: 0 0 auto;
  border-radius: 50px;
  object-fit: cover;
  transition:
    transform 0.2s,
    filter 0.2s;
  cursor: pointer;
}

.lang-flag img:hover {
  transform: scale(1.1);
  filter: brightness(1.1);
}

.lang-switcher .separator {
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  line-height: 1;
}

.widget-icon.fa-language {
  display: none;
}

@media (max-width: 1025px) {
  .lang-flag img {
    display: block;
    width: 50px;
    height: 50px !important;
    max-width: none;
    flex: 0 0 auto;
    border-radius: 50px;
    object-fit: cover;
    transition:
      transform 0.2s,
      filter 0.2s;
    cursor: pointer;
  }

  .lang-switcher .separator {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
  }
}

// ---------------------------------end of language switcher ---------------------------------


 .contact-widget-container {
  display: inline-flex;
  align-items: left;
  gap: 1px !important;
  padding-left: 0px !important;
}

.navbar-custom-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.navbar-custom-icon:hover {
  transform: scale(1.1);
}

.contact-call-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background-color: #ffffff;
  /* padding: 3px 0px 3px 0px;  */
  border-radius: 50px;
  text-decoration: none !important;
  gap: 10px;
  /* height: 40px;  */
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.contact-call-btn:hover {
  background-color: #f7faff;
  transform: translateY(-5px);
}

.phone-number-text {
  color: #000000 !important;
  white-space: nowrap;
  display: inline-block;
  margin-top: 5px;
}

.cid-vi4EFcPD5s .navbar-nav .nav-item a {
  margin: 0 0.75rem !important;
}

@media (max-width: 991px) {
  /* .contact-widget-container {
    padding-left: 0;
    margin-top: 20px;
    margin-bottom: 15px;
    justify-content: center;
    width: 100%;
    gap: 5px;
  }

  .phone-number-text {
    white-space: normal !important; 
    line-height: 1.5 !important;
    font-size: 0.9rem !important;  
  }
  .contact-call-btn {
    gap: 10px !important;           
  }

  .navbar-custom-icon {
            width: 15px;
            height: 15px;
            object-fit: contain;
            vertical-align: middle;
            transition: transform 0.2s ease;
        } */

  .contact-buttons-wrapper {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 100% !important;
    padding: 0px 0 !important;
  }

  .contact-call-btn {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 10px !important;
  }

  .phone-number-text {
    /* font-size: 0.9rem !important; */
    margin-top: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    margin-top: 10px !important;
  }

  /* .cid-vi4EFcPD5s .navbar-nav .nav-item a {
    margin: 0 0.1rem !important;
} */
}

// -------------------------------end of contact widget ---------------------------------

.extMenu7 .navbar-brand {
  padding: 0 !important;
}

#video1-xd {
  padding-top: 80px !important;
}

/* 
#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;
    /* ลดระยะห่างด้านล่าง */
  }
}

/* Reduce desktop menu height by 40%. */
@media (min-width: 992px) {
  .extMenu7.menu .navbar .menu-content-top {
    min-height: 50px !important;
  }

  .extMenu7.menu .menu-logo .navbar-brand {
    min-height: 2.3rem !important;
  }

  .extMenu7.menu .menu-logo .navbar-brand .navbar-logo {
    font-size: 2.4rem !important;
  }

  .extMenu7.menu .menu-logo .navbar-brand .navbar-logo img {
    height: 4rem !important;
    width: auto;
  }

  .extMenu7.menu
    .navbar.navbar-toggleable-sm
    .navbar-collapse
    .navbar-nav
    .nav-item {
    min-height: 29px !important;
  }

  .extMenu7.menu .nav-link {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }

  .extMenu7.menu .widget-icon {
    font-size: 1rem !important;
  }
}

@media (max-width: 991px) {
  .extMenu7 #topLine.menu-content-top {
    /* padding-top: 5px !important; */
    /* padding-bottom: 2px !important; */
  }

  .extMenu7.menu .navbar-brand,
  .cid-vi4EFcPD5s .navbar-brand,
  .cid-vi4EFcPD5s .collapsed .navbar-brand {
    margin-top: 0 !important;
    margin-left: -2.5rem !important;
    /* min-height: 2.4rem !important; */
  }

  .extMenu7.menu .navbar-logo img,
  .cid-vi4EFcPD5s img {
    height: 4rem !important;
    width: auto;
  }

  .extMenu7.menu button.navbar-toggler,
  .cid-vi4EFcPD5s button.navbar-toggler,
  .cid-vi4EFcPD5s .collapsed button.navbar-toggler {
    margin: 0.55rem 0.8rem !important;
  }

  .cid-uoJscNlwwI .navbar-collapse.collapsing {
    transition: height 0.8s ease;
  }

  #lang-flag-en {
        width: 64px !important;
    }

  #lang-flag-th {
        width: 64px !important;
    }

  /* #video1-xd {
                padding-top: 34px !important;
            } */
}

/* Desktop fallback for top navigation dropdowns.
   The Mobirise menu opens dropdowns by adding an .open class via JavaScript,
   but this keeps hover behavior working even when the JS handler is not applied. */
@media (min-width: 992px) {
  .cid-vi4EFcPD5s .navbar-nav > .nav-item.dropdown:hover > .dropdown-menu,
  .cid-vi4EFcPD5s
    .navbar-nav
    > .nav-item.dropdown:focus-within
    > .dropdown-menu {
    display: block;
  }
}



//-------------------------------end of desktop menu height reduction ---------------------------------

.mbr-white {
  /* กำหนด aspect-ratio ตามสัดส่วนภาพจริง (2000x897) */
  aspect-ratio: 2000 / 897;
  width: 100%;
}