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;
}

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

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

/* เอฟเฟกต์เมื่อนำเมาส์ไปวางเหนือการ์ด */
.personnel-card:hover {
    transform: translateY(-5px); /* ยกลอยการ์ดขึ้นด้านบนเล็กน้อย 5px */
}

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

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

/* ==========================================================================
   4. ส่วนข้อมูลรายละเอียดตัวอักษร
   ========================================================================== */
.personnel-info {
    flex-grow: 1;              /* สำคัญ: ยืดพื้นที่ข้อความเพื่อดันปุ่มด้านล่างให้ตรงกันทุกการ์ด */
    margin-bottom: 15px;
}

.personnel-info p {
    margin: 5px 0;
    line-height: 1.4;
}

.personnel-info .name-th {
    font-size: 1.0em;
    font-weight: bold;
    color: #0056b3;            /* สีน้ำเงินเข้มสำหรับชื่อภาษาไทย */
}

.personnel-info .name-en {
    font-size: 0.9em;
    color: #555555;
}

.personnel-info .contact-email,
.personnel-info .contact-ext {
    font-size: 0.8em;
    color: #777777;
}

/* ==========================================================================
   5. ปุ่มลิงก์ไปยังเว็บไซต์ส่วนตัว (Personal Website Button)
   ========================================================================== */
.btn-website {
    display: inline-block;
    margin-top: auto;          /* ผลักปุ่มลงไปชิดขอบล่างสุดของการ์ดเสมอ */
    padding: 8px 16px;
    font-size: 0.85em;
    font-weight: 500;
    color: #ffffff !important; /* ใช้ !important เพื่อป้องกัน Theme พื้นฐานของ DNN มาทับสีตัวอักษร */
    background-color: #800000; /* สีพื้นหลังปุ่ม (ปรับเปลี่ยนสีตามต้องการได้) */
    border-radius: 20px;       /* ทำมุมโค้งมนทรงแคปซูล */
    text-decoration: none !important; /* ซ่อนเส้นใต้ลิงก์ */
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* เอฟเฟกต์เมื่อนำเมาส์ไปวางเหนือปุ่ม */
.btn-website:hover {
    background-color: #0056b3; /* ปรับสีพื้นหลังให้เข้มขึ้น */
    color: #ffffff !important;
    transform: translateY(-2px); /* ปุ่มลอยขึ้นเล็กน้อย 2px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    text-decoration: none !important;
}

/* ==========================================================================
   6. Responsive Design (การรองรับขนาดหน้าจออุปกรณ์ต่าง ๆ)
   ========================================================================== */
/* สำหรับ แท็บเล็ต และหน้าจอขนาดกลาง (ความกว้างไม่เกิน 992px) */
@media (max-width: 992px) {
    .personnel-card {
        width: calc(33.33% - 20px);  /* แสดง 3 การ์ดต่อแถว */
        max-width: calc(33.33% - 20px);
        flex: 1 0 calc(33.33% - 20px);
    }
}

/* สำหรับ แท็บเล็ตขนาดเล็ก (ความกว้างไม่เกิน 768px) */
@media (max-width: 768px) {
    .personnel-card {
        width: calc(50% - 20px);     /* แสดง 2 การ์ดต่อแถว */
        max-width: calc(50% - 20px);
        flex: 1 0 calc(50% - 20px);
    }
    .personnel-container {
        padding: 20px 3%;
    }
    .personnel-image {
        width: 120px;                 /* ปรับย่อรูปโปรไฟล์ลง */
        height: 120px;
    }
    .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; }
}

/* สำหรับ สมาร์ทโฟนมือถือ (ความกว้างไม่เกิน 576px) */
@media (max-width: 576px) {
    .personnel-card {
        width: 100%;                 /* แสดงเต็มความกว้าง 1 การ์ดต่อแถว */
        max-width: 100%;
        flex: 1 0 100%;
    }
    .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;
}