<style>
    /* พื้นฐาน */
    html, body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
	  overflow-y: auto; 
      font-family: sans-serif;
      background: black;
      height: 100%;
      width: 100%;
      touch-action: manipulation;
    }

/* พื้นหลัง */
.background-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw; /* กว้างเท่ากับขนาดหน้าจอ */
  height: 100vh; /* สูงเท่ากับขนาดหน้าจอ */
  background-image: url('image/backgroundM.jpeg');
  background-size: cover; /* ขยายภาพให้ครอบคลุม */
  background-position: center center; /* จัดให้อยู่กลางทั้งแนวตั้งและแนวนอน */
  background-repeat: no-repeat; /* ไม่ให้ภาพซ้ำ */
  z-index: -1; /* ซ่อนไว้หลังเนื้อหา */
}


    video.video-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
      display: none;
    }

    canvas#sparkleCanvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 2;
    }

    /* Content */
    #content-locker {
      position: relative;
      z-index: 3;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    /* เมนูหลัก */
    nav.nav-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.5rem;
      background: rgba(255, 255, 255, 0);
      margin-bottom: 0.5rem;
      user-select: none;
      z-index: 15;
    }
    nav.nav-container a img {
      height: 5.5rem;
      transition: transform 0.3s ease;
      user-select: none;+
      pointer-events: auto;
    }
    nav.nav-container a img:hover,
    nav.nav-container a img:active,
    nav.nav-container a img.touched {
      transform: scale(1.1);
    }
	/* ตรัึงเมนู */
	nav.nav-container.fixed {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     z-index: 20;
     background-color: rgba(0, 0, 0, 0.0); /* เพิ่มพื้นหลังแบบโปร่งใส */
     transition: top 0.1s ease, background 0.1s ease;
}
	/* Event 2.1 */
nav.nav-custom-menu {
      position: absolute;
      top: 10rem;
      left: 50%;
      display: flex;
      gap: 1rem;
      background: rgba(255, 255, 255, 0);
      padding: 0.5rem 1rem;
      user-select: none;
      z-index: 5; /* เพิ่ม z-index เพื่อให้อยู่เหนือ canvas */
    }

    /* รูปพื้นฐานทั้งหมด */
    .menu-item {
      position: absolute;
      transition: transform 0.3s ease, filter 0.3s ease;
      user-select: none;
      cursor: pointer;
      pointer-events: auto;
    }

    /* ตำแหน่ง + ขนาดของแต่ละรูป (แก้ไขได้อิสระ) */
    .item1 { top: 46rem; left: -2rem; height: 2rem; }
    .item2 { top: 70rem; left: -11rem; height: 14rem; }
    .item3 { top:85rem; right: -1rem; height: 13rem; }
    .item4 { top: 67.5rem; left: 8rem; height: 13rem; }
    .item5 { top: 68rem; right: 12rem; height: 13rem; }
    .item6 { top: 83rem; left: 0rem; height: 5rem; }
	.item7 { top: 108rem; left: -2rem; height: 2rem; }
	

    /* เอฟเฟกต์ hover */
    .menu-item:hover,
    .menu-item:active,
    .menu-item.touched {
      transform: scale(1.1);
      animation: glowing 3s ease-in-out infinite alternate;
      will-change: filter, transform;
    }

    /* Animation glow effect */
   @keyframes glowing {
  0% {
    filter:
      brightness(1)
      contrast(1)
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.3))
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    opacity: 0.85;
    transform: scale(1);
  }

  50% {
    filter:
      brightness(1.25)
      contrast(1.1)
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.5))
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.7))
      drop-shadow(0 0 25px rgba(255, 255, 255, 0.8));
    opacity: 1;
    transform: scale(1.06);
  }

  100% {
    filter:
      brightness(1)
      contrast(1)
      drop-shadow(0 0 4px rgba(255, 255, 255, 0.3))
      drop-shadow(0 0 8px rgba(255, 255, 255, 0.4))
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
    opacity: 0.85;
    transform: scale(1);
  }
}




	/* เมนูรอง 3 */
	/* fackbook,discord */
    nav.nav-container-3 {
      position: absolute;
      top: 35rem;
      left: 49%;
      transform: translateX(-50%);
      display: flex;
      gap: 6rem;
      background: rgba(255, 255, 255, 0.1);
      padding: 0.5rem 1rem;
      border-radius: 8px;
      user-select: none;
      z-index: 6;
    }
    nav.nav-container-3 a img {
      height: 4rem;
      transition: transform 0.3s ease;
      user-select: none;
      cursor: pointer;
      pointer-events: auto;
    }
    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);
    }
	

    /* เมนูรอง 4 */
	/* Early logo in center */
    nav.nav-container-4 {
      position: absolute;
      top: 10rem;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 1rem;
      background: rgba(255, 255, 255, 0);
      padding: 0.5rem 1rem;
      user-select: none;
      z-index: 5; /* เพิ่ม z-index เพื่อให้อยู่เหนือ canvas */
    }
    nav.nav-container-4 a img {
      height: 27rem; /* ปรับขนาดให้ใหญ่ขึ้น */
      transition: transform 0.3s ease;
      user-select: none;
      cursor: pointer;
	  animation: bounceSoft 3.0s ease-in-out infinite;
      pointer-events: auto;
    }

    /* ไอคอน */
	/* code free icon */
    #icon2 {
     position: fixed;
     bottom: 0;
     right: 0;
     width: 14rem; /* ขนาดใหญ่เริ่มต้น */
     height: auto;
     animation: shake 1s infinite;
     user-select: none;
     z-index: 10;
     cursor: pointer;
     transition: width 0.3s ease;
}

 /**
 * Shake Animation
 * A subtle, smooth shake effect for interactive UI elements.
 * Optimized for natural motion with cubic-bezier timing.
 */
@keyframes shake {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  20% {
    transform: translateX(-1.5px) rotate(-0.8deg);
  }
  40% {
    transform: translateX(1.5px) rotate(0.8deg);
  }
  60% {
    transform: translateX(-1px) rotate(-0.5deg);
  }
  80% {
    transform: translateX(1px) rotate(0.5deg);
  }
  100% {
    transform: translateX(0) rotate(0deg);
  }
}

/* Example usage for interactive elements like buttons or alerts */
.shake-element {
  animation: shake 0.6s cubic-bezier(0.36, 0, 0.2, 1) infinite;
}

/* Optional: Trigger on hover or error state for dynamic feedback */
.shake-element:hover,
.shake-element.error {
  animation: shake 0.6s cubic-bezier(0.36, 0, 0.2, 1) 2;
}
/**
 /* BounceSoft Animation - Professional Version */
@keyframes bounceSoft {
  0% {
    transform: scale(1) translateY(0);
  }
  20% {
    transform: scale(1.02, 0.98) translateY(3px);
  }
  40% {
    transform: scale(0.98, 1.02) translateY(-2px);
  }
  60% {
    transform: scale(1.015, 0.985) translateY(1px);
  }
  80% {
    transform: scale(0.995, 1.005) translateY(-0.5px);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}

/* Base Bounce Class */
.bounce-element {
  animation: bounceSoft 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: center;
  will-change: transform;
}

/* Optional: Hover Boost */
.bounce-element:hover {
  animation: bounceSoft 0.7s cubic-bezier(0.4, 0, 0.2, 1) 2;
}


    /* Audio player */
    audio {
      position: fixed;
      bottom: 0.5rem;
      left: 0.5rem;
      width: 10%; /* ปรับให้สมดุล */
      background: transparent;
      z-index: 10;
      user-select: none;
    }

    /* เอฟเฟคแสงดวงอาทิตย์ */
    .sunlight-effect {
      position: fixed;
      top: 0;
      left: 0;
      width: 5rem;
      height: 5rem;
      pointer-events: none;
      z-index: 3;
      background: radial-gradient(
        circle at top left,
        rgba(255, 255, 255, 0.8),
        rgba(255, 255, 255, 0.1) 60%,
        transparent 90%
      );
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
      animation: sunlightPulse 3s ease-in-out infinite;
    }

    @keyframes sunlightPulse {
      0%, 100% {
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.6));
        opacity: 0.8;
      }
      50% {
        filter: drop-shadow(0 0 25px rgba(255, 255, 255, 1));
        opacity: 1;
      }
    }

    /* Loader overlay */
    #loaderOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* พื้นหลังเข้มขึ้นเล็กน้อยแต่ยังโปร่ง */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* สูงสุดเพื่อครอบทุกอย่าง */
  opacity: 0;
  transition: opacity 0.4s ease-in-out; /* จางนุ่มนวล */
}

#loaderOverlay.active {
  opacity: 1;
}

.loader-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 4px solid rgba(255, 255, 255, 0.2); /* ขอบจางลง */
  border-top: 4px solid #60a5fa; /* สีน้ำเงินอ่อน ดูสบายตา */
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite; /* หมุนช้าลงและนุ่มนวล */
  will-change: transform; /* Optimize การเรนเดอร์ */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
  }
}
  </style>