/* กำหนดตัวแปร CSS หลักสำหรับสีต่างๆ ของเว็บไซต์ */
:root {
  --primary-color: #188b67; /* สีหลักของเว็บไซต์ เช่น สีข้อความ, สีปุ่มบางปุ่ม */
  --background-color: #fa96d6; /* สีพื้นหลังของหน้าเว็บ */
  --content-background: #eee; /* สีพื้นหลังของส่วนเนื้อหา */
  --text-color: #188b67; /* สีข้อความทั่วไป */
  --promotion-color: #e5088b; /* สีสำหรับข้อความโปรโมชั่น */
  --register-button-color: #188b67; /* สีพื้นหลังปุ่มลงทะเบียน */
  --telegram-button-color: #32a7d9; /* สีพื้นหลังปุ่ม Telegram */
  --facebook-button-color: #007BF7; /* สีพื้นหลังปุ่ม Facebook */
}

/* รีเซ็ตค่าเริ่มต้นของ margin, padding และกำหนด box-sizing เป็น border-box สำหรับทุก elements */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* ทำให้ padding และ border รวมอยู่ในความกว้างและความสูงของ element */
  font-family: "Lexend", sans-serif; /* กำหนด font-family หลักของเว็บไซต์ */
}

/* กำหนดสไตล์สำหรับ body */
body {
  min-height: 100vh; /* กำหนดความสูงขั้นต่ำให้เต็ม viewport height */
  display: flex; /* ใช้ flexbox layout */
  flex-direction: column; /* จัดเรียง items เป็นแนวตั้ง */
  background-color: var(--background-color); /* ใช้สีพื้นหลังที่กำหนดไว้ในตัวแปร */
}

/* กำหนดสไตล์สำหรับลิงก์ (<a> tag) */
a {
  text-decoration: none; /* ลบเส้นใต้จากลิงก์ */
  color: var(--primary-color); /* ใช้สีหลักที่กำหนดไว้ในตัวแปร */
}

/* กำหนดสไตล์สำหรับ container หลักที่ห่อเนื้อหาทั้งหมด */
.wrapper {
  width: 100%; /* ความกว้างเต็ม viewport */
  margin: 0 auto; /* จัดกึ่งกลาง container ในแนวนอน */
  display: flex; /* ใช้ flexbox layout */
  flex-direction: column; /* จัดเรียง items เป็นแนวตั้ง */
  min-height: 100vh; /* กำหนดความสูงขั้นต่ำให้เต็ม viewport height */
  flex-grow: 1; /* อนุญาตให้ wrapper ขยายเต็มพื้นที่ที่เหลือ */
}

/* Media query สำหรับหน้าจอที่มีความกว้างอย่างน้อย 1080px */
@media (min-width: 1080px) {
  .wrapper {
    width: 480px; /* จำกัดความกว้างของ wrapper บนหน้าจอขนาดใหญ่ */
  }
}

/* กำหนดสไตล์สำหรับ container ส่วนบน (sticky top) */
.container-top {
  position: sticky; /* กำหนดให้ container ติดอยู่กับขอบบนของ viewport เมื่อเลื่อนหน้าจอ */
  top: 0; /* กำหนดตำแหน่งติดไว้ที่ด้านบน */
  z-index: 1; /* กำหนดลำดับการวางซ้อน (z-index) เพื่อให้ container อยู่ด้านบน */
}

/* กำหนดสไตล์สำหรับ container รูปภาพส่วนบน */
.image-top-container {
  width: 100%;
  display: flex;
  justify-content: center; /* จัดเรียงเนื้อหาให้อยู่ตรงกลางแนวนอน */
  align-items: center; /* จัดเรียงเนื้อหาให้อยู่ตรงกลางแนวตั้ง */
}

/* กำหนดสไตล์สำหรับรูปภาพส่วนบน */
.top-image {
  max-width: 100%; /* จำกัดความกว้างสูงสุดของรูปภาพให้ไม่เกิน container */
  height: auto; /* ปรับความสูงของรูปภาพอัตโนมัติตามอัตราส่วน */
  display: block; /* แสดงผลเป็น block element */
}

/* กำหนดสไตล์สำหรับ container เนื้อหาหลัก */
.container-content {
  flex-grow: 1; /* อนุญาตให้ container ขยายเต็มพื้นที่ที่เหลือ */
  padding: 20px; /* กำหนดระยะห่างภายใน */
  background-color: var(--content-background); /* ใช้สีพื้นหลังเนื้อหาที่กำหนดไว้ในตัวแปร */
  z-index: 2; /* กำหนดลำดับการวางซ้อน (z-index) ให้อยู่เหนือ container-top */
  border-radius: 30px 30px 0 0; /* กำหนดขอบมนเฉพาะด้านบน */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* ใส่เงาให้กับ container */
  color: var(--text-color); /* ใช้สีข้อความที่กำหนดไว้ในตัวแปร */
}

/* กำหนดสไตล์สำหรับ heading elements (h1, h2, h3) */
h1,
h2,
h3 {
  text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
  margin-bottom: 0.1em; /* กำหนดระยะห่างด้านล่างเล็กน้อย */
  font-weight: normal; /* กำหนดน้ำหนัก font เป็น normal */
}

/* กำหนดสไตล์สำหรับ h1 */
h1 {
  font-size: 1.5em; /* กำหนดขนาด font */
}

/* กำหนดสไตล์สำหรับ h2 */
h2 {
  font-size: 1.1em; /* กำหนดขนาด font */
}

/* กำหนดสไตล์สำหรับ h3 */
h3 {
  font-size: 1em; /* กำหนดขนาด font */
  margin-bottom: 1.5em; /* กำหนดระยะห่างด้านล่างมากขึ้น */
}

/* กำหนดสไตล์สำหรับ h4 */
h4 {
  font-size: 0.9em; /* กำหนดขนาด font */
  color: var(--primary-color); /* ใช้สีหลักที่กำหนดไว้ในตัวแปร */
  margin: 3em 0 1em 0; /* กำหนดระยะห่างด้านบน, ขวา, ล่าง */
  font-weight: bold; /* กำหนดน้ำหนัก font เป็น bold */
}

/* กำหนดสไตล์สำหรับ paragraph (p) */
p {
  font-size: 1em; /* กำหนดขนาด font */
  line-height: 1.5; /* กำหนดความสูงบรรทัด */
  margin-bottom: 1em; /* กำหนดระยะห่างด้านล่าง */
  font-weight: normal; /* กำหนดน้ำหนัก font เป็น normal */
}

/* กำหนดสไตล์สำหรับ section รูปภาพ */
.image-section {
  display: flex;
  justify-content: center; /* จัดเรียงเนื้อหาให้อยู่ตรงกลางแนวนอน */
  gap: 10px; /* กำหนดระยะห่างระหว่าง items ใน flex container */
  margin-top: 20px; /* กำหนดระยะห่างด้านบน */
  margin-bottom: 0.5em; /* กำหนดระยะห่างด้านล่างเล็กน้อย */
}

/* กำหนดสไตล์สำหรับ div ภายใน image-section */
.image-section > div {
  text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
}

/* กำหนดสไตล์สำหรับ container ปุ่ม */
.button-container {
  display: flex;
  flex-direction: column; /* จัดเรียง items เป็นแนวตั้ง */
  align-items: center; /* จัดเรียง items ให้อยู่ตรงกลางแนวนอน */
  gap: 15px; /* กำหนดระยะห่างระหว่าง items ใน flex container */
  margin-top: 30px; /* กำหนดระยะห่างด้านบน */
}

/* กำหนดสไตล์สำหรับปุ่ม */
.button {
  display: inline-flex; /* แสดงผลเป็น inline-flex container */
  align-items: center; /* จัดเรียง items ให้อยู่ตรงกลางแนวตั้ง */
  justify-content: center; /* จัดเรียง items ให้อยู่ตรงกลางแนวนอน */
  padding: 12px 25px; /* กำหนดระยะห่างภายใน */
  font-size: 1em; /* กำหนดขนาด font */
  font-weight: normal; /* กำหนดน้ำหนัก font เป็น normal */
  text-decoration: none; /* ลบเส้นใต้ (ถ้าเป็นลิงก์) */
  color: white; /* สีข้อความสีขาว */
  border: none; /* ลบเส้นขอบ */
  border-radius: 30px; /* กำหนดขอบมน */
  cursor: pointer; /* เปลี่ยน cursor เป็น pointer เมื่อ hover */
  transition: background-color 0.3s ease, transform 0.2s ease; /* เพิ่ม transition สำหรับ background-color และ transform */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* ใส่เงาให้กับปุ่ม */
  width: 250px; /* กำหนดความกว้างของปุ่ม */
}

/* กำหนดสไตล์สำหรับ icon ในปุ่ม */
.button i {
  margin-left: 10px; /* กำหนดระยะห่างด้านซ้ายของ icon */
}

/* กำหนดสไตล์เมื่อ hover ปุ่ม */
.button:hover {
  background-color: #a9a9a9; /* เปลี่ยนสีพื้นหลังเมื่อ hover */
  transform: translateY(-3px); /* เลื่อนปุ่มขึ้นเล็กน้อยเมื่อ hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* เปลี่ยนเงาเมื่อ hover */
}

/* กำหนดสไตล์เมื่อ active ปุ่ม (กดปุ่ม) */
.button:active {
  transform: translateY(1px); /* เลื่อนปุ่มลงเล็กน้อยเมื่อ active */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* เปลี่ยนเงาเมื่อ active */
}

/* กำหนดสไตล์สำหรับเส้นคั่น (hr) */
hr {
  border: none; /* ลบเส้นขอบ */
  height: 2px; /* กำหนดความสูงของเส้น */
  background: linear-gradient( /* สร้างพื้นหลังแบบไล่ระดับสี */
    to right,
    rgba(238, 238, 238, 0.3),
    var(--primary-color),
    rgba(238, 238, 238, 0.3)
  );
  margin: 20px 0; /* กำหนดระยะห่างด้านบนและล่าง */
}

/* กำหนดสไตล์สำหรับรูปภาพ logo */
.logo-image {
  width: 50%; /* กำหนดความกว้างของรูปภาพ logo */
  margin-left: 0;
  margin-right: 0;
}

/* กำหนดสไตล์สำหรับหัวข้อโปรโมชั่น */
.promotion-title {
  color: var(--promotion-color); /* ใช้สีโปรโมชั่นที่กำหนดไว้ในตัวแปร */
}

/* กำหนดสไตล์สำหรับปุ่มลงทะเบียน */
.register-button {
  background-color: var(--register-button-color); /* ใช้สีพื้นหลังปุ่มลงทะเบียนที่กำหนดไว้ในตัวแปร */
}

/* กำหนดสไตล์สำหรับปุ่ม Telegram */
.telegram-button {
  background-color: var(--telegram-button-color); /* ใช้สีพื้นหลังปุ่ม Telegram ที่กำหนดไว้ในตัวแปร */
}

/* กำหนดสไตล์สำหรับปุ่ม Facebook */
.facebook-button {
  background-color: var(--facebook-button-color); /* ใช้สีพื้นหลังปุ่ม Facebook ที่กำหนดไว้ในตัวแปร */
}

/* กำหนดสไตล์สำหรับลิงก์สอบถาม */
.inquiry-link {
  text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
  margin-top: 25px; /* กำหนดระยะห่างด้านบน */
}

/* กำหนดสไตล์สำหรับ copyright text */
.copyright {
  font-size: 0.7em; /* กำหนดขนาด font เล็ก */
  text-align: center; /* จัดข้อความให้อยู่ตรงกลาง */
  padding-top: 50px; /* กำหนดระยะห่างด้านบน */
}