@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#182b2c;--muted:#7b8989;--teal:#126b60;--line:#e6ecea;--bg:#f6f8f7}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--bg);font:14px 'Manrope','IBM Plex Sans Thai',Tahoma,sans-serif}button,input,textarea,select{font:inherit}button,a,input,select,textarea{outline-offset:4px}button{cursor:pointer;color:inherit}button:disabled{opacity:.5;cursor:wait}a{color:inherit;text-decoration:none}.shell{display:flex;min-height:100vh}.sidebar{width:246px;position:fixed;inset:0 auto 0 0;background:#102f2d;color:#bfd0cc;padding:32px 20px;display:flex;flex-direction:column;z-index:30}.brand{display:flex;gap:12px;align-items:center;color:white;margin:0 6px 46px;font-size:27px;font-weight:800;line-height:1.1}.brandIcon{display:grid;place-items:center;width:43px;height:47px;background:#d5f2dc;border-radius:12px;color:#215e50}.brandSub{display:block;font-size:9px;letter-spacing:2px;font-weight:600;margin-top:6px}.navCaption{font-size:10px;letter-spacing:1.8px;color:#77958e;margin:0 14px 13px}nav{display:flex;flex-direction:column;gap:7px}nav button{border:0;background:none;padding:13px 14px;display:flex;align-items:center;gap:12px;color:#c1d0cc;text-align:left;font-size:13px;border-radius:8px;white-space:nowrap}nav button:hover{background:#ffffff0b}nav button.active{background:#e2f3e6;color:#204e40;font-weight:600}nav button em{margin-left:auto;font-size:10px;background:#1e5148;color:#dff5e7;font-style:normal;padding:1px 6px;border-radius:5px}.sideNote{margin-top:auto;background:#ffffff05;border:1px solid #ffffff10;border-radius:10px;padding:18px 15px;color:#bed4ca}.sideNote>svg{color:#96c9ac;margin-bottom:12px}.sideNote b{display:block;font-size:12px;color:#d7e4df}.sideNote p{font-size:11px;line-height:1.9;color:#8eaaa0}.sideNote span{font-size:9px;color:#9fc7ad;display:flex;align-items:center;gap:6px;margin-top:15px}.sideNote i,.stat small i{height:5px;width:5px;border-radius:50%;background:#a1dcb5}.sideBottom{font-size:10px;color:#64877b;padding:23px 6px 0;display:flex;justify-content:space-between}.workspace{width:calc(100% - 246px);margin-left:246px}header{height:85px;background:#fff;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between;gap:16px}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:11px;color:#8c9693}.breadcrumb b{font-weight:500;color:#465d55}.identity{display:flex;align-items:center;gap:12px}.identity b{font-size:11px;font-weight:600;display:block;max-width:170px;overflow:hidden;text-overflow:ellipsis}.identity small{display:block;font-size:9px;color:var(--muted);margin-top:3px}.private{display:flex;gap:6px;align-items:center;font-size:10px;color:#688477;border:1px solid var(--line);padding:6px 9px;border-radius:5px;margin-right:13px}.avatar{width:34px;height:34px;border-radius:50%;background:#ece8dc;color:#6d674a;display:grid;place-items:center;font-size:13px;font-weight:700}main{padding:35px 38px 20px;max-width:1740px;margin:auto}.pageHeading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:29px}.eyebrow{font-size:9px;color:#679085;letter-spacing:1.7px;font-weight:700}h1{font-size:28px;letter-spacing:-.7px;margin:8px 0 6px;line-height:1.5}h2{font-size:15px;margin:0;font-weight:600}h4{font-size:13px;margin:23px 0 7px}.pageHeading p,.panelHead p{color:var(--muted);font-size:12px;margin:0;line-height:1.8}.headingActions{display:flex;gap:9px;flex-shrink:0}.primary,.secondary,.danger{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:7px;padding:11px 15px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}.primary{background:var(--teal);color:white}.primary:hover{background:#0b554b}.secondary{background:white;border-color:#dce5df;color:#486057}.secondary:hover{background:#f1f7f3}.danger{background:#fdefed;color:#a84942;border-color:#f3d3cd}.refresh{padding:11px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:32px}.stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:19px 20px;box-shadow:0 3px 5px #153c2602}.statTop{display:flex;align-items:center;justify-content:space-between;gap:8px}.statTop>span{font-size:11px;color:#61746c}.statIcon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center}.mint{color:#39765b;background:#e8f4ec}.amber{color:#b78e44;background:#faf2df}.violet{color:#7c6caa;background:#f0edf7}.blue{color:#4f83a5;background:#eaf2f8}.stat strong{font-size:35px;display:block;line-height:1.2;letter-spacing:-1px;margin:12px 0}.stat small{display:flex;align-items:center;gap:6px;color:#8a9891;font-size:9px}.stat small i{background:#97b7a4}.sectionLabel{font-size:13px;font-weight:600;display:flex;align-items:center;gap:13px;margin-bottom:13px}.sectionLabel span{font-size:10px;font-weight:400;color:#93a097}.shortcuts{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-bottom:27px}.shortcuts>button{background:#eef3ed;border:1px solid #e0e9de;border-radius:10px;padding:20px 23px;text-align:left;position:relative;transition:transform .15s}.shortcuts>button:hover{transform:translateY(-3px);background:#e5eee3}.shortcuts>button:nth-child(2){background:#f6f2e8;border-color:#eee7d8}.shortcuts>button:nth-child(3){background:#edf1f5;border-color:#e0e6ed}.shortcutTop{display:flex;justify-content:space-between;align-items:center;color:#527364}.shortcutTop span{font-size:10px;letter-spacing:1px;color:#9aada2}.shortcuts h3{font-size:15px;margin:15px 0 5px}.shortcuts p{font-size:10px;color:#839187;margin:0}.corner{position:absolute;right:22px;bottom:23px;color:#6f8a7b}.dashboardGrid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:20px}.panel{background:white;border:1px solid var(--line);border-radius:10px;overflow:hidden}.panelHead{padding:22px 23px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}.panelHead p{font-size:10px;margin-top:4px}.textButton{border:0;background:none;padding:0;display:inline-flex;align-items:center;gap:8px;font-size:11px;text-align:left}.teal{color:var(--teal)}.tableScroll{overflow:auto}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{background:#fafcfb;padding:12px 20px;color:#8a9890;font-size:10px;font-weight:500;border-block:1px solid #eef2ef}td{padding:17px 20px;font-size:11px;border-bottom:1px solid #eef2ef}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fafcfb}td b{font-weight:600}.mono{font-family:'Manrope',monospace;letter-spacing:.3px}.block{display:block;margin-top:4px}.muted{color:var(--muted);font-size:10px}.badge{font-size:9px;border-radius:5px;padding:5px 8px;display:inline-block;background:#eff2f0;color:#718579;white-space:nowrap}.CONTROLLED,.COMPLETE{background:#e8f4ed;color:#3e8061}.SUBMITTED,.APPROVED{background:#edf3fa;color:#6384a7}.QMR_PENDING{background:#fcf4df;color:#ac8a40}.RETURNED,.REJECTED{background:#fbece9;color:#b47364}.OBSOLETE{background:#eff1f0;color:#8b9690}.type{display:inline-block;background:#f0f4f1;border:1px solid #e6eae7;color:#6c8275;border-radius:4px;padding:3px 6px;font-size:10px}.docName{gap:12px}.docName>svg{color:#689383;flex-shrink:0}.docName small{display:block;color:#89948d;font-size:10px;margin-top:4px;max-width:280px;white-space:normal}.iconButton{display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:#789187;padding:5px;border-radius:5px}.iconButton:hover{background:#eaf1ed}.flow{padding:5px 25px 23px}.flow>div{display:flex;gap:14px;position:relative;padding-bottom:26px}.flow>div:last-child{padding-bottom:0}.flow>div:not(:last-child):before{content:'';position:absolute;top:27px;bottom:2px;left:13px;border-left:1px dashed #d6e3d9}.flow>div>span{display:grid;place-items:center;width:28px;height:28px;flex-shrink:0;background:#f0f6f1;border:1px solid #dfeae1;border-radius:50%;font-size:10px;color:#628570}.flow b{display:block;font-weight:500;font-size:11px;margin:2px 0 4px}.flow small{font-size:9px;color:#95a097}.empty{padding:55px 20px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#698274}.empty>div{display:grid;place-items:center;width:58px;height:58px;border-radius:15px;background:#f0f6f1;margin-bottom:18px;color:#98b19e}.empty b{font-size:13px;font-weight:500}.empty p{font-size:11px;color:#99a69e;margin:8px 0 0}.onboarding{display:flex;align-items:center;gap:17px;background:#f0f4ed;border:1px solid #e1e8dd;border-radius:9px;padding:20px;margin-top:21px}.onboarding>svg{color:#7a997d}.onboarding b{font-size:12px;font-weight:500}.onboarding p{font-size:10px;color:#8a9989;margin:4px 0 0}.onboarding button{margin-left:auto;font-size:10px}footer{display:flex;justify-content:space-between;border-top:1px solid #e5ebe5;padding-top:17px;margin-top:35px;color:#9ca89f;font-size:9px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:19px 22px}.tabs{display:flex;gap:15px;align-items:center}.tabs button{border:0;background:none;padding:8px 0;font-size:11px;color:#8a9a90;border-bottom:2px solid transparent}.tabs button.selected{color:#316d54;border-color:#438668}.tabs span{background:#edf3ed;padding:2px 6px;border-radius:4px;font-size:9px;margin-left:5px}.search{display:flex;align-items:center;gap:9px;color:#93a399;border:1px solid #e1e8e2;border-radius:6px;padding:8px 11px;min-width:280px}.search input{border:0;outline:0;padding:0;background:none;font-size:11px;width:100%;color:var(--ink)}.tableFoot{display:flex;justify-content:space-between;font-size:10px;color:#94a197;border-top:1px solid var(--line);padding:15px 22px}select,input,textarea{border:1px solid #dce5de;border-radius:6px;background:#fff;color:var(--ink);padding:10px;font-size:12px;min-width:0}textarea{resize:vertical;min-height:90px}.toolbar select{font-size:11px}.overlay{position:fixed;inset:0;background:#102a2370;backdrop-filter:blur(3px);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}.modal{background:#fff;width:min(760px,100%);max-height:92vh;overflow:auto;border-radius:14px;padding:26px 30px;box-shadow:0 25px 90px #0a241f33}.modalHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;gap:14px}.modalHead h2{font-size:21px;margin-top:6px}.notice{background:#f2f6ee;border:1px solid #e5ecde;color:#708267;font-size:11px;line-height:1.9;padding:12px 15px;border-radius:6px;margin-bottom:19px}.panel>.notice{margin:20px}.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.formGrid label,.decision label{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:500}.full{grid-column:1/-1}.formGrid small{font-size:10px;color:#96a08f;font-weight:400}.uploadLabel{padding:16px;border:1px dashed #cbdccc;border-radius:8px;background:#f9fbf7}.uploadLabel input{border:0;background:transparent;padding:4px 0}.modalActions{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}.modalActions>small{font-size:10px;color:#8b9c8e}.detailTitle{display:flex;align-items:center;gap:15px}.detailTitle h3{margin:0 0 5px;font-size:18px}.detailTitle p{margin:0;color:#86978b;font-size:11px}.detailTitle>.badge{margin-left:auto}.fileBig{background:#edf5ed;color:#679276;padding:14px;border-radius:10px;display:grid;place-items:center}.detailGrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:23px 0;background:#f8faf7;padding:20px;border-radius:8px}.detailGrid small{display:block;font-size:10px;color:#8c9a8d;margin-bottom:7px}.detailGrid b{font-size:13px;font-weight:500}.pre{white-space:pre-wrap;font-size:12px;color:#6d7d70;line-height:1.9;overflow-wrap:anywhere}.documentActions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:24px 0}.revisionList{border:1px solid var(--line);border-radius:6px;overflow:hidden}.revisionList button{border:0;border-bottom:1px solid var(--line);background:white;width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:13px 16px;font-size:11px}.revisionList button:hover{background:#f4f8f2}.decision{border-top:1px solid var(--line);padding-top:20px;margin-top:25px}.decision .notice{width:100%;margin:0}.alert{display:flex;align-items:center;gap:10px;background:#fcede8;color:#ad5747;border:1px solid #f1d6ce;border-radius:7px;font-size:12px;padding:14px;margin-bottom:20px}.alert button{margin-left:auto;border:0;background:none;text-decoration:underline;color:inherit}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;color:#fff;background:#235e47;padding:15px 23px;border-radius:9px;box-shadow:0 5px 30px #133b2730;z-index:200;font-size:12px}.longText{white-space:pre-wrap;max-width:500px;overflow-wrap:anywhere;font-size:10px}.mobileToggle{display:none}.signin{max-width:500px;margin:12vh auto;background:white;border:1px solid var(--line);border-radius:18px;padding:45px}.signin>.brandIcon{margin-bottom:24px}.signin>small{letter-spacing:2px;font-size:10px;color:#759785}.signin h1{font-size:33px;margin:15px 0}.signin p{color:var(--muted);font-size:12px;margin-bottom:26px}.spin{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1500px){main{padding:43px 48px}.dashboardGrid{grid-template-columns:minmax(0,1fr) 330px}.shortcuts>button{padding:24px}}@media(max-width:1200px){.sidebar{width:216px;padding-inline:14px}.workspace{margin-left:216px;width:calc(100% - 216px)}main{padding:28px 25px}.dashboardGrid{grid-template-columns:1fr}.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.flow>div{padding-bottom:0}.flow>div:before{display:none}.stat{padding:16px}.identity .private{display:none}.shortcuts p{max-width:85%}.pageHeading h1{font-size:24px}}@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.pageHeading{align-items:flex-start;flex-direction:column}.headingActions{align-self:flex-end;margin-top:-8px}.sidebar{width:195px}.workspace{margin-left:195px;width:calc(100% - 195px)}.brand{font-size:24px}.shortcuts{gap:9px}.shortcuts>button{padding:16px 12px}.shortcuts h3{font-size:12px}.shortcuts p{display:none}.corner{bottom:17px;right:12px}.flow{grid-template-columns:repeat(2,1fr);row-gap:20px}.toolbar{flex-wrap:wrap}.search{width:100%}.onboarding{align-items:flex-start;flex-wrap:wrap}.onboarding button{margin-left:0}}@media(max-width:680px){.sidebar{transform:translateX(-100%);width:246px;transition:transform .2s}.sidebar.show{transform:translateX(0);box-shadow:10px 0 60px #102f2d50}.workspace{margin:0;width:100%}header{padding:0 17px;height:68px;position:sticky;top:0;z-index:35}.mobileToggle{display:inline-flex}.breadcrumb{font-size:10px;gap:7px}.identity b{max-width:90px;font-size:10px}.identity{gap:8px}.identity small{font-size:8px}.avatar{width:29px;height:29px}main{padding:24px 17px 18px}.pageHeading h1{font-size:23px}.pageHeading p{font-size:11px}.pageHeading{gap:21px;margin-bottom:22px}.headingActions{align-self:flex-start;margin:0;flex-wrap:wrap}.stats{gap:11px;margin-bottom:25px}.stat{padding:13px}.statTop>span{font-size:9px}.statIcon{width:27px;height:27px}.statIcon svg{width:15px}.stat strong{font-size:29px;margin:12px 0 8px}.stat small{font-size:8px}.sectionLabel{font-size:12px;display:block}.sectionLabel span{display:block;margin-top:4px}.shortcuts{grid-template-columns:1fr;margin-bottom:22px}.shortcuts>button{padding:16px 18px;display:flex;align-items:center;gap:13px}.shortcutTop{display:contents}.shortcutTop span{display:none}.shortcuts h3{margin:0}.corner{position:static;margin-left:auto}.dashboardGrid{gap:15px}.panelHead{padding:18px}.toolbar{padding:15px}td,th{padding:14px 16px}.tableFoot span{display:none}.overlay{padding:10px}.modal{padding:22px 18px;max-height:95vh}.modalHead h2{font-size:18px}.formGrid{grid-template-columns:1fr}.full{grid-column:auto}.modalActions{align-items:flex-end}.modalActions>small{max-width:45%;font-size:9px}.detailTitle{flex-wrap:wrap}.detailTitle>.badge{margin-left:0}.detailTitle h3{font-size:16px}.detailTitle>div:nth-child(2){max-width:75%}.flow{padding:5px 18px 22px}.onboarding{padding:16px}.onboarding p{line-height:1.9}.signin{margin:8vh 15px;padding:28px}.signin h1{font-size:28px}footer{font-size:8px;gap:10px}}

nav button{white-space:normal;overflow-wrap:anywhere;align-items:flex-start;line-height:1.7}nav button>svg{flex-shrink:0;margin-top:2px}.toolbar{flex-wrap:wrap}.toolbar h2{max-width:100%;overflow-wrap:anywhere}