*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Noto Sans Thai','Sarabun',sans-serif;background:#f6fafb;color:#0F172A;-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden;background-image:radial-gradient(circle at 10% 6%,rgba(6,182,212,.1),transparent 40%),radial-gradient(circle at 92% 3%,rgba(251,113,133,.1),transparent 38%)}
:root{--bl:#06B6D4;--bl-dk:#0891b2;--bl-lt:#ecfeff;--or:#FB7185;--or-dk:#f43f5e;--or-lt:#fff1f3;--go:#FBBF24;--ink:#0F172A;--sub:#64748b;--mut:#9aa7b8;--bdr:#e6eef2;--r:20px;--r2:13px;--sh:0 6px 22px rgba(15,40,70,.07);--sh2:0 14px 44px rgba(15,40,70,.15)}
a{text-decoration:none;color:inherit}img{display:block;max-width:100%;object-fit:cover}button{cursor:pointer;font-family:inherit}
.inner{max-width:1120px;margin:0 auto}
/* breadcrumb */
.crumb{max-width:1120px;margin:0 auto;padding:84px 28px 0;font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12.5px;color:var(--sub)}
.crumb a:hover{color:var(--bl)}
/* PROVINCE HERO */
.phero{position:relative;max-width:1120px;margin:14px auto 0;border-radius:28px;overflow:hidden;min-height:360px;display:flex;align-items:flex-end;box-shadow:0 22px 52px rgba(15,40,70,.22);background:linear-gradient(135deg,#0891b2,#22d3ee 50%,#FB7185)}
/* Both shapes heroPic() can emit. It wraps the hero in a picture element
   whenever a webp twin exists, which made the img a GRANDchild — so the old
   child selector stopped matching, the picture became a plain flex item beside
   .pherobody, and on 829 destination hubs the hero photo collapsed to a 226px
   block at the BOTTOM of the hero while the headline was squeezed into a 149px
   column. The selector, not the markup, was the thing out of date.
   (No backticks in this block: the whole stylesheet is a JS template literal.) */
.phero>img,.phero>picture{position:absolute;inset:0;z-index:0}
.phero>img,.phero>picture>img{width:100%;height:100%;object-fit:cover;display:block}
.phero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,30,55,.34) 28%,rgba(8,30,55,.7) 100%),linear-gradient(125deg,rgba(6,182,212,.36),rgba(251,113,133,.3) 60%,rgba(251,191,36,.24));z-index:1}
.pherobody{position:relative;z-index:2;padding:38px 40px;color:#fff;width:100%}@media(max-width:600px){.pherobody{padding:24px}.phero{min-height:300px}}
.pheye{display:inline-flex;align-items:center;gap:8px;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:12px;letter-spacing:.5px;background:rgba(255,255,255,.2);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.3);padding:6px 15px;border-radius:30px}
.phero h1{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:clamp(34px,6vw,56px);line-height:1.05;letter-spacing:-1px;margin-top:14px;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.phero h1 em{font-style:normal;color:#FFE15D}
.phlead{max-width:640px;font-size:15.5px;color:rgba(255,255,255,.95);margin-top:10px;text-shadow:0 1px 10px rgba(0,0,0,.3)}
.phchips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.phchip{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:700;font-size:12.5px;color:#fff;background:rgba(255,255,255,.16);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.28);padding:8px 15px;border-radius:30px}
/* STICKY TABS */
.tabwrap{position:sticky;top:64px;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--bdr);margin-top:20px}
.tabbar{max-width:1120px;margin:0 auto;display:flex;gap:7px;padding:11px 28px;overflow-x:auto;scrollbar-width:none}.tabbar::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:14px;color:var(--sub);padding:11px 19px;border-radius:30px;cursor:pointer;border:2px solid transparent;white-space:nowrap;display:flex;align-items:center;gap:8px;transition:.2s;user-select:none}
.tab:hover{color:var(--bl-dk);background:var(--bl-lt)}
.tab.active{color:#fff;background:linear-gradient(135deg,var(--bl),var(--or));box-shadow:0 8px 18px rgba(6,182,212,.32)}
.tab .tc{font-family:'Outfit',sans-serif;font-size:11px;font-weight:800;background:rgba(15,23,42,.08);color:var(--sub);padding:1px 8px;border-radius:30px}.tab.active .tc{background:rgba(255,255,255,.3);color:#fff}
.panel{display:none}.panel.active{display:block;animation:pf .35s ease}@keyframes pf{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cwrap{max-width:1120px;margin:0 auto;padding:30px 28px 14px}
.pintro{font-size:15px;color:var(--sub);max-width:760px;margin:4px 0 22px}
.pnhead{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-size:26px;font-weight:500;letter-spacing:-.3px;margin:30px 0 6px}.pnhead:first-child{margin-top:4px}
.pnhead em{font-style:normal;background:linear-gradient(120deg,var(--bl) 10%,var(--or-dk) 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* CALLOUT */
.callout{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#ecfeff,#fff5f7);border:2px solid #cffafe;border-radius:24px;padding:24px 28px;margin-bottom:26px}
.callout h3{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:22px}.callout p{font-size:13.5px;color:var(--sub);margin-top:3px}
.callout a{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:13.5px;background:linear-gradient(135deg,var(--or),var(--go));color:#fff;padding:13px 24px;border-radius:30px;box-shadow:0 10px 22px rgba(251,113,133,.32);white-space:nowrap}
/* HOTEL CARDS */
.hgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:900px){.hgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.hgrid{grid-template-columns:1fr}}
.hcard{background:#fff;border:1px solid rgba(6,182,212,.08);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:.22s;display:flex;flex-direction:column}
.hcard:hover{transform:translateY(-6px);box-shadow:0 24px 54px rgba(251,113,133,.32)}
.hc-img{position:relative;height:180px;overflow:hidden;background:linear-gradient(135deg,#0891b2,#22d3ee 55%,#FB7185)}
.hc-img img{width:100%;height:100%;transition:transform .55s}.hcard:hover .hc-img img{transform:scale(1.07)}
.hc-score{position:absolute;top:12px;left:12px;background:linear-gradient(135deg,var(--go),#f59e0b);color:#fff;font-family:'Outfit',sans-serif;font-size:14px;font-weight:800;padding:5px 11px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.hc-body{padding:15px 18px 18px;display:flex;flex-direction:column;flex:1}
.hc-name{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:18px;line-height:1.2}
.hc-stars{color:var(--go);font-size:12px;letter-spacing:1px;margin:5px 0 2px}
.hc-type{font-size:12.5px;color:var(--sub)}.hc-loc{font-size:12px;color:var(--sub);margin-top:6px}
.hc-price{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:13px;color:var(--sub);margin:10px 0 12px}.hc-price b{color:var(--or-dk);font-size:16px;font-weight:800}
.hview{display:block;text-align:center;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:12.5px;color:var(--bl-dk);background:var(--bl-lt);padding:10px;border-radius:12px;margin-top:auto}.hview:hover{background:#cffafe}
.hbtns{display:flex;gap:7px;margin-top:8px}.hbtn{flex:1;text-align:center;font-family:'Outfit',sans-serif;font-weight:800;font-size:12px;padding:9px 4px;border-radius:11px;color:#fff}
.bk1{background:linear-gradient(135deg,var(--or),var(--or-dk))}.bk2{background:var(--bl)}.bk3{background:var(--ink)}
/* ARTICLE CARDS */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:760px){.dgrid{grid-template-columns:1fr 1fr}}@media(max-width:480px){.dgrid{grid-template-columns:1fr}}
.dcard{background:#fff;border:1px solid rgba(6,182,212,.08);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);transition:.22s;display:block}
.dcard:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(6,182,212,.28)}
.dphoto{height:160px;position:relative;background:linear-gradient(150deg,#06B6D4,#22d3ee 55%,#FBBF24)}.dphoto>img{position:absolute;inset:0;width:100%;height:100%;transition:transform .5s}.dcard:hover .dphoto>img{transform:scale(1.07)}
/* neighbourhood photo-cards (reference-style: emoji + name + descriptor overlaid on the photo) */
.hccg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
@media(max-width:880px){.hccg{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.hccg{grid-template-columns:1fr}}
.hcc{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(150deg,#0891b2,#22d3ee 55%,#FB7185);box-shadow:0 6px 20px rgba(8,40,60,.10)}
.hcc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s}
.hcc:hover>img{transform:scale(1.08)}
.hcc::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,20,30,.82),rgba(4,20,30,.12) 54%,rgba(4,20,30,0))}
.hcc-cap{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:13px 14px;color:#fff}
.hcc-e{font-size:18px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
.hcc-cap b{display:block;margin-top:5px;font-size:16px;font-weight:800;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hcc-cap i{display:block;margin-top:3px;font-size:12px;font-style:normal;font-weight:600;opacity:.93;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.hccmore{margin-top:16px}
.hccmore>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#0891b2;background:#ecfeff;border:1.5px solid #a5f0fb;border-radius:999px;padding:10px 22px;transition:background .2s}
.hccmore>summary::-webkit-details-marker{display:none}
.hccmore>summary:hover{background:#d6f7fd}
.hccmore[open]>summary{margin-bottom:16px}
/* per-area neighbourhood hub: quick-answer box + compact hotel list */
.quickbox{background:#f1fbfd;border:1px solid #cdeef5;border-left:4px solid #06B6D4;border-radius:14px;padding:14px 18px;font-size:15px;line-height:1.6;color:#0f172a;margin-top:6px}
.quickbox b{color:#0891b2}
.hl-list{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.hl-row{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid #e6eef2;border-radius:16px;padding:16px 18px;box-shadow:0 4px 14px rgba(8,40,60,.05)}
.hl-rank{flex:none;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#0891b2,#22d3ee);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:15px}
.hl-main{flex:1;min-width:0}
.hl-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hl-top h3{font-size:17px;font-weight:800;color:#0f172a}
.hl-star{color:#f59e0b;font-size:13px;letter-spacing:1px}
.hl-bf{font-size:12.5px;font-weight:700;color:#0891b2;margin-top:2px}
.hl-main>p{font-size:14px;line-height:1.55;color:#475569;margin-top:5px}
.hl-side{flex:none;text-align:right;display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.hl-price{font-weight:800;color:#0f172a;font-size:16px;white-space:nowrap}.hl-price small{display:block;font-size:11px;color:#94a3b8;font-weight:600}
.hl-book{background:linear-gradient(135deg,#FB7185,#f43f5e);color:#fff;font-weight:800;font-size:12.5px;padding:8px 13px;border-radius:10px;white-space:nowrap}
@media(max-width:560px){.hl-row{flex-wrap:wrap}.hl-side{flex-direction:row;width:100%;justify-content:space-between;align-items:center;text-align:left;margin-top:4px}.hl-price small{display:inline}}
.dbody{padding:15px 17px 17px}.dbody h3{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:17px;line-height:1.3}.dbody .go{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12.5px;font-weight:800;color:var(--bl);margin-top:10px;display:inline-block}.dcard:hover .dbody .go{color:var(--or-dk)}
/* HIGHLIGHT / FOOD / INFO / NEIGHBOR */
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:8px}@media(max-width:760px){.hl{grid-template-columns:1fr}}
.hlc{background:#fff;border:1px solid var(--bdr);border-radius:18px;padding:20px;box-shadow:var(--sh)}.hlc h3{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:16px;margin-bottom:5px}.hlc p{font-size:13.5px;color:var(--sub)}
.foodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:8px}@media(max-width:760px){.foodgrid{grid-template-columns:1fr 1fr}}
.fc{background:#fff;border:1px solid var(--bdr);border-radius:16px;padding:16px;box-shadow:var(--sh)}.fc h4{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:14px}.fc p{font-size:12.5px;color:var(--sub);margin-top:3px}
.eeat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}@media(max-width:760px){.eeat{grid-template-columns:1fr 1fr}}
.ecard{background:#fff;border:1px solid var(--bdr);border-radius:var(--r);padding:22px 20px;box-shadow:var(--sh);transition:.2s}.ecard:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(6,182,212,.2)}.ecard .ic{font-size:28px;margin-bottom:10px}.ecard h3{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:15px;margin-bottom:6px}.ecard p{font-size:13px;color:var(--sub)}
.ncards{display:flex;gap:12px;flex-wrap:wrap}.nc{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:700;font-size:13.5px;background:#fff;border:1px solid var(--bdr);border-radius:30px;padding:10px 18px}.nc:hover{border-color:var(--bl);color:var(--bl-dk)}
/* CTA BAND */
.cta-sec{padding:10px 28px 56px}
.ctaband{max-width:1120px;margin:0 auto;background:linear-gradient(135deg,#06B6D4 0%,#0aa2c0 32%,#f15a86 78%,#FB7185 100%);border-radius:26px;padding:46px;text-align:center;color:#fff;position:relative;overflow:hidden;box-shadow:0 22px 48px rgba(6,182,212,.3)}
.ctaband::after{content:'';position:absolute;top:-70px;right:-50px;width:240px;height:240px;background:radial-gradient(circle,rgba(251,191,36,.4),transparent 65%)}
.ctaband h2{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:30px;position:relative}.ctaband p{color:rgba(255,255,255,.92);margin:8px 0 22px;position:relative}
.ctaband a{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:14px;background:#fff;color:var(--bl-dk);padding:14px 30px;border-radius:30px;display:inline-block;position:relative;box-shadow:0 10px 24px rgba(8,30,55,.2)}
/* TEXT HERO (region/country) */
.thero{position:relative;overflow:hidden;background:linear-gradient(135deg,#06B6D4 0%,#0aa2c0 34%,#f15a86 82%,#FB7185 100%);padding:108px 28px 60px;text-align:center;color:#fff}
.thero::before{content:'';position:absolute;top:-90px;right:-60px;width:340px;height:340px;background:radial-gradient(circle,rgba(251,191,36,.4),transparent 64%)}
.thero .eyebrow{display:inline-block;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:12.5px;letter-spacing:.5px;background:rgba(255,255,255,.2);padding:7px 16px;border-radius:30px;position:relative}
.thero h1{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:clamp(32px,5.5vw,52px);line-height:1.06;margin-top:14px;position:relative;text-shadow:0 2px 20px rgba(0,0,0,.2)}
.thero h1 em{font-style:normal;color:#FFE15D}
.thero .lead{max-width:600px;margin:12px auto 0;font-size:15.5px;color:rgba(255,255,255,.95);position:relative}
.thero .chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;position:relative}
.thero .chip{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:700;font-size:12.5px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);padding:8px 15px;border-radius:30px}.thero .chip b{color:#FFE15D}
.sec{padding:50px 28px}.regsec{padding:34px 0;border-bottom:1px solid var(--bdr)}
.shead{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:10px}
.shead h2{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:28px}.shead h2 .em{background:linear-gradient(120deg,var(--bl),var(--or-dk));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.shead a{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:13px;font-weight:800;color:var(--or-dk);background:#fff1f3;padding:8px 16px;border-radius:30px}
.tagn{position:absolute;left:12px;top:12px;font-family:'Outfit',sans-serif;font-size:18px;z-index:2}
/* CITY STATS (overlap hero) */
.cstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:860px;margin:-44px auto 0;position:relative;z-index:5;padding:0 28px}@media(max-width:560px){.cstats{grid-template-columns:repeat(2,1fr)}}
.cstat{background:#fff;border:1px solid #eafaff;border-radius:14px;box-shadow:0 12px 30px rgba(6,182,212,.15);padding:18px 12px;text-align:center;position:relative;overflow:hidden}
.cstat::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--bl),var(--or),var(--go))}
.cstat .n{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:30px;line-height:1;background-image:linear-gradient(120deg,var(--bl),var(--or-dk));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cstat .l{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);margin-top:6px}
.updatepill{max-width:1120px;margin:16px auto 0;padding:0 28px}.updatepill span{display:inline-flex;align-items:center;gap:7px;background:var(--bl-lt);color:var(--bl-dk);font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12px;font-weight:600;padding:6px 14px;border-radius:30px}
/* INTRO */
.section{max-width:1120px;margin:0 auto;padding:46px 28px 8px}
.sh{text-align:center;margin-bottom:26px}.sh .slbl{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--or-dk);margin-bottom:6px}.sh h2{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:clamp(24px,4vw,32px)}.sh h2 em{font-style:normal;background:linear-gradient(120deg,var(--bl),var(--or-dk));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.sh p{font-size:14px;color:var(--sub);margin-top:8px;max-width:660px;margin-left:auto;margin-right:auto}
.introgrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}@media(max-width:740px){.introgrid{grid-template-columns:1fr;gap:26px}}
.introgrid .slbl{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--or-dk);margin-bottom:8px}
.introgrid h2{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:clamp(23px,3.4vw,31px);line-height:1.18}.introgrid h2 em{font-style:normal;background:linear-gradient(120deg,var(--bl),var(--or-dk));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.introgrid .ssub{font-size:14.5px;color:var(--sub);margin-top:10px;line-height:1.75}
.introbtn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--bl),var(--or));color:#fff;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:14px;padding:13px 24px;border-radius:30px;box-shadow:0 8px 20px rgba(6,182,212,.32);margin-top:18px}
.icards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.icard{border-radius:16px;padding:22px 18px}.icard .ie{font-size:28px;margin-bottom:8px}.icard h4{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:14px;margin-bottom:4px}.icard p{font-size:12.5px;color:var(--sub)}
.ic0{background:var(--bl-lt)}.ic1{background:var(--or-lt)}.ic2{background:#E9F7EF}.ic3{background:#F3E8FF}
/* EDITOR PICKS */
.ep-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}@media(max-width:1080px){.ep-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:680px){.ep-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:440px){.ep-grid{grid-template-columns:1fr}}
.ep-card{background:#fff;border:1px solid rgba(6,182,212,.08);border-radius:16px;overflow:hidden;transition:.22s;position:relative;display:flex;flex-direction:column}.ep-card:hover{transform:translateY(-5px);box-shadow:0 16px 34px rgba(251,113,133,.22)}
.ep-rank{position:absolute;top:10px;left:10px;background:linear-gradient(135deg,var(--or),var(--go));color:#fff;font-family:'Fraunces',serif;font-size:17px;font-weight:600;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(251,113,133,.45);z-index:2}
.ep-img{height:140px;overflow:hidden;background:linear-gradient(150deg,#06B6D4,#22d3ee 55%,#FBBF24)}.ep-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s}.ep-card:hover .ep-img img{transform:scale(1.08)}
.ep-body{padding:13px 14px 14px;flex:1;display:flex;flex-direction:column}.ep-title{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:15px;line-height:1.3;margin-bottom:5px}.ep-why{font-size:11.5px;color:var(--sub);line-height:1.5;margin-bottom:8px;flex:1}.ep-tag{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:10.5px;font-weight:700;color:var(--bl-dk);background:var(--bl-lt);padding:3px 9px;border-radius:20px;align-self:flex-start}
/* HOODS */
.hoodgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}@media(max-width:880px){.hoodgrid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.hoodgrid{grid-template-columns:1fr}}
.hood{border-radius:18px;padding:22px 20px;color:#fff;min-height:128px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden;box-shadow:0 10px 26px rgba(15,40,70,.1)}
.hood::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 8%,rgba(255,255,255,.2),transparent 60%)}
.hood h4{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:18px;position:relative;z-index:1}.hood p{font-size:12.5px;color:rgba(255,255,255,.93);margin-top:4px;position:relative;z-index:1}
.hg0{background:linear-gradient(150deg,#0891b2,#06d6e0)}.hg1{background:linear-gradient(150deg,#f15a86,#FB7185)}.hg2{background:linear-gradient(150deg,#0aa2c0,#22d3ee)}.hg3{background:linear-gradient(150deg,#fb923c,#FBBF24)}.hg4{background:linear-gradient(150deg,#0891b2,#FB7185)}.hg5{background:linear-gradient(150deg,#f43f5e,#fb923c)}
/* AFFILIATE */
.affgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}@media(max-width:760px){.affgrid{grid-template-columns:1fr}}
.affcard{background:#fff;border:1px solid var(--bdr);border-radius:18px;padding:24px 22px;text-align:center;box-shadow:var(--sh)}.affcard .adot{width:16px;height:16px;border-radius:50%;display:inline-block;margin-right:7px;vertical-align:-2px}.affcard .an{font-family:'Outfit',sans-serif;font-weight:800;font-size:16px;margin-bottom:6px}.affcard p{font-size:12.5px;color:var(--sub);margin-bottom:14px}.affcard a{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:13px;padding:11px 22px;border-radius:30px;transition:transform .15s,box-shadow .2s}
.affcard a:hover{transform:translateY(-2px)}
/* brand-accurate OTA buttons: Agoda #FF2938 (official red, Pantone 1795 C) · Booking #003580 · Trip #287DFA */
.affcard a.b-agoda{background:#FF2938;box-shadow:0 6px 16px rgba(255,41,56,.32)}.affcard a.b-booking{background:#003580;box-shadow:0 6px 16px rgba(0,53,128,.32)}.affcard a.b-trip{background:#287DFA;box-shadow:0 6px 16px rgba(40,125,250,.3)}
.affcard a .bkm{width:19px;height:19px;display:inline-flex;align-items:center;justify-content:center;background:#fff;font-family:'Outfit',sans-serif;font-weight:800;font-size:10.5px;line-height:1;flex-shrink:0}.affcard a .bkm.r{border-radius:50%}.affcard a .bkm.sq{border-radius:5px}
.affcard a.b-agoda .bkm{color:#FF2938}.affcard a.b-booking .bkm{color:#003580}.affcard a.b-trip .bkm{color:#287DFA}
/* SEO */
.seo{max-width:1120px;margin:0 auto;padding:8px 28px 40px}.seobox{background:var(--bl-lt);border-radius:20px;padding:28px 30px}.seobox h2{font-family:'Fraunces',-apple-system,'Noto Sans Thai',serif;font-weight:500;font-size:22px;margin-bottom:12px}.seobox p{font-size:14px;color:#334155;line-height:1.85;margin-bottom:10px}.seobox b{color:var(--ink)}
/* EXPERT-HUB ADDITIONS */
.qabox{max-width:1120px;margin:18px auto 0;padding:0 28px;display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
.qabox .qa{flex:1 1 150px;display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--bdr);border-radius:16px;padding:12px 16px;box-shadow:var(--sh)}
.qabox .qa-e{font-size:22px;flex-shrink:0}.qabox .qa b{font-family:'Outfit','Noto Sans Thai',sans-serif;font-size:11px;color:var(--mut);font-weight:700;display:block;text-transform:uppercase;letter-spacing:.3px}.qabox .qa p{font-size:13.5px;font-weight:600;color:var(--ink);margin-top:2px;line-height:1.35}
.qabox .qa-cta{flex:1 1 240px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:3px;background:linear-gradient(135deg,var(--bl),var(--or));color:#fff;font-family:'Outfit','Noto Sans Thai',sans-serif;border-radius:16px;padding:13px 20px;box-shadow:0 8px 20px rgba(6,182,212,.3)}
.qabox .qa-cta b{font-weight:800;font-size:15px;line-height:1.2}.qabox .qa-cta span{font-weight:500;font-size:11px;opacity:.92;line-height:1.35}
.seasgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:640px){.seasgrid{grid-template-columns:1fr}}
.seascard{background:#fff;border:1px solid var(--bdr);border-radius:16px;padding:16px 18px;box-shadow:var(--sh)}.seascard .seas-mo{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:14px;color:var(--bl-dk)}.seascard .seas-nm{font-weight:700;font-size:13px;color:var(--ink);margin:4px 0 6px}.seascard p{font-size:12.5px;color:var(--sub);line-height:1.6}
.seas-warn{margin-top:14px;background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;padding:14px 18px;font-size:13.5px;color:#9a3412;line-height:1.7}
.budgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}@media(max-width:640px){.budgrid{grid-template-columns:1fr}}
.budcard{background:var(--bl-lt);border-radius:16px;padding:18px;text-align:center}.budcard .bud-e{font-size:24px}.budcard .bud-nm{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:700;font-size:13px;color:var(--sub);margin:6px 0 4px}.budcard .bud-amt{font-family:'Outfit',sans-serif;font-weight:800;font-size:18px;color:var(--ink)}
.budnote{font-size:12px;color:var(--mut);margin-top:10px}
.cmap{width:100%;height:360px;border:1px solid var(--bdr);border-radius:20px;box-shadow:var(--sh)}@media(max-width:640px){.cmap{height:280px}}
/* The province map. .cmap-canvas keeps the same height as the iframe it
   replaces, and is reserved before Leaflet exists so revealing it moves
   nothing below. Logical properties only — he and ar render these pages. */
.cmap-lite{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:26px 20px;border:1px solid var(--bdr);border-radius:20px;background:linear-gradient(135deg,#ecfeff,#fff 60%,#fff5f7)}
.cmap-keys{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.cmap-key{display:inline-flex;align-items:center;gap:6px;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:12.5px;color:var(--sub)}
.cmap-key::before{content:'';inline-size:11px;block-size:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.cmap-k-s::before{background:#0891b2}.cmap-k-e::before{background:#f43f5e}.cmap-k-a::before{background:#f59e0b}
.cmap-go{min-block-size:44px;min-inline-size:44px;padding-inline:24px;border:0;border-radius:30px;cursor:pointer;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--bl),var(--bl-dk))}
.cmap-hint{font-size:12.5px;color:var(--sub)}
.cmap-canvas{width:100%;height:360px;border:1px solid var(--bdr);border-radius:20px;overflow:hidden;z-index:0}
@media(max-width:640px){.cmap-canvas{height:280px}}
.cpin{background:none!important;border:none!important}
.cpin span{display:block;inline-size:16px;block-size:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.maplink{display:inline-block;margin-top:12px;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:700;font-size:13px;color:var(--bl-dk)}
.klook{display:flex;align-items:center;justify-content:space-between;gap:22px;background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid #fed7aa;border-radius:22px;padding:24px 28px;box-shadow:0 10px 28px rgba(255,91,0,.12);margin-top:18px}@media(max-width:640px){.klook{flex-direction:column;text-align:center;padding:24px 20px}}
.klook .kl-t{font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:900;font-size:18px;color:#9a3412}.klook p{font-size:13.5px;color:#9a3412;opacity:.82;margin-top:5px;line-height:1.55}
.klook .kl-b{flex-shrink:0;display:inline-flex;align-items:center;gap:11px;background:linear-gradient(135deg,#ff7e1d,#ff5b00);color:#fff;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:800;font-size:16px;padding:16px 28px;border-radius:16px;white-space:nowrap;box-shadow:0 9px 22px rgba(255,91,0,.36);transition:transform .14s,box-shadow .14s}
.klook .kl-b:hover{transform:translateY(-2px);box-shadow:0 13px 30px rgba(255,91,0,.48)}
.klook .kl-b .kbadge{background:#fff;color:#ff5b00;font-weight:900;font-size:15px;letter-spacing:-.5px;border-radius:7px;padding:4px 10px;line-height:1}
.faqsec{max-width:900px;margin:0 auto;padding:46px 28px 8px}
.faqlist{display:flex;flex-direction:column;gap:10px}
.faqit{background:#fff;border:1px solid var(--bdr);border-radius:14px;box-shadow:var(--sh);overflow:hidden}
.faqit summary{cursor:pointer;list-style:none;padding:16px 20px;font-family:'Outfit','Noto Sans Thai',sans-serif;font-weight:700;font-size:15px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px}
.faqit summary::-webkit-details-marker{display:none}.faqit summary::after{content:'+';font-size:20px;color:var(--bl);font-weight:400;flex-shrink:0}.faqit[open] summary::after{content:'–'}
.faqit p{padding:0 20px 18px;font-size:14px;color:var(--sub);line-height:1.8}

/* ===========================================================================
   APP-SHELL ADJUSTMENTS (blueprint §4.0 · §4.1 · §4.3)
   New rules only, therefore LOGICAL PROPERTIES ONLY — these have to mirror for
   free under dir="rtl" on the he and ar hubs.
   ======================================================================== */
/* The old chrome was a 66px position:fixed .nav and every page cleared it with
   the breadcrumb's 84px block-start padding. shell.css reserves the topbar
   itself (.ta-main), so that hand-rolled offset now double-counts. */
.crumb{padding-block-start:12px}
/* The section tabs stick under the CONDENSED topbar, not under the old bar. */
.tabwrap{inset-block-start:var(--topbar-h,56px)}
/* Panel deep links with scripting off: /city-krabi#p-see has to show the See
   panel even when the tab script never runs. :target is the CSS half of what
   that script does at runtime, and the reason the in-page anchors now point at
   the real ids instead of the #see/#eat/#stay that match nothing.

   BOTH RULES ARE SCOPED TO .cwrap:not(.js-tabs) ON PURPOSE. The tab script
   writes the new panel id into the URL with history.replaceState, and
   replaceState does NOT move :target — it stays pinned to whatever the page
   was loaded with. Unscoped, the second rule then hides the panel the script
   just activated, so after landing on /city-krabi#p-eat (which is exactly what
   the footer links and Google's fragment results do) every tab click changed
   the pill and the URL and nothing else: the panel froze on Eat. The script
   adds .js-tabs to .cwrap once it has applied the hash, which hands the whole
   job to it; with scripting off the class never appears and :target still
   resolves the deep link. */
.cwrap:not(.js-tabs) .panel:target{display:block}
.cwrap:not(.js-tabs):has(.panel:target) .panel.active:not(:target){display:none}
/* Save-to-trip on a card. .ta-save in shell.css owns the look (🔖 plus a WORD,
   never a bare icon); these rules only place it. */
.hc-save{margin-block-start:10px;align-self:flex-start}
.hl-side .ta-save{white-space:nowrap}
/* The reset at the top of this file (*{margin:0;padding:0}) is why the next two
   rules exist. This stylesheet is unlayered, so it outranks every rule in
   @layer shell — including the shell own two structural boxes — and the reset
   was silently zeroing the bottom-edge contract (§4.3) and the topbar offset,
   which put the breadcrumb under the fixed topbar and the tab bar on top of the
   footer. revert-layer hands each property straight back to shell.css, so the
   contract still lives in ONE file; the calc() before it is the fallback for a
   browser that does not know revert-layer, and mirrors shell.css by token, not
   by value. */
body{padding-block-end:calc(var(--floor) + var(--cta-h) + var(--sp-4));padding-block-end:revert-layer}
.ta-main{padding-block-start:calc(var(--topbar-rest) + var(--safe-t));padding-block-start:revert-layer}
/* Two page widgets own a fixed bottom edge and predate the tab bar: #cv-bar,
   the currency switcher currency.js injects, and .ta-top, the back-to-top
   button premium-motion.js injects. Both used to sit above the old .mbar; with
   the shell they have to clear --floor, or they cover the tab bar controls —
   the currency pills sat exactly on top of Search, Trip and Menu. Both are
   styled from sheets injected after this one, hence the !important and the
   body-scoped selector; both use --floor, so they follow the bar. */
#cv-bar{inset-block-end:calc(var(--floor) + 12px)!important}
body .ta-top{inset-block-end:calc(var(--floor) + 16px)}