/* หน้าแรก puenweb.me (storefront/home.php) จาก mockup รอบ 4 แบบ ค1 + ก่อน/หลัง ต1 / ฟอนต์ Anuphan / ไม่มีโหมดมืด */
:root{
  /* แนว: หน้าขาว แถบพาสเทลจากสีแบรนด์สลับกัน หัวข้อกลาง ช่องว่างเยอะ / ภาพการไหลวาดมือ: การ์ดเอียง → มือถือกรอบเส้น → การ์ดปลายทาง / ฟูทำงานในทุกฉาก */
  color-scheme: light;
  --ink:#17202C; --brand:#1F3A5F; --brand-deep:#0E1B33; --muted:#667085; --body:#3B4656; --line:#E3E8EF; --field:#F4F6F9;
  --accent:#F28A2E; --accent-text:#B4500F; --accent-soft:#FFF1E6; --ok:#1F7A47; --ok-bg:#E6F5EC;
  --primary:linear-gradient(180deg,#D2581F,#B3421A);
  --page:#FFFFFF; --page-c3:#F1F4F9;
  --b-mint:#EAF7F2; --b-peach:#FFF3E7; --b-sky:#EDF2FA; --b-cream:#FFF9F0;
  --blob:#FFE6CF;
  --sh-1:0 1px 2px rgba(16,24,40,.06),2px 4px 12px -4px rgba(16,24,40,.12);
  --sh-2:0 1px 2px rgba(16,24,40,.06),6px 14px 28px -12px rgba(16,24,40,.25);
  --sh-3:0 1px 2px rgba(16,24,40,.06),10px 20px 36px -14px rgba(16,24,40,.32);
  --sh-btn:inset 0 1px 0 rgba(255,255,255,.35),2px 8px 16px -6px rgba(179,66,26,.6);
  --font:'Anuphan','Noto Sans Thai','Leelawadee UI',Tahoma,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid rgba(242,138,46,.6);outline-offset:2px}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gl{flex:none;width:48px;height:48px}
/* ห่วงโลโก้จริง (รูป 237x144) ตั้งแค่ความสูง ห้ามต่ำกว่า 16px (BRAND.md › Logo) */
.rg{flex:none;display:block;width:auto;height:24px}
.w{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.nw{white-space:nowrap}
/* ===== หน้าเว็บ ===== */
#lp{position:relative;background:var(--page);overflow-x:clip}
.band{position:relative;background:var(--bc,transparent)}
.pan{padding-block:96px}
.hero .pan{padding-block:28px 88px}
@media (max-width:959px){.pan{padding-block:64px}.hero .pan{padding-block:16px 56px}}

.top-in{display:flex;align-items:center;gap:22px;padding-block:14px}
/* โลโก้แบบบรรทัดเดียว ขนาดเดียวกับแถบบน Dashboard (DESIGN.md Component "โลโก้"): ห่วง 24 ห่าง 8 ชื่อ 21px */
.mark{display:inline-flex;align-items:center;gap:8px;font-size:21px;font-weight:700;line-height:1;color:var(--brand);text-decoration:none;letter-spacing:-.02em}
.top-l{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:500}
.top-l a,.top-li{text-decoration:none;color:var(--body)}
.top-li{font-size:15px;font-weight:600}
@media (max-width:820px){.top-l{display:none}.top-li{margin-left:auto}}

.hero .pan{position:relative;overflow:hidden}
.hero .pan::before{content:'';position:absolute;right:-140px;top:-180px;width:640px;height:640px;border-radius:50%;background:radial-gradient(circle,rgba(255,206,160,.5),rgba(255,206,160,0) 68%);pointer-events:none}
.hero .pan::after{content:'';position:absolute;left:-220px;bottom:-260px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(127,216,198,.3),rgba(127,216,198,0) 68%);pointer-events:none}
.hero .w{position:relative;z-index:1}
.hero-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:28px}
@media (max-width:959px){.hero-g{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:12px}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px 7px 10px;border-radius:999px;background:#fff;box-shadow:var(--sh-1);font-size:13px;font-weight:600;color:var(--brand)}
.eyebrow .rg{height:18px}
h1{margin:18px 0 0;font-size:clamp(34px,4.6vw,54px);line-height:1.16;letter-spacing:-.005em;font-weight:700;text-wrap:balance}
h1 .kw{color:var(--accent-text)}
.lead{margin:16px 0 0;max-width:34em;font-size:18px;line-height:1.65;color:var(--body)}
.lead b{color:var(--ink);font-weight:600}
@media (max-width:600px){.lead{font-size:16px}}
.crumb{display:flex;gap:8px;font-size:14px;color:var(--muted)}
.crumb a{color:var(--accent-text);text-decoration:none;font-weight:600}

.claim{margin-top:24px;max-width:540px}
.claim-l{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
.claim-row{display:flex;gap:8px;padding:6px;border:1.5px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-2)}
.claim-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(242,138,46,.18),var(--sh-2)}
.claim-f{flex:1;min-width:0;display:flex;align-items:center;padding-left:12px;font-size:16px}
.claim-f span{color:var(--muted);white-space:nowrap}
.claim-f input{flex:1;min-width:0;height:48px;border:0;outline:0;background:transparent;font:inherit;font-size:16px;font-weight:600;color:var(--ink)}
.claim-msg{margin:8px 2px 0;font-size:13.5px;color:var(--muted)}
.claim-msg.bad{color:#B42318}
@media (max-width:600px){.claim-row{flex-direction:column}.claim-row .btn{width:100%}}
.trust{list-style:none;margin:22px 0 0;padding:0;max-width:540px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.trust li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;line-height:1.35;color:var(--brand)}
.trust .i3{width:32px;height:32px;border-radius:10px}
.trust .i3 .ic{width:17px;height:17px}
@media (max-width:380px){.trust{grid-template-columns:minmax(0,1fr)}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border:0;border-radius:12px;font-size:16px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn .ic{width:18px;height:18px}
.btn-p{background:var(--primary);color:#fff;box-shadow:var(--sh-btn)}
.btn-p:active{transform:translateY(1px)}
.btn-s{background:#EEF2F8;color:var(--brand)}
.btn-sm{height:40px;padding:0 14px;font-size:14.5px}
.btn-lg{height:52px;padding:0 22px}
.btn-cap{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-size:15px;font-weight:500;text-decoration:none}
.btn-cap b{font-weight:700}
.btn-cap .ic{width:16px;height:16px;stroke-width:2.4}
.lnk{display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);font-size:15px;font-weight:600;text-decoration:none}
.lnk .ic{width:17px;height:17px}

.i3{--a:#FFAA55;--b:#E0661A;--s:rgba(224,102,26,.45);width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:12px;color:#fff;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.85) 0 7%,transparent 32%),linear-gradient(145deg,var(--a),var(--b));box-shadow:inset -3px -5px 8px rgba(0,0,0,.14),inset 2px 3px 6px rgba(255,255,255,.5),4px 10px 18px -8px var(--s)}
.i3 .ic{width:20px;height:20px;stroke-width:2.2}
.i3.n{--a:#3D6699;--b:#18304F;--s:rgba(24,48,79,.45)}
.i3.m{--a:#7FD8C6;--b:#2E9C86;--s:rgba(46,156,134,.45)}
.i3.g{--a:#FFD36A;--b:#E09A12;--s:rgba(224,154,18,.45)}
.i3.wh{--a:#FFFFFF;--b:#E4E8EF;--s:rgba(31,58,95,.25);color:var(--brand)}
.i3.ln{--a:#2BDB78;--b:#05A847;--s:rgba(5,168,71,.4)}
.i3.lg{width:52px;height:52px;border-radius:16px}
.i3.lg .ic{width:26px;height:26px}

/* หัวข้อส่วน */
.sec-h{max-width:780px;margin:0 auto 44px;text-align:center}
.sec-h .k{display:inline-block;margin-bottom:10px;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--accent-text)}
.sec-h h2{margin:0;font-size:clamp(28px,3.6vw,42px);line-height:1.22;font-weight:700;text-wrap:balance}
.sec-h p{margin:14px auto 0;max-width:640px;font-size:17px;color:var(--muted)}
@media (max-width:600px){.sec-h{margin-bottom:32px}.sec-h p{font-size:15.5px}}

/* แท็บแคปซูล */
.utabs,.tchips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.utabs{margin:0 auto 40px}
.tchips{margin-top:16px;gap:8px}
.utabs button,.tchips button{flex:none;display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;border:1.5px solid transparent;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06),3px 6px 14px -6px rgba(16,24,40,.24);font-size:14.5px;font-weight:600;color:var(--brand);cursor:pointer}
.tchips button{height:38px;padding:0 13px;font-size:13.5px}
.utabs button[aria-selected="true"],.tchips button[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);box-shadow:none}
.utabs .ic,.tchips .ic{width:17px;height:17px}
@media (max-width:700px){.utabs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-16px;padding:4px 16px 10px;scrollbar-width:none}.utabs::-webkit-scrollbar{display:none}}

/* ===== ฉาก (ย่อทั้งกล่องตามความกว้าง) ===== */
.scene{position:relative;width:100%}
.stage{position:absolute;left:0;top:0;transform-origin:0 0}
.stage>*{position:absolute;margin:0}
.blob{border-radius:72px;background:var(--blob)}
.sc-hero .blob,.sc-for .blob{left:272px;top:46px;width:270px;height:458px;transform:rotate(8deg)}
.sc-use .blob{left:262px;top:80px;width:250px;height:450px;background:#FFF0D0;transform:rotate(-3deg) skewX(-6deg)}
.disc,.table{display:none}
.lpill{display:none;left:300px;top:-14px;z-index:7;align-items:center;gap:7px;padding:6px 14px 6px 6px;border-radius:999px;background:#fff;box-shadow:var(--sh-2);font-size:15px;color:var(--muted);white-space:nowrap}
.lpill i{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:var(--ok-bg);color:var(--ok)}
.lpill i .ic{width:15px;height:15px;stroke-width:2.6}
.lpill b{color:var(--brand)}

/* มือถือกรอบเส้นบาง */
.ph{padding:8px;border:2.2px solid var(--ink);border-radius:40px;background:#fff;filter:drop-shadow(14px 22px 18px rgba(15,30,60,.16))}
.ph::before{content:'';position:absolute;z-index:6;top:15px;left:50%;width:70px;height:18px;margin-left:-35px;border:2px solid var(--ink);border-radius:99px;background:#fff}
.ph-in{position:relative;width:100%;height:100%;overflow:hidden;border-radius:31px;background:#FAF7F2}
.ph-scr{width:375px;transform-origin:0 0;transition:opacity .35s}
.ph.swap .ph-scr{opacity:0}
.sc-hero .ph,.sc-for .ph{left:290px;top:22px;width:244px;height:488px;transform:rotate(5deg);z-index:3}
.sc-use .ph{left:215px;top:30px;width:236px;height:480px;transform:rotate(-3deg) skewX(-6deg);z-index:3}

/* หน้าร้านในมือถือ (ชุดเดียวกับรอบ 2) */
.sf{position:relative;width:375px;overflow:hidden;background:#FAF7F2;color:#2A1A10;font-family:var(--font);line-height:1.4}
.sf-cover{height:132px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.14) 0 16px,transparent 16px 32px),repeating-linear-gradient(90deg,rgba(255,255,255,.14) 0 16px,transparent 16px 32px),linear-gradient(135deg,var(--c1),var(--c2))}
.sf-logo{position:relative;width:86px;height:86px;margin:-43px auto 0;padding:4px;border-radius:50%;background:#fff;box-shadow:0 8px 16px -8px rgba(60,30,10,.4)}
.sf-logo span{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:32px;font-weight:700;background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.45) 0 8%,transparent 34%),linear-gradient(145deg,var(--c1),var(--c2))}
.sf-name{margin:10px 16px 0;text-align:center;font-size:23px;line-height:1.25;font-weight:700}
.sf-desc{margin:4px 24px 0;text-align:center;font-size:13.5px;color:#7A6A5C}
.sf-row{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:12px}
.sf-open{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:#E7F5EC;color:#1F7A47;font-size:12.5px;font-weight:600}
.sf-open i{width:7px;height:7px;border-radius:50%;background:#22A35A}
.sf-ch{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff}
.sf-ch .ic{width:17px;height:17px}
.c-line{background:#06C755}.c-call{background:#1F3A5F}
.sf-sec{display:flex;justify-content:space-between;align-items:baseline;margin:18px 16px 10px}
.sf-sec b{font-size:18px}
.sf-sec small{font-size:12.5px;color:#7A6A5C}
.sf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 14px}
.sf-it{position:relative;padding:8px 8px 10px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(60,30,10,.06),2px 6px 14px -8px rgba(60,30,10,.25)}
.sf-it .pic{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;object-fit:cover;background-color:#F1ECE4}
.sf-tag{position:absolute;z-index:1;left:14px;top:14px;padding:2px 9px;border-radius:99px;background:#fff;color:var(--acc);font-size:11.5px;font-weight:700;box-shadow:0 2px 6px -2px rgba(0,0,0,.2)}
.sf-it b{display:block;min-height:35px;margin:8px 2px 0;font-size:13.5px;line-height:1.3;font-weight:600}
.sf-pr{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:4px 2px 0}
.sf-pr span{font-size:15px;font-weight:700;color:var(--acc)}
.sf-pr i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:var(--acc)}
.sf-pr i .ic{width:16px;height:16px;stroke-width:2.6}
.sf-pr em{padding:4px 10px;border-radius:99px;background:var(--acc);color:#fff;font-size:12px;font-weight:600;font-style:normal}
.sf-cart{position:absolute;z-index:4;left:14px;right:14px;bottom:18px;height:56px;display:flex;align-items:center;gap:10px;padding:0 8px 0 14px;border-radius:18px;background:#1F3A5F;color:#fff;font-size:14.5px;box-shadow:0 12px 24px -10px rgba(15,30,60,.6)}
.sf-cart .n{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;background:#F28A2E;color:#1F1206;font-size:13px;font-weight:700}
.sf-cart b{margin-left:auto;white-space:nowrap}
.sf-cart em{padding:9px 13px;border-radius:12px;background:linear-gradient(180deg,#D2581F,#B3421A);font-style:normal;font-weight:600;font-size:14px;white-space:nowrap}
.sf-cart.solo b{display:none}
.sf-cart.solo em{margin-left:auto}
.d1{background:radial-gradient(2% 2% at 61.5% 37.5%,rgba(255,255,255,.85) 0,transparent 100%),radial-gradient(6% 6% at 64% 40%,#FFC23A 0,#F39A1E 70%,transparent 76%),radial-gradient(15% 13% at 62% 41%,#FFFEFA 0,#FFF3DF 70%,transparent 74%),radial-gradient(17.5% 15.5% at 62% 41.5%,#E9BC74 0,#C98B3E 68%,transparent 74%),radial-gradient(4% 2.6% at 50% 67%,#3F8F3B 0 70%,transparent 76%),radial-gradient(3.6% 2.4% at 67% 71%,#4FA047 0 70%,transparent 76%),radial-gradient(3% 2% at 43% 61%,#357F32 0 70%,transparent 76%),radial-gradient(2.2% 1.4% at 59% 63%,#E0362B 0 70%,transparent 76%),radial-gradient(16% 11% at 56% 66%,#A85F2C 0,#713719 70%,transparent 76%),radial-gradient(17% 15% at 38% 49%,#FFFFFF 0,#F1EDE5 70%,transparent 76%),radial-gradient(18% 15% at 40% 53%,rgba(120,90,50,.2) 0 60%,transparent 76%),radial-gradient(40% 40% at 50% 50%,#FFFFFF 0 80%,#ECEEF1 85%,#FFFFFF 89%,rgba(90,60,30,.16) 96%,transparent 100%),linear-gradient(150deg,#F4E6D2,#E4CBA9)}
.d2{background:radial-gradient(10% 6% at 40% 37%,rgba(255,255,255,.35) 0,transparent 100%),radial-gradient(6% 3.6% at 42% 45%,#FF9A6E 0,#EE6236 70%,transparent 76%),radial-gradient(5.6% 3.4% at 58% 57%,#FF9A6E 0,#EE6236 70%,transparent 76%),radial-gradient(3.4% 2% at 57% 40%,#4FA047 0 70%,transparent 76%),radial-gradient(3% 1.8% at 44% 61%,#3F8F3B 0 70%,transparent 76%),radial-gradient(3% 3% at 64% 47%,#F6EBDD 0 70%,transparent 76%),radial-gradient(2.6% 2.6% at 37% 55%,#F6EBDD 0 70%,transparent 76%),radial-gradient(1.6% 1.6% at 51% 50%,#B82618 0 70%,transparent 76%),radial-gradient(28% 28% at 50% 50%,#F27B3F 0,#D9532A 75%,#B8411F 92%,transparent 94%),radial-gradient(36% 36% at 50% 50%,#FFFFFF 0 80%,#E3E6EB 92%,rgba(0,0,0,.12) 97%,transparent 100%),linear-gradient(150deg,#E8F0F5,#CFDCE6)}
.d3{background:radial-gradient(7% 5% at 70% 65%,#CFE88A 0,#7DB33A 70%,transparent 76%),radial-gradient(5% 5% at 29% 64%,#EEF8DF 0 42%,#7EB55A 52% 68%,transparent 74%),radial-gradient(5% 5% at 37% 73%,#EEF8DF 0 42%,#7EB55A 52% 68%,transparent 74%),radial-gradient(3.2% 2.4% at 52% 43%,#FFF3E8 0,#F19A6B 70%,transparent 76%),radial-gradient(2.8% 2% at 59% 52%,#FFF3E8 0,#F19A6B 70%,transparent 76%),radial-gradient(2.6% 2% at 45% 53%,#FFF3E8 0,#F19A6B 70%,transparent 76%),radial-gradient(1.5% 1.5% at 48% 47%,#4FA047 0 70%,transparent 76%),radial-gradient(1.5% 1.5% at 56% 39%,#4FA047 0 70%,transparent 76%),radial-gradient(22% 19% at 52% 48%,#FBE9AE 0,#E9C068 70%,transparent 76%),radial-gradient(23% 18% at 54% 52%,rgba(120,90,50,.18) 0 60%,transparent 76%),radial-gradient(40% 40% at 50% 50%,#FFFFFF 0 80%,#ECEEF1 85%,#FFFFFF 89%,rgba(90,60,30,.16) 96%,transparent 100%),linear-gradient(150deg,#F4E6D2,#E4CBA9)}
.d4{background:radial-gradient(6% 3.6% at 44% 40%,#FFA57A 0,#EF6C3C 70%,transparent 76%),radial-gradient(5.6% 3.4% at 61% 48%,#FFA57A 0,#EF6C3C 70%,transparent 76%),radial-gradient(7% 5% at 72% 67%,#CFE88A 0,#7DB33A 70%,transparent 76%),radial-gradient(5% 1.6% at 30% 61%,#FFFDF2 0 70%,transparent 76%),radial-gradient(4.6% 1.4% at 34% 67%,#FFFDF2 0 70%,transparent 76%),radial-gradient(1.7% 1.7% at 52% 57%,#C98B3E 0 70%,transparent 76%),radial-gradient(1.5% 1.5% at 47% 47%,#C98B3E 0 70%,transparent 76%),radial-gradient(14% 8% at 46% 45%,rgba(255,232,195,.6) 0,transparent 100%),radial-gradient(23% 18% at 50% 52%,#F0AE69 0,#D58242 70%,transparent 76%),radial-gradient(24% 18% at 52% 56%,rgba(120,90,50,.2) 0 60%,transparent 76%),radial-gradient(40% 40% at 50% 50%,#FFFFFF 0 80%,#ECEEF1 85%,#FFFFFF 89%,rgba(90,60,30,.16) 96%,transparent 100%),linear-gradient(150deg,#EAF4E6,#D0E3C8)}

/* การ์ดด้านขนานเอียง (ต้นทาง / ปลายทาง) */
.pg{width:196px;height:146px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:16px;background:var(--tone);transform:rotate(-4deg) skewX(-12deg);box-shadow:inset 2px 3px 0 rgba(255,255,255,.55),12px 18px 28px -16px rgba(15,30,60,.32)}
.pg>*{transform:skewX(12deg)}
.pg .gl{width:50px;height:50px}
.pg em{font-style:italic;font-weight:600;font-size:17px;line-height:1.25;text-align:center;color:var(--tone-ink)}
.t-pink{--tone:#FADCE5;--tone-ink:#9E2453}
.t-green{--tone:#D9F4E3;--tone-ink:#0B6B32}
.t-gray{--tone:#E7EAF0;--tone-ink:#17202C}
.t-blue{--tone:#DDE8FD;--tone-ink:#1D4FB8}
.t-peach{--tone:#FFE3CB;--tone-ink:#93400E}
.t-sky{--tone:#DCE6F4;--tone-ink:#1F3A5F}
.sc-use .pg-src{left:0;top:132px;z-index:2}
.sc-use .pg-res{left:450px;top:380px;z-index:4}
.sc-for .pg{left:6px;top:20px;width:176px;height:132px;z-index:2}
.glow{left:404px;top:206px;width:84px;height:84px;z-index:4;border-radius:50%;background:radial-gradient(circle,rgba(242,138,46,.42),rgba(242,138,46,0) 70%);pointer-events:none}

/* ลูกศรวาดมือ */
.arw{overflow:visible;z-index:6;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.sc-hero .arw{left:210px;top:298px;width:96px;height:120px}
.sc-use .a1{left:108px;top:54px;width:132px;height:92px}
.sc-use .a2{left:436px;top:226px;width:96px;height:150px}
.sc-for .arw{left:168px;top:30px;width:124px;height:84px}

/* ฟู */
.fz{margin:0}
picture{display:block}
.fz-crop{position:relative;animation:fl 4.5s ease-in-out infinite}
.fz-crop img{display:block;width:100%;height:auto;filter:drop-shadow(10px 18px 16px rgba(15,30,60,.28))}
@keyframes fl{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.fz-hero{left:0;top:246px;width:252px;z-index:5}
.fz-for{left:4px;top:246px;width:252px;z-index:5}
.fz-use{left:516px;top:228px;width:140px;z-index:5}
.sign{position:absolute;left:57.5%;top:63.5%;width:56%;display:flex;flex-direction:column;align-items:center;line-height:1.15;text-align:center;transform:translate(-50%,-50%) rotate(-4deg);pointer-events:none}
.sign small{font-size:13px;font-weight:600;color:var(--muted)}
.sign b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:21px;font-weight:700;color:var(--brand)}
.bub{position:absolute;z-index:8;width:max-content;max-width:230px;margin:0;padding:10px 14px;border-radius:18px;background:#fff;box-shadow:var(--sh-2);font-size:14.5px;font-weight:500;line-height:1.45;color:var(--brand);animation:pop .4s ease-out}
.bub::after{content:'';position:absolute;left:var(--tail,50%);bottom:-7px;width:14px;height:14px;margin-left:-7px;background:inherit;border-radius:0 0 4px 0;transform:rotate(45deg)}
.bub.up::after{top:-7px;bottom:auto;border-radius:4px 0 0 0}
@keyframes pop{from{transform:scale(.9)}to{transform:scale(1)}}
.fz-flow{display:flex;flex-direction:column;align-items:center}
.fz-flow .bub{position:relative;margin-bottom:14px}
.fz-flow .fz-crop{align-self:stretch}
.sc-use .bub{max-width:190px}
@media (max-width:600px){.bub{max-width:200px;font-size:14px}.sc-use .bub{max-width:260px}}

/* ใช้กับร้านแบบไหน */
.use{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center}
@media (max-width:959px){.use{grid-template-columns:minmax(0,1fr);gap:24px}}
.use-t h3{margin:0;font-size:14px;font-weight:600;color:var(--accent-text)}
.use-n{margin:6px 0 0;font-size:32px;line-height:1.2;font-weight:700}
.route{display:flex;align-items:center;gap:10px;margin-top:12px}
.route .gl{width:30px;height:30px}
.route .rg{height:20px}
.route .to{width:22px;height:22px;color:var(--muted)}
.use-d{margin:14px 0 0;max-width:30em;font-size:16px;color:var(--body)}
.use-d b{color:var(--ink);font-weight:600}
.use-t ul,.fg ul,.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.use-t ul{margin-top:14px}
.use-t li,.fg li,.plan li{display:flex;gap:8px;font-size:14.5px;line-height:1.45}
.use-t li .ic,.fg li .ic,.plan li .ic{width:17px;height:17px;margin-top:2px;color:var(--ok);stroke-width:2.4}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}

/* ฟีเจอร์ */
.fmap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:959px){.fmap{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fmap{grid-template-columns:minmax(0,1fr)}}
.fg{padding:22px;border-radius:20px;background:#fff;box-shadow:var(--sh-2)}
.fg-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.fg-h h3{margin:0;font-size:17px;line-height:1.3}
.fg-h small{display:block;font-size:13px;font-weight:500;color:var(--muted)}
.feat-end{display:flex;justify-content:center;align-items:flex-end;gap:14px;margin-top:44px}
.fz-feat{width:170px;flex:none}
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;max-width:560px;margin-bottom:18px;padding:18px 22px;border-radius:20px;background:var(--b-cream);box-shadow:var(--sh-1)}
.strip p{flex:1;min-width:200px;margin:0;font-size:15px;color:var(--body)}
.strip b{color:var(--ink)}
@media (max-width:700px){.feat-end{flex-direction:column;align-items:center;gap:0}.fz-feat{width:130px}.strip{margin-bottom:0}}

.chat{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-2)}
.ba-c.after .chat{box-shadow:0 0 0 2px rgba(242,138,46,.45),var(--sh-2)}
.chat-h{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--field);font-size:14.5px;font-weight:600}
.chat-h .av{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--brand);color:#fff;font-size:14px}
.chat-h small{margin-left:auto;padding:2px 8px;border-radius:99px;background:#06C755;color:#fff;font-size:11.5px;font-weight:700}
.chat-b{display:flex;flex-direction:column;gap:8px;min-height:230px;padding:14px;background:#EDF2F8}
.msg{max-width:86%;margin:0;padding:9px 12px;border-radius:16px;font-size:14px;line-height:1.5}
.msg.in{align-self:flex-start;background:#fff;border-top-left-radius:6px}
.msg.out{align-self:flex-end;background:#C9F1D6;border-top-right-radius:6px}
.msg.slip{white-space:pre-line;font-variant-numeric:tabular-nums}
.msg.slip .hd{display:flex;align-items:center;gap:6px;font-weight:700;color:var(--brand)}
.msg.slip .hd .ic{width:17px;height:17px}
.msg.slip .sum{display:block;margin-top:6px;padding-top:6px;border-top:1px dashed #C9D2DE;font-weight:700;color:var(--accent-text)}
.read{align-self:flex-end;font-size:11.5px;color:var(--muted)}

/* 3 ขั้น */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px}
.step{position:relative;padding:0 8px;text-align:center}
.step .no{width:58px;height:58px;margin:0 auto 14px;display:grid;place-items:center;border-radius:18px;font-size:24px;font-weight:700;color:#fff;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.85) 0 7%,transparent 32%),linear-gradient(145deg,#FFAA55,#E0661A);box-shadow:inset -3px -5px 8px rgba(0,0,0,.14),inset 2px 3px 6px rgba(255,255,255,.5),4px 10px 18px -8px rgba(224,102,26,.45)}
.step h3{margin:0 0 6px;font-size:18px}
.step p{margin:0;font-size:15px;color:var(--muted)}
.step+.step::before{content:'';position:absolute;left:-60px;top:6px;width:62px;height:42px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 42' fill='none' stroke='%2317202C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 30C16 8 40 4 55 22'/%3E%3Cpath d='M44 20l12 3-1-12'/%3E%3C/svg%3E") no-repeat center/contain}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr);gap:30px}.step+.step::before{display:none}}

/* กำแพงร้าน วงกลม 2 แถว */
.wrow{overflow-x:auto;scrollbar-width:none;padding:34px 4px 12px}
.wrow::-webkit-scrollbar{display:none}
.wi{display:flex;gap:24px;width:max-content;margin:0 auto}
.wrow.r2 .wi{padding-left:72px}
.wc{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none}
.wc .tag{position:absolute;top:-28px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;padding:3px 10px 3px 7px;border-radius:99px;background:#fff;box-shadow:var(--sh-1);font-size:12.5px;font-weight:600;color:var(--brand);white-space:nowrap}
.wc .tag .rg{height:16px}
.wc .cir{width:124px;height:124px;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#fff;box-shadow:var(--sh-2)}
.wc .cir.shop{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.4) 0 8%,transparent 36%),linear-gradient(145deg,var(--c1),var(--c2));color:#fff;font-size:44px;font-weight:700}
.wc .cir img{width:100%;height:100%;object-fit:cover}
.wc small{font-size:13px;font-weight:600;color:var(--body)}
.wall-cap{margin:6px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.wall-act{display:flex;justify-content:center;margin-top:22px}
@media (max-width:600px){.wc .cir{width:92px;height:92px;font-size:34px}.wi{gap:18px}.wrow.r2 .wi{padding-left:40px}}

/* แพ็กเกจ (ไม่มีฟู) */
.allp{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:-14px 0 28px}
.allp span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:14px;font-weight:600}
.allp .ic{width:17px;height:17px}
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.plans{grid-template-columns:minmax(0,1fr)}}
.plan{display:flex;flex-direction:column;gap:14px;padding:22px;border:1.5px solid var(--line);border-radius:20px;background:#fff}
.plan.free{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,138,46,.15),var(--sh-2)}
.plan h3{margin:0;font-size:19px}
.plan .for{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.price b{font-size:36px;line-height:1;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.price span{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
.plan ul{flex:1}
.plan .btn{width:100%}
.plan-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px;font-size:13.5px;color:var(--muted)}

/* คำถาม / คู่มือ */
.faq{max-width:780px;margin:0 auto;display:grid;gap:10px}
.faq details{padding:0 18px;border-radius:16px;background:#fff;box-shadow:var(--sh-1)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0;font-size:16px;font-weight:600;list-style:none;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{margin:0 0 16px;font-size:15px;color:var(--body)}
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.guides{grid-template-columns:minmax(0,1fr)}}
.gd{display:block;padding:22px;border-radius:20px;background:#fff;box-shadow:var(--sh-2);text-decoration:none}
.gd .k{font-size:12.5px;font-weight:600;color:var(--accent-text)}
.gd h3{margin:6px 0;font-size:17px;line-height:1.4}
.gd p{margin:0;font-size:14.5px;color:var(--muted)}

/* ท้ายหน้า */
.end-g{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:center}
.end-g h2{margin:0;font-size:clamp(28px,3.6vw,42px);line-height:1.22;text-wrap:balance}
.end-g .lead{font-size:17px}
.fz-end{width:260px;justify-self:center}
@media (max-width:959px){.end-g{grid-template-columns:minmax(0,1fr);gap:24px}.fz-end{width:150px}}

/* หน้าย่อยร้านอาหาร */
.fx{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:959px){.fx{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fx{grid-template-columns:minmax(0,1fr)}}
.fx-c{display:flex;gap:14px;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--sh-2)}
.fx-c h3{margin:0 0 4px;font-size:16.5px}
.fx-c p{margin:0;font-size:14.5px;color:var(--muted)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 190px;gap:32px;align-items:end}
.two .sec-h{margin:0;text-align:left;align-self:center}
.fz-slip{width:190px;justify-self:center}
@media (max-width:959px){.two{grid-template-columns:minmax(0,1fr)}.fz-slip{width:130px}}
.fit,.rel{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.fit li,.rel a{padding:10px 18px;border-radius:999px;background:#fff;box-shadow:var(--sh-1);font-size:15px;font-weight:600;color:var(--brand);text-decoration:none}

/* ท้ายเว็บ */
.foot{position:relative;background:var(--brand-deep);color:#C9D3E1}
.foot .w{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;padding-block:56px 28px}
@media (max-width:860px){.foot .w{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.brandcol{grid-column:1/-1}}
.foot .mark{color:#FAF6EF}
.brandcol p{margin:12px 0 0;max-width:30em;font-size:14px}
.foot h3{margin:0 0 10px;font-size:14px;color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:14px}
.foot a{color:#C9D3E1;text-decoration:none}
.foot a:hover{color:#fff}
.socials{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.socials a{display:inline-flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;background:rgba(255,255,255,.09);font-size:13.5px}
.socials .gl{width:24px;height:24px}
.foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14);font-size:13px}

/* ===== รอบ 4: ตอบโจทย์ยังไง / คุณจะได้อะไร ===== */
.fit4,.gain4{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media (max-width:959px){.fit4,.gain4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.fit4,.gain4{grid-template-columns:minmax(0,1fr)}}
.pc{display:flex;flex-direction:column;border-radius:20px;background:#fff;box-shadow:var(--sh-2);overflow:hidden}
.pc-p{display:flex;gap:10px;align-items:flex-start;margin:0;padding:16px 18px 22px;background:#EEF0F3;color:#525B69;font-size:15px;font-weight:600;line-height:1.45}
.pc-p small{display:block;font-size:12px;font-weight:700;color:#667085;letter-spacing:.02em}
.pc-p .x{flex:none;width:26px;height:26px;margin-top:2px;display:grid;place-items:center;border-radius:50%;background:#F9DCD8;color:#B42318}
.pc-p .x .ic{width:13px;height:13px;stroke-width:3}
.pc-s{position:relative;flex:1;display:flex;flex-direction:column;gap:8px;padding:22px 18px 18px}
.pc-s .to{position:absolute;right:18px;top:-17px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:var(--primary);color:#fff;box-shadow:var(--sh-btn)}
.pc-s .to .ic{width:17px;height:17px;stroke-width:2.6}
.pc-s h3{margin:0;font-size:17px;line-height:1.35;color:var(--brand);text-wrap:balance}
.pc-s p{margin:0;font-size:14.5px;line-height:1.55;color:var(--body)}
.pc-s .chip{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-text);font-size:13px;font-weight:600}
.pc-s .chip .ic{width:14px;height:14px;stroke-width:2.6}
.gn{display:flex;flex-direction:column;gap:10px;padding:24px 22px 20px;border-radius:22px;background:#fff;box-shadow:var(--sh-2)}
.gn h3{margin:6px 0 0;font-size:21px;line-height:1.3;color:var(--brand);text-wrap:balance}
.gn p{margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.gn small{margin-top:auto;padding-top:12px;border-top:1px dashed #D5DCE6;font-size:13px;font-weight:600;color:var(--accent-text)}

/* ===== รอบ 4: ก่อน/หลัง  ต1 = แยกสองฝั่ง (ค่าเริ่ม) / ต2 = ซ้อนกันแล้วเลื่อนเทียบ ===== */
.bx{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,.94fr) 200px minmax(0,1.06fr);gap:18px;align-items:center;--x:100%}
.bx-frame{display:contents}
.bx-b{grid-column:1;grid-row:1}.bx-mid{grid-column:2;grid-row:1}.bx-a{grid-column:3;grid-row:1}
.bx-pane{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0}
.bx-lab{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;font-size:17px;font-weight:700;line-height:1.35}
.bx-lab span{padding:3px 11px;border-radius:999px;font-size:13px;font-weight:700}
.bx-b .bx-lab{color:#525B69}
.bx-b .bx-lab span{background:#E1E5EB;color:#525B69}
.bx-a .bx-lab{color:var(--brand)}
.bx-a .bx-lab span{background:var(--primary);color:#fff}
.bx-scr{position:relative;min-width:0}
.bx-b .bx-scr{filter:grayscale(1) contrast(.9);opacity:.7;transform:rotate(-1.6deg) scale(.95)}
.bx-a::before{content:'';position:absolute;z-index:-1;inset:-30px -22px;border-radius:40px;background:radial-gradient(60% 55% at 50% 42%,rgba(255,205,160,.85) 0,rgba(255,220,186,.4) 55%,rgba(255,226,198,0) 75%);pointer-events:none}
.bx-a .chat,.bx-a .bx-ph{box-shadow:0 0 0 2.5px rgba(242,138,46,.7),0 30px 60px -26px rgba(214,98,26,.6)}
.bx .chat-b{min-height:330px}
.bx-t p{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.02em}
.bx-t ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bx-t li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 7px;border-radius:999px;font-size:14px;font-weight:600;line-height:1.3}
.bx-t li i{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%}
.bx-t li .ic{width:12px;height:12px;stroke-width:3}
.bx-t.lost p{color:#667085}
.bx-t.lost li{background:#E9ECF0;color:#525B69;text-decoration:line-through;text-decoration-color:rgba(180,35,24,.75);text-decoration-thickness:2px}
.bx-t.lost li i{background:#F9DCD8;color:#B42318}
.bx-t.gain p{color:var(--accent-text)}
.bx-t.gain li{background:#fff;color:var(--brand);box-shadow:0 0 0 1.5px rgba(242,138,46,.6),var(--sh-1)}
.bx-t.gain li i{background:var(--primary);color:#fff}
.bx-mid{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.bx-mid .arw2{width:110px;height:40px;overflow:visible;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bx-mid>b{font-size:14px;color:var(--accent-text)}
.fz-mid{width:170px}
.bx-mid .bub{max-width:200px}
/* คอม: ฟูอยู่ล่างสุดของคอลัมน์กลาง ให้ห่างจากฟูส่วนก่อนหน้าเกินหนึ่งจอ */
@media (min-width:861px){.bx-mid:not(.solo){align-self:end}.bx-mid .fz{order:3;margin-top:10px}}
/* ฉากในฝั่งก่อน/หลัง */
.chat{position:relative}
.chat-h .unr{margin-left:auto;padding:2px 8px;border-radius:99px;background:#D92D20;color:#fff;font-size:11.5px;font-weight:700;font-style:normal}
.chat-h .unr+small{margin-left:0}
.note{position:absolute;z-index:2;right:12px;top:70px;padding:9px 12px;border-radius:4px;background:#FFE98A;color:#5A4A12;font-size:15px;font-weight:700;line-height:1.3;transform:rotate(7deg);box-shadow:3px 6px 10px -4px rgba(0,0,0,.25)}
.bx-ph{position:relative;width:250px;height:450px;margin:0 auto}
.lk{display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;padding:40px 16px 14px;background:#F3F4F6;text-align:center}
.lk-av{width:64px;height:64px;border-radius:50%;background:#D5D9E0}
.lk b{font-size:16px;color:#3B4656}
.lk small{margin-top:-6px;font-size:12.5px;color:#7A8494}
.lk-b{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;height:38px;border:1.5px solid #C9CFD8;border-radius:12px;background:#fff;font-size:14px;font-weight:600;color:#3B4656}
.lk-b .ic{width:14px;height:14px;color:#8A94A6}
.lk-f{margin:auto 0 0;font-size:12px;color:#7A8494}
.pad{position:relative;min-height:330px;padding:20px 20px 20px 48px;border-radius:8px;background:repeating-linear-gradient(180deg,transparent 0 35px,#C9D6E6 35px 36px) 0 14px,#FFFDF5;box-shadow:var(--sh-2);font-size:17px;line-height:36px;color:#2F3A48}
.pad::before{content:'';position:absolute;left:34px;top:0;bottom:0;width:2px;background:#F2A3A3}
.pad b{display:block;font-size:14px;color:#667085}
.pad p{margin:0;font-style:italic}
.pad s{color:#B42318}
.pad .tot{font-weight:700}
@media (max-width:860px){
  .bx{grid-template-columns:minmax(0,1fr);gap:16px}
  .bx-b{grid-row:1;grid-column:1}.bx-mid{grid-row:2;grid-column:1}.bx-a{grid-row:3;grid-column:1}
  .bx-b .bx-scr{max-height:300px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 62%,transparent);mask-image:linear-gradient(#000 62%,transparent)}
  .bx-mid .arw2{width:44px;height:58px;transform:rotate(90deg)}
  .fz-mid{width:120px}
  .bx-mid .bub{max-width:260px}
  .bx-a::before{inset:-16px -10px}
}

/* ===== รอบ 4: สถิติ ===== */
.st4{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:center}
@media (max-width:959px){.st4{grid-template-columns:minmax(0,1fr);gap:32px}}
.dash{margin:0;overflow:hidden;border:1px solid var(--line);border-radius:24px;background:#F6F7FA;box-shadow:var(--sh-3)}
.dash-h{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);background:#fff;font-size:14.5px;font-weight:700;color:var(--brand)}
.dash-h .ic{width:18px;height:18px}
.dash-h small{margin-left:auto;padding:2px 9px;border-radius:99px;background:#EEF1F5;font-size:12px;font-weight:600;color:var(--muted)}
.dash-b{display:grid;gap:12px;padding:14px}
.rng{display:flex;gap:6px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.rng span{flex:none;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;font-weight:600;color:var(--body)}
.rng span.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-text)}
.dcard{min-width:0;padding:14px;border-radius:16px;background:#fff;box-shadow:var(--sh-1)}
.dcard h4{margin:0 0 10px;font-size:13.5px;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tile small{display:block;font-size:12.5px;font-weight:600;color:var(--muted)}
.tile b{display:block;margin-top:2px;font-size:26px;line-height:1.1;color:var(--brand);font-variant-numeric:tabular-nums}
.tip4{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--field);font-size:13.5px;line-height:1.5;color:var(--body)}
.tip4 i{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-text)}
.tip4 i .ic{width:16px;height:16px}
.tip4 b{color:var(--ink)}
.bars{display:flex;align-items:flex-end;gap:3px;height:76px;margin-top:12px;padding-bottom:1px;border-bottom:1px solid var(--line)}
.bars i{flex:1;min-width:0;height:var(--h);border-radius:3px 3px 0 0;background:#F6C59B}
.bars i.hi{background:linear-gradient(180deg,#F5A15A,#E0661A)}
.bars-cap{display:flex;justify-content:space-between;margin-top:4px;font-size:11.5px;color:var(--muted)}
.dgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:600px){.dgrid{grid-template-columns:minmax(0,1fr)}}
.srcs,.tops{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.srcs li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:13px}
.srcs .gl,.srcs .gg{width:22px;height:22px}
.srcs .gg{display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line);color:#4285F4}
.srcs .gg .ic{width:13px;height:13px;stroke-width:2.6}
.srcs .nm{display:block;margin-bottom:3px;font-weight:600;color:var(--body)}
.srcs .bar{display:block;height:7px;overflow:hidden;border-radius:99px;background:#EEF1F5}
.srcs .bar i{display:block;height:100%;width:var(--w);border-radius:inherit;background:var(--brand)}
.srcs em,.tops em{font-style:normal;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.tops li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:center}
.tops img{width:38px;height:38px;border-radius:10px;background:#F1ECE4}
.tops b{display:block;font-size:13.5px;line-height:1.3;color:var(--ink)}
.tops small{font-size:12.5px;color:var(--muted)}
.stp{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.stp li{display:flex;gap:14px;align-items:flex-start}
.stp h3{margin:0 0 4px;font-size:17.5px;line-height:1.35;color:var(--ink)}
.stp p{margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.stp .fine{margin-top:6px;font-size:13.5px;color:var(--muted)}
.sdays{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:5px 14px;margin-top:8px;font-size:14.5px}
.sdays span{font-weight:600;color:var(--body)}
.sdays b{color:var(--brand);font-variant-numeric:tabular-nums}
.sdays em{font-style:normal;color:var(--muted)}

/* ===== รอบ 4: ต่อยอดได้อีก (บันไดขึ้นไปทางขวา) ===== */
.grow{position:relative}
.gpath{position:absolute;z-index:0;left:5%;top:70px;width:90%;height:280px;overflow:visible;fill:none;pointer-events:none}
.gpath path{stroke:#F2B98A;stroke-width:3;stroke-dasharray:2 11;stroke-linecap:round;vector-effect:non-scaling-stroke}
.gsl{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:start}
.gs{display:flex;flex-direction:column;gap:6px;min-width:0;margin-top:var(--m,0);padding:18px 16px;border-radius:20px;background:#fff;box-shadow:var(--sh-2)}
.gs:last-child{box-shadow:0 0 0 2px rgba(242,138,46,.55),var(--sh-2)}
.gs-n{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;font-size:16px;font-weight:700;color:#fff;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.85) 0 7%,transparent 32%),linear-gradient(145deg,#FFAA55,#E0661A);box-shadow:inset -3px -5px 8px rgba(0,0,0,.14),inset 2px 3px 6px rgba(255,255,255,.5),4px 10px 18px -8px rgba(224,102,26,.45)}
.gs-k{margin:4px 0 0;font-size:12.5px;font-weight:700;color:var(--accent-text)}
.gs h3{margin:0;font-size:16.5px;line-height:1.35;color:var(--ink);text-wrap:balance}
.gs p{margin:0;font-size:14px;line-height:1.5;color:var(--body)}
.gs-pl{align-self:flex-start;margin-top:auto;padding:4px 10px;border-radius:999px;background:#EEF2F8;color:var(--brand);font-size:12.5px;font-weight:700}
.fz-grow{position:absolute;z-index:2;left:0;top:0;flex-direction:row-reverse;align-items:flex-start;gap:12px}
.fz-grow .fz-crop{flex:none;width:150px;align-self:auto}
.fz-grow .bub{margin:22px 0 0;max-width:230px}
.fz-grow .bub::after{left:-7px;top:20px;bottom:auto;margin-left:0}
@media (max-width:959px){
  .gsl{grid-template-columns:minmax(0,1fr);gap:12px}
  .gs{margin-top:0}
  .gpath{display:none}
  .fz-grow{position:relative;flex-direction:column;align-items:center;gap:0;margin:0 auto 18px}
  .fz-grow .fz-crop{width:120px;align-self:center}
  .fz-grow .bub{margin:0 0 14px;max-width:260px}
  .fz-grow .bub::after{left:50%;top:auto;bottom:-7px;margin-left:-7px}
}


@media (prefers-reduced-motion: reduce){
  .fz-crop,.bub{animation:none}
  .ph-scr,.faq summary .ic{transition:none}
}
/* ===== เพิ่มตอนเขียนโค้ด ===== */
.skip{position:absolute;left:-999px;top:8px;z-index:60;padding:10px 16px;border-radius:12px;background:#fff;box-shadow:var(--sh-2);font-weight:600;color:var(--brand);text-decoration:none}
.skip:focus{left:16px}
.wc .tag,.wc small{transition:color .15s}
a.wc:hover small{color:var(--accent-text)}
.use-t[hidden]{display:none}
/* ความสูงฉากก่อน JS ย่อ (กันหน้ากระโดด) */
.sc-hero{aspect-ratio:560/540;max-height:540px}
.sc-use{aspect-ratio:660/540;max-height:540px}

/* ===== มือถือ (ปรับตามตัวอย่าง openlink 18 ต.ค. 2026): ภาพขึ้นก่อน ตัวหนังสือจัดกลาง / ส่วนที่มีหลายการ์ด = แถวปัดข้าง (เห็นการ์ดถัดไปโผล่) ===== */
@media (max-width:959px){
  .hero-g>div:last-child{order:-1}
  .hero-g>div:first-child{text-align:center}
  .hero .lead,.claim,.trust{margin-inline:auto}
  .claim-l,.claim-msg{text-align:center}
  .sc-hero{max-width:420px;margin-inline:auto}
}
@media (max-width:600px){
  .hero h1{margin-top:14px}
  .tchips{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin:10px -16px 0;padding:4px 16px 8px;scrollbar-width:none}
  .trust{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;max-width:360px;text-align:left}
  .trust li{gap:8px;font-size:13.5px}
  .trust .i3{width:28px;height:28px;border-radius:9px}
  .trust .i3 .ic{width:15px;height:15px}
  .fit4,.gain4,.fmap,.gsl,.plans{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:6px 16px 22px;scrollbar-width:none}
  .fit4>*,.gain4>*,.fmap>*,.gsl>*,.plans>*{flex:0 0 84%;scroll-snap-align:start}
  .tchips::-webkit-scrollbar,.fit4::-webkit-scrollbar,.gain4::-webkit-scrollbar,.fmap::-webkit-scrollbar,.gsl::-webkit-scrollbar,.plans::-webkit-scrollbar{display:none}
}

/* ===== หน้าย่อย /for/<ประเภท> (หน้าเว็บรอบ 2) แบบแท็บ /for/food ใน mockup รอบ 4 ===== */
.sc-for{aspect-ratio:560/540;max-height:540px}
.hero .btn-cap{margin-top:16px}
.chat-h small.ig{background:#D6336C}
.chat-h small.fb{background:#0866FF}
/* Media kit จำลอง (ครีเอเตอร์) */
.mk{display:flex;flex-direction:column;gap:8px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-2);font-size:14px}
.mk-h{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.mk-h .av{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:50%;background:#3B4252;color:#fff;font-weight:700}
.mk-h b{display:block;font-size:15.5px}
.mk-h small{color:var(--muted);font-size:12.5px}
.mk-h em{margin-left:auto;padding:3px 10px;border-radius:999px;background:#EEF2F8;color:var(--brand);font-size:12px;font-style:normal;font-weight:700}
.mk-st{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mk-st div{padding:10px 6px;border-radius:12px;background:var(--field);text-align:center}
.mk-st b{display:block;font-size:20px;line-height:1.2;color:var(--brand);font-variant-numeric:tabular-nums}
.mk-st small{font-size:12px;color:var(--muted)}
.mk-l{margin:6px 0 0;font-size:12.5px;font-weight:700;color:var(--muted)}
.mk-tg{display:flex;flex-wrap:wrap;gap:6px}
.mk-tg span{padding:4px 10px;border-radius:999px;background:#FFF1E4;color:var(--accent-text);font-size:13px;font-weight:600}
.mk-rt{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.mk-rt li{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:var(--field)}
.mk-rt b{font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-cta{display:flex;align-items:center;justify-content:center;gap:6px;height:42px;margin-top:6px;border-radius:12px;background:#06C755;color:#fff;font-weight:700}
.mk-cta .ic{width:17px;height:17px}
/* สาขาจำลอง (ธุรกิจ) */
.brc{display:flex;flex-direction:column;gap:10px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:var(--sh-2);font-size:14px}
.brc-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.brc-h b{font-size:16px}
.brc .ob{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;background:#E3F6EA;color:#11753F;font-size:13px;font-weight:600}
.brc .ob i{width:7px;height:7px;border-radius:50%;background:currentColor}
.brc-i{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;background:var(--field)}
.brc-i b{font-size:15px}
.brc-i small{font-size:13px;color:var(--muted)}
.brc-a{display:flex;gap:8px;margin-top:8px}
.brc-a span{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:999px;background:#fff;box-shadow:var(--sh-1);color:var(--brand);font-weight:600}
.brc-a .ic{width:15px;height:15px}
/* ท้ายหน้าย่อย: ไม่มีฟู (ฟูตัวก่อนอยู่ในส่วนก่อน/หลัง ห่างไม่ถึงหนึ่งจอ) */
.end-solo{max-width:680px;margin:0 auto;text-align:center}
.end-solo h2{margin:0;font-size:clamp(28px,3.6vw,42px);line-height:1.22;text-wrap:balance}
.end-solo .lead,.end-solo .claim{margin-inline:auto}
.end-solo .claim-l,.end-solo .claim-msg{text-align:center}
@media (max-width:959px){
  .crumb{justify-content:center}
  .sc-for{max-width:420px;margin-inline:auto}
}

/* ===== หน้า /pricing (หน้าเว็บรอบ 3) ใช้การ์ด .plan ตาราง และส่วนเดิมของหน้าแรก ===== */
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pr-hero .pan{padding-block:28px 0}
.pr-hero .pan::after{display:none} /* วงสีมิ้นต์ล่างซ้ายโดนตัดที่ขอบล่าง (การ์ดอยู่ section ถัดไป) */
.pr-band .pan{padding-block:0 72px}
#s-plans{scroll-margin-top:8px}
.pr-top{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:40px;align-items:end;margin-top:28px}
.pr-top h1{max-width:16em}
.fz-pr{width:220px;justify-self:center}
.fz-pr .sign small{font-size:12px}
.fz-pr .sign b{font-size:24px}
.pr-ctl{display:flex;flex-direction:column;align-items:center;gap:14px;padding:36px 0 30px}
.cyc{display:inline-flex;padding:4px;border-radius:999px;background:var(--field);box-shadow:inset 0 1px 2px rgba(16,24,40,.08)}
.cyc[hidden]{display:none}
.cyc button{display:inline-flex;align-items:center;gap:6px;height:42px;padding:0 18px;border:0;border-radius:999px;background:none;font-size:15px;font-weight:600;color:var(--muted);cursor:pointer}
.cyc button[aria-pressed="true"]{background:#fff;color:var(--brand);box-shadow:var(--sh-1)}
.cyc small{padding:2px 8px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:12px;font-weight:700}
.pr-chips{align-self:stretch;margin-top:0}
.pr-chips a{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border:1.5px solid transparent;border-radius:999px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.06),3px 6px 14px -6px rgba(16,24,40,.24);font-size:13.5px;font-weight:600;color:var(--brand);text-decoration:none}
.pr-chips a[aria-current="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text);box-shadow:none}
.pr-chips .ic{width:17px;height:17px}
.pr-plans{padding-top:14px}
.pr-plans .plan{position:relative}
.pr-plans .plan.free{border-color:var(--line);box-shadow:none}
.pr-plans .plan.rec{border-color:var(--accent);box-shadow:0 0 0 3px rgba(242,138,46,.15),var(--sh-2)}
.rec-b{position:absolute;left:50%;top:-13px;transform:translateX(-50%);margin:0;padding:3px 12px;border-radius:999px;background:var(--accent-text);color:#fff;font-size:12.5px;font-weight:700;white-space:nowrap}
.rec-b[hidden]{display:none}
.price small{display:block;margin-top:6px;font-size:12.5px;font-weight:600;color:var(--ok)}
.pr-plans .plan ul.pr-caps{flex:none;list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.pr-plans .plan .pr-caps li{justify-content:space-between;gap:10px;font-size:14px;color:var(--body)}
.pr-caps b{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pr-plans .plan ul.pr-perks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.pr-foot{justify-content:center;text-align:center}
.yes .ic{width:18px;height:18px;color:var(--ok);stroke-width:2.6;vertical-align:-4px}
.pr-caps .yes .ic{width:16px;height:16px;margin:0}
.no{color:var(--muted)}
/* ตารางเทียบทุกข้อ (จอแคบเลื่อนข้าง หัวข้อซ้ายติดอยู่) */
.cmp-w{max-width:880px;margin:0 auto;overflow-x:auto;border-radius:20px;background:#fff;box-shadow:var(--sh-2)}
.cmp{width:100%;min-width:600px;border-collapse:collapse;font-size:14.5px}
.cmp th,.cmp td{padding:12px 14px;text-align:center;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:15px;color:var(--brand)}
.cmp tbody th{text-align:left;font-weight:500;color:var(--body)}
.cmp th:first-child{position:sticky;left:0;z-index:1;min-width:190px;background:#fff}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp td{font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
/* ตัวเลขตามประเภทร้าน */
.tdf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tdf-c{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:#fff;box-shadow:var(--sh-2)}
.tdf-c h3{display:flex;align-items:center;gap:10px;margin:0;font-size:17px}
.tdf-r{margin:-4px 0 0;font-size:13.5px;font-weight:600;color:var(--accent-text)}
.tdf-t{width:100%;border-collapse:collapse;font-size:13px}
.tdf-t th,.tdf-t td{padding:6px 3px;text-align:center;border-bottom:1px solid var(--line)}
.tdf-t thead th{font-size:12px;font-weight:600;color:var(--muted)}
.tdf-t tbody th{text-align:left;font-weight:500;color:var(--body)}
.tdf-t td{font-weight:600;font-variant-numeric:tabular-nums}
.tdf-t tbody tr:last-child>*{border-bottom:0}
.tdf-c .lnk{margin-top:auto}
@media (max-width:959px){
  .pr-top{grid-template-columns:minmax(0,1fr);gap:4px;margin-top:8px;text-align:center}
  .pr-top .fz-pr{order:-1;width:120px}
  .fz-pr .bub{display:none}
  .fz-pr .sign small{font-size:8px}
  .fz-pr .sign b{font-size:14px}
  .pr-top .lead{margin-inline:auto}
  .tdf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .pr-hero h1{margin-top:10px}
  .pr-ctl{padding:24px 0 18px}
  .pr-chips{margin:0 -16px;padding:4px 16px 8px}
  /* 375px: 4 แพ็กพอดีจอไม่ต้องเลื่อนข้าง (หัวข้อยาวตัดบรรทัด) */
  .cmp{min-width:0;font-size:13px}
  .cmp th,.cmp td{padding:9px 5px}
  .cmp thead th{font-size:13px}
  .cmp th:first-child{min-width:112px;padding-left:12px;font-size:13px}
  .tdf{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:16px;margin-inline:-16px;padding:6px 16px 22px;scrollbar-width:none}
  .tdf>*{flex:0 0 86%;scroll-snap-align:start}
  .tdf::-webkit-scrollbar{display:none}
}