/* ═══════════════════════════════════════════════════════════════
   phrao.travel — ระบบดีไซน์ "หนึ่งวันในหุบเขา"
   ───────────────────────────────────────────────────────────────
   แนวคิด: พร้าวคือแอ่งที่ล้อมด้วยดอย และการเที่ยวพร้าวหนึ่งวัน
   คือการไต่จากผิวน้ำขึ้นไปยอดดอย หน้าเว็บจึงเปลี่ยนสีตามเวลา
   จากหมอกเช้าจนถึงฟ้ากลางคืน และใช้เส้นชั้นความสูงเป็นลายหลัก
   ═══════════════════════════════════════════════════════════════ */

:root{
  --card-r:10px;              /* มุมโค้งของการ์ดทุกชนิด */
  /* ระดับแสงตามเวลาในหนึ่งวัน */
  --t-dawn:#E4EDEE;
  --t-morning:#EFF3F0;
  --t-noon:#F8F6EE;
  --t-afternoon:#EADFCC;
  --t-dusk:#44515D;
  --t-night:#0E1620;

  --paper:#F5F7F5;
  --ink:#152E2B;
  --ink-soft:#4B6862;
  --ink-inv:#E7EFF1;
  --ink-inv-soft:rgba(231,239,241,.66);

  --pine:#2B554D;
  --water:#6D949A;
  --gold:#A8792F;
  --gold-lite:#E2BE80;

  --line:rgba(21,46,43,.13);
  --line-strong:rgba(21,46,43,.26);

  --rail:clamp(64px,10vw,132px);
  --pad:clamp(20px,5vw,72px);
  --max:1200px;

  --step:clamp(56px,8vw,104px);
}

*,*::before,*::after{box-sizing:border-box}

/* ═══ กันไอคอนขยายเกิน ═══════════════════════════════════════
   ถ้า CSS ส่วนอื่นโหลดไม่ทัน SVG ที่ไม่มีขนาดจะพองเต็มจอ
   กฎนี้เป็นตาข่ายกันไว้ชั้นสุดท้าย                              */
svg:not([width]):not(.hero-art){max-width:100%;max-height:100%}
.qbtn svg,.btn svg,.nav svg{flex:0 0 auto}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;
  font-weight:300;
  font-size:clamp(15px,1.05vw,17px);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* เกรนบางๆ ทั่วหน้า ให้ผิวสัมผัสไม่แบนเหมือนหน้าเว็บสำเร็จรูป */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img,svg,iframe{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.mono{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-weight:400;font-size:.7rem;
  letter-spacing:.15em;text-transform:uppercase;
}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.narrow{max-width:768px}

/* ── โซนสีเข้ม: สลับค่าตัวแปรแทนการเขียนสีซ้ำ ─────────────── */
.on-dark{
  --ink:var(--ink-inv);
  --ink-soft:var(--ink-inv-soft);
  --gold:var(--gold-lite);
  --water:rgba(231,239,241,.48);
  --line:rgba(255,255,255,.13);
  --line-strong:rgba(255,255,255,.24);
  color:var(--ink);
}

/* ── แถบบนสุด ───────────────────────────────────────────── */
.status{background:var(--t-night);padding:12px 0}
.status .wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.status .mono{font-size:.65rem;color:rgba(231,239,241,.6)}
.status strong{color:var(--gold-lite);font-weight:500}
.status a{text-decoration:none;transition:color .25s}
.status a:hover{color:var(--gold-lite)}


/* ═══ เมนูหลัก — ติดบนตลอด ═══════════════════════════════════ */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(245,247,245,.93);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max);margin:0 auto;padding-inline:var(--pad);
  display:flex;align-items:center;gap:clamp(12px,2.5vw,30px);
  min-height:60px;
}
.brand{
  font-family:"Chonburi",Georgia,serif;font-weight:400;
  font-size:clamp(1.24rem,2.4vw,1.5rem);color:var(--ink);
  text-decoration:none;line-height:1;flex-shrink:0;
  letter-spacing:-.005em;
}
.brand:hover{color:var(--pine)}

.nav-links{
  display:flex;align-items:center;gap:2px;
  margin-left:auto;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
}
.nav-links::-webkit-scrollbar{display:none}
.nav-links a{
  font-family:"IBM Plex Sans Thai",sans-serif;
  font-size:.9rem;font-weight:400;color:var(--ink-soft);
  text-decoration:none;white-space:nowrap;
  padding:9px 14px;border-radius:3px;
  transition:background .22s,color .22s;
}
.nav-links a:hover{background:var(--mist,#DCE6E7);color:var(--ink)}
.nav-links a[aria-current="page"]{
  color:var(--ink);font-weight:500;
  box-shadow:inset 0 -2px 0 var(--gold);
}
.nav-cta{
  flex-shrink:0;margin-left:6px;
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.11em;text-transform:uppercase;
  background:var(--ink);color:var(--ink-inv,#E7EFF1)!important;
  padding:10px 16px!important;border-radius:3px;
  transition:background .22s;
}
.nav-cta:hover{background:var(--pine);color:#fff!important}

@media (max-width:760px){
  .nav-in{min-height:54px;gap:10px;padding-inline:16px}
  /* กฎเมนูมือถือย้ายไปอยู่ในบล็อกด้านล่างแล้ว */
}

/* ═══ ปุ่มลัดใต้หน้าปก ═══════════════════════════════════════ */
.quick{background:var(--t-noon);border-bottom:1px solid var(--line)}
.quick .wrap{padding-block:clamp(28px,4vw,46px)}
.quick-lead{
  font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
  margin:0 0 18px;
}
.quick-grid{
  display:grid;gap:1px;background:var(--line-strong);
  border:1px solid var(--line-strong);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
/* 8 ปุ่ม — 4 คอลัมน์ 2 แถวพอดี */
@media (min-width:1000px){
  .quick-grid{grid-template-columns:repeat(4,1fr)}
}
.qbtn{
  background:var(--t-noon);padding:22px 20px 24px;
  text-decoration:none;display:block;position:relative;
  transition:background .26s;
}
.qbtn:hover{background:#FFFDF6}
.qbtn svg{width:26px;height:26px;margin-bottom:12px;display:block}
.qbtn b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:1.06rem;color:var(--ink);margin-bottom:5px;line-height:1.3;
}
.qbtn span{
  display:block;font-size:.82rem;color:var(--ink-soft);line-height:1.55;
}
.qbtn::after{
  content:"→";position:absolute;right:18px;top:22px;
  font-family:"IBM Plex Mono",monospace;color:var(--gold);
  opacity:0;transform:translateX(-5px);
  transition:opacity .26s,transform .26s;
}
.qbtn:hover::after{opacity:1;transform:translateX(0)}

@media (max-width:520px){
  .quick-grid{grid-template-columns:1fr 1fr}
  .qbtn{padding:18px 14px 20px}
  .qbtn b{font-size:.98rem}
  .qbtn span{display:none}
}

/* ═══ ปุ่มลอยกลับขึ้นบน ═══════════════════════════════════════ */
.totop{
  position:fixed;right:20px;bottom:20px;z-index:55;
  width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--ink-inv,#E7EFF1);
  border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .3s,transform .3s;
  transform:translateY(8px);
  font-size:15px;line-height:1;
}
.totop.on{opacity:.9;pointer-events:auto;transform:none}
.totop:hover{opacity:1}
@media (max-width:760px){.totop{right:14px;bottom:14px;width:40px;height:40px}}


/* ═══ ปุ่มเปิดเมนูบนมือถือ ═══════════════════════════════════════
   เดิมมือถือใช้เลื่อนแนวนอน ซึ่งคนไม่รู้ว่าเลื่อนได้
   และปุ่มบริการถ่ายภาพถูกซ่อนหายไปทั้งที่เป็นหน้าที่สำคัญที่สุด   */
.nav-toggle{
  display:none;margin-left:auto;align-items:center;gap:9px;
  background:none;border:1px solid var(--line-strong);border-radius:3px;
  padding:9px 14px;cursor:pointer;
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.86rem;font-weight:500;
  color:var(--ink);transition:border-color .22s,color .22s;
}
.nav-toggle:hover{border-color:var(--gold);color:var(--gold)}
.nav-bars{display:flex;flex-direction:column;gap:4px;width:17px}
.nav-bars i{
  display:block;height:1.6px;background:currentColor;border-radius:2px;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .2s;
}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(1){transform:translateY(5.6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars i:nth-child(3){transform:translateY(-5.6px) rotate(-45deg)}

@media (max-width:860px){
  .nav-in{min-height:54px;gap:10px;padding-inline:16px;position:relative}
  .nav-toggle{display:inline-flex}

  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    display:block;margin:0;padding:6px 0 10px;
    background:var(--paper);
    border-bottom:1px solid var(--line-strong);
    box-shadow:0 18px 40px rgba(11,18,26,.14);
    max-height:0;overflow:hidden;
    opacity:0;visibility:hidden;
    transition:max-height .34s cubic-bezier(.22,1,.36,1),opacity .26s,visibility .26s;
    -webkit-mask-image:none;mask-image:none;
  }
  .nav-links.open{max-height:80vh;overflow-y:auto;opacity:1;visibility:visible}

  .nav-links a{
    display:block;font-size:.98rem;padding:13px 20px;
    border-bottom:1px solid var(--line);
    border-radius:0;
  }
  .nav-links a:last-child{border-bottom:0}
  .nav-links a[aria-current="page"]{
    background:var(--t-dawn);color:var(--gold);
    box-shadow:inset 3px 0 0 var(--gold);
  }
  .nav-links a[aria-current="page"]::after{display:none}

  /* ปุ่มบริการถ่ายภาพ — แสดงเสมอ และเด่นที่สุดในเมนู */
  .nav-links .nav-cta{
    display:block;margin:10px 16px 4px;
    background:var(--pine);color:#fff;
    border:0;border-radius:3px;text-align:center;
    padding:14px 20px;font-weight:500;
  }
  .nav-links .nav-cta:hover{background:var(--ink);color:#fff}
}

/* ม่านหลังเมนู กันไม่ให้กดโดนเนื้อหาข้างหลัง */
.nav-scrim{
  position:fixed;inset:0;z-index:14;
  background:rgba(11,18,26,.32);
  opacity:0;pointer-events:none;transition:opacity .3s;
}
.nav-scrim.on{opacity:1;pointer-events:auto}

@media (prefers-reduced-motion:reduce){
  .nav-links,.nav-bars i,.nav-scrim{transition:none}
}

/* ── เบรดครัมบ์ ─────────────────────────────────────────── */
.crumb{border-bottom:1px solid var(--line);background:var(--paper)}
.nav + .crumb .wrap{padding-block:14px}
.crumb .wrap{padding-block:16px}
.crumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.crumb li{font-family:"IBM Plex Mono",monospace;font-size:.63rem;letter-spacing:.11em;text-transform:uppercase;color:var(--water)}
.crumb li+li::before{content:"·";margin-right:9px;color:var(--line-strong)}
.crumb a{text-decoration:none;color:var(--pine);transition:color .25s}
.crumb a:hover{color:var(--gold)}
.crumb [aria-current]{color:var(--ink)}

/* ═══ HERO หน้าแรก ═══════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#EDF3F3 0%,var(--t-dawn) 58%,#CBD9DA 100%);
}
.hero-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-inner{
  position:relative;
  padding-block:clamp(64px,12vh,132px) clamp(150px,26vh,308px);
}
.eyebrow{display:inline-flex;align-items:center;gap:12px;color:var(--pine);margin-bottom:30px}
.eyebrow::before{content:"";width:38px;height:1px;background:var(--gold)}

/* ตัวอักษรหลักของแบรนด์ — ใช้ Chonburi ที่เดียวในทั้งเว็บ */
.wordmark{
  font-family:"Chonburi",Georgia,serif;font-weight:400;
  font-size:clamp(3.6rem,13vw,9.5rem);
  line-height:.86;letter-spacing:-.012em;
  margin:0;color:var(--ink);
}
.wordmark span{
  display:block;font-family:"IBM Plex Mono",monospace;
  font-size:clamp(.66rem,1.5vw,.82rem);font-weight:400;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--pine);margin-top:clamp(14px,2vw,22px);padding-left:.28em;
  /* ชื่อเต็มบางแห่งยาว ต้องเผื่อระยะบรรทัดไม่ให้ซ้อนกัน */
  line-height:1.85;max-width:34ch;
}
.on-dark .wordmark span{color:var(--gold-lite,#E2BE80);opacity:.9}
.wordmark.cat{
  font-family:"Trirong",Georgia,serif;font-weight:800;
  font-size:clamp(2.1rem,5.6vw,4rem);line-height:1.08;letter-spacing:-.026em;
}
.has-video .toc{margin-top:clamp(22px,3vw,32px)}
.has-video .toc a{
  border-color:rgba(255,255,255,.28);color:rgba(231,239,241,.86);
  background:rgba(14,22,32,.3);backdrop-filter:blur(6px);
}
.has-video .toc a:hover{border-color:var(--gold-lite,#E2BE80);color:var(--gold-lite,#E2BE80)}
.motto{
  max-width:33ch;font-family:"Trirong",Georgia,serif;font-weight:400;
  font-size:clamp(1.04rem,2.1vw,1.4rem);line-height:1.78;
  color:var(--pine);margin:clamp(30px,4vw,44px) 0 0;
  border-left:2px solid var(--gold);padding-left:22px;
}
.motto span{
  display:block;font-size:.68em;margin-top:14px;color:var(--water);
  font-family:"IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
}

/* พิกัดมุมล่างของ hero */
.hero-coord{
  position:absolute;left:var(--pad);bottom:clamp(24px,4vw,44px);
  display:flex;gap:clamp(18px,4vw,48px);flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--pine);opacity:.62;
}


/* ── หน้าปกวิดีโอ ────────────────────────────────────────── */
.hero.has-video{background:var(--t-night)}
.hero-video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
  border:0;pointer-events:none;
}
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,rgba(11,18,26,.88) 0%,rgba(11,18,26,.7) 34%,
                    rgba(11,18,26,.34) 66%,rgba(11,18,26,.5) 100%),
    linear-gradient(180deg,rgba(11,18,26,.5) 0%,transparent 26%,
                    transparent 62%,rgba(11,18,26,.62) 100%);
}
/* ลายเส้นชั้นความสูงกลับสีเป็นเส้นสว่างเมื่อวางบนวิดีโอ */
.has-video .hero-decor{display:none}
.has-video .hero-art{opacity:.55;mix-blend-mode:screen}
.has-video .hero-art .contour{stroke:#E7EFF1;opacity:.3}
.has-video .hero-art line{stroke:#E7EFF1;opacity:.18}

.has-video .wordmark{color:var(--ink-inv);text-shadow:0 2px 26px rgba(11,18,26,.5)}
.has-video .wordmark span{color:var(--gold-lite)}
.has-video .eyebrow{color:var(--gold-lite)}
.has-video .wordmark.cat{
  font-family:"Trirong",Georgia,serif;font-weight:800;
  font-size:clamp(2.1rem,5.6vw,4rem);line-height:1.08;letter-spacing:-.026em;
}
.has-video .toc{margin-top:clamp(22px,3vw,32px)}
.has-video .toc a{
  border-color:rgba(255,255,255,.28);color:rgba(231,239,241,.86);
  background:rgba(14,22,32,.3);backdrop-filter:blur(6px);
}
.has-video .toc a:hover{border-color:var(--gold-lite,#E2BE80);color:var(--gold-lite,#E2BE80)}
.motto{color:var(--ink-inv);border-left-color:var(--gold-lite)}
.has-video .motto span{color:rgba(231,239,241,.6)}
.has-video .hero-coord{color:rgba(231,239,241,.62);opacity:1}
.page-hero.has-video .hero-coord{z-index:2}
.has-video .hero-inner{padding-block:clamp(76px,14vh,150px) clamp(120px,22vh,258px)}

/* มือถือ: วิดีโอเล่นได้เหมือนกัน ปรับแค่ม่านให้อ่านง่ายขึ้น */
@media (max-width:700px){
  .hero-scrim{background:
    linear-gradient(180deg,rgba(11,18,26,.62) 0%,rgba(11,18,26,.4) 40%,rgba(11,18,26,.78) 100%)}
}


/* ── ปุ่มเล่นวิดีโอเอง ใช้เมื่อไม่เล่นอัตโนมัติ ───────────── */
.hero-play{
  position:absolute;left:50%;bottom:clamp(74px,12vh,140px);
  transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:10px;
  padding:13px 22px;border-radius:999px;cursor:pointer;
  background:rgba(14,22,32,.72);color:#E7EFF1;
  border:1px solid rgba(255,255,255,.28);
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.88rem;font-weight:400;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .24s,border-color .24s;
  z-index:3;
}
.hero-play:hover{background:rgba(14,22,32,.9);border-color:var(--gold-lite,#E2BE80)}
.hero-play svg{flex-shrink:0}
@media (max-width:640px){
  .hero-play{bottom:auto;top:50%;margin-top:-22px;font-size:.84rem;padding:11px 18px}
}

/* ── HERO หน้าย่อย ──────────────────────────────────────── */
.page-hero{background:var(--t-dawn);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero .wrap{
  position:relative;
  padding-block:clamp(46px,7vw,88px) clamp(42px,6vw,76px);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(28px,5vw,66px);align-items:center;
}
.page-hero .mono{color:var(--gold);display:block;margin-bottom:15px}
.page-hero h1{
  font-family:"Trirong",Georgia,serif;font-weight:800;
  font-size:clamp(2.1rem,5.8vw,3.9rem);line-height:1.1;
  letter-spacing:-.026em;margin:0;
}
.page-hero .lede{margin:22px 0 0;color:var(--ink-soft);font-size:clamp(1rem,1.7vw,1.14rem)}


/* ลายเส้นชั้นความสูงบนหัวของหน้าย่อย ให้เป็นภาษาเดียวกับหน้าแรก */
.page-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201440%20330'%20preserveAspectRatio='none'%3E%3Cpath%20d='M-40.0,18.1C-33.7,18.5%20-14.7,19.7%20-2.0,20.5C10.7,21.3%2023.3,22.2%2036.0,22.8C48.7,23.3%2061.3,23.7%2074.0,23.6C86.7,23.6%2099.3,23.1%20112.0,22.5C124.7,21.8%20137.3,20.6%20150.0,19.5C162.7,18.4%20175.3,17.0%20188.0,15.9C200.7,14.8%20213.3,13.6%20226.0,12.8C238.7,12.0%20251.3,11.4%20264.0,11.0C276.7,10.6%20289.3,10.5%20302.0,10.4C314.7,10.2%20327.3,10.3%20340.0,10.1C352.7,9.9%20365.3,9.7%20378.0,9.1C390.7,8.5%20403.3,7.7%20416.0,6.8C428.7,5.8%20441.3,4.5%20454.0,3.3C466.7,2.2%20479.3,0.8%20492.0,-0.2C504.7,-1.2%20517.3,-2.2%20530.0,-2.7C542.7,-3.1%20555.3,-3.3%20568.0,-3.1C580.7,-2.9%20593.3,-2.3%20606.0,-1.6C618.7,-0.9%20631.3,0.1%20644.0,0.9C656.7,1.7%20669.3,2.7%20682.0,3.2C694.7,3.7%20707.3,4.1%20720.0,4.1C732.7,4.1%20745.3,3.8%20758.0,3.4C770.7,3.0%20783.3,2.2%20796.0,1.7C808.7,1.2%20821.3,0.5%20834.0,0.1C846.7,-0.2%20859.3,-0.4%20872.0,-0.4C884.7,-0.3%20897.3,0.0%20910.0,0.4C922.7,0.8%20935.3,1.5%20948.0,1.9C960.7,2.4%20973.3,2.9%20986.0,3.0C998.7,3.1%201011.3,3.0%201024.0,2.6C1036.7,2.2%201049.3,1.4%201062.0,0.6C1074.7,-0.3%201087.3,-1.5%201100.0,-2.5C1112.7,-3.5%201125.3,-4.7%201138.0,-5.4C1150.7,-6.1%201163.3,-6.7%201176.0,-6.8C1188.7,-6.9%201201.3,-6.6%201214.0,-6.0C1226.7,-5.4%201239.3,-4.4%201252.0,-3.4C1264.7,-2.4%201277.3,-1.1%201290.0,-0.0C1302.7,1.0%201315.3,2.1%201328.0,2.9C1340.7,3.8%201353.3,4.4%201366.0,4.8C1378.7,5.3%201391.3,5.5%201404.0,5.9C1416.7,6.2%201429.3,6.4%201442.0,7.0C1454.7,7.5%201473.7,8.7%201480.0,9.1'%20fill='none'%20stroke='%232B554D'%20stroke-width='1.30'%20opacity='0.340'/%3E%3Cpath%20d='M-40.0,57.8C-33.7,57.6%20-14.7,56.8%20-2.0,56.6C10.7,56.4%2023.3,56.6%2036.0,56.7C48.7,56.8%2061.3,57.3%2074.0,57.5C86.7,57.7%2099.3,58.0%20112.0,57.8C124.7,57.6%20137.3,57.2%20150.0,56.3C162.7,55.4%20175.3,54.0%20188.0,52.4C200.7,50.8%20213.3,48.6%20226.0,46.6C238.7,44.6%20251.3,42.3%20264.0,40.4C276.7,38.5%20289.3,36.7%20302.0,35.4C314.7,34.1%20327.3,33.1%20340.0,32.6C352.7,32.1%20365.3,32.1%20378.0,32.2C390.7,32.3%20403.3,32.8%20416.0,33.1C428.7,33.4%20441.3,33.9%20454.0,34.0C466.7,34.1%20479.3,34.0%20492.0,33.8C504.7,33.5%20517.3,32.9%20530.0,32.4C542.7,31.9%20555.3,31.2%20568.0,30.7C580.7,30.3%20593.3,29.9%20606.0,29.9C618.7,29.9%20631.3,30.2%20644.0,30.8C656.7,31.4%20669.3,32.4%20682.0,33.3C694.7,34.3%20707.3,35.6%20720.0,36.5C732.7,37.3%20745.3,38.2%20758.0,38.6C770.7,38.9%20783.3,39.0%20796.0,38.5C808.7,38.1%20821.3,37.1%20834.0,35.9C846.7,34.8%20859.3,33.1%20872.0,31.6C884.7,30.2%20897.3,28.5%20910.0,27.2C922.7,26.0%20935.3,24.8%20948.0,24.0C960.7,23.3%20973.3,23.0%20986.0,22.8C998.7,22.6%201011.3,22.9%201024.0,23.0C1036.7,23.1%201049.3,23.5%201062.0,23.6C1074.7,23.7%201087.3,23.7%201100.0,23.5C1112.7,23.3%201125.3,22.8%201138.0,22.3C1150.7,21.8%201163.3,21.0%201176.0,20.5C1188.7,20.1%201201.3,19.6%201214.0,19.6C1226.7,19.7%201239.3,20.0%201252.0,20.8C1264.7,21.7%201277.3,23.1%201290.0,24.8C1302.7,26.4%201315.3,28.7%201328.0,30.9C1340.7,33.1%201353.3,35.6%201366.0,37.8C1378.7,39.9%201391.3,42.1%201404.0,43.8C1416.7,45.5%201429.3,46.9%201442.0,47.9C1454.7,48.9%201473.7,49.6%201480.0,50.0'%20fill='none'%20stroke='%232B554D'%20stroke-width='1.24'%20opacity='0.323'/%3E%3Cpath%20d='M-40.0,101.9C-33.7,101.2%20-14.7,99.2%20-2.0,97.5C10.7,95.8%2023.3,93.7%2036.0,91.9C48.7,90.1%2061.3,88.3%2074.0,86.9C86.7,85.4%2099.3,84.3%20112.0,83.4C124.7,82.5%20137.3,81.9%20150.0,81.3C162.7,80.7%20175.3,80.4%20188.0,79.6C200.7,78.9%20213.3,78.2%20226.0,77.0C238.7,75.9%20251.3,74.4%20264.0,72.8C276.7,71.2%20289.3,69.2%20302.0,67.5C314.7,65.7%20327.3,63.8%20340.0,62.4C352.7,61.0%20365.3,59.8%20378.0,59.3C390.7,58.7%20403.3,58.7%20416.0,59.2C428.7,59.6%20441.3,60.8%20454.0,61.9C466.7,63.1%20479.3,64.8%20492.0,66.2C504.7,67.5%20517.3,69.0%20530.0,69.9C542.7,70.8%20555.3,71.5%20568.0,71.7C580.7,71.9%20593.3,71.5%20606.0,71.0C618.7,70.6%20631.3,69.6%20644.0,68.8C656.7,68.0%20669.3,66.9%20682.0,66.2C694.7,65.6%20707.3,65.0%20720.0,64.7C732.7,64.4%20745.3,64.5%20758.0,64.4C770.7,64.4%20783.3,64.7%20796.0,64.6C808.7,64.5%20821.3,64.5%20834.0,63.8C846.7,63.2%20859.3,62.3%20872.0,61.0C884.7,59.6%20897.3,57.7%20910.0,55.8C922.7,53.9%20935.3,51.5%20948.0,49.6C960.7,47.6%20973.3,45.4%20986.0,44.0C998.7,42.5%201011.3,41.3%201024.0,40.8C1036.7,40.3%201049.3,40.5%201062.0,41.0C1074.7,41.5%201087.3,42.7%201100.0,43.9C1112.7,45.1%201125.3,46.8%201138.0,48.2C1150.7,49.6%201163.3,51.0%201176.0,52.2C1188.7,53.3%201201.3,54.3%201214.0,55.1C1226.7,55.9%201239.3,56.3%201252.0,57.0C1264.7,57.7%201277.3,58.2%201290.0,59.1C1302.7,60.1%201315.3,61.2%201328.0,62.8C1340.7,64.3%201353.3,66.3%201366.0,68.5C1378.7,70.6%201391.3,73.3%201404.0,75.7C1416.7,78.1%201429.3,80.8%201442.0,82.9C1454.7,85.0%201473.7,87.4%201480.0,88.2'%20fill='none'%20stroke='%232B554D'%20stroke-width='1.18'%20opacity='0.305'/%3E%3Cpath%20d='M-40.0,135.5C-33.7,135.1%20-14.7,134.5%20-2.0,133.2C10.7,132.0%2023.3,130.0%2036.0,127.9C48.7,125.7%2061.3,122.8%2074.0,120.1C86.7,117.4%2099.3,114.3%20112.0,111.8C124.7,109.4%20137.3,106.9%20150.0,105.2C162.7,103.4%20175.3,102.2%20188.0,101.5C200.7,100.7%20213.3,100.7%20226.0,100.7C238.7,100.7%20251.3,101.3%20264.0,101.5C276.7,101.8%20289.3,102.2%20302.0,102.3C314.7,102.3%20327.3,102.1%20340.0,101.7C352.7,101.3%20365.3,100.4%20378.0,99.7C390.7,99.0%20403.3,98.0%20416.0,97.5C428.7,97.0%20441.3,96.5%20454.0,96.6C466.7,96.6%20479.3,97.1%20492.0,97.9C504.7,98.7%20517.3,100.1%20530.0,101.3C542.7,102.5%20555.3,104.1%20568.0,105.1C580.7,106.2%20593.3,107.2%20606.0,107.5C618.7,107.7%20631.3,107.5%20644.0,106.7C656.7,105.8%20669.3,104.2%20682.0,102.4C694.7,100.6%20707.3,98.0%20720.0,95.8C732.7,93.5%20745.3,90.9%20758.0,88.9C770.7,86.8%20783.3,84.9%20796.0,83.5C808.7,82.0%20821.3,81.1%20834.0,80.4C846.7,79.7%20859.3,79.5%20872.0,79.1C884.7,78.8%20897.3,78.7%20910.0,78.3C922.7,77.9%20935.3,77.3%20948.0,76.6C960.7,75.8%20973.3,74.6%20986.0,73.5C998.7,72.4%201011.3,71.0%201024.0,70.1C1036.7,69.1%201049.3,68.2%201062.0,67.9C1074.7,67.7%201087.3,67.9%201100.0,68.8C1112.7,69.7%201125.3,71.3%201138.0,73.2C1150.7,75.2%201163.3,77.9%201176.0,80.5C1188.7,83.1%201201.3,86.2%201214.0,88.8C1226.7,91.3%201239.3,93.9%201252.0,95.9C1264.7,97.8%201277.3,99.3%201290.0,100.5C1302.7,101.6%201315.3,102.1%201328.0,102.7C1340.7,103.2%201353.3,103.3%201366.0,103.8C1378.7,104.2%201391.3,104.6%201404.0,105.4C1416.7,106.2%201429.3,107.3%201442.0,108.6C1454.7,109.9%201473.7,112.5%201480.0,113.2'%20fill='none'%20stroke='%232B554D'%20stroke-width='1.11'%20opacity='0.288'/%3E%3Cpath%20d='M-40.0,157.5C-33.7,157.2%20-14.7,156.3%20-2.0,155.9C10.7,155.4%2023.3,155.3%2036.0,154.8C48.7,154.2%2061.3,153.5%2074.0,152.3C86.7,151.2%2099.3,149.6%20112.0,147.7C124.7,145.9%20137.3,143.6%20150.0,141.5C162.7,139.4%20175.3,137.1%20188.0,135.4C200.7,133.7%20213.3,132.2%20226.0,131.4C238.7,130.7%20251.3,130.6%20264.0,131.0C276.7,131.3%20289.3,132.5%20302.0,133.7C314.7,134.8%20327.3,136.6%20340.0,137.9C352.7,139.2%20365.3,140.6%20378.0,141.3C390.7,142.0%20403.3,142.4%20416.0,142.2C428.7,142.0%20441.3,141.2%20454.0,140.2C466.7,139.3%20479.3,137.7%20492.0,136.4C504.7,135.2%20517.3,133.7%20530.0,132.7C542.7,131.7%20555.3,130.9%20568.0,130.4C580.7,129.9%20593.3,129.9%20606.0,129.8C618.7,129.7%20631.3,130.1%20644.0,129.8C656.7,129.6%20669.3,129.5%20682.0,128.6C694.7,127.7%20707.3,126.4%20720.0,124.6C732.7,122.8%20745.3,120.3%20758.0,117.8C770.7,115.3%20783.3,112.1%20796.0,109.5C808.7,106.8%20821.3,104.0%20834.0,102.0C846.7,100.0%20859.3,98.3%20872.0,97.4C884.7,96.5%20897.3,96.4%20910.0,96.7C922.7,97.0%20935.3,98.1%20948.0,99.1C960.7,100.1%20973.3,101.7%20986.0,102.9C998.7,104.0%201011.3,105.2%201024.0,106.0C1036.7,106.8%201049.3,107.2%201062.0,107.5C1074.7,107.8%201087.3,107.6%201100.0,107.7C1112.7,107.9%201125.3,107.8%201138.0,108.3C1150.7,108.8%201163.3,109.5%201176.0,110.8C1188.7,112.1%201201.3,114.0%201214.0,116.1C1226.7,118.2%201239.3,121.0%201252.0,123.5C1264.7,126.0%201277.3,128.8%201290.0,131.0C1302.7,133.2%201315.3,135.3%201328.0,136.6C1340.7,137.9%201353.3,138.6%201366.0,138.9C1378.7,139.2%201391.3,138.7%201404.0,138.3C1416.7,137.9%201429.3,137.0%201442.0,136.5C1454.7,136.0%201473.7,135.8%201480.0,135.6'%20fill='none'%20stroke='%232B554D'%20stroke-width='1.05'%20opacity='0.270'/%3E%3Cpath%20d='M-40.0,186.4C-33.7,185.5%20-14.7,182.0%20-2.0,180.7C10.7,179.3%2023.3,178.6%2036.0,178.4C48.7,178.2%2061.3,178.8%2074.0,179.3C86.7,179.8%2099.3,180.9%20112.0,181.5C124.7,182.1%20137.3,182.7%20150.0,182.7C162.7,182.7%20175.3,182.3%20188.0,181.5C200.7,180.7%20213.3,179.2%20226.0,177.9C238.7,176.6%20251.3,174.7%20264.0,173.5C276.7,172.2%20289.3,170.9%20302.0,170.2C314.7,169.6%20327.3,169.4%20340.0,169.6C352.7,169.8%20365.3,170.7%20378.0,171.4C390.7,172.1%20403.3,173.4%20416.0,174.0C428.7,174.6%20441.3,175.3%20454.0,175.1C466.7,174.9%20479.3,174.2%20492.0,172.8C504.7,171.5%20517.3,169.3%20530.0,167.0C542.7,164.7%20555.3,161.7%20568.0,159.1C580.7,156.5%20593.3,153.5%20606.0,151.4C618.7,149.2%20631.3,147.3%20644.0,146.0C656.7,144.7%20669.3,144.0%20682.0,143.5C694.7,143.1%20707.3,143.3%20720.0,143.2C732.7,143.1%20745.3,143.3%20758.0,143.0C770.7,142.7%20783.3,142.1%20796.0,141.2C808.7,140.2%20821.3,138.7%20834.0,137.2C846.7,135.7%20859.3,133.6%20872.0,132.1C884.7,130.6%20897.3,128.9%20910.0,128.1C922.7,127.2%20935.3,126.7%20948.0,127.0C960.7,127.3%20973.3,128.4%20986.0,129.8C998.7,131.2%201011.3,133.5%201024.0,135.5C1036.7,137.5%201049.3,140.1%201062.0,141.9C1074.7,143.7%201087.3,145.5%201100.0,146.6C1112.7,147.7%201125.3,148.2%201138.0,148.4C1150.7,148.6%201163.3,148.0%201176.0,147.6C1188.7,147.2%201201.3,146.4%201214.0,146.1C1226.7,145.8%201239.3,145.6%201252.0,146.0C1264.7,146.5%201277.3,147.4%201290.0,148.7C1302.7,150.1%201315.3,152.1%201328.0,154.0C1340.7,155.9%201353.3,158.3%201366.0,160.2C1378.7,162.1%201391.3,164.0%201404.0,165.3C1416.7,166.5%201429.3,167.3%201442.0,167.8C1454.7,168.3%201473.7,168.0%201480.0,168.1'%20fill='none'%20stroke='%232B554D'%20stroke-width='0.99'%20opacity='0.253'/%3E%3Cpath%20d='M-40.0,228.1C-33.7,227.4%20-14.7,225.0%20-2.0,223.4C10.7,221.7%2023.3,219.6%2036.0,218.2C48.7,216.8%2061.3,215.6%2074.0,215.0C86.7,214.5%2099.3,214.5%20112.0,215.0C124.7,215.4%20137.3,216.6%20150.0,217.6C162.7,218.6%20175.3,220.1%20188.0,220.9C200.7,221.6%20213.3,222.4%20226.0,222.2C238.7,222.0%20251.3,221.2%20264.0,219.9C276.7,218.5%20289.3,216.2%20302.0,213.9C314.7,211.6%20327.3,208.5%20340.0,206.0C352.7,203.5%20365.3,200.7%20378.0,198.7C390.7,196.8%20403.3,195.2%20416.0,194.1C428.7,193.1%20441.3,192.7%20454.0,192.4C466.7,192.2%20479.3,192.5%20492.0,192.4C504.7,192.3%20517.3,192.3%20530.0,191.7C542.7,191.0%20555.3,190.0%20568.0,188.4C580.7,186.9%20593.3,184.6%20606.0,182.4C618.7,180.1%20631.3,177.2%20644.0,174.9C656.7,172.5%20669.3,170.0%20682.0,168.4C694.7,166.7%20707.3,165.5%20720.0,165.0C732.7,164.6%20745.3,164.9%20758.0,165.6C770.7,166.2%20783.3,167.7%20796.0,168.8C808.7,170.0%20821.3,171.6%20834.0,172.4C846.7,173.3%20859.3,174.0%20872.0,174.0C884.7,174.1%20897.3,173.5%20910.0,172.6C922.7,171.7%20935.3,170.1%20948.0,168.8C960.7,167.6%20973.3,165.9%20986.0,164.9C998.7,163.9%201011.3,163.1%201024.0,163.1C1036.7,163.0%201049.3,163.6%201062.0,164.5C1074.7,165.4%201087.3,167.0%201100.0,168.5C1112.7,169.9%201125.3,171.8%201138.0,173.1C1150.7,174.3%201163.3,175.5%201176.0,176.0C1188.7,176.5%201201.3,176.5%201214.0,176.1C1226.7,175.7%201239.3,174.6%201252.0,173.9C1264.7,173.1%201277.3,171.8%201290.0,171.4C1302.7,171.0%201315.3,170.7%201328.0,171.4C1340.7,172.0%201353.3,173.4%201366.0,175.4C1378.7,177.4%201391.3,180.3%201404.0,183.3C1416.7,186.3%201429.3,190.1%201442.0,193.4C1454.7,196.7%201473.7,201.4%201480.0,203.0'%20fill='none'%20stroke='%232B554D'%20stroke-width='0.93'%20opacity='0.235'/%3E%3Cpath%20d='M-40.0,268.0C-33.7,268.5%20-14.7,270.9%20-2.0,271.3C10.7,271.8%2023.3,271.6%2036.0,270.7C48.7,269.9%2061.3,268.1%2074.0,266.3C86.7,264.5%2099.3,261.9%20112.0,259.8C124.7,257.7%20137.3,255.5%20150.0,253.9C162.7,252.3%20175.3,251.0%20188.0,250.2C200.7,249.3%20213.3,249.2%20226.0,248.8C238.7,248.5%20251.3,248.6%20264.0,248.1C276.7,247.5%20289.3,247.0%20302.0,245.6C314.7,244.2%20327.3,242.2%20340.0,239.7C352.7,237.3%20365.3,233.9%20378.0,230.7C390.7,227.5%20403.3,223.6%20416.0,220.5C428.7,217.3%20441.3,214.1%20454.0,211.9C466.7,209.7%20479.3,208.1%20492.0,207.3C504.7,206.5%20517.3,206.7%20530.0,207.1C542.7,207.6%20555.3,208.9%20568.0,209.9C580.7,210.9%20593.3,212.3%20606.0,212.9C618.7,213.5%20631.3,214.0%20644.0,213.7C656.7,213.4%20669.3,212.5%20682.0,211.3C694.7,210.2%20707.3,208.3%20720.0,206.8C732.7,205.3%20745.3,203.4%20758.0,202.3C770.7,201.2%20783.3,200.4%20796.0,200.2C808.7,200.0%20821.3,200.5%20834.0,201.2C846.7,201.9%20859.3,203.3%20872.0,204.2C884.7,205.1%20897.3,206.4%20910.0,206.8C922.7,207.2%20935.3,207.4%20948.0,206.7C960.7,205.9%20973.3,204.4%20986.0,202.6C998.7,200.8%201011.3,198.0%201024.0,195.7C1036.7,193.3%201049.3,190.4%201062.0,188.4C1074.7,186.4%201087.3,184.6%201100.0,183.7C1112.7,182.9%201125.3,182.8%201138.0,183.4C1150.7,184.0%201163.3,185.6%201176.0,187.2C1188.7,188.8%201201.3,191.3%201214.0,193.2C1226.7,195.2%201239.3,197.4%201252.0,199.0C1264.7,200.6%201277.3,201.9%201290.0,202.9C1302.7,203.9%201315.3,204.4%201328.0,205.1C1340.7,205.9%201353.3,206.3%201366.0,207.5C1378.7,208.7%201391.3,210.0%201404.0,212.3C1416.7,214.6%201429.3,217.6%201442.0,221.2C1454.7,224.8%201473.7,231.7%201480.0,233.7'%20fill='none'%20stroke='%232B554D'%20stroke-width='0.86'%20opacity='0.218'/%3E%3Cpath%20d='M-40.0,303.7C-33.7,304.3%20-14.7,306.2%20-2.0,307.4C10.7,308.6%2023.3,310.2%2036.0,310.8C48.7,311.3%2061.3,311.6%2074.0,310.7C86.7,309.8%2099.3,308.0%20112.0,305.5C124.7,302.9%20137.3,299.2%20150.0,295.4C162.7,291.7%20175.3,287.0%20188.0,282.9C200.7,278.9%20213.3,274.6%20226.0,271.3C238.7,268.0%20251.3,265.1%20264.0,263.1C276.7,261.0%20289.3,259.8%20302.0,258.9C314.7,257.9%20327.3,257.8%20340.0,257.4C352.7,256.9%20365.3,256.8%20378.0,256.0C390.7,255.2%20403.3,254.2%20416.0,252.8C428.7,251.3%20441.3,249.3%20454.0,247.4C466.7,245.4%20479.3,243.0%20492.0,241.2C504.7,239.5%20517.3,237.8%20530.0,237.0C542.7,236.2%20555.3,236.1%20568.0,236.7C580.7,237.3%20593.3,238.9%20606.0,240.6C618.7,242.3%20631.3,244.9%20644.0,246.8C656.7,248.7%20669.3,251.0%20682.0,252.2C694.7,253.3%20707.3,254.1%20720.0,253.8C732.7,253.5%20745.3,252.2%20758.0,250.5C770.7,248.7%20783.3,245.8%20796.0,243.2C808.7,240.5%20821.3,237.2%20834.0,234.6C846.7,232.0%20859.3,229.4%20872.0,227.6C884.7,225.8%20897.3,224.6%20910.0,223.7C922.7,222.9%20935.3,222.8%20948.0,222.6C960.7,222.3%20973.3,222.5%20986.0,222.1C998.7,221.6%201011.3,221.1%201024.0,220.0C1036.7,218.9%201049.3,217.1%201062.0,215.3C1074.7,213.5%201087.3,210.9%201100.0,209.0C1112.7,207.1%201125.3,204.8%201138.0,203.8C1150.7,202.7%201163.3,202.0%201176.0,202.6C1188.7,203.2%201201.3,204.9%201214.0,207.4C1226.7,209.8%201239.3,213.6%201252.0,217.5C1264.7,221.4%201277.3,226.4%201290.0,230.8C1302.7,235.1%201315.3,239.9%201328.0,243.8C1340.7,247.7%201353.3,251.2%201366.0,254.1C1378.7,257.0%201391.3,259.2%201404.0,261.3C1416.7,263.3%201429.3,264.8%201442.0,266.6C1454.7,268.5%201473.7,271.6%201480.0,272.6'%20fill='none'%20stroke='%232B554D'%20stroke-width='0.80'%20opacity='0.200'/%3E%3C/svg%3E");
  background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 10%,#000 72%,#000 100%);
          mask-image:linear-gradient(90deg,transparent 10%,#000 72%,#000 100%);
  opacity:.55;
}

/* ── แถบตัวเลข ──────────────────────────────────────────── */
.facts{background:var(--t-night)}
.facts .wrap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));
  gap:1px;background:rgba(255,255,255,.09);
}
.fact{background:var(--t-night);padding:30px 8px 32px}
.fact b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:clamp(1.55rem,3.5vw,2.15rem);line-height:1.05;
  color:var(--gold-lite);letter-spacing:-.015em;
}
.fact span{
  display:block;margin-top:9px;font-family:"IBM Plex Mono",monospace;
  font-size:.61rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(231,239,241,.5);
}

/* ── หัวข้อ section ─────────────────────────────────────── */
.sec{padding-block:clamp(68px,10vw,132px)}
.sec-tight{padding-block:clamp(48px,7vw,88px)}
.sec-head{margin-bottom:clamp(38px,6vw,64px);max-width:62ch}
.sec-head .mono{color:var(--gold);display:block;margin-bottom:18px}
.sec-head h2{
  font-family:"Trirong",Georgia,serif;font-weight:800;
  font-size:clamp(1.9rem,4.8vw,3.3rem);line-height:1.14;
  letter-spacing:-.024em;margin:0;
}
.sec-head p{margin:20px 0 0;color:var(--ink-soft);max-width:56ch}

/* ═══ ภาคตัดขวางความสูง — องค์ประกอบเด่นของเว็บ ═══════════ */
.profile{background:var(--t-noon);border-block:1px solid var(--line)}
.profile-chart{
  margin-top:clamp(24px,4vw,40px);
  border:1px solid var(--line-strong);
  background:linear-gradient(180deg,#FBFAF4 0%,#F1F0E6 100%);
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.profile-chart svg{width:100%;height:auto;min-width:720px;display:block}
.profile-note{
  margin-top:12px;font-family:"IBM Plex Mono",monospace;
  font-size:.61rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--water);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.pk-node{cursor:pointer}
.pk-node circle{transition:r .22s,fill .22s}
.pk-node:hover circle{r:9;fill:#A8792F}
.pk-node:hover .pk-label{fill:#A8792F}
.pk-node text{transition:fill .22s}
.pk-label{font-family:"Trirong",serif;font-weight:600;font-size:14px;letter-spacing:0;fill:#152E2B}
.pk-alt{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;fill:#A8792F}
.pk-time{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.14em;fill:#6D949A}

/* ═══ ไทม์ไลน์หนึ่งวัน — แต่ละช่วงมีสีของเวลาตัวเอง ═══════ */
.day{position:relative}

.stop{border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.stop-in{
  max-width:var(--max);margin:0 auto;padding-inline:var(--pad);
  display:grid;grid-template-columns:var(--rail) minmax(0,1fr);
  position:relative;z-index:1;
}
.clock{padding:var(--step) 0 0}
.clock b{
  display:block;font-family:"IBM Plex Mono",monospace;
  font-size:.82rem;font-weight:500;color:var(--gold);letter-spacing:.04em;
}
.clock i{
  display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:.6rem;color:var(--water);letter-spacing:.13em;
  margin-top:7px;text-transform:uppercase;
}
.clock u{
  display:block;text-decoration:none;margin-top:18px;
  font-family:"Trirong",serif;font-size:1.02rem;font-weight:600;
  color:var(--ink);opacity:.5;
}
.clock u::after{
  content:"";display:block;width:22px;height:1px;
  background:var(--gold);margin-top:10px;opacity:.7;
}

.stop-body{
  padding:var(--step) 0 calc(var(--step) + 12px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.74fr);
  gap:clamp(22px,4vw,56px);align-items:start;
}
.stop h3{
  font-family:"Trirong",Georgia,serif;font-weight:600;
  font-size:clamp(1.4rem,3.1vw,2.05rem);line-height:1.26;
  margin:0 0 6px;letter-spacing:-.014em;
}
.stop h3 a{
  text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s cubic-bezier(.4,0,.2,1);
}
.stop h3 a:hover{background-size:100% 1.5px}
.where{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--water);margin-bottom:18px;
}
.stop p{margin:0 0 22px;color:var(--ink-soft)}

.meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.meta li{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.06em;
  border:1px solid var(--line-strong);padding:6px 12px;color:var(--ink-soft);
}
.meta li.warn{border-color:var(--gold);color:var(--gold)}

/* ระดับแสงของแต่ละช่วงเวลา */
.stop--dawn{background:var(--t-dawn)}
.stop--morning{background:var(--t-morning)}
.stop--noon{background:var(--t-noon)}
.stop--afternoon{background:var(--t-afternoon)}
.stop--dusk{background:var(--t-dusk)}
.stop--night{background:var(--t-night);border-bottom:0}

/* ── ช่องภาพประกอบ ──────────────────────────────────────── */
figure.plate{margin:0}
.plate .frame{
  aspect-ratio:4/3;overflow:hidden;position:relative;
  border:1px solid var(--line-strong);
}
.plate .frame svg,.plate .frame img{width:100%;height:100%;object-fit:cover;display:block}
.plate .frame img{background:var(--mist-deep,#C3D3D4)}
.plate figcaption{
  margin-top:10px;font-family:"IBM Plex Mono",monospace;
  font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;color:var(--water);
}
.plate-wide .frame{aspect-ratio:16/10}

/* ── เนื้อหาบทความ ──────────────────────────────────────── */
.prose h2{
  font-family:"Trirong",serif;font-weight:800;
  font-size:clamp(1.55rem,3.5vw,2.2rem);line-height:1.24;
  letter-spacing:-.02em;margin:clamp(46px,6vw,72px) 0 20px;
}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:"Trirong",serif;font-weight:600;font-size:1.24rem;margin:36px 0 12px}
.prose p{margin:0 0 22px;color:var(--ink-soft)}
.prose strong{font-weight:500;color:var(--ink)}
.prose ul{margin:0 0 24px;padding-left:20px;color:var(--ink-soft)}
.prose li{margin-bottom:10px}
.prose li::marker{color:var(--gold)}
.pull{
  border-left:2px solid var(--gold);padding:6px 0 6px 24px;margin:36px 0;
  font-family:"Trirong",serif;font-size:clamp(1.1rem,2.3vw,1.38rem);
  line-height:1.64;color:var(--pine);font-weight:400;
}

/* ── ตารางข้อมูล ────────────────────────────────────────── */
.spec{border-top:1px solid var(--line-strong);margin:0}
.spec div{
  display:grid;grid-template-columns:minmax(124px,.34fr) minmax(0,1fr);
  gap:18px;padding:16px 0;border-bottom:1px solid var(--line);
}
.spec dt{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--water);margin:0;
}
.spec dd{margin:0;color:var(--ink-soft);font-size:.95rem}
.spec dd b{color:var(--ink);font-weight:500}

/* ── ทัวร์ 360° ─────────────────────────────────────────── */
.tour{margin:clamp(36px,5vw,56px) 0}
.tour-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--t-night);border:1px solid rgba(255,255,255,.16);
}
.tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tour-ph{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  gap:15px;padding:26px;
  background:radial-gradient(130% 96% at 50% 8%,rgba(226,190,128,.17),transparent 64%),var(--t-night);
}
.tour-ph svg{width:clamp(54px,7vw,82px);height:auto}
.tour-ph b{font-family:"Trirong",serif;font-weight:600;font-size:1.16rem;color:var(--gold-lite)}
.tour-ph span{font-size:.88rem;color:rgba(231,239,241,.62);max-width:44ch;line-height:1.72}
.tour-cap{
  margin-top:12px;font-family:"IBM Plex Mono",monospace;
  font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:var(--water);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}

/* ── FAQ ────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:"Trirong",serif;font-weight:600;font-size:1.08rem;line-height:1.5;
  transition:color .25s;
}
.faq summary:hover{color:var(--pine)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:11px;height:11px;margin-top:-6px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .3s;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq details p{margin:0 0 24px;color:var(--ink-soft);max-width:64ch;font-size:.95rem}

/* ── ฤดูกาล ─────────────────────────────────────────────── */
.seasons{background:var(--t-morning);border-block:1px solid var(--line)}
.season-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
  gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
}
.season{background:var(--t-morning);padding:32px 28px 36px;position:relative}
.season .mono{color:var(--gold);display:block;margin-bottom:14px}
.season h4{font-family:"Trirong",serif;font-weight:600;font-size:1.22rem;margin:0 0 11px}
.season p{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.76}
.season.flag{background:var(--t-night)}
.season.flag h4{color:var(--gold-lite)}
.season.flag p{color:rgba(231,239,241,.72)}
.season.flag .mono{color:var(--gold-lite)}

/* ── รู้ก่อนไป ──────────────────────────────────────────── */
.know{display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));gap:clamp(28px,4vw,56px)}
.know section h4{
  font-family:"Trirong",serif;font-weight:600;font-size:1.26rem;
  margin:0 0 16px;padding-bottom:13px;border-bottom:1px solid var(--line-strong);
}
.know dl{margin:0}
.know dt{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--water);margin-top:18px;
}
.know dd{margin:4px 0 0;color:var(--ink-soft);font-size:.94rem}

/* ── การ์ดลิงก์ ─────────────────────────────────────────── */
.next-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
}
.next-card{
  background:var(--paper);padding:30px 26px 34px;text-decoration:none;
  display:block;position:relative;transition:background .3s;
}
.next-card::after{
  content:"→";position:absolute;right:24px;bottom:26px;
  font-family:"IBM Plex Mono",monospace;color:var(--gold);
  opacity:0;transform:translateX(-6px);transition:opacity .3s,transform .3s;
}
.next-card:hover{background:var(--t-dawn)}
.next-card:hover::after{opacity:1;transform:translateX(0)}
.next-card .mono{color:var(--gold);display:block;margin-bottom:12px}
.next-card b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:1.18rem;line-height:1.34;margin-bottom:9px;
}
.next-card span{font-size:.88rem;color:var(--ink-soft);line-height:1.7}


/* ═══ การ์ดสถานที่ — เลย์เอาต์ใหม่ ═══════════════════════════
   แผนที่ย้ายมาอยู่คอลัมน์ขวาใต้ภาพ และพับเก็บไว้
   ทำให้หน้ายาวน้อยลงมาก และอ่านไล่ลงได้ลื่นขึ้น            */
.places{border-top:1px solid var(--line-strong)}
.place{
  border-bottom:1px solid var(--line);
  padding-block:clamp(34px,4.5vw,58px);scroll-margin-top:80px;
}
.place-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.72fr);
  gap:clamp(24px,4vw,52px);align-items:start;
}
.place-no{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:10px;
}
.place h2{
  font-family:"Trirong",Georgia,serif;font-weight:600;
  font-size:clamp(1.36rem,2.9vw,1.94rem);line-height:1.26;
  letter-spacing:-.016em;margin:0 0 6px;
}
.place h2 a{color:inherit;text-decoration:none;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s;}
.place h2 a:hover{background-size:100% 1.5px}
.place .where{margin-bottom:16px}
.place p{margin:0 0 18px;color:var(--ink-soft)}
.place .meta{margin-bottom:18px}

/* ตารางข้อมูลแบบกระชับ */
.mini{margin:0 0 18px;border-top:1px solid var(--line)}
.mini div{
  display:grid;grid-template-columns:minmax(92px,.28fr) minmax(0,1fr);
  gap:12px;padding:9px 0;border-bottom:1px solid var(--line);
}
.mini dt{
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--water);margin:0;padding-top:2px;
}
.mini dd{margin:0;color:var(--ink-soft);font-size:.88rem;line-height:1.62}

/* คอลัมน์ขวา */
.place-side{display:flex;flex-direction:column;gap:12px}
.place-side .plate{margin:0}
.place-side .plate .frame{aspect-ratio:4/3}

/* แผนที่แบบพับเก็บ */
.map-fold{border:1px solid var(--line-strong);background:var(--paper)}
.map-fold summary{
  display:flex;align-items:center;gap:11px;
  padding:13px 15px;cursor:pointer;list-style:none;
  transition:background .22s;
}
.map-fold summary::-webkit-details-marker{display:none}
.map-fold summary:hover{background:var(--t-dawn)}
.map-fold .mf-ico{color:var(--gold);display:flex;flex-shrink:0}
.map-fold summary b{
  font-family:"IBM Plex Sans Thai",sans-serif;font-weight:500;
  font-size:.9rem;color:var(--ink);flex-shrink:0;
}
.map-fold .mf-sub{
  font-size:.76rem;color:var(--water);margin-left:auto;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.map-fold summary::after{
  content:"+";font-family:"IBM Plex Mono",monospace;color:var(--water);
  font-size:1rem;line-height:1;flex-shrink:0;margin-left:4px;
}
.map-fold[open] summary::after{content:"−"}
.map-fold[open] summary{border-bottom:1px solid var(--line)}
.map-fold .map-frame{
  position:relative;aspect-ratio:4/3;overflow:hidden;
  background:var(--mist,#DCE6E7);border:0;
}
.map-fold .map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.place-nav{
  display:inline-flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;border:1px solid var(--line-strong);
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.86rem;
  color:var(--ink);text-decoration:none;
  transition:border-color .24s,color .24s,background .24s;
}
.place-nav:hover{border-color:var(--gold);color:var(--gold);background:rgba(168,121,47,.05)}

/* มือถือ: เรียงใหม่ให้เห็นชื่อก่อน แล้วค่อยภาพและรายละเอียด
   ใช้ display:contents สลายกล่องซ้ายขวา แล้วสั่งลำดับทีละชิ้น */
@media (max-width:860px){
  .place-grid{grid-template-columns:1fr;gap:0}
  .place-main,.place-side{display:contents}
  .place-head{order:1;margin-bottom:16px}
  .place-side .plate{order:2;margin-bottom:18px}
  .place-body{order:3}
  .place-side .map-fold{order:4;margin-bottom:10px}
  .place-side .place-nav{order:5}
  .place-side .plate .frame{aspect-ratio:16/10}
}
@media (max-width:460px){
  .map-fold .mf-sub{display:none}
}

/* ── สารบัญด้านบนหน้าหมวด ─────────────────────────────────── */
.toc{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:clamp(24px,4vw,36px);
}
.toc a{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;letter-spacing:.08em;
  border:1px solid var(--line-strong);padding:8px 14px;color:var(--ink-soft);
  text-decoration:none;transition:border-color .25s,color .25s;
}
.toc a:hover{border-color:var(--gold);color:var(--gold)}

/* ── ป้ายบอกว่าข้อมูลยังไม่ยืนยัน ─────────────────────────── */
.meta li.todo{border-style:dashed;color:var(--water)}

/* กฎเก่าของการ์ดสถานที่ ถูกแทนที่ด้วยชุดใหม่ด้านบนแล้ว */


/* ═══ ปุ่มหลัก / ปุ่มรอง ═══════════════════════════════════════ */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(20px,3vw,28px)}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.94rem;font-weight:500;
  text-decoration:none;padding:13px 22px;border-radius:3px;
  border:1px solid transparent;transition:background .24s,color .24s,border-color .24s;
}
.btn-main{background:var(--ink);color:var(--ink-inv,#E7EFF1)}
.btn-main:hover{background:var(--pine)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-line:hover{border-color:var(--gold);color:var(--gold)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--pine)}
.btn svg{width:17px;height:17px;flex-shrink:0}

.on-dark .btn-line{color:var(--ink-inv,#E7EFF1);border-color:rgba(255,255,255,.3)}
.on-dark .btn-line:hover{border-color:var(--gold-lite);color:var(--gold-lite)}

/* ── ปุ่มบนการ์ดสถานที่ในหน้าหมวด ─────────────────────────── */
.place-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:4px;
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.9rem;font-weight:500;
  color:var(--ink);text-decoration:none;
  padding:11px 18px;border:1px solid var(--line-strong);border-radius:3px;
  transition:border-color .24s,color .24s,background .24s;
}
.place-cta:hover{border-color:var(--gold);color:var(--gold);background:rgba(168,121,47,.05)}
.place-cta::after{content:"→";font-family:"IBM Plex Mono",monospace}

/* ── แถบติดต่อด่วน ────────────────────────────────────────── */
.contact-bar{
  background:var(--t-night);color:var(--ink-inv,#E7EFF1);
  border-block:1px solid rgba(255,255,255,.1);
}
.contact-bar .wrap{
  padding-block:clamp(26px,4vw,40px);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(20px,3vw,36px);align-items:center;
}
.cb-item .mono{
  display:block;color:var(--gold-lite);margin-bottom:8px;font-size:.62rem;
}
.cb-item b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:clamp(1.05rem,2vw,1.3rem);color:#fff;line-height:1.3;
}
.cb-item a{color:#fff;text-decoration:none}
.cb-item a:hover{color:var(--gold-lite)}
.cb-item span{display:block;font-size:.86rem;color:rgba(231,239,241,.62);margin-top:5px}

/* ── บล็อกไฮไลต์ในเนื้อหา ─────────────────────────────────── */
.hl{
  background:var(--t-noon);border:1px solid var(--line-strong);
  padding:clamp(20px,3vw,28px);margin:clamp(28px,4vw,38px) 0;
}
.hl h3{margin-top:0!important}
.hl p:last-child{margin-bottom:0}
/* บรรทัดกำกับในกล่องเน้น ใช้บอกว่าข้อความไหนเป็นคำบอกเล่า ไม่ใช่ข้อมูลยืนยัน */
.hl-note{
  font-size:.82rem!important;color:var(--water);line-height:1.65;
  padding-top:11px;margin-top:4px;border-top:1px solid var(--line)}

/* ── กล่องแหล่งอ้างอิงท้ายหัวข้อ ──────────────────────────── */
.src{
  border-left:3px solid var(--line-strong);padding:4px 0 4px 18px;
  margin:clamp(26px,3.5vw,34px) 0;font-size:.86rem;color:var(--soft)}
.src b{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--water);
  font-weight:500;margin-bottom:9px}
.src ul{margin:0;padding-left:17px}
.src li{margin-bottom:6px;line-height:1.7}
.src li:last-child{margin-bottom:0}

/* ── แกลเลอรีภาพ ──────────────────────────────────────────── */
.gal{
  display:grid;gap:10px;margin:clamp(26px,4vw,36px) 0;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.gal figure{margin:0}
.gal .frame{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--line)}
.gal img,.gal svg{width:100%;height:100%;object-fit:cover;display:block}
.gal figcaption{
  margin-top:7px;font-family:"IBM Plex Mono",monospace;
  font-size:.57rem;letter-spacing:.1em;text-transform:uppercase;color:var(--water);
}


/* ═══ แกลเลอรีแบบกดขยาย ═══════════════════════════════════════
   เลย์เอาต์กำหนดตามจำนวนรูป ไม่ใช่ตามความกว้างจอ
   ตัวเลขจำนวนรูปอยู่ที่ data-n ของ .gal-grid ใส่โดย build_gallery.py
   เหตุผล: auto-fill คำนวณคอลัมน์จากความกว้าง พอมี 3 รูปบนจอกว้าง
   จะได้ 6 คอลัมน์แล้วเหลือช่องว่างกลางแกลเลอรี
   ─────────────────────────────────────────────────────────── */
.gal-grid{
  display:grid;gap:10px;margin:clamp(26px,4vw,38px) 0;
  grid-template-columns:repeat(3,1fr);
}
.gal-grid figure{margin:0;position:relative;min-width:0}

.gal-item{
  display:block;position:relative;width:100%;height:100%;padding:0;border:0;
  background:var(--mist,#DCE6E7);cursor:zoom-in;overflow:hidden;
  aspect-ratio:4/3;
}
.gal-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
}
.gal-item:hover img,.gal-item:focus-visible img{transform:scale(1.03)}

/* ม่านไล่สีรองคำบรรยาย ให้ตัวหนังสืออ่านออกบนภาพทุกแบบ */
.gal-item::after{
  content:"";position:absolute;inset:auto 0 0 0;pointer-events:none;
  height:min(58%,118px);
  background:linear-gradient(180deg,rgba(14,22,32,0) 0%,rgba(14,22,32,.16) 42%,rgba(14,22,32,.72) 100%);
  transition:opacity .35s;
}
.gal-item:hover::after{opacity:.88}

/* คำบรรยายวางทับมุมล่าง ไม่ลอยอยู่ใต้ภาพจนหลุดจากกัน
   ใช้ฟอนต์ไทยปกติ ไม่ใส่ letter-spacing เพราะภาษาไทยอ่านยากขึ้น */
.gal-cap{
  position:absolute;left:0;right:0;bottom:0;pointer-events:none;
  padding:26px 14px 12px;
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;
  font-weight:400;font-size:.82rem;line-height:1.45;
  color:#F2F6F6;text-shadow:0 1px 3px rgba(14,22,32,.5);
}

/* ── จำนวนรูปแต่ละแบบ (จอ 860px ขึ้นไป) ─────────────────── */
@media (min-width:860px){
  /* ค่าเริ่มต้นคือโมเสก — ภาพแรกกินสองคอลัมน์สองแถว
     ใช้กับทุกจำนวนตั้งแต่ 7 รูปขึ้นไปโดยไม่ต้องไล่เขียนทีละเลข
     จำนวน 1 ถึง 6 มีกฎของตัวเองด้านล่าง ซึ่งจะมาล้างค่านี้ */
  .gal-grid figure:first-child{grid-column:span 2;grid-row:span 2}
  .gal-grid figure:first-child .gal-item{aspect-ratio:auto;height:100%}
  .gal-grid figure:first-child .gal-cap{font-size:.95rem;padding:34px 18px 16px}
  .gal-grid figure:first-child .gal-item::after{height:min(42%,160px)}

  /* ── หนึ่งรูป — ไม่ยืดเต็มความกว้าง ภาพเดี่ยวที่กว้างเกินไปดูเวิ้งว้าง ── */
  .gal-grid[data-n="1"]{grid-template-columns:1fr;max-width:880px;margin-inline:auto}
  .gal-grid[data-n="1"] figure:first-child{grid-column:auto;grid-row:auto}
  .gal-grid[data-n="1"] .gal-item{aspect-ratio:3/2;height:auto}

  /* ── สองรูป ── */
  .gal-grid[data-n="2"]{grid-template-columns:1fr 1fr}
  .gal-grid[data-n="2"] figure:first-child{grid-column:auto;grid-row:auto}
  .gal-grid[data-n="2"] .gal-item{aspect-ratio:3/2;height:auto}

  /* ── สามรูป — ภาพเด่นซ้ายสูงเท่าสองภาพขวารวมกันพอดี ── */
  .gal-grid[data-n="3"]{grid-template-columns:1.52fr 1fr}
  .gal-grid[data-n="3"] figure:first-child{grid-column:auto;grid-row:span 2}

  /* ── สี่รูป ── */
  .gal-grid[data-n="4"]{grid-template-columns:1fr 1fr}
  .gal-grid[data-n="4"] figure:first-child{grid-column:auto;grid-row:auto}
  .gal-grid[data-n="4"] .gal-item{aspect-ratio:4/3;height:auto}

  /* ── ห้ารูป — สองใบบน สามใบล่าง ลงตัวไม่มีช่องโหว่ ── */
  .gal-grid[data-n="5"]{grid-template-columns:repeat(6,1fr)}
  .gal-grid[data-n="5"] figure:first-child{grid-row:auto}
  .gal-grid[data-n="5"] figure:nth-child(-n+2){grid-column:span 3}
  .gal-grid[data-n="5"] figure:nth-child(-n+2) .gal-item{aspect-ratio:3/2;height:auto}
  .gal-grid[data-n="5"] figure:nth-child(n+3){grid-column:span 2}

  /* ── หกรูป — สามคอลัมน์สองแถวพอดี ── */
  .gal-grid[data-n="6"]{grid-template-columns:repeat(3,1fr)}
  .gal-grid[data-n="6"] figure:first-child{grid-column:auto;grid-row:auto}
  .gal-grid[data-n="6"] .gal-item{aspect-ratio:4/3;height:auto}

  /* ── เหลือรูปเดียวในแถวสุดท้าย ให้กินเต็มความกว้างเป็นภาพปิดท้าย
        ดีกว่าปล่อยให้ลอยอยู่ซ้ายมือเดี่ยวๆ ── */
  .gal-grid[data-n="7"] figure:last-child,
  .gal-grid[data-n="10"] figure:last-child,
  .gal-grid[data-n="13"] figure:last-child,
  .gal-grid[data-n="16"] figure:last-child,
  .gal-grid[data-n="19"] figure:last-child,
  .gal-grid[data-n="22"] figure:last-child,
  .gal-grid[data-n="25"] figure:last-child,
  .gal-grid[data-n="28"] figure:last-child,
  .gal-grid[data-n="31"] figure:last-child,
  .gal-grid[data-n="34"] figure:last-child,
  .gal-grid[data-n="37"] figure:last-child,
  .gal-grid[data-n="40"] figure:last-child{grid-column:span 3}
  .gal-grid[data-n="7"] figure:last-child .gal-item,
  .gal-grid[data-n="10"] figure:last-child .gal-item,
  .gal-grid[data-n="13"] figure:last-child .gal-item,
  .gal-grid[data-n="16"] figure:last-child .gal-item,
  .gal-grid[data-n="19"] figure:last-child .gal-item,
  .gal-grid[data-n="22"] figure:last-child .gal-item,
  .gal-grid[data-n="25"] figure:last-child .gal-item,
  .gal-grid[data-n="28"] figure:last-child .gal-item,
  .gal-grid[data-n="31"] figure:last-child .gal-item,
  .gal-grid[data-n="34"] figure:last-child .gal-item,
  .gal-grid[data-n="37"] figure:last-child .gal-item,
  .gal-grid[data-n="40"] figure:last-child .gal-item{aspect-ratio:2.2/1;height:auto}
}

/* ── จอกลาง ─────────────────────────────────────────────── */
@media (min-width:600px) and (max-width:859px){
  .gal-grid{grid-template-columns:1fr 1fr}
  .gal-grid figure:first-child{grid-column:span 2}
  .gal-grid figure:first-child .gal-item{aspect-ratio:16/9}
}

/* ── มือถือ ─────────────────────────────────────────────── */
@media (max-width:599px){
  .gal-grid{grid-template-columns:1fr;gap:8px}
  .gal-grid .gal-item{aspect-ratio:4/3}
  .gal-grid figure:first-child .gal-item{aspect-ratio:3/2}
  .gal-cap{font-size:.8rem;padding:24px 12px 11px}
}

/* ── กล่องดูภาพเต็มจอ ─────────────────────────────────────── */
.lb{
  position:fixed;inset:0;z-index:200;
  background:rgba(8,13,19,.96);
  display:none;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,52px);
}
.lb.on{display:flex}
.lb img{
  max-width:100%;max-height:82vh;object-fit:contain;
  box-shadow:0 24px 70px rgba(0,0,0,.5);
}
.lb-cap{
  position:absolute;left:0;right:0;bottom:clamp(16px,3vw,32px);
  text-align:center;color:rgba(231,239,241,.72);
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.9rem;
  padding-inline:20px;
}
.lb-cap b{display:block;color:var(--gold-lite,#E2BE80);font-family:"IBM Plex Mono",monospace;
  font-size:.66rem;letter-spacing:.14em;margin-bottom:6px;font-weight:400}
.lb-btn{
  position:absolute;background:rgba(255,255,255,.08);color:#fff;
  border:1px solid rgba(255,255,255,.2);cursor:pointer;
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;transition:background .22s;
}
.lb-btn:hover{background:rgba(255,255,255,.18)}
.lb-x{top:clamp(14px,2.5vw,26px);right:clamp(14px,2.5vw,26px)}
.lb-prev{left:clamp(10px,2vw,28px);top:50%;margin-top:-23px}
.lb-next{right:clamp(10px,2vw,28px);top:50%;margin-top:-23px}
@media (max-width:600px){
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-btn{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){
  .gal-item img{transition:none}
  .gal-item:hover img{transform:none}
}


/* ═══ ข่าวสารและกิจกรรม ═══════════════════════════════════════ */
/* ───── การ์ดข่าว รูปบน ข้อความล่าง ───── */
.news-list{
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* ข่าวน้อยใบ อย่าให้การ์ดยืดเต็มจอจนรูปโย่ง */
.news-list[data-n="1"]{grid-template-columns:minmax(0,420px)}
.news-list[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
/* สี่ใบให้เรียงแถวเดียวบนจอกว้าง จะได้ไม่เหลือใบเดียวตกบรรทัดล่าง */
.news-list[data-n="4"]{grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}

.ncard{display:flex}
.ncard>a{
  display:flex;flex-direction:column;width:100%;
  background:#fff;border:1px solid var(--line-strong);
  text-decoration:none;color:inherit;overflow:hidden;
  border-radius:var(--card-r);
  transition:border-color .22s,transform .22s,box-shadow .22s}
.ncard>a:hover,.ncard>a:focus-visible{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(14,22,32,.08)}

/* โปสเตอร์เป็นภาพแนวตั้ง จึงใช้ contain บนพื้นเข้ม ไม่ครอปทิ้งเนื้อโปสเตอร์ */
.ncard-pic{
  position:relative;display:block;aspect-ratio:4/3;
  background:var(--t-night);overflow:hidden}
.ncard-pic img{
  width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
.ncard>a:hover .ncard-pic img{transform:scale(1.04)}
.ncard-tag,.pcard-tag{
  position:absolute;left:0;top:0;
  background:var(--gold);color:#fff;
  font-size:.7rem;letter-spacing:.04em;line-height:1;
  padding:7px 11px;
  border-bottom-right-radius:var(--card-r);
  border-top-left-radius:calc(var(--card-r) - 1px)}
/* ป้ายของการ์ดสถานที่ รูปไม่ได้เต็มใบเหมือนการ์ดข่าว ต้องอิงกรอบรูป */
.pcard-pic{position:relative}

.ncard-body{display:block;padding:14px 16px 10px;flex:1}
.ncard-when{
  display:block;color:var(--gold);font-size:.72rem;
  letter-spacing:.05em;margin-bottom:6px}
.ncard h3{
  margin:0 0 7px;font-size:1.02rem;line-height:1.42;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden}
.ncard-ex{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;color:var(--ink-soft);font-size:.86rem;line-height:1.6}

.ncard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px 13px;font-size:.8rem}
.ncard-where{color:var(--ink-soft);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ncard-go{color:var(--gold);white-space:nowrap}
.ncard>a:hover .ncard-go{color:var(--pine)}

/* การ์ดที่ไม่มีรูปปก ใช้ในหน้าเรื่องเล่า เติมเส้นทองบนหัวแทนภาพ */
.ncard-txt>a{border-top:3px solid var(--gold)}
.ncard-txt .ncard-body{border-radius:0}
.ncard-txt .ncard-body{padding-top:16px}
.ncard-txt .ncard-ex{-webkit-line-clamp:4}
.ncard-txt h3{-webkit-line-clamp:3}

@media (max-width:560px){
  .news-list,
  .news-list[data-n="1"],
  .news-list[data-n="2"]{grid-template-columns:1fr;max-width:none;gap:12px}
  .ncard-pic{aspect-ratio:16/10}
  .ncard-ex{-webkit-line-clamp:3}
}

/* ── การ์ดไฮไลต์ของงาน ─────────────────────────────────────── */
.hl-grid{
  display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr));
}
.hl-item{background:var(--t-noon);padding:28px 26px 32px}
.hl-item b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:1.18rem;color:var(--ink);margin-bottom:10px;line-height:1.3;
}
.hl-item span{display:block;font-size:.92rem;color:var(--ink-soft);line-height:1.75}

/* ── รายการกิจกรรม ─────────────────────────────────────────── */
.prose ul.act-list{
  list-style:none;padding:0;margin:0 0 24px;
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
}
.prose ul.act-list li{
  margin:0;padding:11px 15px;
  border:1px solid var(--line-strong);
  font-size:.9rem;color:var(--ink-soft);
}
.prose ul.act-list li::marker{content:""}

/* ── แถบงานที่กำลังจะถึง ───────────────────────────────────── */
.upcoming{background:var(--t-afternoon);border-bottom:1px solid var(--line)}
.upcoming .wrap{
  display:flex;align-items:center;gap:clamp(14px,3vw,32px);
  padding-block:clamp(16px,2.5vw,24px);flex-wrap:wrap;
}
.upcoming .mono{color:var(--gold);flex-shrink:0}
.up-link{flex:1 1 340px;text-decoration:none;min-width:0}
.up-link b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:clamp(1.02rem,2vw,1.22rem);color:var(--ink);line-height:1.32;
}
.up-link span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:4px}
.up-link:hover b{color:var(--pine)}
.up-all{
  flex-shrink:0;font-family:"IBM Plex Mono",monospace;font-size:.66rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--pine);
  text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;
}
.up-all:hover{color:var(--gold)}


/* ═══ โปสเตอร์งาน — แสดงเต็มใบ ไม่ครอป ═══════════════════════ */
.poster{background:var(--t-noon);border-block:1px solid var(--line)}
.poster .wrap{padding-block:clamp(30px,4.5vw,54px)}
.poster-frame{
  max-width:1120px;margin:0 auto;
  border:1px solid var(--line-strong);
  background:var(--t-night);
  padding:0;display:block;width:100%;cursor:zoom-in;
  overflow:hidden;
  /* ปุ่มมี min-height ในตัว ต้องล้างทิ้ง ไม่งั้นจะมีแถบว่างบนล่าง */
  font-size:0;line-height:0;-webkit-appearance:none;appearance:none;
  min-height:0;height:auto;
}
/* .gal-item บังคับ 4:3 ไว้ ต้องล้างทิ้งสำหรับโปสเตอร์ */
.poster-frame.gal-item{aspect-ratio:auto;height:auto}
.poster-frame.gal-item::after{display:none}
.poster-frame img{width:100%;height:auto;display:block;transition:transform .5s cubic-bezier(.22,1,.36,1)}
.poster-frame:hover img{transform:scale(1.012)}
.poster-cap{
  max-width:1120px;margin:12px auto 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--water);
}
.poster-cap a{color:var(--pine);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px}
.poster-cap a:hover{color:var(--gold)}

/* หัวหน้าแบบคอลัมน์เดียว ใช้เมื่อภาพย้ายไปอยู่ด้านล่าง */
/* หัวเรื่องบนปก ต้องเริ่มตรงกับย่อหน้าแรกของเนื้อหาพอดี
   เกือบทุกหน้าย่อยใช้คอลัมน์ .narrow (768px) ตั้งให้เท่ากัน
   ส่วนหน้าที่เนื้อหาเต็มความกว้าง ใส่คลาส wide เพิ่มที่ <header> */
.page-hero.solo .wrap{grid-template-columns:1fr;max-width:768px;margin-inline:auto}
.page-hero.solo.wide .wrap{max-width:var(--max)}


/* ═══ หน้าเบอร์ฉุกเฉิน ═══════════════════════════════════════ */
.hot-grid{
  display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.hot{
  background:var(--paper);padding:24px 22px 26px;text-decoration:none;
  display:block;transition:background .24s;
}
.hot:hover{background:var(--t-dawn)}
.hot .num{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:clamp(2rem,4.4vw,2.7rem);line-height:1;color:var(--gold);
  letter-spacing:-.02em;margin-bottom:10px;
}
.hot b{display:block;font-family:"Trirong",serif;font-weight:600;font-size:1.06rem;color:var(--ink);margin-bottom:5px}
.hot .d{display:block;font-size:.84rem;color:var(--ink-soft);line-height:1.6}
/* สามเบอร์แรกเน้นเป็นพิเศษ */
.hot.big{background:var(--t-night)}
.hot.big:hover{background:#16232F}
.hot.big .num{color:var(--gold-lite)}
.hot.big b{color:#fff}
.hot.big .d{color:rgba(231,239,241,.62)}

.loc-list{display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong)}
.loc{
  background:var(--t-morning);padding:22px 24px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
}
.loc.key{background:#FFFDF6;box-shadow:inset 3px 0 0 var(--gold)}
.loc b{display:block;font-family:"Trirong",serif;font-weight:600;font-size:1.14rem;color:var(--ink);margin-bottom:4px}
.loc .d{display:block;font-size:.86rem;color:var(--ink-soft);line-height:1.55}
.loc-act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.loc-act .btn{padding:11px 20px;font-size:.9rem}

.hl-grid .hl-item ul{list-style:none;margin:0;padding:0}
.hl-grid .hl-item li{
  position:relative;padding-left:18px;margin-bottom:9px;
  font-size:.9rem;color:var(--ink-soft);line-height:1.7;
}
.hl-grid .hl-item li::before{
  content:"";position:absolute;left:0;top:10px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);
}

@media (max-width:560px){
  .loc{flex-direction:column;align-items:stretch}
  .loc-act{justify-content:space-between}
}


/* ═══ ป๊อปอัพเชิญลงข้อมูล ═══════════════════════════════════════
   หลักคิด: ไม่ขึ้นทันที ไม่บังเนื้อหา ปิดง่าย และจำว่าเคยปิดแล้ว   */
.invite-back{
  position:fixed;inset:0;z-index:150;
  background:rgba(11,18,26,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.invite-back.on{opacity:1;pointer-events:auto}

.invite{
  position:fixed;z-index:151;
  right:clamp(16px,3vw,32px);bottom:clamp(16px,3vw,32px);
  width:min(520px,calc(100vw - 32px));
  background:var(--paper,#F5F7F5);
  border:1px solid var(--line-strong,rgba(21,46,43,.28));
  box-shadow:0 24px 64px rgba(11,18,26,.28);
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  opacity:0;transform:translateY(18px);pointer-events:none;
  transition:opacity .4s cubic-bezier(.22,1,.36,1),transform .4s cubic-bezier(.22,1,.36,1);
}
.invite.on{opacity:1;transform:none;pointer-events:auto}

.invite-img{overflow:hidden;background:var(--mist,#DCE6E7)}
.invite-img img,
.invite-img svg{width:100%;height:100%;object-fit:cover;display:block}

.invite-body{padding:26px 24px 24px;position:relative}
.invite-body .mono{
  display:block;color:var(--gold,#A8792F);margin-bottom:10px;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.invite-body h3{
  font-family:"Trirong",Georgia,serif;font-weight:600;
  font-size:1.24rem;line-height:1.34;margin:0 0 10px;
  color:var(--ink,#152E2B);letter-spacing:-.012em;
}
.invite-body p{
  margin:0 0 8px;font-size:.9rem;line-height:1.68;
  color:var(--ink-soft,#4B6862);
}
.invite-body p.free{color:var(--pine,#2B554D);font-weight:500}

.invite-act{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px;align-items:center}
.invite-act .btn{padding:11px 18px;font-size:.87rem}
.invite-skip{
  background:none;border:0;cursor:pointer;padding:11px 6px;
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.85rem;
  color:var(--water,#6D949A);transition:color .22s;
}
.invite-skip:hover{color:var(--ink,#152E2B)}

.invite-x{
  position:absolute;top:10px;right:10px;
  width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(21,46,43,.06);color:var(--soft,#4B6862);
  cursor:pointer;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background .22s,color .22s;
}
.invite-x:hover{background:rgba(21,46,43,.14);color:var(--ink,#152E2B)}

.invite-note{
  margin-top:12px;font-size:.74rem;color:var(--water,#6D949A);
  line-height:1.5;
}

@media (max-width:640px){
  /* มือถือ: เป็นแผ่นเลื่อนขึ้นจากด้านล่าง ไม่บังทั้งจอ */
  .invite{
    left:0;right:0;bottom:0;width:100%;
    grid-template-columns:1fr;
    border-left:0;border-right:0;border-bottom:0;
    transform:translateY(100%);
  }
  .invite.on{transform:none}
  .invite-img{height:132px}
  .invite-body{padding:22px 20px 20px}
  .invite-act{margin-top:16px}
  .invite-act .btn{flex:1 1 auto;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .invite,.invite-back{transition:none}
}


/* ═══ หน้าบริการ ═══════════════════════════════════════════════ */
.svc-hero{
  background:var(--t-night);position:relative;overflow:hidden;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.svc-hero .wrap{padding-block:clamp(46px,7vw,88px)}
.svc-hero .mono{color:var(--gold-lite);display:block;margin-bottom:16px}
.svc-hero h1{
  font-family:"Trirong",Georgia,serif;font-weight:800;
  font-size:clamp(2.1rem,5.6vw,3.8rem);line-height:1.1;
  letter-spacing:-.026em;margin:0;color:#fff;
}
.svc-hero .lede{
  margin:22px 0 0;max-width:56ch;
  color:rgba(231,239,241,.72);font-size:clamp(1rem,1.7vw,1.14rem);
}

/* แถบหมายเหตุราคา */
.price-note-bar{background:var(--t-afternoon);border-bottom:1px solid var(--line)}
.price-note-bar .wrap{
  display:flex;gap:14px;align-items:flex-start;
  padding-block:clamp(16px,2.5vw,22px);
}
.price-note-bar b{
  font-family:"Trirong",serif;font-size:1.5rem;line-height:1;
  color:var(--gold);flex-shrink:0;
}
.price-note-bar p{margin:0;font-size:.9rem;line-height:1.72;color:var(--ink-soft)}
.price-note-bar strong{color:var(--ink);font-weight:500}

/* บล็อกบริการ */
.svc-list{display:grid;gap:clamp(40px,6vw,72px)}
.svc{border-top:1px solid var(--line-strong);padding-top:clamp(28px,4vw,44px);scroll-margin-top:80px}
.svc-head{display:flex;gap:clamp(16px,2.5vw,24px);align-items:flex-start;margin-bottom:20px}
.svc-icon{
  width:60px;height:60px;flex-shrink:0;
  border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;
  background:var(--t-noon);
}
.svc-head .mono{color:var(--gold);display:block;margin-bottom:8px}
.svc-head h2{
  font-family:"Trirong",Georgia,serif;font-weight:600;
  font-size:clamp(1.44rem,3.2vw,2.1rem);line-height:1.24;
  letter-spacing:-.016em;margin:0 0 8px;
}
.svc-lede{margin:0;color:var(--ink-soft);max-width:62ch}

.svc-why{
  background:var(--t-noon);border-left:2px solid var(--gold);
  padding:16px 20px;margin-bottom:24px;max-width:74ch;
}
.svc-why b{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;
}
.svc-why p{margin:0;font-size:.92rem;line-height:1.75;color:var(--ink-soft)}

/* แพ็กเกจ */
.pack-grid{
  display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
  grid-template-columns:repeat(auto-fit,minmax(248px,1fr));
}
.pack{background:var(--paper);padding:26px 24px 30px;position:relative}
.pack.hot{background:var(--t-noon);box-shadow:inset 0 3px 0 var(--gold)}
.pack-tag{
  position:absolute;top:0;right:0;
  background:var(--gold);color:#fff;
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:5px 11px;
}
.pack b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:1.16rem;color:var(--ink);margin-bottom:12px;
}
.pack-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.pack-price .cur{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--water);
}
.pack-price .num{
  font-family:"Trirong",serif;font-weight:600;
  font-size:clamp(1.8rem,3.6vw,2.3rem);line-height:1;
  color:var(--pine);letter-spacing:-.02em;
}
.pack-price .unit{font-size:.86rem;color:var(--ink-soft)}
.pack-price .unit i{font-style:normal;color:var(--gold);font-weight:600}
.pack-scope{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--water);
  padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);
}
.pack ul{list-style:none;margin:0;padding:0}
.pack li{
  position:relative;padding-left:19px;margin-bottom:9px;
  font-size:.88rem;line-height:1.65;color:var(--ink-soft);
}
.pack li::before{
  content:"";position:absolute;left:0;top:9px;
  width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.75;
}
.svc-note{
  margin:16px 0 0;font-size:.84rem;line-height:1.7;
  color:var(--water);max-width:74ch;
}

/* ปิดท้าย */
.svc-cta{background:var(--t-night);border-top:1px solid rgba(255,255,255,.1)}
.svc-cta .wrap{padding-block:clamp(44px,6vw,76px)}
.svc-cta .mono{color:var(--gold-lite);display:block;margin-bottom:14px}
.svc-cta h2{
  font-family:"Trirong",serif;font-weight:800;
  font-size:clamp(1.7rem,4vw,2.7rem);line-height:1.16;
  margin:0;color:#fff;letter-spacing:-.022em;
}
.svc-cta p{margin:18px 0 0;color:rgba(231,239,241,.7);max-width:60ch}

@media (max-width:560px){
  .svc-head{flex-direction:column;gap:14px}
  .svc-icon{width:52px;height:52px}
}

/* ── แถบชวนใช้บริการบนหน้าแรก ─────────────────────────────── */
.svc-strip{background:var(--t-afternoon);border-block:1px solid var(--line)}
.svc-strip .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(18px,3vw,40px);padding-block:clamp(26px,4vw,40px);flex-wrap:wrap;
}
.svc-strip .mono{color:var(--gold);display:block;margin-bottom:8px}
.svc-strip b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:clamp(1.16rem,2.4vw,1.5rem);color:var(--ink);
  line-height:1.32;margin-bottom:7px;
}
.svc-strip .d{display:block;font-size:.9rem;color:var(--ink-soft);max-width:56ch;line-height:1.68}
.svc-strip .btn{flex-shrink:0}
@media (max-width:700px){.svc-strip .btn{width:100%;justify-content:center}}

/* ปุ่มลัด 9 ปุ่ม — 3 คอลัมน์ลงตัว */
@media (min-width:1000px){
  .quick-grid{grid-template-columns:repeat(3,1fr)}
}


/* ═══ หน้าแผนเที่ยว ═══════════════════════════════════════════ */
.pstop-list{border-top:1px solid var(--line-strong)}
.pstop{
  display:grid;grid-template-columns:minmax(96px,.16fr) minmax(0,1fr);
  gap:clamp(18px,3vw,38px);
  padding-block:clamp(26px,3.6vw,40px);
  border-bottom:1px solid var(--line);
}
.pstop-time{position:relative}
.pstop-time b{
  display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;
  font-size:clamp(1rem,2vw,1.24rem);color:var(--gold);letter-spacing:.02em;
}
.pstop-time i{
  display:block;font-style:normal;font-family:"IBM Plex Mono",monospace;
  font-size:.6rem;letter-spacing:.14em;color:var(--water);margin-top:6px;
}
.pstop-body h3{
  font-family:"Trirong",Georgia,serif;font-weight:600;
  font-size:clamp(1.2rem,2.6vw,1.6rem);line-height:1.28;
  letter-spacing:-.014em;margin:0 0 10px;color:var(--ink);
}
.pstop-body p{margin:0 0 14px;color:var(--ink-soft);max-width:66ch}
.pstop-tips{list-style:none;margin:0 0 14px;padding:0}
.pstop-tips li{
  position:relative;padding-left:18px;margin-bottom:7px;
  font-size:.88rem;line-height:1.68;color:var(--ink-soft);
}
.pstop-tips li::before{
  content:"";position:absolute;left:0;top:9px;
  width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.7;
}

/* ตารางงบประมาณ */
.budget{
  display:grid;gap:1px;background:var(--line-strong);
  border:1px solid var(--line-strong);
}
.budget > div{
  background:var(--t-morning);padding:16px 20px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,auto) minmax(0,1.2fr);
  gap:14px;align-items:baseline;
}
.budget > div.sum{background:var(--t-noon);box-shadow:inset 0 2px 0 var(--gold)}
.b-item{font-weight:500;color:var(--ink);font-size:.94rem}
.b-cost{
  font-family:"IBM Plex Mono",monospace;font-size:.94rem;
  color:var(--pine);white-space:nowrap;
}
.budget .sum .b-item,.budget .sum .b-cost{font-size:1.04rem}
.budget .sum .b-cost{color:var(--gold);font-weight:500}
.b-note{font-size:.82rem;color:var(--water);line-height:1.6}

@media (max-width:700px){
  .pstop{grid-template-columns:1fr;gap:10px}
  .pstop-time{display:flex;align-items:baseline;gap:12px}
  .pstop-time i{margin-top:0}
  .budget > div{grid-template-columns:1fr auto;gap:6px 14px}
  .b-note{grid-column:1 / -1}
}

/* ── เครดิต ─────────────────────────────────────────────── */
.credits{background:var(--t-night)}
.credit-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(274px,1fr));gap:36px}
.credit-grid h4{font-family:"Trirong",serif;font-weight:600;font-size:1.12rem;color:var(--gold-lite);margin:0 0 13px}
.credit-grid ul{margin:0;padding-left:18px;font-size:.9rem;line-height:1.85;color:var(--ink-inv-soft)}
.credit-grid li{margin-bottom:8px}
.credit-grid li::marker{color:var(--gold-lite)}
.credit-grid a{color:var(--ink-inv);text-decoration:underline;text-decoration-color:rgba(255,255,255,.26);text-underline-offset:3px;transition:text-decoration-color .25s}
.credit-grid a:hover{text-decoration-color:var(--gold-lite)}
.notice{
  margin-top:40px;padding:24px 26px;border:1px solid rgba(226,190,128,.32);
  font-size:.88rem;line-height:1.8;color:var(--ink-inv-soft);
}
.notice b{color:var(--gold-lite);font-weight:500}


/* ═══ ฟุตเตอร์พร้อมข้อมูลติดต่อ ═══════════════════════════════ */
footer .wrap{display:block}
.foot-grid{
  display:grid;gap:clamp(24px,4vw,48px);
  grid-template-columns:minmax(220px,1.3fr) repeat(3,minmax(140px,1fr));
  padding-bottom:clamp(26px,4vw,38px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.foot-brand b{
  display:block;font-family:"Chonburi",serif;font-weight:400;
  font-size:1.5rem;color:var(--ink-inv,#E7EFF1);margin-bottom:10px;letter-spacing:.01em;
}
.foot-brand p{margin:0;font-size:.88rem;color:rgba(231,239,241,.55);line-height:1.7;max-width:34ch;
  word-break:normal;overflow-wrap:break-word}
.foot-col h4{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lite,#E2BE80);
  margin:0 0 14px;
}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin-bottom:9px}
.foot-col a{
  color:rgba(231,239,241,.75);text-decoration:none;font-size:.9rem;
  display:inline-flex;align-items:center;gap:8px;transition:color .22s;
}
.foot-col a:hover{color:var(--gold-lite,#E2BE80)}
.foot-col a svg{width:15px;height:15px;flex-shrink:0;opacity:.7}
.foot-col a:hover svg{opacity:1}
.foot-bot{
  padding-top:22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;align-items:baseline;
}
.foot-bot .mono{font-size:.61rem;color:rgba(231,239,241,.42)}

/* ═══ หน้าติดต่อ ═══════════════════════════════════════════════ */
.ch-grid{
  display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.ch{
  background:var(--paper);padding:30px 26px 34px;text-decoration:none;
  display:block;position:relative;transition:background .26s;
}
.ch:hover{background:var(--t-dawn)}
.ch svg{width:26px;height:26px;margin-bottom:14px;display:block}
.ch b{
  display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:1.14rem;color:var(--ink);margin-bottom:5px;
}
.ch .val{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.82rem;
  color:var(--gold);margin-bottom:9px;word-break:break-all;
}
.ch span.d{display:block;font-size:.85rem;color:var(--ink-soft);line-height:1.6}
.ch::after{
  content:"→";position:absolute;right:22px;top:28px;
  font-family:"IBM Plex Mono",monospace;color:var(--gold);
  opacity:0;transform:translateX(-5px);transition:opacity .26s,transform .26s;
}
.ch:hover::after{opacity:1;transform:translateX(0)}

.purpose{display:grid;gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.purpose div{background:var(--t-noon);padding:28px 26px 32px}
.purpose b{display:block;font-family:"Trirong",serif;font-weight:600;font-size:1.12rem;margin-bottom:10px}
.purpose p{margin:0 0 14px;font-size:.9rem;color:var(--ink-soft);line-height:1.72}
.purpose .who{
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold);
}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
}

/* ── ฟุตเตอร์ ───────────────────────────────────────────── */
footer{
  background:var(--t-night);border-top:1px solid rgba(255,255,255,.1);
  padding-block:40px 48px;color:rgba(231,239,241,.45);
}
footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:baseline}
footer .mono{font-size:.61rem}
footer b{font-family:"Chonburi",serif;font-weight:400;font-size:1.24rem;color:var(--ink-inv);letter-spacing:.01em}
footer a{text-decoration:none;transition:color .25s}
footer a:hover{color:var(--gold-lite)}

/* ── การเผยเนื้อหาเมื่อเลื่อนถึง ────────────────────────── */
.rv{opacity:0;transform:translateY(18px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* ── หมอกลอย ────────────────────────────────────────────── */
@keyframes drift{from{transform:translateX(-2.6%)}to{transform:translateX(2.6%)}}
.mist-band{animation:drift 30s ease-in-out infinite alternate}
.mist-band.b{animation-duration:44s;animation-direction:alternate-reverse}

/* เส้นชั้นความสูงค่อยๆ ลากตัวเองตอนโหลดหน้า */
@keyframes trace{to{stroke-dashoffset:0}}
.contour{
  stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:trace 2.6s cubic-bezier(.33,1,.68,1) forwards;
}
.contour:nth-of-type(2){animation-delay:.14s}
.contour:nth-of-type(3){animation-delay:.28s}
.contour:nth-of-type(4){animation-delay:.42s}
.contour:nth-of-type(5){animation-delay:.56s}
.contour:nth-of-type(6){animation-delay:.7s}
.contour:nth-of-type(7){animation-delay:.84s}

/* ── มือถือ ─────────────────────────────────────────────── */
@media (max-width:880px){
  .stop-body{grid-template-columns:1fr;gap:26px}
  .stop-body .plate{order:-1}
  .page-hero .wrap{grid-template-columns:1fr}
  .page-hero .plate{order:-1}
  .clock{padding-top:calc(var(--step) - 8px)}
  .clock u{display:none}
}
@media (max-width:540px){
  :root{--rail:56px}
  .spec div{grid-template-columns:1fr;gap:5px}
  .hero-coord{position:static;margin-top:34px;padding:0 var(--pad)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .contour{stroke-dashoffset:0}
}

/* ═══ ตารางท่าเรือ ════════════════════════════════════════════
   จอแคบ: ตารางเลื่อนแนวนอนไม่ได้ผลกับสามคอลัมน์ที่มีเบอร์โทร
   จึงพับเป็นการ์ดต่อแถวแทน ปุ่มโทรยังกดง่าย
   ─────────────────────────────────────────────────────────── */
/* หัวข้อที่ลิงก์ตรงมาได้ ต้องเผื่อที่ให้แถบเมนูที่ติดบนจอ
   ไม่งั้นกระโดดมาแล้วหัวข้อจะโดนเมนูบัง */
#piers{scroll-margin-top:86px}
.pier-wrap{margin:22px 0}
.pier-table{width:100%;border-collapse:collapse;font-size:.92rem}
.pier-table caption{
  caption-side:top;text-align:left;padding:0 0 10px;
  font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--water)}
.pier-table th,.pier-table td{
  text-align:left;padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.pier-table thead th{
  font-family:"IBM Plex Mono",monospace;font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--water);font-weight:500;
  border-bottom:1px solid var(--line2);padding-top:0}
.pier-table tbody th{font-weight:500;line-height:1.5}
.pier-table tbody th a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2)}
.pier-table tbody th a:hover{color:var(--gold);border-color:var(--gold)}
.pier-table tbody tr:hover{background:rgba(228,237,238,.42)}
.pier-note{display:block;font-size:.78rem;color:var(--water);line-height:1.55;margin-top:4px}
.pier-unk{
  color:var(--gold);font-size:1rem;font-weight:500;white-space:nowrap;
  cursor:help;line-height:1}
/* กันคอลัมน์แคบจนคำว่า ไม่มีข้อมูล ตกบรรทัด */
.pier-table th:nth-child(2),.pier-table td:nth-child(2){width:8.5rem}
.pier-table th:nth-child(3),.pier-table td:nth-child(3){width:5.5rem}
.pier-table th:nth-child(4),.pier-table td:nth-child(4){width:9rem}
.pier-table td:nth-child(2),.pier-table td:nth-child(3){white-space:nowrap}
.pier-tel{
  font-family:"IBM Plex Mono",monospace;font-size:.88rem;white-space:nowrap;
  color:var(--pine);text-decoration:none;border-bottom:1px solid var(--line2)}
.pier-tel:hover{color:var(--gold);border-color:var(--gold)}
.pier-foot{font-size:.82rem;color:var(--water);line-height:1.7;margin-top:-4px}


/* ป้ายสิ่งอำนวยความสะดวกในตารางท่าเรือ */
.pier-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:7px}
.pier-chip{
  font-size:.72rem;line-height:1;padding:5px 9px;white-space:nowrap;
  border:1px solid var(--line2);border-radius:2px;color:var(--soft);font-weight:400}
.pier-more{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  color:var(--water);margin-top:7px;line-height:1.6}

@media (max-width:620px){
  .pier-table,.pier-table tbody,.pier-table tr,.pier-table th,.pier-table td{display:block}
  /* caption บนตารางที่กลายเป็น block จะยุบความกว้างจนตกบรรทัดละคำ */
  .pier-table caption{display:block;width:100%;caption-side:unset;padding-bottom:12px}
  .pier-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .pier-table tr{
    border:1px solid var(--line2);padding:14px;margin-bottom:10px;background:#fff}
  .pier-table th,.pier-table td{border:0;padding:0}
  .pier-table td:nth-child(2),.pier-table td:nth-child(3),
  .pier-table td:nth-child(4){width:auto;white-space:normal}
  .pier-table tbody th{font-size:1rem;margin-bottom:8px}
  .pier-table td{margin-top:7px}
  .pier-tel{
    display:inline-block;font-size:1rem;padding:9px 15px;border:1px solid var(--pine);
    border-radius:3px;border-bottom-width:1px}
  .pier-table td{
    display:flex;gap:10px;align-items:baseline;
    font-size:.88rem;color:var(--soft);margin-top:8px}
  .pier-table td::before{
    content:attr(data-l);flex:0 0 68px;
    font-family:"IBM Plex Mono",monospace;font-size:.62rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--water)}
  .pier-table td:has(.pier-tel){align-items:center}
}

/* ═══ หน้าท่าเรือรายท่า ════════════════════════════════════════ */
/* ช่องที่ยังรอข้อมูล — บอกให้ชัดว่ายังว่าง ไม่ใช่พัง */
.ph-box{
  border:1px dashed var(--line-strong);background:#FBFCFB;
  padding:clamp(20px,3vw,26px);margin:clamp(20px,3vw,28px) 0;text-align:center}
.ph-box b{display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:1rem;color:var(--soft);margin-bottom:6px}
.ph-box p{font-size:.86rem;color:var(--water);line-height:1.7;margin:0}
.ph-box code{font-size:.8em}

/* กล่องเชิญเจ้าของท่าเรือ */
.own-box{
  border:1px solid var(--line-strong);border-left:3px solid var(--gold);
  background:var(--t-noon);padding:clamp(20px,3vw,26px);
  margin:clamp(28px,4vw,36px) 0}
.own-box b{display:block;font-family:"Trirong",serif;font-weight:600;
  font-size:1.06rem;margin-bottom:9px}
.own-box p{font-size:.9rem;color:var(--soft);line-height:1.75;margin:0 0 12px}
.own-box .btn-row{margin:16px 0 0}
@media (max-width:520px){
  .own-box .btn-row{flex-direction:column;align-items:stretch}
  .own-box .btn{text-align:center}
}

/* ── กล่องแจ้งเตือน ────────────────────────────────────────── */
/* เดิมมีแต่ .meta li.warn ทำให้ <div class="warn"> แสดงเป็นข้อความเปล่า */
.warn{
  border:1px solid var(--gold);border-left:3px solid var(--gold);
  background:#FDF9F1;padding:clamp(16px,2.4vw,20px) clamp(18px,2.6vw,22px);
  margin:clamp(20px,3vw,26px) 0}
.warn b{display:block;font-weight:600;color:var(--gold-deep,#8A6A2F);
  font-size:.95rem;margin-bottom:5px}
.warn p{font-size:.88rem;color:var(--soft);line-height:1.72;margin:0}
.warn p+p{margin-top:8px}

/* ═══ การ์ดสถานที่ในหน้าหมวด ═══════════════════════════════════
   เดิมเป็นรายการยาวเต็มความกว้าง ต้องเลื่อนนานกว่าจะเห็นว่ามีที่ไหนบ้าง
   ตอนนี้เป็นการ์ดให้กวาดตาได้เร็ว รายละเอียดอยู่ในหน้าของแต่ละแห่ง
   ─────────────────────────────────────────────────────────── */
.pcard-grid{
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(248px,1fr));
  margin:clamp(26px,4vw,38px) 0}

.pcard{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line-strong);text-decoration:none;color:inherit;
  border-radius:var(--card-r);overflow:hidden;
  transition:border-color .22s,transform .22s,box-shadow .22s}
a.pcard:hover,a.pcard:focus-visible{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(14,22,32,.08)}
.pcard-flat{cursor:default}

.pcard-pic{aspect-ratio:4/3;overflow:hidden;background:var(--mist);flex:0 0 auto}
.pcard-pic img,.pcard-pic svg{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.22,1,.36,1)}
a.pcard:hover .pcard-pic img{transform:scale(1.04)}

.pcard-body{padding:14px 16px 4px;flex:1 1 auto;display:flex;flex-direction:column}
.pcard-no{
  font-family:"IBM Plex Mono",monospace;font-size:.58rem;letter-spacing:.12em;
  color:var(--water);display:block;margin-bottom:5px}
.pcard h3{
  font-family:"Trirong",serif;font-weight:600;font-size:1.04rem;line-height:1.4;
  margin:0 0 4px}
a.pcard:hover h3{color:var(--gold)}
.pcard-where{font-size:.78rem;color:var(--water);line-height:1.5;margin-bottom:8px}
.pcard-ex{font-size:.86rem;color:var(--soft);line-height:1.62;margin:0 0 11px}

.pcard-chips{
  list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.pcard-chips li{
  font-size:.7rem;line-height:1;padding:5px 8px;white-space:nowrap;
  border:1px solid var(--line);border-radius:2px;color:var(--soft)}
.pcard-chips li.todo{border-color:var(--gold);color:var(--gold)}

.pcard-go{
  display:block;padding:11px 16px 13px;margin-top:12px;
  border-top:1px solid var(--line);
  font-size:.82rem;font-weight:500;color:var(--pine)}
a.pcard:hover .pcard-go{color:var(--gold)}

@media (max-width:560px){
  .pcard-grid{grid-template-columns:1fr;gap:12px}
  /* จอแคบ วางรูปไว้ซ้าย เนื้อหาขวา จะได้เห็นหลายใบในหน้าจอเดียว
     ใช้ grid เพราะ flex ทำให้ปุ่มกลายเป็นคอลัมน์ที่สาม */
  .pcard{
    display:grid;grid-template-columns:104px minmax(0,1fr);
    grid-template-areas:"pic body" "pic go";align-items:start}
  .pcard>.pcard-pic{grid-area:pic;aspect-ratio:auto;height:100%;min-height:104px}
  .pcard>.pcard-body{grid-area:body;padding:11px 13px 0}
  .pcard>.pcard-go{
    grid-area:go;border-top:0;padding:4px 13px 12px;margin-top:0;font-size:.78rem}
  .pcard .pcard-ex{display:none}
  .pcard h3{font-size:.97rem}
  .pcard .pcard-no{margin-bottom:3px}
  .pcard .pcard-chips{margin-top:2px}
  /* ป้ายเกินสองอันทำให้การ์ดสูงเกินไปบนจอแคบ */
  .pcard .pcard-chips li:nth-child(n+3){display:none}
}

/* ───── การ์ดท่าเรือ ───── */
/* การ์ดต้องการความกว้างมากกว่าคอลัมน์ข้อความ จึงให้ถีบออกนอกคอลัมน์
   แต่ยังอยู่ในระยะขอบของหน้า ไม่ชนขอบจอ */
.prose .pier-wrap{
  width:min(1120px,100% + 2 * clamp(0px,calc((100vw - 100%) / 2 - 24px),260px));
  margin-left:50%;transform:translateX(-50%)}

.pier-asof{
  color:var(--ink-soft);font-size:.8rem;letter-spacing:.04em;
  margin:0 0 14px;font-family:"IBM Plex Mono",ui-monospace,monospace}
.pier-grid{
  display:grid;gap:clamp(14px,2vw,20px);
  grid-template-columns:repeat(auto-fill,minmax(262px,1fr))}

/* ทั้งใบกดได้ แต่ซ้อน <a> ใน <a> ไม่ได้
   จึงให้ชื่อท่าแผ่เงาคลุมทั้งใบ แล้วยกเบอร์โทรขึ้นมาอยู่เหนือเงานั้น */
.piercard{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line-strong);border-radius:var(--card-r);overflow:hidden;
  transition:border-color .22s,transform .22s,box-shadow .22s}
.piercard:hover,.piercard:focus-within{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(14,22,32,.08)}
/* รูปของท่าเรือเตี้ยกว่าการ์ดสถานที่ สิบท่าจะได้กวาดตาดูจบเร็ว */
.piercard .pcard-pic{aspect-ratio:16/9}
/* ดันบรรทัดข้อมูลลงไปชิดขอบล่างเสมอ การ์ดที่ป้ายน้อยจะได้ไม่มีช่องว่างลอยกลางใบ */
.piercard .pcard-body{flex:1;display:flex;flex-direction:column;padding-bottom:12px}
.piercard .pcard-chips{margin-bottom:0}
/* ป้ายที่เหลือ บอกว่ายังมีอีก ไม่ได้ตัดทิ้ง */
.pcard-more{border-style:dashed;color:var(--ink-soft)}
.piercard h3{margin:0 0 6px;font-size:1.02rem;line-height:1.4}
.piercard h3 a{color:var(--ink);text-decoration:none}
.piercard h3 a::after{content:"";position:absolute;inset:0}
.piercard:hover h3 a{color:var(--gold)}

.pier-fact{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:3px 10px;margin:auto 0 0;padding-top:12px;font-size:.82rem;align-items:baseline}
.pier-fact dt{color:var(--ink-soft);white-space:nowrap}
.pier-fact dd{margin:0;color:var(--ink)}

.pier-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);padding:10px 16px;font-size:.82rem}
.pier-tel{
  position:relative;z-index:1;color:var(--pine);text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.02em;
  border-bottom:1px solid var(--line-strong);padding-bottom:1px}
.pier-tel:hover{color:var(--gold);border-color:var(--gold)}
.pier-tel-none{color:var(--ink-soft);border:0;pointer-events:none}
.piercard .pcard-go{border:0;padding:0;white-space:nowrap}

@media (max-width:560px){
  .pier-grid{grid-template-columns:1fr;gap:12px}
}

/* รูปโหลดไม่ขึ้น ใช้ลายน้ำอ่อนแทน ดีกว่าไอคอนรูปแตกกับ alt ยาวๆ */
.pcard-pic[data-noimg="1"],.ncard-pic[data-noimg="1"]{
  background:
    linear-gradient(135deg,rgba(126,157,160,.16),rgba(126,157,160,.05)),
    var(--t-dawn);
  position:relative}
.pcard-pic[data-noimg="1"]::after,.ncard-pic[data-noimg="1"]::after{
  content:"";position:absolute;left:50%;top:50%;
  width:46px;height:34px;transform:translate(-50%,-50%);
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 36' fill='none' stroke='%237E9DA0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='2' width='44' height='32' rx='3'/%3E%3Ccircle cx='15' cy='13' r='4'/%3E%3Cpath d='M4 29l12-11 9 8 7-6 12 10'/%3E%3C/svg%3E");
  opacity:.55}

/* หัวข้อเหนือการ์ดในหน้าหมวด ปิดช่องว่างระหว่างปกกับการ์ด */
.cat-head{margin-bottom:0}
/* เป็นหัวข้อของส่วน ไม่ใช่ชื่อหน้า จึงเล็กกว่าหัวเรื่องบนปก */
.cat-head h2{font-size:clamp(1.45rem,2.6vw,1.95rem);line-height:1.3}
.cat-head p{
  margin:8px 0 0;color:var(--ink-soft);font-size:.9rem;max-width:62ch}
/* หัวข้ออยู่เหนือแล้ว การ์ดไม่ต้องเว้นบนเยอะเท่าเดิม */
.cat-head + .pcard-grid{margin-top:clamp(18px,2.4vw,26px)}

/* หัวหน้าย่อยที่มีวิดีโอเป็นพื้นหลัง
   ของเดิมพื้นสว่างตัวหนังสือเข้ม พอมีวิดีโอทับต้องสลับเป็นตัวหนังสือสว่าง
   ใช้กับหน้ารวมท่าเรือ และหน้ารายท่าที่ใส่วิดีโอไว้ */
.page-hero.has-video{
  background:var(--t-night);border-bottom:0;
  /* หน้าที่คำโปรยสั้น ปกจะเตี้ยจนดูไม่เท่ากับหน้าอื่น บังคับความสูงขั้นต่ำไว้ */
  /* ใช้ grid ไม่ใช่ flex เพราะ flex จะบีบ .wrap ให้แคบตามเนื้อหาบนจอมือถือ */
  /* ต้องกำหนดคอลัมน์ให้เต็มความกว้าง ไม่งั้น grid จะย่อคอลัมน์ตามเนื้อหา
     หน้าที่คำโปรยสั้นจะถูกบีบให้แคบแล้วเลื่อนไปกลางจอ ไม่ตรงกับหน้าอื่น */
  min-height:clamp(440px,60vh,600px);
  display:grid;grid-template-columns:minmax(0,1fr);align-content:end}
/* ลายเส้นชั้นความสูงชุดเดียวกับปกหน้าหมวด ไล่จางจากซ้ายไปขวาด้วย mask ในตัว SVG
   ของเดิมเป็นเส้นสีเขียวเข้ม มองไม่เห็นบนพื้นมืด จึงเปลี่ยนเป็นเส้นสว่างทั้งชุด */
.page-hero.has-video::before{
  /* ต้องยกขึ้นเหนือ <video> กับ scrim ไม่งั้นวิดีโอทับจนไม่เห็นเส้น
     (::before ถูกวาดก่อนลูกคนอื่นเสมอถ้าไม่ตั้ง z-index) */
  z-index:1;filter:none;opacity:.55;mix-blend-mode:screen;
  -webkit-mask-image:none;mask-image:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 1440 820%22 preserveAspectRatio=%22xMidYMid slice%22 aria-hidden=%22true%22 focusable=%22false%22%3E%3Cdefs%3E%3ClinearGradient id=%22hFade%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%220%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23fff%22 stop-opacity=%22.12%22/%3E%3Cstop offset=%2234%25%22 stop-color=%22%23fff%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%2272%25%22 stop-color=%22%23fff%22 stop-opacity=%221%22/%3E%3Cstop offset=%22100%25%22 stop-color=%22%23fff%22 stop-opacity=%22.8%22/%3E%3C/linearGradient%3E%3Cmask id=%22hMask%22%3E%3Crect width=%221440%22 height=%22820%22 fill=%22url(%23hFade)%22/%3E%3C/mask%3E%3C/defs%3E%3Cg mask=%22url(%23hMask)%22%3E%3Cpath class=%22contour%22 d=%22M-60.0,56.8C-54.6,57.0 -38.3,57.3 -27.5,57.8C-16.7,58.3 -5.8,59.1 5.0,59.7C15.8,60.3 26.7,61.0 37.5,61.3C48.3,61.6 59.2,61.7 70.0,61.3C80.8,61.0 91.7,60.3 102.5,59.3C113.3,58.3 124.2,56.9 135.0,55.5C145.8,54.1 156.7,52.3 167.5,50.9C178.3,49.4 189.2,47.9 200.0,46.8C210.8,45.7 221.7,44.8 232.5,44.2C243.3,43.6 254.2,43.4 265.0,43.3C275.8,43.1 286.7,43.3 297.5,43.4C308.3,43.4 319.2,43.6 330.0,43.4C340.8,43.2 351.7,42.9 362.5,42.3C373.3,41.7 384.2,40.7 395.0,39.5C405.8,38.4 416.7,36.9 427.5,35.5C438.3,34.1 449.2,32.4 460.0,31.1C470.8,29.8 481.7,28.5 492.5,27.7C503.3,26.9 514.2,26.4 525.0,26.3C535.8,26.1 546.7,26.5 557.5,27.0C568.3,27.5 579.2,28.5 590.0,29.3C600.8,30.2 611.7,31.3 622.5,32.0C633.3,32.8 644.2,33.5 655.0,33.9C665.8,34.3 676.7,34.3 687.5,34.2C698.3,34.1 709.2,33.6 720.0,33.1C730.8,32.6 741.7,31.9 752.5,31.4C763.3,30.9 774.2,30.4 785.0,30.2C795.8,30.1 806.7,30.2 817.5,30.5C828.3,30.9 839.2,31.7 850.0,32.5C860.8,33.4 871.7,34.6 882.5,35.5C893.3,36.5 904.2,37.7 915.0,38.4C925.8,39.1 936.7,39.7 947.5,39.9C958.3,40.0 969.2,39.8 980.0,39.2C990.8,38.7 1001.7,37.6 1012.5,36.6C1023.3,35.5 1034.2,34.1 1045.0,32.9C1055.8,31.6 1066.7,30.3 1077.5,29.4C1088.3,28.4 1099.2,27.6 1110.0,27.2C1120.8,26.8 1131.7,26.8 1142.5,26.9C1153.3,27.1 1164.2,27.7 1175.0,28.2C1185.8,28.7 1196.7,29.5 1207.5,30.0C1218.3,30.6 1229.2,31.1 1240.0,31.4C1250.8,31.7 1261.7,31.8 1272.5,31.7C1283.3,31.7 1294.2,31.4 1305.0,31.2C1315.8,31.0 1326.7,30.6 1337.5,30.6C1348.3,30.6 1359.2,30.6 1370.0,31.2C1380.8,31.8 1391.7,32.7 1402.5,34.1C1413.3,35.5 1424.2,37.4 1435.0,39.5C1445.8,41.6 1456.7,44.3 1467.5,46.8C1478.3,49.3 1494.6,53.3 1500.0,54.7%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.55%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,104.9C-54.6,104.4 -38.3,102.5 -27.5,101.5C-16.7,100.5 -5.8,99.5 5.0,98.9C15.8,98.3 26.7,98.0 37.5,97.8C48.3,97.5 59.2,97.7 70.0,97.6C80.8,97.5 91.7,97.6 102.5,97.3C113.3,96.9 124.2,96.5 135.0,95.6C145.8,94.7 156.7,93.4 167.5,91.8C178.3,90.2 189.2,88.1 200.0,86.0C210.8,83.9 221.7,81.4 232.5,79.2C243.3,77.0 254.2,74.6 265.0,72.8C275.8,70.9 286.7,69.3 297.5,68.2C308.3,67.0 319.2,66.4 330.0,66.0C340.8,65.7 351.7,65.9 362.5,66.2C373.3,66.4 384.2,67.1 395.0,67.5C405.8,67.9 416.7,68.4 427.5,68.6C438.3,68.8 449.2,68.8 460.0,68.6C470.8,68.3 481.7,67.7 492.5,67.1C503.3,66.5 514.2,65.6 525.0,64.9C535.8,64.2 546.7,63.5 557.5,63.1C568.3,62.8 579.2,62.6 590.0,62.8C600.8,63.1 611.7,63.7 622.5,64.6C633.3,65.4 644.2,66.7 655.0,67.9C665.8,69.1 676.7,70.6 687.5,71.7C698.3,72.8 709.2,74.0 720.0,74.6C730.8,75.2 741.7,75.4 752.5,75.3C763.3,75.2 774.2,74.5 785.0,73.7C795.8,72.9 806.7,71.5 817.5,70.4C828.3,69.2 839.2,67.7 850.0,66.7C860.8,65.6 871.7,64.5 882.5,63.9C893.3,63.2 904.2,62.9 915.0,62.8C925.8,62.7 936.7,63.0 947.5,63.3C958.3,63.5 969.2,64.1 980.0,64.4C990.8,64.8 1001.7,65.1 1012.5,65.1C1023.3,65.1 1034.2,64.8 1045.0,64.3C1055.8,63.7 1066.7,62.7 1077.5,61.7C1088.3,60.7 1099.2,59.3 1110.0,58.2C1120.8,57.1 1131.7,55.8 1142.5,55.0C1153.3,54.2 1164.2,53.6 1175.0,53.5C1185.8,53.5 1196.7,53.9 1207.5,54.7C1218.3,55.5 1229.2,56.8 1240.0,58.3C1250.8,59.8 1261.7,61.8 1272.5,63.6C1283.3,65.5 1294.2,67.5 1305.0,69.2C1315.8,71.0 1326.7,72.6 1337.5,74.0C1348.3,75.3 1359.2,76.4 1370.0,77.3C1380.8,78.3 1391.7,78.9 1402.5,79.7C1413.3,80.5 1424.2,81.1 1435.0,82.1C1445.8,83.1 1456.7,84.1 1467.5,85.6C1478.3,87.0 1494.6,89.8 1500.0,90.7%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.51%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,154.0C-54.6,153.3 -38.3,151.8 -27.5,150.1C-16.7,148.4 -5.8,146.1 5.0,143.8C15.8,141.5 26.7,138.8 37.5,136.4C48.3,134.0 59.2,131.6 70.0,129.5C80.8,127.5 91.7,125.7 102.5,124.3C113.3,122.8 124.2,121.8 135.0,120.9C145.8,120.0 156.7,119.4 167.5,118.7C178.3,118.0 189.2,117.4 200.0,116.5C210.8,115.6 221.7,114.6 232.5,113.3C243.3,112.1 254.2,110.4 265.0,108.8C275.8,107.1 286.7,105.1 297.5,103.4C308.3,101.7 319.2,99.9 330.0,98.6C340.8,97.3 351.7,96.2 362.5,95.6C373.3,95.1 384.2,95.1 395.0,95.5C405.8,95.9 416.7,97.0 427.5,98.2C438.3,99.3 449.2,101.0 460.0,102.5C470.8,104.0 481.7,105.7 492.5,106.9C503.3,108.1 514.2,109.3 525.0,109.9C535.8,110.5 546.7,110.7 557.5,110.5C568.3,110.4 579.2,109.8 590.0,109.1C600.8,108.5 611.7,107.4 622.5,106.7C633.3,105.9 644.2,105.0 655.0,104.5C665.8,104.0 676.7,103.6 687.5,103.6C698.3,103.5 709.2,103.8 720.0,104.1C730.8,104.4 741.7,105.1 752.5,105.4C763.3,105.7 774.2,106.1 785.0,106.1C795.8,106.0 806.7,105.7 817.5,105.0C828.3,104.3 839.2,103.1 850.0,101.6C860.8,100.2 871.7,98.3 882.5,96.4C893.3,94.6 904.2,92.5 915.0,90.8C925.8,89.0 936.7,87.3 947.5,86.2C958.3,85.0 969.2,84.2 980.0,84.0C990.8,83.7 1001.7,83.9 1012.5,84.5C1023.3,85.0 1034.2,86.0 1045.0,87.0C1055.8,88.0 1066.7,89.3 1077.5,90.3C1088.3,91.3 1099.2,92.3 1110.0,93.0C1120.8,93.6 1131.7,94.0 1142.5,94.2C1153.3,94.3 1164.2,94.2 1175.0,94.1C1185.8,94.0 1196.7,93.7 1207.5,93.8C1218.3,93.8 1229.2,93.9 1240.0,94.6C1250.8,95.2 1261.7,96.2 1272.5,97.6C1283.3,99.0 1294.2,101.0 1305.0,103.1C1315.8,105.2 1326.7,107.9 1337.5,110.4C1348.3,112.9 1359.2,115.6 1370.0,118.0C1380.8,120.3 1391.7,122.6 1402.5,124.4C1413.3,126.1 1424.2,127.5 1435.0,128.5C1445.8,129.6 1456.7,130.1 1467.5,130.5C1478.3,130.9 1494.6,130.9 1500.0,131.0%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.47%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,186.8C-54.6,186.5 -38.3,186.0 -27.5,185.2C-16.7,184.3 -5.8,183.2 5.0,181.5C15.8,179.9 26.7,177.7 37.5,175.3C48.3,172.8 59.2,169.7 70.0,166.8C80.8,163.8 91.7,160.3 102.5,157.3C113.3,154.3 124.2,151.2 135.0,148.8C145.8,146.4 156.7,144.3 167.5,142.8C178.3,141.3 189.2,140.4 200.0,140.0C210.8,139.5 221.7,139.7 232.5,139.9C243.3,140.1 254.2,140.8 265.0,141.2C275.8,141.7 286.7,142.3 297.5,142.5C308.3,142.8 319.2,142.8 330.0,142.6C340.8,142.4 351.7,141.9 362.5,141.4C373.3,140.8 384.2,140.0 395.0,139.5C405.8,139.0 416.7,138.4 427.5,138.3C438.3,138.2 449.2,138.4 460.0,138.9C470.8,139.4 481.7,140.4 492.5,141.5C503.3,142.6 514.2,144.1 525.0,145.4C535.8,146.7 546.7,148.2 557.5,149.1C568.3,150.1 579.2,150.9 590.0,151.0C600.8,151.1 611.7,150.8 622.5,149.9C633.3,149.0 644.2,147.5 655.0,145.8C665.8,144.1 676.7,141.8 687.5,139.7C698.3,137.6 709.2,135.2 720.0,133.3C730.8,131.4 741.7,129.5 752.5,128.2C763.3,126.8 774.2,125.9 785.0,125.3C795.8,124.6 806.7,124.5 817.5,124.4C828.3,124.3 839.2,124.6 850.0,124.6C860.8,124.6 871.7,124.7 882.5,124.4C893.3,124.1 904.2,123.7 915.0,122.9C925.8,122.2 936.7,121.2 947.5,120.2C958.3,119.2 969.2,117.8 980.0,116.9C990.8,116.0 1001.7,115.0 1012.5,114.7C1023.3,114.3 1034.2,114.3 1045.0,114.8C1055.8,115.4 1066.7,116.5 1077.5,117.9C1088.3,119.4 1099.2,121.5 1110.0,123.5C1120.8,125.6 1131.7,128.1 1142.5,130.2C1153.3,132.4 1164.2,134.6 1175.0,136.4C1185.8,138.1 1196.7,139.5 1207.5,140.6C1218.3,141.6 1229.2,142.1 1240.0,142.4C1250.8,142.8 1261.7,142.7 1272.5,142.8C1283.3,142.8 1294.2,142.6 1305.0,142.9C1315.8,143.2 1326.7,143.5 1337.5,144.4C1348.3,145.2 1359.2,146.5 1370.0,148.0C1380.8,149.5 1391.7,151.5 1402.5,153.5C1413.3,155.4 1424.2,157.8 1435.0,159.7C1445.8,161.7 1456.7,163.7 1467.5,165.1C1478.3,166.6 1494.6,167.9 1500.0,168.4%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.43%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,214.1C-54.6,213.1 -38.3,209.9 -27.5,208.4C-16.7,206.8 -5.8,205.8 5.0,204.8C15.8,203.8 26.7,203.2 37.5,202.3C48.3,201.4 59.2,200.7 70.0,199.5C80.8,198.4 91.7,197.0 102.5,195.4C113.3,193.7 124.2,191.7 135.0,189.6C145.8,187.6 156.7,185.1 167.5,183.1C178.3,181.1 189.2,178.9 200.0,177.4C210.8,175.9 221.7,174.6 232.5,174.1C243.3,173.5 254.2,173.6 265.0,174.1C275.8,174.5 286.7,175.8 297.5,177.0C308.3,178.3 319.2,180.2 330.0,181.7C340.8,183.2 351.7,184.9 362.5,186.0C373.3,187.2 384.2,188.1 395.0,188.4C405.8,188.8 416.7,188.6 427.5,188.1C438.3,187.6 449.2,186.5 460.0,185.4C470.8,184.3 481.7,182.8 492.5,181.6C503.3,180.4 514.2,179.1 525.0,178.2C535.8,177.3 546.7,176.7 557.5,176.3C568.3,175.8 579.2,175.8 590.0,175.8C600.8,175.7 611.7,175.9 622.5,175.8C633.3,175.6 644.2,175.5 655.0,174.9C665.8,174.2 676.7,173.2 687.5,171.8C698.3,170.4 709.2,168.4 720.0,166.3C730.8,164.2 741.7,161.5 752.5,159.1C763.3,156.7 774.2,154.0 785.0,151.9C795.8,149.8 806.7,147.9 817.5,146.6C828.3,145.4 839.2,144.7 850.0,144.5C860.8,144.4 871.7,145.0 882.5,145.8C893.3,146.6 904.2,148.2 915.0,149.5C925.8,150.9 936.7,152.7 947.5,154.0C958.3,155.4 969.2,156.7 980.0,157.7C990.8,158.6 1001.7,159.2 1012.5,159.6C1023.3,160.0 1034.2,159.9 1045.0,160.0C1055.8,160.1 1066.7,159.8 1077.5,160.0C1088.3,160.1 1099.2,160.3 1110.0,160.9C1120.8,161.6 1131.7,162.6 1142.5,163.9C1153.3,165.2 1164.2,167.0 1175.0,168.8C1185.8,170.7 1196.7,172.9 1207.5,174.8C1218.3,176.7 1229.2,178.8 1240.0,180.3C1250.8,181.7 1261.7,183.0 1272.5,183.7C1283.3,184.4 1294.2,184.6 1305.0,184.5C1315.8,184.3 1326.7,183.6 1337.5,183.0C1348.3,182.5 1359.2,181.4 1370.0,180.9C1380.8,180.4 1391.7,179.8 1402.5,179.9C1413.3,180.0 1424.2,180.4 1435.0,181.3C1445.8,182.3 1456.7,183.8 1467.5,185.6C1478.3,187.3 1494.6,190.8 1500.0,191.9%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.38%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,251.9C-54.6,250.4 -38.3,245.6 -27.5,242.7C-16.7,239.9 -5.8,237.0 5.0,234.8C15.8,232.6 26.7,230.8 37.5,229.6C48.3,228.5 59.2,227.9 70.0,227.7C80.8,227.4 91.7,227.9 102.5,228.2C113.3,228.5 124.2,229.2 135.0,229.5C145.8,229.8 156.7,230.2 167.5,230.0C178.3,229.9 189.2,229.4 200.0,228.6C210.8,227.8 221.7,226.6 232.5,225.4C243.3,224.2 254.2,222.7 265.0,221.5C275.8,220.4 286.7,219.1 297.5,218.5C308.3,217.8 319.2,217.5 330.0,217.5C340.8,217.6 351.7,218.2 362.5,218.9C373.3,219.6 384.2,220.8 395.0,221.7C405.8,222.6 416.7,223.7 427.5,224.1C438.3,224.6 449.2,224.8 460.0,224.4C470.8,223.9 481.7,222.9 492.5,221.4C503.3,220.0 514.2,217.7 525.0,215.4C535.8,213.2 546.7,210.3 557.5,207.7C568.3,205.2 579.2,202.4 590.0,200.2C600.8,198.0 611.7,196.0 622.5,194.5C633.3,193.1 644.2,192.2 655.0,191.6C665.8,191.0 676.7,191.0 687.5,190.9C698.3,190.9 709.2,191.3 720.0,191.3C730.8,191.3 741.7,191.4 752.5,191.1C763.3,190.7 774.2,190.1 785.0,189.3C795.8,188.5 806.7,187.2 817.5,186.1C828.3,185.0 839.2,183.6 850.0,182.6C860.8,181.7 871.7,180.8 882.5,180.5C893.3,180.3 904.2,180.5 915.0,181.2C925.8,182.0 936.7,183.4 947.5,185.1C958.3,186.9 969.2,189.3 980.0,191.5C990.8,193.7 1001.7,196.4 1012.5,198.6C1023.3,200.7 1034.2,202.8 1045.0,204.3C1055.8,205.8 1066.7,206.8 1077.5,207.3C1088.3,207.8 1099.2,207.6 1110.0,207.3C1120.8,206.9 1131.7,205.9 1142.5,205.1C1153.3,204.4 1164.2,203.3 1175.0,202.6C1185.8,202.0 1196.7,201.5 1207.5,201.4C1218.3,201.4 1229.2,201.8 1240.0,202.4C1250.8,203.1 1261.7,204.3 1272.5,205.5C1283.3,206.6 1294.2,208.2 1305.0,209.4C1315.8,210.6 1326.7,211.9 1337.5,212.7C1348.3,213.6 1359.2,214.2 1370.0,214.5C1380.8,214.8 1391.7,214.6 1402.5,214.6C1413.3,214.5 1424.2,214.1 1435.0,214.1C1445.8,214.2 1456.7,214.1 1467.5,214.8C1478.3,215.5 1494.6,217.6 1500.0,218.1%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.34%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,291.0C-54.6,290.6 -38.3,289.7 -27.5,288.4C-16.7,287.1 -5.8,285.3 5.0,283.5C15.8,281.6 26.7,279.2 37.5,277.2C48.3,275.1 59.2,272.9 70.0,271.2C80.8,269.6 91.7,268.2 102.5,267.4C113.3,266.6 124.2,266.3 135.0,266.4C145.8,266.5 156.7,267.2 167.5,267.9C178.3,268.5 189.2,269.7 200.0,270.3C210.8,271.0 221.7,271.7 232.5,271.7C243.3,271.8 254.2,271.5 265.0,270.6C275.8,269.7 286.7,268.2 297.5,266.5C308.3,264.7 319.2,262.4 330.0,260.2C340.8,258.0 351.7,255.5 362.5,253.4C373.3,251.4 384.2,249.4 395.0,248.0C405.8,246.5 416.7,245.5 427.5,244.9C438.3,244.2 449.2,244.1 460.0,243.9C470.8,243.8 481.7,244.1 492.5,243.9C503.3,243.8 514.2,243.8 525.0,243.2C535.8,242.5 546.7,241.6 557.5,240.2C568.3,238.8 579.2,236.8 590.0,234.8C600.8,232.7 611.7,230.1 622.5,227.8C633.3,225.5 644.2,223.0 655.0,221.2C665.8,219.3 676.7,217.7 687.5,216.8C698.3,215.9 709.2,215.6 720.0,215.8C730.8,216.0 741.7,217.0 752.5,218.1C763.3,219.3 774.2,221.0 785.0,222.5C795.8,224.0 806.7,225.8 817.5,227.0C828.3,228.2 839.2,229.3 850.0,229.8C860.8,230.4 871.7,230.5 882.5,230.3C893.3,230.2 904.2,229.5 915.0,228.9C925.8,228.4 936.7,227.5 947.5,227.1C958.3,226.7 969.2,226.4 980.0,226.5C990.8,226.7 1001.7,227.3 1012.5,228.2C1023.3,229.0 1034.2,230.5 1045.0,231.9C1055.8,233.2 1066.7,235.0 1077.5,236.4C1088.3,237.7 1099.2,239.1 1110.0,239.8C1120.8,240.6 1131.7,241.0 1142.5,240.7C1153.3,240.5 1164.2,239.6 1175.0,238.5C1185.8,237.4 1196.7,235.6 1207.5,234.1C1218.3,232.5 1229.2,230.5 1240.0,229.2C1250.8,227.9 1261.7,226.6 1272.5,226.2C1283.3,225.7 1294.2,225.8 1305.0,226.5C1315.8,227.3 1326.7,228.8 1337.5,230.7C1348.3,232.6 1359.2,235.3 1370.0,237.8C1380.8,240.4 1391.7,243.4 1402.5,246.1C1413.3,248.7 1424.2,251.4 1435.0,253.7C1445.8,256.0 1456.7,258.0 1467.5,259.9C1478.3,261.7 1494.6,263.8 1500.0,264.6%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.30%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,325.9C-54.6,326.4 -38.3,327.8 -27.5,328.6C-16.7,329.4 -5.8,330.5 5.0,330.8C15.8,331.2 26.7,331.3 37.5,330.7C48.3,330.2 59.2,329.0 70.0,327.4C80.8,325.8 91.7,323.4 102.5,321.1C113.3,318.8 124.2,315.9 135.0,313.5C145.8,311.0 156.7,308.5 167.5,306.5C178.3,304.6 189.2,302.9 200.0,301.7C210.8,300.5 221.7,299.9 232.5,299.4C243.3,298.9 254.2,299.0 265.0,298.7C275.8,298.5 286.7,298.5 297.5,297.9C308.3,297.3 319.2,296.5 330.0,295.1C340.8,293.7 351.7,291.8 362.5,289.6C373.3,287.4 384.2,284.5 395.0,281.8C405.8,279.1 416.7,276.0 427.5,273.4C438.3,270.8 449.2,268.2 460.0,266.4C470.8,264.5 481.7,263.1 492.5,262.3C503.3,261.6 514.2,261.5 525.0,261.8C535.8,262.0 546.7,262.9 557.5,263.7C568.3,264.4 579.2,265.6 590.0,266.3C600.8,267.0 611.7,267.6 622.5,267.7C633.3,267.8 644.2,267.5 655.0,266.8C665.8,266.2 676.7,264.9 687.5,263.8C698.3,262.7 709.2,261.1 720.0,260.0C730.8,258.8 741.7,257.7 752.5,257.2C763.3,256.6 774.2,256.5 785.0,256.9C795.8,257.3 806.7,258.3 817.5,259.5C828.3,260.7 839.2,262.6 850.0,264.1C860.8,265.7 871.7,267.6 882.5,268.8C893.3,270.0 904.2,271.1 915.0,271.5C925.8,271.9 936.7,271.8 947.5,271.1C958.3,270.5 969.2,269.1 980.0,267.7C990.8,266.2 1001.7,264.2 1012.5,262.5C1023.3,260.8 1034.2,258.9 1045.0,257.6C1055.8,256.4 1066.7,255.3 1077.5,254.9C1088.3,254.4 1099.2,254.5 1110.0,254.9C1120.8,255.3 1131.7,256.4 1142.5,257.3C1153.3,258.2 1164.2,259.6 1175.0,260.5C1185.8,261.4 1196.7,262.4 1207.5,262.9C1218.3,263.3 1229.2,263.5 1240.0,263.4C1250.8,263.3 1261.7,262.7 1272.5,262.4C1283.3,262.0 1294.2,261.3 1305.0,261.2C1315.8,261.2 1326.7,261.2 1337.5,262.1C1348.3,263.0 1359.2,264.4 1370.0,266.6C1380.8,268.9 1391.7,272.0 1402.5,275.5C1413.3,279.0 1424.2,283.4 1435.0,287.8C1445.8,292.1 1456.7,297.0 1467.5,301.4C1478.3,305.8 1494.6,312.0 1500.0,314.1%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.26%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,373.3C-54.6,372.7 -38.3,370.5 -27.5,369.7C-16.7,368.8 -5.8,368.4 5.0,368.2C15.8,367.9 26.7,368.2 37.5,368.1C48.3,368.1 59.2,368.3 70.0,367.8C80.8,367.4 91.7,366.7 102.5,365.3C113.3,363.9 124.2,361.9 135.0,359.3C145.8,356.7 156.7,353.3 167.5,349.9C178.3,346.4 189.2,342.2 200.0,338.5C210.8,334.7 221.7,330.7 232.5,327.4C243.3,324.1 254.2,321.0 265.0,318.8C275.8,316.5 286.7,314.9 297.5,313.8C308.3,312.7 319.2,312.4 330.0,312.2C340.8,311.9 351.7,312.3 362.5,312.4C373.3,312.4 384.2,312.6 395.0,312.3C405.8,312.0 416.7,311.5 427.5,310.5C438.3,309.6 449.2,308.1 460.0,306.7C470.8,305.2 481.7,303.2 492.5,301.7C503.3,300.1 514.2,298.4 525.0,297.4C535.8,296.4 546.7,295.6 557.5,295.6C568.3,295.5 579.2,296.1 590.0,297.0C600.8,297.9 611.7,299.6 622.5,301.2C633.3,302.7 644.2,304.8 655.0,306.3C665.8,307.8 676.7,309.4 687.5,310.2C698.3,310.9 709.2,311.3 720.0,311.0C730.8,310.7 741.7,309.6 752.5,308.3C763.3,307.0 774.2,305.0 785.0,303.1C795.8,301.3 806.7,299.0 817.5,297.3C828.3,295.6 839.2,293.9 850.0,292.9C860.8,291.9 871.7,291.3 882.5,291.1C893.3,290.9 904.2,291.4 915.0,291.8C925.8,292.3 936.7,293.2 947.5,293.7C958.3,294.2 969.2,294.9 980.0,294.8C990.8,294.8 1001.7,294.5 1012.5,293.7C1023.3,292.9 1034.2,291.4 1045.0,289.9C1055.8,288.3 1066.7,286.2 1077.5,284.4C1088.3,282.7 1099.2,280.6 1110.0,279.4C1120.8,278.1 1131.7,277.1 1142.5,276.9C1153.3,276.7 1164.2,277.2 1175.0,278.3C1185.8,279.4 1196.7,281.4 1207.5,283.6C1218.3,285.8 1229.2,288.8 1240.0,291.5C1250.8,294.2 1261.7,297.4 1272.5,300.0C1283.3,302.7 1294.2,305.2 1305.0,307.4C1315.8,309.5 1326.7,311.3 1337.5,312.9C1348.3,314.5 1359.2,315.7 1370.0,317.2C1380.8,318.6 1391.7,319.9 1402.5,321.7C1413.3,323.6 1424.2,325.6 1435.0,328.3C1445.8,331.0 1456.7,334.2 1467.5,337.8C1478.3,341.4 1494.6,347.8 1500.0,349.8%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.22%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,429.5C-54.6,428.1 -38.3,424.1 -27.5,420.9C-16.7,417.7 -5.8,413.8 5.0,410.4C15.8,407.0 26.7,403.3 37.5,400.3C48.3,397.3 59.2,394.5 70.0,392.2C80.8,390.0 91.7,388.3 102.5,386.6C113.3,385.0 124.2,383.9 135.0,382.5C145.8,381.0 156.7,379.8 167.5,378.0C178.3,376.2 189.2,374.2 200.0,371.7C210.8,369.2 221.7,366.2 232.5,363.1C243.3,360.0 254.2,356.4 265.0,353.1C275.8,349.9 286.7,346.4 297.5,343.7C308.3,341.0 319.2,338.6 330.0,337.1C340.8,335.6 351.7,334.8 362.5,334.8C373.3,334.7 384.2,335.6 395.0,336.8C405.8,338.0 416.7,340.0 427.5,341.7C438.3,343.4 449.2,345.6 460.0,347.1C470.8,348.6 481.7,349.9 492.5,350.6C503.3,351.3 514.2,351.4 525.0,351.0C535.8,350.7 546.7,349.6 557.5,348.5C568.3,347.4 579.2,345.7 590.0,344.5C600.8,343.2 611.7,341.8 622.5,341.0C633.3,340.1 644.2,339.6 655.0,339.5C665.8,339.3 676.7,339.7 687.5,340.2C698.3,340.6 709.2,341.5 720.0,341.9C730.8,342.4 741.7,343.0 752.5,342.9C763.3,342.8 774.2,342.3 785.0,341.1C795.8,339.9 806.7,338.1 817.5,335.8C828.3,333.6 839.2,330.5 850.0,327.6C860.8,324.7 871.7,321.3 882.5,318.5C893.3,315.7 904.2,312.8 915.0,310.8C925.8,308.9 936.7,307.4 947.5,306.6C958.3,305.9 969.2,306.0 980.0,306.6C990.8,307.1 1001.7,308.4 1012.5,309.7C1023.3,310.9 1034.2,312.7 1045.0,314.0C1055.8,315.4 1066.7,316.7 1077.5,317.6C1088.3,318.5 1099.2,319.0 1110.0,319.2C1120.8,319.4 1131.7,319.1 1142.5,318.9C1153.3,318.8 1164.2,318.3 1175.0,318.4C1185.8,318.5 1196.7,318.6 1207.5,319.6C1218.3,320.6 1229.2,322.0 1240.0,324.2C1250.8,326.4 1261.7,329.5 1272.5,332.8C1283.3,336.1 1294.2,340.3 1305.0,344.3C1315.8,348.2 1326.7,352.7 1337.5,356.5C1348.3,360.3 1359.2,364.2 1370.0,367.3C1380.8,370.3 1391.7,373.0 1402.5,375.0C1413.3,377.1 1424.2,378.4 1435.0,379.7C1445.8,380.9 1456.7,381.5 1467.5,382.4C1478.3,383.4 1494.6,384.8 1500.0,385.2%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.18%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,465.3C-54.6,464.5 -38.3,462.9 -27.5,460.6C-16.7,458.4 -5.8,455.3 5.0,451.7C15.8,448.1 26.7,443.6 37.5,439.0C48.3,434.5 59.2,429.2 70.0,424.4C80.8,419.7 91.7,414.7 102.5,410.7C113.3,406.6 124.2,402.9 135.0,400.2C145.8,397.4 156.7,395.4 167.5,394.0C178.3,392.6 189.2,392.1 200.0,391.7C210.8,391.3 221.7,391.6 232.5,391.5C243.3,391.4 254.2,391.6 265.0,391.3C275.8,390.9 286.7,390.4 297.5,389.5C308.3,388.6 319.2,387.2 330.0,385.9C340.8,384.6 351.7,382.8 362.5,381.7C373.3,380.5 384.2,379.2 395.0,378.7C405.8,378.2 416.7,378.1 427.5,378.6C438.3,379.1 449.2,380.4 460.0,381.8C470.8,383.3 481.7,385.5 492.5,387.4C503.3,389.2 514.2,391.5 525.0,392.9C535.8,394.3 546.7,395.6 557.5,395.9C568.3,396.2 579.2,395.8 590.0,394.7C600.8,393.5 611.7,391.4 622.5,388.9C633.3,386.5 644.2,383.2 655.0,380.1C665.8,377.0 676.7,373.4 687.5,370.5C698.3,367.6 709.2,364.7 720.0,362.5C730.8,360.3 741.7,358.7 752.5,357.5C763.3,356.3 774.2,355.8 785.0,355.2C795.8,354.7 806.7,354.7 817.5,354.3C828.3,353.9 839.2,353.7 850.0,352.9C860.8,352.1 871.7,351.0 882.5,349.5C893.3,348.0 904.2,346.0 915.0,344.1C925.8,342.2 936.7,339.8 947.5,338.1C958.3,336.3 969.2,334.5 980.0,333.6C990.8,332.8 1001.7,332.3 1012.5,332.8C1023.3,333.3 1034.2,334.7 1045.0,336.7C1055.8,338.6 1066.7,341.6 1077.5,344.6C1088.3,347.5 1099.2,351.3 1110.0,354.5C1120.8,357.7 1131.7,361.2 1142.5,363.9C1153.3,366.6 1164.2,369.0 1175.0,370.7C1185.8,372.5 1196.7,373.6 1207.5,374.4C1218.3,375.3 1229.2,375.4 1240.0,375.8C1250.8,376.2 1261.7,376.3 1272.5,377.0C1283.3,377.7 1294.2,378.5 1305.0,380.1C1315.8,381.6 1326.7,383.8 1337.5,386.3C1348.3,388.9 1359.2,392.2 1370.0,395.5C1380.8,398.8 1391.7,402.6 1402.5,405.9C1413.3,409.2 1424.2,412.7 1435.0,415.3C1445.8,417.9 1456.7,420.1 1467.5,421.7C1478.3,423.2 1494.6,424.0 1500.0,424.5%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.14%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,483.1C-54.6,482.2 -38.3,479.2 -27.5,477.6C-16.7,476.0 -5.8,474.9 5.0,473.4C15.8,471.9 26.7,470.5 37.5,468.5C48.3,466.4 59.2,464.1 70.0,461.2C80.8,458.4 91.7,454.9 102.5,451.4C113.3,447.9 124.2,443.8 135.0,440.2C145.8,436.6 156.7,432.8 167.5,429.9C178.3,427.1 189.2,424.6 200.0,423.1C210.8,421.6 221.7,420.9 232.5,421.0C243.3,421.1 254.2,422.2 265.0,423.5C275.8,424.8 286.7,427.0 297.5,428.8C308.3,430.5 319.2,432.7 330.0,434.0C340.8,435.4 351.7,436.6 362.5,437.0C373.3,437.3 384.2,437.0 395.0,436.3C405.8,435.5 416.7,434.0 427.5,432.4C438.3,430.9 449.2,428.8 460.0,427.2C470.8,425.5 481.7,423.7 492.5,422.5C503.3,421.3 514.2,420.5 525.0,419.9C535.8,419.4 546.7,419.5 557.5,419.4C568.3,419.3 579.2,419.7 590.0,419.5C600.8,419.2 611.7,419.1 622.5,418.0C633.3,417.0 644.2,415.5 655.0,413.3C665.8,411.1 676.7,408.0 687.5,404.6C698.3,401.3 709.2,397.1 720.0,393.2C730.8,389.4 741.7,385.0 752.5,381.4C763.3,377.9 774.2,374.5 785.0,372.1C795.8,369.7 806.7,368.0 817.5,367.1C828.3,366.3 839.2,366.5 850.0,367.0C860.8,367.6 871.7,369.2 882.5,370.6C893.3,372.1 904.2,374.1 915.0,375.6C925.8,377.2 936.7,378.7 947.5,379.8C958.3,380.8 969.2,381.5 980.0,381.9C990.8,382.2 1001.7,382.1 1012.5,382.1C1023.3,382.2 1034.2,381.8 1045.0,382.1C1055.8,382.4 1066.7,382.8 1077.5,383.9C1088.3,385.0 1099.2,386.6 1110.0,388.8C1120.8,391.0 1131.7,393.9 1142.5,396.9C1153.3,399.9 1164.2,403.5 1175.0,406.7C1185.8,409.9 1196.7,413.3 1207.5,415.8C1218.3,418.4 1229.2,420.7 1240.0,422.1C1250.8,423.5 1261.7,424.2 1272.5,424.4C1283.3,424.6 1294.2,423.9 1305.0,423.3C1315.8,422.8 1326.7,421.5 1337.5,421.0C1348.3,420.4 1359.2,419.8 1370.0,420.0C1380.8,420.3 1391.7,421.0 1402.5,422.5C1413.3,424.0 1424.2,426.3 1435.0,429.0C1445.8,431.7 1456.7,435.2 1467.5,438.5C1478.3,441.8 1494.6,447.1 1500.0,448.8%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.10%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,514.9C-54.6,512.9 -38.3,506.3 -27.5,502.8C-16.7,499.4 -5.8,496.4 5.0,494.3C15.8,492.2 26.7,491.0 37.5,490.2C48.3,489.3 59.2,489.4 70.0,489.4C80.8,489.3 91.7,489.9 102.5,489.8C113.3,489.8 124.2,489.8 135.0,489.1C145.8,488.5 156.7,487.4 167.5,485.9C178.3,484.4 189.2,482.2 200.0,480.2C210.8,478.1 221.7,475.6 232.5,473.6C243.3,471.7 254.2,469.6 265.0,468.4C275.8,467.3 286.7,466.5 297.5,466.4C308.3,466.4 319.2,467.1 330.0,468.0C340.8,468.9 351.7,470.5 362.5,471.8C373.3,473.0 384.2,474.6 395.0,475.3C405.8,476.0 416.7,476.5 427.5,476.0C438.3,475.5 449.2,474.2 460.0,472.2C470.8,470.1 481.7,467.1 492.5,463.9C503.3,460.7 514.2,456.6 525.0,452.9C535.8,449.2 546.7,445.2 557.5,441.9C568.3,438.6 579.2,435.5 590.0,433.1C600.8,430.8 611.7,429.2 622.5,427.9C633.3,426.6 644.2,426.2 655.0,425.6C665.8,425.1 676.7,425.1 687.5,424.6C698.3,424.0 709.2,423.6 720.0,422.6C730.8,421.5 741.7,420.1 752.5,418.3C763.3,416.6 774.2,414.2 785.0,412.0C795.8,409.8 806.7,407.2 817.5,405.3C828.3,403.4 839.2,401.5 850.0,400.6C860.8,399.8 871.7,399.5 882.5,400.1C893.3,400.8 904.2,402.4 915.0,404.6C925.8,406.7 936.7,409.9 947.5,413.0C958.3,416.0 969.2,419.8 980.0,422.9C990.8,426.0 1001.7,429.2 1012.5,431.5C1023.3,433.8 1034.2,435.6 1045.0,436.7C1055.8,437.7 1066.7,438.0 1077.5,437.9C1088.3,437.8 1099.2,436.9 1110.0,436.2C1120.8,435.6 1131.7,434.5 1142.5,434.0C1153.3,433.6 1164.2,433.2 1175.0,433.5C1185.8,433.8 1196.7,434.7 1207.5,435.9C1218.3,437.1 1229.2,439.1 1240.0,440.9C1250.8,442.7 1261.7,445.1 1272.5,446.9C1283.3,448.7 1294.2,450.6 1305.0,451.8C1315.8,453.0 1326.7,453.8 1337.5,454.2C1348.3,454.6 1359.2,454.3 1370.0,454.1C1380.8,453.9 1391.7,453.1 1402.5,453.1C1413.3,453.0 1424.2,452.8 1435.0,453.6C1445.8,454.4 1456.7,455.7 1467.5,458.0C1478.3,460.3 1494.6,465.8 1500.0,467.3%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.05%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,560.6C-54.6,559.3 -38.3,555.9 -27.5,553.0C-16.7,550.2 -5.8,546.6 5.0,543.5C15.8,540.5 26.7,537.0 37.5,534.5C48.3,531.9 59.2,529.7 70.0,528.3C80.8,526.9 91.7,526.2 102.5,526.1C113.3,525.9 124.2,526.7 135.0,527.5C145.8,528.2 156.7,529.6 167.5,530.3C178.3,531.1 189.2,532.0 200.0,531.9C210.8,531.9 221.7,531.4 232.5,530.2C243.3,528.9 254.2,526.8 265.0,524.3C275.8,521.8 286.7,518.5 297.5,515.4C308.3,512.3 319.2,508.7 330.0,505.8C340.8,502.9 351.7,500.1 362.5,498.0C373.3,495.9 384.2,494.3 395.0,493.3C405.8,492.2 416.7,491.9 427.5,491.5C438.3,491.2 449.2,491.4 460.0,491.1C470.8,490.7 481.7,490.4 492.5,489.3C503.3,488.2 514.2,486.7 525.0,484.4C535.8,482.2 546.7,479.1 557.5,475.9C568.3,472.6 579.2,468.6 590.0,464.9C600.8,461.3 611.7,457.3 622.5,454.1C633.3,451.0 644.2,448.1 655.0,446.3C665.8,444.4 676.7,443.3 687.5,443.0C698.3,442.7 709.2,443.5 720.0,444.5C730.8,445.4 741.7,447.4 752.5,448.9C763.3,450.4 774.2,452.4 785.0,453.7C795.8,455.0 806.7,456.2 817.5,456.7C828.3,457.1 839.2,457.0 850.0,456.6C860.8,456.2 871.7,455.1 882.5,454.3C893.3,453.4 904.2,452.2 915.0,451.6C925.8,451.1 936.7,450.6 947.5,451.0C958.3,451.3 969.2,452.2 980.0,453.7C990.8,455.1 1001.7,457.4 1012.5,459.6C1023.3,461.8 1034.2,464.7 1045.0,466.9C1055.8,469.1 1066.7,471.5 1077.5,472.9C1088.3,474.3 1099.2,475.3 1110.0,475.4C1120.8,475.5 1131.7,474.6 1142.5,473.4C1153.3,472.1 1164.2,469.9 1175.0,467.9C1185.8,465.9 1196.7,463.2 1207.5,461.4C1218.3,459.5 1229.2,457.7 1240.0,456.9C1250.8,456.1 1261.7,456.0 1272.5,456.8C1283.3,457.5 1294.2,459.3 1305.0,461.6C1315.8,463.9 1326.7,467.2 1337.5,470.4C1348.3,473.6 1359.2,477.5 1370.0,480.9C1380.8,484.3 1391.7,487.8 1402.5,490.7C1413.3,493.7 1424.2,496.4 1435.0,498.8C1445.8,501.2 1456.7,503.1 1467.5,505.3C1478.3,507.5 1494.6,510.8 1500.0,511.9%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%221.01%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,599.0C-54.6,599.6 -38.3,601.6 -27.5,602.2C-16.7,602.7 -5.8,603.0 5.0,602.3C15.8,601.6 26.7,600.0 37.5,597.9C48.3,595.8 59.2,592.7 70.0,589.7C80.8,586.6 91.7,582.7 102.5,579.4C113.3,576.1 124.2,572.6 135.0,569.9C145.8,567.2 156.7,564.9 167.5,563.2C178.3,561.6 189.2,560.6 200.0,559.9C210.8,559.1 221.7,559.0 232.5,558.6C243.3,558.1 254.2,557.9 265.0,556.9C275.8,556.0 286.7,554.7 297.5,552.7C308.3,550.6 319.2,547.8 330.0,544.5C340.8,541.2 351.7,537.0 362.5,533.0C373.3,529.0 384.2,524.3 395.0,520.3C405.8,516.4 416.7,512.4 427.5,509.4C438.3,506.4 449.2,504.0 460.0,502.4C470.8,500.9 481.7,500.3 492.5,500.1C503.3,499.8 514.2,500.6 525.0,501.2C535.8,501.7 546.7,502.9 557.5,503.3C568.3,503.8 579.2,504.3 590.0,504.0C600.8,503.7 611.7,502.8 622.5,501.5C633.3,500.2 644.2,498.1 655.0,496.2C665.8,494.2 676.7,491.7 687.5,489.8C698.3,487.9 709.2,485.9 720.0,484.9C730.8,483.9 741.7,483.4 752.5,483.7C763.3,484.0 774.2,485.2 785.0,486.6C795.8,488.1 806.7,490.5 817.5,492.6C828.3,494.6 839.2,497.2 850.0,498.9C860.8,500.7 871.7,502.3 882.5,503.0C893.3,503.6 904.2,503.6 915.0,502.9C925.8,502.2 936.7,500.5 947.5,498.7C958.3,496.9 969.2,494.3 980.0,492.2C990.8,490.1 1001.7,487.7 1012.5,486.1C1023.3,484.5 1034.2,483.2 1045.0,482.7C1055.8,482.2 1066.7,482.4 1077.5,483.1C1088.3,483.7 1099.2,485.2 1110.0,486.5C1120.8,487.8 1131.7,489.6 1142.5,490.8C1153.3,492.1 1164.2,493.3 1175.0,493.8C1185.8,494.4 1196.7,494.4 1207.5,494.0C1218.3,493.7 1229.2,492.6 1240.0,491.8C1250.8,491.0 1261.7,489.6 1272.5,489.1C1283.3,488.6 1294.2,488.1 1305.0,488.9C1315.8,489.7 1326.7,491.1 1337.5,493.8C1348.3,496.4 1359.2,500.2 1370.0,504.8C1380.8,509.3 1391.7,515.1 1402.5,520.9C1413.3,526.7 1424.2,533.4 1435.0,539.5C1445.8,545.7 1456.7,552.1 1467.5,557.6C1478.3,563.0 1494.6,569.9 1500.0,572.4%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%220.97%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3Cpath class=%22contour%22 d=%22M-60.0,641.9C-54.6,641.7 -38.3,640.8 -27.5,640.7C-16.7,640.6 -5.8,641.3 5.0,641.5C15.8,641.8 26.7,642.4 37.5,642.0C48.3,641.7 59.2,641.1 70.0,639.4C80.8,637.8 91.7,635.3 102.5,631.9C113.3,628.6 124.2,624.1 135.0,619.4C145.8,614.7 156.7,609.0 167.5,603.8C178.3,598.6 189.2,592.9 200.0,588.1C210.8,583.4 221.7,578.9 232.5,575.4C243.3,571.9 254.2,569.2 265.0,567.2C275.8,565.2 286.7,564.2 297.5,563.3C308.3,562.4 319.2,562.4 330.0,561.8C340.8,561.2 351.7,561.0 362.5,560.0C373.3,559.0 384.2,557.7 395.0,555.9C405.8,554.1 416.7,551.6 427.5,549.0C438.3,546.5 449.2,543.3 460.0,540.7C470.8,538.1 481.7,535.3 492.5,533.4C503.3,531.6 514.2,530.1 525.0,529.6C535.8,529.1 546.7,529.5 557.5,530.4C568.3,531.4 579.2,533.4 590.0,535.2C600.8,537.1 611.7,539.7 622.5,541.6C633.3,543.5 644.2,545.6 655.0,546.6C665.8,547.6 676.7,548.1 687.5,547.7C698.3,547.4 709.2,546.0 720.0,544.3C730.8,542.6 741.7,539.8 752.5,537.4C763.3,534.9 774.2,531.9 785.0,529.6C795.8,527.3 806.7,525.1 817.5,523.7C828.3,522.3 839.2,521.5 850.0,521.2C860.8,521.0 871.7,521.6 882.5,522.1C893.3,522.7 904.2,524.0 915.0,524.6C925.8,525.3 936.7,526.1 947.5,526.1C958.3,526.0 969.2,525.6 980.0,524.4C990.8,523.2 1001.7,521.2 1012.5,519.0C1023.3,516.8 1034.2,513.8 1045.0,511.3C1055.8,508.8 1066.7,505.8 1077.5,503.9C1088.3,501.9 1099.2,500.2 1110.0,499.7C1120.8,499.1 1131.7,499.4 1142.5,500.6C1153.3,501.8 1164.2,504.1 1175.0,506.8C1185.8,509.4 1196.7,513.1 1207.5,516.4C1218.3,519.8 1229.2,523.7 1240.0,526.9C1250.8,530.2 1261.7,533.4 1272.5,536.0C1283.3,538.7 1294.2,540.7 1305.0,542.7C1315.8,544.7 1326.7,546.1 1337.5,547.9C1348.3,549.8 1359.2,551.3 1370.0,553.8C1380.8,556.3 1391.7,559.1 1402.5,562.8C1413.3,566.6 1424.2,571.2 1435.0,576.3C1445.8,581.5 1456.7,587.7 1467.5,593.8C1478.3,599.9 1494.6,609.7 1500.0,612.9%22 fill=%22none%22 stroke=%22%23E7EFF1%22 stroke-width=%220.93%22 opacity=%220.3%22 stroke-linecap=%22round%22/%3E%3C/g%3E%3Cline x1=%220%22 y1=%22806%22 x2=%221440%22 y2=%22806%22 stroke=%22%23E7EFF1%22 stroke-width=%221%22 opacity=%220.18%22/%3E%3C/svg%3E");
  background-size:cover;background-position:center}
.page-hero.has-video .wrap{
  /* ปกนี้เป็น grid ลูกที่มี margin auto จะไม่ยืดเต็มคอลัมน์ แต่หดตามเนื้อหา
     หน้าที่คำโปรยสั้นเลยแคบกว่าหน้าอื่น ต้องสั่ง width ให้เต็มก่อนแล้วค่อยให้ max-width คุม */
  width:100%;
  position:relative;z-index:2;
  padding-block:clamp(64px,12vh,132px) clamp(70px,13vh,150px)}

/* หัวข้อเล็กพร้อมขีดทอง ให้เหมือนปกหน้าหมวด */
.page-hero.has-video .mono{
  display:inline-flex;align-items:center;gap:12px;
  color:var(--gold-lite);margin-bottom:30px}
.page-hero.has-video .mono::before{
  content:"";width:38px;height:1px;background:var(--gold)}

.page-hero.has-video h1{
  color:var(--ink-inv);text-shadow:0 2px 26px rgba(11,18,26,.5);
  font-size:clamp(2.1rem,5.6vw,4rem);line-height:1.08}

/* คำโปรยมีเส้นทองคั่นหน้า แบบเดียวกับหน้าหมวด */
.page-hero.has-video .lede{
  max-width:33ch;font-family:"Trirong",Georgia,serif;font-weight:400;
  font-size:clamp(1.04rem,2.1vw,1.4rem);line-height:1.78;
  color:var(--ink-inv);margin:clamp(30px,4vw,44px) 0 0;
  border-left:2px solid var(--gold-lite);padding-left:22px}

/* หน้ารวมท่าเรือมีคำโปรยยาว ให้กว้างกว่าหน่อยจะได้ไม่สูงเกินไป */
.page-hero.solo.has-video .lede{max-width:none}
/* .solo จัดเนื้อหาไว้กลางหน้า แต่ปกหน้าหมวดชิดซ้าย ให้ปกแบบมีวิดีโอชิดซ้ายตาม */


/* กดชื่อท่าจากแถบบนปก แล้วเลื่อนลงมา ต้องเว้นที่ให้เมนูที่ลอยอยู่ */
.piercard{scroll-margin-top:92px}

@media (max-width:560px){
  /* สิบชิปบนจอแคบดันปกสูงเกินหนึ่งหน้าจอ เหลือหกอันพอ
     ที่เหลือเลื่อนลงไปเจอการ์ดอยู่แล้ว */
  .page-hero .toc a:nth-child(n+7){display:none}
}

/* คำพูดที่ยกมา ใช้ในบทความเรื่องเล่า */
.prose blockquote{
  margin:clamp(22px,3vw,30px) 0;padding:2px 0 2px 22px;
  border-left:2px solid var(--gold);
  font-family:"Trirong",Georgia,serif;font-size:1.08rem;line-height:1.85;color:var(--pine)}
.prose blockquote p{margin:0 0 6px}
.prose blockquote p:last-child{margin-bottom:0}


/* ═══ ตารางเดินรถ หน้าการเดินทาง ═══════════════════════════════
   สองคอลัมน์บนจอกว้าง ขาไปกับขากลับวางคู่กันให้เทียบเวลาได้ทันที
   จอแคบให้ซ้อนลงมา เพราะบีบสองคอลัมน์แล้วเวลาจะตกบรรทัด        */
.sched-wrap{
  display:grid;gap:clamp(18px,3vw,38px);margin:24px auto 18px;
  /* กำหนดสองคอลัมน์ตรงๆ ไม่ใช้ auto-fit เพราะมีลูกแค่สองตัว
     auto-fit จะเผื่อรางที่สามไว้บนจอกว้าง แล้วแถวจะถ่างจนเวลากับชนิดรถห่างกันเกินไป */
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:880px;
}
@media (max-width:640px){
  .sched-wrap{grid-template-columns:minmax(0,1fr)}
}
.sched-col h3{
  font-family:"IBM Plex Mono",monospace;font-size:.64rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold,#A8792F);
  margin:0 0 12px;padding-bottom:9px;border-bottom:1px solid var(--line2);
}
.sched{list-style:none;margin:0;padding:0}
.sched li{
  display:flex;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line);
}
.sched li:last-child{border-bottom:0}
.sched b{
  font-family:"IBM Plex Mono",monospace;font-size:1rem;font-weight:500;
  color:var(--ink,#152E2B);min-width:3.6rem;
}
.sched-to{flex:1 1 auto;font-size:.86rem;color:var(--ink-soft,#4B6862)}
.sched-kind{
  font-size:.72rem;line-height:1;padding:5px 9px;white-space:nowrap;
  border:1px solid var(--line2);border-radius:2px;color:var(--soft,#4B6862);
}
.sched-note{
  font-size:.84rem;line-height:1.75;color:var(--ink-soft,#4B6862);
  padding-top:16px;border-top:1px solid var(--line2);
  margin:0 auto;max-width:880px;
}


/* ═══ บริการรถรับส่ง บนหน้าการเดินทาง ═══════════════════════════
   ใช้การ์ดแบบเดียวกับหน้าบริการถ่ายภาพ แต่ยังไม่ประกาศราคา
   จึงต้องมีขนาดตัวอักษรสำหรับคำว่า สอบถาม ที่ไม่ใหญ่เท่าตัวเลขราคา */
.pack-price .pack-ask{
  font-family:"Trirong",Georgia,serif;font-weight:600;
  font-size:1.3rem;line-height:1.1;color:var(--pine,#2B554D);
}
.svc-note{
  max-width:720px;margin:26px auto 0;padding-top:22px;
  border-top:1px solid var(--line2);
}
.svc-note p{font-size:.9rem;line-height:1.78;color:var(--ink-soft,#4B6862);margin:0 0 14px}
.svc-act{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 16px}
.svc-act .btn{font-size:.88rem}
/* บอกให้ชัดว่าเป็นบริการของเว็บเอง ไม่ใช่ข้อมูลกลางเหมือนส่วนอื่น
   จึงทำให้ต่างจากย่อหน้าปกติด้วยเส้นขอบด้านซ้าย */
.svc-fair{
  font-size:.82rem;line-height:1.72;color:var(--water,#6D949A);
  border-left:2px solid var(--line-strong,rgba(21,46,43,.28));
  padding-left:14px;margin:0;
}


/* ภาพที่เป็นเอกสารหรือประกาศ ต้องเห็นครบทั้งใบ
   ครอปแบบ cover ไม่ได้ เพราะเนื้อหาคือตัวหนังสือ */
/* รูปแนวนอน ปล่อยเต็มความกว้างคอลัมน์เนื้อหาได้เลย
   ถ้าเปลี่ยนเป็นรูปจัตุรัสอีก ค่อยใส่ max-width กลับมา */
.plate-doc{margin-inline:auto}
.plate-doc .frame{aspect-ratio:auto;background:var(--paper,#F5F7F5)}
.plate-doc .frame img{height:auto;object-fit:contain}


/* ═══ หน้าหมวดวางแผนก่อนไป ═════════════════════════════════════
   การ์ดใหญ่สี่ใบ แต่ละใบคือหนึ่งหน้าในหมวด พร้อมสารบัญย่อว่าในหน้ามีอะไร */
.hub-grid{
  display:grid;gap:1px;background:var(--line-strong);
  border:1px solid var(--line-strong);margin:8px 0 0;
  /* สี่ใบพอดี 2x2 ถ้าใช้ auto-fit จะได้สามคอลัมน์แล้วใบที่สี่โดดอยู่แถวล่างคนเดียว */
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:700px){
  .hub-grid{grid-template-columns:minmax(0,1fr)}
}
.hub-card{
  background:var(--paper,#F5F7F5);padding:28px 26px 26px;
  display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:inherit;transition:background .22s;
}
.hub-card:hover{background:var(--t-noon,#EDF2EF)}
.hub-card .mono{
  color:var(--gold,#A8792F);font-family:"IBM Plex Mono",monospace;
  font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
}
.hub-card b{
  font-family:"Trirong",Georgia,serif;font-weight:600;
  font-size:1.3rem;line-height:1.3;color:var(--ink,#152E2B);
}
.hub-desc{font-size:.9rem;line-height:1.72;color:var(--ink-soft,#4B6862)}
.hub-list{
  list-style:none;margin:6px 0 0;padding:0;
  border-top:1px solid var(--line2);padding-top:12px;
}
.hub-list li{
  font-size:.83rem;line-height:1.6;color:var(--water,#6D949A);
  padding:4px 0 4px 15px;position:relative;
}
.hub-list li::before{
  content:"";position:absolute;left:0;top:12px;
  width:5px;height:5px;background:var(--line-strong);border-radius:50%;
}
.hub-go{
  margin-top:auto;padding-top:16px;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pine,#2B554D);
}
.hub-card:hover .hub-go{color:var(--gold,#A8792F)}

.hub-tips{
  display:grid;gap:clamp(16px,2.4vw,26px);margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.hub-tip b{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold,#A8792F);
  margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line2);
}
.hub-tip p{margin:0;font-size:.87rem;line-height:1.72;color:var(--ink-soft,#4B6862)}


/* ═══ แผนที่คู่กับทัวร์ 360 ในหน้าสถานที่ ══════════════════════
   เดิม .map-frame มีขนาดเฉพาะตอนอยู่ใน .map-fold เท่านั้น
   พอมาอยู่ในหน้าสถานที่จึงไม่มีกฎไหนกำหนดความสูง กล่องเลยยุบตามขนาดที่ iframe ให้มา
   แล้วเหลือที่ว่างข้างขวาเป็นแถบใหญ่ */
.map-row{
  display:grid;gap:1px;margin:18px 0;
  background:var(--line-strong);border:1px solid var(--line-strong);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (max-width:700px){
  .map-row{grid-template-columns:minmax(0,1fr)}
}
.map-row .map-frame,
.map-row .tour-frame{
  position:relative;aspect-ratio:16/10;overflow:hidden;border:0;margin:0;
}
.map-row .map-frame{background:var(--mist,#DCE6E7)}
.map-row .map-frame iframe,
.map-row .tour-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map-ph{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--water,#6D949A);text-align:center;padding:16px;
}


/* ═══ ฝาครอบ iframe แผนที่และทัวร์ ══════════════════════════════
   ล้อเมาส์บน iframe ของ Google จะถูกเอาไปซูม แทนที่จะเลื่อนหน้าเว็บ
   คนอ่านที่กำลังเลื่อนผ่านจึงติดกับอยู่ตรงนั้น
   วางฝาโปร่งใสไว้ กดครั้งเดียวค่อยเล่นได้ */
.frame-lock{
  position:absolute;inset:0;z-index:3;
  border:0;padding:0 0 14px;margin:0;background:transparent;
  cursor:pointer;display:flex;align-items:flex-end;justify-content:center;
}
.frame-lock span{
  font-family:"IBM Plex Sans Thai",sans-serif;font-size:.76rem;line-height:1;
  background:rgba(11,18,26,.68);color:#fff;padding:8px 14px;border-radius:3px;
  opacity:.9;transition:opacity .2s,background .2s;
}
.frame-lock:hover span{opacity:1;background:rgba(11,18,26,.82)}
.frame-lock:focus-visible{outline:2px solid var(--gold,#A8792F);outline-offset:-2px}
@media (hover:none){
  /* จอสัมผัสไม่มี hover ให้ป้ายจางลงหน่อย จะได้ไม่บังภาพ */
  .frame-lock span{opacity:.82}
}