h1, h2, h3, h4, h5, h6, .edn_article h1, .edn_article h2, .edn_article h3, p_prof {
  font-family: "Srinakharinwirot", sans-serif;
  font-weight: 600;
}

/* custom.css */

/* Container หลักสำหรับบุคลากรทั้งหมด */
.personnel-container {
    display: flex; /* ใช้ Flexbox เพื่อจัดเรียง card */
    flex-wrap: wrap; /* ให้ขึ้นบรรทัดใหม่เมื่อเนื้อที่ไม่พอ */
    justify-content: center; /* จัดให้อยู่ตรงกลาง (หรือ space-around/between) */
    gap: 20px; /* ระยะห่างระหว่าง card */
    padding: 30px 5%; /* เพิ่มขอบขาวด้านข้างเพื่อความสวยงาม */
    max-width: 1200px; /* จำกัดความกว้างสูงสุดของ container */
    margin: 0 auto; /* จัดให้อยู่กึ่งกลางหน้าจอ */
    font-family: 'Roboto', 'Arial', sans-serif; /* ใช้ Font ที่อ่านง่าย */
    color: #333; /* สีตัวอักษร */
}

/* Card ของแต่ละบุคคล */
.personnel-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column; /* จัดองค์ประกอบภายใน card จากบนลงล่าง */
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวนอน */
    padding: 15px;
    width: calc(25% - 20px); /* 4 ช่องต่อแถว ลบ gap ออก */
    width: calc(25% - 20px); /* 4 ช่องต่อแถว */
    min-width: 250px; /* ป้องกันการ์ดลีบแบน (ปรับขนาดพิกเซลตามความเหมาะสมของรูปภาพได้) */
    flex: 1 1 calc(25% - 20px);
    box-sizing: border-box; /* สำคัญเพื่อให้ padding/border ไม่เกินขนาด */
    transition: transform 0.2s ease-in-out; /* เพิ่ม animation เวลา hover */
    text-align: center;
}

.personnel-card:hover {
    transform: translateY(-5px); /* ยก card ขึ้นเล็กน้อยเมื่อ hover */
}

/* รูปภาพบุคลากร */
.personnel-image {
    width: 200px; /* กำหนดขนาดรูปภาพที่เล็กลง */
    height: 200px;
    border-radius: 50%; /* ทำให้รูปภาพเป็นวงกลม */
    overflow: hidden; /* ซ่อนส่วนเกินของรูปภาพ */
    margin-bottom: 10px;
    border: 2px solid #007bff; /* เพิ่มขอบสีสวยงาม */
    display: flex; /* ใช้ flex เพื่อจัดรูปภาพให้อยู่ตรงกลางของวงกลม */
    justify-content: center;
    align-items: center;
}

.personnel-image img {
    width: 100%; /* ให้รูปภาพเต็มพื้นที่ของวงกลม */
    height: 100%;
    object-fit: cover; /* ครอปรูปภาพให้พอดีกับวงกลมโดยไม่เสียสัดส่วน */
}

/* ข้อมูลบุคลากร */
.personnel-info p {
    margin: 5px 0; /* ระยะห่างระหว่างบรรทัดข้อมูล */
    line-height: 1.4; /* ปรับ line-height เพื่อให้อ่านง่าย */
}

.personnel-info .name-th {
    font-size: 1.0em; /* ปรับขนาดตัวอักษรไทยให้เล็กและอ่านง่าย */
    font-weight: bold;
    color: #0056b3; /* สีเข้มขึ้นเล็กน้อย */
}

.personnel-info .name-en {
    font-size: 0.9em; /* ภาษาอังกฤษเล็กกว่าเล็กน้อย */
    color: #555;
}

.personnel-info .contact-email,
.personnel-info .contact-ext {
    font-size: 0.8em; /* ข้อมูลติดต่อเล็กที่สุด */
    color: #777;
}

/* Responsive Design สำหรับหน้าจอขนาดต่างๆ */
@media (max-width: 992px) { /* สำหรับ Tablet และหน้าจอขนาดกลาง */
    .personnel-card {
        width: calc(33.33% - 20px); /* 3 คนต่อแถว */
    }
}

@media (max-width: 768px) { /* สำหรับ Tablet ขนาดเล็ก */
    .personnel-card {
        width: calc(50% - 20px); /* 2 คนต่อแถว */
    }
    .personnel-container {
        padding: 20px 3%;
    }
    .personnel-image {
        width: 100px;
        height: 100px;
    }
    .personnel-info .name-th {
        font-size: 0.95em;
    }
    .personnel-info .name-en {
        font-size: 0.85em;
    }
    .personnel-info .contact-email,
    .personnel-info .contact-ext {
        font-size: 0.75em;
    }
}

@media (max-width: 576px) { /* สำหรับโทรศัพท์มือถือ */
    .personnel-card {
        width: calc(100% - 20px); /* 1 คนต่อแถว */
    }
    .personnel-container {
        padding: 15px 2%;
    }
    .personnel-image {
        width: 100px;
        height: 100px;
    }
}


.swu-banner-img {
    width: 100%;       /* ปรับขนาดความกว้างเต็มพื้นที่กล่องหุ้มภายนอก */
    max-width: 350px;  /* บล็อกขนาดสูงสุดไม่ให้รูปใหญ่เกินไป */
    height: 120px;     /* กำหนดความสูงที่ต้องการให้เท่ากันทุกรูป */
    object-fit: contain; /* ป้องกันรูปเบี้ยว */
    border: 1px solid #eaeaea; /* เพิ่มกรอบบางๆ (ถ้าต้องการ) */
    border-radius: 4px; /* มุมโค้งเล็กน้อยเพื่อให้ดูทันสมัย */
    box-sizing: border-box;
}
/*ส่วนของหน้าข่าว readmore 6 block*/
/* ==========================================================
   ส่วนที่ 1: ตั้งค่าสีพื้นฐาน (CSS Variables)
   ========================================================== */
.ai-news-tabs {
  --accent: #1e88e5; /* 🎨 สีหลักของระบบ (สีของปุ่มแท็บตอนที่กดเลือก) เปลี่ยนรหัสสีตรงนี้ได้ */
  --border: #e7e7e7; /* สีเส้นขอบการ์ดและปุ่ม */
  --text: #111;      /* สีของตัวอักษรหัวข้อข่าว */
  --muted: #666;     /* สีตัวอักษรจาง */
}

/* ซ่อนปุ่มวิทยุ (Radio) ตัวจริงไม่ให้เห็น */
.ai-news-tabs__radio {
  position: absolute;
  left: -9999px;
}

/* จัดวางปุ่มแท็บให้อยู่แนวนอนเรียงกัน */
.ai-news-tabs__bar {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* สไตล์ของปุ่มแท็บปกติ (ตอนยังไม่ได้กดเลือก) */
.ai-news-tabs__tab {
  cursor: pointer;
  user-select: none;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 999px; /* ความโค้งมนแบบวงรีแคปซูล */
  background: #fff;
  color: var(--text);
  font-weight: 700;
  line-height: 1;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* ==========================================================
   ส่วนที่ 2: กลไกสลับแท็บ (เปิด-ปิด) ตอนกดคลิก
   ========================================================== */
/* เมื่อแท็บไหนโดนเลือก (Checked) ให้เปลี่ยนปุ่มแท็บนั้นเป็นสีหลัก (--accent) */
#aiTab-announce:checked ~ .ai-news-tabs__bar label[for="aiTab-announce"],
#aiTab-activity:checked ~ .ai-news-tabs__bar label[for="aiTab-activity"],
#aiTab-other:checked ~ .ai-news-tabs__bar label[for="aiTab-other"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* ปกติให้ซ่อนเนื้อหาข่าวทุกหมวดไว้ก่อน */
.ai-news-tabs__panel {
  display: none;
}

/* แท็บไหนโดนเช็ค ให้แสดงเนื้อหาของหมวดนั้น ๆ ออกมา */
#aiTab-announce:checked ~ .ai-news-tabs__panel--announce { display: block; }
#aiTab-activity:checked ~ .ai-news-tabs__panel--activity { display: block; }
#aiTab-other:checked ~ .ai-news-tabs__panel--other { display: block; }


/* ==========================================================
   ส่วนที่ 3: จัดการ Grid (การแบ่ง 3 คอลัมน์) และกล่องการ์ดข่าว
   ========================================================== */
/* ตัวคุมแถวข่าว แบ่งหน้าจอเป็น 3 หน้าต่างเท่ากัน */
.ai-news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px; /* ระยะห่างระหว่างกล่องข่าว */
}

/* โครงสร้างกล่องข่าว 1 ใบ */
.ai-news-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px; /* ความโค้งมนของขอบกล่องข่าว */
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: transform .18s ease, box-shadow .18s ease;
  display: flex;
  flex-direction: column;
}

/* เอฟเฟกต์ตอนเอาเมาส์ไปชี้การ์ดข่าว (การ์ดจะลอยขึ้นนิดนึง) */
.ai-news-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* ช่องใส่รูปภาพข่าว */
.ai-news-card__thumb {
  display: block;
  background: #f3f4f6;
  aspect-ratio: 3/2; /* สัดส่วนรูปภาพ 3:2 (กว้าง 3 ส่วน สูง 2 ส่วน) */
  overflow: hidden;
}

.ai-news-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* บังคับให้รูปภาพตัดพอดีกรอบ ไม่เบี้ยว */
  display: block;
}

/* ข้อความหัวข้อข่าว */
.ai-news-card__title {
  margin: 0;
  padding: 12px 14px 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
}

.ai-news-card__title a {
  color: var(--text);
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* ✂️ จำกัดให้แสดงหัวข้อข่าวไม่เกิน 2 บรรทัด (ถ้ายาวกว่านั้นจะเป็น ...) */
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(1.35em * 2); /* ล็อคความสูงของตัวหนังสือให้เท่ากัน การ์ดจะได้สูงเท่ากัน */
}

/* ปุ่ม Read more */
.ai-news-card__more {
  margin: 12px 14px 14px;
  align-self: flex-start;
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(30,136,229,.10); /* สีพื้นหลังฟ้าจาง ๆ */
  color: #0b63b6; /* สีตัวอักษร Read more */
  text-decoration: none;
  font-weight: 800;
  transition: background .15s ease, color .15s ease;
}

/* ตอนเอาเมาส์ชี้ปุ่ม Read more */
.ai-news-card__more:hover {
  background: var(--accent);
  color: #fff;
}


/* ==========================================================
   ส่วนที่ 4: Responsive (รองรับหน้าจอแท็บเล็ต / มือถือ)
   ========================================================== */
/* หน้าจอขนาดกลาง (เช่น แท็บเล็ต) จะปรับการแสดงผลเหลือ 2 การ์ดต่อแถว */
@media (max-width: 992px) {
  .ai-news-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* หน้าจอขนาดเล็ก (เช่น มือถือ) จะปรับเหลือ 1 การ์ดต่อแถวเดี่ยว */
@media (max-width: 576px) {
  .ai-news-grid {
    grid-template-columns: 1fr;
  }
}