:root { --navy:#082b4b; --green:#278e60; --orange:#f28b35; --ink:#14202a; --muted:#65727d; --line:#dce4e4; --mist:#eef4f4; --white:#fff; --shadow:0 20px 60px rgba(8,43,75,.12); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
[hidden] { display:none !important; }
body { margin:0; color:var(--ink); background:#fff; font-family:"IBM Plex Sans Thai",sans-serif; font-size:16px; line-height:1.6; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; font:inherit; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.site-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.95); border-bottom:1px solid rgba(8,43,75,.08); backdrop-filter:blur(16px); }
.nav-shell { width:min(1180px,calc(100% - 40px)); min-height:76px; margin:0 auto; display:flex; align-items:center; gap:30px; }
.brand { display:inline-flex; align-items:center; gap:11px; margin-right:auto; }
.brand-mark { width:42px; height:42px; overflow:hidden; border-radius:13px; background:#c9edf3; box-shadow:0 8px 22px rgba(8,43,75,.18); }
.brand-mark img { width:100%; height:100%; object-fit:cover; transform:scale(1.42); }
.brand b { display:block; color:var(--navy); font:600 1.08rem/1.1 "Prompt",sans-serif; }
.brand small { display:block; margin-top:3px; color:var(--green); font-size:.65rem; font-weight:700; letter-spacing:.12em; }
.back-link { border:1px solid var(--line); border-radius:999px; padding:9px 15px; color:var(--navy); font-weight:700; }
.detail-shell { width:min(1180px,calc(100% - 40px)); min-height:70vh; margin:0 auto; padding:25px 0 80px; }
.detail-topline { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:0 0 14px; }
.breadcrumb { display:flex; min-width:0; flex:1; gap:9px; align-items:center; overflow:hidden; margin:0; color:var(--muted); font-size:.8rem; white-space:nowrap; }
.breadcrumb a:hover { color:var(--green); }
.breadcrumb strong { overflow:hidden; color:var(--navy); text-overflow:ellipsis; }
.listing-share { position:relative; display:flex; flex:0 0 auto; align-items:center; gap:6px; }
.listing-share>small { color:var(--muted); font-size:.64rem; font-weight:700; white-space:nowrap; }
.listing-share-buttons { display:flex; align-items:center; gap:4px; }
.share-button { display:flex; width:22px; height:22px; flex:0 0 22px; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; color:#fff; line-height:0; box-shadow:0 3px 8px rgba(8,43,75,.13); transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.share-button:hover,.share-button:focus-visible { outline:2px solid rgba(8,43,75,.12); outline-offset:1px; transform:translateY(-1px); box-shadow:0 5px 11px rgba(8,43,75,.2); filter:saturate(1.12); }
.share-button svg { display:block; width:12px; height:12px; margin:0; overflow:visible; fill:currentColor; }
.share-facebook svg { transform:translateX(.5px); }
.share-facebook { background:#1877f2; }
.share-x { background:#111; }
.share-line { background:#06c755; }
.share-line .share-line-word { fill:#06c755; }
.share-linkedin { background:#0a66c2; }
.share-copy { background:#f28b35; }
.share-copy svg { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.share-copy.is-copied { background:#278e60; }
.share-feedback { position:absolute; top:calc(100% + 5px); right:0; color:var(--green); font-size:.68rem; font-weight:700; white-space:nowrap; }
.media-grid { position:relative; display:grid; height:min(55vw,560px); gap:12px; overflow:hidden; border-radius:24px; background:var(--mist); }
.media-grid.with-side { grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr); }
.media-grid.single { grid-template-columns:1fr; }
.video-primary,.media-photo { width:100%; height:100%; min-width:0; overflow:hidden; border:0; padding:0; background:#071f34; }
.video-primary iframe,.video-primary video { width:100%; height:100%; border:0; }
.video-primary video { display:block; object-fit:contain; background:#071f34; }
.media-grid.video-layout { height:auto; align-items:stretch; background:#071f34; }
.media-grid.video-layout .video-primary { height:auto; aspect-ratio:16/9; }
.media-grid.video-layout .media-side { height:100%; min-height:0; }
.media-grid.video-portrait { height:min(62vw,720px); grid-template-columns:minmax(320px,405px) minmax(0,1fr); justify-content:center; background:#071f34; }
.media-grid.video-portrait .video-primary { display:grid; place-items:center; width:100%; height:100%; aspect-ratio:9/16; background:radial-gradient(circle at 50% 45%,#173d59,#061c30 72%); }
.media-grid.video-portrait .video-primary iframe,.media-grid.video-portrait .video-primary video { width:100%; height:100%; aspect-ratio:9/16; }
.media-photo img { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.media-photo.is-portrait { background:radial-gradient(circle at 50% 45%,#24485d,#071f34 72%); }
.media-photo.is-portrait img { object-fit:contain; }
.media-photo:hover img { transform:scale(1.025); }
.media-side { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; min-width:0; }
.media-side.count-1 { grid-template-columns:1fr; grid-template-rows:1fr; }
.media-side.count-2 { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
.media-side.count-3 .media-photo:first-child { grid-row:1 / -1; }
.view-all { position:absolute; right:18px; bottom:18px; z-index:2; border:1px solid rgba(8,43,75,.12); border-radius:10px; padding:10px 14px; background:rgba(255,255,255,.94); color:var(--navy); font-weight:700; box-shadow:0 8px 24px rgba(4,24,40,.16); }
.detail-layout { display:grid; grid-template-columns:minmax(0,1fr) 335px; gap:60px; align-items:start; padding:38px 0 0; }
.location { margin:0 0 8px; color:var(--green); font-weight:700; }
.property-purpose { display:inline-flex; align-items:center; min-height:27px; margin:0 0 9px; padding:4px 11px; border-radius:999px; background:#e8f6ef; color:#16754f; font-size:.78rem; font-weight:800; }
.property-purpose.is-sale { background:#fff0e3; color:#b75914; }
h1 { max-width:840px; margin:0; color:var(--navy); font:600 clamp(2rem,4vw,3.5rem)/1.18 "Prompt",sans-serif; letter-spacing:-.025em; }
.info-section { margin-top:32px; }
.section-heading { position:relative; margin:0 0 15px; padding-left:14px; color:var(--navy); font:600 1.38rem "Prompt",sans-serif; }
.section-heading::before { position:absolute; top:.2em; bottom:.2em; left:0; width:4px; border-radius:99px; background:var(--orange); content:""; }
.basic-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:11px; }
.basic-item { min-width:0; padding:16px 17px; border:1px solid var(--line); border-radius:14px; background:var(--mist); }
.basic-item span,.detail-highlights span { display:block; color:var(--green); font-size:.78rem; font-weight:700; }
.basic-item strong,.detail-highlights strong { display:block; margin-top:4px; color:var(--navy); font-size:1rem; overflow-wrap:anywhere; }
.property-copy > .basic-info { margin-top:24px; }
body[data-market="rent"] .basic-info .section-heading { margin-bottom:10px; }
body[data-market="rent"] .basic-grid { gap:7px; }
body[data-market="rent"] .basic-item { padding:10px 13px; border-radius:11px; }
.rental-info-section { margin-top:22px; overflow:hidden; border:1px solid var(--line); border-radius:15px; background:#fff; box-shadow:0 9px 25px rgba(8,43,75,.055); }
.rental-section-intro { padding:13px 17px 11px; background:linear-gradient(135deg,#f0f8f5,#f8fbfa); border-bottom:1px solid var(--line); }
.rental-section-intro > span { display:block; margin-bottom:2px; color:var(--green); font-size:.72rem; font-weight:800; letter-spacing:.08em; }
.rental-section-intro .section-heading { margin-bottom:2px; font-size:1.22rem; }
.rental-section-intro p { margin:0 0 0 14px; color:var(--muted); font-size:.8rem; }
.rental-facts { display:grid; grid-template-columns:1fr 1fr; gap:0; padding:2px 17px 7px; }
.rental-fact { min-width:0; padding:9px 6px; border-bottom:1px solid #e7eded; }
.rental-fact:nth-last-child(-n+2) { border-bottom:0; }
.rental-fact:nth-child(odd) { padding-right:13px; }
.rental-fact:nth-child(even) { padding-left:13px; border-left:1px solid #e7eded; }
.rental-fact span { display:block; color:var(--muted); font-size:.76rem; }
.rental-fact strong { display:block; margin-top:3px; color:var(--navy); font-size:.94rem; overflow-wrap:anywhere; white-space:pre-line; }
.rental-fact.featured-fact strong { color:var(--green); font:700 1.12rem "Prompt",sans-serif; }
.rental-fact.wide-fact { grid-column:1/-1; padding-left:6px; padding-right:6px; border-left:0; }
.rental-fact.amenities-fact { border-bottom:0; }
.deep-info { padding-top:28px; border-top:1px solid var(--line); }
.deep-info .section-heading { margin-bottom:18px; font-size:1.7rem; }
.deep-info p { margin:0; max-width:780px; color:#44535d; line-height:1.7; overflow-wrap:anywhere; white-space:pre-line; }
.deep-info p.is-collapsible { position:relative; max-height:20.4rem; overflow:hidden; }
.deep-info p.is-collapsible:not(.is-expanded)::after { position:absolute; right:0; bottom:0; left:0; height:4.4rem; background:linear-gradient(180deg,rgba(255,255,255,0),#fff 88%); pointer-events:none; content:""; }
.deep-info p.is-expanded { max-height:none; overflow:visible; }
.description-toggle { display:flex; align-items:center; justify-content:center; gap:5px; min-height:38px; margin:12px auto 0; border:1px solid #b9ddcd; border-radius:999px; padding:7px 14px 7px 16px; background:#f0f9f5; color:#16714e; font-size:.85rem; font-weight:800; box-shadow:0 7px 18px rgba(39,142,96,.1); transition:border-color .18s ease,background .18s ease,transform .18s ease; }
.description-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.description-toggle:hover { border-color:#82c3a6; background:#e5f5ed; transform:translateY(-1px); }
.description-toggle:focus-visible { outline:3px solid rgba(39,142,96,.2); outline-offset:2px; }
.description-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.detail-highlights { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-top:20px; }
.detail-highlights div { padding:14px 16px; border-left:3px solid var(--green); border-radius:0 12px 12px 0; background:#f6f9f8; }
.price-card { position:sticky; top:100px; padding:26px; border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); }
.price-card > span { color:var(--muted); font-size:.8rem; }
.price-card > strong { display:block; margin:3px 0 13px; color:var(--green); font:700 2rem "Prompt",sans-serif; }
.price-card p { margin:0 0 17px; color:var(--muted); font-size:.9rem; }
.primary-cta { display:block; width:100%; padding:12px 16px; border-radius:11px; background:var(--orange); color:#1d2830; text-align:center; font-weight:800; }
.primary-cta.is-own-listing,
.primary-cta.is-own-listing:hover,
.primary-cta.is-own-listing:focus-visible { background:#dfe6e7; color:#61727a; cursor:not-allowed; pointer-events:none; box-shadow:none; outline:0; }
.price-card small { display:block; margin-top:14px; color:#7a858c; line-height:1.5; }
.listing-owner { margin:14px 0; border:1px solid #d8e7e1; border-radius:13px; padding:11px 12px; background:#f2faf6; }
.listing-owner > span { color:var(--green); font-size:.75rem; font-weight:700; }
.listing-owner > strong { display:block; margin-top:2px; color:var(--navy); font-size:1rem; }
.property-map { margin-top:52px; padding-top:34px; border-top:1px solid var(--line); }
.property-map-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:22px; margin-bottom:18px; }
.property-map-heading p { margin:0 0 2px; color:var(--green); font-size:.8rem; font-weight:700; }
.property-map-heading h2 { margin:0; color:var(--navy); font:600 1.65rem "Prompt",sans-serif; }
.property-map-heading a { border-bottom:2px solid var(--orange); padding:7px 0; color:var(--navy); font-weight:700; }
.property-map-frame { height:min(48vw,460px); min-height:330px; overflow:hidden; border:1px solid var(--line); border-radius:20px; background:var(--mist); box-shadow:var(--shadow); }
.property-map-frame iframe { width:100%; height:100%; border:0; }
.loading,.not-found { min-height:55vh; display:grid; place-content:center; text-align:center; color:var(--muted); }
.not-found span { color:var(--green); font-size:3.5rem; }
.not-found h1 { font-size:2rem; }
.not-found p { margin:7px 0 18px; }
.not-found a { justify-self:center; padding:10px 17px; border-radius:10px; background:var(--navy); color:#fff; font-weight:700; }
.gallery-dialog { width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; overflow:hidden; border:0; background:rgba(2,15,26,.97); color:#fff; }
.gallery-dialog::backdrop { background:rgba(2,15,26,.97); }
.gallery-dialog figure { position:absolute; inset:0; display:grid; width:auto; height:auto; grid-template-rows:minmax(0,1fr) auto; gap:12px; margin:0; padding:64px 90px 108px; }
.gallery-stage { display:grid; min-width:0; min-height:0; place-items:center; overflow:hidden; cursor:default; touch-action:none; user-select:none; }
.gallery-stage.is-pannable { cursor:grab; }
.gallery-stage.is-dragging { cursor:grabbing; }
.gallery-dialog figure img { max-width:100%; max-height:100%; object-fit:contain; transform-origin:center center; user-select:none; will-change:transform; -webkit-user-drag:none; }
.gallery-dialog figcaption { justify-self:center; min-width:58px; border-radius:999px; padding:4px 11px; background:rgba(2,15,26,.7); font-weight:700; text-align:center; }
.gallery-close,.gallery-nav { position:fixed; z-index:2; display:grid; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.12); color:#fff; }
.gallery-close { top:18px; right:18px; width:46px; height:46px; font-size:1.7rem; }
.gallery-nav { top:50%; width:54px; height:54px; font-size:2.3rem; transform:translateY(-50%); }
.gallery-nav.previous { left:20px; }
.gallery-nav.next { right:20px; }
.gallery-zoom-controls { position:fixed; z-index:3; bottom:18px; left:50%; display:flex; min-height:46px; align-items:center; gap:4px; padding:4px; border:1px solid rgba(255,255,255,.15); border-radius:14px; background:rgba(13,35,51,.86); box-shadow:0 12px 34px rgba(0,0,0,.35); backdrop-filter:blur(14px); transform:translateX(-50%); }
.gallery-zoom-controls button { min-width:38px; height:38px; border:0; border-radius:10px; padding:0 9px; background:rgba(255,255,255,.1); color:#fff; font-weight:800; }
.gallery-zoom-controls button:hover,.gallery-zoom-controls button:focus-visible { background:rgba(255,255,255,.2); outline:2px solid rgba(255,172,98,.8); outline-offset:1px; }
.gallery-zoom-controls button:disabled { opacity:.4; cursor:not-allowed; }
.gallery-zoom-controls output { width:54px; color:#fff; font-size:.78rem; font-weight:800; text-align:center; font-variant-numeric:tabular-nums; }
.gallery-zoom-controls .gallery-zoom-reset { min-width:58px; color:#ffd0a5; font-size:.76rem; }
body.member-managed-listing .global-footer-social{display:none!important}
body.member-managed-listing .global-site-footer>.global-footer-inner{grid-template-columns:minmax(230px,1fr) auto!important}
@media(max-width:820px){
  .media-grid { height:auto; min-height:0; overflow:visible; border-radius:18px; background:transparent; }
  .media-grid.with-side,.media-grid.video-portrait { grid-template-columns:1fr; }
  .video-primary,.primary-photo { aspect-ratio:16/9; border-radius:18px; }
  .media-grid.video-layout .video-primary { aspect-ratio:16/9; }
  .media-grid.video-portrait .video-primary { width:min(100%,430px); height:auto; aspect-ratio:9/16; justify-self:center; }
  .media-grid.video-portrait .video-primary iframe,.media-grid.video-portrait .video-primary video { width:100%; height:100%; }
  .media-grid.video-portrait.with-side { grid-template-columns:36% minmax(0,1fr); width:100%; height:auto; aspect-ratio:1.5625/1; gap:7px; overflow:hidden; border-radius:18px; background:#071f34; }
  .media-grid.video-portrait.with-side .video-primary { width:100%; height:100%; aspect-ratio:auto; justify-self:stretch; border-radius:0; }
  .media-grid.video-portrait.with-side .video-primary iframe,.media-grid.video-portrait.with-side .video-primary video { width:100%; height:100%; aspect-ratio:auto; }
  .media-grid.video-portrait.with-side .media-side { height:100%; min-height:0; gap:7px; }
  .media-grid.video-portrait.with-side .media-side .media-photo { border-radius:0; }
  .media-side { min-height:310px; }
  .media-side .media-photo { border-radius:12px; }
  .detail-layout { grid-template-columns:1fr; gap:28px; }
  .price-card { position:static; }
}
@media(max-width:700px){.detail-topline{align-items:flex-start;flex-direction:column;gap:9px;margin-bottom:13px}.breadcrumb{width:100%;margin-top:4px}.listing-share{width:100%;justify-content:flex-start}.listing-share-buttons{gap:5px}.share-button{width:22px;height:22px;flex-basis:22px}.share-feedback{top:100%;right:auto;left:0}}
@media(max-width:560px){ .nav-shell,.detail-shell { width:calc(100% - 28px); } .brand b { font-size:.95rem; } .back-link { padding:8px 11px; font-size:.8rem; } .media-side { min-height:230px; gap:7px; } .media-grid { gap:7px; } .view-all { right:10px; bottom:10px; padding:8px 10px; font-size:.78rem; } .detail-layout { padding-top:27px; } h1 { font-size:2rem; } .basic-grid,.detail-highlights { grid-template-columns:1fr; } .info-section { margin-top:22px; } .property-copy > .basic-info { margin-top:20px; } .deep-info p { max-width:100%; font-size:1rem; line-height:1.75; } .deep-info p.is-collapsible { max-height:17rem; } .deep-info p.is-expanded { max-height:none; overflow:visible; } .description-toggle { position:relative; width:100%; margin-top:10px; } .detail-highlights { margin-top:20px; } .price-card { min-width:0; overflow-wrap:anywhere; } .price-card > strong { font-size:clamp(1.65rem,9vw,2rem); overflow-wrap:anywhere; } .rental-section-intro { padding:11px 13px 9px; } .rental-facts { grid-template-columns:1fr; padding:1px 13px 6px; } .rental-fact,.rental-fact:nth-child(odd),.rental-fact:nth-child(even),.rental-fact.wide-fact { grid-column:auto; padding:9px 3px; border-left:0; border-bottom:1px solid #e7eded; } .rental-fact:last-child { border-bottom:0; } .property-map { margin-top:38px; padding-top:27px; border-top:1px solid var(--line); } .property-map-heading { align-items:flex-start; flex-direction:column; gap:10px; } .property-map-heading h2 { font-size:1.4rem; } .property-map-frame { height:390px; min-height:0; border-radius:16px; } .gallery-dialog figure { padding:64px 14px 112px; } .gallery-nav { top:auto; bottom:14px; width:48px; height:48px; transform:none; } .gallery-zoom-controls { bottom:14px; } }
@media(max-width:820px){
  body.property-contact-ready:not(.admin-preview-mode){padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .property-contact-ready:not(.admin-preview-mode) #propertyContactLink{position:fixed;right:14px;bottom:calc(10px + env(safe-area-inset-bottom));left:14px;z-index:75;width:auto;min-height:52px;display:flex;align-items:center;justify-content:center;border:1px solid #de771f;border-radius:14px;padding:12px 18px;background:#f28b35;color:#172630;font:700 1rem "Prompt",sans-serif;box-shadow:0 12px 34px rgba(8,43,75,.26)}
  .property-contact-ready:not(.admin-preview-mode) #propertyContactLink:hover,.property-contact-ready:not(.admin-preview-mode) #propertyContactLink:focus-visible{background:#ff9b48;outline:3px solid rgba(242,139,53,.24);outline-offset:2px}
  .property-contact-ready:not(.admin-preview-mode) #propertyContactLink.is-own-listing{background:#dfe6e7;color:#61727a;border-color:#cbd6d8}
  .member-managed-listing .global-site-footer>.global-footer-inner{grid-template-columns:1fr!important}
}
@media(prefers-reduced-motion:reduce){ * { scroll-behavior:auto !important; transition:none !important; } }
.admin-preview-toolbar { position:sticky; top:76px; z-index:29; border-bottom:1px solid #c9ddd6; background:rgba(238,247,243,.97); box-shadow:0 10px 30px rgba(8,43,75,.09); backdrop-filter:blur(14px); }
.admin-preview-toolbar-inner { width:min(1180px,calc(100% - 40px)); min-height:82px; margin:0 auto; display:flex; align-items:center; gap:24px; padding:10px 0; }
.admin-preview-copy { display:grid; flex:0 0 auto; line-height:1.25; }
.admin-preview-copy span { color:var(--orange); font-size:.72rem; font-weight:800; }
.admin-preview-copy strong { color:var(--navy); font:600 1.15rem "Prompt",sans-serif; }
.admin-preview-copy small { color:var(--muted); font-size:.72rem; }
.admin-preview-toolbar p { flex:1; margin:0; color:#4e675f; font-size:.86rem; text-align:center; }
.admin-preview-actions { display:flex; align-items:center; gap:8px; }
.admin-preview-actions a,.admin-preview-actions button { border:1px solid var(--line); border-radius:10px; padding:9px 13px; background:#fff; color:var(--navy); font-weight:800; white-space:nowrap; }
.admin-preview-actions .pending-review { border-color:#f3d4a5; background:#fff0d9; color:#a45b12; }
.admin-preview-actions .published-state,.admin-preview-actions .waiting-state { border-color:#d9e0e2; background:#e8ecee; color:#68767d; cursor:default; }
.admin-preview-actions button:disabled { opacity:1; }
.admin-preview-mode .primary-cta[aria-disabled="true"] { opacity:.72; cursor:not-allowed; }
@media (max-width:760px) { .admin-preview-toolbar { top:76px; } .admin-preview-toolbar-inner { width:calc(100% - 24px); align-items:flex-start; flex-wrap:wrap; gap:8px 12px; padding:10px 0 12px; } .admin-preview-toolbar p { order:3; flex:0 0 100%; text-align:left; } .admin-preview-actions { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; } .admin-preview-actions a { flex-basis:100%; text-align:center; } }