/* Aidee Smart Dorm — landing (redesign per docs/aidee-landing/CLAUDE-CODE-BRIEF.md)
   โทนแบรนด์เดิม: ครีม + พาสเทล ฟอนต์ IBM Plex Sans Thai
   พาสเทลใช้เป็น accent (ขอบซ้ายการ์ด / badge / เงา offset) ไม่ใช่พื้นแผ่นใหญ่ */

:root{
  --paper:#fbf5e5;
  --ink:#191a17;
  --pink:#efb8d7;
  --yellow:#f2d762;
  --sage:#aabd7c;
  --blue:#b5ccee;
  --border:#282a23;
  --green:#2e795e;
  --card:#fffdf7;
  --muted:#5f5b4c;        /* 7:1 บนพื้นครีม */
  --hair:#ded6c0;
  --dark:#191a17;
  --dark-soft:#22241f;
  --on-dark:#fbf5e5;
  --on-dark-muted:#cfc9b4; /* 10:1 บนพื้นดำ */
  --shadow:4px 4px 0 var(--border);
}

html[data-theme=night]{
  --paper:#17192b;
  --ink:#f6ecd2;
  --border:#8f94bd;
  --card:#1e2138;
  --muted:#c2c6dd;
  --hair:#3a3f5b;
  --green:#7fd0ad;
  --dark:#101223;
  --dark-soft:#191c31;
  --shadow:4px 4px 0 #2b2f4d;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans Thai",system-ui,sans-serif;
  font-size:15px;line-height:1.75;-webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
h1,h2,h3,h4{font-family:Anuphan,"IBM Plex Sans Thai",sans-serif;font-weight:700;margin:0;line-height:1.3;text-wrap:balance}
p{margin:0}
a{color:var(--green);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── ภาษา ── */
[data-en]{display:none!important}
html[lang=en] [data-th]{display:none!important}
html[lang=en] [data-en]{display:inline!important}
html[lang=en] [data-en].block-en{display:block!important}

.wrap{max-width:1200px;margin-inline:auto;padding-inline:20px}
.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0}
.lead{color:var(--muted);line-height:1.85}

section{scroll-margin-top:84px}
.section{padding-block:48px}
.section-head{display:flex;flex-wrap:wrap;gap:18px 32px;align-items:flex-end;justify-content:space-between;margin-bottom:28px}
.section-head h2{font-size:clamp(23px,3vw,30px);max-width:16em}
.section-head .side{color:var(--muted);font-size:13px;line-height:1.7;max-width:26em}

/* ── ปุ่ม ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 22px;border-radius:99px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1.4;
  border:1.5px solid var(--border);background:var(--ink);color:var(--paper);
  cursor:pointer;text-decoration:none;transition:transform .12s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn svg{width:17px;height:17px;flex:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.light{background:var(--paper);color:var(--ink)}
.btn.sage{background:var(--sage);color:#1c1d17}
.btn.block{width:100%}

/* ── NAV ── */
.site-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;gap:20px;height:76px}
.brand-logo{width:128px;height:auto}
.site-nav{display:none;gap:22px;margin-inline:auto;font-size:14px}
.site-nav a{color:var(--ink);font-weight:500}
.nav-actions{display:flex;align-items:center;gap:12px;margin-inline-start:auto}
#langBtn{background:none;border:0;font:inherit;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;padding:8px;min-height:44px}
.theme-toggle{position:relative;width:58px;height:29px;flex:none;border:1.5px solid var(--border);border-radius:99px;background:var(--blue);padding:0;cursor:pointer}
.theme-knob{position:absolute;left:3px;top:2px;width:22px;height:22px;border:1px solid #262a20;border-radius:50%;background:var(--yellow);transition:transform .25s}
html[data-theme=night] .theme-toggle{background:#343b65}
html[data-theme=night] .theme-knob{transform:translateX(26px);background:#e0e3ff}
html[data-theme=night] .brand-logo{background:#fbf5e5;border-radius:9px;padding:4px}
.nav-cta{display:none}
@media (min-width:768px){.nav-cta{display:inline-flex}}
@media (min-width:1024px){.site-nav{display:flex}}

/* ── 02 HERO ── */
.hero{padding-block:44px 52px}
.hero-grid{display:grid;gap:36px;align-items:center}
.hero h1{font-size:clamp(28px,5.2vw,44px);line-height:1.28;margin-top:14px}
.hero-lead{margin-top:16px;max-width:34em;color:var(--muted);line-height:1.9}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-micro{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.8}

/* mock แชท LINE */
.chat{
  background:var(--card);border:1.5px solid var(--border);border-radius:22px;
  box-shadow:8px 8px 0 var(--border);overflow:hidden;max-width:420px;margin-inline:auto;width:100%;
}
.chat-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--sage);color:#1c1d17;border-bottom:1.5px solid var(--border)}
.chat-avatar{width:30px;height:30px;border-radius:50%;background:#fbf5e5;color:#1c1d17;border:1.5px solid var(--border);display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
.chat-bar b{font-size:13.5px;display:block;line-height:1.3}
.chat-bar small{font-size:10.5px;opacity:.85}
.chat-body{padding:16px;display:flex;flex-direction:column;gap:10px;background:#efeadd}
html[data-theme=night] .chat-body{background:#232640}
.chat-day{align-self:center;font-size:10.5px;background:#00000014;color:var(--ink);padding:3px 12px;border-radius:99px}
html[data-theme=night] .chat-day{background:#ffffff1f}
.bubble{max-width:88%;background:var(--card);border:1.2px solid var(--border);border-radius:14px;padding:11px 13px;font-size:13px;line-height:1.65}
.bubble.me{align-self:flex-end;background:var(--sage);color:#1c1d17}
.bill-card{margin-top:9px;border:1.2px solid var(--border);border-radius:11px;overflow:hidden;font-size:12.5px}
.bill-card .bill-head{background:var(--yellow);color:#1c1d17;padding:7px 11px;font-weight:600;border-bottom:1.2px solid var(--border)}
.bill-row{display:flex;justify-content:space-between;gap:12px;padding:5px 11px;border-bottom:1px dashed var(--hair)}
.bill-row.total{background:#00000008;font-weight:700;border-bottom:0;border-top:1.2px solid var(--border);padding-block:7px}
html[data-theme=night] .bill-row.total{background:#ffffff0d}
.bill-due{padding:6px 11px;font-size:11px;color:var(--muted)}
.bill-link{display:block;text-align:center;background:var(--ink);color:var(--paper);padding:8px;font-size:12px;font-weight:600}
.chat-note{margin-top:14px;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.7}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:1fr 420px;gap:56px}
  .chat{margin-inline:0}
}

/* ── 03 แถบความน่าเชื่อถือ ── */
.trust{border-block:1px solid var(--border);background:var(--paper)}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;padding-block:20px}
.trust-item{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.6}
.trust-item svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--green)}
.trust-item b{display:block;font-weight:600}
.trust-item span{color:var(--muted);font-size:12px}
@media (min-width:900px){.trust-grid{grid-template-columns:repeat(4,1fr)}}

/* ── 04 เคสหอที่ใช้จริง ── */
.case-grid{display:grid;gap:20px}
.case-main{
  background:var(--card);border:1.5px solid var(--border);border-left:7px solid var(--pink);
  border-radius:20px;padding:28px;box-shadow:var(--shadow);
}
.badge{display:inline-block;font-size:11px;font-weight:600;padding:4px 12px;border-radius:99px;border:1.2px solid var(--border);background:var(--pink);color:#1c1d17}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.case-logo{width:142px;height:auto;flex:none}
html[data-theme=night] .case-logo{background:#fbf5e8;border-radius:10px;padding:6px 9px}
.case-main h3{font-size:22px;margin-top:18px}
.case-meta{margin-top:6px;color:var(--muted);font-size:13.5px}
.case-facts{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.case-facts li{display:flex;gap:10px;font-size:13.5px;line-height:1.7}
.case-facts li::before{content:"—";color:var(--muted);flex:none}
.case-stats{background:var(--dark);color:var(--on-dark);border:1.5px solid var(--border);border-radius:20px;padding:26px 24px;display:grid;gap:18px;align-content:start}
.stat b{display:block;font-family:Anuphan,sans-serif;font-size:38px;line-height:1.1;color:var(--yellow)}
.stat span{font-size:12.5px;color:var(--on-dark-muted);line-height:1.6}
.case-stats .foot{font-size:11.5px;color:var(--on-dark-muted);border-top:1px solid #ffffff2e;padding-top:14px;line-height:1.7}
@media (min-width:900px){.case-grid{grid-template-columns:1.5fr 1fr}}

/* ── 05 สามขั้นตอน ── */
.flow-grid{display:grid;gap:18px}
.flow-card{background:var(--card);border:1.5px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.flow-shot{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:top center;border-bottom:1.5px solid var(--border);background:#f1ebdd}
.flow-body{padding:18px 20px 22px}
.flow-no{font-family:Anuphan,sans-serif;font-size:13px;font-weight:700;color:#1c1d17;background:var(--yellow);border:1.2px solid var(--border);border-radius:99px;padding:2px 11px;display:inline-block}
.flow-card h3{font-size:17px;margin-top:12px}
.flow-card p{margin-top:8px;font-size:13.5px;color:var(--muted);line-height:1.75}
.shot-note{margin-top:14px;font-size:11.5px;color:var(--muted)}
@media (min-width:768px){.flow-grid{grid-template-columns:repeat(3,1fr)}}

/* ── 06 คลิปเดโม ── */
.demo{background:var(--card);border-block:1px solid var(--border)}
.demo .section{padding-block:44px}
.demo-grid{display:grid;gap:26px;align-items:center}
.demo video{width:100%;height:auto;border:1.5px solid var(--border);border-radius:16px;box-shadow:var(--shadow);background:#000}
.demo h2{font-size:clamp(22px,3vw,28px);margin-top:12px}
.demo p{margin-top:12px;color:var(--muted);line-height:1.85}
.demo-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
@media (min-width:900px){.demo-grid{grid-template-columns:330px 1fr;gap:48px}}

/* ── 08 ราคา + เครื่องคิดเลข ── */
.cycle{display:inline-flex;border:1.5px solid var(--border);border-radius:99px;padding:3px;background:var(--card);gap:2px}
.cycle button{font:inherit;font-size:12.5px;font-weight:600;border:0;background:none;color:var(--ink);padding:8px 15px;min-height:40px;border-radius:99px;cursor:pointer;white-space:nowrap}
.cycle button.is-on{background:var(--ink);color:var(--paper)}
.price-layout{display:grid;gap:20px}
.price-cards{display:grid;gap:14px}
.tier{
  background:var(--card);border:1.5px solid var(--border);border-radius:16px;padding:18px 20px;
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-left:6px solid var(--accent,var(--blue));
}
.tier .rooms{font-family:Anuphan,sans-serif;font-size:19px;font-weight:700;line-height:1.2}
.tier .kind{display:block;font-family:"IBM Plex Sans Thai",sans-serif;font-size:12px;font-weight:400;color:var(--muted);margin-top:2px}
.tier .amount{font-family:Anuphan,sans-serif;font-size:27px;font-weight:700;line-height:1.1;white-space:nowrap}
.tier .per{font-size:12px;color:var(--muted);margin-left:2px}
.tier .sub{flex-basis:100%;font-size:12px;color:var(--muted);margin-top:2px}
.calc{background:var(--dark);color:var(--on-dark);border:1.5px solid var(--border);border-radius:18px;padding:24px;display:flex;flex-direction:column}
.calc h3{font-size:16px;color:var(--on-dark)}
.calc .case{margin-top:10px;font-size:12.5px;color:var(--on-dark-muted);line-height:1.7}
.calc .pct{font-family:Anuphan,sans-serif;font-size:50px;font-weight:700;color:var(--sage);line-height:1.1;margin-top:16px}
.calc .of{font-size:12.5px;color:var(--on-dark-muted);line-height:1.7;margin-top:6px}
.calc .btn{margin-top:auto}
.calc .spacer{height:18px}
.price-note{margin-top:18px;font-size:12.5px;color:var(--muted);line-height:1.85}
.addon{
  margin-top:16px;background:var(--card);border:1.5px solid var(--border);border-radius:16px;
  padding:16px 20px;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;border-left:6px solid var(--yellow);
}
.addon .addon-label{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--muted);flex-basis:100%}
.addon .addon-body{flex:1 1 320px}
.addon h3{font-size:15px}
.addon p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.7}
@media (min-width:640px){.price-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){.price-layout{grid-template-columns:1fr 330px;align-items:start}}

/* modal เครื่องคิดเลขตัวเต็ม */
.modal{border:1.5px solid var(--border);border-radius:20px;padding:0;width:min(560px,calc(100vw - 32px));background:var(--card);color:var(--ink)}
.modal::backdrop{background:#191a17b3}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--hair)}
.modal-head h3{font-size:17px}
.modal-close{border:1.5px solid var(--border);background:none;color:var(--ink);border-radius:99px;width:36px;height:36px;font-size:17px;cursor:pointer;line-height:1}
.modal-body{padding:22px}
.field{display:block;margin-bottom:16px}
.field > span{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input{width:100%;font:inherit;font-size:15px;padding:11px 13px;min-height:46px;border:1.5px solid var(--border);border-radius:12px;background:var(--paper);color:var(--ink)}
.field input[aria-invalid=true]{border-color:#b3452f}
.field-row{display:grid;gap:14px}
@media (min-width:520px){.field-row{grid-template-columns:1fr 1fr}}
.check{display:flex;gap:10px;align-items:flex-start;border:1.5px solid var(--hair);border-radius:12px;padding:12px 14px;margin-bottom:12px;cursor:pointer;font-size:13px;line-height:1.6}
.check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--green)}
.check b{display:block}
.check small{color:var(--muted)}
.result{background:var(--paper);border:1.5px solid var(--border);border-radius:14px;padding:18px;margin-top:6px}
.result .big{font-family:Anuphan,sans-serif;font-size:34px;font-weight:700;line-height:1.15;margin-top:4px}
.result dl{margin:14px 0 0;display:grid;gap:7px;font-size:13px}
.result .line{display:flex;justify-content:space-between;gap:12px}
.result .line.sum{border-top:1px solid var(--hair);padding-top:8px;font-weight:600}
.result .msg{margin-top:10px;font-size:13px;color:#a8412b}
html[data-theme=night] .result .msg{color:#f0a68f}
.share-track{height:10px;border:1.2px solid var(--border);background:var(--paper);border-radius:99px;overflow:hidden;margin:12px 0 8px}
.share-bar{height:100%;background:var(--sage);width:0}
.result small{color:var(--muted);font-size:11.5px;line-height:1.7;display:block}

/* ── 09 ใครอยู่เบื้องหลัง ── */
.who{background:var(--dark);color:var(--on-dark);padding-block:56px;border-block:1px solid var(--border)}
.who h2{font-size:clamp(22px,3vw,30px);color:var(--on-dark)}
.who .eyebrow{color:var(--on-dark-muted)}
.who-intro{display:grid;gap:22px;margin-bottom:30px}
.who-intro p{color:var(--on-dark-muted);line-height:1.9;font-size:14px;margin-top:12px}
.who-why{background:var(--dark-soft);border:1px solid #ffffff2e;border-radius:16px;padding:20px 22px}
.who-why h3{font-size:15px;color:var(--yellow)}
.who-grid{display:grid;gap:14px}
.who-item{background:var(--dark-soft);border:1px solid #ffffff2e;border-radius:14px;padding:18px 20px;border-left:5px solid var(--accent,var(--blue))}
.who-item h3{font-size:14px;color:var(--on-dark)}
.who-item p{margin-top:6px;font-size:13px;color:var(--on-dark-muted);line-height:1.75}
.who-item a{color:var(--sage)}
@media (min-width:900px){
  .who-intro{grid-template-columns:1.25fr 1fr;align-items:center}
  .who-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── 10 FAQ ── */
.faq-grid{display:grid;gap:14px}
.faq-item{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:18px 20px}
.faq-item h3{font-size:15px}
.faq-item p{margin-top:7px;font-size:13.5px;color:var(--muted);line-height:1.75}
@media (min-width:768px){.faq-grid{grid-template-columns:1fr 1fr}}
.fineprint{margin-top:22px;border-top:1px solid var(--hair);padding-top:18px}
.fineprint summary{cursor:pointer;font-size:13px;font-weight:600;list-style:none;min-height:44px;display:flex;align-items:center;gap:8px}
.fineprint summary::-webkit-details-marker{display:none}
.fineprint summary::before{content:"+";font-family:Anuphan,sans-serif;font-size:17px;color:var(--muted)}
.fineprint[open] summary::before{content:"–"}
.fineprint ul{margin:12px 0 0;padding-left:18px;display:grid;gap:9px;font-size:12.5px;color:var(--muted);line-height:1.8}

/* ── 11 CTA + FOOTER ── */
.cta{background:var(--pink);color:#1c1d17;border-top:1.5px solid var(--border);border-radius:36px 36px 0 0;padding-block:48px;margin-top:8px}
.cta-inner{display:grid;gap:24px;align-items:center}
.cta h2{font-size:clamp(22px,3vw,30px);color:#1c1d17}
.cta p{margin-top:10px;font-size:14px;line-height:1.85}
.cta .eyebrow{color:#4a4638}
.cta-action{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.cta-action small{font-size:12px;color:#4a4638}
@media (min-width:900px){.cta-inner{grid-template-columns:1.4fr auto}.cta-action{align-items:flex-end}}
.site-footer{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;padding-block:26px;font-size:12.5px;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:16px;margin-inline-start:auto}

/* ── แถบ CTA ติดล่างจอ (มือถือ) ── */
.mobile-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:12px;align-items:center;
  background:var(--card);border-top:1.5px solid var(--border);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -6px 20px #191a1714;
}
.mobile-cta div{font-size:12px;line-height:1.5}
.mobile-cta b{font-family:Anuphan,sans-serif;font-size:17px;display:block}
.mobile-cta .btn{margin-inline-start:auto;padding-inline:18px}
@media (min-width:768px){.mobile-cta{display:none}}
@media (max-width:767px){body{padding-bottom:82px}}
.rent-share{padding-bottom:16px;border-bottom:1px solid var(--hair)}
#rentMessage{margin-top:4px;font-variant-numeric:tabular-nums}
.case-quote{margin:22px 0 0;padding:16px 18px;border-left:4px solid var(--sage);background:var(--paper);border-radius:0 12px 12px 0;font-size:14px;line-height:1.85}
.case-quote cite{display:block;margin-top:10px;font-style:normal;font-size:12.5px;color:var(--muted)}

/* ── ภาพประกอบ + ภาพเคลื่อนไหว (26 ต.ค. 2569) ──
   ref: Neo Brutalism UI (การ์ดหน้าต่าง + เงาแข็ง) · Interface Friends (เทปไขว้ + สติกเกอร์) · Creative Mines (ไฮไลต์คำ)
   กติกา: ทุกชิ้นมี "ท่าพัก" ที่ครบและอ่านได้โดยไม่ต้องรอ JS · ภาพเคลื่อนไหวเล่นเฉพาะตอนอยู่ในจอ
   หยุดได้ด้วยปุ่ม และไม่เล่นเลยถ้าเครื่องตั้ง "ลดภาพเคลื่อนไหว"
   ภาพประกอบวางบนแผ่นสีครีมเสมอ — เส้นขอบเข้มของภาพจึงอ่านออกทั้งโหมดกลางวันและกลางคืน */
:root{
  --dot:#e3d9c0;
  --chat:#efeadd;
  --on-green:#ffffff;
  --warn:#9a5f0c;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
}
html[data-theme=night]{
  --dot:#2b2f4b;
  --chat:#232640;
  --on-green:#10231b;
  --warn:#f0c46a;
}

/* ปุ่ม: กดแล้วยุบลงไปในเงา */
.btn{box-shadow:3px 3px 0 var(--border);transition:transform .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--border)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.btn svg{transition:translate .25s var(--spring)}
.btn:hover svg{translate:3px 0}

/* โผล่ขึ้นตอนเลื่อนถึง (ขยับอย่างเดียว ไม่ซ่อนเนื้อหา) */
[data-reveal]{transition:translate .9s var(--spring) var(--d,0s),rotate .9s var(--spring) var(--d,0s)}
[data-reveal].armed{translate:0 44px;rotate:-1.2deg}
.section-head[data-reveal].armed{translate:0 18px;rotate:0deg}

/* ── เทปไขว้ ── */
.tapes{position:relative;height:124px;overflow:hidden}
.tape{position:absolute;top:50%;left:-10%;width:120%;padding-block:9px;border-block:1.5px solid var(--border);font-family:Anuphan,"IBM Plex Sans Thai",sans-serif;font-size:17px;font-weight:700;line-height:1.3;white-space:nowrap}
.tape-a{z-index:1;translate:0 -50%;rotate:-3deg;background:var(--yellow);color:#1c1d17;box-shadow:0 4px 0 var(--border)}
.tape-b{translate:0 -50%;rotate:2.6deg;background:var(--ink);color:var(--paper)}
.tape-track{display:flex;width:max-content}
.tape-set{display:flex;align-items:center;gap:20px;padding-right:20px}
.tape .spark{width:15px;height:15px;flex:none}
.tape-track.go{animation:tape-left 42s linear infinite}
.tape-b .tape-track.go{animation-name:tape-right;animation-duration:50s}
.tapes:hover .tape-track{animation-play-state:paused}
@keyframes tape-left{to{translate:calc(-100% / 3) 0}}
@keyframes tape-right{from{translate:calc(-100% / 3) 0}to{translate:0 0}}

/* ── หัวข้อส่วนฟีเจอร์ ── */
.hl{display:inline-block;padding:0 .2em;margin-inline:.08em;border-radius:.28em;rotate:-1.5deg;color:#1c1d17;background:linear-gradient(var(--yellow),var(--yellow)) no-repeat 0 0/100% 100%;transition:background-size .9s var(--ease-out) .3s,color .3s .3s}
.section-head.armed .hl{background-size:0% 100%;color:inherit}
.side-stack{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.motion-btn{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 14px;border:1.4px solid var(--border);border-radius:99px;background:var(--card);color:var(--ink);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:2px 2px 0 var(--border);transition:transform .15s,box-shadow .15s}
.motion-btn:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--border)}
.motion-btn:active{transform:translate(1px,1px);box-shadow:0 0 0 var(--border)}
.motion-btn svg{width:13px;height:13px;flex:none}
.motion-btn .mb-play,.motion-btn .mb-on{display:none}
html.motion-off .motion-btn .mb-pause,html.motion-off .motion-btn .mb-off{display:none}
html.motion-off .motion-btn .mb-play{display:block}
html.motion-off .motion-btn .mb-on{display:inline}

/* ── กริด bento ── */
.bento{display:grid;gap:34px 24px;margin-top:12px}
@media (min-width:720px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"ocr ocr" "bill line" "status line" "slip slip" "income rooms"}
  .t-ocr{grid-area:ocr}.t-bill{grid-area:bill}.t-line{grid-area:line}.t-status{grid-area:status}
  .t-slip{grid-area:slip}.t-income{grid-area:income}.t-rooms{grid-area:rooms}
}
@media (min-width:1040px){
  .bento{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"ocr ocr line" "bill status line" "slip slip slip" "income income rooms"}
}
.bento>:nth-child(2){--d:.08s}.bento>:nth-child(3){--d:.16s}.bento>:nth-child(4){--d:.08s}
.bento>:nth-child(6){--d:.06s}.bento>:nth-child(7){--d:.14s}

.tile{
  position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;
  padding:22px 20px 20px;background:var(--card);
  border:1.5px solid var(--border);border-radius:22px;
  box-shadow:7px 7px 0 0 var(--accent),7px 7px 0 1.5px var(--border);
}
.tile[data-reveal]{transition:transform .25s var(--ease-out),box-shadow .25s var(--ease-out),translate .9s var(--spring) var(--d,0s),rotate .9s var(--spring) var(--d,0s)}
.tile:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 0 var(--accent),10px 10px 0 1.5px var(--border)}
.tile-head{padding-right:92px}
.tile h3{font-size:18px}
.tile-head p{margin-top:6px;font-size:13.5px;line-height:1.75;color:var(--muted);max-width:40em}
.badge-new{display:inline-block;margin-left:6px;padding:1px 10px;border:1.5px solid var(--border);border-radius:99px;background:var(--yellow);color:#1c1d17;font-size:11px;font-weight:700;vertical-align:3px;rotate:-4deg}

/* สติกเกอร์ภาพประกอบ ลอยขึ้นลงช้า ๆ */
.sticker{
  position:absolute;top:-20px;right:14px;z-index:2;width:84px;height:84px;
  display:grid;place-items:center;background:#fbf5e5;
  border:1.5px solid var(--border);border-radius:20px;box-shadow:3px 3px 0 var(--border);
  rotate:var(--r,-5deg);transition:rotate .4s var(--spring),scale .4s var(--spring);
  animation:bob 5.6s ease-in-out var(--bob,0s) infinite;
}
.sticker img{width:68px;height:68px}
.tile:hover .sticker{rotate:0deg;scale:1.08}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@media (min-width:720px){
  .tile-head{padding-right:112px}
  .sticker{width:100px;height:100px;border-radius:24px}
  .sticker img{width:80px;height:80px}
  .sticker-lg{width:120px;height:120px;top:-26px}
  .sticker-lg img{width:98px;height:98px}
  .t-slip .tile-head{padding-right:140px}
}

/* หน้าต่างจำลอง */
.win{display:flex;flex-direction:column;flex:1;min-width:0;border:1.5px solid var(--border);border-radius:16px;overflow:hidden;background:var(--paper);container-type:inline-size}
.win-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;flex:none;background:var(--bar,var(--accent));border-bottom:1.5px solid var(--border);color:#1c1d17;font-size:11.5px;font-weight:600}
.win-bar i{width:10px;height:10px;flex:none;border:1.3px solid #1c1d17;border-radius:50%;background:#fffdf7}
.win-bar>span{flex:1;min-width:0;padding-right:40px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage{
  position:relative;flex:1;padding:16px;font-size:12px;line-height:1.55;
  background-color:var(--paper);
  background-image:radial-gradient(circle at 1px 1px,var(--dot) 1.1px,transparent 1.5px);background-size:16px 16px;
}
.stage p{margin:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:1.3px solid var(--border);border-radius:99px;background:var(--card);color:var(--ink);font-size:11.5px;font-weight:600;white-space:nowrap;box-shadow:2px 2px 0 var(--border);transition:translate .12s,box-shadow .12s,background-color .25s}
.chip svg{width:14px;height:14px;flex:none}
.chip .c-done{display:none}
.chip[data-s=press]{translate:2px 2px;box-shadow:0 0 0 var(--border)}
.chip[data-s=done]{background:var(--sage);color:#1c1d17}
.chip[data-s=done] .c-idle{display:none}
.chip[data-s=done] .c-done{display:inline}

/* 1 · อ่านใบจด */
.ocr-stage{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1.1fr);align-items:center;gap:14px}
.sheet{
  position:relative;overflow:hidden;padding:10px 13px 12px;rotate:-2deg;
  color:#26418f;background-color:#fffaf0;
  background-image:repeating-linear-gradient(to bottom,transparent 0 25px,#cdd9ee 25px 26px);background-position:0 33px;
  border:1.3px solid #2b2a24;border-radius:6px;box-shadow:4px 4px 0 rgba(25,26,23,.2);
}
.sheet-title{font-family:Mali,Caveat,cursive;font-size:12.5px;font-weight:500;color:#8a3b25}
.sheet-grid{display:grid;grid-template-columns:2.4em 1fr 1fr;column-gap:6px;font-family:Caveat,Mali,cursive;font-size:21px;font-weight:600;line-height:26px}
.sheet-grid .sh{font-family:Mali,cursive;font-size:11.5px;font-weight:500;line-height:26px;color:#8a3b25}
.sheet-grid span:nth-child(3n+2):not(.sh){rotate:-3deg}
.sheet-grid span:nth-child(4n+3):not(.sh){rotate:2deg}
.frame{position:absolute;inset:5px;pointer-events:none;--c:#2e795e;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/16px 2.5px,linear-gradient(var(--c),var(--c)) 0 0/2.5px 16px,
    linear-gradient(var(--c),var(--c)) 100% 0/16px 2.5px,linear-gradient(var(--c),var(--c)) 100% 0/2.5px 16px,
    linear-gradient(var(--c),var(--c)) 0 100%/16px 2.5px,linear-gradient(var(--c),var(--c)) 0 100%/2.5px 16px,
    linear-gradient(var(--c),var(--c)) 100% 100%/16px 2.5px,linear-gradient(var(--c),var(--c)) 100% 100%/2.5px 16px;
  background-repeat:no-repeat}
.scan{position:absolute;inset:0;pointer-events:none;opacity:0}
.scan::before{content:"";position:absolute;inset-inline:-4px;top:0;height:2.5px;background:#2fa478;box-shadow:0 0 12px 3px rgba(47,164,120,.5)}
.scan::after{content:"";position:absolute;inset-inline:0;bottom:100%;height:46px;background:linear-gradient(rgba(47,164,120,0),rgba(47,164,120,.2))}
.ocr-stage[data-s=scan] .scan{animation:scan 2.6s linear both}
@keyframes scan{0%{opacity:1;translate:0 0}93%{opacity:1}100%{opacity:0;translate:0 100%}}
.ai-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1.3px solid var(--border);border-radius:99px;background:var(--yellow);color:#1c1d17;font-size:11px;font-weight:700;box-shadow:2px 2px 0 var(--border)}
.ai-chip svg{width:12px;height:12px}
.ocr-stage[data-s=scan] .ai-chip{animation:wiggle .5s ease-in-out 4}
@keyframes wiggle{0%,100%{rotate:0deg}25%{rotate:-8deg}75%{rotate:8deg}}
.ocr-form{padding:10px 11px 11px;background:var(--card);border:1.3px solid var(--border);border-radius:12px;box-shadow:3px 3px 0 var(--border)}
.of-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:4px;font-size:11.5px;font-weight:600;color:var(--muted)}
.of-head b{color:var(--ink);font-variant-numeric:tabular-nums}
.of-cols,.of-row{display:grid;grid-template-columns:2.6em 1fr 1fr;gap:6px;align-items:center}
.of-cols{padding-bottom:3px;font-size:10.5px;color:var(--muted)}
.of-cols span:not(:first-child){text-align:right;padding-right:8px}
.of-row{margin-inline:-5px;padding:3px 5px;border-radius:8px}
.of-rm{font-weight:600;font-variant-numeric:tabular-nums}
.fld{position:relative;height:25px;padding:0 8px;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;border:1.2px solid var(--hair);border-radius:7px;background:var(--paper);font-weight:600;font-variant-numeric:tabular-nums}
.fld i{font-style:normal;transition:translate .4s var(--spring),opacity .25s}
.fld[data-s=empty] i{translate:0 12px;opacity:0}
.fld[data-s=empty]::after{content:"";position:absolute;right:8px;top:6px;bottom:6px;width:1.5px;background:var(--muted);animation:blink 1s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:0}}
.of-row[data-s=hit]{animation:hit 1.1s ease-out}
@keyframes hit{0%{background:rgba(47,164,120,.32)}100%{background:rgba(47,164,120,0)}}
.of-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px}
.of-btn{padding:4px 12px;border:1.3px solid var(--border);border-radius:99px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;box-shadow:2px 2px 0 var(--border);transition:translate .12s,box-shadow .12s}
.of-btn[data-s=press]{translate:2px 2px;box-shadow:0 0 0 var(--border)}
.of-ready{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;color:var(--green);transition:scale .45s var(--spring),opacity .25s}
.of-ready svg{width:14px;height:14px}
.of-ready[data-s=hide]{scale:.5;opacity:0}
@container (max-width:470px){
  .ocr-stage{grid-template-columns:minmax(0,1fr)}
  .ai-chip{justify-self:center}
  .sheet{rotate:-1.2deg}
}

/* 2 · ออกบิล */
.bill-stage{display:flex;flex-direction:column;gap:12px;overflow:hidden}
.batch-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;color:var(--muted)}
.batch-top b{color:var(--ink);font-variant-numeric:tabular-nums}
.batch-bar{height:11px;margin-top:6px;overflow:hidden;border:1.3px solid var(--border);border-radius:99px;background:var(--card)}
.batch-bar i{display:block;height:100%;background:var(--pink);transform-origin:left;transition:scale 1.6s cubic-bezier(.45,.05,.25,1)}
.bill-stage[data-s=down] .batch-bar i{scale:0 1;transition:none}
.pile{position:relative;flex:1;min-height:170px}
.mbill{position:absolute;inset-inline:0;top:10px;margin-inline:auto;width:min(240px,94%);background:var(--card);border:1.3px solid var(--border);border-radius:12px;box-shadow:3px 3px 0 var(--border);transition:translate .8s var(--spring) var(--dl,0s)}
.mb-3{height:152px;top:16px;rotate:7deg}
.mb-2{height:152px;top:12px;rotate:-5deg;--dl:.12s}
.mb-1{overflow:hidden;--dl:.24s}
.bill-stage[data-s=down] .mbill{translate:0 170%;transition:translate .32s ease-in}
.mb-head{padding:6px 10px;background:var(--yellow);color:#1c1d17;font-weight:600;border-bottom:1.3px solid var(--border)}
.mb-row{display:flex;justify-content:space-between;gap:10px;padding:4px 10px;border-bottom:1px dashed var(--hair);font-variant-numeric:tabular-nums}
.mb-total{padding-block:6px;border-top:1.3px solid var(--border);border-bottom:0;font-weight:700}
.link-chip{align-self:center}

/* 3 · ส่ง LINE */
.line-stage{display:flex;flex-direction:column;gap:14px}
.phone{flex:1;display:flex;flex-direction:column;overflow:hidden;border:1.3px solid var(--border);border-radius:16px;background:var(--chat);box-shadow:3px 3px 0 var(--border)}
.phone-bar{display:flex;align-items:center;gap:8px;padding:7px 11px;background:var(--sage);color:#1c1d17;border-bottom:1.3px solid var(--border);line-height:1.3}
.phone-bar b{display:block;font-size:12px}
.phone-bar small{font-size:10px;opacity:.85}
.av{width:26px;height:26px;flex:none;display:grid;place-items:center;border:1.3px solid var(--border);border-radius:50%;background:#fbf5e5;font-size:11px;font-weight:700}
.phone-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px;min-height:226px}
.lb{align-self:flex-start;max-width:92%;padding:8px 10px;background:var(--card);border:1.2px solid var(--border);border-radius:4px 14px 14px 14px;transform-origin:0 0;transition:scale .5s var(--spring),opacity .2s}
.lb[data-s=hide]{scale:.35;opacity:0}
.lb-amt{display:block;margin-top:2px;font-family:Anuphan,sans-serif;font-size:19px;font-variant-numeric:tabular-nums}
.lb-btn{display:block;margin-top:7px;padding:5px 8px;border-radius:8px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;text-align:center}
.lb-tag{display:inline-block;margin-right:6px;padding:0 8px;border:1.2px solid var(--border);border-radius:99px;background:var(--pink);color:#1c1d17;font-size:10px;font-weight:700}
.chat-day2{align-self:center;padding:1px 10px;border-radius:99px;background:rgba(0,0,0,.08);font-size:10px;transition:opacity .3s}
html[data-theme=night] .chat-day2{background:rgba(255,255,255,.12)}
.chat-day2[data-s=hide]{opacity:0}
.deliv{padding:10px 12px;background:var(--card);border:1.3px solid var(--border);border-radius:14px;box-shadow:3px 3px 0 var(--border)}
.dv-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--muted)}
.dv-head b{color:var(--green);font-variant-numeric:tabular-nums}
.deliv ul{margin:0;padding:0;list-style:none}
.deliv li{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:30px;border-bottom:1px dashed var(--hair);font-variant-numeric:tabular-nums}
.deliv li:last-child{border-bottom:0}
.st{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;transition:scale .4s var(--spring)}
.st svg{width:13px;height:13px}
.st.ok{color:var(--green)}
.st.skip{padding:0 8px;border:1.2px dashed var(--border);border-radius:99px;color:var(--muted);font-weight:500}
.deliv li[data-s=wait] .st{display:none}
.deliv li[data-s=wait]::after{content:"";width:13px;height:13px;border:2px solid var(--hair);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{rotate:360deg}}

/* 4 · สถานะบิล */
.status-stage{display:flex;flex-direction:column;justify-content:center;gap:16px}
.room-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;perspective:500px}
.rm{height:46px;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;border:1.3px solid var(--border);border-radius:10px;font-weight:700;font-variant-numeric:tabular-nums;transition:background-color .15s}
.rm::after{font-size:11px;font-weight:800}
.rm.paid{background:var(--sage);color:#1c1d17}
.rm.paid::after{content:"✓"}
.rm.wait{background:var(--card);color:var(--ink);border-style:dashed}
.rm.wait::after{content:"···";color:var(--muted)}
.rm.over{background:var(--pink);color:#1c1d17}
.rm.over::after{content:"!"}
.rm[data-s=flip]{animation:flip .46s ease-in-out}
@keyframes flip{50%{transform:rotateX(90deg)}}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:11.5px;color:var(--muted)}
.lg{display:inline-flex;align-items:center;gap:6px}
.lg i{width:13px;height:13px;border:1.2px solid var(--border);border-radius:4px}
.lg-paid i{background:var(--sage)}
.lg-wait i{background:var(--card);border-style:dashed}
.lg-over i{background:var(--pink)}
.lg b{color:var(--ink);font-variant-numeric:tabular-nums}

/* 5 · ตรวจสลิป */
.slip-stage{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.slip-stage[data-case=short] .if-ok,.slip-stage:not([data-case=short]) .if-short{display:none}
.sl-label{margin-bottom:8px;font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sl-arrow{display:none}
.src{display:flex;margin-bottom:9px}
.src>span{display:none;align-items:center;padding:1px 10px;border:1.2px solid var(--border);border-radius:99px;background:var(--sage);color:#1c1d17;font-size:10.5px;font-weight:600}
.slip-stage[data-src=line] .src-line,.slip-stage[data-src=link] .src-link{display:inline-flex}
.src-link{background:var(--blue)!important}
.bslip{position:relative;max-width:250px;padding:11px 12px 12px;rotate:-1.5deg;background:#fff;color:#1c1d17;border:1.3px solid #2b2a24;border-radius:12px;box-shadow:4px 4px 0 rgba(25,26,23,.2);transition:translate .65s var(--spring),rotate .65s var(--spring),opacity .25s}
.bslip[data-s=off]{translate:-46px 14px;rotate:-12deg;opacity:0}
.bs-top{display:flex;align-items:center;gap:6px;font-weight:600;color:#2e795e}
.bs-top svg{width:17px;height:17px;padding:3px;border-radius:50%;background:#2e795e;color:#fff}
.bs-amt{margin-top:3px;font-family:Anuphan,sans-serif;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}
.bs-meta{font-size:10.5px;line-height:1.5;color:#5f5b4c}
.bs-qr{position:absolute;right:11px;bottom:11px;width:30px;height:30px;border:2px solid #1c1d17;background:repeating-conic-gradient(#1c1d17 0 25%,#fff 0 50%) 0 0/7px 7px}
.checks{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.checks li{display:flex;align-items:flex-start;gap:8px;line-height:1.45;transition:color .2s}
.checks i{position:relative;flex:none;width:18px;height:18px;margin-top:-1px;border:1.3px solid var(--border);border-radius:50%;background:var(--green);transition:background-color .2s,scale .4s var(--spring)}
.checks i::after{content:"";position:absolute;left:5.3px;top:2.2px;width:4px;height:8px;border:solid var(--on-green);border-width:0 2px 2px 0;rotate:45deg}
.checks li[data-s=todo]{color:var(--muted)}
.checks li[data-s=todo] i{background:transparent;scale:.8}
.checks li[data-s=todo] i::after{opacity:0}
.slip-stage[data-case=short] .ck-amt:not([data-s=todo]){color:var(--warn);font-weight:600}
.slip-stage[data-case=short] .ck-amt:not([data-s=todo]) i{background:#f2c46b}
.slip-stage[data-case=short] .ck-amt:not([data-s=todo]) i::after{content:"!";inset:0;left:0;top:0;width:auto;height:auto;border:0;rotate:0deg;color:#1c1d17;font-size:12px;font-weight:800;line-height:16px;text-align:center}
.verdict{display:inline-flex;padding:6px 15px;border:1.5px solid var(--border);border-radius:99px;background:var(--green);color:var(--on-green);font-family:Anuphan,sans-serif;font-size:15px;font-weight:700;box-shadow:3px 3px 0 var(--border);transition:scale .5s var(--spring),opacity .2s}
.verdict[data-s=hide]{scale:.3;opacity:0}
.slip-stage[data-case=short] .verdict{background:#f2c46b;color:#1c1d17}
.vbill{position:relative;max-width:250px;margin-top:12px;padding:10px 12px;background:var(--card);border:1.3px solid var(--border);border-radius:12px;box-shadow:3px 3px 0 var(--border)}
.vb-amt{font-family:Anuphan,sans-serif;font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.stamp{position:absolute;right:10px;top:50%;translate:0 -50%;rotate:-12deg;padding:2px 10px;border:2.2px solid var(--green);border-radius:8px;color:var(--green);font-family:Anuphan,sans-serif;font-size:14px;font-weight:700;letter-spacing:.03em;transition:scale .38s cubic-bezier(.5,1.9,.6,1),opacity .15s}
.stamp[data-s=hide]{scale:2.4;opacity:0}
.vb-open{display:none;position:absolute;right:10px;top:50%;translate:0 -50%;padding:1px 9px;border:1.2px dashed var(--border);border-radius:99px;color:var(--warn);font-size:11px;font-weight:600}
.slip-stage[data-case=short] .stamp{display:none}
.slip-stage[data-case=short] .vb-open{display:inline-block}
.out{max-width:260px;padding:10px 12px;background:var(--card);border:1.3px solid var(--border);border-radius:12px;box-shadow:3px 3px 0 var(--border);transform-origin:0 0;transition:scale .5s var(--spring),opacity .2s}
.out[data-s=hide]{scale:.4;opacity:0}
.slip-stage[data-case=short] .receipt,.slip-stage:not([data-case=short]) .queue{display:none}
.rc-head{margin-bottom:6px;padding-bottom:6px;border-bottom:1.2px dashed var(--hair);font-weight:700}
.rc-row{display:flex;justify-content:space-between;gap:8px;font-variant-numeric:tabular-nums}
.rc-foot{margin-top:6px;font-size:10.5px;color:var(--muted)}
.q-head{font-weight:700;color:var(--warn)}
.q-btns{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.q-btn{padding:3px 11px;border:1.2px solid var(--border);border-radius:99px;background:var(--card);font-size:11px;font-weight:600;box-shadow:2px 2px 0 var(--border);transition:translate .12s,box-shadow .12s}
.q-part{background:var(--sage);color:#1c1d17}
.q-btn[data-s=press]{translate:2px 2px;box-shadow:0 0 0 var(--border)}
.q-note{margin-top:8px;font-size:11px;color:var(--muted);transition:opacity .3s}
.q-note[data-s=hide]{opacity:0}
@container (min-width:540px){
  .slip-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 20px}
}
@container (min-width:940px){
  .slip-stage{grid-template-columns:minmax(0,.95fr) 26px minmax(0,1.3fr) 26px minmax(0,.95fr) 26px minmax(0,1fr);gap:12px;align-items:start;padding-block:20px}
  .sl-arrow{display:block;align-self:center;position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--border) 0 5px,transparent 5px 9px)}
  .sl-arrow::after{content:"";position:absolute;right:-2px;top:-5px;border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--border)}
}

/* 6 · สรุปรายรับ */
.inc-stage{display:flex;flex-direction:column;gap:14px}
.inc-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px}
.kpi small{display:block;font-size:11px;color:var(--muted)}
.kpi b{font-family:Anuphan,sans-serif;font-size:25px;line-height:1.15;font-variant-numeric:tabular-nums}
.kpi b.warn{color:var(--warn)}
.xls{margin-left:auto}
.chart{display:grid;grid-template-columns:40px minmax(0,1fr)}
.plot{grid-column:2;position:relative;height:150px;border-left:1.3px solid var(--border);border-bottom:1.3px solid var(--border)}
.gl{position:absolute;left:0;right:0;bottom:calc(var(--p) * 1%);border-top:1px dashed var(--hair)}
.gl:first-child{border-top:0}
.gl em{position:absolute;right:calc(100% + 7px);top:0;translate:0 -50%;font-size:10.5px;font-style:normal;color:var(--muted);white-space:nowrap}
.bars,.months{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:9%;padding-inline:5%}
.bars{position:absolute;inset:0;align-items:end}
.bar{display:flex;flex-direction:column;justify-content:flex-end;height:100%;transform-origin:50% 100%;transition:scale .95s var(--spring) calc(var(--i) * 80ms + .25s)}
.bar i{display:block;border:1.3px solid var(--border)}
.bar .o{height:calc(var(--o) / 120 * 100%);border-bottom:0;border-radius:6px 6px 0 0;background:var(--pink)}
.bar .c{height:calc(var(--c) / 120 * 100%);background:var(--sage)}
.t-income.armed .bar{scale:1 .04}
.months{grid-column:2;margin-top:6px;font-size:10.5px;color:var(--muted);text-align:center}
.inc-legend{display:flex;gap:16px;font-size:11px;color:var(--muted)}
.inc-legend>span{display:inline-flex;align-items:center;gap:6px}
.inc-legend i{width:12px;height:12px;border:1.2px solid var(--border);border-radius:3px}
.inc-legend .c{background:var(--sage)}
.inc-legend .o{background:var(--pink)}

/* 7 · ห้องและผู้เช่า */
.room-stage{display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.pp-row{display:flex;flex-wrap:wrap;gap:6px}
.pp{padding:3px 12px;border:1.3px solid var(--border);border-radius:99px;background:var(--card);font-size:11.5px;font-weight:600;transition:background-color .25s,translate .3s var(--spring),box-shadow .3s}
.room-stage[data-phase="1"] .pp[data-p="1"],
.room-stage[data-phase="2"] .pp[data-p="2"],
.room-stage[data-phase="3"] .pp[data-p="3"]{background:var(--yellow);color:#1c1d17;translate:-1px -2px;box-shadow:2px 2px 0 var(--border)}
.floor{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:36px}
.spot{height:84px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:6px 4px;border:1.3px solid var(--border);border-radius:12px;background:var(--card);font-size:11px;line-height:1.35;text-align:center;transition:background-color .35s}
.spot b{font-size:14px;font-variant-numeric:tabular-nums}
.bench{border-style:dashed;background:transparent;color:var(--muted)}
.bld{color:var(--muted)}
.rc .occ{display:none}
.rc .vac{color:var(--muted)}
.room-stage[data-phase="1"] .rc-a,.room-stage[data-phase="2"] .rc-b{background:var(--sage);color:#1c1d17}
.room-stage[data-phase="1"] .rc-a .occ,.room-stage[data-phase="2"] .rc-b .occ{display:inline}
.room-stage[data-phase="1"] .rc-a .vac,.room-stage[data-phase="2"] .rc-b .vac{display:none}
.room-stage[data-phase="1"] .rc-a .bld,.room-stage[data-phase="2"] .rc-b .bld{color:#3d3f33}
.who-chip{position:absolute;top:14px;left:calc(var(--x) - 18px);width:36px;height:36px;display:grid;place-items:center;border:1.5px solid var(--border);border-radius:50%;background:var(--yellow);color:#1c1d17;box-shadow:2px 2px 0 var(--border);transition:left .95s cubic-bezier(.65,0,.3,1.15),opacity .35s;--x:16%}
.who-chip svg{width:20px;height:20px}
.room-stage[data-phase="1"] .who-chip{--x:50%}
.room-stage[data-phase="2"] .who-chip{--x:84%}
.room-stage[data-phase="3"] .who-chip{--x:112%;opacity:0}
.room-stage[data-phase="0"] .who-chip{transition:opacity .45s .1s}
.who-chip[data-s=hop]{animation:hop .95s ease-in-out}
@keyframes hop{0%,100%{translate:0 0}45%{translate:0 -18px}}
.room-log{min-height:36px;padding:7px 12px;border:1.3px solid var(--border);border-radius:10px;background:var(--card);font-size:11.5px;font-weight:600;box-shadow:2px 2px 0 var(--border)}
.room-log::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--green);vertical-align:1px}
.room-log>span{display:none}
.room-stage[data-phase="0"] [data-ph="0"],.room-stage[data-phase="1"] [data-ph="1"],
.room-stage[data-phase="2"] [data-ph="2"],.room-stage[data-phase="3"] [data-ph="3"]{display:inline-block;animation:log-in .45s var(--ease-out)}
@keyframes log-in{from{opacity:0;translate:0 6px}}
#features .shot-note{margin-top:30px}

/* ── CTA: ป้ายหมุน + ประกาย ── */
.cta-badge{position:relative;width:184px;height:184px;display:grid;place-items:center;margin-bottom:6px}
.cta-badge .ring{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite}
.ring-bg{fill:var(--yellow);stroke:#1c1d17;stroke-width:1.5}
.cta-badge text{font-family:Anuphan,"IBM Plex Sans Thai",sans-serif;font-size:13.5px;font-weight:700;fill:#1c1d17}
.cta-badge text[data-th]{font-size:14.4px} /* ให้ข้อความเต็มวงพอดี (วัดใน Chrome) */
.cta-plate{position:relative;z-index:1;width:112px;height:112px;display:grid;place-items:center;border:1.5px solid #1c1d17;border-radius:50%;background:#fbf5e5;box-shadow:3px 3px 0 #1c1d17;animation:bob 5s ease-in-out infinite}
.cta-plate img{width:84px;height:84px}
.twinkle{position:absolute;z-index:2;width:22px;height:22px;color:#1c1d17;animation:twinkle 2.6s ease-in-out infinite}
.tw1{top:-6px;left:10px}
.tw2{top:26px;right:-12px;width:15px;height:15px;color:#fbf5e5;animation-delay:.9s}
.tw3{bottom:2px;left:-10px;width:17px;height:17px;animation-delay:1.6s}
@keyframes twinkle{0%,100%{scale:.55;rotate:0deg}50%{scale:1.1;rotate:90deg}}

/* หยุดภาพเคลื่อนไหวทั้งหมด (ปุ่มหยุด) */
html.motion-off .sticker,html.motion-off .tape-track,html.motion-off .cta-badge .ring,html.motion-off .cta-plate,html.motion-off .twinkle{animation:none}

/* ── 02 HERO: แชทเล่นเอง + ขั้นตอนไฮไลต์ตามจังหวะแชท ──
   ท่าพัก = บทสนทนาครบ (บิล → สลิป → ใบเสร็จ) เลื่อนอยู่ล่างสุดแบบแชทจริง
   ข้อความในแชทใช้ถ้อยคำเดียวกับที่ระบบส่งจริง (แม่แบบบิล/ใบเสร็จ + บรรทัดตอบอัตโนมัติ) */
main{overflow-x:clip} /* สติกเกอร์ที่ยื่นเลยขอบจอ ไม่ทำให้หน้าเลื่อนข้าง */
.hl-sage{background-image:linear-gradient(var(--sage),var(--sage));rotate:1.5deg}

.hero-steps{display:flex;flex-wrap:wrap;gap:8px;max-width:36em;margin:22px 0 0;padding:0;list-style:none}
.hero-steps li{display:inline-flex;align-items:center;gap:7px;padding:4px 13px 4px 5px;border:1.4px solid var(--border);border-radius:99px;background:var(--card);font-size:13px;font-weight:600;line-height:1.35;transition:background-color .3s,color .3s,translate .4s var(--spring),box-shadow .4s var(--spring)}
.hero-steps b{flex:none;display:grid;place-items:center;width:23px;height:23px;border:1.3px solid var(--border);border-radius:50%;background:var(--paper);font-family:Anuphan,sans-serif;font-size:12px;line-height:1}
.hero-steps li[data-s=on]{background:var(--yellow);color:#1c1d17;translate:-2px -2px;box-shadow:3px 3px 0 var(--border)}
.hero-steps li[data-s=done]{background:var(--sage);color:#1c1d17}
.hero-steps li[data-s=on] b,.hero-steps li[data-s=done] b{background:#fffdf7;color:#1c1d17}
.hero-steps li[data-s=done] b{font-size:0}
.hero-steps li[data-s=done] b::after{content:"✓";font-size:12px}
.hero .hero-lead{margin-top:14px}

.hero-visual{position:relative;width:100%;max-width:420px;margin-inline:auto}
@media (min-width:1024px){.hero-visual{margin-inline:0}}
/* สติกเกอร์วางนอกขอบแชท ไม่ทับรูปโปรไฟล์/ชื่อหอ และไม่ทับฟองข้อความในท่าพัก */
.hs{z-index:3;width:70px;height:70px;border-radius:18px}
.hs img{width:56px;height:56px}
.hs-meter{top:-30px;right:12px}
.hs-paid{display:none}
@media (min-width:720px){
  .hs{width:88px;height:88px;border-radius:22px}
  .hs img{width:72px;height:72px}
  .hs-meter{top:-36px;right:-16px}
  .hs-paid{display:grid;top:auto;right:auto;left:-72px;bottom:36px}
}
.hs[data-s=go] img{animation:wiggle .5s ease-in-out 3}
.hs-paid[data-s=go] img{animation:pop-in .7s var(--spring)}
@keyframes pop-in{0%{scale:.55}60%{scale:1.15}100%{scale:1}}

/* แชท: สูงคงที่ ข้อความใหม่ดันของเก่าขึ้น (ไม่ทำให้หน้าเว็บกระตุก) */
.hero .chat-body{display:block;height:480px;padding:0;overflow:hidden}
.chat-track{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:0 16px 16px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px)}
.msg{display:grid;grid-template-rows:1fr;margin-top:10px;transition:grid-template-rows .55s var(--ease-out),margin-top .55s var(--ease-out)}
.msg>.in{display:flex;flex-direction:column;align-items:flex-start;min-height:0;overflow:hidden}
.msg.me>.in{align-items:flex-end}
.msg-day>.in{align-items:center}
.msg[data-s=hide],.typing-msg{grid-template-rows:0fr;margin-top:0}
.typing-msg[data-s=on]{grid-template-rows:1fr;margin-top:10px}
.msg .bubble,.msg .chat-day,.slip-img{transform-origin:0 0;transition:scale .5s var(--spring),translate .5s var(--spring),opacity .3s}
.msg.me .bubble,.slip-img{transform-origin:100% 0}
.msg[data-s=hide] .bubble,.msg[data-s=hide] .chat-day{scale:.55;opacity:0}
.msg.me[data-s=hide] .bubble,.msg[data-s=hide] .slip-img{scale:1;translate:36px 0;opacity:0}
.typing{display:inline-flex;gap:4px;padding:10px 13px;background:var(--card);border:1.2px solid var(--border);border-radius:4px 14px 14px 14px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typing 1s ease-in-out infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
.typing-msg:not([data-s=on]) .typing i{animation:none}
@keyframes typing{0%,60%,100%{translate:0 0;opacity:.45}30%{translate:0 -4px;opacity:1}}

.slip-img{position:relative;width:188px;padding:9px 11px 10px;background:#fff;color:#1c1d17;border:1.2px solid #2b2a24;border-radius:12px;font-size:11px;line-height:1.45}
.si-top{display:flex;align-items:center;gap:5px;font-weight:600;color:#2e795e}
.si-top svg{width:15px;height:15px;padding:2px;border-radius:50%;background:#2e795e;color:#fff}
.si-amt{margin-top:2px;font-family:Anuphan,sans-serif;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums}
.si-meta{font-size:10.5px;color:#5f5b4c}
.si-qr{position:absolute;right:10px;bottom:10px;width:26px;height:26px;border:2px solid #1c1d17;background:repeating-conic-gradient(#1c1d17 0 25%,#fff 0 50%) 0 0/6px 6px}

.rc-actions{display:flex;align-items:center;gap:10px;margin-top:8px}
.rc-actions .bill-link{flex:1;border-radius:9px}
.hstamp{flex:none;padding:1px 9px;border:2px solid var(--green);border-radius:8px;color:var(--green);font-family:Anuphan,sans-serif;font-size:13px;font-weight:700;rotate:-10deg;transition:scale .4s cubic-bezier(.5,1.9,.6,1),opacity .15s}
.hstamp[data-s=hide]{scale:2.3;opacity:0}
.bot-note{display:block;margin-top:6px;font-size:10.5px;color:var(--muted)}

/* ฝั่งเจ้าของหอ: สถานะห้อง 204 ติดตามจังหวะแชท */
.owner-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 8px;margin-top:20px;font-size:12px}
.os-label{margin-right:2px;color:var(--muted)}
.os-pill{padding:1px 11px;border:1.3px solid var(--border);border-radius:99px;color:#1c1d17;font-weight:600;transition:background-color .3s,color .3s,scale .45s var(--spring)}
.os-sent{background:var(--blue)}
.os-slip{background:var(--yellow)}
.os-paid{background:var(--sage)}
.os-pill[data-s=off]{background:transparent;color:var(--muted);border-style:dashed;scale:.92}