/* ============================================================
   TeeSuay — Theme v8 (modern real-estate UI layer)
   2026-11-04 · CSS-only overlay; does not touch PHP logic
   ============================================================ */

:root {
  --ts-ink: #16262f;
  --ts-ink-2: #3f5563;
  --ts-muted: #6b7f8c;
  --ts-teal: #0f766e;
  --ts-teal-dark: #115e59;
  --ts-teal-soft: #e8f5f1;
  --ts-gold: #c9a227;
  --ts-bg: #eef3f6;
  --ts-card: #ffffff;
  --ts-line: #e2e9ee;
  --ts-shadow: 0 16px 40px rgba(15, 45, 60, 0.10);
}

html, body {
  background: var(--ts-bg) !important;
}
body {
  font-family: "Sarabun", "Noto Sans Thai", "Thonburi", -apple-system, sans-serif !important;
  color: var(--ts-ink) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
}
body > table {
  width: 1040px !important;
  max-width: calc(100% - 40px) !important;
  margin: 24px auto !important;
  background: var(--ts-card) !important;
  border-radius: 24px !important;
  box-shadow: var(--ts-shadow) !important;
  overflow: hidden !important;
}
h1, h2, h3, h4 {
  font-family: "Sarabun", "Noto Sans Thai", sans-serif !important;
  color: var(--ts-ink) !important;
}
h1 a, h2 a, h3 a { color: inherit !important; }
a { color: var(--ts-teal-dark); }
img { max-width: 100%; }

/* ---------- Header ---------- */
#header-top {
  background: #fff !important;
  padding: 18px 26px 12px !important;
  border-bottom: 1px solid var(--ts-line) !important;
}
#header-top > table { width: 100% !important; }
#header-top td[width="220"], #header-top td[width="775"] { width: auto !important; }
#header-top img { max-height: 48px !important; width: auto !important; }
#stylefour, #menucase { background: #fff !important; }
#stylefour ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  margin: 0 !important;
  padding: 0 !important;
}
#stylefour ul li { float: none !important; list-style: none !important; }
#stylefour ul li a {
  display: block !important;
  color: var(--ts-ink) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
}
#stylefour ul li a:hover { background: var(--ts-teal-soft) !important; color: var(--ts-teal-dark) !important; }

/* ---------- Login / banner row ---------- */
#bg-main {
  background: #fff !important;
  padding: 6px 26px 18px !important;
}
#bg-main > table { width: 100% !important; }
#bg-main td[width="230"] { width: 260px !important; }
#box-login {
  width: 260px !important;
  background: linear-gradient(145deg, var(--ts-teal), var(--ts-teal-dark)) !important;
  border-radius: 16px !important;
  padding: 8px 2px !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(15, 118, 110, 0.18) !important;
}
#box-login strong, #box-login a { color: #e6fffa !important; }
#box-login input[type="text"], #box-login input[type="password"] {
  border: 0 !important;
  border-radius: 8px !important;
  height: 30px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  color: var(--ts-ink) !important;
}
#box-login td[width="60"] {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  padding-top: 8px !important;
}
#box-login input[type="image"] {
  width: 100% !important;
  max-width: 180px !important;
  height: 32px !important;
  object-fit: contain !important;
}
#bg-main img { border-radius: 14px !important; }
body:has(#box-search-project) #bg-main td[width="750"] {
  background: linear-gradient(135deg, #e8f5f1, #d7efe8) !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  height: auto !important;
}
body:has(#box-search-project) #bg-main td[width="750"] > table { display: none !important; }
body:has(#box-search-project) #bg-main td[width="750"]::before {
  content: "ค้นหาบ้านที่ใช่ ในทำเลที่คุณต้องการ";
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #0f3d3e;
  line-height: 1.3;
}
body:has(#box-search-project) #bg-main td[width="750"]::after {
  content: "รวมประกาศบ้าน คอนโด ที่ดิน ทั่วประเทศไทย";
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #3f5563;
}

/* ---------- Search + content ---------- */
#box-search-project { background: #fff !important; padding: 18px 26px 26px !important; }
#box-search {
  background: linear-gradient(160deg, var(--ts-teal), var(--ts-teal-dark)) !important;
  border-radius: 18px !important;
  padding: 18px !important;
  box-shadow: 0 12px 28px rgba(15, 118, 110, 0.20) !important;
}
#box-search { height: auto !important; }
#box-search form { height: auto !important; }
#box-search table, #box-search tbody, #box-search tr, #box-search td { height: auto !important; }
#box-search table { width: 100% !important; }
#box-search td { color: #fff !important; }
#box-search select {
  width: 100% !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  color: var(--ts-ink) !important;
  background: #fff !important;
}
#box-search table, #box-search tbody, #box-search tr, #box-search td { background: transparent !important; }
#box-search input[type="image"] { filter: none !important; }

/* ---------- Section headings (replace bitmap titles) ---------- */
td:has(> img[src*="title-featured-project"]),
td:has(> img[src*="title-exclusive"]),
td:has(> img[src*="title-article"]) {
  text-align: left !important;
  padding: 8px 0 14px !important;
}
td:has(> img[src*="title-featured-project"]) img,
td:has(> img[src*="title-exclusive"]) img,
td:has(> img[src*="title-article"]) img { display: none !important; }
td:has(> img[src*="title-featured-project"])::before,
td:has(> img[src*="title-exclusive"])::before,
td:has(> img[src*="title-article"])::before {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--ts-ink);
  border-left: 4px solid var(--ts-teal);
  padding-left: 12px;
  line-height: 1.3;
}
td:has(> img[src*="title-featured-project"])::before { content: "แนะนำโครงการเด่น"; }
td:has(> img[src*="title-exclusive"])::before { content: "ประกาศ Exclusive"; }
td:has(> img[src*="title-article"])::before { content: "บทความ ข่าวสาร"; }

/* ---------- Featured project cards ---------- */
#box-featured-project {
  background: var(--ts-card) !important;
  border: 1px solid var(--ts-line) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: 0 4px 14px rgba(20, 50, 70, 0.06) !important;
}
#box-featured-project img { border-radius: 10px !important; }
#box-featured-project a { color: var(--ts-ink) !important; }
#box-featured-project a > img[src*="bt-detail-project"] { display: none !important; }
#box-featured-project a:has(> img[src*="bt-detail-project"]) {
  display: inline-block !important;
  background: var(--ts-teal) !important;
  color: #fff !important;
  border-radius: 8px !important;
  padding: 7px 14px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}
#box-featured-project a:has(> img[src*="bt-detail-project"])::after { content: "ดูรายละเอียด"; }

/* ---------- Exclusive listings ---------- */
#box-exclusive {
  background: var(--ts-card) !important;
  border: 1px solid var(--ts-line) !important;
  border-radius: 14px !important;
  padding: 12px !important;
  box-shadow: 0 4px 14px rgba(20, 50, 70, 0.06) !important;
  margin-bottom: 14px !important;
}
#box-exclusive img { border-radius: 10px !important; }
#box-exclusive a { color: var(--ts-ink) !important; }

/* ---------- Hide intrusive ad images only (do not hide parent content cells) ---------- */
img[src*="/ads-img/"] { display: none !important; }

/* ---------- Article list ---------- */
#box-news {
  background: var(--ts-card) !important;
  border: 1px solid var(--ts-line) !important;
  border-radius: 14px !important;
  padding: 12px !important;
}
#box-news td[width="38"] {
  background: var(--ts-teal) !important;
  color: #fff !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  line-height: 30px !important;
  text-align: center !important;
  font-weight: 700 !important;
}
#box-news a { color: var(--ts-ink) !important; font-weight: 600 !important; }

/* ---------- Black SEO section -> brand panel ---------- */
td[style*="background:#000000"] {
  background: linear-gradient(145deg, var(--ts-teal), var(--ts-teal-dark)) !important;
  border-radius: 16px 0 0 16px !important;
}
td[style*="background:#000000"] img { display: none !important; }
td[style*="background:#000000"]::before {
  content: "TeeSuay.com";
  display: block;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  padding: 28px 24px 4px;
}
td[style*="background:#000000"]::after {
  content: "ตลาดอสังหาริมทรัพย์ไทย";
  display: block;
  color: #c9f3e9;
  font-size: 14px;
  padding: 0 24px;
}

/* ---------- Footer ---------- */
#footer-top {
  background: #0b1f2a !important;
  color: #d7e3ea !important;
  padding: 14px 26px !important;
}
#footer-main {
  background: #0b1f2a !important;
  color: #d7e3ea !important;
  padding: 24px 26px !important;
}
#footer-main a { color: #d7e3ea !important; }
#footer-main td { border-color: rgba(255, 255, 255, 0.12) !important; }
#footer-bottom {
  background: #081821 !important;
  color: #9fb3c0 !important;
  padding: 14px 26px !important;
}

/* ---------- Buttons / links ---------- */
input[type="submit"], input[type="button"], button {
  border-radius: 9px !important;
}
#chat { right: 18px !important; bottom: 18px !important; }
#histats_counter { display: none !important; }

@media (max-width: 1120px) and (min-width: 821px) {
  body > table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    table-layout: fixed !important;
  }
  #header-top, #bg-main, #box-search-project { padding-left: 12px !important; padding-right: 12px !important; }
  #header-top > table, #bg-main > table, #box-search-project > table { width: 100% !important; }
  body > table { overflow-x: auto !important; }
}
@media (max-width: 1100px) and (min-width: 901px) { body > table { zoom: 0.95; } }
@media (max-width: 900px) and (min-width: 821px) { body > table { zoom: 0.85; } }

@media (max-width: 820px) {
  body > table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  #header-top { padding: 14px 16px 10px !important; }
  #bg-main { padding: 4px 16px 14px !important; }
  #box-search-project { padding: 14px 16px 20px !important; }
  td:has(> img[src*="title-featured-project"])::before,
  td:has(> img[src*="title-exclusive"])::before,
  td:has(> img[src*="title-article"])::before { font-size: 19px; }
  body:has(#box-search-project) #bg-main td[width="750"], body:has(#box-search-project) #bg-main td[width="755"] { display: none !important; }
  #bg-main, #box-exclusive, #footer-bottom { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; }
  #bg-main > table, #box-exclusive table, #footer-bottom table, #footer-bottom tr, #footer-bottom td { width: 100% !important; max-width: 100% !important; }
  #bg-main table, #bg-main tbody, #bg-main tr, #bg-main td { height: auto !important; }
  #bg-main { padding-bottom: 10px !important; }
  #box-login { padding: 10px 12px !important; }
  #box-login input[type="text"], #box-login input[type="password"] {
    height: 38px !important;
    font-size: 14px !important;
  }
  #box-login input[type="image"] { height: 36px !important; }
  #header-top img { max-height: 40px !important; }

}

/* ---------- Hide duplicate sidebar search on non-home pages ---------- */
body:not(:has(#box-search-project)) #box-search { display: none !important; }
body:not(:has(#box-search-project)) table:has(> tbody > tr > td > table > tbody > tr > td#box-search) { display: none !important; }

/* ---------- Property detail page ---------- */
td:has(> #map_canvas), #map_canvas { display: none !important; }
body:has(#inbox-project) #box-search { display: none !important; }
body:has(#inbox-project) table:has(> tbody > tr > td > table > tbody > tr > td#box-search) { display: none !important; }
#box-project {
  background: #f3f6f8 !important;
  background-image: none !important;
  border-radius: 18px !important;
  padding: 10px !important;
}
#inbox-project {
  background: #f3f6f8 !important;
  background-image: none !important;
  border-radius: 18px !important;
  padding: 10px !important;
}
#inbox-project > table, #inbox-project > table > tbody > tr > td {
  background: #f3f6f8 !important;
  background-image: none !important;
}
#font-post-title, #font-post-title a { color: var(--ts-ink) !important; }
#font-post-title { font-size: 26px !important; line-height: 1.35 !important; }
#inbox-project h1, #inbox-project h1 a, #inbox-project h2 a { color: var(--ts-ink) !important; }
#box-post-detail td { padding: 6px 8px !important; border-bottom: 1px solid #eef2f5 !important; }
#box-post-detail td:first-child { color: var(--ts-muted) !important; font-weight: 600 !important; }

/* ---------- Article reading: hide login card on mobile ---------- */
@media (max-width: 820px) {
  body:has(.content-box) #box-login { display: none !important; }
}