/* cine.css — ชั้นหน้าตา cinematic ของหน้าแรกบ้านนายช่าง
   ที่มา: demo-scroll-2026-08/index.html (เดโม่ที่ซันดูแล้ว 26 ส.ค. 2026) ยกมาทั้งดุ้น
   เปลี่ยนชื่อเฉพาะตัวที่ชนกับ site.css: คลาส .btn/.btn-line/.btn-gold/.btns/.eyebrow/.lead -> .cn-*
                                        ตัวแปร --gold/--gold-d/--ink/--line -> --c-*
   ⚠️ ไฟล์นี้ถูกก๊อปไปที่ site-clone/cine.css โดย build-site.py — แก้ที่นี่ที่เดียว
   โหลดคู่กับ site.css และโหลดทีหลัง (ท้ายหน้ามีบล็อก 'สะพาน' คืนค่าให้ของเดิม) */

/* =========================================================
   บ้านนายช่าง — เดโม่ scroll cinematic (ส.ค. 2026)
   vanilla ล้วน ไม่มีไลบรารีภายนอก · เปิดจาก file:// ได้
   โทน: ถ่านอุ่น #2a2a2a · ทอง #bfa15f/#a98a45 · เทาอ่อน #d8d8d8/#e3e3e3
   สถาปัตยกรรม CSS: ค่าตั้งต้น = หน้านิ่งอ่านง่าย (ปลอดภัยเสมอ)
                    ท่าหนังทั้งหมดอยู่ใต้ html.cine เท่านั้น
   ========================================================= */

@property --p{ syntax:'<number>'; inherits:true; initial-value:0; }

:root{
  --c-ink:#141312;
  --ink-2:#1c1a18;
  --char:#2a2a2a;
  --c-gold:#bfa15f;
  --c-gold-d:#a98a45;
  --gold-l:#e2cb8e;
  --paper:#e3e3e3;
  --paper-2:#d8d8d8;
  --dim:#928c84;
  --dim-2:#6d6862;
  --c-line:rgba(191,161,95,.20);
  --ease:cubic-bezier(.22,1,.36,1);
  --font:'Kanit',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* ── โทเคนธีม ─────────────────────────────────────────────────────────
     ⚠️ ค่าตั้งต้นทุกตัวข้างล่าง = สีเดิมของโหมดมืดเป๊ะ (ยกขึ้นมาเฉยๆ ไม่แก้ตัวเลข)
        โหมดสว่างไป override ที่ html[data-theme="light"] ที่เดียวเท่านั้น
        ⇒ ถ้าไม่มีแอตทริบิวต์ data-theme เลย (JS ปิด) หน้าก็ยังเป็นโหมดมืดเดิม */
  --text-strong:#fff;          /* หัวข้อที่เน้นสุดบนพื้นหน้า */
  --accent-ink:#bfa15f;        /* ทองที่ทำหน้าที่ "ตัวหนังสือเล็ก" */
  --accent-em:#e2cb8e;         /* ทองที่ทำหน้าที่ "ตัวหนังสือใหญ่" */
  --gold-line:#bfa15f;         /* ทองที่เป็นเส้น/กรอบ ไม่ใช่ตัวหนังสือ */
  --grid-line:rgba(191,161,95,.040);
  --grid-glow:rgba(191,161,95,.13);
  --topbar-scrim:linear-gradient(180deg,rgba(20,19,18,.86),rgba(20,19,18,0));
  --logo-plate:transparent;    /* พื้นรองโลโก้ (โลโก้เป็นรูปสีติดมา) */
  --call-ink:#e2cb8e;
  --call-edge:rgba(191,161,95,.45);
  --call-hover:rgba(191,161,95,.16);
  --media-filter:none;         /* ปรับความสว่างของรูปตามโหมด */

  /* ตัวหนังสือ + ม่าน ที่วางอยู่ "บนรูป" — โหมดสว่างต้องกลับด้านทั้งชุด */
  --on-img:#fff;
  --on-img-soft:#d8d8d8;
  --on-img-dim:#928c84;
  --on-img-dim2:#6d6862;
  --on-img-gold:#bfa15f;
  --on-img-accent:#e2cb8e;
  --on-img-sh1:0 6px 40px rgba(0,0,0,.55);
  --hero-veil:linear-gradient(180deg,rgba(20,19,18,.72) 0%,rgba(20,19,18,.30) 34%,rgba(20,19,18,.86) 100%),radial-gradient(120% 90% at 24% 58%,rgba(20,19,18,.10),rgba(20,19,18,.72) 78%);
  /* ⚠️ ห้ามใส่ var(--p) ไว้ในตัวแปร — ตัวแปรจะถูกแทนค่าตั้งแต่ที่ :root (ตอนนั้น --p=0)
     แล้วค่าที่แข็งไปแล้วจะไหลลงลูก ⇒ ม่านค้างที่จังหวะแรกทั้งฉาก
     ⇒ เก็บเป็น "ตัวเลขสองตัว" แล้วให้ calc() ไปเกิดในกฎที่ใช้จริงแทน */
  --hero-veil-a:.62; --hero-veil-b:.38;
  --warm-blend:screen;
  --warm-op:.34;
  --warm-c:rgba(191,161,95,.42);
  --close-veil:linear-gradient(180deg,rgba(20,19,18,.94) 0%,rgba(20,19,18,.80) 42%,rgba(20,19,18,.96) 100%),radial-gradient(80% 60% at 50% 42%,rgba(191,161,95,.16),transparent 70%);
  --shot-veil:linear-gradient(180deg,rgba(20,19,18,0) 55%,rgba(20,19,18,.55));
  --shot-veil-op:.75;
  --shot-edge:rgba(191,161,95,.13);
  --frame-edge:rgba(191,161,95,.26);
  --frame-inner:inset 0 -90px 120px -50px rgba(20,19,18,.92);
  --tl-track:rgba(191,161,95,.16);
  --btn-line-edge:rgba(227,227,227,.3);
  --btn-line-ink:#e3e3e3;
  --btn-line-hover:rgba(227,227,227,.09);
  --btn-gold-ink:#1b1a18;
  --meta-link-edge:rgba(146,140,132,.32);
  --foot-ink:#4d4842;
  --note-bg:rgba(20,19,18,.94);
  --note-edge:rgba(191,161,95,.32);
  --note-shadow:0 12px 36px rgba(0,0,0,.55);
  --note-ink:#d8d8d8;

  /* ฉาก "เดินเข้าบ้าน" (#vision) = โรงหนัง
     โหมดสว่างไม่เปลี่ยนเป็นขาว แต่ "หรี่ไฟ" เป็นถ่านอุ่นอ่อนลง ⇒ ยังเป็นโรงหนัง */
  --th-bg:#141312;
  --th-ink:#fff;
  --th-soft:#d8d8d8;
  --th-dim:#928c84;
  --th-dim2:#6d6862;
  --th-gold:#bfa15f;
  --th-accent:#e2cb8e;
  --th-edge:rgba(191,161,95,.34);
  --th-door-l:linear-gradient(90deg,#141312 0%,rgba(20,19,18,.97) 56%,rgba(20,19,18,0) 100%);
  --th-door-r:linear-gradient(270deg,#141312 0%,rgba(20,19,18,.97) 56%,rgba(20,19,18,0) 100%);
  --th-veil:radial-gradient(105% 78% at 50% 46%,rgba(20,19,18,0) 24%,rgba(20,19,18,.82) 100%),linear-gradient(180deg,rgba(20,19,18,.60),rgba(20,19,18,.12) 30%,rgba(20,19,18,.88));
  --th-veil-a:.55; --th-veil-b:.32;
}

/* =========================================================
   🌞 โหมดสว่าง — แตะแค่ "ค่าตัวแปร" ไม่แตะโครงฉาก ไม่แตะตัวเลขสีของโหมดมืด
   ทองอ่อนห้ามเป็นตัวหนังสือบนพื้นสว่าง ⇒ ตัวหนังสือใช้ทองเข้ม
   ทองอ่อนถูกเก็บไว้ทำพื้นปุ่ม/เส้นไล่สีเหมือนเดิม
   ========================================================= */
html[data-theme="light"]{
  color-scheme:light;
  --c-ink:#f4f1ea;               /* กระดาษอุ่น ไม่ใช่ขาวจ้า */
  --ink-2:#e8e2d6;
  --paper:#26221b;             /* "paper" = สีตัวหนังสือหลัก (สลับขั้วในโหมดนี้) */
  --paper-2:#3a352b;
  --dim:#5b5449;
  --dim-2:#67604f;
  --c-line:rgba(125,98,22,.28);

  --text-strong:#14120d;
  --accent-ink:#775c12;        /* ทองเข้มสำหรับตัวหนังสือเล็ก (ผ่าน 4.5:1 แม้ตรงที่ไฟอุ่นด้านบนกดพื้นให้เข้มลง) */
  --accent-em:#8a6d1f;         /* ทองเข้มสำหรับหัวใหญ่ */
  --gold-line:#9c7d2e;
  --grid-line:rgba(140,112,48,.07);
  --grid-glow:rgba(191,161,95,.20);
  /* แถบบนเป็น fixed → ลอยผ่านทั้งพื้นสว่างและ "แถบโรงหนัง" ที่เข้ม
     ⇒ โหมดสว่างต้องคลุมทึบตลอดช่วงที่มีตัวหนังสือ แล้วค่อยจางในช่วงท้าย */
  --topbar-scrim:linear-gradient(180deg,rgba(246,243,236,.98) 0%,rgba(246,243,236,.96) 78%,rgba(246,243,236,0) 100%);
  --logo-plate:transparent;    /* โหมดสว่าง: โลโก้วางบนครีมได้เลย ไม่ต้องมีแผ่นรอง (Sun: "เล็กไป ไม่สวย" 29 ส.ค.) */
  --call-ink:#6f5610;
  --call-edge:rgba(125,98,22,.55);
  --call-hover:rgba(125,98,22,.12);
  --media-filter:brightness(1.05) contrast(.97);

  /* ตัวหนังสือบนรูปในโหมดสว่างต้องยืนพื้น "ผ่านแม้พิกเซลใต้ตัวอักษรดำสนิท"
     ⇒ ทองบนรูปต้องเข้มกว่าทองบนพื้นกระดาษอีกขั้น (#4a3806) */
  --on-img:#17140e;
  --on-img-soft:#2f2a20;
  --on-img-dim:#443e30;
  --on-img-dim2:#3d3729;
  --on-img-gold:#4a3806;
  --on-img-accent:#4a3806;
  --on-img-sh1:0 1px 26px rgba(255,255,255,.9);
  /* ม่านสว่างต้องเข้มเฉพาะฝั่งซ้ายที่ตัวหนังสือนั่งอยู่ — ถ้าคลุมเท่ากันทั้งจอ
     บ้านจะจางจนแทบไม่เห็น ซึ่งผิดจุดสำหรับแบรนด์รับสร้างบ้าน (รูปคือสินค้า) */
  --hero-veil:linear-gradient(96deg,rgba(247,244,237,.94) 0%,rgba(247,244,237,.88) 26%,rgba(247,244,237,.52) 54%,rgba(247,244,237,.26) 78%,rgba(247,244,237,.34) 100%),linear-gradient(180deg,rgba(247,244,237,.42) 0%,rgba(247,244,237,.10) 38%,rgba(247,244,237,.62) 100%);
  --hero-veil-a:.95; --hero-veil-b:.05;
  --warm-blend:multiply;
  --warm-op:.30;
  --warm-c:rgba(198,170,112,.55);
  --close-veil:linear-gradient(180deg,rgba(246,243,236,.90) 0%,rgba(246,243,236,.80) 42%,rgba(246,243,236,.93) 100%),radial-gradient(80% 60% at 50% 42%,rgba(191,161,95,.20),transparent 70%);
  --shot-veil:linear-gradient(180deg,rgba(244,241,234,0) 55%,rgba(244,241,234,.34));
  --shot-veil-op:.7;
  --shot-edge:rgba(120,96,40,.22);
  --frame-edge:rgba(120,96,40,.30);
  --frame-inner:inset 0 -90px 120px -50px rgba(246,243,236,.94);
  --tl-track:rgba(140,112,48,.30);
  --btn-line-edge:rgba(45,40,30,.38);
  --btn-line-ink:#17140e;
  --btn-line-hover:rgba(45,40,30,.08);
  --meta-link-edge:rgba(75,68,54,.38);
  --foot-ink:#6f685b;
  --note-bg:rgba(252,250,245,.96);
  --note-edge:rgba(125,98,22,.42);
  --note-shadow:0 10px 26px rgba(60,52,36,.13);
  --note-ink:#3a352b;

  /* โรงหนังหรี่ไฟ: ถ่านอุ่นอ่อนลงจาก #141312 → #2b2620 + ไฟบนเวทีอุ่นๆ
     ตัวหนังสือในฉากนี้ยัง "สว่าง" เหมือนเดิม เพราะพื้นยังเข้ม */
  /* พื้นโรงหนังสว่างขึ้นจาก #141312 → #262019 แต่ม่านต้องหนาขึ้นชดเชย
     ⇒ ตัวหนังสือสว่างในฉากนี้ต้องไม่แย่กว่าโหมดมืด (วัดแล้ว ดูรายงาน) */
  --th-soft:#eaeaea;
  --th-gold:#efdcb0;
  --th-bg:#231e17;
  --th-dim:#a49d94;
  --th-dim2:#9a9284;
  --th-edge:rgba(226,203,142,.40);
  --th-door-l:linear-gradient(90deg,#231e17 0%,rgba(35,30,23,.97) 56%,rgba(35,30,23,0) 100%);
  --th-door-r:linear-gradient(270deg,#231e17 0%,rgba(35,30,23,.97) 56%,rgba(35,30,23,0) 100%);
  --th-veil:radial-gradient(105% 78% at 50% 46%,rgba(35,30,23,0) 24%,rgba(35,30,23,.95) 100%),linear-gradient(180deg,rgba(35,30,23,.76),rgba(35,30,23,.20) 30%,rgba(35,30,23,.95));
}

/* สลับโหมดแล้วต้องไม่มีจังหวะกระพริบ/สีไล่กันคนละจังหวะ
   ⇒ ดับ transition ทั้งหน้าชั่วขณะ (~60ms) ตอนสลับ แล้วคืนให้เอง */
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after{transition:none !important}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{
  margin:0;background:var(--c-ink);color:var(--paper);
  /* 🔑 400 (Regular) — เดิม 300 เส้นบางจนวรรณยุกต์ไทยเละกัน (ตัวโตๆของชั้นหนังยังระบุ 200/300 ของมันเอง) */
  font-family:var(--font);font-weight:400;line-height:1.75;
  font-size:17.5px;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-weight:400;margin:0;line-height:1.35}
p{margin:0}
ol,ul{margin:0;padding:0;list-style:none}

/* กระดาษเขียนแบบ — ตารางทองจางๆ + ไฟอุ่นจากด้านบน (กลิ่น "บ้าน" ไม่ใช่ "โรงงาน") */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/100% 52px,
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/52px 100%,
    radial-gradient(130% 68% at 50% -6%,var(--grid-glow),transparent 62%);
}

/* ---------- แถบความคืบหน้า ---------- */
.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:70;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--c-gold-d),var(--c-gold),var(--gold-l));
}
.cine .progress{will-change:transform}

/* ---------- แถบบนสุด ---------- */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:65;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,4vw,44px);
  background:var(--topbar-scrim);
}
.topbar .mark{display:flex;align-items:center;gap:11px}
/* โลโก้เป็นรูปสีติดมา (ส้ม-ทอง + แดงเข้ม) — บนพื้นสว่างส่วนที่เป็นส้มจะจม
   ⇒ โหมดสว่างใส่พื้นรองถ่านเป็นชิปเล็กๆ ให้ · ใช้ box-shadow ไม่ใช่ padding ⇒ ไม่ขยับ layout
   ⚠️ border-radius ใส่เฉพาะโหมดสว่าง เพราะมันตัดมุมรูปจริง (โหมดมืดต้องเหมือนเดิมเป๊ะ) */
.topbar .mark img{width:30px;height:auto;background:var(--logo-plate);box-shadow:0 0 0 5px var(--logo-plate)}
html[data-theme="light"] .topbar .mark img{border-radius:10px}
.topbar .mark b{font-weight:500;font-size:17px;letter-spacing:.06em;color:var(--paper)}
.topbar .call{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 18px;border-radius:999px;
  border:1px solid var(--call-edge);color:var(--call-ink);
  font-size:15.5px;letter-spacing:.04em;
  transition:background .6s var(--ease),transform .6s var(--ease);
}
.topbar .call:hover{background:var(--call-hover);transform:translate3d(0,-2px,0)}

/* ---------- ของกลางที่ใช้ซ้ำ ---------- */
.wrap{width:min(1180px,92vw);margin:0 auto;position:relative;z-index:1}
.cn-eyebrow{
  font-size:15.5px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 18px;
}
.sec-head{margin-bottom:clamp(40px,7vh,78px)}
.sec-head h2{font-size:clamp(28px,4.4vw,52px);font-weight:300;letter-spacing:-.01em}
.sec-head h2 em{font-style:normal;color:var(--accent-em)}
.sec-head .sub{margin-top:16px;color:var(--dim);font-size:clamp(17px,1.5vw,19.5px);max-width:56ch}
.hair{height:1px;background:linear-gradient(90deg,var(--c-line),transparent);margin:0}

/* เผยเนื้อหาตอนเข้าจอ — ใช้ทั้งโหมดหนังและโหมดนิ่ง */
.rise{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity 1.15s var(--ease),transform 1.35s var(--ease);
  transition-delay:var(--d,0s);
}
.in .rise,.rise.in,body.ready #hero .rise{opacity:1;transform:none}

/* =========================================================
   ฉาก 1 · เปิดเว็บ
   ========================================================= */
#hero{position:relative;--accent-ink:var(--on-img-gold)}
.pin{position:relative;min-height:100svh}
.cine .pin{overflow:hidden}
.cine #hero{height:210vh}
.cine #hero .pin{position:sticky;top:0;height:100svh}

.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.cine .hero-media{animation:heroDrift 26s var(--ease) forwards}
@keyframes heroDrift{from{transform:scale(1.0)}to{transform:scale(1.09)}}
.cine .hero-media img{
  transform:scale(calc(1 + var(--p)*.12)) translate3d(0,calc(var(--p)*-4vh),0);
  will-change:transform;
}
.hero-veil{
  position:absolute;inset:0;
  background:var(--hero-veil);
}
.cine .hero-veil{opacity:calc(var(--hero-veil-a) + var(--p)*var(--hero-veil-b))}
.hero-warm{
  position:absolute;inset:0;mix-blend-mode:var(--warm-blend);opacity:var(--warm-op);
  background:radial-gradient(58% 42% at 68% 30%,var(--warm-c),transparent 68%);
}

/* มุมทั้งสี่แบบเส้นกรอบแบบ — ลายเซ็นของงานออกแบบบ้าน */
.corner{position:absolute;width:clamp(30px,4vw,58px);height:clamp(30px,4vw,58px);z-index:2;
  opacity:0;transform:scale(.55);transition:opacity 1.4s var(--ease) .9s,transform 1.6s var(--ease) .9s}
body.ready .corner{opacity:.75;transform:none}
.c-tl{top:88px;left:clamp(16px,4vw,44px);border-top:1px solid var(--gold-line);border-left:1px solid var(--gold-line)}
.c-tr{top:88px;right:clamp(16px,4vw,44px);border-top:1px solid var(--gold-line);border-right:1px solid var(--gold-line)}
.c-bl{bottom:36px;left:clamp(16px,4vw,44px);border-bottom:1px solid var(--gold-line);border-left:1px solid var(--gold-line)}
.c-br{bottom:36px;right:clamp(16px,4vw,44px);border-bottom:1px solid var(--gold-line);border-right:1px solid var(--gold-line)}

.hero-inner{
  position:relative;z-index:3;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:120px clamp(20px,7vw,110px) 118px;
}
.cine .hero-inner{
  transform:translate3d(0,calc(var(--p)*-8vh),0);
  opacity:calc(1 - clamp(0,calc(var(--p)*1.8),1));
  will-change:transform,opacity;
}
.hero-inner h1{
  font-size:clamp(46px,9.6vw,140px);font-weight:200;letter-spacing:-.02em;line-height:1.05;
  color:var(--on-img);text-shadow:var(--on-img-sh1);
}
.hero-rule{
  height:1px;width:min(420px,60vw);margin:clamp(22px,3.4vh,38px) 0;
  background:linear-gradient(90deg,var(--gold-line),rgba(191,161,95,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1.6s var(--ease) .55s;
}
body.ready .hero-rule{transform:scaleX(1)}
.hero-inner .tagline{
  font-size:clamp(20px,3.2vw,42px);font-weight:300;color:var(--on-img-accent);letter-spacing:.01em;
}
.hero-inner .cn-lead{
  margin-top:clamp(16px,2.4vh,26px);max-width:44ch;
  font-size:clamp(17px,1.55vw,20px);color:var(--on-img-soft);line-height:2;
}
.hero-scroll{
  position:absolute;left:50%;bottom:26px;z-index:4;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;
  font-size:15.5px;letter-spacing:.32em;color:var(--on-img-dim);text-transform:uppercase;
}
.hero-scroll i{display:block;width:1px;height:44px;background:linear-gradient(180deg,var(--c-gold),transparent)}
.cine .hero-scroll{opacity:calc(1 - clamp(0,calc(var(--p)*3.4),1))}
.cine .hero-scroll i{animation:dropLine 2.6s ease-in-out infinite}
@keyframes dropLine{0%,100%{transform:scaleY(.35);transform-origin:50% 0}50%{transform:scaleY(1);transform-origin:50% 0}}

/* =========================================================
   ฉาก 1.5 · จุดขาย 4 ข้อ (แถบเงียบๆ ให้จังหวะได้หายใจ)
   ========================================================= */
#pillars{padding:clamp(72px,13vh,150px) 0 clamp(60px,10vh,120px)}
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--c-line)}
.pillar{padding:clamp(26px,3.6vh,44px) clamp(18px,2vw,32px) 0;border-right:1px solid var(--c-line)}
.pillar:last-child{border-right:0}
.pillar b{display:block;font-size:15.5px;font-weight:400;letter-spacing:.3em;color:var(--accent-ink);margin-bottom:14px}
.pillar h3{font-size:clamp(19px,1.8vw,20px);font-weight:400;color:var(--paper);margin-bottom:10px}
.pillar p{font-size:17px;color:var(--dim);line-height:1.95}

/* =========================================================
   ฉาก 2 · แบบ 3D ก่อนสร้างจริง — กล้องพาเดินเข้าไปในแบบ
   (ท่าเด่นของงานนี้ · ต่างจากเดโม่เมทัลชีทที่เป็นกรอบรูปขยายเต็มจอ)
   ========================================================= */
#vision{position:relative;padding:clamp(40px,8vh,90px) 0;--accent-ink:var(--th-gold)}
#vision .pin{min-height:0}
.cine #vision{height:400vh;padding:0}
.cine #vision .pin{position:sticky;top:0;height:100svh;min-height:100svh;background:var(--th-bg)}

.dolly{
  position:relative;z-index:0;
  display:grid;grid-template-columns:1fr;place-items:stretch;gap:14px;
  width:min(1180px,92vw);margin:0 auto;
}
.dolly .lay{
  position:relative;width:100%;height:clamp(200px,32vh,330px);
  object-fit:cover;border-radius:14px;
}
.cine .dolly{position:absolute;inset:0;display:block;place-items:stretch;width:auto;margin:0}
.cine .dolly .lay{
  position:absolute;inset:0;width:100%;height:100%;border-radius:0;
  will-change:transform,opacity;
}
/* ชั้นนอก: บ้านทั้งหลัง — กล้องพุ่งเข้าหาแล้วจางออก */
.cine .lay-out{
  transform:scale(calc(1 + var(--p)*1.30)) translate3d(0,calc(var(--p)*-3vh),0);
  opacity:calc(1 - clamp(0,calc((var(--p) - .30)*3.4),1));
}
/* ชั้นใน: ห้องข้างใน — โผล่จากลึกๆ แล้วโตขึ้นต่อ = เหมือนเดินทะลุเข้าไป */
.cine .lay-in{
  transform:scale(calc(.70 + var(--p)*.80));
  opacity:clamp(0,calc((var(--p) - .26)*3.1),1);
}
.dolly-veil{display:none}
.cine .dolly-veil{
  display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--th-veil);
  opacity:calc(var(--th-veil-a) + var(--p)*var(--th-veil-b));
}
/* บานประตูสองข้าง — เปิดออกตาม scroll เหมือนกล้องผ่านช่องประตูเข้าไป */
.door{display:none}
.cine .door{
  display:block;position:absolute;top:0;bottom:0;width:34%;z-index:2;pointer-events:none;
  will-change:transform;
}
.cine .door-l{
  left:0;
  background:var(--th-door-l);
  border-right:1px solid var(--th-edge);
  transform:translate3d(calc(var(--p)*-165%),0,0);
}
.cine .door-r{
  right:0;
  background:var(--th-door-r);
  border-left:1px solid var(--th-edge);
  transform:translate3d(calc(var(--p)*165%),0,0);
}

.vision-copy{
  position:relative;z-index:3;
  width:min(1180px,92vw);margin:clamp(34px,6vh,64px) auto 0;
}
.cine .vision-copy{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(52px,9vh,104px);margin:0;
}
.vision-h{position:relative;margin:0}
.vline{
  display:block;font-size:clamp(28px,5.4vw,72px);font-weight:200;line-height:1.18;
  letter-spacing:-.015em;color:var(--th-ink);text-shadow:0 6px 34px rgba(0,0,0,.6);
  margin-bottom:10px;
}
.vline em{font-style:normal;color:var(--th-accent)}
.cine .vision-h{min-height:calc(clamp(28px,5.4vw,72px)*2)}
.cine .vline{
  position:absolute;left:0;right:0;bottom:0;top:auto;margin:0;
  opacity:0;transform:translate3d(0,30px,0);
  transition:opacity 1s var(--ease),transform 1.2s var(--ease);
}
.cine #vision[data-step="0"] .v0,
.cine #vision[data-step="1"] .v1,
.cine #vision[data-step="2"] .v2{opacity:1;transform:none}
.vision-sub{
  margin-top:clamp(16px,2.6vh,30px);max-width:48ch;
  font-size:clamp(17px,1.55vw,20px);color:var(--th-soft);line-height:2;
}
.vision-models{
  margin-top:14px;font-size:15.5px;color:var(--th-dim2);letter-spacing:.02em;line-height:1.9;
}
.vision-models b{color:var(--th-dim);font-weight:400}

/* =========================================================
   ฉาก 3 · บริการ 7 อย่าง — รายการที่ภาพเปลี่ยนตามหัวข้อที่เลื่อนถึง
   (ต่างจากเดโม่เมทัลชีทที่เป็นการ์ด 4 ใบเอียงตามเมาส์)
   ========================================================= */
#services{padding:clamp(70px,12vh,150px) 0 clamp(70px,12vh,140px);position:relative;z-index:1}
.svc-wrap{display:block;place-items:stretch}
.cine .svc-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);gap:clamp(30px,5vw,84px);place-items:stretch}

.svc-stage{display:none}
.cine .svc-stage{display:block;position:sticky;top:20vh;height:60vh}
.svc-frame{position:relative;width:100%;height:100%;border-radius:16px;overflow:hidden;background:var(--ink-2)}
.svc-shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.07);
  transition:opacity 1.1s var(--ease),transform 1.9s var(--ease);
}
.svc-shot.on{opacity:1;transform:scale(1)}
.svc-frame-edge{
  position:absolute;inset:0;pointer-events:none;border-radius:16px;
  border:1px solid var(--frame-edge);
  box-shadow:var(--frame-inner);
}
.svc-count{
  position:absolute;left:22px;bottom:18px;z-index:2;
  display:flex;align-items:baseline;gap:7px;
  font-size:15.5px;letter-spacing:.22em;color:var(--on-img-dim);
}
.svc-count b{font-size:30px;font-weight:200;letter-spacing:0;color:var(--on-img-accent);line-height:1}

.svc-list{display:block}
.svc-item{
  position:relative;padding:clamp(22px,3vh,34px) 0;border-top:1px solid var(--c-line);
}
.svc-item:last-child{border-bottom:1px solid var(--c-line)}
.cine .svc-item{padding:clamp(30px,7.4vh,86px) 0 clamp(30px,7.4vh,86px) 66px}
.svc-no{
  display:block;font-size:15.5px;letter-spacing:.24em;color:var(--dim-2);margin-bottom:9px;
  transition:color .8s var(--ease);
}
.cine .svc-no{position:absolute;left:0;top:clamp(32px,7.6vh,90px);margin:0}
.svc-item h3{
  font-size:clamp(21px,2.9vw,38px);font-weight:300;color:var(--dim);letter-spacing:-.005em;
  transition:color .9s var(--ease),transform 1s var(--ease);
}
.svc-item p{
  margin-top:9px;font-size:17.5px;color:var(--dim-2);line-height:1.95;max-width:42ch;
  transition:color .9s var(--ease);
}
.svc-item.cur .svc-no{color:var(--accent-ink)}
.svc-item.cur h3{color:var(--text-strong)}
.cine .svc-item.cur h3{transform:translate3d(8px,0,0)}
.svc-item.cur p{color:var(--paper-2)}
/* เส้นทองบอกหัวข้อที่กำลังอ่าน */
.svc-item::before{
  content:'';position:absolute;left:0;top:-1px;height:1px;width:100%;
  background:linear-gradient(90deg,var(--gold-line),rgba(191,161,95,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform 1s var(--ease);
}
.svc-item.cur::before{transform:scaleX(1)}

.svc-inline{margin:0 0 18px}
.svc-inline img{width:100%;height:clamp(190px,34vw,300px);object-fit:cover;border-radius:12px}
.cine .svc-inline{display:none}

/* =========================================================
   ฉาก 4 · ขั้นตอน 4 ขั้น — เส้นเวลาที่เดินหน้าตาม scroll
   ========================================================= */
#steps{position:relative;z-index:1;padding:clamp(70px,12vh,140px) 0 clamp(80px,14vh,170px)}
/* โหมดหนัง: ยืดระยะห่างระหว่างขั้น ไม่ใช่ยัด min-height
   (min-height จะได้ช่องว่างเปล่าค้างท้ายฉาก เพราะเนื้อหาไหลชิดบน) */
.cine #steps{padding-bottom:clamp(120px,20vh,250px)}
.cine .tl-item{padding-bottom:clamp(64px,15vh,180px)}
.tl{
  position:relative;
  --tl-pad:clamp(38px,6vw,92px);
  --tl-x:clamp(9px,1.4vw,22px);
  padding-left:var(--tl-pad);
}
.tl-line{
  position:absolute;left:var(--tl-x);top:6px;bottom:6px;width:1px;
  background:var(--tl-track);
}
.tl-fill{
  position:absolute;left:0;top:0;width:100%;height:100%;display:block;
  background:linear-gradient(180deg,var(--gold-l),var(--c-gold),var(--c-gold-d));
  transform-origin:50% 0;transform:scaleY(1);
}
.cine .tl-fill{transform:scaleY(clamp(.05,calc(var(--p)*1.22),1));will-change:transform}
.tl-item{position:relative;padding-bottom:clamp(40px,8vh,96px)}
.tl-item:last-child{padding-bottom:0}
.tl-dot{
  position:absolute;left:calc(var(--tl-x) - var(--tl-pad) - 4px);
  top:11px;width:9px;height:9px;border-radius:50%;
  background:var(--c-ink);border:1px solid var(--c-gold);
  transform:scale(.7);opacity:.5;
  transition:transform 1s var(--ease),opacity 1s var(--ease),background 1s var(--ease);
}
.tl-item.in .tl-dot{transform:scale(1);opacity:1;background:var(--c-gold)}
.tl-step{font-size:15.5px;letter-spacing:.26em;color:var(--accent-ink);margin-bottom:10px}
.tl-item h3{font-size:clamp(20px,2.5vw,31px);font-weight:300;color:var(--paper)}
.tl-item p{margin-top:11px;font-size:18px;color:var(--dim);line-height:2;max-width:52ch}

/* =========================================================
   ฉาก 5 · ผลงาน — คอลลาจ 3 คอลัมน์ที่ไหลคนละจังหวะ
   (ต่างจากเดโม่เมทัลชีทที่เป็นแถวเลื่อนแนวนอนในกล่อง overflow:hidden)
   ========================================================= */
#works{position:relative;z-index:1;padding:clamp(70px,12vh,140px) 0 clamp(90px,16vh,190px)}
.collage{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,26px);align-items:start}
.col{display:grid;gap:clamp(14px,1.8vw,26px);place-items:stretch}
.cine .col{will-change:transform}
.cine .col-a{transform:translate3d(0,calc(var(--p)*-8vh),0)}
.cine .col-b{transform:translate3d(0,calc(var(--p)*5vh),0)}
.cine .col-c{transform:translate3d(0,calc(var(--p)*-13vh),0)}
.col-b{margin-top:clamp(20px,6vh,74px)}
.col-c{margin-top:clamp(10px,2.4vh,32px)}
.shot{
  position:relative;margin:0;overflow:hidden;border-radius:12px;background:var(--ink-2);
  border:1px solid var(--shot-edge);
}
.shot img{width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.cine .shot img{transform:scale(1.06) translate3d(0,calc(var(--p)*1.6vh),0)}
.r-wide{aspect-ratio:16/7}
.r-tall{aspect-ratio:3/4.6}
.r-sq{aspect-ratio:1/1}
.r-land{aspect-ratio:3/2}
.r-vtall{aspect-ratio:3/5.2}
.shot-veil{
  position:absolute;inset:0;pointer-events:none;
  background:var(--shot-veil);
  opacity:var(--shot-veil-op);
}

/* =========================================================
   ฉาก 6 · ตัวเลข + ปิดท้าย
   ========================================================= */
#close{position:relative;z-index:1;overflow:hidden;padding:clamp(76px,13vh,150px) 0 clamp(60px,10vh,110px)}
.close-media{position:absolute;inset:0;z-index:0}
.close-media img{width:100%;height:100%;object-fit:cover;object-position:50% 68%}
.cine .close-media img{transform:scale(1.06)}
.close-veil{
  position:absolute;inset:0;
  background:var(--close-veil);
}
.nums{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);
  padding-bottom:clamp(46px,8vh,90px);border-bottom:1px solid var(--c-line);
}
.num{text-align:center}
.num .pre{display:block;font-size:15.5px;letter-spacing:.24em;color:var(--on-img-gold);margin-bottom:6px;min-height:1.2em}
.num b{
  display:block;font-size:clamp(38px,6.2vw,86px);font-weight:200;line-height:1;color:var(--on-img);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.num span.lb{display:block;margin-top:14px;font-size:16px;color:var(--on-img-dim);line-height:1.8}
.close-cta{text-align:center;padding-top:clamp(46px,8vh,90px)}
.close-cta h2{font-size:clamp(25px,4.2vw,50px);font-weight:300;color:var(--on-img);letter-spacing:-.01em}
.close-cta .cta-sub{
  margin:18px auto 0;max-width:56ch;font-size:clamp(17px,1.5vw,19.5px);color:var(--on-img-soft);line-height:2;
}
.cn-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(28px,4.6vh,50px)}
.cn-btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 34px;border-radius:999px;font-size:18.5px;font-weight:400;letter-spacing:.02em;
  transition:transform .6s var(--ease),background .6s var(--ease),box-shadow .6s var(--ease);
}
.cn-btn-gold{background:linear-gradient(135deg,var(--c-gold),var(--c-gold-d));color:var(--btn-gold-ink);font-weight:500}
.cn-btn-gold:hover{transform:translate3d(0,-3px,0);box-shadow:0 16px 40px rgba(191,161,95,.24)}
.cn-btn-line{border:1px solid var(--btn-line-edge);color:var(--btn-line-ink)}
.cn-btn-line:hover{transform:translate3d(0,-3px,0);background:var(--btn-line-hover)}
.close-meta{margin-top:clamp(30px,5vh,58px);font-size:15.5px;color:var(--on-img-dim2);line-height:2.2}
.close-meta a{color:var(--on-img-dim);border-bottom:1px solid var(--meta-link-edge)}

.foot{
  position:relative;z-index:1;text-align:center;padding:34px 20px 46px;
  font-size:15.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--foot-ink);
}

/* ---------- ปุ่มสลับโหมดสว่าง/มืด (แถบบนสุด · ข้างปุ่มโทร) ---------- */
.topbar-actions{display:flex;align-items:center;gap:clamp(8px,1.1vw,13px)}
.theme-btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:999px;cursor:pointer;
  font-family:inherit;line-height:0;background:transparent;
  border:1px solid var(--call-edge);color:var(--call-ink);
  transition:background .6s var(--ease),transform .6s var(--ease);
}
.theme-btn:hover{background:var(--call-hover);transform:translate3d(0,-2px,0)}
.theme-btn:focus-visible{outline:2px solid var(--accent-em);outline-offset:2px}
.theme-btn svg{
  display:block;width:17px;height:17px;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}
/* โหมดมืดโชว์ดวงอาทิตย์ (กดแล้วเปิดไฟ) · โหมดสว่างโชว์พระจันทร์ (กดแล้วปิดไฟ) */
.theme-btn .ic-moon{display:none}
html[data-theme="light"] .theme-btn .ic-sun{display:none}
html[data-theme="light"] .theme-btn .ic-moon{display:block}

/* ---------- ปุ่มเปิด/ปิดอนิเมชั่น (ข้างปุ่มโหมดสว่าง/มืด) ----------
   🔒 Sun เคาะ 29 ส.ค. 2026: "ดีฟอลต์เป็นอนิเมชั่นตลอด แต่กดปิดได้ ถ้าลูกค้ารำคาญ"
   ⇒ สวิตช์ต้องอยู่ตรงที่คนหาเจอตลอด ไม่ใช่ป้ายเด้งที่โผล่แล้วหาย
   หน้าตาเหมือนปุ่มธีมทุกอย่าง (ใช้กฎเดียวกัน) ต่างแค่ไอคอนข้างใน */
.motion-btn{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border-radius:999px;cursor:pointer;
  font-family:inherit;line-height:0;background:transparent;
  border:1px solid var(--call-edge);color:var(--call-ink);
  transition:background .6s var(--ease),transform .6s var(--ease);
}
.motion-btn:hover{background:var(--call-hover);transform:translate3d(0,-2px,0)}
.motion-btn:focus-visible{outline:2px solid var(--accent-em);outline-offset:2px}
.motion-btn svg{
  display:block;width:16px;height:16px;
  fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
/* อนิเมชั่นเปิดอยู่ → โชว์ "หยุด" (กดแล้วปิด) · ปิดอยู่ → โชว์ "เล่น" (กดแล้วเปิด) */
.motion-btn .ic-pause{display:none}
.motion-btn[aria-pressed="false"] .ic-play{display:none}
.motion-btn[aria-pressed="false"] .ic-pause{display:block;fill:currentColor;stroke:none}

/* ---------- รูป: โหมดสว่างคลายการกดรูปให้มืด ---------- */
.hero-media img,.close-media img,.dolly .lay,.svc-shot,.svc-inline img,.shot img{filter:var(--media-filter)}

/* ---------- ฉาก "เดินเข้าบ้าน" ในโหมดสว่าง = โรงหนังหรี่ไฟ ----------
   ไม่เปลี่ยนเป็นขาวแล้วจืด: ทั้งฉากยังเป็นแถบถ่านอุ่น + ไฟเวทีอุ่นจากด้านบน
   ใส่ทั้งโหมดหนังและโหมดนิ่ง ⇒ ตัวหนังสือสว่างของฉากนี้อ่านออกทุกกรณี */
html[data-theme="light"] #vision{
  background:radial-gradient(120% 64% at 50% 0%,rgba(226,203,142,.11),transparent 62%),var(--th-bg);
}
html[data-theme="light"].cine #vision .pin{
  background:radial-gradient(120% 62% at 50% 4%,rgba(226,203,142,.11),transparent 60%),var(--th-bg);
}

/* ---------- ป้าย + ปุ่ม "เปิดโหมดหนัง" (มุมขวาบน ใต้ปุ่มโทร) ---------- */
.motion-note{
  position:fixed;z-index:66;right:clamp(12px,2.6vw,28px);top:72px;
  display:none;align-items:center;gap:12px;
  padding:9px 10px 9px 16px;border-radius:999px;
  background:var(--note-bg);border:1px solid var(--note-edge);
  box-shadow:var(--note-shadow);
  font-size:15.5px;line-height:1.5;color:var(--note-ink);
  max-width:calc(100vw - 28px);
}
.motion-note.show{display:flex}
.motion-note button{
  flex:none;font-family:inherit;font-size:15.5px;font-weight:500;cursor:pointer;
  padding:7px 16px;border-radius:999px;border:0;
  background:linear-gradient(135deg,var(--c-gold),var(--c-gold-d));color:var(--btn-gold-ink);
}
.motion-note button:hover{background:linear-gradient(135deg,var(--gold-l),var(--c-gold))}
.motion-note button:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}

/* =========================================================
   จอแคบ — ไม่มี pin อยู่แล้ว (html.cine ไม่ติดต่ำกว่า 768px)
   ตรงนี้แค่จัดคอลัมน์ให้อ่านง่าย
   ========================================================= */
@media (max-width:1023px){
  .pillars{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(2n){border-right:0}
  .pillar:nth-child(n+3){border-top:1px solid var(--c-line);margin-top:clamp(20px,3vh,32px)}
  .nums{grid-template-columns:repeat(2,1fr);gap:34px 18px}
  .collage{grid-template-columns:repeat(2,1fr)}
  .col-b,.col-c{margin-top:0}
}
@media (max-width:767px){
  .topbar{padding:12px 14px}
  .topbar .mark b{font-size:16px}
  .topbar .call{padding:7px 14px;font-size:15.5px}
  .topbar-actions{gap:8px}
  .theme-btn,.motion-btn{width:31px;height:31px}
  .theme-btn svg{width:16px;height:16px}
  .motion-btn svg{width:15px;height:15px}
  .corner{display:none}
  .hero-inner{padding:104px 20px 96px}
  .hero-scroll{display:none}
  #pillars{padding:56px 0 44px}
  .pillars{grid-template-columns:1fr}
  .pillar{border-right:0;border-top:1px solid var(--c-line);padding:22px 0 0}
  .pillar:first-child{border-top:0}
  .pillar:nth-child(n+3){margin-top:0}
  .collage{grid-template-columns:1fr}
  .tl{--tl-pad:32px;--tl-x:7px}
  .r-tall,.r-vtall{aspect-ratio:3/4}
  .nums{grid-template-columns:repeat(2,1fr)}
  .cn-btn{width:100%;justify-content:center}
  .motion-note{
    left:12px;right:12px;top:auto;bottom:14px;
    flex-direction:column;gap:9px;border-radius:16px;padding:13px 15px;text-align:center;
  }
}

/* 📱 โหมดหนังบนจอแคบ — 1 ก.ย. 2026
   🩸 เดิม .cine ถูกกั้นไว้ที่ ≥768px ⇒ ไม่เคยมีใครเขียนกฎจอแคบให้ฉากหนังเลย
      พอเปิดใช้บนมือถือ ฉากบริการที่ออกแบบเป็น 2 คอลัมน์เลยบีบตัวหนังสือ
      เหลือ 1-2 คำต่อบรรทัด (Sun ถ่ายจอจริงมาให้ดู)
   ⇒ จอแคบให้ซ้อนเป็นคอลัมน์เดียว + เลขฉากเลิกลอยทับ */
@media (max-width:767px){
  .cine .svc-wrap{grid-template-columns:1fr;gap:22px}
  .cine .svc-no{position:static;left:auto;top:auto;margin:0 0 8px}
  .cine .svc-copy{min-width:0}
}

/* =========================================================
   เคารพค่าเครื่อง "ลดการเคลื่อนไหว"
   หมายเหตุ: ท่าหนังทั้งหมดผูกกับ html.cine ซึ่ง JS จะไม่ใส่ให้
   เมื่อเครื่องตั้งลดการเคลื่อนไหว → หน้านี้กลายเป็นหน้านิ่งโดยอัตโนมัติ
   บล็อกนี้เก็บกวาดของที่เหลือ (keyframes + transition) เท่านั้น
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  /* 🩸 5 ก.ย. 2026 — กฎกู้ทั้งบล็อกนี้ผูกกับ `html:not(.force-motion)`
     แต่ cine-head.js ใส่ `force-motion` ให้ "ทุกคน" เป็นค่าตั้งต้น (Sun เคาะ 29 ส.ค.:
     "อนิเมชั่นเปิดตลอด แต่กดปิดได้") ⇒ กฎกู้ข้างล่างไม่เคยทำงานเลยสักครั้ง
     ผลจริงบนเว็บสด: .rise ทั้ง 38 ตัวค้าง opacity:0 — โลโก้ · คำโปรย · เนื้อหาหลัก
     หายหมดสำหรับคนที่ตั้ง "ลดการเคลื่อนไหว" (Chrome ของ Sun เองก็ตั้งไว้)
     เหตุลึก: transition ค้างสถานะ running ถาวร ⇒ ค่าที่ค้างชนะแม้แต่ !important
     ⇒ กฎ "ต้องมองเห็น" ห้ามผูกกับ force-motion · ต้องปิด transition ด้วยถึงจะหลุด
     (โรคเดียวกับ metal-sheet style.css บล็อก prefers-reduced-motion) */
  .rise{transition:none !important;opacity:1 !important;transform:none !important}

  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after{
    animation:none !important;transition:none !important;
  }
  html:not(.force-motion) .rise{opacity:1;transform:none}
  html:not(.force-motion) .hero-rule{transform:scaleX(1)}
  html:not(.force-motion) .corner{opacity:.75;transform:none}
  html:not(.force-motion) .tl-dot{transform:none;opacity:1;background:var(--c-gold)}
  html:not(.force-motion) .progress{display:none}
  /* เผื่อไว้: ที่ไหนที่กลับเป็น block ต้องปลด place-items ของ grid ด้วย
     ไม่งั้นลูกที่มีแต่ของ absolute จะถูกบีบกว้าง 0 บน Chrome */
  html:not(.force-motion) .dolly,
  html:not(.force-motion) .svc-wrap,
  html:not(.force-motion) .collage,
  html:not(.force-motion) .col{place-items:stretch}
}

/* =========================================================
   บ้าน 3D หมุนได้จริง — ฉากแรก
   สร้างจากระนาบ CSS ล้วน (ไม่ใช่รูปนิ่ง) ⇒ หมุนได้รอบตัวจริง
   ทรงลายเส้นทอง = ภาษาเดียวกับ "แบบเขียน 3D" ซึ่งเป็นจุดขายของแบรนด์
   ขับ 3 ทาง: เลื่อนหน้า · ลากนิ้ว/เมาส์ · หมุนเองช้าๆ ตอนไม่มีใครแตะ
   ========================================================= */
.h3d{
  position:absolute;z-index:2;right:clamp(-40px,2vw,80px);top:50%;
  width:min(46vw,560px);height:min(46vw,560px);
  transform:translateY(-50%);
  perspective:1200px;pointer-events:none;
  opacity:0;transition:opacity 1.4s var(--ease) .5s;
}
.ready .h3d{opacity:1}
.h3d-grab{position:absolute;inset:0;pointer-events:auto;cursor:grab;touch-action:pan-y}
.h3d-grab:active{cursor:grabbing}
.h3d-stage{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(-16deg) rotateY(calc(var(--spin,0deg)));
  will-change:transform;
}
.h3d-stage > *{position:absolute;transform-style:preserve-3d}

/* ผนัง 4 ด้าน — กรอบทองโปร่ง เห็นทะลุได้เหมือนแบบเขียน */
.hw{
  left:50%;top:50%;
  border:1.5px solid var(--gold-line);
  background:linear-gradient(160deg,rgba(191,161,95,.10),rgba(191,161,95,.02));
  box-shadow:inset 0 0 40px rgba(191,161,95,.10);
}
.hw-f,.hw-b{width:260px;height:130px;margin:-65px 0 0 -130px}
.hw-l,.hw-r{width:190px;height:130px;margin:-65px 0 0 -95px}
.hw-f{transform:translateZ(95px)}
.hw-b{transform:translateZ(-95px) rotateY(180deg)}
.hw-l{transform:rotateY(-90deg) translateZ(130px)}
.hw-r{transform:rotateY(90deg) translateZ(130px)}

/* หลังคาจั่ว — 2 ผืนกางลงจากสันหลังคา */
.hr-ridge{left:50%;top:50%;width:0;height:0;transform:translateY(-147px)}
.hrf{
  position:absolute;left:-130px;top:0;width:260px;height:125.5px;
  transform-origin:50% 0;
  border:1.5px solid var(--gold-line);
  background:linear-gradient(180deg,rgba(191,161,95,.22),rgba(191,161,95,.05));
}
.hrf-f{transform:rotateX(-49.2deg)}
.hrf-b{transform:rotateX(49.2deg)}

/* หน้าจั่ว 2 ข้าง — สามเหลี่ยม */
.hg{
  left:50%;top:50%;width:190px;height:82px;margin:-147px 0 0 -95px;
  background:linear-gradient(180deg,rgba(191,161,95,.20),rgba(191,161,95,.04));
  border-top:1.5px solid var(--gold-line);
  clip-path:polygon(50% 0,100% 100%,0 100%);
}
.hg-l{transform:rotateY(-90deg) translateZ(130px)}
.hg-r{transform:rotateY(90deg) translateZ(130px)}

/* พื้น + เงา */
.hf{
  left:50%;top:50%;width:300px;height:230px;margin:-115px 0 0 -150px;
  transform:rotateX(90deg) translateZ(-65px);
  border:1px dashed rgba(191,161,95,.34);
  background:radial-gradient(60% 60% at 50% 50%,rgba(191,161,95,.10),transparent 72%);
}
/* ประตู–หน้าต่างบนผนังหน้า = ให้รู้ว่าเป็นบ้าน ไม่ใช่กล่อง */
.hd{position:absolute;left:50%;bottom:0;width:44px;height:74px;margin-left:-22px;
    border:1.5px solid var(--gold-line);border-bottom:0;background:rgba(191,161,95,.14)}
.hn{position:absolute;top:26px;width:46px;height:34px;border:1.5px solid var(--gold-line);
    background:rgba(191,161,95,.10)}
.hn-a{left:32px} .hn-b{right:32px}

.h3d-cap{
  position:absolute;left:50%;bottom:6%;transform:translateX(-50%);
  white-space:nowrap;font-size:15.5px;letter-spacing:.22em;
  color:var(--on-img-dim);text-transform:uppercase;pointer-events:none;
}

@media (max-width:900px){
  /* จอแคบ: ย้ายไปหลังตัวหนังสือ ทำให้จางลง จะได้ไม่แย่งอ่าน */
  .h3d{right:auto;left:50%;transform:translate(-50%,-50%);width:86vw;height:86vw;opacity:.42}
  .ready .h3d{opacity:.42}
  .h3d-cap{display:none}
}
@media (prefers-reduced-motion:reduce){
  html:not(.force-motion) .h3d-stage{transform:translate(-50%,-50%) rotateX(-14deg) rotateY(-28deg)}
}


/* ---------- ช่องรับ "บ้านจริง" หมุนรอบตัว (ภาพชุดจาก D5) ----------
   ถ้ามีไฟล์ img/spin/frame-01.webp ขึ้นไป จะสลับมาใช้ชุดนี้แทนบ้านลายเส้น
   ไม่มีไฟล์ = ไม่เกิดอะไรเลย บ้านลายเส้นทำงานต่อ (ไม่พัง) */
.h3d-real{position:absolute;inset:0;display:none;place-items:center}
.h3d.has-real .h3d-real{display:grid}
.h3d.has-real .h3d-stage{display:none}
.h3d-real img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.45));
}

/* =========================================================
   bridge.css — สะพานเชื่อม "ชั้นหนัง" (cine.css) กับเว็บจริง (site.css)
   หน้าแรกโหลด 2 ไฟล์: site.css ก่อน แล้ว cine.css (ที่มี bridge ต่อท้าย)
   หน้าที่ของไฟล์นี้มี 3 อย่างเท่านั้น:
     ① แต่งแถบเมนูของจริง (.nav) ให้เป็นแถบบนสุดแบบเดโม่ — เมนู/ลิงก์เดิมครบ ไม่ตัดทิ้ง
     ② พาสไลด์ hero ของจริง (.hero-bg/.hero-slide/.hero-dots) เข้าไปอยู่ในฉากแรก
     ③ คืนพื้นขาว+สีลิงก์ให้ "ครึ่งล่างของหน้า" (.tail) ที่ยังใช้ของเดิมทั้งดุ้น
   🔑 cine.css เปลี่ยนชื่อ --gold/--gold-d/--ink/--line เป็น --c-* แล้ว
      ⇒ ตัวแปรของ site.css ไม่ถูกทับเลย ครึ่งล่างจึงยังเป็นสีเดิมเป๊ะ
   ========================================================= */

/* ① แถบเมนู — ใช้ markup เดิม (.nav) แต่หน้าตาเป็นแถบบนสุดแบบเดโม่ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:65;
  padding:14px clamp(16px,4vw,44px);gap:clamp(8px,1.1vw,13px);
  border-bottom:0;
  /* 🩸 ม่านของเดโม่จางหายเป็นศูนย์ที่ขอบล่าง — บนฉากรูปมืดอ่านออก แต่พอเลื่อนถึง
     "ครึ่งล่างพื้นขาว" ตัวหนังสือแถบเมนูจะจมหายทันที (เจอตอนถ่ายจริง 26 ส.ค.)
     ⇒ โหมดมืดใช้ม่านทึบกว่าเดโม่ + เบลอหลัง · โหมดสว่างใช้ของเดิม (ครีมทึบอยู่แล้ว) */
  background:linear-gradient(180deg,rgba(20,19,18,.94) 0%,rgba(20,19,18,.88) 60%,rgba(20,19,18,.62) 100%);
  backdrop-filter:blur(9px);
  --nav-ink:var(--paper-2);
}
html[data-theme="light"] .nav{background:var(--topbar-scrim);backdrop-filter:none;--nav-ink:var(--dim)}

/* 📱 เมนูมือถือกางอยู่ = แถบบนต้องทึบทั้งแผง
   🩸 ม่านแถบบนของหน้าแรกเป็น "ไล่เฉดจางหายที่ขอบล่าง" (ตั้งใจ เพื่อให้กลืนกับฉากหนัง)
      แต่พอกางเมนู แผงยาวลงมา ⇒ ครึ่งล่างใสจนอ่านตัวหนังสือไม่ออก ทับรูปพอดี
   ⇒ เฉพาะตอนเปิดเมนู เปลี่ยนเป็นสีทึบตามโหมด (ปิดเมนูแล้วกลับเป็นม่านไล่เฉดเหมือนเดิม) */
@media(max-width:600px){
  .nav:has(.nav-tog:checked){background:#141312;backdrop-filter:blur(9px)}
  html[data-theme="light"] .nav:has(.nav-tog:checked){background:#f6f3ec;backdrop-filter:blur(9px)}
  /* ทางถอยสำหรับเบราว์เซอร์ที่ยังไม่รู้จัก :has() — อย่างน้อยตัวแผงเมนูต้องทึบ */
  .nav-tog:checked~.nav-links{background:#141312}
  html[data-theme="light"] .nav-tog:checked~.nav-links{background:#f6f3ec}
  .nav:has(.nav-tog:checked) .nav-links{background:transparent}
}
/* 🔒 Sun เคาะ 29 ส.ค. 2026 (ดูเว็บจริงแล้วบอก): **"โลโก้เล็กไป ไม่สวย"**
   เดิม 30px + แผ่นรองสีเข้มรอบๆ ⇒ บนพื้นครีมเห็นเป็น "สติกเกอร์ดำเม็ดเล็ก" ไม่ใช่โลโก้แบรนด์
   ⇒ โหมดสว่าง: ตัวโลโก้ใหญ่ขึ้นเป็น 46px และ **ถอดแผ่นรองทิ้ง** (ตัวโลโก้เป็นน้ำตาลเข้ม+ส้ม
     อยู่บนครีมได้สบาย ไม่ต้องมีแผ่นรอง) · ชื่อแบรนด์ขยับขึ้นให้สมดุลกับโลโก้
   ✅ ตรวจแล้วทั้ง 2 โหมด: โหมดมืดไม่ต้องมีแผ่นรองเหมือนกัน (--logo-plate เป็น transparent อยู่แล้ว)
      แท่งซ้ายน้ำตาลเข้มยังอ่านรูปทรงออกบนแถบเมนูดำ — กฎแผ่นรองเหลือไว้เผื่อเปลี่ยนสีแถบเมนูภายหลัง */
.nav .brand{color:var(--paper);font-size:20px;font-weight:500;letter-spacing:.02em}
.nav .brand-logo{height:46px;background:var(--logo-plate);box-shadow:0 0 0 6px var(--logo-plate);border-radius:10px}
html[data-theme="light"] .nav .brand-logo{background:transparent;box-shadow:none;border-radius:0}
.nav-links{margin-left:auto;gap:clamp(13px,2vw,28px)}
.nav-links a{
  color:var(--nav-ink);font-size:15.5px;font-weight:400;letter-spacing:.04em;
  transition:color .5s var(--ease);
}
.nav-links a:hover{color:var(--accent-em)}
.nav .nav-cta{
  background:transparent;border:1px solid var(--call-edge);color:var(--call-ink);
  border-radius:999px;padding:8px 18px;font-size:15.5px;font-weight:400;letter-spacing:.04em;
  transition:background .6s var(--ease),transform .6s var(--ease);
}
.nav .nav-cta:hover{background:var(--call-hover);color:var(--call-ink);transform:translate3d(0,-2px,0)}
.nav .theme-btn{margin-left:2px}
/* 🪤 ห้ามใส่ margin-left:auto ที่นี่ — `.nav-links` มี auto อยู่แล้ว
   ใส่ตัวที่สองจะทำให้ที่ว่างถูกหารสองแล้วเมนูลอยไปกลางแถบ */
.nav .motion-btn{margin-left:2px}
@media (max-width:767px){
  .nav{padding:12px 14px}
  .nav .brand span{display:none}
  /* หน้าแรกถอดโลโก้เล็กออกแล้ว (Sun สั่ง) ⇒ ต้องโชว์ชื่อแบรนด์เป็นตัวหนังสือแทน
     ไม่งั้นช่องแบรนด์บนมือถือกลายเป็นลิงก์เปล่า ไม่มีอะไรให้กดและไม่บอกว่าเว็บใคร */
  .nav .brand-text span{display:inline;font-size:18px}
  /* จอแคบซ่อนชื่อแบรนด์อยู่แล้ว เหลือแต่ตัวโลโก้ ⇒ ย่อลงหน่อยไม่ให้กินแถวจนล้น */
  .nav .brand-logo{height:40px}
  .nav-links a{font-size:15.5px}
  .nav .nav-cta{padding:7px 14px;font-size:15.5px}
}

/* ② สไลด์ hero ของจริง 3 ใบ วางในฉากแรก
   - ใช้ <img class="hero-slide"> ⇒ กฎ .cine .hero-media img (ซูมตาม scroll) ของเดโม่ทำงานทันที
   - ปิด kenburns ของ site.css เฉพาะในฉากนี้ ไม่งั้น animation ทับ transform ที่ scroll ขับอยู่ */
#hero .hero-bg{position:absolute;inset:0;z-index:0}
#hero .hero-slide{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 62%;
  opacity:0;transition:opacity 1.8s ease-in-out;animation:none !important;
}
#hero .hero-slide.is-active{opacity:1}
#hero .hero-dots{
  position:absolute;left:auto;right:clamp(16px,4vw,44px);bottom:34px;z-index:4;
  display:flex;gap:9px;
}
#hero .hero-dots .dot{
  width:7px;height:7px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--on-img-dim);box-shadow:none;transition:.3s var(--ease);
}
#hero .hero-dots .dot.is-active{background:var(--c-gold);transform:scale(1.5)}
#hero .hero-scroll{left:clamp(20px,7vw,110px);transform:none;align-items:flex-start}

/* ปุ่มติดต่อในฉากแรก — ทรงเดียวกับปุ่มปิดท้าย
   จอกว้าง: บังคับความกว้างไม่ให้ล้ำไปใต้บ้าน 3D ที่ลอยอยู่ครึ่งขวา */
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,4vh,42px)}
@media (min-width:900px){
  #hero .hero-inner .tagline,
  #hero .hero-inner .cn-lead,
  #hero .hero-inner .hero-cta{max-width:min(54vw,680px)}
}
@media (max-width:767px){
  #hero .hero-cta{gap:9px}
  #hero .hero-cta .cn-btn{flex:1 1 44%;justify-content:center;padding:13px 12px;font-size:17px}
  #hero .hero-cta .cn-btn-gold{flex:1 1 100%}
}

/* ปุ่ม Messenger (คู่กับ โทร + LINE ตามคอร์ส 3 ปุ่มติดกัน) */
.cn-btn-msg{border:1px solid var(--btn-line-edge);color:var(--btn-line-ink)}
.cn-btn-msg:hover{transform:translate3d(0,-3px,0);background:var(--btn-line-hover)}

/* ③ การ์ดบริการ 7 ใบ — ลิงก์ไปหน้าบริการจริง (ทั้งแถวกดได้) */
.svc-go{
  display:inline-block;margin-top:14px;font-size:16px;letter-spacing:.06em;
  color:var(--accent-ink);border-bottom:1px solid var(--c-line);padding-bottom:2px;
  transition:color .6s var(--ease),border-color .6s var(--ease);
}
.svc-go::after{content:'';position:absolute;inset:0}
.svc-item.cur .svc-go{color:var(--accent-em);border-color:var(--gold-line)}

/* ④ ครึ่งล่างของหน้า — ของเดิมทั้งดุ้น คืนพื้น/สีลิงก์/ระยะให้เหมือนก่อนใส่ชั้นหนัง
   z-index:1 = ลอยเหนือ body::before (ตารางกระดาษเขียนแบบที่ปูทั้งจอ) */
.tail{
  position:relative;z-index:1;
  background:var(--bg);color:var(--ink);
  font-weight:300;line-height:1.8;
}
.tail a{color:var(--gold-t)}
.tail .parallax-band a,.tail .dark-band a,.tail .cta-box a,.tail .footer a{color:inherit}
.tail .footer-grid a{color:#c9b07a}
.tail .btn{border-radius:10px}
.tail .fab-toggle{font-family:inherit}
/* เส้นคั่นบางๆ ตรงรอยต่อระหว่าง "ชั้นหนัง" กับครึ่งล่าง */
.tail::before{
  content:'';display:block;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
  opacity:.5;
}

/* ⑤ แถบตัวเลขท้ายฉาก — จำนวนคอลัมน์เดินตามจำนวนการ์ดจริง (cine.css ตั้งไว้ตายตัว 4)
   ⚠️ กฎนี้ specificity สูงกว่า (มี id) ⇒ ชนะกฎใน @media ของ cine.css ด้วย
      เลยต้องเขียน @media ซ้ำที่นี่เอง ไม่งั้นจอแคบจะค้างเป็นหลายคอลัมน์ */
#close .nums{grid-template-columns:repeat(var(--nums,4),1fr)}
@media (max-width:1023px){#close .nums{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){#close .nums{grid-template-columns:1fr;gap:26px}}

/* ⑥ ฉากเปิดแบบ "ต้นแบบ" — 🔒 Sun เคาะ 27 ส.ค. 2026: 🗣️ "รูปแบคกราวขาวไป ซีดจ้างเลย ดูต้นแบบดิ"
   ต้นเหตุ: ของเดิมเอาตัวหนังสือ "ทับรูป" ⇒ ต้องปูม่านครีมทับรูป 94% ให้อ่านออก ⇒ รูปซีด
   ต้นแบบเว็บเก่าไม่ทำแบบนั้น — เขาแยก "แถบตัวหนังสือ" กับ "รูป" คนละฝั่ง รูปเลยเต็มสี
   ⇒ จอกว้าง: ซ้าย = ตัวหนังสือบนพื้นเรียบ · ขวา = รูปเต็มสี ไม่มีม่านทับเลย
     จอแคบ: รูปอยู่บน ตัวหนังสืออยู่ล่าง (ยังไม่ทับกัน) */
#hero .pin{background:var(--hero-panel)}
:root{--hero-panel:#141312}
html[data-theme="light"]{--hero-panel:#fff}

/* โลโก้เต็มในฉากเปิด ทำหน้าที่ h1 — 🔒 Sun เคาะ 29 ส.ค. "โลโก้ไม่เต็ม / เอาไว้ตรงวงแดงใหญ่ๆ"
   🪤 .hero-inner เป็น flex แนวตั้ง (align-items:stretch เป็นค่าตั้งต้น)
      ⇒ รูปข้างในจะถูกดึงกว้างเต็มคอลัมน์ แล้ว width:auto กลายเป็น 685px = โลโก้ยืดเบี้ยว
      (object-fit ค่าตั้งต้นคือ fill ไม่มีอะไรกันให้) ⇒ ต้องล็อกด้วย align-self + object-fit */
.hero-logo{margin:0;align-self:flex-start;line-height:0}
.hero-logo img{
  display:block;width:auto;object-fit:contain;
  /* Sun ย้ำ "ใหญ่ๆ" — คุมด้วยความกว้างจอ ไม่ใช่ความสูงจอ (จอเตี้ยแล้วโลโก้หดจนอ่านเบอร์ไม่ออก) */
  height:clamp(200px,24vw,380px);
}
@media (max-width:899px){
  .hero-logo img{height:clamp(130px,22vw,200px)}
}
/* 15 ก.ย. 2026 (Sun "จัดเลย" · เน้น 5 งาน): บรรทัดบริการย้ายจากเหนือโลโก้มาไว้ใต้โลโก้ ในตัว h1
   => Google อ่านได้ว่าเราทำอะไร (เดิม h1 มีแต่รูปโลโก้) · หน้าตาแบบเดียวกับบรรทัดเล็กเดิม (.cn-eyebrow) */
.hero-kw{
  display:block;margin:18px 0 0;line-height:1.7;
  font-size:15.5px;font-weight:400;letter-spacing:.2em;
  color:var(--accent-ink);
}
@media (max-width:899px){
  .hero-kw{letter-spacing:.1em;margin-top:14px}
}
@media (min-width:900px){
  #hero .pin{
    display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);
    align-items:stretch;overflow:hidden;
  }
  /* รูปย้ายมาอยู่คอลัมน์ขวา และเลิกเป็นพื้นหลังที่ปูเต็มจอ */
  #hero .hero-media{position:relative;inset:auto;grid-area:1/2;height:100%;z-index:0}
  #hero .hero-slide{object-position:50% 44%}   /* ดันขึ้นหน่อย ให้เห็นตัวบ้านมากกว่าสนามหญ้า */
  /* 🔑 หัวใจของการแก้: ปิดม่านที่ปูทับรูป — รูปได้สีจริงคืนมาเต็มๆ */
  #hero .hero-veil,#hero .hero-warm{display:none}
  #hero .hero-media img,#hero .hero-slide{filter:none}
  #hero .hero-inner{
    grid-area:1/1;min-height:0;z-index:2;
    padding:clamp(96px,11vh,150px) clamp(28px,3.6vw,64px) clamp(48px,7vh,90px) clamp(28px,4.6vw,88px);
  }
  /* ตัวหนังสือไม่ได้อยู่บนรูปแล้ว ⇒ ไม่ต้องมีเงาช่วยอ่าน และไม่ต้องบีบความกว้างหนีรูป */
  /* ตัวหนังสือไม่ได้อยู่บนรูปแล้ว ⇒ ตัดเงาทิ้ง · และย่อหัวเรื่องให้พอดีคอลัมน์ (ของเดิมตั้งไว้เต็มจอ ⇒ ตกบรรทัด) */
  #hero .hero-inner h1{text-shadow:none;font-size:clamp(38px,5.1vw,82px)}
  #hero .hero-inner .tagline{font-size:clamp(20px,2.2vw,30px)}
  #hero .hero-cta .cn-btn{padding:13px 24px;font-size:17.5px}
  #hero .hero-inner .tagline,
  #hero .hero-inner .cn-lead,
  #hero .hero-inner .hero-cta{max-width:none}
  #hero .hero-dots{right:auto;left:clamp(28px,4.6vw,88px);bottom:30px}
  #hero .hero-scroll{display:none}
  #hero .corner{display:none}
  /* เส้นคั่นบางๆ ตรงรอยต่อ 2 ฝั่ง */
  #hero .hero-media::before{content:"";position:absolute;inset:0 auto 0 0;width:1px;background:var(--gold-line);opacity:.35;z-index:2}
}

@media (max-width:899px){
  /* จอแคบ: รูปเป็นแถบด้านบน ตัวหนังสืออยู่ใต้รูป — ยังไม่มีอะไรทับรูปเหมือนกัน */
  #hero .pin{display:flex;flex-direction:column;min-height:0}
  #hero .hero-media{position:relative;inset:auto;height:clamp(240px,42vh,380px);flex:none}
  #hero .hero-veil,#hero .hero-warm,#hero .corner,#hero .hero-scroll{display:none}
  #hero .hero-media img,#hero .hero-slide{filter:none}
  #hero .hero-inner{min-height:0;padding:clamp(26px,5vw,40px) 20px 44px}
  #hero .hero-dots{top:clamp(206px,38vh,344px);bottom:auto;right:14px}
}

/* ── ④ ขอประเมินราคา 2 วิธี (#estimate) — Sun เคาะ 30 ส.ค. 2026 ──────────────
   ใช้ตัวแปรของชั้นหนัง (--paper/--dim/--c-line/--c-gold) ⇒ เดินตามโหมดสว่าง-มืดเอง
   ไม่ตั้งสีตายตัว ไม่งั้นโหมดมืดจะอ่านไม่ออกโดยไม่มีใครเห็น */
#estimate{position:relative;z-index:1;padding:clamp(60px,10vh,120px) 0 clamp(70px,12vh,140px)}
.est-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;max-width:1040px;margin:0 auto}
.est-card{border:1px solid var(--c-line);border-radius:10px;padding:30px 28px 26px;
  background:color-mix(in srgb,var(--c-ink) 92%,var(--c-gold));display:flex;flex-direction:column}
.est-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.est-no{font-size:15.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--dim-2)}
.est-price{font-size:17px;font-weight:500;letter-spacing:.02em;color:var(--c-gold);
  border:1px solid var(--c-line);border-radius:999px;padding:5px 15px;white-space:nowrap}
.est-card h3{font-size:clamp(20px,2.2vw,27px);font-weight:400;color:var(--paper);margin:0 0 10px}
.est-lead{font-size:17.5px;color:var(--dim);line-height:1.9;margin:0 0 18px}
/* 🪤 cine.css รีเซ็ต ol,ul ทั้งไฟล์เป็น list-style:none ⇒ ต้องเปิดเลขข้อคืนตรงนี้
      ไม่งั้นได้รายการที่ย่อหน้าแล้วแต่ไม่มีเลข = อ่านไม่ออกว่าเป็นลำดับขั้น */
.est-list{margin:0;padding:0 0 0 1.5em;color:var(--paper-2);font-size:17.5px;line-height:1.95;
  list-style:decimal}
.est-list li{margin:5px 0}
.est-list li::marker{color:var(--c-gold)}
.est-note{margin:18px 0 0;padding-top:15px;border-top:1px solid var(--c-line);
  font-size:16.5px;color:var(--dim-2);line-height:1.85}
@media(max-width:820px){
  .est-grid{grid-template-columns:1fr;gap:18px}
  /* 🩸 1 ก.ย. 2026 — Sun ถ่ายจอมือถือจริงมา: การ์ดถูกเฉือนขอบขวา ป้ายราคาหายครึ่งใบ
     วัดได้: ช่องกริดกว้าง 418px อยู่ในกล่องกว้าง 345px
     เหตุ: .est-price ตั้ง white-space:nowrap + .est-top ไม่ยอมขึ้นบรรทัดใหม่
           ⇒ min-content ของการ์ดกว้างเกินจอ · grid `1fr` = minmax(auto,1fr)
             ซึ่ง auto = min-content ⇒ ช่องถ่างตามเนื้อหา ทะลุกล่องแม่ออกไป
     🔑 บทเรียน: จอแคบต้องปล่อยให้ทุกอย่าง "ยอมแคบลงได้" — nowrap 1 จุดพังทั้งการ์ด
     (เจอตอนเปิดโหมดหนังบนมือถือ แต่ของเสียนี้มีอยู่ก่อนแล้ว ไม่เกี่ยวกับโหมดหนัง) */
  .est-card{min-width:0}
  .est-top{flex-wrap:wrap;gap:8px 12px}
  .est-price{white-space:normal}
}

/* ── ⑤ ช่อง Facebook หน้าแรก — Sun 30 ส.ค.: "การ์ดใบนี้ก็เล็ก" ─────────────────
   วิดเจ็ตของ Facebook รับความกว้างสูงสุด 500px ขยายกล่องไม่ได้
   ⇒ แก้ที่การจัดวาง: ซ้ายเป็นข้อความ+ปุ่ม ขวาเป็นกล่อง ที่ว่างเลยหายไป */
.fb-sec .fb-grid{display:grid;grid-template-columns:1fr 500px;gap:56px;align-items:center;
  max-width:1080px;margin:0 auto}
.fb-sec .fb-copy .eyebrow{text-align:left;margin-bottom:12px}
.fb-sec .fb-copy h2{font-size:clamp(26px,3vw,38px);font-weight:300;letter-spacing:.01em;
  margin:0 0 16px;color:var(--paper)}
.fb-sec .fb-copy p{margin:0 0 26px;color:var(--dim);line-height:2}
.fb-sec .fb-embed{justify-content:flex-end}
@media(max-width:900px){
  .fb-sec .fb-grid{grid-template-columns:1fr;gap:30px}
  .fb-sec .fb-copy .eyebrow{text-align:center}
  .fb-sec .fb-copy{text-align:center}
  .fb-sec .fb-embed{justify-content:center}
}