/* ==========================================
   1. CORE STRUCTURE
   ========================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body, html {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  background-color: #fcf6e8;
  color: #333333;
  min-height: 100vh;
}

.main-landing-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(to bottom, #f9f1d8 0%, #f4e9c5 100%);
  overflow-x: hidden;
}

/* ==========================================
   2. FADE-IN SYSTEM
   ========================================== */
.elegant-fade-in {
  opacity: 0;
  transform: translateY(10px);
  animation: smoothFade 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.elegant-fade-in.delay-1 {
  animation-delay: 0.2s;
}

@keyframes smoothFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================
   3. PARTICLES: ดาวระยิบระยับ (แก้ไขจุดบกพร่อง)
   ========================================== */
.stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;      /* ขยายให้คลุมทั้งหน้าจอ */
  pointer-events: none;
  z-index: 1;        /* อยู่บนพื้นหลัง แต่อยู่หลังรูปภาพและปุ่ม */
}

.star {
  position: absolute;
  background: #ffffff;
  border-radius: 50%;
  animation: starTwinkle infinite ease-in-out;
}

/* บังคับขนาดดาวและระยะเวลาสลับกันระยิบระยับ */
.star:nth-child(4n+1) { width: 3px; height: 3px; animation-duration: 2.5s; }
.star:nth-child(4n+2) { width: 4px; height: 4px; animation-duration: 3.5s; }
.star:nth-child(4n+3) { width: 2px; height: 2px; animation-duration: 2s; }
.star:nth-child(4n+4) { width: 3.5px; height: 3.5px; animation-duration: 4s; }

/* กระจายตำแหน่งพิกัดดวงดาวทั่วหน้าจอ */
.star:nth-child(1) { top: 10%; left: 8%; animation-delay: 0.1s; }
.star:nth-child(2) { top: 25%; left: 22%; animation-delay: 0.8s; }
.star:nth-child(3) { top: 40%; left: 12%; animation-delay: 0.3s; }
.star:nth-child(4) { top: 60%; left: 7%; animation-delay: 1.2s; }
.star:nth-child(5) { top: 80%; left: 18%; animation-delay: 0.5s; }

.star:nth-child(6) { top: 15%; left: 88%; animation-delay: 0.4s; }
.star:nth-child(7) { top: 35%; left: 78%; animation-delay: 1.5s; }
.star:nth-child(8) { top: 55%; left: 92%; animation-delay: 0.2s; }
.star:nth-child(9) { top: 75%; left: 82%; animation-delay: 0.9s; }

.star:nth-child(10) { top: 12%; left: 48%; animation-delay: 0.7s; }
.star:nth-child(11) { top: 70%; left: 40%; animation-delay: 1.1s; }
.star:nth-child(12) { top: 85%; left: 60%; animation-delay: 0.6s; }

/* Keyframe สั่งให้ดวงดาวกะพริบและเรืองแสงสีทองนวล */
@keyframes starTwinkle {
  0%, 100% { 
    opacity: 0.1; 
    transform: scale(0.6);
    box-shadow: 0 0 0px rgba(254, 240, 138, 0);
  }
  50% { 
    opacity: 0.9; 
    transform: scale(1.2);
    background: #e5c17d; /* สว่างเป็นสีทองประกาย */
    box-shadow: 0 0 8px #e5c17d; 
  }
}

/* ==========================================
   4. IMAGE WRAPPER
   ========================================== */
.graphic-hero-wrapper {
  position: relative;
  width: 100%;
  z-index: 2; /* ดันรูปให้อยู่เหนือดาว */
}

.perfect-fit-image {
  width: 100%;
  height: auto;
  display: block;
}

@media (min-width: 768px) {
  .desktop-only-view { display: block; }
  .mobile-only-view { display: none; }
}
@media (max-width: 767.98px) {
  .desktop-only-view { display: none; }
  .mobile-only-view { display: block; }
}

/* ==========================================
   5. STOU GREEN-GOLD BUTTONS (ปุ่มโทนเขียว-ทอง มสธ.)
   ========================================== */
.action-navigation-container {
  position: relative;
  z-index: 10; /* ดันปุ่มให้อยู่เหนือดาว */
  width: 100%;
  background: transparent;
  padding: 1.5rem 0;
}

.royal-btn-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.btn-royal {
  flex: 1;
  max-width: 250px;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-align: center;
  text-decoration: none !important;
  color: #ffffff !important;
  border-radius: 6px;
  
  /* ใช้สีเขียวเข้มประจำอัตลักษณ์ มสธ. ขลิบขอบทองสุภาพ */
  background-color: #0b3a23; 
  border: 1px solid #c5a059 !important;
  box-shadow: 0 4px 12px rgba(11, 58, 35, 0.15);
  transition: all 0.3s ease;
  display: inline-block;
}

.btn-royal:hover {
  transform: translateY(-3px);
  background-color: #125233; /* เขียวสว่างขึ้นเล็กน้อยเวลาเมาส์ชี้ */
  border-color: #e5c17d !important; /* ขอบทองสว่างขึ้น */
  box-shadow: 0 6px 18px rgba(11, 58, 35, 0.3);
}

/* Mobile Responsive */
@media (max-width: 767.98px) {
  .royal-btn-group {
    flex-direction: column;
    gap: 0.85rem;
  }
  .btn-royal {
    width: 100%;
    max-width: 280px;
  }
}

/* ==========================================
   6. CLEAN LIGHT FOOTER
   ========================================== */
footer.footer_section {
  position: relative;
  z-index: 2;
  background-color: #eee4c9; 
  border-top: 1px solid rgba(140, 107, 45, 0.25);
  width: 100%;
}

footer.footer_section p {
  color: #5c4c32; 
  font-size: 0.85rem;
  font-weight: 400;
}