/* ย่อสเกลดีไซน์บนจอ desktop — โหลดท้ายสุด ทับ mirror.css
 *
 * ปัญหา: ดีไซน์เดิมจาก Elementor ทำมาสำหรับพื้นที่ ~1280px แล้วใช้ตัวอักษรใหญ่มาก
 * (H1/H2 48px, หัวการ์ด 32px, บางหน้าถึง 100px) พอเปิดบนจอ 1920 ทุกอย่างดูบวม
 * โลโก้ลูกค้า/รูปการ์ด/ระยะห่าง ก็ใหญ่ตามไปหมด
 *
 * ทำไมใช้ zoom ไม่ใช่ไล่แก้ font-size ทีละจุด:
 * ทั้งเว็บมี font-size แบบ px ตายตัว 787 จุด กระจายใน 38 ไฟล์ CSS และตัวที่บวมจริง
 * ไม่ใช่แค่ตัวอักษร แต่รวมรูป โลโก้ ไอคอน padding ด้วย — ไล่แก้ทีละอันไม่มีทางครบ
 * และพังง่าย zoom ย่อทั้งชุดตามสัดส่วนเดิม สัดส่วนดีไซน์จึงไม่เพี้ยน
 *
 * ความกว้างหน้าไม่เปลี่ยน: --content-width ของแต่ละ container ถูกหารด้วยค่า zoom
 * ผลคือกล่องยังกว้างเท่าเดิมบนจอจริง แต่ของข้างในเล็กลง = ได้เนื้อหาต่อแถวมากขึ้น
 * ครอบ min(100%,...) ไว้กัน container ล้นจอตอนพื้นที่แคบ
 *
 * มือถือ/แท็บเล็ต (<=1024px) ไม่แตะเลย — responsive เดิมของ Elementor ทำงานดีอยู่แล้ว
 */

@media (min-width: 1025px) {
  .mc-mirror {
    --mc-zoom: 0.92;
    zoom: var(--mc-zoom);
  }

  /* ชดเชยความกว้าง: กล่องกว้างขึ้นในหน่วย CSS เท่ากับที่ zoom ย่อลง → บนจอเท่าเดิม */
  .mc-mirror .e-con > .e-con-inner {
    max-width: min(100%, calc(var(--content-width, 1160px) / var(--mc-zoom)));
  }
}

/* โน้ตบุ๊กทั่วไป */
@media (min-width: 1366px) {
  .mc-mirror { --mc-zoom: 0.88; }
}

/* จอใหญ่ 1080p ขึ้นไป — ตรงนี้แหละที่ดีไซน์เดิมบวมที่สุด */
@media (min-width: 1680px) {
  .mc-mirror { --mc-zoom: 0.85; }
}

/* กันเหนียว: เบราว์เซอร์ที่ไม่รองรับ zoom (Firefox ต่ำกว่า 126) จะข้ามบล็อกบนไปทั้งก้อน
   ได้ดีไซน์เดิมขนาดเดิม ซึ่งใช้งานได้ปกติ ไม่พัง */