/* ===========================================================================
   หน้ารายละเอียดแปลงที่ดิน (land.html) — ต่อจาก marketplace.css + warm.css

   หัวใจของหน้านี้คือแผงผลตรวจ 2 ระดับ ซึ่งต้องแยกกันให้ชัดตั้งแต่แวบแรก
   ระดับ 1 = เหลือง (ข้อมูลเบื้องต้น) · ระดับ 2 = เขียว (ตรวจเชิงลึกแล้ว)
   ถ้าสองระดับดูเหมือนกัน ป้าย "รังวัดยืนยันแล้ว" จะหมดความหมายทันที
   =========================================================================== */

.ld-main{padding:22px 0 46px;min-height:50vh}
.ld-back{
  display:inline-block;font-size:13px;font-weight:600;color:var(--sub);
  text-decoration:none;margin-bottom:16px;
}
.ld-back:hover{color:var(--navy)}

.ld-loading{
  min-height:220px;display:grid;place-items:center;gap:12px;
  color:#8798A9;font-size:14px;
}
.ld-loading span{
  width:28px;height:28px;border:3px solid #E3EAF1;border-top-color:var(--green);
  border-radius:50%;animation:spin 1s linear infinite;
}

/* ---------- แกลเลอรีรูป (แบบโมเสก · 2026-09-27) ----------
   มือถือ: แถบปัดนิ้วแนวนอนทีละรูป (scroll-snap) · จอ ≥768px: ใหญ่ 1 + เล็กสูงสุด 4 ใบ
   ⚠️ รูปใบแรกต้องเป็น object-fit:contain ห้ามกลับไปใช้ cover
   ภาพที่เจ้าของแปลงส่งมามีทั้งรูปถ่ายมือถือ (แนวตั้ง 3:4) และภาพกราฟิกแผนที่ที่ออกแบบมา
   ซึ่งมีตัวหนังสือชิดขอบ · cover จะครอบตัดชื่อสถานที่บนภาพแผนที่ขาดครึ่งคำ (เจอจริงกับ OP-018 · 2026-08-30)
   รูปเล็กใช้ cover ได้เพราะเป็นแค่ตัวอย่าง แตะแล้วเปิดเต็มจอแบบ contain ด้วยไฟล์ต้นฉบับเสมอ */
.ld-gal{position:relative;margin:0 0 20px}
.ld-strip{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  aspect-ratio:4/3;border-radius:16px;background:#0B1F3A;scrollbar-width:none;
}
.ld-strip::-webkit-scrollbar{display:none}
.ld-tile{
  position:relative;flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;
  border:0;padding:0;margin:0;background:#0B1F3A;cursor:zoom-in;overflow:hidden;display:block;
  font:inherit;color:inherit;
}
.ld-tile-img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;display:block}
/* พื้นหลังเบลอ — รูปใบเดียวกันขยายเต็มกรอบแล้วเบลอ ใช้ถมแถบว่างข้างภาพแนวตั้ง
   ให้ดูเป็นการออกแบบ ไม่ใช่กรอบดำที่ดูเหมือนโหลดรูปไม่ขึ้น
   scale เกิน 1 เล็กน้อยเพื่อดันขอบที่เบลอจนโปร่งออกนอกกรอบ ไม่งั้นจะเห็นเส้นจางๆ รอบภาพ */
.ld-gal-bd{
  position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;filter:blur(26px) brightness(.62);transform:scale(1.15);
}
/* ช่องว่างตอนยังไม่มีรูป — ห้ามเติมรูปแทน (กติกาข้อ 9) ใช้ไล่สีเรียบๆ บอกว่ายังไม่มีรูป */
.ld-mosaic.n0 .ld-noimg{
  aspect-ratio:16/9;border-radius:16px;
  background:linear-gradient(160deg,#8798A9 0 44%,#9CC47F 45% 64%,#6E9556 65% 100%);
}
/* ลายน้ำ — มุมล่างซ้ายของรูปใบแรก ไม่ทับผังแปลงตรงกลางซึ่งเป็นสิ่งที่คนซื้อมาดู */
.ld-wm{
  position:absolute;left:12px;bottom:12px;z-index:3;display:flex;align-items:center;gap:6px;
  background:rgba(11,37,73,.42);backdrop-filter:blur(3px);padding:5px 11px;border-radius:6px;pointer-events:none;
}
.ld-wm span{color:#fff;font-size:11.5px;font-weight:700;opacity:.95}
.ld-wm small{color:rgba(255,255,255,.75);font-size:10px}
.ld-gal-count{
  position:absolute;right:12px;top:12px;z-index:4;pointer-events:none;
  background:rgba(8,23,43,.72);color:#fff;border-radius:20px;padding:5px 11px;
  font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
}
.ld-gal-all{
  position:absolute;right:12px;bottom:12px;z-index:4;min-height:40px;
  display:inline-flex;align-items:center;gap:7px;padding:0 16px;border:0;border-radius:999px;
  background:#fff;color:var(--navy);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 18px rgba(8,31,61,.22);
}
.ld-gal-all:hover{background:#E8EEF7}
@media(min-width:768px){
  .ld-strip{
    display:grid;gap:8px;overflow:visible;aspect-ratio:auto;background:none;border-radius:0;
    height:clamp(340px,40vw,500px);
    grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr;
  }
  .ld-tile{border-radius:14px}
  .ld-tile:not(.t0) .ld-tile-img{object-fit:cover}
  .ld-tile:not(.t0):hover .ld-tile-img{transform:scale(1.03)}
  .ld-tile-img{transition:transform .35s var(--nj-ease,ease)}
  .ld-tile.t0{grid-row:1/3}
  .ld-tile:nth-child(n+6){display:none}
  .ld-gal-count{display:none}
  /* จำนวนรูปน้อยกว่า 5 — จัดตะแกรงให้เต็มกรอบ ไม่ทิ้งช่องว่าง (และไม่เติมรูปแทน) */
  .ld-mosaic.n1 .ld-strip{grid-template-columns:1fr;grid-template-rows:1fr}
  .ld-mosaic.n2 .ld-strip{grid-template-columns:3fr 2fr;grid-template-rows:1fr}
  .ld-mosaic.n2 .ld-tile.t0{grid-row:auto}
  .ld-mosaic.n3 .ld-strip{grid-template-columns:2fr 1fr}
  .ld-mosaic.n4 .ld-tile:nth-child(4){grid-column:2/4}
}
@media(prefers-reduced-motion:reduce){ .ld-tile-img{transition:none} .ld-tile:hover .ld-tile-img{transform:none !important} }

/* ---------- ดูรูปเต็มจอ (lightbox · <dialog>) ---------- */
.ld-lb{
  position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:rgba(5,12,24,.97);color:#fff;
}
.ld-lb[open]{display:flex;flex-direction:column}
.ld-lb::backdrop{background:rgba(5,12,24,.9)}
html.ld-lb-lock{overflow:hidden}
.ld-lb-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px 18px;flex:none}
.ld-lb-count{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.ld-lb-x{
  width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.12);
  color:#fff;font-size:20px;cursor:pointer;
}
.ld-lb-stage{position:relative;flex:1;min-height:0}
/* วางรูปแบบ absolute ให้พอดีกรอบเวที — แบบ grid + max-height:100% ความสูงแถวเป็น auto
   รูปแนวตั้งจึงล้นลงไปทับแถบรูปย่อข้างล่าง (เจอจริงตอนพรีวิว 27 ก.ย. 69) */
.ld-lb-img{position:absolute;inset:0 8px;width:calc(100% - 16px);height:100%;object-fit:contain;display:block;user-select:none}
.ld-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer;z-index:1;
}
.ld-lb-nav.prev{left:10px} .ld-lb-nav.next{right:10px}
.ld-lb-nav:hover,.ld-lb-x:hover{background:rgba(255,255,255,.26)}
.ld-lb-wm{left:auto;right:18px;bottom:10px;z-index:1}
.ld-lb-strip{display:flex;gap:6px;overflow-x:auto;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));flex:none;scrollbar-width:thin}
.ld-lb-th{flex:0 0 auto;width:68px;height:50px;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;background:#111;opacity:.55;cursor:pointer}
.ld-lb-th img{width:100%;height:100%;object-fit:cover;display:block}
.ld-lb-th.on{opacity:1;border-color:var(--nj-gold-500,#D8B96B)}
.ld-lb button:focus-visible{outline:3px solid #fff;outline-offset:2px}
@media(max-width:640px){ .ld-lb-nav{display:none} }   /* มือถือใช้ปัดนิ้วแทน ปุ่มลูกศรบังรูป */

/* ---------- ป้ายบนหัวประกาศ ---------- */
.ld-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.ld-badge{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:6px;color:#fff;white-space:nowrap}
.ld-badge.type{background:#0B2549}
.ld-badge.kind{background:#E7EEF5;color:#0B2549}
.ld-badge.ok{background:#127A47}
.ld-badge.basic{background:#8A6008}

/* ---------- เนื้อหา ---------- */
/* โครงสองคอลัมน์ — ดูคำอธิบายลำดับที่ render() ใน land.js · มือถือเป็นคอลัมน์เดียว */
.ld-layout{
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;
  grid-template-areas:"head" "content" "aside";
}
.ld-head{grid-area:head;min-width:0}
.ld-content{grid-area:content;min-width:0}
.ld-aside{grid-area:aside;min-width:0}
@media(min-width:1024px){
  .ld-layout{grid-template-columns:minmax(0,1fr) 360px;column-gap:28px;row-gap:16px;
    grid-template-areas:"head aside" "content aside";align-items:start}
  .ld-aside{align-self:stretch}
  /* ⚠️ ติดหนึบที่ "กล่องใน" ไม่ใช่ตัว aside — aside ยืดเต็มความสูงสองแถวให้กล่องในมีรางให้เลื่อน
     และจำกัดความสูงไว้ในจอ (เลื่อนในกล่องได้) ไม่งั้นจอโน้ตบุ๊กเตี้ยจะมองไม่เห็นปุ่มส่งฟอร์มเลย */
  .ld-aside-in{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;
    overscroll-behavior:contain;scrollbar-width:thin;padding-bottom:4px}
}
/* การ์ดสีขาวบนพื้นเทาอ่อน (แบบเว็บตัวอย่าง) — ใช้ :has กับหน้านี้หน้าเดียว เบราว์เซอร์เก่า = พื้นขาวเหมือนเดิม */
#main:has(> .ld-main){background:#F4F7FA}
.ld-head,.ld-sec,.ld-agent,.ld-aside .ld-inq{
  background:#fff;border:1px solid #E3EAF1;border-radius:16px;
  box-shadow:0 1px 2px rgba(11,31,58,.04);
}
.ld-head{padding:20px 20px 18px}
@media(min-width:640px){ .ld-head{padding:24px 26px 22px} }
.ld-price{
  font-family:var(--nj-font);font-size:clamp(26px,5.4vw,34px);font-weight:800;
  color:var(--navy);line-height:1.15;
}
.ld-price small{
  font-family:'IBM Plex Sans Thai',sans-serif;font-size:13px;font-weight:500;
  color:#8798A9;margin-left:9px;white-space:nowrap;
}
.ld-vlink{display:inline-block;font-size:12.5px;font-weight:600;color:var(--sub);text-decoration:none;margin-top:4px}
.ld-vlink:hover{color:var(--navy);text-decoration:underline}
/* ---------- รหัสทรัพย์ ----------
   กุญแจที่ทำให้แอดมินจับคู่ "ผู้ซื้อที่ทักเข้ามา ↔ เจ้าของที่ดิน" ได้ จึงต้องเด่นพอให้จดไปแจ้งจริง
   ⚠️ ซ่อนตอนสั่งพิมพ์ไม่ได้ — คนที่พิมพ์ประกาศออกมาอ่านคือคนที่ต้องใช้รหัสนี้ตอนโทรมาที่สุด */
.ld-code{
  background:#0B2549;color:#fff;border-radius:14px;padding:15px 17px;margin:14px 0 4px;
}
.ld-code-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ld-code-label{font-size:12px;letter-spacing:.05em;color:#9DBBE0}
.ld-code-val{
  font-size:26px;font-weight:800;letter-spacing:.06em;
  font-family:var(--nj-font);
}
.ld-code-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.ld-code-btn{
  font-family:inherit;font-size:13px;font-weight:700;color:#0B2549;cursor:pointer;
  background:#fff;border:none;border-radius:9px;padding:9px 13px;
}
.ld-code-btn:hover{background:#E8EEF7}
.ld-code-btn.on{background:#D8B96B}
.ld-code-note{font-size:12.5px;line-height:1.7;color:#C7DAF2;margin:10px 0 0}

/* ---------- สนใจแปลงนี้ + บริการเพิ่มเติม ---------- */
.ld-inq{
  background:#F7F9FC;border:1px solid #DCE3EF;border-radius:16px;padding:20px 20px 22px;margin:22px 0;
}
.ld-inq h2{font-size:19px;font-weight:700;color:#0B2549;margin:0 0 5px;line-height:1.45}
.ld-inq-lede{font-size:13.5px;line-height:1.75;color:#5A7091;margin:0 0 16px}
@media print{ .ld-inq{display:none} }

/* ---------- ทางเข้าหน้านัดตรวจแปลง (Phase 2) ----------
   หน้าตาไม่เหมือนปุ่มติดต่อในแถวบน เพราะมันพาไปอีกหน้าให้กรอกฟอร์ม ไม่ใช่การทักหาทีมงานทันที
   ทำให้เหมือนกันเมื่อไหร่ = แถวปุ่มกลายเป็นสี่ทางเลือกที่ดูสำคัญเท่ากันหมด แล้วปุ่มทักไลน์จะจม */
.ld-inspect{
  display:block;text-decoration:none;margin:14px 0 0;
  border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:12px;padding:14px 16px;background:var(--mist);
}
.ld-inspect b{display:block;font-size:14.5px;color:var(--ink);font-weight:600}
.ld-inspect small{display:block;font-size:12.5px;color:var(--sub);margin-top:4px;line-height:1.6}
.ld-inspect:hover{border-color:var(--green)}
/* ห้องข้อมูลแปลง (Phase 3) — ใช้โครงเดียวกับกล่องนัดตรวจ แต่แถบข้างเป็นสีกรมท่า
   เพราะเป็นคนละเรื่องกัน: อันบนคือให้เราไปตรวจให้ อันนี้คือขอดูเอกสารที่ตรวจไว้แล้ว */
.ld-room{border-left-color:var(--navy)}
.ld-room:hover{border-color:var(--navy)}
/* ทางเข้าเว็บ NJ (2026-09-23) — แถบข้างสีทองหม่นของแบรนด์ NJ แยกจากนัดตรวจ (เขียว) และห้องข้อมูล (กรมท่า)
   เพราะพาออกไปอีกเว็บ ผู้ซื้อต้องเห็นว่าเป็นคนละบริการ */
.ld-nj{border-left-color:var(--nj-gold-600)}
.ld-nj:hover{border-color:var(--nj-gold-600)}
.ld-njguide{display:inline-flex;align-items:center;min-height:44px;margin:2px 2px 0;font-size:var(--nj-fs-sm);color:var(--nj-link);font-weight:600;text-decoration:none}
.ld-njguide:hover{text-decoration:underline}
@media print{ .ld-inspect,.ld-njguide{display:none} }

.ld-title{font-size:clamp(18px,3.4vw,23px);font-weight:600;line-height:1.5;margin:10px 0 6px;color:var(--ink)}
.ld-loc{font-size:13.5px;color:var(--sub);margin-bottom:18px}
.ld-blurb{font-size:14.5px;line-height:1.9;color:var(--sub);margin:0 0 20px}

/* ---------- แถบตัวเลขสำคัญ (เนื้อที่ · พื้นที่ใช้สอย · ห้อง · ที่จอด · หน้ากว้าง) ---------- */
.ld-stats{list-style:none;margin:4px 0 0;padding:14px 0 0;border-top:1px solid #E3EAF1;
  display:flex;flex-wrap:wrap;gap:12px 22px}
.ld-stat{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;min-width:0}
.ld-stat svg{grid-row:1/3;width:26px;height:26px;fill:none;stroke:#1B4B7A;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;background:#EEF3F9;border-radius:8px;padding:5px;box-sizing:content-box}
.ld-stat b{font-family:var(--nj-font);font-size:15.5px;color:var(--ink);line-height:1.25;overflow-wrap:anywhere}
.ld-stat span{font-size:11.5px;color:#5A6B7D;line-height:1.3}
.ld-stats-src{margin:10px 0 0;font-size:11.5px;color:#8A6008}

/* ---------- แผนที่โดยประมาณ ---------- */
.ld-map{margin:0 0 20px}
.ld-map-h{font-size:13.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.ld-map-frame{border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9}
.ld-map-frame iframe{width:100%;height:100%;border:0;display:block}
.ld-map-note{font-size:11.5px;color:#8798A9;line-height:1.7;margin:8px 0 0}
.ld-map-open{
  display:inline-block;margin-top:9px;font-size:12.5px;font-weight:700;
  color:var(--green);text-decoration:none;
}
.ld-map-open:hover{text-decoration:underline}

/* ---------- สถานที่ใกล้เคียง (ข้อมูล Google Places) ----------
   ต้องดูต่างจากแผงผลตรวจ 7 หัวข้อให้ชัด เพราะเป็นข้อมูลของบุคคลที่สาม
   ไม่ใช่สิ่งที่ทีมช่างรังวัดไปยืนยันเองในสนาม — ใช้พื้นเทาเรียบ ไม่ใช้เขียว/เหลืองแบบแผงผลตรวจ */
.ld-nb{
  background:var(--mist);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin:0 0 22px;
}
.ld-nb-h{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:14px}
.ld-nb-h small{display:block;font-size:11.5px;font-weight:400;color:#8798A9;margin-top:3px}
.ld-nb-g{margin-bottom:13px}
.ld-nb-g h3{
  font-size:12px;font-weight:700;color:var(--sub);margin:0 0 7px;
  padding-bottom:5px;border-bottom:1px solid rgba(0,0,0,.06);
}
.ld-nb-g ul{list-style:none;margin:0;padding:0;display:grid;gap:5px}
@media(min-width:560px){.ld-nb-g ul{grid-template-columns:1fr 1fr;gap:5px 18px}}
.ld-nb-g li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:13px}
.ld-nb-g li span{color:var(--ink);min-width:0;overflow-wrap:anywhere}
.ld-nb-g li b{
  flex:none;font-family:var(--nj-font);font-size:12.5px;font-weight:700;color:var(--green);
}
.ld-nb-foot{
  font-size:11.5px;line-height:1.8;color:#8798A9;margin:12px 0 0;
  padding-top:11px;border-top:1px solid rgba(0,0,0,.07);
}

/* ---------- แผงผลตรวจ ---------- */
.ld-tier{border-radius:14px;padding:18px 20px;margin-bottom:22px;border:1px solid}
.ld-tier.t1{background:#FDF8EC;border-color:#D8B96B}
.ld-tier.t2{background:#EFF9F3;border-color:var(--green)}
.ld-tier-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.ld-tier-h b{font-size:15px}
.ld-tier.t1 .ld-tier-h b{color:#8A6008}
.ld-tier.t2 .ld-tier-h b{color:#127A47}
.ld-tier-h em{
  font-style:normal;font-size:10.5px;padding:3px 9px;border-radius:4px;
  margin-left:auto;color:#fff;white-space:nowrap;
}
.ld-tier.t1 .ld-tier-h em{background:#B08D57}
.ld-tier.t2 .ld-tier-h em{background:var(--green)}

.ld-crow{
  display:flex;gap:11px;align-items:flex-start;
  padding:11px 0;border-top:1px solid rgba(0,0,0,.07);
}
.ld-crow:first-of-type{border-top:0}
.ld-crow.dim b,.ld-crow.dim span{color:#8798A9}
.ld-ico{
  flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:800;margin-top:2px;color:#fff;
}
.ld-ico.ok{background:var(--green)}
.ld-ico.warn{background:#B03A2B}
.ld-ico.none{background:#D8E1EA}
.ld-crow > div{flex:1;min-width:0}
.ld-crow b{display:block;font-size:13.5px;line-height:1.55;color:var(--ink)}
.ld-crow span{display:block;font-size:12px;color:var(--sub);line-height:1.7;margin-top:1px}
.ld-val{
  flex:none;font-family:var(--nj-font);font-size:13px;font-weight:700;
  color:var(--ink);white-space:nowrap;margin-top:2px;
}
/* ⚠️ ค่าที่อยู่ในแถวของตัวเองต้องตัดบรรทัดได้ — `.ld-val` ตั้ง `white-space:nowrap` ไว้
   ซึ่งถูกสำหรับค่าสั้นๆ (วันที่ · "โฉนด") แต่ช่องนี้รับข้อความอิสระด้วย เช่นชื่อโครงการ
   ปล่อย nowrap ไว้ = **ทั้งหน้าเลื่อนแนวนอนได้ที่จอ 375px** (วัดจริงแล้วล้น 91px) */
/* ⚠️ ต้องมี `flex:0 1 auto` + `min-width:0` ด้วย ไม่ใช่แค่ปลด nowrap
   `.ld-val` ตั้ง `flex:none` ไว้ ซึ่งแปลว่ากว้างเท่าเนื้อหาเสมอ ต่อให้ตัดบรรทัดได้ก็ไม่ยอมแคบลง */
.ld-crow .ld-val{
  display:block;margin-top:2px;
  white-space:normal;overflow-wrap:anywhere;
  flex:0 1 auto;min-width:0;text-align:right;
}

.ld-tier-foot{
  font-size:11.5px;line-height:1.8;margin:14px 0 0;padding-top:12px;
  border-top:1px solid rgba(0,0,0,.08);
}
.ld-tier.t1 .ld-tier-foot{color:#8A6008}
.ld-tier.t2 .ld-tier-foot{color:#127A47}
.ld-tier-foot b{font-weight:700}

/* ---------- ชวนตรวจสอบ (เฉพาะระดับ 1) ---------- */
.ld-upsell{background:var(--navy);color:#fff;border-radius:12px;padding:17px 19px;margin-top:16px}
.ld-upsell b{display:block;font-size:15px;margin-bottom:5px}
.ld-upsell p{font-size:13px;line-height:1.8;opacity:.85;margin:0 0 14px}
.ld-upbtn{
  display:inline-block;background:var(--green);color:#fff;font-size:14px;font-weight:700;
  padding:11px 22px;border-radius:9px;text-decoration:none;
}
.ld-upbtn:hover{filter:brightness(1.07)}

/* ---------- ปุ่มติดต่อ ---------- */
.ld-cta{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:520px){.ld-cta{grid-template-columns:1fr 1fr}}
.ld-btn{
  text-align:center;font-size:14.5px;font-weight:700;text-decoration:none;
  padding:14px 18px;border-radius:11px;
}
.ld-btn.line{background:#06C755;color:#fff}
.ld-btn.fb{background:#0084FF;color:#fff}
.ld-btn.tel{background:var(--navy);color:#fff}
.ld-btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.ld-btn:hover{filter:brightness(.96)}
.ld-pdf-btn{display:block;width:100%;margin-top:10px;cursor:pointer}

/* ---------- ไม่พบ / โหลดไม่ได้ ---------- */
.ld-empty{
  text-align:center;padding:46px 24px;background:#fff;
  border:1px dashed #D8E1EA;border-radius:14px;color:#5A6B7D;font-size:14px;line-height:1.8;
}
.ld-empty b{display:block;font-size:18px;color:var(--navy);margin-bottom:8px}
.ld-empty-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px}
.ld-empty-btns .ld-btn{padding:12px 22px;font-size:13.5px}

@media(max-width:560px){
  .ld-tier{padding:16px 15px}
  .ld-empty-btns{flex-direction:column}
}

/* ---------- ดาวน์โหลด PDF — ใช้กล่องพิมพ์ของเบราว์เซอร์ (บันทึกเป็น PDF ได้ในตัว) ----------
   ซ่อนของที่กดไม่ได้บนกระดาษ/ใช้พื้นที่ไม่คุ้ม: เมนู, footer, เครื่องคำนวณ (เป็นฟอร์มกรอกเอง),
   แผนที่ (iframe ไม่พิมพ์ผ่านเบราว์เซอร์ส่วนใหญ่), ปุ่มดาวน์โหลดเอง, ปุ่มดูรูป/แชร์/ฟอร์ม
   ⚠️ หัวข้อ "ค่าใช้จ่ายวันโอน" ทั้งหัวข้อถูกซ่อน (ข้างในเป็นฟอร์มกรอกเองล้วน) · หัวข้ออื่นถูกกางให้ก่อนพิมพ์ (beforeprint ใน land.js)
   ⚠️ รหัสทรัพย์ (.ld-code) ห้ามซ่อน — คนที่พิมพ์ประกาศออกมาคือคนที่ต้องใช้รหัสตอนโทรมาที่สุด */
@media print{
  .topbar,.mobile-nav,.sell-banner,footer,.ld-back,#ld-fee,#ld-s-fee,#ld-s-photos,.ld-map,
  .ld-gal-all,.ld-gal-count,.ld-pdf-btn,.ld-share,.ld-lb{display:none !important}
  body,#main:has(> .ld-main){background:#fff}
  .ld-main{padding:0}
  .ld-strip{display:block;height:75mm;aspect-ratio:auto;border-radius:0;overflow:hidden}
  .ld-tile{height:75mm;border-radius:0}
  .ld-tile:not(.t0){display:none}
  .ld-layout{display:block}
  .ld-head,.ld-sec,.ld-agent{box-shadow:none;border-color:#ccc;margin-bottom:10px}
  .ld-sec summary .ld-sec-ico{display:none}
  .ld-tier,.ld-upsell,.ld-nb,.ld-nb-g{break-inside:avoid}
  .ld-cta{grid-template-columns:1fr 1fr 1fr}
  .ld-btn{padding:8px 10px;font-size:12px}
}

/* ---------- สถานะโฟกัสสำหรับการใช้คีย์บอร์ด (เพิ่ม 2026-09-09) ----------
   ⚠️ ไฟล์นี้ไม่เคยมีกฎ :focus เลยสักข้อ ทั้งที่หน้านี้มีปุ่มควบคุมสไลด์ภาพ จุดนำทาง
   ปุ่มคัดลอกรหัสทรัพย์ ปุ่มดูเบอร์ และปุ่มดาวน์โหลด PDF — คนที่เดินหน้าเว็บด้วยคีย์บอร์ด
   หรือใช้สวิตช์ช่วยเหลือ จึงมองไม่ออกเลยว่าตอนนี้โฟกัสอยู่ที่ปุ่มไหน
   ใช้ :focus-visible เพื่อไม่ให้กรอบเด้งขึ้นตอนคลิกเมาส์ (ซึ่งเป็นเหตุผลที่คนมักถอดกฎนี้ทิ้ง) */
#ld-root a:focus-visible,
.ld-back:focus-visible,
.ld-btn:focus-visible,
.ld-sec summary:focus-visible,
.ld-pgrid-i:focus-visible,
.ld-gal-all:focus-visible,
.ld-code-copy:focus-visible,
#ld-code-copy:focus-visible,
#ld-pdf-btn:focus-visible,
#ld-tel:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
  border-radius:8px;
}
/* รูปบนแกลเลอรีเป็นพื้นเข้ม กรอบสีน้ำเงินเข้มจะจมหาย ใช้ขาว + เงาเข้มแทน */
.ld-tile:focus-visible{outline:3px solid #fff;outline-offset:-3px;box-shadow:inset 0 0 0 6px rgba(11,37,73,.8)}

/* ส่วนใหม่ของระลอก Teedin Sure Verified — ให้ break-inside เหมือนแผงผลตรวจเดิมตอนพิมพ์ */
@media print{
  .njv,.njhc,.njp{break-inside:avoid}
}

/* =====================================================================
 * Sprint 3 — Breadcrumb · รายละเอียดเต็ม · เครื่องมือผู้ซื้อ · แถบติดหนึบ · แปลงใกล้เคียง
 * (2026-09-20 · งานที่ 8) · ค่าสีทั้งหมดมาจาก tokens.css
 * ===================================================================== */

/* ---------- เส้นทางนำทาง ---------- */
.ld-crumbs { margin: 0 0 var(--nj-space-3); font-size: var(--nj-fs-xs); color: var(--nj-text-muted); }
.ld-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.ld-crumbs li + li::before { content: "›"; margin-right: 6px; opacity: 0.55; }
.ld-crumbs a { color: var(--nj-navy-600); text-decoration: underline; text-underline-offset: 3px; }
.ld-crumbs a:focus-visible { outline: 2px solid var(--nj-focus); outline-offset: 2px; }
.ld-crumbs [aria-current="page"] { color: var(--nj-text-strong); font-weight: var(--nj-fw-semi); }

/* ---------- รายละเอียดเต็ม (ย้ายมาจาก H1) ---------- */
.ld-desc { margin: var(--nj-space-5) 0; }
.ld-desc h2 { margin: 0 0 var(--nj-space-2); font-size: var(--nj-fs-h4); color: var(--nj-text-strong); }
.ld-desc p {
  margin: 0;
  max-width: var(--nj-measure);      /* 65–75 ตัวอักษรต่อบรรทัด */
  font-size: var(--nj-fs-body);
  line-height: var(--nj-lh-body);
  color: var(--nj-text);
  white-space: pre-line;             /* เจ้าของบางรายขึ้นบรรทัดใหม่เอง ต้องคงไว้ */
}

/* ---------- แถวเครื่องมือของผู้ซื้อ ---------- */
.ld-tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--nj-space-2);
  margin: var(--nj-space-4) 0;
}
.ld-tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;                  /* เกณฑ์เป้ากดบนมือถือ */
  padding: 0 var(--nj-space-4);
  border: 1px solid var(--nj-gray-300);
  background: var(--nj-white);
  color: var(--nj-navy-900);
  font-size: var(--nj-fs-sm);
  font-weight: var(--nj-fw-medium);
  cursor: pointer;
  text-decoration: none;
}
.ld-tool:hover { border-color: var(--nj-navy-900); }
.ld-tool:focus-visible { outline: 2px solid var(--nj-focus); outline-offset: 2px; }

/* ---------- แปลงใกล้เคียง + แปลงที่เพิ่งดู ---------- */
.ld-rel { margin: var(--nj-space-7) 0 0; padding-top: var(--nj-space-6); border-top: 1px solid var(--nj-border); }
.ld-rel h2 { margin: 0 0 var(--nj-space-4); font-size: var(--nj-fs-h3); color: var(--nj-text-strong); }
.ld-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nj-space-4); }
.ld-rel-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin-top: var(--nj-space-3);
  color: var(--nj-navy-600);
  font-size: var(--nj-fs-sm);
  font-weight: var(--nj-fw-semi);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- แถบติดต่อแบบติดหนึบ (มือถือเท่านั้น) ---------- */
/* ⚠️ ซ่อนบนเดสก์ท็อป — ที่นั่นปุ่มติดต่อเห็นอยู่แล้วโดยไม่ต้องมีแถบลอยมาบังเนื้อหา */
.ld-sticky { display: none; }

@media (max-width: 900px) {
  .ld-rel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .ld-rel-grid { grid-template-columns: minmax(0, 1fr); }
  .ld-tools > * { flex: 1 1 100%; justify-content: center; }

  /* ⚠️ z-index ต้องต่ำกว่าแบนเนอร์คุกกี้ (900) และลิ้นชักเมนู (950)
   *    แถบนี้เป็นเรื่องการขาย ส่วนแบนเนอร์คุกกี้เป็นเรื่องกฎหมาย — บังกันไม่ได้
   * ⚠️ ยกตัวเองให้พ้นแถบเมนูล่าง 5 ปุ่มที่มีอยู่แล้วบนหน้านี้ */
  .ld-sticky {
    position: fixed;
    left: 0;
    right: 0;
    /* ⚠️ ต้องบวกความสูงแบนเนอร์คุกกี้ด้วย — แบนเนอร์อยู่ z-index 900 ทับแถบนี้ (150) เต็มๆ
     ค่าตัวแปรถูกตั้งโดย measureConsent() ใน analytics.js · ไม่มีแบนเนอร์ = 0px */
  bottom: calc(69px + var(--nj-consent-h, 0px));
    z-index: var(--nj-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--nj-space-2);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--nj-navy-900);
    box-shadow: 0 -6px 20px rgba(11, 31, 58, 0.22);
  }
  .ld-sticky-code {
    flex: 0 0 auto;
    font-size: var(--nj-fs-xs);
    color: var(--nj-gold-500);
    font-weight: var(--nj-fw-semi);
  }
  .ld-sticky-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    font-size: var(--nj-fs-sm);
    font-weight: var(--nj-fw-semi);
    text-decoration: none;
  }
  .ld-sticky-btn.line { background: var(--nj-gold-500); color: var(--nj-navy-900); }
  .ld-sticky-btn.tel { border: 1px solid rgba(255, 255, 255, 0.55); color: var(--nj-white); }
  .ld-sticky-btn:focus-visible { outline: 2px solid var(--nj-focus); outline-offset: 2px; }

  /* เว้นที่ท้ายหน้าให้แถบลอยไม่ทับเนื้อหาบรรทัดสุดท้าย */
  body { padding-bottom: 130px; }
}

/* ตอนสั่งพิมพ์ไม่ต้องมีแถบลอยและเครื่องมือบนหน้าจอ */
@media print {
  .ld-sticky, .ld-tools, .ld-rel { display: none !important; }
}

/* ---------------------------------------------------------------------------
   เนื้อหาที่ฝังไว้ใน HTML ต้นทางของหน้าสแตติก p/<รหัส>.html (Sprint 5 · งานที่ 15)

   ⚠️ กล่องนี้ถูก `land.js` เขียนทับทั้งก้อนทันทีที่ข้อมูลสดโหลดเสร็จ
      สไตล์จึงต้องทำให้ "จังหวะแรกก่อน JS ทำงาน" อ่านออกและไม่กระโดด ไม่ต้องสวยเท่าของจริง
   ⚠️ รูปมี width/height กำกับ เพื่อให้เบราว์เซอร์จองที่ไว้ก่อน — กัน layout shift
--------------------------------------------------------------------------- */
.ldp{max-width:var(--nj-measure);margin:0 auto}
.ldp-photo{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--nj-radius-md);background:var(--nj-gray-100)}
.ldp-title{margin:var(--nj-space-5) 0 var(--nj-space-3);font-size:var(--nj-fs-h2);line-height:var(--nj-lh-tight);color:var(--nj-text-strong)}
.ldp-blurb{margin:0 0 var(--nj-space-4);color:var(--nj-text);line-height:var(--nj-lh-body)}
.ldp-rows{margin:0 0 var(--nj-space-5);padding:0}
.ldp-row{display:flex;gap:var(--nj-space-4);padding:var(--nj-space-2) 0;border-top:1px solid var(--nj-border)}
.ldp-row dt{flex:0 0 40%;margin:0;color:var(--nj-text-muted);font-size:var(--nj-fs-sm)}
.ldp-row dd{flex:1 1 auto;margin:0;min-width:0;font-weight:600;overflow-wrap:anywhere}
.ldp-h2{margin:var(--nj-space-5) 0 var(--nj-space-2);font-size:var(--nj-fs-h3);color:var(--nj-text-strong)}
.ldp-desc{margin:0 0 var(--nj-space-4);line-height:var(--nj-lh-body);overflow-wrap:anywhere}
.ldp-note{margin:0 0 var(--nj-space-3);color:var(--nj-text-muted);font-size:var(--nj-fs-sm)}
.ldp-alt{margin:0;font-size:var(--nj-fs-sm)}

/* ===========================================================================
   หน้าแปลงแบบใหม่ (2026-09-27) — หัวข้อพับได้ · ตารางโครงสร้าง · สาธารณูปโภค · การ์ดติดต่อ · แชร์
   ตามแบบเว็บอสังหาฯ ที่เจ้าของกิจการส่งมา (การ์ดขาว หัวข้อพับได้ แถบข้างติดหนึบ)
   =========================================================================== */

/* ---------- หัวข้อพับได้ (<details open>) ---------- */
.ld-sec{margin:0 0 14px;overflow:hidden}
.ld-sec > summary{
  display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 20px;cursor:pointer;
  list-style:none;user-select:none;
}
.ld-sec > summary::-webkit-details-marker{display:none}
.ld-sec > summary h2{flex:1;margin:0;font-size:17px;font-weight:700;line-height:1.4;color:#0B2549}
.ld-sec-ico{
  flex:none;width:30px;height:30px;border-radius:50%;background:#EEF3F9;position:relative;
}
.ld-sec-ico::before{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  border-right:2px solid #1B4B7A;border-bottom:2px solid #1B4B7A;
  transform:translate(-50%,-30%) rotate(225deg);transition:transform .2s var(--nj-ease,ease);
}
.ld-sec:not([open]) .ld-sec-ico::before{transform:translate(-50%,-70%) rotate(45deg)}
.ld-sec > summary:hover .ld-sec-ico{background:#E1EAF4}
.ld-sec-b{padding:0 20px 20px}
.ld-sec-b > :first-child{margin-top:0}
.ld-sec-b > :last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){ .ld-sec-ico::before{transition:none} }
/* แผงที่มีกรอบ/พื้นของตัวเองอยู่แล้ว (ผลตรวจ · สถานที่ใกล้เคียง · เครื่องคำนวณ) — ไม่ต้องเว้นขอบซ้อน */
.ld-sec-b .ld-tier,.ld-sec-b .ld-nb{margin-bottom:14px}
.ld-sec-b .ld-map{margin-bottom:14px}
#ld-s-fee .fc{margin:0;border:0;padding:0;background:none;box-shadow:none}
.ld-desc{margin:0 0 14px}
.ld-sec-b .ld-blurb{margin:0}

/* ---------- ที่มาของข้อมูล (ทีมงานบันทึก / เจ้าของทรัพย์แจ้ง) ---------- */
.ld-src{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:999px}
.ld-src.team{background:#EEF3F9;color:#1B4B7A}
.ld-src.owner{background:#FDF6E6;color:#7A5608}
.ld-src.team::before{content:"✓";font-weight:800}
.ld-src.owner::before{content:"ⓘ"}
.ld-spec + .ld-src,.ld-feat + .ld-src{margin-top:18px}

/* ---------- ตารางโครงสร้างและขนาดพื้นที่ (3 คอลัมน์แบบเว็บตัวอย่าง) ---------- */
.ld-spec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin:0}
@media(min-width:640px){ .ld-spec{grid-template-columns:repeat(3,minmax(0,1fr))} }
.ld-spec-i{padding:10px 0;border-bottom:1px solid #EEF2F6;min-width:0}
.ld-spec-i dt{font-size:12px;color:#5A6B7D;margin:0 0 2px}
.ld-spec-i dd{margin:0;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.ld-dot-z{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18)}

/* ---------- สาธารณูปโภคและจุดเด่น ---------- */
.ld-feat{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.ld-feat li{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);min-height:32px}
.ld-feat-i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  background:#E4F4EA;color:#127A47;font-size:12px;font-weight:800;flex:none}

/* ---------- รูปภาพทั้งหมด ---------- */
.ld-pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.ld-pgrid-i{aspect-ratio:4/3;padding:0;border:0;border-radius:10px;overflow:hidden;background:#E3EAF1;cursor:zoom-in}
.ld-pgrid-i img{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- ทางไปต่อ (นัดตรวจ · เว็บ NJ · ห้องข้อมูล) ---------- */
.ld-next{margin:4px 0 0}
.ld-next .ld-inspect{background:#fff}

/* ---------- การ์ดติดต่อในแถบข้าง ---------- */
.ld-agent{overflow:hidden}
.ld-agent-h{display:flex;align-items:center;gap:12px;padding:16px 18px;background:#0B2549;color:#fff}
.ld-agent-h img{flex:none;width:46px;height:46px;border-radius:50%;background:#fff;padding:6px;box-sizing:border-box}
.ld-agent-h b{display:block;font-size:16px;line-height:1.35}
.ld-agent-h small{display:block;font-size:11.5px;line-height:1.5;color:#C7DAF2;margin-top:2px}
/* ตรวจโดยที่ดินชัวร์ (รูปแบบบริการ รอบ 3ค) — ขึ้นเฉพาะเมื่อมีผลตรวจจริง */
.ld-agent-h small.ld-agent-ins{color:#86EFAC;font-weight:700;margin-top:4px}
.ld-agent-b{padding:16px 18px 14px}
.ld-agent-price{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding-bottom:12px;border-bottom:1px solid #EEF2F6;margin-bottom:10px}
.ld-agent-price span{font-size:12.5px;color:#5A6B7D}
.ld-agent-price b{font-family:var(--nj-font);font-size:22px;font-weight:800;color:#0B2549}
.ld-agent-code{margin:0 0 12px;font-size:12.5px;color:#5A6B7D;line-height:1.6}
.ld-agent-code b{font-family:var(--nj-font);font-size:14px;color:#0B2549;letter-spacing:.04em}
.ld-agent .ld-cta{grid-template-columns:1fr;gap:8px}
.ld-agent .ld-btn{padding:12px 14px;font-size:14px;display:block}
.ld-agent-hours{margin:10px 0 0;font-size:12px;color:#8798A9;text-align:center}

/* ฟอร์มสนใจแปลงในแถบข้าง — การ์ดขาวแทนพื้นเทาเดิม */
.ld-aside .ld-inq{margin:14px 0 0;padding:18px 18px 16px}
.ld-aside .ld-inq h2{font-size:16.5px;margin-bottom:4px}
.ld-aside .ld-inq-lede{font-size:12.5px;line-height:1.65;margin-bottom:12px}

/* ---------- แชร์ไปโซเชียล ---------- */
.ld-share{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.ld-share-h{font-size:13.5px;font-weight:700;color:#0B2549;margin-right:4px}
.ld-share-b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:88px;
  padding:0 14px;border-radius:10px;color:#fff;font-size:13.5px;font-weight:700;text-decoration:none}
.ld-share-b.line{background:#037C38}   /* เขียว LINE เข้มขึ้นให้ตัวขาวผ่าน AA (4.5:1) — สีแบรนด์ #06C755 ได้แค่ 2.3:1 */
.ld-share-b.fb{background:#0F64D2}
.ld-share-b.x{background:#0F1419}
.ld-share-b:hover{filter:brightness(1.08)}
.ld-content .ld-tools{margin:18px 0 12px}
/* ฟอร์มส่งถึงเจ้าของ (ขายเองชัวร์) + สรุปตรวจแล้ว/ยังไม่ตรวจ — รูปแบบบริการ A/B/C รอบ 2 */
.ld-own-ck{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.6;color:#334155;cursor:pointer}
.ld-own-ck input{margin-top:3px;flex:0 0 auto;width:16px;height:16px}
.ld-own-note{font-size:12px;line-height:1.65;color:#5A7091;margin:12px 0 0}
.ld-tier-sum{font-size:13px;color:#334155;margin:8px 0 10px;line-height:1.6}