:root{--ink:#0b2639;--navy:#071b2e;--navy2:#0b304a;--cyan:#00d9db;--blue:#168bd1;--line:#d9e7ee;--muted:#627b8a;--paper:#f3f7f9;--panel:#fff;--shadow:0 18px 45px rgba(10,42,65,.075);font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'IBM Plex Sans Thai','Noto Sans Thai',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{text-decoration:none;color:inherit}button{cursor:pointer}svg{flex-shrink:0}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #39bde5;outline-offset:3px}[hidden]{display:none!important}
.site-head{position:relative;z-index:9;border-bottom:1px solid #e2ebef;background:rgba(255,255,255,.97);box-shadow:0 4px 25px rgba(5,39,63,.025)}.head-inner{max-width:1640px;min-height:87px;margin:auto;padding:12px 30px;display:flex;align-items:center;gap:16px}.head-back{width:46px;height:46px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;border-radius:15px;color:#337090}.head-back:hover{background:#eef8fb}.brandmark{display:flex;align-items:center;gap:12px;min-width:0}.emblem{width:49px;height:49px;display:grid;place-items:center;color:#fff;background:linear-gradient(140deg,#07314d,#1175b3);border-radius:15px;box-shadow:0 7px 18px #116b992e}.brandmark b{display:block;font-size:14px;letter-spacing:.06em;color:#0d2c43;font-family:Kanit,sans-serif;white-space:nowrap}.brandmark b span{color:#1882b4}.brandmark small{display:block;color:#7a909e;font-size:11px;margin-top:3px}.head-right{display:flex;align-items:center;gap:12px;margin-left:auto;white-space:nowrap}.status-chip,.time-chip,.version{border:1px solid #d8e9ed;display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:700}.status-chip{color:#11727e;background:#eefaf9}.status-chip i{height:8px;width:8px;background:#19bdb2;border-radius:50%;box-shadow:0 0 0 4px #c9f8f1}.time-chip{font-variant-numeric:tabular-nums;letter-spacing:.05em;background:#f4f9fb;color:#234458}.version{color:#176f9e;background:#f2fbfe}
.page-wrap{max-width:1640px;margin:0 auto;padding:0 30px 36px}.subnav{display:flex;flex-wrap:nowrap;align-items:center;gap:7px;padding:14px 0;overflow:auto;scrollbar-width:thin;border-bottom:1px solid #e1eaf0}.subnav-link{display:inline-flex;align-items:center;gap:9px;padding:11px 14px;white-space:nowrap;border-radius:12px;color:#577081;font-size:12px;font-weight:700;transition:.2s ease;border:1px solid transparent}.subnav-link:hover{color:#0e789e;background:#edf8fb}.subnav-link.active{background:#0e354e;color:#fff;box-shadow:0 7px 18px rgba(12,62,84,.12)}.subnav-link.gps-nav{margin-left:auto;background:#e9f7fa;color:#0b7685;border:1px solid #d1eaef}.ext-mark{font-size:15px}.site-footer{display:flex;justify-content:space-between;gap:12px;padding:24px 0;color:#7d95a3;font-size:11px;border-top:1px solid #e4edf0;margin-top:30px}
.eyebrow{color:#0e8eab;font-weight:800;letter-spacing:.14em;font-size:10px}.slash{color:#85adb8;padding:0 6px}.intro{padding:32px 4px 20px}.hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}.intro h1,.page-intro h1{font-family:Kanit,sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:12px 0 8px;font-size:clamp(30px,3.6vw,52px)}.intro h1 span{color:#1284b8;margin-left:.24em}.intro p,.page-intro p{margin:0;max-width:780px;line-height:1.8;color:#617c8b;font-size:14px}.hero-status{min-width:238px;max-width:290px;padding:13px 16px;border:1px solid #d9ecf0;background:#fff;border-radius:17px;display:grid;grid-template-columns:auto 1fr;column-gap:9px;box-shadow:var(--shadow)}.hero-led{background:#0bbcae;box-shadow:0 0 0 4px #d6f7f3;border-radius:50%;width:8px;height:8px;align-self:center}.hero-status b{font-size:10px;letter-spacing:.1em;color:#146d86}.hero-status small{grid-column:2;display:block;color:#7f939d;font-size:10px;line-height:1.55;margin-top:3px}
.radar-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:16px;align-items:stretch}.radar-screen{border:1px solid #24485c;background:#061f32;color:#e6f8ff;border-radius:23px;overflow:hidden;box-shadow:0 25px 65px #0a34552a;min-width:0;display:flex;flex-direction:column}.radar-main{height:630px}.radar-secondary{min-height:610px}.map-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;background:linear-gradient(110deg,#0a2c43,#073347);border-bottom:1px solid #255064;flex-wrap:wrap}.map-topline>div:first-child{display:grid;grid-template-columns:9px 1fr;gap:2px 9px}.online-dot{background:var(--cyan);width:8px;height:8px;border-radius:50%;align-self:center;box-shadow:0 0 0 4px #03c7bd22}.map-topline b{color:#b4f9fa;font-weight:750;font-size:10px;letter-spacing:.11em}.map-topline small{grid-column:2;color:#8fb7c7;font-size:10px}.map-tools{display:flex;gap:7px}.map-tools button{display:inline-flex;align-items:center;justify-content:center;gap:7px;color:#d9f7ff;background:#163d52;border:1px solid #416273;border-radius:11px;padding:9px 10px;font-weight:700;font-size:11px}.map-tools button:hover{background:#235572}.map-viewport{position:relative;isolation:isolate;flex:1;min-height:0;overflow:hidden;background:radial-gradient(circle at 46% 48%,#1b5b69 0%,#0c364b 38%,#092235 100%)}#opsMap{position:absolute;inset:0;z-index:1;background:transparent}.radar-main #opsMap .leaflet-tile-pane{filter:saturate(.82) brightness(.84) contrast(1.03)}.radar-secondary #opsMap .leaflet-tile-pane{filter:saturate(.94) brightness(.91)}.radar-main .leaflet-control-attribution{background:rgba(7,28,42,.8)!important;color:#adcfdf!important}.radar-main .leaflet-control-attribution a{color:#a8ebff!important}.leaflet-top{top:55px}.radar-graphic{position:absolute;z-index:410;inset:0;pointer-events:none;overflow:hidden}.radar-orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(26,239,226,.31);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 1px rgba(7,56,80,.2) inset}.orbit-one{width:min(29vw,240px);aspect-ratio:1}.orbit-two{width:min(58vw,485px);aspect-ratio:1}.orbit-three{width:min(89vw,700px);aspect-ratio:1}.radar-cross{position:absolute;background:linear-gradient(to right,transparent,rgba(33,224,215,.22),transparent)}.radar-cross.horizontal{height:1px;left:0;right:0;top:50%}.radar-cross.vertical{width:1px;top:0;bottom:0;left:50%;background:linear-gradient(to bottom,transparent,rgba(33,224,215,.22),transparent)}.radar-sweep{position:absolute;left:50%;top:50%;width:min(89vw,700px);height:min(89vw,700px);border-radius:50%;transform:translate(-50%,-50%);background:conic-gradient(from -90deg,transparent 0deg,transparent 289deg,rgba(14,240,213,.02) 316deg,rgba(19,236,219,.22) 358deg,transparent 360deg);animation:radarRotate 11s linear infinite;mix-blend-mode:screen}.radar-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;border:2px solid #e8fffe;display:grid;place-items:center;box-shadow:0 0 0 7px #07b5ad2b}.radar-center span{background:#4fffe7;width:3px;height:3px;border-radius:50%}@keyframes radarRotate{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.map-float-label{position:absolute;z-index:420;top:17px;left:18px;pointer-events:none;display:grid;gap:5px;padding:13px 16px;border:1px solid #47748a;background:rgba(5,32,51,.87);backdrop-filter:blur(8px);border-radius:13px;box-shadow:0 9px 25px #001f304d}.map-live-pill{font-size:9px;font-weight:800;color:#74f4f0;letter-spacing:.11em;display:flex;align-items:center;gap:6px}.map-float-label strong{font-family:Kanit,sans-serif;font-size:15px;line-height:1.1}.map-float-label small{font-size:9px;color:#8cb7c5;letter-spacing:.08em}.map-north{position:absolute;z-index:415;top:26px;right:25px;pointer-events:none;display:flex;flex-direction:column;align-items:center;color:#cbf5f6;font-size:10px;font-weight:800;line-height:1}.map-north span:last-child{font-size:24px;margin-top:4px}.map-inset-label{position:absolute;z-index:420;bottom:17px;left:18px;background:rgba(7,30,44,.85);border:1px solid #386478;color:#cdf5fb;padding:8px 11px;font-size:10px;border-radius:10px;pointer-events:none}.map-bottomline{display:flex;align-items:center;flex-wrap:wrap;gap:13px;padding:13px 17px;background:#0a2c40;border-top:1px solid #23536a;color:#c1d8e2;font-size:10px}.map-bottomline>div{display:flex;align-items:center;gap:7px}.legend-line{width:20px;border-top:3px solid #0ae1ae;display:inline-block}.legend-line.vehicles{border-color:#5bb6f1;border-top-style:dashed}.legend-dot{height:9px;width:9px;border-radius:50%;background:#22ddc2;display:inline-block}.legend-dot.markers{background:#ffb663}.map-source{margin-left:auto;color:#6ea9bb;font-size:9px}
.radar-side{display:flex;flex-direction:column;border-radius:22px;border:1px solid var(--line);background:white;overflow:hidden;box-shadow:var(--shadow)}.side-head{padding:24px 21px 16px}.side-head h2,.section-heading h2,.module-panel h2,.source-panel h2{font:600 22px/1.3 Kanit,sans-serif;margin:8px 0 6px}.side-head p,.section-heading p{font-size:12px;line-height:1.7;color:#77919e;margin:0}.radar-waypoints{display:grid;align-content:start;gap:9px;padding:0 12px 16px;flex:1}.point-quick,.directory-item{border:1px solid #e2edf1;background:#f9fcfd;border-radius:14px;display:flex;align-items:center;gap:10px;text-align:left;width:100%;padding:11px;transition:.17s ease}.point-quick:hover,.directory-item:hover,.point-quick.selected,.directory-item.selected{border-color:#76d5e3;background:#eefbfc;transform:translateY(-1px)}.point-badge{display:grid;place-items:center;border-radius:10px;min-width:37px;height:37px;color:#fff;font-size:12px;font-weight:800;background:#138ab8}.point-badge.start{background:#06ab96}.point-badge.finish{background:#e58e2f}.point-quick span:nth-child(2),.directory-item span:nth-child(2){min-width:0;flex:1}.point-quick b,.directory-item b{display:block;font-size:11px;line-height:1.48;color:#173e50}.point-quick small,.directory-item small{display:block;margin-top:3px;color:#7290a0;font-size:10px}.point-quick em,.directory-item em{font-style:normal;color:#6996a6}.side-bottom-link{margin-top:auto;border-top:1px solid #e7eef2;display:flex;align-items:center;justify-content:space-between;padding:17px 20px;color:#0e779e;font-weight:800;font-size:11px;background:#f9fcfd}.side-bottom-link:hover{background:#eef9fd}
.metrics-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin:17px 0 31px}.field-metric{background:white;border:1px solid var(--line);border-radius:15px;padding:16px 18px;display:flex;align-items:center;gap:15px;box-shadow:var(--shadow)}.field-metric-number{font:600 32px/1 Kanit,sans-serif;color:#095879;min-width:39px}.field-metric b{display:block;font-size:11px;color:#163e52}.field-metric small{display:block;font-size:10px;color:#7c96a4;margin-top:4px}.portal-section{padding-bottom:12px}.section-heading{margin-bottom:16px}.section-heading h2{font-size:27px}.portal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.portal-card{background:#fff;border:1px solid var(--line);border-radius:20px;min-height:150px;padding:18px;display:grid;grid-template-columns:auto 1fr auto;gap:15px;align-content:start;position:relative;overflow:hidden;box-shadow:var(--shadow);transition:transform .18s ease,border-color .18s ease}.portal-card:hover{transform:translateY(-3px);border-color:#73cadd}.portal-icon{background:#e9f8fa;border-radius:13px;color:#168cab;display:grid;place-items:center;width:47px;height:47px}.portal-copy{align-self:center}.portal-copy b{font-family:Kanit,sans-serif;font-size:15px;display:block}.portal-copy small{font-size:11px;display:block;color:#738c9b;margin-top:5px;line-height:1.5}.portal-arrow{color:#68a7b6;font-size:20px}.portal-number{position:absolute;bottom:11px;right:16px;color:#dbe8ee;font:600 28px/1 Kanit,sans-serif}.truth-note{padding:14px 16px;border-radius:13px;border:1px solid #d8e7eb;background:#eaf4f5;color:#567481;font-size:11px;line-height:1.7;display:flex;gap:9px}.truth-note span{font-size:17px;color:#1c8ea3}
.page-intro{padding:38px 3px 28px}.page-intro h1{font-size:clamp(31px,3.6vw,50px);margin:10px 0}.module-layout{display:grid;grid-template-columns:minmax(0,1fr) 338px;gap:17px}.module-panel{border:1px solid var(--line);border-radius:22px;background:#fff;padding:20px;box-shadow:var(--shadow);min-width:0;max-height:720px;overflow:auto}.module-panel h2{margin:8px 0 18px}.module-panel h3{margin:10px 0;color:#114764;font-size:13px}.switch-line{display:flex;align-items:center;gap:13px;padding:12px 10px;background:#f8fcfd;border-radius:11px;margin-bottom:9px;border:1px solid #e2edf1;color:#265569;font-size:12px;font-weight:700;cursor:pointer}.switch-line input{accent-color:#0a95a3;width:18px;height:18px}.panel-divider{height:1px;background:#e4edf0;margin:17px 0}.route-segments{display:grid;gap:9px}.route-segment{border:1px solid #e3edf2;background:#f9fcfd;border-radius:13px;padding:12px;text-align:left;color:#214759;width:100%}.route-segment strong{display:block;font-size:11px}.route-segment small{color:#7d98a5}.outlined-link{margin-top:15px;display:inline-flex;align-items:center;padding:10px 13px;border:1px solid #b9dde7;border-radius:11px;color:#096b96;font-size:12px;font-weight:700;background:#f6fbfe}.directory-list{display:grid;gap:9px}.directory-item{padding:13px}.directory-item>span:last-child{margin-left:auto}.search-holder{display:grid;gap:6px;font-size:11px;font-weight:700;color:#466a7c}.search-holder input{border-radius:12px;border:1px solid #d7e9ed;min-height:43px;padding:8px 12px;outline:none;color:#153c51}.search-holder input:focus{border-color:#25b3d2}.filter-row{display:flex;flex-wrap:wrap;gap:5px;margin:13px 0}.filter{background:#f6fafd;border:1px solid #dcecf1;border-radius:10px;padding:7px 9px;font-size:11px;color:#476a7d}.filter.active{color:white;background:#0e728e;border-color:#0e728e}.result-count{color:#7390a1;font-size:11px;padding:6px 0 11px}.source-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:34px}.source-panel{background:white;border:1px solid var(--line);padding:28px;border-radius:21px;box-shadow:var(--shadow)}.source-panel h2{font-size:24px;margin:11px 0}.source-panel p{color:#607d8c;line-height:1.8;font-size:13px}.source-counts{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0}.source-counts span{background:#eef8fc;color:#1a6c89;border-radius:10px;padding:10px;font-size:11px;font-weight:700}
.vector-fallback{position:absolute;inset:0;z-index:2;background:radial-gradient(circle at center,#17455d,#071f31)}.vector-fallback svg{width:100%;height:100%;cursor:crosshair}.vector-fallback [data-map-point]{cursor:pointer}.vector-fallback [data-map-point]:hover{stroke:#fff;stroke-width:3}.vector-fallback text{fill:#defaff;font-size:12px;paint-order:stroke;stroke:#082538;stroke-width:3;stroke-linejoin:round}.leaflet-container{font-family:'IBM Plex Sans Thai',sans-serif!important}.op-map-pin{background:transparent;border:none}.op-map-pin .inner{height:35px;width:35px;background:#159bcc;color:white;border:2px solid white;border-radius:50%;display:grid;place-items:center;box-shadow:0 5px 17px #093955ab;font-weight:800;font-size:12px}.op-map-pin.start .inner{background:#00b7a1}.op-map-pin.finish .inner{background:#f4a043}.op-popup{font:12px/1.5 'IBM Plex Sans Thai',sans-serif;min-width:210px}.op-popup b{font:600 17px Kanit;display:block;color:#0d486a}.op-popup small{display:block;color:#5d7989;margin-top:4px}.op-popup button{padding:7px 10px;background:#0e7898;border:0;border-radius:8px;color:#fff;font-weight:700;margin-top:10px}.map-tooltip{background:#fff!important;border:1px solid #d0e4e9!important;border-radius:7px!important;color:#175775!important;font-weight:800!important;box-shadow:0 4px 18px #0d344235!important;font-size:10px!important}
.detail-dialog{border:1px solid #d6e5eb;border-radius:20px;width:min(92vw,540px);max-height:85dvh;overflow:auto;padding:24px;background:#fff;color:#12354a;box-shadow:0 25px 70px #071f3280}.detail-dialog::backdrop{background:rgba(4,23,41,.68);backdrop-filter:blur(4px)}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:13px}.dialog-head h2{font:600 24px Kanit;margin:6px 0 15px}.dialog-head button{width:39px;height:39px;border-radius:11px;border:1px solid #dce7ed;background:#f6fafb;font-size:25px;color:#416a7b}.detail-dialog dl{display:grid;grid-template-columns:120px 1fr;gap:11px;font-size:13px;padding:14px 0;border-top:1px solid #e0eaf0}.detail-dialog dt{color:#6d8a9a}.detail-dialog dd{margin:0;color:#153e55;font-weight:700;overflow-wrap:anywhere}.dialog-actions{display:flex;gap:8px;flex-wrap:wrap}.dialog-actions>*{border:1px solid #bcdfe9;padding:11px 15px;border-radius:10px;background:#eef9fc;color:#0e6f98;font-weight:700;font-size:12px}.dialog-actions a{background:#0e6f98;color:#fff}.dialog-source{font-size:11px;color:#7d98a4;margin-bottom:0;line-height:1.7}.toast{position:fixed;z-index:3000;left:50%;bottom:25px;transform:translateX(-50%);background:#082b3c;color:#fff;box-shadow:0 9px 30px #0320305d;padding:10px 16px;border-radius:12px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .25s ease}.toast.show{opacity:1}.loading-note{color:#7c9ba7;font-size:12px;padding:14px}
@media(max-width:1300px){.radar-layout{grid-template-columns:minmax(0,1fr) 260px}.radar-main{height:580px}.field-metric{padding:14px}.portal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.module-layout{grid-template-columns:minmax(0,1fr) 310px}.subnav-link{padding:10px 11px}}
@media(max-width:1040px){.page-wrap{padding:0 20px 28px}.radar-layout{grid-template-columns:1fr}.radar-main{height:560px}.radar-side{display:block}.radar-waypoints{grid-template-columns:repeat(5,minmax(0,1fr));padding:0 16px 14px}.point-quick{display:grid;justify-items:start;gap:8px}.point-quick b{min-height:34px}.metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}.module-layout{grid-template-columns:1fr}.module-panel{max-height:none}.radar-secondary{min-height:560px}.source-grid{grid-template-columns:1fr}.hero-status{display:none}}
@media(max-width:720px){.head-inner{min-height:75px;padding:12px 14px;gap:9px}.emblem{width:38px;height:38px}.head-back{width:37px;height:38px;border-radius:11px}.brandmark{gap:8px}.brandmark b{font-size:11px;letter-spacing:0}.brandmark small{font-size:9px}.head-right{gap:5px}.head-right .status-chip{display:none}.time-chip{font-size:11px;padding:6px 7px}.version{font-size:10px;padding:6px 7px}.page-wrap{padding:0 12px 24px}.subnav{margin:0 -12px;padding:11px 12px;overflow-x:auto;scrollbar-width:none}.subnav::-webkit-scrollbar{display:none}.subnav-link{flex:none;font-size:11px;padding:9px 10px}.subnav-link.gps-nav{margin-left:0}.intro{padding:23px 3px 14px}.intro h1{font-size:clamp(30px,7vw,39px)}.intro p{font-size:12px}.radar-main{height:440px}.radar-secondary{min-height:480px}.map-topline{padding:11px 12px;gap:10px}.map-tools{width:100%;justify-content:space-between}.map-tools button{font-size:10px;padding:8px 9px;flex:1}.map-topline b{font-size:9px}.map-topline small{font-size:9px}.map-float-label{top:16px;left:11px;max-width:200px;padding:9px 10px}.map-float-label strong{font-size:12px}.map-float-label small{font-size:8px}.map-north{right:14px}.map-inset-label{font-size:9px}.map-bottomline{gap:10px;padding:10px}.map-source{width:100%;margin:0}.orbit-one{width:125px}.orbit-two{width:235px}.orbit-three,.radar-sweep{width:350px;height:350px}.radar-waypoints{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.side-head{padding:16px}.point-quick b{min-height:0}.metrics-row{gap:9px;margin-top:12px}.field-metric{padding:11px;gap:10px}.field-metric-number{font-size:25px}.field-metric b{font-size:10px}.field-metric small{font-size:9px}.portal-grid{grid-template-columns:1fr}.portal-card{min-height:110px}.page-intro{padding:25px 3px 20px}.module-panel{padding:16px}.source-panel{padding:20px}.site-footer{flex-direction:column;gap:4px}.truth-note{font-size:10px}}
@media(max-width:360px){.head-back{display:none}.brandmark b{font-size:10px}.brandmark small{max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.map-tools button span{display:none}.time-chip{font-size:10px}.radar-main{height:410px}.radar-side{border-radius:17px}.radar-waypoints{grid-template-columns:1fr}.point-quick{display:flex}.metrics-row{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.radar-screen:fullscreen,.radar-screen.pseudo-fullscreen{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;z-index:2200!important;max-height:none!important;border-radius:0!important}.radar-screen:fullscreen .map-viewport,.radar-screen.pseudo-fullscreen .map-viewport{flex:1}.radar-screen:fullscreen .radar-orbit,.radar-screen.pseudo-fullscreen .radar-orbit{max-width:none}