/* =====================================================================
   ธีม "แดง" — ฟอร์มขอทำประกันภัยรถยนต์ · โตโยต้า กาญจนบุรี
   ใช้ร่วมกัน 2 หน้า: index.html (ฟอร์ม) · staff.html (เจ้าหน้าที่)

   PALETTE    สเกลแดงที่ผู้ใช้กำหนด (2026-09-14)
              50 #fde0dc · 100 #f9bdbb · 200 #f69988 · 300 #f36c60 · 400 #e84e40
              500 #e51c23 · 600 #dd191d · 700 #d01716 · 800 #c41411 · 900 #b0120a
   กติกา      500 = ปุ่มหลัก/สิ่งที่เลือก · 800 = แถบหัว/hover · 900 = ตัวอักษรแดงบนพื้นอ่อน
              50 = พื้นอ่อนของสิ่งที่เลือก · 100/200 = เส้นขอบโทนแดง · 300 = แท่งกราฟ
              พื้น/หมึกเป็นเทาอมแดงจาง ๆ (ไม่ใช่น้ำตาล) ให้แดงเป็นพระเอกสีเดียว
   ⚠️ ตัวอักษรขาวบน 500 = 4.65:1 (เฉียดเกณฑ์) — ห้ามใช้ 300/400 เป็นพื้นของตัวอักษรขาว
   ===================================================================== */

:root{
  --red-50:#fde0dc; --red-100:#f9bdbb; --red-200:#f69988; --red-300:#f36c60; --red-400:#e84e40;
  --red-500:#e51c23; --red-600:#dd191d; --red-700:#d01716; --red-800:#c41411; --red-900:#b0120a;

  /* พื้น — ขาว/เทาอมแดงจาง */
  --bg:#f6f4f4; --bg-2:#eeeaea;
  --panel:#ffffff; --panel-2:#faf8f8;

  /* หมึก — เกือบดำอมแดงนิด ๆ */
  --ink:#221c1d; --ink-soft:#4a4243; --muted:#6b6264;

  --line:#e6dfdf; --line-soft:#f1ecec;

  --accent:var(--red-500); --accent-deep:var(--red-800);
  --accent-soft:var(--red-50); --accent-ink:var(--red-900);

  --good:#3f7a3a; --good-ink:#2f6a2c; --good-soft:#eaf4e8;
  --warn-ink:#8a5a10; --warn-soft:#fdf3e0;
  --bad:var(--red-700);  --bad-ink:var(--red-900);  --bad-soft:var(--red-50);
  --info-ink:#3c5a72; --info-soft:#eaf1f6;

  --head:var(--red-800);        /* แถบหัว — แดง 800 (ขาวบนนี้ = 6.07) */

  --sh-sm:0 1px 2px rgba(34,28,29,.06);
  --sh:0 1px 2px rgba(34,28,29,.05), 0 4px 12px -4px rgba(34,28,29,.10);
  --sh-lg:0 1px 2px rgba(34,28,29,.04), 0 12px 28px -14px rgba(34,28,29,.18);
  --ring:0 0 0 3px rgba(229,28,35,.20);

  --ease:cubic-bezier(.22,1,.36,1);
  --r:14px; --r-sm:10px;
  --font:"Sarabun","Segoe UI",Tahoma,system-ui,-apple-system,"Noto Sans Thai",sans-serif;
  --font-head:"Kanit","Sarabun","Segoe UI",Tahoma,system-ui,sans-serif;
}

*{box-sizing:border-box}
/* 🔑 [hidden] มาจาก UA stylesheet ซึ่งแพ้กฎ display ที่เราเขียนเอง
   ถ้าไม่มีบรรทัดนี้ ใส่ hidden แล้วของยังโผล่อยู่ — บทเรียนเดิมของทั้งระบบ */
[hidden]{display:none!important}

/* 🔑 ข้อความบรรทัดเดียวที่ตัดด้วย … (overflow:hidden) — เผื่อที่ให้สระ/วรรณยุกต์ไทยบน-ล่าง
   กล่องสูงแค่ line-height ถ้าไม่เผื่อ วรรณยุกต์ซ้อน (ยื่น) กับสระล่าง (ผู้) ถูกตัดหาย 1-2px
   padding + margin ติดลบเท่ากัน = ขนาดเลย์เอาต์ไม่เปลี่ยน แค่ขยายเขตที่วาดหมึกได้
   เพิ่มกล่อง … ใหม่เมื่อไร ใส่ selector ไว้ที่นี่ด้วย */
.step .t,.dname,.ld-nm,.rq-nm,.rq-sub,.rq-ag,.csel-lbl,.frow .nm{padding-block:4px;margin-block:-4px}

body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);
  font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;background:var(--bg)}

/* ---------- แถบหัว (ไม่มีโลโก้) ---------- */
header{background:var(--head);color:#fff;padding:15px 24px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  border-bottom:1px solid rgba(0,0,0,.2)}
.brand{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand h1{font-family:var(--font-head);font-size:18px;margin:0;font-weight:600;
  line-height:1.2;letter-spacing:-.005em}
.brand p{font-size:12px;margin:0;color:var(--red-50);font-weight:400}
header .spacer{flex:1;min-width:12px}
.hbtn{background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-sm);padding:8px 13px;font-size:12.5px;cursor:pointer;
  font-family:inherit;font-weight:600;text-decoration:none;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s var(--ease)}
.hbtn:hover{background:rgba(255,255,255,.17)}
.hbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.who-chip{font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(255,255,255,.14);border-radius:999px;padding:5px 12px}

main{max-width:840px;margin:0 auto;padding:22px 20px 40px}

/* ---------- แผ่นกระดาษ ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);padding:22px 24px;margin-bottom:16px}
.panel > h2{font-family:var(--font-head);font-size:17px;margin:0 0 4px;font-weight:600;
  letter-spacing:-.005em;color:var(--ink)}
.panel > .sub{font-size:13px;color:var(--muted);margin:0 0 18px;line-height:1.6;max-width:64ch}

/* หัวข้อย่อย — เส้นคั่นบาง ๆ ไม่ใช่แถบสี · เว้นบนมากกว่าล่าง */
.sec{font-size:13px;font-weight:700;color:var(--ink-soft);
  margin:24px 0 11px;padding-bottom:7px;border-bottom:1px solid var(--line-soft)}
.sec:first-child{margin-top:0}

/* ---------- แถบขั้นตอน ---------- */
.steps{display:flex;align-items:center;gap:0;margin-bottom:18px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:6px;box-shadow:var(--sh-sm)}
.step{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 8px;border-radius:var(--r-sm);border:0;background:transparent;
  font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);
  cursor:pointer;min-width:0;transition:background .16s var(--ease),color .16s var(--ease)}
.step:disabled{cursor:default}
.step .n{flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:700;
  background:var(--bg-2);color:var(--ink-soft);
  transition:background .16s var(--ease),color .16s var(--ease)}
.step .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.step:hover:not(:disabled):not([aria-current="step"]){background:var(--panel-2);color:var(--ink-soft)}
.step[aria-current="step"]{background:var(--accent-soft);color:var(--accent-ink)}
.step[aria-current="step"] .n{background:var(--accent);color:#fff}
.step.done .n{background:var(--good-soft);color:var(--good-ink)}
.step:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* ---------- เลือกแบบคำขอ ---------- */
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* 🔑 label เป็น inline โดยปริยาย — ถ้ามีลูกเป็น block เบราว์เซอร์จะ "ฉีก" กล่อง
   ออกเป็นเสี่ยง ทำให้ขอบวาดไม่ครบด้านและ width ไม่ทำงาน (บทเรียนเดิมจาก .phdrop) */
.kind{display:block;position:relative;border:1.5px solid var(--line);border-radius:var(--r);
  padding:15px 46px 15px 46px;cursor:pointer;background:var(--panel-2);
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.kind:hover{border-color:#cfc4c5;background:var(--panel)}
.kind input{position:absolute;left:16px;top:17px;width:18px;height:18px;margin:0;
  appearance:none;-webkit-appearance:none;border:1.5px solid #9e9294;border-radius:50%;
  background:var(--panel);cursor:pointer;transition:border .14s var(--ease)}
.kind input:checked{border:5.5px solid var(--accent)}
.kind:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
.kind b{display:block;font-size:14.5px;font-weight:700;margin-bottom:3px;color:var(--ink)}
.kind span{display:block;font-size:12.5px;color:var(--muted);line-height:1.55}
.kind:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.kind:has(input:checked) b{color:var(--accent-ink)}
.kind .ic{position:absolute;right:14px;top:13px;font-size:18px;opacity:.45}

/* ---------- ฟอร์ม ---------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:14px}
/* 🔑 label ต้องเป็น block ไม่ใช่ flex-column — ไม่งั้นดาว * (span) กลายเป็นแถวของตัวเอง
   ตกลงไปอยู่ใต้ชื่อช่อง แล้วดูเหมือนจุดลอย ๆ (ของเดิมเป็นแบบนั้นมาตลอด) */
label.f{display:block;font-size:12.5px;font-weight:600;color:var(--ink-soft)}
label.f > input,label.f > textarea,label.f > .csel{margin-top:6px}
.bar label.f > .csel{margin-top:0}
label.f .req,.doc-t .req,.panel > .sub .req{color:var(--accent-ink);font-weight:700}
.c2{grid-column:span 2} .c3{grid-column:span 3} .c4{grid-column:span 4}
.c5{grid-column:span 5} .c6{grid-column:span 6} .c8{grid-column:span 8} .c12{grid-column:span 12}

input,select,textarea{font-family:inherit;font-size:15px;color:var(--ink);
  background:var(--panel);border:1px solid #d8d0d1;border-radius:var(--r-sm);
  padding:10px 12px;width:100%;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
input::placeholder,textarea::placeholder{color:#958a8c}
input:hover:not(:disabled),textarea:hover{border-color:#b8adaf}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--ring);outline:none}
input:focus-visible,textarea:focus-visible,button:focus-visible,select:focus-visible,
a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
input:disabled{background:var(--panel-2);color:var(--ink-soft);cursor:default}
input[aria-invalid="true"]{border-color:var(--bad);background:#fffafa}
textarea{resize:vertical;min-height:76px;line-height:1.55}
.hint{font-size:11.5px;color:var(--muted);font-weight:400}

/* ---------- ช่องติ๊ก / ตัวเลือก ---------- */
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:18px;height:18px;
  flex:0 0 auto;border:1.5px solid #9e9294;border-radius:5px;background:var(--panel);
  cursor:pointer;padding:0;position:relative;transition:.12s var(--ease)}
input[type=checkbox]:hover{border-color:var(--accent)}
input[type=checkbox]:checked{background:var(--accent);border-color:var(--accent)}
input[type=checkbox]:checked::after{content:"";position:absolute;left:4.5px;top:1.5px;
  width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
input[type=radio]{appearance:none;-webkit-appearance:none;width:18px;height:18px;
  flex:0 0 auto;border:1.5px solid #9e9294;border-radius:50%;background:var(--panel);
  cursor:pointer;padding:0;transition:.12s var(--ease)}
input[type=radio]:hover{border-color:var(--accent)}
input[type=radio]:checked{border:5.5px solid var(--accent)}

.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  border-radius:999px;padding:9px 15px;cursor:pointer;background:var(--panel-2);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);min-height:44px;
  transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease)}
.opt:hover{border-color:#cfc4c5;background:var(--panel)}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink)}
.opt:focus-within{box-shadow:var(--ring)}

/* ---------- แถบยืนยันตัวพนักงาน ---------- */
.empchk{margin-top:12px;font-size:13px;font-weight:600;border-radius:var(--r-sm);
  padding:10px 13px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  border:1px solid transparent}
.empchk.ok{background:var(--good-soft);color:var(--good-ink);border-color:#d8e4cf}
.empchk.no{background:var(--warn-soft);color:var(--warn-ink);border-color:#efdfc0}
.empchk .sm{font-weight:400;font-size:12.5px}

/* ---------- เอกสารแนบ (ขั้นที่ 3) ---------- */
.p3-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.p3-head h2{font-family:var(--font-head);font-size:17px;margin:0 0 4px;font-weight:600;letter-spacing:-.005em}
.p3-count{font-size:12.5px;font-weight:700;color:var(--good-ink);background:var(--good-soft);
  border-radius:999px;padding:3px 11px}

.docs{display:flex;flex-direction:column;gap:10px}
.docrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;
  border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--panel-2);
  transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .15s var(--ease)}
.docrow:has(input.dck:checked){background:var(--panel);border-color:#d9cfd0}
.docrow.has-files{border-color:#c9d6bf}
.docrow.drag{border-color:var(--accent);border-style:dashed;background:var(--accent-soft);box-shadow:var(--ring)}

.doc-main{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px;min-width:0}
.doc-txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.doc-t{font-size:14px;font-weight:700;color:var(--ink-soft)}
.docrow:has(input.dck:checked) .doc-t{color:var(--ink)}
.doc-st{font-size:12.5px;color:var(--muted)}
.docrow.has-files .doc-st{color:var(--good-ink);font-weight:600}
/* กดส่งแล้วยังขาดไฟล์ที่บังคับ — กรอบแดง + ข้อความสถานะแดง จนกว่าจะแนบ (renderChips ถอด .miss) */
.docrow.miss{border-color:var(--bad);background:var(--bad-soft)}
.docrow.miss .doc-st{color:var(--bad-ink);font-weight:600}

.docrow .note{grid-column:1 / -1;font-size:13.5px;padding:9px 11px}
.docrow:not(:has(input.dck:checked)) .note{display:none}

.pick{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;
  border:1px solid #d8d0d1;border-radius:var(--r-sm);padding:9px 14px;cursor:pointer;
  background:var(--panel);color:var(--ink-soft);min-height:42px;position:relative;white-space:nowrap;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.pick svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pick:hover{border-color:var(--accent);color:var(--accent-ink);background:var(--accent-soft)}
/* ซ่อนช่องไฟล์แบบ "ยังโฟกัสด้วยคีย์บอร์ดได้" แล้วยกวงโฟกัสมาไว้ที่ป้าย */
.pick input{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0;border:0}
.pick:focus-within{border-color:var(--accent);box-shadow:var(--ring)}

.dfiles{grid-column:1 / -1;list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dfile{display:grid;grid-template-columns:40px minmax(0,1fr) auto 36px;align-items:center;gap:10px;
  background:var(--panel-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:6px 6px 6px 7px}
.dthumb{width:40px;height:40px;border-radius:7px;object-fit:cover;display:block;background:var(--bg-2)}
.dthumb.pdf{display:grid;place-items:center;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:#fff;background:var(--accent)}
.dname{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsize{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.drm{width:36px;height:36px;border:0;border-radius:8px;background:none;color:var(--muted);cursor:pointer;
  display:grid;place-items:center;transition:background .14s var(--ease),color .14s var(--ease)}
.drm svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.drm:hover{background:var(--bad-soft);color:var(--bad-ink)}
.drm:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

.note-f{margin-top:18px}
.note-f .optl{font-weight:400;color:var(--muted);font-size:12px;margin-left:4px}

/* ---------- ตรวจก่อนส่ง ---------- */
.rv{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2);overflow:hidden}
.rv-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:14px 16px 12px;border-bottom:1px solid var(--line)}
.rv-top h3{font-family:var(--font-head);font-size:15.5px;font-weight:600;margin:0;color:var(--ink)}
.rv-top span{font-size:12.5px;color:var(--muted)}
.rv-blk{padding:12px 16px 14px;background:var(--panel)}
.rv-blk + .rv-blk{border-top:1px solid var(--line-soft)}
.rv-hd{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.rv-n{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;
  font-size:12px;font-weight:700;background:var(--good-soft);color:var(--good-ink)}
.rv-blk h4{flex:1;margin:0;font-size:13.5px;font-weight:700;color:var(--ink-soft)}
.rv-edit{font-family:inherit;font-size:12.5px;font-weight:700;color:var(--accent-ink);background:none;
  border:1px solid transparent;border-radius:8px;padding:5px 10px;cursor:pointer;min-height:32px}
.rv-edit:hover{background:var(--accent-soft);border-color:var(--red-100)}
.rv-edit:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.rv-dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:6px 14px;margin:0 0 0 31px;font-size:13.5px}
.rv-dl dt{color:var(--muted);font-weight:600}
.rv-dl dd{margin:0;color:var(--ink);font-weight:600;overflow-wrap:anywhere}
.rv-dl dd.empty{color:var(--muted);font-weight:400}

/* ---------- ปุ่ม ---------- */
.btn{font-family:inherit;font-size:14px;font-weight:700;border-radius:var(--r-sm);
  padding:11px 18px;cursor:pointer;border:1px solid var(--line);background:var(--panel);
  color:var(--ink-soft);transition:.15s var(--ease);
  display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px}
.btn:hover:not(:disabled){border-color:#b8adaf;background:var(--panel-2)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:default}
.btn.sm{font-size:12.5px;padding:8px 13px;min-height:38px}
/* ปุ่มหลัก — ดินเผาทึบ (ขาวบนพื้นนี้วัดได้ 5.55:1) */
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 1px 2px rgba(34,28,29,.10), 0 6px 14px -8px rgba(196,20,17,.45)}
.btn.primary:hover:not(:disabled){background:var(--accent-deep);border-color:var(--accent-deep)}
.btn.danger{color:var(--bad-ink);border-color:var(--red-100)}
.btn.danger:hover:not(:disabled){background:var(--bad-soft);border-color:var(--red-200)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-soft)}
.btn.ghost:hover:not(:disabled){background:var(--panel-2);border-color:var(--line)}

/* ---------- แถบปุ่มติดล่างจอ ----------
   ฟอร์มยาว ถ้าปุ่มไม่ติดจอต้องเลื่อนลงไปหาทุกครั้งที่กรอกเสร็จ
   เป็นแผ่นของตัวเอง (ไม่ได้อยู่ในแผงไหน) จึงใช้ขอบครบ 4 ด้าน */
.savebar{position:sticky;bottom:10px;z-index:30;margin:0;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.savebar .grow{flex:1;min-width:8px}
.savebar .note{font-size:12.5px;color:var(--muted);font-weight:600}
.savebar .note b{color:var(--ink-soft)}
@supports not (backdrop-filter:blur(4px)){ .savebar{background:var(--panel)} }

/* ---------- รายการคำขอ (staff) ---------- */
.bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:15px}
.bar .grow{flex:1;min-width:8px}

/* Data-dense + drill-down: หัวสั้น · แท็บสถานะมีตัวเลข · แถวแน่นกวาดตาได้ · กดเข้าไปดูรายละเอียด */
.qpanel{padding:20px 22px 12px}
.qhead{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.qtitle{flex:1;min-width:0}
.qtitle h2{font-family:var(--font-head);font-size:18px;margin:0 0 3px;font-weight:600;letter-spacing:-.005em}
.qtitle .sub{font-size:12.5px;color:var(--muted);margin:0;line-height:1.55}
#btnReload{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
#btnReload svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#btnReload.spin svg{animation:qspin .8s linear infinite}
@keyframes qspin{to{transform:rotate(360deg)}}

.stabs-wrap{margin:0 -22px 12px;padding:0 22px;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--line-soft)}
.stabs-wrap::-webkit-scrollbar{display:none}
.stabs{display:flex;gap:2px;min-width:max-content}
.stab{font-family:inherit;font-size:13px;font-weight:600;color:var(--muted);background:none;border:0;
  padding:10px 11px 11px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color .15s var(--ease),border-color .15s var(--ease)}
.stab b{font-size:11.5px;font-weight:700;min-width:22px;padding:1px 7px;border-radius:999px;
  background:var(--bg-2);color:var(--ink-soft);text-align:center;font-variant-numeric:tabular-nums}
.stab:hover{color:var(--ink-soft)}
.stab[aria-selected="true"]{color:var(--accent-ink);border-bottom-color:var(--accent)}
.stab[aria-selected="true"] b{background:var(--accent);color:#fff}
.stab.st-new:not([aria-selected="true"]) b{background:var(--accent-soft);color:var(--accent-ink)}
.stab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:6px}

.qbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.qsearch{position:relative;flex:1 1 auto;min-width:0}
.qsearch svg{position:absolute;left:12px;top:50%;width:17px;height:17px;transform:translateY(-50%);
  fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.qsearch input{padding-left:38px}
.qsearch input::-webkit-search-cancel-button{cursor:pointer}
.qagent{flex:0 0 240px;font-size:0}
.qagent > .csel{margin-top:0}

.qload{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel-2);margin-bottom:14px}
.qload summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;font-size:13px;min-height:44px}
.qload summary::-webkit-details-marker{display:none}
.qload summary::before{content:"";width:7px;height:7px;border-right:1.6px solid var(--muted);
  border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);transition:transform .15s var(--ease);flex:0 0 auto}
.qload[open] summary::before{transform:rotate(45deg)}
.qload summary .lb{font-weight:700;color:var(--ink-soft)}
.qload-sum{color:var(--muted);font-size:12.5px}
.qload summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:var(--r-sm)}
.qload-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 18px;padding:2px 10px 10px}
.ld{font-family:inherit;display:grid;grid-template-columns:minmax(0,1fr) 72px 26px;align-items:center;gap:10px;
  background:none;border:0;border-radius:8px;padding:7px 6px;cursor:pointer;text-align:left;color:var(--ink-soft)}
.ld:hover{background:var(--bg-2)}
.ld.on{background:var(--accent-soft);color:var(--accent-ink)}
.ld:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ld-nm{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ld-bar{height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.ld-bar i{display:block;height:100%;background:var(--red-300);transform-origin:left;transition:transform .3s var(--ease)}
.ld.on .ld-bar i{background:var(--accent)}
.ld-n{font-size:13px;font-weight:700;text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}

.qgroup{margin:0 -22px}
.qday{display:flex;justify-content:space-between;align-items:center;padding:12px 22px 6px;
  font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.01em}
.qday-n{font-weight:600}
.rq{font-family:inherit;display:grid;grid-template-columns:118px minmax(0,1fr) auto 120px;
  grid-template-areas:"st main ph time";align-items:center;gap:2px 14px;
  width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line-soft);
  padding:12px 22px;cursor:pointer;color:var(--ink);transition:background .12s var(--ease)}
.qday + .rq{border-top-color:var(--line)}
.rq:hover{background:var(--panel-2)}
.rq:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;background:var(--panel-2)}
.rq-st{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
.rq-st i{width:8px;height:8px;border-radius:50%;background:#a89c9e;flex:0 0 auto}
.rq.s-new .rq-st{color:var(--accent-ink)}
.rq.s-new .rq-st i{background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.rq.s-contacted .rq-st i{background:var(--info-ink)}
.rq.s-quoted .rq-st i{background:#b07d1a}
.rq.s-done .rq-st i{background:var(--good)}
.rq.s-cancelled .rq-st i{background:#c9bfc1}
.rq.s-cancelled .rq-nm,.rq.s-cancelled .rq-ph{color:var(--muted);text-decoration:line-through;text-decoration-color:#c9bfc1}
.rq-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.rq-line{display:flex;align-items:center;gap:8px;min-width:0}
.rq-nm{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.rq.s-new .rq-nm{color:var(--ink)}
.rq-sub{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-tag{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--ink-soft);
  background:var(--bg-2);border-radius:999px;padding:2px 8px;white-space:nowrap}
.rq-tag.warn{background:var(--warn-soft)}
.rq-tag.warn{color:var(--warn-ink)}
.rq svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.rq-ph{font-size:13.5px;font-weight:600;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.is-admin .rq{grid-template-columns:118px minmax(0,1fr) auto 190px;grid-template-areas:"st main ph ag" "st main ph time"}
.rq-st{grid-area:st} .rq-main{grid-area:main} .rq-ph{grid-area:ph}
.rq-ag{grid-area:ag;justify-self:end;align-self:end;display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:var(--ink-soft);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rq-ag.none{color:var(--warn-ink);font-weight:600}
.rq-time{grid-area:time;justify-self:end;align-self:start;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.rq-wait{color:var(--bad-ink);font-weight:700;margin-right:6px}
.is-admin .rq:not(.rq-sk) .rq-time{align-self:start}
#listBody:not(.is-admin) .rq-time{align-self:center}
.rq-sk{cursor:default;grid-template-columns:118px minmax(0,1fr)!important;grid-template-areas:"st main"!important}
.rq-sk:hover{background:none}
.tel{color:var(--accent-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px}

.pill{font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 10px;white-space:nowrap}
.pill.new{background:var(--bg-2);color:var(--ink-soft)}
.pill.contacted{background:var(--info-soft);color:var(--info-ink)}
.pill.quoted{background:var(--warn-soft);color:var(--warn-ink)}
.pill.done{background:var(--good-soft);color:var(--good-ink)}
.pill.cancelled{background:var(--bg-2);color:var(--muted)}
.pill.kind{background:var(--accent-soft);color:var(--accent-ink)}
.pill.clip{background:var(--panel-2);color:var(--ink-soft);border:1px solid var(--line)}

.empty{padding:38px 14px;text-align:center;color:var(--muted);font-size:13.5px}
.agnote{font-size:12px;color:var(--muted);margin:8px 0 0}
.empty b{display:block;font-size:15px;color:var(--ink-soft);margin-bottom:6px;
  font-family:var(--font-head);font-weight:600}

/* ---------- ดรอปดาวน์ของเราเอง ---------- */
.csel{position:relative;display:inline-flex;width:100%}
.csel > select{display:none}
.csel-btn{display:inline-flex;align-items:center;gap:8px;justify-content:space-between;
  font-family:inherit;font-size:15px;color:var(--ink);background:var(--panel);
  border:1px solid #d8d0d1;border-radius:var(--r-sm);padding:10px 12px;cursor:pointer;
  text-align:left;width:100%;min-height:44px;transition:border-color .15s var(--ease)}
.csel-btn:hover{border-color:#b8adaf}
.csel-btn[disabled]{opacity:.55;cursor:default;background:var(--panel-2)}
/* ยังไม่เลือก = ขึ้นข้อความชวนเลือกสีจาง เหมือน placeholder ของช่องกรอก */
.csel.is-empty .csel-lbl{color:var(--muted)}
.csel-btn[aria-invalid="true"]{border-color:var(--bad);background:#fffafa}
.csel-lbl{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csel-ar{width:8px;height:8px;flex:0 0 auto;border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .15s var(--ease)}
.csel-btn[aria-expanded="true"] .csel-ar{transform:rotate(-135deg) translate(-3px,-3px)}
.csel-menu{position:fixed;z-index:120;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);box-shadow:var(--sh-lg);padding:5px;
  max-height:min(320px,58vh);overflow:auto;
  overscroll-behavior:contain}   /* เลื่อนสุดรายการแล้วไม่ลากหน้า/กล่องข้างหลังให้เลื่อนตาม */
.csel-item{display:block;width:100%;text-align:left;font-family:inherit;font-size:14.5px;
  color:var(--ink);background:transparent;border:0;border-radius:7px;padding:10px 12px;
  cursor:pointer;white-space:nowrap}
.csel-item:hover{background:var(--panel-2)}
.csel-item.sel{background:var(--accent-soft);color:var(--accent-ink);font-weight:700}
.csel-item:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
label.f .csel{width:100%}

/* ---------- กล่องซ้อน ---------- */
.ov{position:fixed;inset:0;background:rgba(34,28,29,.45);display:none;
  align-items:center;justify-content:center;padding:18px;z-index:100}
.ov[open]{display:flex}
.card{background:var(--panel);border-radius:var(--r);box-shadow:0 24px 60px rgba(34,28,29,.3);
  width:100%;max-width:640px;max-height:92vh;overflow:auto;display:flex;flex-direction:column}
.card h3{font-family:var(--font-head);font-size:17px;margin:0;font-weight:600}
.card .hd{padding:20px 22px 0}
.card .hd p{font-size:12.5px;color:var(--muted);margin:5px 0 0}
.card .bd{padding:16px 22px}
/* ปุ่มหลักต้องกดได้เสมอแม้เนื้อหายาวเกินจอ (การ์ดเลื่อนในตัวเอง) */
.card .ft{position:sticky;bottom:0;z-index:2;background:var(--panel);
  border-top:1px solid var(--line-soft);padding:12px 22px 18px;
  display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}
.card .ft .grow{flex:1;min-width:8px}
.err{background:var(--bad-soft);color:var(--bad-ink);font-size:12.5px;font-weight:600;
  border-radius:var(--r-sm);padding:10px 13px;margin-bottom:13px;display:none;
  border:1px solid var(--red-100)}
.err[open]{display:block}
.login{max-width:420px;margin:48px auto}

/* ---------- รายละเอียด ---------- */
.dl{display:grid;grid-template-columns:132px 1fr;gap:8px 14px;font-size:13.5px;margin:0}
.dl dt{color:var(--muted);font-weight:600}
.dl dd{margin:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
/* ปุ่ม "แก้" ในแผงตรวจก่อนส่ง — เล็กบนจอคอม แต่บนมือถือต้องแตะได้ (≥44px) */
.fixbtn{margin-left:6px;min-height:0;padding:3px 10px;font-size:11.5px;border-radius:999px}

.flist{display:flex;flex-direction:column;gap:8px}
.frow{display:flex;align-items:center;gap:11px;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:10px 12px;background:var(--panel-2)}
.frow .ft2{font-size:10px;font-weight:800;letter-spacing:.05em;color:#fff;
  background:var(--muted);border-radius:4px;padding:3px 6px;flex:0 0 auto}
.frow .ft2.img{background:var(--info-ink)}
.frow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:600}
.frow .sz{font-size:11.5px;color:var(--muted);flex:0 0 auto;font-variant-numeric:tabular-nums}

/* ---------- หน้าส่งสำเร็จ ---------- */
.panel.done{text-align:center;padding:34px 26px 28px}
.panel.done > h2{font-size:20px;margin-bottom:6px}
.panel.done > .sub{margin:0 auto 20px;max-width:48ch}
.done-ic{width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  background:var(--good-soft);color:var(--good-ink);display:grid;place-items:center;
  font-size:26px;line-height:1}
.done-no{display:inline-block;font-family:var(--font-head);font-size:26px;font-weight:600;
  letter-spacing:.03em;background:var(--panel-2);border:1px dashed #d3c9ca;
  border-radius:var(--r);padding:12px 26px;margin-bottom:22px;color:var(--ink)}
.done-contact{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:420px;
  margin:0 auto 20px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel-2)}
.done-contact .lb{font-size:12.5px;font-weight:600;color:var(--muted)}
.done-contact .nm{font-family:var(--font-head);font-size:19px;font-weight:600;color:var(--ink)}
.done-contact .btn{margin-top:10px;text-decoration:none}
.panel.done .dl{text-align:left;max-width:420px;margin:0 auto}
.done-files{text-align:left;max-width:420px;margin:20px auto 0}

/* ---------- แจ้งเตือน ---------- */
#toasts{position:fixed;top:14px;right:14px;display:flex;flex-direction:column;
  align-items:flex-end;gap:9px;z-index:200}
.toast{background:#2b2425;color:#fff;font-size:13px;font-weight:600;
  border-radius:var(--r-sm);padding:11px 15px;max-width:330px;
  box-shadow:0 10px 30px rgba(34,28,29,.28);animation:tin .22s var(--ease)}
.toast.ok{background:var(--good-ink)} .toast.no{background:var(--red-900)}
@keyframes tin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}

.sk{display:block;height:13px;border-radius:6px;
  background:linear-gradient(90deg,var(--bg-2) 25%,var(--panel-2) 37%,var(--bg-2) 63%);
  background-size:400% 100%;animation:skx 1.4s ease infinite}
@keyframes skx{from{background-position:100% 0}to{background-position:-100% 0}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

@media (max-width:820px){
  .c3,.c4,.c5{grid-column:span 6}
  .c2{grid-column:span 4}
}
@media (max-width:640px){
  /* ขั้นที่ 3 บนมือถือ: ปุ่มแนบเต็มความกว้างใต้ชื่อเอกสาร · สรุปเป็นคอลัมน์เดียว */
  .docrow{grid-template-columns:1fr}
  .pick{justify-content:center;width:100%;min-height:44px}
  .dfile{grid-template-columns:40px minmax(0,1fr) 44px}
  .dsize{display:none}
  .drm{width:44px;height:44px}
  .rv-dl{grid-template-columns:1fr;gap:0;margin-left:0}
  .rv-dl dd{margin-bottom:8px}
  .rv-edit{min-height:44px;padding:0 14px}
  /* รายการคำขอบนมือถือ: แถวเรียงเป็น 2 บรรทัด — สถานะ+เวลา / ชื่อ / รายละเอียด / เบอร์+ผู้ดูแล */
  .qpanel{padding:16px 16px 8px}
  .stabs-wrap{margin:0 -16px 12px;padding:0 16px}
  .stab{min-height:44px}
  .qbar{flex-wrap:wrap}
  .qagent{flex:1 1 100%}
  .qgroup{margin:0 -16px}
  .qday{padding:12px 16px 6px}
  .rq,.is-admin .rq{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 16px;
    grid-template-areas:"st time" "main main" "ph ag"}
  .rq-time,.is-admin .rq:not(.rq-sk) .rq-time,#listBody:not(.is-admin) .rq-time{align-self:center}
  .rq-ag{align-self:center;max-width:58vw}
  .rq-ph{font-size:13px}
  .rq-sub{white-space:normal}
  .qload-grid{grid-template-columns:1fr}
  .ld{min-height:44px}
  #btnReload span{display:none}
  header{padding:13px 16px}
  /* แถบหัวของหน้าเจ้าหน้าที่บนมือถือ: ชื่อเรื่องเต็มบรรทัด แล้วชิปอีเมล+ปุ่มอยู่แถวล่างแถวเดียว
     🔑 ถ้าปล่อยให้ wrap เอง จะแตกเป็น 3 แถว สูง 184px = กินจอ 23% ก่อนเห็นการ์ดใบแรก
     (หน้าฟอร์มมีปุ่มเดียว อยู่แถวเดียวอยู่แล้ว จึงจำกัดกฎนี้ไว้ที่ .staffbar เท่านั้น) */
  .staffbar{gap:10px}
  .staffbar .spacer{display:none}
  .staffbar .brand{flex:1 1 100%}
  /* 🔑 flex-basis ต้องเป็น 0 ไม่ใช่ auto — การ wrap คิดจาก base size ก่อนหด
     basis auto = อีเมลกว้าง 210px ดันปุ่ม "ออกจากระบบ" ตกไปแถวสาม (แถบสูง 176px) */
  .staffbar .who-chip{flex:1 1 0;min-width:0;text-align:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .staffbar .hbtn{flex:0 0 auto}
  /* มีปุ่ม LINE เพิ่มมา → 4 ชิ้นไม่พอแถวเดียว แถบหัวสูง 176px · ลิงก์กลับฟอร์มแทบไม่ได้ใช้บนมือถือ ซ่อนไว้ */
  .staffbar a.hbtn[href="index.html"]{display:none}
  main{padding:16px 14px 30px}
  .panel{padding:18px 16px}
  .kinds{grid-template-columns:1fr}
  .c2,.c3,.c4,.c5,.c6,.c8{grid-column:span 12}
  /* แถบปุ่มบนมือถือ: เต็มความกว้างจอ + แถวเดียว
     🔑 ซ่อนคำอธิบาย (.note) เพราะถ้าปล่อยไว้ปุ่มจะตกลงไปแถวสอง แถบสูงเกือบ 170px กินจอไปครึ่งหนึ่ง */
  .savebar{bottom:0;border-radius:var(--r) var(--r) 0 0;border-bottom:0;flex-wrap:nowrap;
    margin:0 -14px -30px;padding:11px 14px calc(11px + env(safe-area-inset-bottom))}
  .savebar .note{display:none}
  .savebar .btn{flex:0 1 auto;padding:11px 12px;white-space:nowrap}
  .savebar .btn.primary{flex:1 1 auto}
  .dl{grid-template-columns:1fr;gap:2px 0}
  .dl dd{margin-bottom:9px}
  #toasts{left:12px;right:12px;align-items:stretch}
  .toast{max-width:none}
  /* ขั้นตอนบนจอแคบ: เหลือแค่ตัวเลข ยกเว้นขั้นที่กำลังทำอยู่ */
  .step .t{display:none}
  .step{padding:12px 4px}
  .step[aria-current="step"] .t{display:block;font-size:12.5px}
  /* ช่องกรอกต้อง ≥16px ไม่งั้น iOS ซูมหน้าจอเองทุกครั้งที่แตะช่อง */
  input,select,textarea,.csel-btn,.csel-item,.docrow .note{font-size:16px}
  /* เป้ากดบนมือถือ ≥44px
     ⚠️ ต้องยกเว้น checkbox/radio ไม่งั้นวงกลม/สี่เหลี่ยมถูกยืดเป็นวงรีผิดรูป
        (เป้ากดของมันคือ label ที่ห่ออยู่ ซึ่งสูง ≥44px แล้ว) */
  .btn,.hbtn,.csel-btn,.step,.pick,
  input:not([type=checkbox]):not([type=radio]),textarea{min-height:44px}
  .btn.sm{min-height:44px}
  .fixbtn{min-height:44px;padding:0 14px;margin:6px 0 2px}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
  input[type=checkbox]:checked::after{left:6px;top:2.5px}
  .done-no{font-size:22px;padding:11px 20px}
}

/* ---------- ผูก LINE (staff.html) ---------- */
.ln-steps{margin:0;padding:0;list-style:none;counter-reset:ln;display:flex;flex-direction:column;gap:16px}
.ln-steps li{counter-increment:ln;position:relative;padding-left:34px;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.ln-steps li::before{content:counter(ln);position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:12.5px;font-weight:700;display:grid;place-items:center}
.ln-steps b{font-size:14px;color:var(--ink);line-height:1.5}
.ln-qr{width:176px;height:176px;background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:4px}
.ln-qr svg{width:100%;height:100%;display:block}
.ln-code{font-family:var(--font-head);font-size:34px;font-weight:600;letter-spacing:.22em;color:var(--accent-ink);
  background:var(--accent-soft);border:1px dashed var(--red-200);border-radius:var(--r-sm);padding:6px 16px 6px 22px;
  font-variant-numeric:tabular-nums;user-select:all}
.ln-exp{font-size:12.5px;color:var(--muted)}
.ln-wait{font-size:13px;color:var(--muted);margin:16px 0 0;line-height:1.6}
.ln-ok{display:flex;flex-direction:column;gap:6px;background:var(--good-soft);border:1px solid #cfe3ca;
  border-radius:var(--r-sm);padding:14px 16px;color:var(--good-ink);font-size:13.5px;line-height:1.6}
.ln-ok b{font-size:15px}

/* =====================================================================
   ชั้นลูกเล่นหน้าลูกค้า (index.html · body.cust) — 2026-09-14
   สไตล์ Soft UI: เงานุ่ม มีมิติ · การเคลื่อนไหว 150–450ms ใช้ transform/opacity เท่านั้น
   ⚠️ ทุกอย่างต้องขึ้นต้นด้วย .cust — staff.html ใช้ไฟล์เดียวกัน ห้ามรั่วไปหน้าเจ้าหน้าที่
   ⚠️ ผู้ใช้ตั้ง "ลดการเคลื่อนไหว" → กฎ prefers-reduced-motion ด้านบนตัดทุกแอนิเมชัน + confetti ไม่สร้างเลย
   ===================================================================== */
.cust{background:
  radial-gradient(1200px 380px at 50% -120px, rgba(229,28,35,.10), transparent 70%), var(--bg)}

/* ---------- hero ---------- */
.cust header.hero{position:relative;overflow:hidden;display:block;padding:30px 20px 74px;border:0;
  background:linear-gradient(135deg,var(--red-800) 0%,var(--red-600) 58%,var(--red-700) 100%)}
.cust .hero-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cust .hero-road{animation:roadMove 6s linear infinite}
.cust .hero-shield{animation:float 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes roadMove{to{stroke-dashoffset:-88}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.cust .hero-in{position:relative;max-width:840px;margin:0 auto;animation:rise .5s var(--ease) both}
.cust .hero-kicker{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;color:#fff;
  background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 11px}
.cust .hero h1{font-family:var(--font-head);font-size:clamp(24px,5.4vw,34px);font-weight:600;
  line-height:1.3;margin:10px 0 6px;letter-spacing:-.01em;color:#fff}
.cust .hero-lead{margin:0;font-size:14.5px;line-height:1.6;color:#fff;max-width:52ch}
.cust .hero-chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cust .hero-chips li{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:#fff;
  background:rgba(0,0,0,.14);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:5px 12px 5px 9px}
.cust .hero-chips svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* เนื้อหาเกยขึ้นไปบน hero — ดูเป็นการ์ดลอยมากกว่ากล่องต่อท้ายแถบสี */
.cust main{margin-top:-52px;position:relative}

/* ---------- แถบขั้นตอน + แถบความคืบหน้าไหล ---------- */
.cust .steps{position:relative;padding:8px 8px 14px;box-shadow:var(--sh-lg);border-color:transparent}
.cust .steps-bar{position:absolute;left:18px;right:18px;bottom:6px;height:4px;border-radius:99px;background:var(--line-soft);overflow:hidden}
.cust .steps-bar i{display:block;height:100%;width:100%;border-radius:inherit;transform-origin:left;
  transform:scaleX(calc(.1 + var(--p,0) * .9));
  background:linear-gradient(90deg,var(--red-400),var(--red-600));transition:transform .45s var(--ease)}
.cust .step .n{width:26px;height:26px;font-size:12.5px;position:relative}
.cust .step[aria-current="step"] .n{box-shadow:0 0 0 4px rgba(229,28,35,.16);animation:pop .35s var(--ease)}
.cust .step.done .n{color:transparent}
.cust .step.done .n::after{content:"";position:absolute;left:9px;top:6px;width:6px;height:11px;
  border:solid var(--good-ink);border-width:0 2.4px 2.4px 0;transform:rotate(45deg);animation:pop .3s var(--ease)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
.cust .step.done .n::after{animation:none}

/* ---------- กล่องแต่ละขั้น ---------- */
.cust .panel{box-shadow:var(--sh-lg);border-color:rgba(230,223,223,.8)}
.cust .pane-in{animation:paneIn .38s var(--ease) both}
.cust .pane-back{animation:paneBack .38s var(--ease) both}
@keyframes paneIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes paneBack{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
.cust .panel > h2{font-size:19px}
.cust .sec{display:flex;align-items:center;gap:8px}
.cust .sec::before{content:"";width:4px;height:14px;border-radius:2px;background:var(--accent)}

/* ---------- การ์ดเลือกแบบคำขอ ---------- */
.cust .kind{padding:18px 18px 18px 50px;background:var(--panel);box-shadow:var(--sh-sm);
  transition:border-color .18s var(--ease),background .18s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
.cust .kind:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.cust .kind input{top:21px}
.cust .kind:has(input:checked){box-shadow:0 10px 24px -14px rgba(229,28,35,.55)}
.cust .kind .ic{position:static;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  margin-bottom:10px;background:var(--bg-2);color:var(--ink-soft);opacity:1;transition:background .2s var(--ease),color .2s var(--ease),transform .25s var(--ease)}
.cust .kind .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cust .kind:has(input:checked) .ic{background:var(--accent);color:#fff;transform:rotate(-6deg) scale(1.05)}

/* ---------- ช่องกรอก ---------- */
.cust input:not([type=checkbox]):not([type=radio]),.cust textarea,.cust .csel-btn{background:#fff;border-color:#e0d8d9;border-radius:12px}
.cust input:focus,.cust textarea:focus{box-shadow:0 0 0 4px rgba(229,28,35,.14)}
.cust input[aria-invalid="true"],.cust .csel-btn[aria-invalid="true"]{animation:shake .38s var(--ease)}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
.cust .empchk{animation:rise .3s var(--ease)}
.cust .opt{transition:border-color .15s var(--ease),background .15s var(--ease),color .15s var(--ease),transform .15s var(--ease)}
.cust .opt:active{transform:scale(.97)}
.cust .opt:has(input:checked){box-shadow:0 6px 14px -10px rgba(229,28,35,.6)}

/* ---------- เอกสาร ---------- */
.cust .docrow{background:#fff}
.cust .docrow.has-files{background:linear-gradient(0deg,#f6fbf4,#fff);border-color:#bcd8b5}
.cust .docrow.has-files .dck{animation:pop .3s var(--ease)}
.cust .dfile{animation:rise .28s var(--ease) both}
.cust .docrow.miss{animation:shake .38s var(--ease)}

/* ---------- ปุ่ม ---------- */
.cust .btn.primary{background:linear-gradient(180deg,var(--red-500),var(--red-700));border-color:var(--red-700);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 18px -10px rgba(196,20,17,.75)}
.cust .btn.primary:hover:not(:disabled){background:linear-gradient(180deg,var(--red-600),var(--red-800));border-color:var(--red-800);
  transform:translateY(-1px)}
.cust .btn:active:not(:disabled){transform:scale(.98)}
.cust .btn.is-loading{opacity:1;cursor:progress}
.cust .btn.is-loading::before{content:"";width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:qspin .7s linear infinite}
.cust .savebar{box-shadow:0 12px 30px -12px rgba(34,28,29,.28);border-color:transparent}

/* ---------- ส่งสำเร็จ ---------- */
.cust .panel.done{position:relative;overflow:hidden;padding-top:40px}
.cust .done-ic{width:76px;height:76px;background:none;margin-bottom:16px}
.cust .done-ic svg{width:76px;height:76px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.cust .done-ic .c{stroke:var(--good);stroke-width:3;fill:var(--good-soft);stroke-dasharray:146;stroke-dashoffset:146;
  animation:draw .55s var(--ease) .1s forwards}
.cust .done-ic .k{stroke:var(--good-ink);stroke-width:4;stroke-dasharray:36;stroke-dashoffset:36;animation:draw .35s var(--ease) .55s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.cust #tabDone:not([hidden]) .panel.done > :not(.confetti):not(.done-ic){animation:rise .45s var(--ease) .25s both}
.cust .done-nowrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:22px}
.cust .done-lb{font-size:12.5px;font-weight:600;color:var(--muted)}
.cust .done-no{margin:0;background:#fff;border:2px dashed var(--red-200);color:var(--accent-ink);font-size:28px;padding:10px 26px}
.cust .copy-no{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:13px;font-weight:700;
  color:var(--accent-ink);background:var(--accent-soft);border:1px solid var(--red-100);border-radius:999px;
  padding:0 16px;min-height:44px;cursor:pointer;transition:background .15s var(--ease),transform .15s var(--ease)}
.cust .copy-no svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cust .copy-no:hover{background:#fff}
.cust .copy-no:active{transform:scale(.96)}
.cust .copy-no.copied{color:var(--good-ink);background:var(--good-soft);border-color:#bcd8b5}
.cust .copy-no:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.cust .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.cust .confetti i{position:absolute;top:-14px;width:8px;height:12px;border-radius:2px;opacity:0;
  animation-name:fall;animation-timing-function:cubic-bezier(.25,.6,.4,1);animation-fill-mode:forwards}
@keyframes fall{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx),520px) rotate(var(--r))}}
.cust .panel.done > :not(.confetti){position:relative;z-index:1}

@media (max-width:640px){
  .cust header.hero{padding:22px 16px 66px}
  .cust .hero-shield{display:none}                      /* จอแคบ โล่ทับหัวเรื่อง — เหลือแค่วงกลม/เส้นถนน */
  .cust .hero-lead{font-size:14px}
  .cust .hero-chips li{font-size:12px}
  .cust main{margin-top:-48px}
  .cust .kind{padding:14px 14px 14px 46px}
  .cust .kind .ic{width:36px;height:36px;margin-bottom:8px}
  .cust .done-no{font-size:24px;padding:9px 18px}
}

/* =====================================================================
   ชั้นขัดผิวหน้าเจ้าหน้าที่ (staff.html · body.ops) — 2026-09-14
   หน้าทำงานทุกวัน → ลูกเล่นต้อง "ช่วยงาน" ไม่ใช่ประดับ: เร็ว (≤300ms) · ไม่วนซ้ำ · ไม่ขวางการกวาดตา
   ⚠️ ทุกกฎขึ้นต้น .ops — index.html (body.cust) ไม่โดน
   ===================================================================== */
.ops{background:radial-gradient(1000px 300px at 50% -140px, rgba(229,28,35,.09), transparent 70%), var(--bg)}

/* ---------- แถบหัว ---------- */
.ops header.staffbar{position:relative;overflow:hidden;border:0;padding:14px 24px;
  background:linear-gradient(120deg,var(--red-800),var(--red-600) 70%,var(--red-700));
  box-shadow:0 6px 20px -12px rgba(176,18,10,.7)}
.ops header.staffbar::after{content:"";position:absolute;right:-60px;top:-80px;width:240px;height:240px;border-radius:50%;
  background:rgba(255,255,255,.07);pointer-events:none}
.ops header.staffbar > *{position:relative;z-index:1}
.ops .ops-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:0 0 auto;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.28)}
.ops .ops-logo svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ops .brand p{color:#fff}
.ops .hbtn{background:rgba(0,0,0,.14);border-color:rgba(255,255,255,.26);transition:background .15s var(--ease),transform .15s var(--ease)}
.ops .hbtn:hover{background:rgba(0,0,0,.24)}
.ops .hbtn:active{transform:scale(.97)}
.ops .who-chip{background:rgba(0,0,0,.16)}
/* ยังไม่ผูก LINE → จุดเหลืองมุมปุ่ม เด้งเตือน 3 ครั้งแล้วหยุด */
.ops .hbtn.need{position:relative}
.ops .hbtn.need::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;
  background:#ffc857;box-shadow:0 0 0 2px var(--red-700);animation:ping 1.2s var(--ease) 3}
@keyframes ping{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}

/* ---------- เข้าสู่ระบบ ---------- */
.ops .login{position:relative;text-align:left;padding:30px 28px 26px;border:0;box-shadow:var(--sh-lg);
  overflow:hidden;animation:rise .4s var(--ease) both}
.ops .login::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--red-400),var(--red-700))}
.ops .login-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;margin-bottom:14px;
  background:linear-gradient(135deg,var(--red-500),var(--red-800));box-shadow:0 10px 22px -12px rgba(196,20,17,.8)}
.ops .login-ic svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ops .login h2{font-size:21px}
.ops .login .btn.primary{width:100%}

/* ---------- แผงรายการ ---------- */
.ops .panel{box-shadow:var(--sh-lg);border-color:rgba(230,223,223,.8)}
.ops .qtitle h2{font-size:20px}
.ops .stab{transition:color .15s var(--ease),border-color .2s var(--ease)}
.ops .stab b{transition:background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.ops .stab[aria-selected="true"] b{transform:scale(1.06)}
.ops input:not([type=checkbox]):not([type=radio]),.ops textarea,.ops .csel-btn{border-radius:12px}
.ops input:focus,.ops textarea:focus{box-shadow:0 0 0 4px rgba(229,28,35,.14)}

/* แถวคำขอ: ชี้แล้วมีแถบแดงซ้าย (บอกว่ากดได้ ไม่ขยับเลย์เอาต์) · โหลดใหม่ทยอยโผล่ */
.ops .rq{transition:background .14s var(--ease),box-shadow .14s var(--ease)}
.ops .rq:not(.rq-sk):hover{box-shadow:inset 3px 0 0 var(--accent)}
.ops .rq.s-new .rq-st i{animation:ping 1.2s var(--ease) 2}
.ops #listBody.anim .rq{animation:rowIn .32s var(--ease) both}
.ops #listBody.anim .qgroup:nth-child(1) .rq:nth-child(2){animation-delay:.02s}
.ops #listBody.anim .qgroup:nth-child(1) .rq:nth-child(3){animation-delay:.05s}
.ops #listBody.anim .qgroup:nth-child(1) .rq:nth-child(4){animation-delay:.08s}
.ops #listBody.anim .qgroup:nth-child(1) .rq:nth-child(5){animation-delay:.11s}
.ops #listBody.anim .qgroup:nth-child(1) .rq:nth-child(6){animation-delay:.14s}
.ops #listBody.anim .qgroup:nth-child(n+2) .rq{animation-delay:.18s}
@keyframes rowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ops .empty{animation:rise .3s var(--ease)}

/* ---------- ภาระงาน ---------- */
.ops .qload{background:#fff}
.ops .ld-bar i{background:linear-gradient(90deg,var(--red-300),var(--red-500))}

/* ---------- กล่องรายละเอียด / ยืนยัน / LINE ---------- */
.ops .ov[open]{animation:ovIn .18s ease-out both;backdrop-filter:blur(3px)}
.ops .ov[open] .card{animation:cardIn .26s var(--ease) both}
@keyframes ovIn{from{opacity:0}to{opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.ops .card{border-radius:18px}
.ops .card .hd{border-bottom:1px solid var(--line-soft);padding-bottom:14px}
.ops .ln-code{animation:pop .35s var(--ease)}
.ops .ln-ok{animation:rise .3s var(--ease)}

/* ---------- ปุ่ม ---------- */
.ops .btn.primary{background:linear-gradient(180deg,var(--red-500),var(--red-700));border-color:var(--red-700);
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 8px 18px -10px rgba(196,20,17,.75)}
.ops .btn.primary:hover:not(:disabled){background:linear-gradient(180deg,var(--red-600),var(--red-800));border-color:var(--red-800);transform:translateY(-1px)}
.ops .btn:active:not(:disabled){transform:scale(.98)}
.ops .btn.is-loading{opacity:1;cursor:progress}
.ops .btn.is-loading::before{content:"";width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:qspin .7s linear infinite}

@media (max-width:640px){
  .ops header.staffbar{padding:12px 16px}
  .ops .ops-logo{display:none}              /* แถบหัวมือถือจัดไว้แน่นแล้ว (122px) ไม่เพิ่มแถว */
  .ops .login{margin:24px auto;padding:26px 20px 22px}
}

/* =====================================================================
   แท็บเล็ต + มือถือแนวนอน + อุปกรณ์จอสัมผัสทุกขนาด — 2026-09-14
   เดิมกฎ "เป้ากด 44px" และ "ตัวอักษรช่องกรอก 16px" อยู่แค่ใน max-width:640px
   → iPad (768/1024) และ iPhone แนวนอน (740) ได้ช่องกรอก 15px = Safari ซูมจอเองทุกครั้งที่แตะช่อง
     และปุ่มหัว/แท็บสถานะสูง 34–40px กดพลาดง่าย (วัดจริงด้วยสคริปต์ตรวจ ไม่ได้เดา)
   pointer:coarse = จอสัมผัสจอใหญ่ (เช่น iPad Pro 1366px) ก็ได้กฎนี้ด้วย
   ===================================================================== */
@media (max-width:1024px), (pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),select,textarea,.csel-btn,.csel-item{font-size:16px}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),.csel-btn{min-height:44px}
  .btn,.btn.sm,.hbtn,.pick,.stab,.rv-edit,.copy-no,.ld,.opt{min-height:44px}
  #btnReload{min-width:44px}
  .drm{width:44px;height:44px}
  /* เบอร์โทรในรายละเอียด = ปุ่มโทรจริงบนมือถือ ต้องกดง่าย */
  .tel{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
  /* checkbox/radio ขยายนิดหน่อยให้แตะโดนง่ายขึ้น (ตัว label ที่ห่ออยู่เป็นเป้ากดหลัก) */
  input[type=checkbox],input[type=radio]{width:20px;height:20px}
  input[type=checkbox]:checked::after{left:5.5px;top:2px}
}
/* แท็บเล็ตแนวตั้ง (641–1024): การ์ดแบบคำขอยังวาง 2 ใบคู่กัน แต่เว้นช่องกว้างขึ้น · หน้าสำเร็จไม่กว้างเกิน */
@media (min-width:641px) and (max-width:1024px){
  main{padding-left:24px;padding-right:24px}
  .dfile{grid-template-columns:40px minmax(0,1fr) auto 44px}   /* จอ ≤640 ซ่อนขนาดไฟล์ ใช้ 3 คอลัมน์ของเดิม */
  .cust .kinds{gap:14px}
  .panel.done .dl,.done-files,.done-contact{max-width:520px}
}
/* มือถือแนวนอน (จอเตี้ย): hero ไม่กินครึ่งจอ · แถบปุ่มล่างไม่บังช่องกรอก */
@media (max-height:500px) and (orientation:landscape){
  .cust header.hero{padding:16px 20px 58px}
  .cust .hero h1{font-size:22px;margin:6px 0 2px}
  .cust .hero-lead{display:none}
  .cust .hero-chips{margin-top:8px}
  .cust .hero-shield{display:none}
  .savebar{position:static;margin-top:12px}
  .ops header.staffbar{padding-top:8px;padding-bottom:8px}
}