/* แนว D "บูทีคโฮเทล / หรูเรียบ" (2026-11-03) อ่าน src/D/DESIGN.md ก่อนแก้
   ความหรูมาจากสามอย่าง: ตัวหนังสือ serif บางและใหญ่ / ที่ว่างเยอะ / เส้นทองบางแทนกล่อง
   เอฟเฟกต์ทุ่มที่จังหวะเปิดหน้าจังหวะเดียว ที่เหลือตอบสนองการเลื่อนและการกด
   ทุกเอฟเฟกต์อยู่ใต้คลาส .fx (ใส่จาก JS เมื่อไม่ได้ขอลดการเคลื่อนไหว) ไม่มี JS = เห็นครบทันที */
:root {
  --cream: #FBF9F5; --parchment: #F2ECE0; --white: #FFFFFF;
  --pine: #14503F; --pine-night: #0F3B2F; --pine-soft: #1A5B49; --sage-d: #1F6F5C;
  --gold: #E8D9A8; --champagne: #C9B37E; --gold-text: #7A5A10;
  --ink: #1A211C; --body: #46504A; --muted: #5D685F;
  --line: rgba(26,33,28,.12); --line-gold: rgba(201,179,126,.55); --line-gold-dark: rgba(232,217,168,.32);
  --on-dark: #FBF9F5; --on-dark-2: rgba(251,249,245,.86);
  /* สมุดบันทึก โพสต์อิต รูปติดเทป (2026-11-03) */
  --paper: #FFFDF8; --paper-shade: rgba(120,98,62,.10); --rule-line: rgba(31,111,92,.13); --margin-line: rgba(168,90,46,.30);
  --note-y: #F6E9B2; --note-s: #DCE8DB; --note-b: #F3DFD6; --note-c: #EFE6D3;
  --tape: rgba(212,193,146,.66);
  --paper-lift: 0 1px 2px rgba(60,46,24,.10), 0 18px 36px -18px rgba(60,46,24,.34);

  --serif: 'Noto Serif Thai', 'Sarabun', serif;
  --sans: 'Sarabun', sans-serif;
  --num: 'Cormorant Garamond', 'Noto Serif Thai', serif;
  --hand: 'Sarabun', system-ui, sans-serif;   /* เจ้าของ 2026-11-03: เปลี่ยนจาก Charm ให้อ่านง่ายสำหรับวัย 50-60 */

  --fs-meta: 15px; --fs-body: 19px; --fs-lead: 22px; --fs-h3: 28px;
  --fs-h2: clamp(32px, 3.6vw, 48px); --fs-display: clamp(42px, 6.4vw, 88px);

  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; --s9: 128px; --s10: 160px;
  --wrap: 1160px; --header-h: 76px;
  --radius: 2px; --pill: 999px;
  --lift: 0 30px 60px -20px rgba(15,59,47,.28);

  /* เวลา: ชิ้น UI ใช้ 150/200/300 ตาม vectorlab-ux motion · จังหวะภาพ (ม่าน เปิดรูป Ken Burns) เป็นข้อยกเว้นทางสายตาที่บันทึกไว้ใน DESIGN.md */
  --t-150: 150ms; --t-200: 200ms; --t-300: 300ms;
  --t-reveal: 1100ms; --t-curtain: 650ms;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease-in: cubic-bezier(.7,0,.84,0); --ease-io: cubic-bezier(.65,0,.35,1);
}

/* ---------- พื้นฐาน ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--s3)); }
body { margin: 0; background: var(--cream); color: var(--body); font: 400 var(--fs-body)/1.75 var(--sans); overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.35; text-wrap: balance; }
h2 { font-size: var(--fs-h2); letter-spacing: -.005em; }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--s3); text-wrap: pretty; }
a { color: var(--sage-d); text-underline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
em { font-style: normal; color: var(--muted); }
.ic { width: 20px; height: 20px; flex: 0 0 auto; }
.nb { white-space: nowrap; }
.num { white-space: nowrap; font-family: var(--num); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--s5); padding-right: var(--s5); }
.skip { position: absolute; left: -999px; top: 8px; background: var(--pine); color: var(--on-dark); padding: 10px 16px; z-index: 200; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--champagne); outline-offset: 3px; }
section { position: relative; }

/* ---------- ม่านเปิดหน้า (ซ่อนเป็นค่าเริ่มต้น แอนิเมชันพาให้เห็นแล้วยกขึ้น) ---------- */
.curtain { position: fixed; inset: 0; z-index: 150; background: var(--pine); transform: translateY(-101%); pointer-events: none; }
/* ม่านเปิดเล่นเฉพาะหน้าแรกที่เปิดในรอบการเข้าเว็บ (fx-first) หน้าถัดไปเข้าเนื้อหาเลย */
.fx-first .curtain { animation: curtain var(--t-curtain) var(--ease-io) 60ms both; }
@keyframes curtain { from { transform: translateY(0); } to { transform: translateY(-101%); } }

/* ---------- ปุ่ม: แคปซูล สีใหม่เลื่อนเข้าจากซ้ายเมื่อชี้ ---------- */
.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: var(--pill); border: 1px solid transparent; font: 500 17px/1.3 var(--sans); letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: color var(--t-300) var(--ease-out), border-color var(--t-300) var(--ease-out); }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-101%); transition: transform var(--t-300) var(--ease-out); }
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn .num { font-size: 1.14em; font-weight: 600; }
.btn-primary { background: var(--pine); color: var(--on-dark); }
.btn-primary::before { background: var(--pine-night); }
.btn-primary:hover, .btn-primary:focus-visible { color: var(--gold); }
.btn-line, .btn-outline { background: transparent; color: var(--pine); border-color: var(--pine); }
.btn-line::before, .btn-outline::before { background: var(--pine); }
.btn-line:hover, .btn-outline:hover, .btn-line:focus-visible, .btn-outline:focus-visible { color: var(--on-dark); }
.btn-gold { background: var(--gold); color: var(--pine-night); }
.btn-gold::before { background: var(--on-dark); }
.btn-line-dark { background: rgba(15,59,47,.35); color: var(--gold); border-color: rgba(232,217,168,.7); }
.btn-line-dark::before { background: var(--gold); }
.btn-line-dark:hover, .btn-line-dark:focus-visible { color: var(--pine-night); }

/* ลิงก์เงียบ: เส้นใต้ทองวาดจากซ้าย */
.quiet { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--sage-d); text-decoration: none; font-weight: 500; }
.quiet::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; opacity: .5; transform-origin: left; transition: opacity var(--t-300) var(--ease-out), height var(--t-300) var(--ease-out); }
.quiet:hover::after, .quiet:focus-visible::after { opacity: 1; height: 2px; }

/* ---------- หัวเว็บ: ใสบนฮีโร่ ทึบเมื่อเลื่อน ---------- */
.site-header { position: sticky; top: 0; z-index: 60; height: var(--header-h); color: var(--on-dark); background: transparent; border-bottom: 1px solid transparent; transition: background-color var(--t-300) var(--ease-out), color var(--t-300) var(--ease-out), border-color var(--t-300) var(--ease-out); }
.site-header.is-scrolled { background: var(--cream); color: var(--ink); border-bottom-color: var(--line); }
.header-in { display: flex; align-items: center; gap: var(--s4); height: 100%; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand img { width: 44px; height: 44px; border-radius: 50%; background: var(--white); }
.brand-t { display: flex; flex-direction: column; line-height: 1.25; }
.brand-t strong { font: 500 19px/1.25 var(--serif); }
.brand-t small { font-size: var(--fs-meta); opacity: .85; }
.site-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.site-nav .nav-extra { display: none; }
/* เมนู: ชี้แล้วขึ้นพื้นแคปซูลชัด ๆ · ส่วนที่กำลังอ่าน/หน้าปัจจุบันมีพื้นทองอ่อน + ขอบ (ชัดกว่าตอนชี้) */
.site-nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--pill); color: inherit; text-decoration: none; font-size: 16px; font-weight: 500; white-space: nowrap; transition: background-color var(--t-150) var(--ease-out), color var(--t-150) var(--ease-out), box-shadow var(--t-150) var(--ease-out); }
.site-nav a:not(.nav-call):hover, .site-nav a:not(.nav-call):focus-visible { background: rgba(251,249,245,.20); }
.site-nav a.is-here, .site-nav a[aria-current="page"] { background: rgba(251,249,245,.26); box-shadow: inset 0 0 0 1px rgba(232,217,168,.75); font-weight: 600; }
.site-header.is-scrolled .site-nav a:not(.nav-call):hover, .site-header.is-scrolled .site-nav a:not(.nav-call):focus-visible { background: rgba(31,111,92,.10); color: var(--pine); }
.site-header.is-scrolled .site-nav a.is-here, .site-header.is-scrolled .site-nav a[aria-current="page"] { background: rgba(232,217,168,.50); color: var(--ink); box-shadow: inset 0 0 0 1px var(--champagne); }
.site-nav .nav-call { margin-left: var(--s2); padding: 8px 20px; border: 1px solid currentColor; border-radius: var(--pill); }
.site-nav .nav-call:hover, .site-nav .nav-call:focus-visible { background: rgba(251,249,245,.20); }
.site-header.is-scrolled .site-nav .nav-call:hover, .site-header.is-scrolled .site-nav .nav-call:focus-visible { background: var(--pine); color: var(--on-dark); border-color: var(--pine); }
.site-nav .nav-call .num { font-size: 19px; font-weight: 600; }
.nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 6px; }
.nav-toggle span { width: 18px; height: 1px; background: currentColor; transition: transform var(--t-300) var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* ---------- ฮีโร่ ---------- */
.hero { margin-top: calc(-1 * var(--header-h)); min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; color: var(--on-dark); background: #2A2520; overflow: hidden; }
.hero-media { position: absolute; inset: 0; overflow: hidden; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.fx .hero-media img { animation: kenburns 18s cubic-bezier(.2,.6,.2,1) both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
/* ม่านบนรูป: บนสุดเข้มให้หัวเว็บอ่านได้ กลางบาง ล่างเข้มรองข้อความและราคา (วัดด้วย qa_contrast) */
/* 2026-11-03: เลิกม่านเขียวทั้งรูป ใช้เงาโทนอุ่นเป็นกลาง (สีถ่านไม้) เฉพาะตรงที่มีตัวอักษร
   บน = หัวเว็บ · กลาง = วงรีหลังหัวเรื่อง · ล่าง = ราคา  ส่วนอื่นของรูปเห็นสีจริง */
.hero-scrim { position: absolute; inset: 0; background:
  radial-gradient(ellipse 46% 40% at 50% 46%, rgba(24,19,14,.62) 0%, rgba(24,19,14,.46) 55%, rgba(24,19,14,0) 100%),
  linear-gradient(180deg, rgba(24,19,14,.64) 0%, rgba(24,19,14,.30) 14%, rgba(24,19,14,.22) 34%, rgba(24,19,14,.20) 62%, rgba(24,19,14,.78) 84%, rgba(24,19,14,.90) 100%); }
.hero-in { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding-top: calc(var(--header-h) + var(--s7)); padding-bottom: var(--s6); }
.hero-label { font-size: 16px; color: var(--on-dark); letter-spacing: .04em; margin: 0 0 var(--s4); }
.hero-label a { color: inherit; }
.hero-h { font-size: var(--fs-display); font-weight: 400; line-height: 1.22; color: var(--on-dark); letter-spacing: -.01em; }
.rule { display: block; width: 72px; height: 1px; background: var(--champagne); margin: var(--s4) 0; transform-origin: left; }
.rule-hero, .rule-c, .sec-head-c .rule { margin-left: auto; margin-right: auto; transform-origin: center; background: var(--gold); }
.hero-sub { font-size: var(--fs-lead); line-height: 1.7; color: var(--on-dark-2); max-width: 30em; margin: 0 auto var(--s5); }
.hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.hero-rates { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-gold-dark); margin-bottom: var(--s5); }
.hr-item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s4); color: var(--on-dark); text-decoration: none; }
.hr-item + .hr-item { border-left: 1px solid var(--line-gold-dark); }
.hr-name { font: 400 22px/1.3 var(--serif); }
.hr-price { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.hr-price small { font-size: var(--fs-meta); color: var(--gold); }
.hr-price .num { font-size: 40px; line-height: 1; color: var(--on-dark); }
.hr-item:hover .hr-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.hero-rates-1 { grid-template-columns: minmax(0, 560px); justify-content: center; }

/* ฮีโร่หน้าสาขาที่รูปไฟล์เล็ก: แผ่นเขียว + รูปในกรอบ ไม่ขยายเกินไฟล์ */
.hero-framed { background: var(--pine); }
.hero-framed .hero-in { flex-direction: row; text-align: left; align-items: center; gap: var(--s7); }
.hero-framed .hero-copy { flex: 1 1 0; min-width: 0; }
.hero-framed .hero-sub { margin-left: 0; }
.hero-framed .hero-cta { justify-content: flex-start; }
.hero-framed .rule-hero { margin-left: 0; transform-origin: left; }
.hero-framed .hero-h { font-size: clamp(40px, 5vw, 68px); }
.hero-frame { flex: 0 1 520px; margin: 0; padding: 12px; border: 1px solid var(--line-gold-dark); }
.hero-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-branch .hero-copy { display: flex; flex-direction: column; align-items: center; }

/* ---------- ข้อความแนะนำ ---------- */
.intro { padding: var(--s9) 0 var(--s8); }
.intro-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.intro-quote { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.45; max-width: 20em; color: var(--ink); }
.sig { display: flex; align-items: center; gap: var(--s3); margin: var(--s6) 0 var(--s4); text-align: left; }
.sig-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-gold); color: var(--pine); }
.sig-ic .ic { width: 26px; height: 26px; }
.sig-name { font: 500 22px/1.3 var(--serif); color: var(--ink); margin: 0; }
.sig-role { font-size: var(--fs-meta); color: var(--muted); margin: 0; }
.intro-body { max-width: 36em; color: var(--body); }
.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s7); text-align: left; width: 100%; }
.pillars li { padding-top: var(--s4); border-top: 1px solid var(--line-gold); }
.pillars h3 { font-size: 23px; margin-bottom: var(--s2); }
.pillars p { margin: 0; }
.addr { display: flex; gap: 10px; align-items: flex-start; text-align: left; margin: 0; }
.addr .ic { color: var(--sage-d); margin-top: 6px; }
.addr em { font-size: 17px; }
.addr-c { margin-top: var(--s6); }

/* ---------- หัวส่วน ---------- */
.sec-head { margin-bottom: var(--s7); max-width: 40em; }
.sec-head-c { margin-left: auto; margin-right: auto; text-align: center; }
.sec-sub { margin: 0; color: var(--muted); }

/* ---------- บรรยากาศ ---------- */
.gallery-sec { padding: var(--s8) 0 var(--s9); }
.gal { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--s4); align-items: start; }
.gal-board { column-gap: var(--s6); row-gap: var(--s6); padding-top: var(--s3); }
.gal-l1 { grid-column: 1 / 7; grid-row: 1 / 3; }
.gal-m2 { grid-column: 7 / 11; }
.gal-s3 { grid-column: 7 / 9; }
.gal-s4 { grid-column: 9 / 11; }
.gal-m2 .polaroid img { aspect-ratio: 16 / 10; }
.gal-branch { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gal-branch .gal-m { grid-column: span 2; }
.gal-branch .gal-s { grid-column: span 1; }

/* ---------- รูปติดเทป / โพสต์อิต (ใช้ทั้งหน้า) ---------- */
.hand { font-family: var(--hand); font-weight: 600; letter-spacing: 0; }
.polaroid { position: relative; margin: 0; padding: 12px 12px 10px; background: var(--white); box-shadow: var(--paper-lift); }
.polaroid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.polaroid figcaption { padding: 10px 4px 2px; font-size: 20px; line-height: 1.35; color: var(--ink); text-align: center; }
.pol-l { transform: rotate(-1.4deg); }
.pol-r { transform: rotate(1.2deg); }
.tape { position: absolute; z-index: 2; top: -13px; left: 50%; width: 104px; height: 26px; margin-left: -52px; background: var(--tape); transform: rotate(-3deg); box-shadow: 0 1px 1px rgba(60,46,24,.08); pointer-events: none; }
.pol-r .tape { transform: rotate(4deg); }
.postit { position: relative; margin: 0; padding: 18px 22px 20px; width: fit-content; max-width: 320px; background: var(--note-y); color: var(--ink); box-shadow: 0 1px 2px rgba(60,46,24,.12), 0 16px 22px -16px rgba(60,46,24,.45); transform: rotate(1.6deg); }
.postit::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: rgba(60,46,24,.035); }
.postit-s { background: var(--note-s); }
.postit-b { background: var(--note-b); }
.postit-h { margin: 0 0 6px; font-size: 22px; line-height: 1.35; }
.postit ul li { font-size: 20px; line-height: 1.5; padding-left: 18px; position: relative; }
.postit ul li::before { content: "–"; position: absolute; left: 0; }

/* ---------- สมุดบันทึกการดูแล (2026-11-03 แทนแผ่นเขียวสน) ----------
   หน้าคู่บนพื้นครีม · แถบคั่นหน้าสีกระดาษยื่นจากขอบขวา = แท็บ · ปกหนังเขียวเปิดครั้งเดียวเมื่อเลื่อนถึง (.fx เท่านั้น)
   สีเขียวเหลือแค่ปกที่หายไปหลังเปิด เนื้อหาทั้งหมดอยู่บนกระดาษ */
.care-sec { background: var(--cream); padding: var(--s9) 0; overflow: clip; }
.notebook { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 196px; align-items: start; }
.nb-book { grid-column: 1; grid-row: 1; position: relative; perspective: 2400px; }
.nb-tabs { grid-column: 2; grid-row: 1; position: relative; z-index: 4; display: flex; flex-direction: column; gap: 6px; margin-top: var(--s6); }
.care-tab { display: flex; align-items: center; gap: var(--s2); min-height: 66px; padding: 10px 14px 10px 16px; margin-left: -1px; border-radius: 0 14px 14px 0; color: var(--ink); text-decoration: none; font: 500 19px/1.35 var(--sans); box-shadow: 3px 2px 6px -2px rgba(60,46,24,.22); transition: transform var(--t-150) var(--ease-out), background-color var(--t-150) var(--ease-out); }
.care-tab > span { display: block; min-width: 0; text-wrap: balance; }
.care-tab .part { display: inline; }
.care-tab .ic { width: 24px; height: 24px; color: var(--pine); flex: 0 0 auto; }
.nb-tab-1 { background: var(--note-y); }
.nb-tab-2 { background: var(--note-s); }
.nb-tab-3 { background: var(--note-b); }
.nb-tab-4 { background: var(--note-c); }
.care-tab:hover { transform: translateX(5px); }
.care-tab[aria-selected="true"] { background: var(--paper); font-weight: 600; transform: translateX(0); box-shadow: 3px 2px 6px -2px rgba(60,46,24,.18), inset 4px 0 0 var(--champagne); }
.care-ind { display: none; }
.nb-pages { position: relative; z-index: 1; }
.care-panel { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); border-radius: 4px; background: var(--paper);
  box-shadow: 0 1px 0 #ECE3D0, 0 2px 0 var(--paper), 0 3px 0 #E6DBC6, 0 4px 0 var(--paper), 0 5px 0 #E1D5BE, 0 30px 50px -26px rgba(60,46,24,.40); }
.care-panel[hidden] { display: none; }
.nb-page { position: relative; min-height: 540px; padding: var(--s6) var(--s6) var(--s6); min-width: 0; }
.nb-left { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4); padding-left: var(--s5); padding-right: var(--s5); border-radius: 4px 0 0 4px; background: linear-gradient(270deg, var(--paper-shade), rgba(120,98,62,0) 9%); }
.nb-right { border-radius: 0 4px 4px 0; padding-top: 40px; padding-left: 76px; padding-right: var(--s5); line-height: 40px;
  background: linear-gradient(90deg, var(--paper-shade), rgba(120,98,62,0) 9%),
              linear-gradient(90deg, transparent 51px, var(--margin-line) 51px, var(--margin-line) 52px, transparent 52px),
              repeating-linear-gradient(180deg, transparent 0 39px, var(--rule-line) 39px 40px); }
.nb-left h3 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.4; color: var(--ink); }
.nb-stick { position: relative; width: 100%; margin-top: var(--s2); }
.nb-stick { display: flex; flex-direction: column; }
.nb-stick.has-photo { padding-top: var(--s2); }
.nb-photo { width: 74%; max-width: 300px; margin-left: var(--s1); }
.nb-photo figcaption { text-align: left; padding-left: 2px; }
/* โพสต์อิตแปะใต้รูป ชิดขวา ไม่ทับคำบรรยายรูป */
.nb-stick.has-photo .postit { align-self: flex-end; max-width: 260px; margin: var(--s2) -12px 0 0; transform: rotate(2.4deg); z-index: 3; }

.nb-stick:not(.has-photo) .postit { margin-left: var(--s1); transform: rotate(-1.6deg); }
.care-list li { padding: 0 0 40px; }
.care-list li:last-child { padding-bottom: 0; }
.care-list strong { display: block; font-weight: 600; color: var(--ink); line-height: 40px; }
.care-list p { margin: 0; line-height: 40px; color: var(--body); }
/* ปก: อยู่เหนือหน้าขวา หมุนรอบสันไปทางซ้าย แล้วหายไป เหลือกระดาษ */
.nb-cover { display: none; }
.fx .nb-cover { display: block; position: absolute; z-index: 5; top: 0; bottom: 0; left: calc(500% / 11); right: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform 900ms var(--ease-io), opacity 250ms linear 860ms, visibility 0s linear 1120ms; }
.nb-cover-front, .nb-cover-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 0 6px 6px 0; }
.nb-cover-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); text-align: center; color: var(--gold);
  background: radial-gradient(120% 90% at 30% 20%, #1D604D 0%, var(--pine) 55%, var(--pine-night) 100%); box-shadow: 0 24px 40px -22px rgba(15,59,47,.6); }
.nb-cover-front::after { content: ""; position: absolute; inset: 14px; border: 1px dashed rgba(232,217,168,.5); border-radius: 2px; pointer-events: none; }
.nb-cover-front img { width: 64px; height: 64px; border-radius: 50%; background: var(--white); }
.nb-cover-title { font: 400 40px/1.3 var(--serif); color: var(--gold); }
.nb-cover-rule { width: 56px; height: 1px; background: var(--gold); }
.nb-cover-sub { font: 400 19px/1.6 var(--serif); color: var(--gold); }
.nb-cover-back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; background: #EDE3CF; }
.fx .notebook.is-open .nb-cover { transform: rotateY(-180deg); visibility: hidden; }
/* จางที่หน้าปกแทนตัวปก: opacity บนตัวที่มี preserve-3d ทำให้เห็นหน้าปกกลับด้านตอนพลิก (ตรวจรอบ 2026-11-05) */
.fx .nb-cover > * { transition: opacity 250ms linear 860ms; }
.fx .notebook.is-open .nb-cover > * { opacity: 0; }
.fx .notebook:not(.is-open) .nb-left { opacity: 0; }
.fx .notebook .nb-left { transition: opacity var(--t-300) var(--ease-out) 520ms; }
.fx .notebook:not(.is-open) .nb-tabs { opacity: 0; transform: translateX(-24px); }
.fx .notebook .nb-tabs { transition: opacity var(--t-300) var(--ease-out) 760ms, transform var(--t-300) var(--ease-out) 760ms; }
/* เปลี่ยนแถบ = พลิกหน้าขวาเข้ามาจากสัน */
.fx .care-panel.is-entering .nb-right { transform-origin: left center; animation: nb-turn var(--t-300) var(--ease-out) both; }
.fx .care-panel.is-entering .nb-left { animation: nb-fade var(--t-200) var(--ease-out) both; }
@keyframes nb-turn { from { transform: perspective(1600px) rotateY(-28deg); opacity: .25; } to { transform: none; opacity: 1; } }
@keyframes nb-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- การ์ดราคาแบบโรงแรม ---------- */
.rates { background: var(--parchment); padding: var(--s9) 0; }
.ratecard { position: relative; max-width: 960px; margin: 0 auto; background: var(--cream); padding: var(--s7) var(--s7) var(--s6);
  box-shadow: inset 0 0 0 1px var(--line-gold), inset 0 0 0 10px var(--cream), inset 0 0 0 11px var(--line-gold), var(--lift); }
.rc-cols { display: grid; grid-template-columns: 1fr 1fr; }
.rc-col { text-align: center; padding: 0 var(--s5); }
.rc-col + .rc-col { border-left: 1px solid var(--line-gold); }
.rc-col h3 { font-size: 30px; }
.rc-brand { font-size: var(--fs-meta); color: var(--muted); margin: 4px 0 var(--s4); }
.rc-price { display: flex; flex-direction: column; align-items: center; margin: 0 0 var(--s2); }
.rc-price small { font-size: var(--fs-meta); color: var(--gold-text); }
.rc-price .num { font-size: clamp(56px, 6vw, 80px); line-height: 1.05; color: var(--pine); font-weight: 500; }
.ratecard-1 .rc-cols { grid-template-columns: 1fr; }
.rc-inc { display: grid; grid-template-columns: 3fr 2fr; gap: var(--s6); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line-gold); }
.rc-inc h3 { font-size: 21px; margin-bottom: var(--s2); }
.rc-inc-sub { margin: 0 0 var(--s1); color: var(--muted); font-size: var(--fs-meta); }
.br-why { display: grid; gap: var(--s1); margin: var(--s3) 0 0; }
.br-why li { display: flex; gap: var(--s2); align-items: flex-start; color: var(--body); }
.br-why .ic { color: var(--sage-d); margin-top: 6px; flex: 0 0 auto; }
.br-why strong { color: var(--ink); font-weight: 600; }
.rc-inc li { display: flex; gap: var(--s2); align-items: center; padding: 6px 0; color: var(--ink); }
.rc-inc .ic { color: var(--sage-d); }
.rc-no .ic { color: var(--gold-text); transform: rotate(45deg); }
.rc-promo { display: flex; justify-content: center; gap: var(--s2); align-items: center; margin: var(--s5) auto 0; padding: 12px var(--s4); width: fit-content; max-width: 100%; color: var(--ink); background: rgba(232,217,168,.32); border: 1px solid var(--line-gold); border-radius: var(--pill); }
.rc-promo .ic { color: var(--gold-text); flex: 0 0 auto; }
.rc-note-it { position: absolute; top: -30px; right: -26px; max-width: 230px; font-size: 21px; line-height: 1.4; transform: rotate(3.5deg); z-index: 2; }
.rc-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin-top: var(--s6); }
.rc-note { text-align: center; margin: var(--s4) 0 0; color: var(--muted); font-size: 17px; }

/* ---------- ขั้นตอน (เป็นลำดับจริง) ---------- */
.steps { padding: var(--s9) 0; }
.steps-list { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); counter-reset: s; }
.steps-list::before, .steps-list::after { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--line-gold); }
.steps-list::after { background: var(--gold-text); transform: scaleX(var(--p, 1)); transform-origin: left; }
.steps-list li { position: relative; }
.step-n { display: inline-block; font-size: 56px; line-height: 1; color: var(--gold-text); background: var(--cream); padding-right: var(--s2); position: relative; z-index: 1; margin-bottom: var(--s4); }
.steps-list h3 { font-size: 23px; margin-bottom: var(--s2); }
.steps-list p { margin: 0; }

/* ---------- สาขา ---------- */
.branches { padding: var(--s8) 0 var(--s9); border-top: 1px solid var(--line); }
.br { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s7); align-items: center; padding: var(--s6) 0; }
.br + .br { border-top: 1px solid var(--line); }
.br-rev .br-photo { order: 2; }
.br-photo { margin: 0; padding: var(--s3) var(--s2); }
.br-pol img { aspect-ratio: 16 / 10; }
.br-small { grid-template-columns: minmax(0, 520px) 1fr; }
.br-small.br-rev { grid-template-columns: 1fr minmax(0, 520px); }
.br-small .br-pol img { aspect-ratio: 4 / 3; }
.br-brand { font-size: var(--fs-meta); color: var(--gold-text); margin: 0 0 var(--s1); }
.br-text h3 { font-size: clamp(30px, 3vw, 40px); margin-bottom: var(--s2); }
.br-text h3 a, .other h3 a { color: var(--ink); text-decoration: none; }
.br-text h3 a:hover, .other h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.br-tag { color: var(--body); }
.br-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); margin-top: var(--s4); }
.map-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: var(--s6); align-items: center; }
.map-frame { aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--parchment); border: 1px solid var(--line); }
.map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.other { margin-top: var(--s7); padding: var(--s5) 0 0; border-top: 1px solid var(--line-gold); max-width: 40em; }
.other h3 { font-size: 30px; margin-bottom: var(--s1); }
.other-price .num { font-size: 30px; color: var(--pine); }

/* ---------- ติดตามเรา: การ์ดกระดาษติดเทป ฟีดอยู่ในกล่องสูงตายตัว ---------- */
.social { padding: var(--s9) 0; border-top: 1px solid var(--line); }
.soc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); gap: var(--s5); align-items: start; }
.soc-card { position: relative; padding: var(--s4); background: var(--paper); box-shadow: var(--paper-lift); border-radius: 3px; min-width: 0; }
.soc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px var(--s2); margin-bottom: var(--s3); }
.soc-head h3 { font-size: 26px; }
.soc-slot { height: 560px; display: grid; place-items: center; overflow: hidden; background: var(--parchment); border: 1px solid var(--line); }
.soc-slot iframe { width: 100%; height: 100%; border: 0; display: block; }
.soc-slot.is-loaded { display: block; }
.soc-ig { height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s1); }
.soc-ig iframe { flex: 0 0 auto; height: 620px; background: var(--white); }
.soc-branches li { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.soc-branches li:first-child { border-top: 0; padding-top: 0; }
.soc-branches strong { display: block; font-weight: 600; color: var(--ink); margin-bottom: var(--s1); }
.soc-branches .btn { margin-top: var(--s3); min-height: 48px; padding: 0 22px; font-size: 16px; }

/* ---------- คำถาม ---------- */
.faq { padding: var(--s9) 0; background: var(--parchment); }
.faq-in { display: grid; grid-template-columns: 4fr 7fr; gap: var(--s7); align-items: start; }
.faq-in .sec-head { position: sticky; top: calc(var(--header-h) + var(--s5)); }
.faq-list details { border-top: 1px solid var(--line-gold); }
.faq-list details:last-child { border-bottom: 1px solid var(--line-gold); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 72px; padding: var(--s3) 0; cursor: pointer; list-style: none; font: 400 22px/1.45 var(--serif); color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: 0 0 auto; width: 18px; height: 18px; }
.pm::before, .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gold-text); transition: transform var(--t-300) var(--ease-out); }
.pm::after { transform: rotate(90deg); }
details[open] .pm::after { transform: rotate(0deg); }
details[open] .pm::before { transform: rotate(180deg); }
.faq-list details p { padding: 0 var(--s6) var(--s4) 0; margin: 0; }

/* ---------- ปิดหน้า ---------- */
/* 2026-11-03: ส่วนปิดท้ายเป็นพื้นครีม ไม่ให้เขียวต่อกับ footer เป็นแผ่นยาว */
.close { background: var(--cream); color: var(--body); padding: var(--s9) 0 var(--s8); text-align: center; border-top: 1px solid var(--line-gold); }
.close-in { display: flex; flex-direction: column; align-items: center; }
.close h2 { color: var(--ink); max-width: 18em; }
.close-lead { max-width: 32em; }
.close-phone { display: inline-block; font-size: clamp(56px, 8vw, 104px); line-height: 1.1; color: var(--pine); text-decoration: none; margin: var(--s4) 0 var(--s5); }
.close-phone:hover { color: var(--gold-text); }
.close-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.close-mail { margin: var(--s4) 0 0; }
.close .quiet { color: var(--gold-text); }

/* ---------- ท้ายหน้า ---------- */
.site-footer { background: var(--pine-night); color: var(--on-dark-2); padding: var(--s8) 0 var(--s6); font-size: 16px; }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--s6); }
.foot-brand { display: flex; gap: var(--s3); align-items: flex-start; }
.foot-brand img { width: 56px; height: 56px; border-radius: 50%; background: var(--white); }
.foot-brand strong { display: block; font: 400 19px/1.5 var(--serif); color: var(--on-dark); margin-bottom: var(--s2); }
.foot-brand p { margin: 0; color: var(--gold); }
.foot-nav, .foot-contact { display: flex; flex-direction: column; }
.foot-nav a, .foot-contact a { display: inline-flex; align-items: center; gap: 10px; padding: 9px 0; color: var(--on-dark); text-decoration: none; }
.foot-nav a:hover, .foot-contact a:hover { color: var(--gold); }
.foot-contact .ic { color: var(--gold); }
.foot-copy { grid-column: 1 / -1; margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line-gold-dark); color: rgba(251,249,245,.72); font-size: 15px; }

/* ---------- แถบล่างมือถือ ---------- */
.dock { display: none; }

/* ---------- เอฟเฟกต์เลื่อน (ทั้งหมดอยู่ใต้ .fx) ---------- */
/* ขึ้นทีละบรรทัด: กล่องบรรทัดเผื่อที่ให้สระบนและวรรณยุกต์ไทย ไม่ตัดหัว */
[data-lines] .ln { display: block; }
.fx [data-lines] .ln { overflow: hidden; padding: .5em 0 .26em; margin: -.5em 0 -.26em; }
.fx [data-lines] .ln > span { display: inline-block; transform: translateY(110%); transition: transform var(--t-reveal) var(--ease-out); }
.fx [data-lines].in .ln > span { transform: none; }
.fx [data-lines].in .ln:nth-child(2) > span { transition-delay: 140ms; }
.fx [data-lines].in .ln:nth-child(3) > span { transition-delay: 280ms; }
.fx .hero [data-lines] .ln > span { transition-delay: 120ms; }
.fx .hero [data-lines] .ln:nth-child(2) > span { transition-delay: 240ms; }
.fx-first .hero [data-lines] .ln > span { transition-delay: 480ms; }
.fx-first .hero [data-lines] .ln:nth-child(2) > span { transition-delay: 600ms; }
.fx .hero .hero-label, .fx .hero .hero-sub, .fx .hero .hero-cta, .fx .hero .hero-rates { opacity: 0; transition: opacity 800ms var(--ease-out) 380ms; }
.fx-first .hero .hero-label, .fx-first .hero .hero-sub, .fx-first .hero .hero-cta, .fx-first .hero .hero-rates { transition-delay: 760ms; }
.fx .hero.in .hero-label, .fx .hero.in .hero-sub, .fx .hero.in .hero-cta, .fx .hero.in .hero-rates { opacity: 1; }
.fx .hero .hero-label { transition-delay: 160ms; }
.fx-first .hero .hero-label { transition-delay: 560ms; }
/* เส้นทองวาด */
.fx [data-draw] { transform: scaleX(0); transition: transform 1400ms var(--ease-io) 200ms; }
.fx [data-draw].in { transform: scaleX(1); }
.fx .hero [data-draw] { transition-delay: 420ms; }
.fx-first .hero [data-draw] { transition-delay: 820ms; }
/* รูปเปิดแบบม่าน */
.fx [data-clip] .gal-img, .fx [data-clip] > img, .fx .hero-frame[data-clip] img { clip-path: inset(0 0 100% 0); transition: clip-path var(--t-reveal) var(--ease-io); }
.fx [data-clip] img { transform: scale(1.08); transition: transform 1600ms var(--ease-out), clip-path var(--t-reveal) var(--ease-io); }
.fx [data-clip].in .gal-img, .fx [data-clip].in > img, .fx .hero-frame[data-clip].in img { clip-path: inset(0 0 0 0); }
.fx [data-clip].in img { transform: none; }
/* ชิ้นทั่วไป: จางเข้าเบา ๆ ใช้น้อยที่สุด */
.fx [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: var(--d, 0ms); }
.fx [data-reveal].in { opacity: 1; transform: none; }

/* ---------- จอกลาง ---------- */
@media (max-width: 1080px) {
  .nav-toggle { display: flex; }
  .site-nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); background: var(--pine); color: var(--on-dark); opacity: 0; visibility: hidden; transition: opacity var(--t-300) var(--ease-out), visibility 0s linear var(--t-300); }
  .site-nav.open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .site-nav a { font: 400 26px/1.4 var(--serif); padding: 10px 16px; }
  .site-nav .nav-extra { display: inline-flex; }
  .site-nav .nav-call { margin: var(--s4) 0 0; font-family: var(--sans); border-color: var(--gold); color: var(--gold); }
  /* เมนูเต็มจอพื้นเขียว: ชี้ = พื้นทองจาง ตัวทอง · ส่วนที่อยู่ = ขอบทอง (ต้องชนะกฎหัวเว็บครีมด้านบน) */
  .site-nav a:not(.nav-call):hover, .site-nav a:not(.nav-call):focus-visible,
  .site-header.is-scrolled .site-nav a:not(.nav-call):hover, .site-header.is-scrolled .site-nav a:not(.nav-call):focus-visible { background: rgba(232,217,168,.16); color: var(--gold); }
  .site-nav a.is-here, .site-nav a[aria-current="page"],
  .site-header.is-scrolled .site-nav a.is-here, .site-header.is-scrolled .site-nav a[aria-current="page"] { background: transparent; color: var(--gold); box-shadow: inset 0 0 0 1px rgba(232,217,168,.6); }
  .site-nav .nav-call:hover, .site-nav .nav-call:focus-visible,
  .site-header.is-scrolled .site-nav .nav-call:hover, .site-header.is-scrolled .site-nav .nav-call:focus-visible { background: var(--gold); color: var(--pine-night); border-color: var(--gold); }
  .nav-open .site-header { color: var(--on-dark); background: transparent; border-bottom-color: transparent; }
  .nav-open { overflow: hidden; }
  .brand, .nav-toggle { position: relative; z-index: 1; }
  .notebook { grid-template-columns: minmax(0, 1fr) 200px; }
  .care-tab { font-size: 19px; padding: 10px 12px; }
  .soc-grid { grid-template-columns: 1fr 1fr; }
  .soc-map { grid-column: 1 / -1; }
  .faq-in { grid-template-columns: 1fr; gap: 0; }
  .faq-in .sec-head { position: static; margin-bottom: var(--s5); }
  .map-wrap, .br, .br-small, .br-small.br-rev { grid-template-columns: 1fr; gap: var(--s5); }
  .br-rev .br-photo { order: 0; }
  .br-small .br-photo { max-width: 560px; }
  .hero-rates { margin-bottom: calc(var(--s4) + 80px); }
  .hr-item { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; }
  .hr-price .num { font-size: 36px; }
  .hero-framed .hero-in { flex-direction: column; align-items: flex-start; gap: var(--s5); }
  .hero-frame { flex: none; width: 100%; max-width: 560px; }
  .dock { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; padding: 8px var(--s3) calc(8px + env(safe-area-inset-bottom)); background: var(--cream); border-top: 1px solid var(--line-gold); }
  .dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border-radius: 14px; font: 500 15px/1.2 var(--sans); color: var(--pine); text-decoration: none; border: 1px solid var(--line); }
  .dock .ic { color: var(--gold-text); }
  .dock .dock-call { background: var(--pine); color: var(--on-dark); border-color: var(--pine); }
  .dock .dock-call .ic { color: var(--gold); }
  .site-footer { padding-bottom: calc(var(--s6) + 80px); }
}

/* ---------- สมุดหน้าเดียว (แท็บเล็ตและมือถือ) ---------- */
@media (max-width: 960px) {
  /* สมุดหน้าเดียว: แถบคั่นหน้าเรียงด้านบน เลื่อนในแถวของตัวเอง ไม่มีปก */
  .notebook { grid-template-columns: minmax(0, 1fr); }
  .nb-tabs { grid-column: 1; grid-row: 1; flex-direction: row; gap: 6px; margin: 0; padding: 4px 2px 0; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
  .nb-tabs::-webkit-scrollbar { display: none; }
  .nb-tabs li { flex: 0 0 auto; scroll-snap-align: start; }
  .nb-book { grid-row: 2; }
  .care-tab { width: 158px; min-height: 76px; align-items: flex-start; flex-direction: column; gap: 4px; padding: 10px 12px 12px; margin: 0 0 -1px; border-radius: 12px 12px 0 0; font-size: 19px; box-shadow: 0 -2px 6px -3px rgba(60,46,24,.22); }
  .care-tab:hover { transform: translateY(-3px); }
  .care-tab[aria-selected="true"] { transform: none; box-shadow: 0 -2px 6px -3px rgba(60,46,24,.18), inset 0 4px 0 var(--champagne); }
  .fx .nb-cover { display: none; }
  .fx .notebook:not(.is-open) .nb-left, .fx .notebook:not(.is-open) .nb-tabs { opacity: 1; transform: none; }
  .care-panel { grid-template-columns: 1fr; border-radius: 0 0 4px 4px; }
  .nb-page { min-height: 0; padding: var(--s5) var(--s4); }
  .nb-left { background: none; gap: var(--s3); }
  .nb-right { padding: 36px 18px var(--s4) 42px; line-height: 36px; background: linear-gradient(90deg, transparent 27px, var(--margin-line) 27px, var(--margin-line) 28px, transparent 28px), repeating-linear-gradient(180deg, transparent 0 35px, var(--rule-line) 35px 36px); border-top: 1px dashed rgba(120,98,62,.25); }
  .care-list li { padding-bottom: 36px; }
  .care-list strong, .care-list p { line-height: 36px; }
  .nb-photo { width: 62%; max-width: 300px; }
  .nb-stick.has-photo .postit { margin-right: var(--s1); }
  .postit ul li { font-size: 19px; }
}

/* ---------- มือถือ ---------- */
@media (max-width: 720px) {
  :root { --header-h: 68px; --fs-h3: 24px; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .brand-t small { display: none; }
  .brand-t strong { font-size: 18px; }
  .hero-in { padding-top: calc(var(--header-h) + var(--s5)); padding-bottom: var(--s4); }
  .hero-media img { object-position: 12% 70%; }
  /* จอแคบ ตัวอักษรกินความสูงเกือบทั้งรูป จึงต้องเงาทั้งแนวตั้ง แต่ยังเป็นโทนอุ่นเป็นกลาง ไม่ใช่เขียว */
  .hero-scrim { background:
    radial-gradient(ellipse 90% 42% at 50% 38%, rgba(24,19,14,.50) 0%, rgba(24,19,14,.30) 60%, rgba(24,19,14,0) 100%),
    linear-gradient(180deg, rgba(24,19,14,.72) 0%, rgba(24,19,14,.52) 22%, rgba(24,19,14,.40) 48%, rgba(24,19,14,.70) 70%, rgba(24,19,14,.92) 100%); }
  .hero-h { font-size: clamp(38px, 11vw, 48px); }
  .hero-sub { font-size: 19px; margin-bottom: var(--s4); }
  .hero-cta .btn-line-dark { display: none; }
  .hero-rates { grid-template-columns: 1fr 1fr; margin-bottom: calc(var(--s3) + 80px); }
  .hr-item { padding: var(--s3) var(--s2) var(--s3) 0; }
  .hr-item + .hr-item { padding-left: var(--s3); }
  .hr-name { font-size: 19px; }
  .hr-price { flex-wrap: wrap; column-gap: 6px; row-gap: 0; }
  .hr-price small:first-child { flex-basis: 100%; }
  .hr-price .num { font-size: 34px; }
  .hero-framed .hero-cta { display: none; }
  .hero-framed .hero-in { gap: var(--s4); }
  .hero-frame { padding: 8px; }
  .hero-frame img { aspect-ratio: 16 / 10; }
  .intro { padding: var(--s8) 0 var(--s7); }
  .intro-quote { font-size: 28px; }
  .pillars { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }
  .gallery-sec, .care-sec, .rates, .steps, .faq, .close { padding: var(--s8) 0; }
  .sec-head { margin-bottom: var(--s5); }
  .gal { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .gal-l1, .gal-m2 { grid-column: 1 / -1; grid-row: auto; }
  .gal-s3, .gal-s4 { grid-column: auto; }
  .gal-branch .gal-m { grid-column: 1 / -1; }
  .gal figcaption { flex-direction: column; gap: 0; }
  .rc-note-it { position: relative; top: 0; right: 0; margin: var(--s4) auto 0; transform: rotate(-1.5deg); }
  .soc-grid { grid-template-columns: 1fr; gap: var(--s6); }
  .soc-slot { height: 420px; }
  .gal-board { column-gap: var(--s4); row-gap: var(--s5); }
  .ratecard { padding: var(--s6) var(--s4) var(--s5); }
  .rc-cols { grid-template-columns: 1fr; }
  .rc-col { padding: 0 0 var(--s4); }
  .rc-col + .rc-col { border-left: 0; border-top: 1px solid var(--line-gold); padding-top: var(--s4); }
  .rc-inc { grid-template-columns: 1fr; gap: var(--s4); }
  .rc-actions .btn { width: 100%; padding: 0 18px; font-size: 16px; }
  .steps-list { grid-template-columns: 1fr; gap: var(--s5); padding-left: var(--s6); }
  .steps-list::before, .steps-list::after { left: 14px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .steps-list::after { transform: scaleY(var(--p, 1)); transform-origin: top; }
  .step-n { position: absolute; left: calc(-1 * var(--s6)); top: 0; font-size: 30px; padding: 4px 0; background: var(--cream); margin: 0; }
  .faq-list summary { font-size: 20px; }
  .faq-list details p { padding-right: 0; }
  .close-phone { font-size: 52px; }
  .foot-in { grid-template-columns: 1fr; gap: var(--s5); }
}

/* ---------- ลดการเคลื่อนไหว: ไม่มีอะไรขยับ เนื้อหาครบ ---------- */
/* ===================== 2026-11-03 รอบ 5: เจ้าของบอก "ลดเขียวมากไป หน้าเป็นครีมล้วน" + "บนคอมรูป/สมุดเล็กไป เหลือที่ว่างซ้ายขวา"
   เขียว 3 ระดับกระจายทั้งหน้า (ไม่ใช่แถบเขียวก้อนเดียว): เขียวเข้ม = ขั้นตอน · เขียวเซจ = โต๊ะรองสมุด · เขียวอ่อน = โซเชียล
   ขนาด: ขยายเฉพาะจอกว้าง (min-width) มือถือไม่เปลี่ยน */
:root { --sage-wash: #E8F0EA; --sage-desk: #CADDD0; --sage-desk-2: #BFD5C6; }

/* สมุดวางบนพื้นใบไม้ (เจ้าของ 2026-11-03: "เขียวอ่อนดูแปลก ลองใช้รูปใบไม้แบบเดิม")
   d_leaves.webp = tex_services.webp (พื้นผิวใบไม้ที่เจ้าของเลือกใช้บนเว็บเดิม) เบลอเพิ่ม ไม่ใช้ภาพทางเดิน/สวนที่อาจอ่านเป็นสถานที่ของศูนย์ */
/* 2026-11-03 รอบ 7: เจ้าของว่าใบไม้เข้ม "ครึ้มไป" อยากได้ "ยืนใต้ร่มไม้ที่มีแสงแดดส่องผ่าน ไม่ทึบ"
   ใบไม้สว่าง (d_canopy.webp จาก tex_services.webp) + แสงอุ่นจากมุมบนซ้าย + ลำแสงเฉียงบาง ๆ + ม่านโปร่ง
   จุดแดดลอดใบไม้ (::before) ขยับช้า ๆ ปิดเมื่อผู้ใช้ขอลดการเคลื่อนไหว */
.care-sec { background:
    radial-gradient(ellipse 62% 58% at 16% 0%, rgba(255,241,204,.78), rgba(255,241,204,0) 72%),
    linear-gradient(112deg, transparent 16%, rgba(255,249,228,.34) 23%, transparent 30%, transparent 41%, rgba(255,249,228,.24) 46%, transparent 52%, transparent 63%, rgba(255,249,228,.20) 67%, transparent 72%),
    linear-gradient(180deg, rgba(251,249,242,.74), rgba(247,245,234,.64) 45%, rgba(251,249,242,.80)),   /* เจ้าของ 2026-11-03: ลดสีใบไม้ */
    url("assets/img/d_canopy.webp") center / cover no-repeat, #DCE6C6; }
.care-sec::before { content: ""; position: absolute; inset: -10%; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: .9;
  background:
    radial-gradient(circle at 22% 30%, rgba(255,247,214,.55) 0, rgba(255,247,214,0) 7%),
    radial-gradient(circle at 64% 18%, rgba(255,247,214,.45) 0, rgba(255,247,214,0) 6%),
    radial-gradient(circle at 82% 52%, rgba(255,247,214,.40) 0, rgba(255,247,214,0) 8%),
    radial-gradient(circle at 38% 70%, rgba(255,247,214,.35) 0, rgba(255,247,214,0) 6%),
    radial-gradient(circle at 10% 86%, rgba(255,247,214,.30) 0, rgba(255,247,214,0) 7%);
  animation: dapple 22s ease-in-out infinite alternate; }
@keyframes dapple { from { transform: translate3d(-1.5%, -1%, 0) scale(1); } to { transform: translate3d(1.5%, 1.2%, 0) scale(1.04); } }
.care-sec > .wrap { position: relative; z-index: 1; }
.care-sec .sec-head h2 { color: var(--ink); }
.care-sec .sec-sub { color: var(--body); }
.care-sec .rule { background: var(--pine); }
@media (prefers-reduced-motion: reduce) { .care-sec::before { animation: none; } }
.care-sec .nb-cover-front { box-shadow: 0 0 0 1px rgba(232,217,168,.35), 0 30px 50px -20px rgba(0,0,0,.55); }

/* ขั้นตอนเข้าพัก = แถบเขียวเข้มหนึ่งแถบ เลขทอง */
.steps { background: var(--pine); color: var(--on-dark-2); }
.steps h2, .steps .steps-list h3 { color: var(--on-dark); }
.steps .sec-sub, .steps .steps-list p { color: var(--on-dark-2); }
.steps .rule { background: var(--gold); }
.steps .steps-list::before { background: var(--line-gold-dark); }
.steps .steps-list::after { background: var(--gold); }
.steps .step-n { color: var(--gold); background: var(--pine); }

/* โซเชียล = ใบไม้จาง ๆ ใต้ม่านครีม การ์ดกระดาษยังเด่น (แทนพื้นเขียวอ่อนที่เจ้าของว่าดูแปลก) */
.social { background: linear-gradient(rgba(251,249,245,.93), rgba(251,249,245,.95)), url("assets/img/d_leaves.webp") center / cover no-repeat, var(--cream); border-top: 0; }
/* กล่องฟีดเตี้ยลงให้สมส่วน (เดิม 560 สูงเกินความกว้าง) ความกว้างจริงวัดใน site.js ตอนโหลดฟีด */
@media (min-width: 721px) { .soc-slot { height: 480px; } }

@media (min-width: 1360px) {
  :root { --wrap: 1320px; }
}
@media (min-width: 1600px) {
  :root { --wrap: 1440px; }
}
@media (min-width: 1200px) {
  /* แกลเลอรี: ตาราง 14 ช่อง รูปใหญ่กว้างขึ้น รูปเล็กยังไม่เกินขนาดไฟล์จริง (สวน 672px, วงเวียนใหญ่ 731px) */
  .gal-board { grid-template-columns: repeat(14, minmax(0, 1fr)); column-gap: var(--s5); }
  .gal-l1 { grid-column: 1 / 9; grid-row: 1 / 3; }
  .gal-m2 { grid-column: 9 / 15; }
  .gal-s3 { grid-column: 9 / 12; }
  .gal-s4 { grid-column: 12 / 15; }
  .polaroid { padding: 14px 14px 12px; }
  .polaroid figcaption { font-size: 22px; }

  /* สมุด: หน้ากว้างขึ้น ตัวหนังสือใหญ่ขึ้น เส้นบรรทัดห่างตามตัวหนังสือ (44px) */
  .notebook { grid-template-columns: minmax(0, 1fr) 224px; }
  .nb-page { min-height: 620px; }
  .nb-left h3 { font-size: clamp(32px, 2.6vw, 42px); }
  .nb-right { font-size: 21px; line-height: 44px; padding-top: 44px; padding-left: 84px;
    background: linear-gradient(90deg, var(--paper-shade), rgba(120,98,62,0) 9%),
                linear-gradient(90deg, transparent 57px, var(--margin-line) 57px, var(--margin-line) 58px, transparent 58px),
                repeating-linear-gradient(180deg, transparent 0 43px, var(--rule-line) 43px 44px); }
  /* ตัวหนังสือต้องลงเส้นเดียวกับบรรทัด 44px (เดิมค้าง 40px จึงเลื่อนทับเส้น) */
  .care-list li { padding-bottom: 44px; }
  .care-list strong, .care-list p { line-height: 44px; }
  .care-tab { min-height: 74px; font-size: 20px; }
  .nb-photo { width: 82%; max-width: 400px; }
  .postit { max-width: 380px; padding: 20px 26px 22px; }
  .postit-h { font-size: 24px; }
  .postit ul li { font-size: 22px; }
  .nb-stick.has-photo .postit { max-width: 320px; }
}


/* รายการอุปกรณ์บนโพสต์อิตเป็น Sarabun อ่านง่าย ลายมือเหลือแค่หัวโน้ต */
.postit ul li { font-family: var(--sans); font-size: 19px; line-height: 1.55; }
@media (min-width: 1200px) { .postit ul li { font-size: 20px; } }

/* กรอบโฟกัส: พื้นสว่างใช้เขียวเข้ม (ทองบนครีมได้แค่ราว 2:1) พื้นเข้มยังใช้ทอง */
:focus-visible { outline: 2px solid var(--pine); outline-offset: 2px; }
.hero :focus-visible, .steps :focus-visible, .site-footer :focus-visible, .nb-cover :focus-visible,
.site-header:not(.is-scrolled) :focus-visible, .nav-open .site-nav :focus-visible { outline-color: var(--gold); }

/* มือถือ: Facebook / Instagram / แผนที่ เป็นการ์ดเลื่อนซ้ายขวา แทนกล่องยาวต่อกัน 3 ใบ */
@media (max-width: 720px) {
  .soc-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--s4);
    overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--s3) 2px var(--s4); scrollbar-width: thin; }
  .soc-grid > .soc-card { scroll-snap-align: start; grid-column: auto; }
  .soc-slot { height: 400px; }
}


/* หน้าสาขา: แคปซูลเหลือที่ชื่อสาขา (หน้าปัจจุบัน) อันเดียว ส่วนที่กำลังอ่านใช้เส้นใต้ ไม่ให้มีแคปซูลสองอันพร้อมกัน */
.page-branch .site-nav a.is-here:not([aria-current]),
.page-branch .site-header.is-scrolled .site-nav a.is-here:not([aria-current]) { background: transparent; box-shadow: none; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 7px; text-decoration-color: var(--champagne); }

/* มือถือและแท็บเล็ต: แท็บอาการเป็นตาราง 2x2 เห็นครบทั้ง 4 ข้อ ไม่ต้องเลื่อนข้าง */
@media (max-width: 960px) {
  .nb-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; overflow: visible; scroll-snap-type: none; padding: 4px 0 0; }
  .nb-tabs > li { min-width: 0; }
  .nb-tabs .care-tab { width: 100%; height: 100%; margin: 0; }
}


/* คำบรรยายรูป: ชื่อสาขาขึ้นบรรทัดของตัวเอง ไม่ตัดกลางคำ · รูปช่องเล็กใช้ตัวเล็กลง ถ้ายังไม่พอค่อยยอมตัด (กันล้นกรอบ) */
.polaroid figcaption .nb { display: inline-block; max-width: 100%; }
.gal-s3 .polaroid figcaption, .gal-s4 .polaroid figcaption { font-size: 17px; }
@media (max-width: 1080px) { .gal-s3 .polaroid figcaption .nb, .gal-s4 .polaroid figcaption .nb { white-space: normal; } }


/* ===================== เฟส 2 (2026-11-03): SEO / หน้าผู้ป่วยติดเตียง / รีวิว / ภาษาอังกฤษ ===================== */
/* H1 มีคำค้น ยาวกว่าเดิม จึงย่อขนาดลงจากหัวเรื่องโชว์ ประโยคอารมณ์เดิมเป็นบรรทัดรองตัวเอียงเซอริฟ */
.hero-h-seo { font-size: clamp(36px, 4.6vw, 66px); line-height: 1.25; }
.hero-tag { font: 400 clamp(20px, 1.8vw, 26px)/1.5 var(--serif); font-style: italic; color: var(--gold); margin: var(--s3) 0 0; }
.hero-framed .hero-tag { text-align: left; }
.lang-en .hero-h-seo { letter-spacing: -.015em; }
/* หัวเรื่องยาวขึ้น 2 บรรทัด ป้ายเส้นทางจึงหลุดจากวงเงา ให้ป้ายมีพื้นเงาของตัวเอง (คอนทราสต์ผ่าน 4.5) */
.hero-branch .hero-label { display: inline-block; padding: 4px 14px; border-radius: var(--pill); background: rgba(24,19,14,.46); }

/* ปุ่มสลับภาษา: เห็นทั้งจอกว้างและมือถือ */
.lang-sw { order: 3; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px;
  border-radius: var(--pill); color: inherit; text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: .04em;
  box-shadow: inset 0 0 0 1px currentColor; }
.lang-sw:hover, .lang-sw:focus-visible { background: rgba(251,249,245,.20); }
.site-header.is-scrolled .lang-sw:hover { background: rgba(31,111,92,.10); }
.site-nav { order: 2; }
.nav-toggle { order: 4; }

.intro-q { font: 400 clamp(21px, 1.8vw, 26px)/1.6 var(--serif); font-style: italic; color: var(--body); max-width: 30em; margin: 0 0 var(--s5); }
.bed-link, .nb-more { margin: var(--s4) 0 0; }

/* ค่าดูแลเพิ่มในการ์ดราคา (หน้าผู้ป่วยติดเตียง) */
.rc-add-h { margin-top: var(--s5); }
.rc-add li { display: flex; justify-content: space-between; gap: var(--s3); padding: 8px 0; border-bottom: 1px dashed var(--line-gold); color: var(--ink); }
.rc-add .num { font-size: 22px; color: var(--pine); }

/* รีวิว Google: การ์ดกระดาษติดเทป ข้อความตรงตามต้นฉบับ */
.reviews { padding: var(--s9) 0; background: var(--cream); }
.rv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s5); }
/* การ์ดสรุปคะแนนเป็นช่องแรกของตาราง 3x2 (รีวิว 5 ใบ + สรุป 1 = เต็มสองแถว ไม่มีช่องว่าง) */
.rv-summary { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); padding: var(--s6) var(--s5); border-radius: 3px; background: var(--pine); color: var(--on-dark); }
.rv-summary .quiet { color: var(--gold); }
.rv-score { margin: 0; display: flex; align-items: baseline; gap: var(--s3); }
.rv-score .num { font: 400 64px/1 var(--serif); color: var(--gold); }
.rv-stars { color: var(--gold-text); letter-spacing: .12em; margin: 0; }
.rv-summary .rv-stars { color: var(--gold); }
.rv-meta { margin: 0; color: var(--on-dark); }
.rv-note { margin: 0; color: var(--on-dark); }
.rv-card { position: relative; margin: 0; padding: var(--s5) var(--s5) var(--s4); background: var(--paper); box-shadow: var(--paper-lift); border-radius: 3px; }
.rv-card:nth-child(odd) { transform: rotate(-.6deg); }
.rv-card:nth-child(even) { transform: rotate(.5deg); }
.rv-card blockquote { margin: var(--s2) 0 var(--s3); }
.rv-card blockquote p { margin: 0; color: var(--ink); line-height: 1.75; }
.rv-who { margin: 0; color: var(--muted); }

/* สิ่งที่ครอบครัวมั่นใจได้: โพสต์อิต 4 ใบ */
.promises { padding: var(--s9) 0; background: var(--cream); }
.pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s5); }
.pr-grid .postit { width: auto; max-width: none; }
.pr-grid .pr-1 { transform: rotate(-1.2deg); } .pr-grid .pr-2 { transform: rotate(.8deg); }
.pr-grid .pr-3 { transform: rotate(-.6deg); } .pr-grid .pr-4 { transform: rotate(1.1deg); }
.pr-h { margin: 0 0 6px; font: 700 21px/1.45 var(--sans); color: var(--ink); }
.pr-t { margin: 0; color: var(--body); }

/* หน้าผู้ป่วยติดเตียง: สมุดหน้าคู่แบบนิ่ง (ไม่มีแท็บ ไม่มีปก) บนพื้นใบไม้ */
.nb-static .care-panel { max-width: 1200px; margin: 0 auto; }
.bed-team { padding: var(--s9) 0; }
.bed-team .pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bed-equip { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s5); margin-top: var(--s6); }
.bed-equip li { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.bed-equip .ic { color: var(--sage-d); }
.bed-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.bed-branches .other { margin-top: 0; max-width: none; }

@media (max-width: 960px) {
  .rv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bed-team .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bed-branches { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lang-sw { min-height: 44px; font-size: 14.5px; padding: 0 10px; margin-left: auto; flex: 0 0 auto; }
  .lang-sw + .nav-toggle { margin-left: 8px; }
  .nav-toggle { flex: 0 0 48px; }
  .brand { flex: 0 1 auto; min-width: 0; }
  .brand-t { min-width: 0; }
  .brand-t strong { white-space: nowrap; }
  .header-in { gap: 8px; }
  .brand { gap: 10px; }
  .lang-en .brand-t strong { font-size: 16px; line-height: 1.15; white-space: normal; }   /* อังกฤษตัดที่ช่องว่างได้ 2 บรรทัด */
  .pr-grid { grid-template-columns: 1fr; }
  .rv-grid { grid-template-columns: 1fr; }
  .bed-team .pillars { grid-template-columns: 1fr; }
  .rv-score .num { font-size: 44px; }
  .reviews, .promises, .bed-team { padding: var(--s8) 0; }
}

@media (max-width: 400px) {
  .brand { min-height: 44px; }
  .brand img { width: 40px; height: 40px; }
  .brand-t strong { font-size: 17px; }
  .lang-en .brand-t strong { font-size: 16px; }
}
@media (max-width: 370px) {
  .brand-t strong { font-size: 15.5px; }
}
/* รีวิวแบบ A: การ์ด 3 ใบเท่ากัน คะแนนรวมกับลิงก์อยู่ใต้การ์ด กึ่งกลาง */
.rv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); align-items: stretch; }
.rv-cards .rv-card { display: flex; flex-direction: column; margin: 0; height: 100%; }
.rv-cards blockquote { flex: 1 1 auto; margin: 0; }
.rv-cards blockquote p { font: 400 22px/1.6 var(--serif); color: var(--ink); margin: 0; }
.rv-label { margin-top: var(--s4); color: var(--muted); font-size: 15px; }
.rv-total { margin: var(--s6) 0 0; text-align: center; color: var(--body); }
.rv-total .num { font-size: 1.3em; color: var(--pine); font-weight: 600; }
.rv-note { text-align: center; margin: 4px 0 0; color: var(--muted); }
.rv-all { text-align: center; margin: var(--s2) 0 0; }
@media (max-width: 860px) { .rv-cards { grid-template-columns: 1fr; gap: var(--s5); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .curtain { display: none; }
  .care-tab:hover { transform: none; }
  .nb-cover { display: none !important; }
  [data-lines] .ln > span, [data-draw], [data-clip] img, [data-reveal] { transform: none !important; opacity: 1 !important; }
  [data-clip] .gal-img, [data-clip] > img { clip-path: none !important; }
}

/* ---------- พิมพ์ ---------- */
@media print {
  .site-header, .dock, .curtain, .nav-toggle, .skip, .map-frame { display: none !important; }
  .hero { min-height: 0; margin-top: 0; color: var(--ink); background: none; }
  .hero-media, .hero-scrim { display: none; }
  .hero-h, .hr-item, .hr-price .num, .close, .close h2 { color: var(--ink) !important; }
  .close, .rates, .faq { background: none; }
  .care-panel[hidden] { display: grid !important; }
  .nb-cover, .soc-slot { display: none !important; }
  .fx [data-lines] .ln > span, .fx [data-draw], .fx [data-reveal], .fx [data-clip] img { transform: none !important; opacity: 1 !important; }
  .fx [data-clip] .gal-img, .fx [data-clip] > img { clip-path: none !important; }
}

/* ประเมินรอบ 3 (2026-11-03) */
/* แกลเลอรีหน้าสาขา: กฎ 14 ช่องของจอกว้างไม่ใช้กับหน้าสาขา (เดิมรูปหดเหลือ 33-156px) */
@media (min-width: 1200px) {
  .gal-branch.gal-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ย่อหน้าใต้เสาข้อมูลในหน้าสาขา: เว้นระยะ และอยู่กลางเหมือนส่วนอื่นในบล็อก */
.pillars + .intro-body { margin-top: var(--s7); }
.intro-in .intro-body { text-align: center; }
/* แถบราคาสาขาเดียวในฮีโร่แบบมีกรอบรูป (วงเวียนใหญ่): ชิดซ้ายตรงกับคอลัมน์ข้อความ */
.hero-framed .hero-rates-1 { width: 100%; justify-content: start; }
/* รูปเล็กในแกลเลอรีหน้าสาขา: แถวที่สองเต็มความกว้าง ไม่เหลือที่ว่างครึ่งขวา (ไฟล์ 672/960px ยังไม่ถูกขยายเกิน) */
@media (min-width: 721px) { .gal-branch .gal-s { grid-column: span 2; } }
/* มือถือ: ย่อหน้าใต้เสาข้อมูลชิดซ้ายเหมือนเสาข้อมูล */
@media (max-width: 720px) { .intro-in .intro-body { text-align: left; } }

/* 2026-11-04 เจ้าของ: เอาโพสต์อิตอุปกรณ์ออกจากสมุด ขยายรูปหน้าซ้าย */
.nb-photo, .nb-stick.has-photo .nb-photo { width: 100%; max-width: 520px; margin-left: 0; }
@media (max-width: 720px) { .nb-photo, .nb-stick.has-photo .nb-photo { width: 92%; max-width: 420px; margin-inline: auto; } }
/* ส่วนอุปกรณ์ในศูนย์: แถบครีม 4 ช่อง ไอคอนในวงทอง เส้นทองบน (ภาษาเดียวกับเสาข้อมูล) */
.equip-sec { background: var(--paper, #FBF9F5); padding: var(--s9) 0; }
.equip-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); margin: var(--s7) 0 0; padding: 0; list-style: none; }
.equip-list li { padding-top: var(--s5); border-top: 1px solid var(--line-gold); }
.equip-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--line-gold); color: var(--pine); margin-bottom: var(--s4); }
.equip-ic .ic { width: 26px; height: 26px; }
.equip-list h3 { font-size: 23px; line-height: 1.4; margin: 0 0 var(--s2); }
.equip-list p { margin: 0; color: var(--body); }
@media (max-width: 1023px) { .equip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .equip-sec { padding: var(--s8) 0; } .equip-list { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); } }

/* ท้ายหน้าใหม่ (2026-11-04): 3 กลุ่ม หัวกลุ่มเล็กสีทอง + แถบล่างลิขสิทธิ์/นโยบาย/ภาษา */
.foot-col { display: flex; flex-direction: column; align-items: flex-start; }
.foot-h { margin: 0 0 var(--s2); font-size: 15px; font-weight: 600; letter-spacing: .4px; color: var(--gold); }
.foot-col .foot-h ~ .foot-h { margin-top: var(--s5); }
.foot-col > a, .foot-social a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--on-dark); text-decoration: none; }
.foot-col > a:hover, .foot-social a:hover, .foot-legal a:hover { color: var(--gold); }
.foot-br { flex-direction: column; align-items: flex-start !important; gap: 0 !important; padding: 6px 0; }
.foot-br-n { font: 400 19px/1.4 var(--serif); }
.foot-br-l { font-size: 15px; color: var(--on-dark-2); }
.foot-contact .ic, .foot-social .ic { color: var(--gold); }
.foot-social { display: flex; gap: var(--s5); margin-top: var(--s2); }
.foot-bottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s2) var(--s5);
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-gold-dark); }
.foot-bottom .foot-copy { grid-column: auto; margin: 0; padding: 0; border: 0; }
.foot-legal { display: flex; flex-wrap: wrap; gap: var(--s5); margin: 0; font-size: 15px; }
.foot-legal a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(251,249,245,.82); text-decoration: none; }

/* หน้าร่วมงานกับเรา */
.hero-jobs .hero-copy { max-width: 780px; }
.jobs-sec { padding: var(--s9) 0; }
.jobs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s6); }
.job { background: var(--paper); border: 1px solid var(--line-gold); border-radius: 6px; padding: var(--s6); box-shadow: var(--paper-lift); }
.job-has-poster { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s6); align-items: start; }
.job-posters { display: grid; gap: var(--s5); }
.job-pol { width: 100%; }
.job h3 { font-size: clamp(26px, 2.4vw, 32px); margin: 0 0 var(--s3); }
.job h4 { font-size: 19px; margin: var(--s5) 0 var(--s2); color: var(--ink); }
.job-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: 0 0 var(--s3); padding: 0; list-style: none; color: var(--body); }
.job-meta li, .job-list li { display: flex; gap: 10px; align-items: flex-start; }
.job-meta .ic, .job-list .ic { color: var(--sage-d); margin-top: 6px; flex: none; }
.job-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.job-ask { margin: var(--s3) 0 0; padding: var(--s4) var(--s5); background: var(--parchment); border-left: 3px solid var(--gold); color: var(--body); }
.jobs-apply { padding: var(--s8) 0 var(--s9); background: var(--parchment); }
.apply-list { margin: var(--s5) 0 var(--s6); padding-left: 1.4em; display: grid; gap: var(--s2); font-size: 19px; }
@media (max-width: 900px) { .jobs-list, .job-has-poster { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .jobs-sec { padding: var(--s8) 0; } .job { padding: var(--s5); } .foot-bottom { flex-direction: column; align-items: flex-start; } }
.apply-one { margin: var(--s5) 0 var(--s6); font-size: 19px; color: var(--body); }
/* ป้ายประกาศที่ใช้ร่วมกันหลายตำแหน่ง: แสดงครั้งเดียวทางซ้าย การ์ดตำแหน่งเรียงทางขวา */
.jobs-wrap.has-shared { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s7); align-items: start; margin-top: var(--s6); }
.jobs-wrap.has-shared .jobs-list { grid-template-columns: 1fr; margin-top: 0; }
.jobs-shared { position: sticky; top: 96px; }
@media (max-width: 900px) { .jobs-wrap.has-shared { grid-template-columns: 1fr; gap: var(--s6); } .jobs-shared { position: static; max-width: 520px; } }
/* ป้ายประกาศรับสมัคร: แสดงเต็มใบตามสัดส่วนจริง (เจ้าของสั่งใช้โปสเตอร์เต็มใบ) ไม่ครอปเป็น 4:3 */
.job-pol img { aspect-ratio: auto; height: auto; object-fit: contain; }
/* ตรวจรอบ 2026-11-05 */
@media (max-width: 720px) { .hero-jobs .hero-cta { display: flex; } }   /* หน้าร่วมงาน: ไม่มีแถบราคา ปุ่มในฮีโร่จำเป็น */
@media (min-width: 721px) and (max-width: 1023px) { .foot-in { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
/* หน้าร่วมงาน: ไม่มีรูปฮีโร่ ไม่ต้องสูงเต็มจอ (ตรวจรอบ 2026-11-05) */
.hero-jobs { min-height: 0; padding-bottom: var(--s6); }

/* นโยบายความเป็นส่วนตัว และหน้า 404 (2026-11-05) */
.hero-policy { min-height: 0; padding-bottom: var(--s6); }
.policy { padding: var(--s8) 0 var(--s9); }
.policy-in { max-width: 780px; }
.policy-lead { font-size: 20px; color: var(--ink); }
.policy h2 { font-size: clamp(23px, 2.2vw, 28px); margin: var(--s7) 0 var(--s3); }
.policy p, .policy li { color: var(--body); }
.policy ul { margin: 0 0 var(--s4); padding-left: 1.2em; display: grid; gap: var(--s2); }
.policy-ask { margin-top: var(--s8); padding: var(--s6); background: var(--parchment); border-left: 3px solid var(--gold); }
.policy-ask h2 { margin-top: 0; }
.policy-ask .rc-actions { justify-content: flex-start; }
.hero-404 { min-height: 70vh; justify-content: center; }
.nf-code { font: 500 clamp(64px, 10vw, 108px)/1 var(--serif); color: var(--gold); margin: 0 0 var(--s3); }
@media (max-width: 720px) { .hero-policy .hero-cta { display: flex; } }
.apply-privacy { margin: 0 0 var(--s5); } .apply-privacy a { color: var(--sage-d); }