.navbar, .dropdown-menu {
  
  z-index: 4; /* ค่านี้สูงกว่า default z-index ของรูปภาพ */
}

#box1 {
  margin: 0;
  height: 92vh;
  display: flex;
  /* justify-content: center; */
  /* align-items: center; */
  position: relative;

}


.text-content {
  position: relative;
  z-index: 3; /* ให้อยู่ด้านบนของทั้งสองรูป */
  color: white;
  font-size: 2em;
  text-align: center;
}


/* พื้นหลัง */
.background {
  position: relative;

  width: 100vw;
  height: 100vh;
  background-size: cover; /* ปรับขนาดภาพให้พอดีหน้าจอ */
  background-position: center; /* จัดตำแหน่งให้อยู่ตรงกลาง */
  background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
  transition: opacity 1.5s ease; /* ตั้งค่า transition ของความโปร่งใส */
  z-index: 0;
}

/* รูป Foreground */
.foreground {
 
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    /*width: 100vw; /* กำหนดให้กว้างเต็มจอ */
    /*height: 92vh; /* กำหนดความสูงเต็มจอ */
    overflow: hidden;
    
}

.foreground img {
  /*width: 100%; /* ปรับให้เต็มความกว้างของหน้าจอ */
  max-width: 100%; /* ป้องกันไม่ให้กว้างเกิน */
  /* height: auto; */
   /*height: 92vh; /*กำหนดความสูงเต็มจอ */
   object-fit: contain; /*รักษาสัดส่วนของภาพ */
 /* max-width: 90%; /* ปรับขนาดรูป foreground ให้เต็มหน้าจอได้ไม่เกิน 90% */
  height: auto; /* ปรับขนาดความสูงตามอัตราส่วน */
}

        /* เพิ่มการตอบสนองในอุปกรณ์ขนาดเล็ก (Mobile) */
        @media only screen and (max-width: 768px) {
          .foreground-image {
              max-width: 50%; /* ลดขนาด foreground สำหรับสมาร์ทโฟน */
          }
          .background-image {
            max-width: 50%; /* ลดขนาด foreground สำหรับสมาร์ทโฟน */
        }          
      }

.overlay-text {
  position: absolute;
  display: flex;               /* เปิดใช้ Flexbox */
  justify-content: center;      /* จัดให้อยู่ตรงกลางแนวนอน */
  align-items: center;          /* จัดให้อยู่ตรงกลางแนวตั้ง */
  height: 100vh;                /* ให้ความสูงเต็มหน้าจอ */
  /* top: 20px; */
  left: 20px;
  z-index: 3;
  color: white;
}

.overlay-text h1 {
  margin: 0;
  font-size: 25px;
  font-weight: bold;
}

/* Text Styling */
h1 {
  color: white;
  font-size: 2em;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

/* padded section */

.pad-section { padding: 50px 0; }

.pad-section img { width: 100%; }

/* vertical-centered text */

.text-vcenter {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.text-vcenter h4 {
  font-size: 2.5em;
  font-weight: 700;
   position: absolute;
    right: 5;
	top:200;
	text-shadow: 0px 1px 1px #ffffff;
}

/* additional sections */



#box2 {
  background-color: #EA8200;
  color: white;
  height: 100%;
}

#box3 {
  background-color: #182C3C;
  color: white;
  height: 100%;
}

footer { padding: 20px 0; }

footer .glyphicon {
  color: #333333;
  font-size: 60px;
}

footer .glyphicon:hover { color: #EE2E24; }

.goToTop {
  position: fixed;
  top: 0;
  height: 55px;
  z-index: 1;
}

nav {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #222; /*สีพื้นหลังของเมนู Header*/
}

nav li { background: #fff; }
nav .dropdown-menu {
  background: #fff;
  max-height: 500px; /* กำหนดความสูงสูงสุดของเมนูย่อย */
  overflow-y: auto; /* แสดง scrollbar หากเนื้อหาเกิน */
  overflow-x: hidden; /* ซ่อน scrollbar แนวนอน (ถ้ามี) */
  margin: 0;
  padding: 2px 0;
  border: 1px solid #ddd; /* เส้นขอบ */
}

.dropdown-menu > li > a {
  padding: 2px 2px;
  color: #333;
}

.dropdown-menu > li > a:hover {
  background: #f0f0f0;
}

    /* ปรับแก้ปัญหาที่เมนูหาย */
    .navbar, .dropdown-menu {
      z-index: 1050;
      
    }
    .modal {
      z-index: 1100 !important; /* มากกว่า navbar */
  }
  
  .modal-backdrop {
      z-index: 1080 !important; /* ฉากหลังของ modal ต้องน้อยกว่าตัว modal */
  }