/* ===========================================================
   สไตล์ร่วมของหน้ารอง (ทุกหน้าที่ไม่ใช่หน้าแรก)
   ใช้ต่อจาก x10.css
   =========================================================== */

/* เมนู "เพิ่มเติม" */
.nav__more{position:relative}
.nav__morebtn{border:0;background:none;cursor:pointer;font-family:var(--sans);font-size:.875rem;
  color:var(--ink);padding:.5rem .75rem;border-radius:var(--r-pill)}
.nav__morebtn:hover{background:var(--mist);color:var(--blue)}
.nav__pop{position:absolute;right:0;top:calc(100% + .4rem);display:none;flex-direction:column;
  min-width:190px;padding:.4rem;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  border-radius:18px 18px 18px 6px;box-shadow:0 18px 34px -22px rgba(15,44,68,.6),var(--ring);z-index:70}
.nav__more.is-open .nav__pop{display:flex}
.nav__pop a{padding:.55rem .8rem;border-radius:12px;font-size:.875rem}
.nav__pop a:hover{background:var(--mist);color:var(--blue)}

/* หัวหน้า */
.phead{position:relative;overflow:hidden;padding:calc(66px + clamp(1.6rem,4vw,3rem)) var(--pad-x) clamp(1.4rem,3vw,2.2rem);
  background:radial-gradient(110% 80% at 18% 0%,rgba(231,244,253,.92),rgba(241,248,253,.5) 70%)}
.phead__in{position:relative;max-width:var(--wrap);margin:0 auto}
.phead h1{font-size:clamp(1.8rem,4vw,3rem);margin:.55rem 0 .6rem}
.phead .lede{max-width:64ch}
.phead__m{position:absolute;right:0;bottom:-10px;width:130px;z-index:2}
@media (max-width:900px){ .phead__m{display:none} }
.crumb{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
.crumb a{color:var(--glow)}

/* ส่วนเนื้อหา */
.sec{padding:clamp(1.8rem,4vw,3rem) var(--pad-x)}
.sec--alt{background:rgba(226,239,249,.6)}
.sec__in{max-width:var(--wrap);margin:0 auto}
.sec h2{font-size:clamp(1.4rem,2.8vw,2.1rem);margin:.4rem 0 .8rem}
.sec h3{font-size:1.125rem;margin:.2rem 0 .4rem}

/* แถบตัวกรองแบบเดียวกันทุกหน้า */
.filters2{position:sticky;top:60px;z-index:40;background:rgba(255,255,255,.93);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);padding:.7rem var(--pad-x)}
.filters2__in{max-width:var(--wrap);margin:0 auto;display:flex;flex-wrap:wrap;gap:.5rem 1.3rem;align-items:center}
.fg{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.fg>strong{font-family:var(--mono);font-size:.5625rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500}
.chip{background:var(--sky);border:2px solid var(--line);border-radius:var(--r-pill);padding:.4rem .9rem;
  font-family:var(--sans);font-size:.875rem;color:var(--ink);cursor:pointer;transition:all .14s ease}
.chip:hover{border-color:var(--aqua);background:#fff}
.chip[aria-pressed="true"]{background:linear-gradient(120deg,var(--blue),#1c6fae);border-color:transparent;color:#fff}
.chip--land[aria-pressed="true"]{background:var(--land);border-color:transparent}
.fsearch{flex:1 1 190px;min-width:150px;border:2px solid var(--line);border-radius:var(--r-pill);
  padding:.45rem 1rem;font-family:var(--sans);font-size:.875rem;background:var(--sky);color:var(--ink)}
.fcount{font-family:var(--mono);font-size:.75rem;color:var(--ink-soft);margin-left:auto}

/* การ์ดห้องพัก (ใช้ทั้งหน้า Villas / ดินแดน / จำนวนคน) */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:1rem}
.vc{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:26px 10px 26px 10px;
  overflow:hidden;border-top:4px solid var(--land);box-shadow:0 1px 0 rgba(15,44,68,.06),0 20px 36px -30px rgba(15,76,131,.6);
  transition:transform .18s ease,box-shadow .18s ease}
.vc:hover{transform:translateY(-5px);box-shadow:0 26px 44px -28px rgba(15,76,131,.8)}
.vc__pic{position:relative;height:180px;background:#06202f;overflow:hidden}
.vc__pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.vc:hover .vc__pic img{transform:scale(1.06)}
.vc__zone{position:absolute;left:.6rem;top:.6rem;display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(4,18,31,.72);backdrop-filter:blur(6px);color:#eaf8ff;font-family:var(--mono);
  font-size:.5625rem;letter-spacing:.12em;text-transform:uppercase;padding:.28rem .6rem;border-radius:var(--r-pill)}
.vc__zone i{width:7px;height:7px;border-radius:50%;background:var(--land)}
.vc__shots{position:absolute;right:.6rem;top:.6rem;background:rgba(4,18,31,.72);color:#eaf8ff;
  font-family:var(--mono);font-size:.5625rem;letter-spacing:.1em;padding:.28rem .55rem;border-radius:var(--r-pill)}
.vc__b{padding:.85rem .95rem 1rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.vc__n{font-size:1rem;font-weight:500;line-height:1.35}
.vc__meta{font-family:var(--mono);font-size:.6875rem;color:var(--ink-soft)}
.vc__life{display:flex;flex-wrap:wrap;gap:.25rem;margin-top:.15rem}
.vc__life span{font-size:.6875rem;background:var(--sky);color:var(--blue);padding:.2rem .5rem;border-radius:var(--r-pill)}
.vc__p{margin-top:auto;padding-top:.5rem;display:flex;align-items:baseline;gap:.35rem;
  font-family:var(--mono);font-size:1.125rem;color:var(--blue)}
.vc__p s{text-decoration:none;font-size:.625rem;color:var(--ink-soft)}
.vc__btns{display:flex;gap:.4rem;margin-top:.55rem}
.vc__btns a,.vc__btns button{flex:1;border:0;border-radius:var(--r-pill);padding:.5rem;cursor:pointer;
  font-family:var(--sans);font-size:.8125rem;text-align:center}
.vc__btns .g{background:var(--sky);color:var(--blue);box-shadow:inset 0 0 0 1px var(--line)}
.vc__btns .b{background:linear-gradient(120deg,var(--orange),#ffab5e);color:#4a2606}

/* ไลต์บ็อกซ์รูป */
.lb{position:fixed;inset:0;z-index:90;display:none;background:rgba(4,18,31,.92);backdrop-filter:blur(6px)}
.lb.is-open{display:grid;place-items:center}
.lb__box{position:relative;width:min(1000px,94vw)}
.lb__img{width:100%;max-height:76vh;object-fit:contain;border-radius:24px;
  box-shadow:0 30px 60px -24px #000,inset 0 0 0 1px rgba(125,227,244,.35)}
.lb__cap{color:#dff5fd;font-size:.9375rem;margin-top:.7rem;display:flex;gap:.6rem;align-items:center}
.lb__cap b{font-weight:500}
.lb__x,.lb__p,.lb__n{position:absolute;border:0;border-radius:50%;width:44px;height:44px;cursor:pointer;
  background:rgba(255,255,255,.9);color:var(--blue);font-size:1.2rem}
.lb__x{right:-6px;top:-52px}
.lb__p{left:-6px;top:50%;transform:translateY(-50%)}
.lb__n{right:-6px;top:50%;transform:translateY(-50%)}
.lb__thumbs{display:flex;gap:.35rem;margin-top:.6rem;overflow-x:auto;scrollbar-width:none}
.lb__thumbs::-webkit-scrollbar{display:none}
.lb__thumbs button{flex:0 0 auto;width:70px;height:48px;border:0;border-radius:10px;overflow:hidden;
  cursor:pointer;box-shadow:0 0 0 2px transparent}
.lb__thumbs img{width:100%;height:100%;object-fit:cover}
.lb__thumbs button[aria-current="true"]{box-shadow:0 0 0 2px var(--neon)}

/* รายการทั่วไป: การ์ดกล่องข้อความ */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.9rem}
.tile{background:#fff;border-radius:22px 22px 22px 8px;padding:1.1rem 1.2rem 1.2rem;
  box-shadow:0 1px 0 rgba(15,44,68,.06)}
.tile b{display:block;font-size:1.0625rem;font-weight:500;margin-bottom:.25rem}
.tile span{font-size:.9375rem;color:var(--ink-soft)}
.tile em{font-style:normal;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--glow);display:block;margin-bottom:.4rem}

/* accordion (Q&A) */
.acc{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:.55rem}
.acc details{background:#fff;border-radius:20px 20px 20px 6px;box-shadow:0 1px 0 rgba(15,44,68,.06);
  overflow:hidden}
.acc summary{cursor:pointer;padding:.95rem 1.1rem;font-weight:500;font-size:1rem;list-style:none;
  display:flex;gap:.7rem;align-items:flex-start}
.acc summary::-webkit-details-marker{display:none}
.acc summary::before{content:"＋";color:var(--glow);font-family:var(--mono);flex:0 0 auto}
.acc details[open] summary::before{content:"－"}
.acc__a{padding:0 1.1rem 1.1rem 2.5rem;color:var(--ink-soft);font-size:.9375rem;line-height:1.75}
.acc__a p{margin:.2rem 0}

/* ตารางเมนูอาหาร */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem}
.mi{background:#fff;border-radius:20px 20px 20px 6px;overflow:hidden;box-shadow:0 1px 0 rgba(15,44,68,.06);
  display:flex;flex-direction:column;transition:transform .16s ease,box-shadow .16s ease}
.mi:hover{transform:translateY(-3px);box-shadow:0 18px 30px -24px rgba(15,76,131,.8)}
.mi__pic{height:140px;background:var(--sky);overflow:hidden;position:relative}
.mi__pic img{width:100%;height:100%;object-fit:cover}
.mi__kcal{position:absolute;right:.5rem;bottom:.5rem;background:rgba(4,18,31,.7);color:#ffd9b0;
  font-family:var(--mono);font-size:.625rem;padding:.2rem .5rem;border-radius:var(--r-pill)}
.mi__b{padding:.75rem .85rem .9rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.mi__n{font-size:.9375rem;font-weight:500;line-height:1.35}
.mi__d{font-size:.8125rem;color:var(--ink-soft);flex:1}
.mi__life{display:flex;flex-wrap:wrap;gap:.2rem}
.mi__life span{font-size:.6875rem;background:var(--orange-tint);color:var(--orange-600);
  padding:.15rem .45rem;border-radius:var(--r-pill)}
.mi__p{font-family:var(--mono);font-size:.9375rem;color:var(--blue)}

/* กล่องติดต่อ */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.9rem}
.cbox{display:flex;gap:.8rem;align-items:flex-start;background:#fff;border-radius:22px 22px 22px 8px;
  padding:1rem 1.1rem;box-shadow:0 1px 0 rgba(15,44,68,.06)}
.cbox i{font-style:normal;font-size:1.4rem;line-height:1}
.cbox b{display:block;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;margin-bottom:.15rem}
.cbox a,.cbox span{font-size:.9375rem;color:var(--ink);word-break:break-word}

/* บทความ */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.post{background:#fff;border-radius:24px 10px 24px 10px;padding:1.1rem 1.2rem 1.2rem;
  box-shadow:0 1px 0 rgba(15,44,68,.06)}
.post time{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--glow)}
.post b{display:block;font-size:1.0625rem;font-weight:500;margin:.35rem 0 .4rem;line-height:1.4}
.post p{font-size:.9375rem;color:var(--ink-soft)}

/* หมายเหตุข้อมูล */
.note{max-width:var(--wrap);margin:1rem auto 0;font-size:.8125rem;color:var(--ink-soft)}

@media (max-width:860px){
  .filters2{top:56px}
  .vc__pic{height:160px}
  .phead{padding-top:calc(58px + 1.4rem)}
}