/* Responsive usability safeguards for the public landing page. */
@media only screen and (max-width: 1239px) {
    #Top_bar a.responsive-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
    }

    #Top_bar a.responsive-menu-toggle i {
        line-height: 44px;
    }
}

@media only screen and (max-width: 767px) {
	#Top_bar .logo,
	#Top_bar #logo {
		width: auto;
		max-width: calc(100% - 70px);
	}

	#Top_bar #logo img {
		max-width: 100%;
		height: auto;
	}

    .top-contact-wrap .top-left {
        justify-content: center;
    }

    ul.contact-icon {
        gap: 8px;
    }

    ul.contact-icon li a.icon_bar_small,
    ul.contact-icon li a.icon_bar_small span {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
}

@media only screen and (max-width: 520px) {
    .custom-banner .banner-content h1,
    .custom-banner .banner-content h2,
    .banner-animate .chat-box p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

@media only screen and (max-width: 380px) {
    .custom-banner .banner-content h1 {
        font-size: 28px;
        line-height: 1.25;
    }
}

/* Cloudflare Turnstile กว้างคงที่ 300px แต่คอลัมน์ฟอร์มบนมือถือแคบกว่า ย่อให้พอดีแทนการถูกตัด */
@media only screen and (max-width: 480px) {
    .cf-turnstile {
        width: 300px;
        transform: scale(0.78);
        transform-origin: left top;
        margin-bottom: -15px;
    }
}

/* โลโก้ Header กว้างตามสัดส่วนจริงของไฟล์ (ธีมเดิมตรึง width 220 ทำให้รูปถูกบีบ) ความสูงคุมด้วย max-height ของธีม */
#Top_bar #logo img.site-logo {
    width: auto;
    height: auto;
    max-width: none;
}

@media only screen and (max-width: 767px) {
    #Top_bar #logo img.site-logo {
        max-width: 100%;
    }
}

/* ---- ตรวจ responsive 2026-09-17 ---- */

/* QR LINE ใน footer กว้าง 281px เกินจอ 320px */
#Footer img.line-qr {
    max-width: 100%;
    height: auto;
}

/* จุดแตะบนจอสัมผัสต้องไม่เล็กกว่า 44px (ลิงก์โทร/อีเมล/LINE ใน footer และไอคอนโซเชียลเดิมสูงแค่ 22px) */
@media only screen and (max-width: 1023px) {
    #Footer .social-contact li a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    #Footer .footer_copy ul.social li a,
    #Footer #back_to_top {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }

    ul.contact-icon li a.icon_bar_small,
    ul.contact-icon li a.icon_bar_small span {
        width: 44px;
        height: 44px;
        line-height: 44px;
    }
}

/* ปุ่มลอย (ขอใบเสนอราคา + LINE) ไม่บังข้อความ copyright ท้ายหน้าบนมือถือ */
@media only screen and (max-width: 767px) {
    #Footer .footer_copy {
        padding-bottom: 80px;
    }
}

/* ข้อความใต้หัวข้อ Hero ใช้ขนาดตัวอักษร 1.1rem แต่รับ line-height 50px ของ h2 จากธีม บรรทัดจึงห่างเกินไป */
.custom-banner .banner-content h2 {
    line-height: 1.7;
}

/* scripts.js (mfn_header) ตั้งความกว้าง .top_bar_left ด้วย JS ระหว่างโหลด ถ้าคำนวณก่อน layout นิ่ง
   เมนูจะหล่นไปอยู่ใต้โลโก้ชั่วครู่แล้วเด้งกลับ (CLS 0.33) — หน้านี้ไม่มี .top_bar_right จึงกว้างเต็มเสมอ */
#Top_bar .top_bar_left {
    width: 100% !important;
}