.contact-button {
    background-color: #DA7519;
    border: 1.2px solid #DA7519;
    border-radius: 6px;
    height: 43px;
    /* ความสูงคงที่ 43px */
    width: 100%;
    /* ความยาวปรับตามขนาดของคอนเทนเนอร์ */
    max-width: 185px;
    /* ความยาวสูงสุด 185px */
    min-width: 150px;
    /* ความยาวต่ำสุด 150px (สามารถปรับได้ตามต้องการ) */
}

@media (max-width: 991px) {
    .contact-button {
        display: none !important;
        /* margin-right: 50px; */
        /* เลื่อนไปทางขวา 10px ในหน้าจอขนาด md และใหญ่กว่า */
    }
}

#hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-iner-blog {
    width: 830px;
    height: 400px;
    object-fit: cover;
}

.overlay-text-left {
    position: absolute;
    top: 10%;
    left: 25%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: calc(1vw + 1vh + 0.5vmin);
}

.overlay-text-right {
    position: absolute;
    top: 10%;
    right: 1px;
    transform: translate(-30%, -70%);
    color: white;
    font-size: calc(1vw + 1vh + 0.5vmin);
}


/* คลาสหลักสำหรับสไตล์ทั่วไปของปุ่ม */
.view-all-btn {
    position: absolute;
    bottom: 5%;
    /* ปรับตำแหน่งจากด้านล่าง */
    background-color: transparent;
    /* พื้นหลังโปร่งใส */
    color: #fff;
    /* สีตัวอักษรเป็นสีขาว */
    border: 1px solid #fff;
    /* ขอบสีขาว */
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    transform: translateX(-50%);
    border-radius: 0px !important;
    /* จัดกึ่งกลางแนวนอน */
}

/* สไตล์ปุ่มเมื่อ hover */
.view-all-btn:hover {
    background-color: #fff;
    /* พื้นหลังเป็นสีขาวเมื่อ hover */
    color: #000;
    /* เปลี่ยนสีข้อความเป็นสีดำเมื่อ hover */
}

/* ตำแหน่งปุ่มที่อยู่ทางซ้าย */
.view-all-btn-left {
    left: 18%;
    /* ปรับตำแหน่งด้านซ้าย */
}

/* ตำแหน่งปุ่มที่อยู่ทางขวา */
.view-all-btn-right {
    right: 1px;
    /* Default right position */
    transform: translate(-28%, -5%);
}

@media (max-width: 576px) {

    /* For small screens */
    .view-all-btn-right {
        transform: translate(-35%, -50%);
    }
}

@media (max-width: 768px) {

    /* For tablets or medium screens */
    .view-all-btn-right {

        transform: translate(-15%, -15%);
    }
}


.view-btn-learn-more {
    /* ปรับตำแหน่งจากด้านล่าง */
    background-color: transparent;
    /* พื้นหลังโปร่งใส */
    color: #DA7519;
    /* สีตัวอักษรเป็นสี #DA7519 (ทอง) */
    border: 1px solid #DA7519;
    /* ขอบสี #DA7519 */
    cursor: pointer;
    text-decoration-color: #DA7519;
    border-radius: 6px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 36px;
    padding-right: 36px;
}

/* สไตล์ปุ่มเมื่อ hover */
.view-btn-learn-more:hover {
    background-color: #DA7519;
    /* พื้นหลังเป็นสีขาวเมื่อ hover */
    color: white;
    /* เปลี่ยนสีข้อความเป็นสีดำเมื่อ hover */
}


.faq-btn-section {
    /* ปรับตำแหน่งจากด้านล่าง */
    background-color: transparent;
    /* พื้นหลังโปร่งใส */
    color: #DA7519;
    /* สีตัวอักษรเป็นสีขาว */
    border: 1px solid #DA7519;
    /* ขอบสีขาว */
    cursor: pointer;
    text-decoration-color: #DA7519;
    border-radius: 200px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 22px;
    padding-right: 22px;
}

/* สไตล์ปุ่มเมื่อ hover */
.faq-btn-section:hover {
    background-color: #DA7519;
    /* พื้นหลังเป็นสีขาวเมื่อ hover */
    color: white;
    /* เปลี่ยนสีข้อความเป็นสีดำเมื่อ hover */
}


.full-screen-image {
    height: 100vh;
    /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    /* Ensures no scrollbars appear if the image is too wide */
}

@media (min-width: 768px) {

    .full-screen-image img {
        width: 100%;
        /* Fill section width on small screens */
        height: auto;
        /* Maintain aspect ratio */
    }
}

@media (max-width: 768px) {
    .full-screen-image {
        height: auto;
        /* Remove the 100vh height on small screens */
    }

    .full-screen-image img {
        width: 100%;
        /* Fill section width on small screens */
        height: auto;
        /* Maintain aspect ratio */
    }
}

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

.box {

    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 29px 0 rgba(68, 88, 144, 0.1);
    transition: all 0.3s ease-in-out;
}

.box img {
    margin-bottom: 16px;
    /* หรือค่าอื่นตามที่ต้องการ */
}

/* carousel */
.carousel-indicators button {
    background-color: #ccc;
    /* สีปกติของจุด */
}

.carousel-indicators .active {
    background-color: #DA7519;
    /* สีส้มเมื่ออยู่ในสถานะ active */
}

#carousel-compliment {

    display: flex;
    justify-content: center;
    align-items: center;
}



.carousel-inner {
    height: 100%;
    display: flex;

}

.carousel-item span {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;


}

.carousel-item p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70%;

}

/* เพิ่ม padding ซ้ายขวาสำหรับหน้าจอขนาดเล็ก (ต่ำกว่า 576px) */
@media (max-width: 576px) {
    .carousel-item p {
        padding-left: 15px;
        padding-right: 15px;
        /* เลือกค่า padding ตามที่ต้องการ */
    }
}

/* Blog */
.post-entry {
    min-width: 33.33%;
    /* ให้แต่ละโพสต์มีความกว้าง 1/3 */
    display: block;
    transition: transform 0.5s ease-in-out;
}

.post-entry .post-text {
    text-decoration: none;
    color: #ccc;
    font-size: 13px;
    display: block;
    margin-bottom: 10px;
}

/* เพิ่ม padding-left สำหรับหน้าจอขนาดเล็ก (ต่ำกว่า 768px) */
@media (max-width: 768px) {
    .post-entry .post-text {
        padding-left: 15px;
        /* เลือกค่า padding ตามที่ต้องการ */
    }

    #blog-posts .post-entry .post-text {
        padding-left: 0 !important;
    }
}

.post-entry .post-text p.nunito-f-18,
.post-entry .post-text a.nunito-f-16,
.post-entry .post-text span.roboto-flex-section {
    color: #2D2D2D;
}

.post-entry .post-text a.nunito-f-16 {
    text-decoration: underline;
}

.post-entry .post-text h3 a {
    text-decoration: none;
    color: #000000;
}

.post-entry .post-text h3 a:hover {
    text-decoration: none;
    color: #2d71a1;
}

.post-entry .post-text .readmore {
    color: #2d71a1;
}

/* ปรับขนาดภาพเมื่อหน้าจอใหญ่ */
@media (min-width: 992px) {
    .post-entry img {
        width: 525px !important;
        height: 330px !important;
        object-fit: cover;
    }
}

/* ปรับขนาดภาพเมื่อหน้าจอขนาดเล็ก */
@media (max-width: 576px) {
    .post-entry img {
        width: 100%;
        /* ใช้ 100% ของพื้นที่ที่มี */
        height: 255px !important;
        /* ปรับให้เข้ากับอัตราส่วนของภาพ */
        object-fit: cover;
    }
}

/* สำหรับหน้าจอเล็กกว่า ให้ภาพเต็มคอลัมน์ */
.post-entry img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
}




/* บุคลากร */
#about-people {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 20px;
    -webkit-overflow-scrolling: touch;
}

#about-people div {
    flex: 0 0 auto;
    width: 252px;
    /* กำหนดขนาดภาพให้คงที่ */
}

#about-people img {
    width: 100%;
    /* ปรับภาพให้เต็มความกว้างของ container */
    max-width: 252px;
    height: auto;
    /* คงอัตราส่วนภาพไว้ */
    object-fit: cover;
}


.center-images {
    justify-content: center;
    /* จัดภาพให้อยู่กลาง */
}



@media (max-width: 576px) {
    #about-people div {
        width: 100%;
        /* ปรับความกว้างให้เต็มหน้าจอสำหรับหน้าจอขนาดเล็ก */
    }
}



/* คุมลูกศร */
.blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;

}

.blog-title {
    font-size: 28px;
    font-weight: bold;
    margin: 0;
}

.blog-nav button {

    border: none;
    font-size: 24px;
    cursor: pointer;
    margin: 0 5px;


    background-color: transparent;

}

.blog-nav button:hover {
    color: #555;
}




/* ซ่อนบล็อกที่เกิน 3 อันแรก
#blog-posts .post-entry:nth-child(n+4) {
display: block;
} */

#blog-posts {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#blog-posts-our-product {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


#blog-posts .post-entry,
#blog-posts-our-product .post-entry {
    flex: 0 0 auto;
}

/* ซ่อน scrollbar */
#blog-posts::-webkit-scrollbar,
#blog-posts-our-product::-webkit-scrollbar,
#about-people::-webkit-scrollbar {
    display: none;
    /* ซ่อน scrollbar */
}

.no-select {
    user-select: none;

}

.no-drag {
    pointer-events: none;
}

.responsive-img {
    width: 100%;
    width: 521px;
    height: 521px;
    object-fit: cover;
}

.responsive-img {
    width: 100%;
    width: 521px;
    height: 521px;
    object-fit: cover;
}

#career-benefit img.responsive-img {
    width: 100%;
    height: 410px;
    object-fit: cover;
}

@media (min-width: 768px) {
    .post-entry img {
        width: 521px;
        height: 521px;
    }
}









/* Contract us */
/* ตั้งค่าขนาดและจัดกลางของ div */
#contact-us {
    max-width: 100%;
    height: 525px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    background-color: #FFF6D8;
}


/* จัดแต่งปุ่ม */
.button-container {
    display: flex;
    gap: 10px;

    .contact-button2,
    .line-button {
        padding: 0;
        /* ลบ padding ที่ไม่จำเป็น */
        height: 48px;
        /* ความสูงของปุ่ม */
        width: 247px;
        /* ความยาวของปุ่ม */
        font-size: 1rem;
        border: none;
        border-radius: 6px;
        color: #ffffff;
        cursor: pointer;
        transition: background-color 0.3s ease;
        text-align: center;
        /* จัดตำแหน่งข้อความกลาง */
        display: flex;
        justify-content: center;
        align-items: center;
        /* จัดข้อความให้อยู่กลางทั้งแนวนอนและแนวตั้ง */
    }

    .contact-button2 {
        background-color: #DA7519;
    }

    .line-button {
        background-color: #3EBC1E;
    }
}


/* ปรับแต่งการแสดงผลให้ responsive */
@media (max-width: 768px) {
    #contact-us {
        width: 100%;
        /* กว้างเต็มหน้าจอมือถือ */
        height: auto;
        /* ปรับสูงอัตโนมัติ */
        padding: 15px;
    }

    #contact-us h1 {
        font-size: 1.5rem;
    }

    #contact-us p {
        font-size: 0.9rem;
    }

    .button-container {
        flex-direction: column;
        gap: 15px;
    }
}

section.no-padding-buttom {
    padding-bottom: 0 !important;
}


.uil--line {
    display: inline-block;
    width: 31px;
    height: 31px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.78 9.46a.38.38 0 0 0-.38.38v1.67L12 9.65a.4.4 0 0 0-.33-.19a.38.38 0 0 0-.38.38v2.84a.38.38 0 0 0 .38.38a.38.38 0 0 0 .38-.38V11l1.39 1.91a.27.27 0 0 0 .15.11a.3.3 0 0 0 .14 0A.33.33 0 0 0 14 13l.1-.07a.4.4 0 0 0 .11-.27V9.84a.38.38 0 0 0-.43-.38M9.2 12.27H8.14V9.84a.38.38 0 0 0-.38-.38a.38.38 0 0 0-.38.38v2.84a.38.38 0 0 0 .38.38H9.2a.39.39 0 0 0 .39-.38a.39.39 0 0 0-.39-.41m1.11-2.81a.39.39 0 0 0-.39.38v2.84a.39.39 0 0 0 .39.38a.38.38 0 0 0 .38-.38V9.84a.38.38 0 0 0-.38-.38M17.91 2H6.09A4.1 4.1 0 0 0 2 6.09v11.82A4.1 4.1 0 0 0 6.09 22h11.82A4.1 4.1 0 0 0 22 17.91V6.09A4.1 4.1 0 0 0 17.91 2m.31 12.28a2 2 0 0 1-.13.17a5.5 5.5 0 0 1-.8.8c-2 1.87-5.36 4.11-5.81 3.76s.64-1.76-.53-2a1 1 0 0 1-.25 0c-3.44-.48-6-2.89-6-5.78c0-3.25 3.29-5.88 7.34-5.88s7.34 2.63 7.34 5.88a5 5 0 0 1-1.16 3.05m-1.71-4.81H15a.38.38 0 0 0-.38.38v2.84a.38.38 0 0 0 .38.38h1.48a.38.38 0 0 0 .38-.38a.38.38 0 0 0-.38-.38h-1.03v-.6h1.06a.39.39 0 0 0 .38-.39a.38.38 0 0 0-.38-.38h-1.06v-.61h1.06a.38.38 0 0 0 .38-.38a.38.38 0 0 0-.38-.48'/%3E%3C/svg%3E");
}

.ri--instagram-fill {
    display: inline-block;
    width: 31px;
    height: 31px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.028 2c1.125.003 1.696.009 2.189.023l.194.007c.224.008.445.018.712.03c1.064.05 1.79.218 2.427.465c.66.254 1.216.598 1.772 1.153a4.9 4.9 0 0 1 1.153 1.772c.247.637.415 1.363.465 2.428c.012.266.022.487.03.712l.006.194c.015.492.021 1.063.023 2.188l.001.746v1.31a79 79 0 0 1-.023 2.188l-.006.194c-.008.225-.018.446-.03.712c-.05 1.065-.22 1.79-.466 2.428a4.9 4.9 0 0 1-1.153 1.772a4.9 4.9 0 0 1-1.772 1.153c-.637.247-1.363.415-2.427.465l-.712.03l-.194.006c-.493.014-1.064.021-2.189.023l-.746.001h-1.309a78 78 0 0 1-2.189-.023l-.194-.006a63 63 0 0 1-.712-.031c-1.064-.05-1.79-.218-2.428-.465a4.9 4.9 0 0 1-1.771-1.153a4.9 4.9 0 0 1-1.154-1.772c-.247-.637-.415-1.363-.465-2.428l-.03-.712l-.005-.194A79 79 0 0 1 2 13.028v-2.056a79 79 0 0 1 .022-2.188l.007-.194c.008-.225.018-.446.03-.712c.05-1.065.218-1.79.465-2.428A4.9 4.9 0 0 1 3.68 3.678a4.9 4.9 0 0 1 1.77-1.153c.638-.247 1.363-.415 2.428-.465c.266-.012.488-.022.712-.03l.194-.006a79 79 0 0 1 2.188-.023zM12 7a5 5 0 1 0 0 10a5 5 0 0 0 0-10m0 2a3 3 0 1 1 .001 6a3 3 0 0 1 0-6m5.25-3.5a1.25 1.25 0 0 0 0 2.5a1.25 1.25 0 0 0 0-2.5'/%3E%3C/svg%3E");
}

.dashicons--facebook {
    display: inline-block;
    width: 31px;
    height: 31px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M2.89 2h14.23c.49 0 .88.39.88.88v14.24c0 .48-.39.88-.88.88h-4.08v-6.2h2.08l.31-2.41h-2.39V7.85c0-.7.2-1.18 1.2-1.18h1.28V4.51c-.22-.03-.98-.09-1.86-.09c-1.85 0-3.11 1.12-3.11 3.19v1.78H8.46v2.41h2.09V18H2.89a.89.89 0 0 1-.89-.88V2.88c0-.49.4-.88.89-.88'/%3E%3C/svg%3E");
}

.location-icon {
    display: inline-block;
    width: 31px;
    height: 31px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5s-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.social-icon {
    display: flex;
    gap: 44px;
}


.image-brand img {
    width: 100%;
    height: 640px;
    object-fit: cover;
}

@media (max-width: 768px) {
    .image-brand img {
        height: 400px;
        object-fit: cover;
        /* ปรับความสูงเมื่อหน้าจอเล็กลง */
    }
}

@media (max-width: 576px) {
    .image-brand img {
        height: 300px;
        object-fit: cover;
        /* ปรับความสูงอีกเมื่อหน้าจอเล็กลงมาก */
    }
}

@media (max-width: 768px) {

    /* สำหรับจอขนาดเล็ก (md) หรือเล็กกว่า */
    .row .margin-bottom {
        margin-bottom: 20px;
        /* ปรับระยะห่างตามต้องการ */
    }
}

.nunito-w-600-f-18,
.nunito-w-700-f-18,
.nunito-f-18 {
    color: #2D2D2D;
}

/* front-navbar-about */
#navbar-xl.nav-text-white li a {
    color: #FFFFFF;
}

@media (max-width: 768px) {

    /* สำหรับจอขนาดเล็ก (md) หรือเล็กกว่า */
    #navbar-xl.nav-text-white li a {
        color: #2D2D2D;
    }
}

#navbar-xl.nav-text-white li a:hover,
#navbar-xl.nav-text-white li a:focus,
#navbar-xl.nav-text-white li a.active {
    color: #fdc134;
}

#navbar-xl.nav-text-white .dropdown ul li a {
    color: #2D2D2D;
}

.text-gray-c7 {
    color: #C7C7C7;
}

.text-right {
    text-align: left;

    p {
        color: #C7C7C7;
    }
}

.carousel-container img {
    width: 100%;
    /* ความกว้างเต็มคารูเซล */
    height: 550px;
    /* ความสูงคงที่สำหรับจอใหญ่ */
    object-fit: cover;
    /* ครอบคลุมพื้นที่อย่างเหมาะสม */
}

@media (max-width: 576px) {
    .carousel-container img {
        max-height: 149.1px;
        /* ลดความสูงลงสำหรับหน้าจอขนาดเล็ก */
    }
}

.responsive-div-img {
    width: 100%;
    /* max-width: 719px; */
    /* Set max width */
    height: auto;
    max-height: 600px;
    object-fit: cover;
    /* Maintain aspect ratio */
}

.responsive-div-img-machine,
.responsive-div-img-step {
    width: 100%;
    max-width: 641px;
    /* Set max width */
    height: 600px;
    /* Maintain aspect ratio */
}


/* สไตล์ปกติ */
.custom-column {
    padding-right: 0;
    /* เริ่มต้นไม่มีระยะห่างขวา */
    padding-bottom: 0;
    /* เริ่มต้นไม่มีระยะห่างด้านล่าง */
}

/* ใช้ Media Query สำหรับหน้าจอขนาดใหญ่ */
@media (min-width: 1200px) {
    .custom-column {
        padding-right: 200px;
        /* เพิ่มระยะห่างขวา 30px */
        padding-bottom: 170px;
        /* เพิ่มระยะห่างด้านล่าง 30px */
    }
}

.box-button {
    height: 29px;
    border-radius: 200px;
    padding: 0 20px;
    /* เพิ่ม padding เพื่อความกว้าง */
    border: 1px solid #C7C7C7;
    /* ขอบสีดำหรือปรับสีตามต้องการ */
    cursor: pointer;
    color: #4D4D4D;

}

.box-button:hover {
    background-color: #862929;
    /* เปลี่ยนสีพื้นหลังเมื่อ hover */
}


/* Style for active button */
.filter-active {
    border: 2px solid #DA7519 !important;
    color: #DA7519 !important;
    font-family: "Nunito", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
}

.linear-gradient {
    background: linear-gradient(to bottom,
            rgba(33, 33, 33, 0.6) 0%,
            /* 60% opacity at the top */
            rgba(33, 33, 33, 0.5) 30%,
            /* 50% opacity at 30% */
            rgba(33, 33, 33, 0.2057) 70%,
            /* 20.57% opacity at 70% */
            rgba(33, 33, 33, 0) 100%
            /* Fully transparent at the bottom */
        );
    padding-bottom: 85px !important;
    /* Set max width */
}


/* modal-content-for-job-description */
.modal-content {
    border-radius: 20px !important;
    /* Set border radius to 20px */
}

/* apply-job-button */
.apply-job {
    background-color: #DA7519;
    /* สีของปุ่ม */
    color: white;
    /* สีของตัวอักษร */
    width: 247px;
    /* ความกว้างของปุ่ม */
    height: 48px;
    /* ความสูงของปุ่ม */
    text-align: center;
    /* จัดตำแหน่งข้อความให้อยู่กลาง */
    border: none;
    /* ไม่มีกรอบ */
    font-size: 16px;
    /* ขนาดฟอนต์ */
    font-family: Arial, sans-serif;
    /* ฟอนต์ */
    display: inline-block;
    /* ให้ปุ่มอยู่ในแถวเดียว */
    line-height: 48px;
    /* จัดตำแหน่งข้อความในแนวตั้ง */
    cursor: pointer;
    /* แสดงมือเมื่อชี้ไปที่ปุ่ม */
    transition: background-color 0.3s ease;
    /* การเปลี่ยนสีเมื่อ hover */
    border-radius: 6px;
}

.apply-job:hover {
    background-color: #c76e14;
    /* สีเมื่อ hover */
}

/* Media Queries สำหรับ responsive */
@media (max-width: 768px) {
    .apply-job {
        width: 200px;
        /* ขนาดความกว้างลดลงในหน้าจอเล็ก */
        height: 45px;
        /* ปรับขนาดความสูง */
        font-size: 14px;
        /* ลดขนาดฟอนต์ */
    }
}

@media (max-width: 480px) {
    .apply-job {
        width: 100%;
        /* ให้ปุ่มกว้างเต็มหน้าจอในมือถือ */
        height: 40px;
        /* ปรับความสูงในมือถือ */
        font-size: 12px;
        /* ลดขนาดฟอนต์ */
    }
}

/* blog-new-filter */
.news-filter {
    color: #DA7519;
    cursor: pointer;
}

.news-filter.active {
    opacity: 1;
    /* สีชัดเจนสำหรับ active */
}

.news-filter:not(.active) {
    opacity: 0.4;
    color: #2D2D2D;
    /* สีจางเมื่อไม่ได้ active */
}

.news-filter-mobile {
    color: #DA7519;
    cursor: pointer;
}

.news-filter-mobile.active {
    opacity: 1;
    /* สีชัดเจนสำหรับ active */
}

.news-filter-mobile:not(.active) {
    opacity: 0.4;
    color: #2D2D2D;
    /* สีจางเมื่อไม่ได้ active */
}


.read-more-custom {
    color: #2D2D2D;
    text-decoration: underline;
}

.custom-img {
    width: 100%;
    max-width: 30px;
    max-height: 23px;
}

#telephone.custom-img {
    width: 100%;
    max-width: 26.45px;
    max-height: 26.45px;
}

#location.custom-img {
    width: 100%;
    max-width: 18px;
    max-height: 24px;
}

.custom-icon-social-contact {
    width: 100%;
    max-width: 30px;
    max-height: 30px;
    margin-right: 16px;
}

.custom-icon-social-contact:last-child {
    margin-right: 0;
}

.custom-bg {
    background-color: #FBF9F7;
    width: 100%;
    max-width: 817px;
    height: 648px t;
}

.custom-bg-contact {
    background-color: #FBF9F7;
    width: 100%;
}

/* contact-form */


.form-select,
.form-control {
    border: none;
    border-bottom: 1px solid #2D2D2D;
    border-radius: 0;
}

.form-select:focus,
.form-control:focus {
    box-shadow: none;
    border-bottom-color: #DA7519;
}

.form-select:focus+label,
.form-control:focus+label {
    color: #DA7519;
}

.form-contact-input input.custom {
    background-color: #FBF9F7;

}

/* กำหนดสีของ placeholder */
textarea.custom::placeholder,
input.custom::placeholder {
    color: #C7C7C7;
    /* สี placeholder */
    opacity: 1;
    /* ค่าความทึบแสงของ placeholder (1 หมายถึงไม่โปร่งใส) */
}

textarea.custom {
    background-color: #FBF9F7;
    /* พื้นหลังสี #FBF9F7 */
    font-family: 'Nunito', sans-serif;
    /* ฟอนต์ Nunito */
    font-weight: 600;
    font-size: 18px;
    color: #2D2D2D;
}

/* กำหนดสไตล์เมื่อ textarea อยู่ในสถานะโฟกัส */
textarea.custom:focus {
    background-color: #FBF9F7;
    /* พื้นหลังสีเดิม #FBF9F7 */
    outline: none;
    /* ลบเส้นขอบที่แสดงขณะโฟกัส (ถ้าต้องการ) */
}


.btn-apply {
    background-color: #DA7519;
    color: white;
    width: 210px;
    height: 43px;
    text-align: center;
    border: none;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 6px;
    padding-left: 36px;
    padding-right: 36px;
    padding-bottom: 10px;
    padding-top: 10px;
}

.btn-apply:hover {
    background-color: #c76e14;
}

/* Media Queries สำหรับ responsive */
@media (max-width: 768px) {
    .btn-apply {
        width: 200px;
        height: 45px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .btn-apply {
        width: 100%;
        height: 40px;
        font-size: 12px;
    }
}


@media (max-width: 576px) {
    .responsive-padding {
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
}

@media (max-width: 576px) {
    .responsive-padding-btn {
        margin-left: 25px !important;
        margin-right: 25px !important;
    }
}


.testimonials-slider {
    position: relative;
    /* เพื่อให้ pagination อิงจากตำแหน่งของ testimonials-slider */
    height: 379px;
    /* ความสูงคงที่ของคารูเซล */
}

.testimonials-slider .swiper-pagination {
    position: absolute;
    bottom: 10px;
    /* ระยะห่างจากขอบล่าง ปรับตามความเหมาะสม */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet {
    width: 40px;
    /* กำหนดความกว้างของขีด */
    height: 2px;
    /* กำหนดความสูงของขีด */
    background-color: #c41e1e71;
    /* สีของขีด */
    border-radius: 200px;
    /* ทำให้เป็นเส้นตรง */
    margin: 4px;
    /* เว้นระยะห่างระหว่างขีด */
}

.testimonials-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #DA7519;
    /* สีเมื่อขีดอยู่ในสถานะ active */
}

.testimonials-slider .swiper-slide {
    display: flex;
    justify-content: center;
    /* จัดแนวนอน */
    align-items: center;
    /* จัดแนวตั้ง */
    height: 100%;
    /* เพื่อให้ความสูงเต็มของ swiper */
}

.review {
    text-align: center;
    /* จัดข้อความให้อยู่ตรงกลาง */
}

/*--------------------------------------------------------------
# Gallery
--------------------------------------------------------------*/
.gallery .gallery-item {
    overflow: hidden;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.gallery .gallery-item img {
    transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.1);
}

#gallery .image-container {
    position: relative;
    width: 100%;
    /* max-width: 600px; */
    /* กำหนดขนาดที่ต้องการ */
    margin: 0 auto;
}

#gallery .background-image {
    width: 100%;
    /* ทำให้ภาพยืดขนาดตามขนาดของ container */
    height: auto;
}

#gallery .overlay-text {
    position: absolute;
    color: white;
    z-index: 2;
}

#gallery .overlay-text:first-of-type {
    top: 30px;
    left: 30px;
    text-align: left;
}

#gallery .overlay-text:last-of-type {
    bottom: 20px;
    right: 30px;
    text-align: right;
}

.purecounter,
.percentage-sign {
    display: inline;
    /* ให้ทั้งตัวเลขและ % แสดงในบรรทัดเดียว */
}

/* Media Query สำหรับหน้าจอเล็ก */
@media (max-width: 768px) {
    .purecounter {
        font-family: "Roboto Flex", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        font-size: var(--font-size, 48px);
        /* ใช้ค่าเริ่มต้นเป็น 38px */
        font-variation-settings:
            "slnt"0,
            "wdth"100,
            "GRAD"0,
            "XOPQ"96,
            "XTRA"468,
            "YOPQ"79,
            "YTAS"750,
            "YTDE"-203,
            "YTFI"738,
            "YTLC"514,
            "YTUC"712;
    }

    #gallery .overlay-text:first-of-type {
        top: 30px;
        left: 30px;
        right: 30px;
        text-align: left;
    }

    .percentage-sign {
        font-family: "Roboto Flex", sans-serif;
        font-optical-sizing: auto;
        font-weight: 500;
        font-style: normal;
        font-size: var(--font-size, 48px);
        /* ใช้ค่าเริ่มต้นเป็น 38px */
        font-variation-settings:
            "slnt"0,
            "wdth"100,
            "GRAD"0,
            "XOPQ"96,
            "XTRA"468,
            "YOPQ"79,
            "YTAS"750,
            "YTDE"-203,
            "YTFI"738,
            "YTLC"514,
            "YTUC"712;
    }
}


.hidden {
    display: none;
}

.navigator-sub.active {
    color: #DA7519;
    /* สีของหัวข้อ active */
    opacity: 1;

}

.navigator-sub {
    color: #2D2D2D;
    opacity: 0.4;
    transition: color 0.3s ease, opacity 0.3s ease;
}

.navigator-sub:hover {
    opacity: 1;
    /* เพิ่มความชัดเมื่อ hover */
    cursor: pointer;
}

/* machine services page control */
.machine.active {
    color: #DA7519;
    opacity: 100%;
    cursor: pointer;
    /* แสดง pointer เมื่อชี้ */

}

.machine {
    color: #2D2D2D;
    opacity: 40%;
    cursor: pointer; /* แสดง pointer เมื่อชี้ */
    display: inline-block;
    text-align: center;
}

/* machine services page control */
.step.active {
    color: #DA7519;
    opacity: 100%;
    cursor: pointer;
    /* แสดง pointer เมื่อชี้ */

}

.step {
    color: #2D2D2D;
    opacity: 40%;
    cursor: pointer;
    /* แสดง pointer เมื่อชี้ */
}

.custom-underline {
    text-decoration: underline;
    text-underline-offset: 4px;
    /* ระยะห่างจากข้อความ */
}

a.custom-underline {
    /* ระยะห่างจากข้อความ */
}

a.custom-underline:hover {
    color: #fdc134 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

.text-ligth-grey {
    color: #C7C7C7;
}

.copyRight {
    color: #AC5200;
    font-size: 14px;
}

.job-inline {
    display: inline-block !important;
}

a.custom-underline.job-inline:hover {
    color: #fdc134 !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

#gallery-mobile-row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#gallery-mobile-row .post-entry {
    flex: 0 0 auto;
}

/* ซ่อน scrollbar */
#gallery-mobile-row::-webkit-scrollbar {
    display: none;
    /* ซ่อน scrollbar */
}

.index-swiper {
    background-color: #FFEFCF !important;
}

.review {
    width: 100%;
    height: 100%;
    /* ทำให้ review มีความสูงเต็มที่ */
    display: flex;
    flex-direction: column;
    /* จัดให้ p และ blockquote อยู่คนละบรรทัด */
    justify-content: center;
    /* จัดเนื้อหาภายใน review ให้อยู่กึ่งกลางแนวตั้ง */
    text-align: center;
    /* จัดข้อความให้อยู่กึ่งกลางแนวนอน */
}

.review p,
.review blockquote {
    margin: 0;
    /* ลบ margin ส่วนเกิน */
}

.review blockquote {
    margin-top: 5px;
    /* เพิ่มระยะห่างเล็กน้อยระหว่าง p และ blockquote */
}

#footer {
    position: relative;
    /* ทำให้ตำแหน่งของภาพสัมพันธ์กับ footer */
}

.footer-top-mobile {
    position: relative !important;
    /* เพื่อให้ภาพสามารถอยู่ด้านหลังได้ */
    z-index: 2 !important;
    /* ให้เนื้อหาใน footer อยู่ข้างหน้า */
}

.footer-image-mobile {
    position: absolute;
    bottom: 0;
    /* กำหนดตำแหน่งในแนวตั้งของภาพ */
    left: 50%;
    transform: translateX(-50%);
    /* จัดภาพให้อยู่กึ่งกลางในแนวนอน */
    z-index: -1;
    /* วางภาพไว้หลังเนื้อหาใน footer */
    width: 100%;
    /* ปรับขนาดให้เต็มความกว้างของ footer */
    height: auto;
    /* ปรับขนาดภาพให้อัตโนมัติ */
    opacity: 0.2 !important;
}

.custom-menu {
    display: inline-block;
    width: 30px;
    height: 4px;
    background-color: black;
    position: relative;
}

.custom-menu::before,
.custom-menu::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 4px;
    background-color: black;
}

.custom-menu::before {
    top: -10px;
    /* ขยับไปข้างบน */
}

.custom-menu::after {
    top: 10px;
    /* ขยับไปข้างล่าง */
}

.index-hero-swiper {
    width: 100%;
    /* ความกว้างเต็มคารูเซล */
    height: 550px;
    /* ความสูงคงที่สำหรับจอใหญ่ */
    object-fit: cover;
    /* ครอบคลุมพื้นที่อย่างเหมาะสม */
}

.hero-imonials-slider {
    position: relative;
    /* เพื่อให้ pagination อิงจากตำแหน่งของ testimonials-slider */
}

.hero-imonials-slider .swiper-pagination {
    position: absolute;
    bottom: 10px;
    /* ระยะห่างจากขอบล่าง ปรับตามความเหมาะสม */
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.hero-imonials-slider .swiper-pagination .swiper-pagination-bullet {
    width: 40px;
    /* กำหนดความกว้างของขีด */
    height: 4px;
    /* กำหนดความสูงของขีด */
    background-color: #c41e1e71;
    /* สีของขีด */
    border-radius: 200px;
    /* ทำให้เป็นเส้นตรง */
    margin: 4px;
    /* เว้นระยะห่างระหว่างขีด */
}

.hero-imonials-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: #DA7519;
    /* สีเมื่อขีดอยู่ในสถานะ active */
}

.hero-imonials-slider .swiper-slide {
    display: flex;
    justify-content: center;
    /* จัดแนวนอน */
    align-items: center;
    /* จัดแนวตั้ง */
    height: 100%;
    /* เพื่อให้ความสูงเต็มของ swiper */
}

.hero-imonials-slider img {
    width: 100%;
    /* ความกว้างเต็มคารูเซล */
    height: 550px;
    /* ความสูงคงที่สำหรับจอใหญ่ */
    object-fit: cover;
    /* ครอบคลุมพื้นที่อย่างเหมาะสม */
}

.hero-imonials-slider video {
    width: 100%;
    /* ความกว้างเต็มคารูเซล */
    height: 750px;
    /* ความสูงคงที่สำหรับจอใหญ่ */
    object-fit: cover;
    /* ครอบคลุมพื้นที่อย่างเหมาะสม */
}

.blog-mobile .blog-mobile-item {
    overflow: hidden;
    border-right: 3px solid #fff;
    border-bottom: 3px solid #fff;
}

.blog-mobile .blog-mobile-item img {
    transition: all ease-in-out 0.4s;
}

.blog-mobile .blog-mobile-item:hover img {
    transform: scale(1.1);
}

.service-header-mobile {
    z-index: 997;
    transition: all 0.5s;
    /* background: url('../../assets/img/Rectangle 63.png') no-repeat center center;
    background-size: cover;
    height: 550px; */
    /* ความสูงเริ่มต้น */
}

@media (max-width: 768px) {

    /* จอขนาดเล็ก */
    .service-header-mobile {
        height: 400px;
    }
}

@media (max-width: 576px) {

    /* จอขนาดเล็กมาก */
    .service-header-mobile {
        height: 300px;
    }
}

.service-header-mobile .logo h1 {
    margin: 0;
    padding: 10px 0;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-family: "Poppins", sans-serif;
}

.service-header-mobile .logo h1 a,
.service-header-mobile .logo h1 a:hover {
    color: #fff;
    text-decoration: none;
}

.service-header-mobile .logo h1 a span,
.service-header-mobile .logo h1 a:hover span {
    color: #fdc134;
}

.service-header-mobile .logo img {
    max-height: 47px;
    max-width: 171px;
}

@media (max-width: 768px) {
    .service-header-mobile .logo img {
        max-height: 47px;
        margin-top: 15px;
        margin-left: 15px;
        margin-bottom: 15px;
        height: auto;
    }
}

.machine-content {
    transition: all 0.3s ease-in-out !important;
}

.machine {
    transition: all 0.3s ease-in-out !important;
}

.portfolio-flters-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    /* ไม่ให้ขึ้นบรรทัดใหม่ */
    overflow-x: auto !important;
    /* ทำให้สามารถเลื่อนในแนวนอนได้ */
    -webkit-overflow-scrolling: touch !important;
    /* ให้เลื่อนได้ดีบนมือถือ */
}

.portfolio-flters-mobile::-webkit-scrollbar {
    display: none !important;
    /* ซ่อนแถบเลื่อน */
}

.portfolio-flters-mobile button {
    margin-right: 10px !important;
    /* เพิ่มระยะห่างระหว่างปุ่ม */
}

.portfolio-items-mobile {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
    /* ทำให้เนื้อหาภายในไม่ขึ้นบรรทัดใหม่ */
}

.portfolio-items-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    /* จัดให้เริ่มต้นที่ซ้าย */
}

.portfolio-items-mobile::-webkit-scrollbar {
    display: none !important;
    /* ซ่อนแถบเลื่อน */
}

.portfolio-item-mobile {
    width: 240px !important;
    margin-right: 10px !important;
    flex-shrink: 0
        /* เพิ่มระยะห่างระหว่างไอเท็ม */
}

.blog-header-mobile {
    z-index: 997;
    transition: all 0.5s;
    /* background: url('../img/Rectangle 37 (4).png') no-repeat center center;
    background-size: cover; */
    height: 550px;
    /* ความสูงเริ่มต้น */
}

.page-link {
    border: 0 !important;
}

.active>.page-link,
.page-link.active {
    z-index: 3;
    color: #DA7519 !important;
    background-color: transparent !important;
    /* border-color: var(--bs-pagination-active-border-color); */
}

.page-link:hover {
    z-index: 2;
    color: #2D2D2D;
    background-color: transparent !important;
}

.page-link:focus {
    z-index: 3;
    color: #2D2D2D;
    background-color: transparent !important;
    outline: 0;
}

.page-link {
    color: #4D4D4D66;
}

.icon-pagination {
    color: #2D2D2D !important;
}

.blog-detail-header-mobile {
    z-index: 997;
    transition: all 0.5s;
    /* background: url('../img/Rectangle 37 (5).png') no-repeat center center;
    background-size: cover; */
    height: 440px;
    /* ความสูงเริ่มต้น */
}

.custom-bg-contact-pc {
    min-height: 650px;
}

.contact-tk-text {
    font-size: 22px !important;
}

.text-ellipsis {
    display: -webkit-box;
    /* ใช้ flexbox ของ WebKit สำหรับ multi-line ellipsis */
    -webkit-line-clamp: 3;
    /* จำนวนบรรทัดที่ต้องการแสดง (3 บรรทัด) */
    -webkit-box-orient: vertical;
    /* กำหนดการเรียงตัวของกล่อง (แนวตั้ง) */
    overflow: hidden;
    /* ซ่อนข้อความที่เกิน */
    text-overflow: ellipsis;
    /* แสดง ... */
    max-height: 86px;
    height: 86px;
    /* กำหนดความสูงสูงสุด */
    /* line-height: 1.5em; */
    /* กำหนดระยะห่างระหว่างบรรทัด */
}

.text-header-ellipsis {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 40px;
    height: 40px;
}

/* ตั้งค่าพื้นหลังและจัดกลาง */
.loading-wrap {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}

/* กล่องของวงกลม */
.loading-div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 210px;
    /* ระยะห่างรวมของวงกลม */
}

/* วงกลม */
.circle-loading {
    width: 90px;
    height: 60px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #DA7519;
    /* สีฟ้า */
    animation: scaleAnimation 1.5s infinite ease-in-out;
}

/* ลำดับการแสดงวงกลม */
.circle-loading:nth-child(1) {
    animation-delay: 0s;
    /* เริ่มทันที */
}

.circle-loading:nth-child(2) {
    animation-delay: 0.3s;
    /* เริ่มหลังจาก 0.3s */
}

.circle-loading:nth-child(3) {
    animation-delay: 0.6s;
    /* เริ่มหลังจาก 0.6s */
}

/* Animation การขยายและหดตัว */
@keyframes scaleAnimation {

    0%,
    100% {
        transform: scale(0);
        /* หดเล็กสุด */
        opacity: 0;
        /* ซ่อน */
    }

    50% {
        transform: scale(1);
        /* ขยายเต็ม */
        opacity: 1;
        /* แสดง */
    }
}

.img-blog {
    height: 330px !important;
    width: 100% !important;
    object-fit: cover !important;
}

.blog-header-pc-image {
    height: 641px !important;
    object-fit: cover !important;
}

.box-button-mobile {
    height: 29px;
    border-radius: 200px;
    padding: 0 20px;
    /* เพิ่ม padding เพื่อความกว้าง */
    border: 1px solid #C7C7C7;
    /* ขอบสีดำหรือปรับสีตามต้องการ */
    cursor: pointer;
    color: #4D4D4D;

    white-space: nowrap;
    /* ป้องกันข้อความตกบรรทัดใหม่ */
    overflow: visible;
    /* แสดงข้อความยาวเต็มที่ */
    display: inline-block;
    /* จัดปุ่มให้อยู่ในแนวนอน */
}

.card-img {
    position: relative;
    width: 100%;
    height: 100%;
    max-height: 480px;
}

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

.img-home {
    width: 100%;
    max-height: 740px !important;
    object-fit: cover !important;
}

.full-screen-image-home {
    /* height: 100vh; */
    /* Full viewport height */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
    /* Ensures no scrollbars appear if the image is too wide */
}

@media (min-width: 1201px) {
    /* CSS สำหรับหน้าจอ Desktop ขนาดใหญ่ */
    .full-screen-image-home {
        padding-top: 6.5rem;
        padding-bottom: 6.5rem;
    }
}

@media (min-width: 768px) {

    .full-screen-image-home img {
        width: 100%;
        /* Fill section width on small screens */
        height: auto;
        /* Maintain aspect ratio */
    }
}

@media (max-width: 768px) {
    .full-screen-image-home {
        height: auto;
        /* Remove the 100vh height on small screens */
    }

    .full-screen-image-home img {
        width: 100%;
        /* Fill section width on small screens */
        height: auto;
        /* Maintain aspect ratio */
    }
}

.service-bg {
    background-color: #FBF9F7;
}

#header-about-page {
    transition: all 0.2s ease;
}

#header-about-page.scrolled .nav-text-white {
    color: #213b52 !important;
}

#header-about-page.scrolled #navbar-xl.nav-text-white li a {
    color: #213b52 !important;
}

#header-about-page.scrolled #navbar-xl.nav-text-white li a.active {
    color: #fdc134 !important;
}

#header-about-page.scrolled #navbar-xl.nav-text-white li a:hover,
#navbar-xl.nav-text-white li a:focus,
#navbar-xl.nav-text-white li a.active {
    color: #fdc134 !important;
}