:root{
  /* ---- สีจากตราสัญลักษณ์ร้าน ---- */
  --logo:#1E6B34;           /* เขียวเข้มของตรา — ใช้กับหัวเรื่องและตัวตรา */
  --logo-cream:#F1EFDC;     /* ครีมพื้นในของตรา */

  /* ---- โทนสีหลัก: เขียวพาสเทล (แตกจากเขียวของตรา) ---- */
  --brand:#5E9A73;          /* เขียวเสจ — สีหลักของระบบ */
  --brand-dark:#3F7B55;     /* เขียวเข้ม — ตอนเอาเมาส์ชี้ */
  --brand-soft:#E7F1EA;     /* เขียวจาง — พื้นหลังอ่อน */
  /* ---- โทนสีรอง: น้ำตาลอ่อนพาสเทล ---- */
  --clay:#B79E84;           /* น้ำตาลอ่อน — เส้นเน้น หัวข้อรอง */
  --clay-soft:#F5EFE5;      /* ครีม — พื้นหลังส่วนเน้น */

  /* ---- สีเสริมสำหรับการ์ดตัวเลข ให้หน้าดูมีชีวิตชีวา ---- */
  --c1:#5E9A73; --c1s:#E7F1EA;   /* เขียว  — เรื่องที่ปกติดี */
  --c2:#C8944A; --c2s:#FAF0DE;   /* เหลืองอำพัน — ต้องดู */
  --c3:#B36258; --c3s:#FBEDEA;   /* อิฐ    — ต้องแก้ */
  --c4:#5B87A6; --c4s:#E9F1F6;   /* ฟ้าหม่น — ข้อมูลทั่วไป */
  --c5:#8B7BA8; --c5s:#F0EDF6;   /* ม่วงหม่น — รออนุมัติ */
  --c6:#A88B6A; --c6s:#F5EFE6;   /* น้ำตาล — วันหยุด */

  --bg:#F7F6F0;             /* พื้นหลังหน้า — ครีมนวล */
  --card:#FFFFFF;
  --line:#E6E3D8;
  --text:#2A302B;
  --dim:#78807A;
  --soft:#F2F1EA;

  --ok:#4A8560; --warn:#A8834A; --bad:#B36258;
  --shadow:0 1px 2px rgba(60,58,44,.05), 0 6px 20px rgba(60,58,44,.06);
  /* ความกว้างแถบเมนูซ้าย
     🔴 ขยายจาก 248 เป็น 264 (
        "รายงานและยอดเงินเดือน ซ้อนเป็น 2 บรรทัด เอาเป็นบรรทัดเดียว")
     วัดจริงที่ 1280px: ข้อความยาว 164px แต่ช่องมีให้ 155px = เกิน 9px จึงตกบรรทัด
     เลือกขยายแถบแทนการตัดคำในเมนู เพราะชื่อเมนูคือสิ่งที่เจ้าของอ่านทุกวัน
     ⚠️ ช่องใส่ข้อความจริง = ความกว้างนี้ − 16 (padding ของ nav)
        − 24 (padding ปุ่ม) − 18 (ไอคอน) − 11 (ช่องว่าง) = 195px
        เพิ่มเมนูใหม่ที่ชื่อยาวกว่านี้เมื่อไหร่ จะตกบรรทัดอีก ให้ขยายตรงนี้ */
  --sidebar:264px;
  color-scheme: light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --logo:#7FC895; --logo-cream:#2A2A1E;
    --brand:#7FBE97; --brand-dark:#98D0AC; --brand-soft:#1C2A21;
    --clay:#C0A98F; --clay-soft:#2A251E;
    --c1:#7FBE97; --c1s:#1C2A21;  --c2:#D9AE66; --c2s:#2C2517;
    --c3:#D08A80; --c3s:#2E1F1D;  --c4:#82AECB; --c4s:#1B242A;
    --c5:#AC9CC9; --c5s:#232030;  --c6:#C4A583; --c6s:#2A241C;
    --bg:#141712; --card:#1C201B; --line:#2E332C; --text:#E7EAE4; --dim:#98A096; --soft:#232821;
    --ok:#7FBE97; --warn:#C7A268; --bad:#CE8279;
    --shadow:0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.28);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
/* 🔴 กันหน้าจอ "ไหลเลยขอบแล้วเด้งกลับ" ตอนปัดนิ้วซ้าย-ขวา (เจ้าของแจ้ง 27 ก.ค. 2569
   "ในมือถือ แถบด้านบน เวลาเลื่อนไปทางขวาแล้วไอคอนโยกไปมา ไม่นิ่ง")

   อาการจริงบนมือถือ: ปัดนิ้วในตารางกว้าง พอตารางเลื่อนจนสุดขอบ
   นิ้วยังปัดต่อ → เบราว์เซอร์ส่งแรงนั้นต่อไปให้ "ทั้งหน้า"
   ทั้งหน้าเลยไหลไปทางขวาแล้วเด้งกลับ (rubber-band)
   แถบบนที่ตรึงไว้ก็ไหลตามไปด้วย = เห็นเป็นไอคอนโยกไปมา
   ⚠️ อาการนี้ **ดูบนคอมไม่เห็น** เพราะเมาส์ไม่มีแรงเฉื่อยแบบนิ้ว

   overscroll-behavior-x:none = ปัดเลยขอบแล้วไม่ต้องไหล ไม่ต้องเด้ง
   (ไม่กระทบการเลื่อนปกติ ตารางยังเลื่อนดูซ้าย-ขวาได้เหมือนเดิม) */
html,body{overscroll-behavior-x:none}
body{margin:0;font-family:"Sarabun","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;font-size:15px}
button,input,select,textarea{font-family:inherit;font-size:.95rem}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}

/* ============ หน้าเข้าสู่ระบบ ============ */
#login{display:flex;min-height:100vh;align-items:center;justify-content:center;padding:20px;
  background:
    radial-gradient(circle at 12% 18%, var(--brand-soft) 0%, transparent 42%),
    radial-gradient(circle at 88% 82%, var(--clay-soft) 0%, transparent 45%),
    linear-gradient(155deg,#FBFAF4 0%,var(--bg) 55%,#F2EEE4 100%)}
@media (prefers-color-scheme:dark){
  #login{background:
    radial-gradient(circle at 12% 18%, var(--brand-soft) 0%, transparent 42%),
    radial-gradient(circle at 88% 82%, var(--clay-soft) 0%, transparent 45%),
    linear-gradient(155deg,#181C17 0%,var(--bg) 55%,#1A1A14 100%)}
}
#login .box{background:var(--card);border:1px solid var(--line);border-radius:20px;
  padding:34px 32px 30px;width:100%;max-width:400px;text-align:center;
  box-shadow:0 2px 4px rgba(60,58,44,.04), 0 18px 50px rgba(60,58,44,.10)}
#login .box label,#login .box input{text-align:left}
#login .mark{display:flex;justify-content:center;margin-bottom:10px}
#login h1{margin:0;font-size:1.5rem;color:var(--logo)}
#login .tagline{margin:3px 0 24px;color:var(--dim);font-size:.88rem}
#login .foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--dim);font-size:.77rem;line-height:1.6}
/* ช่องรหัสผ่าน + ปุ่มแสดง/ซ่อน */
.pwwrap{position:relative;display:flex;align-items:center}
.pwwrap input{padding-right:62px}
.pwwrap button{position:absolute;right:6px;background:none;border:none;cursor:pointer;
  color:var(--brand-dark);font-weight:700;font-size:.82rem;padding:8px 10px;border-radius:6px}
.pwwrap button:hover{background:var(--brand-soft)}

/* ============ โครงหน้าหลัก: แถบข้าง + เนื้อหา ============ */
#app{display:none;min-height:100vh}
#app.on{display:flex}

aside{width:var(--sidebar);flex-shrink:0;background:var(--card);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
aside .brand{padding:16px 18px 15px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(135deg,var(--brand-soft) 0%,transparent 75%)}
aside .brand .mark{flex-shrink:0;display:flex}
/* ไฟล์โลโก้เป็น .jpg พื้นขาว — ใส่พื้นขาวมนให้ดูตั้งใจ ไม่ใช่สี่เหลี่ยมโผล่บนพื้นเข้ม */
.mark img{border-radius:9px;background:#fff}
#login .mark img{border-radius:16px}
aside .brand b{font-size:1.05rem;display:block;line-height:1.25;color:var(--logo)}
aside .brand span{font-size:.71rem;color:var(--dim);display:block}

aside nav{padding:12px 12px 20px;overflow-y:auto;flex:1}
aside nav .grouplabel{font-size:.68rem;font-weight:700;color:var(--dim);letter-spacing:.06em;
  padding:14px 12px 6px;text-transform:uppercase}
aside nav button{width:100%;display:flex;align-items:center;gap:11px;background:none;border:none;
  padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--dim);font-weight:600;
  font-size:.92rem;text-align:left;margin-bottom:2px}
aside nav button svg{width:18px;height:18px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.7}
aside nav button:hover{background:var(--soft);color:var(--text)}
aside nav button.on{background:var(--brand-soft);color:var(--brand-dark)}
@media (prefers-color-scheme:dark){ aside nav button.on{color:var(--brand)} }

aside .foot{padding:14px 16px;border-top:1px solid var(--line);font-size:.8rem;color:var(--dim)}
aside .foot b{display:block;color:var(--text);font-size:.88rem}
aside .foot button{margin-top:9px;width:100%;background:none;border:1px solid var(--line);
  padding:7px;border-radius:8px;cursor:pointer;color:var(--dim);font-weight:600;font-size:.85rem}
aside .foot button:hover{border-color:var(--bad);color:var(--bad)}

#wrap{flex:1;min-width:0;display:flex;flex-direction:column}
#topbar{background:var(--card);border-bottom:1px solid var(--line);padding:13px 26px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 var(--line), 0 4px 14px rgba(60,58,44,.03)}
#topbar h2{margin:0;font-size:1.12rem;color:var(--logo)}
#topbar .crumb{color:var(--dim);font-size:.8rem;font-weight:600;letter-spacing:.02em}
#topbar .spacer{margin-left:auto}
/* ปุ่มลัดบนแถบบน — กดไปหน้าที่ใช้บ่อยได้ทันทีจากทุกหน้า */
#topbar .quick{display:flex;gap:7px}
#topbar .quick button{background:var(--soft);border:1px solid var(--line);border-radius:8px;
  padding:7px 13px;cursor:pointer;color:var(--text);font-weight:600;font-size:.85rem;white-space:nowrap}
#topbar .quick button:hover{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dark)}
#topbar .quick button{position:relative}
.qkdot{display:none;align-items:center;justify-content:center;min-width:18px;height:18px;
  padding:0 5px;margin-left:5px;border-radius:99px;background:var(--bad);color:#fff;
  font-size:.68rem;font-weight:800;line-height:1}
@media (prefers-color-scheme:dark){ .qkdot{color:#14201A} }
@media (max-width:760px){ #topbar .quick button span{display:none} }

/* ============ กำลังคนวันนี้ (แบบกระชับ) ============ */
.sgroup{margin-top:12px}
.sgroup .sh{font-size:.78rem;font-weight:700;color:var(--dim);letter-spacing:.02em;
  border-bottom:1px solid var(--line);padding-bottom:4px;margin-bottom:6px}
.sline{display:grid;grid-template-columns:minmax(150px,1.1fr) minmax(130px,1fr) 2fr;
  gap:4px 14px;padding:6px 10px;border-radius:8px;font-size:.83rem;line-height:1.45;
  border-left:3px solid var(--line);margin-bottom:4px;background:var(--soft)}
.sline.bad{border-left-color:var(--bad);background:var(--c3s)}
.sline.warn{border-left-color:var(--warn);background:var(--c2s)}
/* 🔴 (แก้รีวิวรอบ 1 ของ SDD Task 5) ขั้น "done" ในโหมดเตรียมเปิดใช้จริง เคยไม่มีสีของตัวเอง
   ใช้พื้นฐาน .sline เฉย ๆ (สีเดียวกับแถวเงียบ ๆ) — แยกจาก bad/warn ด้วยไอคอน ✅ อย่างเดียว
   เติมเขียวให้ตรงกับโทน "ผ่าน/ปกติดี" ที่ใช้ทั้งระบบ (var(--c1)/var(--c1s)) */
.sline.ok{border-left-color:var(--c1);background:var(--c1s)}
.sline .s1 span{color:var(--dim);font-size:.76rem;display:block}
.sline .s2{color:var(--text)}
.sline .s2 b{color:var(--bad)}
.sline .s2 span{color:var(--dim);font-weight:400}
.sline .s3{color:var(--dim);font-size:.79rem}
.sline i{font-style:normal;color:var(--warn)}
.telbtn{display:inline-block;background:var(--brand);color:#fff;border-radius:6px;
  padding:1px 9px;font-weight:700;text-decoration:none;font-size:.78rem}
.telbtn:hover{background:var(--brand-dark)}
@media (prefers-color-scheme:dark){ .telbtn{color:#121a15} }
@media (max-width:760px){ .sline{grid-template-columns:1fr} }

.depchips{display:flex;flex-wrap:wrap;gap:7px}
.depchip{background:var(--soft);border:1px solid var(--line);border-radius:99px;
  padding:3px 12px;font-size:.82rem;font-variant-numeric:tabular-nums}
.depchip.bad{background:var(--c3s);border-color:var(--c3)}
.depchip i{font-style:normal;color:var(--bad);font-weight:700;margin-left:4px}

/* กำหนดกะของแต่ละวันในสัปดาห์ */
.dowgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:8px}
.dowrow{display:flex;align-items:center;gap:9px;background:var(--soft);
  border:1px solid var(--line);border-radius:9px;padding:7px 11px}
.dowrow.wk{background:var(--clay-soft);border-color:var(--clay)}
.dowrow .dn{font-weight:700;font-size:.85rem;min-width:62px;flex-shrink:0}
.dowrow select{flex:1;min-width:0;padding:7px 9px;font-size:.85rem}

/* ============ หน้าของพนักงาน ============ */
/* การ์ดต้อนรับ + สถานะวันนี้ */
.mehero{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;
  background:linear-gradient(135deg,var(--brand-soft) 0%,var(--card) 55%,var(--clay-soft) 100%);
  border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin-bottom:18px;
  box-shadow:var(--shadow)}
.mehello{font-size:.85rem;color:var(--dim);font-weight:600}
.mename{font-size:1.5rem;font-weight:800;color:var(--logo);line-height:1.25}
.memeta{font-size:.88rem;color:var(--dim);margin-top:2px}
.metag{display:inline-block;margin-top:8px;background:var(--card);border:1px solid var(--line);
  border-radius:99px;padding:3px 13px;font-size:.78rem;font-weight:600;color:var(--clay)}
.metoday{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:12px;padding:14px 20px;text-align:right;min-width:210px}
.metoday.off{border-left-color:var(--clay)}
.metoday .mel{font-size:.78rem;color:var(--dim);font-weight:600}
.metoday .mebig{font-size:1.9rem;font-weight:800;color:var(--brand-dark);line-height:1.2;
  font-variant-numeric:tabular-nums}
.metoday.off .mebig{color:var(--clay)}
.metoday .mesub{font-size:.8rem;color:var(--dim);margin-top:3px}
@media (prefers-color-scheme:dark){ .metoday .mebig{color:var(--brand)} }
@media (max-width:700px){
  .mehero{grid-template-columns:1fr;padding:18px}
  .metoday{text-align:left;min-width:0}
}

/* วงแหวนสิทธิการลา */
.rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px}
.ring{text-align:center}
.ring .rc{width:112px;height:112px;margin:0 auto;border-radius:50%;display:flex;
  align-items:center;justify-content:center;
  background:conic-gradient(var(--rc) calc(var(--pct)*1%), var(--soft) 0)}
.ring.c1{--rc:var(--c1)} .ring.c2{--rc:var(--c2)}
.ring.c3{--rc:var(--c3)} .ring.c4{--rc:var(--c4)}
.ring .rin{width:84px;height:84px;border-radius:50%;background:var(--card);
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.ring .rin b{font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums}
.ring.c1 .rin b{color:var(--c1)} .ring.c2 .rin b{color:var(--c2)}
.ring.c3 .rin b{color:var(--c3)} .ring.c4 .rin b{color:var(--c4)}
.ring .rin span{font-size:.68rem;color:var(--dim)}
.ring .rname{font-weight:700;font-size:.88rem;margin-top:9px}
.ring .rsub{font-size:.76rem;color:var(--dim)}
.ring .rwarn{font-size:.72rem;color:var(--warn);margin-top:3px}

/* แถบตารางงาน 7 วัน */
.weekstrip{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.wday{border:1px solid var(--line);border-radius:10px;padding:9px 4px;text-align:center;
  background:var(--card)}
.wday .wd{font-size:.72rem;color:var(--dim);font-weight:700}
.wday .wn{font-size:1.05rem;font-weight:800;line-height:1.3}
.wday .wt{font-size:.76rem;color:var(--dim);margin-top:2px}
.wday.work{background:var(--brand-soft);border-color:var(--brand)}
.wday.work .wt{color:var(--brand-dark);font-weight:700}
.wday.off{background:var(--clay-soft)}
/* วันเทรนในแถบ 7 วัน — ใช้สีชุดเดียวกับวันเทรนในปฏิทิน (.mcday.train)
   ไม่งั้น 2 ที่บนหน้าจอเดียวกันใช้สีคนละแบบสำหรับเรื่องเดียวกัน */
.wday.train{background:var(--c2s);border-color:var(--c2)}
.wday.train .wt{color:var(--c2);font-weight:700}
.wday.now{outline:2px solid var(--logo);outline-offset:1px}
@media (prefers-color-scheme:dark){ .wday.work .wt{color:var(--brand)} }

/* ปฏิทินของฉัน */
.mcgrid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.mcgrid-head div{text-align:center;font-size:.75rem;font-weight:700;color:var(--dim)}
.mcgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.mcday{border:1px solid var(--line);border-radius:9px;min-height:62px;padding:6px 4px;
  text-align:center;background:var(--card)}
.mcday.blank{border:none;background:none}
.mcday .mcn{font-weight:700;font-size:.9rem}
.mcday .mcl{font-size:.68rem;color:var(--dim);margin-top:2px;line-height:1.25}
.mcday.work{background:var(--brand-soft);border-color:var(--brand)}
.mcday.work .mcl{color:var(--brand-dark);font-weight:700}
.mcday.off{background:var(--clay-soft)}
.mcday.hol{background:#FBEEEB;border-color:var(--bad)}
.mcday.leave{background:var(--c4s);border-color:var(--c4)}
.mcday.leave .mcl{color:var(--c4);font-weight:700}
/* วันเทรน (เจ้าของสั่ง 29 ก.ค. 2569) — ต้องแยกสีจากวันทำงานปกติให้เห็นชัด
   เพราะเป็นวันที่ "ต้องมาถึงเร็วกว่าปกติ" ถ้าดูเหมือนวันธรรมดาก็ไม่มีประโยชน์ */
.mcday.train{background:var(--c2s);border-color:var(--c2)}
.mcday.train .mcl{color:var(--c2);font-weight:700}
.mcday.now{outline:2px solid var(--logo);outline-offset:1px}
@media (prefers-color-scheme:dark){
  .mcday.hol{background:#2E211F}
  .mcday.work .mcl{color:var(--brand)}
}
@media (max-width:520px){
  .mcday{min-height:52px;padding:4px 2px}
  .mcday .mcl{font-size:.6rem}
}
.sw.lv{background:var(--c4s);border-color:var(--c4)}

/* ============================================================
   ผังองค์กรแบบแผนภูมิต้นไม้ (ทำเป็น chart ลงมา)

   วิธีวาดเส้นเชื่อม — ใช้ ::before / ::after เป็นเส้นตรง ไม่ใช้รูปภาพ
     · แต่ละกล่องลูก มีเส้นตั้งขึ้นไปหาแถวบน
     · แถวลูกทั้งแถว มีเส้นนอนพาดเชื่อมพี่น้องเข้าด้วยกัน
     · ลูกคนแรก/คนสุดท้าย ตัดเส้นนอนครึ่งหนึ่ง ไม่ให้ยื่นเลยออกไป
   ============================================================ */
.orgchart{overflow-x:auto;padding:4px 2px 10px;text-align:center}
.orglevel{display:flex;justify-content:center}

/* กล่อง 1 ตำแหน่ง */
.orgnode{display:inline-block;min-width:150px;max-width:230px;
  border:1px solid var(--line);border-radius:11px;background:var(--card);
  padding:9px 13px;text-align:center;position:relative;vertical-align:top}
.orgnode.root{background:var(--logo);color:#fff;border-color:var(--logo);min-width:190px}
.orgnode.gap{border:2px dashed var(--bad);background:var(--c3s)}
.orgnode .ot{font-weight:700;font-size:.88rem;line-height:1.35}
.orgnode .os{font-size:.75rem;color:var(--dim);margin-top:2px}
.orgnode.root .os{color:rgba(255,255,255,.85)}
.orgnode .opl{margin-top:7px;border-top:1px solid var(--line);padding-top:6px}
.orgnode .op{font-size:.8rem;display:flex;justify-content:center;gap:6px;
  align-items:baseline;padding:1px 0}
.orgnode .op span{color:var(--dim);font-size:.72rem}
.orgnode .op.none{color:var(--bad);font-weight:600;font-size:.78rem}
/* รูปพนักงานในผังองค์กร (เจ้าของสั่ง 26 ก.ค. 2569) — รูปซ้าย ชื่อ+รหัสขวา */
.orgnode .op{align-items:center;justify-content:flex-start;text-align:left;padding:3px 0}
.orgnode .op .opn{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.orgnode .op .opn span{font-size:.68rem}
.orgnode .op.none{justify-content:center;text-align:center}

/* แถวลูก — เรียงข้างกัน พร้อมเส้นเชื่อม */
.orgkids{display:flex;justify-content:center;align-items:flex-start;
  padding-top:22px;position:relative;gap:0}
/* เส้นตั้งจากพ่อลงมาหาเส้นนอน */
.orgkids.top::before{content:'';position:absolute;top:0;left:50%;
  width:2px;height:22px;background:var(--line)}
.orgbranchbox{position:relative;padding:0 9px;display:flex;
  flex-direction:column;align-items:center}
/* เส้นตั้งจากเส้นนอนลงมาหากล่องลูก */
.orgbranchbox::before{content:'';position:absolute;top:-22px;left:50%;
  width:2px;height:22px;background:var(--line)}
/* เส้นนอนพาดเชื่อมพี่น้อง */
.orgbranchbox::after{content:'';position:absolute;top:-22px;left:0;right:0;
  height:2px;background:var(--line)}
/* ลูกคนแรกและคนสุดท้าย ตัดเส้นนอนครึ่งเดียว */
.orgbranchbox:first-child::after{left:50%}
.orgbranchbox:last-child::after{right:50%}
/* ลูกคนเดียว ไม่ต้องมีเส้นนอนเลย */
.orgbranchbox:only-child::after{display:none}
/* ชั้นบนสุดต่อจากกล่องร้าน จึงไม่ต้องมีเส้นนอน */
.orgkids.top>.orgbranchbox:only-child::before{top:-22px}

@media (max-width:820px){
  /* จอแคบ: เรียงลงมาเป็นชั้น ๆ แทนการกางออกข้าง ไม่งั้นต้องเลื่อนซ้ายขวาตลอด */
  .orgkids{flex-direction:column;align-items:center;gap:20px}
  .orgbranchbox::after{display:none}
  .orgnode{min-width:200px}
}
@media print{
  .orgchart{overflow:visible}
  .orgnode.gap{border:2px solid #999;background:#f4f4f4}
  .orgnode.root{background:#eee;color:#000;border-color:#999}
  .orgnode.root .os{color:#555}
}

/* ---------- ผังองค์กรแบบเดิม (ยังใช้ในบางที่) ---------- */
.orgroot{text-align:center;margin-bottom:6px}
.orgtop{display:inline-block;background:var(--logo);color:#fff;padding:11px 26px;
  border-radius:11px;font-weight:700;position:relative}
.orgtop span{display:block;font-size:.76rem;font-weight:500;opacity:.85}
.orgbranch{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;margin-top:9px}
/* เส้นโยงลงมาจากหัวผัง */
.orgroot::after{content:'';display:block;width:2px;height:18px;background:var(--line);margin:6px auto 0}

.orgdep{border:1px solid var(--line);border-radius:12px;margin-bottom:14px;overflow:hidden}
.orghead{background:var(--brand-soft);color:var(--brand-dark);font-weight:700;
  padding:10px 16px;display:flex;justify-content:space-between;align-items:center}
.orghead span{font-weight:500;font-size:.82rem;color:var(--dim)}
@media (prefers-color-scheme:dark){ .orghead{color:var(--brand)} }
.orgpos{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;padding:14px 16px}
.orgcard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.orgcard.gap{border:2px dashed var(--bad);background:var(--c3s)}
.orgtitle{font-weight:700;font-size:.88rem;color:var(--clay);
  border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:7px}
.orgemp{font-size:.85rem;padding:3px 0;display:flex;justify-content:space-between;gap:8px}
.orgemp span{color:var(--dim);font-size:.78rem}
.orgnone{font-size:.82rem;color:var(--bad);font-weight:600;text-align:center;padding:6px 0}
@media print{
  .orgpos{grid-template-columns:repeat(4,1fr)}
  .orgcard.gap{border:2px solid #999;background:#f4f4f4}
}

/* ---------- แถวเวลาเข้างาน (สร้างกะหลายเวลาพร้อมกัน) ---------- */
.timerow{display:flex;align-items:center;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.timerow input[type=time]{width:auto;min-width:118px}
.timerow span{color:var(--dim);font-size:.85rem}
.timerow .hint{margin:0;color:var(--clay);font-weight:600}

/* ---------- กระดิ่งแจ้งเตือน ---------- */
.bellwrap{position:relative}
#bell,#docbtn{background:var(--soft);border:1px solid var(--line);border-radius:9px;
  padding:7px 11px;cursor:pointer;font-size:1.05rem;position:relative;line-height:1}
#bell:hover,#docbtn:hover{background:var(--brand-soft);border-color:var(--brand)}
/* ⚠️ เคยขยายกระดิ่งให้ใหญ่กว่าไอคอนอื่น (23 ก.ค. 2569)
      แล้วกลับมาเท่าเดิม — อย่าขยายอีกโดยไม่ได้สั่ง */
#bell-dot,#doc-dot{display:none;position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;
  padding:0 5px;border-radius:99px;background:var(--bad);color:#fff;font-size:.68rem;
  font-weight:800;align-items:center;justify-content:center;line-height:1}
#bellbox,#docbox{display:none;position:absolute;right:0;top:calc(100% + 9px);width:370px;max-width:88vw;
  max-height:70vh;overflow-y:auto;background:var(--card);border:1px solid var(--line);
  border-radius:13px;box-shadow:0 12px 40px rgba(60,58,44,.18);z-index:40}
#bellbox.on,#docbox.on{display:block}
#bellbox .bhead,#docbox .bhead{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 15px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
#bellbox .bitem,#docbox .bitem{display:flex;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line);
  font-size:.87rem;line-height:1.5}
#bellbox .bitem,#docbox .bitem:last-of-type{border-bottom:none}
#bellbox .bitem,#docbox .bitem[onclick]{cursor:pointer}
#bellbox .bitem,#docbox .bitem[onclick]:hover{background:var(--soft)}
#bellbox .bitem,#docbox .bitem.unread{background:var(--brand-soft)}
#bellbox .bi,#docbox .bi{font-size:1.15rem;flex-shrink:0;line-height:1.3}
#bellbox .bbody,#docbox .bbody{color:var(--dim);margin-top:2px}
#bellbox .btime,#docbox .btime{color:var(--dim);font-size:.75rem;margin-top:4px}
#bellbox .bfoot,#docbox .bfoot{padding:11px 15px;border-top:1px solid var(--line);display:flex;gap:8px;
  flex-wrap:wrap;position:sticky;bottom:0;background:var(--card)}
#burger{display:none;background:none;border:1px solid var(--line);border-radius:8px;
  padding:6px 10px;cursor:pointer;color:var(--text);font-size:1.1rem}
main{flex:1;padding:22px 26px 64px;max-width:1240px;width:100%}
section.page{display:none}
section.page.on{display:block}

/* ---------- จอเล็ก / มือถือ ---------- */
@media (max-width:900px){
  aside{position:fixed;left:0;top:0;z-index:60;transform:translateX(-100%);transition:transform .22s;
    box-shadow:0 0 40px rgba(0,0,0,.18)}
  aside.open{transform:translateX(0)}
  #burger{display:block}
  main{padding:16px 12px 70px}
  #topbar{padding:11px 13px}
  #shade{position:fixed;inset:0;background:rgba(20,24,20,.4);z-index:50;display:none}
  #shade.on{display:block}
}

/* ---- คู่มือการใช้งาน (เจ้าของสั่ง 10 ส.ค. 2569) ----
   ภาพวาดใช้ currentColor จึงอ่านออกทั้งจอสว่างและจอมืดโดยไม่ต้องเขียนกฎแยก */
.mn-books{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.mn-toc{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.mn-toc-h{font-weight:700;font-size:.9rem;margin-bottom:6px}
.mn-toc-i{display:block;padding:5px 2px;font-size:.9rem;text-decoration:none;
  color:inherit;border-bottom:1px dotted var(--line)}
.mn-toc-i:hover{color:var(--brand)}
.mn-toc-i b{color:var(--brand);display:inline-block;min-width:22px}
.mn-sec{scroll-margin-top:78px}
.mn-p{margin:8px 0;line-height:1.85}
.mn-steps{margin:8px 0 8px 20px;padding:0}
.mn-steps li{margin:6px 0;line-height:1.8}
.mn-where{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:9px 0;padding:7px 11px;border-radius:8px;
  background:color-mix(in srgb, var(--brand) 9%, transparent);font-size:.88rem}
.mn-where-t{font-weight:700;color:var(--brand)}
.mn-where .mn-go{padding:3px 10px;font-size:.8rem}
.mn-fig{margin:14px 0;text-align:center;color:var(--text)}
.mn-fig figcaption{font-size:.82rem;opacity:.72;margin-top:6px}
.mn-kv td{vertical-align:top}

@media (max-width:640px){
  body{font-size:15px}
  .card{padding:15px 14px;border-radius:12px;margin-bottom:13px}
  .card h2{font-size:1rem}
  /* 🔴 งาน C (แก้ให้ครบ) — เดิมมี .row{grid-template-columns:1fr;gap:0} และ
     .row.tight{grid-template-columns:1fr} อยู่ตรงนี้ แต่ "ไม่เคยมีผลเลยสักครั้ง"
     เพราะ .row ตัวจริง (ไม่มี @media ครอบ ท้ายไฟล์) specificity เท่ากัน (0,1,0)
     แล้วอันที่มาทีหลังในไฟล์ชนะเสมอ — ลบทิ้งแล้ว ของจริงย้ายไปท้ายไฟล์ตามกติกา
     "กฎมือถือทั้งหมดต้องอยู่ท้ายไฟล์" ดูหัวข้อท้ายไฟล์ */
  .stats{grid-template-columns:repeat(2,1fr);gap:10px}
  .stat{padding:12px 13px}
  .stat .n{font-size:1.45rem}
  /* ปุ่มใหญ่พอให้กดด้วยนิ้วไม่พลาด (ตามเกณฑ์ 44px) */
  .btn{padding:12px 18px;width:100%;justify-content:center}
  .btn.small{width:auto;padding:8px 14px}
  /* ปุ่มเงียบต้องกว้างเท่าข้อความ ไม่ยืดเต็มจอ ไม่งั้นกลายเป็นแถบใหญ่ = ตรงข้ามกับที่ตั้งใจ */
  .btn.quiet{width:auto;padding:4px 6px}
  /* ปุ่มจิ๋วในกล่องแจ้งเตือน — ห้ามยืดเต็มความกว้าง ไม่งั้นล้นกล่อง */
  .btn.tiny{width:auto;padding:6px 11px;font-size:.8rem}
  .actions{gap:8px}
  .actions .btn{flex:1 1 100%}
  .actions .btn.small{flex:0 1 auto}
  /* ปุ่มเงียบต้องไม่ยืดเต็มแถวบนมือถือ ไม่งั้นกลายเป็นแถบใหญ่ = ตรงข้ามกับที่ตั้งใจ */
  .actions .btn.quiet{flex:0 1 auto}
  input,select,textarea{padding:12px;font-size:16px}  /* 16px กัน iOS ซูมเองตอนแตะช่องกรอก */
  /* overscroll-behavior-x:contain = ปัดจนสุดขอบแล้ว "หยุดที่กล่องนี้"
     ไม่ส่งแรงต่อไปให้ทั้งหน้า → หน้าไม่ไหล แถบบนไม่โยก
     ⚠️ ทุกกล่องที่เลื่อนซ้าย-ขวาได้ ต้องมีบรรทัดนี้ทุกตัว ตกตัวใดตัวหนึ่งก็โยกที่ตัวนั้น */
  .tabs{overflow-x:auto;overflow-y:hidden;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .tabs button{flex:0 0 auto;padding:9px 13px;font-size:.88rem}
  th,td{padding:9px 8px}
  .scroll{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .picker{grid-template-columns:1fr}
  .yearcal{grid-template-columns:repeat(2,1fr);gap:9px}
  #login .box{padding:28px 22px}
  #topbar h2{font-size:1rem}
}

/* กันตารางกว้างดันหน้าจอจนเลื่อนซ้าย-ขวาทั้งหน้า
   🔴 ต้องใช้ clip ไม่ใช่ hidden (
      "ในมือถือ แถบด้านบน เวลาเลื่อนไปทางขวาแล้วไอคอนโยกไปมา ไม่นิ่ง")

   เหตุผล: ตามมาตรฐาน CSS ถ้าแกนหนึ่งไม่ใช่ visible อีกแกนจะกลายเป็น auto เอง
   overflow-x:hidden จึงทำให้ #wrap กลายเป็น "กล่องที่เลื่อนได้" โดยไม่ได้ตั้งใจ
   แล้ว position:sticky ของแถบบนจะไปยึดกับ #wrap (ซึ่งไม่เคยเลื่อน)
   แทนที่จะยึดกับหน้าจอ → เวลาเลื่อนหน้าจริง เบราว์เซอร์ต้องไล่ขยับตำแหน่งเอง
   บนมือถือที่มีแรงเฉื่อยจึงเห็นเป็นอาการ "โยกไปมา ไม่นิ่ง"

   clip กันล้นได้เหมือนกัน แต่ **ไม่สร้างกล่องเลื่อน** → sticky ทำงานถูกต้อง
   ⚠️ เขียน hidden ไว้ก่อนเป็นตัวสำรองของเบราว์เซอร์เก่าที่ยังไม่รู้จัก clip
   ⚠️ ห้ามเปลี่ยนกลับเป็น hidden เฉย ๆ — จะกลับไปโยกอีก
   ⚠️ ห้ามใช้เครื่องหมาย backtick ในคอมเมนต์ไฟล์นี้ — ไฟล์นี้เป็น template string
      ใส่แล้ว build พังทันที (เจอจริงตอนแก้รอบนี้) */
#wrap,main,section.page{max-width:100%;overflow-x:hidden;overflow-x:clip}
.scroll{max-width:100%}
/* มือถือ/แท็บเล็ต: โชว์แถบเลื่อนของตารางกว้างให้เห็นชัด จะได้รู้ว่าเลื่อนดูซ้าย-ขวาได้
   ( — ตารางฝั่งผู้บริหารกว้าง ต้องเลื่อนดูบนมือถือได้สะดวก) */
@media (max-width:900px){
  .scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--brand) transparent;padding-bottom:3px}
  .scroll::-webkit-scrollbar{height:7px}
  .scroll::-webkit-scrollbar-thumb{background:var(--brand);border-radius:4px;opacity:.6}
  .scroll::-webkit-scrollbar-track{background:var(--soft);border-radius:4px}
}

/* ============================================================
   เฉพาะมือถือ: หน้าที่ตารางกว้างมาก
   ⚠️ บนคอมทุกอย่างเหมือนเดิมเป๊ะ — กฎทั้งหมดอยู่ใน @media (max-width:640px)
   1) คำนวณเงินเดือน (~20 คอลัมน์) → คง "ตาราง" ไว้
      🔴 เคยเปลี่ยนเป็นการ์ดรายคน (.paycards/.pcard) แล้วเจ้าของสั่งเอาตารางกลับ
         → ลบการ์ดทิ้งแล้ว อย่าทำกลับมาโดยไม่ได้สั่ง
      วิธีทำให้อ่านง่ายแทน: ย่อตัวอักษร + ตรึงคอลัมน์ รหัส/ชื่อ ไว้ซ้ายมือ
      เลื่อนตารางไปทางขวาแล้วยังเห็นว่าเป็นแถวของใคร
   2) จัดตารางกะรายเดือน (31 วัน) → กฎอยู่ "ท้ายไฟล์" (ต้องอยู่หลัง .cal.month เดิม
      ไม่งั้นโดนทับ · media query ไม่ได้เพิ่ม specificity เสมอกันแล้วอันที่อยู่ทีหลังชนะ)
   ============================================================ */
/* ⚠️ กฎมือถือของตารางเงินเดือน "ย้ายไปท้ายไฟล์" แล้ว — ต้องอยู่หลัง .scroll table
   และ .paytbl th,.paytbl td (บรรทัด ~631/663) ไม่งั้นโดนทับ (บทเรียนเดิม) */

/* ============ แถบหัวข้อย่อยในแต่ละหน้า ============ */
/* 🔴 padding-bottom ต้องเท่ากับ margin-bottom ติดลบของปุ่ม (3px) พอดี
   ปุ่มถูกดึงลง -3px เพื่อให้เส้นใต้ทับเส้นของแถบ ถ้ารองไว้แค่ 2px
   เนื้อหาจะสูงเกินกล่อง 1px → แถบ "ดึงขึ้น-ลงได้ 1px" ตอนปัดนิ้วบนมือถือ
   = อาการโยก (วัดจริงเป็นทุกหน้าที่มีแท็บ)
   ⚠️ แก้ margin-bottom ของปุ่มเมื่อไหร่ ต้องแก้ padding-bottom ตรงนี้ให้เท่ากันด้วย */
.tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:3px}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;padding:9px 15px;
  cursor:pointer;color:var(--dim);font-weight:600;font-size:.92rem;margin-bottom:-3px}
.tabs button:hover{color:var(--text)}
.tabs button.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
@media (prefers-color-scheme:dark){ .tabs button.on{color:var(--brand)} }
.sub{display:none}
.sub.on{display:block}
/* ปุ่มสลับ 2 กองของแท็บใบเตือน/บทลงโทษ
   (ออกหนังสือตักเตือน · ว่ากล่าวตักเตือนด้วยวาจา — เปลี่ยนชื่อ 27 ส.ค. 2569)
   ใช้ปุ่มจริง ไม่ใช่ .tabs เพราะเป็นการเลือก "เรื่องที่จะทำ" ไม่ใช่หัวข้อย่อยของหน้า */
.pengrp{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.pengrp .btn{flex:1 1 220px}

/* ตารางบันไดโทษของทั้ง 3 ชั้น (ระเบียบลงโทษ 4 ชั้น · 27 ส.ค. 2569)
   เจ้าของสั่ง "ให้มีข้อมูลครบเลย ไม่งั้น ผจก จะงง" → กางดูได้ในหน้าออกใบเลย */
.pen-tiers{margin:10px 0;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.pen-tiers>summary{cursor:pointer;font-weight:600}
.pen-tier{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line)}
.pen-tier:first-of-type{border-top:none;padding-top:0}
.pen-tier table{width:100%;font-size:.84rem}
/* กล่องเลือกชั้นความผิด */
.pen-picks{display:flex;flex-direction:column;gap:10px}
.pen-pick{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.pen-pick:has(input:checked){border-color:var(--brand);background:var(--soft)}

/* ============ ส่วนประกอบ ============ */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:20px 22px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2{margin:0 0 3px;font-size:1.05rem}
/* หัวเรื่อง + ปุ่ม ส่งออก/พิมพ์ ชิดขวาบรรทัดเดียวกัน (เจ้าของสั่ง 24 ก.ค. 2569) */
.hdr{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.hdr h2,.hdr h3,.hdr h4{margin:0;border:none;padding:0}
.hdr-act{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* แถบเครื่องมือของแต่ละหมวดประวัติ (ปี/เดือน/Excel/พิมพ์) — จัดเป็นกล่องเดียวให้เรียบร้อย
   จัดระเบียบตรงเลือกปี/เดือน/เอกเซล/พิมพ์ใหม่ */
.hist-h{font-size:.95rem;margin:22px 0 6px;font-weight:700;border:none;padding:0}
.hist-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;
  background:var(--soft);border:1px solid var(--line);border-radius:11px;padding:9px 12px;margin-bottom:12px}
.hist-bar .fld{display:inline-flex;align-items:center;gap:6px}
.hist-bar .fld label{display:inline-block;margin:0;font-size:.8rem;color:var(--dim);
  font-weight:600;white-space:nowrap}
.hist-bar select{width:auto;min-width:88px;padding:7px 11px;font-size:.85rem;
  min-height:38px;font-weight:600}
.hist-bar .hist-act{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* หัวตารางหน้าหลัก + ชิปคำอธิบายเล็ก ๆ ขวามือ (เจ้าของสั่ง 24 ก.ค. 2569: dashboard คลีน) */
.rost-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rost-head h2{margin:0}
.rost-info{margin-left:auto;font-size:.76rem;color:var(--dim);cursor:help;white-space:nowrap;
  border:1px solid var(--line);border-radius:20px;padding:2px 11px}
.rost-info:hover{background:var(--soft);color:var(--ink)}
.card h3{margin:26px 0 3px;font-size:.98rem;padding-top:20px;border-top:1px solid var(--line)}
.card .hint{color:var(--dim);font-size:.86rem;margin:0 0 16px;line-height:1.6}

label{display:block;font-size:.83rem;color:var(--dim);margin:12px 0 5px;font-weight:600}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--bg);color:var(--text);transition:border-color .15s;
  /* ⚠️ ช่องวันที่/เวลาบน iOS มีความกว้างในตัวที่ดันกล่องจนล้นจอ
     ต้องบังคับ box-sizing + min-width:0 ไม่งั้นฟอร์มยื่นใบลาล้นออกนอกหน้า */
  box-sizing:border-box;min-width:0;max-width:100%}
/* 🔴 เจ้าของสั่ง 24 ก.ค. 2569: กล่องเลือกเดือน/วันที่ ยาวเกินไป + คลิกแล้วดูยาก
   → จำกัดความกว้างพอดี · สูงขึ้นกดง่าย · ไอคอนปฏิทินชัด · ปรับตามธีมสว่าง/มืด
   (คลิกที่ช่องแล้วเปิดปฏิทินให้เลย ทำที่ admin-core — el.showPicker) */
input[type=date],input[type=month],input[type=time],input[type=datetime-local]{
  -webkit-appearance:none;appearance:none;
  max-width:220px;min-height:44px;cursor:pointer;font-weight:600;
  color-scheme:light dark}
.row input[type=date],.row input[type=month],.row input[type=time],
.row input[type=datetime-local]{width:100%}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.65;padding-left:6px;transition:opacity .15s}
input[type=date]:hover::-webkit-calendar-picker-indicator,
input[type=month]:hover::-webkit-calendar-picker-indicator,
input[type=time]:hover::-webkit-calendar-picker-indicator,
input[type=datetime-local]:hover::-webkit-calendar-picker-indicator{opacity:1}
input:hover,select:hover{border-color:var(--clay)}
/* แนบเอกสารใบลา — ปุ่ม + พรีวิวรูป (เจ้าของสั่ง 25 ก.ค. 2569: ช่องไฟล์แบนยาว มองไม่เห็นที่แนบ) */
.attach-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 2px}
.attach-hint{font-size:.8rem;color:var(--dim)}
.attach-preview:empty{display:none}
.attach-preview{margin:10px 0 2px}
.attach-thumb{display:inline-block;border:1.5px solid var(--brand);border-radius:14px;
  padding:7px;background:var(--card);max-width:300px;box-shadow:0 2px 10px rgba(30,107,52,.08)}
.attach-thumb img{display:block;max-width:100%;max-height:260px;border-radius:9px;object-fit:contain}
.attach-thumb .at-cap{font-size:.8rem;color:var(--brand-dark);margin-top:7px;text-align:center;font-weight:700}
.attach-file{display:inline-block;border:1px solid var(--line);border-radius:10px;
  padding:9px 15px;background:var(--soft);font-size:.9rem}
.attach-file .dim{color:var(--dim);font-size:.82rem}
/* ป้าย "ยังไม่แนบเอกสาร" + ปุ่มแนบ อยู่คอลัมน์แรก (เห็นง่าย ไม่ต้องเลื่อนตารางขวา) */
.attach-need{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
/* ประวัติการลาของฉัน — จัดช่องแรกเป็นแนวตั้ง ไม่ให้ตัวหนังสือ/ป้าย/ปุ่มซ้อนบรรทัด (เจ้าของสั่ง 26 ก.ค. 2569) */
.melv-tbl td{vertical-align:top}
.melv-tbl td.nowrap{white-space:nowrap}
.melv{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.melv-head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;line-height:1.5}
.melv-tags{display:flex;flex-wrap:wrap;gap:6px}
.melv-sub{color:var(--dim);font-size:.82rem;line-height:1.55}

/* ป้องกันการแคปหน้าจอฝั่งพนักงาน (เจ้าของสั่ง 26 ก.ค. 2569 · ไม่เอาลายน้ำเต็มจอ) */
/* ปิดการเลือก/ก็อปข้อความ แต่ยังพิมพ์ในช่องกรอกได้ */
.staff-guard{-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
.staff-guard input,.staff-guard textarea,.staff-guard select{-webkit-user-select:text;user-select:text}
/* กรอบแสดงรูปหลักฐานที่ผู้จัดการเปิดดู */
.att-frame{border:1px solid var(--line);border-radius:12px;padding:8px;background:var(--card);
  display:inline-block;max-width:360px}
.att-frame img{display:block;max-width:100%;max-height:62vh;border-radius:8px}
.att-frame .at-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}
/* กล่องโต้ตอบของเราเอง (แทน confirm/prompt/alert) — เจ้าของสั่ง 25 ก.ค. 2569 */
.ui-ov{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(20,25,20,.55);padding:18px;backdrop-filter:blur(2px)}
.ui-modal{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;width:100%;max-width:440px;max-height:88vh;overflow:auto;
  box-shadow:0 16px 50px rgba(0,0,0,.4);animation:uiPop .14s ease-out}
@keyframes uiPop{from{transform:scale(.95);opacity:.4}to{transform:scale(1);opacity:1}}
.ui-modal .ui-title{font-size:1.05rem;font-weight:700;margin:0 0 10px;color:var(--text);border:none;padding:0}
.ui-modal .ui-body{margin-bottom:16px}
.ui-modal .ui-text{margin:0;white-space:pre-line;line-height:1.6;color:var(--text)}
.ui-modal .ui-field{margin-top:12px}
.ui-modal .ui-field input,.ui-modal .ui-field textarea{width:100%}
.ui-modal .ui-field .need{border-color:var(--bad);background:var(--c1s)}
.ui-modal .ui-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.ui-modal .ui-actions .btn{min-width:96px}
/* ตัวเลือกแบบปุ่มกด (แทน prompt ที่ให้พิมพ์เลข) */
.ui-picks{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.ui-pick{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;
  padding:12px 15px;border:1.5px solid var(--line);border-radius:11px;background:var(--soft);
  cursor:pointer;font-family:inherit;color:var(--text);transition:border-color .12s,background .12s}
.ui-pick:hover{border-color:var(--brand);background:var(--c1s)}
.ui-pick .pk-label{font-weight:700;font-size:.95rem}
.ui-pick .pk-sub{font-size:.82rem;color:var(--dim)}
.ui-pick.off{border-style:dashed}
.ui-pick.off .pk-label{color:var(--dim)}

/* ตัวเปิดดูไฟล์แนบใบลาแบบ overlay — ใช้ได้ทุกหน้า (เจ้าของแจ้ง 25 ก.ค. 2569) */
.att-ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.6);padding:18px}
.att-modal{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;width:100%;max-width:560px;max-height:88vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.35)}
.att-modal h3{font-size:1rem}
.att-close{position:absolute;top:12px;right:16px;cursor:pointer;font-size:1.3rem;color:var(--dim);line-height:1}
.att-close:hover{color:var(--text)}
.att-btns{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}
.att-modal .att-frame{display:block;max-width:100%}

/* ============================================================
   ลายเซ็นนิ้วบนจอ (.sig-*) — งานที่ 4 จาก 6 ของฟีเจอร์ "ลายเซ็นนิ้วบนจอ"
   กล่องเซ็นด้วยนิ้ว/เมาส์ (หน้าข้อมูลพนักงาน ใต้ 📄 สัญญาจ้าง) + สถานะลายเซ็น
   🔴 คลาสนี้จองไว้เฉพาะงานนี้ — ห้ามใช้ .adrow/.ckchip ของงานอื่นปนกัน
   ============================================================ */
.sig-ov{position:fixed;inset:0;z-index:320;display:none;align-items:center;justify-content:center;
  background:rgba(20,25,20,.55);padding:16px;backdrop-filter:blur(2px)}
.sig-modal{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;width:100%;max-width:440px;max-height:92vh;overflow:auto;
  box-shadow:0 16px 50px rgba(0,0,0,.4)}
.sig-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.sig-head h3{margin:0;font-size:1.02rem;border:none;padding:0}
.sig-close{cursor:pointer;font-size:1.25rem;color:var(--dim);line-height:1;flex-shrink:0}
.sig-close:hover{color:var(--text)}
.sig-certify-text{font-size:.85rem;color:var(--dim);line-height:1.55;margin:6px 0}
.sig-certify-chk{display:flex;align-items:flex-start;gap:8px;font-size:.88rem;
  padding:9px 11px;background:var(--soft);border-radius:10px;margin:8px 0;cursor:pointer}
.sig-certify-chk input{width:19px;height:19px;flex-shrink:0;margin-top:1px}
.sig-name-fld{display:block;margin:8px 0;font-size:.82rem;color:var(--dim)}
.sig-name-fld input{width:100%;margin-top:4px;font-size:.92rem;color:var(--text)}
.sig-padwrap{margin:10px 0 4px}
/* touch-action:none = ชั้นป้องกันเสริมนอกจาก preventDefault() ใน sigPadInit — กันนิ้วลากแล้วจอเลื่อน */
.sig-canvas{width:100%;height:170px;display:block;border:1.5px dashed var(--clay);
  border-radius:10px;background:var(--soft);touch-action:none;cursor:crosshair;
  overscroll-behavior:contain}
.sig-hint{margin:6px 0 0;font-size:.78rem;color:var(--dim)}
.sig-hint.need{color:var(--bad);font-weight:600}
.sig-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:14px}
.sig-actions .btn{min-width:80px}
/* ============================================================
   🔴🔴🔴 จอเซ็นรับเงินบนแท็บเล็ต (เจ้าของสั่ง 28 ส.ค. 2569 รอบ 2)
      *"เซ็นบนแท็บเล็ต ... ผมว่าทำให้มันดีๆหน่อย แบบนี้ใช้งานยาก"*
      เจ้าของสั่งให้จอโชว์ ชื่อ + ยอดเงินตัวใหญ่ + รอบจ่าย
      🔴 พนักงานต้องเห็นยอดที่กำลังเซ็นรับ **ก่อน** วาดลายเซ็น
      🚫 ห้ามย่อยอดให้เล็กลงจนอ่านข้ามได้ — นี่คือสาระสำคัญของการเซ็นรับเงิน
   ============================================================ */
.sig-modal.sig-big{max-width:620px}
.sig-bill{background:var(--brand-soft);border:1px solid var(--brand);
  border-radius:14px;padding:14px 16px;margin:10px 0 6px;text-align:center}
.sig-bill-who{font-size:1.05rem;font-weight:700;color:var(--text)}
.sig-bill-amt{font-size:2.1rem;font-weight:800;line-height:1.15;margin:4px 0 2px;
  color:var(--ok);letter-spacing:.4px}
.sig-bill-sub{font-size:.86rem;color:var(--dim)}
/* แท็บเล็ต/มือถือ: กรอบเซ็นสูงขึ้นและปุ่มใหญ่ขึ้น — นิ้วเซ็นได้สบาย */
.sig-big .sig-canvas{height:210px}
.sig-big .sig-actions .btn{min-width:110px;padding:11px 18px;font-size:1rem}
@media (max-width:600px){
  .sig-bill-amt{font-size:1.7rem}
  .sig-big .sig-canvas{height:180px}
}
.sig-status{margin:10px 0 6px}
.sig-void-hist{margin-top:8px;font-size:.78rem;color:var(--dim)}
.sig-void-hist summary{cursor:pointer;color:var(--dim)}
.sig-void-hist div{padding:4px 0 4px 14px;border-left:2px solid var(--line);margin:4px 0}
/* แถวขอสลับกะ (เพื่อน + วัน + ลบ) — เพิ่มได้เรื่อย ๆ (เจ้าของสั่ง 25 ก.ค. 2569) */
.sw-row{display:flex;gap:10px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.sw-row .sw-emp{flex:1 1 180px;min-width:150px}
.sw-row .sw-date{flex:0 0 auto;width:172px}
.sw-row .sw-del{flex:0 0 auto;align-self:center}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-soft)}

.btn{background:var(--brand);color:#fff;border:none;padding:10px 20px;border-radius:9px;
  cursor:pointer;font-weight:600;font-size:.92rem;transition:background .15s}
.btn:hover{background:var(--brand-dark)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--brand-dark);border:1px solid var(--brand)}
.btn.ghost:hover{background:var(--brand-soft)}
@media (prefers-color-scheme:dark){ .btn{color:#121a15} .btn.ghost{color:var(--brand)} }
.btn.small{padding:5px 12px;font-size:.83rem;border-radius:7px}
/* ปุ่มจิ๋ว — ใช้ในกล่องแจ้งเตือนที่พื้นที่แคบ ปุ่มใหญ่จะเบียดจนล้น */
.btn.tiny{padding:4px 10px;font-size:.76rem;border-radius:6px;width:auto}
.btn.ok{background:var(--ok)} .btn.bad{background:var(--bad)}
.btn.clay{background:var(--clay)}
/* ปุ่มเงียบ — ของที่ "ต้องมี แต่ไม่ควรเด่น" เช่น ปุ่มดูคนที่พ้นสภาพแล้ว
   (ขวาสุดเลย ซ่อนๆหน่อย)
   หน้าตาเหมือนลิงก์จาง ๆ ไม่แย่งสายตาจากงานประจำวัน แต่ยังกดได้ถ้าตั้งใจหา */
.btn.quiet{background:transparent;border:none;color:var(--dim);font-weight:500;
  font-size:.8rem;padding:4px 6px;text-decoration:underline;text-underline-offset:3px;
  opacity:.75}
.btn.quiet:hover{background:transparent;color:var(--ink);opacity:1}
.btn.quiet:disabled{opacity:.4;text-decoration:none;cursor:default}
/* กำลังดูกลุ่มนั้นอยู่ = ต้องหาเจอง่ายเพื่อกดกลับ จึงเลิกจางชั่วคราว */
.btn.quiet.on{color:var(--bad);opacity:1;font-weight:700;text-decoration:none}
/* ดันไปชิดขวาสุดของแถว */
.push-right{margin-left:auto}

.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:0 16px}
/* แถวที่มีช่องเดียว (เช่น ตัวเลือกเดือน) — ไม่ต้องยืดเต็มความกว้างการ์ด
   ของเดิมช่องเดือนยาวข้ามจอ ดูแล้วลอยและกดยาก */
.row.tight{grid-template-columns:repeat(auto-fit,minmax(160px,210px));justify-content:start}
.actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

table{width:100%;border-collapse:collapse;font-size:.89rem}
th,td{text-align:left;padding:10px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th,table tr:first-child th{background:var(--soft);color:var(--dim);font-size:.78rem;
  font-weight:700;letter-spacing:.02em;white-space:nowrap}
tbody tr:hover td{background:var(--soft)}
tr:last-child td{border-bottom:none}
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:11px}
.scroll table{font-size:.88rem}

/* 🔴🔴🔴 วันที่ในตาราง ห้ามตกบรรทัด (เจ้าของแจ้ง 4 ก.ย. 2569
   "ตรงวันที่ มันเด้งลงมาด้านล่าง")
   เบราว์เซอร์ตัดบรรทัดได้ทั้งที่ขีดกลางและหลังเครื่องหมายทับ
   ⇒ ช่องแคบเมื่อไหร่ วันที่จะแตกเป็น 2 บรรทัดทันที อ่านยากมาก
   🔴 ตัวห่อมาจาก dmyCell() ใน admin-core.ts ที่เดียว
   🚫 ห้ามลบกฎนี้ · 🚫 ห้ามย้ายไปอยู่ใน @media (ต้องมีผลทุกขนาดจอ) */
.dt{white-space:nowrap}

.tag{display:inline-block;padding:2px 10px;border-radius:99px;font-size:.76rem;font-weight:600;white-space:nowrap}
.tag.ok{background:var(--brand-soft);color:var(--ok)}
.tag.warn{background:var(--clay-soft);color:var(--warn)}
.tag.bad{background:#F7E9E7;color:var(--bad)}
.tag.dim{background:var(--soft);color:var(--dim)}

/* ============================================================
   ตารางเงินเดือน — แยก "เพิ่ม" กับ "หัก" ด้วยแถบสี
   (เจ้าของส่งตัวอย่าง Excel ที่ใช้จริงมาให้ 22 ก.ค. 2569)

   เขียว = รายได้บวกเพิ่ม · แดง = รายการหัก · น้ำเงิน = ยอดรวม
   ⚠️ ไม่พึ่งสีอย่างเดียว — ช่องในแถบหักขึ้นเครื่องหมายลบเสมอ
      คนตาบอดสีหรือพิมพ์ขาวดำก็ยังอ่านถูก
   ============================================================ */
.paytbl thead tr.grp th{text-align:center;font-size:.82rem;padding:7px 6px;
  border-bottom:2px solid var(--line)}
/* หัวแถบกลุ่ม — เดิมเป็นตัวหนังสือขาวบนสีแบรนด์ ได้แค่ 3.3 : 1 อ่านยากทั้งสองโหมด
   เปลี่ยนเป็นพื้นโทนอ่อน + ตัวหนังสือสีปกติ + เส้นใต้หนาบอกสีของกลุ่ม
   ยังแยกกลุ่มชัดเหมือนเดิม แต่อ่านออกจริง (เหตุผลเดียวกับ .secttl) */
.paytbl .ga,.paytbl .gc,.paytbl .gs{color:var(--text);font-weight:700}
.paytbl .ga{background:var(--c1s);box-shadow:inset 0 -3px 0 var(--c1)}   /* รายได้ */
.paytbl .gc{background:var(--c3s);box-shadow:inset 0 -3px 0 var(--c3)}   /* รายการหัก */
.paytbl .gs{background:var(--brand-soft);box-shadow:inset 0 -3px 0 var(--logo)} /* ยอดรวม */
.paytbl .gi{background:var(--soft)}                   /* ข้อมูลพนักงาน */
.paytbl th.ca,.paytbl td.ca{background:var(--c1s)}    /* ช่องรายได้ */
.paytbl th.cc,.paytbl td.cc{background:var(--c3s)}    /* ช่องรายการหัก */
.paytbl th.cs,.paytbl td.cs{background:var(--brand-soft);font-weight:600}
.paytbl tr.tot td{border-top:2px solid var(--line);font-size:.92rem}
.paytbl .cut{color:var(--bad);font-size:.74rem}
/* ตารางกว้างหลายคอลัมน์ — เส้นแบ่งคอลัมน์ + ช่องกระชับขึ้น กวาดสายตาตามง่าย ไม่หลงแถว */
.paytbl th,.paytbl td{padding:7px 9px;border-right:1px solid var(--line)}
.paytbl th:last-child,.paytbl td:last-child{border-right:none}
/* ชื่อ-นามสกุล ให้อยู่บรรทัดเดียว ไม่ตัดคำเป็น 2 บรรทัด */
.paytbl td:nth-child(2){white-space:nowrap}
/* ตำแหน่ง แสดงเป็นบรรทัดเล็กสีจางใต้ชื่อ (ตาราง/หัวข้อการ์ด) */
.possub{display:block;color:var(--dim);font-size:.75rem;font-weight:400;white-space:normal;margin-top:1px}

/* ============================================================
   ตรึงคอลัมน์ รหัส + ชื่อ-นามสกุล ไว้ซ้ายมือ
   "ตรงหน้าเงินเดือนอยากให้ตรึงแนวตรงเลขประจำตัวกับชื่อไว้
    ตอนเลื่อนขวา จะไม่เห็นชื่อ ดูยาก"

   🚫 ทำแค่ position:sticky อย่างเดียว — ห้ามแตะขนาดตัวอักษร ช่องไฟ
      ความกว้างคอลัมน์ หรือ overflow-wrap ของตารางนี้เด็ดขาด
      (เจ้าของปฏิเสธการออกแบบตารางนี้ใหม่มาแล้ว 2 ครั้ง · qc:wire ข้อ 4.16)
   ⚠️ ครั้งก่อนตรึงแล้วโดนสั่งเอาออก เพราะพ่วง max-width:88px + ellipsis
      มาด้วยจนชื่อโดนตัดหาย — คราวนี้ไม่ตั้งความกว้างเลยแม้แต่ที่เดียว

   🔴 border-collapse ต้องเป็น separate
      ตอน collapse เส้นขอบเป็นของ "ตาราง" ไม่ใช่ของช่อง ช่องที่ sticky
      จึงลอยออกมาโดยไม่มีเส้นขอบติดมาด้วย = เห็นเป็นช่องลอยไม่มีกรอบ
      (.cal ซึ่งตรึงคอลัมน์ชื่ออยู่แล้ว ก็ใช้ separate + spacing 0 ด้วยเหตุผลเดียวกัน)
      spacing 0 + เส้นขอบอยู่ที่ขวา/ล่างของแต่ละช่อง = หน้าตาเท่าเดิม ไม่มีเส้นซ้อน

   🔴 พื้นหลังของช่องที่ตรึง ต้องทึบเสมอ
      ปล่อยโปร่งใส = เลื่อนขวาแล้วเห็นช่องสีเขียว/แดง/น้ำเงินไหลทะลุขึ้นมา
      ⚠️ กฎนี้ต้องหนักกว่า tbody tr:hover td (0,1,3) จึงเจาะด้วย .paytbl (0,2,1)
         และต้องเขียนกฎ hover ของช่องที่ตรึงไว้เองด้วย ไม่งั้นชี้แล้วสีไม่ตาม

   ⚠️ ห้ามใส่ overflow-x:hidden ให้ตัวไหนที่ครอบตารางนี้ (ดูหัวข้อ overflow ข้างบน)
      จะกลายเป็นกล่องเลื่อนซ้อน แล้วคอลัมน์ที่ตรึงไปยึดผิดกล่อง
   ============================================================ */
.paytbl{border-collapse:separate;border-spacing:0}
.paytbl th.pin,.paytbl td.pin{position:sticky;z-index:2}
.paytbl th.p1,.paytbl td.p1{left:0}
/* --pin1w = ความกว้างจริงของคอลัมน์ "รหัส" · pinPayCols() วัดแล้วเขียนให้ตอนสร้างตาราง */
.paytbl th.p2,.paytbl td.p2{left:var(--pin1w,0px)}
.paytbl tbody td.pin,.paytbl tr.tot td.pin{background:var(--card)}
.paytbl tbody tr:hover td.pin{background:var(--soft)}
.paytbl thead th.pin{background:var(--soft);z-index:4}
.paytbl thead tr.grp th.pin{background:var(--soft)}
/* เส้นบอกขอบของส่วนที่ตรึง — ให้รู้ว่าตรงไหนคือรอยต่อที่เลื่อนได้ */
.paytbl th.p2,.paytbl td.p2{box-shadow:2px 0 3px -2px rgba(0,0,0,.28)}
@media (prefers-color-scheme:dark){
  .paytbl th.ca,.paytbl td.ca,.paytbl th.cc,.paytbl td.cc,
  .paytbl th.cs,.paytbl td.cs{background:transparent}
  .paytbl td.ca{box-shadow:inset 3px 0 0 var(--c1)}
  .paytbl td.cc{box-shadow:inset 3px 0 0 var(--c3)}
  .paytbl td.cs{box-shadow:inset 3px 0 0 var(--brand)}
}
/* จุดสีในคำอธิบายใต้หัวข้อ */
.lg{display:inline-block;width:11px;height:11px;border-radius:3px;
  vertical-align:-1px;margin-right:3px}
.lg.add{background:var(--c1)} .lg.cut{background:var(--c3)} .lg.sum{background:var(--logo)}

/* ปุ่มลัดชื่อรายการเงินพิเศษ/หัก — กดแล้วเติมชื่อให้เลย ไม่ต้องพิมพ์ซ้ำ */
.preset{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;
  font-size:.82rem;color:var(--dim)}
.chip{border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:4px 11px;border-radius:99px;font-size:.8rem;cursor:pointer;
  font-family:inherit;transition:.15s}
.chip:hover{border-color:var(--brand)}
.chip.add{background:var(--c1s);border-color:var(--c1)}
.chip.cut{background:var(--c3s);border-color:var(--c3)}

/* ช่องวันที่ในตาราง — ย่อให้อยู่บรรทัดเดียว
   ของเดิมขึ้น "2026-07-22" แล้วตัดเป็น 3 บรรทัดบนมือถือ */
.daytbl .dcell{white-space:nowrap;font-variant-numeric:tabular-nums}
.daytbl .dcell span{color:var(--dim);font-size:.76rem;margin-left:3px}
.daytbl td,.daytbl th{padding:7px 8px}

/* หัวการ์ดที่มีแท็บอยู่ข้างขวา — ใช้ในหน้าข้อมูลพนักงาน */
.emphead{display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;flex-wrap:wrap;margin-bottom:8px}

/* ============================================================
   แท็บมุมขวาบนของการ์ด
   "ทำเป็น tap ด้านบน ชิดขวาหน่อย ไม่ต้องเป็นแบบนี้ ไม่สวย"
   → เปลี่ยนจากปุ่มก้อนทึบ เป็นแท็บเส้นใต้แบบเดียวกับแท็บหัวข้อย่อย
   ============================================================ */
/* padding-bottom ต้องเท่ากับ margin-bottom ติดลบของปุ่ม (3px) — เหตุผลเดียวกับ .tabs */
.toptabs{display:flex;gap:2px;align-items:flex-end;flex-wrap:wrap;
  margin-left:auto;border-bottom:1px solid var(--line);padding-bottom:3px}
.toptabs button{display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;border-bottom:2px solid transparent;
  padding:8px 14px;margin-bottom:-3px;cursor:pointer;font-family:inherit;
  color:var(--dim);font-weight:600;font-size:.88rem;white-space:nowrap;
  transition:color .15s}
.toptabs button:hover{color:var(--text)}
.toptabs button.on{color:var(--brand-dark);border-bottom-color:var(--brand)}
@media (prefers-color-scheme:dark){ .toptabs button.on{color:var(--brand)} }
/* ไอคอน 2 ขนาด — "เพิ่มพนักงาน" ใหญ่กว่า เพราะเป็นงานที่ทำบ่อยสุด */
.toptabs svg.big{width:22px;height:22px}
.toptabs svg.sm{width:15px;height:15px}
@media (max-width:700px){
  /* จอแคบ: แท็บเลื่อนแนวนอนได้ ไม่ตกบรรทัดจนหัวการ์ดสูงเกิน */
  .emphead{align-items:stretch}
  .toptabs{margin-left:0;overflow-x:auto;flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch;
    /* ปัดจนสุดแล้วหยุดที่แถวนี้ ไม่ส่งแรงต่อให้ทั้งหน้า */
    overscroll-behavior-x:contain;
    /* ล็อกให้เลื่อนได้แกนเดียว — วัดแล้วแถวนี้ก็ดึงขึ้น-ลงได้ 1px เหมือนกัน */
    overflow-y:hidden}
  .toptabs button{flex:0 0 auto;padding:8px 11px;font-size:.84rem}
  .toptabs svg.big{width:19px;height:19px}
}

/* ============================================================
   บันทึกรายได้ – รายหัก (เจ้าของสั่งทำ 22 ก.ค. 2569 "จบในหน้าเดียว")
   ซ้าย = รายชื่อพนักงาน · ขวา = ทุกรายการเงินของคนนั้น
   ============================================================ */
.sheetwrap{display:grid;grid-template-columns:260px 1fr;gap:16px;margin-top:14px;
  align-items:start}
.sheetlist{border:1px solid var(--line);border-radius:12px;overflow:hidden;
  background:var(--card);
  /* เจ้าของสั่ง 25 ก.ค. 2569: รายชื่อคนด้านซ้ายเลื่อนได้ + ค้างบนจอ ไม่งั้นแถวยาวเกิน */
  position:sticky;top:12px;align-self:start;max-height:calc(100vh - 30px);
  display:flex;flex-direction:column}
.sheetlist input{border:none;border-bottom:1px solid var(--line);border-radius:0;
  font-size:.85rem;flex:0 0 auto}
.sheetlist #sh-people,.sheetlist #io-people{flex:1 1 auto;max-height:520px;overflow-y:auto}
.person{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:8px 11px;border:none;background:none;cursor:pointer;font-family:inherit;
  border-bottom:1px solid var(--line);color:var(--ink)}
.person:hover{background:var(--soft)}
.person.on{background:var(--logo);color:#fff}
.person .pav{width:28px;height:28px;border-radius:50%;flex:0 0 28px;
  background:var(--brand-soft);color:var(--brand-dark);display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.82rem}
.person.on .pav{background:rgba(255,255,255,.25);color:#fff}
.person .pnm{font-size:.84rem;line-height:1.3;overflow:hidden}
.person .pnm i{display:block;font-style:normal;font-size:.72rem;opacity:.7}
.sheetbody{min-height:200px}
.sheethead{display:flex;justify-content:space-between;align-items:center;gap:12px;
  flex-wrap:wrap;padding-bottom:10px;border-bottom:2px solid var(--line)}
.sheethead span{display:block;font-size:.82rem;color:var(--dim)}
/* หัวข้อกลุ่ม บอกชัดว่าฝั่งบวกหรือฝั่งหัก */
/* ⚠️ บทเรียนจริง 23 ก.ค. 2569 (เจ้าของแจ้ง "รายการหัก (ลบออก) มองไม่เห็นตัวหนังสือ"):
   ของเดิมเป็น "ตัวหนังสือขาวบนพื้นสีแบรนด์" ซึ่งอ่านยากทั้งสองโหมด
     โหมดสว่าง ขาวบนเขียว --c1  = 3.3 : 1  (ต่ำกว่าเกณฑ์อ่านง่าย 4.5)
     โหมดมืด ขาวบนชมพู --c3  = 2.8 : 1  (แย่กว่าอีก)
   รอบแรกแก้เฉพาะโหมดมืด เจ้าของจึงยังบอกว่า "ยังมองไม่เห็น" เพราะใช้โหมดสว่าง
   → เลิกใช้ตัวหนังสือขาวไปเลย เปลี่ยนเป็น "สีข้อความปกติบนพื้นโทนอ่อนของสีนั้น"
     + แถบสีด้านซ้ายบอกว่าเป็นฝั่งบวกหรือฝั่งหัก
     ได้ 11–13 : 1 ทั้งสองโหมด และยังแยกฝั่งออกจากกันชัดเหมือนเดิม */
.secttl{margin:18px 0 8px;font-size:.92rem;font-weight:700;padding:7px 14px;
  border-radius:8px;display:inline-block;color:var(--text);
  background:var(--c1s);border-left:4px solid var(--c1)}
.secttl.add{background:var(--c1s);border-left-color:var(--c1)}
.secttl.cut{background:var(--c3s);border-left-color:var(--c3)}
.sheettbl input.amt{width:130px;text-align:right;font-variant-numeric:tabular-nums}
.sheettbl input[type=month]{width:130px;font-size:.8rem;padding:5px 7px}
.sheettbl tr.lock td{background:var(--soft);color:var(--dim)}
.sheettbl .src{font-size:.74rem;color:var(--dim)}
.sheettbl .src.recurring{color:var(--brand-dark);font-weight:600}
.sheettbl .src.once{color:var(--clay);font-weight:600}
.cut{color:var(--bad)}
@media (max-width:820px){
  /* จอแคบ: รายชื่ออยู่บน แล้วเลื่อนดูรายการด้านล่าง */
  .sheetwrap{grid-template-columns:1fr}
  .sheetlist{position:static;max-height:none}
  .sheetlist #sh-people,.sheetlist #io-people{max-height:220px}
  .sheettbl input.amt{width:100%}
}

/* ---------- หัวรายการหัก Incentive: เดือนที่ถูกหัก → รอบที่จ่าย ---------- */
.incwhich{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.incwhich .pill{display:inline-flex;flex-direction:column;gap:1px;padding:7px 14px;
  background:var(--brand-soft);border:1px solid var(--line);border-radius:10px}
.incwhich .pill i{font-style:normal;font-size:.72rem;color:var(--dim)}
.incwhich .pill b{font-size:1.02rem;color:var(--text);font-variant-numeric:tabular-nums}
.incwhich .arrow{color:var(--dim);font-size:1.2rem;font-weight:700}

/* ---------- แถบสรุปยอดรวม Incentive (โดยรวม) เห็นภาพก่อนไล่ดูรายคน ---------- */
.incsum{display:flex;gap:12px;flex-wrap:wrap;margin:4px 0 15px}
.incsum .s{flex:1 1 150px;min-width:150px;background:var(--soft);border:1px solid var(--line);
  border-radius:12px;padding:11px 16px;display:flex;flex-direction:column;gap:3px}
.incsum .s i{font-style:normal;font-size:.78rem;color:var(--dim)}
.incsum .s b{font-size:1.3rem;font-weight:700;font-variant-numeric:tabular-nums}
.incsum .s.cut{background:var(--c3s);border-color:var(--c3)} .incsum .s.cut b{color:var(--c3)}
.incsum .s.pay{background:var(--brand-soft);border-color:var(--brand)} .incsum .s.pay b{color:var(--brand-dark)}

/* ตัวเลข 0 แบบจาง — ใช้ในตารางที่ต้องแสดงทุกช่องแม้เป็นศูนย์ ให้เลขจริงเด่นกว่า */
.z{color:var(--dim);opacity:.5;font-weight:400}

/* ---------- สรุปการหัก Incentive แบบแจกแจงรายบรรทัด ---------- */
.inctbl td{vertical-align:top}
.cutline{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  padding:4px 0;border-bottom:1px dashed var(--line)}
.cutline:last-child{border-bottom:none}
.cutline .ct{font-weight:600;color:var(--text)}
.cutline .cc{color:var(--dim);font-size:.85rem}
.cutline .cm{color:var(--bad);font-weight:600;font-variant-numeric:tabular-nums}
.cutline .cr{color:var(--dim);font-size:.78rem;margin-left:auto}
.ic-days{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px}
.ic-day{background:var(--soft);border:1px solid var(--line);border-radius:6px;
  padding:1px 8px;font-size:.76rem;color:var(--dim)}

/* ---------- บันทึกการหัก Incentive รายครั้ง ---------- */
.inccards{display:flex;flex-direction:column;gap:12px;margin-top:6px}
/* จัดใหม่ 24 ก.ค. 2569: รายการหักเพิ่มไม่ยาวข้าง — ระบบนับให้=กริดช่องเล็ก · อื่นๆ=การ์ดฟอร์ม */
.ic-subttl{font-size:.8rem;font-weight:700;color:var(--dim);margin:12px 0 5px}
.ic-autogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.ic-ai{border:1px solid var(--line);border-radius:10px;padding:8px 11px;background:var(--soft)}
.ic-ai.hasx{border-color:var(--c4);background:var(--c4s)}
.ic-ai .ai-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ic-ai .ai-lb{font-weight:600;font-size:.9rem;line-height:1.25}
.ic-ai .ai-n{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--dim)}
.ic-ai.hasx .ai-n{color:var(--c4)}
.ic-ai .ai-rule{color:var(--dim);font-size:.75rem;margin-top:3px;line-height:1.35}
.ic-mangrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.ic-mangrid .inccard{margin:0}
/* สรุปยอดรายคน (เจ้าของสั่ง 24 ก.ค. 2569) — ประกาศ → สัดส่วน → รายวัน → หัก → ได้รับจริง */
.psum{border:1.5px solid var(--c1);border-radius:14px;padding:14px 16px;background:var(--c1s);
  max-width:460px;box-shadow:0 2px 10px rgba(30,107,52,.07)}
.ps-ttl{font-weight:700;color:var(--brand-dark);margin-bottom:9px;font-size:.95rem;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ps-round{margin-left:auto;font-size:.72rem;font-weight:500;color:var(--dim);
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1px 9px}
.ps-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0}
.ps-row .k{color:var(--ink)}
.ps-row .k i{color:var(--dim);font-size:.8rem;font-style:normal}
.ps-row .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.ps-row .v.dim{font-weight:400;color:var(--dim)}
.ps-row .hf{color:#b06a00;font-size:.78rem;font-weight:600}
.ps-row.base{border-top:1px dashed var(--c1);margin-top:2px;padding-top:7px}
.ps-row.base .v{color:var(--brand-dark)}
.ps-cuth{font-size:.78rem;font-weight:700;color:var(--dim);margin:8px 0 2px}
.ps-row.cut .v{color:#a83a2f}
/* ขั้นเวลาเตรียมงาน — บรรทัดที่อธิบายว่ายอดหายไปไหน (เจ้าของแจ้ง 31 ก.ค. 2569
   ว่ารายการคำนวณ Incentive ไม่บอกว่าทำไมถึงได้ลดลง) ขึ้นเฉพาะตอนที่ถูกลดจริง */
.ps-row.prep{border-top:1px dotted var(--line);margin-top:3px;padding-top:6px}
.ps-row.prep .k{font-weight:600}
.ps-row.cut.tot{border-top:1px dotted var(--line);padding-top:5px;margin-top:1px}
.ps-row.cut.tot .k{font-weight:700}
.ps-row.net{border-top:2px solid var(--c1);margin-top:6px;padding-top:9px;font-size:1.05rem}
.ps-row.net .k{font-weight:800;color:var(--brand-dark)}
.ps-row.net .v{font-size:1.25rem;font-weight:800;color:var(--brand-dark)}
/* 🔴 "ยอดนี้จะไปจ่ายรอบไหน" (เจ้าของแจ้งเอง 17 ส.ค. 2569)
   คำว่า "รอบ 2026-08" ของหน้านี้ = เดือนที่ทำได้ · ของหน้าคำนวณเงินเดือน = รอบที่จ่าย
   เจ้าของเปิด 2 หน้าเทียบกันแล้วเห็นเลขไม่ตรง จึงคิดว่าเงินหาย
   🚫 ห้ามเอาบรรทัดนี้ออก — ไม่มีมัน การ์ดนี้อธิบายตัวเองไม่ได้ */
.ps-row.paynext{border-top:1px dotted var(--line);margin-top:4px;padding-top:7px;
  font-size:.86rem}
.ps-row.paynext .k{color:var(--brand-dark);font-weight:700}
.ps-row.paynext .v{color:var(--dim);font-weight:600}
/* ตารางสรุปประวัติเงินเดือน (เจ้าของสั่ง 25 ก.ค. 2569) — กดที่แถวเพื่อกางสลิปเต็ม */
#tb-payslip tr.clk{cursor:pointer;transition:background .12s}
#tb-payslip tr.clk:hover td{background:var(--c1s)}
#tb-payslip tr.clk.on td{background:var(--c1s);box-shadow:inset 3px 0 0 var(--brand)}

/* สลิปย้อนหลังในหน้าข้อมูลพนักงาน (เจ้าของสั่ง 24 ก.ค. 2569)

   🔴🔴🔴 กฎเหล็ก: กฎข้างล่างนี้ใช้กับ "ใบสรุปยอดที่ได้รับ" (payoutSheetHtml)
      ซึ่งยังเป็นโครงตารางเดิม .slip/.sh/.emeta/.sec/.tot เท่านั้น

   🚫 ห้ามคัดลอก CSS ของ "ฟอร์มสลิปคาร์บอน" (.sf / .sf-head / .sf-who / .sf-r)
      มาเขียนซ้ำที่นี่เด็ดขาด — สำเนาจะล้าสมัยแล้วสลิปบนจอจะพังเงียบ ๆ อีก
      **เคยเกิดจริง:** เปลี่ยนสลิปเป็นฟอร์ม 15 ส.ค. 2569 แต่สำเนาชุดนี้ไม่ได้เปลี่ยนตาม
      ⇒ บนจอไม่มีสไตล์ไหนตรงเลย ตัวหนังสือไหลติดกันหมดจนอ่านไม่ออก
      เจ้าของเจอเอง 28 ส.ค. 2569: *"หน้าข้อมูลพนักงาน สลิป ผิด"*
   ✅ ฟอร์มสลิปใช้ ensureSlipFormCss() ฉีด slipFormCss() ตัวจริงลงหน้าเว็บแทน */
.pslip-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 12px;
  background:var(--soft);border:1px solid var(--line);border-radius:10px;margin-bottom:10px;font-size:.9rem}
.pslip-body{max-width:540px}
/* ฟอร์มคาร์บอนกว้าง 203.2 มม. (~768px) — กว้างเกินแผงบนจอเป็นเรื่องปกติ
   🔴 ให้เลื่อนดูแนวนอนแทนการย่อ เพราะกรอบบนจอต้องเท่ากระดาษจริงเป๊ะ
      จะได้เห็นตั้งแต่บนจอว่าเนื้อหาล้นแผ่นหรือยัง (กฎเดียวกับ slipFormCss) */
.pslip-body.form{max-width:none;overflow-x:auto;padding-bottom:8px;
  background:#EDEDEA;border:1px solid var(--line);border-radius:12px}
.pslip-body.form .sf{margin:12px auto}
.pslip-body .slip{border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;color:#222}
.pslip-body .sh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding-bottom:9px;border-bottom:2.5px solid #1E6B34;margin-bottom:3px}
.pslip-body .sh .shop{font-size:.98rem;font-weight:700;color:#1E6B34}
.pslip-body .sh h1{font-size:1.16rem;margin:2px 0 0;color:#222}
.pslip-body .sh .who{text-align:right;font-size:.82rem;color:#555}
.pslip-body .sh .who .slippay{color:#1E6B34;font-weight:700}
.pslip-body .shr{border-bottom:1px solid #1E6B34;margin-bottom:12px;height:0}
.pslip-body .emeta{display:flex;flex-wrap:wrap;gap:3px 20px;font-size:.8rem;color:#555;margin-bottom:14px}
.pslip-body .emeta b{color:#222;font-weight:600}
.pslip-body table{width:100%;border-collapse:collapse}
.pslip-body td{padding:5px 8px;border-bottom:1px solid #eee;font-size:.9rem;color:#222}
.pslip-body td.money{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pslip-body .sec td{background:#2F2F2F;color:#fff;font-weight:700;font-size:.86rem}
.pslip-body .sum td{background:#EFEFEC;font-weight:700;border-top:1px solid #999}
.pslip-body .subl td{color:#666;font-size:.8rem;border-bottom:none;padding-top:0}
.pslip-body .tot td{background:#1E6B34;color:#fff;font-weight:700;font-size:1rem}
.inccard{border:1px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--card)}
.inccard.lock{background:var(--soft)}
.incbase-who{font-size:.86rem;color:var(--dim);margin-bottom:8px}
.incbase-who b{color:var(--ink)}
.incbase-hint{padding:14px 16px;border:1px dashed var(--line);border-radius:12px;
  color:var(--dim);font-size:.88rem;text-align:center;background:var(--soft)}
.incrow{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:0}
.incrow .inccard{flex:1;min-width:220px;margin:0}
.inccard.basecard{border-left:4px solid var(--c1);background:var(--c1s)}
.inccard.effcard{border-left:4px solid var(--logo);background:var(--brand-soft)}
.effamt{font-size:1.5rem;font-weight:800;color:var(--brand-dark);margin:4px 0 6px}
.effamt span{font-size:.9rem;font-weight:600;color:var(--dim)}
.tag.add{background:var(--c1s);color:var(--brand-dark)}

/* ---- หน้ารายการคำนวณ Incentive (จัดใหม่ 24 ก.ค. 2569) ---- */
/* หัวหน้า: รอบเงินเดือน (ซ้าย) + กล่องยอดประกาศใหญ่ (ขวา) */
.paydate{display:inline-block;background:var(--c4s);border:1.5px solid var(--c4);
  border-radius:12px;padding:7px 15px;margin:2px 0 12px;font-size:.95rem;color:var(--brand-dark)}
.paydate .pd-sub{font-weight:400;color:var(--dim);font-size:.82rem}
/* ---- แถบบอกสถานะรอบเงินเดือน (เจ้าของสั่ง 31 ก.ค. 2569 "ปิดงวดแล้วให้จอค้างยอดเดิม") ----
   ปิดงวดแล้ว = แถบสีดินเข้ม เห็นตั้งแต่แรกว่าตัวเลขล็อกอยู่
   ยังไม่ปิด   = แถบจาง ๆ บอกว่ายังคำนวณสด (ไม่ต้องเด่น จะได้ไม่รบกวนงานประจำวัน) */
.roundstate{display:block;border-radius:12px;padding:10px 15px;margin:2px 0 12px;
  font-size:.82rem;line-height:1.65;border:1.5px solid var(--clay);background:var(--clay-soft)}
.roundstate b{display:block;font-size:.94rem;margin-bottom:3px;color:var(--ink)}
.roundstate span{display:block;color:var(--dim)}
/* 🔴 แถวปุ่มในแถบสถานะรอบ (เจ้าของแจ้ง 28 ส.ค. 2569 ว่าไม่มีปุ่มปิดงวด)
   🚫 ห้ามให้ปุ่มถูกกฎ .roundstate span ทับจนกลายเป็นบล็อกซ้อนกัน */
.roundstate .rs-act{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.roundstate .rs-act .btn{display:inline-flex}
.roundstate.closed{border-color:var(--c4);background:var(--c4s)}
.roundstate.closed b{color:var(--brand-dark)}
.roundstate.snapshot_broken{border-color:var(--bad);background:var(--c3s)}
.roundstate.snapshot_broken b{color:var(--bad)}
/* ---- รายงานแยกโอน / เงินสด (เจ้าของสั่ง 31 ก.ค. 2569) ----
   หัวข้อของแต่ละกลุ่ม + แถวรวมของกลุ่ม + ช่องเซ็นรับเงินของฝั่งเงินสด
   หน้ากระดาษมี CSS ของตัวเองใน splitPrintCss() เพราะหน้าพิมพ์ไม่มีตัวแปรสี */
.psh{margin:18px 0 7px;font-size:.98rem;color:var(--ink)}
.psh.bad{color:var(--bad)}
.psp tr.tot td{background:var(--clay-soft);border-top:2px solid var(--clay)}
.psp .sigbox{color:var(--dim);letter-spacing:.5px}
/* ---- ตารางสรุปยอดจ่าย 3 มิติ (ประเภทการจ้าง x วิธีจ่าย x จ่ายตอนไหน) ----
   ใช้กฎเดียวกับ .psp ทุกอย่าง เพิ่มแค่แถวรวมคอลัมน์ท้ายตาราง
   ห่อด้วย div.scroll เสมอ เลื่อนซ้าย-ขวาเหมือนตารางอื่นของระบบ
   ไม่แตะขนาดตัวอักษร ไม่บีบความกว้าง และไม่ใช้ overflow-wrap:anywhere
   (หักบรรทัดกลางคำไทย = สระ/วรรณยุกต์หลุดจากพยัญชนะ อ่านไม่ออก) */
.pmx tr.tot td{background:var(--clay-soft);border-top:2px solid var(--clay)}
.pmx td.dimcell{color:var(--dim)}
/* เตือนย่อ ๆ ใต้หัวรอบ (เจ้าของสั่ง 24 ก.ค. 2569: อย่าใช้กล่องเหลืองใหญ่ ให้เป็นจุดเล็ก) */
.paynote-sm{font-size:.76rem;color:var(--dim);margin:2px 0 10px;line-height:1.5}
.paynote-sm b{color:var(--ink);font-weight:600}
.incheader{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:6px 0 4px}
.inchead-left{display:flex;flex-direction:column;gap:11px}
.inchead-left .incwhich{margin-top:0}
.incmonth label{display:block;font-size:.82rem;color:var(--dim);margin:-4px 0 5px}
.ab-min{color:var(--brand-dark);font-weight:500}
.ab-min b{font-weight:700}
.announcebox{margin-left:auto;background:var(--c1s);border:1.5px solid var(--c1);
  border-radius:16px;padding:14px 20px;min-width:300px;box-shadow:0 2px 10px rgba(30,107,52,.08)}
.announcebox .ab-l{font-size:.9rem;font-weight:700;color:var(--brand-dark);margin-bottom:9px}
.announcebox .ab-l span{font-weight:500;color:var(--dim);font-size:.82rem}
.announcebox .ab-in{display:flex;gap:9px;align-items:center}
.announcebox .ab-in input{font-size:1.5rem;font-weight:800;max-width:170px;text-align:right;
  padding:7px 12px;color:var(--brand-dark)}
.announcebox .ab-unit{font-size:1rem;font-weight:600;color:var(--dim)}
.announcebox .ab-sub{font-size:.8rem;color:var(--dim);margin-top:9px;line-height:1.5}
.announcebox .ab-sub b{color:var(--ink)}

/* หัวกล่องรายละเอียดคน — กรอบ "ฟ้าอ่อน" (แยกจากยอดหักที่เป็นสีอิฐ · เจ้าของสั่ง 24 ก.ค.) */
.incbody-head{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;padding:13px 16px;border:1.5px solid var(--c4);border-radius:12px;
  background:var(--c4s);margin-bottom:14px}
.ibh-who b{font-size:1.02rem}
.ic-calc-sm{font-size:.78rem;color:var(--dim);margin-top:5px;line-height:1.5}
.ic-calc-sm .dim{opacity:.75}
/* เหตุผลที่ยอดถูกลด — ขึ้นใต้สูตรคิดรายวัน เฉพาะคนที่ถูกลดจริงเท่านั้น */
.ic-prepwhy{margin-top:6px;font-size:.82rem;line-height:1.55}
.ic-prepwhy .src{color:var(--dim);font-size:.76rem;margin-top:2px}
/* รายได้ Incentive (ก่อนหัก) — กรอบ "เขียว" (เงินที่ได้) */
.ic-before{text-align:center;flex:0 0 auto;border:1.5px solid var(--c1);
  background:var(--c1s);border-radius:12px;padding:9px 16px;min-width:150px}
.ic-before .l{font-size:.8rem;color:var(--brand-dark);font-weight:600}
.ic-before .l i{font-style:normal;font-weight:400;opacity:.75}
.ic-before .n{font-size:1.7rem;font-weight:800;color:var(--brand-dark);line-height:1.1;margin:2px 0 5px}
.ic-before .n span{font-size:.85rem;font-weight:600;color:var(--dim)}
.ic-cutttl{margin:0 0 10px;font-size:.86rem;color:var(--dim);font-weight:600}

.halfnote{margin-top:9px;padding:8px 11px;border-radius:8px;background:var(--clay-soft);
  color:var(--warn);font-size:.84rem;line-height:1.45}
.halfmark{display:inline-block;margin-left:3px;font-size:.7rem;color:var(--warn);
  font-weight:700;cursor:help}
.ic-h{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ic-h b{font-size:1rem}
.ic-cnt{margin-left:auto;font-weight:700;color:var(--brand-dark)}
.ic-auto{margin-top:6px;color:var(--dim)}
.ic-add{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 6px}
.ic-add input[type=date]{width:150px}
.ic-add input[type=text]{flex:1;min-width:160px}
.ic-list{display:flex;flex-direction:column;gap:5px}
.ic-row{display:flex;align-items:center;gap:10px;padding:6px 9px;
  background:var(--soft);border-radius:8px}
.ic-row .ic-d{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.ic-row .ic-n{flex:1;color:var(--dim);font-size:.88rem}
@media (max-width:820px){
  .ic-add input[type=date]{width:100%}
  .ic-add input[type=text]{width:100%}
}

/* หัวข้อกลุ่มในสลิปของพนักงาน — บอกชัดว่าตรงไหนบวก ตรงไหนหัก */
tr.slipsec td{background:var(--soft);font-weight:700;font-size:.84rem;
  color:var(--clay);letter-spacing:.02em;padding:8px 10px}
tr.slipsum td{background:var(--brand-soft);font-weight:700;
  border-top:1px solid var(--line)}
tr.slipnote td{color:var(--dim);font-size:.78rem;padding-top:0;border-bottom:none}

/* การ์ดย่อยในการ์ดใหญ่ — ใช้กับรายการที่ซ้ำกันหลายชุด
   เช่น ผลการประเมินแต่ละครั้ง ที่แต่ละชุดมีหลายบรรทัดในตัวเอง */
.subcard{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-top:14px;
  background:var(--soft)}
.subcard p{margin:8px 0;font-size:.9rem}
.subcard .stats{margin:12px 0}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:4px}

/* ช่องติ๊กในตาราง — กดที่ข้อความก็ติ๊กได้ ไม่ต้องเล็งกล่องเล็ก ๆ */
.chk{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-size:.84rem;white-space:nowrap}
.chk input{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--brand)}

/* กล่องคำรับรองก่อนยื่นใบลา (เจ้าของสั่ง 25 ก.ค. 2569 — ใช้เป็นหลักฐานในชั้นศาล)
   คำรับรอง = ตัวใหญ่ · ข้อความ PDPA = ตัวเล็กกว่า · จัดบรรทัดไม่ให้ซ้อน อ่านง่าย */
.certify-box{border:1.5px solid var(--line);border-radius:12px;padding:13px 15px;
  background:var(--soft);margin:14px 0 4px;transition:border-color .15s,background .15s}
.certify-box.need{border-color:var(--bad);background:var(--c1s)}
.chk.cert{display:flex;align-items:flex-start;gap:10px;white-space:normal;cursor:pointer}
.chk.cert input{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.certify-box .cert-txt{font-size:1rem;font-weight:600;line-height:1.55;color:var(--text)}
.certify-box .cert-note{margin:9px 0 0;padding-left:32px;font-size:.8rem;
  line-height:1.5;color:var(--dim)}

/* แถวที่จ่ายเงินแล้ว = เขียว · ยังค้างจ่าย = เหลือง
   ให้กวาดตาครั้งเดียวรู้ว่าเหลือใครยังไม่ได้เงิน */
tr.paid td{background:var(--c1s)}
tr.paid td:first-child{box-shadow:inset 3px 0 0 var(--c1)}
tr.waiting td{background:var(--c2s)}
tr.waiting td:first-child{box-shadow:inset 3px 0 0 var(--c2)}
tbody tr.paid:hover td{background:var(--c1s);filter:brightness(.98)}
tbody tr.waiting:hover td{background:var(--c2s);filter:brightness(.98)}
@media (prefers-color-scheme:dark){ .tag.bad{background:#2E211F} }

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;background:var(--text);
  color:var(--bg);padding:12px 22px;border-radius:10px;display:none;z-index:99;max-width:90vw;
  box-shadow:0 8px 28px rgba(0,0,0,.22);font-size:.92rem;font-weight:500}
#toast.bad{background:var(--bad);color:#fff}
#toast.ok{background:var(--ok);color:#fff}

.empty{text-align:center;color:var(--dim);padding:36px 14px;font-size:.9rem}
.note{background:var(--clay-soft);border:1px solid var(--clay);border-left-width:3px;
  border-radius:9px;padding:11px 16px;font-size:.87rem;margin-bottom:16px;line-height:1.6}
.note.green{background:var(--brand-soft);border-color:var(--brand)}
.note.red{background:rgba(176,58,47,.09);border-color:var(--bad)}
.note.bad{background:rgba(176,58,47,.09);border-color:var(--bad)}
/* หัวข้อของตารางเงินเดือนที่แยกตามประเภทการจ้าง (เจ้าของสั่ง 2 ส.ค. 2569)
   🔴 แตะเฉพาะ "หัวข้อเหนือตาราง" — ไม่แตะตัวตารางเลยแม้แต่กฎเดียว
      (ขนาดตัวอักษร/ความกว้าง/ช่องไฟของ .paytbl ห้ามเปลี่ยน · qc:wire 4.16) */
h3.paygrp{margin:20px 0 8px;font-size:.95rem;font-weight:700}
h3.paygrp:first-of-type{margin-top:6px}
.paygrp-n{font-weight:400;color:var(--dim);font-size:.82rem}
.money{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ============ การ์ดตัวเลขบนหน้าหลัก ============ */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:13px;margin-bottom:20px}
.stat{border:1px solid var(--line);border-radius:14px;padding:15px 17px;
  box-shadow:var(--shadow);background:var(--card);position:relative;overflow:hidden}
/* แถบสีด้านซ้าย บอกประเภทของตัวเลขด้วยสีในพริบตา */
.stat::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--clay)}
.stat .n{font-size:1.75rem;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums}
.stat .l{font-size:.81rem;color:var(--dim);font-weight:600}
.stat.c1{background:var(--c1s)} .stat.c1::before{background:var(--c1)} .stat.c1 .n{color:var(--c1)}
.stat.c2{background:var(--c2s)} .stat.c2::before{background:var(--c2)} .stat.c2 .n{color:var(--c2)}
.stat.c3{background:var(--c3s)} .stat.c3::before{background:var(--c3)} .stat.c3 .n{color:var(--c3)}
.stat.c4{background:var(--c4s)} .stat.c4::before{background:var(--c4)} .stat.c4 .n{color:var(--c4)}
.stat.c5{background:var(--c5s)} .stat.c5::before{background:var(--c5)} .stat.c5 .n{color:var(--c5)}
.stat.c6{background:var(--c6s)} .stat.c6::before{background:var(--c6)} .stat.c6 .n{color:var(--c6)}
/* ตัวเลขเป็นศูนย์ = ไม่มีอะไรต้องสนใจ ทำให้จางลงจะได้ไม่ดึงสายตา */
.stat.zero{background:var(--card)} .stat.zero .n{color:var(--dim)} .stat.zero::before{background:var(--line)}
.stat.click{cursor:pointer;transition:transform .12s,box-shadow .12s}
.stat.click:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(60,58,44,.10)}

/* หัวการ์ดมีเส้นสีคั่น ให้แต่ละส่วนแยกกันชัด */
.card.accent{border-top:3px solid var(--brand)}
.card.accent-clay{border-top:3px solid var(--clay)}
.card.accent-bad{border-top:3px solid var(--bad)}

/* ============ ตารางการทำงานแบบปฏิทิน ============ */
.cal{border-collapse:separate;border-spacing:0;font-size:.8rem;min-width:820px}
.cal th,.cal td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  padding:6px 7px;text-align:center;white-space:nowrap}
.cal th.name,.cal td.name{text-align:left;position:sticky;left:0;background:var(--card);
  min-width:165px;z-index:1;font-weight:600}
.cal thead th{background:var(--soft)}
.cal td.off{background:var(--clay-soft);color:var(--dim)}
.cal td.none{color:var(--dim)}
.cal td.set{background:var(--brand-soft)}
.cal th.wknd{color:var(--clay)}
.cal td.hol,.cal th.hol{background:#FBEEEB;color:var(--bad)}

/* ตารางรายเดือน — ช่องแคบลง เพราะมีถึง 31 คอลัมน์ */
.cal.month{min-width:1000px;font-size:.76rem}
.cal.month td,.cal.month th{padding:4px 3px;min-width:26px}
.cal.month td.set{font-weight:700;color:var(--brand-dark);font-variant-numeric:tabular-nums}
.cal.month td.off{background:var(--clay-soft)}
.cal.month td.name,.cal.month th.name{min-width:150px}
.cal.month td.name .sub{display:block;color:var(--dim);font-size:.68rem;font-weight:400}
.cal.month th.todaycol{background:var(--brand);color:#fff}
/* ช่องวันในตารางงาน — ใช้สีเข้มพอให้อ่านตัวหนังสือออกชัด ไม่ใช่โทนพาสเทลเหมือนส่วนอื่นของเว็บ
   เพราะตารางนี้ต้องอ่านเร็วจากระยะไกล และต้องพิมพ์ออกกระดาษแล้วยังชัด */
.cal td.lv{font-weight:800;color:#fff}
.cal td.lv-sick{background:#2E7D46}          /* SL ลาป่วย — เขียวเข้ม */
.cal td.lv-personal{background:#2C6EA8}      /* PL ลากิจ — น้ำเงิน */
.cal td.lv-annual{background:#5B8C2A}        /* AL ลาพักร้อน — เขียวมะกอก */
.cal td.lv-holiday_comp{background:#1F5E8C}  /* EX วันหยุดนักขัตฤกษ์ — น้ำเงินเข้ม */
.cal td.lv-unpaid{background:#B3303F}        /* WP ลาไม่รับค่าจ้าง — แดงเข้ม */
/* 🔴 3 ตัวนี้เป็นสิทธิที่สัญญาข้อ 14 เขียนรับรองไว้ (เพิ่ม 13 ส.ค. 2569)
   ⚠️ เพิ่มประเภทการลาใหม่ที่ LEAVE_CODES แล้วต้องมาเติมสีที่นี่ด้วย
      ไม่งั้นช่องในตารางเป็นพื้นขาวตัวขาว = อ่านไม่เห็นเลย */
.cal td.lv-maternity{background:#A8386B}     /* ML ลาคลอดบุตร — ชมพูเข้ม */
.cal td.lv-sterilization{background:#6B4E9E} /* ST ลาเพื่อทำหมัน — ม่วง */
.cal td.lv-military{background:#5A6340}      /* MT ลาราชการทหาร — เขียวขี้ม้า */
/* 🔴 2 ตัวนี้ผูกกับทะเบียนการคลอดบุตร (เจ้าของสั่ง 21 ส.ค. 2569) — คู่กับ LEAVE_CODES ใน shared-roster.ts
   ⚠️ ใช้สีเข้มคนละเฉดจาก 8 ตัวข้างบน (ไม่ใช่พาสเทลตามบรีฟ) — หลักเดียวกับความเห็นด้านบน:
      ช่องนี้ตัวหนังสือสีขาว พื้นพาสเทลจะอ่านไม่ออก */
.cal td.lv-childcare{background:#B8651C}     /* CC ลาเลี้ยงดูบุตร — น้ำตาลส้ม */
.cal td.lv-paternity{background:#1B7A72}     /* PT ลาช่วยภริยาคลอดบุตร — เขียวอมฟ้า (ทีล) */
.cal.month td.set{background:#D6EADF;color:#1B5E37;font-weight:700}
.cal.month td.off{background:#3F3F3F;color:#fff;font-weight:800}
.cal.month td.none{background:#F5F5F3;color:#9A9A94}
.cal td.holcell{box-shadow:inset 0 -3px 0 #C0392B}
.cal.month th.wknd{background:#FBE3E3;color:#A0342C}
.cal.month th.hol{background:#FCEFD4;color:#8A5A12}
.cal.month td.pos,.cal.month th.pos{text-align:left;min-width:110px;white-space:nowrap;
  font-size:.72rem;color:var(--dim);position:sticky;left:150px;background:var(--card);z-index:1}
tr.dimrow td{opacity:.55}

/* ตารางประเภทการลา — เจ้าของสั่ง "จัดหน้าให้เรียบร้อย" (27 ก.ค. 2569)
   ปัญหาเดิม: แถวสูงไม่เท่ากันเลย (วัดได้ 67·67·114·91·113 px)
   เพราะคำกำกับข้างช่องติ๊กทำให้แต่ละแถวหักบรรทัดไม่เท่ากัน
   แก้: เอาคำกำกับออก (ซ้ำกับหัวคอลัมน์) + จัดกึ่งกลาง + ล็อกไม่ให้ข้อความสั้นหักบรรทัด */
.lvtbl th{white-space:nowrap;vertical-align:bottom;line-height:1.3}
.lvtbl td{vertical-align:middle}
.lvtbl th.ck,.lvtbl td.ck{text-align:center}
.lvtbl td.nw{white-space:nowrap}
.lvtbl td.ck input[type=checkbox]{width:17px;height:17px;cursor:pointer;margin:0}

/* แถวที่ "มีเงินเกี่ยวข้อง" ต้องสะดุดตากว่าแถวอื่น
   ใช้ที่รายการลืมสแกนพัก — วันที่ทำให้เกิด OT งอกขึ้นมา ต้องตัดสินก่อนเพื่อน */
tr.hl td{background:var(--clay-soft)}
tr.hl td:first-child{box-shadow:inset 3px 0 0 var(--warn)}

/* หัวข้อคั่นกลางตาราง — ใช้ในตาราง "กะการทำงานทั้งหมด" ที่แยกเป็นหมวดตามตำแหน่ง
   ("สร้างกะเยอะๆ แล้วงง จัดเป็นหมวดๆ ตามตำแหน่ง") */
tr.grprow td{background:var(--brand-soft);color:var(--brand-dark);font-weight:700;
  font-size:.86rem;padding:9px 12px;border-top:2px solid var(--brand)}
tr.grprow .grpn{float:right;font-weight:600;font-size:.78rem;color:var(--dim)}
@media (prefers-color-scheme:dark){
  tr.grprow td{background:#1B2E22;color:var(--brand)}
}

/* ★ กะของหน่วยงานผู้อ่าน — เน้นบนหน้าจอเท่านั้น
   🚫 ไม่มีในเอกสารที่พิมพ์และที่ลงลายมือชื่อ (เอกสารต้องเป็นฉบับเดียวกันทุกคน) */
tr.polmine td{background:var(--brand-soft);font-weight:600}
@media (prefers-color-scheme:dark){
  tr.polmine td{background:#1B2E22}
}
@media (prefers-color-scheme:dark){
  .cal.month td.set{background:#1E4430;color:#B8E6C8}
  .cal.month td.off{background:#2A2A2A;color:#CFCFCF}
  .cal.month td.none{background:#1E211D;color:#6E756C}
  .cal.month th.wknd{background:#3A2220;color:#E8A9A2}
  .cal.month th.hol{background:#3A2E14;color:#E5C583}
}
.cal.month tr.grouprow td{background:var(--brand-soft);color:var(--brand-dark);
  font-weight:700;font-size:.8rem}
/* หัวสาขา — เข้มกว่าหัวแผนก ให้เห็นชัดว่าเปลี่ยนสถานที่แล้ว
   ครัวกลางใช้โทนน้ำตาล แยกจากหน้าร้านที่ใช้โทนเขียว (แยกท้ายสุด) */
.cal.month tr.branchrow td{background:var(--logo);color:#fff;
  font-weight:700;font-size:.86rem;letter-spacing:.02em;padding:7px 10px}
.cal.month tr.branchrow.central td{background:#6B5138}
@media (prefers-color-scheme:dark){
  .cal.month td.set{color:var(--brand)}
  .cal.month tr.grouprow td{color:var(--brand)}
}
@media (prefers-color-scheme:dark){ .cal td.hol,.cal th.hol{background:#2E211F} }
.cal td.pick{cursor:pointer}
.cal td.pick:hover{outline:2px solid var(--brand);outline-offset:-2px}
/* 🔴 ช่องที่ "กำลังจัดอยู่ตอนนี้" (เจ้าของแจ้ง 29 ก.ค. 2569)
   ระบบเลื่อนไปวันถัดไปให้เอง จึงต้องมีเครื่องหมายบอกว่าตอนนี้อยู่ช่องไหน
   ไม่งั้นพอตารางเลื่อน คนใช้จะหาไม่เจอว่ากำลังจัดวันไหนอยู่ */
/* วันที่ติดธง "มาเทรน" — มีดาวต่อท้ายเวลา + ขีดใต้ให้เห็นจากไกล */
.cal td.trn{box-shadow:inset 0 -3px 0 var(--brand)}
.cal td.nowedit{outline:3px solid var(--brand);outline-offset:-3px;
  box-shadow:0 0 0 3px rgba(0,0,0,.06)}

/* ตัวอย่างสีใต้ตารางการทำงาน */
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;border:1px solid var(--line);
  vertical-align:-2px;margin-right:4px}
.sw.set{background:var(--brand-soft)} .sw.off{background:var(--clay-soft)}
.sw.hol{background:#FBEEEB} .sw.none{background:var(--card)}
.sw.tr{background:var(--c2s);border-color:var(--c2)}
@media (prefers-color-scheme:dark){ .sw.hol{background:#2E211F} }

/* ============ ปฏิทินเลือกวันหยุดทั้งปี ============ */
.yearcal{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.yearcal .mon{border:1px solid var(--line);border-radius:10px;padding:9px 10px}
.yearcal .mh{font-weight:700;font-size:.87rem;text-align:center;margin-bottom:5px;color:var(--brand-dark)}
@media (prefers-color-scheme:dark){ .yearcal .mh{color:var(--brand)} }
.yearcal .dow,.yearcal .grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.yearcal .dow span{font-size:.66rem;color:var(--dim);font-weight:700}
.yearcal .grid span{font-size:.76rem;padding:3px 0;border-radius:5px}
.yearcal .grid span.d{cursor:pointer}
.yearcal .grid span.d:hover{background:var(--soft)}
.yearcal .grid span.on{background:var(--bad);color:#fff;font-weight:700}

/* ============ ตัวเลือกพนักงานแบบมีช่องค้นหา ============ */
.picker{display:grid;grid-template-columns:230px 1fr;gap:18px}
@media (max-width:760px){ .picker{grid-template-columns:1fr} }
.picker .list{border:1px solid var(--line);border-radius:11px;overflow:hidden;height:fit-content}
.picker .list input{border:none;border-bottom:1px solid var(--line);border-radius:0;background:var(--soft)}
.picker .list input:focus{box-shadow:none;border-color:var(--line)}
.picker .list .items{max-height:420px;overflow-y:auto}
.picker .list .items div{padding:9px 13px;cursor:pointer;font-size:.87rem;border-bottom:1px solid var(--line)}
.picker .list .items div:hover{background:var(--soft)}
.picker .list .items div.on{background:var(--brand-soft);color:var(--brand-dark);font-weight:600}

/* ============================================================
   🔴 โหมดมืด — แก้ตัวหนังสือขาวบนพื้นสีอ่อน (23 ก.ค. 2569)

   "รายการหัก (ลบออก) มองไม่เห็นตัวหนังสือ"
   ไล่ดูแล้วไม่ใช่จุดเดียว เป็นทั้งระบบ:
     โหมดสว่าง --brand/--logo/--c1..c6 เป็น "สีเข้ม" → ตัวหนังสือขาวอ่านออก
     โหมดมืด ตัวแปรพวกนี้กลับเป็น "สีอ่อน" แต่ตัวหนังสือยังถูกเขียนตายไว้ที่ #fff
     ผลคือ ขาวบนอ่อน = อ่านไม่ออก
   รวมทุกจุดไว้ที่เดียวตรงนี้ จะได้ไม่ต้องไล่แก้กระจัดกระจายอีก
   ⚠️ เพิ่มพื้นสีที่ใช้ตัวแปรพวกนี้เมื่อไหร่ ให้มาเพิ่มชื่อคลาสในบล็อกนี้ด้วย
   ============================================================ */
@media (prefers-color-scheme:dark){
  .orgnode.root,
  .orgtop,
  .person.on,
  .cal.month th.todaycol,
  .cal.month tr.branchrow td,
  .yearcal .grid span.on,
  #bell-dot,
  #toast.ok, #toast.bad{ color:#14201A }
  /* ⚠️ ห้ามใส่ .cal td.lv / .cal.month td.off ในนี้
     สองอันนั้นใช้พื้นสีเข้ม "ตายตัว" ไม่ได้กลับสีตามโหมด
     ตัวหนังสือขาวจึงถูกอยู่แล้ว แก้แล้วจะพังแทน */
  .person.on .pav{ background:rgba(0,0,0,.18);color:#14201A }
}

/* ============================================================
   🔴 แท็บย่อยอยู่ "แถวเดียว" ไม่ตกลงแถวล่าง
   หน้าระบบเงินเดือนมี 8 แท็บ ของเดิม flex-wrap ทำให้ตกลงไปแถวที่ 2
   → เลื่อนแนวนอนแทน · ซ่อนแถบเลื่อนไว้ให้ดูสะอาด
   ⚠️ วางหลัง .tabs เดิม (บรรทัด ~461) จึงชนะ — media query ไม่เกี่ยว
   ============================================================ */
.tabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  /* ปัดแท็บจนสุดแล้วต้องหยุดที่แถวแท็บ ไม่ส่งแรงต่อให้ทั้งหน้า */
  overscroll-behavior-x:contain;
  /* 🔴🔴 ต้นเหตุจริงของอาการ "แถบบนโยก" (เจ้าของแจ้ง 27 ก.ค. 2569)
     เจ้าของบอกชัดว่า "โยกแบบดึงขึ้น-ลงได้ ไม่ใช่เลื่อนซ้าย-ขวาอย่างเดียว"

     เขียนแค่ overflow-x:auto → ตามมาตรฐาน CSS overflow-y จะกลายเป็น auto เอง
     แถวแท็บสูงเกินกล่องอยู่ 1px (จาก margin-bottom:-3px ของปุ่ม + เส้นใต้)
     → แถบเลยถูก "ดึงขึ้น-ลง" ได้ 1px ตอนปัดนิ้ว = รู้สึกโยก ไม่นิ่ง
     ⚠️ วัดจริงแล้วเป็นทุกหน้า: เงินเดือน · ตั้งค่า · ทะเบียนบุคคล · รายงาน · ตารางงาน

     overflow-y:hidden = ล็อกให้เลื่อนได้แกนเดียว (ซ้าย-ขวา) เท่านั้น
     ⚠️ ห้ามเอาออก และห้ามเขียน overflow-x อย่างเดียวโดยไม่กำหนด overflow-y */
  overflow-y:hidden }
.tabs::-webkit-scrollbar{ display:none }
/* ชื่อแท็บห้ามตัดบรรทัด ไม่งั้นแถวแท็บสูงขึ้นเป็น 2 บรรทัด */
.tabs button{ white-space:nowrap; flex:0 0 auto }

/* ============================================================
   🔴🔴 บนคอมต้องเลื่อนแถบแท็บได้ (
   "แถบด้านบน ตั้งค่าระบบ ในคอมไม่สามารถเลื่อนแถบได้")

   ต้นเหตุ: ซ่อนแถบเลื่อนไว้ (scrollbar-width:none) เพื่อความสะอาด
   บนมือถือไม่มีปัญหาเพราะ "ปัดนิ้ว" ได้
   แต่บนคอมใช้เมาส์ — ไม่มีแถบให้ลาก และล้อเมาส์เลื่อนได้แต่แนวตั้ง
   → แท็บที่ล้นออกไปทางขวา กดไม่ถึงเลย (หน้าตั้งค่าระบบมี 8 แท็บ)

   แก้ 2 ทางคู่กัน:
     1) โชว์แถบเลื่อนบาง ๆ เฉพาะเครื่องที่ใช้เมาส์
     2) ล้อเมาส์เลื่อนแนวนอนได้ (โค้ดอยู่ที่ wheelToScrollTabs ใน admin-core)

   ⚠️ จำกัดด้วย (hover:hover) and (pointer:fine) = เครื่องที่มีเมาส์จริงเท่านั้น
      มือถือ/แท็บเล็ตไม่โดนแตะ — ของเดิมที่เจ้าของพอใจแล้วต้องไม่เปลี่ยน
   ⚠️ ต้องเพิ่ม padding-bottom ให้แถบเลื่อนมีที่ยืน ไม่งั้นมันจะทับตัวหนังสือ
      (แถวแท็บเป็น overflow-y:hidden แถบเลื่อนจึงกินความสูงข้างใน)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .tabs{ scrollbar-width:thin; scrollbar-color:var(--brand) transparent;
    padding-bottom:7px }
  .tabs::-webkit-scrollbar{ display:block; height:7px }
  .tabs::-webkit-scrollbar-thumb{ background:var(--brand); border-radius:4px }
  .tabs::-webkit-scrollbar-track{ background:var(--soft); border-radius:4px }
}

/* กล่องยอดประกาศ: โหมดอ่านอย่างเดียว (ยอดขายย้ายไปแท็บ กำหนด Incentive แล้ว) */
.announcebox .ab-val{ font-size:1.5rem;font-weight:800;color:var(--brand-dark);
  font-variant-numeric:tabular-nums;min-width:110px;text-align:right }
@media (prefers-color-scheme:dark){ .announcebox .ab-val{ color:var(--brand) } }

/* ============================================================
   หน้าประกาศ
   ⚠️ วางก่อนบล็อกมือถือท้ายไฟล์เสมอ — กฎเหล็ก: กฎมือถือต้องอยู่หลังสุด
   ============================================================ */
/* ---- แถวช่องติ๊กแผนก ---- */
.ckwrap{ display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 4px }
.ckchip{ display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  border:1px solid var(--line);border-radius:99px;padding:6px 14px 6px 11px;
  background:var(--card);font-size:.9rem;user-select:none;transition:.15s }
.ckchip:hover{ border-color:var(--brand);background:var(--soft) }
.ckchip input{ width:16px;height:16px;margin:0;accent-color:var(--brand);cursor:pointer }
/* :has() ให้ทั้งป้ายเปลี่ยนสีตามช่องติ๊กข้างใน — เห็นชัดว่าเลือกอันไหนอยู่ */
.ckchip:has(input:checked){ border-color:var(--brand);background:var(--soft);font-weight:600 }
.ckchip.all{ border-style:dashed }
.ckchip.all:has(input:checked){ border-style:solid }

/* ---- รายการข้อตกลงเพิ่มเติม (สัญญาจ้าง) — การ์ดสี่เหลี่ยมมุมมนพอดี ๆ
   ห้ามยืม .ckchip มาใช้ตรงนี้: .ckchip input{width:16px} มีไว้บีบ "ช่องติ๊กของเม็ดยา"
   เป็น selector แบบลูกทุกชั้น (descendant) จึงไปโดนช่องวันที่/ไฟล์ที่ซ้อนอยู่ข้างในด้วย
   (วัดจริง: input[type=file] เหลือกว้างแค่ ~16-26px ทั้งที่กล่องแม่กว้างพอ) */
.adrow{ border:1px solid var(--line);border-radius:12px;padding:10px 14px;
  background:var(--card);margin-bottom:8px;transition:.15s }
.adrow:hover{ border-color:var(--brand) }
.adrow:has(input.ad-ck:checked){ border-color:var(--brand);background:var(--soft) }
/* เจาะจงที่ .ad-ck (ช่องติ๊กของแถวนี้) เท่านั้น — กันไม่ให้ไปโดนช่องอื่นที่ซ้อนอยู่ข้างในซ้ำรอย .ckchip */
.adrow input.ad-ck{ width:16px;height:16px;margin:0;accent-color:var(--brand);
  cursor:pointer;vertical-align:middle }
/* ชื่อข้อตกลงบางชื่อเป็นรหัส/คำอังกฤษยาวไม่มีช่องว่างเลย (เช่น URL หรือรหัสสินค้า)
   เบราว์เซอร์หาจุดตัดคำแบบปกติไม่เจอ (ไม่มีที่ว่าง) แล้วดันกล่องล้นแทนที่จะตัดบรรทัด
   🔴 break-word ตัดเฉพาะตอนคำเดียวยาวเกินบรรทัดจริง ๆ เท่านั้น ไม่กระทบการตัดคำไทยปกติ
   🚫 ห้ามใช้ overflow-wrap:anywhere — จะหักกลางคำไทยจนสระ/วรรณยุกต์หลุดจากพยัญชนะ */
.adrow b{ overflow-wrap:break-word }

/* ---- การ์ดประกาศที่กำลังเผยแพร่ ---- */
.anitem{ border:1px solid var(--line);border-left:4px solid var(--dim);
  border-radius:10px;padding:14px 16px;margin-bottom:12px;background:var(--card) }
.anitem.info{ border-left-color:var(--brand) }
.anitem.warn{ border-left-color:#B8912F }
.anitem.urgent{ border-left-color:#C0564A }
.anhead{ display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px }
.anhead b{ font-size:1.04rem;line-height:1.4 }
/* ขึ้นบรรทัดใหม่ตามที่พิมพ์มาจริง — ต้องตรงกับที่พิมพ์ออกกระดาษ */
.anbody{ white-space:pre-wrap;line-height:1.7;color:var(--text);margin-bottom:10px }
.anmeta{ display:flex;flex-wrap:wrap;gap:4px 18px;font-size:.83rem;color:var(--dim);
  padding-top:9px;border-top:1px solid var(--line) }
.anmeta b{ color:var(--text);font-weight:600 }
.anact{ display:flex;gap:8px;flex-wrap:wrap;margin-top:11px }

/* ============================================================
   เฉพาะมือถือ: ตารางจัดกะรายเดือน (31 วัน) ให้เห็นวันได้เยอะขึ้น
   (บนคอมเหมือนเดิมทุกอย่าง)
   เดิมบนมือถือ: ชื่อ 150px + ตำแหน่ง 110px = เหลือดูวันแค่ ~115px (เห็น 4 วัน)
   ⚠️ ต้องวางท้ายไฟล์ ให้อยู่หลัง .cal.month เดิม ไม่งั้นโดนทับ
   ⚠️ คอลัมน์ตำแหน่งใช้ "ยุบความกว้าง" ไม่ใช่ display:none — กันแถวที่ใช้ colspan เพี้ยน
   ============================================================ */
@media (max-width:640px){
  .cal.month td.pos,.cal.month th.pos{position:static;min-width:0;width:0;max-width:0;
    padding:0;font-size:0;overflow:hidden;border-right:none}
  /* 🔴 เจ้าของสั่ง 26 ก.ค. 2569 ให้ตารางขึ้นชื่อ-นามสกุล
     ชื่อจริงยาวกว่าชื่อเล่นมาก 76px เดิมจึงแคบเกินไป
     ⚠️ ต้องปลด white-space:nowrap ของ .cal ด้วย ไม่งั้นชื่อล้นทับคอลัมน์วัน */
  .cal.month td.name,.cal.month th.name{min-width:104px;max-width:104px;padding:5px 6px;
    font-size:.72rem;white-space:normal;line-height:1.25;word-break:break-word}
  .cal.month td.name .sub{font-size:.6rem}
  .cal.month{min-width:0;font-size:.72rem}
  .cal.month td,.cal.month th{min-width:22px;padding:5px 2px}
}

/* ============================================================
   เฉพาะมือถือ ฝั่งผู้บริหาร —
   (บนคอมเหมือนเดิมทุกอย่าง · กฎอยู่ท้ายไฟล์เพื่อให้ชนะกฎเดิมเสมอ)
   1) พนักงานทั้งหมด    : ชื่อ-นามสกุล ต้องอยู่บรรทัดเดียว
   2) ค้างเอกสาร        : ชื่อ-นามสกุล + วันที่ลา ต้องอยู่บรรทัดเดียว
   3) แจ้งเตือน 📎/🔔   : กล่องล้นขอบจอ
   ============================================================ */
@media (max-width:640px){
  /* ---- 1) พนักงานทั้งหมด: ชื่อบรรทัดเดียว ---- */
  #tb-emp td:nth-child(2),#tb-emp th:nth-child(2){white-space:nowrap}

  /* ---- 2) ค้างเอกสาร: ชื่อ (ช่อง 2) + วันที่ลา (ช่อง 4) บรรทัดเดียว ---- */
  #tb-doc td:nth-child(2),#tb-doc th:nth-child(2),
  #tb-doc td:nth-child(4),#tb-doc th:nth-child(4){white-space:nowrap}

  /* ---- 3) กล่องแจ้งเตือน 📎/🔔 ล้นขอบจอ ----
     🔴 ต้นเหตุ: กล่องผูกตำแหน่งกับ .bellwrap (ตัวปุ่ม) ซึ่งขอบขวาห่างขอบจอ ~73px
        กล่องกว้าง 330px ยื่นไปทางซ้ายจนพ้นจอ 29px แล้วโดน .wrap (overflow:hidden) ตัดทิ้ง
        ⚠️ แค่ลดความกว้างไม่พอ — ยิ่งกว้างยิ่งล้น ต้องเปลี่ยน "จุดยึด"
     ✅ วิธีแก้: บนมือถือให้ .bellwrap เป็น static → กล่องไปยึดกับ .topbar ที่กว้างเต็มจอแทน
        แล้วกาง left/right 10px = พอดีจอเสมอ ไม่ว่าปุ่มจะอยู่ตรงไหน
     วัดจริงที่ 375px: ก่อนแก้ ซ้าย=-29 (ล้น) → หลังแก้ ซ้าย=10 ขวา=365 พอดี ✓ */
  .bellwrap{position:static}
  #bellbox,#docbox{left:10px;right:10px;width:auto;max-width:none;top:calc(100% + 6px)}
  #bellbox .bitem,#docbox .bitem{gap:8px;padding:11px 13px}
  #bellbox .bitem > div,#docbox .bitem > div{min-width:0;flex:1 1 auto}
  #bellbox .bitem b,#docbox .bitem b{overflow-wrap:anywhere}
  #bellbox .bbody,#docbox .bbody,
  #bellbox .btime,#docbox .btime{overflow-wrap:anywhere}
  #bellbox .tag,#docbox .tag{white-space:normal;max-width:100%}
  #bellbox .bhead,#docbox .bhead{flex-wrap:wrap}
  #bellbox .bfoot,#docbox .bfoot{flex-wrap:wrap}

  /* ---- 4) 🔴🔴 คำนวณเงินเดือนบนมือถือ: "ห้ามบีบตาราง" (เจ้าของสั่ง 27 ก.ค. 2569) ----
     "ตรงตารางดูไม่รู้เรื่อง ตัวหนังสือเพี้ยน แบบเดิมดีอยู่แล้ว"

     ของที่เคยใส่ไว้แล้วต้องเอาออก (ผมทำเอง 26 ก.ค. โดยเข้าใจว่าช่วยให้อ่านง่ายขึ้น):
       .scroll table.paytbl{font-size:.71rem}      ย่อตัวอักษรเหลือ 11 px
       table.paytbl th,td{padding:6px 4px}         บีบช่องให้แคบ
       table.paytbl thead th{overflow-wrap:anywhere}   ← 🔴 ตัวการจริง
       ตรึงคอลัมน์ รหัส+ชื่อ พร้อม max-width:88px + ellipsis (ชื่อโดนตัดหาย)

     🔴 ทำไม overflow-wrap:anywhere ถึงพัง: มันอนุญาตให้ "หักบรรทัดตรงไหนก็ได้"
        เบราว์เซอร์จึงคิดว่าความกว้างน้อยสุดของหัวตาราง = 1 ตัวอักษร
        พอมี 21 คอลัมน์ ตารางเลยบีบทุกช่องเหลือ 1 ตัวอักษรต่อบรรทัด
        ภาษาไทยโดนหั่นแยกสระ/วรรณยุกต์ออกจากพยัญชนะ = อ่านไม่ออก
        วัดจริงที่ 375px: หัวตารางกว้าง 17-19px สูง 216px (ควรสูง ~78px)

     ✅ แก้แล้วด้วยการ "ไม่ทำอะไรเลย" — ปล่อยให้ใช้กฎเดียวกับตารางอื่นทั้งระบบ
        (.scroll table{font-size:.88rem} + .paytbl th,td{padding:7px 9px})
        แล้วเลื่อนดูซ้าย-ขวาเอาเหมือนตารางอื่น ซึ่งเจ้าของคุ้นอยู่แล้ว
        วัดหลังแก้ที่ 375px: หัวตารางสูง 78px · คำไม่ถูกหั่นกลางคำ

     🚫 ห้ามกลับไปย่อ/บีบ/ใส่ overflow-wrap:anywhere ที่ตารางนี้อีก
        ตารางนี้ถูกออกแบบใหม่แล้วเจ้าของปฏิเสธ 2 ครั้ง:
          1) 26 ก.ค. เปลี่ยนเป็นการ์ดรายคน → สั่งเอาตารางกลับ
          2) 27 ก.ค. ย่อ+บีบให้เห็นหลายคอลัมน์ → สั่งเอาแบบเดิมกลับ
        บทเรียน: "เห็นได้กี่คอลัมน์พร้อมกัน" ไม่ใช่ตัววัดว่าอ่านง่ายขึ้น
        คราวนั้นวัดว่า 6 → 10 คอลัมน์ แล้วสรุปว่าดีขึ้น ทั้งที่อ่านไม่ออกแล้ว
        qc:wire ข้อ 4.16 ดักไว้ไม่ให้กลับมา */
}

/* ============================================================
   รูปพนักงาน
   ยังไม่มีรูป = วงกลมตัวอักษรย่อ (ไม่ปล่อยเป็นช่องว่างโหว่)
   มีรูปแล้ว = ใส่เป็นพื้นหลัง แล้วซ่อนตัวอักษร
   ============================================================ */
.avatar{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border-radius:50%;background-color:var(--brand-soft);color:var(--brand-dark);
  font-weight:800;line-height:1;overflow:hidden;vertical-align:middle;
  background-size:cover;background-position:center;border:1px solid var(--line)}
.avatar.has-img{background-color:transparent}
.avatar.has-img i{display:none}
.avatar i{font-style:normal;letter-spacing:.02em}
.av-sm{width:30px;height:30px;font-size:.7rem}
.av-md{width:46px;height:46px;font-size:.95rem}
.av-lg{width:104px;height:104px;font-size:1.9rem;border-width:2px}
/* แถวชื่อในตาราง: รูปกับชื่ออยู่บรรทัดเดียวกัน */
.avrow{display:flex;align-items:center;gap:9px;min-width:0}
.avrow > div{min-width:0}
/* กล่องรูปในหน้าโปรไฟล์ + ฝั่งพนักงาน */
.photobox{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
/* 🔴 ช่องข้อมูลที่พนักงานดูได้อย่างเดียว (หน้าข้อมูลส่วนตัวของฉัน · 31 ส.ค. 2569)
   🚫 ไม่ใช้ <input disabled> — ชวนให้คิดว่าเปิดได้ และเปิดด้วย devtools ได้ */
.mp-ro{padding:9px 11px;border:1px solid var(--line,#DDD8CF);border-radius:9px;
  background:var(--soft,#F5F3EE);color:var(--dim,#6B6F6C);min-height:20px}
.photobox .pb-act{display:flex;flex-direction:column;gap:7px;min-width:170px}
.photobox .pb-act .btn{width:100%}
.pb-pending{border:1px dashed var(--warn,#C79A2E);border-radius:12px;padding:10px 12px;
  background:var(--c2s,#FBF4E2);margin-top:10px}
@media (prefers-color-scheme:dark){
  .pb-pending{background:#332C18;border-color:#7A6A3A}
}
/* ============================================================
   🪪 แถบชื่อ-นามสกุลตามกฎหมาย (เจ้าของสั่ง 20 ส.ค. 2569)
   🔴 เจ้าของทักว่า "ช่องใหญ่เกินไป" — ของเดิมเป็นการ์ดเต็มใบ
      ย่อเหลือ **แถบเดียว** ชื่อซ้าย ปุ่มขวา · ประวัติ/ฟอร์มซ่อนหลังปุ่ม
   🚫 ห้ามเปลี่ยนกลับเป็น .card — กินพื้นที่เท่าหัวข้อใหญ่ทั้งที่นาน ๆ ใช้ที
   ⚠️ มือถือ: .nc-head ต้องพับลงเป็นแนวตั้ง ไม่งั้นปุ่มล้นขอบจอ
      (กฎเหล็กเรื่อง CSS มือถือ — พลาดมาแล้ว 3 รอบ)
   ============================================================ */
.nc-bar{border:1px solid var(--line,#DDD6C7);border-radius:12px;
  padding:10px 12px;margin:12px 0;background:var(--card2,transparent)}
.nc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.nc-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1 1 240px}
.nc-ico{font-size:1.35rem;line-height:1;flex:none}
.nc-id > div{min-width:0}
.nc-name{font-weight:700;font-size:1.02rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-sub{font-size:.76rem;color:var(--dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-warn{color:var(--bad,#B3392F);font-weight:600}
.nc-btns{display:flex;gap:7px;flex:none;flex-wrap:wrap}
@media(max-width:560px){
  .nc-head{flex-direction:column;align-items:stretch}
  .nc-btns{width:100%}
  .nc-btns .btn{flex:1 1 auto}
  .nc-name,.nc-sub{white-space:normal}
}

/* ============================================================
   🔢 ช่องตัวเลขที่จัดรูปแบบแล้ว (เจ้าของสั่ง 20 ส.ค. 2569)
   🔴 เงินชิดขวา + ตัวเลขความกว้างเท่ากัน → เทียบยอดตามแนวตั้งได้
   ⚠️ เลขบัตร/เบอร์ชิดซ้ายตามปกติ — เป็นรหัส ไม่ใช่จำนวน
   ============================================================ */
input.fmt-money{text-align:right;font-variant-numeric:tabular-nums}
input.fmt-thaiid,input.fmt-tel{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* เทียบรูปเก่า/ใหม่ ตอน ผจก อนุมัติ */
.pcompare{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pcompare figure{margin:0;text-align:center}
.pcompare figcaption{font-size:.75rem;color:var(--dim);margin-top:5px}

/* ============================================================
   ตารางงานเดินตามรอบจ่ายเงินเดือน 26→25 (จะได้ไม่งง 25-26)
   ตารางจึงคร่อม 2 เดือน → ต้องบอกชื่อเดือนตรงวันแรกและตรงวันที่ข้ามเดือน
   ============================================================ */
.cal.month th .mth{display:block;font-size:.58rem;font-weight:700;color:var(--brand-dark);
  line-height:1.1;margin-top:1px}
.cal.month th.mstart{border-left:2px solid var(--brand)}
@media (prefers-color-scheme:dark){ .cal.month th .mth{color:var(--brand)} }

/* ============================================================
   ใบตรวจประวัติการสแกนรายคน (เอาไว้เป็นหลักฐาน)
   ตารางยาว 30 แถว → ต้องกวาดตาหาวันได้เร็ว จึงแต้มสีวันหยุด/เสาร์อาทิตย์
   ⚠️ คลาส .c (จัดกึ่งกลาง) ยังไม่มีบนจอ ต้องประกาศเอง แต่จำกัดไว้ในตารางนี้
      ไม่ประกาศเป็น .c ลอย ๆ เพราะชื่อสั้นเกินไป เดี๋ยวไปโดนที่อื่นเข้า
   ============================================================ */
table.scancard td.c,table.scancard th.c{text-align:center}
table.scancard tr.wkrow td{background:var(--c1s,#FBE3E3)}
table.scancard tr.holrow td{background:#FCEFD4}
table.scancard td{vertical-align:top}
@media (prefers-color-scheme:dark){
  table.scancard tr.wkrow td{background:#3A2220}
  table.scancard tr.holrow td{background:#332C18}
}

/* ============================================================
   🔴 ฟอร์มยื่นใบลาฝั่งพนักงาน — บีบให้พอดีจอมือถือ
   ("ในมือถือ ยื่นใบลาล้นจอมาด้านล่าง")

   ของเดิมสูง 987px บนจอสูง 812px → ปุ่ม "ยื่นใบลา" ตกไปนอกจอ
   ต้องเลื่อนลงไปหา ซึ่งบนมือถือจริงยิ่งแย่เพราะมีแถบที่อยู่เว็บกินที่อีก

   ⚠️ กฎเหล็ก 3 ข้อของไฟล์นี้ (พลาดมาแล้ว 3 รอบ):
     1. ห้ามซ้อน @media ใน @media  → เขียนแยกเป็นเงื่อนไขเดียว
     2. media query ไม่เพิ่ม specificity → กฎมือถือต้องอยู่ "ท้ายไฟล์" แบบนี้
     3. ต้องชนะ specificity ด้วย → จึงเจาะที่ #me-form (id ชนะ class เสมอ)
   ⚠️ บนคอมต้องเหมือนเดิมเป๊ะ — ทุกกฎด้านล่างอยู่ใน @media มือถือเท่านั้น
   ============================================================ */
@media (max-width:640px){
  /* ---- 2 ช่องวันที่อยู่แถวเดียวกัน (ประหยัดไป 1 แถวเต็ม ๆ) ----
     div ที่ไม่ได้ติดป้าย half ยังเต็มความกว้างเหมือนเดิม */
  #me-form .row.mixed{grid-template-columns:1fr 1fr;gap:0 10px}
  #me-form .row.mixed > div{grid-column:1 / -1}
  #me-form .row.mixed > div.half{grid-column:auto}
  /* 🔴 ช่องในตารางกริดไม่ยอมหดต่ำกว่าความกว้างเนื้อหาของตัวเอง (ค่าเริ่มต้น min-width:auto)
     ดรอปดาวน์ "ประเภทการลา" มีตัวเลือกชื่อยาว จึงดันกล่องกว้าง 358px ทั้งที่มีที่แค่ 305px
     → ต้องสั่ง min-width:0 ที่ "ตัวลูกของกริด" ไม่ใช่ที่ตัว select
       (ตัว select มี max-width:100% อยู่แล้ว แต่ 100% ของกล่องที่บวมไปแล้วก็ยังบวมอยู่ดี) */
  #me-form .row.mixed > div{min-width:0}

  /* ---- ลดระยะห่างของทุกช่องกรอกในฟอร์มนี้ ----
     ป้ายกำกับกับช่องกรอกเดิมกินแถวละ ~82px → เหลือ ~68px */
  #me-form label{margin:9px 0 3px}
  #me-form input,#me-form select{padding:8px 11px}

  /* ⚠️ .card.accent (0,2,0) ชนะกฎมือถือ .card (0,1,0) การ์ดนี้จึงยังใช้ padding 22px
     ต้องเจาะด้วย id ให้ specificity สูงกว่า (1,1,0) ถึงจะบีบได้จริง */
  #me-form .card{padding:15px 14px}
  #me-form h2{margin:0 0 4px}
  #me-form p.hint{margin:0 0 4px;line-height:1.45}

  /* ---- ปุ่มแนบไฟล์: ข้อความอธิบายไปอยู่บรรทัดเดียวกับปุ่ม ---- */
  #me-form .attach-box{gap:8px}
  #me-form .attach-hint{font-size:.75rem;flex:1 1 120px}

  /* ---- กล่องคำรับรอง: บีบขนาดตัวอักษรและระยะขอบ ----
     🔴 ห้ามแก้ "ข้อความคำรับรอง" เด็ดขาด — ต้องตรงกับที่บันทึกเป็นหลักฐาน
        (LEAVE_CERTIFY_TEXT ใน leave.service.ts) ปรับได้แค่ขนาด/ระยะ */
  #me-form .certify-box{padding:10px 12px;margin:10px 0 4px}
  #me-form .certify-box .cert-txt{font-size:.9rem;line-height:1.45}
  #me-form .certify-box .cert-note{margin-top:7px;padding-left:30px;font-size:.72rem;line-height:1.4}
  #me-form .chk.cert input{width:20px;height:20px}

  /* ---- ปุ่มยื่นเกาะอยู่ท้ายจอเสมอ ----
     ต่อให้ฟอร์มยาวกว่าจอ ก็ยังเห็นปุ่มและเห็นว่า "ยังติ๊กคำรับรองไม่ครบ"
     ⚠️ ต้องมีพื้นหลังทึบ ไม่งั้นข้อความใต้ปุ่มจะทะลุขึ้นมาซ้อน */
  #me-form .actions{position:sticky;bottom:0;background:var(--card);
    padding:9px 0 2px;margin-top:6px;z-index:2}
  #me-form .actions .btn{width:100%}
}

/* ============================================================
   🔴 กล่องข้อตกลงเพิ่มเติม (.adrow) — ช่องวันที่/ไฟล์/ปุ่ม ต้องเรียงลงมา
   ทีละบรรทัดบนจอเล็กเสมอ (เจ้าของสั่ง: "จอเล็ก ... เรียงลงมาทีละบรรทัด")

   ⚠️ วัดจริงแล้วพบว่า .row ตัวกลาง (บรรทัด "repeat(auto-fit,minmax(195px,1fr))"
   ท้ายไฟล์ ไม่มี @media ครอบ) ชนะกฎมือถือของ .row เอง (.row{grid-template-columns:1fr}
   ใน @media ก่อนหน้านี้) ทุกครั้งที่กล่องกว้าง >= ~406px แม้ยังอยู่ในโซนมือถือ
   (specificity เท่ากัน (0,1,0) แล้วกฎที่ไม่มี @media มาทีหลังในไฟล์ชนะ)
   → เป็นบั๊กที่มีอยู่แล้วของ .row ตัวกลางเอง ไม่ใช่เฉพาะกล่องนี้ แต่ "งาน A" นี้
   ห้ามแก้ .row ตัวกลาง (ใช้อยู่หลายหน้าทั่วระบบ) จึงเจาะจงเฉพาะที่นี่ด้วย
   .adrow .row (specificity 0,2,0) ซึ่งชนะ .row (0,1,0) ได้เองไม่ต้องพึ่งลำดับไฟล์
   ============================================================ */
@media (max-width:640px){
  .adrow .row{grid-template-columns:1fr}
}
/* ⚠️ อัปเดตหลังงาน C (แก้ .row ตัวกลางให้ครบ): กฎ .adrow .row ด้านบนนี้
   ยังจำเป็นอยู่ ไม่ซ้ำซ้อน — งาน C ไม่ได้แตะจำนวนคอลัมน์ของ .row ตัวกลางเลย
   (วัดแล้วที่ ~600px ขึ้น 2 คอลัมน์ไม่ล้น ดูดีกว่าบีบเป็น 1 คอลัมน์จึงไม่บังคับ)
   .adrow .row จึงยังเป็นกฎเดียวที่บังคับ 1 คอลัมน์ในกล่องแคบนี้ต่อไป */

/* ============================================================
   🔴🔴 งาน C (2026-08-03) — กฎมือถือของ .row "ตัวกลาง" ที่ไม่เคยมีผลจริง
   ('ของเดิม: .row{grid-template-columns:1fr;gap:0} ใน @media ต้นไฟล์
   เท่ากัน specificity (0,1,0) กับ .row ตัวจริงท้ายไฟล์ที่ไม่มี @media ครอบ
   → อันที่ไม่มี @media ชนะเสมอเพราะมาทีหลังในไฟล์ บรรทัดนั้นจึงไม่เคยมีผล)

   วัดจริงที่ 375px / 600px / 1280px ก่อนแก้ (getBoundingClientRect,
   ไม่ใช้ screenshot) ทุกจุดที่ใช้ .row ทั้งระบบ (91 จุด):
     375px  → auto-fit ยุบเหลือ 1 คอลัมน์เองอยู่แล้ว (2 คอลัมน์ต้องการ
              195×2+16=406px ซึ่งกว้างกว่าการ์ดบนจอ 375px) ไม่มีจุดไหนล้น
     600px  → ยืนที่ 2 คอลัมน์ (การ์ดกว้าง ~530px) กว้างคอลัมน์ละ ~257px
              ยังไม่มีจุดไหนล้น และ 2 คอลัมน์อ่านง่ายกว่าบีบเป็น 1 คอลัมน์
              (ฟอร์มยาว เช่น "สร้างบัญชีผู้ใช้" 6 ช่อง จะเลื่อนยาวเกินจำเป็น)
     → เลือกคงพฤติกรรม 2 คอลัมน์ที่จอราว 600px จากตัวเลขที่วัดได้จริงข้างต้น
       (คอลัมน์ 257px · ไม่มีจุดไหนล้น · จอคอมไม่ขยับ) เจ้าของร้านได้รับคำอธิบาย
       พร้อมตัวเลขนี้แล้วและตัดสินใจเลือกทางนี้เอง (ดูรายงาน task-C-report.md)
     → จึง "ไม่บังคับจำนวนคอลัมน์ใหม่" ที่นี่ (ของเดิมที่ auto-fit ทำอยู่ถูกแล้ว)

   สิ่งที่ยังต้องแก้จริง — กับดัก min-width:auto (เจ้าของเจอมาแล้วที่กล่อง
   .adrow ด้านบน): input/select/textarea มี min-width:0 ให้แล้วทั้งระบบ
   (บรรทัด "input,select,textarea{...min-width:0...}" ต้นไฟล์) แต่ตัว
   "ลูกของกริดโดยตรง" (div ที่ห่อ label+input ไว้) ยังเป็นค่าเริ่มต้น
   min-width:auto อยู่ — ถ้าข้างในมีของที่หดไม่ได้ (input type=file,
   ปุ่มไม่ห่อบรรทัด, select ตัวเลือกยาว) กล่องจะดันกว้างเกินคอลัมน์
   แล้วล้นออกนอกจอ (อาการเดียวกับที่เคยเกิดในกล่อง .adrow)
   → ปิดกับดักนี้ "ทั้งระบบ" ตามที่งานนี้สั่ง โดยยังไม่แตะจำนวนคอลัมน์เลย

   🔒 ทั้งบล็อกนี้อยู่ใน @media (max-width:640px) เท่านั้น — จอคอม 1280px
   ไม่ถูกแตะแม้พิกเซลเดียว (วัดยืนยันแล้ว ดูรายงาน)
   ============================================================ */
@media (max-width:640px){
  .row>*{min-width:0}
}

/* ============================================================
   🔴 กล่องเซ็นด้วยนิ้ว (.sig-*) บนจอเล็ก — งานที่ 4 จาก 6
   ปุ่ม ล้าง/ยกเลิก/เซ็นชื่อ เรียงเต็มความกว้างทีละบรรทัด (นิ้วกดง่ายขึ้น)
   หลักเดียวกับ #me-form .actions .btn{width:100%} ด้านบน
   ============================================================ */
@media (max-width:640px){
  .sig-modal{padding:15px 14px}
  .sig-actions{flex-direction:column}
  .sig-actions .btn{width:100%}
}

/* ============================================================
   🔴🔴🔴 มุมมองสัญญาในหน้าข้อมูลพนักงาน (#ct-view) — เจ้าของสั่ง 4 ส.ค. 2569
   *"ไม่ใช้เซ็นแยกแบบนี้ เซ็นในสัญญาเลย ... เซ็นในสัญญาหน้าเว็บเลย แล้วกดพิมพ์เอา"*

   🚫 ที่นี่ **ห้ามมีกฎที่แตะความสูง/ความกว้างของตัวเอกสาร** (.ct-* ทุกตัว)
      หน้าตาเอกสารมีแหล่งเดียวคือ ctDocCss() ใน admin-core.ts ซึ่งถูกฉีดเข้าหน้านี้
      ตอนเปิดมุมมอง — เขียนทับที่นี่เมื่อไหร่ = จอกับกระดาษตัดบรรทัดคนละที่
      แล้ว "หน้า n จาก m" ที่ระบบพิมพ์เองจะโกหกทันที
   ✅ ที่นี่มีได้เฉพาะ "กรอบรอบเอกสาร" (พื้นหลัง เงา การย่อให้พอดีจอ) และ
      "ป้ายบอกว่าแตะได้" ซึ่งเป็น ::after ที่ position:absolute — ไม่กินที่จริง
   ============================================================ */
.ctv-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0 8px}
.ctv-bar .hint{margin:0}
#ct-view{margin-bottom:6px}
#ct-view .empty{padding:22px 14px}
/* ============================================================
   🔴🔴🔴 ตัวอย่างการพิมพ์ในหน้า "ข้อความสัญญา" (.ctx-paper) — แก้ 5 ส.ค. 2569

   ของเดิมกฎย่อกระดาษถูกจำกัดขอบเขตไว้ที่ #ct-view เท่านั้น แต่ตัวอย่างการพิมพ์
   วาดอยู่ใน #ctx-preview / #ctx-a-preview ซึ่งไม่ได้อยู่ใต้ #ct-view เลย
     → .ctv-zoom ไม่ได้ width:max-content จึงกว้างเท่ากล่องแม่ ไม่ใช่ความกว้างกระดาษ
     → ctxPreviewFit() อ่านความกว้างผิด แล้วเข้าเงื่อนไข "ย่อ" ทั้งที่ย่อจริงไม่ได้
       (อัตราย่อ 0.999) แล้วสั่ง overflow-x:hidden = **ตัดขอบขวาหายไปเงียบ ๆ**
     → แผ่นกระดาษไม่มีพื้นหลังขาว ไม่มีเงา ไม่มีช่องไฟระหว่างแผ่น
   วัดจริงก่อนแก้: กล่อง 375.1px ขอบขวาหายไป 290.6px · กล่อง 604.2px หายไป 61.5px
   โดยไม่มีแถบเลื่อนให้เลื่อนดูเลย (อาการเดียวกับที่เจ้าของส่งรูปมา 5 ส.ค. 2569)

   🔴🔴 เส้นทางนี้ใช้ **overflow-x:auto เสมอ** 🚫 ห้ามเป็น hidden เด็ดขาด
      hidden ตอนที่กระดาษกว้างกว่ากล่อง = ตัดขอบขวาหายโดยไม่มีแถบเลื่อน
      (โหมดย่อไม่เกิดแถบเลื่อนหลอกเพราะ ctxPreviewFit() หักระยะขอบขวาที่หายไป
       จากการย่อออกด้วย margin-right ติดลบ — ดูคอมเมนต์ในฟังก์ชันนั้น)
   🚫 ห้ามเขียนความกว้าง/ความสูงของแผ่นซ้ำที่นี่ (เหมือน #ct-view)
   ============================================================ */
/* 🔴🔴🔴 กรอบพื้นหลังรอบกระดาษ — **กฎชุดเดียว** ครอบทั้ง 2 ที่
   🚫 ห้ามเขียนแยกเป็น 2 ชุดอีก (เจ้าของสั่ง 5 ส.ค. 2569 · เคยเขียนแยกแล้วเจอบั๊ก) */
#ct-view,.ctx-paper{background:#e8ebe8;border:1px solid var(--line);
  border-radius:10px;padding:12px 0 2px}
/* 🔴🔴🔴 กล่องเลื่อน/ย่อ — **กฎชุดเดียว** ครอบทั้ง 2 ที่
   overflow-x ต้องเป็น auto เสมอ 🚫 ห้าม hidden เด็ดขาด
   (hidden ตอนกระดาษกว้างกว่ากล่อง = ตัดขอบขวาหายโดยไม่มีแถบเลื่อน)
   ⚠️ overflow-y:hidden ตัดส่วนที่ล้นแนวตั้งตอนย่อ — ctPaperFit() ตั้ง height ให้เอง */
#ct-view .ctv-fit,.ctx-paper{max-width:100%;overflow-x:auto;overflow-y:hidden}
#ct-view .ctv-zoom,.ctx-paper .ctv-zoom{width:max-content;margin:0 auto}
/* กรอบกระดาษ: ที่นี่มีได้แค่พื้นหลัง/เงา/ระยะห่าง
   🚫 **ห้ามเขียนความกว้าง/ความสูงของแผ่นซ้ำที่นี่** — ขนาดพื้นที่พิมพ์จริงของ A4
      ประกาศที่ ctDocCss() (CT_PAPER) ใน admin-core.ts ที่เดียว ซึ่งถูกฉีดเข้าหน้านี้
      ตอนเปิดมุมมอง · เขียนซ้ำเมื่อไหร่ = จอกับกระดาษตัดบรรทัดคนละที่ แล้วเลขหน้าโกหก */
#ct-view .ct-page,.ctx-paper .ct-page{background:#fff;margin:0 auto 14px;
  box-shadow:0 1px 5px rgba(0,0,0,.28)}
#ct-view .ct-doc,.ctx-paper .ct-doc{color:#111}
/* ---- ช่องลายเซ็นที่ยังว่าง: แตะแล้วเปิดกล่องเซ็นด้วยนิ้ว ---- */
/* 🔴 ใช้ outline + ::after เท่านั้น — ทั้งคู่ไม่กินพื้นที่ใน layout
      จึงไม่มีทางดันความสูงของบล็อกลงนามให้ต่างจากกระดาษ */
/* 🔴🔴🔴 ต้องครอบ **ทั้ง 2 กล่อง** เสมอ (เจ้าของแจ้ง 8 ส.ค. 2569 ว่า
      "ใบรับทราบไม่มีช่องให้เซ็น") —
        #ct-view   เอกสารสัญญา + ข้อตกลงเพิ่มเติม
        #pol-view  ใบรับทราบระเบียบข้อบังคับ
      ของเดิมเขียน #ct-view อย่างเดียว → ใบรับทราบไม่มีกรอบเส้นประ
      ไม่มีป้าย "แตะเพื่อเซ็น" และไม่มี cursor:pointer
      ⚠️ **แตะได้จริงมาตลอด** (ctViewClick ต่อสายไว้แล้ว) แต่ไม่มีอะไรบอกว่าแตะได้
         = ผู้ใช้มองไม่เห็นว่ามีช่องเซ็น ซึ่งเท่ากับใช้ไม่ได้
      🚫 ห้ามคัดลอกกฎไปเขียนซ้ำอีกชุด — ใช้ตัวเลือกคั่นจุลภาคในกฎเดียวกัน
         (บทเรียนเดียวกับกรอบกระดาษ #ct-view/.ctx-paper เมื่อ 5 ส.ค. 2569) */
#ct-view .ct-signable,#pol-view .ct-signable,#cash-view .ct-signable{cursor:pointer;
  outline:1.5px dashed #1E6B34;outline-offset:3px;border-radius:4px}
#ct-view .ct-signable:hover,#pol-view .ct-signable:hover,#cash-view .ct-signable:hover{background:rgba(30,107,52,.06)}
#ct-view .ct-signable::after,#pol-view .ct-signable::after,#cash-view .ct-signable::after{content:"แตะเพื่อเซ็น";
  position:absolute;top:2px;
  left:50%;transform:translateX(-50%);font-size:11px;line-height:1.6;
  color:#1E6B34;background:#EAF5EE;border:1px solid #1E6B34;border-radius:99px;
  padding:0 8px;white-space:nowrap;pointer-events:none}
/* ---- ช่องที่เซ็นแล้ว: แตะเพื่อดูภาพต้นฉบับ / ยกเลิกลายเซ็น ---- */
/* 🔴 เพิ่ม 4 ส.ค. 2569 (รอบค่ำ) ตอนถอด "แผงสรุปสถานะลายเซ็น" ออก —
      ความสามารถ ดูภาพ/ยกเลิก ย้ายมาอยู่บนช่องลงนามในเอกสารแทน
      🔒 ใช้ outline + ::after เหมือนกัน จึงไม่กินพื้นที่ layout และไม่ดันความสูง
      🚫 ป้ายอยู่ใน CSS ของมุมมองเท่านั้น ไม่มีทางติดไปบนกระดาษที่ลูกจ้างเซ็น */
#ct-view .ct-signed,#pol-view .ct-signed,#cash-view .ct-signed{cursor:pointer;
  outline:1.5px dashed var(--dim);outline-offset:3px;border-radius:4px}
#ct-view .ct-signed:hover,#pol-view .ct-signed:hover,#cash-view .ct-signed:hover{background:rgba(0,0,0,.05)}
#ct-view .ct-signed::after,#pol-view .ct-signed::after,#cash-view .ct-signed::after{content:"แตะเพื่อดู/ยกเลิก";
  position:absolute;top:2px;
  left:50%;transform:translateX(-50%);font-size:11px;line-height:1.6;
  color:#555;background:#EFEFEF;border:1px solid #999;border-radius:99px;
  padding:0 8px;white-space:nowrap;pointer-events:none}

/* ============================================================
   กล่อง "เอกสารที่ให้เซ็นตอนรับเข้าทำงาน" — หน้าเพิ่มพนักงานใหม่
   🔴 รวม สัญญา · ข้อตกลงเพิ่มเติม · ใบรับทราบระเบียบ ไว้ในกรอบเดียว
      ของเดิมช่องติ๊กใบรับทราบแทรกอยู่ **ระหว่างปุ่มทำสัญญากับช่องกรอกสัญญา**
      พอกดปุ่ม ฟอร์มสัญญาจึงกางออกมา "ใต้" ช่องติ๊ก = อ่านแล้วไม่รู้ว่าอันไหนของอันไหน
   ============================================================ */
.docgrp{ border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;
  background:var(--card);margin:12px 0 4px }
.docgrp-h{ font-weight:700;font-size:.95rem;margin:0 0 4px;
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap }
.docgrp-h .dim{ font-weight:400;font-size:.78rem }
.docgrp .row{ margin:0 }
.docgrp-sep{ border-top:1px dashed var(--line);margin:14px 0 12px }
/* แถวเอกสารที่ติ๊กเลือกได้ — หน้าตาเดียวกับการ์ดข้อตกลงเพิ่มเติมที่อยู่เหนือมัน */
.docpick{ display:flex;gap:10px;align-items:flex-start;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:12px;padding:11px 14px;
  background:var(--card);transition:.15s }
.docpick:hover{ border-color:var(--brand) }
.docpick:has(input:checked){ border-color:var(--brand);background:var(--soft) }
.docpick input{ width:16px;height:16px;margin:3px 0 0;accent-color:var(--brand);
  cursor:pointer;flex:0 0 auto }

/* ============================================================
   แถบปุ่มจัดรูปแบบของกล่องแก้ข้อความสัญญา (เมนู "ข้อความสัญญา")
   🔴 รายชื่อปุ่มงอกจากหลังบ้านทั้งหมด — CSS ตรงนี้จัดหน้าตาอย่างเดียว
   🔴 ปุ่มที่ "เปิดอยู่" ต้องเห็นชัดว่าเปิด ไม่งั้นเจ้าของกดซ้ำแล้วปิดไปโดยไม่รู้ตัว
   ============================================================ */
.ctxbar{border:1px solid var(--line);border-radius:10px;background:var(--soft);
  padding:8px 10px;margin:0 0 10px}
.ctxbar-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:6px}
.ctxbar-row:last-child{margin-bottom:0}
.ctxbar-lab{font-size:.78rem;color:var(--dim);min-width:104px;flex:0 0 auto}
.ctxbar .btn{width:auto;padding:4px 10px;font-size:.85rem}
.ctxbar .btn.on{background:var(--brand);border-color:var(--brand);color:#fff;
  font-weight:700}
.ctxbar-note{flex:1 1 100%;font-size:.78rem;color:var(--dim);line-height:1.55}

/* จอมือถือ: แถบปุ่มเรียงเต็มความกว้าง (นิ้วกดง่าย) · กรอบเอกสารบางลงให้ได้เนื้อที่คืน */
@media (max-width:640px){
  #ct-view{padding:8px 0 2px}
  .ctv-bar .btn{flex:1 1 auto}
  .ctv-bar .hint{flex:1 1 100%}
  /* .btn{width:100%} ของจอเล็กจะทำให้ปุ่มจัดรูปแบบกลายเป็นแถบเต็มจอปุ่มละแถว
     — เจาะจงทับด้วย .ctxbar .btn ให้ยังเรียงต่อกันได้เหมือนแถบเครื่องมือจริง */
  .ctxbar .btn{width:auto;flex:0 1 auto}
  .ctxbar-lab{flex:1 1 100%;min-width:0}
  /* แถบ "กำลังดูหน้าจอพนักงาน" บนจอเล็ก — ให้ปุ่มออกอยู่แถวของตัวเอง กดง่าย */
  #svbar{flex-direction:column;align-items:stretch;gap:8px;text-align:center}
  #svbar .btn{width:100%}
}

/* ============================================================
   🔴🔴 แถบเตือน "กำลังดูหน้าจอพนักงาน" (เจ้าของสั่ง 8 ส.ค. 2569)

   🔴 ลอยอยู่ **ด้านล่างจอ** โดยตั้งใจ — ไม่ไปชนแถบบนที่เป็น position:sticky
      (บทเรียน 27 ก.ค. 2569: ของที่ไปยุ่งกับพื้นที่ด้านบนทำให้ sticky เพี้ยน)
      และไม่ต้องดัน padding ของ body ซึ่งจะกระทบทุกหน้า
   🚫 ห้ามทำให้ซ่อนได้หรือจางลง — หน้าที่ของมันคือ "เห็นตลอดเวลา"
   ============================================================ */
#svbar{position:fixed;left:12px;right:12px;bottom:12px;z-index:9999;
  display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;
  background:var(--bad);color:#fff;border-radius:12px;padding:10px 14px;
  font-size:.9rem;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.28)}
#svbar b{font-weight:700}
#svbar .btn{width:auto;flex:0 0 auto;background:#fff;color:var(--bad);
  border-color:#fff;font-weight:700}

/* ============================================================
   🔴🔴🔴 กล่องรายการยาว — .listbox (เจ้าของสั่ง 28 ส.ค. 2569)

   > *"หัวข้อที่มีลำดับข้างในเกินมาเยอะๆ อันควรจะเป็นกด เพิ่มเติม
   >  หรือมีที่กรอบและ มีที่เลื่อนลงมาได้ ไม่งั้นมันรก"*

   เจ้าของเลือกเอง: **กล่องเลื่อน + ปุ่มดูทั้งหมด** · คอม 8 แถว · มือถือ 5 แถว

   🔴 คุมความสูงด้วย max-height 🚫 ห้ามใช้ height ตายตัว
      รายการที่สั้นกว่ากล่องจะได้ไม่มีที่ว่างค้างอยู่ข้างล่าง
   🔴 หัวตารางตรึงไว้ (sticky) — เลื่อนลงไปลึก ๆ แล้วยังรู้ว่าคอลัมน์ไหนคืออะไร
   🔴 กล่องนี้เลื่อน **แนวตั้ง** ส่วน .scroll เดิมเลื่อน **แนวนอน** — คนละหน้าที่
      ซ้อนกันได้: .listbox > .scroll > table
   🚫 ห้ามใส่ overflow-x:hidden ที่นี่ — ทำลาย position:sticky (บทเรียน 27 ก.ค. 2569)
   ============================================================ */
.listbox{max-height:var(--lb-h, 340px);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--line);border-radius:11px;background:var(--card)}
/* กางเต็มแล้ว = ไม่จำกัดความสูงอีก (ปุ่ม "ดูทั้งหมด") */
.listbox.open{max-height:none;overflow-y:visible}
/* กล่องนี้มีกรอบของตัวเองแล้ว ตารางข้างในจึงไม่ต้องมีกรอบซ้อนอีกชั้น */
.listbox .scroll{border:none;border-radius:0}
.listbox table thead th,.listbox table tr:first-child th{position:sticky;top:0;z-index:1}

/* แถบใต้กล่อง: บอกว่ามีทั้งหมดกี่รายการ + ปุ่มกางเต็ม */
.listbox-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:6px 0 2px;font-size:.84rem;color:var(--dim)}
.listbox-bar .btn{padding:3px 12px;font-size:.84rem}


/* 🔴 มือถือเห็นน้อยกว่า — เจ้าของเลือกเอง 5 แถว (คอม 8 แถว)
   🚫 ห้ามย้ายกฎนี้ขึ้นไปข้างบน — media query ไม่เพิ่มน้ำหนัก อันที่อยู่ทีหลังชนะ */
@media (max-width:640px){
  .listbox{--lb-h:210px}
}

/* ============================================================
   🔴🔴🔴 สิทธิการลาบนหน้าแรกฝั่งพนักงาน — ย่อเฉพาะมือถือ
      (เจ้าของสั่ง 29 ส.ค. 2569)

   > *"ดูในคอมมันโอเค แล้วดูในมือถือมันยาว รกไป"*

   🔒 **บนคอมไม่แตะเลย** — เห็นครบทุกวงเหมือนเดิม ปุ่มไม่โผล่
   🔴 บนมือถือเห็น 4 วงแรก (ลากิจ · วันหยุดชดเชย · ลาพักร้อน · ลาป่วย)
      ที่เหลือซ่อนไว้จนกว่าจะกดปุ่ม · กดซ้ำย่อกลับได้
   ============================================================ */
.ringmore-bar{display:none;margin-top:12px;text-align:center}


/* 🔴 ย่อสิทธิการลาเฉพาะมือถือ (เจ้าของสั่ง 29 ส.ค. 2569)
   🚫 ห้ามย้ายขึ้นไปข้างบน — media query ไม่เพิ่มน้ำหนัก อันที่อยู่ทีหลังชนะ */
@media (max-width:640px){
  #me-rings .ring.more{display:none}
  #me-rings.show-more .ring.more{display:block}
  .ringmore-bar{display:block}
}