/* =========================================================
   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;
    }
}

/* หมายเหตุ: หน้า download.php เปลี่ยนไปใช้ div-based layout แล้ว
   (CSS ของตารางแบบ card อยู่ใน <style> ของ download.php เองโดยตรง
   ไม่ต้องพึ่งไฟล์นี้อีกต่อไป จึงตัดกฎเก่าของ .download-table ออกจากที่นี่) */

/* ---------- [บั๊กจริง #3] ฟอร์มล้นขอบบนมือถือ (ทุกหน้าที่มี textarea) ----------
   ต้นทาง: main.css บรรทัด
   ".contact-info input[type="text"], textarea{min-width:500px;}"
   เขียนโดยไม่ได้ตั้งใจให้ "textarea" (ไม่มีจุดเชื่อม .contact-info)
   กลายเป็น selector แยก ทำให้ <textarea> ทุกตัวในทุกหน้าเว็บ
   ถูกบังคับกว้างขั้นต่ำ 500px เสมอ ไม่มี media query แก้ไขเลย
   กระทบหน้า contact.php (ฟอร์มส่งข้อความ), detail.php และ
   product_detail.php (ฟอร์มคอมเมนต์/รีวิว) */
@media (max-width: 767px) {
    .contact-info input[type="text"],
    textarea {
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ---------- แผนที่ 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; }
}