<style>
@media screen and (max-width: 800px) {
  #loaderOverlay {
    z-index: 1000;
    display: flex;
  }
  .loader-spinner {
    width: 1.5rem;
    height: 1.5rem;
  }
}
@media screen and (max-width: 1300px) {
	
  /* ซ่อน nav.nav-container-2 เมื่อหน้าจอเล็ก */
  nav.nav-container-2 {
    display: none; /* เพิ่มบรรทัดนี้เพื่อให้เมนูหายไป */
  }
     /* ซ่อน nav.nav-container-21 เมื่อหน้าจอเล็ก */
  nav.nav-container-21 {
    display: none; /* เพิ่มบรรทัดนี้เพื่อให้เมนูหายไป */
  }
   nav.nav-container-22 {
    display: none; /* เพิ่มบรรทัดนี้เพื่อให้เมนูหายไป */
  }
   nav.nav-container-23 {
    display: none; /* เพิ่มบรรทัดนี้เพื่อให้เมนูหายไป */
  }
   nav.nav-container-24 {
    display: none; /* เพิ่มบรรทัดนี้เพื่อให้เมนูหายไป */
  }
   nav.nav-container-25 {
    display: none; /* เพิ่มบรรทัดนี้เพื่อให้เมนูหายไป */
  }
  }
   nav.nav-container-26 {
    display: none; /* เพิ่มบรรทัดนี้เพื่อให้เมนูหายไป */
  }
  
   @media screen and (max-width: 800px) {
   nav.nav-container {
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
        padding: 0.3rem;
      }
      nav.nav-container a img {
        height: 5rem;
        transition: transform 0.3s ease;
      }
      nav.nav-container a img:hover,
      nav.nav-container a img:active,
      nav.nav-container a img.touched {
        transform: scale(1.15);
      }


  nav.nav-container-3 {
  position: absolute; /* เพิ่มเพื่อให้ bottom ใช้งานได้ */
  top: 90vh; /* หรือปรับตามต้องการ */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  user-select: none;
  z-index: 4;
}

  nav.nav-container-3 a img {
    height: 2.5rem;
    transition: transform 0.3s ease;
  }

  nav.nav-container-3 a img:hover,
  nav.nav-container-3 a img:active,
  nav.nav-container-3 a img.touched {
    transform: scale(1.1);
  }
 

  nav.nav-container-4 {
    top: 25rem;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.3rem;
  }

  nav.nav-container-4 a img {
    height: 13rem;
    transition: transform 0.3s ease;
  }

  nav.nav-container-4 a img:hover,
  nav.nav-container-4 a img:active,
  nav.nav-container-4 a img.touched {
    transform: scale(1.1);
    animation: bounceSoft 3.0s ease-in-out infinite;
  }
  audio {
        width: 30%;
  }
  /* Responsive icon2 สำหรับหน้าจอเล็ก */
@media screen and (max-width: 800px) {
  #icon2 {
    width: 9rem;
  
}
@media screen and (max-width: 1200px) {
  .menu-item {
    display: none !important;
  }
  @media screen and (max-width: 800px) {
  html, body {
    overflow: hidden !important;
    height: 100% !important;
  }
}




  </style>