/* ══════════════════════════════════════════════════════════════════════
   หน้าแรกแบบใหม่ — แบบ A "เรียบหรู" (2026-08-15)

   ไฟล์นี้เป็นชั้นเสริม ไม่แก้ style.css เดิมแม้แต่บรรทัดเดียว
   ทุก rule (ยกเว้นปุ่มตั้งค่า .ui-style-toggle) ถูกจำกัดใต้ body.home-a
   จึงถอดออกได้ทันทีด้วยการเอา class ออก / ลบไฟล์นี้ + สคริปต์ home-a.js

   โครงการนี้ไม่ใช้ Git — สำรองก่อนแก้อยู่ที่ backups/home-a-rollout-before-20260815-130750/
   ══════════════════════════════════════════════════════════════════════ */

/* ── ปุ่มภาษา+สกุลเงินรวมเป็นปุ่มเดียว (ทั้งสองโหมด) ──
   ของเดิม (.currency-control + .lang-select) ซ่อนเมื่อเมนูรวมพร้อม (vv-langcur-ready)
   ถ้า home-a.js พัง ของเดิมกลับมาโชว์และใช้งานได้ตามปกติ */
body.vv-langcur-ready .langbar .currency-control,
body.vv-langcur-ready .langbar .lang-select{display:none !important}
.vv-langcur{position:relative}
.vv-langcur-btn{
  height:34px;display:flex;align-items:center;gap:6px;padding:0 12px;
  background:var(--navy);border:1px solid var(--line);border-radius:999px;
  color:var(--cream);font-size:12px;font-weight:600;line-height:1;cursor:pointer;
  font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;white-space:nowrap;
}
.vv-langcur-btn:hover{border-color:var(--gold)}
.vv-langcur-btn svg{width:16px;height:16px;flex:none}
.vv-langcur-menu{
  position:absolute;top:calc(100% + 6px);left:0;z-index:650;
  width:min(320px,calc(100vw - 24px));max-height:min(430px,72dvh);overflow-y:auto;
  background:var(--navy);border:1px solid var(--line);border-radius:14px;padding:12px;
  box-shadow:0 14px 38px rgba(31,41,55,.22);
}
.vv-langcur-sec{font-size:11px;font-weight:700;color:var(--gold-soft);margin:2px 2px 7px}
.vv-langcur-sec + .vv-langcur-sec{margin-top:12px}
.vv-langcur-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
.vv-langcur-grid button{
  display:flex;align-items:center;gap:6px;min-height:38px;padding:0 10px;
  background:var(--ink);border:1px solid var(--line);border-radius:10px;
  color:var(--cream);font-size:12.5px;cursor:pointer;text-align:left;
  font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.vv-langcur-grid button:hover{border-color:var(--gold)}
.vv-langcur-grid button[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:#1F2937;font-weight:700}
.vv-langcur-grid button small{opacity:.65;font-size:10.5px;overflow:hidden;text-overflow:ellipsis}

/* ── หน้าจอบอกว่ากำลังฟังเสียง (ทั้งสองโหมด) ── */
#voiceOverlay{
  position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  background:rgba(20,24,31,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:24px;cursor:pointer;
}
#voiceOverlay[hidden]{display:none}
.voice-overlay-box{
  background:var(--navy);border:1px solid var(--line);border-radius:20px;
  padding:26px 24px;max-width:340px;width:100%;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.voice-overlay-mic{
  width:64px;height:64px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  background:rgba(201,162,39,.14);border:2px solid var(--gold);position:relative;
}
.voice-overlay-mic::before{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:2px solid var(--gold);opacity:.5;animation:voicePulse 1.4s ease-out infinite;
}
@keyframes voicePulse{to{transform:scale(1.55);opacity:0}}
.voice-overlay-title{font-size:16px;font-weight:700;color:var(--cream);margin-bottom:8px}
.voice-overlay-text{
  min-height:24px;font-size:14px;color:var(--gold-soft);font-weight:600;
  overflow-wrap:anywhere;margin-bottom:8px;
}
.voice-overlay-hint{font-size:11.5px;color:var(--sand);opacity:.65}
@media (prefers-reduced-motion: reduce){ .voice-overlay-mic::before{animation:none} }

/* ── [ใหม่ 2026-08-16] หน้าจอ "กำลังค้นหาบ้านจากรูป" — ใช้กล่อง/วงกลมชุดเดียวกับ overlay เสียง ── */
#imgSearchOverlay{
  position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  background:rgba(20,24,31,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  padding:24px;
}
#imgSearchOverlay[hidden]{display:none}
.img-overlay-stage{min-height:22px;font-size:14px;color:var(--gold-soft);font-weight:600;margin-bottom:10px}
.img-overlay-bar{height:8px;border-radius:6px;background:rgba(201,162,39,.16);overflow:hidden;margin-bottom:6px}
.img-overlay-fill{height:100%;width:0%;background:var(--gold);border-radius:6px;transition:width .3s ease}
.img-overlay-pct{font-size:12px;color:var(--sand);margin-bottom:14px}
.img-overlay-cancel{
  background:none;border:1px solid var(--line);color:#f87171;border-radius:10px;
  padding:8px 26px;font-size:13px;cursor:pointer;
  font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
}
.img-overlay-cancel:hover{border-color:#f87171}

/* ── โทเคนของแบบ A (prefix vva กันชนกับตัวแปรของเว็บเดิม) ── */
body.home-a{
  --vva-bg:#F8F5F0;
  --vva-surface:#FFFFFF;
  --vva-bg-input:#F2EDE4;
  --vva-text:#1C2321;
  --vva-text-dim:#6A6459;
  --vva-text-faint:#9C948A;
  --vva-line:rgba(28,35,33,.09);
  --vva-line-strong:rgba(28,35,33,.17);
  --vva-brand:#1B3A32;
  --vva-accent:#B98F2A;
  --vva-accent-hover:#9E7820;
  --vva-accent-on:#17130A;
  --vva-accent-ink:#7E5F12;
  --vva-accent-weak:rgba(185,143,42,.13);
  --vva-accent-line:rgba(185,143,42,.32);
  --vva-danger:#BC4238;
  --vva-skeleton:#EDE6D9;
  --vva-shadow-lift:0 18px 44px rgba(28,35,33,.16);
  --vva-shadow-focus:0 0 0 3px rgba(185,143,42,.22);
  --vva-r-input:12px;
  --vva-r-card:16px;
  --vva-hero-h:min(52dvh,400px); /* [ปรับ 2026-08-15] เจ้าของขอลดความสูงรูป Hero ให้เห็นการ์ดค้นหาเร็วขึ้น */
  --vva-fs-hero:24px;
  --vva-dur:150ms;
  --vva-ease:cubic-bezier(.22,1,.36,1);
}
@media(min-width:1100px){
  body.home-a{--vva-hero-h:min(56dvh,480px);--vva-fs-hero:38px}
}

/* ═══ Hero ═══════════════════════════════════════════════════════════ */
/* ซ่อนไว้ก่อนเสมอ — โชว์เฉพาะโหมดใหม่ตอนอยู่หน้าเรียกดู (ไม่ใช่หน้าผลค้นหา) */
#homeAHero,#homeACard{display:none}
body.home-a .app{position:relative}
body.home-a:not(.vv-in-results) #homeAHero{
  display:block;position:relative;
  width:100vw;margin:-16px 0 0 calc(50% - 50vw);
  height:var(--vva-hero-h);overflow:hidden;background:var(--vva-skeleton);
}
body.home-a #homeAHero .vv-hero-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 420ms var(--vva-ease);
}
body.home-a #homeAHero .vv-hero-img.is-ready{opacity:1}
/* ชั้นมืดบาง ๆ + เฟดขอบล่างกลืนลงพื้นหน้า (สีเดียวกับ --ink ของเว็บ) */
body.home-a #homeAHero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.14) 26%,rgba(0,0,0,.50) 72%,#FAF7F2 100%);
}
body.home-a #homeAHero .vv-hero-inner{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:8px;text-align:center;padding:0 16px 58px;
}
/* แผ่นมืดนุ่ม ๆ หลังกลุ่มข้อความ ให้โลโก้ทองไม่จมในรูปสว่าง */
body.home-a #homeAHero .vv-hero-inner::before{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:150%;height:70%;pointer-events:none;
  background:radial-gradient(60% 76% at 50% 78%,rgba(0,0,0,.55) 0%,rgba(0,0,0,.26) 52%,transparent 100%);
}
body.home-a #homeAHero .vv-hero-inner>*{position:relative}
body.home-a #homeAHero .vv-hero-mark{
  width:min(58vw,250px);height:auto;filter:drop-shadow(0 2px 16px rgba(0,0,0,.6));
}
body.home-a #homeAHero h1{
  font-family:'Noto Serif Thai',serif;font-size:var(--vva-fs-hero);font-weight:700;
  color:#fff;line-height:1.28;text-shadow:0 2px 18px rgba(0,0,0,.62);
  max-width:20ch;overflow-wrap:anywhere;
}
body.home-a #homeAHero p{
  font-size:13px;color:rgba(255,255,255,.92);text-shadow:0 1px 12px rgba(0,0,0,.6);
  max-width:32ch;margin:0;
}
@media(min-width:1100px){
  body.home-a #homeAHero .vv-hero-mark{width:min(30vw,320px)}
  body.home-a #homeAHero p{font-size:15px}
}

/* ═══ แถบหัวลอยทับรูป (เฉพาะหน้าเรียกดูโหมดใหม่ — หน้าผลค้นหากลับเป็นแบบเดิม) ═══ */
body.home-a:not(.vv-in-results) .header{
  position:absolute;top:0;left:0;right:0;z-index:60;
  margin:0;padding:calc(10px + env(safe-area-inset-top,0px)) 14px 0;
}
body.home-a:not(.vv-in-results) .header .langbar{left:14px;top:calc(10px + env(safe-area-inset-top,0px))}
body.home-a:not(.vv-in-results) .header .member-bar{right:14px;top:calc(10px + env(safe-area-inset-top,0px))}
/* ปุ่มบนรูปเป็นกระจกใส อ่านออกทุกรูป */
body.home-a:not(.vv-in-results) .lang-current,
body.home-a:not(.vv-in-results) .currency-control,
body.home-a:not(.vv-in-results) .vv-langcur-btn{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.30);color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
body.home-a:not(.vv-in-results) .currency-select{color:#fff}
body.home-a:not(.vv-in-results) .currency-select option{background:#fff;color:#1F2937}
body.home-a:not(.vv-in-results) .lang-current .control-icon,
body.home-a:not(.vv-in-results) .currency-control .control-icon{color:#fff}

/* ของเดิมที่การ์ดใหม่ทำหน้าที่แทน — ซ่อนเมื่อย้าย control สำเร็จแล้วเท่านั้น (home-a-ready)
   ถ้า JS พังกลางทาง ทุกอย่างของเดิมยังโชว์และใช้งานได้ครบ
   ต้องใช้ !important เพราะสามตัวนี้มี display กำหนดแบบ inline style ในตัวเอง */
body.home-a:not(.vv-in-results) #taglineLogo,
body.home-a:not(.vv-in-results) .site-logo-icon{display:none !important}
/* [แก้ 2026-08-16 CLS] เดิม gate ด้วย .home-a-ready (JS เติมทีหลัง) ทำให้สองก้อนนี้ถูก "วาดก่อนแล้วค่อยซ่อน"
   = layout shift ~0.18-0.5 ทุกครั้งที่เปิดหน้า — เปลี่ยนเป็นซ่อนตั้งแต่แรกในโหมด home-a
   (คลาส home-a ถูกใส่โดย inline script ก่อน parse) · fail-safe ใหม่: inline mover ใน index.html
   จะถอดคลาส home-a ทิ้งถ้า markup ของการ์ดหาย → กลับโหมด classic ทั้งหน้าโดยอัตโนมัติ */
body.home-a:not(.vv-in-results) #searchBarBtn,
body.home-a:not(.vv-in-results) #headerQuickLinks{display:none !important}

/* ═══ การ์ดค้นหา ═══════════════════════════════════════════════════ */
body.home-a:not(.vv-in-results) #homeACard{
  display:grid;gap:10px;position:relative;z-index:3;
  margin:-42px auto 0;max-width:640px;
  background:var(--vva-surface);border:1px solid var(--vva-line);
  border-radius:var(--vva-r-card);box-shadow:var(--vva-shadow-lift);
  padding:14px;
}

/* [ใหม่ 2026-08-16 แก้ CLS] จองความสูงช่องใส่กล่อง AI ไว้ก่อน — home-a.js ย้าย .ai-top เข้ามา
   หลังหน้าเริ่มวาดแล้ว เดิม slot สูง 0 → โต ~72px ทำให้ทุกอย่างใต้การ์ดขยับ (วัดได้ CLS 0.35-0.56
   บนเดสก์ท็อป) — 72px = แถวป้าย 18px + margin 6px + ช่องพิมพ์ min-height 48px */
body.home-a:not(.vv-in-results) #homeAAiSlot{min-height:72px}

/* กล่อง AI เดิม (ย้ายเข้ามาทั้งก้อน id/ปุ่มเดิมครบ) — แต่งใหม่ให้เข้ากับการ์ด */
body.home-a #homeACard .ai-top{
  background:none;border:none;box-shadow:none;border-radius:0;padding:0;margin:0;
}
body.home-a #homeACard .ai-top-label{color:var(--vva-text-dim);font-weight:600;margin-bottom:6px}
body.home-a #homeACard .ai-example-tag{background:var(--vva-accent-weak);color:var(--vva-accent-ink)}
body.home-a #homeACard .ai-input-lg{
  background:var(--vva-surface);border:1px solid var(--vva-line-strong);
  border-radius:var(--vva-r-input);color:var(--vva-text);min-height:48px;
  padding-right:14px; /* ปุ่มไมค์/กล้องจิ๋วในช่องถูกซ่อน ใช้ปุ่มแถวเครื่องมือแทน */
}
body.home-a #homeACard .ai-input-lg:focus{border-color:var(--vva-accent);box-shadow:var(--vva-shadow-focus)}
body.home-a #homeACard .ai-input-lg::placeholder{color:var(--vva-text-faint);opacity:1}
body.home-a #homeACard .btn-mic-inside{display:none} /* ครอบทั้ง #btnMic และ #btnPhoto (btn-photo-inside ใช้ class เดียวกัน) */
body.home-a #homeACard .btn-ai-go{
  background:var(--vva-accent);color:var(--vva-accent-on);border-radius:var(--vva-r-input);
  min-width:48px;font-size:16px;
}
body.home-a #homeACard .btn-ai-go:hover{background:var(--vva-accent-hover)}

/* แถวเครื่องมือ เสียง | รูป | แผนที่ */
body.home-a .vv-tools{display:flex;gap:10px}
body.home-a .vv-tool{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;border-radius:var(--vva-r-input);
  background:var(--vva-bg-input);border:1px solid var(--vva-line);
  font-family:inherit;font-size:13.5px;font-weight:500;color:var(--vva-text-dim);
  cursor:pointer;position:relative;
  transition:border-color var(--vva-dur) var(--vva-ease),color var(--vva-dur) var(--vva-ease),background-color var(--vva-dur) var(--vva-ease);
}
body.home-a .vv-tool:hover{border-color:var(--vva-accent-line);color:var(--vva-accent-ink)}
body.home-a .vv-tool:active{transform:scale(.98)}
body.home-a .vv-tool svg{width:18px;height:18px;flex:none}
body.home-a .vv-tool.is-on{color:var(--vva-danger);border-color:var(--vva-danger)}
body.home-a .vv-tool.is-on::before{
  content:"";position:absolute;inset:-3px;border-radius:inherit;
  border:2px solid currentColor;opacity:.45;animation:vvaPulse 1.3s var(--vva-ease) infinite;
}
@keyframes vvaPulse{to{transform:scale(1.06);opacity:0}}
body.home-a .vv-tool[aria-busy="true"]{color:transparent}
body.home-a .vv-tool[aria-busy="true"]::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid var(--vva-accent);border-top-color:transparent;animation:vvaSpin .7s linear infinite;
}
@keyframes vvaSpin{to{transform:rotate(360deg)}}

/* ปุ่มค้นหาใหญ่ */
body.home-a .vv-go{
  min-height:48px;border:none;border-radius:var(--vva-r-input);
  background:var(--vva-accent);color:var(--vva-accent-on);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;
  transition:background-color var(--vva-dur) var(--vva-ease);
}
body.home-a .vv-go:hover{background:var(--vva-accent-hover)}
body.home-a .vv-go:active{transform:scale(.985)}

/* ปุ่มค้นหาละเอียด — กางแผงในที่ ไม่เด้งไปหน้าอื่น */
body.home-a .vv-more{
  justify-self:center;display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;padding:6px 12px;border-radius:999px;
  font-family:inherit;font-size:13px;color:var(--vva-text-dim);cursor:pointer;
  transition:color var(--vva-dur) var(--vva-ease),background-color var(--vva-dur) var(--vva-ease);
}
body.home-a .vv-more:hover{color:var(--vva-accent-ink);background:var(--vva-accent-weak)}
body.home-a .vv-more svg{width:14px;height:14px;transition:transform 190ms var(--vva-ease)}
body.home-a .vv-more[aria-expanded="true"] svg{transform:rotate(90deg)}

/* แผงค้นหาละเอียด (ช่องชื่อ/รหัส + #advPanel ของจริงย้ายเข้ามา — มีทำเลและใกล้สถานที่ครบ)
   ห้ามใส่ overflow:hidden ที่ slot — .ddlist (ทำเล/สิ่งอำนวยฯ) เป็น absolute จะโดนตัด */
body.home-a #homeAAdvSlot[hidden]{display:none}
body.home-a #homeAAdvSlot>*{animation:vvaSlideIn 220ms var(--vva-ease)}
@keyframes vvaSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
body.home-a #homeAAdvSlot .adv-panel{
  background:none;border:none;box-shadow:none;padding:0;margin:0;
}

/* ลิงก์เล็กท้ายการ์ด (ประวัติการค้นหา) */
body.home-a .vv-links{display:flex;justify-content:center}
body.home-a .vv-links button{
  background:none;border:none;padding:4px 10px;cursor:pointer;
  font-family:inherit;font-size:11.5px;color:var(--vva-text-faint);text-decoration:underline;
}
body.home-a .vv-links button:hover{color:var(--vva-accent-ink)}

/* จอเล็กมาก — ปุ่มเครื่องมือขนาดตัวอักษรลดลงเล็กน้อย */
@media(max-width:379px){
  body.home-a .vv-tool{font-size:12px;gap:5px}
}

/* ═══ ลดการเคลื่อนไหวตามการตั้งค่าเครื่องผู้ใช้ ═══ */
@media (prefers-reduced-motion: reduce){
  body.home-a #homeAHero .vv-hero-img,
  body.home-a #homeAAdvSlot>*,
  body.home-a .vv-tool,body.home-a .vv-go,body.home-a .vv-more svg{
    animation:none !important;transition:none !important;
  }
}