:root{--navy:#102f64;--blue:#1756a4;--sky:#2d9bd5;--gold:#e8b83f;--green:#27926b;--ink:#18304a;--muted:#66778a;--line:#dce5ed;--paper:#f5f8fb;--white:#fff;--shadow:0 20px 55px rgba(18,55,94,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:"IBM Plex Sans Thai",sans-serif}.container{width:min(1160px,calc(100% - 36px));margin:auto}button,input,select,textarea{font:inherit}button{cursor:pointer}.site-header{height:86px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}.brand img{width:58px;height:58px;object-fit:contain}.brand b,.brand small{display:block}.brand b{font-size:17px}.brand small{font-size:10px;color:var(--muted)}nav{display:flex;align-items:center;gap:24px}nav a{color:#40566d;text-decoration:none;font-size:13px;font-weight:500}.nav-report{border:0;border-radius:10px;background:var(--blue);color:#fff;padding:10px 15px;font-weight:600}.role-switch{border:0;background:transparent;color:#728195;font-size:11px}.menu-btn{display:none;border:0;background:#edf3f9;color:var(--navy);width:42px;height:42px;border-radius:11px;font-size:20px}.hero{background:linear-gradient(125deg,#f3f8fd 0%,#eaf4fb 60%,#dceef9 100%);overflow:hidden}.hero-grid{min-height:570px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:40px}.eyebrow{font:700 10px Manrope;letter-spacing:.14em;color:#63809e;text-transform:uppercase;margin:0 0 8px}.eyebrow i{display:inline-block;width:7px;height:7px;background:var(--gold);border-radius:50%;margin-right:7px;box-shadow:0 0 0 5px rgba(232,184,63,.14)}.hero h1{font-size:48px;line-height:1.18;margin:0}.hero h1 span{color:var(--blue)}.lead{font-size:15px;color:#5e7288;line-height:1.8;max-width:610px}.hero-actions{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0 21px}.primary-btn,.secondary-btn,.call-btn{border-radius:11px;padding:13px 18px;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}.primary-btn{border:0;background:var(--blue);color:#fff;box-shadow:0 9px 23px rgba(23,86,164,.22)}.secondary-btn{border:1px solid #c7d7e5;background:#fff;color:var(--navy)}.call-btn{border:1px solid #d9b354;background:#fff8df;color:#74550e}.trust-row{display:flex;gap:17px;flex-wrap:wrap;color:#617589;font-size:11px}.trust-row span{white-space:nowrap}.hero-visual{height:410px;position:relative}.visual-ring{position:absolute;border-radius:50%;border:1px solid rgba(23,86,164,.13)}.ring-one{inset:7px}.ring-two{inset:55px}.visual-card{position:absolute;background:#fff;border:1px solid rgba(255,255,255,.65);border-radius:22px;box-shadow:var(--shadow)}.card-main{width:290px;left:70px;top:90px;padding:27px;display:flex;gap:16px}.big-icon{width:57px;height:57px;display:grid;place-items:center;background:#e7f2fa;border-radius:17px;font-size:27px;flex:0 0 auto}.card-main small,.card-main b{display:block}.card-main small{font-size:10px;color:var(--muted)}.card-main b{font-size:18px}.card-main p{font-size:11px;color:var(--muted);line-height:1.55}.floating-card{position:absolute;background:#fff;padding:13px 15px;border-radius:15px;display:flex;gap:10px;align-items:center;box-shadow:var(--shadow)}.floating-card>span{font-size:23px}.floating-card b,.floating-card small{display:block}.floating-card b{font-size:12px}.floating-card small{font-size:9px;color:var(--muted)}.float-a{right:5px;top:45px}.float-b{left:5px;bottom:35px}.quick-stats{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}.stats-grid article{padding:22px 25px;border-right:1px solid var(--line);display:flex;align-items:center;gap:13px}.stats-grid article:last-child{border-right:0}.stat-symbol{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}.stat-symbol.blue{background:#e7f0fb}.stat-symbol.gold{background:#fff4d5}.stat-symbol.green{background:#e2f5ee}.stat-symbol.sky{background:#e4f5fc}.stats-grid b,.stats-grid small{display:block}.stats-grid b{font:800 23px Manrope}.stats-grid small{font-size:10px;color:var(--muted)}.section{padding:84px 0}.section-heading{text-align:center;max-width:650px;margin:0 auto 34px}.section-heading h2,.track-copy h2,.how-grid h2,.admin-box h2{font-size:32px;margin:0}.section-heading>p:last-child,.track-copy>p,.how-grid>div>p:last-child,.admin-box p{color:var(--muted);font-size:13px}.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.service-card{border:1px solid var(--line);background:#fff;border-radius:18px;padding:22px;text-align:left;min-height:205px;transition:.2s;color:inherit}.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b9d1e5}.service-card.featured-service{background:linear-gradient(145deg,#113a73,#1e68b7);color:#fff;border-color:transparent}.service-card.featured-service p{color:#d2e5f5}.service-card.featured-service i{color:#ffe07a}.service-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:23px;margin-bottom:17px}.service-icon.help{background:rgba(255,255,255,.15)}.service-icon.trash{background:#e3f4ec}.service-icon.light{background:#fff2ce}.service-icon.health{background:#f0e8fc}.service-icon.road{background:#ffe8de}.service-icon.water{background:#e0f2fb}.service-icon.animal{background:#f5e8dd}.service-icon.other{background:#e9edf2}.service-card b{display:block;font-size:15px}.service-card p{font-size:11px;line-height:1.6;color:var(--muted);min-height:52px}.service-card i{font-style:normal;font-size:11px;color:var(--blue);font-weight:600}.how-section{background:linear-gradient(135deg,#0e2e60,#184f92);color:#fff}.how-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;align-items:center}.eyebrow.light{color:#a9c4e2}.how-grid>div>p:last-child{color:#c4d5e7;line-height:1.7}.steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}.steps li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:15px;padding:16px;display:flex;gap:15px}.steps li>span{font:800 12px Manrope;color:#ffe278;background:rgba(255,226,120,.1);width:38px;height:38px;border-radius:11px;display:grid;place-items:center}.steps b{font-size:14px}.steps p{margin:2px 0 0;color:#bdd0e4;font-size:11px}.track-grid{display:grid;grid-template-columns:1fr 1fr;gap:35px}.track-form{display:flex;gap:8px;margin-top:23px}.track-form input{flex:1;border:1px solid #cfdde9;background:#fff;border-radius:11px;padding:13px;outline-color:var(--blue)}.track-form button{border:0;background:var(--blue);color:#fff;border-radius:11px;padding:0 18px;font-weight:600}.track-result{margin-top:15px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:14px}.track-result.error{color:#a84532;background:#fff5f2;border-color:#f0c9c1}.track-result b,.track-result span{display:block}.track-result span{font-size:12px;color:var(--muted)}.status-preview{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}.status-head{display:flex;justify-content:space-between;align-items:center}.status-head span{font-weight:700}.status-head em{font-style:normal;font-size:10px;background:#fff4d2;color:#8a650c;border-radius:20px;padding:6px 9px}.timeline{margin-top:20px}.timeline>div{display:flex;gap:13px;position:relative;padding-bottom:20px}.timeline>div:not(:last-child):before{content:"";position:absolute;width:2px;height:22px;background:#dae5ee;left:15px;top:33px}.timeline i{width:32px;height:32px;border:2px solid #d8e1e8;border-radius:50%;display:grid;place-items:center;font:700 10px Manrope;color:#8d9ba7;font-style:normal;flex:0 0 auto}.timeline .done i{background:var(--green);border-color:var(--green);color:#fff}.timeline .active i{border-color:var(--gold);color:#815f08}.timeline b,.timeline small{display:block}.timeline b{font-size:12px}.timeline small{font-size:9px;color:var(--muted)}.admin-section{padding-top:0}.admin-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;display:flex;justify-content:space-between;align-items:center}.admin-box h2{font-size:24px}.admin-btn{border:1px solid #bed1e2;background:#eef5fb;color:var(--navy);border-radius:11px;padding:12px 17px;font-weight:600}footer{background:#0b254e;color:#fff;padding:45px 0 18px}.footer-grid{display:grid;grid-template-columns:1.6fr .7fr 1fr;gap:40px}.footer-brand{display:flex;gap:13px}.footer-brand img{width:64px;height:64px;object-fit:contain}.footer-brand b,footer>div>div>b{display:block;font-size:13px}.footer-brand p,footer p{color:#afc3d9;font-size:10px;margin:3px 0}.footer-grid>div:not(.footer-brand) a{display:block;color:#c5d5e5;font-size:10px;text-decoration:none;margin-top:8px}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:30px;padding-top:17px;font-size:9px;color:#86a2bf}.modal[hidden]{display:none}.modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:18px}.backdrop{position:absolute;inset:0;background:rgba(5,20,43,.72);backdrop-filter:blur(5px)}.modal-card{position:relative;background:#fff;border-radius:22px;padding:28px;width:min(690px,100%);max-height:94vh;overflow:auto}.modal-head{display:flex;justify-content:space-between}.modal-head h2{margin:0}.close-btn{border:0;background:#edf2f6;width:35px;height:35px;border-radius:50%;font-size:21px}.form-progress{display:flex;align-items:center;justify-content:center;margin:21px 0}.form-progress span{width:28px;height:28px;border-radius:50%;background:#edf1f4;display:grid;place-items:center;font:700 10px Manrope}.form-progress span.active{background:var(--blue);color:#fff}.form-progress i{width:65px;height:2px;background:#e1e8ee}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{font-size:11px;font-weight:600}.form-grid label small{font-weight:400;color:var(--muted)}.form-grid .full{grid-column:1/-1}.form-grid input,.form-grid select,.form-grid textarea,.staff-login-card input{width:100%;border:1px solid #cfdae4;border-radius:10px;padding:11px;margin-top:6px;outline-color:var(--blue);background:#fff}.consent{display:flex;gap:9px;margin-top:17px;font-size:10px;color:#667789}.consent input{accent-color:var(--blue);flex:0 0 auto}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:21px}.cancel-btn,.submit-btn{border-radius:10px;padding:11px 17px;font-weight:600}.cancel-btn{border:1px solid var(--line);background:#fff}.submit-btn{border:0;background:var(--blue);color:#fff}.success-card{position:relative;background:#fff;border-radius:22px;padding:35px;text-align:center;width:min(470px,100%)}.success-icon{width:62px;height:62px;border-radius:50%;background:#e0f3eb;color:var(--green);font-size:28px;display:grid;place-items:center;margin:auto}.success-card h2{margin:0}.success-card>p:not(.eyebrow){font-size:12px;color:var(--muted)}.success-card strong{display:block;background:#eef5fb;color:var(--navy);font:800 22px Manrope;padding:14px;border-radius:12px;margin:18px 0}.success-actions{display:flex;gap:8px}.success-actions button{flex:1;border-radius:10px;padding:10px;border:1px solid var(--line);background:#fff}.success-actions button:last-child{background:var(--blue);color:#fff;border-color:var(--blue)}.admin-modal-card{width:min(850px,100%)}.admin-list{display:grid;gap:10px;margin-top:20px}.admin-item{border:1px solid var(--line);border-radius:14px;padding:15px;display:grid;grid-template-columns:1fr 150px;gap:12px;align-items:center}.admin-item h3{font-size:13px;margin:0}.admin-item p{font-size:10px;color:var(--muted);margin:4px 0}.admin-item select{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px}.toast{position:fixed;right:22px;bottom:22px;background:#102b55;color:#fff;padding:13px 18px;border-radius:11px;opacity:0;transform:translateY(12px);transition:.22s;z-index:120;font-size:11px}.toast.show{opacity:1;transform:none}.mobile-help-bar{display:none}
.role-gate{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,#eef6fc,#f8fbfd 55%,#e4f1f9);display:grid;place-items:center;padding:25px;overflow:auto}.role-gate.hidden{display:none}.role-glow{position:absolute;border-radius:50%;filter:blur(2px)}.glow-a{width:480px;height:480px;background:radial-gradient(circle,rgba(45,155,213,.17),transparent 68%);right:-110px;top:-160px}.glow-b{width:420px;height:420px;background:radial-gradient(circle,rgba(232,184,63,.13),transparent 68%);left:-130px;bottom:-170px}.role-panel{position:relative;width:min(970px,100%);background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);border-radius:28px;padding:32px 38px;box-shadow:0 30px 90px rgba(18,55,94,.13);backdrop-filter:blur(16px)}.role-brand{display:flex;align-items:center;gap:13px;border-bottom:1px solid var(--line);padding-bottom:22px}.role-brand img{width:67px;height:67px;object-fit:contain}.role-brand p,.role-brand h1,.role-brand span{margin:0;display:block}.role-brand p{font-size:10px;color:#63809e}.role-brand h1{font-size:19px}.role-brand span{font-size:9px;color:#8494a5}.role-intro{text-align:center;padding:30px 0 22px}.role-intro h2{font-size:31px;margin:0}.role-intro>p:last-child{font-size:12px;color:var(--muted)}.role-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}.role-card{border:1px solid var(--line);background:#fff;border-radius:20px;padding:24px;position:relative;text-align:left;display:flex;gap:18px;color:inherit;transition:.2s;overflow:hidden}.role-card:after{content:"";position:absolute;width:160px;height:160px;border-radius:50%;right:-70px;top:-95px;background:rgba(23,86,164,.05)}.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b6cee1}.role-card.staff{background:linear-gradient(145deg,#0f3268,#1a5da9);color:#fff;border:0}.role-number{position:absolute;right:17px;top:14px;font:800 10px Manrope;color:#98a7b6}.role-card.staff .role-number{color:#8fb5db}.role-emoji{width:58px;height:58px;border-radius:17px;background:#e6f2fa;display:grid;place-items:center;font-size:28px;flex:0 0 auto}.role-card.staff .role-emoji{background:rgba(255,255,255,.13)}.role-card small,.role-card b{display:block}.role-card small{font-size:9px;color:#75869a}.role-card.staff small,.role-card.staff p{color:#c2d7eb}.role-card b{font-size:24px}.role-card p{font-size:11px;color:var(--muted);min-height:34px}.role-card i{font-style:normal;color:var(--blue);font-size:11px;font-weight:600}.role-card.staff i{color:#ffe07a}.role-card em{font-style:normal;margin-left:15px}.role-contact{display:flex;justify-content:center;gap:12px;align-items:center;margin-top:22px;font-size:10px;color:var(--muted)}.role-contact a{color:var(--blue);font-weight:700;text-decoration:none}.staff-login-card{position:relative;background:#fff;border-radius:22px;padding:35px;width:min(430px,100%);text-align:center}.staff-login-card>img{width:82px;height:82px;object-fit:contain}.staff-login-card h2{margin:0}.staff-login-card>p:not(.eyebrow){font-size:11px;color:var(--muted)}.staff-login-card label{display:block;text-align:left;font-size:11px;font-weight:600;margin-top:20px}.staff-login-btn{width:100%;border:0;background:var(--blue);color:#fff;border-radius:10px;padding:11px;margin-top:12px;font-weight:600}.staff-login-card>small{display:block;color:#a17a1e;margin-top:13px}.login-close{position:absolute;right:18px;top:18px}
@media(max-width:900px){nav a,.role-switch{display:none}.menu-btn{display:block}.hero-grid{grid-template-columns:1fr;min-height:auto;padding:75px 0}.hero-visual{display:none}.service-grid{grid-template-columns:repeat(2,1fr)}.how-grid,.track-grid{grid-template-columns:1fr;gap:35px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:620px){body{padding-bottom:62px}.site-header{height:72px}.brand img{width:49px;height:49px}.brand b{font-size:14px}.hero-grid{padding:55px 0}.hero h1{font-size:35px}.hero-actions>*{width:100%}.trust-row{display:grid;gap:6px}.stats-grid{grid-template-columns:1fr 1fr}.stats-grid article{padding:15px;border-bottom:1px solid var(--line)}.stats-grid article:nth-child(2){border-right:0}.section{padding:60px 0}.section-heading h2,.track-copy h2,.how-grid h2{font-size:27px}.service-grid{grid-template-columns:1fr}.service-card{min-height:auto}.form-grid{grid-template-columns:1fr}.form-grid .full{grid-column:auto}.admin-box{display:block}.admin-btn{width:100%;margin-top:10px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.mobile-help-bar{position:fixed;z-index:60;bottom:0;left:0;right:0;height:62px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;padding:8px;gap:8px}.mobile-help-bar a,.mobile-help-bar button{border-radius:10px;display:grid;place-items:center;text-decoration:none;font-weight:600;font-size:12px}.mobile-help-bar a{color:var(--navy);background:#edf4fa}.mobile-help-bar button{border:0;background:var(--blue);color:#fff}.role-gate{padding:10px}.role-panel{padding:20px 16px;border-radius:20px}.role-brand img{width:55px;height:55px}.role-brand h1{font-size:16px}.role-intro{padding:23px 0 14px}.role-intro h2{font-size:25px}.role-options{grid-template-columns:1fr}.role-card{padding:18px}.role-card p{min-height:0}.role-contact{flex-wrap:wrap}.admin-item{grid-template-columns:1fr}.success-actions{display:grid}.track-form{display:grid}.track-form button{height:45px}}
.required-note{font-size:10px;color:var(--muted);margin:17px 0}.required-note span,.required{color:#c44132}.upload-field{border:1px solid #d7e0e8;border-radius:13px;padding:14px;background:#f9fbfd}.upload-field small{display:block;margin-top:4px;line-height:1.5}.upload-field input[type=file]{border:0;padding:8px 0 0;background:transparent}.upload-field input[type=file]::file-selector-button{border:1px solid #b9cfe2;border-radius:8px;padding:8px 12px;background:#fff;color:var(--blue);font-weight:600;cursor:pointer}
.admin-modal-card{width:min(980px,100%)}.admin-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0}.admin-summary article{border:1px solid var(--line);background:#f7fafc;border-radius:13px;padding:14px}.admin-summary small,.admin-summary b{display:block}.admin-summary small{font-size:10px;color:var(--muted)}.admin-summary b{font:800 25px Manrope;color:var(--navy)}.admin-list{display:grid;gap:14px;margin-top:20px}.admin-item{display:block;border:1px solid var(--line);border-radius:16px;padding:18px}.admin-item-head{display:flex;justify-content:space-between;align-items:start;gap:15px}.request-code{font:700 10px Manrope;color:var(--blue)}.admin-item h3{font-size:15px;margin:3px 0}.admin-item p{font-size:10px;color:var(--muted);margin:4px 0}.admin-item select{width:auto;min-width:150px;border:1px solid var(--line);border-radius:9px;padding:8px;background:#fff}.citizen-info{display:flex;gap:15px;flex-wrap:wrap;background:#eef5fb;border-radius:10px;padding:10px;margin-top:12px;font-size:10px}.request-detail{padding:12px 2px;border-bottom:1px solid var(--line)}.request-detail b{font-size:11px}.request-detail p{font-size:11px;color:var(--ink);white-space:pre-wrap}.request-detail small{display:inline-block;margin-right:12px;color:var(--blue)}.staff-update{display:grid;grid-template-columns:1fr 1.4fr auto;gap:10px;align-items:end;margin-top:12px}.staff-update label{font-size:10px;font-weight:600}.staff-update input,.staff-update textarea{display:block;width:100%;border:1px solid #cfdae4;border-radius:9px;padding:9px;margin-top:5px;resize:vertical;font:inherit}.staff-update button{border:0;background:var(--blue);color:#fff;border-radius:9px;padding:10px 14px;font-weight:600}.staff-update>small{grid-column:1/-1;color:var(--muted)}
@media(max-width:700px){.admin-summary{grid-template-columns:1fr 1fr}.admin-item-head{display:block}.admin-item select{width:100%;margin-top:8px}.staff-update{grid-template-columns:1fr}.staff-update>small{grid-column:auto}}