:root{
  /* [ใหม่] ธีมสว่างแบบพูลวิลล่า/รีสอร์ท — เปลี่ยนแค่ค่าสี ตัวแปรชื่อเดิมหมด เพื่อไม่ต้องแก้ CSS rule อื่นทั้งไฟล์ */
  --ink:#FAF7F2;       /* พื้นหลังหลัก (เดิมเนวี่เข้มมาก ตอนนี้ครีมอุ่นๆ) */
  --navy:#FFFFFF;       /* พื้นหลังการ์ด/panel (เดิมเนวี่ ตอนนี้ขาว) */
  --gold:#C9A227;       /* สี accent หลัก (คงไว้ใช้ได้ดีบนพื้นสว่างเหมือนกัน) */
  --gold-soft:#9C6B12;  /* ข้อความ/หัวข้อสีทอง (เข้มขึ้นจากเดิม ให้อ่านออกบนพื้นขาว) */
  --sand:#6B6459;       /* ข้อความรอง (เดิมสีครีมอ่อนบนพื้นเข้ม ตอนนี้เป็นน้ำตาลเทาอ่านง่ายบนพื้นขาว) */
  --cream:#1F2937;      /* ข้อความหลัก (เดิมเกือบขาว ตอนนี้เข้มเกือบดำ) */
  --line:rgba(180,140,30,.18); /* เส้นขอบบางๆ */
  --pool:#2AA9C4;       /* [ใหม่] สีฟ้าสระว่ายน้ำ ใช้เป็น accent รองคู่กับทอง */
  --shadow-soft:0 2px 12px rgba(31,41,55,.06);
}
*{box-sizing:border-box;margin:0;padding:0}
/* [ใหม่] ทำให้การกดปุ่ม/เปิดป๊อปอัปต่างๆ ดูสมูทขึ้น ไม่กระตุกทันที */
button, .card, .chip, .tag-btn, a.btn-go, .btn-main, .btn-submit, .btn-reset, .langbtn, .fav-btn, input, select {
  transition: transform .15s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
button:active, .btn-submit:active, .btn-main:active { transform: scale(.97); }
@keyframes dayFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.day-fade-in{animation:dayFadeIn .35s ease forwards;opacity:0;transition:transform .15s ease}
.cat-rail-scroll{display:flex;gap:12px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:4px}
.cat-rail-scroll::-webkit-scrollbar{display:none}
.cat-skel{flex:0 0 155px;height:118px;border-radius:10px;background:linear-gradient(90deg,var(--line) 25%,rgba(180,140,30,.08) 50%,var(--line) 75%);background-size:200% 100%;animation:sh 1.5s infinite}
@media(min-width:900px){ .cat-skel{flex:0 0 205px;height:150px} }
@media(min-width:1400px){ .cat-skel{flex:0 0 240px;height:172px} }
/* [แก้] การ์ดบ้านในแถวหน้าแรกเดิมเล็กแค่ 140px คงที่ทุกจอ — ตอนนี้ขยายใหญ่ขึ้นและปรับตามขนาดจอ (มือถือ→PC→จอใหญ่) */
.cat-card{flex:0 0 155px;text-decoration:none;color:inherit}
.cat-card-img{width:155px;height:118px;border-radius:10px;overflow:hidden;background:var(--line)}
@media(min-width:900px){
  .cat-card{flex:0 0 205px}
  .cat-card-img{width:205px;height:150px}
}
@media(min-width:1400px){
  .cat-card{flex:0 0 240px}
  .cat-card-img{width:240px;height:172px}
}
.page-btn{background:var(--navy);border:1px solid var(--line);color:var(--sand);border-radius:8px;padding:7px 12px;font-size:12px;cursor:pointer;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
.page-btn.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
.page-btn:disabled{opacity:.35;cursor:not-allowed}
.page-ellipsis{color:var(--sand);opacity:.5;padding:0 2px}
.modal-bg .modal, .modal-bg > div{transform:translateY(12px) scale(.98);transition:transform .22s cubic-bezier(.22,1,.36,1)}
.modal-bg.show .modal, .modal-bg.show > div{transform:translateY(0) scale(1)}
body{
  /* [แก้] เพิ่ม font emoji fallback ต่อท้าย — บน Windows บางเครื่อง 'Prompt' ไม่มี glyph emoji ใหม่ๆ
     (เช่น 🛝 เป็น emoji เวอร์ชันใหม่) ทำให้บางตัวขึ้นบางตัวหาย ต้องบอกเบราว์เซอร์ชัดๆ ว่าถ้าไม่มีใน
     Prompt ให้ไปหยิบจากฟอนต์ emoji ของระบบแทน */
  font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
  background:var(--ink);
  color:var(--cream);
  min-height:100vh;
  padding-bottom:70px;
}
h1,h2,h3,.serif{font-family:'Noto Serif Thai',serif}
.app{max-width:960px;margin:0 auto;padding:16px;transition:max-width .25s ease}
/* [ใหม่] ขยายความกว้างหน้าแรกให้เข้ากับจอกว้างมากขึ้น (เดิม 960px คงที่ตลอด จอใหญ่จะเหลือขอบว่างเยอะ)
   ใช้ media query ธรรมดา ไม่ต้องพึ่ง JS toggle แบบโหมดแผนที่ ทำให้หน้าแรก/หน้าอื่นได้ประโยชน์ด้วย */
@media(min-width:1300px){ .app{max-width:1180px} }
@media(min-width:1700px){ .app{max-width:1360px} }
/* [ใหม่] โหมดแผนที่ (รายการ+แผนที่คู่กัน) ขยายความกว้างจอออกไป กันเหลือพื้นที่ว่างเยอะเกินตอนจอกว้าง */
.app.wide{max-width:1600px}

/* Header & Google Login styling */
.header{display:flex;flex-direction:column;align-items:center;margin-bottom:14px;position:relative;padding-top:40px}
.header p{font-size:12px;color:var(--sand);opacity:.8;margin-top:3px}
/* [แก้] โลโก้ไอคอน (V+บ้าน+ต้นมะพร้าว) โดนปุ่มเปลี่ยนภาษาบังอยู่ (ทั้งคู่ชนกันที่ top:0) — ขยับลงมา
   ให้พ้นแถบปุ่มภาษา + ขยายให้ใหญ่ขึ้นอีกนิดตามที่ขอ */
.site-logo-icon{display:none}
@media(min-width:900px){
  .site-logo-icon{display:block;position:absolute;top:38px;left:4px;height:64px;width:auto}
  .langbar{left:0}
}
.langbar{position:absolute;top:0;left:0;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 20px)}
.langbtn{background:var(--navy);border:1px solid var(--line);color:var(--sand);font-size:11px;border-radius:6px;padding:4px 8px;cursor:pointer;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
.langbtn.active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}
/* [ใหม่] ปุ่มเลือกภาษาแบบปุ่มเดียว กดกาง/ยุบ */
.lang-select{position:relative;display:inline-block}
.lang-current{background:var(--navy);border:1px solid var(--line);color:var(--cream);font-size:12px;border-radius:999px;padding:7px 10px;cursor:pointer;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;display:flex;align-items:center;justify-content:center;gap:5px;min-width:74px;height:34px;white-space:nowrap}
/* [ใหม่] ตัวเลือกสกุลเงิน */
.currency-control{height:34px;display:flex;align-items:center;gap:3px;background:var(--navy);border:1px solid var(--line);border-radius:999px;padding-left:10px;color:var(--cream)}
.currency-control:focus-within,.currency-control:hover{border-color:var(--gold)}
.currency-select{background:transparent;border:0;color:var(--cream);font-size:12px;font-weight:600;padding:5px 22px 5px 2px;cursor:pointer;font-family:inherit;width:64px;outline:none;white-space:nowrap}
.currency-select option{background:var(--navy);color:var(--cream)}
.control-icon{font-size:14px;line-height:1;flex:none}
.control-caret{font-size:9px;opacity:.7}
@media(max-width:420px){
  .langbar{gap:4px}
  .lang-current{min-width:68px;padding-inline:8px}
  .currency-control{padding-left:8px}
  .currency-select{width:59px;padding-right:18px}
}
.lang-current:hover{border-color:var(--gold)}
.lang-menu{position:absolute;top:calc(100% + 4px);left:0;right:auto;background:var(--navy);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(31,41,55,.2);padding:5px;display:none;flex-direction:column;gap:2px;z-index:600;min-width:130px;max-width:calc(100vw - 32px)}
.lang-select.open .lang-menu{display:flex}
.lang-opt{background:none;border:none;color:var(--sand);font-size:12.5px;text-align:left;padding:8px 12px;border-radius:6px;cursor:pointer;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;white-space:nowrap}
.lang-opt:hover{background:var(--ink);color:var(--cream)}
.lang-opt.active{background:var(--gold);color:var(--ink);font-weight:700}

/* Member Session Widget */
.member-bar{position:absolute;top:0;right:0;display:flex;align-items:center;gap:8px;z-index:90}
.member-profile{display:flex;align-items:center;gap:8px;cursor:pointer;background:var(--navy);border:1px solid var(--line);padding:4px 10px;border-radius:20px}
.member-avatar{width:22px;height:22px;border-radius:50%;background:var(--gold);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;overflow:hidden}
.member-avatar img{width:100%;height:100%;object-fit:cover}
.member-name{font-size:11.5px;color:var(--gold-soft);font-weight:500}
.member-dropdown{display:none;position:absolute;top:32px;right:0;background:var(--navy);border:1px solid var(--line);border-radius:8px;width:180px;box-shadow:0 6px 20px rgba(0,0,0,0.5);overflow:hidden;z-index:100}
.member-dropdown.active{display:block}
.member-dropdown-item{padding:10px 14px;font-size:12px;color:var(--sand);cursor:pointer;border-bottom:1px solid var(--line);transition:background .2s}
.member-dropdown-item:hover{background:var(--ink);color:var(--gold-soft)}

/* Top AI search */
.ai-top{background:linear-gradient(135deg,var(--navy),var(--ink));border:1.5px solid var(--gold);border-radius:14px;padding:12px 14px;margin-bottom:10px;box-shadow:0 8px 24px rgba(201,162,39,.06)}
.ai-top-label{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:700;color:var(--cream);margin-bottom:8px}
.ai-example-tag{font-size:10px;font-weight:400;color:var(--gold-soft);background:rgba(201,162,39,.1);border-radius:10px;padding:2px 8px;white-space:nowrap}
.ai-top-row{display:flex;gap:8px}
.ai-input-lg{flex:1;background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--cream);font-size:14px;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;outline:none;transition:border-color .2s;min-width:0}
.ai-input-lg:focus{border-color:var(--gold)}
.ai-input-lg::placeholder{color:var(--sand);opacity:.5}
.ai-typing-cursor::after{content:'▏';animation:blink 1s step-end infinite;color:var(--gold)}
@keyframes blink{50%{opacity:0}}
.btn-ai-go{background:var(--gold);color:var(--ink);border:none;border-radius:10px;padding:0 18px;font-size:18px;cursor:pointer;transition:background .2s;flex-shrink:0}
.btn-ai-go:hover{background:var(--gold-soft)}
.btn-ai-go:disabled{background:#374151;color:#6b7280;cursor:not-allowed}

/* Advanced search panel */
.panel{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.sec{font-size:11px;font-weight:700;color:var(--gold-soft);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px}
.g4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.field label{display:block;font-size:11px;color:var(--sand);margin-bottom:4px;font-weight:600}
.field input,.field select{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--cream);font-size:13px;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;outline:none;transition:border-color .2s}
.field input:focus,.field select:focus{border-color:var(--gold)}
.field select option{background:var(--navy)}
hr.div{border:none;border-top:1px solid var(--line);margin:10px 0}

/* Dropdown zone */
.dd{position:relative}
.ddbtn{width:100%;background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:7px 10px;color:var(--cream);font-size:13px;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;cursor:pointer;text-align:left;display:flex;justify-content:space-between}
.ddbtn:focus{outline:none;border-color:var(--gold)}
.ddlist{display:none;position:absolute;top:calc(100% + 3px);left:0;right:0;background:var(--navy);border:1px solid var(--line);border-radius:8px;padding:10px;z-index:200;max-height:280px;overflow-y:auto}
.ddlist.open{display:block}
.ck{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--sand);cursor:pointer;padding:3px 5px;border-radius:5px;user-select:none}
.ck:hover{background:var(--ink);color:var(--cream)}
.ck input{accent-color:var(--gold);width:13px;height:13px;flex-shrink:0}
.ck .cnt{margin-left:auto;color:var(--gold-soft);font-size:10px}

/* Buttons */
.btn-main{width:100%;background:var(--gold);color:var(--ink);border:none;border-radius:10px;padding:11px;font-size:15px;font-weight:700;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;cursor:pointer;transition:background .2s;margin-top:8px}
.btn-main:hover{background:var(--gold-soft)}
.btn-main:disabled{background:#374151;color:#6b7280;cursor:not-allowed}
.btn-reset{width:100%;background:none;border:1px solid var(--line);border-radius:8px;padding:7px;color:var(--sand);font-size:12px;cursor:pointer;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;margin-top:6px;transition:all .2s}
.btn-reset:hover{border-color:#f87171;color:#f87171}
.btn-retry{background:var(--gold);color:var(--ink);border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;margin-top:10px}

/* Status */
.sbar{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sand);margin-bottom:10px;min-height:22px;flex-wrap:wrap}
.dot{width:7px;height:7px;border-radius:50%;background:#374151;flex-shrink:0}
.dot.load{background:#f59e0b;animation:pulse 1s infinite}
.dot.ok{background:var(--gold)}
.dot.err{background:#ef4444}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.rcount{margin-left:auto;color:var(--gold-soft);font-weight:700;font-size:13px}

/* Notice banner */
.notice{background:var(--navy);border:1px solid var(--gold);border-radius:8px;padding:10px 12px;margin-bottom:10px;font-size:12px;color:var(--gold-soft);display:none}
.notice.show{display:block}

/* Filter chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{background:var(--navy);border:1px solid var(--gold);color:var(--gold-soft);font-size:11px;border-radius:16px;padding:4px 8px 4px 10px;display:flex;align-items:center;gap:5px}
.chip button{background:none;border:none;color:var(--gold-soft);cursor:pointer;font-size:13px;line-height:1;padding:0}

/* Sort bar */
.sortbar{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sortbar select{background:var(--navy);border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--cream);font-size:12px;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}

/* Debug */
.dbg{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:10px;margin-bottom:10px;font-size:11px;font-family:monospace;color:var(--sand);display:none}
.dbg.show{display:block}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
@media(min-width:1400px){ .cards{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px} }
.card{background:var(--navy);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .18s,border-color .18s;text-decoration:none;color:inherit;display:block;position:relative}
.card:hover{transform:translateY(-2px);border-color:var(--gold)}

/* Viewer & Thumbs Slider */
.viewer{position:relative;background:var(--ink);overflow:hidden;height:160px;width:100%;display:flex;align-items:center;justify-content:center}
/* [ใหม่] ลายน้ำโลโก้ (wordmark แบบโปร่งใส) มุมซ้ายบนของทุกรูปหลักที่แสดง — เป็นแค่ภาพซ้อนทับตอนแสดงผล
   ไม่ได้แก้ไฟล์รูปจริง ใช้ได้กับรูปทุกแหล่งรวมถึงรูปที่ดึงจากเว็บภายนอกด้วย */
.viewer::after,.cat-card-img::after{content:'';position:absolute;top:5px;left:5px;width:30%;max-width:76px;aspect-ratio:914/308;background:url('/logo-wordmark.png') no-repeat left top/contain;opacity:.6;pointer-events:none;z-index:4;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.cat-card-img{position:relative}
.main-img{width:100%;height:100%;object-fit:cover;display:block;opacity:1;transition:opacity .1s ease}
.logo{position:absolute;width:40%;left:50%;top:10px;transform:translateX(-50%);pointer-events:none;opacity:0.85}

.thumb-wrap{position:relative;padding:0;background:var(--ink);border-bottom:0 solid var(--line);display:none;max-height:0;opacity:0;transform:translateY(-8px);overflow:hidden;transition:max-height .32s cubic-bezier(.22,1,.36,1),opacity .24s ease,transform .32s cubic-bezier(.22,1,.36,1),padding .32s ease,border-width .32s ease}
.thumb-wrap.gallery-ready{max-height:66px;opacity:1;transform:translateY(0);padding:6px 0;border-bottom-width:1px}
.thumbs{display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none}
.day-strip{display:flex;gap:3px;margin-top:6px;overflow-x:auto;scroll-behavior:smooth;scrollbar-width:none;padding-bottom:2px}
.day-strip::-webkit-scrollbar{display:none}
.thumbs::-webkit-scrollbar{display:none}
.thumbs img{width:74px;height:52px;object-fit:cover;border-radius:6px;cursor:pointer;transition:.2s;flex-shrink:0;border:2px solid transparent}
/* [ใหม่] อัลบั้มรูป — แทนที่รูปย่อเดี่ยวๆ ด้วยการ์ดอัลบั้มที่มีชื่อหมวดเขียนกลางรูป */
.album-thumb{position:relative;width:74px;height:52px;border-radius:6px;overflow:hidden;cursor:pointer;flex-shrink:0;border:2px solid transparent;transition:border-color .2s}
.album-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.album-thumb-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;background:rgba(20,24,31,.42);color:#fff;font-size:9px;font-weight:700;padding:2px;line-height:1.15;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.album-thumb.active{border-color:var(--gold)}
/* [ใหม่] ป้ายชื่ออัลบั้มมุมซ้ายบนของรูปใหญ่ (โชว์เฉพาะตอนไม่ได้ดูภาพปก) */
.album-caption{position:absolute;top:8px;left:8px;background:rgba(20,24,31,.65);color:#fff;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:6px;z-index:8;display:none;pointer-events:none}
.thumbs img:hover{transform:scale(1.05)}
.thumbs img.active{border-color:var(--gold)}

.arrow{position:absolute;top:50%;transform:translateY(-50%);width:20px;height:20px;border:none;border-radius:50%;background:rgba(20,24,31,.85);color:#fff;cursor:pointer;font-size:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:10;opacity:0;pointer-events:none;transition:opacity .35s ease}
/* [แก้] ลูกศรโชว์เฉพาะจอที่มีเมาส์จริงๆ (PC) เท่านั้น — บนมือถือ/แท็บเล็ต (touch) จะไม่โผล่ขึ้นมาเลย เพราะ
   ใช้นิ้วปัดเลื่อนได้อยู่แล้ว ไม่จำเป็นต้องมีปุ่มมาบังรูป (เดิมใช้ :hover เฉยๆ ซึ่งมือถือบางรุ่น tap แล้วติด
   สถานะ hover ค้างไว้ ทำให้ลูกศรโผล่มาบังรูปโดยไม่ได้ตั้งใจ)
   [แก้เพิ่ม] fade-in ตอนโผล่ขึ้นมาให้ไวมาก (.04s) แทนที่จะช้าเท่า fade-out (.35s) — เดิมถ้าเอาเมาส์ไปชี้เร็วๆ
   แล้วกดทันที อาจกดพลาดเพราะปุ่มยังจางอยู่ กะตำแหน่งยาก ตอนนี้โผล่เกือบจะทันทีที่เมาส์เข้าไปชี้ ส่วนตอนเอา
   เมาส์ออกยังคงจางหายแบบนุ่มนวลตามเดิม ไม่กระตุก */
@media (hover:hover) and (pointer:fine){
  .viewer:hover .arrow{opacity:1;pointer-events:auto;transition:opacity .04s ease}
  .thumb-wrap:hover .arrow{opacity:1;pointer-events:auto;transition:opacity .04s ease}
  .day-strip-wrap:hover .arrow{opacity:1;pointer-events:auto;transition:opacity .04s ease}
  .cat-rail-arrows:hover .arrow{opacity:1;pointer-events:auto;transition:opacity .04s ease}
}
.arrow:hover{background:var(--gold);color:var(--ink)}
/* [ใหม่] ปุ่มขยายดูรูป — โชว์ตลอด (ต่างจากลูกศรที่โชว์เฉพาะ PC) เพราะมือถือก็ต้องกดได้ */
.zoom-btn{position:absolute;right:6px;bottom:6px;width:26px;height:26px;border:none;border-radius:50%;background:rgba(20,24,31,.7);color:#fff;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px rgba(0,0,0,.4);z-index:10;transition:background .2s,transform .15s}
.zoom-btn:hover{background:var(--gold);color:var(--ink);transform:scale(1.08)}
.arrow.left{left:2px}
.arrow.right{right:2px}

.card-body{padding:11px}
.card-name{font-size:13px;font-weight:700;color:var(--cream);margin-bottom:6px;line-height:1.3}
.card-meta{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.mt{background:var(--ink);border-radius:4px;padding:2px 6px;font-size:11px;color:var(--sand)}
.mt.hi{color:var(--gold-soft)}
.card-dist{font-size:11px;color:var(--gold-soft);margin-bottom:3px}
.card-sea{font-size:11px;color:var(--sand);opacity:.8;margin-bottom:3px}
.card-loc{font-size:11px;color:var(--sand);opacity:.8}
.card-price{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.price-total{font-size:16px;font-weight:700;color:var(--gold-soft)}
.price-detail{font-size:11px;color:var(--sand);opacity:.7;margin-top:2px}
.price-pp{font-size:11px;color:var(--gold);margin-top:2px;font-weight:600}
.price-base{font-size:12px;color:var(--sand);opacity:.8}
.discount-badge{position:absolute;top:7px;right:7px;background:#ef4444;color:#fff;font-weight:700;font-size:10px;border-radius:5px;padding:2px 6px;z-index:5}
.rank-badge{position:absolute;top:7px;left:7px;background:rgba(0,0,0,.75);color:var(--gold-soft);font-weight:700;font-size:11px;border-radius:5px;padding:2px 7px;z-index:5}
.cmp-check{position:absolute;bottom:7px;right:7px;z-index:5;background:rgba(0,0,0,.6);border-radius:6px;padding:3px 6px;display:flex;align-items:center;gap:4px;font-size:10px;color:var(--cream)}
.cmp-check input{accent-color:var(--gold);width:13px;height:13px}

/* Favorite Heart Button on Card */
.fav-btn{position:absolute;top:7px;right:36px;z-index:5;background:rgba(0,0,0,.6);border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#fff;font-size:12px;transition:color .2s}
.fav-btn.active{color:#ff4757}

/* Skeleton */
.sk{background:var(--navy);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sk-img{height:160px;background:linear-gradient(90deg,var(--navy) 25%,#22263a 50%,var(--navy) 75%);background-size:200% 100%;animation:sh 1.5s infinite}
.sk-bd{padding:11px}
.sk-l{height:12px;background:linear-gradient(90deg,var(--navy) 25%,#22263a 50%,var(--navy) 75%);background-size:200% 100%;border-radius:4px;margin-bottom:8px;animation:sh 1.5s infinite}
.sk-l.w7{width:70%}.sk-l.w4{width:40%}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{text-align:center;padding:48px 20px;color:var(--sand);grid-column:1/-1}
.empty-icon{font-size:40px;margin-bottom:8px}

/* Compare bar */
.cmpbar{position:fixed;left:0;right:0;bottom:56px;background:var(--navy);border-top:1px solid var(--gold);padding:10px 16px;display:none;align-items:center;gap:10px;z-index:300}
.cmpbar.show{display:flex}
.cmpbar-items{display:flex;gap:8px;flex:1;overflow-x:auto}
.cmpbar-item{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:5px 8px;font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.cmpbar-item button{background:none;border:none;color:#f87171;cursor:pointer}
.cmpbtn{background:var(--gold);color:var(--ink);border:none;border-radius:8px;padding:8px 14px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap}

/* Modals */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:400;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.modal-bg.show{opacity:1;pointer-events:auto}
.modal{background:var(--navy);border:1px solid var(--line);border-radius:12px;max-width:900px;width:100%;max-height:85vh;overflow:auto;padding:16px}
.modal h3{margin-bottom:12px;color:var(--cream)}
.modal table{width:100%;border-collapse:collapse;font-size:12px}
.modal th,.modal td{padding:8px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;color:var(--cream)}
.modal th{color:var(--gold-soft);font-size:11px;text-transform:uppercase}
.modal-close{float:right;background:none;border:none;color:var(--sand);font-size:20px;cursor:pointer}

/* Form Styles inside Modals */
.form-grp {margin-bottom:12px}
.form-grp label{display:block;font-size:12px;color:var(--sand);margin-bottom:4px}
.form-grp input, .form-grp select, .form-grp textarea{width:100%;background:var(--ink);border:1px solid var(--line);color:var(--cream);padding:8px;border-radius:6px;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;font-size:13px}
.btn-submit {background:var(--gold);color:var(--ink);font-weight:700;border:none;border-radius:6px;padding:10px;cursor:pointer;width:100%;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}

/* ---------- Floating Chat Widget ---------- */
.chat-widget {
  /* [แก้] ย้ายปุ่มแชทลอยเข้าไปรวมกับเมนูล่างแล้ว — เหลือ div นี้ไว้แค่เป็นจุดยึดของกล่องแชทป๊อปอัป (ไม่มีปุ่มกลมลอยแล้ว) */
  position: fixed;
  bottom: 76px;
  right: 16px;
  z-index: 410;
  transition: bottom .2s ease, transform .25s ease, opacity .25s ease;
}
.chat-btn {
  width: 56px;
  height: 56px;
  background: var(--gold);
  color: var(--ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(201,162,39,0.3);
  cursor: pointer;
  transition: transform .2s ease, background .2s;
}
.chat-btn:hover {
  transform: scale(1.05);
  background: var(--gold-soft);
}
.chat-btn svg { width: 26px; height: 26px; fill: var(--ink); }
.chat-popup {
  position: absolute;
  bottom: 70px;
  right: 0;
  width: 290px;
  background: var(--navy);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: none;
  overflow: hidden;
}
.chat-popup.active { display: block; }
.chat-popup-header {
  background: var(--ink);
  padding: 14px 16px;
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-soft);
  border-bottom: 1px solid var(--line);
}
.chat-popup-body { padding: 16px; }
.chat-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  font-size: 13px;
  transition: opacity 0.2s;
}
.chat-link-btn:hover { opacity: 0.9; }
.line-color { background: #06C755; color: #fff; margin-bottom: 8px; }
.fb-color { background: #1877F2; color: #fff; margin-bottom: 8px; }
/* [ใหม่] Footer ท้ายหน้าแรก */
.site-footer{margin-top:40px;padding:24px 16px 90px;text-align:center;border-top:1px solid var(--line)}
.company-certification-card{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:24px;padding:22px;background:linear-gradient(135deg,rgba(201,162,39,.12),var(--ink));border:1.5px solid var(--gold);border-radius:16px;box-shadow:var(--shadow-soft);text-align:left}
.company-certification-qr{width:132px;height:132px;display:block;flex:0 0 auto;object-fit:contain;background:#fff;padding:6px;border:1px solid var(--line);border-radius:12px;box-sizing:border-box;box-shadow:0 4px 14px rgba(31,41,55,.14)}
.company-certification-content{max-width:350px}
.company-certification-label{display:inline-block;margin-bottom:7px;padding:3px 10px;border-radius:20px;background:var(--gold);color:var(--ink);font-size:10.5px;font-weight:700;letter-spacing:.04em}
.company-certification-content h3{margin:0;color:var(--gold-soft);font-family:'Noto Serif Thai',serif;font-size:20px;font-weight:700;line-height:1.45}
.company-certification-content p{margin:7px 0 0;color:var(--sand);font-size:12.5px;line-height:1.6}
.homepage-trust-grid .company-certification-card{grid-column:auto;display:grid;grid-template-columns:105px 105px;grid-template-rows:auto auto;justify-content:center;align-content:center;gap:12px 14px;padding:20px 16px;text-align:center}
.company-certification-logo{position:static;grid-column:1;width:105px;height:105px;object-fit:contain;mix-blend-mode:multiply;background:#fff;border:1px solid var(--line);border-radius:12px;padding:7px;box-sizing:border-box;box-shadow:0 4px 14px rgba(31,41,55,.1)}
.homepage-trust-grid .company-certification-qr{grid-column:2;width:105px;height:105px;flex:none;padding:4px}
.homepage-trust-grid .company-certification-content{grid-column:1/-1;max-width:230px;margin:0 auto;text-align:center}
.homepage-trust-grid .company-certification-label{white-space:nowrap;font-size:9.5px;padding:4px 9px}
.homepage-trust-grid .company-certification-content h3{font-size:15px}
.homepage-trust-grid .company-certification-content p{font-size:11px}
.homepage-trust-link{transition:transform .2s,border-color .2s,box-shadow .2s}
.homepage-trust-link:hover{transform:translateY(-3px);border-color:var(--gold)!important;box-shadow:0 8px 24px rgba(31,41,55,.14)!important}
@media(max-width:900px){.homepage-trust-grid{grid-template-columns:1fr!important}.homepage-trust-grid .company-certification-card{justify-content:center}.homepage-trust-grid .company-certification-label{white-space:normal}}
.site-footer-social{display:flex;justify-content:center;gap:16px;margin-bottom:10px}
.site-footer-social a{color:var(--gold-soft);text-decoration:none;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border:1px solid var(--line);border-radius:20px;transition:border-color .2s,background .2s}
.site-footer-social a:hover{border-color:var(--gold);background:var(--navy)}
.site-footer-copy{font-size:11.5px;color:var(--sand);opacity:.55}
@media(max-width:520px){
  .company-certification-card{flex-direction:column;gap:14px;padding:18px;text-align:center}
  .company-certification-qr{width:120px;height:120px}
  .company-certification-content h3{font-size:18px}
}
.tel-color { background: var(--gold); color: var(--ink); }

/* ═══════════ [ใหม่] ไมค์อยู่ในช่องค้นหา AI ═══════════ */
.ai-input-wrap{position:relative;flex:1;min-width:0;display:flex}
.ai-input-wrap .ai-input-lg{width:100%;padding-right:44px}
.btn-mic-inside{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:18px;cursor:pointer;padding:6px;border-radius:50%;line-height:1;transition:background .2s,transform .15s}
.btn-mic-inside:hover{background:rgba(201,162,39,.15)}
.btn-mic-inside:active{transform:translateY(-50%) scale(.9)}
.btn-mic-inside.listening{animation:micPulse 1s infinite}
@keyframes micPulse{0%,100%{background:rgba(239,68,68,.18)}50%{background:rgba(239,68,68,.45)}}

/* ═══════════ [ใหม่] Search Drawer แบบลากได้จริง ═══════════ */
#searchDrawer{touch-action:pan-y;will-change:transform}
.drawer-fold-handle{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 0 14px;cursor:grab;user-select:none;touch-action:none}
.drawer-fold-handle:active{cursor:grabbing}
.drawer-fold-bar{width:44px;height:5px;border-radius:3px;background:rgba(107,100,89,.35)}
.drawer-fold-hint{font-size:10px;color:var(--sand);opacity:.55}
#drawerPill{position:fixed;top:0;left:50%;transform:translate(-50%,-110%);z-index:520;background:var(--gold);color:var(--ink);border:none;border-radius:0 0 14px 14px;padding:8px 22px 10px;font-size:12.5px;font-weight:700;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;cursor:pointer;box-shadow:0 4px 16px rgba(31,41,55,.2);display:flex;align-items:center;gap:7px;transition:transform .3s cubic-bezier(.22,1,.36,1);touch-action:none}
#drawerPill.show{transform:translate(-50%,0)}

/* ═══════════ [ใหม่] โหมดแผนที่ + รายการ (Airbnb style) ═══════════ */
#resultsLayout{display:none}
#mapPanel{position:relative;background:#e8e4dc;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
#mapCanvas{width:100%;height:100%;min-height:300px;z-index:1}
.map-fab{position:absolute;z-index:600;background:var(--navy);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12px;font-weight:600;color:var(--cream);cursor:pointer;box-shadow:var(--shadow-soft);font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;display:flex;align-items:center;gap:5px}
.map-fab:hover{border-color:var(--gold)}
.map-fab.active{background:var(--gold);color:var(--ink);border-color:var(--gold)}
#mapSatBtn{top:12px;right:12px}
#mapCountBadge{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:600;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);border:1px solid var(--line);border-radius:20px;padding:6px 14px;font-size:11.5px;font-weight:600;color:var(--cream);box-shadow:var(--shadow-soft);white-space:nowrap;pointer-events:none}
#mapZoomHint{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:600;background:rgba(31,41,55,.78);color:#fff;border-radius:16px;padding:5px 14px;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
#mapZoomHint.show{opacity:1}

/* หมุดราคา (ไม่มี cluster — แยกทุกหมุด) */
.dv-price-pin{background:#fff;border:1.5px solid rgba(31,41,55,.22);color:var(--cream);border-radius:14px;padding:4px 10px;font-weight:700;font-size:11.5px;font-family:'Prompt',sans-serif;box-shadow:0 2px 8px rgba(31,41,55,.22);white-space:nowrap;text-align:center;cursor:pointer;transition:transform .15s ease,background .15s,border-color .15s;transform-origin:center bottom}
.dv-price-pin:hover,.dv-price-pin.hovered{transform:scale(1.12);border-color:var(--gold);z-index:999!important}
.dv-price-pin.active{background:var(--cream);color:#fff;border-color:var(--cream);transform:scale(1.12)}
.dv-price-pin.visited{background:#f1ede4;color:#8a8375}
.dv-lm-pin{background:rgba(255,255,255,.95);border:1.5px solid var(--pool);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px;box-shadow:0 2px 6px rgba(31,41,55,.2);cursor:pointer;transition:transform .2s}
.dv-lm-pin:hover{transform:scale(1.15)}
.leaflet-popup-content-wrapper{background:#fff;color:var(--cream);border-radius:10px;box-shadow:0 6px 20px rgba(31,41,55,.18)}
.leaflet-popup-content{font-family:'Prompt',sans-serif;font-size:12px;margin:8px 12px}

/* PC (≥900px): แบ่งจอ รายการซ้าย | แผนที่ขวา sticky */
@media(min-width:900px){
  #resultsLayout.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,42%);gap:16px;align-items:start}
  #mapPanel{position:sticky;top:12px;height:calc(100vh - 24px)}
  #sheetHandle{display:none}
  #mapPillBtn{display:none!important}
  /* [ใหม่] รายการฝั่งซ้ายบน PC โชว์ได้หลายคอลัมน์ตามพื้นที่ว่าง (เดิมคอลัมน์เดียว เหลือพื้นที่ว่างเยอะ) */
  #listPanelInner .cards{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
}
@media(min-width:1300px){
  #resultsLayout.on{grid-template-columns:minmax(0,1fr) minmax(420px,38%)}
}

/* มือถือ (<900px): แผนที่เต็มจอด้านหลัง + รายการเป็น Bottom Sheet */
@media(max-width:899px){
  #resultsLayout.on{display:block}
  #mapPanel{position:fixed;inset:0;z-index:380;border-radius:0;border:none}
  #listPanel{position:fixed;left:0;right:0;top:0;height:100%;z-index:390;background:var(--ink);border-radius:18px 18px 0 0;box-shadow:0 -6px 30px rgba(31,41,55,.22);transform:translateY(calc(100% - 160px));will-change:transform;display:flex;flex-direction:column;touch-action:none}
  #listPanel.animating{transition:transform .32s cubic-bezier(.22,1,.36,1)}
  #listPanel.full{border-radius:0}
  #sheetHandle{flex-shrink:0;padding:10px 0 6px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:grab;user-select:none}
  #sheetHandle .bar{width:44px;height:5px;border-radius:3px;background:rgba(107,100,89,.35)}
  #sheetHandle .lbl{font-size:11.5px;font-weight:600;color:var(--sand)}
  #listPanelInner{flex:1;overflow-y:auto;padding:0 14px 90px;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  #listPanel:not(.full) #listPanelInner{overflow-y:hidden}
  #mapPanel .leaflet-bottom.leaflet-right{margin-bottom:150px}
  #mapEditBtn{top:12px;left:12px}
  .cmpbar{z-index:455}
}
#mapPillBtn{position:fixed;bottom:calc(64px + max(8px,env(safe-area-inset-bottom)) + 10px);left:50%;transform:translate(-50%,90px);z-index:450;background:var(--cream);color:#fff;border:none;border-radius:24px;padding:11px 20px;font-size:13px;font-weight:700;font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;cursor:pointer;box-shadow:0 6px 20px rgba(31,41,55,.35);display:flex;align-items:center;gap:7px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#mapPillBtn.show{transform:translate(-50%,0)}
/* [แก้บั๊ก] ปุ่มแผนที่ลอยไม่ยอมหายไปหน้าแรก — เดิมพึ่งแต่ JS ต้องคอย classList.remove('show') ให้ทัน
   ทุกทางที่จะกลับหน้าแรก ถ้ามีทางไหนหลุดไม่ได้เรียก ปุ่มจะค้าง ตอนนี้ล็อกด้วย CSS อีกชั้น:
   ถ้า #resultsLayout (พี่น้องตัวก่อนหน้า) ไม่มีคลาส .on (ไม่ได้อยู่โหมดแผนที่) ให้ซ่อนเด็ดขาดเสมอ
   ไม่ว่า JS จะลืมล้าง class .show หรือไม่ก็ตาม */
#resultsLayout:not(.on) ~ #mapPillBtn{display:none!important}
.card.map-hi{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,39,.35)}
/* [ใหม่] ม่านโหลดคลุมรายการ ระหว่างโหลดหมุด/ราคาชุดใหม่หลังเลื่อนแผนที่ — กันแตะเลื่อนตอนของยังไม่พร้อม */
#listLoadingVeil{position:absolute;inset:0;z-index:20;background:rgba(31,41,55,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;flex-direction:column;gap:12px;border-radius:inherit}
#listLoadingVeil.show{display:flex}
#listLoadingVeil .sp{width:30px;height:30px;border:3px solid rgba(201,162,39,.3);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
#listLoadingVeil .txt{font-size:12px;color:var(--gold-soft);letter-spacing:.08em}
@media(min-width:900px){#listPanel{position:relative}}

/* รูปกำลังโหลด (แก้เรื่องกดลูกศรแล้วรูปเหมือนไม่ไป) */
.main-img.img-loading{opacity:.5;transition:opacity .2s}
.main-img.neighbor-loading{opacity:.22;filter:blur(5px);transition:opacity .2s,filter .2s}
.viewer .img-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:6;pointer-events:none}
.viewer .img-spinner::after{content:'';width:26px;height:26px;border:3px solid rgba(201,162,39,.3);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .thumb-wrap{transition:none;transform:none}
}

/* ═══════════ [ใหม่] Villa Modal — รายละเอียดบ้านแบบป๊อปอัป (ธีมสว่างเข้ากับเว็บหลัก) ═══════════ */
#vmBg{position:fixed;inset:0;background:rgba(31,41,55,.5);backdrop-filter:blur(3px);z-index:1200;display:none;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .25s ease}
#vmBg.show{opacity:1}
#vmBox{background:var(--ink);width:100%;max-width:980px;height:94vh;border-radius:20px 20px 0 0;overflow:hidden;display:flex;flex-direction:column;transform:translateY(60px);opacity:0;transition:transform .34s cubic-bezier(.22,1,.36,1),opacity .28s ease;position:relative}
#vmBg.show #vmBox{transform:translateY(0);opacity:1}
@media(min-width:900px){
  #vmBg{align-items:center;padding:24px}
  #vmBox{height:calc(100vh - 48px);border-radius:20px;transform:translateY(24px) scale(.98)}
  #vmBg.show #vmBox{transform:translateY(0) scale(1)}
}
#vmClose{position:absolute;top:14px;right:14px;z-index:60;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--cream);width:36px;height:36px;border-radius:50%;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft)}
/* [ใหม่] ปุ่มแชร์บ้าน */
#vmShareBtn{position:absolute;top:14px;right:58px;z-index:60;background:rgba(255,255,255,.92);border:1px solid var(--line);color:var(--cream);width:36px;height:36px;border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft)}
.share-menu{position:absolute;top:56px;right:58px;z-index:61;background:var(--navy);border:1px solid var(--line);border-radius:10px;padding:6px;display:none;flex-direction:column;gap:2px;min-width:170px;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.share-menu.show{display:flex}
.share-menu button{background:none;border:none;color:var(--cream);text-align:left;padding:9px 10px;border-radius:6px;cursor:pointer;font-size:13px;display:flex;align-items:center;gap:8px;font-family:inherit}
.share-menu button:hover{background:var(--ink)}
#vmClose:hover{background:var(--gold);color:var(--ink)}
#vmScroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.vm-hero{position:relative;height:300px;background:#ece7dd}
@media(max-width:640px){.vm-hero{height:220px}}
.vm-hero img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
.vm-hero-swiper{position:absolute;inset:0;width:100%;height:100%}
.vm-hero-swiper .swiper-slide{overflow:hidden;background:#d8d2c8}
.vm-hero-swiper .swiper-slide img{transform:scale(1.02);will-change:transform}
.vm-hero-swiper .swiper-slide-active img{animation:vmKenBurnsIn 9s ease-out both}
.vm-hero-swiper .swiper-slide:nth-child(even).swiper-slide-active img{animation-name:vmKenBurnsOut}
@keyframes vmKenBurnsIn{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.11) translate3d(-1%,-.5%,0)}}
@keyframes vmKenBurnsOut{from{transform:scale(1.11) translate3d(1%,.5%,0)}to{transform:scale(1.02) translate3d(0,0,0)}}
.vm-hero-veil{position:absolute;z-index:3;inset:0;background:linear-gradient(180deg,rgba(16,22,30,.06) 25%,rgba(16,22,30,.82) 100%);pointer-events:none}
.vm-hero-content{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:18px 20px;pointer-events:none}
.vm-hero-swiper .swiper-button-prev,.vm-hero-swiper .swiper-button-next{width:38px;height:38px;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(16,22,30,.35);color:#fff;backdrop-filter:blur(6px);opacity:.82;transition:opacity .2s,background .2s}
.vm-hero-swiper .swiper-button-prev:hover,.vm-hero-swiper .swiper-button-next:hover{opacity:1;background:rgba(16,22,30,.58)}
.vm-hero-swiper .swiper-button-prev::after,.vm-hero-swiper .swiper-button-next::after{font-size:14px;font-weight:700}
.vm-hero-swiper .swiper-pagination{z-index:5;left:auto;right:16px;bottom:10px;width:auto;color:#fff;background:rgba(16,22,30,.38);border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:3px 9px;font-size:10.5px;backdrop-filter:blur(5px)}
@media(max-width:640px){.vm-hero-swiper .swiper-button-prev,.vm-hero-swiper .swiper-button-next{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){.vm-hero-swiper .swiper-slide-active img{animation:none}.vm-hero-swiper .swiper-wrapper{transition-duration:0ms!important}}
.vm-badge{display:inline-block;border:1px solid var(--gold);color:#fbe9b7;background:rgba(31,41,55,.35);padding:3px 12px;border-radius:4px;font-size:11px;letter-spacing:.18em;margin-bottom:8px}
.vm-hero-content h2{font-size:clamp(20px,3.4vw,30px);color:#fff;font-weight:600;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.vm-hero-sub{color:#f3ede0;opacity:.95;margin-top:5px;font-size:13px;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.vm-wrap{max-width:900px;margin:0 auto;padding:0 18px 40px;overflow-x:hidden}
.vm-divider{display:flex;align-items:center;gap:12px;margin:30px 0 18px;color:var(--gold)}
.vm-divider::before,.vm-divider::after{content:"";flex:1;height:1px;background:var(--line)}
.vm-divider span{font-size:11.5px;letter-spacing:.25em;text-transform:uppercase;color:var(--gold-soft);white-space:nowrap;font-weight:700}
.vm-zone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:640px){.vm-zone-grid{grid-template-columns:repeat(2,1fr)}}
.vm-zone-card{position:relative;height:130px;border-radius:10px;overflow:hidden;cursor:pointer;border:1px solid var(--line)}
.vm-zone-card img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;display:block}
.vm-zone-card:hover img{transform:scale(1.07)}
.vm-zone-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(31,41,55,0) 40%,rgba(31,41,55,.78) 100%)}
.vm-zone-info{position:absolute;left:0;right:0;bottom:0;padding:9px 12px}
.vm-zone-name{font-family:'Noto Serif Thai',serif;font-size:13.5px;color:#fff;font-weight:600}
.vm-zone-count{font-size:10.5px;color:#fbe9b7;margin-top:1px}
.vm-facts{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
@media(max-width:640px){.vm-facts{grid-template-columns:repeat(2,1fr)}}
.vm-fact{background:var(--navy);padding:14px 10px;text-align:center}
.vm-fact b{display:block;font-size:19px;color:var(--gold-soft);font-family:'Noto Serif Thai',serif}
.vm-fact span{font-size:11px;color:var(--sand)}
.vm-grid2{display:grid;grid-template-columns:1.25fr .95fr;gap:16px;min-width:0}
.vm-grid2 > div{min-width:0}
@media(max-width:820px){.vm-grid2{grid-template-columns:1fr}}
.vm-card{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-soft);min-width:0;box-sizing:border-box}
.vm-card h3{color:var(--gold-soft);font-size:14.5px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.vm-card h3::before{content:"";width:6px;height:6px;background:var(--gold);border-radius:50%;flex:none}
.vm-card p{color:var(--sand);font-size:13px;white-space:pre-line;line-height:1.7}
.vm-spec-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.vm-spec-item{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025);min-width:0}
.vm-spec-item span{font-size:11.5px;color:var(--muted)}
.vm-spec-item b{font-size:13px;color:var(--sand);overflow-wrap:anywhere}
.vm-data-notice{margin-top:10px;padding:9px 11px;border-radius:8px;background:rgba(214,170,55,.1);color:var(--gold-soft);font-size:12px}
@media(max-width:760px){.vm-spec-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.vm-detail-inline-image{display:block;width:100%;height:auto;max-height:520px;object-fit:contain;margin:12px 0;border-radius:8px;background:#fff;border:1px solid var(--line)}
.vm-travel-item{display:flex;justify-content:space-between;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line);font-size:12.5px;color:var(--sand);gap:10px}
.vm-travel-item:last-child{border-bottom:none}
.vm-travel-item a{color:var(--gold-soft);text-decoration:none;font-size:11.5px;white-space:nowrap}
.vm-cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.vm-cal-head button{background:none;border:1px solid var(--line);color:var(--gold-soft);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:13px}
.vm-cal-head button:hover{background:var(--gold);color:var(--ink)}
.vm-cal-title{font-family:'Noto Serif Thai',serif;font-size:14px;color:var(--cream);font-weight:600}
.vm-cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;text-align:center}
.vm-cal-grid .dow{font-size:10px;color:var(--gold-soft);opacity:.8;padding-bottom:4px;min-width:0}
.vm-cal-day{height:38px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;font-size:12.5px;background:var(--ink);color:var(--cream);position:relative;padding:2px;border:1px solid transparent;min-width:0;box-sizing:border-box;overflow:hidden}
.vm-cal-day.empty{background:none}
.vm-cal-day.booked{background:rgba(220,80,80,.1);color:#d98080;text-decoration:line-through}
.vm-cal-day.past{background:rgba(31,41,55,.035);color:var(--sand);opacity:.32;text-decoration:line-through;cursor:not-allowed;filter:grayscale(1)}
.vm-cal-day.holiday{background:rgba(201,162,39,.14);color:#9C6B12;font-weight:600}
.vm-cal-day.available{cursor:pointer}
.vm-cal-day.available:hover{background:var(--gold);color:var(--ink)}
.vm-cal-day.available:hover .p{color:var(--ink)}
.vm-cal-day .p{font-size:7.5px;opacity:.8;margin-top:1px;font-weight:600;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vm-legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;font-size:10.5px;color:var(--sand)}
/* [ใหม่] ตารางไอคอนฟังก์ชั่น/สิ่งอำนวยความสะดวกของบ้านหลังนี้ */
.vm-fac-grid{display:flex;flex-wrap:wrap;gap:8px}
.vm-fac-chip{background:var(--navy);border:1px solid var(--line);border-radius:20px;padding:7px 14px;font-size:12.5px;color:var(--sand);white-space:nowrap}
.vm-legend span{display:inline-flex;align-items:center;gap:4px}
.vm-legend i{width:9px;height:9px;border-radius:2px;display:inline-block}
#vmMap{width:100%;height:260px;border-radius:10px;border:1px solid var(--line);z-index:1}
.vm-map-note{font-size:11.5px;color:var(--sand);opacity:.7;margin-top:8px;text-align:center}
.vm-nearby-poi-status{font-size:11.5px;color:var(--sand);opacity:.75;margin-top:9px;text-align:center}
.vm-nearby-poi-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.vm-nearby-poi-group{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px;min-width:0}
.vm-nearby-poi-group b{display:block;color:var(--gold-soft);font-size:11.5px;margin-bottom:5px}
.vm-nearby-poi-group a{display:block;color:var(--sand);font-size:10.5px;text-decoration:none;padding:5px 0;border-top:1px dashed var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vm-nearby-poi-group a span{opacity:.55;margin-left:4px}
@media(max-width:640px){.vm-nearby-poi-list{grid-template-columns:1fr}}
.vm-review-item{background:var(--ink);border:1px solid var(--line);border-radius:10px;padding:11px 13px}
.vm-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;color:var(--gold-soft);font-size:13px;letter-spacing:.15em}
.vm-loading .spin{width:34px;height:34px;border:3px solid var(--line);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
/* Lightbox ใน modal */
#vmLightbox{position:fixed;inset:0;background:rgba(15,17,23,.94);z-index:1400;display:none;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
#vmLightbox::after{content:'';position:absolute;top:18px;left:18px;width:110px;aspect-ratio:914/308;background:url('/logo-wordmark.png') no-repeat left top/contain;opacity:.6;pointer-events:none;z-index:1401;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
#vmLightbox.show{display:flex;opacity:1}
#vmLightbox img{max-width:94vw;max-height:88vh;object-fit:contain;border-radius:6px}
.vmlb-btn{position:absolute;color:#fff;font-size:34px;cursor:pointer;user-select:none;background:rgba(255,255,255,.08);border:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;line-height:1}
.vmlb-btn:hover{background:rgba(201,162,39,.5)}
.vmlb-close{top:16px;right:16px;font-size:24px}
.vmlb-prev{left:12px;top:50%;transform:translateY(-50%)}
.vmlb-next{right:12px;top:50%;transform:translateY(-50%)}
.vmlb-counter{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);color:#fff;font-size:12px;background:rgba(0,0,0,.5);border-radius:14px;padding:4px 14px}

/* ═══════════════════════════════════════════════════════════════════════
   [ใหม่ #3] แถบปุ่มเลือกสถานที่รอบๆ บนแผนที่ + หมุด POI
   ต่อท้ายไฟล์ทั้งหมด ไม่ได้แก้ selector เดิมแม้แต่ตัวเดียว
   ═══════════════════════════════════════════════════════════════════════ */
#mapPoiBar{
  position:absolute; z-index:601; left:0; right:0; top:52px;
  padding:6px 12px 8px; pointer-events:none;
}
#mapPoiBar::-webkit-scrollbar{display:none}
.poi-scroll-shell{position:relative;display:flex;align-items:center;min-width:0;pointer-events:auto}
.poi-group-row,.poi-child-row{display:flex;flex:1;min-width:0;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;pointer-events:auto;padding-bottom:2px;scroll-behavior:smooth}
.poi-group-row::-webkit-scrollbar,.poi-child-row::-webkit-scrollbar{display:none}
.poi-scroll-shell+.poi-scroll-shell{margin-top:6px}
.poi-group-row{padding-left:34px;padding-right:34px}
.poi-child-row{padding:7px 34px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:14px;box-shadow:0 4px 14px rgba(31,41,55,.14)}
.poi-scroll-btn{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:28px;height:28px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.96);color:var(--cream);box-shadow:0 2px 8px rgba(31,41,55,.18);font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer}
.poi-scroll-btn.left{left:2px}.poi-scroll-btn.right{right:2px}
.poi-scroll-btn:hover{border-color:var(--gold);color:var(--gold)}
.poi-chip{
  flex:0 0 auto; background:rgba(255,255,255,.94); backdrop-filter:blur(4px);
  border:1px solid var(--line); border-radius:20px; padding:6px 12px;
  font-size:11.5px; font-weight:600; color:var(--cream); cursor:pointer; white-space:nowrap;
  font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
  box-shadow:0 2px 8px rgba(31,41,55,.14); transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.poi-chip:hover{border-color:var(--poi-c,var(--gold)); transform:translateY(-1px)}
.poi-chip.active{background:var(--poi-c,var(--gold)); border-color:var(--poi-c,var(--gold)); color:#fff}
.poi-group-chip.open{border-color:var(--gold);box-shadow:0 0 0 2px rgba(201,162,39,.14)}
.poi-group-chip.active{background:var(--navy);border-color:var(--gold);color:var(--gold-soft)}
.poi-group-chip span,.poi-count{display:inline-flex;min-width:17px;height:17px;padding:0 4px;align-items:center;justify-content:center;border-radius:9px;background:rgba(31,41,55,.12);font-size:9px}
.poi-child-chip.active .poi-count{background:rgba(255,255,255,.24)}
.poi-clear-btn{flex:0 0 auto;border:0;background:transparent;color:#dc2626;font:600 11px 'Prompt',sans-serif;padding:6px 9px;cursor:pointer}
.poi-chip.loading{opacity:.55; pointer-events:none; position:relative}
.poi-chip.loading::after{
  content:''; position:absolute; inset:0; border-radius:20px;
  background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.6) 50%,transparent 75%);
  background-size:200% 100%; animation:sh 1.1s infinite;
}
.poi-more-btn{background:rgba(255,255,255,.94)}
.poi-more-btn.active{background:var(--cream); border-color:var(--cream); color:#fff}
.poi-more-group{display:none; gap:6px; flex:0 0 auto}
.poi-more-group.open{display:flex}
/* หมุดสถานที่รอบๆ — วงกลมเล็กสีตามหมวด ให้แยกออกจากหมุดราคาบ้าน (ป้ายสี่เหลี่ยมสีขาว) ชัดเจน */
.dv-poi-pin{
  width:24px; height:24px; border-radius:50%; background:#fff;
  border:2px solid var(--poi-c,#888); display:flex; align-items:center; justify-content:center;
  font-size:12px; box-shadow:0 2px 6px rgba(31,41,55,.28); cursor:pointer; transition:transform .15s;
}
.dv-poi-pin:hover{transform:scale(1.25); z-index:900!important}
.vm-radius-control{display:flex;background:#fff;border-radius:8px;box-shadow:0 1px 6px rgba(0,0,0,.28);overflow:hidden}
.vm-radius-control button{border:0;border-right:1px solid #e5e7eb;background:#fff;color:#374151;padding:7px 9px;font:600 11px/1 system-ui;cursor:pointer}
.vm-radius-control button:last-child{border-right:0}
.vm-radius-control button:hover{background:#f3f4f6}
.vm-radius-control button.active{background:#c9a227;color:#fff}
.vm-trust-footer{margin:34px -18px -40px;padding:34px 22px 26px;background:linear-gradient(155deg,#fffdf9 0%,#faf7f2 58%,#f5efe4 100%);border-top:1px solid rgba(201,162,39,.25);text-align:center;color:var(--cream)}
.vm-trust-footer h2{font:700 22px/1.4 'Noto Serif Thai',serif;color:var(--gold-soft);margin:0 0 7px}
.vm-trust-lead{font-size:12.5px;color:var(--sand);opacity:.9;margin:0 auto 20px}
.vm-why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;max-width:860px;margin:0 auto}
.vm-why-grid>div{padding:14px 12px;background:#fff;border:1px solid var(--line);border-radius:12px;text-align:left;box-shadow:0 3px 12px rgba(31,41,55,.045)}
.vm-why-grid b,.vm-why-grid span{display:block}.vm-why-grid b{font-size:12.5px;color:var(--gold-soft);margin-bottom:5px}.vm-why-grid span{font-size:10.5px;line-height:1.6;color:var(--sand);opacity:.9}
.vm-trust-title{margin-top:29px!important}
.vm-credential-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:1040px;margin:17px auto 0;align-items:stretch}
.vm-credential-card{min-width:0;display:flex;align-items:center;justify-content:center;gap:13px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:14px;text-align:left;color:var(--cream);text-decoration:none;box-shadow:0 3px 14px rgba(31,41,55,.05);transition:transform .2s,border-color .2s,background .2s,box-shadow .2s}
.vm-credential-link:hover{transform:translateY(-2px);border-color:var(--gold);background:#fffdf8;box-shadow:0 7px 20px rgba(31,41,55,.09)}
.vm-credential-card>img{width:72px;height:72px;object-fit:contain;background:#fff;border-radius:8px;padding:3px;box-sizing:border-box}
.vm-credential-card small,.vm-credential-card b,.vm-credential-card strong,.vm-credential-card span{display:block}.vm-credential-card small{font-size:9.5px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:.08em}.vm-credential-card b{font-size:12.5px;margin-top:3px;line-height:1.45;color:var(--cream)}.vm-credential-card strong{font-size:17px;color:var(--gold-soft);margin-top:4px;letter-spacing:.04em}.vm-credential-card span{font-size:9.5px;color:var(--sand);margin-top:5px}
.vm-bank-mark{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;background:#4e2a84;font-weight:800;font-size:13px;box-shadow:0 5px 16px rgba(78,42,132,.35)}
.vm-certification-card{flex-direction:column;justify-content:center;text-align:center}
.vm-certification-card>div:last-child{text-align:center}
.vm-cert-visual{position:static;width:auto;height:auto;flex:none;background:transparent;border-radius:0;overflow:visible;display:flex;align-items:center;justify-content:center;gap:10px}
.vm-cert-logo,.vm-cert-qr{position:static;width:82px;height:82px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px;box-sizing:border-box;box-shadow:0 3px 12px rgba(31,41,55,.08)}
.vm-cert-logo{mix-blend-mode:multiply}
.vm-footer-links{display:flex;justify-content:center;gap:20px;margin-top:24px;padding-top:17px;border-top:1px solid var(--line)}.vm-footer-links a{font-size:11px;color:var(--sand);text-decoration:none}.vm-footer-links a:hover{color:var(--gold-soft)}
@media(max-width:720px){.vm-why-grid{grid-template-columns:1fr 1fr}.vm-credential-grid{grid-template-columns:1fr}.vm-credential-card{justify-content:flex-start}.vm-trust-footer h2{font-size:19px}}
@media(max-width:899px){
  /* มือถือ: แผนที่เต็มจอ ปุ่ม "แก้ไขคำค้นหา" อยู่ซ้ายบน จึงดันแถบหมวดลงมาไม่ให้ทับกัน */
  #mapPoiBar{top:56px; padding:6px 10px 8px}
  .poi-chip{font-size:11px; padding:5px 10px}
  .poi-scroll-btn{display:none}
  .poi-group-row{padding-left:0;padding-right:0}
  .poi-child-row{padding-left:7px;padding-right:7px}
}

/* ═══════════════════════════════════════════════════════════════════════
   [ใหม่ #4] Why VillaVerse — ทำไมต้องจองกับเรา
   ═══════════════════════════════════════════════════════════════════════ */
.why-vv{max-width:960px; margin:36px auto 0; padding:28px 16px 4px; text-align:center}
.why-vv-title{
  font-family:'Noto Serif Thai',serif; font-size:21px; font-weight:700;
  color:var(--cream); margin:0 0 6px; line-height:1.4;
}
.why-vv-sub{font-size:13px; color:var(--sand); opacity:.85; margin:0 0 22px; line-height:1.6}
.why-vv-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px; text-align:left;
}
.why-vv-card{
  background:var(--navy); border:1px solid var(--line); border-radius:14px;
  padding:18px 16px; box-shadow:var(--shadow-soft);
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.why-vv-card:hover{border-color:var(--gold); transform:translateY(-2px); box-shadow:0 6px 18px rgba(31,41,55,.1)}
.why-vv-icon{font-size:26px; line-height:1; display:block; margin-bottom:10px}
.why-vv-card h3{
  font-size:14px; font-weight:600; color:var(--gold-soft); margin:0 0 6px; line-height:1.45;
  font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
}
.why-vv-card p{font-size:12.5px; color:var(--sand); margin:0; line-height:1.7}
.why-vv-cta{
  margin-top:20px; background:var(--gold); color:var(--ink); border:none; border-radius:24px;
  padding:12px 26px; font-size:13.5px; font-weight:700; cursor:pointer;
  font-family:'Prompt','Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;
  box-shadow:0 4px 14px rgba(201,162,39,.28); transition:transform .15s, box-shadow .2s;
}
.why-vv-cta:hover{transform:translateY(-2px); box-shadow:0 6px 20px rgba(201,162,39,.4)}
.vm-booking-mode{display:flex;flex-direction:column;gap:4px;margin:12px 0 16px;padding:12px 14px;border-radius:12px;font-size:12px;line-height:1.55}
.vm-booking-mode b{font-size:13px}
.vm-booking-mode.recheck{background:#fff7e6;border:1px solid #f1cb77;color:#754700}
.vm-booking-mode.instant{background:#eefbf3;border:1px solid #9ed9b3;color:#17603a}
@media(max-width:520px){
  .why-vv{margin-top:26px; padding:22px 14px 0}
  .why-vv-title{font-size:18px}
  .why-vv-grid{grid-template-columns:1fr 1fr; gap:9px}
  .why-vv-card{padding:14px 12px; border-radius:12px}
  .why-vv-icon{font-size:22px; margin-bottom:7px}
  .why-vv-card h3{font-size:12.5px}
  .why-vv-card p{font-size:11.5px; line-height:1.6}
}