@import"https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap";:root{--ink:#183c46;--muted:#71818a;--teal:#0b827e;--teal-dark:#086b68;--line:#e4ebea;--paper:#f5f8f7;--nav:#fff}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font-family:Noto Sans Thai,Tahoma,sans-serif;font-size:14px;line-height:1.65}button,input,select,textarea{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:3px solid #79c5bc;outline-offset:3px}h1,h2,h3,p{margin:0}h1{font-size:29px;letter-spacing:-.7px;font-weight:700;line-height:1.4}h2{font-size:19px;font-weight:600}h3{font-size:16px;font-weight:600}p{color:var(--muted)}small{font-size:12px;color:var(--muted)}.app{display:flex;min-height:100vh}.sidebar{width:258px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:30px 18px 18px;z-index:30}.brand{display:flex;gap:11px;align-items:center;padding:0 10px 28px;font-size:17px;font-weight:700;letter-spacing:.7px;line-height:1.3}.brand small{display:block;font-size:8px;letter-spacing:1.8px;margin-top:6px}.brand-mark{display:grid;place-items:center;color:#fff;background:var(--teal);width:43px;height:48px;border-radius:13px}.workspace{margin:0 1px 29px;padding:15px 10px;border:1px solid var(--line);border-radius:11px;display:flex;gap:10px;align-items:center;font-size:11px;font-weight:600}.workspace small{display:block;font-size:10px;font-weight:400}.workspace-icon{display:grid;place-items:center;min-width:33px;height:35px;border-radius:8px;background:#f0f5f4;color:#66857c}.nav-label{font-size:10px;letter-spacing:1px;color:#a0aeaf;padding:0 14px;margin-bottom:10px}.nav-item{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;margin:5px 0;border:0;border-radius:9px;color:#70818a;background:transparent;text-align:left;font-size:12px;font-weight:500}.nav-item span{flex:1}.nav-item:hover{background:#f5f8f7}.nav-item.active{color:var(--teal);background:#e9f5f1;font-weight:600}.sidebar-note{background:#f6f9f7;border:1px solid #e7efeb;border-radius:12px;padding:18px 16px;margin:50px 7px 22px;color:#597b71}.sidebar-note strong{display:block;font-size:12px;margin:7px 0}.sidebar-note p{font-size:11px;line-height:1.9}.profile{margin-top:auto;border-top:1px solid var(--line);padding:18px 8px 0;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:600}.profile small{display:block;font-size:10px;font-weight:400}.profile>a{margin-left:auto;color:#7d8e8d}.avatar{width:34px;height:34px;background:#e9f1ee;color:#52796c;border-radius:50%;display:inline-grid;place-items:center;flex-shrink:0}.main-wrap{margin-left:258px;width:calc(100% - 258px)}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--line);padding:0 42px;display:flex;align-items:center;justify-content:space-between}.breadcrumb{display:flex;align-items:center;gap:12px;font-size:11px;color:#90a09e}.breadcrumb span{color:#5c7373}.top-status{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:1px;color:#7f9490}.top-status i{height:6px;width:6px;border-radius:50%;background:#54ad8b}main{max-width:1540px;padding:35px 42px 20px;margin:0 auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:29px}.eyebrow{font-size:9px;letter-spacing:1.8px;color:var(--teal);font-weight:600;display:block;margin-bottom:9px}.page-heading p{font-size:12px;margin-top:8px}.button{border:1px solid transparent;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 17px;font-size:12px;font-weight:500;line-height:1.6}.primary{background:var(--teal);color:#fff;box-shadow:0 3px 5px #123e3410}.primary:hover{background:var(--teal-dark)}.secondary{color:#54706b;background:#fff;border-color:#dce7e1}.secondary:hover{background:#f0f7f4}.small{font-size:11px;padding:7px 11px}.danger{color:#b04d4d;background:#fff0f0;border-color:#f1d5d5}.icon-button{background:transparent;color:#81938e;border:1px solid #e7efeb;padding:7px;display:inline-grid;place-items:center;border-radius:7px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:23px}.stat{position:relative;padding:23px 19px;background:#fff;border:1px solid var(--line);border-radius:12px;min-height:132px}.stat>span{font-size:12px;color:#7c8c8c;display:block;margin-bottom:6px}.stat>strong{font-size:32px;font-weight:600;line-height:1.3}.stat strong small{font-weight:400;font-size:10px;margin-left:9px}.stat-icon{position:absolute;right:17px;top:24px;padding:10px;border-radius:10px;display:grid;place-items:center}.teal{color:#168e87;background:#e9f6f2}.green{color:#71a277;background:#f0f7ed}.blue{color:#7298bb;background:#eff4fa}.amber{color:#c89c51;background:#fbf5e9}.flow-strip{display:flex;align-items:center;justify-content:space-between;background:#edf3f0;border:1px solid #e1eae5;border-radius:9px;padding:17px 24px;margin-bottom:27px;font-size:11px;color:#648278}.flow-strip>svg{width:16px;color:#a8bdb4}.flow-strip>div{display:flex;align-items:center;gap:9px}.number{border-radius:50%;display:grid;place-items:center;width:23px;height:23px;background:#fff;font-size:10px;color:#658e7d}.card{border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 2px 4px #153c3618}.table-card{overflow:hidden}.section-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:21px;gap:15px}.section-top p{font-size:11px;margin-top:4px}.table-card .section-top{padding:23px 25px 20px}.table-tools{display:flex;align-items:center;justify-content:space-between;padding:0 25px 17px;gap:15px}.tabs{display:flex;gap:5px}.tabs button{background:transparent;border:0;border-radius:6px;padding:6px 12px;font-size:10px;color:#80958c;white-space:nowrap}.tabs button.selected{background:#ecf5f0;color:var(--teal);font-weight:600}.search{display:flex;align-items:center;gap:8px;border:1px solid #e4ebe7;border-radius:7px;padding:7px 10px;min-width:230px;color:#9aada6}.search input{border:0;outline:0!important;background:transparent;padding:0;font-size:10px;width:100%}table{border-collapse:collapse;width:100%;text-align:left;white-space:nowrap}th{background:#f8faf9;border-top:1px solid #edf1ef;border-bottom:1px solid #edf1ef;padding:12px 24px;font-size:10px;color:#8b9c96;font-weight:500}td{padding:17px 24px;border-bottom:1px solid #f0f3f2;font-size:11px;color:#70877d}td small,td code{display:block;font-size:10px;color:#8fa097}td code{font-family:monospace;font-size:9px;margin-top:3px}.text-button{background:transparent;border:0;color:var(--teal);font-size:11px;padding:0;display:inline-flex;align-items:center;gap:6px}.visitor-name{font-weight:600;font-size:12px;color:#3a5a4b}.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:5px;background:#edf0f4;color:#7c8b99;font-size:10px;white-space:nowrap}.waiting{background:#fff5e4;color:#ba9250}.ready{background:#edf3fb;color:#7495b8}.approved,.inside{background:#e8f5ef;color:#508a70}.ending{background:#f6edfa;color:#977aab}.completed{background:#f0f3f1;color:#8b9b8e}.rejected{background:#ffefef;color:#c27c7c}.delivery{font-size:10px;color:#bb9b67}.delivery.sent{color:#6a9f7d}.empty{text-align:center;padding:62px 20px;color:#a3b7ab}.empty svg{margin-bottom:12px;stroke-width:1.2}.empty h3{font-size:15px;color:#688272;margin-bottom:5px}.empty p{font-size:11px}.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:24px}.compact{padding:23px 25px;margin-bottom:22px}.compact h3{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:11px}.compact p{font-size:11px;line-height:1.9;margin-bottom:13px}.connection{font-size:10px;background:#fff6e8;color:#aa925c;border:1px solid #f3e6cc;border-radius:5px;padding:3px 8px}.connection.connected{background:#edf6ef;color:#5a8c6a;border-color:#d8e9dd}.quota-result{margin-top:10px}.form-card{padding:28px 30px;margin-bottom:24px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:6px 0 24px}.full{grid-column:1/-1}label{display:block;font-size:12px;font-weight:500;color:#526b63}input,select,textarea{display:block;width:100%;border:1px solid #dfe8e2;border-radius:7px;background:#fff;color:#315245;padding:11px 13px;margin-top:7px;outline:0;line-height:1.5;font-size:12px}input:focus,select:focus,textarea:focus{border-color:#5ba99b;box-shadow:0 0 0 3px #eaf6f1}input::placeholder,textarea::placeholder{color:#a6b4ad}textarea{resize:vertical}.checkbox{display:flex;align-items:flex-start;gap:10px;font-size:11px;font-weight:400;margin:20px 0;line-height:1.9}.checkbox input{width:15px;height:15px;margin-top:3px;accent-color:var(--teal);flex-shrink:0}.privacy{color:#81958a}.submit{width:100%;padding:13px}.registration-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(260px,1fr);gap:26px;align-items:start}.form-step{font-size:9px;letter-spacing:.3px;color:#9aaca1}.gps-card{display:flex;align-items:center;gap:13px;background:#f6faf7;border:1px solid #e0eee4;border-radius:8px;padding:16px;color:#79a38c}.gps-card strong{font-size:11px;display:block;color:#608370}.gps-card small{display:block;font-size:10px}.gps-card .button{margin-left:auto;white-space:nowrap}.welcome-illustration{padding:39px 28px 33px;background:#e7f0eb;border:1px solid #dbe8df;border-radius:12px;overflow:hidden;position:relative;margin-bottom:23px}.welcome-illustration h2{font-size:28px;line-height:1.5;color:#416c56;margin-bottom:12px;letter-spacing:-.5px}.welcome-illustration p{font-size:11px;color:#7a9684}.gate-art{height:150px;position:relative;color:#86af98;display:flex;align-items:center;padding-left:24px;margin-bottom:20px}.gate-art:before{content:"";background:#dbe9de;width:145px;height:145px;border-radius:50%;position:absolute;left:5px}.gate-art>svg{z-index:1}.gate-art span{position:absolute;left:104px;top:85px;background:#fff;color:#58a07e;border-radius:16px;padding:12px;z-index:2;box-shadow:0 7px 15px #679e7a20}.simple-steps{font-size:11px;color:#81968a;padding-left:22px;margin:13px 0;line-height:2.7}.simple-steps li::marker{color:#5a9879}.mini-note{border-top:1px solid #edf2ee;padding-top:15px;font-size:10px;color:#9aac9f;display:flex;align-items:center;gap:7px}.receipt{max-width:660px;margin:0 auto;text-align:center;padding:40px}.receipt-check{display:grid;place-items:center;width:80px;height:80px;border-radius:50%;background:#e5f6ec;color:#54a176;margin:0 auto 25px}.receipt h2{font-size:25px;margin:10px 0}.receipt>p{font-size:13px;line-height:1.9}.receipt-code{font-family:monospace;font-size:23px;letter-spacing:1px;padding:20px;border:1px dashed #bdd6c7;border-radius:8px;background:#f6fbf7;margin:25px 0;color:#4d8066}dl{text-align:left;display:grid;grid-template-columns:140px 1fr;gap:16px;margin:0 0 25px}dt{font-size:11px;color:#94a79a}dd{margin:0;font-size:12px;color:#526f5b;overflow-wrap:anywhere}.info-box{display:flex;gap:12px;align-items:center;text-align:left;background:#eef5f1;border:1px solid #e1ece3;border-radius:8px;padding:15px;color:#668775;font-size:11px;margin:15px 0 25px}.alert{border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:12px;margin-bottom:22px}.alert.error{background:#fff1ee;color:#b2695d;border:1px solid #f5d9d2}.alert.success{background:#ebf8ed;color:#5c9968;border:1px solid #d4ead7}.alert>span{flex:1}.alert button{display:grid;place-items:center;background:transparent;border:0;color:inherit}.detail-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr);gap:24px;align-items:start}.detail-name{font-size:26px;margin:7px 0}.details{margin-top:10px;padding-top:24px;border-top:1px solid var(--line);gap:20px}.action-area{display:flex;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);padding-top:22px;margin-top:15px}.action-area p{font-size:11px}.command{background:#f4f8f5;border:1px solid #e2ece4;border-radius:6px;padding:10px 13px;font-family:monospace;font-size:12px;color:#57846b;margin:12px 0;overflow-wrap:anywhere}.hr-card textarea{font-size:12px;background:#f9fbf9}.hr-card .button{width:100%;margin-top:12px}.hr-card small{display:block;margin-top:12px;font-size:10px}.timeline-item{display:flex;gap:17px;padding:0 0 20px 3px;position:relative}.timeline-item:before{content:"";position:absolute;top:15px;bottom:0;left:7px;width:1px;background:#e0eae2}.timeline-item:last-child:before{display:none}.timeline-item>i{height:9px;width:9px;background:#8ab69b;border-radius:50%;margin-top:6px;flex-shrink:0}.timeline-item strong{font-size:11px;font-weight:500}.timeline-item small{display:block;font-size:10px}.sign-in{text-align:center;padding:65px 25px;max-width:700px;margin:0 auto}.sign-in>svg{color:#7eaa91;margin-bottom:15px}.sign-in p{margin:12px auto 25px;font-size:12px}.setup-status{display:flex;gap:25px;font-size:12px;color:#8aa691;margin:18px 0}.form-card>p{font-size:12px;margin:10px 0 20px}.staff-list{margin:22px 0}.staff-list button{display:flex;gap:12px;align-items:center;width:100%;border:1px solid #e7ede7;background:#fafcfb;padding:12px;border-radius:7px;margin:8px 0;text-align:left}.staff-list strong{font-size:12px}.staff-list small{display:block;font-size:10px}.staff-list button>svg{margin-left:auto;color:#8da697}.help-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px}.help-steps{padding-left:25px;color:#7f9486;font-size:12px;margin-top:25px}.help-steps li{padding:0 0 25px 8px}.help-steps strong{display:block;color:#4b735a;margin-bottom:5px}.qr-panel{max-width:650px;margin:0 auto;text-align:center;padding:45px}.qr-panel>svg{color:#6e9d7f;margin-bottom:14px}.qr-panel img{display:block;margin:25px auto}.qr-panel .button{margin:12px 7px}.qr-panel small{display:block;margin-top:15px}footer{display:flex;justify-content:space-between;font-size:9px;color:#a7b5ac;border-top:1px solid #e7ede8;padding:22px 0 0;margin-top:35px}.mobile-menu{display:none}.table-scroll{overflow:auto}@media(min-width:1550px){body{font-size:15px}.page-heading h1{font-size:32px}.nav-item{font-size:13px}.section-top p,.compact p,td{font-size:12px}.search input{font-size:11px}}@media(max-width:1150px){main{padding:28px 25px}.topbar{padding:0 25px}.sidebar{width:230px}.main-wrap{margin-left:230px;width:calc(100% - 230px)}.registration-grid,.detail-grid{grid-template-columns:1fr}.registration-aside{display:none}.stat-icon{position:static;display:inline-grid;padding:6px;margin-bottom:8px}.stat{padding:15px}.stat>strong{font-size:27px}.table-tools{align-items:stretch;flex-direction:column}.search{width:100%}.flow-strip{padding:13px;font-size:10px}.form-grid{gap:16px}.help-grid{grid-template-columns:1fr}}@media(max-width:760px){.sidebar{transform:translate(-100%);transition:transform .2s;width:258px;box-shadow:8px 0 30px #153c3620}.sidebar.open{transform:translate(0)}.main-wrap{margin:0;width:100%}.mobile-menu{display:grid}.topbar{height:61px;padding:0 18px;gap:12px;justify-content:flex-start}.top-status{margin-left:auto;font-size:7px;letter-spacing:.4px}.breadcrumb{display:none}main{padding:25px 17px}.page-heading{align-items:flex-start;margin-bottom:22px}.page-heading h1{font-size:25px}.page-heading p{font-size:11px}.page-heading>.button{padding:9px;font-size:10px;white-space:nowrap}.stats{grid-template-columns:1fr 1fr;gap:12px}.stat{min-height:130px}.stat-icon{position:absolute;right:15px;top:17px}.stat>strong{font-size:32px;display:block;margin-top:16px}.stat>span{max-width:80px;font-size:11px}.flow-strip{display:none}.bottom-grid{grid-template-columns:1fr;gap:0}.table-card .section-top{padding:20px 17px}.table-tools{padding:0 15px 18px}.tabs{overflow:auto}.tabs button{padding:6px 8px}th,td{padding:12px 15px}.form-card{padding:22px 19px}.form-grid{grid-template-columns:1fr;gap:16px}.full{grid-column:auto}.gps-card{flex-wrap:wrap;padding:14px}.gps-card>div{flex:1}.gps-card>.button{margin-left:35px}.receipt{padding:28px 20px}.receipt h2{font-size:22px}.receipt-code{font-size:19px;padding:16px 8px}dl{grid-template-columns:110px 1fr}.detail-grid,.help-grid{gap:0}.form-step{display:none}.action-area .button{width:100%}.setup-status{flex-direction:column;gap:8px}.qr-panel{padding:28px 14px}.qr-panel img{max-width:100%;height:auto}.compact{padding:21px}footer{font-size:8px;gap:15px}.eyebrow{font-size:8px}}@media print{body{background:#fff}.sidebar,.topbar,.page-heading,footer,.alert,.qr-panel .button,.qr-panel small{display:none!important}.main-wrap{margin:0;width:100%}main{padding:0;max-width:none}.qr-panel{margin:70px auto;border:0;box-shadow:none}.qr-panel h2{font-size:28px}.qr-panel p{font-size:20px}.qr-panel img{width:400px;height:400px}}.staff-pair{margin-left:auto;font-size:10px;color:var(--teal);background:#edf5f0;padding:5px 10px;border-radius:6px}.staff-list button>.staff-pair+svg{margin-left:0}.staff-row{display:flex;gap:8px;align-items:center}.staff-row>button:first-child{flex:1}.staff-row>.staff-pair-button{width:auto;font-size:10px;color:var(--teal);white-space:nowrap;justify-content:center;padding:10px}.company-logo{object-fit:contain;background:#fff;border-radius:5px}.brand-logo{width:68px;height:49px;flex-shrink:0}.brand{font-size:13px;letter-spacing:.3px;gap:10px;padding-left:3px}.brand small{font-size:7px;letter-spacing:.8px}.header-logo{width:37px;height:27px}.company-logo-panel{background:#fff;border:1px solid #e8ebe5;border-radius:12px;padding:18px;display:flex;justify-content:center;align-items:center;margin-bottom:25px}.welcome-logo{width:100%;max-width:220px;height:auto;aspect-ratio:4767/3278}.qr-panel img.qr-brand-logo{width:160px;height:auto;margin:0 auto 22px}.receipt>.button{margin-bottom:22px}.receipt .receipt-code{margin-bottom:14px}.auth-form{max-width:460px;text-align:center;padding:38px}.auth-form label{text-align:left;margin-bottom:18px}.auth-form .button{width:100%;margin-top:5px}.auth-form>small{display:block;margin-top:18px;font-size:11px}.profile .logout-button{margin-left:auto;color:#7d8e8d;border:0;background:transparent;padding:6px;display:grid;place-items:center}.staff-list button.inactive{opacity:.6}