/* ทำให้ทั้ง Card เป็นลิงก์ที่ไม่มีขีดเส้นใต้ */
.team-member-link {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}
.team-member-link:hover .team-member {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.team-member {
  /* สไตล์หลักของ Card */
  text-align: center;
  padding: 30px 20px;
  background: #fff;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
  transition: all 0.3s;
  width: 100%;
  height: 100%;
}
.team-member .member-icon {
  /* สไตล์ของไอคอน */
  font-size: 48px;
  line-height: 1;
  margin-bottom: 15px;
  color: var(--accent-color); /* ใช้สีหลักของ Template */
}
.team-member .member-info {
  /* สไตล์ของข้อความ */
  padding-top: 10px;
}
.team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
  color: var(--default-color);
}
.team-member .member-info span {
  display: block;
  font-size: 14px;
  color: #6c757d;
}
/* 
  ================================================
  ปรับแต่งปุ่มดาวน์โหลด PDF แบบ Custom
  ================================================
*/

.btn-download-custom {
  --bs-btn-color: var(--bs-danger);
  --bs-btn-border-color: #ced4da;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
}

.btn-download-custom .bi-file-earmark-pdf-fill {
  color: var(--bs-danger);
  margin-right: 4px;
}

.btn-download-custom:hover .bi-file-earmark-pdf-fill {
  color: #fff;
}

/* 
================================================
Custom Timeline Component
================================================
*/
/* 
================================================
Custom Timeline Component (Updated for 2 Columns)
================================================
*/
.timeline {
  position: relative;
  padding: 20px 0;
}
.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20px;
  height: 100%;
  width: 4px;
  background: #e9ecef;
  border-radius: 2px;
}
.timeline-item {
  position: relative;
  margin-bottom: 30px;
  padding-left: 60px;
}
/* ทำให้ Timeline Item สุดท้ายไม่มีระยะห่างด้านล่าง */
.timeline-item:last-child {
  margin-bottom: 0;
}
.timeline-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background: var(--accent-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 4px solid #f8f9fa;
}
.timeline-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
}
.timeline-content h4 {
  font-size: 16px; /* ปรับขนาดฟอนต์ให้เล็กลงเล็กน้อย */
  font-weight: 700;
  margin-bottom: 10px;
}
.hero.dark-background:before {
  background-color: rgba(0, 0, 0, 0.1); /* เลขสุดท้ายคือความโปร่งใส (0.0 ถึง 1.0) */
}

/* เปลี่ยนสีลิงก์เมนูปกติ */
.navmenu a {
  color: #555555; /* สีเทาเข้ม */
}

/* เปลี่ยนสีลิงก์เมื่อเอาเมาส์ไปชี้ (Hover) และลิงก์ที่ Active อยู่ */
.navmenu a:hover,
.navmenu .active {
  color: var(--accent-color); /* ใช้สีหลักของ Template (สีแดง/สีน้ำเงิน) */
}

/* เปลี่ยนสีลูกศรของ Dropdown */
.navmenu .toggle-dropdown {
  color: #555555; /* สีเทาเข้ม */
}

/* แก้ไขเฉพาะจุด: ปรับแต่งการแสดงผลภาพ Hero ให้เห็นรายละเอียดด้านล่างมากขึ้น */
.index-page .hero {
    min-height: 110vh; /* ขยายความสูงเพิ่มจากมาตรฐาน 100vh เป็น 110vh เพื่อดึงพื้นที่ด้านล่าง */
}

.index-page .hero img {
    object-position: center bottom; /* สั่งให้ยึดขอบล่างของภาพเป็นหลัก ไม่ให้โดนตัดส่วนล่าง */
}

/* --- ปรับแต่งสีตัวอักษรบน Header (เฉพาะจุด) --- */

/* 1. สีของชื่อหน่วยงาน (Logo) */
.header .logo h1 {
    color: #4b0082 !important; /* สีม่วงเข้มโทนเดียวกับ Footer เพื่อความสอดคล้อง */
}

/* ปรับสีเมนูให้ดูนุ่มนวลและเป็นพาสเทลมากขึ้น */

/* 1. สีเมนูสภาวะปกติ (เปลี่ยนจากดำเป็นสีเทาอมม่วงเข้ม อ่านง่ายแต่ไม่แข็ง) */
.navmenu a, 
.navmenu a:focus {
    color: #4a4e69 !important; 
    font-weight: 500;
}

/* ปรับสีเมนูตอนเอาเมาส์ชี้ ให้ตัดกับ Background ฟ้าพาสเทล */

.navmenu a:hover, 
.navmenu .active, 
.navmenu .active:focus,
.navmenu li:hover > a {
    color: #a29bfe !important; /* เปลี่ยนเป็นม่วงพาสเทลสว่าง เพื่อให้ตัดกับสีฟ้าของรูป Background */
}

/* ปรับเส้นขอบด้านบนของ Dropdown ให้เป็นสีม่วงเข้าชุดกัน */
.navmenu .dropdown ul {
    border-top: 3px solid #a29bfe; 
}

/* เพิ่มสีพื้นหลังอ่อนๆ เวลา Hover ในรายการ Dropdown ให้ดูเนี้ยบขึ้น */
.navmenu .dropdown ul a:hover {
    background-color: #f8f7ff; 
    color: #a29bfe !important;
}