body {
    margin: 0;
    padding: 0;
    font-family: 'Anton', sans-serif;
    background-color: black;
}
.head-img {
    position: relative; /* 1. ทำให้ div นี้เป็นจุดอ้างอิงสำหรับตำแหน่ง absolute ขององค์ประกอบลูก */
    height: 90vh;      /* 2. กำหนดความสูงของพื้นที่นี้ */
    overflow: hidden;  /* 3. ซ่อนส่วนเกินของรูปภาพถ้ามี */
    display: flex;     /* 4. ใช้ flexbox เพื่อจัดรูปภาพให้อยู่กลาง (ถ้าอยากให้รูปภาพเต็มพื้นที่เป๊ะๆ) */
    justify-content: center;
    align-items: center;
    
    
}

.head-img img.head-image { /* เลือกรูปภาพโดยตรง */
    width: 100%;       /* 5. ทำให้รูปภาพกว้างเต็ม div.head-img */
    height: 100%;      /* 6. ทำให้รูปภาพสูงเต็ม div.head-img */
     /* 7. รักษาสัดส่วนรูปภาพและครอบคลุมพื้นที่ */
    position: absolute; /* 8. ทำให้รูปภาพลอยอยู่บนพื้นหลัง (ถ้ามี) แต่ยังเป็นส่วนหนึ่งของ .head-img */
    top: 0;
    left: 0;
    z-index: 1; /* 9. กำหนด z-index ให้รูปภาพอยู่ชั้นล่างกว่าข้อความ */
}

.box-head {
    position: absolute; /* 10. ทำให้กล่องข้อความลอยอยู่เหนือรูปภาพ */
    
     /* สร้างระยะห่างภายในกล่อง */
    
    /* 11. จัดตำแหน่งให้กล่องอยู่มุมขวาล่าง */
    bottom: 120px; /* ห่างจากขอบล่าง 60px */
    right: 45px;  /* ห่างจากขอบขวา 60px */
    
    z-index: 3; /* 12. กำหนด z-index ให้ข้อความอยู่ชั้นบนกว่ารูปภาพ */
}

.head-text {
    font-family: 'Anton', sans-serif;
    color: white;
    font-size: 6.5rem;
    line-height: 1.4;
    font-weight: lighter;
    margin: 0; /* ลบ margin เริ่มต้นของ h1 ออก */
}
.career-content {
    max-width: 970px;
    margin: 80px auto;
    padding: 0 20px;
    color: #cccccc;
}

.intro-text p {
    font-family: 'IBM Plex Sans Thai Looped', sans-serif;
    font-size: 1.3em;
    line-height: 1.8;
    text-align: left;
}

.cta-button-container {
    text-align: center;
    margin-top: 40px;
}

.cta-button {
    display: inline-block;
    border: 1px solid white;
    border-radius: 10px;
    color: white;
    padding: 12px 30px;
    text-decoration: none;
    font-family: 'IBM Plex Sans Thai Looped', sans-serif;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1.3rem;
    margin-top: 50px;
}

.cta-button:hover {
    background-color: white;
    color: black;
}

/* ===== Section ตารางตำแหน่งงาน ===== */
.jobs-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 20px;
    align-items: center;
    justify-content: center;
    align-items: center;
}

.jobs-header p {
    font-family: 'Anton', sans-serif;
    font-size: 3.2em;
    color: white;
    
    
   
}

.jobs-table table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    color: #ffffff;
}

.jobs-table th {
    text-align: left;
    padding: 15px 10px;
    border-bottom: 1px solid #ffffff;
    border-top: 1px solid #ffffff;
    font-family: 'IBM Plex Sans Thai Looped', sans-serif;
}
.jobs-table td {
    text-align: left;
    padding: 15px 10px;
    border-bottom: 1px solid #555;
    font-family: 'IBM Plex Sans Thai Looped', sans-serif;
    font-size: 1rem;
}
.jobs-table th {
    color: #ffffff;
    font-size: 1.3em;
    text-transform: uppercase;
}

/* ===== Section ข้อมูลติดต่อ ===== */
.contact-section {
    max-width: 1200px;
    margin: 100px auto 40px auto;
    padding: 0 20px;
    font-family: 'IBM Plex Sans Thai Looped', sans-serif;
    color: #cccccc;
}



.contact-title {
    color: #a0a0a0;
    font-size: 1.8rem;
    /* --- เพิ่ม 3 บรรทัดนี้เพื่อสร้างเส้นใต้ --- */
    border-bottom: 2px solid #fffefe96;  /* 1. สร้างเส้นขอบด้านล่าง */
    padding-bottom: 10px;           /* 2. สร้างระยะห่างระหว่างข้อความกับเส้น */
    margin-bottom: 30px;            /* 3. สร้างระยะห่างระหว่างเส้นกับเนื้อหาข้างล่าง */
}

.company-name {
    font-weight: 700;
    color: white;
    font-size: 2.3em;
    margin-bottom: 0px;
    margin-top: 0px;
}


.contact-details address,
.contact-details .phone,
.contact-details .email {
    margin-top: 15px;
    line-height: 1.7;
    font-style: normal;
    font-size: 1.3rem;
   
}
.contact-details .phone,
.contact-details .email {
    display: flex;
    align-items: center; /* จัดให้อยู่กึ่งกลางแนวตั้ง */
    
    margin-bottom: 10px;
    line-height: 1.7;
    font-style: normal;
    gap: 10px;
}
.contact-details .contact-icon {
    width: 20px;         /* ขนาดความกว้างของไอคอน (ปรับได้) */
    height: 20px;        /* ขนาดความสูงของไอคอน (ปรับได้) */
    object-fit: contain; /* รักษาสัดส่วนของรูปภาพและให้พอดีกับขนาดที่กำหนด */
      /* ระยะห่างด้านขวาของไอคอน */
}

.site-info {
    border-top: 1px solid #555;
    margin-top: 40px;
    padding-top: 20px;
    text-align: center;
    color: #888;
    font-size: 0.9em;
}
.footer-text{
    font-size: 1.1rem;
    color: #a0a0a0;
}
@media (max-width: 768px){
.head-img {
    position: relative; /* 1. ทำให้ div นี้เป็นจุดอ้างอิงสำหรับตำแหน่ง absolute ขององค์ประกอบลูก */
    height: 40vh;      /* 2. กำหนดความสูงของพื้นที่นี้ */
    overflow: hidden;  /* 3. ซ่อนส่วนเกินของรูปภาพถ้ามี */
    display: flex;     /* 4. ใช้ flexbox เพื่อจัดรูปภาพให้อยู่กลาง (ถ้าอยากให้รูปภาพเต็มพื้นที่เป๊ะๆ) */
    justify-content: center;
    align-items: center;
    
    
}

.head-img img.head-image { /* เลือกรูปภาพโดยตรง */
    width: 100%;       /* 5. ทำให้รูปภาพกว้างเต็ม div.head-img */
    height: 100%;      /* 6. ทำให้รูปภาพสูงเต็ม div.head-img */
    /* 7. รักษาสัดส่วนรูปภาพและครอบคลุมพื้นที่ */
    position: absolute; /* 8. ทำให้รูปภาพลอยอยู่บนพื้นหลัง (ถ้ามี) แต่ยังเป็นส่วนหนึ่งของ .head-img */
    top: 0;
    left: 0;
    z-index: 1; /* 9. กำหนด z-index ให้รูปภาพอยู่ชั้นล่างกว่าข้อความ */
}

.head-text{
    font-size: 2.5rem;
}

.box-head {
    position: absolute; /* 10. ทำให้กล่องข้อความลอยอยู่เหนือรูปภาพ */
    
     /* สร้างระยะห่างภายในกล่อง */
    
    /* 11. จัดตำแหน่งให้กล่องอยู่มุมขวาล่าง */
    bottom: 70px; /* ห่างจากขอบล่าง 60px */
    right: 20px;  /* ห่างจากขอบขวา 60px */
    
    z-index: 3; /* 12. กำหนด z-index ให้ข้อความอยู่ชั้นบนกว่ารูปภาพ */
}
.career-content{
    padding:0 ;
    margin-top: 30px;
    max-width: 300px ;
}
.intro-text p{
    font-size: 0.8em;
    
}
.cta-button{
    font-size: 0.8rem;
}
.jobs-header p{
    font-size:2rem ;
}
.jobs-table th{
    font-size: 0.7rem;
}
.jobs-table td{
    font-size: 0.6rem;
}

.contact-title{
    font-size: 1rem;
}
.company-name{
    font-size:0.9rem ;
}
.contact-details address, .contact-details .phone, .contact-details .email{
    font-size: 0.9rem;
}
.contact-section{
    max-width: 300px;
    margin-left: 10px;
}
.footer-text {
    font-size: 0.5rem;
}
}
@media (min-width: 768px) and (max-width: 1024px) {

    .head-img {
    /* เช่น อาจจะปรับความสูงของ container */
    height: 45vh; 
  }
}