@import url('https://fonts.googleapis.com/css2?family=Charm:wght@400;700&display=swap');

body {
  margin: 0;
  padding: 0;
  background: #000000; /* fallback */
  font-family: Tahoma, sans-serif;
  color: #fff;
  text-align: center;
}

#bg_header {
  position: relative;
  width: 100%;
  max-width: 1920px;
  min-width: 1000px;
  aspect-ratio: 1820/900;
  margin: 0 auto;
  overflow: hidden;
}
#bg_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
    transform: scale(1.0);         /* เริ่มจากเล็กกว่าปกติ */
  transition: transform 8s ease; /* ใช้เวลา 8 วินาทีค่อย ๆ ขยาย */

}

#bg_image.zoom-out {
  transform: scale(1.2);
}
#bg_wrapper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

#bg_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
}
#bg_wrapper img.visible {
  opacity: 1;
}

/* ภาพเคลื่อนไหว */
#bg_wrapper img:nth-child(1) {
  animation: fadeZoom1 6s ease forwards;
}
@keyframes fadeZoom1 {
  from { opacity: 0; transform: scale(1.2); }
  to   { opacity: 1; transform: scale(1); }
}




#org-name {
  position: absolute;
  left: 75%;
  top: 85%;
  transform: translateX(-50%);
  font-size: 1.5rem;
  color: #ffffff;
  z-index: 2;
  white-space: nowrap;

  /* 🎬 ซ่อนก่อน 3 วินาที แล้วค่อยๆ ปรากฏใน 3 วินาที */
  opacity: 0;
  animation: fadeInOrg 2s ease-in-out 3s forwards;
  /*              ↑   ↑         ↑   ↑
      ชื่อแอนิเมชัน  ระยะเวลา  easing  หน่วงก่อนเริ่ม  */
}

@keyframes fadeInOrg {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ค่าเริ่มต้น: สำหรับจอเล็ก (<768px) */
.btn-wrapper {
  position: absolute;
  left: 50%;
  top: 92%;
  transform: translateX(-50%);
  display: flex;
  gap: 30px;
  z-index: 2;
}

/* จอใหญ่กว่า 768px → ปรับตำแหน่งปุ่มใหม่ */
@media (min-width: 768px) {
  .btn-wrapper {
    left: 75% !important;   /* 🔧 ขยับไปทางซ้าย */
    top: 92% !important;    /* 🔧 ขยับลง */
    transform: translateX(-50%);
    opacity: 0; /* เริ่มต้นซ่อน */
    animation: fadeInBtn 2s ease-in-out 2s forwards;
    /*           ↑   ↑         ↑   ↑
        ชื่อ     ระยะเวลา  easing หน่วงก่อนเริ่ม */
  }
}

/* 🎬 แอนิเมชันค่อยๆ ปรากฏ */
@keyframes fadeInBtn {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}


.btn-wrapper a {
  min-width: 140px;
  padding: 10px 0;
  background: rgb(0, 0, 0);
  border: 2px solid #000000;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.6s ease;
  text-align: center;
}



/* แสดงที่ปุ่ม */
/* 🌙 ปุ่มไว้อาลัย — โทนดำทองหม่นอมขาว */
.btn-wrapper a {
  position: relative;
  overflow: hidden;
  min-width: 140px;
  padding: 10px 25px;
  background: rgba(0, 0, 0, 0.85);
  border: 2px solid #bfa76f;              /* ขอบทองหม่นสุภาพ */
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 0 20px rgba(255, 230, 150, 0.35); /* แสงทองอ่อนรอบปุ่ม */
  transition: all 0.4s ease;
  z-index: 1;
}

/* 🌤️ แสงอ่อนตรงกลางปุ่ม */
.btn-wrapper a::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center,
              rgba(255, 240, 200, 0.45),
              rgba(255, 255, 255, 0.10),
              transparent 70%);
  filter: blur(8px);
  opacity: 0.75;
  pointer-events: none;
  transition: opacity 0.5s ease, filter 0.5s ease;
  z-index: 0;
}

/* ✨ ลำแสงเฉียงผ่านปุ่ม */
.btn-wrapper a::after {
  content: "";
  position: absolute;
  top: -150%;
  left: -200%;
  width: 400%;
  height: 400%;
  background: linear-gradient(
    45deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,220,0.4) 50%,
    rgba(255,255,255,0) 100%
  );
  transform: rotate(20deg);
  opacity: 0;
  animation: shineSoft 8s ease-in-out infinite;
}



/* 🕯️ เมื่อ hover */
.btn-wrapper a:hover {
  background: linear-gradient(180deg, #f6f2d8 0%, #e6e1c0 100%); /* ขาวทองอ่อน */
  color: #111;
  border-color: #fff6d5;
  transform: scale(1.07);
  box-shadow: 0 0 35px rgba(255, 250, 200, 0.7);
  text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.btn-wrapper a:hover::before {
  opacity: 1;
  filter: blur(5px);
}


.charm-regular {
  font-family: "Charm", cursive;
  font-weight: 400;
  font-style: normal;
}

.charm-bold {
  font-family: "Charm", cursive;
  font-weight: 700;
  font-style: normal;
}

#intro-text {
  position: absolute;
  top: 67%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  color: #ffffff;
  z-index: 3;
    font-family: "Charm", cursive; /* ✅ ใช้ฟอนต์ Charm */

}

#intro-text .intro-h1 {
  font-size: clamp(1rem, 3vw, 2.5rem);  /* ย่อ–ขยายเหมือนปุ่ม */
  font-weight: bold;
  margin: 0.5em 0;
  white-space: nowrap;   /* ไม่ตัดบรรทัด */
  overflow: visible;     /* ไม่ซ่อนข้อความ */
}

#intro-text .intro-h2 {
  font-size: clamp(1.3rem, 2.2vw, 1rem);
  margin: 0.4em 0;
  display: block;
  white-space: nowrap;
  overflow: visible;
  
  letter-spacing: 0.05em;       /* 🔑 ขยายระยะห่างตัวอักษร (ทำให้ดูกว้างขึ้น) */
  line-height: 1.1;             /* 🔑 ลดช่องไฟระหว่างบรรทัด */
}

#intro-text .intro-h3 {
  font-size: clamp(0.8rem, 2vw, 1.4rem);
  margin: 0.4em 0;
  display: block;
  white-space: nowrap;
  overflow: visible;
}

/* ✅ ระยะห่างเฉพาะ h2b, h2b1 */
#intro-text .h2b,
#intro-text .h2b1 {
  margin-bottom: 20px !important;
}

/* ✅ ระยะห่างเฉพาะ h2c, h2d */
#intro-text .h2c,
#intro-text .h2d {
  margin-bottom: 20px !important;
}

/* ✅ ระยะห่างพิเศษจาก JSON (ใช้ key "br1") */
#intro-text .intro-space {
  display: block;
  height: 10px;
  width: 100%;
}
/* จอกว้างปานกลาง (1501px - 1749px) → ลดลง ~10% */
@media (max-width: 1749px) and (min-width: 1501px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.9); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
@media (max-width: 1500px) and (min-width: 1201px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.8); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
@media (max-width: 1200px) and (min-width: 1100px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.7); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
@media (max-width: 1100px) and (min-width: 768px) {
  #intro-text {
    top: 66%; /* ขยับขึ้นเล็กน้อยเพื่อบาลานซ์ */
    transform: translateX(-50%) scale(0.6); /* 🔑 ย่อทั้งกล่องลง 10% */
    transform-origin: top center;          /* ย่อจากตรงกลาง */
  }

  /* เผื่ออยากคุม margin ให้แน่นขึ้น */
  #intro-text .intro-h1,
  #intro-text .intro-h2,
  #intro-text .intro-h3 {
    margin-top: 0.3em;
    margin-bottom: 0.3em;
  }
}
/* เริ่มต้น: ซ่อน Mobile Layout */
#default-card {
  display: none;
}
#mobile-buttons {
  display: none;
}

/* ✅ แสดง Mobile Layout + ซ่อน Desktop เมื่อจอ <= 767px */
@media (max-width: 767px) {
  /* ซ่อน Desktop Layout */
  #bg_header,
  #global-buttons {
    display: none !important;
  }

  /* แสดง Mobile Layout */
  #default-card {
    display: block !important;
  }
  #mobile-buttons {
    display: flex !important;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    z-index: 9999;
    position: relative;
  }

  /* ชื่อองค์กรบน mobile */
  #org-name-mobile {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 1.0rem;
    color: #ffffff;
  }

  /* ปุ่ม Mobile */
  #mobile-buttons a {
    min-width: 110px;
    padding: 8px 0;
    font-size: 0.9rem;
    background: rgb(0, 0, 0);
    border: 2px solid #926b00;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    text-align: center;
      white-space: nowrap;    /* ✅ ไม่ตัดบรรทัด */
  }

  #mobile-buttons a:hover {
    background: #e9e8e8;
    color: #000;
  }
}

/* ✅ ซ่อน Mobile Layout เมื่อจอ >= 768px */
@media (min-width: 768px) {
  #default-card,
  #mobile-buttons {
    display: none !important;
  }

  /* Desktop layout กลับมา */
  #global-buttons {
    display: flex !important;
    justify-content: center;
    gap: 30px;
  }
}




/* ✅ แถบแสงสำหรับพื้นหลัง */
#bg_wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    45deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,  /* สีขาวจางลง */
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  opacity: 0.6;
  pointer-events: none;
  z-index: 20;
}

/* 🌙 แอนิเมชันเคลื่อนแสงยาว ๆ สมูทและสุภาพ */
@keyframes shineMove {
  0%   { left: -150%; opacity: 0; }         /* เริ่มนอกจอซ้าย */
  10%  { opacity: 0.25; }                   /* ค่อยๆ ปรากฏ */
  50%  { left: 0%; opacity: 0.35; }         /* กลางจอ */
  90%  { opacity: 0.25; }                   /* เริ่มจางลง */
  100% { left: 180%; opacity: 0; }          /* เลื่อนออกนอกจอขวา */
}

#bg_wrapper.shine::after {
  animation: shineMove 14s ease-in-out infinite;
}