/* ============================================================
 *  ServicesIT — UI
 *  เรียบ ขาว เส้นบาง สีเดียว
 *  ตัวหนังสืออ่านง่ายไว้ก่อน ของประดับตัดทิ้งให้หมด
 * ============================================================ */

:root{
  /* ---------- สีของแบรนด์ SB_ITServices ----------
   * น้ำเงินเป็นสีหลัก teal เป็นสีรอง ใช้กับของที่ถูกเลือกและของที่สำเร็จ
   * กรมเข้มใช้กับตัวหนังสือหัวข้อ ไม่ได้ใช้เป็นพื้นใหญ่ เพราะจะหนักตา
   * พื้นหลังเป็นฟ้าจางมาก ไม่ใช่เทา เพื่อให้การ์ดขาวลอยขึ้นมาดูมีมิติ */
  --brand:#0f6bff;
  --brand-d:#0a4fc4;
  --brand-l:#e7f0ff;
  --navy:#0a2d5a;

  --bg:#f4f8ff;
  --card:#ffffff;
  --line:#dce7f5;
  --tx:#17365d;
  --tx2:#71839d;
  --tx3:#9aabc4;

  --violet:#7b5cd6; --blue:#1e88ff; --orange:#ffb547;
  --cyan:#00a9c7;   --teal:#00c2b8; --green:#18b77a;
  --red:#f05252;    --gray:#9aabc4;

  /* เงาสามระดับ ใช้ซ้ำทั้งระบบ จะได้ไม่มีใครเขียนค่าเงาเองทีละที่
   * แล้วกลายเป็นว่าการ์ดสิบใบมีเงาสิบแบบ */
  --sh1:0 1px 2px rgba(10,45,90,.06), 0 1px 3px rgba(10,45,90,.04);
  --sh2:0 4px 14px rgba(10,45,90,.08);
  --sh3:0 12px 32px rgba(10,45,90,.12);
  --r-sm:10px; --r-md:14px; --r-lg:20px;

  --top:env(safe-area-inset-top,0px);
  --bot:env(safe-area-inset-bottom,0px);
  --font:"Noto Sans Thai","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{height:100%}
body{
  margin:0;height:100%;font-family:var(--font);font-size:15px;line-height:1.55;
  background:var(--bg);color:var(--tx);
  overscroll-behavior-y:none;-webkit-font-smoothing:antialiased;
}
button,input,textarea{font-family:inherit;font-size:15px;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
svg{width:1em;height:1em;display:block;flex:none}

.screen{display:none;height:100%}
.screen.on{display:flex;flex-direction:column;min-height:0}
.hide{display:none!important}

/* ============================================================
 *  เข้าสู่ระบบ
 * ============================================================ */
#scLogin{background:var(--card)}
.loginWrap{margin:auto;padding:32px 28px calc(32px + var(--bot));text-align:center;max-width:360px}
/* หน้า login ใช้โลโก้จริงของบริษัท ไม่ใช่ตัวอักษรย่อในกล่องสี่เหลี่ยม
 * โลโก้มีพื้นขาวอยู่แล้ว จึงไม่ต้องใส่กรอบหรือพื้นอะไรเพิ่ม */
/* โลโก้มีพื้นขาวติดมาในไฟล์ ลบออกไม่ได้เพราะขนกระต่ายก็ขาว
 * ถ้าวางลอยๆ บนพื้นมืดจะเห็นเป็นกล่องขาวเหลี่ยมๆ ดูเหมือนรูปโหลดไม่ขึ้น
 * จึงใส่กรอบมนสีขาวรองไว้ กลายเป็นป้ายแบรนด์ที่ตั้งใจวาง
 * ใช้ได้ทั้งสองธีมโดยไม่ต้องมีไฟล์โลโก้สองชุด */
.appIcon{
  width:128px;margin:0 auto 16px;padding:10px;border-radius:26px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--sh2);
}
.appIcon img{width:100%;height:auto;display:block}
.loginWrap h1{font-size:23px;font-weight:600;margin:0 0 6px}
.sub{margin:0 0 32px;color:var(--tx2);font-size:14.5px}
#gBtn{display:flex;justify-content:center;min-height:44px}

.loginPanel{margin-bottom:16px;text-align:left}
.loginPanel input{
  width:100%;border:0;padding:0;background:none;font-size:17px;
  letter-spacing:.02em;
}
.loginPanel input:focus{outline:0}
.loginPanel input::placeholder{color:var(--tx3);font-size:14px;letter-spacing:0}

.or{display:flex;align-items:center;gap:12px;margin:22px 0 16px;color:var(--tx3);font-size:12.5px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.hint{font-size:12.5px;color:var(--tx3);margin-top:30px;line-height:1.75}
.err{
  color:var(--red);background:#fce8e6;border-radius:10px;font-size:13.5px;
  margin:16px 0 0;padding:0;max-height:0;overflow:hidden;transition:.2s;text-align:left;
}
.err.on{padding:11px 14px;max-height:220px}

/* ============================================================
 *  แถบบน
 * ============================================================ */
.bar{
  flex:none;color:#fff;
  /* ไล่สีเฉียงอ่อนๆ กับเงาใต้แถบ ทำให้ดูเป็นชั้นเหมือนแอปที่ติดตั้งในเครื่อง
   * ไม่ใช่หน้าเว็บที่แปะสีทึบไว้ด้านบน  มีสีพื้นสำรองไว้ก่อนเสมอ
   * เผื่อเบราว์เซอร์ไหนวาด gradient ไม่ได้ จะได้ไม่เหลือแถบใส ตัวหนังสือขาวบนขาว */
  background:var(--brand);
  background-image:linear-gradient(135deg, #1e88ff 0%, var(--brand) 55%, var(--brand-d) 100%);
  box-shadow:0 2px 16px rgba(15,107,255,.26);
  padding:calc(var(--top) + 12px) 8px 12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.bar h1{font-size:18px;font-weight:500;margin:0}
.barBtns{display:flex}
.ib{
  width:42px;height:42px;border-radius:50%;font-size:20px;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.ib:active{background:rgba(255,255,255,.18)}

/* ============================================================
 *  เนื้อหา
 * ============================================================ */
.body{
  flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 14px calc(84px + var(--bot));
}
.tab{display:none}
.tab.on{display:block}

/* ---------- แผงฟอร์ม ---------- */
.panel{background:var(--card);border-radius:var(--r-md);border:1px solid var(--line);
       overflow:hidden;box-shadow:var(--sh1)}

.field{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 16px;border-bottom:1px solid var(--line);background:none;
}
.field:last-of-type{border-bottom:0}
.field.col{flex-direction:column;align-items:stretch;gap:6px}
/* ชื่อช่องกรอกตัวหนาขึ้น แยกชั้นกับค่าที่กรอกให้ชัด
 * เดิมน้ำหนักเท่ากัน ตากวาดแล้วแยกไม่ออกว่าอันไหนหัวข้อ อันไหนคำตอบ */
.fLb{font-size:12.5px;font-weight:600;color:var(--tx2);flex:none;min-width:78px}
.field.col .fLb{min-width:0}
.fVal{flex:1;font-size:15px;text-align:right;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field.col .fVal{text-align:left}
.fVal.thin,.fVal.ph{color:var(--tx3)}
.fArrow{font-size:19px;color:var(--tx3)}
.field:active{background:#f7f8fa}

.fNote{
  font-size:12.5px;color:var(--tx2);padding:0 16px;max-height:0;overflow:hidden;
  transition:.2s;background:var(--brand-l);
}
.fNote.on{padding:10px 16px;max-height:120px}
.fNote.appr{background:#fef6e7;color:#8a5a09}

textarea{
  width:100%;border:0;padding:0;background:none;resize:none;line-height:1.6;
  font-size:15px;min-height:88px;
}
textarea:focus{outline:0}
textarea::placeholder{color:var(--tx3)}

/* ---------- ปุ่ม ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:14px;border-radius:var(--r-sm);font-size:15px;font-weight:600;
  background:var(--card);border:1px solid var(--line);color:var(--tx);
  margin-top:16px;transition:.14s;
}
.btn svg{font-size:18px}
.btn:active{transform:scale(.99);background:#f7f8fa}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:active{background:var(--brand-d)}
.btn.gre{background:var(--green);border-color:var(--green);color:#fff}
.btn.ora{background:#fff;border-color:var(--orange);color:#b4660f}
.btn.red{background:#fff;border-color:#f3c3bf;color:var(--red)}
.btn.half{margin-top:0}
.btn[disabled]{opacity:.45;pointer-events:none}

.msg{font-size:13.5px;margin:12px 2px 0;display:none}
.msg.on{display:block}
.msg.ok{color:var(--green)} .msg.no{color:var(--red)}
.foot2{font-size:12.5px;color:var(--tx3);line-height:1.75;margin:20px 2px 0}

/* ============================================================
 *  รายการ
 * ============================================================ */
.list{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
      overflow:hidden;box-shadow:var(--sh1)}
.list:empty{display:none}

.row{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 14px;border-bottom:1px solid var(--line);background:none;
}
.row:last-child{border-bottom:0}
.row.tap:active{background:#f7f8fa}

.pip{width:9px;height:9px;border-radius:50%;flex:none;background:var(--gray);margin-top:1px;align-self:flex-start}
.pip.violet{background:var(--violet)} .pip.blue{background:var(--blue)}
.pip.orange{background:var(--orange)} .pip.cyan{background:var(--cyan)}
.pip.teal{background:var(--teal)}     .pip.green{background:var(--green)}
.pip.red{background:var(--red)}       .pip.gray{background:var(--gray)}

.rowTx{flex:1;min-width:0}
.r1{display:flex;align-items:baseline;gap:8px}
.r1 b{font-size:14.8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* เลขที่ใบทำเป็นป้ายตัวเลขเรียงหลัก อ่านเทียบกันทีละหลักได้
 * เวลาคุยกันทางโทรศัพท์ว่าใบไหน จะได้หาเจอเร็ว */
.r1 i{
  font-style:normal;font-family:"Inter",sans-serif;font-size:11px;font-weight:600;
  color:var(--tx2);flex:none;background:var(--bg);border:1px solid var(--line);
  padding:1px 7px;border-radius:6px;font-variant-numeric:tabular-nums;letter-spacing:.01em;
}
.r2{font-size:13px;color:var(--tx2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.r3{font-size:12px;margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}

/* ---------- ป้ายสถานะ ----------
 * เดิมเป็นตัวหนังสือสีเฉยๆ ต้องเพ่งว่าคำไหนคือสถานะ คำไหนคือชื่อคน
 * ทำเป็นป้ายพื้นสีอ่อน ตาจับได้ก่อนอ่าน แล้วค่อยอ่านว่าสถานะอะไร
 *
 * พื้นใช้สีเดียวกับตัวหนังสือแต่จางลง ด้วย color-mix
 * จึงไม่ต้องประกาศสีพื้นอีกสิบสี และสลับธีมมืดสว่างให้เองโดยไม่ต้องเขียนซ้ำ */
.r3 .stx{
  font-weight:600;padding:2.5px 9px;border-radius:999px;line-height:1.45;
  background:color-mix(in srgb, currentColor 14%, transparent);
}
.r3 .stx.violet{color:var(--violet)} .r3 .stx.blue{color:var(--blue)}
.r3 .stx.orange{color:#b4660f}       .r3 .stx.cyan{color:var(--cyan)}
.r3 .stx.teal{color:var(--teal)}     .r3 .stx.green{color:var(--green)}
.r3 .stx.red{color:var(--red)}       .r3 .stx.gray{color:var(--tx3)}

/* เบราว์เซอร์เก่าที่ไม่รู้จัก color-mix จะข้ามบรรทัด background ข้างบนไป
 * ได้ป้ายพื้นจางแทน ยังเป็นป้ายและยังอ่านออก ไม่ใช่หน้าพัง */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .r3 .stx{background:var(--bg)}
  .dTag{background:var(--bg)!important}
}
.r3 .sep{color:var(--tx3);opacity:.45;font-style:normal}
.r3 .dim{color:var(--tx3)}

/* ---------- ป้ายแผนก ----------
 * สิบสีเรียงลำดับเดียวกับ pal ใน paintSheets_ ของ 01_setup.gs
 * ลำดับต้องตรงกัน ไม่ใช่แค่จำนวนเท่ากัน เพราะ deptCls หยิบด้วยเลขลำดับ
 * แก้ที่ไหนต้องแก้อีกที่ให้ตรงกันเสมอ ไม่งั้นสีในชีตกับในแอปจะคนละสี
 *
 * ที่นี่ใช้ตัวหนังสือเข้มคู่กับพื้นอ่อน เพราะพื้นอ่อนล้วนแบบในชีต
 * พออยู่บนป้ายเล็กๆ จะอ่านไม่ออก ชีตมีพื้นที่ให้ จึงคุมคอนทราสต์ต่างกันได้ */
.dTag{
  flex:none;font-size:11px;font-weight:600;padding:2.5px 8px;border-radius:6px;
  max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dTag.dc0{background:#e3edfd;color:#174ea6} .dTag.dc1{background:#dff3e3;color:#145c28}
.dTag.dc2{background:#fdeedd;color:#8a4f0c} .dTag.dc3{background:#ece6fb;color:#4b3a86}
.dTag.dc4{background:#ddf1f5;color:#0a5f6e} .dTag.dc5{background:#fde9f1;color:#8c2458}
.dTag.dc6{background:#f2f3dd;color:#5c5f12} .dTag.dc7{background:#e5f0f7;color:#1f5f8b}
.dTag.dc8{background:#fdf0dd;color:#845005} .dTag.dc9{background:#e8f5e9;color:#1b5e20}
.rowArrow{font-size:19px;color:#c9ced6;flex:none}

/* ---------- ลายเซ็น ---------- */
.sigWrap{
  border:1.5px dashed var(--line);border-radius:12px;background:#fafbfd;
  position:relative;overflow:hidden;touch-action:none;
}
.sigWrap canvas{display:block;width:100%;height:170px}
.sigWrap .ph2{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--tx3);font-size:13.5px;pointer-events:none;
}
.sigWrap.drawn .ph2{display:none}
.sigLine{
  position:absolute;left:18px;right:18px;bottom:36px;height:1px;background:var(--line);
}
.sigNow{
  border:1px solid var(--line);border-radius:10px;padding:8px;background:#fff;
  display:flex;align-items:center;justify-content:center;min-height:92px;
}
.sigNow img{max-width:100%;max-height:120px}
.sigSmall{max-height:56px;max-width:170px}

/* ---------- หัวข้อกลุ่มในแท็บรออนุมัติ ----------
 * เดิมเป็นตัวหนังสือเทาบางๆ กลืนไปกับรายการข้างล่าง
 * ตอนนี้ตัวหนาขึ้น สีเข้มขึ้น และมีขีดสีนำหน้า
 * ขีดสีบอกความสำคัญ แดงคืองานที่ขวางอยู่ ฟ้าคืองานที่ต้องกดให้ครบแต่ไม่ขวาง */
.secHead2{
  display:flex;align-items:center;gap:9px;margin:4px 2px 10px;
  font-size:13px;color:var(--tx);
}
.secHead2:not(:first-child){margin-top:22px}
.secHead2 b{font-weight:700;letter-spacing:-.1px}
.secHead2::before{
  content:"";flex:none;width:3.5px;height:15px;border-radius:2px;background:var(--tx3);
}
.secHead2.wait::before{background:var(--red)}
.secHead2.soft::before{background:var(--blue)}
.secHead2 i{
  font-style:normal;font-family:"Inter",sans-serif;font-size:11px;font-weight:700;
  padding:2px 8px;border-radius:999px;
}
.secHead2.wait i{background:color-mix(in srgb, var(--red) 15%, transparent);color:var(--red)}
.secHead2.soft i{background:color-mix(in srgb, var(--blue) 15%, transparent);color:var(--blue)}

/* --line2 ไม่มีอยู่จริง เป็นชื่อที่หลงมาจากตอนร่าง
 * ป้ายนับของหัวข้อ soft จึงไม่มีพื้นมาตลอด เพิ่งเห็นตอนไล่โค้ดรอบนี้
 * ตรงนี้กันไว้เผื่อ color-mix ใช้ไม่ได้ */
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .secHead2.wait i{background:#fdeaea}
  .secHead2.soft i{background:var(--brand-l)}
}
.secHead2 + .list{margin-bottom:4px}

/* ---------- ว่าง / โหลด ---------- */
.empty{text-align:center;padding:56px 24px;color:var(--tx2);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh1)}
.empty svg{font-size:40px;color:#d4d9e0;margin:0 auto 12px}
.empty b{display:block;font-size:15.5px;color:var(--tx);font-weight:700;margin-bottom:5px}
.empty p{margin:0;font-size:13px;line-height:1.7}

.sk{padding:14px;border-bottom:1px solid var(--line)}
.sk:last-child{border-bottom:0}
.sk i{display:block;height:10px;border-radius:5px;margin-bottom:8px;
  background:linear-gradient(90deg,#eef0f3 25%,#f7f8fa 50%,#eef0f3 75%);
  background-size:220% 100%;animation:sh 1.3s infinite}
.sk i:nth-child(1){width:52%;height:13px} .sk i:nth-child(2){width:84%}
.sk i:nth-child(3){width:36%;margin-bottom:0}
@keyframes sh{from{background-position:120% 0}to{background-position:-120% 0}}

/* ---------- ชิปกรอง ---------- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:0 0 14px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13px;white-space:nowrap;color:var(--tx2);flex:none;
}
.chip.on{background:var(--brand-l);border-color:#c6dafc;color:var(--brand-d);font-weight:500}

/* ============================================================
 *  แถบล่าง
 * ============================================================ */
.tabbar{
  flex:none;display:flex;background:var(--card);
  border-top:1px solid var(--line);padding-bottom:var(--bot);
}
.tb{
  flex:1;padding:8px 0;color:var(--tx3);position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
.tb svg{font-size:22px}
.tb b{font-size:10.5px;font-weight:400}
.tb.on{color:var(--brand)}
.tb.on b{font-weight:500}

/* แถบขีดบอกแท็บที่เลือก กับไอคอนที่เด้งขึ้นเล็กน้อย
 * ช่วยให้รู้ว่าอยู่หน้าไหนโดยไม่ต้องอ่านตัวหนังสือ
 * prefers-reduced-motion ปิดการเคลื่อนไหวให้คนที่ตั้งค่าไว้ */
.tb::after{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);
  width:26px;height:2.5px;border-radius:0 0 3px 3px;background:var(--brand);
  transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.tb.on::after{transform:translateX(-50%) scaleX(1)}
.tb svg{transition:transform .22s cubic-bezier(.34,1.3,.5,1)}
.tb.on svg{transform:translateY(-1px) scale(1.08)}
.tb:active svg{transform:scale(.92)}

/* เนื้อหาแท็บค่อยๆ ขึ้นมาแทนการกระโดดเปลี่ยน */
.tab.on{animation:tabIn .26s cubic-bezier(.2,.7,.3,1)}
@keyframes tabIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .tb::after,.tb svg{transition:none}
  .tab.on{animation:none}
}
.tb .dot{
  position:absolute;top:5px;right:calc(50% - 19px);min-width:16px;height:16px;
  border-radius:999px;background:var(--red);color:#fff;display:none;
  font-family:"Inter",sans-serif;font-size:10px;font-weight:600;font-style:normal;
  align-items:center;justify-content:center;padding:0 4px;
}
.tb .dot.on{display:flex}

/* ============================================================
 *  แผ่นเลื่อนขึ้น
 * ============================================================ */
.sheet{position:fixed;inset:0;z-index:50;display:none;align-items:flex-end;
  background:rgba(32,33,36,.5)}
.sheet.on{display:flex}
.sheetBox{
  background:var(--card);width:100%;border-radius:16px 16px 0 0;
  padding:0 18px calc(22px + var(--bot));max-height:90vh;overflow-y:auto;
  animation:up .25s cubic-bezier(.2,.9,.2,1);-webkit-overflow-scrolling:touch;
}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.grabWrap{position:sticky;top:0;background:var(--card);padding:9px 0 11px;z-index:2}
.grab{width:36px;height:4px;background:#d7dbe0;border-radius:99px;margin:0 auto}

.shTop{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--tx3);
  font-family:"Inter",sans-serif;margin-bottom:3px}
.shTitle{font-size:18px;font-weight:600;margin:0 0 3px}
.shSt{font-size:13px;margin:0 0 18px;display:flex;align-items:center;gap:7px}

.kv{display:flex;gap:12px;font-size:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.kv b{color:var(--tx2);font-weight:400;min-width:84px;flex:none;font-size:13px}
.kv span{min-width:0;word-break:break-word}
.kv a{color:var(--brand);text-decoration:none}

/* ไทม์ไลน์ */
.tl{margin:14px 0 2px}
.tl .s{display:flex;gap:12px;position:relative;padding-bottom:14px}
.tl .s:last-child{padding-bottom:0}
.tl .s::before{content:"";position:absolute;left:7px;top:17px;bottom:0;width:1.5px;background:var(--line)}
.tl .s:last-child::before{display:none}
.tl .b{width:15px;height:15px;border-radius:50%;flex:none;z-index:1;margin-top:2px;
  background:#fff;border:2px solid var(--line)}
.tl .s.done .b{background:var(--green);border-color:var(--green)}
.tl .s.now  .b{background:var(--brand);border-color:var(--brand)}
.tl .t{line-height:1.45}
.tl .t b{display:block;font-size:13.8px;font-weight:500}
.tl .s:not(.done):not(.now) .t b{color:var(--tx3)}
.tl .t span{font-size:12px;color:var(--tx3)}

.shLb{display:block;font-size:12px;color:var(--tx2);margin:20px 0 7px}
.shBox{border:1px solid var(--line);border-radius:10px;padding:12px}

/* dropdown ในแผ่นเลื่อน ให้หน้าตาเหมือนช่องพิมพ์ ไม่ใช่ select ดิบของเบราว์เซอร์
 * appearance:none ตัดลูกศรของระบบทิ้ง แล้ววาดลูกศรเองด้วย background
 * ไม่งั้น iOS กับ Android จะได้คนละหน้าตากันคนละเรื่อง */
.shBox select{
  width:100%;border:0;background:none;font-size:15px;line-height:1.6;
  padding:0 26px 0 0;color:inherit;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--tx3) 50%),
                   linear-gradient(135deg,var(--tx3) 50%,transparent 50%);
  background-position:calc(100% - 13px) 52%,calc(100% - 8px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.shBox select:focus{outline:0}

/* เส้นคั่นก่อนบล็อก "ปิดทันที" ให้แยกจากปุ่มเปลี่ยนสถานะชัดๆ
 * กันกดผิด เพราะปุ่มสองกลุ่มนี้ผลต่างกันมาก */
.shDiv{height:1px;background:var(--line);margin:22px 0 4px}

.acts{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.acts .btn{flex:1 1 46%;margin-top:0}
.acts .btn.wide{flex-basis:100%}
.shNote{background:var(--brand-l);border-radius:10px;padding:12px 14px;
  font-size:12.5px;color:#3c4a5e;line-height:1.7;margin-top:14px}

/* ตัวเลือกในแผ่นเลื่อน */
.opt{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:14px 4px;border-bottom:1px solid var(--line);font-size:15px;
}
.opt:last-child{border-bottom:0}
.opt:active{background:#f7f8fa}
.opt .nm{flex:1;min-width:0}
.opt .lk{font-size:16px;color:var(--orange)}
.opt .ck{font-size:19px;color:var(--brand);opacity:0}
.opt.on .ck{opacity:1}
.opt.on .nm{color:var(--brand);font-weight:500}

/* ============================================================
 *  toast / loading
 * ============================================================ */
.toast{
  position:fixed;left:50%;bottom:calc(92px + var(--bot));transform:translate(-50%,16px);
  background:#30343a;color:#fff;padding:12px 18px;border-radius:8px;font-size:13.5px;
  max-width:88%;text-align:center;opacity:0;pointer-events:none;transition:.22s;z-index:60;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.load{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(245,246,248,.55)}
.load.on{display:flex}
.spin{width:32px;height:32px;border:3px solid rgba(26,115,232,.2);
  border-top-color:var(--brand);border-radius:50%;animation:sp .65s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ============================================================
 *  จอใหญ่
 * ============================================================ */
@media (min-width:600px){
  body{background:#e9ecf0}
  .screen.on{max-width:440px;margin:0 auto;background:var(--bg);
    box-shadow:0 0 40px rgba(16,24,40,.1)}
  .sheetBox{max-width:440px;margin:0 auto}
}

/* ============================================================
 *  โหมดมืด
 * ============================================================ */
/* ชั้นนี้ทำงานก่อน JS ตั้งธีมเสร็จเท่านั้น
 *   html:not([data-theme]) คือช่วงเสี้ยววินาทีแรกที่ยังไม่มีใครสั่ง
 *   เครื่องที่ตั้งโหมดมืดไว้จะได้ไม่เห็นหน้าขาวแวบขึ้นมาก่อน
 *
 * ที่ต้องมีเงื่อนไขนี้ ไม่ใช่เพราะอยากละเอียด แต่เพราะเดิมไม่มีแล้วมันพัง
 * คนที่เครื่องตั้งมืด แต่ในแอปเลือก สว่างตลอด จะได้สีมืดจากชั้นนี้มาทับ
 * เพราะ :root ธรรมดาอยู่ข้างบนและน้ำหนักเท่ากัน ชั้นที่อยู่ล่างกว่าจึงชนะ
 * กลายเป็นเลือกสว่างแล้วไม่สว่าง ซึ่งงงกว่าไม่มีปุ่มให้เลือกเลย */
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .sigWrap{background:#1f242c}
  html:not([data-theme]) .sigNow{background:#1f242c}
  html:not([data-theme]) .sigWrap canvas, html:not([data-theme]) .sigNow img{filter:invert(1) hue-rotate(180deg)}
  html:not([data-theme]):root{
    --bg:#121417; --card:#1b1e23; --line:#2b3037;
    --tx:#e6e8eb; --tx2:#99a0aa; --tx3:#6d7580;
    --brand:#5b9bf3; --brand-d:#4a86d8; --brand-l:#1a2432;
  }
  html:not([data-theme]) #scLogin{background:var(--card)}
  html:not([data-theme]) .bar{background:#1b1e23;border-bottom:1px solid var(--line)}
  html:not([data-theme]) .appIcon{background:var(--brand);color:#10141a}
  html:not([data-theme]) .err{background:#2e1b19;color:#f2a19a}
  html:not([data-theme]) .field:active, html:not([data-theme]) .row.tap:active, html:not([data-theme]) .btn:active, html:not([data-theme]) .opt:active{background:#22262c}
  html:not([data-theme]) .btn.primary{color:#10141a}
  html:not([data-theme]) .btn.gre{color:#10141a}
  html:not([data-theme]) .btn.ora{background:var(--card);color:#f0b464;border-color:#5c4420}
  html:not([data-theme]) .btn.red{background:var(--card);color:#f2a19a;border-color:#5c2d29}
  html:not([data-theme]) .fNote.appr{background:#2a2213;color:#e2b472}
  html:not([data-theme]) .chip.on{background:var(--brand-l);border-color:#2f4467;color:#9dc3fa}
  html:not([data-theme]) .sheet{background:rgba(0,0,0,.6)}
  html:not([data-theme]) .grab{background:#3a4049}
  html:not([data-theme]) .sk i{background:linear-gradient(90deg,#22262c 25%,#282d34 50%,#22262c 75%);background-size:220% 100%}
  html:not([data-theme]) .empty svg{color:#363c44}
  html:not([data-theme]) .rowArrow{color:#434a53}
  html:not([data-theme]) .tl .b{background:var(--card)}
  html:not([data-theme]) .load{background:rgba(18,20,23,.55)}
  html:not([data-theme]) .toast{background:#e6e8eb;color:#1b1e23}
  html:not([data-theme]) .shNote{background:var(--brand-l);color:#a8b6c8}
  @media (min-width:600px){html:not([data-theme]) body{background:#06080a}}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ============================================================
 *  ภาพรวม  แดชบอร์ด
 * ============================================================ */

.dScope{margin:0 0 14px;font-size:13px;color:var(--tx2)}
.dScope b{font-weight:600;color:var(--tx)}

/* การ์ดตัวเลข  สองคอลัมน์บนมือถือ สี่บนจอกว้าง */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
@media (min-width:640px){.cards{grid-template-columns:repeat(4,1fr)}}

.cd{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 15px 13px;position:relative;overflow:hidden;box-shadow:var(--sh1);
  transition:box-shadow .18s, transform .18s;
}
.cd:hover{box-shadow:var(--sh2);transform:translateY(-1px)}
/* แถบสีซ้ายมือ บวกไล่สีจางๆ จากมุมซ้ายล่าง แทนการระบายทั้งใบ
 * ระบายทั้งใบแล้วตัวเลขจะอ่านยาก ซึ่งเป็นสิ่งเดียวที่คนมาดูการ์ดนี้เพื่อจะอ่าน */
.cd::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:1}
.cd::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:62%;pointer-events:none;
  background:linear-gradient(to top, var(--cdT, transparent), transparent);
}
.cd.cBl::before{background:var(--blue)}   .cd.cOr::before{background:var(--orange)}
.cd.cGr::before{background:var(--green)}  .cd.cPu::before{background:var(--violet)}
.cd.cRd::before{background:var(--red)}

.cd.cBl{--cdT:color-mix(in srgb, var(--blue) 9%, transparent)}
.cd.cOr{--cdT:color-mix(in srgb, var(--orange) 9%, transparent)}
.cd.cGr{--cdT:color-mix(in srgb, var(--green) 9%, transparent)}
.cd.cPu{--cdT:color-mix(in srgb, var(--violet) 9%, transparent)}
.cd.cRd{--cdT:color-mix(in srgb, var(--red) 10%, transparent)}

.cdL{display:block;font-size:11.5px;font-weight:600;color:var(--tx2);margin-bottom:3px;
     position:relative;z-index:2}
.cdN{display:block;font-size:27px;line-height:1.15;font-weight:700;letter-spacing:-.6px;
     font-variant-numeric:tabular-nums;position:relative;z-index:2}
.cdU{display:block;font-size:11px;color:var(--tx3);margin-top:1px;position:relative;z-index:2}
.cd.cRd .cdN{color:var(--red)}
.cd.cGr .cdN{color:var(--green)}

.dPanel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 16px 14px;margin-bottom:12px;box-shadow:var(--sh1);
}
/* หัวข้อการ์ดในแดชบอร์ด มีขีดสีแบรนด์นำหน้า ให้ไล่สายตาลงมาเป็นชั้นๆ ได้ */
.dPanel h4{
  margin:0 0 14px;font-size:14px;font-weight:700;letter-spacing:-.1px;
  display:flex;align-items:center;gap:9px;
}
.dPanel h4::before{
  content:"";flex:none;width:3.5px;height:15px;border-radius:2px;background:var(--brand);
}

/* ---------- กราฟเส้น ---------- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{font-size:9.5px;fill:var(--tx3);text-anchor:middle}
.chart .ax.lt{text-anchor:start}

.leg{display:flex;gap:16px;margin-top:9px;font-size:11.5px;color:var(--tx2)}
.leg span{display:flex;align-items:center;gap:6px}
.leg i{width:14px;height:3px;border-radius:2px;flex:none}
.leg i.dash{
  background:none !important;
  background-image:repeating-linear-gradient(90deg,currentColor 0 5px,transparent 5px 9px) !important;
}

/* ---------- โดนัท ---------- */
.dnWrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.dn{width:132px;height:132px;flex:none}
.dn circle{transition:opacity .15s}
.dnWrap:hover .dn circle{opacity:.55}
.dnWrap .dn circle:hover{opacity:1}
.dnN{font-size:25px;font-weight:600;text-anchor:middle;fill:var(--tx)}
.dnL{font-size:10px;text-anchor:middle;fill:var(--tx3)}

.dnKey{flex:1 1 170px;display:flex;flex-direction:column;gap:7px;min-width:0}
.dnKey span{display:flex;align-items:center;gap:8px;font-size:12.5px}
.dnKey i{width:9px;height:9px;border-radius:3px;flex:none}
.dnKey b{font-weight:400;flex:1;min-width:0;overflow:hidden;
         text-overflow:ellipsis;white-space:nowrap}
.dnKey u{text-decoration:none;font-weight:600;font-variant-numeric:tabular-nums}
.dnKey em{font-style:normal;color:var(--tx3);font-size:11px;width:34px;text-align:right}

/* ---------- แท่งแนวนอน ---------- */
.bars{display:flex;flex-direction:column;gap:9px}
.br{display:flex;align-items:center;gap:10px;font-size:12.5px}
.brL{width:108px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx2)}
.brT{flex:1;height:9px;background:var(--bg);border-radius:5px;overflow:hidden;min-width:0}
.brT i{display:block;height:100%;border-radius:5px;background:var(--brand);
       animation:grow .5s cubic-bezier(.2,.8,.3,1)}
.brN{width:30px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
@keyframes grow{from{width:0 !important}}

/* ใช้สีสถานะชุดเดียวกับทั้งแอป คนจะได้จำสีเดียว ไม่ต้องจำใหม่ */
.brT i.violet{background:var(--violet)} .brT i.blue{background:var(--blue)}
.brT i.orange{background:var(--orange)} .brT i.cyan{background:var(--cyan)}
.brT i.teal{background:var(--teal)}     .brT i.green{background:var(--green)}
.brT i.red{background:var(--red)}       .brT i.gray{background:var(--gray)}

@media (prefers-reduced-motion:reduce){
  .brT i{animation:none}
}

/* ============================================================
 *  รูปแนบ  ตัวอย่าง และหน้าครอป
 * ============================================================ */

.hintPaste{margin:8px 2px 0;font-size:12px;color:var(--tx3);line-height:1.55}

.picPrev{display:none;padding:12px;border-top:1px solid var(--line)}
.picPrev.on{display:block}
.picPrev img{
  width:100%;max-height:230px;object-fit:contain;border-radius:8px;
  background:var(--bg);display:block;
}
.picX{
  margin-top:9px;width:100%;padding:8px;border-radius:8px;
  border:1px solid var(--line);background:var(--card);
  color:var(--red);font-size:13px;
}

/* กล่องครอป  ใช้ box-shadow ยักษ์ทำฉากมืดรอบกรอบ
 * ง่ายกว่าวาง overlay 4 ชิ้นรอบกรอบ และขยับตามกรอบเองอัตโนมัติ */
.cropWrap{
  position:relative;margin-top:14px;background:#000;border-radius:10px;
  overflow:hidden;touch-action:none;user-select:none;line-height:0;
}
.cropWrap img{width:100%;max-height:58vh;object-fit:contain;display:block}
.cropBox{
  position:absolute;border:1.5px solid #fff;border-radius:2px;
  box-shadow:0 0 0 9999px rgba(0,0,0,.52);cursor:move;
}
/* เส้นแบ่งสามส่วน ช่วยจัดองค์ประกอบ */
.cropBox::before,.cropBox::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(to right,transparent 33.3%,rgba(255,255,255,.3) 33.3%,
    rgba(255,255,255,.3) 33.6%,transparent 33.6%,transparent 66.6%,
    rgba(255,255,255,.3) 66.6%,rgba(255,255,255,.3) 66.9%,transparent 66.9%);
}
.cropBox::after{
  background-image:linear-gradient(to bottom,transparent 33.3%,rgba(255,255,255,.3) 33.3%,
    rgba(255,255,255,.3) 33.6%,transparent 33.6%,transparent 66.6%,
    rgba(255,255,255,.3) 66.6%,rgba(255,255,255,.3) 66.9%,transparent 66.9%);
}
/* มุมจับ ทำให้ใหญ่พอสำหรับนิ้ว ไม่ใช่แค่ขนาดที่เห็น */
.cropBox .ch{
  position:absolute;width:30px;height:30px;cursor:pointer;
}
.cropBox .ch::before{
  content:"";position:absolute;width:17px;height:17px;border:2.5px solid #fff;
}
.cropBox .ch.tl{left:-15px;top:-15px}
.cropBox .ch.tl::before{left:13px;top:13px;border-right:0;border-bottom:0}
.cropBox .ch.br{right:-15px;bottom:-15px}
.cropBox .ch.br::before{right:13px;bottom:13px;border-left:0;border-top:0}

/* ช่องเหตุผล/Spec ของ FM IT-01  โผล่เฉพาะงานที่ต้องขออนุมัติ
 * ใช้ grid-template-rows 0fr > 1fr เพื่อให้ยืดลื่นโดยไม่ต้องรู้ความสูงล่วงหน้า
 * ซึ่ง max-height ทำไม่ได้ถ้าไม่เดาเลขไว้ก่อน */
.apprFields{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s cubic-bezier(.2,.7,.3,1)}
.apprFields>.apprIn{overflow:hidden;min-height:0}
.apprFields.on{grid-template-rows:1fr}
@media (prefers-reduced-motion:reduce){.apprFields{transition:none}}

/* จุดบอกว่าหน้ากำลังอัปเดตอัตโนมัติอยู่
 * ขึ้นเฉพาะตอน poller ทำงาน ซึ่งมีแต่เจ้าหน้าที่ IT
 * ทำให้คนที่เปิดหน้าค้างไว้ทั้งวันรู้ว่าหน้ายังมีชีวิต ไม่ต้องคอยกดรีเฟรชเอง */
/* จุดต้องเกาะติดหัวข้อ ไม่ใช่ลอยกลางแถบ
 * space-between ของ .bar จะดันมันไปกลางถ้าไม่ดึงปุ่มไปชิดขวาเอง */
.bar .barBtns{margin-left:auto}
.live{width:7px;height:7px;border-radius:50%;background:var(--tx3);
      flex:none;margin-left:8px;opacity:0;transition:opacity .2s}
.live.on{opacity:1;background:var(--green);animation:livePulse 2.4s ease-in-out infinite}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(30,142,62,.45)}
  50%    {box-shadow:0 0 0 5px rgba(30,142,62,0)}
}
@media (prefers-reduced-motion:reduce){.live.on{animation:none}}

/* ============================================================
 *  ความเข้ากันได้ข้ามอุปกรณ์
 *  ------------------------------------------------------------
 *  แก้ปัญหาที่เจอจริงบนเครื่องแต่ละแบบ ไม่ใช่กฎลอยๆ
 * ============================================================ */

/* ---------- ความสูงจอบนมือถือ ----------
 * 100vh บน iOS Safari กับ Chrome Android นับรวมแถบที่อยู่เว็บที่ซ่อนๆ โผล่ๆ
 * ทำให้เนื้อหาล้นออกนอกจอ หรือมีที่ว่างค้างด้านล่าง
 * dvh คือความสูงที่มองเห็นจริง ณ ขณะนั้น ปรับตามแถบที่ซ่อนและคีย์บอร์ดเอง
 * เขียน vh ไว้ก่อนเป็นตัวสำรองให้เบราว์เซอร์เก่าที่ยังไม่รู้จัก dvh */
.screen{min-height:100vh;min-height:100dvh}
.sheetBox{max-height:90vh;max-height:85dvh}

/* ---------- ช่องกรอกบน iOS ----------
 * Safari จะซูมหน้าเข้าเองอัตโนมัติ ถ้าตัวอักษรในช่องเล็กกว่า 16px
 * พอซูมแล้วไม่ซูมกลับ ผู้ใช้ต้องถ่างนิ้วออกเอง ดูเหมือนแอปพัง
 * บังคับ 16px เฉพาะบนจอเล็ก จอใหญ่ใช้ขนาดเดิมที่สวยกว่า */
@media (max-width:600px){
  input, textarea, select, .shBox select{font-size:16px}
}

/* ---------- พื้นที่แตะ ----------
 * นิ้วคนกว้างราว 9 มิลลิเมตร ปุ่มที่เล็กกว่า 44px กดพลาดบ่อย
 * เป็นขนาดต่ำสุดที่ทั้ง Apple และ Google แนะนำตรงกัน */
button, .btn, .chip, .tb, .ib{min-height:44px}
.chip{display:inline-flex;align-items:center}

/* ---------- การแตะบนมือถือ ----------
 * touch-action:manipulation ตัดการรอตรวจดับเบิลแท็บออก
 * เบราว์เซอร์จะตอบสนองทันที แทนที่จะหน่วงราว 300 มิลลิวินาที
 * tap-highlight ของ Android เป็นกรอบส้มทึบ ดูไม่เข้ากับงานออกแบบ */
button, .btn, .chip, .tb, .ib, .r, [data-no], [data-tab]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- เลือกข้อความได้ ----------
 * เนื้อหาในใบคำร้องต้องคัดลอกได้ เช่น เลขใบ ชื่อเครื่อง รหัสผิดพลาด
 * แต่ปุ่มและป้ายต้องไม่ถูกเลือกตอนลากนิ้ว ไม่งั้นจะขึ้นแถบไฮไลต์กวนตา */
.shBody, .shTitle, .kv, .body, .detail, textarea{
  -webkit-user-select:text;user-select:text;
}
button, .btn, .chip, .tb, .grab, .grabWrap{
  -webkit-user-select:none;user-select:none;
}

/* ---------- ม่านโหลด ----------
 * ตอนไม่ได้แสดง ต้องไม่กินการแตะเด็ดขาด
 * ถ้ามันค้างอยู่โดยมองไม่เห็น ทั้งหน้าจะกดอะไรไม่ได้เลย */
.load{pointer-events:none}
.load.on{pointer-events:auto}

/* ---------- แท็บเล็ตและจอใหญ่ ----------
 * ของเดิมบีบทุกอย่างให้เหลือ 440px เท่ากันหมด
 * บนไอแพดแนวนอนหรือจอคอม จะเหลือที่ว่างสองข้างเยอะเกินจำเป็น */
@media (min-width:900px){
  .screen.on{max-width:520px}
  .sheetBox{max-width:520px}
}

/* ---------- จอความละเอียดสูง ----------
 * เส้นขอบ 1px บนจอ Retina จะดูหนากว่าที่ออกแบบไว้
 * ลดลงให้เหลือ 1 พิกเซลจริงของจอ */
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){
  .list, .panel, .cd, .dPanel, .shBox{border-width:.5px}
}

/* ---------- พิมพ์ออกกระดาษ ----------
 * หัวหน้าบางคนพิมพ์ใบคำร้องเก็บแฟ้ม ไม่ควรได้แถบเมนูติดไปด้วย */
@media print{
  .bar, .tabbar, .sheet, .toast, .load{display:none !important}
  .screen.on{max-width:none;box-shadow:none}
}

/* ============================================================
 *  แถบเมนูล่าง
 *  ------------------------------------------------------------
 *  ของเดิมเป็นพื้นขาวไอคอนเทา ดูเหมือนหน้าเว็บมากกว่าแอป
 *  ปรับให้เป็นแถบเข้มที่มีแคปซูลไฮไลต์เลื่อนตามแท็บที่เลือก
 *  ซึ่งเป็นภาษาการออกแบบที่คนคุ้นจากแอปที่ใช้อยู่ทุกวัน
 *  จึงอ่านออกทันทีว่าตอนนี้อยู่หน้าไหน โดยไม่ต้องอ่านตัวหนังสือ
 * ============================================================ */
.tabbar{
  background:linear-gradient(180deg,#1f2a44 0%,#161e33 100%);
  border-top:0;
  box-shadow:0 -1px 0 rgba(255,255,255,.07), 0 -10px 28px rgba(12,18,32,.18);
  padding:7px 6px calc(7px + var(--bot));
  gap:2px;
}
.tb{
  color:rgba(255,255,255,.55);
  border-radius:13px;
  padding:7px 0 6px;
  overflow:hidden;
}
/* แคปซูลไฮไลต์  วาดด้วย ::before ของตัวปุ่มเอง จะได้ไม่ต้องมี element เพิ่ม */
.tb::before{
  content:"";position:absolute;inset:3px 6px;border-radius:12px;
  background:linear-gradient(135deg,#2f6fe4,#1a4fb8);
  opacity:0;transform:scale(.82);
  transition:opacity .2s, transform .24s cubic-bezier(.34,1.25,.5,1);
}
.tb > *{position:relative;z-index:1}
.tb.on{color:#fff}
.tb.on::before{opacity:1;transform:scale(1)}
.tb.on svg{transform:translateY(-1px) scale(1.05)}
/* ขีดบนหัวของเดิมไม่ต้องแล้ว แคปซูลบอกชัดกว่า */
.tb::after{display:none}
.tb:active{transform:scale(.96)}
.tb b{font-weight:500;letter-spacing:.1px}

/* จุดแดงต้องเด่นบนพื้นเข้ม และไม่ถูกแคปซูลกลืน */
.tabbar .dot{
  box-shadow:0 0 0 2px #1b2439;
  z-index:2;
}

/* แถบหัวให้เข้าชุดกับแถบล่าง */
.bar{
  background:linear-gradient(135deg,#2f6fe4 0%,#1a4fb8 100%);
  box-shadow:0 2px 14px rgba(26,79,184,.22);
}

@media (prefers-reduced-motion:reduce){
  .tb::before{transition:none}
  .tb:active{transform:none}
}

/* ============================================================
 *  หมายเหตุแบบซ่อนไว้
 *  ------------------------------------------------------------
 *  คำอธิบายยาวๆ มีประโยชน์ตอนใช้ครั้งแรก แต่พอใช้คล่องแล้วจะรกตา
 *  ย่อให้เหลือปุ่มเครื่องหมายคำถามเล็กๆ กดแล้วค่อยกาง
 *  ใช้ details ของ HTML เอง ไม่ต้องเขียน JS คุมสถานะ
 *  และเครื่องอ่านหน้าจอรู้จักอยู่แล้วว่าอันไหนกางอยู่
 * ============================================================ */
.note{margin-top:14px}
.note > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  font-size:12px;color:var(--tx3);padding:5px 10px 5px 6px;border-radius:99px;
  border:1px solid var(--line);background:var(--card);
  -webkit-user-select:none;user-select:none;min-height:0;
}
.note > summary::-webkit-details-marker{display:none}
.note > summary:hover{color:var(--tx2);border-color:#cfd5dc}
.note > summary i{
  width:16px;height:16px;border-radius:50%;background:var(--line);color:var(--tx2);
  font-style:normal;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.note[open] > summary{color:var(--tx2)}
.note[open] > summary i{background:var(--brand);color:#fff}
.note .noteIn{
  margin-top:8px;font-size:12.5px;line-height:1.65;color:var(--tx2);
  background:var(--brand-l);border-radius:10px;padding:11px 13px;
  animation:noteIn .2s ease-out;
}
@keyframes noteIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.note .noteIn{animation:none}}

/* ============================================================
 *  กล่องยืนยัน
 *  ------------------------------------------------------------
 *  แทน confirm() ของเบราว์เซอร์ ซึ่งถูกปิดไว้ใน iframe ของ Apps Script
 *  z-index สูงกว่าแผ่นเลื่อน เพราะต้องซ้อนทับตอนถามยืนยันจากในแผ่น
 * ============================================================ */
.ask{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:22px;
  background:rgba(22,30,51,.55);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.ask.on{display:flex}
.askBox{
  background:var(--card);border-radius:16px;padding:20px 20px 16px;
  width:100%;max-width:360px;
  box-shadow:0 18px 50px rgba(12,18,32,.3);
  animation:askIn .18s cubic-bezier(.2,.9,.3,1);
}
.askBox h3{margin:0 0 10px;font-size:16px;font-weight:600}
#askBody{font-size:13.5px;line-height:1.7;color:var(--tx2)}
#askBody b{color:var(--tx);font-weight:600}
.askActs{display:flex;gap:9px;margin-top:18px}
.askActs .btn{flex:1;margin-top:0}
@keyframes askIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.askBox{animation:none}}

/* ข้อความผิดพลาดในแผ่นเลื่อน  ค้างอยู่จนกว่าจะทำอย่างอื่น
 * ต่างจาก toast ที่หายไปใน 3 วินาที ซึ่งอ่านไม่ทันถ้าข้อความยาว */
.shErr{
  display:none;background:#fde3e1;color:#8c1d18;
  border-radius:10px;padding:11px 13px;margin:0 0 14px;
  font-size:13px;line-height:1.6;
}
.shErr.on{display:block}

/* ============================================================
 *  หน้ารายละเอียด  แทนแผ่นลอยแบบเดิม
 *  ------------------------------------------------------------
 *  เป็นหน้าเต็มจอจริง ไม่ใช่ของลอยทับ จึงไม่มี
 *    พื้นหลังให้แตะพลาดแล้วปิด
 *    การปัดนิ้วปิด ที่ชนกับการลากเลือกข้อความ
 *    ความสูงจำกัดที่ชนกับคีย์บอร์ดเวลาเด้งขึ้นมา
 *    สกรอลล์สองชั้นซ้อนกัน ซึ่งเป็นต้นเหตุของการเลื่อนแล้วติด
 *
 *  ทับกฎเดิมทั้งหมดด้วย !important เพราะกฎเก่าของแผ่นลอย
 *  ยังอยู่ในไฟล์ด้านบน และต้องแน่ใจว่าถูกลบล้างหมดจริง
 * ============================================================ */
.sheet{
  position:fixed !important;inset:0 !important;z-index:45;
  display:none !important;
  flex-direction:column;
  background:var(--bg) !important;
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
.sheet.on{
  display:flex !important;
  animation:slideIn .22s cubic-bezier(.2,.9,.25,1);
}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* แถบหัวของหน้า  ปุ่มย้อนกลับอยู่ซ้าย ชื่อเรื่องอยู่ถัดมา */
.sheet .bar{flex:none}
.sheet .bar h1{font-size:16px;margin:0 0 0 4px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sheet .bar .ib{margin-left:-6px}

/* ตัวเนื้อหา  เลื่อนได้ชั้นเดียว ไม่มีความสูงจำกัด */
.sheetBox{
  flex:1 1 auto;min-height:0;
  max-height:none !important;
  border-radius:0 !important;
  background:var(--bg) !important;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:16px 16px calc(28px + var(--bot)) !important;
  animation:none !important;
  transform:none !important;
}
@media (min-width:600px){
  .sheetBox{max-width:440px;margin:0 auto;width:100%}
  .sheet .bar{padding-left:calc(50% - 220px + 6px);padding-right:calc(50% - 220px + 6px)}
}
@media (min-width:900px){
  .sheetBox{max-width:520px}
  .sheet .bar{padding-left:calc(50% - 260px + 6px);padding-right:calc(50% - 260px + 6px)}
}

/* แถบจับสำหรับปัดปิด ไม่มีแล้ว */
.grabWrap,.grab{display:none !important}

/* ============================================================
 *  แผงยืนยัน  อยู่ในหน้า ไม่ใช่กล่องลอย
 *  วางต่อท้ายเนื้อหาแล้วเลื่อนไปหา ผู้ใช้จึงเห็นบริบทเดิมอยู่ข้างบน
 *  ว่ากำลังจะยืนยันอะไรของใบไหน
 * ============================================================ */
.askIn{
  border:1.5px solid var(--brand);border-radius:12px;
  background:var(--card);padding:15px 15px 13px;margin-top:18px;
  animation:askPop .18s ease-out;
}
.askIn.danger{border-color:var(--red)}
.askIn h4{margin:0 0 8px;font-size:14.5px;font-weight:600}
.askIn .askTx{font-size:13px;line-height:1.7;color:var(--tx2)}
.askIn .askTx b{color:var(--tx);font-weight:600}
.askIn .acts{margin-top:14px}
@keyframes askPop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .sheet.on,.askIn{animation:none}
}

/* ============================================================
 *  โครงหน้าหลัก  กันสกรอลล์ซ้อนชั้น
 *  ------------------------------------------------------------
 *  ของเดิมมี .screen{height:100%} กับ min-height:100dvh ตีกันอยู่
 *  ในกรอบของ Apps Script ที่ความสูงถูกกำหนดจากข้างนอก
 *  min-height จะดันให้เอกสารสูงเกินกรอบ เกิดสกรอลล์อีกชั้นซ้อนขึ้นมา
 *  ซึ่งเป็นที่มาของแถบเลื่อนสองอันที่เห็นในภาพ
 * ============================================================ */
html,body{height:100%;overflow:hidden}
.screen{min-height:0}
.screen.on{height:100%}
.body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ============================================================
 *  ความกว้างของหน้า
 *  ------------------------------------------------------------
 *  ของเดิมบีบทั้งหน้าให้เหลือ 440 หรือ 520 พิกเซลบนจอใหญ่
 *  แถบสีจึงไม่เต็มจอ ดูเหมือนหน้าต่างเล็กๆ ลอยอยู่กลางจอขาว
 *
 *  เปลี่ยนเป็น พื้นหลังเต็มจอเสมอ แต่เนื้อหาข้างในจำกัดความกว้าง
 *  เพราะบรรทัดที่ยาวเกิน 70 ตัวอักษร สายตาจะหาจุดขึ้นบรรทัดใหม่ไม่เจอ
 *  ได้ทั้งความรู้สึกว่าเต็มจอ และยังอ่านง่าย
 *
 *  ประกาศไว้ท้ายไฟล์ เพื่อทับกฎจำกัดความกว้างทั้งหมดที่อยู่ด้านบน
 * ============================================================ */
.screen.on{max-width:none !important;margin:0 !important;box-shadow:none !important}

.barIn{
  display:flex;align-items:center;gap:10px;width:100%;
  max-width:var(--wide);margin:0 auto;
}
.tabbar .barIn{gap:2px}
.bar{padding-left:0 !important;padding-right:0 !important;
     padding-top:calc(var(--top) + 12px);padding-bottom:12px}
.bar .barIn{padding:0 10px 0 18px}
.sheet .bar .barIn{padding:0 14px 0 10px}
.tabbar{padding-left:0 !important;padding-right:0 !important}
.tabbar .barIn{padding:0 6px}

.body{padding-left:0;padding-right:0}
.body > .tab{max-width:var(--wide);margin:0 auto;width:100%;
             padding-left:16px;padding-right:16px;box-sizing:border-box}
.sheetBox > #sheetBody{max-width:var(--wide);margin:0 auto;width:100%}

:root{--wide:560px}
@media (min-width:1100px){:root{--wide:680px}}

/* ล้างกฎที่เหลือจากสมัยเป็นแผ่นลอย
 * align-items:flex-end ของเดิมมีไว้ดันแผ่นไปชิดขอบล่าง
 * พอเปลี่ยนทิศเป็นคอลัมน์ มันกลายเป็นดันทุกอย่างไปชิดขวา
 * และหดความกว้างให้เท่าเนื้อหา แถบหัวจึงเหลือแค่ 163 พิกเซลลอยอยู่มุมขวา
 * ส่วน max-width ของตัวเลื่อน ย้ายไปจำกัดที่เนื้อหาข้างในแทน
 * พื้นหลังจะได้เต็มจอ แต่บรรทัดยังสั้นพอให้อ่านสบาย */
.sheet{align-items:stretch !important;justify-content:flex-start !important}
.sheetBox{max-width:none !important;margin:0 !important;width:auto !important}

/* ============================================================
 *  ตัวเลือกรายการ  วาดเอง ไม่ใช้ select ของเบราว์เซอร์
 *  ------------------------------------------------------------
 *  เหตุผลอยู่ในคอมเมนต์ของ pickField ใน app.js
 *  สรุปสั้นๆ  select เปิดหน้าต่างของระบบปฏิบัติการ
 *  ซึ่งถูกปิดไว้ใน iframe แบบ sandbox ของ Apps Script
 * ============================================================ */
.pick{position:relative;margin-bottom:2px}

.pickBtn{
  width:100%;display:flex;align-items:center;gap:10px;
  border:1px solid var(--line);border-radius:12px;background:var(--card);
  padding:13px 14px;text-align:left;font-size:15px;color:var(--tx);
  transition:border-color .15s, box-shadow .15s;
}
.pick.has .pickBtn{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.pick.open .pickBtn{border-color:var(--brand);border-bottom-left-radius:0;border-bottom-right-radius:0}
.pickBtn:active{transform:scale(.995)}

.pickTx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pickTx.ph{color:var(--tx3)}
.pickAr{width:18px;height:18px;flex:none;color:var(--tx3);transition:transform .2s}
.pick.open .pickAr{transform:rotate(180deg);color:var(--brand)}

/* รายการกางอยู่ในหน้า ไม่ลอยทับ
 * ลอยทับแล้วต้องคำนวณตำแหน่งเอง ซึ่งพลาดได้ตอนเลื่อนหน้าหรือคีย์บอร์ดเด้ง
 * กางในหน้าแบบนี้ ดันเนื้อหาข้างล่างลงไปตรงๆ ไม่มีอะไรให้คำนวณผิด */
.pickList{
  display:none;
  border:1px solid var(--brand);border-top:0;
  border-radius:0 0 12px 12px;background:var(--card);overflow:hidden;
}
.pick.open .pickList{display:block;animation:pickIn .16s ease-out}
@keyframes pickIn{from{opacity:0}to{opacity:1}}

.pickOpt{
  display:block;width:100%;text-align:left;
  padding:13px 14px;font-size:14.5px;color:var(--tx);
  border-top:1px solid var(--line);background:none;
  min-height:48px;
}
.pickOpt:first-child{border-top:0}
.pickOpt:hover{background:var(--brand-l)}
.pickOpt:active{background:var(--brand-l)}
.pickOpt.on{background:var(--brand-l);color:var(--brand-d);font-weight:500}
.pickOpt.on::after{content:" ✓";font-weight:700}

/* ============================================================
 *  ปุ่มสลับสองทาง  ใช้เลือกวิธีรับรอง
 * ============================================================ */
.segs{display:flex;gap:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
.seg{flex:1;padding:12px 8px;font-size:14px;color:var(--tx2);background:none;border-left:1px solid var(--line)}
.seg:first-child{border-left:0}
.seg.on{background:var(--brand);color:#fff;font-weight:500}
.seg.off{opacity:.4;pointer-events:none}

.signHint{
  font-size:13px;color:var(--tx2);line-height:1.7;
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
}
.signHint b{color:var(--tx);font-weight:600}
.linkBtn{
  display:block;margin-top:6px;padding:0;background:none;border:0;min-height:0;
  color:var(--brand);font-size:13px;text-decoration:underline;text-align:left;
}

@media (prefers-reduced-motion:reduce){
  .pick.open .pickList{animation:none}
  .pickAr{transition:none}
}

/* หัวข้อกลุ่มในรายการตัวเลือก
 * ติดอยู่ด้านบนตอนเลื่อน จะได้รู้ตลอดว่ากำลังดูกลุ่มไหนอยู่ */
.pickGrp{
  position:sticky;top:0;z-index:1;
  background:var(--bg);color:var(--tx2);
  font-size:11.5px;font-weight:600;letter-spacing:.2px;
  padding:7px 14px 6px;border-bottom:1px solid var(--line);
}
.pickList{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* จุดสีหน้าตัวเลือก  บอกผลลัพธ์ก่อนอ่านข้อความ */
.pickOpt{display:flex;align-items:center;gap:10px}
.optTx{flex:1;min-width:0}
.dotC{width:10px;height:10px;border-radius:50%;flex:none;
      box-shadow:0 0 0 2.5px rgba(0,0,0,.05)}
.dotC.gre{background:var(--green)}
.dotC.yel{background:#e8a81e}
.dotC.blu{background:var(--blue)}
.dotC.red{background:var(--red)}

/* ============================================================
 *  หน้าประวัติที่ปิดแล้ว
 * ============================================================ */
.hFilter{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
         padding:12px;margin-bottom:12px;box-shadow:var(--sh1)}
.hRow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.hRow:last-of-type{margin-bottom:0}
.hFld{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.hFld span{font-size:11.5px;color:var(--tx2)}
.hFld input,.hRow input[type=search]{
  width:100%;border:1px solid var(--line);border-radius:9px;
  padding:9px 10px;font-size:14px;background:var(--bg);color:var(--tx);
  min-height:40px;box-sizing:border-box;
}
.hRow input[type=search]{flex:1;min-width:0}
.btn.sm{margin-top:0;padding:9px 13px;font-size:13.5px;min-height:40px;flex:none;width:auto}
.btn.ghost{background:none;border-color:transparent;color:var(--tx2)}
.hInfo{margin:9px 2px 0;font-size:12px;color:var(--tx2);line-height:1.6}

/* ---------- แถวช่วงเวลาสำเร็จรูป ----------
 * ใช้ชิปชุดเดียวกับแถบบนของคิว แต่เล็กลงนิด
 * เพื่อให้เห็นว่าเป็นตัวกรองย่อยในกล่อง ไม่ใช่แถบสลับหน้าอีกอัน */
/* ยืดออกไปชนขอบกล่องทั้งสองข้าง แล้วดันเนื้อในกลับด้วย padding
 * ชิปที่เลื่อนพ้นจอจะถูกตัดที่ขอบกล่องพอดี ดูออกว่ายังเลื่อนต่อได้
 * ถ้าตัดกลางคันกลางกล่อง จะดูเหมือนหน้าเพี้ยนมากกว่าเลื่อนได้ */
.chips.sub{margin:0 -12px;padding:0 12px 10px}
.chips.sub .chip{padding:6px 12px;font-size:12.5px}

/* ---------- แถวกล่องเลือก ----------
 * วางเรียงกันได้ ขึ้นบรรทัดใหม่เมื่อจอแคบ
 * ไม่บีบให้อยู่บรรทัดเดียว เพราะชื่อแผนกภาษาไทยยาวกว่าที่คิดเสมอ */
.hPicks{flex-wrap:wrap}
.hPicks .pick{flex:1 1 150px;min-width:0;margin:0}
.hPicks .pickBtn{min-height:40px;padding:8px 11px;font-size:13.5px}
.hPicks .pickList{max-height:260px}

/* แถบเปลี่ยนหน้า */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
       align-items:center;margin:14px 0 4px}
.pg{
  min-width:40px;min-height:40px;padding:0 12px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--tx);
  font-size:13.5px;
}
.pg.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}
.pg[disabled]{opacity:.4}
.pgGap{color:var(--tx3);padding:0 2px}

/* ปุ่มสลับภาษา ใช้ตัวอักษรแทนไอคอน เพราะต้องบอกว่าจะสลับไปภาษาอะไร */
.lgTx{font-size:12px;font-weight:700;letter-spacing:.5px}

/* ============================================================
 *  ธีมมืด
 *  ------------------------------------------------------------
 *  สลับด้วยตัวแปรสีชุดเดียว ไม่ต้องเขียนกฎซ้ำทั้งไฟล์
 *  ค่าสีเลือกให้คอนทราสต์ผ่านเกณฑ์ WCAG AA ทั้งคู่
 *  พื้นหลังไม่ใช้ดำสนิท เพราะจอ OLED จะทำให้ตัวหนังสือขาวดูเรืองแสงจนแสบตา
 * ============================================================ */
html[data-theme="dark"]{
  /* โหมดมืดใช้โทนน้ำเงินกรมเหมือนกัน ไม่ใช่เทากลาง
   * เพื่อให้รู้สึกเป็นแอปเดียวกัน แค่ปิดไฟ ไม่ใช่คนละแอป */
  --bg:#0c1726;
  --card:#132337;
  --line:#23374f;
  --tx:#e6eefb;
  --tx2:#9fb2cc;
  --tx3:#6b7f9b;
  --brand:#4d9bff;
  --brand-d:#2f7ae0;
  --brand-l:#16304f;
  --navy:#cfe0f7;
  --violet:#a98cf0; --blue:#4d9bff; --orange:#ffc473;
  --cyan:#3fc9e0;   --teal:#2fd4c8; --green:#3fd396;
  --red:#ff7b7b;    --gray:#7f93ad;

  --sh1:0 1px 2px rgba(0,0,0,.35);
  --sh2:0 4px 14px rgba(0,0,0,.4);
  --sh3:0 12px 32px rgba(0,0,0,.5);
}
html[data-theme="dark"] body{background:var(--bg);color:var(--tx)}
html[data-theme="dark"] .bar{
  background:linear-gradient(135deg,#243352 0%,#1a2742 100%);
  box-shadow:0 2px 14px rgba(0,0,0,.35);
}
html[data-theme="dark"] .tabbar{
  background:linear-gradient(180deg,#1a2130 0%,#141a26 100%);
}
/* ---------- ป้ายแผนกในโหมดมืด ----------
 * สีพื้นชุดกลางวันเป็นสีอ่อนเกือบขาว เอามาวางบนพื้นมืดแล้วจ้าแสบตา
 * และตัวหนังสือสีเข้มบนพื้นอ่อนก็ยังอ่านออก แต่ไปตัดกับทั้งหน้าจนเด่นเกินเหตุ
 * โหมดมืดจึงกลับขั้ว พื้นเข้มจาง ตัวหนังสือสีสด เรียงลำดับสีเดิมทั้งสิบ */
html[data-theme="dark"] .dTag.dc0{background:#1b2d4a;color:#8fb8ff}
html[data-theme="dark"] .dTag.dc1{background:#1a3326;color:#73d992}
html[data-theme="dark"] .dTag.dc2{background:#3a2a14;color:#f0b46a}
html[data-theme="dark"] .dTag.dc3{background:#2a2345;color:#bda6f5}
html[data-theme="dark"] .dTag.dc4{background:#14323a;color:#64cfe0}
html[data-theme="dark"] .dTag.dc5{background:#3a1f2e;color:#f093bb}
html[data-theme="dark"] .dTag.dc6{background:#30331a;color:#cdd47a}
html[data-theme="dark"] .dTag.dc7{background:#1a2c3a;color:#8dc2e8}
html[data-theme="dark"] .dTag.dc8{background:#3a2d14;color:#e8bd6a}
html[data-theme="dark"] .dTag.dc9{background:#19301c;color:#7fd084}

html[data-theme="dark"] .r1 i{background:#131922;border-color:#2b3542}
html[data-theme="dark"] .bar{box-shadow:0 2px 14px rgba(0,0,0,.35)}
html[data-theme="dark"] .toast{background:#0d1118;border:1px solid var(--line)}
html[data-theme="dark"] .load{background:rgba(20,25,34,.6)}
html[data-theme="dark"] .sheet{background:var(--bg)}
html[data-theme="dark"] .shErr{background:#3a1f1d;color:#ffb3ac}
html[data-theme="dark"] .askIn{background:var(--card)}
html[data-theme="dark"] .picPrev img,
html[data-theme="dark"] .brT{background:#111621}
html[data-theme="dark"] .cropWrap{background:#000}
html[data-theme="dark"] .dotC{box-shadow:0 0 0 2.5px rgba(255,255,255,.07)}
html[data-theme="dark"] .pickGrp{background:var(--bg)}
html[data-theme="dark"] .hFld input,
html[data-theme="dark"] .hRow input[type=search]{background:#121823;color:var(--tx)}
/* ปฏิทินกับลูกศรของช่องวันที่เป็นไอคอนของเบราว์เซอร์ ต้องกลับสีเอง */
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator{filter:invert(.85)}

/* เปลี่ยนธีมแล้วอย่าให้ทั้งหน้ากะพริบ */
body,.bar,.tabbar,.list,.panel,.card,.cd,.dPanel,.sheet,.sheetBox{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (prefers-reduced-motion:reduce){
  body,.bar,.tabbar,.list,.panel,.card,.cd,.dPanel,.sheet,.sheetBox{transition:none}
}

/* ============================================================
 *  แถบข้างสำหรับจอกว้าง
 *  ------------------------------------------------------------
 *  มือถือยังใช้แถบล่างเหมือนเดิม ไม่ได้เปลี่ยน
 *  เพราะนิ้วโป้งเอื้อมถึงด้านล่างได้ แต่เอื้อมไปซ้ายบนไม่ถึง
 *
 *  จอกว้างกลับกัน แถบล่างกว้างเป็นเมตรแล้วมีปุ่มห้าปุ่มกระจายอยู่
 *  ต้องกวาดเมาส์ข้ามจอไปกด ซึ่งช้ากว่าแถบข้างที่อยู่นิ่งที่เดิม
 *  และแถบข้างยังมีที่พอให้เขียนชื่อเมนูเต็มๆ ไม่ต้องย่อ
 * ============================================================ */
.side{display:none}

@media (min-width:900px){
  #scApp.on{flex-direction:row}
  .shell{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}

  .side{
    display:flex;flex-direction:column;flex:none;width:248px;
    background:var(--card);border-right:1px solid var(--line);
    padding-top:var(--top);transition:width .18s cubic-bezier(.4,0,.2,1);
  }
  .sideTop{
    display:flex;align-items:center;gap:10px;padding:16px 14px 14px;
    border-bottom:1px solid var(--line);
  }
  .sideLogo{width:34px;height:34px;flex:none;border-radius:9px}
  .sideName{
    flex:1;min-width:0;font-size:15.5px;font-weight:700;color:var(--navy);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px;
  }
  .sideFold{
    width:28px;height:28px;flex:none;border-radius:8px;color:var(--tx3);
    display:flex;align-items:center;justify-content:center;transition:.15s;
  }
  .sideFold:hover{background:var(--bg);color:var(--tx)}
  .sideFold svg{transform:rotate(180deg);transition:transform .18s}

  .sideNav{flex:1;min-height:0;overflow-y:auto;padding:12px 10px;display:flex;
           flex-direction:column;gap:3px}
  .sv{
    display:flex;align-items:center;gap:12px;width:100%;text-align:left;
    padding:11px 12px;border-radius:var(--r-sm);color:var(--tx2);
    font-size:14.5px;position:relative;transition:.15s;
  }
  .sv svg{font-size:20px;flex:none}
  .sv b{flex:1;min-width:0;font-weight:500;white-space:nowrap;overflow:hidden;
        text-overflow:ellipsis}
  .sv:hover{background:var(--bg);color:var(--tx)}
  .sv.on{
    background:linear-gradient(135deg, var(--brand) 0%, var(--brand-d) 100%);
    color:#fff;box-shadow:0 4px 12px rgba(15,107,255,.28);
  }
  .sv.on b{font-weight:600}
  /* ขีด teal หน้าเมนูที่เลือก  สีรองของแบรนด์ ใช้บอกของที่กำลังเลือกอยู่ */
  .sv.on::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--teal);
  }
  .sv .dot{
    position:static;min-width:20px;height:20px;border-radius:999px;
    background:var(--red);color:#fff;display:none;flex:none;
    font-family:"Inter",sans-serif;font-size:11px;font-weight:700;font-style:normal;
    align-items:center;justify-content:center;padding:0 6px;
  }
  .sv .dot.on{display:flex}
  .sv.on .dot{background:rgba(255,255,255,.25)}

  .sideFoot{padding:12px;border-top:1px solid var(--line)}
  .sideCard{
    background:linear-gradient(145deg, var(--brand-l) 0%, rgba(0,194,184,.12) 100%);
    border-radius:var(--r-md);padding:12px;text-align:center;
  }
  .sideCard img{width:72px;height:72px;margin:0 auto 6px;display:block}
  .sideCard p{margin:0;font-size:12px;line-height:1.6;color:var(--tx2)}

  /* จอกว้างไม่ต้องมีแถบล่างแล้ว ซ้ำกับแถบข้าง */
  .tabbar{display:none}

  /* แถบบนไม่ต้องกินเต็มจอ เพราะมีแถบข้างกินที่ไปแล้ว */
  .bar{padding-left:22px}
  .body{padding:22px 24px 32px}
  .barIn,.body>.tab{max-width:1180px}

  /* ย่อแถบข้างให้เหลือแต่ไอคอน  จอ 1366 ที่ต้องดูตารางกว้างๆ จะได้ที่คืนมา */
  .side.fold{width:68px}
  .side.fold .sideName,.side.fold .sv b,.side.fold .sideFoot{display:none}
  .side.fold .sv{justify-content:center;padding:11px 0}
  .side.fold .sideFold svg{transform:none}
  .side.fold .sideTop{justify-content:center;padding:16px 0 14px}
  .side.fold .sv .dot{
    position:absolute;top:4px;right:10px;min-width:16px;height:16px;font-size:9.5px;padding:0 4px;
  }
}

@media (min-width:1280px){
  .side{width:264px}
}

/* ---------- ฐานความรู้ ---------- */
.faqTop{margin-bottom:10px}
.faqItem{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);
  margin-bottom:9px;overflow:hidden;box-shadow:var(--sh1);
}
.faqQ{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:14px 15px;font-size:14.5px;font-weight:600;color:var(--tx);
}
.faqQ svg{font-size:18px;color:var(--tx3);flex:none;transition:transform .18s}
.faqItem.open .faqQ svg{transform:rotate(180deg);color:var(--brand)}
.faqQ .faqTx{flex:1;min-width:0}
.faqA{
  max-height:0;overflow:hidden;transition:max-height .22s ease;
  font-size:13.5px;line-height:1.75;color:var(--tx2);padding:0 15px;
}
.faqItem.open .faqA{max-height:600px;padding:0 15px 15px}
/* ป้ายหมวด ต้องระบุ flex:none และห้ามโดนกฎ flex:1 ของหัวข้อ
 * เคยพลาดมาแล้ว เพราะทั้งคู่เป็น span เหมือนกัน ป้ายเลยยืดเต็มแถว */
.faqTag{
  font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;flex:none;
  white-space:nowrap;
  background:color-mix(in srgb, var(--brand) 13%, transparent);
  color:var(--brand);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  .faqTag{background:var(--brand-l)}
}

/* ============================================================
 *  แบนเนอร์ทักทายหน้าแรก
 *  ------------------------------------------------------------
 *  ตัวเลขบนการ์ดคิดจากใบคำร้องจริงของคนที่ login อยู่
 *  ไม่ใช่ค่าตัวอย่างที่เขียนตายไว้ให้ดูสวย
 *  ถ้าเลขไม่ตรงกับความจริง คนจะเลิกเชื่อทั้งหน้าภายในสัปดาห์เดียว
 * ============================================================ */
.hero{
  position:relative;overflow:hidden;border-radius:var(--r-lg);margin-bottom:14px;
  background:linear-gradient(135deg, #1e88ff 0%, var(--brand) 48%, #0a4fc4 100%);
  color:#fff;padding:20px 20px 18px;box-shadow:var(--sh2);
}
/* วงกลมจางๆ สองวงให้พื้นมีมิติ ไม่ใช่สีทึบแบนๆ
   pointer-events:none กันไม่ให้ไปบังการกดปุ่มที่อยู่ข้างบน */
.hero::before,.hero::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.10);
}
.hero::before{width:220px;height:220px;right:-70px;top:-90px}
.hero::after{width:150px;height:150px;right:60px;bottom:-90px;background:rgba(0,194,184,.18)}

.heroIn{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.heroTx{flex:1;min-width:0}
.heroHi{font-size:13px;opacity:.9;margin:0 0 2px}
.heroName{font-size:20px;font-weight:700;margin:0 0 5px;letter-spacing:-.3px;
          white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.heroSub{font-size:12.5px;opacity:.88;margin:0;line-height:1.6}
.heroPic{
  width:78px;height:78px;flex:none;border-radius:50%;padding:5px;
  background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.16);
}
.heroPic img{width:100%;height:100%;display:block;border-radius:50%}

/* การ์ดสรุปในแบนเนอร์ ใช้พื้นโปร่งบนสีน้ำเงิน แทนการ์ดขาวทึบ
   จะได้ดูเป็นก้อนเดียวกับแบนเนอร์ ไม่ใช่การ์ดลอยมาวางทับ */
.heroCards{
  position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);
  gap:8px;margin-top:16px;
}
.hc{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
  border-radius:var(--r-sm);padding:9px 10px;text-align:center;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.hc u{display:block;text-decoration:none;font-size:19px;font-weight:700;
      line-height:1.2;font-variant-numeric:tabular-nums}
.hc span{display:block;font-size:10.5px;opacity:.9;margin-top:1px;
         white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc.warn u{color:#ffe08a}

@media (max-width:359px){
  .heroCards{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
  .hero{padding:24px 26px 22px}
  .heroName{font-size:23px}
  .heroPic{width:96px;height:96px}
  .heroCards{gap:10px}
}