@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');
:root{--ink:#152f37;--muted:#6e7e83;--line:#dde5e5;--teal:#177969;--bg:#f5f7f6;--soft:#eaf3ee;--orange:#e9a556}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Noto Sans Thai',Tahoma,sans-serif;font-size:14px;line-height:1.65}button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #df9e40;outline-offset:4px}[hidden]{display:none!important}.demo{padding:8px 20px;text-align:center;background:#fff3db;color:#715320;font-size:12px}.demo span{font-weight:700;margin-right:10px}.header{height:100px;padding:0 5.5%;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:28px}.brand{display:flex;align-items:center;gap:12px}.brand-icon{font-family:Georgia,serif;font-size:31px;font-weight:700;background:var(--ink);color:#fff;border-radius:12px;width:49px;height:49px;text-align:center;line-height:49px}.brand-icon span{font-size:23px;color:#a2c8aa;margin-left:-4px}.brand strong{display:block;font-size:22px;letter-spacing:-1px;line-height:1.3}.brand-dot{color:var(--teal)}.brand small{font-size:11px;letter-spacing:.4px;color:var(--muted)}nav{display:flex;gap:8px}nav a{padding:10px 18px;border-radius:8px;font-weight:500;color:var(--muted)}nav a.active{background:var(--soft);color:var(--teal)}.company{font-size:10px;font-weight:600;letter-spacing:1.6px;color:#8d9c9d}.lock{margin-left:6px}main{max-width:1220px;margin:auto;padding:45px 35px 64px;min-height:70vh}.eyebrow{font-size:11px;font-weight:700;color:var(--teal);letter-spacing:2px;text-transform:uppercase;display:flex;align-items:center;gap:9px}.eyebrow:before{content:'';width:22px;height:2px;background:var(--teal)}h1{font-size:34px;line-height:1.4;letter-spacing:-1px;margin:10px 0 8px;font-weight:600}h2{font-size:18px;margin:0 0 8px;font-weight:600}h3{font-size:14px;margin:0 0 10px}p{margin:0 0 16px}.intro{color:var(--muted);margin-bottom:30px}.title-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.tag{display:inline-flex;align-items:center;gap:7px;background:#e8f0ec;border:1px solid #d8e8df;border-radius:30px;padding:7px 13px;color:var(--teal);font-size:11px;white-space:nowrap}.tag:before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal)}.layout{display:grid;grid-template-columns:minmax(0,1fr) 305px;gap:26px;align-items:start}.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:27px}.section-heading{display:flex;gap:13px;align-items:center;margin-bottom:24px}.section-heading p{font-size:12px;color:var(--muted);margin:0}.number{display:grid;place-items:center;width:36px;height:36px;flex-shrink:0;border:1px solid #d2e4db;border-radius:10px;color:var(--teal);font-weight:600;font-size:13px}.section-heading h2{margin:0}.section+.section{border-top:1px solid #e9eded;margin-top:28px;padding-top:27px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:19px 20px}.field{display:flex;flex-direction:column;gap:7px}.field.full{grid-column:1/-1}label,.label{font-size:12px;font-weight:500}label b,.required{color:#b66548;margin-left:2px}input:not([type=radio]):not([type=checkbox]),select,textarea{width:100%;border:1px solid #dce3e3;border-radius:7px;background:#fcfdfc;color:var(--ink);padding:11px 12px;min-height:44px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #17796912}input::placeholder,textarea::placeholder{color:#a0aaac;font-size:12px}textarea{resize:vertical;min-height:80px}.options{display:flex;gap:10px;flex-wrap:wrap}.option{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:11px 15px;border-radius:7px;cursor:pointer;flex:1;font-size:12px}.option:has(input:checked){border-color:#87b5a4;background:#f0f7f2;color:var(--teal)}input[type=radio],input[type=checkbox]{accent-color:var(--teal)}.hint{font-size:11px;color:var(--muted)}.notice{background:#f5f8f6;border-left:3px solid #98b9a6;padding:11px 14px;font-size:11px;color:#66796d;margin:16px 0}.upload{border:1.5px dashed #b5cac0;border-radius:10px;background:#fafcfa;padding:25px;text-align:center}.upload.dragging{background:#e7f3ec;border-color:var(--teal)}.upload-symbol{width:42px;height:42px;border-radius:12px;background:#eaf3ee;display:grid;place-items:center;margin:0 auto 10px;font-size:24px;color:var(--teal)}.upload strong{font-weight:500;font-size:13px}.upload p{font-size:11px;color:var(--muted);margin:3px 0 14px}.btn{border:1px solid var(--line);background:white;color:var(--ink);padding:10px 18px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;font-weight:500;min-height:42px}.btn.primary{background:var(--teal);color:white;border-color:var(--teal)}.btn.primary:hover{background:#126355}.btn.small{min-height:32px;padding:5px 10px;font-size:11px}.btn.ghost{background:transparent}.submit-row{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px}.submit-row .btn{min-width:200px}.summary{position:sticky;top:20px}.summary .card{padding:24px;margin-bottom:17px}.summary-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.summary-head h2{font-size:15px;margin:0}.summary small{color:var(--muted);font-size:11px}.sum-line{display:flex;justify-content:space-between;padding:8px 0;color:var(--muted);font-size:12px}.sum-line strong{color:var(--ink);font-weight:500}.sum-total{border-top:1px solid var(--line);padding-top:18px;margin-top:12px}.sum-total label{display:block;color:var(--muted);font-size:11px}.sum-total strong{display:block;font-size:32px;letter-spacing:-1px;line-height:1.4;margin-top:4px}.sum-total strong small{font-size:13px;font-weight:400;letter-spacing:0;margin-left:8px}.pending{display:inline-block;background:#fff6e9;color:#9d7a45;padding:4px 9px;font-size:10px;border-radius:5px;margin-top:17px}.tips{list-style:none;margin:13px 0 0;padding:0}.tips li{position:relative;padding:0 0 14px 22px;color:var(--muted);font-size:11px}.tips li:before{content:'✓';position:absolute;left:0;color:var(--teal)}.side-note{padding:5px 14px;display:flex;gap:10px;color:#86968c;font-size:10px}.stepper{display:flex;gap:20px;font-size:11px;margin:25px 0;color:#9ca6a5;align-items:center}.stepper span{display:flex;gap:7px;align-items:center}.stepper span:first-child{color:var(--teal)}.stepper i{font-style:normal;width:21px;height:21px;border-radius:50%;background:#e5ede7;display:grid;place-items:center;font-size:10px}.stepper hr{border:0;border-top:1px solid #dce4df;flex:1}.file-preview{display:flex;align-items:center;gap:13px;margin-top:15px;text-align:left}.file-preview img{height:65px;width:55px;object-fit:contain;border:1px solid var(--line)}.file-preview span{font-size:11px;word-break:break-word}.file-preview button{margin-left:auto}.success{max-width:650px;margin:35px auto;text-align:center;padding:45px}.success-mark{font-size:35px;color:var(--teal);background:var(--soft);width:74px;height:74px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px}.ref{font-size:18px;background:#f1f5f2;padding:13px;border-radius:8px;margin:20px 0;font-family:monospace;word-break:break-all}.error{padding:11px 14px;background:#fff0ed;color:#a44131;border-radius:7px;font-size:12px;margin:14px 0}.login{max-width:430px;margin:30px auto;padding:35px}.login .field{margin-top:17px}.login .btn{width:100%;margin-top:23px}.login h1{font-size:25px}.login .hint{margin-top:15px;text-align:center}.dashboard-header{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-bottom:25px}.dashboard-header h1{margin-bottom:4px}.dashboard-header p{margin:0;color:var(--muted);font-size:12px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:25px 0}.stat{padding:20px 23px}.stat label{display:block;color:var(--muted);font-size:11px}.stat strong{display:block;font-size:26px;font-weight:600;margin:8px 0 2px;letter-spacing:-.7px}.stat small{color:#8b9b92;font-size:10px}.stat.featured{background:var(--ink);color:white;border-color:var(--ink)}.stat.featured label,.stat.featured small{color:#b3c8c5}.filter-row{display:grid;grid-template-columns:1fr 1.1fr 1fr 1.5fr;gap:12px;padding:20px;background:white;border:1px solid var(--line);border-radius:12px 12px 0 0}.table-wrap{overflow:auto;background:white;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px}table{width:100%;border-collapse:collapse;white-space:nowrap;font-size:12px}th{font-size:10px;color:#82908d;background:#fbfcfb;text-align:left;padding:14px 19px;font-weight:500;border-bottom:1px solid var(--line)}td{padding:17px 19px;border-bottom:1px solid #eff2f0}td small{display:block;font-size:10px;color:var(--muted)}td.money,th.money{text-align:right}.status{display:inline-block;padding:4px 9px;border-radius:5px;font-size:10px}.status.pending{margin:0}.status.approved{color:#337961;background:#eaf5ec}.status.rejected{color:#b05b49;background:#fceeea}.status-select{width:120px;min-height:32px;padding:5px;font-size:10px}tr:last-child td{border:0}.table-footer{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;color:var(--muted);font-size:11px}.empty{text-align:center;padding:50px;color:var(--muted)}.report-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px;margin-top:25px}.bar-row{display:grid;grid-template-columns:76px 1fr 93px;gap:12px;align-items:center;font-size:11px;margin-top:16px}.bar-track{height:7px;background:#eff3f0;border-radius:8px;overflow:hidden}.bar-fill{height:100%;background:#629f83;border-radius:8px}.bar-row strong{text-align:right;font-weight:500}.payment-row{display:flex;justify-content:space-between;font-size:12px;margin-top:20px}.payment-row strong{font-weight:500}.guide{max-width:800px;margin:auto}.guide .card{margin-top:18px}.guide ol{padding-left:22px;color:var(--muted);line-height:2.1}.guide h3{margin-top:20px}footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid var(--line);padding:25px 5.5%;color:#8f9a97;font-size:10px}footer strong{font-size:14px;color:#5a7165}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:12px 22px;border-radius:9px;box-shadow:0 10px 30px #132b3422;font-size:12px;z-index:100;display:none;max-width:90vw}dialog{border:1px solid var(--line);border-radius:13px;width:min(900px,95vw);padding:20px;max-height:90vh}dialog::backdrop{background:#132b3466}.dialog-head{display:flex;justify-content:space-between;align-items:center}.icon-button{background:none;border:0;font-size:26px;color:var(--muted)}#documentBody img{width:100%;max-height:70vh;object-fit:contain}#documentBody iframe{width:100%;height:70vh;border:0}.actions{display:flex;gap:8px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
@media(min-width:1450px){main{padding-top:55px}}@media(max-width:1000px){.company{display:none}.layout{grid-template-columns:minmax(0,1fr) 270px;gap:18px}main{padding:32px 25px}.card{padding:22px}.stat-grid{gap:10px}.stat{padding:18px}.stat strong{font-size:23px}.filter-row{grid-template-columns:1fr 1fr}}
@media(max-width:740px){.header{height:auto;padding:19px 20px 13px;flex-wrap:wrap;gap:15px}.brand strong{font-size:20px}.brand-icon{width:42px;height:42px;line-height:42px}.header nav{width:100%;justify-content:space-between;gap:3px}nav a{padding:8px 13px;font-size:12px}.demo{font-size:10px;padding:7px 12px}main{padding:26px 17px 40px}h1{font-size:27px}.title-row{align-items:start}.title-row .tag{font-size:9px;padding:6px 8px;margin-top:15px}.intro{font-size:12px;margin-bottom:16px}.layout{grid-template-columns:1fr}.summary{position:static}.summary .card{margin-bottom:12px}.summary .tips-card,.side-note{display:none}.summary .sum-total strong{font-size:28px}.card{padding:21px 18px}.grid{gap:15px 12px}.section-heading{margin-bottom:20px}.section-heading h2{font-size:16px}.section-heading p{font-size:10px}.stepper{gap:8px;margin:20px 0;font-size:10px}.stepper i{width:18px;height:18px}.stepper hr{max-width:20px}.submit-row{flex-direction:column-reverse;align-items:stretch}.submit-row .btn{width:100%}.submit-row .hint{text-align:center}.stat-grid{grid-template-columns:1fr 1fr}.stat strong{font-size:23px}.dashboard-header{align-items:start}.dashboard-header h1{font-size:25px}.dashboard-header .actions{flex-direction:column}.filter-row{padding:15px;gap:10px}.report-grid{grid-template-columns:1fr}.option{padding:10px;font-size:11px;gap:4px}.upload{padding:20px 12px}footer{flex-wrap:wrap;padding:20px;font-size:9px}footer span:last-child{display:none}.eyebrow{font-size:9px}.login{padding:25px;margin:20px auto}.field.full-mobile{grid-column:1/-1}.success{padding:30px 20px}.bar-row{grid-template-columns:65px 1fr 90px;gap:9px}}
@media print{.demo,.header nav,.filter-row,.actions,footer,.btn,.status-select{display:none!important}main{max-width:100%;padding:0}.card{break-inside:avoid}.table-wrap{overflow:visible}.stat.featured{background:white;color:var(--ink)}body{background:white}}

.company-logo{width:94px;height:72px;object-fit:contain;display:block;flex-shrink:0}.footer-brand{display:flex;align-items:center;gap:14px}.footer-logo{width:80px;height:61px;object-fit:contain;display:block;background:white;border-radius:4px}@media(max-width:740px){.company-logo{width:74px;height:56px}.footer-logo{width:66px;height:50px}.footer-brand{gap:10px}}

.department-share{display:block;color:var(--muted);font-size:10px;font-weight:400;line-height:1.4;margin-top:2px}