/* ===== General Styling ===== */
body {
    margin: 0;
    padding: 0;
    font-family: 'Anton', sans-serif; /* ใช้ฟอนต์ Taviraj หรือฟอนต์อื่นสำหรับเนื้อหา */
    background-image: url('../img/Bg-about.png'); /* สีพื้นหลังหลักของเว็บ */
    background: cover;
    background-position: 50% 70%;
    color: #e0e0e0; /* สีตัวอักษรหลัก */
    
}
p {
    font-family: 'IBM Plex Sans Thai Looped', sans-serif;
}
/* ===== ส่วนหัวที่คุณสร้าง (มีการแก้ไข) ===== */
.head-img {
    position: relative; /* 1. ทำให้ div นี้เป็นจุดอ้างอิงสำหรับตำแหน่ง absolute ขององค์ประกอบลูก */
    height: 100vh;      /* 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 */
    object-fit: cover; /* 7. รักษาสัดส่วนรูปภาพและครอบคลุมพื้นที่ */
    position: absolute; /* 8. ทำให้รูปภาพลอยอยู่บนพื้นหลัง (ถ้ามี) แต่ยังเป็นส่วนหนึ่งของ .head-img */
    top: 0;
    left: 0;
    z-index: 1; /* 9. กำหนด z-index ให้รูปภาพอยู่ชั้นล่างกว่าข้อความ */
}
.head-img::before {
    content: '';             /* ต้องมีเสมอสำหรับ ::before */
    position: absolute;      /* ทำให้ลอยทับได้ */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2); /* << สีที่คุณต้องการ */
    z-index: 2;              /* ให้อยู่ชั้นบนกว่ารูปภาพ */
}
.box-head {
    position: absolute; /* 10. ทำให้กล่องข้อความลอยอยู่เหนือรูปภาพ */
    
     /* สร้างระยะห่างภายในกล่อง */
    
    /* 11. จัดตำแหน่งให้กล่องอยู่มุมขวาล่าง */
    bottom: 130px; /* ห่างจากขอบล่าง 60px */
    right: 400px;  /* ห่างจากขอบขวา 60px */
    
    z-index: 3; /* 12. กำหนด z-index ให้ข้อความอยู่ชั้นบนกว่ารูปภาพ */
}

.head-text {
    font-family: 'Anton', sans-serif;
    color: white;
    font-size: 5rem;
    line-height: 1.4;
    font-weight: lighter;
    margin: 0; /* ลบ margin เริ่มต้นของ h1 ออก */
}

.head-text2{
margin-left: 50px;

}
/* ===== ส่วนเนื้อหา About (เพิ่มใหม่) ===== */
.about-content {
    
    display: flex;
    justify-content: center;
    
}

.text-container {
    max-width: 600px; /* จำกัดความกว้างของเนื้อหาให้อ่านง่าย */
    margin-top: 50px;
}

.text-container p {
    font-size: 1.2rem;
    line-height: 1.8;
    margin-bottom: 25px;

}
.hrbutton {
    width: 80%;
    margin: 20px auto;
    border: none;
    border-top: 2px solid #ccc;
    border-radius: 2px;
}
.footer-text {
    color: #ccc;
    font-size: 0.9rem;
    margin: 0 10% 25px;
    
}
/* ===== ส่วน Expertise (เพิ่มใหม่) ===== */

.title-container {
    /* ทำให้ h2 และเส้นอยู่ชิดซ้าย */
    display: flex; 
    justify-content: flex-start;
    /* หรือ center ถ้าต้องการให้อยู่ตรงกลาง */
}
.section-title {
    font-family: 'Anton', sans-serif;
    font-size: 3.9em;
    font-weight: 400;
    margin-bottom: 90px;
    color: white;
    margin-left: 160px;
    position: relative;
    display: inline-block;
}
.section-title::after {
    content: '';             /* 3. สร้าง element เสมือน (สำคัญมาก!) */
    position: absolute;      /* 4. ทำให้เส้นลอยตัวได้ */
    
    /* --- สไตล์ของเส้น --- */
    background-color: white; /* 5. สีของเส้น */
    width: 55%;              /* 6. ความยาวเส้น (เทียบกับความยาวข้อความ) */
    height: 2px;             /* 7. ความหนาเส้น */

    /* --- ตำแหน่งของเส้น --- */
    bottom: 0;               /* 8. ให้อยู่ชิดขอบล่าง (ของ padding ที่เราเว้นไว้) */
    right: 0;                 /* 9. ให้อยู่ชิดซ้าย */
}
.expertise-section {
    padding: 40px 20px 50px 20px; /* บน ซ้าย-ขวา ล่าง */
}
.expertise-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* สร้าง 2 คอลัมน์ */
    gap: 5px; /* ระยะห่างระหว่างรูป */
    
}

.expertise-item {
    position: relative; /* เพื่อให้ label ลอยทับได้ */
    overflow: hidden; /* ป้องกัน label เลยขอบ */
}
.expertise-item::before {
    content: '';          /* ต้องมีเสมอสำหรับ ::before */
    position: absolute;   /* ทำให้ลอยทับได้ */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15); /* << สีฟิล์มที่คุณต้องการ */
    z-index: 1;           /* 3. กำหนดให้อยู่ชั้นบนกว่ารูปภาพ */
    transition: background-color 0.3s ease; /* เพิ่มเอฟเฟกต์ตอน hover (ถ้าต้องการ) */
}

.expertise-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* ทำให้รูปเต็มกรอบโดยไม่เสียสัดส่วน */
    display: block;
}

/* ทำให้ item สุดท้ายกว้างเต็ม 2 คอลัมน์ */


.expertise-label {
    position: absolute;
    bottom: 20px;
    left: 34px;
    
    padding: 10px 15px;
    font-family: 'Anton', sans-serif;
    font-size: 1.9em;
    font-weight: 400;
    color: white;
    z-index: 2;
}
@media (max-width: 768px){
    body {
    margin: 0;
    padding: 0;
    font-family: 'Anton', sans-serif;
    color: #e0e0e0;

    /* --- ส่วนจัดการพื้นหลัง --- */
    background-image: url('../img/Bg-about.png'); /* 1. ระบุ URL ของรูปภาพ */
    background-size: cover;                      /* 2. ทำให้รูปขยายเต็มพื้นที่จอ โดยไม่เสียสัดส่วน */
             /* 3. จัดรูปให้อยู่กึ่งกลางเสมอ */
                  /* 4. ไม่ให้รูปแสดงซ้ำหากมีขนาดเล็ก */

}
    .head-img {
    position: relative; /* 1. ทำให้ div นี้เป็นจุดอ้างอิงสำหรับตำแหน่ง absolute ขององค์ประกอบลูก */
    height: 37vh;      /* 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: 90%;
        /* 6. ทำให้รูปภาพสูงเต็ม div.head-img */
    object-fit: cover; /* 7. รักษาสัดส่วนรูปภาพและครอบคลุมพื้นที่ */
    position: absolute; /* 8. ทำให้รูปภาพลอยอยู่บนพื้นหลัง (ถ้ามี) แต่ยังเป็นส่วนหนึ่งของ .head-img */
    top: 0;
    left: 0;
    z-index: 1; /* 9. กำหนด z-index ให้รูปภาพอยู่ชั้นล่างกว่าข้อความ */
}
.head-text{
    font-size: 2.2rem;
}
.box-head {
    position: absolute; /* 10. ทำให้กล่องข้อความลอยอยู่เหนือรูปภาพ */
    
     /* สร้างระยะห่างภายในกล่อง */
    
    /* 11. จัดตำแหน่งให้กล่องอยู่มุมขวาล่าง */
    bottom: 50px; /* ห่างจากขอบล่าง 60px */
    right: 40px;  /* ห่างจากขอบขวา 60px */
    
    z-index: 3; /* 12. กำหนด z-index ให้ข้อความอยู่ชั้นบนกว่ารูปภาพ */
}
.text-container{
    max-width: 300px;
}
.text-container p{
    font-size: 0.6rem;
}
    .section-title{
        margin-left: 0;
        margin-bottom: 20px;
        font-size: 2rem;
    }
    .expertise-section {
    padding: 20px 10px 30px 10px; /* บน ซ้าย-ขวา ล่าง */
    }
    .expertise-label{
        font-size: 1.1rem;
        color:#ffffff
    }
    .expertise-grid {
        grid-template-columns: 1fr; /* เปลี่ยนเป็นคอลัมน์เดียวบนหน้าจอเล็ก */
    }
}
@media (min-width: 768px) and (max-width: 1024px){
    .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: 90%;
        /* 6. ทำให้รูปภาพสูงเต็ม div.head-img */
    object-fit: cover; /* 7. รักษาสัดส่วนรูปภาพและครอบคลุมพื้นที่ */
    position: absolute; /* 8. ทำให้รูปภาพลอยอยู่บนพื้นหลัง (ถ้ามี) แต่ยังเป็นส่วนหนึ่งของ .head-img */
    top: 0;
    left: 0;
    z-index: 1; /* 9. กำหนด z-index ให้รูปภาพอยู่ชั้นล่างกว่าข้อความ */
}
.head-text{
    font-size: 5.5rem;
}
.box-head {
    position: absolute; /* 10. ทำให้กล่องข้อความลอยอยู่เหนือรูปภาพ */
    
     /* สร้างระยะห่างภายในกล่อง */
    
    /* 11. จัดตำแหน่งให้กล่องอยู่มุมขวาล่าง */
    bottom: 100px; /* ห่างจากขอบล่าง 60px */
    right: 40px;  /* ห่างจากขอบขวา 60px */
    
    z-index: 3; /* 12. กำหนด z-index ให้ข้อความอยู่ชั้นบนกว่ารูปภาพ */
}
}