/* ═══ form-core — ช่องกรอกข้อมูลเกิดชุดกลาง ใช้ทั้งเล่มครอบครัวและเล่มรายปี ═══
   สร้างครั้งเดียวใช้สองหน้า (new_annual_order_plan.html §8) — เลิกก๊อป component ไปแก้บั๊กสองรอบ

   กติกา "จังหวะสายตา" (แก้อาการฟอร์มเบี้ยว — new_order_plan.html §7.3 ฉบับแก้ 28 ก.ค.):
   • ทุกกลุ่มใช้โครงแถวเดียวกัน: ช่องกรอกสูง 48px + ชิป "ไม่ทราบ…" สูงเท่ากัน อยู่ในแถวเดียวกัน
   • ชิปไม่ลอยไปมุมขวาของจอ และไม่มี control ไหนกว้างเต็มแถวโดดอยู่ตัวเดียว
   • จอแคบ ชิปตกลงมาใต้ช่องอย่างเป็นระเบียบด้วย flex-wrap (ไม่ใช่ absolute) */

.f-label{display:block;font-weight:600;font-size:.86rem;margin:12px 0 6px;color:var(--ink)}
.f-label .opt2{font-weight:400;color:var(--muted);font-size:.78rem}

/* แถวช่องตัวเลขแบ่งเป็นช่อง ๆ (วว/ดด/ปปปป · ชช:นน) */
.dseg-row{display:flex;align-items:center;gap:7px}
.dseg{height:48px;border:1.5px solid var(--line);border-radius:10px;text-align:center;
  font-family:'Sarabun',sans-serif;font-size:1.05rem;font-weight:600;outline:none;background:#fff;
  transition:border-color .15s,box-shadow .15s;-moz-appearance:textfield;color:var(--ink)}
.dseg::-webkit-outer-spin-button,.dseg::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.dseg:focus{border-color:var(--gold);box-shadow:var(--ring)}
.dseg.ok2{border-color:rgba(65,119,92,.6);background:#F7FAF6}
.dseg.bad{border-color:var(--warn);box-shadow:0 0 0 3.5px rgba(176,106,79,.14)}
.dseg.dd,.dseg.mm,.dseg.hh,.dseg.mn{width:64px}
.dseg.yy{width:92px}
.dseg:disabled{opacity:.45;background:#FAF7F0}
.dsep{color:var(--muted);font-weight:700}

/* บรรทัดคำอ่านยืนยัน — รางวัลเร็วเมื่อกรอกครบ ไม่ด่าตอนพิมพ์ยังไม่จบ */
.echo{font-size:.82rem;margin-top:7px;min-height:1.4em;color:var(--muted);line-height:1.55}
.echo.good{color:var(--ok)}
.echo.err{color:var(--warn)}

/* แถวเดียวกัน: ช่องกรอก + ชิป "ไม่ทราบ…" */
.brow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
.unk-chip{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px;
  border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);
  font-size:.85rem;font-weight:600;cursor:pointer;user-select:none;transition:.15s;
  font-family:'Sarabun',sans-serif}
.unk-chip:hover{border-color:var(--gold)}
.unk-chip:focus-visible{outline:none;border-color:var(--gold);box-shadow:var(--ring)}
.unk-chip .bx{width:17px;height:17px;border:1.5px solid var(--line);border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:.68rem;color:transparent;
  transition:.15s;flex:none}
.unk-chip.on{border-color:var(--gold);background:#FDF8EE;color:var(--gold-d)}
.unk-chip.on .bx{background:var(--gold-d);border-color:var(--gold-d);color:#fff}

/* จังหวัด: ปุ่มขนาดพอดีคำ + ชีทค้นหา — ไม่ใช่ dropdown เต็มแถว และไม่มีค่าตั้งต้น */
.prov-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;height:48px;
  padding:0 16px;min-width:232px;max-width:100%;border:1.5px solid var(--line);border-radius:10px;background:#fff;
  font-family:'Sarabun',sans-serif;font-size:.94rem;color:var(--muted);cursor:pointer;transition:.15s}
.prov-btn:hover{border-color:var(--gold)}
.prov-btn.bad,.prov-btn[aria-invalid="true"]{border-color:var(--warn);box-shadow:0 0 0 3.5px rgba(176,106,79,.14)}
.prov-btn.set{border-color:rgba(65,119,92,.6);background:#F7FAF6;color:var(--ink);font-weight:600}
.prov-btn.off{opacity:.5;cursor:not-allowed}
.prov-sheet{display:none;background:#fff;border:1.5px solid var(--gold);border-radius:12px;padding:10px;margin-top:8px}
.prov-sheet.open{display:block}
.prov-sheet input{width:100%;height:42px;border:1.5px solid var(--line);border-radius:8px;padding:0 12px;
  font-family:'Sarabun',sans-serif;font-size:.9rem;outline:none;margin-bottom:8px}
.prov-sheet input:focus{border-color:var(--gold);box-shadow:var(--ring)}
.prov-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:6px;max-height:190px;overflow:auto}
.prov-list .pv{border:1px solid var(--line);border-radius:8px;padding:8px;font-size:.84rem;text-align:center;
  cursor:pointer;background:#fff;transition:.12s;font-family:'Sarabun',sans-serif;color:var(--ink)}
.prov-list .pv:hover{border-color:var(--gold);background:#FDF8EE}
.prov-list .pv.special{color:var(--gold-d);font-weight:600}
.prov-list .none{grid-column:1/-1;text-align:center;color:var(--muted);font-size:.85rem;padding:10px}

/* ชิปตัวเลือกทั่วไป (เพศ ฯลฯ) — ไม่มีค่าตั้งต้น ต้องแตะเอง */
.pick-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.pick{height:48px;padding:0 20px;border:1.5px solid var(--line);border-radius:999px;background:#fff;
  font-family:'Sarabun',sans-serif;font-size:.92rem;color:var(--ink);cursor:pointer;transition:.15s}
.pick:hover{border-color:var(--gold)}
.pick.on{border-color:var(--gold);background:#FDF8EE;color:var(--gold-d);font-weight:600}
.pick-row.need .pick{border-color:var(--warn)}

/* ป้ายบันทึกแล้ว */
/* ป้ายนี้อยู่ "ล่างสุดของหน้า จัดกลาง" (เจ้าของสั่ง 31/07) — เดิมอยู่ใต้แถบจังหวะ
   ไปเบียดหัวข้อขั้นตอนจนอ่านสับสนว่าเป็นสถานะของขั้นไหน */
.savebar{display:flex;align-items:center;justify-content:center;gap:7px;min-height:20px;
  font-size:.76rem;color:var(--muted);margin:26px 0 4px}
.savebar .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.savebar.saving .dot{background:var(--gold);animation:sbpulse .9s ease-in-out infinite}
.savebar.fail{color:var(--warn)}
.savebar.fail .dot{background:var(--warn)}
@keyframes sbpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ประกาย ✦ — ภาษารางวัลชุดเดียวกันทั้งสองเล่ม */
.sparkwrap{position:relative}
.spark{position:absolute;width:12px;height:12px;pointer-events:none;color:var(--gold);
  font-size:12px;line-height:1;animation:sparkfly .9s ease-out forwards}
@keyframes sparkfly{0%{opacity:0;transform:translate(0,0) scale(.3)}
  25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
.glow-btn{box-shadow:0 0 0 0 rgba(201,162,92,.55);animation:glowpulse 2.2s ease-in-out infinite}
@keyframes glowpulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,92,.45)}50%{box-shadow:0 0 0 9px rgba(201,162,92,0)}}

@media(max-width:420px){
  .dseg.dd,.dseg.mm,.dseg.hh,.dseg.mn{width:58px}
  .dseg.yy{width:84px}
  .prov-btn{min-width:100%}
  .unk-chip{padding:0 13px;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){
  .spark{display:none}
  .glow-btn{animation:none}
  .dseg,.unk-chip,.prov-btn,.pick{transition:none}
}