.dx-atlas-map{overflow:hidden;background:#f8f2e7}.dx-vector-map{position:relative;width:100%;height:100%;min-height:20rem;background:#f8f2e7}.dx-vector-map>svg{display:block;width:100%;height:100%;min-height:20rem;touch-action:pan-y}.dx-vector-map>svg:focus-visible{outline:2px solid #795438;outline-offset:-3px}.dx-vector-boundary{fill:#eadcc5;stroke:#a8845a;stroke-width:2}.dx-vector-water{fill:none;stroke:#7ea8a6;stroke-width:3}.dx-vector-water.area{fill:#b2ceca;stroke-width:1}.dx-vector-road{fill:none;stroke:#b6a88e;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}.dx-vector-road.major{stroke:#aa9069;stroke-width:3}.dx-vector-pin{cursor:pointer;outline:none}.dx-vector-pin circle{fill:#9b805d;stroke:#fffaf1;stroke-width:2}.dx-vector-pin.quoc-gia circle{fill:#944f39}.dx-vector-pin.thanh-pho circle{fill:#af8544}.dx-vector-pin text{fill:white;font:600 11px 'Be Vietnam Pro',sans-serif;pointer-events:none}.dx-vector-pin.selected circle,.dx-vector-pin:focus-visible circle{stroke:#39251c;stroke-width:4}.dx-vector-north{position:absolute;right:1rem;top:1rem;font-size:.75rem;letter-spacing:.1em;color:#795438}.dx-vector-controls{position:absolute;left:1rem;top:1rem;display:flex;align-items:center;gap:.25rem;background:#fffaf2;border:1px solid #d7c2a2;padding:.25rem}.dx-vector-controls button{min-width:2.5rem;min-height:2.5rem;border:0;background:none;color:#795438;font:inherit;font-size:.875rem;cursor:pointer}.dx-vector-controls button:disabled{opacity:.4;cursor:default}.dx-vector-controls output{font-size:.75rem;min-width:2.5rem;text-align:center}.dx-vector-credit{position:absolute;bottom:.5rem;left:.75rem;margin:0;font-size:.6875rem;line-height:1.5;color:#755d43;background:#fffaf2dd;padding:.25rem .5rem}.dx-vector-credit a{text-decoration:underline}.dx-atlas-card{z-index:3}.dx-pano-map-dialog>.dx-vector-map{height:19rem;min-height:0}.dx-map-source{font-size:.75rem;color:#795438;margin:0}.dx-map-source a{text-decoration:underline}

.dx-vector-legend{position:absolute;right:.75rem;bottom:.75rem;display:flex;gap:.6rem;font-size:.6875rem;color:#755d43;background:#fffaf2dd;padding:.25rem .5rem}.dx-vector-legend span{display:flex;align-items:center;gap:.25rem}.dx-vector-legend i{width:.5rem;height:.5rem;border-radius:50%;background:#9b805d}.dx-vector-legend .national{background:#944f39}.dx-vector-legend .city{background:#af8544}@media(max-width:600px){.dx-vector-legend{bottom:3.5rem;left:.75rem;right:auto}}

/* On phones controls and attribution occupy their own rows, never cover the map. */
@media(max-width:600px){
 .dx-atlas-grid .dx-atlas-map{height:auto;overflow:visible}
 .dx-vector-map{display:grid;grid-template-columns:1fr;min-height:0;height:auto;padding:.5rem;gap:.5rem}
 .dx-vector-map>svg{grid-row:2;min-height:0;height:clamp(19rem,90vw,28rem);border-block:1px solid #e2d2bc}
 .dx-vector-controls{position:static;grid-row:1;justify-self:start;margin-right:2.5rem;max-width:100%;gap:0;padding:.125rem}
 .dx-vector-controls button{min-width:2.75rem;min-height:2.75rem;padding:.25rem .5rem}
 .dx-vector-north{top:1.375rem;right:.75rem;font-size:.75rem}
 .dx-vector-legend{position:static;grid-row:3;flex-wrap:wrap;font-size:.75rem;gap:.375rem .75rem;padding:.125rem .25rem}
 .dx-vector-credit{position:static;grid-row:4;font-size:.75rem;padding:.125rem .25rem;overflow-wrap:anywhere}
 .dx-atlas-card{max-height:75%;overflow:auto;bottom:.5rem}
 .dx-pano-map-dialog>.dx-vector-map{height:auto;min-height:0}
 .dx-pano-map-dialog>.dx-vector-map>svg{height:16rem}
}

.dx-vector-hint{display:none}
@media(max-width:600px){
 .dx-vector-hint{grid-row:3;margin:0;padding:.125rem .25rem;font-size:.75rem;color:#795438}
 .dx-vector-overview .dx-vector-hint{display:block}
 .dx-vector-legend{grid-row:4}
 .dx-vector-credit{grid-row:5}
}