.logo {
    z-index: 1000 !important;
}

.navbar-mobile ul {
    list-style: none;
    /* ลบจุดรายการใน list */
    padding: 0;
    margin: 0;
    /* display: flex; */
    /* ใช้ flexbox เพื่อจัดแนวนอน */
    justify-content: center;
    /* จัดรายการให้อยู่ตรงกลาง */
    margin-top: 15%;
}

.navbar-mobile li {
    text-align: center;
    /* จัดข้อความให้อยู่กลางในแต่ละ <li> */
    padding: 0 15px;
    /* เว้นช่องว่างระหว่าง <li> */
}

.navbar-mobile a {
    display: block;
    /* ให้ลิงค์เต็มขนาดของ <li> */
    text-decoration: none;
    /* ลบเส้นใต้ลิงค์ */
    font-size: 20px;
    font-weight: 500 !important;
}

.navbar-mobile .dropdown ul {
    box-shadow: none !important;
}

/* .navbar-mobile .dropdown-active {
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
    margin-top: 40%;
}

.navbar-mobile .dropdown-active li {
    text-align: center;
    padding: 0 15px;
} */

.navbar-mobile .dropdown {
    text-align: center !important;
}

.navbar-mobile .dropdown a {
    text-align: center !important;
    display: block !important;
    text-decoration: none;
    font-size: 20px !important;
    font-weight: 500 !important;
    color: #213b52 !important;
}

.navbar-mobile .nav-text-white .dropdown a {
    color: #213b52 !important;
}

.nav-text-white .dropdown a {
    color: #ffffff !important;
}

.nav-text-white .dropdown ul li a {
    color: #213b52 !important;
}

.dropdown-active a {
    display: block;
    text-decoration: none;
    font-size: 20px;
    font-weight: 500 !important;
}

.footer-mobile {
    display: none;
}

.gallery-mobile {
    display: none;
}

.service-index-mobile {
    display: none;
}

.index-before-all-logo {
    font-size: 28px;
}

.logo-white-mobile {
    display: none;
}

.nav-about-mobile {
    display: none;
}

.about-frame-img-mobile {
    display: none;
}

.blog-mobile {
    display: none;
}

.about-team-img {
    height: 252px;
}

.service-header-mobile {
    display: none;
}

.service-machine-mobile {
    display: none;
}

.type-of-box-mobile {
    display: none !important;
}

.career-hero-text-mobile {
    display: none !important;
}

.career-benefit-mobile {
    display: none !important;
}

.job-description-mobile {
    display: none !important;
}

.blog-header-mobile {
    display: none !important;
}

.blog-hero-mobile {
    display: none !important;
}

.blog-list-mobile {
    display: none !important;
}

.blog-detail-header-mobile {
    display: none !important;
}

.contact-mobile {
    display: none !important;
}

.career-modal-text-mobile {
    display: none !important;
}

.img-box-all-product {
    width: 100% !important;
    height: 331px !important;
    object-fit: cover !important;
}

.mobile-max-height {
    width: 240px !important;
    height: 250px !important;
    object-fit: cover !important;
    /* ทำให้ภาพเติมเต็มพื้นที่โดยรักษาสัดส่วน */
}

.text-dark {
    -webkit-touch-callout: none;
    /* ปิดการโทรใน Safari */
    -webkit-user-select: none;
    /* ปิดการเลือกข้อความ */
    user-select: none;
    /* ปิดการเลือกข้อความ */
}

.img-hero-home {
    height: 750px !important;
}

@media (min-width: 1728px) {
    .hero-imonials-slider video {
        height: 1050px;
    }
    .img-hero-home {
        height: 1050px !important;
    }
}

@media (min-width: 1920px) {
    .hero-imonials-slider video {
        height: 1050px;
    }
    .img-hero-home {
        height: 1050px !important;
    }
}

@media (max-width: 768px) {
    .footer-pc {
        display: none;
    }

    .footer-mobile {
        display: block;
    }

    #contact-us {
        padding-top: 20%;
        padding-bottom: 20%;
    }

    .carousel-container img {
        max-height: 440px !important;
    }

    .index-hero-swiper {
        max-height: 440px !important;
    }

    .overlay-text-left {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .overlay-text-right {
        position: absolute;
        top: 10%;
        left: 53%;
        transform: translate(-50%, -50%);
        right: auto !important;
    }

    .view-all-btn {
        left: 50%;
        font-family: "Nunito", sans-serif !important;
        font-optical-sizing: auto !important;
        font-weight: 500 !important;
        font-style: normal !important;
        font-size: 14px !important;
    }

    .view-all-btn-right {
        right: auto !important;
        left: 50% !important;
        transform: translate(-43%, -50%);
    }

    .hero-veiw-all-img {
        width: 100% !important;
        /* ทำให้รูปภาพกว้างเต็มจอ */
        height: 215px !important;
        /* จำกัดความสูง */
        display: block;
        /* แก้ไขปัญหาหากมีการแสดงผลผิดเพี้ยน */
        flex-shrink: 0 !important;
        object-fit: cover !important;
    }

    .gallery-pc {
        display: none;
    }

    .gallery-mobile {
        display: block;
    }

    .service-index-pc {
        display: none;
    }

    .service-index-mobile {
        display: block;
    }

    .index-before-all-logo {
        font-size: 16px !important;
    }

    .logo-white-pc {
        display: none;
    }

    .logo-white-mobile {
        display: block;
    }

    .index-learn-more-btn {
        display: none;
    }

    #about {
        padding-bottom: 1rem;
    }

    #header-about-page {
        height: 440px;
    }

    .nav-about-pc {
        display: none;
    }

    .nav-about-mobile {
        display: block;
    }

    .roboto-flex-section {
        font-size: 16px;
    }

    .roboto-flex-mobile-w-500-size-20 {
        font-family: "Roboto Flex", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 20px;
    }

    .roboto-flex-mobile-w-500-size-16 {
        font-family: "Roboto Flex", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 16px;
    }

    .nunito-mobile-w-600-size-16 {
        font-family: "Nunito", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 16px;
    }

    .nunito-mobile-w-700-size-16 {
        font-family: "Nunito", sans-serif;
        font-weight: 700;
        font-style: normal;
        font-size: 16px;
    }

    .about-frame-img-pc {
        display: none;
    }

    .about-frame-img-mobile {
        display: block;
    }

    .blog-pc {
        display: none;
    }

    .blog-mobile {
        display: block;
    }

    .about-paragrap {
        font-size: 14px;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }

    .service-header-pc {
        display: none;
    }

    .service-header-mobile {
        display: block;
    }

    .service-header-mobile {
        height: 440px;
    }

    .service-hero-img-pc {
        display: none;
    }

    .service-machine-text {
        font-size: 20px !important;
    }

    .service-machine-tab-header-text {
        font-size: 16px !important;
    }

    .service-machine-pc {
        display: none;
    }

    .service-machine-mobile {
        display: block;
        height: 402px;
        object-fit: cover;
    }

    .type-of-box-pc {
        display: none !important;
    }

    .type-of-box-mobile {
        display: block !important;
    }

    .service-swiper-img {
        height: 470px;
    }

    #header-product-page-2 {
        height: 440px;
    }

    #header-product-page-2 .logo img {
        max-height: 47px;
        margin-top: 15px;
        margin-left: 15px;
        margin-bottom: 15px;
        height: auto;
    }

    .blog-nav {
        display: none;
    }

    .product-text-header {
        font-size: 20px;
    }

    .product-text-paragraph {
        font-size: 14px;
    }

    .product-text-header-mobile-18 {
        font-size: 18px;
    }

    .product-blog-img {
        height: 243px;
        width: 100%;
    }

    .product-blog-item {
        /* margin-right: 10px; */
        height: 243px;
        width: 50%;
        padding: 0;
    }

    #blog-posts-our-product {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    #header-career-page {
        height: 440px;
    }

    .career-hero-text-20 {
        font-size: 20px !important;
    }

    .career-hero-text-18 {
        font-size: 18px !important;
    }

    .mobile-text-roboto-w-400-18 {
        font-family: "Roboto Flex", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 18px !important
    }

    .mobile-text-roboto-w-500-18 {
        font-family: "Roboto Flex", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 18px !important
    }

    .mobile-text-nunito-w-600-18 {
        font-family: "Nunito", sans-serif;
        font-weight: 600;
        font-style: normal;
        font-size: 18px !important
    }

    .career-hero-text-16 {
        font-size: 16px !important;
    }

    .career-hero-text-14 {
        font-size: 14px !important;
    }

    .career-hero-text-pc {
        display: none !important;
    }

    .career-hero-text-mobile {
        display: block !important;
    }

    .career-benefit-img {
        width: 325px;
    }

    .career-benefit-pc {
        display: none !important;
    }

    .career-benefit-mobile {
        width: 100%;
        height: auto;
        display: block !important;
    }

    .job-description-pc {
        display: none !important;
    }

    .job-description-mobile {
        display: block !important;
    }

    .blog-header-pc {
        display: none !important;
    }

    .blog-header-mobile {
        display: block !important;
    }

    #blog-page-header-blog-new .image {
        display: none !important;
    }

    .blog-hero-pc {
        display: none !important;
    }

    .blog-hero-mobile {
        display: block !important;
    }

    .blog-hero-text-20 {
        font-size: 20px !important;
    }

    .blog-hero-text-18 {
        font-size: 18px !important;
    }

    .blog-hero-text-16 {
        font-size: 16px !important;
    }

    .blog-hero-text-14 {
        font-size: 14px !important;
    }

    .blog-list-pc {
        display: none !important;
    }

    .blog-list-mobile {
        display: block !important;
    }

    .blog-detail-header-pc {
        display: none !important;
    }

    .blog-detail-header-mobile {
        display: block !important;
    }

    .image-iner-blog {
        width: 100% !important;
        height: 250px;
    }

    .faq-text-20 {
        font-size: 20px !important;
    }

    .faq-text-18 {
        font-size: 18px !important;
    }

    .contact-pc {
        display: none !important;
    }

    .contact-mobile {
        display: block !important;
    }

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

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

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

    .index-hero-text-50 {
        font-size: 50px !important;
    }

    .index-hero-text-20 {
        font-size: 20px !important;
    }

    .index-hero-text-18 {
        font-size: 18px !important;
    }

    .index-hero-title-text-18 {
        font-family: "Roboto Flex", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 18px !important;
    }

    .index-hero-subtitle-text-14 {
        font-family: "Nunito", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 14px !important;
    }

    .nunito-w-500-size-14 {
        font-family: "Nunito", sans-serif;
        font-weight: 500;
        font-style: normal;
        font-size: 14px !important;
    }

    .modal-bottom {
        position: fixed;
        bottom: 0;
        left: 0%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 600px; /* หรือกำหนดตามต้องการ */
        margin: 0;
        max-height: 80vh; /* กำหนดความสูงสูงสุดให้ modal เพื่อเลื่อนดูได้ */
        overflow: auto !important; /* อนุญาตให้ scroll */
        overflow-y: auto !important; /* เปิดการ scroll เฉพาะแกน Y */
        -webkit-overflow-scrolling: touch; /* เปิดการ scroll ที่ลื่นไหลใน iOS */
        touch-action: pan-y; /* เปิดการเลื่อนในแกน Y */
    }

    .career-modal-text-pc {
        display: none !important;
    }

    .career-modal-text-mobile {
        display: inline !important;
    }

    .footer-mobile-link-font-18 {
        font-family: "Roboto Flex", sans-serif !important;
        font-optical-sizing: auto !important;
        font-weight: 500 !important;
        font-style: normal !important;
        font-size: 18px !important;
        color: #2D2D2D !important;
    }

    .th {
        font-family: "Kanit", sans-serif !important;
    }

    .about .image {
        min-height: unset;
    }

    .about .image-about-page {
        min-height: unset;
        margin-bottom: 40px;
        padding-left: 0px;
        padding-right: 0px;
    }

    .mobile-padding {
        padding-left: 80px;
        padding-right: 80px;
    }

    .margin-sm {
        margin-bottom: 5px;
    }

    .index-blog-img img {
        height: 160px !important;
        object-fit: cover !important;
    }

    /* กล่องของวงกลม */
    .loading-div {
        width: 120px;
    }

    /* วงกลม */
    .circle-loading {
        width: 25px;
        height: 25px;
    }

    .text-ellipsis {
        max-height: 66px;
        height: 66px;
    }
    
    .text-header-ellipsis {
        max-height: 25px;
        height: 25px;
    }
}

@media (max-width: 576px) {
    .index-blog-img img {
        height: 160px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 400px) {
    .view-all-btn {
        left: 45%;
        padding-left: 40px !important;
        padding-right: 40px !important;
        font-family: "Nunito", sans-serif !important;
        font-optical-sizing: auto !important;
        font-weight: 500 !important;
        font-style: normal !important;
        font-size: 14px !important;
    }

    .view-all-btn-right {
        padding-left: 40px !important;
        padding-right: 40px !important;
        left: 54% !important;
        transform: translate(-50%, -50%);
    }

    .th {
        font-family: "Kanit", sans-serif !important;
    }

    .mobile-max-height {
        width: 240px !important;
        height: 250px !important;
        object-fit: cover !important;
        /* ทำให้ภาพเติมเต็มพื้นที่โดยรักษาสัดส่วน */
    }

    .index-blog-img img {
        height: 160px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 391px) {
    .view-all-btn {
        left: 50% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        font-family: "Nunito", sans-serif !important;
        font-optical-sizing: auto !important;
        font-weight: 500 !important;
        font-style: normal !important;
        font-size: 14px !important;
    }

    .view-all-btn-right {
        padding-left: 40px !important;
        padding-right: 40px !important;
        left: 54% !important;
        transform: translate(-50%, -50%);
    }

    .th {
        font-family: "Kanit", sans-serif !important;
    }
}

.th {
    font-family: "Kanit", sans-serif !important;
}


.th-light {
    font-weight: 300 !important;
}

.th-regular {
    font-weight: 400 !important;
}

.th-medium {
    font-weight: 500 !important;
}

.th-semibold {
    font-weight: 600 !important;
}

/* สำหรับจอ 4K (3840px) */
@media screen and (min-width: 2000px) {
    .fixed-size-image {
        height: 500px !important;
    }
}

/* สำหรับจอ 4K (3840px) */
@media screen and (min-width: 2560px) {
    .fixed-size-image {
        height: 600px !important;
    }
}

/* สำหรับจอ 5K (5120px) */
@media screen and (min-width: 3840px) {
    .fixed-size-image {
        height: 700px !important;
    }
}

/* สำหรับจอ 5K (5120px) */
@media screen and (min-width: 5120px) {
    .fixed-size-image {
        height: 800px !important;
    }
}

/* สำหรับจอ 6K (6016px) */
@media screen and (min-width: 6016px) {
    .fixed-size-image {
        height: 950px !important;
    }
}

/* สำหรับจอ 8K (7680px) */
@media screen and (min-width: 7680px) {
    .fixed-size-image {
        height: 1250px !important;
    }
}