/* =========================================================
   RESPONSIVE FIX v2 (เสริมจาก skeleton.css / base.css / main.css เดิม)
   หมายเหตุ: skeleton.css ของธีมนี้ ("1200px Grid") มี media query
   คำนวณความกว้าง container/columns ไว้อย่างละเอียดครบทุก breakpoint
   อยู่แล้ว จึงไม่บังคับ override ความกว้าง container/columns ซ้ำ
   (การ override ซ้ำมีความเสี่ยงทำให้ container กับ columns
   คำนวณความกว้างไม่ตรงกัน จนเกิดปัญหาล้นขอบได้)
   ไฟล์นี้จึงแก้เฉพาะจุดที่ "พิสูจน์แล้วว่าเป็นปัญหาจริง" เท่านั้น
   ========================================================= */

/* รูปภาพทุกรูปยืดหดตามพื้นที่ที่มี ไม่ล้นกรอบ */
img {
    max-width: 100%;
    height: auto;
}

/* iframe / embed (เช่น แผนที่ Google, YouTube ฯลฯ) */
iframe {
    max-width: 100%;
}

/* ---------- [บั๊กจริง #1] กล่อง "CONTACT US" ในหน้า contact.php ----------
   ต้นทาง: main.css กำหนด .google-map-contact-wrapper เป็น
   position:absolute; right:50px; และ .get_in_touch width:300px; แบบตายตัว
   ไม่มี media query รองรับจอเล็ก ทำให้ล้นขวาเสมอเมื่อ container แคบกว่า ~350px
   วิธีแก้: บนจอ <= 767px ให้เลิกลอย (absolute) แสดงเป็นบล็อกปกติเต็มความกว้างแทน */
@media (max-width: 767px) {
    .google-map-contact-wrapper {
        position: static !important;
        right: auto !important;
        top: auto !important;
        left: auto !important;
        margin: 0 0 15px 0 !important;
        width: 100% !important;
    }
    .google-map-contact-wrapper .get_in_touch {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ---------- [บั๊กจริง #2] ตารางไฟล์ดาวน์โหลดที่มีข้อความยาวไม่มีช่องว่าง ----------
   ให้ตัดคำ/บรรทัดได้แม้เป็นคำยาวๆ (ภาษาไทย/อังกฤษที่ไม่มีช่องว่าง)
   เพื่อลดการต้องเลื่อนแนวนอนลงให้มากที่สุด */
.table-responsive-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.download-table {
    table-layout: auto;
}
.download-table td,
.download-table th {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ---------- แผนที่ Google Map (หน้า Contact) ---------- */
#map {
    width: 100% !important;
}
@media (max-width: 991px) {
    #map { height: 400px !important; }
}
@media (max-width: 768px) {
    #map { height: 300px !important; }
}
@media (max-width: 480px) {
    #map { height: 220px !important; }
}

/* ---------- สไลด์รูปที่เดิม fix ความสูงตายตัว (เช่น portfolio_detail.php) ---------- */
@media (max-width: 991px) {
    .flexslider .slides img { height: 350px !important; object-fit: cover; }
    .prod-slider, .prod-slider .slides img { height: auto !important; }
}
@media (max-width: 768px) {
    .flexslider .slides img,
    .main-slider.flexslider img { height: 240px !important; object-fit: cover; }
}
@media (max-width: 480px) {
    .flexslider .slides img,
    .main-slider.flexslider img { height: 180px !important; }
}