/* หน้าฝากสต๊อก + คำนวณค่าใช้จ่าย (fulfillment.html · รวมหน้า fulfillment + ff-price · เจ้าของสั่งทำจริง 23 ต.ค. 2569) ใช้ต่อจาก landing-x.css
   เป้าหมาย: ลูกค้าไม่งง กรอก 3 ขั้น เห็นสรุป "ชิ้นละ / เดือนละ" ตัวใหญ่ตลอดเวลา พร้อมวิธีคิดทุกบรรทัด */

/* หัวหน้าแบบกะทัดรัด เห็นเครื่องคิดเร็ว */
.hero.is-ffm{min-height:0}
.hero.is-ffm .hero-in{padding:130px 0 120px}
.hero.is-ffm .hero-bg{background-image:url(img/ff/ff-hero.webp);filter:brightness(.72) saturate(1.1)}
.hero.is-ffm:before{background:linear-gradient(90deg,rgba(4,11,28,.96) 0%,rgba(4,11,28,.86) 42%,rgba(4,11,28,.3) 100%),linear-gradient(0deg,rgba(4,11,28,.85) 0%,transparent 40%)}

/* ===== จ่ายแค่ 4 อย่าง ===== */
.four{position:relative;z-index:2;margin-top:-70px}
.four .wrap{display:grid;gap:16px}
.four-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.four-c{position:relative;padding:22px 20px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(15,23,42,.08)}
.four-c em{position:absolute;top:16px;right:16px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--n7);color:#fff;font:700 13px var(--fn);font-style:normal}
.four-c i{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;margin-bottom:12px;background:linear-gradient(135deg,var(--or),#ff4d00);box-shadow:0 10px 22px rgba(255,106,19,.3)}
.four-c i .ic{color:#fff}
.four-c b{display:block;font:600 17px var(--fh);color:var(--ink)}
.four-c strong{display:block;margin-top:6px;font:800 26px/1.1 var(--fn);color:var(--orink)}
.four-c span{display:block;margin-top:4px;font-size:14px;color:var(--ink2)}
.free{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:center;padding:14px 18px;border-radius:14px;background:#ecfdf3;border:1px solid #bbf7d0;color:#14532d;font-size:15px}
.free b{font:600 15px var(--fh)}
.free span{display:inline-flex;align-items:center;gap:6px}
.free .ic{width:18px;height:18px;color:#16a34a}
.free small{color:#3f6f52;font-size:13px}

/* ===== เครื่องคิด ===== */
.cx{padding:90px 0 100px}
.cx-g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:28px;align-items:start}
.cx-step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;margin-bottom:18px;box-shadow:0 10px 26px rgba(15,23,42,.05)}
.cx-h{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.cx-h em{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--or),#ff4d00);color:#fff;font:800 18px var(--fn);font-style:normal;box-shadow:0 8px 18px rgba(255,106,19,.3)}
.cx-h b{display:block;font:700 20px var(--fh);color:var(--ink)}
.cx-h small{display:block;font-size:14px;color:var(--ink2)}

/* การ์ดสินค้า */
.pc{border:1.5px solid var(--line);border-radius:16px;padding:18px;margin-bottom:14px;background:#fbfcfe}
.pc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pc-top b{font:700 16px var(--fh)}
.pc-del{border:0;background:none;color:#b91c1c;font:600 14px var(--fh);cursor:pointer;padding:6px 8px;border-radius:8px}
.pc-del:hover{background:#fee2e2}
.lbl{display:block;margin:12px 0 6px;font:600 15px var(--fh);color:var(--ink)}
.lbl small{font:400 13px var(--fb);color:var(--ink2);margin-left:4px}
.kt{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.kt button{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 4px;border-radius:12px;border:1.5px solid var(--line);background:#fff;color:var(--ink);font:600 13px var(--fh);cursor:pointer;line-height:1.2;text-align:center}
.kt button .ic{width:26px;height:26px;color:var(--ink2)}
.kt button.on{border-color:var(--or);background:#fff4ec;color:var(--orink);box-shadow:inset 0 0 0 1px var(--or)}
.kt button.on .ic{color:var(--or)}
.kt-more{margin-top:8px}
.f3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fi{display:flex;flex-direction:column;gap:6px;min-width:0;font:600 14px var(--fh);color:var(--ink)}
.fi small{font:400 12.5px var(--fb);color:var(--ink2)}
.fi input,.fi select,.sel{width:100%;height:52px;padding:0 14px;border-radius:12px;border:1.5px solid #d6dce6;background:#fff;color:var(--ink);font:600 17px var(--fn)}
.sel{font-family:var(--fb);font-size:16px}
.fi input:focus,.sel:focus,.fi select:focus{outline:2px solid var(--or);outline-offset:1px;border-color:var(--or)}
.fi[hidden]{display:none}
.add{width:100%;height:52px;border-radius:14px;border:2px dashed #cbd5e1;background:#fff;color:var(--orink);font:600 16px var(--fh);cursor:pointer}
.add:hover{border-color:var(--or);background:#fff8f3}

/* บริการ */
.sv{display:grid;gap:10px}
.sv-r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px;border-radius:14px;border:1.5px solid var(--line);background:#fff;cursor:pointer}
.sv-r.on{border-color:var(--or);background:#fff8f3}
.sv-r input{position:absolute;opacity:0;width:1px;height:1px}
.sv-r .tg{position:relative;width:52px;height:30px;border-radius:30px;background:#cbd5e1;transition:background .2s}
.sv-r .tg:after{content:'';position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.sv-r.on .tg{background:var(--or)}
.sv-r.on .tg:after{transform:translateX(22px)}
.sv-r input:focus-visible ~ .tg{outline:2px solid var(--or);outline-offset:2px}
.sv-r b{display:block;font:600 16px var(--fh);color:var(--ink)}
.sv-r span{display:block;font-size:13.5px;color:var(--ink2);line-height:1.5}
.sv-r em{font-style:normal;font:700 14px var(--fn);color:var(--orink);white-space:nowrap}
.sv-x{padding:4px 16px 14px 82px}
.sv-x[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;padding:10px 16px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:600 14px var(--fh);cursor:pointer}
.chips input:checked + span{border-color:var(--or);background:#fff4ec;color:var(--orink)}
.chips input:focus-visible + span{outline:2px solid var(--or);outline-offset:2px}
.hint{margin:8px 0 0;font-size:13px;color:var(--ink2)}

/* ใบสรุป (ติดขวาบนจอใหญ่) */
.rc{position:sticky;top:90px;border-radius:22px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(15,23,42,.12)}
.rc-top{padding:22px 24px;color:#fff;background:radial-gradient(ellipse at 100% 0%,rgba(255,106,19,.4),transparent 60%),var(--n8)}
.rc-top small{display:block;color:#9fb3d9;font:600 13px var(--fh);letter-spacing:.02em}
.rc-per{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.rc-per b{font:800 48px/1 var(--fn);letter-spacing:-.02em;background:linear-gradient(90deg,#ffb067,var(--or));-webkit-background-clip:text;background-clip:text;color:transparent}
.rc-per span{color:#c7d5f2;font-size:16px}
.rc-mo{display:flex;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14);font-size:15px;color:#dbe5fb}
.rc-mo b{font:700 22px var(--fn);color:#fff}
.rc-say{margin:12px 0 0;font-size:13.5px;color:#9fb3d9;line-height:1.55}
.rc-b{padding:18px 24px 22px}
.rc-b h4{margin:0 0 10px;font:700 15px var(--fh);color:var(--ink)}
.rl{display:grid;gap:2px}
.rl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line)}
.rl div:last-child{border-bottom:0}
.rl span{font:600 15px var(--fh);color:var(--ink)}
.rl small{display:block;font:400 12.5px var(--fb);color:var(--ink2);margin-top:2px}
.rl b{font:700 16px var(--fn);color:var(--ink);white-space:nowrap}
.rl .tot{border-top:2px solid var(--ink);border-bottom:0;padding-top:12px;margin-top:4px}
.rl .tot span,.rl .tot b{font-size:17px}
.once,.zo{margin-top:14px;padding:14px 16px;border-radius:14px;font-size:14px}
.once{background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12}
.zo{background:#f1f5f9;border:1px solid #e2e8f0;color:#334155}
.once b,.zo b{display:block;font:700 15px var(--fh);margin-bottom:2px}
.zo em{font-style:normal;font:700 15px var(--fn)}
.once[hidden],.zo[hidden]{display:none}
.rc-more{margin-top:14px}
.rc-more summary{cursor:pointer;font:600 14px var(--fh);color:var(--orink);list-style:none}
.rc-more summary::-webkit-details-marker{display:none}
.mx{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
.mx th,.mx td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.mx th:first-child,.mx td:first-child{text-align:left;white-space:normal}
.mx-w{overflow-x:auto}
.rc-note{margin:12px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.55}
.rc-cta{display:flex;gap:10px;margin-top:16px}
.rc-cta .btn{flex:1;height:52px}
.btn-line2{background:#fff;color:var(--orink);border:1.5px solid #ffd1b3}

/* แถบสรุปติดล่างบนมือถือ */
.mbar{display:none}

/* ===== ตารางราคาเต็ม ===== */
.rt{padding:20px 0 100px}
.acc{max-width:980px;margin:0 auto;display:grid;gap:12px}
.acc details{background:#fff;border:1px solid var(--line);border-radius:16px;padding:0 22px}
.acc details[open]{box-shadow:0 14px 30px rgba(15,23,42,.07)}
.acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:18px 0;cursor:pointer}
.acc summary::-webkit-details-marker{display:none}
.acc summary b{font:600 17px var(--fh);color:var(--ink)}
.acc summary small{display:block;font:400 13.5px var(--fb);color:var(--ink2)}
.acc summary i{flex:none;font-style:normal;font:700 22px var(--fn);color:var(--orink);transition:transform .2s}
.acc details[open] summary i{transform:rotate(45deg)}
.acc-b{padding:0 0 20px}
.tg4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tg4 div{padding:10px 12px;border-radius:12px;background:#f5f7fb;font-size:13.5px;color:var(--ink2)}
.tg4 b{display:block;font:700 18px var(--fn);color:var(--orink)}
.tbl-w{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:9px 10px;border-bottom:1px solid var(--line);text-align:right}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl th{color:var(--ink2);font-weight:600;background:#f8fafc}
.car{margin-top:14px}
.car h5{margin:0 0 6px;font:700 15px var(--fh)}
.car h5 small{font:400 13px var(--fb);color:var(--ink2);margin-left:6px}
.ex{display:grid;gap:10px}
.ex div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:14px;border-radius:12px;background:#f8fafc}
.ex b{font:600 15px var(--fh)}
.ex small{display:block;color:var(--ink2);font-size:13px;line-height:1.5}
.ex em{font-style:normal;font:700 15px var(--fn);color:var(--orink);white-space:nowrap}
.ex h6{margin:8px 0 0;font:700 14px var(--fh);color:var(--ink2)}

@media (max-width:1024px){
  .cx-g{grid-template-columns:minmax(0,1fr)}
  .rc{position:static}
  .four-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:10px;
    padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
    background:var(--n9);color:#fff;box-shadow:0 -8px 24px rgba(0,0,0,.25)}
  .mbar small{display:block;color:#9fb3d9;font-size:12px}
  .mbar b{font:800 22px var(--fn);color:var(--or2)}
  .mbar a{flex:none;height:44px;padding:0 16px;border-radius:12px;background:var(--or);color:#fff;font:600 14px var(--fh);display:inline-flex;align-items:center}
  body{padding-bottom:76px}
}
@media (max-width:640px){
  .hero.is-ffm .hero-in{padding:110px 0 100px}
  .four-g{grid-template-columns:minmax(0,1fr)}
  .four-c{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;padding:16px}
  .four-c i{grid-row:span 3;margin:0}
  .four-c strong{font-size:22px}
  .four-c b{padding-right:34px}
  .cx{padding:60px 0}
  .cx-step,.pc{padding:16px}
  .kt{grid-template-columns:repeat(3,minmax(0,1fr))}
  .f3{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .sv-x{padding:4px 0 10px}
  .rc-per b{font-size:40px}
  .tg4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .acc details{padding:0 16px}
}

.mt{margin-top:10px}

.sec.is-tight{padding-top:0}
.lnk{color:var(--orink);font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* ===== ราคาใหม่ PT Fulfillment · Coming Soon (2 พ.ย. 2569 เจ้าของอนุมัติราคา 1 พ.ย. · ยังไม่ใช้คิดเงิน) =====
   พื้นขาวเรียบ ไม่มีพื้นสี · ตารางแบบ Excel · ป้าย Coming Soon หัวส่วน */
.ffn{padding:20px 0 70px}
.ffn .sec-h{margin-bottom:28px}
.ffn-soon{display:inline-block;margin-top:10px;padding:4px 12px;border:1.5px solid var(--orink);border-radius:999px;font:700 13px var(--fn);letter-spacing:.06em;color:var(--orink);background:#fff}
.ffn .sec-h h2{margin-top:8px}
.ffn .sec-h p{font-size:14px}
.ffn-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start}
.ffn-box{min-width:0;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff}
.ffn-box h3{margin:0 0 12px;font:600 17px var(--fh);color:var(--ink)}
.ffn-tw{overflow-x:auto;border:1px solid #d3d8e0}
.ffn-t{width:100%;border-collapse:collapse;font-size:14px}
.ffn-t th,.ffn-t td{padding:8px 10px;border:1px solid #d3d8e0;text-align:left;vertical-align:top;color:var(--ink)}
.ffn-t th{background:#f3f4f6;font:600 13px var(--fh);color:var(--ink2);white-space:nowrap}
.ffn-t td:last-child,.ffn-t th:last-child{text-align:right;white-space:nowrap;font-family:var(--fn);font-variant-numeric:tabular-nums}
.ffn-t td small{display:block;font-size:12.5px;color:var(--ink2)}
.ffn-t tr.ffn-gh td{text-align:left;font-weight:600;color:var(--ink2);font-family:var(--fh)}
.ffn-t.is-num td,.ffn-t.is-num th{text-align:right;font-family:var(--fn);font-variant-numeric:tabular-nums}
.ffn-t.is-num td:first-child,.ffn-t.is-num th:first-child{text-align:left}
.ffn-t.is-num th{font-family:var(--fh)}
.ffn-t b{color:#15803d}
.ffn-vs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-bottom:14px}
.ffn-vs-c{min-width:0;padding:14px;border:1px solid var(--line);border-radius:12px}
.ffn-vs-c.is-pt{border-color:var(--orink)}
.ffn-vs-c small{display:block;font-size:13px;color:var(--ink2)}
.ffn-vs-c b{display:block;margin-top:2px;font:800 19px/1.25 var(--fn);color:var(--ink)}
.ffn-vs-c.is-pt b{color:var(--orink)}
.ffn-vs-c p{margin:2px 0 0;font-size:12.5px;color:var(--ink2)}
.ffn-vs-c ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px;color:var(--ink)}
.ffn-vs-c li{display:flex;justify-content:space-between;gap:8px}
.ffn-vs-c em{font-style:normal;font-family:var(--fn);font-variant-numeric:tabular-nums}
.ffn-vs-c.is-pt li:before{content:"✓";color:#15803d;font-weight:700;margin-right:6px}
.ffn-vs-c.is-pt li{justify-content:flex-start;gap:0}
.ffn-say{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;font-size:15px;color:var(--ink)}
.ffn-say p{margin:0 0 12px;line-height:1.7}
.ffn-3 b{font:600 15px var(--fh)}
.ffn-3 ol{margin:6px 0 0;padding-left:22px;display:grid;gap:4px}
@media (max-width:900px){.ffn-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .ffn-box,.ffn-say{padding:14px}
  .ffn-t th,.ffn-t td{padding:7px 8px;font-size:13px}
  .ffn-vs{grid-template-columns:minmax(0,1fr)}
  .ffn-t.is-num th,.ffn-t.is-num td{padding:7px 6px}
  .ffn-t.is-num th{white-space:normal}
}