@charset "UTF-8";
/* ============================================================
   responsive.css  —  รองรับการแสดงผลบนมือถือ / จอแคบ
   ใช้กับหน้าหลักที่มีโครงสร้าง <div id="Layer26"> ครอบตารางกว้าง 1006px
   (index1, information-room, keereewan1-7)

   หลักการ: เมื่อจอแคบกว่า 1006px จะคลายการวางตำแหน่งแบบ absolute
   และแปลงตารางทั้งหมดให้เรียงต่อกันลงมาเป็นแนวตั้ง (linearize)
   พร้อมย่อรูปภาพให้พอดีความกว้างจอ จึงไม่ต้องเลื่อนซ้าย-ขวา
   ============================================================ */

@media screen and (max-width: 1005px) {

  /* ยกเลิกความกว้างคงที่ 1006px ที่ใช้จัดกึ่งกลางบนจอใหญ่ */
  html, body {
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  /* ปลดกล่องหลักออกจาก position:absolute ให้ไหลตามปกติ */
  #Layer26 {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
  }

  /* แปลงตารางทุกระดับให้เรียงลงมาเป็นแนวตั้ง */
  #Layer26 table,
  #Layer26 tbody,
  #Layer26 tr,
  #Layer26 td,
  #Layer26 th {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* หน้าแรก (index1.html): คอลัมน์รูปภาพด้านซ้าย (rowspan=42) จะถูกดันขึ้นมา
     อยู่ก่อนเนื้อหาหลักเมื่อเรียงเป็นแนวตั้ง จึงย้ายไปไว้ท้ายหน้าแทน
     เพื่อให้ผู้ใช้มือถือเห็นข้อความแนะนำและรายการห้องพักก่อน */
  #Layer26 > table > tbody {
    display: flex !important;
    flex-direction: column;
  }
  #Layer26 > table > tbody > tr:has(> td[width="217"][rowspan="42"]) {
    order: 90;
  }

  /* รูปภาพย่อตามความกว้างจอ ไม่ล้นขอบ */
  #Layer26 img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* object/embed/iframe (เช่น สไลด์โชว์ในหน้าห้องพัก) ไม่ให้ล้นขอบจอ */
  #Layer26 object,
  #Layer26 embed,
  #Layer26 iframe {
    max-width: 100% !important;
    width: 100% !important;
  }

  /* เว้นระยะให้อ่านง่ายขึ้น และกันข้อความยาวดันขอบ */
  #Layer26 > table {
    padding: 0 8px;
    box-sizing: border-box;
  }
  #Layer26 td {
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* แถบหัวข้อพื้นหลัง barbg.gif ให้สูงพอดีข้อความ */
  #Layer26 td[background] {
    background-repeat: repeat;
    padding: 2px 0;
  }
}

/* จอเล็กมาก (มือถือแนวตั้ง) — ขยายขนาดตัวอักษรพื้นฐานให้อ่านออก */
@media screen and (max-width: 600px) {
  #Layer26 td {
    font-size: 15px;
    line-height: 1.5;
  }
  #Layer26 .style55,
  #Layer26 .style54,
  #Layer26 .style82,
  #Layer26 .style86 {
    font-size: 13px !important;
  }
}