/* กำหนดฟอนต์และพื้นหลังของทั้งหน้าเว็บ */
body {
  font-family: 'IBM Plex Sans Thai', sans-serif; /* ใช้ฟอนต์ภาษาไทย */
  background-color: #f9f9f9; /* สีพื้นหลังเทาอ่อน */
  margin: 0; /* ไม่มีระยะขอบรอบนอก */
  padding: 0; /* ไม่มีช่องว่างด้านใน */
  
}

/* กล่องหลักที่ครอบเนื้อหา */
.container {
  max-width: 920px; /* ความกว้างสูงสุด */
  margin: 0px auto; /* เว้นขอบด้านบน 30px และจัดกลางแนวนอน */
  padding: 20px 25px; /* ช่องว่างด้านใน */
  background-color: #ffffff; /* พื้นหลังสีขาว */
  border-radius: 6px; /* มุมมน */
  box-shadow: 0 1px 5px rgba(0,0,0,0.1); /* เงาอ่อน */
  margin-top: 10px !important;   /* เว้นระยะจาก header ด้านบน */
  margin-bottom: 10px !important;/* เว้นระยะจาก footer ด้านล่าง */
  transition: margin 0.3s ease;  /* เพิ่มเอฟเฟกต์เล็กน้อยเวลาเปลี่ยนขนาดจอ */
}

/* ✅ บังคับให้หัวข้อภายในกล่องขยับลงจากขอบบน */
.container h1 {
  padding-top: 35px !important;   /* ✅ เพิ่มระยะห่างภายในกล่อง */
  margin-top: 0 !important;       /* ✅ ป้องกันไม่ให้ดันทั้งกล่องลง */
  color: #1A76D1 !important;
  font-size: 2rem !important;
  font-weight: 600 !important;
}



/* สำหรับหน้าจอมือถือ */
@media (max-width: 768px) {
  .container h1 {
    margin-top: 20px;      /* ✅ ลดช่องว่างบนในจอเล็ก */
    font-size: 1.6rem;
  }
}



/* หัวข้อหลัก */
h1 {
  font-size: 1.8rem; /* ขนาดตัวอักษรใหญ่ */
  color: #1A76D1; /* สีฟ้า */
  margin-bottom: 5px; /* เว้นด้านล่างเล็กน้อย */
}

/* หัวข้อย่อย */
h2 {
  color: #1A76D1; /* สีฟ้า */
  font-size: 1.2rem;
  margin-top: 5px; /* เว้นด้านบน */
  margin-bottom: 5px; /* เว้นด้านล่าง */
  padding-bottom: 3px;
}

/* รายการลิงก์ที่มี class เป็น linklist */
ul.linklist {
  padding-left: 20px; /* ขยับเข้าด้านซ้าย */
  margin: 0;
}

/* แต่ละรายการในรายการลิงก์ */
ul.linklist li {
  font-size: 1rem; /* ขนาดอักษรเล็กน้อย */
  margin-bottom: 6px; /* เว้นด้านล่าง */
  color: #666 !important;  /* สีของจุด bullet */  
  
}

/* สีปกติของลิงก์ (เทาเข้ม) */
ul.linklist li a {
  color: #444 !important;
  font-weight: normal !important;
  text-decoration: none;
  transition: 0.2s ease;
}

/* สีเมื่อ hover (น้ำเงิน) */
ul.linklist li a:hover {
  color: #1A76D1 !important;
}


ul.linklist li,
ul.linklist li a {
  font-weight: normal !important;
}


/* ช่องว่างด้านบนของแต่ละ section */
.section {
  padding-top: 10px;
}

/* กริดสำหรับการ์ดผู้บริหาร */
.executive-grid {
  display: flex; /* ใช้ flexbox */
  justify-content: center; /* จัดกลางแนวนอน */
  flex-wrap: wrap; /* ขึ้นบรรทัดใหม่เมื่อเต็ม */
  gap: 30px; /* ระยะห่างระหว่างการ์ด */
  margin-bottom: 40px; /* เว้นด้านล่าง */
}

/* กล่องของแต่ละผู้บริหาร */
.executive-card {
  width: 240px; /* ความกว้างคงที่ */
  background: #fafafa; /* สีพื้นเทาอ่อน */
  border: 1px solid #ddd; /* ขอบสีเทา */
  border-radius: 10px; /* มุมมน */
  text-align: center; /* จัดข้อความกึ่งกลาง */
  box-shadow: 0 1px 6px rgba(0,0,0,0.05); /* เงาเบา ๆ */
  overflow: hidden; /* ป้องกันภาพล้น */
}

/* รูปภาพของผู้บริหาร */
.executive-card img {
  width: 100%; /* กว้างเต็ม */
  height: 280px; /* ความสูงคงที่ */
  object-fit: cover; /* ครอบภาพโดยไม่ยืด */
}

/* พื้นที่ใส่ข้อมูลชื่อและตำแหน่ง */
.executive-info {
  padding: 15px; /* ช่องว่างด้านใน */
}

/* ชื่อของผู้บริหาร */
.executive-info h3 {
  margin: 10px 0 5px; /* ระยะห่างรอบตัว */
  font-size: 1.1rem;
  color: #333; /* สีเทาเข้ม */
}

/* ตำแหน่งของผู้บริหาร */
.executive-info p {
  margin: 2px 0;
  font-size: 0.95rem;
  color: #666; /* สีเทาอ่อน */
}

/* แผนที่และข้อความที่อยู่ */
.contact-section {
  padding: 20px;
}

.contact-address {
  font-size: 1.1rem;
  margin-bottom: 20px;
  line-height: 1.8;
}

.map-container {
  width: 100%;
  height: 400px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== ฟอร์มแสดงความคิดเห็น ===== */
.comment-form {
  max-width: 500px;
  margin: 30px auto;
}

.comment-form h2 {
  text-align: center;
  color: #014421;
  margin-bottom: 20px;
  font-size: 1.2rem;
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1rem;
  background-color: #e5e5e5;
  border: none;
  border-radius: 4px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

.comment-form button {
  width: 100%;
  padding: 12px;
  background-color: #1A76D1;
  color: white;
  font-size: 1rem;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.comment-form button:hover {
  background-color: #012142;
}


/* ===== หัวข้อชมรมจริยธรรม ===== */

h3 {
  color: #1A76D1; /* สีฟ้า */
  font-size: 1.7rem;
  margin-top: 5px; /* เว้นด้านบน */
  margin-bottom: 5px; /* เว้นด้านล่าง */
  padding-bottom: 3px;
  border-bottom: 1px solid #e0e0e0; /* เส้นขีดใต้ */
}


.container.ethics {
  max-width: 1125px !important;
  width: 95% !important;
  padding: 30px;
  margin-top: 20px;
  border-radius: 10px;
}