@font-face{font-family:AccDeskThai;src:url('/fonts/noto-sans-thai.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--bg:#f3f6fb;--card:#fff;--ink:#16233c;--mut:#52627c;--acc:#1f56c7;--acc2:#16305c;--warn:#a34717;--line:#dde5f1}
*{box-sizing:border-box}body{margin:0;font-family:AccDeskThai,'Noto Sans Thai','Leelawadee UI','Tahoma','Segoe UI',sans-serif;font-size:16px;line-height:1.65;background:var(--bg);color:var(--ink)}
.wrap{max-width:1360px;margin:0 auto;padding:24px}
/* 🧭 แถบนำทาง — เจ้าของ 2026-08-21: "รายการเดินบัญชีไปอยู่ด้านบนทำให้ดูงง ว่าเป็นหน้านี้หรือต้องกดเข้าไปดู"
   ของเดิมเป็น <p> ลิงก์เปล่า ๆ วางเหนือ <h1> ⇒ อ่านแล้วแยกไม่ออกว่าอันไหน "ชื่อหน้าที่อยู่ตอนนี้"
   อันไหน "ทางไปหน้าอื่น" — โดยเฉพาะเมื่อลิงก์มีอิโมจิ+ตัวหนาเหมือนหัวข้อ
   ⇒ ทำเป็นแถบสีอ่อนมีป้าย "ไปหน้าอื่น:" กำกับ + ลิงก์เป็นชิปที่ดูกดได้ · หัวข้อจริงคือ <h1> ใต้แถบเท่านั้น */
.pnav{display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#e9eef9;border:1px solid var(--line);border-radius:10px;padding:7px 11px;margin:0 0 14px}
.pnav .pnlabel{font-size:12px;color:var(--mut);margin-left:5px}
.pnav a{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 11px;font-size:13px;text-decoration:none;color:var(--acc2)}
.pnav a:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
.pnav a.pnback{background:transparent;border-color:transparent;padding-left:0;font-weight:600}
.pnav a.pnback:hover{background:transparent;color:var(--acc);text-decoration:underline}
/* ↩ ปุ่มกลับหน้าที่แล้ว — เจ้าของถาม 2026-09-04 "กดเปิดแล้วจะกลับหน้าเดิมยังไง"
   เดิม 8 หน้ามีแถบที่ขึ้นป้าย "ไปหน้าอื่น:" โดยไม่มีลิงก์สักอัน ⇒ เปิดใบจากคิวตรวจ/หน้าหมวดแล้วกลับไม่ได้
   ใช้ history.back() เพราะใบเดียวเปิดได้จากหลายทาง (คิวตรวจ · หมวดรายจ่าย · ผลค้นหา · ธง)
   การ hardcode ปลายทางเดียวจะพากลับผิดที่เสมอสำหรับทางที่เหลือ */
.pnav .pnbackbtn{background:#fff;border:1px solid var(--line);border-radius:99px;padding:4px 11px;font:inherit;font-size:13px;color:var(--acc2);cursor:pointer}
.pnav .pnbackbtn:hover{background:var(--acc);color:#fff;border-color:var(--acc)}
/* 📱 UI 2026-08-13 — เจ้าของดู template dashboard แล้วสั่ง "ทำให้ดูง่าย ใช้ง่ายขึ้น" ชอบตัวเลขใหญ่ ชัด
   🔴 ที่เจอตอนสำรวจ: กริดการ์ดหลายหน้าใช้จำนวนคอลัมน์ **ตายตัว** (repeat(4,1fr) / 1fr 1fr 1fr) ไม่มี breakpoint
      ⇒ บนมือถือ (เจ้าของใช้เป็นหลัก — ภาพหน้าจอที่ส่งมาเป็นมือถือทุกครั้ง) ตัวเลขเงินถูกบีบจนอ่านไม่ออก
   ⇒ auto-fit + minmax ให้คอลัมน์ลดเองตามจอ · ตัวเลขใช้ clamp() โตตามจอแทนค่าคงที่
   ⚠️ minmax ห้ามเกิน ~210px สำหรับการ์ดตัวเลข — จอ 360px จะเหลือคอลัมน์เดียวแล้วหน้ายาวเกินจนต้องเลื่อนหา */
/* grid 3 คอลัมน์: ซ้าย-ขวากว้างเท่ากันเสมอ → ช่องค้นหาอยู่กึ่งกลางจอจริง
   (เดิม flex space-between ทำให้ช่องค้นหาเบี้ยวซ้าย เพราะกลุ่มปุ่มขวายาวกว่าโลโก้มาก — owner เห็น 07-31) */
.top{display:grid;grid-template-columns:1fr minmax(220px,620px) 1fr;align-items:center;gap:10px;padding:12px 20px;background:var(--acc);color:#fff}
.top b{font-size:18px}.top a,.top span{color:#cdddf7;text-decoration:none;font-size:14px}
.top .navwrap{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;justify-self:end}
.top .whoami{color:#cdddf7;font-size:13px;padding:6px 4px;opacity:.9}
.top .navbtn{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);color:#fff;border-radius:8px;padding:6px 12px;font-size:13.5px;line-height:1;transition:background .12s}
.top .navbtn:hover{background:rgba(255,255,255,.28)}
.top .navbtn.out{background:transparent;border-color:rgba(255,255,255,.30);color:#cdddf7}
/* ไม่ใส่ order บนจอใหญ่ — ให้เรียงตาม DOM (โลโก้ → ช่องค้น → เมนู) ช่องค้นจะอยู่กลางพอดี
   เคยใส่ order:2 ไว้ ทำให้ถูกดันไปท้ายสุดหลังเมนู (owner 07-30 ทัก) */
.gsearch{display:flex;gap:6px;min-width:0;width:100%}
.gsearch input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.16);color:#fff;border-radius:8px;padding:7px 12px;font-size:13.5px}
.gsearch input::placeholder{color:#dce8fa;opacity:.85}
.gsearch input:focus{outline:2px solid rgba(255,255,255,.5);background:rgba(255,255,255,.24)}
.gsearch button{background:#fff;color:var(--acc);border:0;border-radius:8px;padding:7px 14px;font-size:13.5px;font-weight:700;cursor:pointer}
/* จอแคบ: ช่องค้นลงบรรทัดของตัวเองใต้เมนู (order:3 ดันไปท้าย) กันเบียดจนกดยาก */
@media(max-width:860px){.top{grid-template-columns:1fr}.top .navwrap{justify-self:start}.gsearch{order:3}}
.top .navbtn.out:hover{background:rgba(255,255,255,.14);color:#fff}
.top .brand{color:#fff;font-size:18px;font-weight:700;margin-left:0;display:inline-flex;align-items:center;gap:9px}
.top .brand img{border-radius:6px;display:block}
.top .brand .ver{font-size:11px;font-weight:600;color:#cdddf7;background:rgba(255,255,255,.16);border-radius:20px;padding:2px 8px;margin-left:2px;letter-spacing:.02em}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin:14px 0}
/* 📱 iOS ซูมเข้าเองทุกครั้งที่แตะช่องที่ฟอนต์ < 16px — ต้อง ≥16px ทุกช่องกรอก ไม่งั้นจอเด้งทั้งวัน */
input,select,textarea{font-size:16px}
.grid>.card>h2{font-size:clamp(24px,4.6vw,32px);letter-spacing:-.5px;line-height:1.2}
h1{font-size:22px;margin:8px 0}h2{font-size:17px;margin:0 0 10px}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--mut);font-weight:600;white-space:nowrap}
.btn{display:inline-block;background:var(--acc);color:#fff;border:none;border-radius:8px;padding:9px 16px;font-size:14px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--acc2)}.btn.sec{background:#eaf0fb;color:var(--acc2)}
.badge{display:inline-block;border-radius:99px;padding:2px 10px;font-size:12px}
.b-new,.b-processing{background:#fff6e8;color:#9a6b12}.b-review{background:#fdeee6;color:var(--warn)}.b-filed{background:#e7effb;color:var(--acc2)}.b-rejected{background:#eee;color:#777}.b-split{background:#e6f5ee;color:#0e7a58}.b-attach{background:#f0edfa;color:#5b4a9e}
.miss{color:var(--warn)}.ok{color:var(--acc2)}
input,select,textarea{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;width:100%;background:#fff}
label{font-size:13px;color:var(--mut);display:block;margin:8px 0 3px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.drop{border:2px dashed var(--acc);border-radius:12px;padding:34px;text-align:center;color:var(--mut);cursor:pointer;background:#f7faff}
.drop.over{background:#e7effb}
.thumb{max-width:100%;max-height:420px;border:1px solid var(--line);border-radius:8px}
.pdfthumb,.filethumb{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--acc2);text-decoration:none}
.pdfthumb canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0;background:#fff;transition:opacity .12s}
.pdfthumb.pdf-ready canvas{opacity:1}
.pdfthumb.pdf-ready>span{visibility:hidden}
.pvclick{cursor:zoom-in}
.pvbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.pvbar .btn{padding:6px 11px;font-size:13px}
.lb{position:fixed;inset:0;z-index:9997;background:rgba(8,16,32,.93);display:none;flex-direction:column}
.lb.open{display:flex}
.lbtop{display:flex;gap:8px;justify-content:flex-end;align-items:center;padding:10px 14px;flex:0 0 auto}
.lbhint{color:#9fb6dd;font-size:12.5px;margin-right:auto}
.lbx{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff;border-radius:8px;min-width:38px;height:34px;padding:0 11px;cursor:pointer;font-family:inherit;font-size:14px}
.lbx:hover{background:rgba(255,255,255,.24)}
.lbstage{flex:1;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:0 12px 14px}
.lbimg{max-width:100%;max-height:100%;transform-origin:center;transition:transform .12s ease-out;cursor:grab;border-radius:6px;background:#fff}
.lbimg:active{cursor:grabbing}
.lbpdf{width:100%;height:100%;border-radius:6px;background:#fff}
.muted{color:var(--mut);font-size:13px}
.login{max-width:380px;margin:9vh auto}
.flex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* งานหลักมีทางเข้าคงที่ทุกหน้า; งานตั้งค่าพับไว้ในเมนูของมัน */
.appnav{display:flex;align-items:center;gap:6px;padding:10px max(20px,calc((100vw - 1312px)/2));background:#fff;border-bottom:1px solid var(--line);flex-wrap:wrap}
.appnav a{padding:8px 13px;border-radius:8px;color:var(--acc2);font-size:14px;font-weight:600;text-decoration:none}
.appnav a[aria-current="page"]{background:#eaf0fb;color:var(--acc)}
.adminmenu{position:relative}.adminmenu summary{list-style:none;cursor:pointer}.adminmenu summary::-webkit-details-marker{display:none}
.adminlinks{position:absolute;right:0;top:36px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;min-width:180px;z-index:100;box-shadow:0 8px 24px #16305c22}
.top .adminlinks a{display:block;color:var(--ink);padding:9px 12px}.top .adminlinks a:hover{background:#eaf0fb}
.company-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));gap:16px;margin:16px 0}
.company-card{margin:0;display:flex;flex-direction:column;gap:14px}.company-card h2{font-size:18px;margin:0}.company-card .company-todo{font-size:13px;line-height:1.6}
.company-card .company-tools{margin-top:auto}.company-tools details{margin-top:12px}.company-tools summary{cursor:pointer;color:var(--acc2);font-size:14px;font-weight:600}
.company-tools .flex{margin-top:10px}.section-tools{border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:12px 0;background:#fff}
.section-tools>summary{cursor:pointer;font-weight:600;color:var(--acc2);line-height:1.6}.section-tools[open]>summary{margin-bottom:10px}
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:18px;align-items:start}.doc-layout>*{min-width:0}.doc-layout>.card,.doc-layout>div>.card:first-child{margin-top:0}
.doc-steps{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.doc-steps a{background:#fff;border:1px solid var(--line);padding:9px 14px;border-radius:9px;text-decoration:none;color:var(--acc2);font-weight:600;font-size:14px}
.doc-title{display:flex;gap:16px;justify-content:space-between;align-items:start;flex-wrap:wrap}.doc-title h1{margin:0;font-size:24px}.doc-title .doc-amount{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.money-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:12px 0}.money-grid>div{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px}.money-grid b{display:block;font-size:23px;margin-top:5px;font-variant-numeric:tabular-nums}
.pairing-area{scroll-margin-top:15px}.pairing-area>.card:first-child{margin-top:0}.pairing-area h2{font-size:20px}.pairing-area .card{box-shadow:none}
.doc-actions{position:sticky;bottom:0;background:#fff;border-top:1px solid var(--line);padding:12px 0 4px;z-index:2}.doc-actions details{width:100%}.doc-actions summary{font-size:13px;color:var(--mut);cursor:pointer}
.empty-state{padding:24px;text-align:center;background:#f7faff;border:1px dashed var(--line);border-radius:10px;color:var(--mut)}
.table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.table-scroll:focus-visible{outline:2px solid var(--acc)}
.btn{min-height:40px;line-height:1.45}.btn:disabled{opacity:.45;cursor:not-allowed}.skip-link{position:absolute;top:-80px;left:12px;z-index:10000;background:#fff;padding:12px;color:var(--acc)}.skip-link:focus{top:10px}
input,select,textarea{font-size:16px;min-height:40px}input[type=checkbox],input[type=radio]{min-height:0}
:focus-visible{outline:3px solid #6193ee;outline-offset:3px}a{color:var(--acc)}.card p{line-height:1.65}td{line-height:1.55}
[id]{scroll-margin-top:16px}
@media(max-width:920px){.doc-layout{grid-template-columns:1fr}.doc-actions{position:static}}
@media(max-width:600px){.wrap{padding:14px}.card{padding:14px}.top{padding:12px 14px}.top .navwrap{gap:6px}.top .navbtn{padding:8px 10px}.appnav{padding:8px;gap:2px}.appnav a{padding:8px;font-size:13px}.money-grid{grid-template-columns:1fr 1fr}.money-grid b{font-size:20px}.doc-title h1{font-size:21px}.hxfab{padding:10px 12px;right:12px;bottom:12px;font-size:13px}.doc-layout .grid{grid-template-columns:1fr}.section-tools{padding:10px}}
@media(max-width:600px){.wrap{padding-bottom:88px}.top .whoami{display:none}.payment-table,.payment-table tbody{display:block}.payment-table thead{display:none}.payment-table tr{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;padding:8px;margin:10px 0;background:#fff}.payment-table td{border:0;min-width:0;overflow-wrap:anywhere;padding:6px;text-align:left!important}.payment-table td:first-child,.payment-table td:nth-child(4),.payment-table td:nth-child(5){grid-column:1/-1}.payment-table td:nth-child(2)::before{content:'วันที่ / งวด';display:block;font-size:12px;color:var(--mut)}.payment-table td:nth-child(3)::before{content:'ยอด (บาท)';display:block;font-size:12px;color:var(--mut)}.payment-table td:last-child .btn{display:block;text-align:center}}
/* Reading hierarchy shared by the office pages, including Windows Thai fallback. */
h1,h2,h3{line-height:1.4}h1{font-size:26px}h2{font-size:20px}
label{font-size:14px;font-weight:600;line-height:1.6}.muted{font-size:14px}.btn{font-size:14px;min-height:44px}.badge{font-size:13px}
th,td{padding:11px 12px;vertical-align:top}th{color:var(--ink);font-weight:600}td{font-size:14px;font-variant-numeric:tabular-nums}.wrap .muted[style*="font-size:11px"],.wrap .muted[style*="font-size:12px"]{font-size:13px!important}
.pnav a,.pnav .pnbackbtn,.pvbar .btn,.company-card .company-todo{font-size:14px}.company-card h2{font-size:20px}
.doc-title h1{overflow-wrap:anywhere}.doc-layout label{margin-top:14px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field-help{margin:5px 0 0;color:var(--mut);font-size:14px}
.form-section{margin:22px 0 8px;padding-top:16px;border-top:1px solid var(--line);font-size:17px;font-weight:700}
.document-workspace .hxfab{width:48px;height:48px;padding:0;justify-content:center;font-size:0}.document-workspace .hxfab .ic{font-size:21px}.document-workspace .doc-actions{padding-right:64px}.doc-quality{padding:12px 14px;border:1px solid var(--line);border-radius:10px;margin-bottom:20px}.doc-quality summary{cursor:pointer}.doc-quality summary>.muted{display:block;margin-top:4px}.quality-panel{border-left:4px solid var(--acc);background:#f8faff}.quality-panel h2{margin-top:0}.quality-list{list-style:none;margin:0;padding:0}.quality-list li{padding:12px 0;border-top:1px solid var(--line)}.quality-list p{margin:4px 0 8px}.quality-list a{font-weight:600}.quality-tag{display:inline-block;border-radius:6px;padding:2px 8px;font-size:13px;background:#e8eefb;color:var(--acc2);margin-right:8px}.quality-tag.check{background:#fff0df;color:#93420e}
.quality-filters{display:flex;align-items:end;flex-wrap:wrap;gap:12px}.quality-filters>div{flex:1;min-width:180px}.quality-filters label{display:block}.quality-filters .btn{flex:none}.quality-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.quality-metrics>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px}.quality-metrics strong{display:block;font-size:30px;line-height:1.3;margin-bottom:8px}.quality-doc-header{display:flex;gap:12px;align-items:start;justify-content:space-between;flex-wrap:wrap}.quality-doc-header h2{font-size:18px;margin:0;overflow-wrap:anywhere}.quality-codes{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.quality-codes a{border:1px solid var(--line);background:#fff;padding:7px 12px;border-radius:8px;text-decoration:none;font-size:14px}.quality-codes a[aria-current=true]{background:var(--acc);color:#fff}.review-table td:nth-child(6){min-width:230px}.review-table td:nth-child(3){overflow-wrap:anywhere}.review-file{font-size:13px;max-width:170px;overflow-wrap:anywhere}
@media(max-width:700px){body .hxfab{width:48px;height:48px;padding:0;justify-content:center;font-size:0}body .hxfab .ic{font-size:21px}.field-grid{grid-template-columns:1fr}.quality-metrics{gap:8px}.quality-metrics>div{padding:12px}.quality-metrics strong{font-size:26px}.quality-metrics .muted{font-size:13px}.quality-filters>div{min-width:100%}.quality-filters .btn{width:100%}.review-table,.review-table tbody{display:block;width:100%}.review-table tr:first-child{display:none}.review-table tr{display:grid;grid-template-columns:1fr 1fr;gap:4px;border:1px solid var(--line);border-radius:12px;margin:12px 0;padding:12px;background:#fff}.review-table td{display:block;border:0;padding:4px;min-width:0!important;white-space:normal!important;overflow-wrap:anywhere}.review-table td:nth-child(2),.review-table td:nth-child(4),.review-table td:nth-child(6),.review-table td:last-child{grid-column:1/-1}.review-table td:nth-child(2){font-weight:600}.review-table td:nth-child(5)::before{content:'OCR: ';color:var(--mut)}.review-table td:last-child .btn{display:block;text-align:center}.review-file{max-width:none}.appnav a{font-size:14px}.doc-title h1{font-size:22px}}

@media(max-width:700px){.dtab,.dtab tbody{display:block;width:100%}.dtab tr{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;padding:10px;margin:10px 0;gap:6px}.dtab tr:first-child{display:flex;flex-wrap:wrap;background:#eef2fb}.dtab tr:first-child::before{content:'เรียงตาม:';padding:6px;font-size:14px}.dtab th{padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}.dtab th:not(.srt){display:none}.dtab td{display:block;border:0;padding:4px;min-width:0;white-space:normal!important;overflow-wrap:anywhere}.dtab td::before{content:attr(data-label);display:block;font-size:13px;color:var(--mut)}.dtab td:nth-child(3),.dtab td:nth-child(5),.dtab td:last-child{grid-column:1/-1}.dtab .dfn{max-width:none;white-space:normal;overflow-wrap:anywhere}.dtab td:last-child .btn{display:block;text-align:center}}