@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700;800&display=swap');
:root{--red:#a51f2b;--red-dark:#861923;--pale:#fff5f5;--ink:#30292c;--muted:#81777b;--line:#eee5e7;--bg:#faf7f7;--green:#208353;--amber:#99640b;--shadow:0 12px 35px #4123290a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.65 "Noto Sans Thai",Tahoma,sans-serif}a{color:var(--red);text-decoration:none}a:hover{text-decoration:underline}button,input,select{font:inherit}.top{background:#fff;border-bottom:1px solid var(--line);padding:15px 0}.wrap{width:min(1080px,calc(100% - 32px));margin:auto}.topin{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}.crest{width:42px;height:42px;border-radius:14px;background:var(--red);color:white;display:grid;place-items:center;font-weight:800}.brand small{display:block;color:var(--muted);font-size:11px}.main{padding:42px 0 70px}.card{background:white;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:clamp(20px,4vw,34px)}.narrow{max-width:620px;margin:auto}.wide{max-width:1080px;margin:auto}.eyebrow{font-size:12px;color:var(--red);font-weight:700}.title{margin:4px 0 5px;font-size:25px;line-height:1.35}.sub{margin:0 0 23px;color:var(--muted);font-size:13px}.field{margin:15px 0}.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}.field input,.field select{width:100%;height:46px;border:1px solid #ded6d8;border-radius:10px;padding:0 13px;outline:0;background:#fff}.field input:focus,.field select:focus{border-color:#bd515b;box-shadow:0 0 0 3px #a51f2b12}.btn{border:0;border-radius:10px;padding:11px 18px;background:var(--red);color:#fff;font-weight:700;cursor:pointer}.btn:hover{background:var(--red-dark)}.btn.secondary{background:#f5edef;color:var(--red)}.btn.small{padding:7px 11px;font-size:12px}.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:20px}.alert{padding:12px 14px;border-radius:10px;margin:14px 0;font-size:13px}.error{background:#fff0ef;color:#8e2027;border:1px solid #f3d0d1}.success{background:#eef8f2;color:#236943;border:1px solid #cee9d7}.result{margin-top:22px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.resulthead{padding:17px 20px;background:#fffafa;border-bottom:1px solid var(--line)}.resulthead strong{font-size:17px}.resultbody{padding:20px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.datum{padding:12px;background:#fbf9f9;border-radius:10px}.datum small{display:block;color:var(--muted);font-size:11px}.datum b{font-size:13px}.badge{display:inline-block;border-radius:999px;padding:5px 11px;font-size:12px;font-weight:700;background:#f1edf0;color:#675d62}.badge.submitted{background:#fff3dc;color:#885c0b}.badge.reviewing{background:#eaf3ff;color:#285884}.badge.approved{background:#e7f6ed;color:#1d7045}.badge.rejected{background:#fff0ef;color:#a3272c}.badge.incomplete{background:#f2edff;color:#6544a0}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}.toolbar h1{font-size:23px;margin:0}.toolbar p{margin:2px 0;color:var(--muted);font-size:12px}.filters{display:flex;gap:8px;flex-wrap:wrap}.filters input,.filters select{height:39px;border:1px solid var(--line);border-radius:8px;padding:0 10px;background:#fff}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{border-collapse:collapse;width:100%;min-width:760px;font-size:12px}th,td{padding:12px 13px;text-align:left;border-bottom:1px solid #f0ebec;vertical-align:middle}th{background:#fcf8f8;color:#655b5f;white-space:nowrap}tr:last-child td{border-bottom:0}.empty{padding:35px;text-align:center;color:var(--muted)}.detail-section{margin-top:24px}.detail-section h2{font-size:16px;border-bottom:1px solid var(--line);padding-bottom:8px}.docs{display:grid;gap:10px}.doc{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:13px}.footer{text-align:center;color:#9a9094;font-size:11px;padding:20px}.navlinks{display:flex;gap:14px;align-items:center;font-size:13px}@media(max-width:640px){.main{padding-top:25px}.grid{grid-template-columns:1fr}.title{font-size:22px}.topin{align-items:flex-start}.navlinks{flex-direction:column;align-items:flex-end;gap:2px}}

.crest{overflow:hidden}.crest img{width:100%;height:100%;object-fit:contain;border-radius:inherit;background:#fff}