/* GO Laundry PX — shared stylesheet (observed web CI 03/09/2026: Navy #102E5B · Bright Blue #009CD8 · Gold #DFBF94 · Prompt)
   ⚠ แก้ที่ px/shared/px.css แล้วรัน node tools/px-sync.mjs */
/* v117: โทนใหม่ตามเจ้าของ — สว่าง สดใส นุ่มนวล: พื้นหลังฟ้าอ่อนไล่เฉด · การ์ดขาวมุมมน เงาฟุ้ง · ปุ่มหลักฟ้าสดไล่เฉด · น้ำเงินเข้มเหลือไว้เป็นสีตัวอักษร */
:root { --navy:#123A6B; --logo:#012168; --blue:#0AA7E6; --blue2:#0B86BE; --blue3:#38C3F5; --skyd:#7ED4F5; --sky:#E4F5FD; --mist:#F4FAFE;
  --bg:#F5FAFF; --cream:#FFF1DC; --gold:#F0CFA0; --gold2:#b9925a; --ink:#4A6274; --line:#E3ECF4; --bad:#C25B5B; --ok:#2E9A6A;
  --w:560px; --r:18px; --rb:12px; --shadow:0 10px 30px rgba(18,58,107,.07); }
* { box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent; }
html { scroll-behavior:smooth; }
body { font-family:"Prompt",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; color:var(--ink); background:var(--bg); min-height:100vh; font-size:15px; line-height:1.55;
  background-image:radial-gradient(820px 420px at 95% -8%, rgba(10,167,230,.16), transparent 62%), radial-gradient(640px 360px at -12% 26%, rgba(255,196,150,.18), transparent 60%), radial-gradient(700px 420px at 50% 110%, rgba(126,212,245,.16), transparent 60%);
  background-attachment:fixed; }
h1,h2,h3 { color:var(--navy); letter-spacing:-.2px; font-weight:600; line-height:1.25; }
h1 { font-size:26px } h2 { font-size:20px } h3 { font-size:16px }
a { color:var(--blue2); text-decoration:none; }
.wrap { max-width:var(--w); margin:0 auto; padding:10px 16px 112px; }
.wrap.wide { max-width:760px; }
/* header */
.top { display:flex; align-items:center; justify-content:space-between; padding:10px 2px 14px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand img { height:44px; width:auto; max-width:160px; object-fit:contain; }
.brand .wm { font-weight:700; color:var(--navy); font-size:13px; letter-spacing:.2px; line-height:1.05; opacity:.9; }   /* v117: ชื่อแบรนด์เล็ก ๆ ข้างโลโก้ */
.brand .wm span { color:var(--blue); }
.brand .tag { font-size:11px; color:var(--ink); letter-spacing:.4px; text-transform:uppercase; font-weight:600; opacity:.75; }
.top .lnk { font-size:13.5px; font-weight:600; color:var(--blue2); padding:8px 14px; border:0; border-radius:999px; background:var(--sky); }
/* cards */
.card { background:#fff; border:1px solid rgba(227,236,244,.7); border-radius:var(--r); padding:18px; margin-bottom:14px; box-shadow:var(--shadow); }
.card.sky { background:linear-gradient(160deg,var(--sky),#fff 70%); }
.card.mist { background:var(--mist); box-shadow:none; }
.card.hero { background:linear-gradient(150deg,#1A63B8,#0AA7E6 60%,#38C3F5); color:#fff; border:0; box-shadow:0 14px 34px rgba(10,167,230,.28); }
.card.hero h1,.card.hero h2,.card.hero h3 { color:#fff; }
.card.hero .sub { color:rgba(255,255,255,.82); }
.card.hero .b { color:#FFE7C2; }
.eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--blue2); margin-bottom:6px; display:flex; align-items:center; gap:8px; }
.stepno { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:999px; background:linear-gradient(135deg,var(--blue),var(--blue3)); color:#fff; font-size:12px; letter-spacing:0; box-shadow:0 4px 10px rgba(10,167,230,.3); }
.muted { color:#7d8f9c; font-size:13px; }
.row { display:flex; gap:10px; align-items:center; }
.between { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
/* buttons */
button { font-family:inherit; -webkit-appearance:none; appearance:none; }
.btn { display:block; width:100%; background:linear-gradient(135deg,var(--blue2),var(--blue) 55%,var(--blue3)); color:#fff; border:0; border-radius:var(--rb); padding:14px 16px; font-size:15.5px; font-weight:700; cursor:pointer; transition:transform .12s ease, opacity .15s, box-shadow .15s; text-align:center; box-shadow:0 8px 20px rgba(10,167,230,.28); }
.btn:active { transform:scale(.985); }
.btn:disabled { opacity:.5; cursor:default; }
.btn.blue { background:linear-gradient(135deg,var(--blue),var(--blue3)); }
.btn.ghost { background:#fff; color:var(--navy); border:1.5px solid var(--line); box-shadow:none; }
.btn.soft { background:var(--sky); color:var(--blue2); box-shadow:none; }
.btn.sm { padding:9px 14px; font-size:13.5px; width:auto; display:inline-block; }
.btn.gold { background:linear-gradient(135deg,#e9d3ab,var(--gold)); color:#5a4526; }
.linkbtn { background:none; border:0; color:var(--blue2); font-weight:600; font-size:14px; cursor:pointer; padding:0; }
/* forms */
label { display:block; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:5px; }
input, select, textarea { display:block; width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; font-size:16px; font-family:inherit; color:var(--navy); background:#FBFDFF; line-height:1.4; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px rgba(10,167,230,.14); }
input::placeholder, textarea::placeholder { color:#a3b1bb; }
textarea { resize:vertical; min-height:74px; }
.frow { margin-bottom:14px; }
.err { color:var(--bad); font-size:13.5px; font-weight:600; min-height:18px; margin:6px 0; }
.ok { color:var(--ok); font-weight:600; }
.phonef { display:flex; gap:8px; }
.phonef .cc { width:132px; flex:none; padding-left:10px; padding-right:28px; -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102E5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 9px center; background-size:16px; }
.phonef .pn { flex:1; letter-spacing:.4px; }
/* chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chip { border:1.5px solid var(--line); background:#fff; color:var(--navy); border-radius:999px; padding:9px 14px; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s; }
.chip.on { background:linear-gradient(135deg,var(--blue2),var(--blue)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(10,167,230,.25); }
.chip:disabled { opacity:.4; cursor:default; }
.chip.big { border-radius:14px; padding:12px 14px; text-align:left; flex:1 1 45%; }
.chip.big small { display:block; font-weight:500; font-size:12px; opacity:.8; }
.dates { display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; scrollbar-width:none; }
.dates::-webkit-scrollbar { display:none; }
.dchip { flex:none; width:74px; border:1.5px solid var(--line); background:#fff; border-radius:12px; padding:9px 6px; text-align:center; cursor:pointer; color:var(--navy); }
.dchip .d { font-size:20px; font-weight:700; line-height:1.1; } .dchip .m { font-size:11.5px; color:#7d8f9c; font-weight:600; }
.dchip.on { background:linear-gradient(160deg,var(--blue2),var(--blue)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(10,167,230,.25); } .dchip.on .m { color:rgba(255,255,255,.8); }
/* services */
.svc { padding:14px 0; border-top:1px solid var(--line); }
.svc:first-of-type { border-top:0; padding-top:4px; }
.svc-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.svc .n { font-weight:600; color:var(--navy); font-size:15.5px; }
.svc .u { font-size:12px; color:var(--blue2); font-weight:600; margin-left:6px; }
.svc .bul { margin:8px 0 0 2px; padding-left:18px; font-size:13.5px; color:var(--ink); line-height:1.5; }
.svc .bul li::marker { color:var(--blue); }
.svc .bul li { font-weight:600; color:var(--navy); }
.svc .bul.more li { font-weight:500; color:var(--ink); }
.svc .rm { font-size:13px; margin:6px 0 0 2px; }
.step { display:flex; align-items:center; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; flex:none; }
.step button { width:40px; height:40px; border:0; background:var(--sky); color:var(--blue2); font-size:20px; font-weight:600; cursor:pointer; }
.step button:disabled { color:#b8c4cc; }
.step .v { width:38px; text-align:center; font-weight:700; color:var(--navy); font-size:16px; }
/* progress */
.steps { display:flex; gap:6px; margin:4px 0 16px; }
.steps i { flex:1; height:4px; border-radius:99px; background:var(--line); display:block; }
.steps i.on { background:var(--blue); }
.steps i.done { background:var(--navy); }
/* combobox */
.combo { position:relative; }
/* v116: รายการค้นหาสถานที่ต้องลอยเหนือแถบเมนูล่าง (nav = z-index 50) และพลิกขึ้นบนได้เมื่อที่ว่างด้านล่างไม่พอ */
.combo .list { position:absolute; left:0; right:0; top:calc(100% + 4px); background:#fff; border:1.5px solid var(--line); border-radius:12px; box-shadow:0 14px 40px rgba(16,46,91,.14); max-height:290px; overflow:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; z-index:60; }
.combo .list.up { top:auto; bottom:calc(100% + 4px); }
.combo .it { padding:11px 14px; cursor:pointer; border-top:1px solid var(--mist); }
.combo .it:first-child { border-top:0; }
.combo .it:hover, .combo .it.hl { background:var(--mist); }
.combo .it .z { font-size:11.5px; color:#7d8f9c; }
.combo .it b { color:var(--navy); font-weight:600; }
.combo .grp { padding:6px 14px 2px; font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase; color:var(--blue2); background:var(--mist); }
.map { border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--mist); height:190px; margin:10px 0; }
.map iframe { width:100%; height:100%; border:0; display:block; }
/* status */
.status { border-radius:var(--r); padding:16px 18px; background:linear-gradient(150deg,#E4F5FD,#FFFFFF 60%,#FFF4E6); border:1px solid rgba(126,212,245,.5); margin-bottom:14px; box-shadow:var(--shadow); }
.status .k { font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:var(--blue2); }
.status .big { font-size:20px; font-weight:700; color:var(--navy); margin:4px 0 2px; letter-spacing:-.2px; }
.badge { display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; white-space:nowrap; }
.badge.pending { background:var(--cream); color:#9a6a2a; } .badge.confirmed { background:var(--sky); color:var(--blue2); }
.badge.done { background:#e5f5ec; color:var(--ok); } .badge.bad { background:#f8e4e4; color:var(--bad); } .badge.grey { background:#eef2f5; color:#6d7f8b; }
/* lists */
.item { padding:13px 0; border-top:1px solid var(--line); }
.item:first-child { border-top:0; padding-top:2px; }
.item .t { font-weight:600; color:var(--navy); }
.item .s { font-size:13px; color:#7d8f9c; }
.summary { background:var(--mist); border-radius:14px; padding:6px 14px; }
.kv { display:flex; justify-content:space-between; gap:14px; font-size:14.5px; padding:10px 0; align-items:flex-start; border-top:1px solid rgba(227,236,244,.9); }
.kv:first-child { border-top:0; }
.kv span:first-child { color:#7d8f9c; flex:none; font-size:12px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; padding-top:3px; }
.kv b { color:var(--navy); font-weight:600; text-align:right; line-height:1.35; }
.kv b .sub { display:block; font-style:normal; font-weight:600; color:var(--blue2); font-size:13.5px; margin-top:2px; }   /* v117: บรรทัดรอง (รอบเวลา · ห้อง) อีกสี */
/* v117: Saved places — แถวแบบ iOS: ไอคอนในวงกลมฟ้า · ชื่อ · ห้อง/จุดรับ · ลูกศร */
.card.list { padding:4px 14px; }
.prow { display:flex; align-items:center; gap:12px; width:100%; padding:12px 0; background:none; border:0; border-top:1px solid var(--line); text-align:left; cursor:pointer; font-family:inherit; color:var(--navy); }
.prow:first-child { border-top:0; }
.prow .pin { flex:none; width:38px; height:38px; border-radius:12px; background:var(--sky); color:var(--blue2); display:flex; align-items:center; justify-content:center; font-size:17px; }
.prow .pin svg { width:20px; height:20px; }
.prow .txt { flex:1; min-width:0; }
.prow .txt b { display:block; font-weight:600; font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prow .txt small { display:block; color:#7d8f9c; font-size:12.5px; margin-top:1px; }
.prow .chev { color:#b3c1cc; font-size:22px; line-height:1; padding-right:2px; }
/* contact */
.clink { display:flex; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); color:var(--navy); font-weight:600; }
.clink:first-of-type { border-top:0; }
.clink .ic { width:40px; height:40px; border-radius:11px; object-fit:cover; flex:none; }
.clink small { display:block; font-weight:500; color:#7d8f9c; font-size:12px; }
/* nav */
.nav { position:fixed; left:0; right:0; bottom:0; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); padding:6px 8px calc(8px + env(safe-area-inset-bottom)); z-index:50; }
/* v115: แถบเมนูล่างต้อง "บรรทัดเดียวเสมอ" ไม่ว่าจะมีกี่แท็บ — เดิมล็อกไว้ 4 ช่องตายตัว พอเพิ่มแท็บที่ 5 (Service) จึงตกบรรทัด */
.nav .in { max-width:var(--w); margin:0 auto; display:flex; gap:2px; }
.nav a { flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 2px; border-radius:12px; color:#7d8f9c; font-size:11px; font-weight:600; }
.nav a span { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav a svg { width:22px; height:22px; }
.nav a.on { color:var(--blue2); background:var(--sky); }
/* landing (how to use) */
.landing-hero { position:relative; border-radius:22px; overflow:hidden; background:linear-gradient(160deg,#0d2750,#153a72 55%,#1c4f90); color:#fff; padding:26px 22px 22px; margin-bottom:16px; box-shadow:0 20px 50px rgba(16,46,91,.22); }
.landing-hero::after { content:""; position:absolute; inset:auto -40px -60px auto; width:260px; height:260px; border-radius:50%; background:radial-gradient(circle, rgba(85,188,228,.35), transparent 65%); pointer-events:none; }
.landing-hero .eyebrow { color:var(--skyd); }
.landing-hero h1 { color:#fff; font-size:28px; }
.landing-hero h1 span { color:var(--skyd); }
.landing-hero p { color:rgba(255,255,255,.84); margin-top:8px; font-size:14.5px; }
.landing-hero .art { width:100%; height:auto; border-radius:16px; margin-top:16px; display:block; box-shadow:0 12px 34px rgba(0,0,0,.25); }
.howto { counter-reset:step; }
.how { display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
.how:first-child { border-top:0; padding-top:4px; }
.how .num { flex:none; width:36px; height:36px; border-radius:12px; background:var(--sky); color:var(--navy); font-weight:700; display:flex; align-items:center; justify-content:center; font-size:15px; }
.how .t { font-weight:600; color:var(--navy); font-size:15.5px; }
.how .d { font-size:13.5px; color:var(--ink); margin-top:2px; line-height:1.5; }
.goldline { height:3px; width:56px; border-radius:99px; background:linear-gradient(90deg,var(--gold),var(--cream)); margin:6px 0 14px; }
/* misc */
.skel { height:120px; border-radius:var(--r); background:linear-gradient(90deg,var(--mist),#fff,var(--mist)); background-size:200% 100%; animation:sk 1.2s infinite; margin-bottom:14px; }
@keyframes sk { from { background-position:200% 0 } to { background-position:-200% 0 } }
.toast { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); background:var(--navy); color:#fff; padding:11px 16px; border-radius:12px; font-size:14px; font-weight:600; box-shadow:0 12px 30px rgba(16,46,91,.25); z-index:80; max-width:92vw; }
.divider { height:1px; background:var(--line); margin:14px 0; }
.summary { background:var(--mist); border-radius:12px; padding:12px 14px; }
.center { text-align:center; }
.tabs { display:flex; border:1.5px solid var(--line); border-radius:10px; overflow:hidden; margin-bottom:14px; }
.tabs button { flex:1; border:0; background:#fff; padding:11px; font-weight:700; color:#7d8f9c; cursor:pointer; font-size:14px; }
.tabs button.on { background:var(--navy); color:#fff; }
.fade { animation:fade .18s ease-out; }
@keyframes fade { from { opacity:0; transform:translateY(5px) } }
@media (min-width:700px) { body { font-size:15.5px } .wrap { padding-top:18px } .landing-hero { padding:34px 34px 30px } .landing-hero h1 { font-size:34px } }
@media print { .nav { display:none } }

/* v114: ช่องติ๊ก (ใช้ในหัวข้อส่งคืน) · การ์ดขั้นตอนที่ยังไม่ถึงคิว · แถบยืนยันสถานที่ใกล้เคียง */
.chk { display:flex; align-items:center; gap:9px; font-size:14.5px; font-weight:500; color:var(--ink); cursor:pointer; }
.chk input { width:18px; height:18px; accent-color:var(--blue); }
.card.dim { opacity:.55; }
.stepno { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:99px;
  background:var(--sky); color:var(--navy); font-size:12px; font-weight:700; margin-right:7px; }
.nearby { background:var(--sky); border-radius:12px; padding:11px 13px; margin-top:10px; font-size:14px; color:var(--navy); }
.nearby .row { margin-top:8px; }