/* ═══ 🎨 ระบบสีทั้งเว็บ · ขั้นที่ 1 (เจ้าของสั่ง 25 ก.ย. 2569 "ใช้สีแบ่งโซน … ออกแบบทั้งเว็บ" → ภาพตัวอย่างรอบ 2 "ลดสี 30%" → "ยืนยันทั้งหมด")
   กติกาที่ตาเห็นแล้วรู้ทันที:
     น้ำเงิน = กดได้ (ปุ่ม/ลิงก์/เมนู) · เทาเข้ม = ตัวหนังสืออ่านอย่างเดียว · เขียว = เงินเข้า/รับ/สำเร็จ
     แดง = เงินออก/จ่าย/ค้าง · น้ำตาลทอง = รอดำเนินการ · ส้ม = วันนี้/ตำแหน่งที่อยู่ · ม่วง = เงินแอน · เทา = ข้อมูลประกอบ
     เส้นทึบเทาเข้ม (--rule) = คั่นระหว่างประเภท · แถบสีซ้ายหนาของกล่อง = โซนของกล่อง
   ⛔ ชื่อตัวแปรเดิม (--brand --ok --warn --bad --line --ink --muted) คงไว้ทั้งหมด · แค่ค่าอ่อนลง ~30%
      กฎเก่าที่อ้าง var(...) จึงเปลี่ยนสีตามทันทีทั้งเว็บ · กฎที่ฝังเลขสีตรง ๆ ค่อยไล่แก้ทีละหน้าในขั้นถัดไป
   ⛔ --mark* (ส้มอ่อนของตำแหน่งที่เลือก · เจ้าของสั่ง 6 ก.ย.) คงเดิม */
:root{--bg:#f3f6f9;--card:#fff;--line:#cfd8e2;--ink:#2a3542;--muted:#748494;
  --brand:#2f74c9;--brand-soft:#ecf3fc;--brand-ink:#1f5fa8;
  --ok:#2e9160;--ok-soft:#edf8f1;--ok-ink:#1f7a4c;
  --warn:#bf7c1f;--warn-soft:#fff7e6;--warn-ink:#9a6414;
  --bad:#cf4f46;--bad-soft:#fdefee;--bad-ink:#a8352d;
  --now:#f6a54d;--now-soft:#fff0dc;--now-ink:#a35b12;
  --ann:#9b6ef2;--ann-soft:#f4eeff;--ann-ink:#6d3fc7;
  --info:#8393a4;--info-soft:#f3f5f8;--info-ink:#56677a;
  --rule:#4d5f72;
  --mark:#ffe6c7;--markink:#9c5000;--markline:#f0bd80;--markbar:#f2a04c}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,"Sarabun","Helvetica Neue",sans-serif;background:var(--bg);color:var(--ink);font-size:12.8px;line-height:1.55}
/* แถบบนสุดมี 2 ชั้น — ชั้นบนคือเมนูใหญ่ประจำตัว ชั้นล่างคือโต๊ะที่กำลังเปิดและหน้าในโต๊ะนั้น */
/* ชั้นความสูงของแถบเมนู — ต้องอยู่เหนือทุกอย่างในหน้า (เจ้าของแจ้ง 7 ก.ย. 2569 "ตัวหนังสือซ้อนกัน")
 * เดิมตั้งไว้ 5 ซึ่งต่ำที่สุดในหน้า ทุกอย่างจึงวาดทับเมนูได้:
 *   ช่องที่ตรึงไว้ในตารางบันทึก 6-7 · กล่องสลับหน้าจอ 20 · ป๊อปอัปป้ายนับ 30 · กล่องยอดฝาก 40
 * อาการที่เจอ: เลื่อนหน้าลง แถวสีเหลืองสรุปยอดที่ตรึงอยู่ก้นตาราง
 * ลอยขึ้นมาทับแถบเมนูจนอ่านไม่ออก
 * (ห้ามพิมพ์ชื่อแถวนั้นเต็ม ๆ ในคอมเมนต์ เพราะมีเทสต์เก่าค้นคำนั้นในหน้าเว็บอยู่)
 * ตั้ง 50 = เหนือทุกอย่างข้างบน แต่ยังต่ำกว่าโหมดเต็มจอ (60-70)
 * และป๊อปอัปป้ายนับของชีตที่ 1 (9000) ซึ่งตั้งใจให้อยู่บนสุด
 */
.topnav{position:sticky;top:0;z-index:50;background:var(--card);border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(16,32,56,.06)}
nav.navmain{display:flex;gap:4px 9px;align-items:center;flex-wrap:wrap;padding:7px 14px;font-size:11.2px}
/* จอคอม: ปุ่ม ☰ ซ่อนไว้ · display:contents ทำให้ลิงก์ข้างในเรียงเหมือนไม่มีกล่องครอบ */
.navburger{display:none}
.secburger{display:none}
.mobilequick{display:none}
.navlinks{display:contents}
/* คำขยาย/คำเตือนต่อท้ายชื่อเมนู — จิ๋วและจาง อ่านคำหลักได้ก่อนเสมอ */
.nsub{font-style:normal;font-size:9px;font-weight:600;opacity:.65;margin-left:3px;letter-spacing:0;white-space:nowrap}
nav a{color:var(--brand);text-decoration:none;font-weight:600}
nav .spacer{flex:1}
nav a.sheetlink{background:#e6f4ea;border:1px solid #b7e1c4;color:#0a7d47;border-radius:8px;
  padding:4px 9px;font-size:10.4px;font-weight:700;white-space:nowrap}
nav a.sheetlink:hover{background:#0a7d47;color:#fff;border-color:#0a7d47}
nav button.pushsheet{background:#e6f4ea;border:1px solid #b7e1c4;color:#0a7d47;border-radius:8px;
  padding:4px 9px;font-size:10.4px;font-weight:700;white-space:nowrap;cursor:pointer;font-family:inherit}
nav button.pushsheet:hover{background:#0a7d47;color:#fff;border-color:#0a7d47}
nav button.pushsheet[disabled]{opacity:.55;cursor:default}
nav .who{color:var(--muted);font-size:10px}
/* ── 👀 แถบบอกว่ากำลังดูหน้าของใคร (เจ้าของสั่ง 22 ก.ย. 2569) ──
   สีแรงตั้งใจให้สะดุดตา · สวมบทค้างโดยไม่รู้ตัวคือเรื่องใหญ่ */
.actingbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff4e5;border-bottom:2px solid #f59e0b;padding:6px 12px;font-size:11.5px}
.actingbar .actwho{color:#92400e;font-weight:700}
.actingbar .actwho b{color:#7c2d12}
.actingbar .actnote{color:#b45309;font-size:10px}
.actingbar .spacer{flex:1 1 auto}
.actingbar form{margin:0}
.actingbar .actback{background:#b45309;color:#fff;border:0;border-radius:8px;
  padding:5px 13px;font-size:11.5px;font-weight:700;cursor:pointer;min-height:32px}
.actingbar .actback:hover{background:#92400e}
.actingbar .actswitch{background:#fff;color:#92400e;border:1px solid #f59e0b;border-radius:8px;
  padding:5px 11px;font-size:11.5px;font-weight:700;text-decoration:none;
  display:inline-flex;align-items:center;min-height:32px}
@media (max-width:820px){
  .actingbar{padding:6px 8px;gap:6px}
  .actingbar .actnote{display:none}
  .actingbar .actwho{flex:1 1 100%}
  .actingbar .actback,.actingbar .actswitch{min-height:36px;font-size:12px}
}
/* เจ้าของสั่ง 8 ก.ย. 2569 "จัดวางโซนนี้ใหม่ให้เหลือแค่หนึ่งบรรทัด"
   เดิมตัดขึ้นบรรทัดใหม่ได้ (flex-wrap:wrap) เมนูเลยล้นไปสี่บรรทัด กินที่จอไปเปล่า ๆ
   ตอนนี้บังคับให้อยู่บรรทัดเดียว ถ้ายาวเกินจอให้ปัดนิ้วเลื่อนซ้ายขวาแทน
   ทุกชิ้นห้ามหด (flex:0 0 auto) ไม่งั้นตัวหนังสือจะถูกบีบจนอ่านไม่ออก */
/* เจ้าของสั่ง 8 ก.ย. 2569 (แก้จากคำสั่งเดิมของวันเดียวกันที่ให้เหลือบรรทัดเดียว):
   "และต้องการแก้ให้เป็นสองบรรทัด"
   บรรทัดที่ 1 = สมุดโต๊ะ · ปุ่มโต๊ะ · ลูกศรเลื่อนวัน · วันที่
   บรรทัดที่ 2 = ในโต๊ะ N · เมนูทั้งหมด
   แต่ละบรรทัดห้ามตัดขึ้นบรรทัดใหม่เอง ถ้ายาวเกินจอให้ปัดเลื่อนซ้ายขวาในบรรทัดนั้น
   จึงได้สองบรรทัดเป๊ะเสมอ ไม่ว่าเมนูจะเยอะแค่ไหนหรือจอจะแคบแค่ไหน */
.navbar2{display:flex;gap:4px 6px;align-items:center;flex-wrap:wrap;
  padding:6px 14px;background:#f7f9fc;border-top:1px solid var(--line)}
.navbar2 > *{flex:0 0 auto}
.navbar2 > .navgroup{flex:1 0 100%}
.navbar2 .navscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.navbar2 .navscroll::-webkit-scrollbar{height:5px}
.navbar2 .navscroll::-webkit-scrollbar-thumb{background:#c9d4e0;border-radius:3px}
/* เจ้าของสั่ง 12 ก.ย. 2569 ให้เมนูโต๊ะบนจอคอมเหลือแถวเดียว
 * คงลำดับเดิมทั้งหมด และเลื่อนข้างได้เมื่อพื้นที่ไม่พอ จึงไม่ต้องซ่อนเมนูหรือบีบข้อความ */
@media(min-width:901px){
  .navbar2{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .navbar2 > .navgroup{flex:0 0 auto}
}
/* ปุ่มเลื่อนวันบนแถบบนสุด — เจ้าของสั่ง 6 ก.ย. 2569 ให้มีทุกหน้า จะได้ย้อนดูวันก่อนได้จากทุกที่ */
a.navstep,span.navstep{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  padding:0 7px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--brand);
  font-size:10.4px;font-weight:700;text-decoration:none;line-height:1}
a.navstep:hover{background:var(--brand);border-color:var(--brand);color:#fff}
span.navstep.off{color:#c3ccd8;background:#f4f6f9;cursor:not-allowed}
a.navstep.now{min-width:auto;font-size:10px;color:var(--ok);border-color:#bfe3cd;background:#eafaf1}
a.navstep.now:hover{background:var(--ok);border-color:var(--ok);color:#fff}
.navlabel{font-size:9.2px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase;white-space:nowrap}
.navsep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
/* ป้าย "ในโต๊ะ N" กับเมนูของโต๊ะ ต้องขึ้นบรรทัดใหม่ไปด้วยกัน ไม่ใช่ป้ายค้างอยู่คนละบรรทัด */
/* บรรทัดที่ 2 — เมนูในโต๊ะ · อยู่บรรทัดของตัวเอง เลื่อนซ้ายขวาได้ในบรรทัดนี้ */
.navgroup{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;min-width:0;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.navgroup > *{flex:0 0 auto}
.navgroup::-webkit-scrollbar{height:5px}
.navgroup::-webkit-scrollbar-thumb{background:#c9d4e0;border-radius:3px}
.navbooks{display:inline-flex;gap:8px;flex-wrap:nowrap;align-items:center}
.navbar2 a{color:var(--brand);text-decoration:none;font-weight:600}
/* ── ปุ่มโต๊ะ · หน้าตาเดียวกับแถบตัวกรองในหน้าตาราง (เจ้าของสั่ง 20 กันยายน 2569) ──
   "ต้องการให้เมนูโต๊ะ 1 โต๊ะ 2 มีรูปแบบรายการเหมือนเมนูตารางที่วงไว้
    มันทำให้ดูง่ายและเลื่อนไปมาง่ายดี"
   ⛔ ใช้ค่าชุดเดียวกับ .cusfilter button เป๊ะ ๆ (ขนาด 11.2px · ระยะ 8px 14px · มุม 9px)
      ถ้าแก้ที่นั่นต้องแก้ที่นี่ด้วย ไม่งั้นสองแถบหน้าตาไม่เหมือนกันอีก
   ⛔ ห้ามเปลี่ยนชื่อปุ่มหรือปลายทาง (เจ้าของสั่ง 20 ก.ย. 2569 "เรื่องชื่อปุ่มไม่ต้องแก้")
   ⛔ ของเดิมเป็นแท็บมุมบนโค้ง ตัวเล็ก 10.4px กดพลาดง่ายบนมือถือ */
a.navbook{background:#fff;border:1px solid var(--line);border-radius:9px;
  padding:8px 14px;font-size:11.2px;font-weight:600;white-space:nowrap;color:var(--ink)}
a.navbook:hover{background:#f4f7fb;border-color:var(--markbar);color:var(--markink)}
a.navbook.new{background:transparent;border-style:dashed;color:var(--muted)}
a.navbook.new:hover{background:#f4f7fb}
/* ⛔ ตัวที่กำลังเปิดต้องเป็นกล่องสีน้ำเงินเหมือนเมนูย่อย (กติกาเดิม มีเทสต์ล็อกไว้)
   เอามาแค่ "รูปทรงปุ่ม" จากแถบตัวกรอง ไม่ได้เอาสีมาด้วย */
a.navbook.booknow{background:var(--brand);color:#fff;border-color:var(--brand)}
a.navbook.booknow:hover{background:var(--brand);color:#fff}
.navsections{display:inline-flex;gap:2px;flex-wrap:nowrap}
/* ป้ายวันที่บนแถบเมนู — เจ้าของสั่ง 4 ก.ย. 69 ให้เซลล์รู้ตลอดว่ากำลังแก้ของวันไหน
   วันย้อนหลังต้องสีส้มเตือน จะได้ไม่เผลอกรอกผิดวัน */
/* วันที่เป็นตัวหนังสือสีแดง (เจ้าของสั่ง 8 ก.ย. 2569) — เดิมเป็นสีน้ำเงินกลืนกับปุ่มอื่น
   ทำให้เห็นชัดว่ากำลังเปิดวันไหนอยู่ เพราะเป็นตัวเลขที่ต้องดูบ่อยที่สุดบนแถบนี้ */
.navdate{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;
  background:#fdecea;color:#b3261e;border:1px solid #f2c4bf;font-weight:800;font-size:10px;white-space:nowrap}
.navdate.back{background:#fff4e0;color:var(--warn);border-color:#f0d5a8}
.navdate.asof{background:#eef1f5;color:var(--muted);border-color:#dde3ea;font-weight:600}
/* ═══ สมุดกรุงเทพ — หน้าตาตามต้นแบบที่เจ้าของทำไว้ (6 ก.ย. 2569) ═══
   หัวตารางเป็นแถบสีจับกลุ่ม · แต่ละช่องแบ่งซ้าย(ตัวเลข) ขวา(ชื่อ) มีเส้นคั่น
   ช่องรายจ่ายมีเครื่องหมายลบล็อกไว้หน้าช่อง */
table.bkbook{border-collapse:separate;border-spacing:0;width:100%;min-width:520px;font-size:10px}
/* ย่อลงอีก (เจ้าของสั่ง 9 ก.ย. 2569) — ช่องกรอกในสมุดห้ามใช้ขนาดกลางของ input (16px / padding 7px) */
table.bkbook .bkcell input,table.bkbook .bkcell input.amt,table.bkbook .bkcell input.nm{font-size:10px;padding:0 5px;height:22px;line-height:22px;border:0;border-radius:0;box-shadow:none}
table.bkbook td,table.bkbook th{padding:1px 3px}
table.bkbook td.bkday{font-size:10px;line-height:1.05;padding:2px 4px;white-space:nowrap}
table.bkbook td.bkday i{font-size:8.5px;display:block}
table.bkbook button.bkplus.inday{display:block;margin:2px auto 0;padding:0 5px;font-size:9px;line-height:16px;border:1px dashed #b7c3d4;border-radius:5px;background:#fff;color:#4a5b73}
table.bkbook button.bkplus.inday:hover{background:#eef3ff}
table.bkbook button.bkclearday.inday{display:block;margin:2px auto 0;padding:0 5px;font-size:9px;line-height:16px;border:1px dashed #e3b1ab;border-radius:5px;background:#fff;color:#a33}
table.bkbook button.bkclearday.inday:hover{background:#fdeeec}
.bkautosave{font-size:11px}
tbody.bkcarry td{background:#f3f6fb;font-size:10.5px;border-bottom:2px solid #c9d6ea}
tbody.bkcarry td.bkday{color:#173f7a;font-weight:700}
.bksummary{margin-top:14px;padding:10px 12px;border:1px solid #c9d6ea;border-radius:8px;background:#f7f9fe}
.bksummary h3{margin:0 0 6px;font-size:13px}
.bksummary table.pklist td{font-size:12px}
table.bkbook th{background:#f7f9fb;font-size:9.6px;color:var(--muted);font-weight:600;
  text-align:center;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
table.bkbook th.grp{font-size:11.5px;font-weight:800;letter-spacing:.02em}
table.bkbook th.g-in{background:#eaf7f0;color:#0b7a4b}
table.bkbook th.g-out{background:#fdeeec;color:#c0392b}
table.bkbook th.g-add{background:#eaf7f0;color:#0b7a4b}
table.bkbook td{border-bottom:1px solid #f0f3f6;padding:0;height:32px}
table.bkbook tr.istoday td{background:#fffbe9}
table.bkbook tr.sun td{background:#fdfaf4}
table.bkbook td.bkday{width:52px;text-align:center;font-weight:600;color:var(--muted);
  font-size:11px;background:#fafbfc;vertical-align:middle}
table.bkbook tr.sun td.bkday{background:#f8efdf;color:#8a5300}
table.bkbook td.bkday i{display:block;font-style:normal;font-size:8.5px;font-weight:700;color:#7c8798;line-height:1.1}
table.bkbook td.bksep{width:1px;padding:0;background:var(--line)}
/* สมุดทั้งเดือนกรอกได้ในหน้าเดียว (เจ้าของสั่ง 8 ก.ย. 2569)
   หนึ่งวัน = หนึ่ง tbody · มีเส้นหนาคั่นระหว่างวัน จะได้ไล่สายตาเหมือนสมุดจริง
   ไม่ใช้ rowspan เพราะเวลากดเพิ่มบรรทัดต้องไปไล่แก้ตัวเลข rowspan ทุกครั้ง พลาดง่าย
   ใช้วิธีเว้นช่องวันให้ว่างในบรรทัดที่ 2 เป็นต้นไปแทน ได้หน้าตาเหมือนกัน */
table.bkbook.monthform tbody.bkdayblock{border-top:2px solid #d7dee7}
table.bkbook.monthform tbody.bkdayblock+tbody.bkdayblock td{border-top:2px solid #d7dee7}
table.bkbook.monthform tbody.istoday td.bkday{background:#ffe9b8;color:#8a5300}
table.bkbook.monthform tbody.sun td.bkday{background:#f8efdf;color:#8a5300}
table.bkbook.monthform tbody.istoday td{background:#fffbe9}
table.bkbook.monthform tr.bkaddrow td{height:auto;padding:2px 0 5px;border-bottom:none}
table.bkbook.monthform button.bkplus{font:inherit;font-size:9px;line-height:1;padding:2px 8px;margin-left:6px;
  border:1px dashed #c8ced6;border-radius:999px;background:#fff;color:#5b6470;cursor:pointer}
table.bkbook.monthform button.bkplus:hover{background:#eef3ff;border-color:#8fa8dd;border-style:solid;color:#1f2933}
/* กากบาทลบบรรทัด (เจ้าของสั่ง 8 ก.ย. 2569) — ลบแล้วขีดฆ่าไว้ กดซ้ำเอากลับได้ ยังไม่หายจนกว่าจะกดบันทึก */
/* ปุ่มกากบาทต้องเห็นเสมอ แม้ตารางกว้างกว่าจอ (เจ้าของแจ้ง 9 ก.ย. 2569 ว่าล้นหน้าต่าง) */
/* ปุ่มกากบาทต้องเห็นเสมอ แม้ตารางกว้างกว่าจอ (เจ้าของแจ้ง 9 ก.ย. 2569 ว่าล้นหน้าต่าง) */
table.bkbook th.bkx,table.bkbook td.bkx{width:26px;min-width:26px;padding:0;text-align:center;background:#fafbfc;
  position:sticky;right:0;z-index:2;box-shadow:-3px 0 4px -3px rgba(0,0,0,.15)}
table.bkbook button.bkdel{font:inherit;font-size:11px;line-height:1;padding:3px 5px;border:1px solid var(--line);
  border-radius:5px;background:#fff;color:#9aa4b2;cursor:pointer}
table.bkbook button.bkdel:hover{background:#fdeeec;border-color:#e39a92;color:#c0392b}
table.bkbook button.bkdel.arm{background:#c0392b;border-color:#c0392b;color:#fff;font-weight:800;padding:3px 6px}
/* แถบเอากลับ — โผล่เฉพาะตอนมีของที่เพิ่งลบ */
.bktrash{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;padding:8px 10px;
  border:1px solid #f0d9a8;background:#fff8ea;border-radius:8px;font-size:12px;color:#8a5a00}
.bktrash .tzitem{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:3px 8px}
.bktrash button.tzback{font:inherit;font-size:11px;padding:2px 8px;border:1px solid #7cc9a3;border-radius:5px;
  background:#eaf7f0;color:#0b7a4b;cursor:pointer;font-weight:700}
.bktrash button.tzback:hover{background:#d8f0e3}
table.bkbook.monthform th.g-net i{display:block;font-style:normal;font-size:8.5px;font-weight:600;opacity:.75}
/* แถบเตือนยอดทุนค้าง — โผล่เฉพาะเดือนที่ยังมีเงินก้อนนี้อยู่ (เจ้าของสั่ง 8 ก.ย. 2569) */
.capleft{margin:0 0 10px;padding:9px 12px;border-radius:9px;background:#fff6e5;border:1px solid #f0d9a8;
  color:#8a5a00;font-size:10.5px;line-height:1.6}
.capleft b{display:block;font-size:11.5px;margin-bottom:2px}
.capleft span{display:block}
.bkcell{display:flex;align-items:center;height:22px}
.bkcell .mn{flex:0 0 auto;padding:0 1px 0 8px;font-weight:800;color:#c0392b;user-select:none}
.bkcell .mn.plus{color:#0b7a4b}
/* ตารางเงินอยู่ที่ใครบ้าง แยกสองฝั่งตามโต๊ะ (เจ้าของสั่ง 7 ก.ย. 2569) */
table.twoside th.g-cut{background:#eaf6ef;color:#0b6b42;border-bottom:2px solid #b7dcc7}
table.twoside th.g-raw{background:#fdf3e7;color:#94591a;border-bottom:2px solid #edd3ad}
table.twoside th.g-all{background:#eef2fb;color:#173f7a;border-bottom:2px solid #c3d2ee}
table.twoside td.c-cut{background:#fafdfb}
table.twoside td.c-raw{background:#fffcf7}
table.twoside td.c-all{background:#f8fafe;border-left:2px solid #dbe4f5}
table.twoside th.g-raw,table.twoside td.c-raw{border-left:2px solid #f0dfc4}
table.twoside th.g-raw+th.g-all,table.twoside td.c-raw+td.c-all{border-left:2px solid #dbe4f5}
i.bkhint{display:block;font-style:normal;font-size:10px;color:var(--muted);margin-top:1px}
.bkcell input.amt{flex:0 0 68px;width:68px;border:0;background:transparent;text-align:right;font-size:10px;
  font-variant-numeric:tabular-nums;font-weight:600;padding:0 6px;outline:0;font-family:inherit;font-size:11.5px}
.bkcell .vs{flex:0 0 1px;align-self:stretch;background:var(--line)}
.bkcell input.nm{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:0 8px;outline:0;
  color:#41506a;font-family:inherit;font-size:11.5px}
.bkcell input:focus{background:#eaf2fd;border-radius:4px}
/* รายรับเขียว รายจ่ายแดง · "ทุน" เป็นเงินเข้าจึงเขียวเหมือนกัน */
td.c-in .bkcell input.amt{color:#0b7a4b;font-weight:700} td.c-in{background:#f4fbf7}
td.c-add .bkcell input.amt{color:#0b7a4b;font-weight:700} td.c-add{background:#f4fbf7}
td.c-out .bkcell input.amt{color:#c0392b;font-weight:700} td.c-out{background:#fdf4f3}
td.c-in,td.c-add{box-shadow:inset 3px 0 0 #7cc9a3}
td.c-out{box-shadow:inset 3px 0 0 #e39a92}
.bkcell .vs{flex:0 0 2px;background:#d7dee7}
td.c-in .bkcell .vs,td.c-add .bkcell .vs{background:#b6e0cb}
td.c-out .bkcell .vs{background:#f0c4bd}
/* ช่องรวมของแต่ละวัน — ครอบทุกบรรทัดของวันนั้น โชว์ครั้งเดียว (เจ้าของสั่ง 7 ก.ย. 2569) */
table.bkbook th.g-net{background:#eef2fb;color:#173f7a;vertical-align:middle}
table.bkbook td.c-net{background:#f7f9fe;text-align:right;padding:0 10px;white-space:nowrap;vertical-align:middle;font-size:13px}
table.bkbook td.c-net .np{color:#0b7a4b} table.bkbook td.c-net .nx{color:#c0392b}
/* กล่องกรอกทีละวัน — ช่องเดียวพิมพ์ทั้งจำนวนและชื่อ (เจ้าของสั่ง 7 ก.ย. 2569) */
table.dayform td{height:36px}
table.dayform .bkcell input.amt{flex:0 0 96px;width:96px}
/* ตารางสมุดแบบดูอย่างเดียว */
table.bkbook td.ro{padding:4px 8px;white-space:nowrap;font-size:12px;line-height:22px;vertical-align:middle}
table.bkbook td.ro .ln{display:block}
table.bkbook td.ro .ln+.ln{border-top:1px dashed var(--line);margin-top:2px;padding-top:2px}
table.bkbook td.ro .amt{font-weight:700;display:inline-block;min-width:64px;text-align:right}
table.bkbook td.ro .vs{display:inline-block;width:1px;height:11px;background:var(--line);margin:0 7px;vertical-align:middle}
table.bkbook td.c-in.ro .amt,table.bkbook td.c-add.ro .amt{color:#0b7a4b}
table.bkbook td.c-out.ro .amt{color:#c0392b}
/* สไตล์ของกล่อง "รายการทั้งเดือน" (.mcols .mcol .mlist .mtot) ถูกลบพร้อมกล่องนั้น
   ตามคำสั่งเจ้าของ 8 ก.ย. 2569 · ไม่มีที่ไหนเรียกใช้แล้ว เก็บไว้จะกลายเป็นโค้ดตายที่ทำให้คนอ่านสับสน */
table.bkbook td.bkday a{color:inherit;text-decoration:none;display:block}
table.bkbook td.bkday a:hover{text-decoration:underline}
/* หน้าสรุปกระเป๋าเงิน — เข้าออกทางไหนบ้าง แยกตามโต๊ะ (เจ้าของสั่ง 8 ก.ย. 2569) */
.pkcols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.pkcols{grid-template-columns:1fr}}
.pkcol h3{margin:0 0 6px;font-size:13px}
table.pklist{width:100%;border-collapse:collapse}
table.pklist td{padding:5px 4px;font-size:12px;border-bottom:1px solid var(--line)}
table.pklist td.num{text-align:right;white-space:nowrap;font-weight:700}
table.pklist td.num.mo{color:#c0392b} table.pklist td.num.mi{color:#0b7a4b}
table.pklist tr.pktot td{border-top:2px solid var(--line);background:#f7f9fb}
table.pklist tr.pkav td{background:#eef2fb;border-bottom:0;font-size:13px}
table.pklist i.muted{font-style:normal;font-size:10px}
.pkbook{margin:8px 0 0;font-size:11.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.pkbook span{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 8px}
.pkbook i.muted{flex:1 1 100%;font-style:normal}
table.bkbook tfoot td{background:#eef3f8;font-weight:700;padding:9px;border-top:2px solid var(--line);
  font-variant-numeric:tabular-nums;text-align:right;height:auto}
table.bkbook tfoot td.lb{text-align:center;font-size:11px;color:var(--muted)}
.bkaddbtn{width:22px;height:22px;line-height:20px;padding:0;border-radius:6px;border:1px solid var(--line);
  background:#fff;color:var(--primary);font-weight:700;cursor:pointer}
.bkaddbtn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
.cutnote{border-left:4px solid var(--ok);background:#f2fbf6}
.cutnote b{color:var(--ok)}
a.navsec{font-size:10.4px;font-weight:700;padding:4px 9px;border-radius:8px;color:var(--brand);border:1px solid transparent;white-space:nowrap}
a.navsec:hover{background:#fff2e2;border-color:#f3d6b3}
a.navsec.navnow{background:var(--brand);color:#fff;border-color:var(--brand)}
nav.navmain a{padding:4px 8px;border-radius:8px;white-space:nowrap}
nav.navmain a:hover{background:#fff2e2}
nav a.navnow{background:var(--brand);color:#fff}
nav a.navnow:hover{background:#084b8f;color:#fff}
.navbadge{display:inline-block;min-width:16px;padding:0 4px;margin-left:4px;border-radius:8px;
  background:var(--bad);color:#fff;font-size:9px;font-weight:700;line-height:16px;text-align:center;vertical-align:middle}
.navnow .navbadge{background:#fff;color:var(--bad)}
.navform{display:inline-flex;margin:0}
.navback{cursor:pointer;font-family:inherit;font-size:11.2px;font-weight:700;color:var(--brand);
  background:#fff;border:1px solid #a9c5e3;border-radius:8px;padding:5px 11px;white-space:nowrap}
.navback:hover{background:#eef4fc;border-color:var(--brand)}
/* ⛔ เจ้าของแจ้ง 19 ก.ย. 2569 ว่าแผงลอย "สลับหน้าจอ" กดไม่ได้บนมือถือและแท็บเล็ต (3 รอบ)
 *    เลิกใช้แผงลอยทั้งหมด ใช้หน้าจริง /switch ทุกจอ · หน้าจริงไม่มีทางถูกตัดหรือหาไม่เจอ
 *    ⛔ ห้ามเอา details.switchfold กลับมาใส่ในแถบเมนูอีก */
.switchgo{display:inline-flex;align-items:center}
a.switchgo{padding:4px 10px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  font-size:11.2px;font-weight:700;white-space:nowrap}
/* ปุ่มใหญ่ในหน้าสลับหน้าจอ — นิ้วกดง่าย ไม่มีทางกดพลาด */
.moneyfold>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:4px;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;min-block-size:32px;
  border:1px solid var(--line);border-radius:8px;padding:3px 9px;background:#fff;color:var(--brand);
  font-size:10.4px;font-weight:700;white-space:nowrap}
.moneyfold>summary::-webkit-details-marker{display:none}
.moneyfold[open]>summary{background:var(--brand);color:#fff;border-color:var(--brand)}
.switchrow{margin:0 0 6px}
.switchbig{display:flex;align-items:center;justify-content:space-between;width:100%;min-block-size:42px;
  padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);
  color:var(--brand);font-weight:700;font-size:13px;text-align:left}
.switchbig:hover{background:#eef4fc;border-color:var(--brand)}
.switchbig.now{background:var(--brand);border-color:var(--brand);color:#fff}
.switchbig i{font-style:normal;font-size:10px;font-weight:600;opacity:.8}
main{max-width:1000px;margin:0 auto;padding:11px 12px}
/* เจ้าของสั่ง 8 ก.ย. 2569 "จัดวางใหม่ ย่อรูปแบบให้เล็กลงตามความเหมาะสม ทุกหน้า ทั้งคอมและมือถือ"
   ย่อหัวข้อกับการ์ดลงพอประมาณ ให้เห็นเนื้อหาต่อหนึ่งหน้าจอมากขึ้น
   ไม่ย่อจนอ่านยาก — ตัวหนังสือเนื้อหายังเท่าเดิม ย่อเฉพาะหัวข้อและช่องไฟ */
h1{font-size:15px;margin:9px 0 5px}
h2{font-size:12.4px;margin:12px 0 6px;padding-bottom:4px;border-bottom:2px solid var(--rule)}

/* ── แต่งสีแยกโซนทั้งเว็บ (เจ้าของสั่ง 6 ก.ย. 2569) ──────────────────────────
 * ทุกหัวข้อ h2 ที่อยู่ระดับบนของหน้า กลายเป็นแถบสีทึบเต็มบรรทัด
 * และเนื้อหาที่ตามมาจนถึงหัวข้อถัดไป ได้พื้นสีอ่อนของโทนเดียวกัน
 * สีวนไปเรื่อย ๆ ฟ้า → เขียว → ส้ม → ชมพู → ม่วง → เทา จะได้แยกส่วนออกจากกันชัด
 * ทำด้วย CSS ล้วน ไม่ต้องแก้โครงหน้าไหนเลย ทุกหน้าในเว็บจึงได้เหมือนกันหมด
 */
main > h2{color:#fff;padding:10px 15px;border-radius:12px;margin:22px 0 0;font-weight:800;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;box-shadow:0 2px 0 rgba(16,26,38,.10)}
main > h2 .muted,main > h2 span.muted{color:rgba(255,255,255,.85);font-weight:500}
main > h2 a{color:#fff;text-decoration:underline}
main > h2:nth-of-type(6n+1){background:linear-gradient(135deg,#12508f,#2273c4)}
main > h2:nth-of-type(6n+2){background:linear-gradient(135deg,#0a7d47,#13a35d)}
main > h2:nth-of-type(6n+3){background:linear-gradient(135deg,#e07b12,#f0952f)}
main > h2:nth-of-type(6n+4){background:linear-gradient(135deg,#c04a76,#d96a94)}
main > h2:nth-of-type(6n+5){background:linear-gradient(135deg,#6b3fa0,#8a5bc4)}
main > h2:nth-of-type(6n+6){background:linear-gradient(135deg,#4d688a,#6b87a6)}
/* กล่องที่ตามหลังหัวข้อ ได้พื้นสีอ่อนของโทนเดียวกัน */
main > h2:nth-of-type(6n+1) ~ *{--zbg:#d3e6fb}
main > h2:nth-of-type(6n+2) ~ *{--zbg:#cdf3de}
main > h2:nth-of-type(6n+3) ~ *{--zbg:#ffe6c2}
main > h2:nth-of-type(6n+4) ~ *{--zbg:#fcd9e6}
main > h2:nth-of-type(6n+5) ~ *{--zbg:#e6dcf5}
main > h2:nth-of-type(6n+6) ~ *{--zbg:#dfe8f1}
main > h2 + .card,main > h2 + .wrap,main > h2 + .grid,main > h2 + form,
main > h2 + details,main > h2 + p,main > h2 + div{background:var(--zbg,#f4f7fb);
  border-radius:0 0 12px 12px;padding:12px 14px;margin-top:0}
main > h2 + .grid{display:grid}
main > h2 + * .card,main > h2 + * table{background:#fff}
main > h2 + p.muted{font-size:10.4px}
/* หัวข้อที่ตั้งใจทำสีเองไว้แล้ว ให้ใช้ของเดิม ไม่ต้องวนสี */
main > h2.zone-head{background:none}
main > h2.ztitle-blue{background:linear-gradient(135deg,#12508f,#2273c4)}
main > h2.ztitle-grey{background:linear-gradient(135deg,#4d688a,#6b87a6)}
/* ป้ายลำดับเรื่องบนหัวข้อระดับบนสุด — ใช้บนหน้ารวม "งานประจำวัน"
 * ⛔ หัวข้อของหน้ารวมต้องเป็นลูกตรงของ main เท่านั้น ห้ามเอา <section> ไปครอบ
 *    เพราะระบบแถบสีโซนของทั้งเว็บ (main > h2 และ main > h2 + .card) จับได้เฉพาะลูกตรง
 *    ถ้าครอบ จะได้หัวข้อสีเทาล้วนและการ์ดสีขาวโล่ง ผิดจากหน้าอื่นทั้งเว็บ
 *    (เจ้าของแจ้ง 18 ก.ย. 2569 "ต้องการให้การ์ดมีลักษณะหน้าตาแบบนี้") */
main > h2 .ztag{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.45);
  color:#fff;font-size:9.6px;font-weight:800;padding:1px 6px;border-radius:6px;margin-right:6px}
/* แถบกระโดดโซน — หน้ารวมยาว ต้องมีทางลัด · จอแคบให้ปัดเลื่อนข้าง ไม่ตัดบรรทัด */
.zonejump{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:7px 2px;margin:8px 0 2px;scrollbar-width:thin}
.zonejump a{flex:0 0 auto;background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px;font-size:11px;font-weight:700;color:var(--brand);text-decoration:none;white-space:nowrap}
.zonejump a:hover{background:var(--brand);color:#fff;border-color:var(--brand)}
/* กล่องหมวดบนหน้าสรุปยอด — กดหัวข้อแล้วค่อยกางตาราง (เจ้าของสั่ง 19 ก.ย. 2569)
 * หัวข้อต้องดูออกว่ากดได้ และเห็นยอดสรุปตั้งแต่ยังไม่กาง */
details.summaryfold{padding:0;margin-bottom:8px}
details.summaryfold > summary{padding:10px 13px;border-radius:10px;background:#f7f9fc;
  font-size:12.4px;border:1px solid var(--line)}
details.summaryfold[open] > summary{border-radius:10px 10px 0 0;background:#eef3fa}
details.summaryfold > summary:hover{background:#e6eefa}
details.summaryfold > summary .muted{font-size:10.8px}
details.summaryfold > .wrap,details.summaryfold > p{margin:0;padding:10px 13px}
/* สมุดบัญชีกรุงเทพทั้งเดือน — พับเก็บได้ (เจ้าของสั่ง 19 ก.ย. 2569)
 * ตารางยาวกว่า 2,400 พิกเซล ถ้าไม่พับจะดันของที่เหลือตกจอไปหมด */
details.bookfold > summary{font-size:12.8px;font-weight:700;padding:4px 0 8px}
details.bookfold[open] > summary{border-bottom:1px solid var(--line);margin-bottom:8px}

/* หน้าที่ใช้ h3 หรือการ์ดล้วน ๆ ก็ต้องแยกโซนได้เหมือนกัน
 * ให้ h3 ระดับบนเป็นแถบสีเช่นกัน และการ์ดทุกใบมีขอบสีข้างซ้ายวนสี
 */
main > h3{color:#fff;padding:8px 13px;border-radius:10px;margin:18px 0 8px;font-size:12.4px;font-weight:800;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
main > h3 .muted{color:rgba(255,255,255,.85);font-weight:500;font-size:10.4px}
main > h3:nth-of-type(6n+1){background:linear-gradient(135deg,#12508f,#2273c4)}
main > h3:nth-of-type(6n+2){background:linear-gradient(135deg,#0a7d47,#13a35d)}
main > h3:nth-of-type(6n+3){background:linear-gradient(135deg,#e07b12,#f0952f)}
main > h3:nth-of-type(6n+4){background:linear-gradient(135deg,#c04a76,#d96a94)}
main > h3:nth-of-type(6n+5){background:linear-gradient(135deg,#6b3fa0,#8a5bc4)}
main > h3:nth-of-type(6n+6){background:linear-gradient(135deg,#4d688a,#6b87a6)}
main > h3 .sno,main > h3 .ztag{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.45);color:#fff}

/* การ์ดทุกใบมีขอบสีข้างซ้าย วนสีไปเรื่อย ๆ แยกกล่องออกจากกันทุกหน้า */
main > .card:nth-of-type(6n+1){border-left:6px solid #2273c4}
main > .card:nth-of-type(6n+2){border-left:6px solid #13a35d}
main > .card:nth-of-type(6n+3){border-left:6px solid #f0952f}
main > .card:nth-of-type(6n+4){border-left:6px solid #d96a94}
main > .card:nth-of-type(6n+5){border-left:6px solid #8a5bc4}
main > .card:nth-of-type(6n+6){border-left:6px solid #6b87a6}
/* การ์ดตัวเลขในแถว grid ให้มีขีดสีบนหัวแทน จะได้ไม่รกเวลาเรียงกันหลายใบ */
main > .grid > .stat{border-top:4px solid #cfdae6}
main > .grid > .stat:nth-child(6n+1){border-top-color:#2273c4}
main > .grid > .stat:nth-child(6n+2){border-top-color:#13a35d}
main > .grid > .stat:nth-child(6n+3){border-top-color:#f0952f}
main > .grid > .stat:nth-child(6n+4){border-top-color:#d96a94}
main > .grid > .stat:nth-child(6n+5){border-top-color:#8a5bc4}
main > .grid > .stat:nth-child(6n+6){border-top-color:#6b87a6}
.card{background:var(--card);border:1.5px solid var(--line);border-left:5px solid var(--info);border-radius:10px;padding:9px 10px;margin-bottom:8px}
/* โซนของกล่อง (ขั้นที่ 3 จะติดคลาสให้ทีละหน้า) · เขียว=เงินเข้า แดง=เงินออก ทอง=รอ ม่วง=แอน น้ำเงิน=หลัก */
.card.z-in{border-left-color:var(--ok)}.card.z-out{border-left-color:var(--bad)}.card.z-wait{border-left-color:var(--warn)}
.card.z-ann{border-left-color:var(--ann)}.card.z-brand{border-left-color:var(--brand)}.card.z-now{border-left-color:var(--now)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:9px 10px}
.stat b{display:block;font-size:17.6px;margin-top:2px;font-variant-numeric:tabular-nums}
.stat span{color:var(--muted);font-size:9px;line-height:1.4}
/* การ์ดยอดเก็บ — อ่านเป็นสมการเดียว: สะสมยกมา + เดือนนี้ = เก็บทั้งหมด (เจ้าของสั่ง 4 ก.ย. 2569) */
.stat.sumcard{grid-column:span 3}
@media(max-width:900px){.stat.sumcard{grid-column:span 2}}
@media(max-width:620px){.stat.sumcard{grid-column:span 1}}
.sumhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* ตารางห้าช่อง: กล่อง + กล่อง = กล่อง — บังคับให้อ่านเป็นบรรทัดเดียวเสมอ ไม่ตกบรรทัด */
/* ⛔ กฎนี้เป็นของกล่องสรุปที่เป็น <div> เท่านั้น ห้ามปล่อยให้โดนแถวตาราง <tr class="sumrow">
   เจ้าของเจอเอง 20 กันยายน 2569 — แถว "รวมทุกคน" ในการ์ดเงินในมือเซลล์
   ตัวเลขไม่ตรงคอลัมน์ข้างบน เพราะ display:grid ทำให้แถวเลิกเป็นแถวตาราง
   แล้วไปจัดช่องใหม่เป็น 5 ช่องของตัวเอง · กระทบทุกตารางที่มีแถวรวมทั้งเว็บ 17 จุด */
div.sumrow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:8px;margin-top:8px}
.sumbox{min-width:0;background:#f7f9fc;border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.sumbox .lab{display:block;color:var(--muted);font-size:9.6px;font-weight:700;letter-spacing:.01em}
/* เจ้าของสั่ง 8 ก.ย. 2569 ให้ตรวจจอมือถือกับแท็บเล็ต — พบว่าบนแท็บเล็ต 768px
   เลข 136,777 ถูกตัดเป็น "136,77" กับ "7" คนละบรรทัด เพราะ overflow-wrap:anywhere
   ยอมหักกลางตัวเลขได้ · เงินอ่านผิดได้ทันทีถ้าตาไม่ทันเห็นบรรทัดล่าง
   จึงห้ามหักเด็ดขาด แล้วย่อตัวหนังสือแทนในช่วงจอกลาง */
.sumbox .val{display:block;font-size:16px;font-variant-numeric:tabular-nums;line-height:1.25;margin-top:1px;
  overflow-wrap:normal;word-break:keep-all;white-space:nowrap}
.sumbox .sub{display:block;color:var(--muted);font-size:9.2px;line-height:1.4;margin-top:3px}
.sumop{flex:0 0 auto;align-self:center;color:var(--muted);font-size:17.6px;font-weight:700;padding:0 2px}
.sumbox.result{background:#eef7f1;border-color:#bfe0cd}
.sumbox.result .val{font-size:19.2px;font-weight:700;color:var(--ok)}
.sumbox.result.neg .val{color:var(--bad)}
.sumbox .val.neg{color:var(--bad)}
/* จอแท็บเล็ตและโน้ตบุ๊กจอเล็ก กล่องแคบลงแต่ตัวเลขเท่าเดิม จึงย่อลงพอให้อยู่บรรทัดเดียว
   จอมือถือมีกฎของตัวเองอยู่ใต้ลงไป (max-width:640px) ซึ่งย่อกว่านี้อีก ไม่ต้องแก้ */
@media(max-width:900px){
  .sumbox .val{font-size:13.5px}
  .sumbox.result .val{font-size:15px}
}
.sumfoot{display:block;margin-top:8px;font-size:10px}
@media(max-width:620px){
  div.sumrow{grid-template-columns:1fr}
  .sumop{justify-self:start;padding:0 0 0 8px;font-size:14.4px}
}
.moneytable td{vertical-align:top}
/* เจ้าของสั่ง 6 ก.ย. 2569 — ชื่ออยู่บน รหัสอยู่ล่างตัวจิ๋ว และล็อกคอลัมน์นี้ไว้
   เลื่อนตารางไปทางขวาแค่ไหน ก็ยังรู้ว่ากำลังดูของใคร */
.moneytable th.mwho,.moneytable td.mwho{position:sticky;left:0;z-index:2;background:var(--card);
  min-width:104px;font-weight:700;box-shadow:1px 0 0 var(--line)}
.moneytable td.mwho i.mcd{display:block;font-style:normal;font-size:9px;font-weight:600;
  color:var(--muted);letter-spacing:.02em;margin-top:1px}
.moneytable tr.sumrow td.mwho{background:#eef2f7}
.moneyform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0}
.moneyform input{width:120px;display:inline-block;padding:6px 8px;font-size:10.4px}
.moneybtns{display:flex;gap:6px}
.moneyform button{white-space:nowrap}
.moneyform button.plus{border-color:var(--ok);color:var(--ok)}
.moneyform button.minus{border-color:var(--bad);color:var(--bad)}
.moneyform button[disabled]{opacity:.4;cursor:not-allowed}
.moneyhint{color:var(--muted);font-size:9.2px;margin-top:4px}
.movefold summary{cursor:pointer;color:var(--muted);font-size:9.2px;margin-top:4px}
.statusform{display:flex;flex-direction:column;gap:6px;margin-top:6px;padding:8px;border:1px solid var(--line);border-radius:8px;background:#f7f8fa}
.statusbtns{display:flex;gap:6px}
.movelist{margin-top:4px;font-size:9.6px}
.movelist td{padding:2px 8px 2px 0;border:0}
.sumrow td{border-top:2px solid var(--ink)}
#adjust{scroll-margin-top:70px}
/* ป๊อปอัพปรับยอด — กางอยู่ใต้แถวลูกค้าที่กด ไม่ต้องเปลี่ยนหน้า */
.adjpoprow > td{background:#f0f6ff;border-top:2px solid var(--brand);padding:12px}
.adjpop{max-width:900px}
.adjpop_head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.adjpop_head .spacer{flex:1}
.adjpop_grid{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.adjpop_grid label{display:block;font-size:10px;color:var(--muted)}
/* กฎ display:block ด้านบนแรงกว่า [hidden] ของเบราว์เซอร์ ต้องเขียนทับให้ซ่อนได้จริง */
.adjpop_grid label[hidden]{display:none}
.adjpop_grid .f1{flex:3;min-width:250px}
.adjpop_grid .f2{flex:1;min-width:150px}
.adjpop_grid .f3{flex:0 0 auto}
.adjpop_grid select,.adjpop_grid input{width:100%}
.stat i{display:block;font-style:normal;color:var(--muted);font-size:9px;line-height:1.4;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:6px 5px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.wrap{overflow-x:auto}
label{display:block;font-size:9.2px;font-weight:700;letter-spacing:.01em;color:var(--muted);margin:5px 0 2px}
input,select,textarea{width:100%;padding:7px 8px;border:1px solid var(--line);border-radius:8px;font-size:16px;font-family:inherit;background:#fff}
/* ── 🔘 ปุ่ม 3 ระดับ (ขั้นที่ 1 ระบบสี · 25 ก.ย. 2569) ──
   หลัก = น้ำเงินทึบ ขอบเข้ม เงาล่าง · รอง (.ghost) = พื้นขาว ขอบน้ำเงิน · ระดับสาม (.link) = ตัวหนังสือขีดเส้นใต้
   กดไม่ได้ = เทาจาง · ทุกปุ่มสูงอย่างน้อย 36 จุด นิ้วกดง่าย
   ⛔ กฎเฉพาะที่มาทีหลัง (เช่น button.ghost.bad · button.ghost.netcol) ยังทับได้ตามเดิม */
button{background:var(--brand);color:#fff;border:2px solid var(--brand-ink);box-shadow:0 2px 0 var(--brand-ink);border-radius:9px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;min-height:36px;line-height:1.2}
button:hover{filter:brightness(1.07)}
button:active{transform:translateY(1px);box-shadow:0 1px 0 var(--brand-ink)}
button[disabled],button:disabled{background:#e6eaef;color:#9aa6b2;border-color:#e6eaef;box-shadow:none;cursor:not-allowed;filter:none}
button.ghost{background:#fff;color:var(--brand-ink);border-color:var(--brand);box-shadow:none}
button.ghost:hover{background:var(--brand-soft)}
button.danger{background:var(--bad);border-color:var(--bad-ink);box-shadow:0 2px 0 var(--bad-ink)}
button.link{background:none;color:var(--brand-ink);border:0;box-shadow:none;padding:4px;font-weight:700;text-decoration:underline;text-underline-offset:3px;min-height:0}
form.inline{display:inline}
.row{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-end}
/* กฎ .row ด้านบนแรงเท่ากับ [hidden] ของเบราว์เซอร์และมาทีหลัง จึงไปทับจนซ่อนไม่ลง
   ต้องเขียนทับให้ชัด ไม่งั้นแถวที่สั่งซ่อนไว้จะโผล่หมด */
.row[hidden]{display:none}
.row>div{flex:1;min-width:130px}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:9.2px;font-weight:600}
/* คู่มือสูตร — อ่านเป็นคู่มือจริง ๆ ไม่ใช่ตารางโค้ด (เจ้าของสั่ง 5 ก.ย. 2569) */
.fcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 16px 10px;margin-bottom:12px}
.fcard>summary{cursor:pointer;padding:10px 0;font-size:12.8px;display:flex;gap:10px;align-items:baseline;justify-content:space-between}
.fcard>summary::-webkit-details-marker{display:none}
.fintro{margin:0 0 10px;font-size:11.2px}
.frow{border-top:1px solid var(--line);padding:11px 0}
.fname{font-weight:700;font-size:12px}
.fmath{margin-top:5px;padding:7px 11px;background:#f5f8fc;border:1px solid #dbe6f3;border-radius:8px;
  font-size:11.6px;font-weight:600;color:var(--brand);display:inline-block}
.fwhy{margin:7px 0 0;font-size:11.2px;color:var(--ink)}
.fex{margin:5px 0 0;font-size:10.8px;color:var(--ok)}
.fwarn{margin:5px 0 0;font-size:10.8px;color:var(--warn)}
/* ปุ่มยกเลิกการจัดสรรเงินต้น (เจ้าของสั่ง 18 ก.ย. 2569) — ทำให้ดูไม่เหมือนปุ่มหลัก
   เพราะเป็นทางถอย ไม่ใช่ทางเดินปกติ */
.parevform{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px dashed var(--line)}
.parevlab{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted);flex:1 1 240px;min-width:200px}
.parevlab input{font-size:12px;padding:6px 9px}
.parevbtn{border-color:#e3b1ab;color:var(--bad)}
.parevbtn:hover{background:#fdeeec}
.parevform .pahint{flex:1 1 100%;margin:2px 0 0}
/* 📆 กล่องรายละเอียด · ยอดยกมาบนสุด · จบแต่ละวันมีคงเหลือ (เจ้าของสั่ง 24 ก.ย. 2569) */
.mvtbl tr.openrow td{background:#f4f7fb;border-top:none}
.mvtbl tr.dayend td{background:#f1f6f2;border-top:1px dashed #cfe0d3;color:#1f6b36}
.mvspan{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.mvspan .mvmore{padding:2px 9px;border:1px solid var(--line);border-radius:999px;
  font-size:11px;text-decoration:none;color:var(--muted);background:#fff}
.mvspan .mvmore.on{border-color:#2f7d4a;background:#eaf7ee;color:#1f6b36;font-weight:600}
.mvsplit{margin-top:8px}
.mvsplit tr.sumrow td{background:#eef3f9}
/* 🎁 ยอดโอนเกิน "บริษัทค้าง" (เจ้าของสั่ง 24 ก.ย. 2569) — สีฟ้า ไม่ใช่เขียวและไม่ใช่ส้ม
   เพราะไม่ใช่เงินที่ปล่อยได้ และไม่ใช่เงินที่ต้องโอน เป็นสิทธิ์เอาไปหักครั้งหน้า */
.wcard.credit{border-color:#bcd4f5;background:#f3f8ff}
.wcard.credit .wcn{color:#1f5aa8}
b.credit{color:#1f5aa8}
.creditask{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:8px;
  padding-top:8px;border-top:1px dashed #bcd4f5}
.creditask label{display:flex;flex-direction:column;gap:3px;font-size:10.5px;color:var(--muted)}
.creditask input{font-size:12px;padding:5px 8px}
.creditask .muted{flex:1 1 100%;font-size:10.5px}
/* 💰 ปุ่มเลือกแหล่งเงินในใบปล่อยลูกค้าใหม่ + กล่องยกเงินให้เพื่อน (เจ้าของสั่ง 24 ก.ย. 2569) */
.rnwmoney{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 2px}
.rnwmoneylab{font-size:11px;color:var(--muted)}
.rnwmw{border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:6px 13px;font-size:12.5px;cursor:pointer;color:var(--muted)}
.rnwmw.on{border-color:#2f7d4a;background:#eaf7ee;color:#1f6b36;font-weight:600}
.rnwgive{margin-top:10px;padding:12px;border:1px solid #cdd9f0;border-radius:10px;background:#f6f9ff}
.rnwgivehint{margin:0 0 10px;font-size:12.5px;line-height:1.5}
.rnwgive label{display:block;font-size:11px;color:var(--muted);margin-bottom:3px}
.rnwgivehave{margin:8px 0 0;font-size:12px}
/* วันที่จัดสรรเงินต้นไปแล้ว — กล่องโอนโชว์แค่รายการกับปุ่มยกเลิก (เจ้าของสั่ง 24 ก.ย. 2569)
   ⛔ ห้ามมีช่องกรอกยอดหรือปุ่มส่งสลิปในกล่องนี้ */
.paremitdone{margin-top:8px;padding:10px 12px;border:1px solid #bfe3c8;border-radius:10px;background:#f2fbf4}
.pardhead{font-size:12.5px;color:#1f6b36}
.pardhead .muted{font-weight:400;margin-left:6px}
.pardwho{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12.5px}
.pardact{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px;
  padding-top:8px;border-top:1px dashed #bfe3c8}
.pardact .ghost{border-color:#e3b1ab;color:var(--bad);text-decoration:none;
  display:inline-block;padding:5px 11px;border-radius:8px;border-style:solid;border-width:1px;background:#fff}
.pardact .ghost:hover{background:#fdeeec}
/* ── ที่มาของเงินที่ปล่อย (เจ้าของสั่ง 18 ก.ย. 2569) ── */
.srcbox{margin:6px 0}
.srcform{padding:8px 2px 2px}
.srcrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line)}
.srcrow:first-child{border-top:none}
.srclab{flex:1 1 230px;min-width:0;font-size:12.5px;line-height:1.4}
.srclab b{display:block;font-size:13px}
.srclab span{display:block;font-size:11px}
.srcamt{width:120px;text-align:right;font-variant-numeric:tabular-nums}
.srcfoot{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.srctally{font-size:12.5px;font-variant-numeric:tabular-nums}
.srctally.ok{color:var(--ok);font-weight:600}
.srctally.over{color:var(--bad);font-weight:600}

/* ปุ่มดูสูตรเล็ก ๆ ข้างหัวข้อ — กดแล้วไปที่คู่มือเฉพาะส่วนนั้น */
a.fbtn{display:inline-block;margin-left:9px;padding:2px 10px;border-radius:999px;background:#eef2f7;
  border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:700;text-decoration:none;
  vertical-align:middle;white-space:nowrap}
a.fbtn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.pill.ok{background:#e3f5ec;color:var(--ok)}
.pill.warn{background:#fdf1dc;color:var(--warn)}
.pill.bad{background:#fdeceb;color:var(--bad)}
.pill.mute{background:#eef2f7;color:var(--muted)}
/* ป้ายเตือนชุดใหม่ (เจ้าของสั่ง 5 ก.ย. 2569) — แดงทึบ = ค้างข้ามงวด · ส้มแดง = จ่ายไม่ครบ · ฟ้า = พรุ่งนี้ */
.pill.hard{background:var(--bad);color:#fff;font-weight:700}
.pill.part{background:#fdeee6;color:#c1451a;border:1px solid #f2c4ae;font-weight:700}
.pill.tmr{background:#e8f0fb;color:var(--brand);border:1px solid #c3d8f2;font-weight:700}
/* สมุดยังลงไม่ครบ — ไม่ใช่ความผิดลูกค้า จึงไม่ใช้สีแดง (เจ้าของทักท้วง 5 ก.ย. 2569) */
.pill.behind{background:#f3eee4;color:#7a5c1e;border:1px solid #e2d3b4;font-weight:700}
/* เจ้าของสั่ง: ให้ขึ้นมุมล่าง และหายเองใน 5 วินาที */
.flashwrap{position:fixed;bottom:16px;right:16px;z-index:60;
  width:min(460px,calc(100% - 24px));pointer-events:none;transition:opacity .4s ease,transform .4s ease}
.flashwrap.fading{opacity:0;transform:translateY(10px)}
.flash{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;font-weight:600;
  box-shadow:0 8px 26px rgba(0,0,0,.18);border:1px solid rgba(0,0,0,.06);pointer-events:auto;
  animation:flashin .18s ease-out}
.flash span{flex:1}
@keyframes flashin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.flash.ok{background:#e3f5ec;color:var(--ok)}
.flash.bad{background:#fdeceb;color:var(--bad)}
/* ยอดเงินที่เสียไปกับลูกค้าเสีย ต้องเป็นสีแดงให้สะดุดตา (เจ้าของสั่ง 19 ก.ย. 2569
 * "ต้องการให้แสดงเป็นยอดเงินว่าเสียกี่บาทตัวสีแดง และจำนวนตัวที่เสียตัวเล็ก ๆ")
 * ⛔ โต๊ะที่ยังไม่มีลูกค้าเสีย ขึ้น 0 สีปกติ ไม่ต้องแดง จะได้ไม่ตกใจฟรี */
.stat b.badmoney{color:var(--bad)}
/* เตือน = บันทึกสำเร็จแล้ว แต่มีเรื่องต้องไปตรวจต่อ (เจ้าของสั่ง 19 ก.ย. 2569)
 * ⛔ ห้ามใช้สีแดงเหมือน bad เพราะงานบันทึกสำเร็จ ไม่ได้ล้มเหลว */
.flash.warn{background:#fff4d9;color:#8a5a00;white-space:pre-line}
button.flashclose{background:none;border:0;color:inherit;font-size:12px;font-weight:700;
  padding:0 2px;cursor:pointer;opacity:.65;line-height:1.4}
button.flashclose:hover{opacity:1}
.muted{color:var(--muted);font-size:9.2px;line-height:1.4}
/* 🔗 ลิงก์ในเนื้อหาที่ไม่ได้เป็นปุ่ม = น้ำเงิน ขีดเส้นใต้หนา ให้แยกจากตัวหนังสืออ่านอย่างเดียว (ขั้นที่ 1 ระบบสี) */
main a:not([class]){color:var(--brand-ink);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
main a:not([class]):hover{color:var(--brand)}
/* คำอธิบายที่แทรกอยู่ในตารางและในกล่อง ต้องจิ๋วกว่าคำอธิบายทั่วไปอีกขั้น */
td .muted,th .muted,td small,td i.note,.card small{font-size:9px;line-height:1.35;display:inline-block}
/* แถบบนสุดเหลือแค่เลขรุ่น (เจ้าของสั่ง 18 ก.ย. 2569) · เดิมเป็นแถบเหลืองเตือน
   ตอนนี้ไม่มีอะไรต้องเตือนแล้ว ใช้สีเทาเงียบ ๆ ไม่แย่งสายตา
   หมายเหตุ: คอมเมนต์ใน CSS ติดไปกับหน้าเว็บด้วย จึงห้ามพิมพ์ข้อความเดิมซ้ำตรงนี้ */
.banner{background:#eef1f5;color:var(--muted);padding:4px 16px;text-align:center;font-size:9.2px;font-weight:400}
.banner .ver{display:block;font-weight:400;font-size:9.2px;opacity:.9}
.chartwrap{overflow-x:auto}
.chart{display:flex;gap:3px;align-items:flex-end;min-width:760px;height:190px;padding-top:6px}
/* flex-basis 0 + min-width 0 = ทุกวันกว้างเท่ากัน ไม่ว่าตัวเลขบนแท่งจะยาวแค่ไหน */
.chart .col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
/* .bars ต้องมีความสูงชัดเจน ไม่ใช่ flex:1 เฉย ๆ ไม่งั้นแท่งที่สูงเป็น % จะกลายเป็นศูนย์ */
.chart .bars{display:flex;gap:2px;align-items:flex-end;height:calc(100% - 14px)}
.chart .s{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%}
.chart .v{font-size:9px;font-weight:700;line-height:1.1;white-space:nowrap;margin-bottom:2px}
.chart .v.out{color:var(--brand)}
.chart .v.back{color:var(--warn)}
/* อยู่ในกล่องแนวตั้ง ถ้าใช้ flex:1 ความสูงจะถูกยืดจนเท่ากันหมด และความกว้างจะเหลือศูนย์ */
.chart .bar{width:100%;flex:0 0 auto;border-radius:2px 2px 0 0;min-height:0}
.chart .bar.out{background:var(--brand)}
.chart .bar.back{background:var(--warn)}
.chart .lbl{text-align:center;font-size:9px;color:var(--muted);margin-top:3px}
.chart .col.now .lbl{color:var(--brand);font-weight:700}
.chart .col.future{opacity:.35}
.key{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px}
.key.out{background:var(--brand)}
.key.back{background:var(--warn)}
.todayrow td{background:#f0f6ff}
.viewas{background:#e8eefc;border:1px solid #b9cbf0;color:#173a7a;padding:7px 11px;border-radius:10px;margin-bottom:10px;font-size:9.6px}
.viewas a{color:#173a7a;font-weight:700}
a.seebtn{display:inline-block;background:#fff;color:var(--brand-ink);border:2px solid var(--brand);border-radius:9px;padding:6px 10px;font-size:11.2px;font-weight:800;text-decoration:none;white-space:nowrap;line-height:1.2}
a.seebtn:hover{background:var(--brand-soft)}
h3{font-size:12px;margin:2px 0 6px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
table.ledger td{font-size:12.8px}
table.ledger tr.plus td{color:var(--ok)}
table.ledger tr.minus td{color:var(--bad)}
/* เงินเข้า-เงินออก ต้องดูออกด้วยตาเปล่า — เขียวคือเข้า แดงคือออก ติดเครื่องหมายและป้ายสีไว้เสมอ */
.mi,.mo{display:inline-block;border-radius:7px;padding:1px 7px;font-weight:700;white-space:nowrap}
.mi{color:#0a6b3d;background:#e6f6ec;border:1px solid #bfe6ce}
.mo{color:#a3231a;background:#fdecea;border:1px solid #f5c9c4}
table.ledger td .mi,table.ledger td .mo{font-size:12px}
.stat .mi,.stat .mo{font-size:16px;margin-top:2px}
.mz{color:var(--muted);font-weight:700}
/* หน้าเข้าสู่ระบบและช่องรหัสผ่าน */
.loginbox{max-width:420px}
.loginbox label{display:block;margin-bottom:10px}
.loginbox select,.loginbox input{width:100%}
.loginbtn{width:100%;padding:10px;font-size:12.8px}
.pwform{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.pwform input{width:auto;min-width:150px}
/* ช่องรหัสลูกค้า + ปุ่มขอรหัสอัตโนมัติ */
.codepick{display:flex;gap:6px;align-items:center}
.codepick input{flex:1 1 auto;min-width:0}
.codepick button{flex:0 0 auto;white-space:nowrap}
/* แถบเลือกวัน — กดย้อนหลังได้ทันที ไม่ต้องพิมพ์วันที่ */
.datebar .dayrow{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
/* วันที่กำลังเปิดอยู่ต้องเด่นที่สุด — เจ้าของสั่ง 3 ก.ย. 69 ว่าเดิมดูไม่ออกว่ากำลังดูวันไหน */
.daynowbig{font-size:13.6px;color:var(--brand);background:#e8f0fa;border:1.5px solid var(--brand);
  border-radius:9px;padding:5px 12px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.datebar .monthrow{border-top:1px dashed var(--line);padding-top:8px}
.daypick{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:nowrap}
.daypick label{display:flex;gap:6px;align-items:center;white-space:nowrap}
.daypick input{width:auto;padding:4px 6px}
.daypick button{padding:5px 10px}
.daygrid{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.clmtotal{margin:0;font-size:11.2px}
.keepbox{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#f7f8fa;font-weight:600;cursor:pointer}
.keepbox input{width:auto;margin:0}
.keepbox:has(input:checked){border-color:var(--ok);background:#eafaf1;color:var(--ok)}
.flowline.breakdown .who2{color:var(--muted);font-size:10.4px}
.lendcell{color:var(--muted);background:#f7f8fa}
.poolstat{border-top:3px solid var(--ok);position:relative}
/* ── การ์ด "สุทธิ" · เจ้าของสั่ง 6 ก.ย. 2569 ──
 * เดิมช่องกรอกกางอยู่ในการ์ดตลอด การ์ดเลยสูงกว่าใบอื่นและถูกดันไปล่างสุด
 * ตอนนี้เหลือแค่ปุ่มเล็ก กดแล้วป๊อปอัปค่อยกางลงมา การ์ดจึงเท่าใบอื่นและอยู่แถวบนได้ */
.openedit{margin:0 0 8px;padding:7px 11px;border-radius:9px;background:#eef7f1;border:1px solid #bfe6ce;
  color:#0a6b3d;font-size:10.4px;line-height:1.6}
.openedit a{color:#0a6b3d;font-weight:700}
/* ── ช่องนับวันที่เซลล์ใส่เอง (เจ้าของสั่ง 6 ก.ย. 2569) ──
 * สีคนละโทนกับที่ระบบคิด จะได้รู้ทันทีว่าอันไหนคนใส่ อันไหนระบบเดา */
i.bkmk.own{background:#e7f0ff;border-color:#b9d3f7;color:#12437f;font-style:normal}
i.bkmk.add{background:transparent;border:1px dashed var(--line);color:#c3ccd6;font-style:normal;
  padding:0 4px;cursor:pointer}
i.bkmk.add:hover{border-color:var(--brand);color:var(--brand)}
/* ⏭ ใบ้ป้ายถัดไปจาง ๆ ในช่องว่างของวันที่เปิดอยู่ (เจ้าของยืนยัน 30 ก.ย. 2569 "ป้ายที่กดไว้ ตื่นเช้ามาหาย") · แค่ใบ้ ยังไม่ได้บันทึก */
i.bkmk.add.guess{color:#7f9cc4;border-color:#b9cbe6;font-weight:600}
/* กดง่ายขึ้น — เจ้าของทักว่ากดแล้วไม่ติด 6 ก.ย. 2569
 * ป้ายเดิมสูงแค่ 12px นิ้วโป้งกดพลาดไปโดนช่องกรอกยอดแทน */
/* ── ช่องเก็บแบ่งเป็นสองกล่อง (เจ้าของสั่ง 11 ก.ย. 2569 · ทับตำแหน่งเดิมวันที่ 7) ──
 * กล่องบน = ยอดเก็บ · กล่องล่าง = ป้ายนับ/สถานะการเก็บ · ช่อง ป เหลือยอดปล่อยอย่างเดียว */
table.bktable td.k .bval{display:block;width:100%;box-sizing:border-box;min-height:12px;
  padding:0 1.5px;line-height:1.2;cursor:text}
/* พื้นที่กดของตัวป้าย — เจ้าของแจ้ง 16 ก.ย. 2569 ว่ากดป้ายไม่ค่อยติด
   เดิมสูงแค่ 15 จุดในช่องสูง 44 จุด = กดโดนยากโดยเฉพาะบนมือถือ
   ขยายเป็น 21 จุด กดง่ายขึ้นเท่าตัว แต่ยังไม่บังยอดเงินที่อยู่ข้างบน
   (ห้ามแก้ด้วยการให้ทั้งช่องเปิดเมนู — เคยทำแล้วช่องเก็บกรอกเงินไม่ได้ทั้งตาราง) */
/* ⛔ เจ้าของสั่ง 25 ก.ย. 2569 "ปรับขนาดช่องตาราง … ยังดูใหญ่ไป" → "ยืนยัน ขอขนาดเล็กสุด"
   ย่อทั้งตัวหนังสือ ระยะขอบ ความสูงป้าย และความกว้างช่อง ~20–25% · กล่องพิมพ์ยอด (bkebox) คงเดิมให้นิ้วกดง่าย
   พื้นที่กดป้าย: ตัวป้ายทั่วไป 22→20 จุด (ขั้นต่ำ 20 ตาม test/markcell-clickable · บทเรียน 16 ก.ย. กดไม่ติด)
   ป้ายในช่องนับ (.bn.mk) 19→18 จุด · ห้ามต่ำกว่านี้ ไม่งั้นนิ้วกดไม่ติดบนแท็บเล็ต */
i.bkmk{display:block;width:100%;box-sizing:border-box;padding:1.5px 2px;min-height:20px;
  font-size:8.4px;line-height:1.2;pointer-events:auto;cursor:pointer;
  border-top:1px dashed #c9d4e0;border-radius:0}
i.bkmk.own,i.bkmk.due,i.bkmk.late,i.bkmk.paid,i.bkmk.hint,i.bkmk.add{border-radius:0 0 4px 4px}
/* ใบ้จาง ๆ ว่าน่าจะเป็นยอดค้าง — ระบบไม่ยืนยัน แค่สะกิดให้เซลล์ดู
 * เจ้าของสั่ง 6 ก.ย. 2569: "ลบเสร็จให้ขึ้นไว้ในช่องนั้น ในกรณีที่คุณมองเห็นว่าน่าจะเป็นยอดค้าง" */
/* ดอกตามรอบตัวเล็กใต้ยอดปล่อย — เห็นคู่กันได้โดยไม่ต้องเลื่อนตาราง */
/* เปอร์เซ็นต์ดอกต่อท้ายชื่อ — เล็กและจางกว่าชื่อ ไม่แย่งสายตา */
table.bktable td.b2 i.brate{display:inline;font-style:normal;font-size:8px;font-weight:700;
  color:#c2410c;margin-left:3px;white-space:nowrap}
table.bktable td.b3 i.bint,table.bktable th.b3 i.bint{display:block;font-style:normal;font-size:8px;
  font-weight:600;color:#c2410c;line-height:1.2;margin-top:0}
i.bkmk.paid{background:#e6f6ec;border-color:#bfe6ce;color:#0a6b3d;font-style:normal}
i.bkmk.half,summary.bkmk.half{background:#efe6fb;border-color:#c8b1ee;color:#5b2d9c;font-style:normal;font-weight:700}
.mpbtn.half{background:#efe6fb;color:#5b2d9c;border-color:#c8b1ee}
/* 🔗 ป้ายจ่ายควบ · ม่วงคราม ตัวขาว (16 ต.ค. 2569) · ⛔ ต้องตั้งสีตัวหนังสือเองเสมอ (บทเรียนขาวบนขาว 8 ก.ย.) */
i.bkmk.combo,summary.bkmk.combo{background:#3730a3;border-color:#312e81;color:#fff;font-style:normal;font-weight:700}
i.bkmk.combo:hover,summary.bkmk.combo:hover{background:#312e81;color:#fff}
.mpbtn.combo{background:#e0e7ff;color:#3730a3;border-color:#a5b4fc;font-weight:700}
.combonote{color:#3730a3;font-weight:600}
/* ป้ายที่ระบบเติมให้เอง (ลูกค้ารายวัน = "เก็บ" ทุกวัน) — จางกว่าและขอบประ
   เซลล์จะได้แยกออกทันทีว่าอันไหนตัวเองพิมพ์ อันไหนระบบใส่ให้ */
/* บั๊กที่เจ้าของแจ้ง 8 ก.ย. 2569 "ตรวจสอบระบบในเว็บยังไม่เจอ"
   ของเดิมสั่งพื้นหลังโปร่งใส แต่ลืมเปลี่ยนสีตัวหนังสือ ซึ่งสืบมาจาก .bkmk.due เป็น "สีขาว"
   กลายเป็นตัวหนังสือขาวบนพื้นขาว = ป้ายมีอยู่จริงแต่มองไม่เห็นเลยสักอัน
   แก้เป็นตัวหนังสือเขียวเข้มบนพื้นเขียวอ่อน ยังคงขอบประไว้ให้แยกออกว่าระบบใส่ให้ */
/* ⛔ เจ้าของสั่ง 25 ก.ย. 2569 "แก้ช่องคำว่าเก็บให้เป็นสีเขียว … ห้ามให้ช่องคำว่าเก็บเปลี่ยนเป็นสีอื่นโดยเด็ดขาด" → "ยืนยัน"
   ป้ายที่มีคำว่า "เก็บ" ทุกแบบ (ระบบใส่เอง · เซลล์ใส่เอง · รายวัน · รายสัปดาห์ · "หนึ่ง · เก็บ") = เขียวเสมอ
   ยกเลิกกติกา 8/17 ก.ย. ที่ให้รายวันเป็นเหลือง · เหลืองห้ามใช้กับคำว่าเก็บอีก
   อาการเดิม: เซลล์กดใส่ "เก็บ" เห็นเขียว พอยอดสดดึงหน้าใหม่กลับเป็นเหลือง = สีสลับไปมา
   ยังคงขอบประไว้ให้แยกออกว่าระบบใส่ให้เอง · ล็อกที่ test/collect-day-is-one.test.js ④ และ test/daily-mark-forward.test.js */
i.bkmk.due.auto{background:var(--ok);border-style:dashed;border-color:#0a6b3d;
  color:#fff;opacity:1;font-weight:700}
i.bkmk.due.auto:hover{background:#0a6b3d;border-color:#08512e;color:#fff}
/* เจ้าของสั่ง 17 ก.ย. 2569: "ช่องเก็บคำว่าเก็บของรายสัปดาห์เจ็ดวันจะต้องเป็นสีเขียว"
   เหลืองคือของลูกค้ารายวันเท่านั้น · รอบ 7 วันวันครบนัดต้องเขียวให้กวาดตาเจอทันที
   ยังคงขอบประไว้ เพื่อให้ยังแยกออกว่าเป็นป้ายที่ระบบใส่ให้ ไม่ใช่ที่เซลล์พิมพ์เอง
   ⚠️ กับดักเก่า 8 ก.ย.: แก้พื้นหลังป้ายเมื่อไร ต้องกำหนดสีตัวหนังสือของตัวเองเสมอ
      ไม่งั้นจะสืบสีขาวจาก .bkmk.due มาอยู่บนพื้นขาว แล้วป้ายหายไปทั้งตาราง */
i.bkmk.due.auto.wk{background:var(--ok);border-color:#0a6b3d;color:#fff}
i.bkmk.due.auto.wk:hover{background:#0a6b3d;border-color:#08512e;color:#fff}
/* 1️⃣ วันหนึ่ง = วันเก็บ · หนึ่ง บรรทัดบน เก็บ บรรทัดล่าง (เจ้าของสั่ง 27 ก.ย. 2569) · สีตามแถว (tr.rwk เขียว / tr.rday ฟ้า) */
i.bkmk.one{line-height:1.15;font-weight:700}
i.bkmk.one .mkdot{display:none}
i.bkmk.one .mk2{display:block;font-size:.92em;font-weight:800;letter-spacing:.02em}
i.bkmk.hint{background:transparent;border:1px dotted #e8b9b9;color:#d9a3a3;font-style:normal;font-weight:400}
i.bkmk.hint:hover{border-color:var(--bad);color:var(--bad)}
/* 🔴 ป้ายเล็ก "ค้าง X" ใต้เลขนับ (เจ้าของยืนยัน 10 ต.ค. 2569) · กำหนดสีตัวหนังสือเองเสมอ */
small.mkmode{display:block;margin-top:1px;font-size:9.5px;line-height:1.15;font-weight:600;color:#6b7a90;font-style:normal;white-space:nowrap}
small.mkmode.on{color:#fff;background:#3b6fb6;border-radius:3px;padding:0 3px;font-weight:700}
.mpbtn.paymode{border-color:#3b6fb6;color:#3b6fb6}.mpbtn.paymode.on{background:#3b6fb6;color:#fff}
small.mkowe{display:block;margin-top:1px;font-size:9.5px;line-height:1.15;font-weight:700;color:#c62828;background:#fff1f1;border-radius:3px;padding:0 2px;white-space:nowrap;font-style:normal}
@media(max-width:640px){
  i.bkmk{padding:4px 3px;min-height:24px;font-size:9.2px;line-height:1.3}
  i.bkmk.add{border-style:solid;border-color:#d7dee6;color:#9aa6b2}
}
/* กดป้ายแล้วกางรายการให้เลือก · เลือกเสร็จระบบนับต่อให้เองทั้งเส้น */
input.bkmkin{width:56px;padding:0 3px;font-size:9.2px;height:16px;min-height:0;
  border:1px solid var(--brand);border-radius:4px;text-align:center;font-weight:700}
.markpop{position:fixed;z-index:9000;width:236px;background:#fff;
  border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 26px rgba(15,32,60,.22);
  padding:8px 9px;text-align:left;white-space:normal;cursor:default}
.markpop .mphead{display:block;font-size:10px;font-weight:700;margin-bottom:2px}
.markpop .mphint{display:block;font-size:9px;color:var(--muted);line-height:1.5;margin-bottom:6px}
/* ตัวหนังสือทุกตัวต้องอยู่ในหน้าเดียว ไม่ต้องเลื่อน (เจ้าของสั่ง 8 ก.ย. 2569)
   หนึ่ง–เจ็ด + เก็บ + ค้าง + จ่ายแล้ว = 10 ปุ่ม · 5 คอลัมน์ = 2 แถวพอดี */
.markpop .mpgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.markpop{max-height:none;overflow:visible}
.markpop .mpmore{display:grid;grid-template-columns:1fr;gap:4px;margin-top:6px;
  padding-top:6px;border-top:1px dashed var(--line)}
.markpop .mpbtn{padding:4px 2px;font-size:9.4px;font-weight:700;min-height:0;line-height:1.3;
  background:#eef2f7;color:var(--ink);border:1px solid var(--line);border-radius:6px;cursor:pointer}
.markpop .mpbtn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.markpop .mpbtn.wide{grid-column:1 / -1;background:#fff}
.markpop .mpbtn.go{background:var(--ok);border-color:var(--ok);color:#fff;padding:7px 2px;font-size:10.8px}
.markpop .mpbtn.go:disabled{background:#eef2f7;border-color:var(--line);color:#9aa6b2;cursor:default}
/* ยังไม่ได้เลือกเลข — หน้าตาเหมือนกดไม่ได้ แต่กดได้จริงเพื่อบอกว่าต้องทำอะไรก่อน
   (เจ้าของแจ้ง 17 ก.ย. 2569 ว่าปุ่มเทากดแล้วเงียบ ไม่รู้ว่าต้องทำยังไงต่อ) */
.markpop .mpbtn.go.needpick{background:#eef2f7;border-color:var(--line);color:#7b8794;cursor:pointer;font-weight:700}
.markpop .mpbtn.go.needpick:hover{background:#e3eaf3}
.markpop .mpbtn.mpcont{grid-column:1 / -1;display:block;width:100%;margin:4px 0 2px;background:#e7f0ff;border-color:#9fbde8;color:#12437f;padding:7px 4px;font-size:11px}
.markpop .mpbtn.mparm,.markpop .mpbtn.go.mparm{background:var(--bad);border-color:var(--bad);color:#fff}
/* แถวเลขกะพริบให้เห็นว่าต้องกดตรงนี้ก่อน */
@keyframes mpflash{0%,100%{box-shadow:0 0 0 0 rgba(11,92,171,0)}35%{box-shadow:0 0 0 3px rgba(11,92,171,.35)}}
.markpop .mpflash{animation:mpflash .7s ease-in-out 2;border-radius:7px}
@media (prefers-reduced-motion:reduce){.markpop .mpflash{animation:none;box-shadow:0 0 0 3px rgba(11,92,171,.35)}}
table.bktable td.edit{position:relative}
.poolpop{margin-top:4px}
.poolpop>summary{display:inline-block;cursor:pointer;list-style:none;background:#eef7f1;
  border:1px solid #bfe6ce;color:#0a6b3d;border-radius:999px;padding:2px 10px;font-size:9.6px;font-weight:700}
.poolpop>summary::-webkit-details-marker{display:none}
.poolpop[open]>summary{background:var(--ok);border-color:var(--ok);color:#fff}
/* กล่อง "แก้ยอด" เกาะกับการ์ดที่กดเปิด ไม่ใช่กับขอบจอ
   เจ้าของสั่งตรวจมือถือ 8 ก.ย. 2569 — พบว่าบนจอ 375px กล่องเริ่มที่ 191px
   กว้าง 330px จึงล้นขอบขวาไป 146px ปุ่มบันทึกอยู่นอกจอ กดไม่ได้เลย
   สาเหตุ: .poolpop ไม่ได้ตั้ง position ตัวกล่องเลยไปเกาะการ์ดชั้นนอก
   แก้สองชั้น ① ให้เกาะ .poolpop จริง ② จอแคบให้กางออกทางซ้ายแทนขวา */
.poolpop{position:relative}
.poolpopbox{position:absolute;z-index:40;left:0;top:calc(100% + 6px);text-align:left;
  width:min(330px,calc(100vw - 40px));background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 12px 30px rgba(15,32,60,.18);padding:10px 12px}
/* จอแคบ: เกาะปุ่มแล้วยังไงก็ล้นข้างใดข้างหนึ่ง (ชิดซ้ายล้นขวา 146px · ชิดขวาล้นซ้าย 60px)
   จึงเปลี่ยนเป็นกล่องกลางจอไปเลย เห็นครบทุกปุ่มแน่นอนไม่ว่ากดจากการ์ดไหน
   z-index ต้องสูงกว่าแถบเมนูบนสุด (50) ไม่งั้นเมนูจะทับหัวกล่อง */
@media(max-width:820px){
  .poolpopbox{position:fixed;z-index:60;left:12px;right:12px;top:50%;transform:translateY(-50%);
    width:auto;max-height:80vh;overflow:auto}
}
.poolpopbox .pptitle{display:block;font-size:10.4px;font-weight:700;margin-bottom:6px}
.poolpend{display:block;margin-top:5px;font-size:9.2px;font-weight:700;color:var(--warn)}
.remitbox{border-top:3px solid var(--brand)}
.remitnone{color:var(--muted);font-size:10.8px;background:#f7f8fa;border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:6px 0}
.remitdone{background:#e6f6ec;border:1px solid #bfe6ce;border-radius:10px;padding:10px 12px;margin:6px 0;font-size:10.8px}
.remitdone.waiting{background:#fdf1dc;border-color:#f0d9a8}
/* คำอธิบายในหน้าแอดมิน/ศูนย์จัดการเงิน ยุบไว้หลังปุ่ม ❓ วิธีใช้ (เจ้าของสั่ง 9 ก.ย. 2569 "ลบคำอธิบายออก ถ้าต้องการให้กดปุ่ม") */
.howto{margin:2px 0 6px;font-size:10.5px}
.howto>summary{cursor:pointer;color:var(--brand);font-weight:700;list-style:none;display:inline-block;padding:1px 6px;border:1px solid var(--line);border-radius:999px;background:#fff}
.howto>summary::-webkit-details-marker{display:none}
.howto[open]>summary{margin-bottom:4px}
.howto p{margin:2px 0}
/* ยอดโอน 0 = ยังไม่ได้โอนเลย · กรอบต้องเป็นสีเตือน ไม่ใช่สีเขียวของ "โอนแล้ว" (เจ้าของถาม 9 ก.ย. 2569 ว่ากรอบเขียวคืออะไร) */
.remitdone.none{background:#fff4f2;border:1px solid #f3c2b8}
.remitdone.none .remitbig,.remitdone.none .remitleft{color:#b42318}
.remitbig{font-size:12.8px;font-weight:700;color:#0a6b3d;margin-bottom:2px}
.remitdone.waiting .remitbig{color:var(--warn)}
.pendmsg{color:var(--warn);font-weight:700;font-size:10.8px;margin:4px 0}
.okmsg{color:var(--ok);font-weight:700;font-size:10.8px;margin:4px 0}
.remitleft{margin-top:6px;padding-top:6px;border-top:1px dashed #bfe6ce;font-weight:700;color:#0a6b3d}
.remitleft.warn{color:var(--warn);border-top-color:#f0d9a8}
/* กล่องโอนย่อ (เจ้าของสั่ง 9 ก.ย. 2569 ให้เล็กที่สุด สูงไม่เกินครึ่งเดิม) */
.remitbox.compact{padding:6px 8px;font-size:10.5px}
.remitbox.compact .rhead{font-size:11px;margin:0 0 3px;line-height:1.3}
/* เจ้าของสั่งย่อลง 40% 9 ก.ย. 2569 — แถบเตือนเดิมกินพื้นที่มากจนบังฟอร์มโอน
 * ย่อด้วยการทำให้กล่องหดตามข้อความ (inline-block) + ลดระยะขอบ
 * ไม่ย่อตัวหนังสือลง 40% ตรง ๆ เพราะ 6.3px อ่านภาษาไทยไม่ออก
 * รวมแล้วกล่องเล็กลงเกิน 40% แต่ยังอ่านได้ */
/* กล่องออกใบเรียกเก็บ — เจ้าของสั่งย่อ 9 ก.ย. 2569 "ปรับกล่องให้มีขนาดเล็กอีก" */
#claimform label{font-size:10px;margin-bottom:1px}
#claimform input,#claimform select{padding:4px 6px;font-size:12px}
#claimform .row{gap:6px;margin-bottom:4px}
#claimform .splitrow{margin-bottom:3px}
#claimform button{padding:5px 10px;font-size:12px}
.rline{display:inline-block;padding:1px 6px;border-radius:5px;font-weight:700;font-size:9px;margin:1px 0;line-height:1.25}
.rline.warn{background:#fff4f2;color:#b42318;border:1px solid #f3c2b8}
.rline.part{background:#fdf1dc;color:#8a5a00;border:1px solid #f0d9a8}
.rline.wait{background:#fdf1dc;color:var(--warn);border:1px solid #f0d9a8}
.rline.ok{background:#e6f6ec;color:#0a6b3d;border:1px solid #bfe6ce}
/* ✋ เก็บไว้ที่ตัวเอง — สีเทา ไม่ใช่เขียว เพราะเงินยังไม่เข้าบริษัท แค่แจ้งว่าถือไว้
   และไม่ใช่แดง เพราะแจ้งแล้ว ไม่ได้ค้าง (เจ้าของสั่ง 21 กันยายน 2569) */
.rline.held{background:#f1f3f6;color:#3f4854;border:1px solid #d6dbe2}
.rline.muted{background:#f7f8fa;color:var(--muted);border:1px dashed var(--line);font-weight:400}
.rform{margin-top:4px}
.rform .rrow{gap:4px;align-items:center}
.rform .rrow>div{flex:0 1 auto;min-width:0}
.rform .ramt input{width:84px;padding:3px 6px;font-size:11px;font-weight:700}
.rform select{padding:3px 4px;font-size:10.5px}
.rform .rfile input{font-size:10px;max-width:150px}
.rform .rbtn button{padding:4px 9px;font-size:10.5px}
.rform .rnote{font-size:9.5px;margin-top:2px}
.rform .racct{font-size:9.5px}
.rform .racct.warnx{color:#b42318;font-weight:700}
.rform .tosales select{max-width:180px}
.rline.amend{background:#eef2ff;color:#3730a3;border:1px solid #c7d2fe;font-weight:600}
/* แจ้งเตือนแยกหมวด (9 ก.ย. 2569) */
.notifycats{padding:8px 10px}
.notifycats .nchead{font-size:11.5px;margin-bottom:6px}
.ncgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:6px}
.nccat{border:1px solid var(--line);border-radius:10px;padding:5px 8px;background:#fff;font-size:10.5px}
.nccat.empty{opacity:.55}
.nccat.late{border-color:#f3c2b8;background:#fff8f6}
.nccat>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
.nccat>summary::-webkit-details-marker{display:none}
.nccat .nclabel{flex:1;font-weight:700}
.nccat .nccount{min-width:22px;text-align:center;padding:1px 7px;border-radius:999px;background:var(--brand);color:#fff;font-size:10.5px}
.nccat.empty .nccount{background:#cbd2dc}
.nccat .ncage{font-style:normal;color:#b42318;font-size:9.5px}
.nclist{margin:5px 0 0;padding-left:0;list-style:none}
.nclist li{padding:2px 0;border-top:1px dashed var(--line)}
.ncdays{display:inline-block;min-width:52px;color:var(--muted);font-size:9.5px}
.ncdays.late{color:#b42318;font-weight:700}
.nclink{display:inline-block;margin-top:4px;font-size:10px}
.ncnone{margin:4px 0 0;font-size:10px}
/* ปุ่ม "ไม่มีสลิป · ขอให้แอดมินตรวจสอบ" (เจ้าของสั่ง 17 ก.ย. 2569)
   "ทำตรงนี้ให้เหมือนมีปุ่ม ให้รู้ว่ามีปุ่ม"
   ของเดิมเป็นตัวหนังสือจาง ๆ ในกรอบเส้นประ อ่านแล้วเหมือนป้ายบอกสถานะ ไม่มีใครรู้ว่ากดได้
   เปลี่ยนเป็นปุ่มเต็มตัว: พื้นสี ขอบทึบ ตัวหนังสือเข้ม มีลูกศรบอกว่ากดแล้วกางออก */
.noslip{margin-top:6px;font-size:10px}
.noslip>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;
  padding:5px 11px;border:1px solid #d6a52b;border-radius:6px;background:#fff8e6;
  color:#8a5a00;font-weight:700;font-size:10.5px;line-height:1.2;
  box-shadow:0 1px 0 rgba(0,0,0,.06);transition:background .12s,border-color .12s}
.noslip>summary:hover{background:#ffeec0;border-color:#8a5a00}
.noslip>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.noslip>summary::after{content:'▾';font-size:9px;opacity:.8}
.noslip[open]>summary{background:#ffeec0;border-color:#8a5a00}
.noslip[open]>summary::after{content:'▴'}
.noslip>summary::-webkit-details-marker{display:none}
.noslip .rreason input{width:170px;padding:3px 6px;font-size:10.5px}
.adminfold{margin-top:4px;font-size:10.5px}
.adminfold>summary{cursor:pointer;list-style:none;display:inline-block;padding:1px 8px;border:1px solid #f0c6c2;border-radius:999px;background:#fff4f2;color:#b42318;font-weight:700}
.adminfold>summary::-webkit-details-marker{display:none}
.adminfold .adminrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:4px;padding:6px;border:1px dashed #f0c6c2;border-radius:8px;background:#fffafa}
.adminfold form.inline{display:inline-flex;gap:4px;align-items:center;margin:0}
.adminfold input{padding:3px 6px;font-size:10.5px;max-width:150px}
.adminfold button{padding:3px 8px;font-size:10.5px}
.adminfold .okbtn{background:var(--ok);border-color:var(--ok);color:#fff}
.adminfold .nobtn{background:#fff;color:#b42318;border-color:#f3c2b8}
.remitfix{margin-top:6px}
.remitfix summary{cursor:pointer;color:var(--muted);font-size:10.4px;list-style:none}
.pacard{border:2px solid #b8dec8;background:#f4fcf7;scroll-margin-top:120px}
.paholdreq{margin:12px 0;padding:10px 12px;border:1px dashed #c9b27a;border-radius:10px;background:#fffdf5;scroll-margin-top:120px}
.paholdreq .phrform{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-top:8px}
.paholdreq .phrform label{display:flex;flex-direction:column;gap:2px;flex:1 1 180px;font-size:.9em}
.paholdreq .phrform input,.paholdreq .phrform select{width:100%;max-width:100%}
.paholdreq .phrtable td{vertical-align:top}
.paholdreq form.inline{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:center;margin:2px 0}
.pacard.open{border-color:#f0b25f;background:#fffaf2}
.pacard.bad{border-color:#e9a0a0;background:#fff7f7}
.pahead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.pahead h3{margin:0;font-size:14px;color:#0a6b3d}
.pacard.open .pahead h3{color:#8b5206}
.pacard.bad .pahead h3{color:var(--bad)}
.pasums{display:flex;gap:7px;flex-wrap:wrap;margin:9px 0}
.pasum{background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:10.4px}
.pasum b{display:block;font-size:14px;color:var(--ink);margin-top:1px}
.pasum.ok b{color:var(--ok)}
.pasum.warn b{color:var(--warn)}
.patable{width:100%;border-collapse:collapse;margin:8px 0}
.patable th,.patable td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:left;vertical-align:middle}
.patable th{font-size:9.6px;color:var(--muted);background:#f3f6f9}
.patable td{font-size:10.8px}
.patable td.num,.patable th.num{text-align:right}
.patable select,.patable input{margin:0;min-width:0;width:100%}
.patable input{text-align:right;font-weight:700}
.panomove{display:inline-block;background:#e8f7ef;color:#08713f;border:1px solid #b8dec8;border-radius:14px;
  padding:7px 13px;font-size:12px;line-height:1.45;font-weight:700;white-space:nowrap}
.paactions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.paadd{font-size:10px;padding:5px 9px}
.pasave{background:#0a7d47;border-color:#0a7d47}
.pahint{font-size:10.2px;color:var(--muted);margin:7px 0 0}
.paerror{color:var(--bad);font-weight:700;background:#fff;border:1px solid #e9a0a0;border-radius:9px;padding:8px 10px}
/* 🧺 กล่องกระเป๋าเงิน · กระเป๋าที่ปล่อยได้เขียว · ดอกส้ม · กันไว้เทา · ยอดรวมเขียวเข้ม */
.wbaghint{margin:0 0 7px;font-size:11px}
.wcard.wait{border-top-color:#8c8f96}
.wcard.lend{border-top-color:#0a7d47;background:#e8f7ef}
.wcard.lend .wcn{color:#08713f}
/* 💰 เงินต้นที่ถืออยู่ (16 ต.ค. 2569 · แบบที่ 1) · กล่องใหญ่บนสุดหน้า /me/wallet */
.wprin{border:2px solid #2f74c9;border-radius:14px;background:#f3f8ff;padding:12px 14px;margin:0 0 10px}
.wprin .wprt{display:block;font-size:13px;font-weight:700;color:#1f5fa8}
.wprin .wprn{display:block;font-size:30px;line-height:1.2;color:#0b3a6b;font-variant-numeric:tabular-nums}
.wprin .wprs{display:block;font-size:12.5px;color:#4d5f72;margin-top:2px}
.wprin .wprrow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.wprin .wprk{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.wprin .wprk span{display:block;font-size:11.5px;color:var(--muted)}
.wprin .wprk b{display:block;font-size:19px;font-variant-numeric:tabular-nums}
.wprin .wprk small{display:block;font-size:10.5px;color:var(--muted)}
.wprin .wprk.lend{border-color:#0a7d47;background:#e8f7ef}.wprin .wprk.lend b{color:#08713f}
.wprin .wprk.send{border-color:#e0a24a;background:#fff7e6}.wprin .wprk.send b{color:#9a6414}
.wprin .wsumbad{display:block;margin-top:6px}
/* 🧺 ห้ากระเป๋า · เจ้าของสั่ง 21 ก.ย. 2569 · กระเป๋าที่ปล่อยได้เป็นสีเขียว ดอกเป็นสีส้ม */
.fivepockets{margin:0 0 12px;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}
.fivepockets>.h{display:block;margin:0 0 8px;font-size:12.4px}
.fivepockets .stat{border-left:4px solid var(--line)}
.fivepockets .stat.pk1{border-left-color:#d98a2b;background:#fffaf2}
.fivepockets .stat.pk2,.fivepockets .stat.pk3,.fivepockets .stat.pk4{border-left-color:#0a7d47;background:#f4fbf7}
.fivepockets .stat.pk5{border-left-color:#8c8f96;background:#f6f7f9}
.fivepockets .stat.pklend{border-left-color:#0a7d47;background:#e8f7ef}
.fivepockets .stat.pklend b{color:#08713f}
.fivepockets>.muted{margin:8px 0 0;font-size:10.5px}
/* รายการย่อยใต้แต่ละก้อนในกระเป๋า · บอกว่าเป็นเงินของลูกค้ารายไหน */
.srclist{margin:3px 0 0;padding-inline-start:16px;font-size:10.5px;color:var(--muted);line-height:1.5}
.srclist b{color:var(--ink)}
/* รายละเอียดคนกดยกเลิกการจัดสรร · ต้องเห็นว่าใครสั่งดึงเงินคืนเมื่อไร */
.revwho{margin-top:2px;font-size:10.2px;color:#8c1d17;font-weight:700}
/* ── ✅ แถวที่คู่กรณียืนยันแล้ว (เจ้าของสั่ง 21 ก.ย. 2569 "สถานะเงินต้องเปลี่ยนเป็นอนุมัติ") ── */
.paok{display:inline-block;background:#0a7d47;color:#fff;border:1px solid #0a7d47;border-radius:14px;
  padding:7px 13px;font-size:12px;line-height:1.45;font-weight:700;white-space:nowrap}
/* 💰 เงินอยู่ที่ใคร · บรรทัดแรกตัวใหญ่ (เจ้าของสั่ง 2 ต.ค. 2569) */
.pawhere{display:block;font-size:15px;font-weight:800;letter-spacing:.1px;margin-bottom:3px}
.panomove .pawhere{color:#05532d}
.paok i{color:#d8f0e3;font-style:normal;font-weight:400}
tr.palocked > td{background:#f2f8f4}
.palockwhy{display:block;margin-top:3px;font-size:9px;line-height:1.35}
.pawho{display:block;margin-top:3px;font-size:11.5px;font-weight:400;color:#d8f0e3;font-style:normal}
.parevwhy{font-size:10.5px;font-weight:700;color:#8c1d17;margin-inline-start:6px}
.parevwhy.ready{color:#0a7d47}
.parevbtn[disabled]{opacity:.45;cursor:not-allowed}
.paapproved{margin:6px 0 0;font-size:10.5px;color:#08713f;background:#e8f7ef;
  border:1px solid #b8dec8;border-radius:9px;padding:6px 9px}
.paunmatched{margin:7px 0 0;font-size:10.5px;color:#8c1d17;background:#fdf3f2;
  border:1px solid #e9a0a0;border-radius:9px;padding:7px 10px}
.pafix{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#eef5ff;color:#1f3d70;
  font-size:13px;line-height:1.55}
.pasplits{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pasplits>li{background:#fff;border:1px solid #e8d7d5;border-radius:9px;padding:9px 11px}
.pasplitall-btn{margin-top:9px;font:inherit;font-size:14px;font-weight:600;padding:10px 20px;
  border-radius:9px;border:1px solid #1c6e46;background:#1c6e46;color:#fff;cursor:pointer;width:100%}
/* 🔒 เตือนก่อนยืนยัน · ล็อกเฉพาะช่องที่เกี่ยว (27 ก.ย. 2569) */
.lockwarn{margin:8px 0 4px;padding:7px 11px;border-radius:9px;background:#fff7e6;border:1px solid #f0d49a;color:#8a5a00;font-size:12.5px;line-height:1.45}
.lockwarn b{color:#6b4400}
.paspl-ann label{color:#8a5a0c}
.paspl-head{font-size:12px;color:#5b2f2b;margin-bottom:5px}
.paspl-form{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.paspl-form label{font-size:12px;color:#5d5952}
.paspl-form input{width:118px;text-align:right;padding:6px 9px;border:1px solid #c7c0b4;
  border-radius:7px;font:inherit;font-size:14px;font-variant-numeric:tabular-nums}
.paspl-form button{font:inherit;font-size:12.5px;font-weight:600;padding:6px 13px;border-radius:7px;
  border:1px solid #1c6e46;background:#1c6e46;color:#fff;cursor:pointer}
.pasplits i.muted{display:block;margin-top:4px;font-size:10.5px}
.pafix b{font-weight:600}
.paunmatched ul{margin:5px 0 3px;padding-inline-start:17px}
.paunmatched li{margin:3px 0;line-height:1.45}
.paunmatched p{margin:3px 0 0}
.paunmatched.done{color:#14532d;background:#eefaf2;border-color:#9fd8b5}
@media(max-width:620px){
  .patable thead{display:none}.patable,.patable tbody,.patable tr,.patable td{display:block;width:100%}
  .patable tr{border:1px solid var(--line);border-radius:10px;background:#fff;margin:7px 0;padding:6px}
  .patable td{border:0;padding:4px}.patable td.num{text-align:left}
  .panomove,.paok{white-space:normal}
}
/* แถบกรองบนตารางทั้งทีม */
.gridfilter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:6px 0 10px}
/* แถวย่อยรายโต๊ะ — เยื้องเข้ามา สีอ่อนกว่าแถวรวมของคน */
h2.bookhead{margin:18px 0 8px;font-size:14.4px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
h2.bookhead .muted{font-size:11.2px;font-weight:500}
.bookblock{border-top:2px solid var(--line);padding-top:4px;margin-top:10px}
.stat.nextstat{background:#eef4fb;border-color:#c7dcf3}
.stat.nextstat b{color:#12508f}
.bookblock:first-of-type{border-top:none;margin-top:0}
table.gridtable tr.gbook th.gname{padding-left:24px;background:#f7f9fc}
table.gridtable tr.gbook td{background:#fcfdff}
table.gridtable tr.gbook i{font-size:9px}
table.gridtable i.gnet{color:#0b6b3a;font-weight:800}
.gsub b.gnet{color:#0b6b3a}
.gbooktag{font-weight:700;color:var(--brand);font-size:10px}
.gridfilter button{font-size:10.8px;padding:6px 12px}
.gridfilter button.on{background:var(--mark);color:var(--markink);box-shadow:inset 0 0 0 2px var(--markbar)}
table.gridtable tr[hidden]{display:none}
/* ช่อง "ต่อวัน" — ยอดวิเคราะห์ที่แปลงทุกรอบให้เป็นหน่วยวันเท่ากันแล้ว */
table.gridtable th.gperday,table.gridtable td.gperday{position:sticky;right:96px;background:#fffdf3;
  border-left:2px solid #e8d9a8;text-align:right;font-size:9.6px;font-weight:700;white-space:nowrap;padding:4px 8px}
table.gridtable th.gperday{background:#fbf3d9}
table.gridtable i.gdow{display:block;font-style:normal;font-size:9px;font-weight:700;color:#7c8798}
table.gridtable th.gd.gtoday i.gdow{color:var(--brand)}
/* เลขรอบยึดวันตั้งต้นเดิมเสมอ — จ่ายช้าไม่ทำให้วันนัดรอบถัดไปเลื่อน
   2–7 = กำลังเดินรอบ · เก็บ = ถึงวันนัด · ส้ม = จ่ายบางส่วน · แดง = มียอดค้าง */
table.gridtable i.gday{display:block;text-align:center;font-style:normal;font-size:9.6px;font-weight:700;
  color:var(--muted);line-height:1.25;letter-spacing:.02em}
table.gridtable i.gday.hit{color:#fff;background:var(--ok);border-radius:5px;font-weight:800}
table.gridtable i.gday.part{color:#8a4300;background:#fff0dc;border:1px solid #edc48b;border-radius:5px;font-weight:800}
table.gridtable i.gday.over{color:#fff;background:var(--bad);border-radius:5px}
/* หน้าต้องเก็บใครวันนี้ — แถวที่ค้างต้องสะดุดตาก่อนใคร */
table.collecttable tr.grouphead td{background:#eef2f7;font-size:10.8px;border-bottom:2px solid var(--line)}
table.collecttable tr.late td{background:#fdf3f2}
table.collecttable tr.due td{background:#fffaf0}
table.collecttable tr.wait td,table.collecttable tr.noplan td{color:var(--muted)}
.planfold{position:relative}
/* ทำให้ดูออกว่า "กดได้" — เจ้าของสั่ง 3 ก.ย. 69 ว่าตัวหนังสือเปล่า ๆ ดูไม่รู้ว่าเป็นปุ่ม */
.planfold summary{cursor:pointer;list-style:none;font-size:10px;font-weight:600;color:var(--brand);
  white-space:nowrap;display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border:1px solid var(--line);
  border-radius:8px;background:#fff;box-shadow:0 1px 0 rgba(20,30,45,.05);transition:background .12s,border-color .12s}
.planfold summary:hover{background:#eef4fb;border-color:var(--brand)}
.planfold summary:active{transform:translateY(1px)}
.planfold[open] summary{background:var(--brand);border-color:var(--brand);color:#fff}
.planfold summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.planfold summary::-webkit-details-marker{display:none}
.rowbtns{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.rowbtns .planfold summary{display:flex;justify-content:center}
.rowbtns form.inline{display:block}
.rowbtns form.inline button{width:100%;font-size:10px;padding:5px 11px}
.planpop{position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:min(520px,80vw);background:#fff;
  border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.16);padding:12px}
.planhead{margin:0 0 4px;font-weight:700}
i.owed{display:block;font-style:normal;font-size:9.2px;font-weight:700;color:var(--bad)}
/* ช่องค้นหาลูกค้า + กล่องบอกเมื่อหาไม่เจอ */
.findbar{padding:10px 14px;margin-bottom:10px}
.findbar input{font-size:16px}
/* ชื่อใกล้เคียงใต้ช่องค้นหา · 25 ก.ย. 2569 */
.findsuggest{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.findsuggest .sugbtn{font-size:13px;padding:4px 10px}
.findsuggest .sugbtn.on{border-color:var(--ok);color:var(--ok)}
.bulkremove{margin-top:10px}
.bulkremove summary{cursor:pointer}
td.seqcell,th.seqcell{width:52px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
tr.daysum td.seqcell{color:var(--ink);font-weight:700}
.findnone{border-color:#f0d9a8;background:#fff8e6}
.findbig{font-size:12.8px;color:var(--warn)}
/* แถบเตือนบนหน้ากรอกประจำวัน */
.duebar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:#fff8e6;border:1px solid #f0d9a8;
  border-radius:12px;padding:10px 14px;margin-bottom:14px}
.duebar.clear{background:#e6f6ec;border-color:#bfe6ce}
.duebig{font-size:12.8px;font-weight:700;color:var(--warn)}
button.dueonly{background:var(--warn);font-size:11.2px;padding:7px 12px;white-space:nowrap}
.duebar.behindonly{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0}
button.dueonly.on{background:var(--mark);color:var(--markink);box-shadow:inset 0 0 0 2px var(--markbar)}
table.daytable td:last-child{min-width:220px}
table.daytable tr.mustpay td{background:#fffaf0}
table.daytable tr.mustpay.filled td{background:#eefaf1}
.duebar.clear .duebig{color:var(--ok)}
.remitfix summary::-webkit-details-marker{display:none}
.remitfix[open] summary{color:var(--ink);font-weight:700}
.poolform{display:flex;gap:6px;margin-top:4px}
.poolform input{width:100%;padding:6px 8px;font-size:11.2px}
.poolform button{white-space:nowrap}
.quickdays{gap:6px;padding-top:6px;border-top:1px dashed var(--line)}
.quickday{font-size:10.4px;padding:5px 12px}
.quickday.on{background:var(--mark);color:var(--markink);border-color:var(--markbar)}
.monthfold{margin-top:6px}
.monthfold > summary{font-size:10.8px;padding:4px 0}
.daychip{display:inline-flex;align-items:center;justify-content:center;position:relative;
  min-width:34px;height:32px;padding:0 6px;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--ink);text-decoration:none;font-size:11.2px;font-weight:600}
.daychip:hover{border-color:var(--brand);color:var(--brand)}
.daychip.has::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--ok)}
.daychip.on{background:var(--mark);border-color:var(--markbar);color:var(--markink)}
.daychip.on.has::after{background:var(--markink)}
.daychip.istoday{box-shadow:inset 0 0 0 2px #f0b429}
.daychip.off{color:#c3c9d2;background:#f7f8fa;cursor:not-allowed}
.daychip.mini{min-width:16px;height:16px;padding:0;vertical-align:-3px}
.daylegend{margin:8px 0 0;font-size:10px}
/* ── แถบเลือกวันย่อ ติดตารางบันทึก (เจ้าของสั่ง 21 กันยายน 2569) ─────────────
   "มือถือต้องมีปุ่มเลือกวันขยับซ้ายขวา และปุ่มเรียกวันนี้ เหมือนเวอร์ชั่นคอม"
   ⛔ ต้องเห็นทุกขนาดจอ ห้ามซ่อนบนมือถือ นั่นคือจอที่เจ้าของใช้จริง
   ⛔ เกาะขอบบนเวลาเลื่อนตาราง จะได้กดเปลี่ยนวันได้ตลอด */
.daymini{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:5px;
  align-items:center;margin:0 0 6px;padding:5px 6px;background:var(--card,#fff);
  border:1px solid var(--line,#dde3ea);border-radius:9px}
.daymini .daybtn{min-height:34px;display:inline-flex;align-items:center;
  padding:4px 10px;white-space:nowrap;touch-action:manipulation}
.daymini .dmnow{font-size:12.5px;white-space:nowrap}
.daymini .dmlast,.daymini .dmtoday{font-size:11px;white-space:nowrap}
/* ── แถบ "ทำงานแทนเซลล์" หน้าหักกลบ (เจ้าของสั่ง 20 กันยายน 2569) ───────────
   "ถ้าเข้าหน้าของเซลล์ให้เราเป็นเซลล์คนนั้นได้เลย"
   ⛔ ต้องเห็นชัดว่ากำลังกรอกแทนใคร และมีทางกลับเป็นตัวเองเสมอ */
.card.actas{border-inline-start:4px solid var(--brand);background:#eef5fc}
.actaslist{display:flex;flex-wrap:wrap;gap:5px;margin:0}
.actaslist .rlink{display:inline-block;padding:4px 10px;border-radius:999px;
  background:#fff;border:1px solid #a9c5e3;color:var(--brand);font-weight:700;
  text-decoration:none;white-space:nowrap;font-size:11.5px;touch-action:manipulation}
.actaslist .rlink:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.actaslist .rlink.on{background:var(--brand);border-color:var(--brand);color:#fff}
.actaslist .rlink.back{border-style:dashed;color:#5b6675;border-color:#bcc6d2}
table.board td a{color:var(--brand);font-weight:700}
/* ── กางดูรายละเอียดรายคนบนกระดานทีม (เจ้าของสั่ง 20 กันยายน 2569) ─────────
   "ดูรายละเอียดได้ว่ายอดต้องได้ที่เพิ่มมา มีใครเพิ่มอะไรมาให้บ้างของแต่ละคน"
   ⛔ ปิดไว้ก่อนเสมอ กระดานมีหลายสิบแถว กางหมดอ่านไม่ไหว */
tr.bdet{display:none}
tr.bdet.open{display:table-row}
tr.bdet>td{background:#f7fafd;padding:8px 10px}
p.dethead{margin:6px 0 3px;font-size:11.5px;font-weight:700}
table.dettab{font-size:11.5px;width:auto;min-width:320px}
table.dettab th,table.dettab td{padding:2px 8px}
button.bmore{width:20px;height:20px;padding:0;margin-inline-end:4px;line-height:1;
  border:1px solid #a9c5e3;background:#fff;color:var(--brand);border-radius:5px;
  cursor:pointer;touch-action:manipulation;font-size:11px}
button.bmore:hover{background:var(--brand);color:#fff}
button.bmore.on{background:var(--brand);color:#fff}
/* ── คนแบ่งคนที่ 2 หน้าหักกลบ (เจ้าของสั่ง 20 กันยายน 2569) ─────────────────
   "ต้องการให้แบ่งได้สูงสุดสองคน ให้มีตัวเพิ่มคนแบ่งได้ทุกช่อง"
   ⛔ ช่องของคนที่ 2 วาดไว้ครบทุกแถวเสมอ แค่ซ่อนไว้ ห้ามตัดออกจาก HTML
      เพราะเซิร์ฟเวอร์อ่านช่องเรียงกันเป็นชุดตามตำแหน่งแถว */
/* ⛔ คนแบ่งที่ 2 = แถวของตัวเอง (เจ้าของสั่ง 21 ก.ย. 2569 "ให้เป็นสองแถวชัดเจน")
   ⛔ ซ่อนด้วย display:none ห้ามตัดออกจาก HTML · เซิร์ฟเวอร์อ่านช่องเรียงตามลำดับที่เจอ */
/* ── 🧩 แถวแบ่ง · โครงใหม่ (เจ้าของสั่ง 21 กันยายน 2569) ────────────────────────
   ⛔ ซ่อนด้วย display:none ได้ เพราะช่องยังอยู่ในฟอร์มครบ ค่ายังถูกส่งตามปกติ
      ห้ามใช้วิธีไม่วาดแถว เพราะเซิร์ฟเวอร์อ่านช่องเรียงตามลำดับที่เจอ */
tr.sp1row{display:none}
tr.sp1row.on{display:table-row}
tr.sp1row.on > td.spcell{background:#f7fbff;border-top:1px dashed #cfd9e4}
tr.sp2row.on > td.sp2cell{background:#f2f7fd}
td.spcell{padding:7px 9px}
.spline{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.spline select{width:auto;min-width:118px}
.spline input.spnum{width:104px;text-align:right}
.splab{color:var(--brand);font-weight:700;font-size:11.5px;white-space:nowrap}
/* แถบ "เงินต้นก้อนนี้อยู่ที่ไหน" · ติดใต้ช่องเงินของตัวเองเสมอ ห้ามแยกออกไป */
.wherebar{display:flex;gap:5px;align-items:center;flex-wrap:wrap;margin-top:5px;
  background:#fff3e0;border:1px solid #f3d6ae;border-radius:8px;padding:4px 7px;
  font-size:11.5px;color:#8a4b00}
.wherebar b{white-space:nowrap}
.wherebar select{width:auto;min-width:126px;padding:4px 6px;font-size:11.5px}
button.add1{border:1px dashed var(--brand);background:#f3f8ff;color:var(--brand);
  border-radius:8px;padding:6px 10px;font:inherit;font-size:11.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;min-height:34px}
button.add1:hover{background:var(--brand);border-style:solid;color:#fff}
tr.has1 button.add1{display:none}
button.less1{font-size:11px;line-height:1;padding:6px 9px;min-height:30px;
  border:1px dashed #b5271f;background:#fff6f5;color:#b5271f;border-radius:7px;cursor:pointer}
button.less1:hover{background:#8c1d17;border-style:solid;color:#fff}
tr.sp2row{display:none}
tr.sp2row.on{display:table-row}
tr.sp2row.on > td{background:#f6f8fb;border-top:1px dashed #cfd9e4;padding-top:5px;padding-bottom:5px}
tr.sp2row.on > td.sp2lab{font-size:11.5px;color:var(--muted);white-space:nowrap;
  border-left:3px solid var(--brand)}
tr.sp2row.on > td.sp2lab b{color:var(--brand)}
button.add2{font-size:10.5px;padding:1px 6px;margin-top:3px;line-height:1.4;
  background:#fff;border:1px dashed #a9c5e3;color:var(--brand);border-radius:999px;
  cursor:pointer;touch-action:manipulation}
button.add2:hover{background:var(--brand);border-style:solid;color:#fff}
tr.has2 button.add2{display:none}
/* ⛔ ปุ่มเอาแถวคนที่ 2 ออก · อยู่ท้ายแถวของคนที่ 2 ตรงกับปุ่ม ✕ ของแถวบน */
button.less2{font-size:11px;line-height:1;padding:3px 7px;
  background:#fff;border:1px dashed #d9c2c0;color:#8c1d17;border-radius:7px;
  cursor:pointer;touch-action:manipulation}
button.less2:hover{background:#8c1d17;border-style:solid;color:#fff}
/* ── ตารางโน้ตสำคัญ หน้าบัญชีกรุงเทพ ─────────────────────────────────────
   เจ้าของสั่ง 20 ก.ย. 2569 "ข้อความต้องการให้ตัวเล็กเล็กเรียบร้อย ไม่ต้องใหญ่โตมาก"
   ⛔ ห้ามขยายขนาดตัวหนังสือหรือช่องกรอกในกล่องนี้ให้ใหญ่กว่านี้ */
.notecard table.notetab{font-size:11.5px}
.notecard table.notetab th,.notecard table.notetab td{padding:3px 6px;line-height:1.35}
.notecard tr.notestar{background:#fffbe9}
.noteform{display:flex;gap:4px;align-items:center;margin:0;flex-wrap:nowrap}
.noteform input[name=memo]{font-size:11.5px;padding:2px 6px;height:24px;min-width:150px}
.noteform select{font-size:11.5px;padding:2px 4px;height:24px}
.noteform button{font-size:11px;padding:2px 8px;height:24px;line-height:1}
.noteform label{font-size:11px;display:flex;align-items:center;gap:2px;white-space:nowrap}
.noteform input[type=checkbox]{width:13px;height:13px;margin:0}
.notemore{margin:8px 0 0;font-size:11.5px}
.notemore>summary{cursor:pointer;color:var(--muted);padding:3px 0}
/* แถบสรุปยอดของหน้ากรอกประจำวัน — อยู่ติดปุ่มบันทึก บวกให้เองระหว่างพิมพ์ */
/* เจ้าของสั่งไม่ให้ล็อคติดหน้าจอ — ให้เลื่อนไปกับหน้าเหมือนกล่องอื่น */
/* ช่องที่ระบบเติมยอดให้ล่วงหน้า — พื้นเหลืองอ่อน บอกว่ายังไม่ได้ยืนยัน ต้องตรวจก่อน
   พอคนแตะแก้เอง สคริปต์จะถอดคลาสนี้ออก กลายเป็นช่องปกติ */
input.cell.prefill{background:#fffbe9;border-color:#e6d38a;font-weight:700}
input.cell.prefill:focus{background:#fff}
/* ช่องปรับเพดานในตารางยอดฝาก — แคบพอดีตัวเลข ไม่ให้ตารางบาน */
.limitform{display:flex;gap:5px;align-items:center}
.limitform input{max-width:96px;text-align:right}
/* ตารางต้องเก็บวันนี้ บนสุดของหน้ากรอกประจำวัน */
.duetop{border-top:3px solid var(--bad)}
.duetop.clear{border-top-color:var(--ok)}
.duetophead{display:flex;gap:12px;flex-wrap:wrap;align-items:baseline;margin-bottom:8px}
.duetophead .seebtn{margin-left:auto}
table.duetoptab td,table.duetoptab th{padding:5px 8px;font-size:10.8px}
table.duetoptab tr.total td{background:#f4f7fb;font-weight:700;border-top:2px solid var(--ink)}
.savebar{border-top:4px solid var(--brand)}
/* แถวสรุปท้ายตาราง ตัวเลขต้องตรงคอลัมน์กับช่องที่กรอกด้านบน */
.daysum td{border-top:2px solid var(--ink);background:#f7f9fc;vertical-align:top;padding-top:10px}
.daysum .muted{font-size:9px;font-weight:400}
.sumhead{font-weight:700;margin-bottom:6px}
table.sumline{max-width:440px}
table.sumline td{padding:3px 4px}
.stat .mz{font-size:16px}
table.ledger tr.total td{border-top:2px solid var(--ink);border-bottom:none;font-size:14.4px;padding-top:10px}
.flowcard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:#fbfcfe}
.flowcard.pending{background:#fffdf6;border-color:#eadfc4}
/* ใบที่ยกเลิก/จบแล้ว — บรรทัดเดียว สีจาง ขีดฆ่าเลขที่ใบ ให้รู้ทันทีว่าไม่ต้องสนใจแล้ว */
.flowcard.closed{background:#f7f8fa;border-color:#e3e7ec;padding:7px 11px;display:flex;
  flex-wrap:wrap;align-items:center;gap:7px;font-size:10.4px}
.flowcard.closed .strike{text-decoration:line-through;color:var(--muted);font-weight:700}
.flowcard.closed .nocount{margin-left:auto;font-size:9.6px}
.flowhead{margin-bottom:6px;font-size:11.2px}
.flowline{display:flex;gap:8px;align-items:baseline;padding:5px 0;border-top:1px dashed var(--line)}
.flowline .tag{flex:0 0 130px;color:var(--muted);font-size:10.8px}
.flowline .who2{flex:1;font-weight:600}
.flowline .amt{font-variant-numeric:tabular-nums;font-weight:700}
/* บรรทัด "เก็บจาก" คือต้นทางของเงินทั้งใบ ต้องเด่นกว่าบรรทัดแบ่งย่อย */
.flowline.from{background:#e9f6ef;border-left:4px solid var(--ok);border-radius:8px;
  padding:8px 10px;margin-bottom:4px;border-top:0}
.flowline.from .tag{color:var(--ok);font-weight:800;font-size:11.2px}
.flowline.from .who2{font-size:12.8px;font-weight:800}
.flowline.from .amt{color:var(--ok);font-size:13.6px}
.flowline.to .tag{padding-left:6px}
.flowline.to .amt{color:var(--bad)}
.flowline.keep{border-top:1px solid var(--ink)}
.flowline.keep .tag,.flowline.keep .amt{color:var(--ink)}
/* ปุ่มแก้ใบ — ซ่อนฟอร์มไว้ กดแล้วค่อยกางออก ใบจะได้อ่านง่าย */
/* ปุ่มยกเลิกค่าใช้จ่ายท้ายแถว — เป็นปุ่มแดงจาง ๆ ให้เห็นว่ากดได้ แต่ไม่แย่งสายตาจากช่องกรอก */
td.excancel,th.excancel{width:104px;min-width:104px;text-align:right}
/* เครื่องคิดเลขในแถวรายชื่อลูกค้า — แถวที่กำลังกรอกต้องเด่นออกมา */
/* ปุ่มของคนที่ปรับยอดไปแล้ววันนี้ — เปลี่ยนเป็น "แก้ไข" สีเขียว จะได้รู้ว่าแตะไปแล้ว
   (เจ้าของสั่ง 5 ก.ย. 2569) · ขึ้นวันใหม่กลับเป็น "ปรับยอด" เอง */
/* ปุ่มบันทึกในแถว — ยังไม่กด = ฟ้าอ่อน · บันทึกแล้ว = เขียวทึบ (เจ้าของสั่ง 5 ก.ย. 2569) */
button.rowsave{background:#e8f0fb;color:var(--brand);border:1px solid #c3d8f2;font-weight:700}
button.rowsave:hover{background:#d8e6f8}
/* บันทึกแล้ว — ป้ายเขียวบอกสถานะ กับปุ่มแก้ไขสีชมพูแดง (เจ้าของสั่ง 5 ก.ย. 2569) */
.savedtag{display:block;margin-bottom:4px;padding:2px 9px;border-radius:999px;background:var(--good-bg,#eafaf1);
  color:var(--ok);font-size:9.6px;font-weight:700;white-space:nowrap;text-align:center}
button.rowedit{background:#fbe4ea;color:#b3264e;border:1px solid #f2bfcd;font-weight:700}
button.rowedit:hover{background:#f7d2dd}
input.cell[readonly]{background:#f2f4f7;color:var(--muted);cursor:not-allowed}
/* ปุ่มยืนยันท้ายแถวในหน้ากรอกประจำวัน (เจ้าของสั่งเอาช่องหมายเหตุออก 5 ก.ย. 2569) */
/* ช่องแจ้งเตือนท้ายแถว — ป้ายกับปุ่มอยู่บรรทัดเดียวกัน แถวจะได้เตี้ยลงและสูงเท่ากันทุกแถว
   (เจ้าของสั่ง 5 ก.ย. 2569 ว่าเดิมซ้อนกัน 3 บรรทัด ดูขยุกขยิก) */
/* ช่องแจ้งเตือน — เจ้าของสั่ง 5 ก.ย. 2569 ให้ป้ายอยู่บรรทัดบน ปุ่มอยู่บรรทัดล่างเสมอ
   ของเดิมปนกันในบรรทัดเดียว พอป้ายยาวปุ่มก็ตกบรรทัดมั่ว แต่ละแถวไม่เท่ากัน */
.duerow{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.duetags{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.duetags:empty{display:none}
.duebtns{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.duerow .exsaved{margin-left:0}
.duerow button.rowclear{flex:0 0 auto;padding:2px 9px;font-size:9.2px;background:#f4f6f9;
  color:var(--muted);border:1px solid var(--line);border-radius:8px;font-weight:700;white-space:nowrap}
.duerow button.rowclear:hover{background:#fdeceb;color:var(--bad);border-color:#f3c2bd}
.duerow button.rowsave,.duerow button.rowedit{flex:0 0 auto;padding:2px 9px;font-size:9.2px;
  line-height:1.7;border-radius:999px;white-space:nowrap}
/* ตัวเลขดอกตามรอบ กดได้ — เปิดกล่องลดดอก/แก้ดอก/แก้ยอดที่ลงผิด (ย้ายมาจากปุ่มปรับยอดเดิม) */
button.duenum{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--brand);
  cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
button.duenum:hover{color:var(--ink)}
.didnote{font-size:9.2px;color:var(--ok);font-weight:600;margin-top:3px;text-align:right}
/* แถวค่าใช้จ่ายที่บันทึกลงสมุดแล้ว — เขียวทั้งแถว จะได้แยกออกจากแถวที่ยังพิมพ์ค้างอยู่ */
#dayextable tr.filled td,#extable tr.filled td,table.daytable tr.filled td{background:#eafaf1}
#dayextable tr.filled input.cell,#extable tr.filled input.cell,table.daytable tr.filled input.cell{background:#eafaf1;border-color:#bfe3cd;color:#0a7d47;font-weight:600}
/* ปุ่มบันทึกเปลี่ยนสีเมื่อบันทึกครบแล้ว จะได้ไม่กดซ้ำ */
.savedbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 11px;border-radius:9px;
  background:#eafaf1;border:1px solid #bfe3cd;color:#0a7d47;font-weight:700;font-size:11.2px;margin-bottom:8px}
.savedbar .when{font-weight:600;color:#0a7d47;opacity:.85}
button.saved{background:#0a7d47;border-color:#0a7d47}
/* ช่องหมายเหตุในตารางรายวัน — เจ้าของสั่ง 5 ก.ย. 69 ให้เล็กลง จะได้เหลือที่ให้ช่องตัวเลข */
input.cell.notecell{max-width:150px;font-size:10.4px;padding:4px 6px}
span.exsaved{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;
  background:#0a7d47;color:#fff;font-size:9.2px;font-weight:700;white-space:nowrap;vertical-align:middle}
td.excancel .delfold{margin-top:0;border-top:0;padding-top:0}
.delfold>summary{border-color:#e6c9c6;color:var(--bad);background:#fff;font-size:10px;padding:3px 9px}
.delfold>summary:hover{border-color:var(--bad);background:#fdf3f2;box-shadow:0 1px 6px rgba(179,38,30,.16)}
.delfold[open]>summary{background:var(--bad);color:#fff;border-color:var(--bad)}
.delfold[open]>summary::after{color:#fff}
.delfold .editpop{width:300px;right:0;left:auto;text-align:left}
/* ป้าย "ฝากไว้ที่ต้นทาง" — บอกว่ายอดนี้ตกลงกันว่าไม่ต้องโอนเงินจริง
   ต้องเด่นพอให้ทั้งคนออกใบและคนรับส่วนแบ่งเห็นตรงกัน จะได้ไม่มีใครนั่งรอเงินโอน */
.pill.keep{background:#eef7f0;color:#0a7d47;border:1px solid #bfe3cd;font-weight:700}
.keepnote{margin-top:4px;font-size:10px;line-height:1.45;color:#0a7d47;
  background:#f2faf5;border-left:3px solid #0a7d47;border-radius:0 6px 6px 0;padding:5px 8px}
.editfold{position:relative;margin-top:8px;border-top:1px dashed var(--line);padding-top:8px}
.editfold>summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:8px;padding:5px 11px;background:#fff;
  font-size:11.2px;font-weight:700;color:var(--brand);transition:border-color .12s,box-shadow .12s}
.editfold>summary::-webkit-details-marker{display:none}
.editfold>summary::after{content:'▾';font-size:9.6px;color:var(--muted)}
.editfold>summary:hover{border-color:var(--brand);box-shadow:0 1px 6px rgba(11,92,171,.16)}
.editfold[open]>summary{background:var(--brand);color:#fff;border-color:var(--brand)}
.editfold[open]>summary::after{content:'▴';color:#fff}
.editpop{position:absolute;z-index:30;left:0;top:calc(100% + 6px);width:min(430px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.16);padding:12px}
.editpop p.muted{margin:0 0 8px}
.popbtns{display:flex;gap:6px;flex:1 1 100%}
.ownedit .row{gap:8px}
.ownform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1 1 260px}
.ownform input{flex:1 1 110px;min-width:0;padding:6px 8px;font-size:11.2px}
.ownform button{padding:7px 11px;font-size:10.8px;white-space:nowrap}
.adjustbox{border-top:4px solid var(--line)}
.adjustbox.ok{border-top-color:var(--ok)}
.adjustbox.bad{border-top-color:var(--bad)}
.adjustbox.mute{border-top-color:var(--muted)}
.adjustbox{border-top-width:4px}
.adjustone{border-top:4px solid var(--brand)}
.adjusthead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.adjusthead b{font-size:12.8px;white-space:nowrap}
.booktable .grid{margin-bottom:12px}
/* ⛔ ปุ่มกางกล่อง ต้องกดติดด้วยนิ้วบนแท็บเล็ตและมือถือ (เจ้าของแจ้ง 19 ก.ย. 2569
 *    "หน้ากรุงเทพในแท็บเล็ต กดเปิดปิดย่อเงินของเราฝากไว้ที่ใครค้าง")
 *    เดิมสูงแค่ราว 18 จุด และไม่ได้กันการลากเลือกข้อความ
 *    นิ้วที่แตะจึงกลายเป็นการลากเลือกตัวหนังสือแทนการกด → รู้สึกเหมือนค้าง
 *    ⛔ ห้ามเอา touch-action / user-select / min-block-size ออก */
.foldable summary{cursor:pointer;font-size:12.8px;list-style:none;padding:7px 0;
  min-block-size:38px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  touch-action:manipulation;-webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:rgba(11,92,171,.14)}
.foldable summary::-webkit-details-marker{display:none}
.foldable summary::before{content:'▸ ';color:var(--brand);font-weight:700}
.foldable[open] summary::before{content:'▾ '}
.foldable[open] summary{margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.datebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 10px;margin-bottom:14px}
.datebar select{width:auto;padding:6px 8px}
/* ปุ่มวันก่อนหน้า/ถัดไป ทำให้จางลง จะได้ไม่แย่งสายตากับวันที่กำลังเปิดอยู่ */
a.daybtn{display:inline-block;background:#f6f8fa;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:10.8px;font-weight:600;text-decoration:none;white-space:nowrap}
a.daybtn:hover{background:#eef2f7;color:var(--ink);border-color:var(--brand)}
.daynow{color:var(--ok);font-weight:700;font-size:11.2px}
.daynowbig .nowtag{font-size:9px;font-weight:700;background:var(--mark);color:var(--markink);border-radius:5px;padding:1px 6px}
.dayback{color:var(--warn);font-weight:700;font-size:11.2px}
.monthhead{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.monthhead b{font-size:12.8px}
/* ตารางสรุปรายเดือน — ตรึงคอลัมน์วันที่กับหัวตารางไว้ (เจ้าของสั่ง 6 ก.ย. 2569)
   เลื่อนไปดูคอลัมน์ขวาสุดแล้วยังต้องรู้ว่าบรรทัดนั้นคือวันที่เท่าไร */
table.monthtable{font-size:11.2px}

/* ── ขยายตาราง Excel เต็มจอ (เจ้าของสั่ง 6 ก.ย. 2569) ──
 * จอมือถือดูตารางทั้งเดือนลำบาก กดปุ่มแล้วซ่อนทุกอย่างเหลือแต่ตาราง
 * ปุ่มกลับลอยอยู่มุมขวาบน กดแล้วหรือกด Esc ก็กลับหน้าปกติ
 */
/* ปุ่ม ⛶ เต็มจอ — เจ้าของสั่ง 7 ก.ย. 2569 ให้มีบนคอมด้วย ไม่ใช่เฉพาะมือถือ
   เพราะกล่องตารางสูงแค่ 66% ของจอ เลื่อนขึ้นลงในกล่องเล็ก ๆ ลำบาก */
.bkfullbar{display:block;margin:0 0 7px}
/* แถบเลือกจำนวนวันที่จะวาด (เจ้าของสั่ง 8 ก.ย. 2569 "โหลดเฉพาะวันที่มองเห็น") */
.bkrange{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 7px;font-size:10.4px}
.bkrange .rbtn{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);background:var(--card);color:var(--brand);font-weight:700;text-decoration:none;white-space:nowrap}
.bkrange a.rbtn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.bkrange .rbtn.on{background:var(--mark);border-color:var(--markline);color:var(--markink);cursor:default}
.bkrange .rnote{color:var(--muted);font-size:9.6px}
/* ── หน้าหักกลบรายวัน (เจ้าของสั่ง 19 ก.ย. 2569) ── */
.clrtable{width:100%;border-collapse:collapse;font-size:12px}
.clrtable th,.clrtable td{padding:4px 5px;border-bottom:1px solid var(--line);text-align:left}
.clrtable th{color:var(--muted);font-size:10px;font-weight:700}
.clrtable .r{text-align:right;font-variant-numeric:tabular-nums}
/* ⛔ ตัวหนังสือในช่องเลือกต้องเล็กพออ่านได้ครบ ไม่ถูกตัดกลางคำ
   เจ้าของสั่ง 20 ก.ย. 2569 "ปรับขนาดตัวหนังสือให้เล็กเพื่ออ่านง่ายทุกช่อง"
   เดิม 12.5px + padding 8px ทำให้ช่องกว้าง 72-83px เห็นแค่ "ให้โ" กับ "— ไม่แบ่ง" */
.clrtable select,.clrtable input{width:100%;min-block-size:30px;font-size:11px;padding:4px 5px}
.clrtable select{text-overflow:ellipsis}
.clrtable tr.mine{background:var(--mark)}
.clrtable tr.sumrow td{font-weight:700;border-top:1px solid var(--line)}
.clrtable .neg{color:var(--bad);font-weight:700}
.clrtable .pos{color:var(--ok);font-weight:700}
/* แถวรวมท้ายกระดานของทั้งทีม (เจ้าของสั่ง 20 ก.ย. 2569) — ต้องหนาและมีเส้นคั่นให้เห็นว่าเป็นยอดรวม */
.card.heldbox{border-color:#c9ddf5;background:#f6faff}
/* ── 📱 มือถือ · ตารางกรอกของหน้าหักกลบ (เจ้าของสั่ง 20 กันยายน 2569) ──────────
   "ช่วยดูเวอร์ชั่นมือถือในเมนูหักกลบให้ด้วย ปรับและแก้ไขให้กรอกง่ายขึ้น"
   ⛔ ของเดิมบีบ 10 คอลัมน์ลงจอ 375px ช่องเงินเหลือกว้าง 35px
      พิมพ์ 20,000 แล้วเห็นแค่ "2" · ต้องเลื่อนซ้ายขวาหาช่อง กรอกไม่ได้จริง
   ⛔ วิธีแก้: จอเล็กเปลี่ยนจาก "ตาราง" เป็น "การ์ดทีละแถว" ช่องเรียงลงมาพร้อมป้ายชื่อ
   ⛔ ห้ามลบหรือสลับตำแหน่ง input เด็ดขาด — ฝั่งเซิร์ฟเวอร์อ่านช่องเรียงตามลำดับแถว
      (ctx.form.getAll) สลับเมื่อไรยอดของคนหนึ่งไปโผล่ที่ชื่ออีกคนทันที
      ตรงนี้จึงแก้ด้วย CSS ล้วน ๆ + ป้าย data-th เท่านั้น
   ⛔ ใช้เฉพาะสองตารางที่ "กรอก" (#clrtbl1 #clrtbl3) ตารางอ่านอย่างเดียวปล่อยเลื่อนได้ */
@media (max-width: 700px){
  #clrtbl1, #clrtbl3, #clrtbl1 tbody, #clrtbl3 tbody{display:block;width:100%}
  #clrtbl1 thead, #clrtbl3 thead{display:none}
  /* ⛔ ขอบการ์ดต้องเห็นชัดว่าแถวไหนจบตรงไหน (เจ้าของสั่ง 21 กันยายน 2569
        "ต้องการใส่ขอบเส้นกล่องแต่ละกล่องให้ชัด จะได้รู้ว่าจบขั้นตอนแค่ไหน แต่ละจุดแต่ละกล่อง")
     ⛔ ของเดิมเส้นบางสีเดียวกับพื้น เลื่อนยาว ๆ แล้วแยกไม่ออกว่าแถวใหม่เริ่มตรงไหน */
  #clrtbl1 > tbody > tr, #clrtbl3 > tbody > tr{
    display:block;border:2px solid #c3d4e6;border-radius:14px;
    padding:10px 12px 12px;margin:0 0 16px;background:var(--card);
    box-shadow:0 1px 4px rgba(16,32,56,.07)}
  #clrtbl1 > tbody > tr:nth-child(even), #clrtbl3 > tbody > tr:nth-child(even){background:#fbfdff}
  /* เลขแถวมุมบน บอกว่านี่คือรายการที่เท่าไร กันหลงว่าอยู่แถวไหน */
  #clrtbl1 > tbody > tr, #clrtbl3 > tbody > tr{counter-increment:clrrow}
  #clrtbl1 > tbody, #clrtbl3 > tbody{counter-reset:clrrow}
  #clrtbl1 > tbody > tr::before, #clrtbl3 > tbody > tr::before{
    content:'รายการที่ ' counter(clrrow);display:block;margin:-2px 0 8px;
    font-size:11px;font-weight:800;color:#5a7a99}
  #clrtbl1 > tbody > tr > td, #clrtbl3 > tbody > tr > td{
    display:flex;align-items:center;gap:8px;border:0;padding:5px 0;width:auto}
  #clrtbl1 > tbody > tr > td::before, #clrtbl3 > tbody > tr > td::before{
    content:attr(data-th);flex:0 0 38%;max-width:38%;
    font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.3}
  #clrtbl1 > tbody > tr > td input, #clrtbl1 > tbody > tr > td select,
  #clrtbl3 > tbody > tr > td input, #clrtbl3 > tbody > tr > td select{
    flex:1 1 auto;width:100%;min-width:0;font-size:14px;padding:8px 9px;min-block-size:40px}
  /* ช่องเงินต้องอ่านง่ายที่สุด ชิดขวาแบบสมุดบัญชี */
  #clrtbl1 > tbody > tr > td input[inputmode="decimal"],
  #clrtbl3 > tbody > tr > td input[inputmode="decimal"]{text-align:right;font-weight:700}
  /* ช่องที่มีทั้งคนที่ 1 และคนที่ 2 ให้เรียงลงมา ไม่เบียดกันข้าง ๆ
     ⛔ ตัวแรกต้องอยู่ "บรรทัดเดียวกับป้ายชื่อ" เหมือนช่องอื่น ไม่งั้นการ์ดอ่านแล้วสะดุด
        จึงต้องปล่อยให้ย่อได้ (flex-basis 0 + width auto) ห้ามใส่ width:100% */
  #clrtbl1 > tbody > tr > td.splitcell, #clrtbl3 > tbody > tr > td.splitcell{flex-wrap:wrap}
  #clrtbl1 > tbody > tr > td.splitcell > select:not(.sp2),
  #clrtbl1 > tbody > tr > td.splitcell > input:not(.sp2),
  #clrtbl3 > tbody > tr > td.splitcell > select:not(.sp2),
  #clrtbl3 > tbody > tr > td.splitcell > input:not(.sp2){flex:1 1 0;width:auto}
  #clrtbl1 > tbody > tr > td.splitcell > .add2, #clrtbl3 > tbody > tr > td.splitcell > .add2{
    flex:0 0 auto;width:auto}
  /* ⛔ บนมือถือแถวคนที่ 2 กลายเป็นการ์ดของตัวเอง ต้องเห็นว่าพ่วงกับการ์ดข้างบน
        ไม่งั้นเลื่อนแล้วนึกว่าเป็นรายการใหม่คนละก้อน */
  #clrtbl1 > tbody > tr.sp2row.on, #clrtbl3 > tbody > tr.sp2row.on{
    margin-top:-6px;border-top-left-radius:0;border-top-right-radius:0;
    border-left:3px solid var(--brand);background:#f6f8fb}
  #clrtbl1 > tbody > tr.sp2row > td.sp2gap, #clrtbl3 > tbody > tr.sp2row > td.sp2gap{display:none}
  #clrtbl1 > tbody > tr.sp2row > td.sp2lab, #clrtbl3 > tbody > tr.sp2row > td.sp2lab{
    display:block;border-left:0;font-size:12.5px;padding-bottom:2px}
  /* ปุ่มลบแถวไปอยู่ล่างสุดของการ์ด เต็มความกว้าง กดง่าย ไม่กดโดนเวลาเลื่อน */
  /* ── ⛔ หัวข้อคั่นหมวดบนมือถือ (เจ้าของสั่ง 21 ก.ย. 2569
        "แยกหมวดเงินต้นเงินดอกออกจากกัน ... เงินดอกอยู่ด้านหน้า เงินต้นอยู่ด้านหลัง")
     ⛔ ต้องเห็นชัดว่าช่องข้างล่างเป็นของก้อนไหน ไม่งั้นเลื่อนแล้วสับสน */
  #clrtbl1 > tbody > tr > td.gh{
    display:block;margin:9px 0 3px;padding:5px 9px;border:0;border-radius:8px;
    font-size:11.5px;font-weight:800;letter-spacing:.02em}
  #clrtbl1 > tbody > tr > td.gh::before{content:none}
  #clrtbl1 > tbody > tr > td.gh-int{background:#eef7f1;color:#0a5b36}
  #clrtbl1 > tbody > tr > td.gh-prin{background:#eef4fb;color:#17518c}
  /* ⛔ ราวสีข้างซ้าย ลากคลุมทุกช่องในหมวดนั้น (เจ้าของสั่ง 21 กันยายน 2569
        "ใส่ขอบเส้นกล่องแต่ละกล่องให้ชัด จะได้รู้ว่าจบขั้นตอนแค่ไหน")
     เขียว = ยังอยู่ในหมวดดอก · ฟ้า = เข้าหมวดเงินต้นแล้ว · ราวหายเมื่อถึงปุ่มลบ = จบแถว
     ⛔ ใช้ตัวเลือกพี่น้อง (~) เพราะหมวดเงินต้นอยู่หลังหมวดดอกเสมอ ทับสีกันตามลำดับ */
  #clrtbl1 > tbody > tr > td.gh-int ~ td{
    border-left:3px solid #b7dcc6;padding-left:9px;border-radius:0 0 0 4px}
  #clrtbl1 > tbody > tr > td.gh-prin ~ td{border-left-color:#b9d3ee}
  #clrtbl1 > tbody > tr > td.gh{border-left:0;padding-left:9px}
  /* ⛔ ต้องระบุให้แม่นกว่าราวของหมวด ไม่งั้นราวสีลากเลยไปถึงปุ่มลบ
     แล้วดูเหมือนปุ่มลบอยู่ในหมวดเงินต้น ทั้งที่เป็นของทั้งแถว */
  #clrtbl1 > tbody > tr > td.gh-int ~ td.rowdel{border-left:0;padding-left:0}
  /* ช่องในหมวดไหน ใช้พื้นสีอ่อนของหมวดนั้น จะได้กวาดตาแล้วรู้ทันที */
  #clrtbl1 > tbody > tr > td.rowdel, #clrtbl3 > tbody > tr > td.rowdel{
    border-top:1px dashed var(--line);margin-top:5px;padding-top:7px}
  #clrtbl1 > tbody > tr > td.rowdel::before, #clrtbl3 > tbody > tr > td.rowdel::before{flex:0 0 38%}
  /* ⛔ ปุ่ม ✕ บนมือถือเคยเป็นกล่องขาวบนพื้นขาว มองแทบไม่เห็น (เจ้าของส่งภาพจากมือถือจริง
        20 ก.ย. 2569) · ต้องมีเส้นขอบและพื้นสีชัด ไม่งั้นนึกว่าไม่มีปุ่ม
     ⛔ แต่ห้ามทำให้เด่นกว่าปุ่มบันทึก เป็นปุ่มลบ กดพลาดแล้วของหาย */
  #clrtbl1 > tbody > tr > td.rowdel button, #clrtbl3 > tbody > tr > td.rowdel button{
    flex:1 1 auto;width:100%;min-block-size:40px;font-size:13px;border-radius:10px;
    background:#fdeceb;border:1px solid #c98a85;color:#8c1d17}
  /* การ์ดกว้างเต็มจอแล้ว ไม่ต้องเลื่อนซ้ายขวาอีก */
  #clrtbl1, #clrtbl3{min-width:0}
  /* ── ⛔ ปุ่มเพิ่มต้องเห็นชัดทุกจุด (เจ้าของแจ้ง 20 กันยายน 2569
        "เวอร์ชั่นมือถือเมนูหักกลบไม่มีปุ่มเพิ่มทุกจุด")
     ที่จริงปุ่มอยู่ครบ แต่เล็กมากจนหาไม่เจอบนมือถือ — วัดจริงบนจอ 375px
     "➕ เพิ่มอีก 1 ช่อง" กว้าง 110px และไปอยู่ท้ายสุดหลังการ์ดสูง ๆ หลายใบ
     "➕ อีกคน" กว้างแค่ 54px เป็นเม็ดจิ๋วซ่อนอยู่ข้างช่องเลือกชื่อ
     ⛔ บนมือถือต้องเต็มความกว้าง สูงพอให้นิ้วกด และเป็นสีของปุ่มจริง ๆ
     ⛔ ห้ามเปลี่ยนคลาสหรือ data- ของปุ่ม สคริปต์เพิ่มแถวจับจากตรงนั้น */
  /* ⛔ กล่องใหญ่ทุกใบต้องมีขอบชัด (เจ้าของสั่ง 21 กันยายน 2569 "แต่ละจุดแต่ละกล่อง")
     ⛔ จำกัดไว้เฉพาะหน้าหักกลบ ไม่ไปกระทบหน้าอื่นทั้งเว็บ */
  /* ⛔ หนาเฉพาะสามด้าน · ด้านซ้ายปล่อยไว้ เพราะหลายกล่องใช้แถบสีซ้ายบอกประเภทอยู่แล้ว */
  .clrpage .card{border-top-width:2px;border-right-width:2px;border-bottom-width:2px}
  .clraddrow{gap:7px}
  .clraddrow > button.clradd{
    flex:1 1 100%;width:100%;min-block-size:46px;font-size:14px;font-weight:800;
    background:var(--brand);color:#fff;border-color:var(--brand);border-radius:10px}
  .clraddrow > .muted{flex:1 1 100%;text-align:center;font-size:11.5px}
  #clrtbl1 > tbody > tr > td.splitcell > button.add2,
  #clrtbl3 > tbody > tr > td.splitcell > button.add2,
  #clrtbl1 > tbody > tr.has2 > td.splitcell > button.less2,
  #clrtbl3 > tbody > tr.has2 > td.splitcell > button.less2{
    flex:1 1 100%;width:100%;margin-left:38%;max-width:62%;
    min-block-size:38px;font-size:12.5px;font-weight:700;border-radius:10px;
    border-style:solid;background:#eef4fb}
  /* ── ⛔ ปุ่มลงมือทุกปุ่มต้องเต็มความกว้างบนมือถือ (เจ้าของแจ้ง 20 กันยายน 2569
        "ไม่มีปุ่มเพิ่มทุกจุด" · "ไม่มีปุ่มยืนยันด้วย")
     ที่จริงปุ่มอยู่ครบทุกปุ่ม แต่เล็กจนมองไม่เห็นบนมือถือ — วัดจริงบนจอ 375px
        "บันทึกทุกช่อง" กว้าง 94px · "✅ ยอดถูกต้อง ยืนยัน" กว้าง 131px
        ทั้งคู่เป็นปุ่มที่ต้องกดจริงทุกวัน แต่เล็กกว่าปุ่มลบแถวเสียอีก
     ⛔ ปุ่มยืนยันอยู่ในฟอร์ม display:inline ต้องปลดเป็น block ก่อน ไม่งั้นยืดไม่ได้
     ⛔ ห้ามเปลี่ยนคลาสหรือ formaction ของปุ่ม สคริปต์และเซิร์ฟเวอร์จับจากตรงนั้น */
  .askconfirm ul{padding-left:16px}
  .askconfirm li{margin:10px 0}
  .askconfirm form.inline{display:block;margin:6px 0 0}
  .askconfirm button.okbtn{width:100%;min-block-size:46px;font-size:14px;border-radius:10px}
  .okconfirm ul{padding-left:16px}
  .okconfirm li{margin:10px 0}
  .okconfirm form.inline{display:block;margin:6px 0 0}
  .okconfirm button.undobtn{width:100%;min-block-size:46px;font-size:14px;border-radius:10px}
  .okconfirm a.chainbtn,.depwait a.chainbtn{display:block;margin:6px 0 0;width:100%;min-block-size:46px;line-height:44px;
    text-align:center;font-size:14px;border-radius:10px}
  .sentwait ul{padding-left:16px}
  .sentwait li{margin:10px 0}
  .sentwait form.inline{display:block;margin:6px 0 0}
  .sentwait button.cancelreq{width:100%;min-block-size:46px;font-size:14px;border-radius:10px}
  .permitbox li{gap:5px}
  .pmline{flex:1 1 100%}
  .permitbox form.inline{display:block;flex:1 1 100%;margin:4px 0 0}
  .permitbox button.okbtn{width:100%;min-block-size:44px;font-size:14px;border-radius:10px}
  .depwaitlist form.inline{display:block;margin:6px 0 0}
  .depwaitlist button.okbtn{width:100%;min-block-size:46px;font-size:14px;border-radius:10px}
  .clrbtns{gap:8px}
  .clrbtns > button{flex:1 1 100%;width:100%;min-block-size:48px;font-size:15px;border-radius:10px}
  /* บนมือถือปุ่มเต็มความกว้างอยู่แล้ว · เพิ่มความสูงกับตัวหนังสือให้กดง่ายขึ้นอีก */
  .clrbtns > button.go{min-block-size:56px;font-size:18px;padding:14px 20px}
  .clrbtns > .pressnote{flex:1 1 100%;text-align:center}
  .runrow button.go, form.runform button.go{width:100%;min-block-size:48px;font-size:15px}
}
/* 🧾 ช่อง 1 แบบบิล (#clrbills · 28 ก.ย. 2569) · จอมือถือเป็นการ์ดทีละบิลเหมือนตารางเดิม
   ⛔ ห้ามสลับลำดับ bill_key / bill_holder · เซิร์ฟเวอร์จับคู่ตามลำดับแถว */
@media (max-width: 700px){
  #clrbills, #clrbills tbody{display:block;width:100%}
  #clrbills thead{display:none}
  #clrbills > tbody > tr{display:block;border:2px solid #c3d4e6;border-radius:14px;
    padding:10px 12px 12px;margin:0 0 16px;background:var(--card);box-shadow:0 1px 4px rgba(16,32,56,.07)}
  #clrbills > tbody > tr.dep{border-color:#9fc3ea}
  #clrbills > tbody > tr > td{display:flex;align-items:center;gap:8px;border:0;padding:5px 0;width:auto;text-align:left}
  #clrbills > tbody > tr > td::before{content:attr(data-th);flex:0 0 38%;max-width:38%;
    font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.3}
  #clrbills > tbody > tr > td[colspan]::before{content:none}
  #clrbills > tbody > tr > td select{flex:1 1 auto;width:100%;min-width:0;font-size:14px;padding:8px 9px;min-block-size:40px}
}
.clrtable tr.boardsum td{border-top:2px solid var(--line);background:#f4f8fb;font-weight:700}
.clrtable tfoot tr.boardsum td{border-top:2px solid var(--line);background:#f4f8fb;font-size:12px;padding-block:7px}
input.bigcash{font-size:20px;font-weight:700;padding:7px 10px;min-block-size:44px;max-width:220px;text-align:right;font-variant-numeric:tabular-nums}
/* สองช่องคู่กันในช่อง 2 · ดอก กับ เงินต้นที่ลูกค้าคืน (เจ้าของสั่ง 20 ก.ย. 2569) */
.cashpair{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0 4px}
.cashcell{display:flex;flex-direction:column;gap:4px}
.cashcell>i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted)}
.cashcell .autotag{color:var(--ok);font-weight:700}
input.bigcash.auto{background:#eef7f1;border-color:#bfe0cc;color:var(--ok);cursor:default}
.card.dayback{background:#f3f8ff;border-color:#c9ddf5}
.clrmoves{margin:0;padding-inline-start:20px;display:flex;flex-direction:column;gap:5px;font-size:12.5px}
.clrmoves .amt{font-weight:700;font-variant-numeric:tabular-nums;color:var(--brand)}
.card.clrpay{border-inline-start:4px solid var(--bad)}
.card.clrget{border-inline-start:4px solid var(--ok)}
.card.clrlocked{border-inline-start:4px solid var(--brand);background:#eef5fc}
.card.clropen{border-inline-start:4px solid var(--warn)}
.card.clrremind{border-inline-start:4px solid var(--markline);background:var(--mark)}
/* กล่องขอแก้ยอดโอนของเซลล์ และกล่องรออนุมัติ (เจ้าของสั่ง 19 ก.ย. 2569) */
.askamend>summary{cursor:pointer;font-size:11px;font-weight:700;color:var(--brand);min-block-size:32px;display:flex;align-items:center;touch-action:manipulation}
.card.askpending{border-inline-start:4px solid var(--warn);background:#fff8e8;margin-top:6px}
.card.askpending p{font-size:11.5px;margin:3px 0}
.clrbtns{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0 0}
/* ── ปุ่มบันทึกทุกช่องต้องใหญ่ กดง่าย (เจ้าของสั่ง 22 กันยายน 2569 "เพิ่มปุ่มให้มีขนาดใหญ่อีก") ──
   ⛔ ปุ่มนี้คือปุ่มที่กดบ่อยที่สุดของหน้านี้ · เล็กแล้วกดพลาดไปโดนปุ่มยกเลิกข้าง ๆ
   ⛔ ปุ่มยกเลิกต้องไม่ใหญ่ตาม จะได้ไม่กดผิดกัน ให้ต่างขนาดกันไว้ */
.clrbtns button.go{min-block-size:52px;font-size:17px;font-weight:700;padding:12px 28px;border-radius:10px}
/* ── ปุ่มบันทึกทุกช่อง · ยังไม่กด = เหลือง (เจ้าของสั่ง 22 กันยายน 2569) ─────────
   "บันทึกทุกช่องถ้ายังไม่กด เปลี่ยนเป็นสีเหลือง"
   ⛔ ทับกติกาเดิม 20 ก.ย. 2569 ที่ให้ "ยังไม่กด = จางทั้งสองสี"
      เฉพาะปุ่มบันทึกเท่านั้น · ปุ่มยกเลิกยังจางเหมือนเดิม จะได้ไม่เด่นแข่งกัน
   ⛔ ต้องเต็มสี (opacity 1) ไม่งั้นเหลืองจะซีดจนดูไม่ออกว่าเหลือง
   ⛔ ตัวหนังสือต้องเข้ม · เหลืองกับขาวอ่านไม่ออก
   ⛔ สามสถานะห้ามซ้ำกัน — เหลือง ยังไม่กด · น้ำเงิน กำลังกด · เขียว บันทึกแล้ว */
.clrbtns button.go{opacity:1;background:#f2b202;border-color:#d79b00;color:#3d2c00;
  box-shadow:0 0 0 3px rgba(242,178,2,.18)}
.clrbtns button.go:hover{background:#dda202;border-color:#c08b00}
.clrbtns:hover button.go{opacity:1}
/* ── สีบอกสถานะปุ่ม (เจ้าของสั่ง 20 กันยายน 2569) ────────────────────────────
   "ให้มีสีแสดงสถานะด้วยว่าตอนนี้กำลังกดปุ่มไหนอยู่
    หากยังไม่กดให้สีจางทั้งสองสี หากกดบันทึกให้ขึ้นสีน้ำเงิน"
   ⛔ ยังไม่กด = จางทั้งคู่ · กดแล้ว = ปุ่มที่กดสด อีกปุ่มจางลงอีกและกดไม่ได้
   ⛔ ติดสีตอน submit จริงเท่านั้น ถ้ากดยกเลิกแล้วตอบ "ไม่ใช่" ในกล่องยืนยัน ต้องไม่ติดสี */
.clrbtns button{opacity:.62;transition:opacity .12s, background-color .12s, box-shadow .12s}
/* ── ✅ บันทึกเสร็จแล้ว ปุ่มเป็นสีเขียว (เจ้าของสั่ง 22 กันยายน 2569) ────────────
   ของเดิมพอหน้าโหลดใหม่ ปุ่มกลับไปจางเหมือนไม่เคยกด คนกรอกเลยกดซ้ำเพราะไม่มั่นใจ
   ⛔ ต้องเต็มสี (opacity 1) ไม่งั้นจะดูเหมือนยังไม่ได้กดเหมือนเดิม */
.clrbtns button.go.saved{opacity:1;background:var(--ok);border-color:var(--ok);color:#fff;
  box-shadow:0 0 0 3px rgba(10,125,71,.16)}
.clrbtns button.go.saved:hover{background:#086036;border-color:#086036}
.clrbtns .pressnote.ok{color:var(--ok);font-weight:700}
.clrbtns:hover button,.clrbtns button:focus-visible{opacity:.82}
.clrbtns button.pressing{opacity:1;box-shadow:0 0 0 3px rgba(34,115,196,.22)}
.clrbtns button.go.pressing{background:#1b63bd;border-color:#1b63bd;color:#fff}
.clrbtns button.ghost.pressing{background:#c4362f;border-color:#c4362f;color:#fff;box-shadow:0 0 0 3px rgba(196,54,47,.22)}
.clrbtns button.dimmed{opacity:.3;cursor:not-allowed}
.clrbtns .pressnote{font-size:12px;color:#5b6675}
/* ลิงก์ย่อ/ขยายช่วงวัน (เจ้าของสั่ง 19 ก.ย. 2569) ต้องกดด้วยนิ้วติด
 * ⛔ นิ้วแตะต้องนับเป็นการกด ไม่ใช่การปัดตาราง จึงต้องมี touch-action:manipulation */
.bkrange .rlink{display:inline-block;padding:5px 10px;margin:1px 0;border-radius:999px;
  min-block-size:26px;line-height:16px;background:#fff;border:1px solid #a9c5e3;color:var(--brand);
  font-weight:700;text-decoration:none;touch-action:manipulation;white-space:nowrap}
.bkrange .rlink:hover{background:var(--brand);border-color:var(--brand);color:#fff}
@media(max-width:900px){.bkrange .rlink{padding:7px 12px;min-block-size:32px;line-height:18px}}
/* แถบปุ่มเลื่อนตาราง — เจ้าของสั่ง 8 ก.ย. 2569 (ตอนแรกทำให้โน้ตบุ๊กที่ไม่มีจอสัมผัส)
   ⛔ เจ้าของสั่งเพิ่ม 21 ก.ย. 2569 (วงปุ่มชุดนี้ในภาพหน้าจอ)
      "ต้องการเวอร์ชั่นหรือปุ่มแบบนี้ในเวอร์ชันมือถือด้วย"
      ของเดิมซ่อนไว้แล้วเปิดเฉพาะเครื่องที่มีเมาส์จริง (hover:hover and pointer:fine)
      มือถือจึงไม่เห็นเลย · ตอนนี้เปิดให้ทุกเครื่อง
   ⛔ ห้ามเอากฎ media query กลับมาซ่อนบนมือถืออีก มือถือคือจอที่เจ้าของใช้จริง */
.bkmove{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:7px 0 0;padding:7px 9px;
  border:1px solid #d7dbe0;border-radius:9px;background:#f6f7f9}
.bkmove b{font-size:12px;color:#5b6470;font-weight:700;margin-right:2px}
.bkmove i.mvsep{width:1px;height:19px;background:#d7dbe0;margin:0 3px}
.bkmove button{font:inherit;font-size:12.5px;line-height:1;padding:7px 11px;border:1px solid #c8ced6;
  border-radius:7px;background:#fff;color:#1f2933;cursor:pointer;white-space:nowrap}
.bkmove button:hover{background:#eef3ff;border-color:#8fa8dd}
.bkmove button:active{background:#dfe8ff}
.bkmove button:disabled{opacity:.38;cursor:default;background:#fff;border-color:#dfe3e8}
/* ⛔ กฎเดิมที่เคยซ่อนบนมือถือถูกเอาออกแล้ว (เจ้าของสั่ง 21 ก.ย. 2569)
   แต่บนจอสัมผัสต้องกดติด ปุ่มจึงต้องสูงพอและนับนิ้วแตะเป็นการกด
   ⛔ แถบต้องไม่ตกบรรทัดจนสูงเกินครึ่งจอ · จอแคบให้เลื่อนแถบเองในแนวนอนแทน */
@media (max-width: 700px) {
  /* ⛔ เจ้าของสั่งย่อ 21 ก.ย. 2569 "ปรับขนาดให้เล็ก"
     ของเดิมสูงเกือบ 60px เพราะคำว่า "เลื่อนตาราง" ตกสองบรรทัดและปุ่มใหญ่
     ⛔ เล็กได้แต่ยังต้องกดติดด้วยนิ้ว · อย่าลดต่ำกว่า 30px */
  .bkmove{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    position:sticky;bottom:0;z-index:6;margin:5px 0 0;padding:4px 6px;gap:4px}
  .bkmove::-webkit-scrollbar{display:none}
  .bkmove > b{position:sticky;left:0;background:#f6f7f9;padding-right:4px;z-index:1;
    font-size:10.5px;white-space:nowrap;margin-right:0}
  .bkmove i.mvsep{height:14px;margin:0 1px}
  /* ⛔ ต้องใส่ :not สามตัวให้น้ำหนักชนะกฎรวมของมือถือที่บรรทัด
     ".daybtn,.seebtn,button:not(.switchbig):not(.navback):not(.bkbackbtn){min-height:40px}"
     ไม่งั้นปุ่มจะถูกดันกลับไปสูง 40px แล้วย่อไม่ลงเลย (เจอจริง 21 ก.ย. 2569) */
  .bkmove button:not(.switchbig):not(.navback):not(.bkbackbtn){
    min-height:30px;padding:4px 8px;font-size:11.5px;
    touch-action:manipulation;flex:0 0 auto}
}
/* เจ้าของสั่ง 8 ก.ย. 2569 — "ต้องการให้สามบรรทัดนี้อยู่ช่องเดียวกันตรง ๆ"
   เดิมปุ่มขอแก้ไขอยู่คนละบรรทัดกับแถบแจ้งเตือน และปุ่มเต็มจอลอยสูงกว่าเพื่อน
   เพราะแถวนี้จัดชิดบน (flex-start) แล้วแต่ละกล่องยังมีระยะห่างล่างของตัวเองอีก
   ตอนนี้ทุกอย่างอยู่แถวเดียวกัน จัดกึ่งกลางแนวตั้ง และล้างระยะห่างล่างทิ้งหมด
   จอแคบให้ตกบรรทัดได้ ไม่บีบจนอ่านไม่ออก */
.bknotirow{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.bknotirow > *{margin-bottom:0}
.bknotirow .bkedithint{margin:0;flex:0 0 auto}
.bknotirow .bknoti{flex:0 1 auto;min-width:0;margin:0;max-width:232px}
.bknotirow .bkdaynow{flex:0 0 auto}
.bknotirow .bkfullbar{flex:0 0 auto;margin:0}
/* เมนูกรองเป็นแถวแรก · เครื่องมือทั้งหมดเป็นแถวที่สอง
 * ถ้ายาวกว่าจอให้เลื่อนข้างแทนการแตกเป็นแถวที่สาม โดยยังคงลำดับกดคีย์บอร์ดเดิม */
.bktoolsrow[data-day-tools]{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow-x:auto;
  overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  margin:0 0 6px;padding-bottom:2px}
.bktoolsrow[data-day-tools] > *{flex:0 0 auto;margin-bottom:0}
.bktoolsrow[data-day-tools] > .bknotirow{flex-wrap:nowrap}
.bktoolsrow[data-day-tools] .bkrange,.bktoolsrow[data-day-tools] .bkfullbar{margin-bottom:0}
button.bkfull{white-space:nowrap}
button.bkhelp{display:none}
.showallrow{display:none}
/* เจ้าของสั่ง 7 ก.ย. 2569 — ปุ่มเต็มจอต้องยาวและเป็นสีเหลือง แยกจากแถบแจ้งเตือนชัด ๆ */
button.bkfull{min-width:150px;font-size:10.5px;font-weight:800;padding:6px 22px;border:1px solid #d9a900;border-radius:8px;
  background:#ffd84d;color:#533a00;box-shadow:0 2px 0 #c79500}
button.bkfull:hover{background:#ffe273;border-color:#bd9000;color:#3f2c00}
body.bkfullon > *:not(.bkbackbar):not(.isfull):not(.bktoast){display:none}
/* เมนูสองก้อนนี้ถูกสร้างเป็นลูกของ body จึงต้องเปิดกลับหลังเข้าสู่โหมดเต็มจอ */
  body.bkfullon > .markpop{display:block!important}
  body.bkfullon > .bkask{display:flex!important}
body.bkfullon{overflow:hidden;margin:0;background:#fff}
.bkwrap.isfull{display:block !important;position:fixed;top:26px;left:0;right:0;bottom:0;z-index:60;
  max-height:none;height:auto;border:0;border-radius:0;margin:0;background:#fff}
/* แถบบนของหน้าเต็มจอ — ปุ่มปิดอยู่ซ้ายมือ กากบาทแดง (เจ้าของสั่ง 6 ก.ย. 2569)
   ทำเป็นแถบทึบเต็มความกว้าง ตารางจะได้ไม่เลื่อนลอดใต้ปุ่ม */
.bkbackbar{position:fixed;top:0;left:0;right:0;height:26px;z-index:61;background:#12212f;
  display:flex;align-items:center;gap:7px;padding:0 6px;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.bkbackbtn{padding:2px 8px;border-radius:6px;background:#e03127;color:#fff;border:0;
  font-size:9.5px;font-weight:800;min-height:0;line-height:1.5}
.bkbackbtn:hover{background:#b3261e}
/* ปุ่มเลื่อนซ้าย-ขวาขนาดเล็กในโหมดเต็มจอ — อยู่บนแถบด้านบนจึงไม่บังช่องตาราง
   ปุ่มจะปิดเองเมื่อถึงขอบ และยังปัดนิ้ว/ลากแถบเลื่อนแบบเดิมได้ตามปกติ */
.bkfullmove{display:flex;align-items:center;gap:3px;margin-left:auto}
.bkfullmove button{display:inline-flex;align-items:center;justify-content:center;width:28px;height:22px;padding:0;
  border:1px solid #66829d;border-radius:6px;background:#f7fbff;color:#12212f;font:inherit;font-size:11px;
  font-weight:900;line-height:1;cursor:pointer}
.bkfullmove button:hover{background:#dcecff;border-color:#9cc3ef}
.bkfullmove button:focus-visible{outline:2px solid #ffd84d;outline-offset:2px}
.bkfullmove button:disabled{opacity:.32;cursor:default;background:#dbe3eb;border-color:#66829d}
/* ฟอร์มปฏิเสธเงินโอน (เจ้าของสั่ง 8 ก.ย. 2569) — อยู่ใต้ปุ่มยืนยัน บังคับใส่เหตุผลก่อนกด
   ทำให้เล็กและจางกว่าปุ่มยืนยัน เพราะเป็นทางเลือกรอง ไม่ใช่ทางหลัก */
.remitno{display:flex;gap:5px;align-items:center;margin-top:5px;flex-wrap:wrap}
.remitno input[name="reason"]{width:200px;max-width:100%;font-size:10px;padding:4px 7px}
.remitno button{font-size:10px;padding:4px 9px;white-space:nowrap}
button.ghost.bad{background:#fdecea;border-color:#f2c4bf;color:#b3261e;font-weight:700}
button.ghost.bad:hover{background:#f8d4cf;border-color:#b3261e}
/* เจ้าของสั่ง 8 ก.ย. 2569 — "ต้องการให้รายการเต็มจอมีเมนูพวกนี้ด้วย"
   เดิมเต็มจอโชว์แค่กล่องตาราง เมนูกรองแถวจึงหายไป กรองตอนเต็มจอไม่ได้เลย
   ตอนนี้ยกเมนูตัวเดิมขึ้นมาไว้บนแถบด้านบน แถบจึงต้องสูงตามเนื้อหา ไม่ล็อก 26px */
.bkbackbar{height:auto;min-height:26px;flex-wrap:wrap;padding:3px 6px;row-gap:3px}
.bkbackbar .bkmenu{margin:0;gap:4px;row-gap:3px;align-items:center}
.bkbackbar .bkmenu > b{color:#cfe0f2;font-size:9px;font-weight:700}
.bkbackbar .bkmenu button{font-size:9.5px;font-weight:700;padding:2px 7px;min-height:0;
  line-height:1.5;border-radius:6px}
.bkbackbar .bkmnote{color:#9fb6cc;font-size:9px}
@media(max-width:640px){
  .bkbackbar .bkmenu{flex:1 1 100%}
  .bkbackbar .bkmenu button{font-size:9px;padding:2px 5px}
}
/* ข้อความเด้งตอนเต็มจอ — โผล่ใต้แถบปุ่มปิด แล้วจางหายเองใน 3 วินาที */
.bktoast{position:fixed;top:32px;left:8px;right:8px;z-index:70;background:#12212f;color:#fff;
  border-radius:10px;padding:7px 11px;font-size:10.5px;font-weight:700;line-height:1.35;
  box-shadow:0 6px 18px rgba(0,0,0,.32);opacity:0;transform:translateY(-8px);
  transition:opacity .18s ease,transform .18s ease;pointer-events:none}
.bktoast.show{opacity:1;transform:none}
.bktoast.t-bad{background:#b3261e}
.bktoast.t-ok{background:#0a7d47}
.bktoast.t-warn{background:#8a5300}
.bkbartitle{color:#cfe0f2;font-size:9px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){
  /* เต็มจอแล้วมีที่เหลือเฟือ — ขยายตัวหนังสือและช่องชื่อให้อ่านสบายกว่าตอนย่อ */
  .bkwrap.isfull table.bktable{font-size:10px}
  .bkwrap.isfull table.bktable th,.bkwrap.isfull table.bktable td{padding:4.8px 6px}
  .bkwrap.isfull table.bktable .b2{width:91px;min-width:91px;max-width:91px}
  .bkwrap.isfull table.bktable .b3{left:127px;min-width:72px;max-width:72px}
  .bkwrap.isfull table.bktable .b2 .bnm{font-size:10px}
}
table.monthtable td,table.monthtable th{padding:5px 6px}
table.monthtable tr.blank td{color:#a8b4c2}
table.monthtable tr.future td{color:#c6cfd9;background:#fafbfc}
table.monthtable tr.istoday td{background:#fff8e6;font-weight:600}
/* เปิดวันใหม่จากตารางทั้งเดือน แล้วต้องกลับมาที่ตารางเดิม ไม่ใช่เด้งขึ้นหัวหน้า
   เผื่อระยะให้พ้นแถบเมนูที่ติดขอบบนไว้ด้วย */
#month,#daysheet,#daydetail,#booksheet{scroll-margin-top:118px}
table.linestable{font-size:11.2px;background:#fff;border-radius:8px}
table.linestable th,table.linestable td{padding:5px 8px}
.nowday{display:inline-block;font-size:10.4px;font-weight:700;color:var(--brand);
  background:#e9eff8;border-radius:8px;padding:6px 10px;white-space:nowrap}
table.monthtable tr.total td{border-top:2px solid var(--ink);border-bottom:none;padding-top:9px}
/* ต้องคง td เป็น table-cell ไม่เช่นนั้นช่องปุ่มจะเตี้ยกว่าแถวและเส้นตารางเหลื่อมกัน */
td.daybtns{white-space:nowrap;display:table-cell;text-align:right;vertical-align:middle}
td.daybtns .daybtnwrap{display:flex;gap:3px;align-items:center;justify-content:flex-end}
/* ปุ่มในตารางทั้งเดือน เล็กลง 40% จากของเดิม (เจ้าของสั่ง 5 ก.ย. 2569)
   ย่อเฉพาะในตารางนี้ ปุ่มหน้าอื่นขนาดเท่าเดิม */
td.daybtns .seebtn{font-size:9px;padding:3.6px 6px;border-radius:5px}
td.daybtns .remitbtn{font-size:9px;padding:1.8px 5.4px;border-radius:4px}
td.daybtns .nowday{font-size:9px}
.remitbtn{font-size:9.6px;padding:3px 9px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;font-weight:600}
.remitbtn.warn{border-color:var(--warn);color:var(--warn);background:#fff8ec}
/* ปุ่มลัดไปเพิ่มบัญชีบริษัท (เจ้าของสั่ง 17 ก.ย. 2569 "ต้องการเพิ่มบัญชีบริษัท มีปุ่มเพิ่ม")
   ของเดิมเขียนบอกเฉย ๆ ว่า "ให้ไปเพิ่มในหน้าแอดมิน" แต่ไม่มีทางกดไป ต้องไปหาหน้าเอง */
a.addacctbtn{display:inline-block;margin-left:6px;padding:3px 10px;border-radius:6px;
  border:1px solid var(--brand);background:#eef4fb;color:var(--brand);
  font-weight:700;font-size:10.5px;text-decoration:none;white-space:nowrap}
a.addacctbtn:hover{background:var(--brand);color:#fff}
/* ── 💰 กระเป๋าเงินบริษัท (เจ้าของสั่ง 20 ก.ย. 2569) ─────────────────────────
   บวกเป็นเขียว ลบเป็นแดง · ตัวเลขเรียงหลักตรงกันทุกแถว จะได้กวาดตาเทียบได้ */
.fundbox{border-left:5px solid #0a7d47;background:#f6fbf8}
.fundsum td{padding:5px 8px}
.fundsum .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fundsum .sumrow td{border-top:2px solid #0a7d47;font-size:14px;padding-top:7px}
.fundbox .plus,.fundday .plus{color:#0a7d47}
.fundbox .fundform.fundout{border-color:#efbd69;background:#fffaf0}
.fundbox .annfunds{margin-top:8px;padding:8px 10px;border:1px solid #e6b9cf;border-radius:10px;background:#fdf7fa}
.fundbox .annfunds > .h{display:block;color:#9c4a73;margin-bottom:6px}
.fundbox .fundform.fundann{border-color:#e6b9cf;background:#fff}
.fundbox .fundform.fundann.fundout{border-color:#efbd69;background:#fffaf0}
/* 🏷 หัวข้อฝากเงินทุน/เงินแอน เป็นแถบสีตัวใหญ่ (เจ้าของสั่ง 26 ก.ย. 2569 กันสับสนว่าฝากเข้ากล่องไหน) */
.fundhead{display:block;font-size:17px;font-weight:800;line-height:1.3;padding:8px 12px;border-radius:8px;margin:0 0 4px;color:#fff}
.fundhead.team{background:#0a7d47}
.annfunds > .fundhead.ann{background:#9c4a73;color:#fff;margin-bottom:8px}
.fundhead.annsub{background:#fbe6f0;color:#7a2f57;border:1px solid #e6b9cf}
.fundhead .fhtag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.22);vertical-align:2px}
.fundhead.annsub .fhtag{background:#fff;color:#9c4a73}
/* 🌸 กล่องเงินแอนพับไว้ · ปุ่มเปิดตัวใหญ่ (เจ้าของสั่ง 27 ก.ย. 2569) */
details.annfold > summary.annopen{list-style:none;cursor:pointer;display:block;text-align:center;font-size:18px;font-weight:800;padding:14px 16px;border-radius:12px;background:#9c4a73;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.15);user-select:none}
details.annfold > summary.annopen::-webkit-details-marker{display:none}
details.annfold > summary.annopen:hover{background:#86395f}
details.annfold[open] > summary.annopen{background:#fbe6f0;color:#7a2f57;border:1px solid #e6b9cf;margin-bottom:10px;font-size:16px;padding:10px 14px}
details.annfold .annopen-c{display:none}
details.annfold[open] .annopen-o{display:none}
details.annfold[open] .annopen-c{display:inline}
details.annfold{display:block;margin:0 0 14px}
@media(max-width:640px){.fundhead{font-size:16px}}
/* 🔎 ศูนย์แจ้งเตือนใบตรวจรายวัน (26 ก.ย. 2569) */
.dachecks{margin:8px 0;padding:8px 10px;border:1px solid #f0c9a8;border-left:5px solid #dd8615;border-radius:9px;background:#fffaf4}
.dachkhead{margin:0 0 4px;font-weight:800;color:#8a4b06}
.dachk{margin:4px 0}
.dachk summary{cursor:pointer;font-size:13px;line-height:1.5}
.dachk ul{margin:4px 0 6px 18px;padding:0;font-size:12.5px;line-height:1.55}
.dachkok{margin:6px 0;color:var(--ok);font-size:13px}
.fundbox .minus,.fundday .minus{color:#c4362f}
.fundwarn{margin:8px 0 0;padding:9px 11px;border:1px solid #efbd69;border-left:5px solid #dd8615;
  border-radius:9px;background:#fff8e8;color:#69481a;font-size:12.5px}
.fundform{margin:10px 0 0;padding:10px 12px;border:1px solid #cfe3d7;border-radius:10px;background:#fff}
.fundform label{font-size:11.5px;color:#54627a}
.fundform input,.fundform select{padding:7px 8px;border:1px solid #dde3ea;border-radius:8px;font-size:13px}
.pockets{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;margin:0 0 8px}
.pocket{padding:9px 11px;border:1px solid #cfe3d7;border-radius:10px;background:#fff;display:flex;flex-direction:column;gap:2px}
.pocket span{font-size:11.5px;color:#54627a}
.pocket b{font-size:17px;font-variant-numeric:tabular-nums}
.pocket.total{border-color:#0a7d47;border-width:2px;background:#f2faf5}
/* ── การ์ดปิดวันนี้ (เจ้าของสั่ง 20 ก.ย. 2569) ─────────────────────────────── */
/* สรุปยอดรายโต๊ะ ตอนดูทุกโต๊ะพร้อมกัน (เจ้าของสั่ง 20 ก.ย. 2569) */
.allbooksum{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 8px;padding:7px 11px;
  border-radius:9px;background:rgba(255,255,255,.72);font-size:11.5px;color:#3b4a5e}
.allbooksum b{font-variant-numeric:tabular-nums}
.allbooksum .warnpill{background:#fff3e2;border:1px solid #dd8615;color:#8a4b00;
  border-radius:999px;padding:1px 9px;font-weight:700}
/* ตารางสรุปทุกโต๊ะรวมกัน ในหน้าเทียบโต๊ะ (เจ้าของสั่ง 20 ก.ย. 2569) */
.absum th,.absum td{border-top:2px solid var(--ink);font-weight:700;background:#eef4fb}
.absum th{text-align:left}
.absumhead{margin:12px 0 5px;font-size:13px;font-weight:700;color:#12508f}
.absumhead:first-of-type{margin-top:0}
.dayclose{margin:0 0 10px}
.dayclose.todo{border-left:6px solid #dd8615;background:#fffdf7}
.dayclose.done{border-left:6px solid #0a7d47;background:#f6fbf8}
/* 3 การ์ดตรวจยอดหน้าบัญชีกรุงเทพ (เจ้าของสั่ง 20 ก.ย. 2569) — อ่านอย่างเดียว ไม่มีปุ่ม */
.bkk3{margin:14px 0}
.bkk3card{border-left:6px solid var(--line)}
.bkk3card.ann{border-left-color:#d05a9a}
.bkk3card.dum{border-left-color:var(--brand)}
.bkk3card.ok{border-left-color:var(--ok);background:#f1fbf5}
.bkk3card.bad{border-left-color:var(--bad);background:#fff5f4}
.bkk3big{font-size:26px;font-weight:800;line-height:1.25;margin:6px 0 4px;font-variant-numeric:tabular-nums}
.bkk3card.ok .bkk3big{color:var(--ok)}
.bkk3card.bad .bkk3big{color:var(--bad)}
.bkk3book{margin:8px 0 2px;font-size:12px}
.bkk3list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:3px}
.bkk3list li{display:flex;justify-content:space-between;gap:9px;font-size:11.6px;
  padding:3px 7px;border-radius:7px;background:#f6f8fb}
.bkk3list li b{font-variant-numeric:tabular-nums}
.bkk3calc{margin:4px 0 6px;font-size:12px;line-height:1.7}
.bkk3none{margin:6px 0;font-size:11.6px}
/* 🔻 เงินที่ถูกดึงออกจากกระเป๋า (เจ้าของสั่ง 20 ก.ย. 2569) — บันทึกอย่างเดียว ไม่มีปุ่ม */
.card.pullback{border-left:6px solid #b3261e}
.card.pullback tr.pbout{background:#fff5f4}
.card.pullback tr.pbin{background:#f1fbf5}
/* 📢 แถบเตือนตอนบริษัทขยับทุนของเราวันนี้ (เจ้าของสั่ง 21 ก.ย. 2569)
   ต้องสะดุดตาตั้งแต่เปิดหน้า ไม่ใช่ซ่อนอยู่ในกล่องที่ต้องกดกาง */
.card.fundalert{border-left:6px solid #b26a00;background:#fffaf0}
.card.fundalert ul{margin:6px 0 0;padding-left:18px}
.card.fundalert li{margin:6px 0}
.card.fundalert .h{font-size:14px}
/* 💳 ช่อง 4 · ทวนยอดเงินเข้าบัญชี (เจ้าของสั่ง 21 ก.ย. 2569) */
.card.bankin{border-left:6px solid var(--line)}
.card.bankin.todo{border-left-color:#b26a00;background:#fffdf7}
.card.bankin.ok{border-left-color:var(--ok);background:#f6fdf9}
.card.bankin.warn{border-left-color:var(--bad);background:#fffaf9}
.card.bankin .h{display:block;margin-bottom:6px}
.card.bankin table.ledger tr.total td{border-top:2px solid var(--line);font-size:13px}
/* แถบเตือนบนหัวทุกหน้าของเซลล์ (เจ้าของสั่ง 21 ก.ย. 2569 "ให้รายละเอียดอยู่หน้าสมุดทั้งหมด") */
.fundbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:10px 16px;padding:10px 14px;border:1px solid #f0bd80;border-radius:12px;background:#fffaf0;color:#7a4e00}
.fundbar ul{margin:4px 0 0;padding-left:18px}
.fundbar li{margin:3px 0;font-size:11.6px}
.fundbar .muted{display:block;color:#8b7a5c}
.fundbarbtn{display:inline-block;padding:8px 12px;border-radius:8px;background:#b26a00;color:#fff;
  font-weight:700;text-decoration:none;white-space:nowrap}
.fundbarbtn:hover{background:#8a5200}
@media(max-width:700px){.fundbar{margin:8px 10px}.fundbarbtn{width:100%;text-align:center}}
details.wfold.fundlog tr.pbout{background:#fff5f4}
details.wfold.fundlog tr.pbin{background:#f1fbf5}
/* ═══ หน้ากระเป๋าเงิน · ออกแบบใหม่ 20 ก.ย. 2569 ═══════════════════════════
   เจ้าของสั่ง "รูปแบบทันสมัยรับกับเว็บไซต์ตอนนี้"
   ⛔ ใช้สีจากชุดเดิมของเว็บทั้งหมด (--brand --ok --bad --line) ห้ามใส่สีใหม่ลอย ๆ
   ⛔ มือถือต้องอ่านได้ ทุกแถวยุบเป็นคอลัมน์เดียวเมื่อจอแคบ */
.whero{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:16px 18px;border-radius:14px;margin:14px 0 16px;border:1px solid var(--line);
  background:var(--card);box-shadow:0 1px 3px rgba(16,32,56,.06)}
.whero.todo{border-color:#f0bd80;background:linear-gradient(180deg,#fffaf2,#fff)}
.whero.done{border-color:#b7e1c4;background:linear-gradient(180deg,#f1fbf5,#fff)}
.whero.none{border-color:var(--line)}
.wheroL{display:flex;flex-direction:column;gap:2px;min-width:0}
.wherotag{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.2px}
.whero.todo .wherotag{color:var(--warn)}
.whero.done .wherotag{color:var(--ok)}
.wheronum{font-size:34px;line-height:1.15;font-weight:800;font-variant-numeric:tabular-nums}
.whero.todo .wheronum{color:var(--warn)}
.whero.done .wheronum{color:var(--ok)}
.wherowhy{font-size:11.6px;color:var(--muted)}
.wheroR{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.wpill{font-size:11.6px;font-weight:700;padding:5px 10px;border-radius:999px;border:1px solid var(--line);background:#fff}
.wpill.lock{color:var(--bad);border-color:#e6bdb9;background:#fff5f4}
.wpill.go{color:var(--ok);border-color:#b7e1c4;background:#f1fbf5}
.wherobtn{display:inline-block;padding:9px 15px;border-radius:10px;background:var(--brand);color:#fff;
  font-weight:700;font-size:12.4px;text-decoration:none;white-space:nowrap}
.wherobtn:hover{filter:brightness(1.08)}
.wgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:8px 0 6px}
.wcard{display:flex;flex-direction:column;gap:3px;padding:12px 13px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);border-top:3px solid var(--line)}
.wcard.keep{border-top-color:var(--brand)}
.wcard.ann{border-top-color:#d05a9a;background:#fffafd}
/* ── ⏳ กล่อง "ยังไม่จัดสรร รอต้นทางกดยืนยัน" · เจ้าของสั่ง 24 กันยายน 2569 ─────
   ⛔ ต้องเด่นกว่ากล่องธรรมดา เพราะเป็นตัวที่ทำให้ชนยอดไม่ตรงมาตลอด
   ⛔ สีส้ม = เห็นได้แต่ใช้ไม่ได้ · ห้ามใช้สีเขียวซึ่งแปลว่าเอาไปปล่อยได้ */
.wcard.wait{border-top-color:#c98f00;background:#fffbf0}
.wcard.wait .wcn{color:#8a6100}
.wcard.wait.wzero{border-top-color:#c9cfd8;background:#fff}
.wcard.wait.wzero .wcn{color:#9aa7b8}
.wcard.send{border-top-color:var(--ok)}
.wct{font-size:11.6px;font-weight:700;color:var(--muted)}
.wcn{font-size:24px;line-height:1.2;font-weight:800;font-variant-numeric:tabular-nums}
.wcw{font-size:10.6px;color:var(--muted);line-height:1.5}
.wsum{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:12px;margin:2px 0 18px}
.wsumbad{color:var(--bad);font-weight:700}
.wfold{border:1px solid var(--line);border-radius:12px;background:var(--card);margin:0 0 9px;overflow:hidden}
.wfold.bad{border-color:#e6bdb9}
.wfold>summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:700;font-size:12.6px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.wfold>summary::-webkit-details-marker{display:none}
.wfold>summary::after{content:'▾';margin-left:auto;color:var(--muted)}
.wfold[open]>summary::after{content:'▴'}
.wfold>summary:hover{background:#f6f8fb}
.wfoldin{padding:0 14px 14px;border-top:1px solid var(--line)}
.wfoldin>h3{font-size:12.4px;margin:14px 0 6px}
.wfoldin .card{border:0;padding:0;margin:0;box-shadow:none}
@media (max-width:640px){
  .wheronum{font-size:28px}
  .whero{padding:13px 14px}
  .wheroR{width:100%}
  .wherobtn{flex:1 1 100%;text-align:center}
}
/* ⛔ แถบเตือนโอนเกิน (เจ้าของสั่ง 20 ก.ย. 2569) — ต้องเห็นชัด ห้ามเป็นป้ายจิ๋ว */
.rline.overwarn{background:#fff1f0;border:1px solid #e6a9a4;border-radius:9px;
  padding:7px 10px;margin-top:5px;color:#8c1d17;font-size:11.6px;line-height:1.6}
.rline.overok{background:#effaf3;border:1px solid #a9d8bb;border-radius:9px;padding:6px 10px;margin:4px 0;color:#14532d;font-size:12.5px}
.rnote.overlive{background:#fff1f0;border:1px solid #e6a9a4;border-radius:9px;
  padding:7px 10px;margin-top:6px;color:#8c1d17;font-size:11.6px;line-height:1.6}
/* ⛔ แถบเตือน "โอนขาด" (เจ้าของสั่ง 20 ก.ย. 2569 "ทำไมยอดโอนขาดไม่มีแจ้งเตือน
   แค่แจ้งเตือนตัวสีแดงไว้ให้ทราบก็พอ") — สีเดียวกับแถบโอนเกิน ห้ามทำให้จางกว่า
   ⛔ เตือนอย่างเดียว ห้ามปิดปุ่มส่ง คนกรอกเป็นคนตัดสิน */
.rline.shortwarn{background:#fff1f0;border:1px solid #e6a9a4;border-radius:9px;
  padding:7px 10px;margin-top:5px;color:#8c1d17;font-size:11.6px;line-height:1.6}
/* ป้ายแดงจิ๋วในช่องตาราง — บอกว่ายอดนี้ยืนยันแล้วแต่ยังขาดอยู่เท่าไร */
.remitok .shortmark,.remitpart .shortmark{color:#b3261e;font-weight:700;opacity:1}
.dclist2{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.dclist2 li{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:9px;
  background:#fff;border:1px solid #e7edf4}
.dclist2 li.dc-warn{border-color:#efbd69;background:#fffaf0}
.dcmark{font-size:16px;flex:0 0 auto}
.dctext{flex:1 1 auto;font-size:12.5px;line-height:1.45;min-width:0}
.dcgo{flex:0 0 auto;padding:6px 11px;border:1px solid #dd8615;border-radius:999px;
  background:#fff6e6;color:#8a5510;font-weight:700;font-size:12px;text-decoration:none;white-space:nowrap}
.dcgo:hover{background:#ffeccf}
.dayclose textarea{width:100%;box-sizing:border-box;margin-top:6px;padding:9px 11px;
  border:1px solid #dde3ea;border-radius:9px;font-size:12.5px;font-family:inherit;line-height:1.5;background:#fff}
.dayclose .copyrow2{margin:9px 0 0}
.ccbox{margin:10px 0 0;padding:10px 12px;border:1px solid #cfe0f3;border-radius:10px;background:#f7fbff}
.ccbox label{font-size:11.5px;color:#54627a}
.ccbox input{padding:7px 8px;border:1px solid #dde3ea;border-radius:8px;font-size:13px}
.ccdone{margin:4px 0 8px;font-size:12.5px}
.cclist{border-left:5px solid #2273c4}
.cclist .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cclist .ccrowbig td{background:#fff5f4}
.ccbig{color:#c4362f}
.ccsmall{color:#8a5510}
.dayclose .copyline{padding:7px 12px;border:1px solid #9aa7b8;border-radius:999px;background:#f4f7fb;
  color:#3b4a5e;font-weight:700;font-size:12.5px;cursor:pointer}
.dayrep{border-left:5px solid #dd8615;background:#fffdf7}
.dayrep textarea{width:100%;box-sizing:border-box;padding:9px 11px;border:1px solid #dde3ea;
  border-radius:9px;font-size:12.5px;font-family:inherit;line-height:1.5;background:#fff}
.dayrep .copyrow{margin:8px 0 6px}
.dayrep .copyline{padding:7px 12px;border:1px solid #dd8615;border-radius:999px;background:#fff6e6;
  color:#8a5510;font-weight:700;font-size:12.5px;cursor:pointer}
.dayrep .copyline:hover{background:#ffeccf}
.fundwho{border-left:5px solid #7a5cc4;background:#fbfaff}
.fundwho .r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.fundwho .plus{color:#0a7d47}
.fundwho .minus{color:#c4362f}
.fundwho .sumrow td{border-top:2px solid #7a5cc4}
.fundwho .nohold td{background:#fff8e8}
.fundwho .fwzero td{color:#9aa7b8}
.fundwho .annrow td{background:#fdf7fa;border-top:2px dashed #e6b9cf}
.fundwho .anncell{background:#fdf7fa;color:#9c4a73}
.moneytable .anncell{background:#fdf7fa;color:#9c4a73}
.xfercell{white-space:nowrap}.xfercell .xfernote{font-size:.78em;opacity:.8}.xferwarn{background:#fff5d6;color:#8a5a00}.xferbad{background:#fde8e8;color:#a1261d}
.stat.annstat{border-color:#e6b9cf;background:#fdf7fa}
.stat.annstat b{color:#9c4a73}
.fundwho .annrow i{display:block;font-style:normal;font-size:9.6px}
/* ── 🔍 กล่องรายละเอียด "ออกไประหว่างทาง" · เจ้าของสั่ง 24 กันยายน 2569 ───────
   ⛔ แถวรายละเอียดซ่อนไว้ก่อน · กางด้วย :has() ของเบราว์เซอร์ ไม่ต้องพึ่งสคริปต์
   ⛔ มีคลาส .open เป็นทางสำรองให้เครื่องเก่าที่ไม่รู้จัก :has() กดได้เหมือนกัน
   ⛔ ห้ามใช้ attribute hidden กับแถวนี้ · CSS จะแพ้ hidden แล้วกดยังไงก็ไม่กาง */
/* 📅 แถบเลื่อนวันของตารางเงินในมือเซลล์ (เจ้าของทัก 24 ก.ย. 2569 "กดไม่ได้")
   ⛔ ต้องเด่นพอให้เห็นว่ากดได้ · ปุ่มลูกศรแถบบนสุดเป็นของสมุดโต๊ะ คนละอัน */
.daypick{background:#eef4ff;border:1px solid #c7d8f5;border-radius:10px;padding:6px 9px}
.daypicknow{font-size:13px;color:#1b4b8f}
.daypickoff{opacity:.4;cursor:not-allowed}
.fundwho .mvrow{display:none}
.fundwho .mvrow.open{display:table-row}
.fundwho tr:has(> td > .mvpick > .mvtick:checked) + .mvrow{display:table-row}
.fundwho .mvpick{display:inline-flex;align-items:center;gap:5px;cursor:pointer}
.fundwho .mvpick input{margin:0;flex:0 0 auto;width:13px;height:13px}
.fundwho .mvrow > td{background:#f4f7fc;border-top:2px solid #b9c9e2;padding:8px 10px}
.fundwho .mvbox{max-width:100%;overflow-x:auto}
.fundwho .mvhead{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 6px}
.fundwho .mvmore{margin-left:auto;font-size:12px;text-decoration:none;
  border:1px solid #b9c9e2;border-radius:999px;padding:2px 10px;background:#fff;color:#15607a}
.fundwho .mvtbl{font-size:12.5px;background:#fff}
.fundwho .mvtbl td{padding:4px 8px}
.fundday{border-left:5px solid #2273c4}
.fdday{border-bottom:1px solid #eef2f7;padding:4px 0}
.fdday summary{cursor:pointer;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px}
.fdchip{padding:2px 8px;border-radius:999px;background:#f2f6fb;font-size:11.5px}
.fdnet{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.fdbody{padding:4px 0 8px 14px}
.fdhead{margin:7px 0 3px;font-size:12px;font-weight:700;color:#3b4a5e}
.fdlist{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 14px}
.fdlist li{display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:3px 8px;border-radius:6px;background:#fff;border:1px solid #e7edf4;font-size:12.5px}
.fdlist b{font-variant-numeric:tabular-nums;white-space:nowrap}
.fdlist .fdbtns{display:flex;gap:4px;align-items:center;flex:0 0 auto}
.fdlist li.topupform{grid-column:1/-1;display:block;background:#fbfaff;border-color:#cfd8e6}
.fdlist li.topupform label{font-size:10.4px;color:#54627a}
.fdlist li.topupform input,.fdlist li.topupform select{padding:6px 8px;border:1px solid #dde3ea;border-radius:8px;font-size:12.5px}

/* หน้ารายการทั้งหมด (เจ้าของสั่ง 17 ก.ย. 2569) — ป้ายชนิดต้องแยกสีให้กวาดตาเจอ
   ทุกสีกำหนดตัวหนังสือของตัวเองเสมอ กันพลาดซ้ำแบบขาวบนขาวเมื่อ 8 ก.ย. */
span.mvtag{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;white-space:nowrap}
span.mvtag.mvin{background:#e6f6ec;color:#0a6b3d}
span.mvtag.mvout{background:#fdeceb;color:#a32019}
span.mvtag.mvshift{background:#eaf1fa;color:#12437f}
span.mvtag.mvcap{background:#fff5d6;color:#8a5a00}
/* หักกลบทางบัญชี — ต้องดูจางกว่าเงินจริง จะได้ไม่เข้าใจผิดว่าเงินขยับ */
span.mvtag.mvpaper{background:#eef0f3;color:#5a6673;border:1px dashed #b9c2cc}
a.pillbtn{display:inline-block;padding:4px 11px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:11px;font-weight:600;text-decoration:none}
a.pillbtn:hover{border-color:var(--brand);color:var(--brand)}
a.pillbtn.on{background:var(--brand);border-color:var(--brand);color:#fff}
table.mvtable td{font-size:11.5px}
select.racctpick{font-size:10px;padding:2px 4px;max-width:190px}
/* แถวที่ส่งไปแล้วรออนุมัติ — ขีดสีน้ำเงินหนาที่ขอบซ้ายและพื้นจาง ๆ (เจ้าของสั่ง 17 ก.ย. 2569)
   ต้องกำหนดสีตัวหนังสือปกติไว้ด้วย กันพลาดซ้ำแบบป้ายขาวบนพื้นขาวเมื่อ 8 ก.ย. */
table.monthtable tr.waitrow>td{background:#f2f7fd;color:var(--ink)}
table.monthtable tr.waitrow>td:first-child{box-shadow:inset 3px 0 0 var(--brand)}
/* แถวที่มีคำร้องขอแก้ยอด/ขอยกเลิกค้างอยู่ — ม่วง กวาดตาทั้งเดือนแล้วเห็นทันทีว่าติดอยู่ที่ใคร */
table.monthtable tr.amendrow>td{background:#f8f3ff;color:var(--ink)}
table.monthtable tr.amendrow>td:first-child{box-shadow:inset 3px 0 0 #7b3fbf}
.remitbtn.wait{border-color:var(--brand);color:var(--brand);background:#eef4fb}
.remitbtn.done{border-color:var(--ok);color:var(--ok);background:#eefaf3}
/* ✅ โอนครบในตารางทั้งเดือน = เครื่องหมายเล็กที่สุด ไม่มีกรอบ (เจ้าของสั่ง 28 ก.ย. 2569) · ชนะกฎมือถือที่ขยายปุ่มคอลัมน์ท้ายเต็มช่อง
   ⛔ ตัวเลือกต้องเจาะจงกว่ากฎปุ่มคอลัมน์ท้ายของมือถือ (ที่ขยายปุ่มเต็มช่อง สูง 38px) */
table.monthtable td.daybtns button.remitbtn.done, td.daybtns button.remitbtn.done{display:inline-block;width:auto;min-width:0;min-height:0;
  padding:0 2px;margin:0;border:0;background:transparent;box-shadow:none;font-size:13px;line-height:1}
/* คอลัมน์ปุ่มท้ายตารางกว้างเท่าที่ปุ่มต้องใช้ ที่เหลือยกให้คอลัมน์ตัวเลข (เจ้าของสั่ง 28 ก.ย. 2569) */
@media (max-width: 640px){table.monthtable td.daybtns{width:1%;white-space:normal}
  table.monthtable td.daybtns .daybtnwrap{flex-wrap:wrap;justify-content:flex-end}
  table.monthtable td.daybtns .nowday{white-space:normal;text-align:right}}
/* รอแก้ไข = มีคำร้องขอแก้ยอดหรือขอยกเลิกค้างอยู่ (เจ้าของสั่ง 19 ก.ย. 2569)
   ⛔ ห้ามใช้สีเขียวเด็ดขาด เขียวแปลว่าจบแล้ว แต่ก้อนนี้ยังไม่จบ รออีกฝ่ายตัดสิน
   ม่วงเพราะไม่ซ้ำกับสีไหนในหน้านี้ ส้ม=ต้องโอน ฟ้า=รออนุมัติ เขียว=ครบ */
.remitbtn.amend{border-color:#7b3fbf;color:#6a2fae;background:#f5eeff}
/* หัวข้อกลุ่มในรายชื่อแนะนำหน้าตัดยอด — ต้องอ่านปราดเดียวรู้ว่าอยู่กลุ่มไหน */
.copyrow{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 9px}
button.copyline{min-height:40px;padding:0 14px;border:1px solid #b7e1c4;border-radius:9px;
  background:#e6f4ea;color:#0a7d47;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
button.copyline:hover{background:#0a7d47;color:#fff;border-color:#0a7d47}
/* ⛔ ตารางช่อง 1 กว้างขึ้นเป็น 9 ช่อง (เจ้าของสั่ง 20 ก.ย. 2569 ให้อยู่แถวเดียวกันหมด)
   จอมือถือเลื่อนซ้ายขวาได้ใน .wrap อยู่แล้ว ห้ามบีบช่องจนพิมพ์ไม่ได้ */
.clrtable .custcell{min-width:104px}
.clrtable th.splitcell,.clrtable td.splitcell{background:#fbfaff}
.clrtable th.splitcell{color:#5b4b9c}
.oldsplit{margin:8px 0 0;border-left:5px solid #b8a3e0;background:#faf8ff}
.oldsplit ul{margin:5px 0 0;padding-left:18px}
/* ── คำอธิบายพับไว้ · ปุ่มมุมขวาบน (เจ้าของสั่ง 20 ก.ย. 2569) ─────────────────
   ⛔ ปุ่มต้องอยู่มุมขวาบนของกล่อง · จอแคบให้ตกลงมาเป็นบรรทัดของตัวเอง ห้ามทับหัวข้อ */
/* ➕ กล่องเพิ่มลูกค้าในหน้ากรอก (เจ้าของสั่ง 22 ก.ย. 2569) · พับไว้ ไม่แย่งที่ตาราง */
.addcusbox{margin:8px 0;border-left:5px solid #0f8a8a;background:#f7fdfd}
.addcusbox > summary{cursor:pointer;padding:2px 0}
.addcusbox > summary .muted{margin-left:8px;font-size:12.5px}
.addcusbox .codepick{display:flex;gap:6px}
.addcusbox .codepick input{flex:1 1 auto;min-width:0}
/* 📋 วางรายชื่อจาก LINE ทีละหลายคน (เจ้าของสั่ง 22 ก.ย. 2569) */
.pastecus{margin-top:10px;border-top:1px dashed #b6ddda;padding-top:8px}
.pastecus > summary{cursor:pointer}
.pastecus textarea{width:100%;min-height:120px;font-size:14px;padding:8px 10px;
  border:1px solid var(--line);border-radius:8px;font-family:inherit}
.pastecus code{background:#eef7f7;padding:1px 5px;border-radius:4px;font-size:12.5px}
table.pastecustbl{width:100%;border-collapse:collapse;margin-top:8px;font-size:13px}
table.pastecustbl th, table.pastecustbl td{border:1px solid var(--line);padding:4px 8px;text-align:left}
table.pastecustbl th{background:#eef7f7}
.pastecusgo{margin-top:8px;min-block-size:44px;font-size:15px;font-weight:700}
.pastecusgo:disabled{opacity:.45;cursor:not-allowed}

/* ══ 🎨 สีแยกหมวดหมู่หน้าหักกลบ (เจ้าของสั่ง 22 กันยายน 2569) ═══════════════════
   "เติมสีหน้าเมนูหักกลบตามกล่องให้ชัดเจน แยกหมวดหมู่ ทำสีให้สวยงาม"

   กติกาสีที่ใช้ทั้งหน้า — สีบอก "หมวด" ไม่ได้บอก "ความสำคัญ"
     ส้ม   งานที่รอเราทำ           เขียว  เสร็จแล้ว/ยืนยันแล้ว
     ฟ้า   ส่งไปรอคนอื่น            ม่วง   ของเก่าค้าง/ยกเลิก
     ทอง   ใบอนุญาต                เขียวอมฟ้า เงินฝาก ไม่ต้องโอน
     แดง   โดนคนอื่นเรียกเก็บ       เทา    ตารางดูอย่างเดียว
     ช่องกรอก 1/2/3 คนละสี เพราะกรอกผิดช่องแล้วเงินวิ่งผิดทาง

   ⛔ ทุกกล่องใช้ "แถบสีด้านซ้าย 5px + พื้นอ่อน" แบบเดียวกันหมด
      ห้ามเปลี่ยนเป็นพื้นเข้ม ตัวเลขเงินต้องอ่านง่ายที่สุดเสมอ
   ⛔ สีเขียว/แดง ในหน้านี้สงวนไว้ให้ "เสร็จแล้ว" กับ "ต้องจ่าย" เท่านั้น
      ห้ามเอาไปใช้กับกล่องอื่น คนจะอ่านผิดว่าดี/ไม่ดี
   ⛔ แตะแค่สีกับเส้นขอบ ห้ามแตะขนาดตัวเลขหรือระยะห่างของตาราง */
.clrpage > .card, .clrpage > form.card, .clrpage > details.card{border-left:5px solid #cfd8e3}

/* ── ตารางดูอย่างเดียว · เทา ─────────────────────────────────────────── */
.clrpage [data-live="board"], .clrpage [data-live="alllines"],
.clrpage [data-live="moves"], .clrpage [data-live="auready"]{
  border-left:5px solid #7b8794;background:#fafbfc}

/* ── ช่องกรอกของเรา · แถบน้ำเงินหลัก ────────────────────────────────── */
.clrpage [data-live="myform"]{border-left:5px solid #1d69b6;background:#fbfdff}

/* ── หัวช่อง 1/2/3/4 · แถบสีเต็ม ตัวหนังสือขาว ────────────────────────────
   เจ้าของสั่ง 22 กันยายน 2569 "หมวดหมู่หนึ่งถึงสี่ให้ชัดเจน"
   รอบแรกทำเป็นพื้นอ่อนแล้วยังแยกไม่ค่อยออก · เปลี่ยนเป็นแถบสีเต็มตัวหนังสือขาว
   ⛔ ช่อง 4 เคยตกหล่นไปทั้งช่อง · ต้องมีครบทั้งสี่เสมอ
   ⛔ สีเต็มใช้ได้เฉพาะ "หัวช่อง" · พื้นในกล่องต้องอ่อนเหมือนเดิม
      ตัวเลขเงินอยู่ในกล่อง ต้องอ่านง่ายที่สุด
   ⛔ สีทั้งสี่ต้องต่างกันชัด · กรอกผิดช่องแล้วเงินวิ่งผิดทาง */
.secthead.sect1 > .h, .secthead.sect2 > .h, .secthead.sect3 > .h, .card.bankin > .h.sect4{
  display:block;padding:8px 12px;border-radius:8px;color:#fff;font-size:14px;
  box-shadow:inset 4px 0 0 rgba(0,0,0,.22)}
.secthead.sect1 > .h{background:#0f8a8a}
.secthead.sect2 > .h{background:#4f46b8}
.secthead.sect3 > .h{background:#a2640f}
.card.bankin > .h.sect4{background:#7a3f9d;margin-bottom:8px}
.secthead.sect1 > .h .muted, .secthead.sect2 > .h .muted,
.secthead.sect3 > .h .muted, .card.bankin > .h.sect4 .muted{color:rgba(255,255,255,.86)}

/* ── โดนคนอื่นเรียกเก็บ · แดง (เงินที่เราต้องจ่ายออก) ──────────────────── */
.clrpage [data-live="claimedonme"]{border-left:5px solid #c4362f;background:#fff6f5}

/* ── เงินฝาก ไม่ต้องโอน · เขียวอมฟ้า ───────────────────────────────── */
.clrpage .depbox{border-left:5px solid #0e8f6f;background:#f2fbf8;border-color:#b3e2d3}

/* ── คนอื่นแบ่งมาให้เรา · ชมพูอมม่วง ────────────────────────────────── */
.clrpage .givenbox{border-left:5px solid #a44a91;background:#fdf4fa;border-color:#e2c0da}

/* ── ยกเลิกทั้งชุด · ม่วง หมวดเดียวกับของเก่าค้าง ─────────────────────── */
.clrpage .chaincancel{border-left:5px solid #7c5cbf;background:#faf8ff;border-color:#d5c9ee}

/* ── โอนจบแล้ว ใครถือเงินใครอยู่ · น้ำเงินเทา ────────────────────────── */
.clrpage .heldbox{border-left:5px solid #43607f;background:#f6faff}

/* ── เปิดหน้าของเซลล์คนอื่น · เทาเข้ม ไม่ใช่กล่องเนื้อหา ─────────────── */
.clrpage .actas{border-left:5px solid #9aa5b1;background:#fbfcfd}

/* ── หัวข้อคั่นหมวด · ให้ตามองหาได้เร็วว่าหมวดใหม่เริ่มตรงไหน ────────── */
.clrpage h2{border-left:5px solid var(--brand);padding-left:10px;margin-top:18px}

.secthead{position:relative;min-height:26px;margin:0 0 4px;padding-right:186px}
.secthead > .h{display:block}
.secthead > .helpbox{position:static}
.secthead > .helpbox > summary{position:absolute;top:0;right:0;list-style:none;cursor:pointer;
  padding:4px 10px;border:1px solid #c7d6ea;border-radius:999px;background:#f2f7fd;
  color:#1b63bd;font-size:11.5px;font-weight:700;white-space:nowrap}
.secthead > .helpbox > summary::-webkit-details-marker{display:none}
.secthead > .helpbox > summary:hover{background:#e6f0fb}
.secthead > .helpbox[open] > summary{background:#1b63bd;border-color:#1b63bd;color:#fff}
.helpbody{margin:8px 0 0;padding:9px 12px;border:1px solid #dbe4ef;border-radius:10px;background:#fbfdff}
.helpbody p{margin:0 0 7px;font-size:12px;color:#54627a}
.helpbody p:last-child{margin-bottom:0}
@media (max-width:640px){
  .secthead{padding-right:0}
  .secthead > .helpbox > summary{position:static;display:inline-block;margin:6px 0 0}
}
.waitconfirm{margin:7px 0 0;padding:9px 11px;border:1px solid #efbd69;border-left:5px solid #dd8615;
  border-radius:9px;background:#fff8e8;color:#69481a;font-size:13px}
.askconfirm{margin:0 0 10px;border-color:#efbd69;border-left:5px solid #dd8615;background:#fff8e8}
/* ✅ รายการที่ยืนยันไปแล้ว + ปุ่มถอน (เจ้าของสั่ง 20 ก.ย. 2569) */
.okconfirm{margin:0 0 10px;border-color:#b7d8c2;border-left:5px solid #0a7d47;background:#f4fbf6}
/* ⏳ รายการที่เราส่งไปรอคนอื่นยืนยัน + ปุ่มยกเลิกคำขอ (เจ้าของสั่ง 21 ก.ย. 2569) */
.sentwait{margin:0 0 10px;border-color:#c4d9f0;border-left:5px solid #1d69b6;background:#f5f9ff}
/* 🎫 ใบอนุญาตโอน (เจ้าของสั่ง 21 ก.ย. 2569) */
/* ⛔ แถวหัวข้อ 💰 ดอก / 🏦 เงินต้น — ซ่อนบนจอใหญ่ทั้ง th และ td
   จำนวนคอลัมน์จึงเท่าเดิม ตารางไม่เหลื่อม · โผล่เฉพาะมือถือที่แถวเป็นการ์ด */
.clrtable th.gh, .clrtable td.gh{display:none}
.permitbox{margin:0 0 10px;border-color:#d8c9a8;border-left:5px solid #b08948;background:#fffdf5}
.permitbox ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
.permitbox li{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  padding:7px 10px;border:1px solid #e7e0cc;border-radius:9px;background:#fff;font-size:12.5px}
.permitbox li.pm-used{opacity:.62}
.permitbox li.pm-approved{border-color:#d8c9a8;background:#fffdf5}
/* ✔️ แอดมินรับทราบแล้ว · เปลี่ยนสีให้เห็น (เจ้าของสั่ง 21 ก.ย. 2569) */
.permitbox li.pm-acked{border-color:#b7d8c2;background:#f4fbf6}
.pmack{font-size:11.5px;font-weight:800;color:#0a7d47;white-space:nowrap}
.pmid{font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:800;color:#7a5a1e;white-space:nowrap}
.pmline{flex:1 1 auto;min-width:0}
.pmst{font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.permitbox form{display:inline}
.permitbox button.okbtn{min-height:32px;padding:0 12px;border:1px solid #0a7d47;border-radius:8px;
  background:#0a7d47;color:#fff;font-weight:800;font-size:12px;cursor:pointer;font-family:inherit}
.sentwait ul{margin:6px 0 0;padding-left:18px}
.sentwait li{margin:6px 0}
.sentwait form{display:inline;margin-left:6px}
.sentwait button.cancelreq{min-height:32px;padding:0 12px;border:1px solid #c98a85;border-radius:8px;
  background:#fdeceb;color:#8c1d17;font-weight:800;font-size:12px;cursor:pointer;font-family:inherit}
.sentwait button.cancelreq:hover{background:#8c1d17;color:#fff;border-color:#6d1611}
/* ⛔ แถบแดงกันตัดยอด เมื่อมีของฝากยังไม่ยืนยัน (เจ้าของสั่ง 21 ก.ย. 2569 เลือกข้อ 2) */
.waitconfirm.depwait{border-color:#e6a9a4;border-left-color:#b3261e;background:#fff1f0;color:#8c1d17}
.depwaitlist{margin:6px 0 4px;padding-left:18px}
.depwaitlist li{margin:5px 0}
.okconfirm ul{margin:6px 0 0;padding-left:18px}
.okconfirm li{margin:6px 0}
.okconfirm form{display:inline;margin-left:6px}
.okconfirm button.undobtn{min-height:32px;padding:0 12px;border:1px solid #c8a06a;border-radius:8px;
  background:#fff8e8;color:#8a5a12;font-weight:800;font-size:12px;cursor:pointer;font-family:inherit}
.okconfirm button.undobtn:hover{background:#8a5a12;color:#fff;border-color:#6d460d}
/* 🗑️ ยกเลิกทั้งชุด — ทางออกของเจ้าของตอนปุ่มถอนธรรมดาตัน (21 ก.ย. 2569)
   สีแดงอ่อนให้ต่างจากปุ่มถอนสีเหลือง จะได้ไม่กดสลับกัน */
.okconfirm a.chainbtn,.depwait a.chainbtn{display:inline-block;margin-left:6px;min-height:32px;line-height:30px;padding:0 12px;
  border:1px solid #e0b4ae;border-radius:8px;background:#fdf1ef;color:#a3372c;
  font-weight:800;font-size:12px;text-decoration:none}
.okconfirm a.chainbtn:hover,.depwait a.chainbtn:hover{background:#a3372c;color:#fff;border-color:#8c2d24}
/* ปุ่มอันตรายที่กดครั้งแรกแล้ว — รอกดยืนยันครั้งที่สอง (21 ก.ย. 2569)
   ต้องเห็นชัดมากว่าเปลี่ยนสถานะ เพราะมาแทนกล่อง confirm ที่เบราว์เซอร์ไม่ยอมขึ้นให้ */
button.asknow,a.asknow{background:#b3261e !important;border-color:#8c1d16 !important;color:#fff !important;
  animation:askpulse 1s ease-in-out infinite}
@keyframes askpulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.55)}50%{box-shadow:0 0 0 6px rgba(179,38,30,0)}}
@media (prefers-reduced-motion: reduce){button.asknow,a.asknow{animation:none}}
.askconfirm ul{margin:6px 0 0;padding-left:18px}
.askconfirm li{margin:6px 0}
.askconfirm form{display:inline;margin-left:6px}
.askconfirm button.okbtn{min-height:32px;padding:0 12px;border:1px solid #0a7d47;border-radius:8px;
  background:#0a7d47;color:#fff;font-weight:800;font-size:12px;cursor:pointer;font-family:inherit}
.givenbox{margin:8px 0;border-color:#c4b7e1;background:#f8f4ff}
.givenbox ul{margin:6px 0 0;padding-left:18px}
.daycollect{margin:8px 0;border-color:#b7d8c2;background:#f4fbf6}
.daycollect ul{margin:6px 0 0;padding-left:18px}
.daycollect li{margin:3px 0}
.daycollect .dcbook{margin:8px 0 2px;font-weight:700;font-size:13px;color:#0a5b36}
.daycollect .dclist{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:2px 14px}
.daycollect .dclist li{display:flex;justify-content:space-between;gap:10px;margin:0;
  padding:3px 8px;border-radius:6px;background:#fff;border:1px solid #dcece2;font-size:12.5px}
.daycollect .dcname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daycollect .dcamt{font-variant-numeric:tabular-nums;white-space:nowrap}
.daycollect .dcsum{margin:6px 0 0;font-size:13px;color:#0a7d47}
.ownshare{margin:7px 0 0;padding:8px 10px;border:1px solid #c4d9f0;border-left:5px solid #1d69b6;
  border-radius:8px;background:#edf5ff;color:#31526e;font-size:12.5px}
.clraddrow{margin:7px 0 0;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.clrtable th.rowdel,.clrtable td.rowdel{width:44px;text-align:center}
.clrtable button.delrow{min-width:54px;padding:0 8px;font-size:12px;font-weight:700;min-height:32px;border:1px solid #d9c2c0;border-radius:8px;
  background:#fff6f5;color:#a8241d;font-weight:800;cursor:pointer;line-height:1}
/* ── 🗑 ลบแถวในช่อง 1 (เจ้าของสั่ง 22 กันยายน 2569) ────────────────────────────
   "ให้ลบได้ ในกรณีที่ชื่อลูกค้าคนนั้นกรอกไปแล้วไม่โอน ก็ทิ้งได้เลย"
   ⛔ กดแล้วต้องเห็นชัดว่าลบแล้ว · ของเดิมช่องว่างเฉย ๆ คนไม่รู้ว่ากดโดนหรือเปล่า
   ⛔ ยังไม่หายจริงจนกว่าจะกดบันทึก จึงต้องมีทางกดคืนค่าคู่กันเสมอ */
.clrtable tr.clrcleared>td{background:#f4f6f8;opacity:.72}
.clrtable tr.clrcleared td.rowdel{opacity:1}
.clrtable button.undelrow{margin-top:4px;min-height:30px;padding:0 9px;border-radius:8px;
  border:1px solid var(--brand);background:#fff;color:var(--brand);font-size:11.5px;font-weight:700;
  cursor:pointer;white-space:nowrap;display:block}

.clrtable button.delrow:hover{background:#a8241d;color:#fff;border-color:#8c1d17}
.depbox ul{margin:6px 0 0;padding-left:18px}
.depbox li{margin:3px 0}
.depbox li.mine{font-weight:700}
.duehead{margin:10px 0 5px;font-size:12.5px;color:#31526e}
.duehead:first-of-type{margin-top:4px}
.remitbtn.on{background:var(--mark);border-color:var(--markbar);color:var(--markink)}
tr.monthremit td{background:#f7f9fc;padding:12px}
.remitok,.remitwait,.remitpart{display:inline-block;border-radius:6px;padding:1px 6px;font-weight:700}
.remitok{color:var(--ok);background:#e8f7ef}
.remitwait{color:var(--brand);background:#eaf1fa}
.remitpart{color:var(--warn);background:#fdf3e3}
/* 🏦 เงินต้นที่ฝากไว้แล้ว ไม่ต้องโอน (เจ้าของสั่ง 21 ก.ย. 2569) · ฟ้า ไม่ใช่ส้ม */
.remitkeep{display:inline-block;border-radius:6px;padding:1px 6px;font-weight:700;
  color:#17518c;background:#eef4fb}
.remitkeep small{display:block;font-size:9px;font-weight:600;opacity:.85}
/* ✋ แจ้งว่าเก็บไว้ที่ตัวเอง (เจ้าของสั่ง 21 ก.ย. 2569) · เทา ไม่ใช่เขียว เพราะยังไม่เข้าบริษัท */
.remitself{display:inline-block;border-radius:6px;padding:1px 6px;font-weight:700;
  color:#4b5158;background:#eef0f2}
.remitself small{display:block;font-size:9px;font-weight:600;opacity:.85}
/* ✅ ยืนยันที่ช่องคืนยอดว่าฝาก+โอนครบยอดของวันหรือยัง (เจ้าของสั่ง 21 ก.ย. 2569) */
.retchk{display:block;font-size:9px;font-weight:700;margin-top:1px}
.retchk.ok{color:var(--ok)}
.retchk.short{color:#b3261e}
/* 🧾 เดินยอดแบบสมุดบัญชีในหน้าเงินทุน (เจ้าของสั่ง 21 ก.ย. 2569) */
/* ── 🔄 ต่อสัญญา · สีม่วงประจำเรื่องนี้ (เจ้าของสั่ง 22 กันยายน 2569) ──────────
   ⛔ ม่วงใช้กับเรื่องต่อสัญญาเท่านั้น · เหลือง=รายวัน เขียว=รายสัปดาห์
      แดง=ค่าปรับ ส้ม=ช่องที่กำลังเลือก · อย่าเอาม่วงไปใช้เรื่องอื่น */
nav a.navrenew{color:#6b3fa0}
nav a.navrenew.navnow{background:#efe6fb;border-color:#c9aee8}
/* 🆕 ใบปล่อยลูกค้าใหม่ · กล่อง 📋 ข้อมูลใบเบิก แบบฟอร์มตั้งเบิก (28 ก.ย. 2569) */
.nlinfo{background:#eef5ff;border:1px solid #cfe0f7;border-radius:12px;padding:10px 12px;margin:6px 0 10px}
.nlinfohead{margin:0 0 6px;font-weight:700;color:#12437f}
.nlrow{display:flex;gap:10px;padding:3px 0;border-bottom:1px dashed #d9e6f7;align-items:baseline}
.nlrow:last-of-type{border-bottom:0}
.nlrow>span{flex:0 0 108px;color:var(--muted,#667)}
.nlrow>b{flex:1 1 auto;font-weight:600;overflow-wrap:anywhere}
.nlrow i{font-weight:400;font-style:normal;font-size:.88em}
.nlid{margin:6px 0 0;font-size:.82em;overflow-wrap:anywhere}
.rnwcard .sigwhybox{background:#fff8e1;border:1px solid #f1dc9c;border-radius:10px;padding:6px 10px;margin:6px 0 4px}
.nlstory{background:#fffaf0;border:1px solid #f1dc9c;border-radius:12px;padding:10px 12px;margin:0 0 10px}
.nlstoryhead{margin:0 0 6px;font-weight:700;color:#7a4f00}
.nlstory ol{margin:0;padding-left:20px}
.nlstory li{margin:4px 0;line-height:1.5;font-size:13px}
.nlcan{font-size:12px;color:#6b5200}
.nlnow{margin:8px 0 0;padding:6px 10px;border-radius:8px;background:#fff1c2;font-weight:600}
.rnwzonenote{font-size:12.5px;font-weight:600;color:#8a5a00}
.rnwcard .sigwhy{margin:3px 0;font-size:13px;line-height:1.45;color:#4a3b00}
.rnwcard{border:2px solid #c9aee8;background:#faf6ff;border-radius:12px;padding:10px 12px;margin:8px 0}
.rnwhead{margin:0 0 6px;font-size:13.5px;font-weight:800;color:#5b3390}
/* 🆕 บรรทัดเตือนในฟอร์มใบเบิกปล่อย · ต้องอ่านออกว่า "ไม่ต้องกรอกช่อง ป ซ้ำ"
   ⛔ ห้ามใช้พื้นเข้ม มีเทสต์วัดความสว่างไว้ (กติกาสีของเจ้าของ 22 ก.ย. 2569) */
.rnwnote{margin:6px 0 0;padding:7px 10px;border-radius:9px;font-size:11.5px;line-height:1.5;
 background:#e8f7ef;border:1px solid #b8dec8;color:#08713f}
/* 🔀 ปุ่มสลับชนิดใบในกล่องตั้งเบิก (เจ้าของสั่ง 22 ก.ย. 2569)
   "แค่เปลี่ยนหัวข้อตรงนี้ ... ลูกค้าใหม่มีสองข้อ สัญญามีสามข้อ" · "ไม่ต้องสร้างกล่องใหม่"
   ⛔ ปุ่มที่เลือกอยู่ต้องเห็นชัดว่าต่างจากอีกปุ่ม · คนต้องรู้ทันทีว่ากำลังตั้งใบแบบไหน
   ⛔ ห้ามใช้พื้นเข้ม มีเทสต์วัดความสว่างไว้ · และห้ามใช้เขียว/แดงของสถานะ */
/* 💰 ดอกที่ปล่อยได้ · ต้องเห็นต่างจากดอกที่ยังไม่โอนตั้งแต่แรกเห็น
   เจ้าของสั่ง 22 ก.ย. 2569 "ดอกปล่อยได้ กับ ดอกยังไม่โอน แยกเป็นส่วนกระเป๋า"
   ⛔ ใช้เขียวอมฟ้าตามระบบสี (เงินที่พร้อมทำงาน) ห้ามใช้เขียวของสถานะ "เสร็จแล้ว" */
.dokgo{color:#15607a}
/* 🔒 ก้อนที่ยังล็อก · ต้องเห็นชัดว่าใช้ไม่ได้ · ส้ม = รอเราทำ ตามระบบสีของเจ้าของ */
.doklock{color:#a35b0a}
/* แจกแจงใต้ยอดรวมที่ต้องโอน · บอกว่ามาจากกระเป๋าไหนเท่าไร
   ⛔ ต้องเล็กกว่ายอดรวมชัดเจน · ยอดที่ต้องโอนจริงคือตัวใหญ่ คนอ่านต้องไม่สับสน */
.mixnote{font-size:10.5px;color:#5a6672;font-weight:400;margin-top:2px}
/* กล่องปลดล็อกของเจ้าของกับแอดมิน · ⛔ ห้ามใช้พื้นเข้ม มีเทสต์วัดความสว่างไว้ */
.lockbox{border:2px solid #efbd69;background:#fffaf0;border-radius:12px;padding:10px 12px;margin:10px 0}
.lockbox>.h{display:block;font-size:13.5px;font-weight:800;color:#8a4b06;margin-bottom:2px}
.rnwswitch{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 8px}
.rnwsw{background:#fff;border:1.5px solid #c9aee8;color:#5b3390;border-radius:999px;
 padding:6px 13px;font-size:12px;font-weight:700;cursor:pointer;line-height:1.3}
.rnwsw i{font-style:normal;font-weight:400;font-size:10.5px;color:#7a6a90}
.rnwsw:hover{background:#f7f1ff}
.rnwsw.on{background:#5b3390;border-color:#5b3390;color:#fff}
.rnwsw.on i{color:#ded0f2}
.rnwzone{margin:10px 0 4px;font-weight:800;color:#5b3390}
.rnwbar{height:8px;border-radius:999px;background:#ece3f7;overflow:hidden;margin:4px 0 8px}
.rnwbar>i{display:block;height:100%;background:#8a5cc7}
/* 🧑‍💼 ใครรับผิดชอบใบ · ใครกดจุดไหน (เจ้าของสั่ง 22 ก.ย. 2569)
   ⛔ ต้องอ่านได้ แต่ต้องไม่แย่งสายตาไปจากตัวเลขเงินกับปุ่มที่ต้องกด */
.rnwowner{margin:0 0 6px;padding:6px 10px;border-radius:8px;background:#f3eefb;
  border-left:4px solid #6b3fa0;font-size:12.5px;color:#5b6675}
.rnwowner b{color:#4b2a73}
/* หัวใบ 3 บรรทัด (เจ้าของสั่ง 22 ก.ย. 2569)
   บรรทัด 1 ใครรับผิดชอบ · บรรทัด 2 เงินเดินยังไง · บรรทัด 3 ใบไหนเท่าไร
   ⛔ ต้องไล่ระดับความเด่นจากบนลงล่าง คนอ่านจะได้กวาดตาตามลำดับที่ตั้งใจ */
.rnwby{color:#4b2a73;font-weight:700}
.rnwflow{margin:2px 0;font-size:13.5px;line-height:1.6}
.rnwflow b{color:#1b2430}
.rnwarrow{color:#8a94a0;padding:0 2px}
.rnwwhat{margin:2px 0 6px;font-size:14px}
.rnwwhat b{color:#1b2430}
.rnwcancelled{margin:0 0 6px;padding:6px 10px;border-radius:8px;background:#fff5f4;
  border-left:4px solid #c4362f;font-size:13px;color:#7a201b}
.sigwho{font-size:11.5px;color:#5b6675;margin-top:2px;line-height:1.35}
/* ⬜ ยังไม่ถึงคิว · ต้องอ่านออกว่ารอใคร ไม่ใช่จาง ๆ จนมองไม่เห็น */
.sigwait{font-size:12.5px;color:#7a6320;background:#fdf6e3;border:1px solid #e8d79b;
  border-radius:8px;padding:3px 8px;display:inline-block}
.sigwait b{color:#5a4712}
/* ── 🚦 สีปุ่มในใบต่อสัญญา (เจ้าของสั่ง 22 ก.ย. 2569) ─────────────────────────
     "ถ้ายังไม่กดให้เปลี่ยนเป็นสีส้ม กดแล้วเปลี่ยนเป็นสีเขียว ปฏิเสธกดเป็นสีแดง"
   ⛔ สามสถานะห้ามใช้สีซ้ำกันเด็ดขาด · คนกวาดตาดูสีอย่างเดียวแล้วต้องรู้ทันที
      ส้ม = ยังต้องกด · เขียว = เรียบร้อย · แดง = ยกเลิก/ปฏิเสธ
   ⛔ ปุ่มรออยู่ต้องเป็นส้ม ไม่ใช่น้ำเงิน · น้ำเงินดูเหมือนปุ่มทั่วไป ไม่รู้ว่าต้องกด
   ⛔ ตัวหนังสือบนส้มต้องเข้ม · ส้มกับขาวอ่านไม่ออก */
.rnwcard .okbtn{background:#ef8b1c;border:1px solid #d1751169;color:#3a2200;font-weight:700}
.rnwcard .okbtn:hover{background:#dc7c10;border-color:#b8650a}
.rnwcard .pill.ok{background:#e7f6ed;border:1px solid #9fd4b4;color:#0a5c34;font-weight:700}
.rnwcard .rnwcancel > summary{color:#b91c1c;font-weight:700}
.rnwcard button.bad, .rnwcard .ghost.bad{background:#c4362f;border-color:#c4362f;color:#fff}

/* ✖ ยกเลิกใบต่อสัญญา (เจ้าของสั่ง 22 ก.ย. 2569) · พับไว้ ไม่ให้กดพลาด */
.rnwnocancel{margin:10px 0 0;padding:6px 10px;border-top:1px dashed #d6c7ea;
  font-size:12.5px;color:#5b6675}
.rnwnocancel b{color:#4b2a73}
.rnwcancel{margin-top:10px;border-top:1px dashed #d6c7ea;padding-top:8px}
.rnwcancel>summary{cursor:pointer;color:#b91c1c;font-size:13px;width:max-content}
.rnwcancel[open]>summary{margin-bottom:4px}
/* 💰 ตัวช่วยกรอกใบต่อสัญญา · โชว์เงินที่แต่ละคนมี + ตัวนับสด + พรีวิว (22 ก.ย. 2569) */
.rnwcol{min-width:0}
.rnwcol>b{font-size:15px}
.rnwcol .rnwrows{display:flex;flex-direction:column;gap:6px}
.rnwtally{margin:8px 0 0;font-size:13px;color:#6b7280}
.rnwtally b{font-size:15px}
.rnwtally.good{color:#15803d}
.rnwtally.bad{color:#b91c1c}
/* 💰 ติ๊กว่าเงินก้อนนี้เป็นของเซลล์เอง (เจ้าของสั่ง 22 ก.ย. 2569)
   ⛔ ต้องเห็นชัดว่าเป็นทางเลือกที่เปลี่ยนเรื่องเงิน ไม่ใช่ช่องประดับ */
/* ── 💰 ช่องติ๊ก "เงินของเซลล์คนนี้เอง" ในใบตั้งเบิก ─────────────────────────
 * เจ้าของสั่ง 23 กันยายน 2569 "ปรับช่องสี่เหลี่ยมตรงนี้ให้เล็กมาก ๆ"
 * ⛔ ของเดิมพองเป็นกล่องเหลืองสูง 300 กว่าพิกเซล ตัวหนังสือเรียงลงมาทีละตัว
 *    เพราะ .rnwown เป็น flex แล้ว span ข้างในไม่มี min-width:0 · พอที่แคบ
 *    span หดจนเหลือความกว้างเท่าตัวอักษรเดียว แล้วตัดบรรทัดทุกตัวอักษร
 * ⛔ แก้สองอย่างพร้อมกัน ① ให้ span ยืดได้และหดได้จริง (flex:1 1 auto + min-width:0)
 *    ② ย่อขนาดทุกค่าลง · ห้ามแก้แค่อย่างใดอย่างหนึ่ง ไม่งั้นยังพองเหมือนเดิมเวลาจอแคบ */
.rnwown{display:inline-flex;align-items:center;gap:5px;margin:2px 0 0;
  padding:2px 7px;border:1px dashed #d9b04a;border-radius:6px;background:#fffbf0;
  font-size:11px;line-height:1.3;cursor:pointer;max-width:100%}
.rnwown input{margin:0;flex:0 0 auto;width:13px;height:13px}
.rnwown span{flex:1 1 auto;min-width:0}
.rnwown i{font-style:normal;font-size:10px}
.rnwown:has(input:checked){border-style:solid;border-color:#c98f00;background:#fff3d6;font-weight:700}
.rnwhave{font-size:12.5px;margin-top:2px}
.rnwhave.good{color:#15803d}
.rnwhave.bad{color:#b91c1c;font-weight:600}
input.overdraw{border-color:#b91c1c;background:#fff5f5}
.rnwpreview{margin-top:10px;padding:10px 12px;border:1px solid #c9aee8;border-radius:10px;background:#faf6ff}
.rnwlegs{margin:0;padding-left:20px}
.rnwlegs li{margin:2px 0}
.rnwverdict{margin:8px 0 0;font-weight:600}
.rnwverdict.good{color:#15803d}
.rnwverdict.bad{color:#b91c1c}
.rnwdanger{border:2px solid #b3261e;background:#fdeceb;color:#8c1d18;border-radius:12px;padding:10px 12px;margin:8px 0;font-weight:700}
.fdrun{margin:8px 0;padding:10px 12px;border:2px solid #d8c9a8;border-radius:12px;background:#fffdf5}
.fdrunhead{margin:0 0 8px;font-size:13.5px;font-weight:800;color:#7a5a1e}
.fdruncols{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.fdrunbox{padding:9px 11px;border:1px solid #e7e0cc;border-radius:10px;background:#fff}
.fdruntitle{display:block;margin:0 0 6px;font-size:12.5px}
.fdrunline{display:flex;justify-content:space-between;gap:10px;margin:3px 0;font-size:12.5px}
.fdrunline b{font-variant-numeric:tabular-nums;white-space:nowrap}
.fdrunline.sum{margin-top:6px;padding-top:6px;border-top:2px solid var(--line);font-weight:800}
.fdrunwho{margin:2px 0 6px;padding-left:16px;list-style:none}
.fdrunwho li{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--muted);margin:2px 0}
.fdrunwho li b{color:var(--ink);font-variant-numeric:tabular-nums}
/* 🧾 ป้ายบอกสถานะรายคน (เจ้าของทัก 21 ก.ย. 2569 "โอนไปแล้วแต่ยอดตรงนี้ยังค้างอยู่")
   ⛔ ต้องอ่านออกตั้งแต่ยังไม่ทันคิดเลข เขียว = จบแล้ว ส้ม = ยังต้องตาม
   ⛔ ชื่อยาวต้องไม่ดันป้ายตกขอบ จึงให้บรรทัดห่อได้ */
.fdrunwho li{flex-wrap:wrap}
/* ⛔ ป้ายต้องขึ้นบรรทัดใหม่ทุกอัน · ชื่อสั้นชื่อยาวจะได้เรียงตรงกันหมด
   ไม่งั้นบางแถวป้ายต่อท้าย บางแถวตกลงมา อ่านแล้วสับสน */
.fdrunwho li .runstat{flex:0 0 100%;display:block}
.fdrunwho li .rundone,.fdrunwho li .runwait{display:inline-block;font-style:normal;font-size:11px;
  padding:1px 7px;border-radius:999px;white-space:nowrap}
.fdrunwho li .rundone{background:#e7f6ec;color:#1b6b3a;border:1px solid #bfe3cd}
.fdrunwho li .runwait{background:#fff2e0;color:#8a4b00;border:1px solid #f3d6ae}
.runclear{margin:4px 0 0;font-size:11.5px;font-weight:700;color:#1b6b3a;
  background:#e7f6ec;border:1px solid #bfe3cd;border-radius:8px;padding:4px 8px}
/* 💼 กล่องสรุปเงินทั้งหมดที่ถืออยู่ (เจ้าของสั่ง 21 ก.ย. 2569 ให้ใหญ่ขึ้น) */
.wsum.wsumbig{margin:10px 0 0;padding:12px 14px;border:2px solid #1d69b6;border-radius:14px;
  background:#eef4fb;box-shadow:0 1px 4px rgba(16,32,56,.08)}
.wsum.wsumbig > b{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-size:15px;color:#17518c;flex-wrap:wrap}
.wsumnum{font-size:30px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums;color:#0b3f74}
.wsum.wsumbig .muted{display:block;margin-top:4px;font-size:12px}
@media (max-width:700px){.wsumnum{font-size:26px}}
/* 🧮 กล่องรวมเงินทั้งหมดของบริษัท (เจ้าของสั่ง 21 ก.ย. 2569) · ต้องเด่นกว่ากล่องอื่น */
.pocket.total.grand{border-color:#b08948;background:#fffdf5}
.pocket.total.grand > b{color:#7a5a1e}
/* ✋ ปุ่มเก็บไว้ที่ตัวเอง (เจ้าของสั่ง 21 ก.ย. 2569) · เทา ไม่ใช่ปุ่มโอนจริง */
button.selfhold-submit{min-height:38px;padding:0 14px;border:1px solid #8a8f97;border-radius:9px;
  background:#6b7280;color:#fff;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
button.selfhold-submit:hover{background:#4b5158}
@media (max-width:700px){.rselfbtn{flex:1 1 100%}button.selfhold-submit{width:100%;min-block-size:46px}}
/* 🎫 กล่องเลือกใบอนุญาตในการ์ดโอนเงินต้น (เจ้าของสั่ง 21 ก.ย. 2569) */
.rpermit{margin:6px 0 0;padding:7px 9px;border:1px solid #d8c9a8;border-radius:9px;background:#fffdf5}
.rpline{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:12px;margin:2px 0}
.rpline.used{color:#17518c}
.rpform{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:5px}
.rpform select{flex:1 1 200px;min-width:0;font-size:12px;padding:6px 8px}
@media (max-width:700px){
  .rpform select, .rpform button{flex:1 1 100%;width:100%;min-block-size:42px}
  .rpline form.inline, .rpline button{flex:1 1 100%;width:100%}
}
.remitok small,.remitwait small,.remitpart small{display:block;font-size:9px;font-weight:600;opacity:.85}
.remithead{font-weight:700;margin-bottom:8px;font-size:11.2px;display:flex;gap:10px;flex-wrap:wrap;align-items:baseline}
/* ซ่อนให้ได้จริงแม้ตัวมันเองจะตั้ง display ไว้ (เช่น .grid2 ที่เป็น grid) */
.stbar{border-radius:10px;padding:11px 14px;margin:10px 0;display:flex;flex-wrap:wrap;
  gap:6px 14px;align-items:center;border:1px solid;font-size:11.6px}
.stbar b{font-size:12.4px}
.stbar span{flex:1 1 260px;font-size:10.8px;opacity:.92}
.stbar.pay{background:#fff6e6;border-color:var(--warn);color:#6b4a08}
.stbar.confirm{background:#e8f7ef;border-color:var(--ok);color:#0a5c38}
.stbar.wait{background:#eef3fb;border-color:var(--brand);color:#123a6b}
/* บิลเรียกเก็บที่ระบบเตรียมให้ตอน 06:00 — แยกงานที่ต้องทำกับประวัติที่จบแล้วให้เห็นทันที */
.billsection{scroll-margin-top:118px}
/* การ์ดบิลที่กำลังกางฟอร์มอยู่ — ทำให้เห็นชัดว่ากำลังแก้ใบไหน (เจ้าของสั่ง 6 ก.ย. 2569) */
.billcard.billopened{border-color:var(--brand);box-shadow:0 0 0 2px rgba(11,92,171,.14);grid-column:1/-1;scroll-margin-top:118px}
.billcard.billopened>.card{margin-top:10px}
a.seebtn.billopen{cursor:pointer}
.billgroup{margin-top:12px}
.billgroup>h3{display:flex;gap:7px;align-items:center;margin-bottom:8px}
.billgrid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.billcard{margin:0;border-left:5px solid var(--line);padding:12px 14px}
.billcard.ready{border-left-color:var(--warn);background:#fffdf6}
.billcard.unpaid{border-left-color:#d47b16;background:#fff9f0}
.billcard.waiting_payer{border-left-color:var(--brand);background:#f4f8fd}
.billcard.waiting_book_owner{border-left-color:#dc7a00;background:#fff8e9}
.billcard.completed{border-left-color:var(--ok);background:#f2faf5}
.billcard.issue{border-left-color:var(--bad);background:#fff7f6}
.billcard.waived{border-left-color:#7a8796;background:#f7f8fa}
.billactions{display:flex;gap:8px;align-items:flex-start;flex-wrap:wrap;margin-top:8px}
.billwaive,.billunpaid{flex:1 1 260px;border:1px dashed #b7c0cb;border-radius:9px;background:#fff;padding:7px 10px}
/* กลุ่มที่จบไปแล้ว ยุบเก็บไว้ ไม่ให้กินที่ (เจ้าของสั่ง 18 ก.ย. 2569) */
details.billfold>summary{cursor:pointer;list-style:none;font-weight:700;padding:6px 0;color:var(--muted)}
details.billfold>summary::-webkit-details-marker{display:none}
details.billfold>summary::before{content:'▸ '}
details.billfold[open]>summary::before{content:'▾ '}
details.addbill>summary{cursor:pointer;list-style:none;padding:2px 0}
details.addbill>summary::-webkit-details-marker{display:none}
details.addbill>summary::before{content:'▸ ';color:var(--muted)}
details.addbill[open]>summary::before{content:'▾ '}
.billwaive summary,.billunpaid summary{cursor:pointer;font-weight:700}
.billwaive summary{color:var(--bad)}
.billwaive.claimfix summary{color:var(--brand)}
.billwaive.claimfix label{display:block;font-size:9.6px;color:var(--muted);margin-top:6px}
.billwaive .claimcancel{border-top:1px dashed var(--line);margin-top:9px;padding-top:7px}
.billwaive .claimnote{background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:6px 8px;margin-top:9px}
.billunpaid summary{color:var(--ink)}
.billwaive form,.billunpaid form{margin-top:8px}
.billwaive textarea{min-height:64px}
.billchecked{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border:1px solid #b8ddc7;border-radius:9px;background:#eefaf3}
.billcard.billopened #claimform{display:grid;gap:10px}
.billcard.billopened #claimform>.row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.billlocked{margin-top:8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;background:#f7f8fa;color:var(--muted);font-size:10.4px}
.collectpending{display:block;margin-top:5px;padding:5px 7px;border:1px dashed #dc7a00;border-radius:8px;background:#fff8e9;color:#8a4700;font-size:9.8px;line-height:1.35;text-align:left;white-space:normal}
.bookconfirm{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px}
.bookconfirm button{min-height:48px}
.billhead{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.billhead b{font-size:12px}
.billmeta{margin-top:3px;color:var(--muted);font-size:10.4px}
.billmoney{display:flex;gap:7px;align-items:baseline;flex-wrap:wrap;margin:10px 0 8px;padding:8px 10px;
  background:#fff;border:1px solid var(--line);border-radius:9px;font-size:10.8px}
.billmoney strong{font-size:13.6px;color:var(--brand)}
.billpicked{border:2px solid var(--brand);background:#eef5fd;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.billfacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:8px;margin:10px 0 12px}
.billfact{border:1px solid var(--line);border-radius:9px;background:#fff;padding:9px 10px}
.billfact span{display:block;color:var(--muted);font-size:10px;margin-bottom:2px}
.billfact b{font-size:12px}
.billmemory{margin-top:6px;padding:7px 9px;border-radius:8px;background:#eef7f1;color:#17623e;font-size:10.4px}
[hidden]{display:none !important}
/* ตารางทั้งเดือนรายคน — ตรึงชื่อไว้ซ้าย เลื่อนดูวันไปทางขวา */
.monthpick{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.gridwrap{padding-top:10px}
.gridhint{margin-bottom:8px;line-height:1.7}
.gscroll{overflow:auto;max-height:72vh;border:1px solid var(--line);border-radius:10px}
table.gridtable{border-collapse:separate;border-spacing:0;font-size:9.6px;min-width:100%}
table.gridtable th,table.gridtable td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:3px 4px;vertical-align:middle}
table.gridtable thead th{position:sticky;top:0;z-index:3;background:#eef2f7;font-size:9.6px;font-weight:700;text-align:center}
th.gname{position:sticky;left:0;z-index:2;background:#fff;text-align:left;min-width:168px;max-width:168px;
  font-weight:600;font-size:10px;line-height:1.35}
th.gcorner{z-index:4;background:#eef2f7}
/* ป้ายบอกว่าซ่อนกี่ราย — เล็ก ๆ ใต้จำนวนลูกค้า ให้รู้ว่าไม่ได้หายไปไหน */
th.gcorner i.ghid{display:block;font-style:normal;font-size:9px;font-weight:600;color:var(--muted)}
th.gname a{color:var(--ink);text-decoration:none}
th.gname a:hover{color:var(--brand);text-decoration:underline}
.gsub{display:block;color:var(--muted);font-size:9px;font-weight:400}
th.gd{min-width:44px}
th.gd a{color:inherit;text-decoration:none;display:block}
th.gd.gtoday,td.gtoday{background:#fff4d6}
th.gd.future,td.future{background:#fafbfc;color:#c6cfd9}
td.gc{text-align:center;min-width:44px;padding:2px}
td.gc a{display:block;text-decoration:none;color:inherit;border-radius:5px;padding:2px 1px;min-height:22px}
td.gc a:hover{background:#fff3e3;box-shadow:inset 0 0 0 1px var(--markline)}
td.gc i{display:block;font-style:normal;font-weight:700;font-size:9px;line-height:1.25}
td.gc a.gcell{display:block}
td.gc a.gsel{background:var(--mark);box-shadow:inset 0 0 0 2px var(--markbar)}
td.gc a.gsel i{color:var(--markink)}
/* ป๊อปอัปของแต่ละวัน — ลอยอยู่มุมล่างขวา กดปิดได้ ไม่ต้องเปลี่ยนหน้า */
.gpop{position:fixed;right:16px;bottom:16px;z-index:60;width:min(320px,92vw);background:#fff;
  border:2px solid var(--brand);border-radius:12px;padding:12px 14px;box-shadow:0 8px 30px rgba(20,30,45,.22)}
.gpophead{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:2px}
.gpophead b{font-size:11.6px}
.gpopx{font-size:9.6px;padding:3px 9px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;font-weight:600}
.gpopx:hover{border-color:var(--bad);color:var(--bad)}
.gpopdate{color:var(--muted);font-size:10px;margin-bottom:8px}
table.gpoptab{width:100%;font-size:10.4px;border-collapse:collapse}
table.gpoptab td{padding:4px 0;border-bottom:1px dashed var(--line)}
table.gpoptab td.num{text-align:right;font-weight:700}
table.gpoptab i.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
table.gpoptab i.g1{background:var(--ok)}table.gpoptab i.g2{background:var(--warn)}table.gpoptab i.g3{background:var(--brand)}
#gpopnote{margin:8px 0;font-size:10px}
.gpopgo{display:block;text-align:center;background:var(--brand);color:#fff;text-decoration:none;
  border-radius:8px;padding:8px;font-weight:700;font-size:10.4px}
@media(max-width:560px){.gpop{left:12px;right:12px;width:auto}}
/* ⛔ เคยมีวงเล็บปิดเกินตรงนี้ (ตั้งแต่ 24 ก.ย. 2569 · พบ 26 ก.ย.) ทำให้เบราว์เซอร์ทิ้งกฎ td.gc .g1 บรรทัดล่าง · ล็อกที่ test/renewal-form-compact.test.js */
td.gc .g1{color:var(--ok)}
td.gc .g2{color:var(--warn)}
td.gc .g3{color:var(--brand)}
td.gc .gnone{color:#d3dae3;font-weight:400}
td.gc .gdot{color:var(--brand);font-size:9px}
td.gc.due{box-shadow:inset 0 -2px 0 var(--ok)}
td.gc.partial{background:#fff4e8}
td.gc.missed{background:#fdeceb}
td.gc.missed .gdot{color:var(--bad)}
td.gsum,th.gsum{position:sticky;right:0;background:#f4f7fa;text-align:center;min-width:62px;z-index:2;border-left:2px solid var(--line)}
td.gfoot{background:#f4f7fa;font-weight:700}
td.gfoot.gtoday{background:#fff0c9}
.gduecnt{color:var(--muted);font-size:9px;font-weight:600}
b.g1{color:var(--ok)}b.g2{color:var(--warn)}b.g3{color:var(--brand)}
tfoot th.gname{background:#f4f7fa}
/* แผงคุมการเก็บเงิน — แถบความคืบหน้า + กราฟแท่ง 7 วัน */
.dashbox{border-top:3px solid var(--brand)}
.waiveform label{display:block;font-size:9.6px;color:var(--muted);margin-top:4px}
.waiveform .okline{display:flex;gap:7px;align-items:flex-start;color:var(--ink);font-size:10px;margin:7px 0}
.waiveform .okline input{width:auto;margin:2px 0 0}
.waivewhy{display:block;font-size:9.2px;font-style:italic}
tr.cr.waived td{background:#fafbfc;color:var(--muted)}
/* ปุ่มขอแก้ไขยอดรายวัน บนหัวคอลัมน์ของชีตที่ 1 — เจ้าของสั่ง 7 ก.ย. 2569 */
button.dayask{margin-left:4px;border:1px solid #d7e0ea;background:#fff;color:#5b6976;border-radius:6px;
  font-size:9.5px;line-height:1;padding:2px 5px;cursor:pointer;vertical-align:middle}
button.dayask:hover{border-color:var(--brand);color:var(--brand)}
button.dayask.wait{background:#fff4e2;border-color:#f0c48a;color:#9c5000;cursor:default}
button.dayask.ok{background:#e8f7ef;border-color:#bfe6ce;color:#0a7d47}
/* กล่องล้างยอดเงินเซลล์ — เจ้าของสั่ง 8 ก.ย. 2569 ต้องใส่รหัสก่อนกด
   ทำเป็นกล่องพับไว้ จะได้ไม่กดโดนโดยบังเอิญ เพราะเป็นรายการเงิน */
details.clearfold{margin-top:6px;border:1px solid #f0c6c2;border-radius:6px;background:#fdf6f5}
details.clearfold>summary{cursor:pointer;padding:5px 9px;font-size:11.5px;font-weight:700;color:#b3261e}
details.clearfold[open]>summary{border-bottom:1px solid #f0c6c2}
details.clearfold.reset{border-color:#c7b28a;background:#fdfaf2}
/* ป้ายบอกผลการโอน มุมล่างขวา — แทนการโหลดหน้าใหม่เพื่อโชว์ข้อความ */
.remittoast{position:fixed;right:14px;bottom:14px;z-index:80;max-width:min(90vw,420px);
  padding:10px 14px;border-radius:9px;font-size:13px;font-weight:600;line-height:1.5;
  box-shadow:0 3px 12px rgba(0,0,0,.18)}
.remittoast.ok{background:#0a7d47;color:#fff}
.remittoast.bad{background:#b3261e;color:#fff}
.remittoast[hidden]{display:none}
details.clearfold.reset>summary{color:#8a6a12}
details.clearfold.reset[open]>summary{border-bottom-color:#c7b28a}
.clearform{padding:9px;display:flex;flex-direction:column;gap:6px}
.rrcheck{display:flex;gap:8px;align-items:flex-start;margin:8px 0;cursor:pointer;line-height:1.4}
.rrcheck input{width:20px;height:20px;flex:0 0 auto;margin-top:2px}
.clearform input{width:100%;font-size:12px;padding:5px 7px}
.clearwarn{margin:0;font-size:11.5px;line-height:1.5;color:#7a3b36}
.clearform button.danger{background:#b3261e;border-color:#b3261e;color:#fff;font-weight:700}
.clearform button.danger:hover{background:#8f1e18;border-color:#8f1e18}
/* ปุ่มกรอกเร็ว หน้าวันที่ (เจ้าของสั่ง 8 ก.ย. 2569) — ตัวหนังสือล้วน ไม่มีไอคอน */
button.qfill{margin-right:5px;border:1px solid #12437f;background:#12437f;color:#fff;border-radius:6px;
  font-family:inherit;font-size:9.5px;font-weight:700;line-height:1;padding:3px 7px;cursor:pointer;
  vertical-align:middle}
button.qfill:hover{background:#0e3566;border-color:#0e3566}
button.qfill[hidden]{display:none}
/* หัวคอลัมน์วันต้องอยู่บรรทัดเดียว (เจ้าของสั่ง 8 ก.ย. 2569 "จัดวาง layout ใหม่เป็นแนวตรงเพื่อลดพื้นที่")
 * ตัววันที่ถูกตั้งเป็น block กินเต็มบรรทัด ปุ่มกรอกเร็วเลยถูกดันขึ้นบรรทัดใหม่
 * ทำให้หัวตารางสูงขึ้นเกือบเท่าตัว · เฉพาะช่องที่มีปุ่มเท่านั้นที่ต้องแก้
 * ใช้ตัวเลือกแบบพี่น้องติดกัน (+) จึงไม่กระทบหัววันอื่นที่ไม่มีปุ่ม */
th.bgrp{white-space:nowrap}
/* หัวคอลัมน์วันต้องเรียงบรรทัดเดียว — ปุ่มกรอกเร็ว · เลขวัน · กุญแจ
 * (เจ้าของสั่ง 8 ก.ย. 2569 "ให้กุญแจอยู่ด้านหลังเลข จัดวางเลย์เอาต์ใหม่ ลดพื้นที่")
 * ทุกชิ้นข้างในเป็น inline หมดแล้ว บวกกับ white-space:nowrap ข้างบน จึงไม่ตกบรรทัด
 * ลิงก์กดเลือกวันถูกถอดออกไปแล้ว จึงไม่ต้องมีกฎแก้ display ของมันอีก */
table.bktable th.bgrp button.dayask{vertical-align:middle}
/* แถบถามยืนยัน และแถบถอยหลังกรอก */
.qfbar{margin:8px 0 0;border-radius:8px;padding:10px 13px;font-size:12.5px;line-height:1.6}
.qfbar[hidden]{display:none}
.monthtable .specialrow td{background:#fff8ec;border-top:2px dashed #e0b25a}.monthtable .specialrow .spgo{margin-left:8px;font-weight:600}
.peekbar{margin:6px 0 8px;padding:8px 12px;border-radius:8px;background:#eef5ff;border:1px solid #9cc0ef;font-size:13px}
.qfbar .qfcalc{opacity:.7;font-size:.92em}.qfbar li.qfdiff{background:#fff5d6}.qfbar .qfwarn1{color:#8a5a00;font-weight:600}
.qfbar.ask{background:#fdf3dd;border:1px solid #c99a1e}
.qfbar.done{background:#e8f7ef;border:1px solid #0a7d47}
.qfbar b.h{display:block;font-size:13.5px;margin-bottom:4px}
.qfbar.ask b.h{color:#8a6a12} .qfbar.done b.h{color:#0a7d47}
.qflist{margin:0 0 8px;padding-left:18px}
.qfwarn{background:#fff;border-radius:5px;padding:6px 9px;margin-bottom:8px;font-size:12px}
.qfbtn{border:1px solid #d7e0ea;background:#fff;color:#2b3a49;border-radius:6px;padding:6px 14px;
  font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer;margin-right:7px}
.qfbtn.go{background:#0a7d47;border-color:#0a7d47;color:#fff}
.qfbtn.undo{border-color:#0a7d47;color:#0a7d47}
/* คำอธิบายปุ่มยืนยัน เหนือตารางกรอกประจำวัน — เจ้าของถาม 7 ก.ย. 2569 */
.daytip{margin:0 0 8px;font-size:12.5px;line-height:1.5;background:#f3f7fb;border:1px solid #dfe8f2;
  border-radius:9px;padding:7px 11px}
/* ปุ่มลบลูกค้าออกจากรายชื่อ — เจ้าของสั่ง 7 ก.ย. 2569 */
.delfold2{margin-top:5px}
.delwhy{font-size:11px;margin-top:5px;line-height:1.35}
/* ป้ายนับท้ายแถวในตารางกรอกประจำวัน — เจ้าของสั่ง 6 ก.ย. 2569 */
.mkfold{position:relative;display:block;margin-top:3px}
/* หน้าตาป้ายต้องเหมือนชีตที่ 1 เป๊ะ - เต็มความกว้างช่อง ติดขอบล่าง (เจ้าของสั่ง 7 ก.ย. 2569) */
.mkfold summary{cursor:pointer;list-style:none;display:block;width:100%;box-sizing:border-box;
  text-align:center;font-size:10px;font-weight:700;font-style:normal;line-height:1.3;
  padding:1px 2px;min-height:15px;border:1px solid transparent;border-radius:0 0 4px 4px}
.mkfold summary::-webkit-details-marker{display:none}
.mkpop{position:absolute;z-index:30;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 10px 26px rgba(0,0,0,.16);padding:8px;width:212px;
  display:flex;gap:4px;flex-wrap:wrap}
.mkpop button.rmk{font-size:12.5px;padding:3px 9px}
/* ตัวเลขดอกตามรอบในหน้ารายชื่อ กดแก้ได้ (เจ้าของสั่ง 8 ก.ย. 2569 "แก้ดอกตรงนี้ได้ไหม") */
details.intfold > summary{cursor:pointer;list-style:none}
details.intfold > summary::-webkit-details-marker{display:none}
details.intfold .intnum{border-bottom:1px dotted var(--brand);color:var(--brand);font-weight:700}
details.intfold[open] .intnum{color:var(--markink)}
/* ป้ายเตือน "ยอดยกมาบวกปล่อยลบคืน ไม่เท่ากับยอดปัจจุบัน" (เจ้าของสั่ง 7 ก.ย. 2569 ข้อ 5)
   ต้องสะดุดตา เพราะแปลว่ายอดบนจอของรายนั้นอาจไม่ใช่ยอดจริง */
i.mmflag,span.mmflag{color:#b3261e !important;font-weight:800 !important;font-style:normal;
  background:#fdeeec;border:1px solid #f0c4bd;border-radius:6px;padding:0 4px;display:inline-block;margin-top:2px}
/* ปุ่มรัน (เจ้าของสั่ง 7 ก.ย. 2569) — อยู่แถวเดียวกับ ค้าง/ลบป้าย หน้าตาเดียวกัน
   แต่เป็นตัวสั่งงาน ไม่ใช่ตัวเลือกป้าย จึงย้อมเขียวไว้ให้แยกออก */
.mkpop button.rmk.mkrun{background:#eafaf1;border-color:#b7e1c4;color:#0a7d47;font-weight:700}
.mkpop button.rmk.mkrun:hover:not(:disabled){background:#0a7d47;border-color:#0a7d47;color:#fff}
.mkpop button.rmk.mkrun:disabled{background:#f4f6f9;border-color:var(--line);color:#a8b4c2;cursor:default}
.mkpop .mkmsg{display:block;width:100%;font-size:11px;color:var(--muted);line-height:1.4;margin-top:2px}
.mkpop .mkmsg.ok{color:var(--ok);font-weight:700}
.mkpop .mkmsg.bad{color:var(--bad);font-weight:700}
.closeform{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
button.closebtn{border-color:var(--ok);color:var(--ok);font-weight:700}
/* เลิกเตือนรายนี้ถาวร — เทาเงียบ ไม่ใช่สีเตือน · ยอดค้างในแถวยังเป็นตัวเลขจริงครบ */
.pill.hush{background:#eef1f5;color:#5b6976;border:1px solid #dbe1e8}
tr.cr.quiet td{background:#fbfcfd}
.hushwhy{display:block;font-size:9.2px}
button.ghost.hushon{border-color:var(--ok);color:var(--ok)}
.dashhead{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:8px}
.dashhead .muted{font-size:10px}
.progwrap{margin-bottom:12px}
.proghead{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:10.8px;margin-bottom:4px}
.progbar{position:relative;height:22px;border-radius:11px;background:#eef1f5;overflow:hidden}
.progbar i{display:block;height:100%;background:linear-gradient(90deg,#0a7d47,#12a862);border-radius:11px}
.progbar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9.6px;font-weight:700;color:var(--ink)}
.fchart{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end}
.fcbar{display:flex;flex-direction:column;align-items:center;gap:3px;text-decoration:none;color:inherit;border-radius:8px;padding:4px 2px}
.fcbar:hover{background:#f2f5f9}
.fcamt{font-size:9px;font-weight:700;color:var(--muted);white-space:nowrap}
.fccol{display:flex;align-items:flex-end;height:88px;width:100%;justify-content:center}
.fccol i{display:block;width:70%;background:#9fb6cc;border-radius:5px 5px 0 0}
.fcbar.now .fccol i{background:var(--markbar)}
.fcbar.late .fccol i{background:var(--bad)}
.fcbar.now{background:#fff6ec;box-shadow:inset 0 0 0 1px var(--markline)}
.fcday{font-size:9.2px;font-weight:700}
.fccnt{font-size:9px;color:var(--muted)}
@media(max-width:560px){.fcamt{display:none}.fccol{height:64px}}
.todayremit .remithead{margin-bottom:0;gap:12px;font-weight:400}
.tsum{font-size:10.8px;color:var(--muted)}
.tsum b{color:var(--ink);font-weight:700;margin-left:4px}
.tsum b.mi,.tsum b.mo{margin-left:6px}
.todaybtn{font-size:10.4px;padding:5px 12px}
.remittick{margin-left:auto;font-size:9.2px;font-weight:600;color:var(--muted);white-space:nowrap}
.remitclose{font-size:9.6px;padding:3px 10px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;font-weight:600}
.remitclose:hover{border-color:var(--bad);color:var(--bad)}
.remithead .muted{font-weight:400}
tr.monthremit .remitbox{margin:0}
.monthend{text-align:right;font-size:12.8px;margin:8px 2px 0}
/* กล่อง .mendbox — สองแถว แถวละสองช่อง พร้อมช่องเหตุผลต่อท้าย
   เจ้าของสั่ง 20 ก.ย. 2569 "จัดวางเป็นสองแถวพร้อมใส่เหตุผลด้วยด้านหลัง แต่ไม่ต้องบังคับพิมพ์" */
.mendbox{border-left:6px solid #8a5bc4}
.mendgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:4px}
.mendcell label{display:block;font-size:11.2px;color:var(--muted);margin-bottom:2px}
.mendcell.plus label{color:#1d5c1d;font-weight:700}
.mendline{display:flex;gap:6px}
.mendline input{min-width:0}
input.mendamt{flex:0 0 38%;text-align:right;font-variant-numeric:tabular-nums}
input.mendnote{flex:1 1 auto}
.mendcell.plus input.mendamt{border-color:#8fbf8f;background:#f6fcf6}
.mendcell p.muted{margin:2px 0 0;font-size:10.4px}
.mendsave{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.mendcell.free{border-left:3px solid #cfd8e3;padding-left:8px}
input.mendcat{width:100%;margin-bottom:4px;font-weight:600}
.mendcell.free label{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mendx{border:1px solid #e0c2c2;background:#fdf6f6;color:#8a2b2b;border-radius:6px;
  padding:0 7px;font-size:10.4px;font-weight:700;cursor:pointer;line-height:1.7}
@media (max-width:700px){.mendgrid{grid-template-columns:1fr}}
.specialrow td{background:#faf5ff;border-top:2px dashed #b79ae0;padding:8px 10px;font-size:12px}
.specialrow .spbit{display:inline-block;margin-left:10px;padding:1px 7px;border-radius:5px;background:#f2e9fb;color:#5b3a86;font-weight:600;font-size:11.2px}
.specialrow .spbit.plus{background:#e6f3e6;color:#1d5c1d}
.specialrow .spnet{margin-left:12px}
.specialrow .muted{display:block;margin-top:3px;font-size:10.4px}
select.payercell{min-width:104px;width:100%;font-weight:600}
@media (max-width:700px){select.payercell{min-width:88px}}
.capitalform{border-top:1px dashed var(--line);margin-top:12px;padding-top:10px}
.capitalhead{font-size:11.2px;color:var(--muted);margin-bottom:2px}
.monthsum{border-top:2px solid var(--ink);margin-top:14px;padding-top:10px}
.checkbar{border-left:5px solid var(--ok);margin-top:10px}
.checkbar.checkbad{border-left-color:var(--bad);background:#fff6f6}
.checkhead{font-weight:700;margin-bottom:6px}
table.checktable td:first-child{width:34px;text-align:center;font-size:12.8px}
table.checktable td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.monthsumhead{font-size:12.8px;font-weight:700;margin-bottom:6px}
a.sheetbtn{display:inline-block;background:#e6f4ea;border:1px solid #b7e1c4;color:#0a7d47;
  border-radius:8px;padding:5px 11px;font-size:11.2px;font-weight:700;text-decoration:none;white-space:nowrap}
a.sheetbtn:hover{background:#0a7d47;color:#fff;border-color:#0a7d47}
.foldbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.foldbar button{padding:7px 12px;font-size:11.2px}
details.fold>summary{font-size:12px;padding:6px 0}
details.fold[open]>summary{margin-bottom:8px}
.savelog{margin-top:12px;background:#f7f9fb;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.savehead{font-size:11.2px;color:var(--muted);margin-bottom:6px}
.savehead b{color:var(--ink);font-size:12px}
.savelog table{font-size:11.2px}
.savelog table th,.savelog table td{padding:5px 6px}
.savefold{margin-top:8px}
.savefold summary{font-size:11.2px}
tr.cusrow td a{color:var(--brand);text-decoration:none;font-weight:600}


/* ── ตารางเดินบัญชีรายวัน แต่งให้เหมือนต้นแบบสมุด (เจ้าของสั่ง 6 ก.ย. 2569) ── */
table.ledgerstyle{border-collapse:separate;border-spacing:0;font-size:10.4px;width:100%}
table.ledgerstyle th,table.ledgerstyle td{border-right:1px solid #f0f4f8;border-bottom:1px solid #f0f4f8;padding:7px 9px}
table.ledgerstyle th{background:#eaf0f7;position:sticky;top:0;z-index:3;color:#25384c;font-size:9.6px;font-weight:700}
table.ledgerstyle td:first-child,table.ledgerstyle th:first-child{text-align:center;width:64px;
  background:#f7f9fc;font-weight:700;font-variant-numeric:tabular-nums}
table.ledgerstyle td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.ledgerstyle tr.filled td{background:#fbfdfc}
table.ledgerstyle tr.blank td,table.ledgerstyle tr.future td{color:#aab6c2}
table.ledgerstyle tr:hover td{background:#f2f8ff}
table.ledgerstyle tr.istoday td{background:#fff8e6;box-shadow:inset 0 -2px 0 var(--markbar)}
/* ไล่สีตามชนิดเงิน แบบเดียวกับตารางบันทึกข้างบน */
table.ledgerstyle td:nth-child(2),table.ledgerstyle td:nth-child(4){color:var(--ok);font-weight:600}
table.ledgerstyle td:nth-child(3){color:#8a4b8a}
table.ledgerstyle td:nth-child(5){color:#1a5fa8;font-weight:600}
table.ledgerstyle td:nth-child(6),table.ledgerstyle th:nth-child(6){background:#f3f8ff;font-weight:700}
table.ledgerstyle th:nth-child(6){background:#e3eefb}
table.ledgerstyle td:nth-child(7){color:#b45309;font-weight:600}
table.ledgerstyle td:nth-child(8){color:#1a5fa8;font-weight:600}
table.ledgerstyle td:nth-child(10){font-weight:700}
table.ledgerstyle tr.total td{background:linear-gradient(180deg,#12212f,#1b2f42);color:#fff;font-weight:700;
  border-bottom:none;border-right-color:rgba(255,255,255,.08);position:sticky;bottom:0;z-index:4;padding-top:9px}
table.ledgerstyle tr.total td:first-child{background:#12212f}
table.ledgerstyle tr.total td[class*="num"]{color:#eaf3ff}
table.ledgerstyle td.daybtns{border-right:none}
table.ledgerstyle i.ldow{font-style:normal;color:var(--muted);font-size:9px;margin-right:2px;font-weight:600}
table.ledgerstyle tr.total i.ldow{display:none}
table.ledgerstyle td:first-child a{color:var(--brand);text-decoration:none}
table.ledgerstyle tr.monthremit > td{border-top:2px solid var(--brand)}

/* ── แยกแต่ละกล่องด้วยสีให้เห็นชัดว่าคนละส่วนกัน (เจ้าของสั่ง 6 ก.ย. 2569) ──
 * ส้ม = วันที่กำลังกรอก · เขียว = ตารางบันทึก · ชมพู = กล่องกรอกรายละเอียด
 * ฟ้า = สรุปทั้งเดือน · เทา = ค่าใช้จ่ายกับตั้งค่า · ขาว = การ์ดยอด
 */
.zone{border-radius:14px;padding:0;margin:0 0 16px;border:3px solid;overflow:hidden;
  box-shadow:0 2px 0 rgba(16,26,38,.06)}
.zone > .zone-head{margin:0;padding:7px 12px;font-size:12.4px;font-weight:800;color:#fff;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:-.2px}
.zone > .zone-head .ztag{background:rgba(255,255,255,.25);color:#fff;font-size:9.6px;font-weight:800;
  padding:3px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.45)}
.zone > .zone-head .muted{color:rgba(255,255,255,.85);font-size:10.4px;font-weight:500}
.zone > *:not(.zone-head){margin-left:14px;margin-right:14px}
.zone > *:last-child{margin-bottom:14px}

/* แถบหัวสีทึบ + พื้นในกล่องสีอ่อนของโทนเดียวกัน — แยกโซนได้ชัดแม้มองผ่าน ๆ */
.zone.z-orange{border-color:#e07b12;background:#ffe6c2}
.zone.z-orange > .zone-head{background:linear-gradient(135deg,#e07b12,#f0952f)}
.zone.z-green{border-color:#0a7d47;background:#cdf3de}
.zone.z-green > .zone-head{background:linear-gradient(135deg,#0a7d47,#13a35d)}
.zone.z-pink{border-color:#c04a76;background:#fcd9e6}
.zone.z-pink > .zone-head,.zone.z-pink > summary{background:linear-gradient(135deg,#c04a76,#d96a94);color:#fff}
.zone.z-blue{border-color:#12508f;background:#d3e6fb}
.zone.z-blue > .zone-head{background:linear-gradient(135deg,#12508f,#2273c4)}
.zone.z-grey{border-color:#5d7a99;background:#dfe8f1}
.zone.z-grey > .zone-head{background:linear-gradient(135deg,#4d688a,#6b87a6)}
.zone .card{background:#fff;box-shadow:0 1px 3px rgba(16,26,38,.10)}
.zone .bkwrap,.zone .wrap,.zone table{background:#fff}
.zone .bknoti{background:#fff}
.zone .bkedithint{background:rgba(255,255,255,.72);border-radius:9px;padding:7px 10px}
/* หัวตารางบันทึกต้องบางและตัวเล็กที่สุด เพื่อคืนพื้นที่ให้ตาราง (เจ้าของสั่ง 7 ก.ย. 2569) */
#booksheet > .zone-head{padding:5px 9px;font-size:10.8px;line-height:1.15;gap:6px;
  flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
#booksheet > .zone-head .ztag{font-size:8.4px;padding:1px 8px}
#booksheet > .zone-head .muted{font-size:8.8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* หัวข้อแถบสีเต็มบรรทัด ให้พื้นด้านล่างเป็นสีสดของโทนเดียวกัน */
h2.zone-head.ztitle-blue{background:linear-gradient(135deg,#12508f,#2273c4)}
h2.zone-head.ztitle-grey{background:linear-gradient(135deg,#4d688a,#6b87a6)}

/* หัวข้อที่ยังไม่ได้ห่อเป็นกล่อง ใช้แถบสีทึบเต็มบรรทัดแทน จะได้แยกโซนเหมือนกัน */
h2.zone-head.ztitle-blue,h2.zone-head.ztitle-grey{color:#fff;padding:10px 15px;border-radius:12px;
  margin:18px 0 10px;font-size:13.6px;font-weight:800}
h2.zone-head.ztitle-blue{background:linear-gradient(135deg,#12508f,#2273c4)}
h2.zone-head.ztitle-grey{background:linear-gradient(135deg,#4d688a,#6b87a6)}
h2.zone-head .ztag{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.45);color:#fff}
.ztitle-blue .ztag{background:#12508f;color:#fff}
.ztitle-grey .ztag{background:#5d7a99;color:#fff}
details.daydetail.zone{padding:0}
details.daydetail.zone > summary{color:#fff;padding:11px 15px;font-size:12.8px;font-weight:800}
details.daydetail.zone > summary::before{color:#fff}
details.daydetail.zone > summary .muted{color:rgba(255,255,255,.85)}
details.daydetail.zone[open] > summary{border-bottom:3px solid #a83c64}
details.daydetail.zone > form{padding:12px 14px}
/* ── ตารางแบบสมุด (รูปแบบที่ 1 ของ Google ชีต) เจ้าของสั่ง 6 ก.ย. 2569 ── */
.bkwrap{overflow:auto;max-height:66vh;border:1px solid var(--line);border-radius:12px;background:#fff}
table.bktable{border-collapse:separate;border-spacing:0;font-size:9px;white-space:nowrap;width:100%}
/* เส้นตารางทุกช่อง (เจ้าของสั่ง 8 ก.ย. 2569 "ให้เส้นตารางทุกช่องชัดเจน แบ่งโซนกันให้ชัด")
   ของเดิมใช้สี #f0f4f8 ซึ่งอ่อนจนแทบกลืนกับพื้นขาว มองไม่ออกว่าช่องไหนถึงช่องไหน
   เจ้าของสั่งต่อ "ต้องการเส้นเป็นสีดำ" จึงใช้สีดำสนิท ให้เหมือนสมุดบัญชีกระดาษที่ตีเส้นดำ */
/* เจ้าของสั่ง 18 ก.ย. 2569 "ต้องการลดขนาดช่องเพื่อให้ดูง่าย"
 * ก่อนแก้เห็นได้แค่ 3.1 วันในหนึ่งจอ จาก 30 วันที่ต้องดู · เลื่อนหาวันยากมาก
 * ย่อทั้งระยะขอบในช่อง ความกว้างช่องเงิน และคอลัมน์ที่ตรึงไว้ทางซ้าย
 * ⛔ ตัวหนังสือไม่ลด เพราะต้องอ่านออกตอนไล่คู่กับสมุด Excel */
table.bktable th,table.bktable td{border-right:1px solid #000;border-bottom:1px solid #000;padding:2px 2.5px}
table.bktable th{background:#eaf0f7;position:sticky;top:0;z-index:3;font-weight:700;color:#25384c;font-size:8.8px}
/* หัวตารางที่คำยาวกว่าช่อง — ซ้อน 2 บรรทัด คำหลักอยู่บน คำขยายอยู่ล่างตัวเล็ก
   ถ้าปล่อยเป็นบรรทัดเดียวตัวหนังสือจะล้นไปทับช่องข้าง ๆ (เจ้าของทักท้วง 6 ก.ย. 2569) */
table.bktable th.bh{white-space:normal;line-height:1.15;vertical-align:middle}
table.bktable th.bh i{display:block;font-style:normal;font-size:8.4px;font-weight:600;opacity:.72}
table.bktable th.bhrate{min-width:48px;text-align:right}
/* ช่องค่าใช้จ่ายบีบตัวหนังสือกับขอบให้แคบตาม */
table.bktable tr:nth-child(2) th.bsub{top:var(--bkh1,31px)}
table.bktable th.bgrp{text-align:center;background:#dfe9f4}
/* ชื่อวันกับเลขวันอยู่บรรทัดเดียวกัน เช่น "พฤ 3" (เจ้าของสั่ง 6 ก.ย. 2569) */
table.bktable th.bgrp i{display:inline;font-style:normal;font-size:9px;font-weight:600;color:#5d7a99;margin-right:3px}
table.bktable th.bgrp{white-space:nowrap;font-size:8.8px}
/* สองแถวหัวตารางย่อให้เตี้ยที่สุดเท่าที่ยังอ่านออก (เจ้าของสั่ง 8 ก.ย. 2569)
 * ตัวที่กินพื้นที่คือระยะห่างบน-ล่าง 6.3px ของกฎรวม ไม่ใช่ขนาดตัวหนังสือ
 * แถวชื่อวันเหลือ 1px แถว ก ป ค เหลือ 0 และบีบระยะบรรทัดลงด้วย
 * ตัวหนังสือลดแค่เล็กน้อย เพราะเซลล์ต้องอ่านออกตอนไล่คู่กับสมุด */
table.bktable th.bgrp{padding-top:1px;padding-bottom:1px;line-height:1;vertical-align:middle}
table.bktable th.bgrp button.dayask{padding:1px 4px;font-size:8.5px;line-height:1;margin-left:3px;
  vertical-align:middle}
table.bktable th.bgrp button.qfill{padding:2px 6px;line-height:1;vertical-align:middle}
/* ช่องของวันที่ไม่ได้เปิดอยู่ — แก้ไม่ได้ กดแล้วขึ้นคำเตือน (เจ้าของสั่ง 6 ก.ย. 2569)
   ยังอ่านตัวเลขได้ปกติ แค่แตะแล้วไม่เปิดช่องพิมพ์ */
/* กล่องกรอกที่เปิดขึ้นมา — เจ้าของสั่ง 7 ก.ย. 2569 ให้ใหญ่ขึ้น 40%
   และมีปุ่มถูกให้กดยืนยันก่อนบันทึก จะได้ไม่เผลอเปลี่ยนยอดตอนแตะออกนอกช่อง */
table.bktable td.editing{position:relative;overflow:visible;z-index:12}
table.bktable td.editing .bkebox{position:absolute;left:-2px;top:-2px;box-sizing:border-box;width:129px;min-width:129px;z-index:12;
  background:#fff;border:2px solid var(--brand);border-radius:11px;padding:4px 5px 5px;
  box-shadow:0 7px 22px rgba(16,32,56,.28)}
table.bktable td.editing .bkelab{display:block;font-style:normal;font-size:13.3px;font-weight:800;
  line-height:1.25;white-space:nowrap;color:var(--brand)}
table.bktable td.editing .bkelab > span{display:block;overflow:hidden;text-overflow:ellipsis}
table.bktable td.editing .bkelab .bkedate{font-size:10.5px;font-weight:700;opacity:.82}
table.bktable td.editing .bkeentry{display:flex;align-items:center;gap:6px;margin-top:3px}
table.bktable td.editing .bkebox input{box-sizing:border-box;flex:1 1 0;min-width:0;width:auto;font-size:22.4px;padding:3px 4px;text-align:right;
  border:1px solid var(--line);border-radius:7px}
table.bktable td.editing .bkeconfirm{flex:0 0 34px;width:34px;height:38px;padding:0;border:0;border-radius:9px;
  background:var(--ok);color:#fff;font-family:inherit;font-size:22px;font-weight:800;line-height:1;
  cursor:pointer;box-shadow:0 2px 0 #076235}
table.bktable td.editing .bkeconfirm:hover{filter:brightness(1.08)}
table.bktable td.editing .bkeconfirm:active{transform:translateY(1px);box-shadow:0 1px 0 #076235}
table.bktable td.editing .bkebox.e-k{border-color:var(--ok)}
table.bktable td.editing .bkebox.e-k .bkelab{color:var(--ok)}
table.bktable td.editing .bkebox.e-p{border-color:#b45309}
table.bktable td.editing .bkebox.e-p .bkelab{color:#b45309}
table.bktable td.editing .bkebox.e-c{border-color:#1a5fa8}
table.bktable td.editing .bkebox.e-c .bkelab{color:#1a5fa8}
/* ช่องที่ระบบทักว่ายอดดูผิดปกติ — ยอดถูกบันทึกแล้ว แค่ทำเครื่องหมายให้ย้อนดูง่าย */
table.bktable td.odd{background:#fff4e2;box-shadow:inset 0 0 0 2px #e08a12}
table.bktable td.locked{cursor:not-allowed}
table.bktable td.locked:hover{background:#f7f8fa}
/* ช่องของวันที่โอนเข้าบริษัทไปแล้ว ที่เจ้าของ/แอดมินยังพิมพ์ทับได้ (เจ้าของสั่ง 18 ก.ย. 2569)
   ต้องมองออกทันทีว่าไม่ใช่ช่องธรรมดา เพราะแก้แล้วใบโอนของวันนั้นไม่ขยับตาม */
table.bktable td.sentedit{box-shadow:inset 0 0 0 1.5px #e08a2e}
table.bktable td.sentedit:hover{background:#fff6e8}
table.bktable th.bsub{font-size:8.4px;font-weight:600;text-align:center;background:#f0f5fa;color:#7b8ea1;
  padding-top:1px;padding-bottom:1px;line-height:1;vertical-align:middle}
table.bktable th.bsub.k{color:var(--ok)}table.bktable th.bsub.p{color:#b45309}table.bktable th.bsub.c{color:#1a5fa8}
/* ── แยกโซนแต่ละวัน (เจ้าของสั่ง 6 ก.ย. 2569) ──
 * เส้นแบ่งหนาหน้าช่องแรกของทุกวัน + สลับสีพื้นวันเว้นวัน
 * ตารางกว้างเป็นเดือน ถ้าไม่มีเส้นแบ่งจะกรอกผิดคอลัมน์โดยไม่รู้ตัว */
/* เส้นแบ่งโซนของแต่ละวัน — ต้องหนากว่าเส้นช่องธรรมดาชัด ๆ
   จะได้แยกออกทันทีว่าตรงไหนคือรอยต่อระหว่างวัน ไม่ใช่แค่รอยต่อระหว่างช่อง ก/ป/ค
   ทั้งคู่เป็นสีดำ แยกกันด้วยความหนา 1px กับ 3px */
/* 17 ก.ย. 2569 ช่องนับมาอยู่หน้าสุดของวันแล้ว เส้นแบ่งวันจึงต้องย้ายมาที่ช่องนับ
   ไม่งั้นเส้นจะไปตกกลางวัน (ระหว่างนับกับเก็บ) แทนที่จะเป็นรอยต่อระหว่างวัน */
table.bktable td.mk,table.bktable th.bgrp,table.bktable th.bsub.mk{border-left:3px solid #000}
table.bktable td.z2{background:#f3f6fa}
table.bktable td.lendcell.z2{background:#e9eef5}
/* วันที่ถึงกำหนดเก็บ — ทั้งช่องเป็นเขียว เห็นแต่ไกล (เจ้าของสั่ง 6 ก.ย. 2569) */
table.bktable td.duecell{background:#dff5e6}
table.bktable td.duecell.lendcell{background:#cfeeda}
table.bktable th.sun,table.bktable td.sun{background:#fbf8f2}
table.bktable th.bgrp.sun{background:#f6ecdc}
table.bktable .bst{position:sticky;background:#fff;z-index:2}
/* 📱 ช่องตรึงหายบนมือถือ (เจ้าของยืนยัน 14 ต.ค. 2569 · ภาพจาก Chrome Android ชื่อลูกค้า/ช่องวันที่หายจนต้องรีเฟรช)
 *    ต้นเหตุ: มือถือไม่วาดช่องตรึงบางแถว ช่องยังอยู่ครบในหน้า แต่มองทะลุเห็นช่องวันอื่นข้างใต้
 *    ① จอสัมผัส: ให้ช่องตรึงมีชั้นภาพของตัวเอง ② ตัวสั่งวาดใหม่ (stkre) ใน APP_JS_LIVE หลังยอดสด/หยุดปัด
 *    ⛔ เฉพาะจอสัมผัส · จอคอมไม่เปลี่ยน · ล็อกที่ test/sticky-repaint-mobile.test.js */
@media (hover:none),(pointer:coarse){
  table.bktable .bst,table.monthtable td:first-child,table.monthtable th:first-child{
    will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden}
  table.bktable.stkre .bst,table.monthtable.stkre td:first-child,table.monthtable.stkre th:first-child{will-change:auto}
}
/* สลับสีแถวเว้นแถว (เจ้าของสั่ง 8 ก.ย. 2569 "ให้สลับสีเป็นเส้นตารางดูง่าย")
   ตารางกว้าง 30 วัน ถ้าไม่มีแถบสลับสี สายตาจะไหลหลุดแถวตอนเลื่อนไปทางขวา
   ทาสีที่ตัวแถว ช่องที่มีสีของตัวเองอยู่แล้ว — วันนี้ · วันเก็บ · วันอาทิตย์ · วันข้างหน้า ·
   ลูกค้าเสีย · แถวรวม — จึงทับลงมาได้ตามเดิม ไม่เสียความหมายของสีเดิมสักอัน
   ทาสีตอนโหลดและทาใหม่ทุกครั้งที่กดปุ่มกรอง จะได้สลับตาม "แถวที่มองเห็นจริง" */
table.bktable tr.grow.zebra{background:#eaf1f9}
table.bktable tr.grow.zebra .bst{background:#eaf1f9}
table.bktable .b1{left:0;width:28px;min-width:28px;max-width:28px;text-align:center;color:var(--muted);font-size:9px}
table.bktable .b2{left:28px;width:104px;min-width:104px;max-width:104px;white-space:normal}
/* ชื่อลูกค้ายาว ๆ ต้องขึ้นบรรทัดใหม่ให้อ่านครบ ไม่ตัดทิ้ง (เจ้าของสั่ง 6 ก.ย. 2569)
   เช่น "สุพิชาญาต์ (รายการที่ 2)" ถ้าตัดหายจะไม่รู้ว่าเป็นสัญญาไหน */
table.bktable .b2 .bnm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  line-height:1.25;font-size:9.2px;word-break:break-word;font-weight:600}
table.bktable .b3{left:132px;min-width:82px;width:82px;max-width:82px;font-weight:600;background:#fafcfe;border-right:2px solid var(--line);text-align:right;font-size:9.6px}
table.bktable th.bst{z-index:7;background:#eaf0f7}
table.bktable .b2 i.bcd{display:block;font-style:normal;font-size:8.4px;color:#8fa0b1;font-weight:600;line-height:1.15}
table.bktable .bn{text-align:right;font-variant-numeric:tabular-nums}
/* คอลัมน์ "สุทธิ" (ยอดปล่อยสุทธิ ณ สิ้นวัน) — ซ่อนไว้ก่อน (เจ้าของสั่ง 8 ก.ย. 2569)
   หนึ่งวันมี 5 ช่องทำให้ตารางกว้างจนเลื่อนหายาก · กดปุ่ม 👁 ยอดสุทธิรายวัน ถึงจะโผล่ */
table.bktable th.bsub.n,table.bktable td.bn.n.daynet{display:none}
table.bktable.neton th.bsub.n,table.bktable.neton td.bn.n.daynet{display:table-cell}
button.ghost.netcol[aria-pressed="true"]{background:var(--mark);border-color:var(--markline);color:var(--markink)}
/* ป้ายบอกวันที่กำลังดู (เจ้าของสั่ง 8 ก.ย. 2569 ทับคำสั่งเดิมของวันเดียวกัน)
   "ต้องการให้ลบออกทั้งหมด ให้แสดงแค่วันที่เล็ก ๆ ก็พอ"
   เดิมเป็นแถบปุ่มเลือกวัน 5 ปุ่ม ซึ่งซ้ำกับปุ่มเลือกวันที่ใหญ่บนสุดของหน้าอยู่แล้ว
   เหลือไว้แค่ตัวหนังสือบอกวัน กดไม่ได้ ไม่กินที่ */
/* เจ้าของสั่ง 8 ก.ย. 2569 — "วันที่ให้มีขนาดยาวขึ้น เป็นสีแดง ตัวหนังสือสีขาว"
   ต้องกำหนดสีตัวหนังสือให้ทุกชิ้นข้างในเอง รวมทั้ง b
   ไม่งั้นตัวหนาจะยังสืบสีน้ำเงิน/เขียวเดิมมาแล้วจมอยู่บนพื้นแดง */
.bkdaynow{align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  min-width:168px;padding:8px 20px;border-radius:999px;background:#c62828;
  font-size:13px;font-weight:700;color:#fff;white-space:nowrap;letter-spacing:.01em;
  box-shadow:0 1px 2px rgba(0,0,0,.14)}
.bkdaynow b{font-weight:800;color:#fff}
.bkdaynow.istoday{background:#c62828}
.bkdaynow.istoday b{color:#fff}
/* ตัวเลขในตาราง — ยังไม่โอนเป็นตัวดำ · โอนเข้าบริษัทแล้วเปลี่ยนเป็นเขียว
 * (เจ้าของสั่ง 6 ก.ย. 2569) · สีของหัวคอลัมน์ ก/ป/ค ยังบอกชนิดเงินเหมือนเดิม */
table.bktable .bn.k{color:var(--ink);font-weight:600;min-width:65px}
/* ── ช่องนับ · เจ้าของสั่ง 17 ก.ย. 2569 ──────────────────────────────
 * ป้ายอยู่ช่องนี้ช่องเดียว กดได้เต็มช่อง ไม่ต้องจิ้มแถบบางที่ก้นช่องเก็บเหมือนเดิม
 * กว้าง 46 จุดเพื่อให้คำยาวสุดที่เมนูมี ("จ่ายแล้ว") ใส่ได้ครบโดยไม่ต้องตัดคำ
 * ส่วนคำที่เซลล์พิมพ์เองยาวได้ถึง 16 ตัวอักษร จะตัดขึ้นบรรทัดสอง ไม่หายไปไหน */
table.bktable .bn.mk{width:36px;min-width:36px;padding:1px;vertical-align:middle;
  text-align:center;cursor:pointer}
table.bktable .bn.mk > i.bkmk{position:static;display:block;width:100%;min-height:18px;
  border-top:0;border-radius:4px;padding:1.5px 2px;line-height:1.2;
  white-space:normal;word-break:break-word;font-size:8.8px}
table.bktable .bn.mk:hover > i.bkmk.add{border-color:var(--brand);color:var(--brand)}
table.bktable .bn.p{color:var(--ink);font-weight:600}
table.bktable .bn.c{color:var(--ink);font-weight:600}
table.bktable .bn.sent{color:var(--ok)}
table.bktable .bn.k.sent,table.bktable .bn.p.sent,table.bktable .bn.c.sent{color:var(--ok);font-weight:700}
table.bktable .bn.n{background:#f4f8fb;color:#0a6b3d;font-weight:700}
/* เจ้าของสั่ง 7 ก.ย. 2569 — ทุกช่องต้องกว้างเท่ากับช่อง "เก็บ"
 * เดิมช่องเก็บกว้าง 65 แต่ ปล่อย/คืน/ค่าใช้จ่าย บีบให้แคบกว่า ทำให้ตารางดูไม่เป็นระเบียบ */
table.bktable .bn.k,table.bktable .bn.p,table.bktable .bn.c{
  min-width:46px;width:46px}
/* ช่องค่าใช้จ่ายคงขนาดเดิมไว้ และเพิ่มช่องยอดปล่อยสุทธิสิ้นวันแยกต่างหาก
 * เจ้าของสั่ง 8 ก.ย. 2569 ว่าต้องเห็นยอดที่ยังปล่อยลูกค้าอยู่สุทธิทุกวัน */
table.bktable th.n,table.bktable td.n,table.bktable .bn.n{
  min-width:52px;width:52px;max-width:52px}
/* เจ้าของสั่ง 12 ก.ย. 2569 ย่อช่องตารางบนจอคอมลงอีก 20%
 * มือถือ/แท็บเล็ตแบบสัมผัสคงขนาดเดิมไว้เพื่อไม่ให้เป้ากดเล็กเกินไป */
@media(min-width:901px) and (pointer:fine){
  :where(.bkwrap[data-day-sheet]) table.bktable th,
  :where(.bkwrap[data-day-sheet]) table.bktable td{padding:1.8px 2.2px}
  .bkwrap[data-day-sheet] table.bktable th.bgrp,
  .bkwrap[data-day-sheet] table.bktable th.bsub{padding-top:.8px;padding-bottom:.8px}
  .bkwrap[data-day-sheet] table.bktable .b1{width:24px;min-width:24px;max-width:24px}
  .bkwrap[data-day-sheet] table.bktable .b2{left:24px;width:82px;min-width:82px;max-width:82px}
  .bkwrap[data-day-sheet] table.bktable .b3{left:106px;min-width:64px;max-width:64px}
  .bkwrap[data-day-sheet] table.bktable .bn.k,.bkwrap[data-day-sheet] table.bktable .bn.p,
  .bkwrap[data-day-sheet] table.bktable .bn.c{
    min-width:40px;width:40px;max-width:40px}
  .bkwrap[data-day-sheet] table.bktable th.n,.bkwrap[data-day-sheet] table.bktable td.n,
  .bkwrap[data-day-sheet] table.bktable .bn.n{
    min-width:44px;width:44px;max-width:44px}
  /* กล่องบนเป็นยอดเงิน กล่องล่างเป็นป้ายสถานะ และป้ายทุกแถวชิดขอบล่างตรงกัน */
  .bkwrap[data-day-sheet] table.bktable tr.grow td.bn.k:not(.editing){position:relative;padding-top:3px;padding-bottom:16px}
  .bkwrap[data-day-sheet] table.bktable tr.grow td.bn.k:not(.editing) > .bval{min-height:11px;padding:0 2px;line-height:1.1}
  /* 17 ก.ย. 2569 ป้ายย้ายไปอยู่ช่องนับของตัวเองแล้ว ไม่ต้องลอยก้นช่องเก็บอีก */
  .bkwrap[data-day-sheet] table.bktable tr.grow td.bn.mk i.bkmk input.bkmkin{
    width:calc(100% - 4px);max-width:100%}
}
table.bktable th.bgrp.future,table.bktable th.bsub.future,
table.bktable tr.grow td.future{background:#fafbfc!important;color:#c6cfd9!important}
table.bktable tr.grow td.future .bval{display:none}
table.bktable .bz{color:#c8d2dc}
table.bktable .bsum{background:#f2f6fb;font-weight:700;border-left:1px solid var(--line);text-align:right}
table.bktable tr:hover td{background:#f2f8ff}
table.bktable tr:hover td.bst{background:#f2f8ff}
table.bktable tr.bkbad td{background:#fdecea;color:var(--bad)}
table.bktable tr.bkbad td.bst{background:#fdecea}
table.bktable tr.bkbad td.b1{box-shadow:inset 3px 0 0 var(--bad)}
table.bktable tr.bkbad:hover td,table.bktable tr.bkbad:hover td.bst{background:#fbdfdb}
/* แถวผลรวมท้ายตาราง — เจ้าของสั่งเปลี่ยนเป็นสีเหลือง 6 ก.ย. 2569 · ตัวหนังสือเข้มให้อ่านชัด */
table.bktable tr.bktot td{background:linear-gradient(180deg,#ffe9a8,#ffd875);color:#12437f;font-weight:700;
  position:sticky;bottom:0;z-index:4;border-bottom:none}
table.bktable tr.bktot td.bst{background:#ffe9a8;color:#12437f;z-index:6}
table.bktable tr.bktot .bz{color:#7c8ea0}
table.bktable tr.bktot td.bn.k,table.bktable tr.bktot td.bn.p,table.bktable tr.bktot td.bn.c{color:#12437f}
table.bktable tr.bktot td i.bint{color:#12437f}
.bkmk{display:block;font-style:normal;font-size:7px;font-weight:700;line-height:1.15;text-align:center;color:#93a3b3;margin-top:0}
.bkmk.due{color:#fff;background:var(--ok);border-radius:4px}
.bkmk.late{color:#fff;background:var(--bad);border-radius:4px}
.bkmk.part{color:#8a4300;background:#fff0dc;border:1px solid #edc48b;border-radius:4px}
/* หน้าตาของลิงก์กดเลือกวันบนหัวตาราง — เจ้าของสั่งลบลิงก์ทิ้ง 8 ก.ย. 2569 จึงไม่ต้องมีแล้ว
   ระวัง: คลาส .daypick ยังใช้อยู่ที่ "ฟอร์มเลือกวันที่" ด้านบนของหน้า ห้ามลบทั้งชุด */
/* วันที่กำลังกรอก — สีส้มต้องลากยาวทุกช่องของวันตลอดแนว ไม่ใช่ส้มเฉพาะหัววันที่
   (นับ · เก็บ · ปล่อย · คืน · สุทธิที่ซ่อนอยู่) */
table.bktable th.bgrp.nowcol{background:#f28a16;color:#fff;box-shadow:inset 0 -3px 0 #b95700;
  border-left:3px solid #d66d00;border-right:3px solid #d66d00}
table.bktable th.bgrp.nowcol i{color:#fff}
table.bktable th.bsub.nowcol{background:#ffd18c!important;color:#7a3f00;font-weight:800;
  border-bottom:2px solid #d66d00}
table.bktable th.bsub.nowcol.mk,table.bktable td.nowcol.mk{border-left:3px solid #e67800}
table.bktable th.bsub.nowcol.n,table.bktable td.nowcol.n{border-right:3px solid #e67800}
table.bktable tr.grow td.nowcol{background:#fff0d2!important}
table.bktable tr.grow:hover td.nowcol{background:#ffe1aa!important}
table.bktable tr.bktot td.nowcol{background:#ffc15a!important;color:#713600!important;
  border-top:3px solid #d66d00}
/* เจ้าของสั่ง 8 ก.ย. 2569 — "ย่อให้เหลือบรรทัดเดียวในเวอร์ชันมือคอม"
   แถวนี้เคยตกลงมาสองบรรทัด เพราะปุ่ม 6 ปุ่มบวกข้อความบอกจำนวนราย ยาวเกินความกว้างจอ
   จอมือถือ (max-width:640px) นอนเรียงแถวเดียวเลื่อนนิ้วได้อยู่แล้ว กฎนี้จึงคุมเฉพาะจอคอม
   ทำสองอย่างพร้อมกัน คือห้ามตกบรรทัด และย่อปุ่มลงพอให้พาดได้ในบรรทัดเดียวจริง */
/* ต้องเขียนสองคลาสติดกัน .bkmenu.cusfilter ไม่ใช่ .bkmenu เฉย ๆ
   เพราะกฎ .cusfilter button อยู่ใต้ลงไปในไฟล์ ถ้าน้ำหนักเท่ากันตัวล่างจะชนะ
   แล้วปุ่มจะกลับไปตัวใหญ่เท่าเดิมจนตกบรรทัดอีก */
@media(min-width:641px){
  .bkmenu.cusfilter{flex-wrap:nowrap;overflow-x:auto;gap:5px;padding-bottom:2px;scrollbar-width:thin}
  .bkmenu.cusfilter > b{flex:0 0 auto;white-space:nowrap}
  .bkmenu.cusfilter button{flex:0 0 auto;white-space:nowrap;font-size:10px;padding:5px 9px}
  /* ข้อความบอกจำนวนรายไปชิดขวาสุด จะได้ไม่ไปเบียดปุ่มให้ตกบรรทัด */
  .bkmenu.cusfilter .bkmnote{flex:0 0 auto;white-space:nowrap;margin-left:auto;padding-left:8px}
}
/* แท็บเล็ตกว้างกว่า 640 ก็จริง แต่กดด้วยนิ้ว ไม่ใช่เมาส์
   ปุ่มย่อ 10px สูง 27px เล็กเกินกว่านิ้วจะกดแม่น จึงคืนขนาดให้เท่าเดิม
   ยังอยู่บรรทัดเดียวเหมือนกัน แค่เลื่อนนิ้วไปทางขวาแทน (เจ้าของสั่งตรวจแท็บเล็ต 8 ก.ย. 2569) */
@media(min-width:641px) and (pointer:coarse){
  .bkmenu.cusfilter{gap:6px}
  .bkmenu.cusfilter button{font-size:11.5px;padding:8px 12px;min-height:38px}
}
.bkmenu{margin:8px 0 6px}
.bkmenu button.zero{opacity:.5}
.gridfilter button.viewmode.zero{opacity:.5}
.bkmenu .bkmnote{margin-left:4px}
/* กล่องกรอกรายละเอียด — พับไว้ก่อน กดวันที่แล้วกางออกมา (เจ้าของสั่ง 6 ก.ย. 2569) */
details.daydetail{padding:0;overflow:hidden}
details.daydetail > summary{cursor:pointer;padding:12px 14px;background:#eef4fc;list-style:none;font-size:12px;
 display:flex;gap:10px;align-items:center;flex-wrap:wrap}
details.daydetail > summary::-webkit-details-marker{display:none}
details.daydetail > summary::before{content:'▶ ';color:var(--brand);font-weight:800}
details.daydetail[open] > summary::before{content:'▼ '}
details.daydetail[open] > summary{border-bottom:2px solid var(--brand)}
details.daydetail > form{padding:12px 14px}
/* ปุ่มเปิด/ปิดเร็ว — หัวกล่องมีป้ายบอกสถานะ ท้ายกล่องมีปุ่มปิด (เจ้าของสั่ง 6 ก.ย. 2569) */
details.daydetail > summary.ddsum{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details.daydetail > summary.ddsum .ddtog{margin-left:auto;background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.55);color:#fff;border-radius:999px;padding:4px 13px;
  font-size:10px;font-weight:800;white-space:nowrap}
details.daydetail > summary.ddsum .ddtog i{font-style:normal}
details.daydetail:not([open]) > summary.ddsum .ddc{display:none}
details.daydetail[open] > summary.ddsum .ddo{display:none}
.ddfoot{margin:10px 0 0;text-align:right}
.ddfoot .ddclosebtn{font-size:10.4px}
table.bktable td.edit{cursor:cell}
table.bktable td.edit:hover{box-shadow:inset 0 0 0 2px #9dc2e8}
table.bktable td.edit:focus{outline:2px solid var(--brand);outline-offset:-2px;background:#eaf4ff!important}
table.bktable td.editing{padding:0;background:#fffbe9!important}
table.bktable td.editing input{width:100%;min-width:70px;border:2px solid var(--brand);border-radius:4px;
 padding:4px 6px;font:inherit;text-align:right;font-variant-numeric:tabular-nums;background:#fff}
table.bktable td.saved{animation:bkflash .9s ease-out}
@keyframes bkflash{0%{background:#d6f5e3}100%{background:transparent}}
table.bktable td.failed{box-shadow:inset 0 0 0 2px var(--bad)}
.bkedithint{font-size:9.2px;color:var(--muted);margin:0 0 6px;display:flex;gap:8px;
 align-items:center;flex-wrap:wrap;line-height:1.5}
.bkedithint b{color:var(--ink)}
.bkedithint .bkfix{font-size:9.2px;padding:3px 9px;border-radius:7px;background:#eef4fc;
 border:1px solid #c7dcf3;color:#12508f;font-weight:700;cursor:pointer;font-family:inherit}
.bkedithint .bkfix:hover{background:#dfeafa}
.bkedithint .bkfix.sending{background:#fff4e2;border-color:#f2a04c;color:#9c5000}
.bkedithint .bkfix.sent{background:#eefaf3;border-color:#bfe6d2;color:#0a7d47}
.bkedithint .bkfix.failed{background:#fdecea;border-color:#f3cdc8;color:#c0392b}
/* กล่องข้อความแจ้งเตือนรวมของหน้า */
.bknoti{border:1px solid var(--line);border-radius:10px;background:#fbfdff;margin:0 0 8px;overflow:hidden}
.bknoti.flash{animation:bnflash .8s ease-out}
@keyframes bnflash{0%{box-shadow:0 0 0 3px #cfe4fb}100%{box-shadow:none}}
/* เจ้าของสั่ง 8 ก.ย. 2569 — "พร้อมกรอกให้มีขนาดเล็กลง"
   กล่องนี้เป็นแค่ป้ายบอกสถานะ ไม่ใช่ของที่ต้องเด่น จึงย่อทั้งตัวอักษรและระยะขอบ
   เหลือที่ให้ป้ายวันที่กับปุ่มเต็มจอซึ่งคนกดจริงบ่อยกว่า */
.bknoti .bnbar{display:flex;gap:6px;align-items:center;width:100%;padding:3px 6px;background:#f4f8fd;
 border:none;font-family:inherit;font-size:9px;cursor:pointer;text-align:left}
.bknoti .bnbar:hover{background:#eaf2fb}
.bknoti .bnico{flex:0 0 auto;font-size:9px}
.bknoti .bnnow{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.bknoti .bncount{flex:0 0 auto;background:#dfe9f4;color:#5d7a99;border-radius:999px;padding:1px 7px;font-size:9px;font-weight:700}
.bknoti .bnarrow{flex:0 0 auto;min-width:44px;padding:2px 7px;border-radius:999px;background:var(--brand);
  color:#fff;font-size:8.5px;font-weight:800;text-align:center;line-height:1.2}
.bknoti.open .bnarrow{background:#b45309}
.bknoti .bnbody{border-top:1px solid var(--line);padding:6px 11px 9px}
.bknoti .bnlist{list-style:none;margin:0 0 6px;padding:0;max-height:160px;overflow:auto;font-size:10px}
.bknoti .bnlist li{padding:3px 0;border-bottom:1px dashed #eef2f6;line-height:1.5}
.bknoti .bnlist li:last-child{border-bottom:none}
.bknoti .bntime{color:#9aabbb;font-weight:600;margin-right:6px;font-variant-numeric:tabular-nums}
.bknoti .bnclear{font-size:9.2px;padding:3px 10px;border-radius:7px;background:#fff;border:1px solid var(--line);
 color:var(--muted);cursor:pointer;font-family:inherit}
.bknoti .bn-ok{color:var(--ok)}
.bknoti .bn-wait{color:var(--brand)}
.bknoti .bn-bad,.bknoti .bn-pend{color:var(--bad);font-weight:600}
.bknoti .bn-idle{color:var(--muted)}
.bknoti .bn-warn{color:#8a5300;font-weight:600}
/* ปุ่มกากบาทหน้าข้อความ — ลบทีละบรรทัด (เจ้าของสั่ง 6 ก.ย. 2569) */
.bknoti .bnx{background:none;border:0;color:#b9c4d0;font-size:12px;font-weight:700;cursor:pointer;
  padding:0 6px 0 0;line-height:1}
.bknoti .bnx:hover{color:var(--bad)}
/* กล่องยืนยันในหน้าเว็บ — ใช้แทนกล่องของเบราว์เซอร์ที่บางหน้าต่างบล็อก */
.bkask{position:fixed;inset:0;background:rgba(16,26,38,.45);display:flex;align-items:center;
 justify-content:center;z-index:9999;padding:16px}
.bkaskcard{background:#fff;border-radius:14px;padding:18px 20px;min-width:300px;max-width:420px;
 box-shadow:0 18px 50px -12px rgba(16,26,38,.5)}
.bkaskhead{font-size:13.6px;font-weight:800;margin-bottom:10px}
.bkaskline{font-size:11.2px;color:var(--ink);line-height:1.6}
.bkasklab{display:block;font-size:10px;color:var(--muted);font-weight:600;margin-top:10px}
.bkasklab input{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:9px;
 font-family:inherit;font-size:12px;margin-top:4px}
.bkasklab input:focus{outline:2px solid var(--brand);outline-offset:-1px}
.bkaskbtns{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
.bkaskbtns button{padding:9px 16px;border-radius:9px;font-family:inherit;font-size:11.2px;
 font-weight:700;cursor:pointer;border:1px solid var(--line);background:#fff}
.bkaskbtns .bkaskok{background:var(--brand);border-color:var(--brand);color:#fff}
.bkedithint .delnote{color:#a89090}
.bkerror{background:#fdecea;border:2px solid var(--bad);border-radius:10px;padding:10px 14px;
 margin:0 0 8px;color:#7a1a14;font-weight:700;font-size:11.2px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.bkerror .bkretry{font-size:10.4px;padding:5px 12px;border-radius:8px;background:#fff;border:1px solid var(--bad);
 color:var(--bad);font-weight:700;cursor:pointer;font-family:inherit}
.bksavebar{margin:0 0 6px;font-size:9.6px}
/* การ์ดสรุป 5 ค่า — เส้นสีบนหัวบอกประเภท (เจ้าของสั่ง 6 ก.ย. 2569) */
.fivecards .stat{border-top-width:3px;border-top-style:solid}
.fivecards .stat b{font-size:17.6px;font-weight:800;letter-spacing:-.4px}
.fivecards .stat i{font-style:normal;font-size:9.2px;color:#8496a8;line-height:1.4;display:block;margin-top:2px}
.fivecards .stat span:first-child{font-weight:600}
.fivecards .c1{border-top-color:var(--ok)}.fivecards .c1 b{color:var(--ok)}
.fivecards .c2{border-top-color:#7b8ea1}
.fivecards .c3{border-top-color:var(--brand)}.fivecards .c3 b{color:var(--brand)}
.fivecards .c4{border-top-color:#b45309}.fivecards .c4 b{color:#b45309}
.fivecards .c5{border-top-color:#b8860b;background:#fffdf5}.fivecards .c5 b{color:#8a6508}
.fivecards .c5.minus{border-top-color:var(--bad);background:#fff7f6}.fivecards .c5.minus b{color:var(--bad)}
/* หนึ่งโต๊ะมีสองชีต เหมือนสมุดต้นฉบับ (เจ้าของสั่ง 6 ก.ย. 2569) */
h3.sheetno,h2#booksheet{font-size:12.8px;margin:20px 0 8px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
h2#booksheet{font-size:14.4px}
h2#booksheet .muted{font-size:10.4px;font-weight:400}
h3.sheetno .muted{font-size:10.4px;font-weight:400}
.sno{background:linear-gradient(135deg,#12508f,#1d6fc0);color:#fff;font-size:9.6px;padding:4px 11px;border-radius:999px}
.sno.alt{background:linear-gradient(135deg,#0a7d47,#12a05c)}
.bkedithint b{color:var(--ink)}
.bksavebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0 0;font-size:10.4px}
.bksavebar .pend{color:var(--warn);font-weight:700}
/* แถบเมนูเลือกกลุ่มลูกค้า — ปุ่มที่กำลังดูอยู่ติดมาร์คสีส้ม (เจ้าของสั่ง 6 ก.ย. 2569) */
/* ปุ่มเลือกโต๊ะในหน้ากรอก — เป็นลิงก์ จึงต้องแต่งให้เหมือนปุ่มในแถบเดียวกัน
   (เจ้าของสั่ง 20 ก.ย. 2569 ให้หน้ากรอกมีแถบแบบหน้าตาราง) */
.cusfilter a.bookpick{display:inline-block;font-size:11.2px;padding:8px 14px;border-radius:9px;
  border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:600;
  text-decoration:none;white-space:nowrap}
.cusfilter a.bookpick:hover{background:#f4f7fb}
.cusfilter a.bookpick.on{background:var(--mark);border-color:var(--markbar);color:var(--markink);
  box-shadow:inset 0 0 0 2px var(--markbar)}
.cusfilter{margin:8px 0 12px}
.cusfilter button{font-size:11.2px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-weight:600;cursor:pointer;font-family:inherit}
.cusfilter button b{font-weight:800}
.cusfilter button:hover{background:#f4f7fb}
.cusfilter button.on{background:var(--mark);border-color:var(--markbar);color:var(--markink);
  box-shadow:inset 0 0 0 2px var(--markbar)}
.cusfilter button.on:hover{background:var(--mark)}
.cusfilter button.on b{color:var(--markink)}
.cusgroups p.grouphint{margin:0 0 6px}
.cusgroups p.nogroup{padding:12px;border:1px solid var(--line);border-radius:10px;margin:0;background:#fafbfc}
/* แถวรายละเอียดที่กางใต้ชื่อลูกค้า (เจ้าของสั่ง 5 ก.ย. 2569) */
tr.cusdetailrow > td{background:#f4f8ff;border-top:2px solid var(--brand);padding:12px}
.cusdetail .cdhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.cusdetail .cdhead .spacer{flex:1}
.cdsum{display:flex;gap:14px;flex-wrap:wrap;font-size:10.8px;color:var(--muted);margin-bottom:8px}
.cdsum b{color:var(--ink);font-variant-numeric:tabular-nums}
table.cdtable{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;font-size:11.2px}
table.cdtable th{background:#eef3fa;font-size:10px;color:var(--muted)}
table.cdtable td,table.cdtable th{padding:6px 8px}
button.seebtn.detailbtn{cursor:pointer;font-family:inherit}
button.seebtn.detailbtn.on{background:var(--mark);color:var(--markink);border-color:var(--markbar)}
.bookcard h3{font-size:12.8px;border-bottom:1px solid var(--line);padding-bottom:8px}
/* การ์ดเงินรายคนในหน้าบัญชีลูกค้า — หนึ่งคนหนึ่งกล่อง อ่านจบได้ในกล่องเดียว */
.salescard{display:flex;flex-direction:column;gap:10px}
.salescard.off{opacity:.55}
.salestop{display:flex;align-items:center;justify-content:space-between;gap:8px;
  border-bottom:1px solid var(--line);padding-bottom:8px}
.salestop h3{margin:0;font-size:12.8px}
.moneybox{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fbfcfe}
.moneybox.limitbox{background:#f6f8fb}
.mbhead{font-weight:700;font-size:11.2px;margin-bottom:6px}
.moneybox table.ledger td{font-size:12px;padding:3px 4px}
.mbline{margin:6px 0 0;font-size:10.8px;line-height:1.5}
.mbline.owe{color:var(--warn);font-weight:600}
.idlehead{font-size:12px;color:var(--muted);margin-top:18px}
.bookcard.newbook{border-style:dashed}
/* กดตรงไหนของการ์ดก็เข้าโต๊ะนั้นได้ ไม่ต้องเล็งปุ่ม — ปุ่มอื่นในการ์ดยังกดได้ตามปกติ */
.bookcard{position:relative;transition:box-shadow .12s,border-color .12s,transform .12s}
.bookcard:has(.stretch){cursor:pointer}
.bookcard:has(.stretch):hover{border-color:var(--brand);box-shadow:0 3px 12px rgba(11,92,171,.14);transform:translateY(-1px)}
/* ลิงก์หลักต้องไม่ position:relative ไม่งั้น ::after จะกางเท่าตัวปุ่ม ไม่ใช่เท่าการ์ด */
.bookcard .stretch{position:static}
.bookcard .stretch::after{content:'';position:absolute;inset:0;z-index:1;border-radius:12px}
.bookcard .stretch:focus-visible::after{outline:2px solid var(--brand);outline-offset:2px}
.bookcard .row a:not(.stretch){position:relative;z-index:2}
.bookcard:hover .stretch{background:var(--brand);color:#fff;border-color:var(--brand)}
.closecard h3{font-size:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.namebox{border-top:1px solid var(--line);margin-top:8px;padding-top:6px}
.namebox summary{font-size:11.2px}
.namebox.ok summary b{color:var(--ok)}
.namebox.owe summary b{color:var(--warn)}
.namebox.lend summary b{color:var(--brand)}
.namebox.back summary b{color:var(--bad)}
.namenone{border-top:1px solid var(--line);margin-top:8px;padding-top:8px}
table.nametable{font-size:10.8px;margin-top:4px}
table.nametable td,table.nametable th{padding:4px 5px}
table.nametable td.owe{color:var(--warn);font-weight:700}
table.nametable b.owelong{color:var(--bad)}
.namebox.baddebt summary b{color:var(--muted)}
.statusbox{border-top:4px solid var(--ok)}
.statusbox.bad{border-top-color:var(--bad)}
.statusnow{font-size:12.8px;font-weight:700;margin:2px 0}
.statusnow .muted{font-weight:400}
.viewas.badview{background:#fdeceb;border-color:#f3c7c4;color:#7a1a14}
/* ลูกค้าเสีย — ต้องเห็นเป็นสีแดงชัด ๆ ทุกที่ที่ชื่อโผล่ ไม่ใช่จาง ๆ จนมองข้าม */
tr.badrow td{background:#fdecea}
tr.badrow td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
tr.badrow td a,tr.badrow td b{color:var(--bad)}
tr.badrow td a{text-decoration-color:var(--bad)}
.badname{color:var(--bad);font-weight:700}
/* แถบบอกว่าลูกค้าเสียถูกตัดออกจากหน้ากรอกประจำวันให้แล้ว — ต้องเห็น ไม่ใช่เงียบหาย */
.badcut{border-left:4px solid var(--bad);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.badcut b{color:var(--bad)}
.badcut .seebtn{margin-left:auto}
.badcut.showing{background:#fdecea}
/* ปุ่มเดินรายการโอนของแอดมิน — บอกด้วยว่าค้างอยู่ขั้นไหน */
td.ordersteps{white-space:nowrap}
td.ordersteps form{display:inline-block;margin-right:4px}
.stepnote{font-size:10px;margin-bottom:4px}
.stat.badstat{border-color:#f0c3bf;background:#fdecea}
.stat.badstat b,.stat.badstat span:first-child{color:var(--bad)}
.badtag{color:var(--bad);font-weight:700;white-space:nowrap}
tr.badday td{background:#fdecea}
tr.badday td b{color:var(--bad)}
/* ป้ายสถานะต้องดูออกว่าเป็นปุ่มกดได้ ไม่ใช่ป้ายบอกสถานะเฉย ๆ */
.statusfolder{margin-top:10px}
.statusfolder>summary{cursor:pointer;list-style:none;padding:4px 0}
.statusfolder>summary::-webkit-details-marker{display:none}
.statusfolder>summary::before{content:'▸ ';color:var(--muted);font-weight:700}
.statusfolder[open]>summary::before{content:'▾ '}
.statusfold summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:5px;
  border:1px solid var(--line);border-radius:999px;padding:3px 9px 3px 4px;background:#fff;
  transition:border-color .12s,box-shadow .12s,transform .08s;white-space:nowrap}
.statusfold summary::-webkit-details-marker{display:none}
.statusfold summary::after{content:'▾';color:var(--muted);font-size:9.6px;font-weight:700}
.statusfold summary:hover{border-color:var(--brand);box-shadow:0 1px 5px rgba(11,92,171,.18)}
.statusfold summary:hover::after{color:var(--brand)}
.statusfold summary:active{transform:translateY(1px)}
.statusfold summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.statusfold[open] summary{border-color:var(--brand);background:#eef4fc}
.statusfold[open] summary::after{content:'▴';color:var(--brand)}
.statusfold summary .pill{pointer-events:none}
/* ล็อกความกว้างคอลัมน์สถานะไว้ กางฟอร์มออกแล้วตารางต้องไม่ขยับ */
td.statuscell,th.statuscell{width:140px;min-width:140px}
td.ratecell{width:132px;min-width:132px}
.ratefold{display:inline-block;margin-top:3px}
.pctfold{display:inline-block}
.pctfold summary{padding:2px 8px 2px 8px}
.ratenum{font-size:12px}
.ratefold .statusrow,.pctfold .statusrow{text-align:left}
.ratefold .statusrow,.pctfold .statusrow{width:210px}
.ratehint{flex:1 1 100%;margin:2px 0 0;font-size:10px;line-height:1.4}
td.ratecell{width:132px;min-width:132px}
.statusrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.statusrow input{padding:5px 7px;font-size:11.2px;flex:1 1 100%;min-width:0}
.statusbtns{display:flex;gap:6px;flex:1 1 100%}
.statusrow button{padding:6px 10px;font-size:10.8px;white-space:nowrap;flex:1 1 auto}
.statusrow button.ghost{flex:0 0 auto}
.tabnow{background:var(--mark);color:var(--markink);box-shadow:inset 0 0 0 2px var(--markbar);border-radius:8px;padding:6px 10px;font-size:11.2px}
.datebar .spacer{flex:1}
table.daytable td{padding:6px 5px}
table.daytable tr.filled td,table tr.filled td{background:#f2f8f4}
table.daytable tr.justadded td{background:#fff3d6;box-shadow:inset 3px 0 0 var(--warn)}
input.cell{padding:6px 7px;text-align:right;min-width:88px}
input.cell.wide{text-align:left;min-width:120px}
textarea{width:100%;padding:9px;border:1px solid var(--line);border-radius:8px;font-family:ui-monospace,monospace;font-size:11.2px}
.loginlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px}
.loginlist button{width:100%;background:#fff;color:var(--ink);border:1px solid var(--line);text-align:left}

/* จอกลาง 641–900px — เจ้าของสั่ง 12 ก.ย. 2569 ให้เมนูสองชั้นกินที่ด้านบนน้อยที่สุด
 * เดิมช่วงนี้ยังใช้เมนูคอม: เมนูใหญ่ตก 2 แถว และเมนูโต๊ะถูกบังคับอีก 2 แถว
 * รวมแล้วสูงราว 138px ที่หน้าจอ 849px
 * รูปแบบใหม่เหลือ 2 แถวรวม: เมนูหลัก 1 แถว + โต๊ะ/วัน/เมนูปัจจุบัน 1 แถว
 * รายการที่เหลือยังอยู่ครบในปุ่มเมนู และลำดับ DOM เดิมไม่เปลี่ยน */
@media(min-width:641px) and (max-width:900px){
  nav.navmain{position:relative;flex-wrap:nowrap;gap:3px 6px;padding:4px 8px;font-size:10.4px}
  .navburger{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;min-block-size:28px;
    padding:3px 9px;border-radius:8px;background:var(--brand);color:#fff;font-size:10.4px;font-weight:700;
    cursor:pointer;user-select:none;white-space:nowrap}
  .navtoggle:checked~.navburger{background:var(--markink)}
  .mobilequick{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 auto;overflow-x:auto;
    overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .mobilequick::-webkit-scrollbar{height:3px}
  .mobilequick::-webkit-scrollbar-thumb{background:#c9d4e0;border-radius:3px}
  .mobilequick > *{flex:0 0 auto}
  .mobilequick a{background:#fff;border:1px solid var(--line)}
  .mobilequick a.mobilehome,.mobilequick .navback{background:#fff;border-color:#a9c5e3;color:var(--brand)}
  .mobilequick a.navnow,.mobilequick a.mobilehome.navnow{background:var(--brand);border-color:var(--brand);color:#fff}
  .mobilequick a,.mobilequick button{min-block-size:28px}

  .navlinks{display:none}
  /* กางเมนู ☰ แล้วแถบลัดต้องหาย ไม่งั้นบัญชีลูกค้า/คำร้อง/ตัดยอด โผล่สองที่พร้อมกัน
   * (เจ้าของสั่ง 18 ก.ย. 2569 "มีเมนูไหนที่ซ้ำกันบ้าง") */
  .navtoggle:checked~.mobilequick{display:none}
  .navtoggle:checked~.navlinks{display:flex;flex-direction:column;align-items:stretch;gap:1px;
    position:absolute;top:calc(100% + 4px);inset-inline:8px;z-index:52;background:var(--card);
    border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(16,32,56,.22);
    padding:7px;max-height:74vh;overflow:auto}

  /* ── เจ้าของสั่ง 19 ก.ย. 2569 "ตรงมือถือ เมนูแสดงให้ครบ สไลด์ไปซ้ายขวา" ──────
   * เดิมมือถือเห็นแค่ 3-4 เมนูลัด ที่เหลือซ่อนอยู่หลังปุ่ม ☰ ต้องกดสองจังหวะ
   * ตอนนี้เอาเมนูทั้งหมดมาเรียงเป็นแถวเดียว ปัดนิ้วซ้ายขวาได้ เห็นครบทุกอัน
   * ⛔ ปิดแถบลัดกับปุ่ม ☰ ไปด้วย ไม่งั้นเมนูเดียวกันโผล่สองที่
   *    (กติกา 18 ก.ย. 2569 "มีเมนูไหนที่ซ้ำกันบ้าง") */
  .navburger,.navmask{display:none}
  .mobilequick{display:none}
  .navtoggle:checked~.mobilequick{display:none}
  .navlinks,.navtoggle:checked~.navlinks{display:flex;flex-direction:row;align-items:center;
    gap:4px;min-width:0;flex:1 1 auto;position:static;inset:auto;padding:0;margin:0;
    background:none;border:0;box-shadow:none;max-height:none;border-radius:0;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks > *{flex:0 0 auto;width:auto}
  .navlinks > a{padding:4px 8px;border-radius:8px;background:#fff;border:1px solid var(--line);
    white-space:nowrap}
  .navlinks > a.navnow{background:var(--brand);border-color:var(--brand);color:#fff}
  .navlinks .spacer{display:none}
  /* ⛔ ห้ามใช้ order สลับลำดับ · เป้ากดต้องเรียงตามที่เห็นในหน้าเว็บจริง
   *    (กติกาเดิม ล็อกไว้ที่ test/compact-nav-bars.test.js) */
  .navlinks .who{white-space:nowrap;padding:0 6px}
  /* ⛔ แถบเมนูมือถือเลื่อนซ้ายขวาได้ (overflow) มันจึง "ตัด" ของที่ล้นออกนอกแถบทิ้ง
   *    แผง "สลับหน้าจอ" เป็นแผงลอยที่ห้อยลงมาจากปุ่ม จึงถูกตัดหายไปทั้งแผง
   *    อาการที่เจ้าของเจอ 19 ก.ย. 2569: "กดปุ่มสลับหน้าจอไม่ได้" (ที่จริงเปิดแล้ว แต่มองไม่เห็น)
   *    แก้ด้วยการให้แผงลอยเทียบกับ "จอ" แทนที่จะเทียบกับแถบเมนู จึงไม่โดนตัด
   *    ⛔ ห้ามยึดระยะจากด้านบน เพราะแถบเมนูสูงไม่เท่ากันในแต่ละหน้า · ยึดจากก้นจอแทน */
  /* ⛔ มือถือ: แถบเมนูยาวกว่าจอ 4 เท่า ปุ่มสลับหน้าจออยู่ท้ายสุด ต้องปัดไปไกลมากถึงจะเจอ
   *    เจ้าของแจ้ง 19 ก.ย. 2569 "เมนูสลับหน้าในเวอร์ชันมือถือกดไม่ได้"
   *    ตรึงไว้ริมขวาของแถบ · ปัดแถบไปไหนก็ยังอยู่ให้กดเสมอ
   *    ⛔ ใช้ sticky ไม่ใช่ order — ลำดับจริงและลำดับกด Tab ต้องไม่สลับ (กติกา compact-nav-bars) */
  /* ⛔ จอเล็ก: เลิกใช้แผงลอย ใช้ลิงก์ไปหน้าจริงแทน (เจ้าของแจ้ง 19 ก.ย. 2569)
   *    ห้ามโผล่พร้อมกันทั้งสองอัน ไม่งั้นเมนูเดียวกันมีสองที่ */
  .navlinks a.switchgo{display:inline-flex;align-items:center;position:sticky;right:0;z-index:3;
    background:var(--card);box-shadow:-8px 0 8px -6px rgba(16,32,56,.18);touch-action:manipulation;
    min-block-size:30px}
  .navtoggle:checked~.navlinks>a,.navtoggle:checked~.navlinks .navform,
  .navtoggle:checked~.navlinks>form,.navtoggle:checked~.navlinks a.switchgo{width:100%}
  .navtoggle:checked~.navlinks>a{display:flex;align-items:center;min-block-size:32px;padding:6px 10px}
  .navtoggle:checked~.navlinks .spacer{display:none}
  .navtoggle:checked~.navlinks .who{display:block;padding:6px 10px;border-top:1px solid var(--line);margin-top:3px}
  .navtoggle:checked~.navlinks .navback,.navtoggle:checked~.navlinks summary,
  .navtoggle:checked~.navlinks button.link{width:100%;text-align:left;min-block-size:32px}

  .navbar2{position:relative;flex-wrap:nowrap;gap:4px;padding:4px 8px}
  .navbar2 > .navbooks{display:flex;flex:1 1 auto;min-width:0;overflow-x:auto;
    overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .navbar2 > .navbooks::-webkit-scrollbar{height:3px}
  .navbar2 > .navbooks::-webkit-scrollbar-thumb{background:#c9d4e0;border-radius:3px}
  .navbar2 > .navgroup{flex:0 0 auto}
  .navbar2 .navgroup{display:flex;align-items:center;gap:4px;min-width:0;margin-inline-start:auto;overflow:visible}
  .navbar2 .navlabel,.navbar2 .navsep{display:none}
  .navbar2 .navsections{display:none}
  .secburger{display:inline-flex;align-items:center;justify-content:center;min-block-size:28px;
    padding:3px 9px;border:1px solid var(--brand);border-radius:8px;background:var(--brand);color:#fff;
    font-size:10.4px;font-weight:700;cursor:pointer;white-space:nowrap}
  .sectoggle:checked~.secburger{background:var(--markink);border-color:var(--markink)}
  .sectoggle:checked~.navsections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;
    position:absolute;top:calc(100% + 4px);inset-inline:8px;z-index:52;padding:7px;
    border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 12px 28px rgba(16,32,56,.22);
    max-height:74vh;overflow:auto}
  .sectoggle:checked~.navsections>a{display:flex;align-items:center;min-block-size:32px;padding:6px 9px}
  .navbar2 a.navbook,.navbar2 .navstep,.navbar2 .navdate{min-block-size:28px}

  .navmask{display:none}
  .navtoggle:checked~.navmask,.sectoggle:checked~.navmask{
    display:block;position:fixed;inset:0;z-index:49;background:rgba(12,22,34,.42)}
  body:has(.navtoggle:checked),body:has(.sectoggle:checked){overflow:hidden}
}

/* แท็บเล็ตที่กดด้วยนิ้วต้องยังมีเป้ากดใหญ่ แม้หัวเมนูจะเหลือเพียงสองแถว */
@media(min-width:641px) and (max-width:900px) and (pointer:coarse){
  .navburger,.mobilequick a,.mobilequick button,
  .navbar2 a.navbook,.navbar2 .navstep,.navbar2 .navdate,.secburger{min-block-size:36px}
  .navtoggle:checked~.navlinks>a,.navtoggle:checked~.navlinks .navback,
  .navtoggle:checked~.navlinks summary,.navtoggle:checked~.navlinks button.link,
  .sectoggle:checked~.navsections>a{min-block-size:40px}
}

/* ══════════════════════════════════════════════════════════════════
 * จอมือถือ — เจ้าของสั่งจัดใหม่ทั้งหมด 6 ก.ย. 2569
 * ปัญหาที่วัดได้จากจอ 375px ก่อนแก้:
 *   · แถบเมนูสูง 185px กินพื้นที่ไป 23% ของจอก่อนเห็นเนื้อหา
 *   · ปุ่ม 193 จุดสูงไม่ถึง 38px กดด้วยนิ้วพลาดง่าย
 *   · ตารางกรอกประจำวันกว้าง 821px ต้องเลื่อนซ้ายขวาตลอดเวลาที่กรอก
 * ══════════════════════════════════════════════════════════════════ */
/* 🧾 ตารางใบถอนจากยอดฝาก (เจ้าของยืนยัน 25 ก.ย. 2569) · ใบที่ยกเลิกแล้วขีดฆ่าจาง */
table.wdtable{width:100%;border-collapse:collapse;font-size:12.5px}
table.wdtable th,table.wdtable td{border-bottom:1px solid var(--line);padding:5px 6px;text-align:left;vertical-align:middle}
table.wdtable td.num{text-align:right;white-space:nowrap}
table.wdtable tr.wdvoid td{opacity:.55;text-decoration:line-through}
table.wdtable tr.wdvoid td:last-child{text-decoration:none}
/* 🏷 หัวการ์ดใบเปลี่ยนสัญญา · บอกใบใหญ่/ใบเล็ก (26 ก.ย. 2569) */
.rnwkindhead{margin:0 0 6px;padding:6px 10px;border-radius:8px;background:var(--brand-soft);color:var(--brand-ink);font-size:15px;font-weight:800}
.rnwkindhead b{font-weight:900}
/* 📋 ข้อมูลใบเบิกในฟอร์มตั้งใบ (26 ก.ย. 2569) */
.rnwinfo{margin:10px 0 4px;padding:10px 12px;border:2px solid var(--brand);border-radius:10px;background:var(--brand-soft)}
.rnwinfohead{margin:0 0 6px;font-weight:900;color:var(--brand-ink)}
.rnwinfosum{margin:6px 0 0;font-size:12px}
.rnwinfoline{margin:6px 0 0;font-weight:800;color:var(--ink)}
/* 📄📄 ทำสัญญากี่ใบ + กล่องสัญญาใบใหญ่/ใบเล็ก (26 ก.ย. 2569) */
.rnwcount{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:8px 0 2px}
.rnwcntlab{font-size:12px;font-weight:800;color:var(--muted,#667)}
.rnwcnt{display:inline-flex;align-items:center;cursor:pointer;margin:0}
.rnwcnt input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.rnwcnt span{display:inline-block;padding:4px 10px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font-size:12.5px;font-weight:800;line-height:1.3}
.rnwcnt input:checked + span{background:var(--brand);border-color:var(--brand);color:#fff}
.rnwcnt input:focus-visible + span{outline:2px solid var(--brand);outline-offset:2px}
.rnwselfhint{margin:6px 0 0;padding:6px 8px;border-radius:8px;background:var(--warn-soft,#fff6e5);border:1px solid var(--warn,#bf7c1f);font-size:12.5px;font-weight:700}
.rnwselfhint button{margin-top:4px}
.rnwblk{margin-top:10px;padding:10px 12px;border:2px dashed var(--line);border-radius:12px}
.rnwblkb{border-color:#c85a8a;background:#fff7fb}
.rnwblkhead{margin:0 0 4px;font-weight:900;font-size:15px}
.rnwblkhead input{width:150px;margin-left:6px}
.rnwverdictb{margin:8px 0 0;font-weight:800}
.rnwverdictb.bad{color:var(--bad)}
.rnwverdictb.good{color:var(--ok)}
/* 🧾 ฟอร์มตั้งเบิกกระชับ (เจ้าของสั่ง 26 ก.ย. 2569 "ปรับ layout ให้กระชับขึ้น ช่องไม่กว้างเกินไป")
 * ⛔ แก้แค่ขนาด/ระยะ ไม่แตะชื่อช่อง ไม่แตะสคริปต์ · ช่องในโค้ดมี style ติดมา จึงต้องใช้ !important
 * จอกว้าง: ช่องชื่อ 260 · ช่องยอด 140 อยู่บรรทัดเดียวกันเสมอ · หมวดกว้างสุด 560 · ลูกค้า 420 */
.rnwform .rnwcol{flex:1 1 360px!important;max-width:560px}
.rnwform .rnwcol>b{font-size:14px}
.rnwform .rnwcol>p.muted{margin:0 0 4px!important;font-size:11.5px}
.rnwform .rnwpair{flex-wrap:wrap}
.rnwform .rnwpair>div:first-child{flex:1 1 160px!important;max-width:260px;min-width:0}
.rnwform .rnwpair>div:first-child select{width:100%}
.rnwform .rnwpair>div:has(>select[name*="_pocket_"]){flex:0 0 108px!important}
.rnwform .rnwpair>div:has(>input[name*="_amount_"]){flex:0 0 120px!important}
.rnwform .rnwpair>div:has(>select[name*="_pocket_"]) select{width:100%}
.rnwform .rnwpair select,.rnwform .rnwpair input{padding:6px 8px}
.rnwform .rnwadd{padding:4px 10px!important;font-size:12.5px;margin-top:4px!important}
.rnwform .rnwtally{margin:4px 0 0}
.rnwform input[name=customer_label]{max-width:420px}
.rnwform .row>div:has(>input[name=customer_label]){flex:0 1 420px!important}
.rnwform .row>div:has(>input[name=total_baht]){flex:0 0 180px!important}
.rnwform .rnwblk{padding:8px 12px;margin-top:8px}
.rnwform .rnwblk>.row{gap:10px 24px!important;margin-top:6px!important}
@media(min-width:901px){.rnwform{max-width:1180px}}
/* ✅ ตารางใบที่ปิดแล้ว (26 ก.ย. 2569) */
table.rnwdonetable{width:100%;border-collapse:collapse;font-size:12px}
table.rnwdonetable th,table.rnwdonetable td{padding:5px 6px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
table.rnwdonetable td.num,table.rnwdonetable th.num{text-align:right}
/* 🔢 หักกลบ ช่อง 1 และช่อง 3: แต่ละรายการเป็น "กล่อง" แยกชัด มีเลขลำดับ · แถวแบ่งให้ซ้อนอยู่ในกล่องเดียวกัน
   เจ้าของสั่ง 25 ก.ย. 2569 "แยกมองออกว่ากล่องไหนเป็นกล่องไหน … มีเลขหนึ่งที่หนึ่ง เลขสองที่สอง"
   ⛔ ใช้ CSS counter จึงนับให้เองแม้กดเพิ่มแถวในหน้า (clradd) · ไม่แตะ HTML/สคริปต์/ลำดับช่อง (เซิร์ฟเวอร์อ่านช่องเรียงตามลำดับ)
   ⛔ แถวหลัก = แถวใน tbody ที่ไม่ใช่ sp1row/sp2row · แถวแบ่งให้ (sp1row/sp2row) ติดแถบซ้ายน้ำเงินเป็นของรายการข้างบน */
#clrtbl1 > tbody,#clrtbl3 > tbody{counter-reset:clritem}
#clrtbl1 > tbody > tr:not(.sp1row):not(.sp2row),#clrtbl3 > tbody > tr:not(.sp1row):not(.sp2row){counter-increment:clritem}
#clrtbl1 > tbody > tr:not(.sp1row):not(.sp2row) > td,#clrtbl3 > tbody > tr:not(.sp1row):not(.sp2row) > td{border-top:3px solid var(--rule);padding-top:26px;background:#fff}
#clrtbl1 > tbody > tr:not(.sp1row):not(.sp2row) > td:first-child,#clrtbl3 > tbody > tr:not(.sp1row):not(.sp2row) > td:first-child{position:relative}
#clrtbl1 > tbody > tr:not(.sp1row):not(.sp2row) > td:first-child::before,#clrtbl3 > tbody > tr:not(.sp1row):not(.sp2row) > td:first-child::before{
  content:"รายการ " counter(clritem);position:absolute;top:5px;left:0;background:var(--brand);color:#fff;font-weight:900;font-size:10.5px;line-height:1;
  padding:4px 10px;border-radius:0 8px 8px 0;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
#clrtbl1 > tbody > tr.sp1row.on > td,#clrtbl1 > tbody > tr.sp2row.on > td,#clrtbl3 > tbody > tr.sp1row.on > td,#clrtbl3 > tbody > tr.sp2row.on > td{
  border-left:6px solid var(--brand);background:var(--brand-soft)}
#clrtbl1 > tbody > tr.sp1row.on > td.spcell::before,#clrtbl3 > tbody > tr.sp1row.on > td.spcell::before{
  content:"↳ ส่วนแบ่งของรายการ " counter(clritem);display:block;font-size:10px;font-weight:800;color:var(--brand-ink);margin-bottom:2px}
@media(max-width:640px){
  #clrtbl1 > tbody > tr:not(.sp1row):not(.sp2row) > td,#clrtbl3 > tbody > tr:not(.sp1row):not(.sp2row) > td{border-top:0;padding-top:4px}
  #clrtbl1 > tbody > tr:not(.sp1row):not(.sp2row) > td:first-child,#clrtbl3 > tbody > tr:not(.sp1row):not(.sp2row) > td:first-child{border-top:3px solid var(--rule);padding-top:26px}
}
@media(max-width:640px){
  /* ช่องวันที่ในตารางรายเดือน บีบอีกขั้นบนมือถือ (เจ้าของสั่ง 6 ก.ย. 2569) */
  table.monthtable td:first-child,table.monthtable th:first-child{
    width:32px;min-width:32px;max-width:32px;padding-left:3px;padding-right:3px;font-size:9px}
  table.ledgerstyle i.ldow{margin-right:1px;font-size:9px}

  /* แถบวันที่เหลือบรรทัดเดียว · เลื่อนซ้ายขวาได้ · ตัดคำอธิบายออกให้หมด
     สคริปต์จะย้ายช่อง "ไปวันที่" ขึ้นมาอยู่บรรทัดเดียวกันก่อน แล้วค่อยติดคลาส oneline */
  .datebar.oneline{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;
    overflow-x:auto;scrollbar-width:none;padding:5px 8px}
  .datebar.oneline::-webkit-scrollbar{display:none}
  .datebar.oneline > .dayrow{display:flex;flex-wrap:nowrap;align-items:center;gap:5px;margin:0}
  .datebar.oneline .daybtn{white-space:nowrap;min-height:32px;padding:4px 9px}
  .datebar.oneline .daynowbig{white-space:nowrap;font-size:11.2px}
  .datebar.oneline .nowtag,.datebar.oneline .daynow,
  .datebar.oneline .dayrow > .muted,.datebar.oneline .monthfold{display:none}
  .datebar.oneline .daypick{display:inline-flex;align-items:center;gap:4px;margin:0}
  .datebar.oneline .daypick label{display:inline-flex;align-items:center;gap:3px;margin:0;white-space:nowrap}
  .datebar.oneline .daypick input{width:116px;padding:3px 5px}
  .datebar.oneline .daypick button{min-height:32px;padding:4px 9px;white-space:nowrap}

  /* เจ้าของสั่ง 6 ก.ย. 2569 — มือถือไม่ต้องมีตารางเลข 1–30 กินที่เปล่า ๆ
     เปลี่ยนวันได้จากปุ่ม "วันนี้ / เมื่อวาน" และช่อง "ไปวันที่" ซึ่งยังอยู่ครบ */
  .daygrid,.daylegend{display:none}

  /* ── เจ้าของสั่ง 6 ก.ย. 2569 — มือถือไม่ต้องมีคำอธิบาย เอาที่ว่างไปให้ตัวเลขและตาราง ──
   * ซ่อนเฉพาะประโยคอธิบาย · ห้ามแตะ tr.muted (จะหายทั้งแถว) และห้ามแตะป้ายชื่อบนการ์ด
   * จอคอมยังเห็นคำอธิบายครบเหมือนเดิม */
  main > p.muted, main > div.muted, .card > p.muted, .zone > p.muted, .card > div.muted,
  h1 .muted, h2 .muted, h3 .muted, summary .muted,
  .stat span.muted, .stat i,
  .bkedithint, .moneyhint, .delnote, .bkmnote, .sumfoot, .banner .ver{display:none}

  /* ── การ์ดตัวเลขบนมือถือ: เรียงแนวนอน เลื่อนเองทีละใบ (เจ้าของสั่ง 6 ก.ย. 2569) ── */
  main > .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:row;
    align-items:stretch;gap:4px;overflow:visible}
  main > .grid > .stat{padding:5px;min-width:0}
  main > .grid > .stat > span{font-size:9px;line-height:1.25}
  main > .grid > .stat > b{font-size:11.5px;margin-top:1px;overflow-wrap:anywhere;line-height:1.2}
  /* เจ้าของสั่ง 6 ก.ย. 2569 — สามกล่อง "สะสมยกมา + เก็บเดือนนี้ = เก็บทั้งหมด"
   * กินพื้นที่จอมากเกินความสำคัญ · บีบให้อยู่แถวเดียว 3 ช่อง ตัดคำอธิบายใต้ตัวเลขออก
   * เดิมกฎจอเล็กสั่งให้เรียงลงมาทีละกล่อง เลยยาวเป็นสามเท่าโดยไม่จำเป็น */
  div.sumrow{grid-template-columns:1fr auto 1fr auto 1fr;gap:3px;margin-top:5px}
  .sumbox{padding:4px 5px;border-radius:7px}
  .sumbox .lab{font-size:9px;line-height:1.2}
  .sumbox .val{font-size:11.5px;margin-top:0}
  .sumbox .sub{display:none}
  .sumbox.result .val{font-size:12.5px}
  .sumop{justify-self:center;align-self:center;padding:0;font-size:10px}
  .sumhead{gap:4px;margin-bottom:3px}
  .sumhead span{font-size:9.5px}

  /* สองกล่องนี้มีตารางย่อยและช่องกรอกอยู่ข้างใน ยัดลงช่องแคบ ๆ ไม่ได้ ให้กินเต็มแถว
     และดันไปไว้ล่างสุด การ์ดตัวเลขธรรมดาจะได้เรียงเต็มแถวละ 4 ช่องไม่ขาดตอน */
  main > .grid > .stat{order:1}
  main > .grid > .stat.sumcard{grid-column:1 / -1;order:2}
  .gslidebar{display:flex;align-items:center;gap:8px;margin:4px 0 10px}
  .gslidebtn{background:#eef2f7;color:var(--ink);border:1px solid var(--line);border-radius:999px;
    padding:3px 12px;font-size:9.2px;font-weight:700;min-height:0}
  .gsdots{color:var(--muted);font-size:9px;font-weight:700;font-variant-numeric:tabular-nums}

  /* ── เจ้าของสั่ง 6 ก.ย. 2569 — กล่องโซนต้องเต็มจอบนมือถือ ──
   * เดิมเสียที่ไปกับขอบซ้าย-ขวารวม 66px จากจอ 375px (ขอบหน้า 32 + เส้นกรอบ 6 + ขอบในโซน 28)
   * เหลือ 16px ตารางจึงกว้างขึ้นเกือบ 50px โดยที่ยังเห็นว่าเป็นคนละโซนกัน */
  main{padding:7px 7px}
  h1{font-size:14px;margin:7px 0 4px}
  h2{font-size:11.8px;margin:8px 0 4px}
  .zone > .zone-head{padding:6px 10px;font-size:11.8px}
  .zone{margin-left:-8px;margin-right:-8px;border-radius:0;border-left-width:0;border-right-width:0}
  .zone > .zone-head{padding:9px 11px;font-size:12px}
  .zone > *:not(.zone-head){margin-left:5px;margin-right:5px}
  .zone > *:last-child{margin-bottom:8px}
  .card{padding:8px;margin-bottom:6px}

  /* ── เมนูใหญ่บนมือถือ = ป๊อปอัป · เหลือปุ่ม ☰ ปุ่มเดียว ไม่กินจอ ── */
  nav.navmain{position:relative}
  .navburger{display:inline-flex;align-items:center;gap:5px;background:var(--brand);color:#fff;
    border-radius:9px;padding:6px 13px;font-size:10.8px;font-weight:700;cursor:pointer;user-select:none;
    flex:0 0 auto}
  .navtoggle:checked~.navburger{background:var(--markink)}
  /* เมนูที่ใช้ทุกวันต้องเห็นได้ทันที ไม่ต้องเปิดปุ่มสามขีด
     หน้าเจ้าของ/แอดมินอยู่ชิ้นแรกเสมอ และแถบเลื่อนข้างได้เมื่อจอแคบ */
  .mobilequick{display:flex;align-items:center;gap:4px;min-width:0;flex:1 1 auto;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mobilequick::-webkit-scrollbar{display:none}
  .mobilequick > *{flex:0 0 auto}
  .mobilequick a{background:#fff;border:1px solid var(--line)}
  .mobilequick a.mobilehome,.mobilequick .navback{background:#fff;border-color:#a9c5e3;color:var(--brand)}
  .mobilequick a.navnow,.mobilequick a.mobilehome.navnow{background:var(--brand);border-color:var(--brand);color:#fff}
  .navlinks{display:none}
  /* กางเมนู ☰ แล้วแถบลัดต้องหาย ไม่งั้นบัญชีลูกค้า/คำร้อง/ตัดยอด โผล่สองที่พร้อมกัน
   * (เจ้าของสั่ง 18 ก.ย. 2569 "มีเมนูไหนที่ซ้ำกันบ้าง") */
  .navtoggle:checked~.mobilequick{display:none}
  .navtoggle:checked~.navlinks{display:flex;flex-direction:column;align-items:stretch;gap:1px;
    position:absolute;top:calc(100% + 5px);left:8px;right:8px;z-index:40;background:var(--card);
    border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 28px rgba(16,32,56,.22);
    padding:7px;max-height:74vh;overflow:auto}
  /* ⛔ แถบเมนูมือถือเลื่อนซ้ายขวาได้ (overflow) มันจึง "ตัด" ของที่ล้นออกนอกแถบทิ้ง
   *    แผง "สลับหน้าจอ" เป็นแผงลอยที่ห้อยลงมาจากปุ่ม จึงถูกตัดหายไปทั้งแผง
   *    อาการที่เจ้าของเจอ 19 ก.ย. 2569: "กดปุ่มสลับหน้าจอไม่ได้" (ที่จริงเปิดแล้ว แต่มองไม่เห็น)
   *    แก้ด้วยการให้แผงลอยเทียบกับ "จอ" แทนที่จะเทียบกับแถบเมนู จึงไม่โดนตัด
   *    ⛔ ห้ามยึดระยะจากด้านบน เพราะแถบเมนูสูงไม่เท่ากันในแต่ละหน้า · ยึดจากก้นจอแทน */
  /* ⛔ มือถือ: แถบเมนูยาวกว่าจอ 4 เท่า ปุ่มสลับหน้าจออยู่ท้ายสุด ต้องปัดไปไกลมากถึงจะเจอ
   *    เจ้าของแจ้ง 19 ก.ย. 2569 "เมนูสลับหน้าในเวอร์ชันมือถือกดไม่ได้"
   *    ตรึงไว้ริมขวาของแถบ · ปัดแถบไปไหนก็ยังอยู่ให้กดเสมอ
   *    ⛔ ใช้ sticky ไม่ใช่ order — ลำดับจริงและลำดับกด Tab ต้องไม่สลับ (กติกา compact-nav-bars) */
  /* ⛔ จอเล็ก: เลิกใช้แผงลอย ใช้ลิงก์ไปหน้าจริงแทน (เจ้าของแจ้ง 19 ก.ย. 2569)
   *    ห้ามโผล่พร้อมกันทั้งสองอัน ไม่งั้นเมนูเดียวกันมีสองที่ */
  .navlinks a.switchgo{display:inline-flex;align-items:center;position:sticky;right:0;z-index:3;
    background:var(--card);box-shadow:-8px 0 8px -6px rgba(16,32,56,.18);touch-action:manipulation;
    min-block-size:30px}
  .navtoggle:checked~.navlinks>a,.navtoggle:checked~.navlinks .navform,
  .navtoggle:checked~.navlinks>form,.navtoggle:checked~.navlinks a.switchgo{width:100%}
  .navtoggle:checked~.navlinks>a{padding:8px 10px;border-radius:8px}
  .navtoggle:checked~.navlinks .spacer{display:none}
  .navtoggle:checked~.navlinks .who{width:auto;order:0;padding:6px 10px;border-top:1px solid var(--line);margin-top:3px}
  .navtoggle:checked~.navlinks .navback,.navtoggle:checked~.navlinks summary{width:100%;text-align:left}

  /* ── เจ้าของสั่ง 19 ก.ย. 2569 "ตรงมือถือ เมนูแสดงให้ครบ สไลด์ไปซ้ายขวา" ──────
   * เดิมมือถือเห็นแค่ 3-4 เมนูลัด ที่เหลือซ่อนอยู่หลังปุ่ม ☰ ต้องกดสองจังหวะ
   * ตอนนี้เอาเมนูทั้งหมดมาเรียงเป็นแถวเดียว ปัดนิ้วซ้ายขวาได้ เห็นครบทุกอัน
   * ⛔ ปิดแถบลัดกับปุ่ม ☰ ไปด้วย ไม่งั้นเมนูเดียวกันโผล่สองที่
   *    (กติกา 18 ก.ย. 2569 "มีเมนูไหนที่ซ้ำกันบ้าง") */
  .navburger,.navmask{display:none}
  .mobilequick{display:none}
  .navtoggle:checked~.mobilequick{display:none}
  .navlinks,.navtoggle:checked~.navlinks{display:flex;flex-direction:row;align-items:center;
    gap:4px;min-width:0;flex:1 1 auto;position:static;inset:auto;padding:0;margin:0;
    background:none;border:0;box-shadow:none;max-height:none;border-radius:0;
    overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks > *{flex:0 0 auto;width:auto}
  .navlinks > a{padding:4px 8px;border-radius:8px;background:#fff;border:1px solid var(--line);
    white-space:nowrap}
  .navlinks > a.navnow{background:var(--brand);border-color:var(--brand);color:#fff}
  .navlinks .spacer{display:none}
  /* ⛔ ห้ามใช้ order สลับลำดับ · เป้ากดต้องเรียงตามที่เห็นในหน้าเว็บจริง
   *    (กติกาเดิม ล็อกไว้ที่ test/compact-nav-bars.test.js) */
  .navlinks .who{white-space:nowrap;padding:0 6px}

  /* ── แถบเมนู — บีบให้เตี้ยลง เห็นเนื้อหาเร็วขึ้น ── */
  nav.navmain{gap:3px 6px;padding:6px 10px;font-size:10.4px}
  nav.navmain a,nav.navmain button{padding:4px 7px}
  .navbar2{padding:5px 10px;gap:3px 5px}
  a.navsec{font-size:10px;padding:4px 8px}
  a.navbook{font-size:10px;padding:4px 9px}
  .nsub{font-size:9px;margin-left:2px}
  .navlabel{display:none}                 /* ป้ายกำกับตัวเล็ก ๆ ตัดออก เอาที่ว่างไปให้ปุ่ม */
  nav .who{width:100%;order:9;font-size:10px}

  /* ── ปุ่มทุกตัวต้องกดด้วยนิ้วได้ — อย่างน้อย 40px ── */
  /* ปุ่มในเนื้อหาต้องกดง่าย แต่ลิงก์บนแถบเมนูห้ามสูง ไม่งั้นแถบกินจอ */
  .daybtn,.seebtn,button:not(.switchbig):not(.navback):not(.bkbackbtn){min-height:40px}
  .navstep{min-width:38px;min-height:38px}
  nav.navmain a,nav.navmain button{min-height:0;line-height:1.25}
  a.navsec,a.navbook,.navdate{line-height:1.25}
  table.daytable button,table.daytable a.seebtn,.duebtns button{min-height:34px}

  /* ── ตาราง Excel ทั้งเดือน — สำคัญที่สุด (เจ้าของย้ำ) ──
   * บีบคอลัมน์ชื่อกับช่องตัวเลขให้เล็กลง จะได้เห็นวันได้หลายวันขึ้น
   * เดิมคอลัมน์ที่ตรึงไว้กินไป 240px จาก 375px เหลือที่ให้ข้อมูลแค่ 135px
   * หลังบีบเหลือ 168px ตรึง เห็นข้อมูลได้เกือบเท่าตัว
   */
  table.bktable{font-size:9px}
  table.bktable th,table.bktable td{padding:4.5px 4.8px}
  table.bktable .b1{width:24px;min-width:24px;font-size:9px}
  table.bktable .b2{left:24px;width:72px;min-width:72px;max-width:72px}
  /* ชื่อยาว ๆ อย่าง "สุพิชาญาต์ (รายการที่ 2)" ต้องขึ้นบรรทัดใหม่ให้อ่านครบ
   * ห้ามตัดหาย เพราะเซลล์ต้องรู้ว่ากำลังกรอกของใคร (เจ้าของทักท้วง 6 ก.ย. 2569) */
  table.bktable .b2 .bnm{font-size:9px;-webkit-line-clamp:2;line-height:1.28}
  table.bktable .b2 i.bcd{font-size:9px}
  table.bktable .b3{left:96px;min-width:65px;max-width:65px;font-size:9px}
  /* คอลัมน์ "ดอกตามรอบ" ก็บีบด้วย (เจ้าของสั่ง 6 ก.ย. 2569) — เดิมกิน 73px
   * สามคอลัมน์หัวตารางรวมกันกินไป 243px จาก 375px เหลือให้ข้อมูลแค่ 132px */
  table.bktable th.bn[rowspan],
  table.bktable td.bn:not(.k):not(.p):not(.c):not(.e){
    min-width:60px;max-width:60px;width:60px;font-size:9px}
  table.bktable .bn{min-width:0}
  /* เจ้าของสั่ง 7 ก.ย. 2569 — ทุกช่องเท่ากับช่องเก็บ แม้บนมือถือ
   * แลกกับต้องเลื่อนซ้ายขวามากขึ้น แต่ตารางอ่านเป็นระเบียบกว่า */
  table.bktable .bn.k,table.bktable .bn.p,table.bktable .bn.c{
    min-width:55px;width:55px}
  table.bktable th.bgrp{font-size:9px}
  table.bktable th.bsub{font-size:9px;padding:2px 3px}
  /* หัวตารางต้องตรึงไว้ตลอด — เลื่อนลงไปไกลแค่ไหนก็ยังรู้ว่าช่องไหนคือวันอะไร */
  table.bktable thead th,table.bktable tr:first-child th{position:sticky;top:0;z-index:6}
  /* หัวช่องที่ตรึงไว้ (ชื่อลูกค้า · ยอดปล่อย · ดอกตามรอบ) ต้องอยู่บนสุดเสมอ
     ไม่งั้นเลื่อนตารางไปทางขวาแล้วหัวช่องวันจะเลื่อนมาทับจนอ่านไม่ออก */
  table.bktable tr:first-child th.bst,table.bktable tr:nth-child(2) th.bst,
  table.bktable thead th.bst{z-index:9}
  .bkwrap{max-height:76vh}

  /* ── ตารางกรอกประจำวัน — เปลี่ยนจากตารางเป็นการ์ดทีละคน ──
   * บนมือถือการเลื่อนซ้ายขวาเพื่อกรอกเป็นเรื่องทรมาน ทำเป็นการ์ดแทน
   * แต่ละคนเป็นกล่องเดียว มีชื่ออยู่บน แล้วช่องกรอกเรียงลงมาพร้อมป้ายกำกับ
   */
  table.daytable,table.daytable tbody,table.daytable tr,table.daytable td{display:block;width:auto}
  table.daytable tr:first-child{display:none}          /* หัวตารางไม่ต้อง ป้ายอยู่ในแต่ละช่องแล้ว */
  table.daytable tr{border:1px solid var(--line);border-radius:11px;margin-bottom:11px;
    padding:11px 13px;background:var(--card);box-shadow:0 1px 3px rgba(16,32,56,.05)}
  table.daytable td{border:0;padding:5px 0;text-align:left}
  table.daytable td.num{text-align:left}
  /* ป้ายกำกับหน้าช่อง — บอกว่าช่องนี้คืออะไร เพราะไม่มีหัวตารางแล้ว */
  table.daytable td[data-lb]{display:flex;align-items:center;gap:9px;justify-content:space-between}
  table.daytable td[data-lb]::before{content:attr(data-lb);color:var(--muted);font-size:10.4px;
    font-weight:600;flex:0 0 auto}
  table.daytable td[data-lb] input{max-width:150px;text-align:right;min-height:42px;font-size:16px}
  table.daytable tr.filled td{background:transparent}
  table.daytable .duerow{padding-top:7px;border-top:1px dashed var(--line)}

  /* ── แถบที่สอง: ยุบเมนูในโต๊ะไว้หลังปุ่มสามขีด (เจ้าของสั่ง 6 ก.ย. 2569) ──
   * เดิมแถบนี้สูง 135px จาก 812px · เหลือไว้แค่ปุ่มโต๊ะกับวันที่ที่ต้องใช้ตลอด
   */
  .navbar2 .navsections{display:none}
  .secburger{display:inline-flex;align-items:center;gap:5px;background:#eef2f7;color:var(--brand);
    border:1px solid var(--line);border-radius:9px;padding:6px 11px;font-size:13.5px;font-weight:700;
    cursor:pointer;white-space:nowrap;min-height:38px}
  .sectoggle:checked~.secburger{background:var(--brand);color:#fff;border-color:var(--brand)}
  .sectoggle:checked~.navsections{display:flex;flex-direction:column;align-items:stretch;gap:1px;
    width:100%;margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff}
  .sectoggle:checked~.navsections>a{padding:11px 13px;border-bottom:1px solid var(--line);min-height:44px;
    display:flex;align-items:center;gap:7px}
  .sectoggle:checked~.navsections>a:last-child{border-bottom:0}
  .navbar2 .navsep{display:none}
  /* มือถือก็ต้องเป็นสองบรรทัดเป๊ะเหมือนคอม (เจ้าของสั่ง 8 ก.ย. 2569 "ทั้งมือถือและคอม")
     ของเดิมตัดขึ้นบรรทัดใหม่ได้ เมนูยาว ๆ บนจอแคบจึงกลายเป็นสามสี่บรรทัด */
  .navbar2 .navgroup{display:flex;flex-wrap:nowrap;align-items:center;gap:6px;width:100%;
    min-width:0;overflow-x:auto}
  /* ปุ่มเปิดโต๊ะใหม่นาน ๆ ใช้ที · ซ่อนบนมือถือเพื่อเอาที่ไปให้ปุ่มที่ใช้ทุกวัน
     (เปิดโต๊ะใหม่ทำจากหน้ารายชื่อลูกค้าได้อยู่แล้ว) */
  .navbar2 .navbook.new{display:none}
  .navbar2{row-gap:5px}
  .navbar2 .navbooks{display:flex;gap:5px}
  .navbook{padding:6px 10px;font-size:13.5px}

  /* ── เจ้าของสั่ง 6 ก.ย. 2569 (มือถือ) ─────────────────────────
   * ① ปุ่มกรองให้อยู่แถวเดียว ถ้าเกินให้เลื่อนไปทางขวาหา ไม่ตกบรรทัด
   * ② ปุ่ม ☰ เมนูในโต๊ะ ย้ายไปชิดขวาแถวเดียวกับปุ่มโต๊ะและวันที่ ประหยัดอีกหนึ่งบรรทัด
   */
  /* กล่องวิธีใช้ — ซ่อนแต่ตัวอธิบาย ปุ่มยังต้องอยู่ (เจ้าของย้ำ) */
  .bkedithint{flex-wrap:nowrap;gap:6px;overflow-x:auto}
  .bkedithint > b,.bkedithint .delnote{display:none}
  .gridfilter{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:3px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .gridfilter::-webkit-scrollbar{display:none}
  .gridfilter > b,.gridfilter .bkmnote{display:none}
  .gridfilter button{flex:0 0 auto;font-size:12px;padding:7px 11px;min-height:36px;white-space:nowrap}
  .navbar2 .navgroup{margin-left:auto;width:auto}
  .secburger{margin-left:auto}

  /* แถบแจ้งเตือนกับปุ่มเต็มจอ อยู่บรรทัดเดียวกัน (เจ้าของสั่ง 6 ก.ย. 2569) */
  .bknotirow{gap:7px}

  /* เจ้าของสั่งลบวิธีใช้ออกจากมือถือ 6 ก.ย. 2569 — ซ่อนคำอธิบายไปเลย ไม่ต้องมีปุ่มกาง
     เหลือแต่ปุ่มขอแก้ไขที่ต้องเห็นตอนยอดถูกล็อก (7 ก.ย. 69 ลบปุ่มล้างช่องออกแล้ว) */
  button.bkhelp{display:none}

  /* ตารางสรุปรายวัน — ซ่อนวันว่างที่อยู่นอกช่วง (เจ้าของสั่ง 6 ก.ย. 2569) */
  table.monthtable tr.hiderow{display:none}
  .showallrow{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 7px}
  .showallrow .muted{font-size:12px}
  table.monthtable.showall tr.hiderow{display:table-row}

  /* ── เมนูมือถือ: ฉากหลังมืด + จัดชั้นซ้อน (เจ้าของสั่ง 6 ก.ย. 2569) ──
   * เปิดเมนูแล้วต้องเห็นชัดว่ามันลอยอยู่ข้างหน้า ของข้างหลังต้องมืดลง
   * และกดที่ฉากหลังก็ปิดเมนูได้ ไม่ต้องกดปุ่มซ้ำ
   */
  .navtoggle:checked~.navmask,.sectoggle:checked~.navmask{
    display:block;position:fixed;inset:0;z-index:35;background:rgba(12,22,34,.42)}
  .navmask{display:none}
  /* แถบบนต้องอยู่เหนือฉากหลัง ไม่งั้นปุ่มปิดจะกดไม่ได้ */
  header.topnav{position:relative;z-index:36}
  .navtoggle:checked~.navlinks{z-index:38}
  .sectoggle:checked~.navsections{position:relative;z-index:38}
  /* เปิดเมนูอยู่ ห้ามให้หน้าเลื่อนตามข้างหลัง */
  body:has(.navtoggle:checked),body:has(.sectoggle:checked){overflow:hidden}

  /* ตารางสรุปรายเดือน — ตรึงคอลัมน์วันที่กับหัวตาราง และบีบช่องวันที่ให้แคบ
   * เฉพาะจอมือถือเท่านั้น (เจ้าของสั่ง 6 ก.ย. 2569: "เวอร์ชั่นคอมไม่ต้องแก้")
   * จอคอมกว้างพอ เห็นครบอยู่แล้ว ไม่ต้องตรึงและไม่ต้องบีบ */
  table.monthtable th{position:sticky;top:0;z-index:3;background:#eef2f7}
  table.monthtable td:first-child,table.monthtable th:first-child{position:sticky;left:0;z-index:2;
    background:var(--card);font-weight:600;white-space:nowrap;
    width:40px;min-width:40px;max-width:40px;padding-left:4px;padding-right:4px;font-size:9.6px;
    box-shadow:1px 0 0 var(--line)}
  table.monthtable th:first-child{z-index:4;background:#eef2f7}
  table.monthtable tr.istoday td:first-child{background:#fff8e6}
  table.monthtable tr.future td:first-child{background:#fafbfc}
  table.monthtable tr.total td:first-child{background:var(--card)}

  /* ── 📱 ตรึงคอลัมน์ปุ่มไว้ขอบขวา (เจ้าของสั่ง 21 กันยายน 2569) ────────────────
   *   "ต้องการปรับเป็นเวอร์ชันมือถือ ให้กรอกรายละเอียดและส่งสลิปได้ง่ายขึ้น"
   *
   * วัดจริงบนจอ 375px ก่อนแก้:
   *   · ตารางกว้าง 463px ในกรอบ 354px → ต้องเลื่อนขวา 125px
   *   · คอลัมน์ปุ่มเริ่มที่ x = 410px → อยู่นอกจอสนิท ทุกแถว
   *   · จะกดปุ่มโอนยอด/ส่งสลิป ต้องเลื่อนขวาก่อนทุกครั้ง แล้วเลื่อนกลับมาดูวันที่
   *
   * ⛔ ตรึงไว้ขอบขวาเหมือนที่ตรึงช่องวันที่ไว้ขอบซ้าย · กดได้เลยไม่ต้องเลื่อน
   * ⛔ ต้องมีพื้นหลังทึบ ไม่งั้นตัวเลขข้างหลังทะลุขึ้นมาอ่านทับกัน
   * ⛔ ปุ่มต้องสูงอย่างน้อย 38px นิ้วถึงกดไม่พลาด (บทเรียน 21 ก.ย. 2569
   *    เคยรายงานว่า "ไม่มีปุ่ม" ทั้งที่มีปุ่ม แต่เล็กเกินกว่าจะกดโดน) */
  table.monthtable td:last-child,table.monthtable th:last-child{
    position:sticky;right:0;z-index:2;background:var(--card);
    box-shadow:-1px 0 0 var(--line);padding-left:4px;padding-right:4px;
    white-space:nowrap;text-align:right}
  table.monthtable th:last-child{z-index:4;background:#eef2f7}
  table.monthtable tr.istoday td:last-child{background:#fff8e6}
  table.monthtable tr.future td:last-child{background:#fafbfc}
  table.monthtable tr.blank td:last-child{background:var(--card)}
  table.monthtable tr.waitrow td:last-child{background:#f2f7fd}
  table.monthtable tr.amendrow td:last-child{background:#f8f3ff}
  table.monthtable tr.total td:last-child{background:var(--card)}
  /* ปุ่มในคอลัมน์ที่ตรึงไว้ · เรียงลงมาเป็นแถวตั้ง นิ้วกดง่ายกว่าเรียงติดกัน */
  table.monthtable td:last-child{display:table-cell;vertical-align:middle}
  table.monthtable td:last-child button,
  table.monthtable td:last-child a,
  table.monthtable td:last-child .pill{
    display:block;width:100%;min-height:38px;line-height:1.15;margin:2px 0;
    padding:6px 8px;font-size:11px;box-sizing:border-box}
}
/* ⛔ วงเล็บปิดบรรทัดบนนี้หายมาตั้งแต่เดิม (พบ 26 ก.ย. 2569) · กลุ่มกฎมือถือเลยกลืนทุกกฎที่ต่อท้ายไฟล์
 *    กฎข้างล่าง (แถบ 30 วัน · ป้ายเงินอยู่ที่ใคร · เวลาในกล่องเงินเข้า-ออก · หน้าตารอบ 1) จึงมีผลแค่บนมือถือ
 *    ห้ามลบวงเล็บนี้ · ล็อกไว้ที่ test/redesign-phase1.test.js */

/* 📅 แถบ 30 วันของหน้าใบต่อสัญญา/ปล่อยลูกค้าใหม่ (เจ้าของสั่ง 25 ก.ย. 2569 ดูทีละวัน ห้ามรวมเมื่อวาน) */
.rnwdays{display:flex;gap:4px;overflow-x:auto;padding:6px 2px;margin:8px 0;border-top:2px solid #4d5f72;border-bottom:2px solid #4d5f72;-webkit-overflow-scrolling:touch}
.rnwday{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;min-width:40px;padding:4px 3px;border:1.5px solid var(--line);border-radius:8px;background:#fff;color:var(--muted);text-decoration:none;line-height:1.15}
.rnwday i{font-style:normal;font-size:8.5px}.rnwday b{font-size:13px;color:var(--ink)}.rnwday small{font-size:9px;font-weight:700}
.rnwday.has{border-color:#9ccfdc;background:#f3fbfd;color:#0b5cab}
.rnwday.open{border-color:#cf8f2e;background:#fff7e6;color:#9a6414}
.rnwday.on{border-color:var(--brand);background:var(--brand);color:#fff}.rnwday.on b,.rnwday.on i,.rnwday.on small{color:#fff}
.rnwolder{align-self:center;white-space:nowrap;padding:0 8px;font-size:10.5px}
.rnwelse{margin:8px 0}
.rnwclosed{margin:0 0 4px;color:var(--ok);font-size:12px}
/* 🧭 ป้าย "เงินอยู่ที่ใคร" ใต้ช่องยังไม่จัดสรร (เจ้าของสั่ง 25 ก.ย. 2569) · กดกางดูรายละเอียดใบ */
.heldat{font-size:9px;font-weight:600;color:#0b5cab;margin-top:2px;text-align:left;line-height:1.3;opacity:1}
.heldat.in{color:#6b4f00}
.heldat>summary{cursor:pointer;list-style:none;white-space:nowrap}
.heldat>summary::-webkit-details-marker{display:none}
.heldat .heldwhy{font-weight:400;color:#68778a;white-space:normal;max-width:240px;margin-top:2px}
/* 🕐 เวลาและคนทำในกล่องเงินเข้า-ออกตามใบ */
.mvtime{font-style:normal;color:#68778a;font-size:.9em;white-space:nowrap}
.mvby{font-style:normal;color:#68778a;font-size:.9em}
/* ═══ 🎨 ปรับหน้าตาทั้งเว็บ · รอบที่ 1 (เจ้าของยืนยัน 26 ก.ย. 2569 "ยืนยันทั้งสองและขึ้นเว็บได้เลย")
 *   "หน้าเว็บไซต์ในคอม ตัวหนังสือ กล่องข้อความเทอะทะ · ตัดคำอธิบายที่ไม่สำคัญออก"
 * ⛔ อยู่ท้ายสุดของชุดตั้งใจ · น้ำหนักเท่ากับกฎเดิมแล้วตัวล่างชนะ
 * ⛔ ห้ามแตะตัวเลข สูตร ตารางบันทึก (bktable ใช้กฎที่เป็นคลาสของตัวเอง แรงกว่ากฎนี้อยู่แล้ว) และสีเขียว "เก็บ"
 * ⛔ ฟอนต์ IBM Plex Sans Thai โหลดจาก Google Fonts ใน layout · โหลดไม่ขึ้นก็ถอยไปใช้ฟอนต์เครื่องเหมือนเดิม */
body{font-family:"IBM Plex Sans Thai",-apple-system,"Sarabun","Helvetica Neue",sans-serif}
/* ⛔ ตารางบันทึกคงฟอนต์เดิม · ฟอนต์ใหม่ทำให้ตารางสูงขึ้น 6 จุด (วัด 26 ก.ย. 2569) · เจ้าของสั่งห้ามแตะขนาดตารางนี้ */
.bkwrap,table.bktable{font-family:-apple-system,"Sarabun","Helvetica Neue",sans-serif}
/* ป้ายชื่อช่อง 9.2 → 11 · อ่านออกโดยไม่ต้องเพ่ง */
label{font-size:11px;letter-spacing:0}
/* หัวข้อหน้าและหัวกล่องเด่นขึ้น */
h1{font-size:19px;font-weight:700;color:var(--brand-ink,#0b3a6b);margin:12px 0 8px}
h2{font-size:14.5px;font-weight:700}
h3{font-size:13px;font-weight:700}
/* ⓘ ปุ่มเปิด/ปิดคำอธิบายในแถบบน */
.banner{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
button.helptgl{background:#fff;color:var(--brand);border:1px solid #c9d6e6;box-shadow:none;border-radius:999px;
  padding:1px 9px;min-height:0;font-size:10.5px;font-weight:700;line-height:1.5}
button.helptgl[aria-pressed="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
button.helptgl[hidden]{display:none}
body:not(.showhelp) .xhelp{display:none!important}
/* มือถือซ่อนคำอธิบายอยู่แล้วตั้งแต่ 6 ก.ย. 2569 · ไม่ต้องมีปุ่ม */
@media(max-width:640px){button.helptgl{display:none}}
/* จอคอมใช้เมาส์ · ช่องกรอกกับปุ่มเล็กลง (มือถือ/แท็บเล็ตคงเดิม เพราะนิ้วต้องกดแม่น และ iPhone ซูมเองถ้าตัวอักษรต่ำกว่า 16) */
@media(min-width:901px) and (pointer:fine){
  input,select,textarea{font-size:13px;padding:5px 8px;border-radius:7px}
  button{padding:6px 12px;min-height:30px;font-size:12px;border-radius:8px}
}
/* ═══ 🖥 หัวหน้าบนจอคอม 2 แถว (เจ้าของสั่ง 26 ก.ย. 2569) · คู่กับสคริปต์ deskhead ใน layout
 * ⛔ ทุกกฎอยู่ใต้ html.deskhead ซึ่งติดเฉพาะจอกว้าง 1024 ขึ้นไป + เมาส์ · มือถือ/แท็บเล็ตไม่โดน
 * ⛔ แถบต้องไม่ตัดขอบ (overflow visible) ไม่งั้นเมนูที่กางลงมาจะโดนตัดหาย */
@media(min-width:1024px) and (pointer:fine){
  html.deskhead header.topnav nav.navmain{flex-wrap:nowrap;padding:3px 12px;gap:4px;font-size:12.5px;min-height:0}
  html.deskhead header.topnav .navlinks{display:none!important}
  html.deskhead .ngroups{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;white-space:nowrap}
  html.deskhead .ngroups > .spacer{flex:1 1 auto}
  html.deskhead details.ngrp{position:relative}
  html.deskhead details.ngrp > summary{list-style:none;cursor:pointer;padding:4px 10px;border-radius:8px;font-weight:700;
    color:var(--brand);white-space:nowrap;line-height:1.5}
  html.deskhead details.ngrp > summary::-webkit-details-marker{display:none}
  html.deskhead details.ngrp > summary:hover{background:#eef4fb}
  html.deskhead details.ngrp > summary.navnow,html.deskhead details.ngrp[open] > summary{background:var(--brand);color:#fff}
  html.deskhead .ngmenu{position:absolute;top:calc(100% + 3px);left:0;z-index:80;background:#fff;border:1px solid var(--line);
    border-radius:10px;box-shadow:0 10px 28px rgba(16,24,40,.16);padding:6px;min-width:200px;
    display:flex;flex-direction:column;gap:2px;font-size:12.5px}
  html.deskhead details.ngright > .ngmenu{left:auto;right:0}
  html.deskhead .ngmenu > a,html.deskhead .ngmenu > button,html.deskhead .ngmenu form button,html.deskhead .ngmenu > .who{
    display:flex;align-items:center;gap:4px;width:100%;justify-content:flex-start;text-align:left;padding:7px 10px;
    border-radius:7px;white-space:nowrap;min-height:0;box-shadow:none;font-size:12.5px}
  html.deskhead .ngmenu > a:hover{background:#eef4fb}
  html.deskhead .ngmenu form{margin:0}
  html.deskhead .ngmenu > .who{color:var(--muted);font-size:11.5px;border-bottom:1px solid var(--line);border-radius:0}
  html.deskhead .ngroups > a.ngone,html.deskhead .ngroups > a{padding:4px 10px;border-radius:8px;white-space:nowrap}
  /* แถว 2 · แถบโต๊ะ */
  html.deskhead header.topnav .navbar2{flex-wrap:nowrap;overflow:visible;padding:3px 12px;gap:6px;font-size:12.5px;min-height:0}
  html.deskhead header.topnav .navbar2 .navgroup{overflow:visible;gap:4px}
  html.deskhead header.topnav .navbar2 .navlabel,html.deskhead header.topnav .navbar2 .navsep{display:none}
  html.deskhead header.topnav .navbar2 a.navbook,html.deskhead header.topnav .navbar2 a.navsec,
  html.deskhead header.topnav .navbar2 button.ngproxy{padding:3px 9px;font-size:12.5px;min-height:0;line-height:1.5}
  html.deskhead header.topnav .navbar2 button.ngproxy{background:#fff;color:var(--brand);border:1px solid var(--line);
    border-radius:8px;box-shadow:none;font-weight:700}
  html.deskhead header.topnav .navbar2 .ngmore > .ngmenu .navsec{display:flex}
  html.deskhead header.topnav .navbar2 .ngnote{color:var(--ok);font-weight:700;padding:7px 10px}
  html.deskhead .actchip > summary{background:#fff4e5;color:#92400e;border:1px solid #f59e0b;padding:3px 10px}
  html.deskhead .actchip[open] > summary,html.deskhead .actchip > summary:hover{background:#f59e0b;color:#fff}
  html.deskhead .actchip .actback{width:100%}
  html.deskhead .actchip .actnote{white-space:normal;max-width:260px;padding:4px 10px;font-size:11px}
  /* ปุ่มที่ย้ายขึ้นแถว 2 แล้ว ไม่ต้องโชว์ซ้ำเหนือตาราง · แถบแจ้งเตือนการบันทึกกับป้ายโอนแล้วยังอยู่ */
  html.deskhead-tools .bktoolsrow > .bkrange,html.deskhead-tools .bktoolsrow > .bkfullbar,
  html.deskhead-tools .bktoolsrow .bossedit > .pill.ok{display:none}
  /* กล่องตารางกรอกสูงเต็มจอลบหัว 2 แถว (เดิม 66% ของจอ = 594 จุดบนจอ 900) · ขนาดช่อง/แถวไม่แตะ */
  html.deskhead .bkwrap[data-day-sheet]{max-height:calc(100vh - var(--deskhead-h, 70px) - 12px)}
}

/* ═══ 🧭 หน้าตาใหม่ขั้น ① · เมนูข้างซ้าย (จอกว้าง 1280 ขึ้นไป + เมาส์) · เจ้าของยืนยัน 27 ก.ย. 2569
 * ⛔ ทุกกฎอยู่ใต้ html.deskside · สคริปต์ deskhead ติดคลาสนี้ให้เฉพาะจอกว้าง 1280 ขึ้นไป
 * ⛔ z-index ต่ำกว่าตารางโหมดเต็มจอ (60) ไม่งั้นเมนูทับตาราง */
@media(min-width:1280px) and (pointer:fine){
  html.deskside body{padding-left:220px}
  html.deskside header.topnav nav.navmain{position:fixed;left:0;top:0;bottom:0;width:220px;box-sizing:border-box;
    display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;overflow-y:auto;background:#fff;
    border-right:1px solid var(--line);padding:14px 10px;gap:0;z-index:55;font-size:14px}
  html.deskside .ngroups{display:flex;flex-direction:column;align-items:stretch;white-space:normal;gap:14px;flex:1 1 auto;min-width:0}
  html.deskside .ngroups > .spacer{flex:1 1 auto}
  html.deskside .nsbrand{display:flex;align-items:center;gap:8px;padding:2px 8px 4px;font-size:15px}
  html.deskside .nsbrand i{width:26px;height:26px;border-radius:7px;background:var(--brand);color:#fff;font-style:normal;
    font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
  html.deskside .nsec{display:flex;flex-direction:column;gap:1px}
  html.deskside .nshead{font-size:11.5px;font-weight:600;color:var(--muted);padding:0 10px 4px}
  html.deskside .nsec > a,html.deskside .ngroups > a,html.deskside .nsec > button,html.deskside .nsec form button,html.deskside .nsec > .who{
    display:flex;align-items:center;justify-content:space-between;gap:6px;padding:7px 10px;border-radius:8px;color:#334155;
    font-size:13.5px;font-weight:500;text-decoration:none;background:none;border:0;text-align:left;width:100%;box-sizing:border-box;
    font-family:inherit;cursor:pointer;white-space:normal;min-height:0;line-height:1.35}
  html.deskside .nsec > a:hover,html.deskside .ngroups > a:hover,html.deskside .nsec form button:hover{background:#eef4fb}
  html.deskside .nsec > a.navnow,html.deskside .ngroups > a.navnow{background:#e8f0fb;color:var(--brand);font-weight:700}
  html.deskside .nsec form{margin:0}
  html.deskside .nsec.ngright{border-top:1px solid var(--line);padding-top:10px}
  html.deskside .nsec > .who{color:var(--muted);font-size:12px;cursor:default}
}
/* ═══ 📱 หน้าตาใหม่ขั้น ① · เมนูล่าง 5 ปุ่ม (จอเล็ก/จอสัมผัส) · เจ้าของยืนยัน 27 ก.ย. 2569
 * ⛔ ปุ่มลัดเท่านั้น · เมนูใหญ่ตัวเดิมยังอยู่ (ปุ่ม "เพิ่มเติม" เปิด #navpop ตัวเดิม)
 * ⛔ ของที่ลอยมุมล่างต้องยกขึ้นพ้นแถบ ไม่งั้นโดนบัง · ตารางโหมดเต็มจอ (z 60) ต้องทับแถบได้ */
/* ═══ 🧭 หน้าตาใหม่ขั้น ② · หน้ากรอกประจำวัน (เจ้าของยืนยัน 27 ก.ย. 2569) · ตัวเลขหลัก 4 ช่อง + ต้องทำวันนี้ */
.daystats > .stat.kpi{border-width:1.5px;padding:12px 14px}
.daystats > .stat.kpi > b{font-size:24px;font-variant-numeric:tabular-nums}
.daystats > .stat.kpi.good > b{color:#1e7a4f}
.daystats > .stat.kpi.send{background:#fff8ec;border-color:#f1d7a8}
.daystats > .stat.kpi.send > span:first-child,.daystats > .stat.kpi.send > b{color:#8a5a00}
.daytodo{padding:12px 16px}
.daytodo .tdhead{display:block;font-size:15px;margin:0 0 8px}
.daytodo .tdlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.daytodo .tdlist > li{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:8px 0;border-top:1px solid var(--line)}
.daytodo .tdlist > li:first-child{border-top:0;padding-top:0}
.daytodo .tdnote{color:#8a5a00;font-style:normal;font-size:12px}
.daytodo .tdok{margin:0;color:var(--ok);font-weight:600}
@media(min-width:1100px){.daystats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:760px){.daystats > .stat.kpi{grid-column:span 2;padding:8px 10px}.daystats > .stat.kpi > span{font-size:11px}.daystats > .stat.kpi > b{font-size:19px}}
/* ═══ 🧭 หน้าตาใหม่ขั้น ③ · กระเป๋าเงินบนมือถือ (เจ้าของยืนยัน 27 ก.ย. 2569) · การ์ด 2 ใบต่อแถว · ใบสำคัญเต็มแถว */
@media(max-width:760px){
  .wgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .wgrid > .wcard{padding:10px 11px;min-width:0}
  .wgrid > .wcard .wcn{font-size:19px}
  .wgrid > .wcard .wct{font-size:12px;line-height:1.35}
  .wgrid > .wcard.lend,.wgrid > .wcard.credit{grid-column:1/-1}
  .wsum.wsumbig{margin:6px 0 8px}
}
/* ═══ 🧭 หน้าตาใหม่ขั้น ④ · รายการทั้งหมด ตัวเลขใหญ่ 4 ช่อง (เจ้าของยืนยัน 27 ก.ย. 2569)
 * ⛔ เรียงด้วย order เท่านั้น ลำดับในโค้ดเดิมไม่เปลี่ยน · ช่องรองลงแถวล่างตัวเล็ก */
.pockets.fundtop{grid-template-columns:repeat(4,minmax(0,1fr))}
.pockets.fundtop > .pocket:not(.minor) > b{font-size:24px}
.pockets.fundtop > .pocket.total.grand{order:3}
.pockets.fundtop > .pocket.minor{order:5;grid-column:span 2;background:#f8fafc;border-color:#e3e8ef}
.pockets.fundtop > .pocket.minor > b{font-size:15px}
.pockets.fundtop .pocket span b{font-size:inherit}
@media(max-width:900px){.pockets.fundtop{grid-template-columns:repeat(2,minmax(0,1fr))}.pockets.fundtop > .pocket:not(.minor) > b{font-size:20px}}
@media(max-width:480px){.pockets.fundtop > .pocket.minor{grid-column:1/-1}}
/* ═══ 🧭 หน้าตาใหม่ขั้น ⑤ · ฟอร์มฝาก/ถอนเป็นแผงข้าง (เจ้าของยืนยัน 27 ก.ย. 2569) · มือถือเลื่อนขึ้นจากล่าง */
.fdbtns{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
details.fdrawer > summary.fdbtn{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:10px 16px;
  border-radius:10px;background:#0a7d47;color:#fff;font-weight:700;font-size:15px;user-select:none;min-height:44px;box-sizing:border-box}
details.fdrawer > summary.fdbtn.out{background:#fff;color:#8a5a00;border:1.5px solid #e0b24f}
details.fdrawer > summary.fdbtn::-webkit-details-marker{display:none}
details.fdrawer > .fdmask{display:none}
details.fdrawer[open] > .fdmask{display:block;position:fixed;inset:0;z-index:69;background:rgba(12,22,34,.42)}
details.fdrawer[open] > form{position:fixed;top:0;right:0;bottom:0;width:min(560px,100vw);z-index:70;margin:0;overflow-y:auto;
  box-sizing:border-box;padding:18px 20px 24px;border-radius:0;box-shadow:-8px 0 24px rgba(15,23,42,.18)}
details.fdrawer > form .fdclose{float:right;margin:0 0 8px 8px;background:#fff;color:#334155;border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;font-weight:700;cursor:pointer;min-height:36px}
details.fdrawer:not([open]) > form .fdclose{display:none}
@media(max-width:760px){
  details.fdrawer[open] > form{top:auto;left:0;width:auto;max-height:88vh;border-radius:16px 16px 0 0;
    padding-bottom:calc(24px + env(safe-area-inset-bottom));box-shadow:0 -8px 24px rgba(15,23,42,.18)}
}
/* ✅ ปุ่มบันทึกที่กดแล้วสำเร็จ เป็นสีเขียว (เจ้าของสั่ง 30 ก.ย. 2569 "ทุกมุมที่กดบันทึกแล้ว จะต้องเปลี่ยนเป็นสีเขียว") · แก้ค่าในฟอร์มแล้วกลับสีเดิม */
button.savedok,input.savedok{background:var(--ok)!important;color:#fff!important;border-color:var(--ok)!important}
.mobbar{display:none}
@media (max-width:1023px),(pointer:coarse){
  .mobbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:58;
    background:#fff;border-top:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom);box-shadow:0 -2px 8px rgba(15,23,42,.06);
    transition:transform .22s ease}
  /* 🙈 เลื่อนลง = แถบหดลงไปใต้จอ ไม่บังปุ่ม · เลื่อนขึ้น = กลับมา (เจ้าของวงภาพ 29 ก.ย. 2569 · เลือก "ซ่อนแถบตอนเลื่อนลง") */
  .mobbar.mbhide{transform:translateY(calc(100% + 4px))}
  .mobbar > a,.mobbar > label{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;
    font-size:11px;font-weight:600;color:#64748b;text-decoration:none;cursor:pointer;position:relative;user-select:none}
  .mobbar svg{width:22px;height:22px}
  .mobbar > .mbnow{color:var(--brand)}
  .mobbar .navbadge{position:absolute;top:4px;left:calc(50% + 6px);margin:0}
  body[data-signed-in]{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .mobilequick a[href="/approvals"],header.topnav .navlinks > a[href="/approvals"]{display:none}
  .flashwrap,.gpop{bottom:76px}
  .remittoast{bottom:74px}
  .sb-ai-launch{bottom:72px!important}
}
/* ═══ 📏 แถวลูกค้าในตารางกรอกประจำวันเตี้ยลง 30% (เจ้าของสั่ง 26 ก.ย. 2569)
 *   "ปรับช่องตารางเวอร์ชันมือถือให้ความสูงลดลงอีก 30% และถ้าเวอร์ชันคอมทำได้ก็ลดด้วย 30%"
 *   วัดก่อนแก้: มือถือ 34 จุด · คอม 31 จุด → เป้า 24 / 22
 * ⛔ ลดแค่ระยะขอบในช่องกับระยะบรรทัด · ขนาดตัวหนังสือ ความกว้างคอลัมน์ สีป้าย "เก็บ" ไม่แตะ
 * ⛔ ระยะขอบล่าง 16 จุดของช่องเก็บบนคอม เผื่อป้ายสถานะแบบเก่า (ป้ายย้ายไปช่องนับแล้วตั้งแต่ 17 ก.ย.) จึงเอาออก
 * ⛔ ช่องที่กำลังพิมพ์ (td.editing) ไม่แตะ · ขยายเองชั่วคราวเหมือนเดิม
 * ⛔ อยู่ท้ายไฟล์ตั้งใจ · ตัวเลือกเท่ากับกฎเดิมแล้วตัวล่างชนะ */
.bkwrap[data-day-sheet] table.bktable tr.grow > td:not(.editing){padding-top:1px;padding-bottom:1px;line-height:1.1}
.bkwrap[data-day-sheet] table.bktable tr.grow td .bnm{line-height:1.1}
.bkwrap[data-day-sheet] table.bktable tr.grow td .bcd{line-height:1.05}
.bkwrap[data-day-sheet] table.bktable tr.grow td .bint{line-height:1.1}
.bkwrap[data-day-sheet] table.bktable tr.grow td .bval{line-height:1.15}
.bkwrap[data-day-sheet] table.bktable tr.grow td.bn.k:not(.editing){padding-top:1px;padding-bottom:1px}
/* 💰 คืนต้นวันนี้ · เงินอยู่บัญชีใคร (เจ้าของสั่ง 26 ก.ย. 2569) */
ul.rtlist{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
ul.rtlist > li.rtkey{border:1px solid var(--line);border-left:4px solid var(--ok);border-radius:10px;padding:6px 10px;background:#fff}
ul.rtlist > li.rtkey.rtann{border-left-color:#d96a94;background:#fff7fb}
ul.rtlist .rthead{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
ul.rtlist ul.fdlist{margin:4px 0 0}
ul.rtlist li.rtway{color:#35506e}
li.rtbad{color:var(--bad);font-weight:700}
/* 🟩/🟦 ป้าย "เก็บ" · รายสัปดาห์เขียว · รายวันฟ้าทึบ (เจ้าของสั่ง 26 ก.ย. 2569 แทนกติกา 25 ก.ย. "เขียวทุกแบบ")
 * ⛔ ตัดสินจากแถวลูกค้า (tr.rwk / tr.rday) ไม่ใช่จากคลาสของป้าย · ทุกทางที่วาดป้ายได้สีเดียวกันเสมอ
 * ⛔ ฟ้าทึบตัวหนังสือขาว · ต่างจากเลขนับวันที่เป็นฟ้าอ่อน (#e7f0ff) · กำหนดสีตัวหนังสือเองทุกครั้ง (กับดัก 8 ก.ย.) */
table.bktable tr.rday i.bkmk.due,table.bktable tr.rday i.bkmk.due.auto{background:#1a5fa8;border-color:#124a86;color:#fff}
table.bktable tr.rday i.bkmk.due:hover,table.bktable tr.rday i.bkmk.due.auto:hover{background:#124a86;border-color:#0d3766;color:#fff}
table.bktable tr.rwk i.bkmk.due,table.bktable tr.rwk i.bkmk.due.auto{background:var(--ok);border-color:#0a6b3d;color:#fff}
/* 📱 ตารางโอนรายวัน · มือถือซ่อนปุ่ม "เปิดเพื่อแก้" เหลือปุ่มโอนปุ่มเดียว (เจ้าของสั่ง 26 ก.ย. 2569) · กดเลขวันที่แทน */
table.monthtable a.daygo{color:inherit;text-decoration:underline dotted;text-underline-offset:2px}
@media(max-width:640px){td.daybtns a.seebtn.editgo{display:none}}
/* 🔒 ล็อกช่องกรอกเมื่อโอน/จัดสรรแล้ว (26 ก.ย. 2569) · ปุ่มหัววัน + ป้ายเหนือตาราง */
button.dayask.lock{background:#fdecea;border-color:#f3b8b1;color:#b3261e}
button.dayask.no{background:#fff;border-color:#f3b8b1;color:#b3261e}
/* 🕓 ยืนยันแล้วยังแก้เองได้ (ช่วง 4 ชม.) · 27 ก.ย. 2569 */
button.dayask.grace{background:#fff7e6;border-color:#f0d49a;color:#8a5a00;cursor:default}
p.bklocknote{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px;font-size:11px}
p.bklocknote .pill{display:inline-flex;align-items:center;gap:6px}
p.bklocknote button.dayask{min-height:0;padding:2px 8px;font-size:10.5px}