:root{--map-shadow:0 10px 34px rgba(18,48,99,.09)}
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}
.map-page{background:#f8fafd}.map-hero{padding:24px 0 36px;background:linear-gradient(135deg,#f2f6ff,#fbfdff);border-bottom:1px solid var(--line)}.map-hero-row{display:flex;align-items:center;justify-content:space-between}.map-hero-row>div>span{font-size:11px;font-weight:700;color:var(--blue2);letter-spacing:.1em;text-transform:uppercase}.map-hero h1{font-size:clamp(27px,3vw,42px);font-weight:800;color:var(--blue);margin:8px 0}.map-hero p{color:var(--muted);margin:0}.map-hero-icon{font-size:88px;color:#d9e6fa;margin-right:6%}.map-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}.map-stat-row article{display:flex;align-items:center;gap:13px;padding:15px 18px;border:1px solid var(--line);border-radius:10px;background:#fff;box-shadow:0 5px 20px rgba(18,48,99,.05)}.map-stat-row article>i{width:42px;height:42px;border-radius:9px;display:grid;place-items:center;background:#edf4ff;color:var(--blue);font-size:19px}.map-stat-row article div{display:grid}.map-stat-row strong{font-size:17px;color:#273650}.map-stat-row span{font-size:9px;color:#8390a4}.map-workspace{height:720px;display:grid;grid-template-columns:355px 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--map-shadow);position:relative}.map-sidebar{display:flex;flex-direction:column;border-right:1px solid var(--line);background:#fff;z-index:501}.map-search-box{height:49px;display:flex;align-items:center;margin:14px;border:1px solid var(--line);border-radius:8px}.map-search-box>i{margin-left:12px;color:#8792a6}.map-search-box input{min-width:0;flex:1;border:0;outline:0;padding:0 10px;font-size:11px}.map-locate{width:39px;height:39px;border:0;border-left:1px solid var(--line);background:#fff;color:var(--blue)}.map-filter-row{padding:0 14px 13px;border-bottom:1px solid var(--line)}.map-filter-row select{width:100%;height:40px;border:1px solid var(--line);border-radius:7px;background:#fff;padding:0 9px;color:#536078;font-size:10px}.unit-type-filter{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px}.unit-type-filter button{height:34px;border:1px solid var(--line);border-radius:6px;background:#fff;color:#657187;font-size:9px}.unit-type-filter button.active{background:var(--blue);border-color:var(--blue);color:#fff}.map-list-head{display:flex;justify-content:space-between;align-items:center;padding:13px 14px}.map-list-head h2{font-size:12px;color:var(--blue);font-weight:750;text-transform:uppercase;margin:0}.map-list-head span{font-size:8px;color:#8994a7}.commune-list{flex:1;overflow-y:auto;padding:0 8px 12px}.commune-list-item{width:100%;display:grid;grid-template-columns:29px 1fr 17px;gap:8px;align-items:center;text-align:left;padding:10px 7px;border:0;border-bottom:1px solid var(--line);background:#fff}.commune-list-item:hover{background:#f1f6ff}.commune-list-item>i:first-child{font-size:20px}.commune-list-item>i.ward{color:#1769d4}.commune-list-item>i.commune{color:#15966b}.commune-list-item span{display:grid;gap:3px}.commune-list-item strong{font-size:10px;color:#344158}.commune-list-item small{font-size:8px;color:#8994a7}.commune-list-item>i:last-child{font-size:10px;color:#9ca5b5}.map-list-empty{text-align:center;padding:30px;color:#8390a4}.map-list-empty i{font-size:32px}.map-list-empty p{font-size:9px}.map-canvas-wrap{position:relative;min-width:0}.map-canvas-wrap #canthoMap{width:100%;height:100%;background:#e8edf2}.map-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#f4f7fa;z-index:500;font-size:9px;color:#718096}.map-legend{position:absolute;left:14px;bottom:14px;z-index:500;display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:7px;background:#fffffff2;box-shadow:0 4px 14px #273d6530;font-size:8px}.map-legend strong{color:#354259}.map-legend span{display:flex;align-items:center;gap:5px}.legend-dot{width:8px;height:8px;border-radius:50%}.legend-dot.ward{background:#1769d4}.legend-dot.commune{background:#15966b}.custom-map-marker{background:none;border:0}.custom-map-marker span{width:32px;height:32px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;color:#fff;border:2px solid #fff;box-shadow:0 3px 9px #18355e55}.custom-map-marker span.ward{background:#1769d4}.custom-map-marker span.commune{background:#15966b}.custom-map-marker i{transform:rotate(45deg);font-size:14px}.map-popup{text-align:center;min-width:150px}.map-popup>span{font-size:7px;color:var(--blue);font-weight:750;text-transform:uppercase}.map-popup h3{font-family:'Be Vietnam Pro';font-size:12px;color:#29364d;margin:4px 0}.map-popup p{font-size:8px;color:#7d8799;margin:0 0 8px}.map-popup button{border:0;border-radius:5px;background:var(--blue);color:#fff;padding:6px 9px;font-size:8px}.leaflet-popup-content-wrapper{border-radius:9px}.leaflet-control-attribution{font-size:7px}.local-info-panel{position:absolute;right:18px;top:98px;width:340px;z-index:600;padding:20px;border-radius:11px;background:#fff;box-shadow:0 15px 45px rgba(17,42,83,.23);transform:translateX(calc(100% + 40px));opacity:0;visibility:hidden;transition:.35s}.local-info-panel.show{transform:none;opacity:1;visibility:visible}.local-panel-close{position:absolute;right:10px;top:10px;width:30px;height:30px;border:0;border-radius:50%;background:#f1f4f8;color:#617087}.local-panel-heading{display:grid;grid-template-columns:48px 1fr;gap:12px;align-items:center;padding-right:25px}.local-panel-icon{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:#edf4ff;color:var(--blue);font-size:21px}.local-panel-type{font-size:8px;color:var(--blue2);font-weight:700;text-transform:uppercase}.local-panel-name{font-size:18px;color:#2a3750;font-weight:800;margin:2px 0}.local-panel-district{font-size:8px;color:#8993a6;margin:0}.local-panel-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0;border:1px solid var(--line);border-radius:8px}.local-panel-stats div{display:grid;text-align:center;padding:12px 4px;border-right:1px solid var(--line)}.local-panel-stats div:last-child{border:0}.local-panel-stats small{font-size:7px;color:#8d97a8}.local-panel-stats strong{font-size:11px;color:#354259}.local-panel-contact{padding-bottom:12px;border-bottom:1px solid var(--line)}.local-panel-contact p{display:grid;grid-template-columns:19px 1fr;gap:5px;font-size:9px;color:#5b677c;margin:8px 0}.local-panel-contact i{color:var(--blue)}.local-panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:13px}.local-panel-actions a,.local-panel-actions button{height:37px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;gap:5px;font-size:8px}.local-panel-actions a{background:var(--blue);color:#fff}.map-sidebar-toggle{display:none}
@media(max-width:1199px){.map-workspace{grid-template-columns:320px 1fr}.map-stat-row article{padding:13px}.local-info-panel{width:310px}}
@media(max-width:767px){.map-hero{padding:16px 0 25px}.map-hero-icon{display:none}.map-hero h1{font-size:24px}.map-hero p{font-size:11px}.map-content.section{padding-top:18px}.map-stat-row{grid-template-columns:1fr 1fr;gap:8px}.map-stat-row article{padding:10px}.map-stat-row article>i{width:35px;height:35px}.map-stat-row strong{font-size:14px}.map-workspace{height:650px;display:block}.map-sidebar{position:absolute;left:0;top:0;bottom:0;width:min(330px,88%);transform:translateX(-105%);transition:.3s;box-shadow:8px 0 25px #17345b3d}.map-sidebar.mobile-open{transform:none}.map-canvas-wrap{height:100%}.map-sidebar-toggle{display:flex;align-items:center;gap:6px;position:absolute;left:12px;top:12px;z-index:500;height:38px;border:0;border-radius:7px;background:#fff;color:var(--blue);box-shadow:0 4px 15px #17345b30;padding:0 11px;font-size:9px}.map-legend{left:12px;bottom:12px}.local-info-panel{position:fixed;left:10px;right:10px;top:auto;bottom:10px;width:auto;transform:translateY(calc(100% + 30px));z-index:1001}.local-info-panel.show{transform:none}.local-panel-actions{grid-template-columns:1fr 1fr}}
@media print{header,.smart-search,.footer,.backtop,.video-modal,.map-hero,.map-sidebar,.map-sidebar-toggle,.local-info-panel{display:none!important}.map-content{padding:0}.map-stat-row{grid-template-columns:repeat(4,1fr)}.map-workspace{display:block;height:650px}.map-canvas-wrap{height:100%}}

/* Keep hidden panels inside the viewport so their entrance animation cannot
   increase the document width and create a horizontal page scrollbar. */
.local-info-panel{
  max-width:calc(100% - 36px);
  transform:translateX(-24px);
  pointer-events:none;
  transition:transform .35s,opacity .35s,visibility .35s
}
.local-info-panel.show{pointer-events:auto}
@media(max-width:767px){
  .local-info-panel{
    max-width:none;
    transform:translateY(24px)
  }
}