/* ภาพ 3 มิติเทียบคน (lm3d.js) บนหน้า fulfillment.html · ย้ายจากหน้า ff-price เดิม 24 ต.ค. 2569
   กฎ .lm-* / .sp-lm-* คัดจาก pt-shop.css (แก้ที่นั่นต้องแก้ที่นี่ด้วย) · ตัวแปร --sp-* ผูกกับสีหน้า landing */
.lmd,.v3d{--sp-brand:var(--or,#ff6a13);--sp-brand-ink:var(--orink,#c94f0c);--sp-brand-soft:#fff1e8;--sp-price:#e8461e;--sp-bad:#d43b2f;--sp-bad-soft:#fdecea;
  --sp-bg:#f4f6f9;--sp-card:#fff;--sp-line:var(--line,#e5e9f0);--sp-line-2:#d5dbe4;--sp-ink:var(--ink,#0f172a);--sp-ink-2:var(--ink2,#475569);--sp-mute:#8b919b;
  --sp-font:var(--fb,inherit);--sp-num:var(--fb,inherit)}
.v3d{display:flex;align-items:center;gap:12px;width:100%;margin-top:10px;padding:12px 14px;border-radius:14px;border:1px solid #ffd9bf;background:linear-gradient(135deg,#fff7f0,#fff);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.v3d>.ic{flex:0 0 auto;width:40px;height:40px;padding:8px;border-radius:12px;background:var(--or);color:#fff}
.v3d span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.v3d b{font:600 15px var(--fh)}
.v3d small{font-size:12.5px;color:var(--ink2)}
.v3d i{font-style:normal;font-size:22px;color:var(--orink)}
.v3d:hover{border-color:var(--or)}
.bx-v{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;border:1px solid #ffd9bf;background:#fff7f0;color:var(--orink);font:600 12px var(--fb);cursor:pointer;white-space:nowrap}
.bx-v:hover{background:var(--or);border-color:var(--or);color:#fff}
.lmd{width:min(680px,calc(100vw - 24px));max-height:min(92vh,860px);padding:0;border:0;border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 30px 80px rgba(15,23,42,.35);overflow:hidden}
.lmd[open]{display:flex;flex-direction:column}
.lmd::backdrop{background:rgba(15,23,42,.55)}
.lmd-h{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.lmd-h b{font:600 17px var(--fh);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lmd-x{flex:0 0 auto;width:36px;height:36px;border-radius:50%;border:0;background:#f1f5f9;color:var(--ink2);font-size:22px;line-height:1;cursor:pointer}
.lmd-b{flex:1 1 auto;min-height:0;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.lmd-f{flex:0 0 auto;display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--line)}
.lmd-f .btn{flex:0 0 auto;min-width:120px;height:46px}
.lmd-cap{margin:0;font-size:13px;color:var(--ink2);line-height:1.5}
.lmd-empty{margin:20px 0;text-align:center;color:var(--ink2)}
.lmd-rows{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lmd-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 12px;font-size:14px}
.lmd-rows div+div{border-top:1px solid var(--line)}
.lmd-rows span{color:var(--ink2);min-width:0}
.lmd-rows b{text-align:right}
.lmd-rows div:last-child b{color:var(--orink)}
.lm-wrap{display:flex;flex-direction:column;gap:6px}
.lm-wrap .sp-lm-rot{justify-content:center}
.lmd .sp-cbtn{display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);color:var(--ink2);cursor:pointer}
.lmd .sp-lm-dir .ic{width:14px;height:14px}
.lmd .sp-cbtn .ic{width:18px;height:18px}
.lmd .lm-svg.is-3d{height:min(380px,72vw)}
@media (max-width:560px){.lmd{width:100vw;max-width:100vw;max-height:94vh;margin:auto 0 0;border-radius:18px 18px 0 0}.lmd-f .btn{flex:1}}
.sp-lm-stage{position:relative;border-radius:12px;background:radial-gradient(circle at 50% 30%,var(--sp-card),var(--sp-bg));border:1px solid var(--sp-line);overflow:hidden}
.lm-svg{display:block;width:100%;height:auto;max-height:420px}
.lm-floor{fill:var(--sp-bg);stroke:var(--sp-line-2);stroke-width:1}
.lm-grid{stroke:var(--sp-line);stroke-width:1}
.lm-box .lm-t{fill:#f4c48c}
.lm-box .lm-l{fill:#d9995a}
.lm-box .lm-r{fill:#c4823f}
.lm-box polygon{stroke:#8a5520;stroke-width:.8;stroke-linejoin:round}
.lm-box.is-b .lm-t{fill:#f0d2a6}
.lm-box.is-b .lm-l{fill:#d6ac72}
.lm-box.is-b .lm-r{fill:#bf9055}
.lm-box.is-c .lm-t{fill:#ffd9b8}
.lm-box.is-c .lm-l{fill:#f3a76c}
.lm-box.is-c .lm-r{fill:#de8a4c}
.lm-tape{fill:none;stroke:#b9d3e6;stroke-width:5;opacity:.85}
.lm-n{font:700 14px var(--sp-num);fill:#5a3510;text-anchor:middle}
.lm-man{fill:none}
.lm-ruler{stroke:var(--sp-ink-2);stroke-width:1.2;stroke-dasharray:4 3}
.lm-rt{font:600 11px var(--sp-font);fill:var(--sp-ink-2)}
.sp-lm-dir{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;background:var(--sp-card);border:1px solid var(--sp-line);font-size:12px;color:var(--sp-ink-2)}
.sp-lm-rot{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--sp-ink-2)}
.sp-lm-rot .sp-cbtn{width:34px;height:34px;background:var(--sp-bg)}
.sp-lm-ph img{width:40px;height:40px;border-radius:8px;object-fit:cover;display:block}
.sp-lmcard{cursor:default}
.sp-lm-stage[data-lm3d]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.sp-lm-stage.is-drag{cursor:grabbing}
.lm-svg.is-3d{height:min(420px,90vw);max-height:none}
.lm-svg.is-3d .lm-box polygon{transition:none}
.sp-lm-hint{position:absolute;right:10px;bottom:10px;padding:3px 9px;border-radius:999px;background:var(--sp-card);border:1px solid var(--sp-line);font-size:11.5px;color:var(--sp-mute);pointer-events:none}
.sp-lm-stage.is-drag .sp-lm-hint{opacity:0}
.lm-rt.is-l{text-anchor:end}
.lm-bed-floor{fill:var(--sp-brand-soft);stroke:none}
.lm-bed-floor.is-over{fill:var(--sp-bad-soft,#fdecea)}
.lm-bed line{stroke:var(--sp-brand);stroke-width:1.4;stroke-dasharray:5 3}
.lm-bed.is-over line{stroke:var(--sp-bad)}
.lm-bed-t{font:700 11px var(--sp-font);fill:var(--sp-brand-ink);text-anchor:middle}
.lm-bed.is-over .lm-bed-t{fill:var(--sp-bad)}
.sp-lm-bedinfo{display:none;position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);padding:4px 10px;border-radius:999px;background:var(--sp-brand-soft);color:var(--sp-brand-ink);font-size:12px;font-weight:700}
.sp-lm-bedinfo.is-over{background:var(--sp-bad-soft,#fdecea);color:var(--sp-bad)}
.sp-lm-stage.is-car .sp-lm-bedinfo{display:block}
.sp-lm-stage.is-car .sp-lm-hint{display:none}
.sp-lm-stage+.sp-line-f .sp-seg a{white-space:nowrap;padding-inline:12px}
.sp-cbm .lm-svg.is-3d{height:min(300px,70vw)}
.sp-lm-wrap{display:flex;flex-direction:column;gap:6px}
.sp-lm-wrap .sp-lm-rot{justify-content:center}
.sp-lm-stage[data-lm3d-on]{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.lm-box.is-sack .lm-t{fill:#6fbf73}
.lm-box.is-sack .lm-l{fill:#4c9f50}
.lm-box.is-sack .lm-r{fill:#3b8a40}
.lm-box.is-sack polygon{stroke:#2e6b31;stroke-linejoin:round}
.lm-box.is-tire .lm-t{fill:#2f2f34}
.lm-box.is-tire .lm-l{fill:#3b3b42}
.lm-box.is-tire polygon{stroke:#0c0c0e}
.lm-box.is-tire .lm-shoulder{fill:#3a3a40;stroke:#18181b;stroke-width:.8}
.lm-box.is-tire .lm-bead{fill:#2e2e33;stroke:#55555c;stroke-width:1}
.lm-tread{fill:none;stroke:#0a0a0c;stroke-width:1.6;stroke-linecap:round}
.lm-tread.is-mid{stroke-width:1.2}
.lm-box.is-roll .lm-t{fill:#e7d6f5}
.lm-box.is-roll .lm-l{fill:#9b6fc4}
.lm-box.is-roll polygon{stroke:#5d3a80}
.lm-box.is-crate .lm-t{fill:#ecd2a4}
.lm-box.is-crate .lm-l{fill:#dcb67f}
.lm-box.is-crate .lm-r{fill:#c9a067}
.lm-box.is-crate polygon{stroke:#7a4f1d;stroke-width:.8}
.lm-box.is-crate .lm-batten{fill:#a8702f;stroke:#6b4519;stroke-width:.8}
.lm-plank{stroke:#9c6a33;stroke-width:.9;opacity:.75}
.lm-grain{fill:none;stroke:#b58448;stroke-width:.7;opacity:.55}
.lm-box.is-pallet .lm-t{fill:#e2c08e}
.lm-box.is-pallet .lm-l{fill:#c9a06a}
.lm-box.is-pallet .lm-r{fill:#b78e58}
.lm-box.is-wrap .lm-t{fill:#eef2f6}
.lm-box.is-wrap .lm-l{fill:#d5dde6}
.lm-box.is-wrap .lm-r{fill:#c3cdd8}
.lm-box.is-wrap polygon{stroke:#8f9bab}
.lm-hole{fill:#151518}
.lm-box.is-roll .lm-hole{fill:#5d3a80}
.sp-lm-tag{position:absolute;right:10px;top:10px;max-width:min(60%,220px);display:flex;flex-direction:column;gap:2px;padding:8px 11px;border-radius:12px;background:var(--sp-card);border:1px solid var(--sp-line);box-shadow:0 2px 8px rgba(0,0,0,.06);pointer-events:none}
.sp-lm-tag b{font-size:14px;color:var(--sp-ink)}
.sp-lm-tag .is-zh{font-size:13.5px;color:var(--sp-ink)}
.sp-lm-tag .is-zh i{font-style:normal;font-size:11.5px;color:var(--sp-mute)}
.sp-lm-tag .is-en{font-size:12px;color:var(--sp-ink-2)}
.sp-lm-tag em{margin-top:3px;font-style:normal;font-weight:700;font-size:14px;color:var(--sp-price,var(--sp-brand))}
.lm-box.is-sack .lm-t{fill:#7cc77f;stroke:none}
.lm-seam{fill:#2f7a33;stroke:#245f28;stroke-width:1}
.lm-stitch{fill:none;stroke:#e9f5e9;stroke-width:1;stroke-dasharray:2 2}
.lm-box.is-drum .lm-t{fill:#3d7fd1}
.lm-box.is-drum .lm-l{fill:#1f5fb3}
.lm-box.is-drum polygon{stroke:#123f7a}
.lm-hoop{fill:none;stroke:#174c8f;stroke-width:2.2}
.lm-lid{fill:#2f6fc2;stroke:#5c97e0;stroke-width:1}
.lm-bung{fill:#1b4f94;stroke:#9cc2ef;stroke-width:.8}
.lm-box.is-ibc .lm-t{fill:#fbfbfa}
.lm-box.is-ibc .lm-l{fill:#f1f2f0}
.lm-box.is-ibc .lm-r{fill:#e4e6e3}
.lm-box.is-ibc polygon{stroke:#c9ccc7}
.lm-cage-s{stroke:#6f7883;stroke-width:3.4;stroke-linecap:round}
.lm-cage{stroke:#d7dde3;stroke-width:1.8;stroke-linecap:round}
.lm-cage-s.is-edge{stroke-width:4.6}
.lm-cage.is-edge{stroke-width:2.6}
.lm-box.is-ibccap .lm-t{fill:#9aa3ad}
.lm-box.is-ibccap .lm-l{fill:#7c8590}
.lm-box.is-ibccap .lm-hole{fill:#5d6670}
.lm-box.is-plate .lm-t,.lm-box.is-plate .lm-l,.lm-box.is-plate .lm-r{fill:#aeb6bf}
.lm-box.is-plate polygon{stroke:#7d8690}
.lm-box.is-ibcbase .lm-t{fill:#4a4a50}
.lm-box.is-ibcbase .lm-l{fill:#404046}
.lm-box.is-ibcbase .lm-r{fill:#35353a}
.lm-box.is-ibcbase polygon{stroke:#0e0e10}
.lm-box.is-valve .lm-t{fill:#555}
.lm-box.is-valve .lm-l{fill:#333}
.lm-box.is-valve .lm-r{fill:#2a5ea8}
.lm-fork{fill:#3b2a17;opacity:.85}
.lm-box.is-ibcbase .lm-fork{fill:#000;opacity:.9}
.lm-deck{stroke:#9b7443;stroke-width:1}
.lm-box.is-ibcbase .lm-deck{stroke:#111}
.lm-box.is-paper .lm-t{fill:#e2c08e;stroke:none}
.lm-box.is-paper .lm-l{fill:#c9a067}
.lm-box.is-paper polygon{stroke:#8a6435}
.lm-box.is-paper .lm-seam{fill:#a67c45;stroke:#7a5428}
.lm-box.is-bigbag .lm-t{fill:#f7f7f3}
.lm-box.is-bigbag .lm-l{fill:#ebebe5}
.lm-box.is-bigbag .lm-r{fill:#dcddd5}
.lm-box.is-bigbag polygon{stroke:#b9bbb3}
.lm-box.is-bigbag .lm-hole{fill:#cfd0c8}
.lm-box.is-loop .lm-t,.lm-box.is-loop .lm-l,.lm-box.is-loop .lm-r{fill:#3d7fd1}
.lm-box.is-loop polygon{stroke:#245a9e}
.lm-box.is-jerry .lm-t{fill:#5b97e0}
.lm-box.is-jerry .lm-l{fill:#3d7fd1}
.lm-box.is-jerry .lm-r{fill:#2f6ab5}
.lm-box.is-jerry polygon{stroke:#1e4f8c}
.lm-box.is-cap .lm-t{fill:#f2c94c}
.lm-box.is-cap .lm-l{fill:#d9ad2a}
.lm-box.is-cap .lm-hole{fill:#b8901c}
.lm-box.is-pdrum .lm-t{fill:#7cc0ec}
.lm-box.is-pdrum .lm-l{fill:#4aa3df}
.lm-box.is-pdrum polygon{stroke:#1d6fa6}
.lm-box.is-pdrum .lm-hoop{stroke:#3a8fc9;stroke-width:1.4}
.lm-box.is-pdrum .lm-lid{fill:#6ab6e8;stroke:#a6d6f5}
.lm-box.is-proll .lm-t{fill:#efe3cc}
.lm-box.is-proll .lm-l{fill:#d8c39d}
.lm-box.is-proll polygon{stroke:#a38a5c}
.lm-box.is-proll .lm-hole{fill:#8a7350}
.lm-box.is-pipe .lm-t{fill:#c4cad1}
.lm-box.is-pipe .lm-l{fill:#9aa3ad}
.lm-box.is-pipe polygon{stroke:#6f7883}
.lm-box.is-pipe .lm-hole{fill:#4a525b}
.lm-box.is-foam .lm-t{fill:#ffffff}
.lm-box.is-foam .lm-l{fill:#f0f2f5}
.lm-box.is-foam .lm-r{fill:#e2e6eb}
.lm-box.is-foam polygon{stroke:#b7c0ca}
.lm-box.is-film .lm-t{fill:#3a3c42}
.lm-box.is-film .lm-l{fill:#2a2c30}
.lm-box.is-film .lm-r{fill:#202226}
.lm-box.is-film polygon{stroke:#55585f}
.lm-film-f{fill:#e8f2fb;fill-opacity:.28;stroke:#a9c3dc;stroke-width:.8}
.lm-sheen{fill:#fff;opacity:.5}
.lm-cgrid{stroke:#a8692e;stroke-width:.9;opacity:.85}
.lm-wband{fill:#4a4e57;opacity:.55}
.lm-wline{stroke:#6a6f79;stroke-width:.9;opacity:.8}
.lm-wcrease{stroke:#14161a;stroke-width:1.1;opacity:.7}
.lm-wsheen{fill:#fff;opacity:.13}
.lm-box.is-sofa .lm-t{fill:#a49a8f}
.lm-box.is-sofa .lm-l{fill:#8a7f73}
.lm-box.is-sofa .lm-r{fill:#776c61}
.lm-box.is-sofa polygon{stroke:#5d5349;stroke-width:.7}
.lm-box.is-sofa .lm-hole{fill:none}
.lm-box.is-cush .lm-t{fill:#c2b8ac}
.lm-box.is-cush .lm-l{fill:#a99e92}
.lm-box.is-cush .lm-r{fill:#968b7f}
.lm-box.is-cush polygon{stroke:#776c61;stroke-width:.7}
.lm-box.is-cush .lm-hole{fill:none}
.lm-box.is-drum .lm-r{fill:#174c8f}
.lm-box.is-pdrum .lm-r{fill:#3a8fc9}
.lm-box.is-tire .lm-r{fill:#26262a}
.lm-box.is-roll .lm-r{fill:#875bb0}
.lm-box.is-proll .lm-r{fill:#c7b089}
.lm-box.is-pipe .lm-r{fill:#87909a}
.lm-box.is-sack .lm-r{fill:#3b8a40}
.lm-box.is-paper .lm-r{fill:#b88f58}
.lm-box.is-leg .lm-t,.lm-box.is-leg .lm-l,.lm-box.is-leg .lm-r{fill:#3b2a17}
.lm-box.is-drum .lm-cgrid,.lm-box.is-tire .lm-cgrid,.lm-box.is-pipe .lm-cgrid,.lm-box.is-film .lm-cgrid{stroke:#0e2a4d;opacity:.5}