/* ============================================================
   TeeSuay.com — Responsive layer v7  (2026-11-04) — mobile UX overhaul
   ชั้นเสริมสำหรับจอเล็ก (<= 820px) — ไม่กระทบเดสก์ท็อป · v6 แก้ตารางที่ถูก width attr บังคับให้ล้นจอ
   ============================================================ */
@media only screen and (max-width: 820px) {

  html, body { width: auto !important; -webkit-text-size-adjust: 100%; }

  img { max-width: 100% !important; height: auto !important; }

  /* ตารางทุกตัว: พอดีความกว้างพื้นที่ + ไม่ดื้อตาม min-content */
  table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  select, input[type="text"], input[type="password"], input[type="email"], textarea {
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* แถวหัวเว็บ (โลโก้ + เมนู): เรียงลงมา */
  td#header-top > table > tbody > tr > td { display: block !important; width: auto !important; }

  /* แถวกล่องล็อกอิน + แบนเนอร์: เรียงลงมา */
  td[id="bg-main"] > table[width="985"] > tbody > tr > td { display: block !important; width: auto !important; }

  /* แถวค้นหา + โครงการเด่น: เรียงลงมา */
  #box-search-project > table[width="985"] > tbody > tr > td { display: block !important; width: auto !important; }

  /* เมนูบนสุด: ตัดบรรทัดได้สวย ๆ */
  #stylefour { height: auto !important; }
  #stylefour ul { text-align: center; }
  #stylefour ul li { float: none !important; display: inline-block !important; }
  #stylefour ul li a { padding: 8px 10px !important; height: auto !important; font-size: 12.5px; }

  #box-search { height: auto !important; padding-bottom: 10px; }
  .province { float: none !important; width: auto !important; }

  /* v6: legacy width="..." attributes on cells force tables wider than the screen.
     Neutralize them so the 100% table width can actually take effect. */
  td[width], th[width] { width: auto !important; }
  td, th { overflow-wrap: anywhere; word-break: break-word; }

  /* v6: property-detail fixed-size blocks (inline styles from legacy gallery/map) */
  #map_canvas { width: 100% !important; max-width: 100% !important; height: 320px !important; box-sizing: border-box !important; }
  .gv_galleryWrap { width: 100% !important; max-width: 100% !important; height: 525px !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; }
  .gv_gallery { width: 640px !important; height: 525px !important; }
  iframe, object, embed, video { max-width: 100% !important; }

  /* v6: legacy floating member/search panel (menu2.php) covers content on phones */
  .fixed-window { display: none !important; }

  /* v7: stack the two main content columns so cards are not squeezed */
  td[width="605"] { display: block !important; width: 100% !important; }
  td:has(#box-featured-project) { display: block !important; width: 100% !important; }
  #box-featured-project { width: 100% !important; }

  /* v6.2: narrow phones (320px) — region tabs were fixed at 355px */
  #location { max-width: 100% !important; overflow-x: auto !important; }
  #location .province { max-width: 100% !important; }

  /* ============================================================
     v7 — Mobile UX overhaul (structure, not just overflow)
     ============================================================ */

  /* --- Header: logo + menu stacked, compact --- */
  #header-top > table, #header-top > table > tbody, #header-top > table > tbody > tr { display:block!important; width:100%!important; }
  #header-top > table > tbody > tr > td { display:block!important; width:100%!important; height:auto!important; }
  #header-top img { max-width:100%!important; height:auto!important; }
  #stylefour { margin:8px 0 0!important; }
  #stylefour ul { display:flex!important; flex-wrap:wrap!important; justify-content:center!important; gap:4px 2px!important; }
  #stylefour ul li { float:none!important; display:inline-block!important; margin:0!important; }

  /* --- Login box: full-width, stacked, readable --- */
  #box-login { width:100%!important; }
  #box-login > tbody > tr > td { display:block!important; width:100%!important; }
  #box-login table { width:100%!important; }
  #box-login td { height:auto!important; }
  #box-login td[width="25"], #box-login td[width="5"] { display:none!important; }
  #box-login td[width="130"], #box-login td[width="160"], #box-login td[width="60"] { display:block!important; width:100%!important; text-align:left!important; }
  #box-login input[type="text"], #box-login input[type="password"] {
    width:100%!important; height:38px!important; padding:0 10px!important;
    border:1px solid #b9d6ea!important; border-radius:8px!important; box-sizing:border-box!important;
  }
  #box-login input[type="image"] { width:100%!important; max-width:220px!important; height:38px!important; object-fit:contain!important; }
  #box-login a[href*="fblogin"] { display:none!important; }

  /* --- Search panel: full-width stacked fields --- */
  tr:has(> td#box-search) { display:block!important; width:100%!important; height:auto!important; }
  tr:has(> td#box-search) > td { display:block!important; width:100%!important; height:auto!important; }
  table:has(> tbody > tr > td#box-search) { height:auto!important; }
  #box-search {
    display:block!important; background:#78b43c!important; background-image:none!important;
    border-radius:16px!important; padding:16px 14px!important; margin:10px 0 14px!important;
    box-sizing:border-box!important; height:auto!important; min-height:0!important;
  }
  #box-search-project, #box-featured-project { height:auto!important; }
  #box-search-project { padding-left:8px!important; padding-right:8px!important; box-sizing:border-box!important; overflow-x:hidden!important; }
  #box-search-project td, #box-search-project th { box-sizing:border-box!important; max-width:100%!important; }
  #box-search > table, #box-search > table > tbody, #box-search > table > tbody > tr, #box-search > table > tbody > tr > td {
    display:block!important; width:100%!important; height:auto!important;
  }
  #box-search > table > tbody > tr:first-child { display:none!important; }
  #box-search table table, #box-search table table tbody, #box-search table table tr, #box-search table table td {
    display:block!important; width:100%!important; height:auto!important;
  }
  #box-search form { height:auto!important; display:block!important; }
  #box-search td, #box-search td[align="right"] { text-align:left!important; }
  #box-search td { padding:0!important; }
  #box-search select {
    width:100%!important; height:42px!important; margin:0 0 10px!important;
    border:1px solid #d7e3c8!important; border-radius:8px!important;
    padding:0 10px!important; font-size:15px!important; background:#fff!important;
  }
  #box-search td:has(input[src*="bt-search"]) { text-align:center!important; padding-top:6px!important; }
  #box-search input[src*="bt-search"] { width:auto!important; max-width:100%!important; height:44px!important; }

  /* --- Featured project cards: compact horizontal rows --- */
  #box-featured-project > table, #box-featured-project > table > tbody { display:block!important; width:100%!important; }
  #box-featured-project > table > tbody > tr {
    display:flex!important; align-items:center!important; gap:10px!important;
    background:#fff!important; border-radius:12px!important; margin:0 0 10px!important;
    padding:10px 12px!important; width:100%!important; box-sizing:border-box!important;
  }
  #box-featured-project > table > tbody > tr > td { display:block!important; height:auto!important; padding:0!important; }
  #box-featured-project > table > tbody > tr > td[width="5"] { display:none!important; }
  #box-featured-project > table > tbody > tr > td:first-child { flex:0 0 110px!important; width:110px!important; }
  #box-featured-project > table > tbody > tr > td[width="175"] { flex:1 1 auto!important; width:auto!important; min-width:0!important; text-align:left!important; }
  #box-featured-project img { width:110px!important; height:85px!important; object-fit:cover!important; border-radius:8px!important; }
  #box-featured-project table, #box-featured-project table[width="175"] { width:100%!important; }
  #box-featured-project td[height], #box-featured-project tr, #box-featured-project table { height:auto!important; }
  #box-featured-project td[width="175"] td { text-align:left!important; }
  table[width="175"]:has(> tbody > tr > td > a > img[src*="bt-detail-project"]) { display:none!important; }
  /* --- News/article section: stack image, number, title; hide ad --- */
  tr:has(> td > #box-news) { display:block!important; width:100%!important; }
  tr:has(> td > #box-news) > td { display:block!important; width:100%!important; height:auto!important; }
  tr:has(> td > #box-news) > td[width="5"] { display:none!important; }
  tr:has(> td > #box-news) > td:last-child { display:none!important; } /* ad column */
  tr:has(> td > #box-news) > td:first-child img { width:100%!important; max-height:220px!important; height:auto!important; object-fit:cover!important; }
  #box-news { width:100%!important; }
  #box-news > tbody > tr { display:block!important; }
  #box-news > tbody > tr > td { display:block!important; width:100%!important; height:auto!important; }
  #box-news td[width="38"] {
    display:inline-block!important; width:30px!important; height:30px!important; line-height:30px!important;
    border-radius:50%!important; background:#f5a623!important; color:#fff!important;
    text-align:center!important; font-weight:700!important; margin:8px 0!important;
  }
  #box-news td[width="5"] { display:none!important; }
  #box-news td[width="322"] { display:block!important; width:auto!important; max-width:100%!important; box-sizing:border-box!important; }
  #box-news a { font-size:16px!important; line-height:1.5!important; }

  /* --- Third-party widgets --- */
  iframe[src*="facebook.com/plugins/page"] { display:none!important; }
  td:has(> #map_canvas) { display:none!important; }
  #chat { display:none!important; }

  /* --- Main content vs Exclusive column: stack on mobile --- */
  tr:has(> td > table[width="605"]) { display:block!important; width:100%!important; }
  tr:has(> td > table[width="605"]) > td { display:block!important; width:100%!important; height:auto!important; }
  td[width="605"], td[width="300"] { display:block!important; width:100%!important; height:auto!important; }
  #box-exclusive { display:block!important; width:100%!important; }
  #box-exclusive table { width:100%!important; }
  #box-exclusive tr { display:block!important; }
  #box-exclusive td { display:block!important; width:100%!important; height:auto!important; }
  #box-exclusive img { max-width:100%!important; height:auto!important; }

  /* --- Numbered article list: badge + full-width text --- */
  tr:has(> td[background*="bg-number-article"]) { display:block!important; width:100%!important; }
  tr:has(> td[background*="bg-number-article"]) > td { display:block!important; width:100%!important; height:auto!important; }
  tr:has(> td[background*="bg-number-article"]) > td[background*="bg-number-article"] {
    display:inline-block!important; width:36px!important; height:36px!important; line-height:36px!important;
    background-size:100% 100%!important; border-radius:50%!important; margin:6px 0!important;
  }
  tr:has(> td[background*="bg-number-article"]) > td[width="5"] { display:none!important; }

  /* --- Footer: 2-column grid, readable --- */
  #footer-main > table, #footer-main > table > tbody { display:block!important; width:100%!important; }
  #footer-main > table > tbody > tr { display:flex!important; flex-wrap:wrap!important; width:100%!important; }
  #footer-main > table > tbody > tr > td {
    flex:0 0 50%!important; width:50%!important; height:auto!important;
    padding:8px 6px!important; box-sizing:border-box!important;
  }
  #footer-main table { width:100%!important; }
  #footer-main td { height:auto!important; }
  #footer-bottom { display:block!important; width:100%!important; }
  #footer-bottom td { display:block!important; width:100%!important; height:auto!important; text-align:center!important; }
  #box-news td[width="322"] { padding-left:2px!important; }
}