body {
    font-family: Anuphan;
    font-weight: 300;
    margin: 0;
    padding: 0;
	
}

h1, h2, h3, h4, h5, h6 {
    font-family: Anuphan; /* ใช้ฟอนต์ Anuphan สำหรับหัวข้อ */
    font-weight: 700; /* ใช้ฟอนต์น้ำหนักหนา */
}

.navbar, .footer, .card-body {
    font-family: Anuphan; /* ใช้ฟอนต์ Anuphan ในส่วนต่างๆ */
}

.pro-image {
    width: 150px; /* ขนาดที่เหมาะสม */
    height: 150px; /* ขนาดที่เหมาะสม */
    margin-top: -180px;
    object-fit: cover; /* ครอปภาพให้อยู่ในกรอบ */
    border: 5px solid #fff;
    border-radius: 50%; /* ทำให้รูปเป็นวงกลม */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* เพิ่มเงาให้รูปภาพ */
    z-index: 10;
}

.table {
    width: 100%; /* ทำให้ตารางขยายเต็มความกว้าง */
    border-collapse: collapse; /* รวมขอบตาราง */
    margin-top: 20px;
}

.table td, .table th {
    padding: 15px; /* เพิ่มระยะห่างระหว่างเซลล์ */
    border: 1px solid #ddd; /* เพิ่มขอบให้เซลล์ */
}

.table th {
    text-align: center; /* จัดตำแหน่งหัวข้อเป็นกลาง */
    background-color: #f8f9fa; /* เปลี่ยนสีพื้นหลังของหัวตาราง */
    font-weight: bold;
}

.table td {
    text-align: center; /* จัดตำแหน่งข้อมูลในเซลล์ */
}

.table-striped tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* เพิ่มสีพื้นหลังให้แถวที่เป็นเลขคี่ */
}

.table-hover tbody tr:hover {
    background-color: #e9ecef; /* เพิ่มเอฟเฟกต์เมื่อวางเมาส์บนแถว */
}
.header-image {
    width: 100%; /* ความกว้างเต็มจอ */
    height: 20%; /* ลดความสูงของภาพให้เหลือ 20% */
    object-fit: cover; /* ครอปภาพให้อยู่ในกรอบ */
    object-position: center center; /* จัดให้อยู่ตรงกลาง */
}
.sarabun-thin {
  font-family: "Sarabun", serif;
  font-weight: 100;
  font-style: normal;
}

.sarabun-extralight {
  font-family: "Sarabun", serif;
  font-weight: 200;
  font-style: normal;
}

.sarabun-light {
  font-family: "Sarabun", serif;
  font-weight: 300;
  font-style: normal;
}

.sarabun-regular {
  font-family: "Sarabun", serif;
  font-weight: 400;
  font-style: normal;
}

.sarabun-medium {
  font-family: "Sarabun", serif;
  font-weight: 500;
  font-style: normal;
}

.sarabun-semibold {
  font-family: "Sarabun", serif;
  font-weight: 600;
  font-style: normal;
}

.sarabun-bold {
  font-family: "Sarabun", serif;
  font-weight: 700;
  font-style: normal;
}

.sarabun-extrabold {
  font-family: "Sarabun", serif;
  font-weight: 800;
  font-style: normal;
}

.sarabun-thin-italic {
  font-family: "Sarabun", serif;
  font-weight: 100;
  font-style: italic;
}

.sarabun-extralight-italic {
  font-family: "Sarabun", serif;
  font-weight: 200;
  font-style: italic;
}

.sarabun-light-italic {
  font-family: "Sarabun", serif;
  font-weight: 300;
  font-style: italic;
}

.sarabun-regular-italic {
  font-family: "Sarabun", serif;
  font-weight: 400;
  font-style: italic;
}

.sarabun-medium-italic {
  font-family: "Sarabun", serif;
  font-weight: 500;
  font-style: italic;
}

.sarabun-semibold-italic {
  font-family: "Sarabun", serif;
  font-weight: 600;
  font-style: italic;
}

.sarabun-bold-italic {
  font-family: "Sarabun", serif;
  font-weight: 700;
  font-style: italic;
}

.sarabun-extrabold-italic {
  font-family: "Sarabun", serif;
  font-weight: 800;
  font-style: italic;
}