.map-page{width:100%;height:calc(100vh - 64px);min-height:480px;position:relative}#map-container{position:absolute;inset:0}.mapboxgl-popup-content{border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-lg);font-family:var(--font-sans);max-width:320px}.mapboxgl-popup-close-button{color:var(--text-muted);padding:var(--space-1) var(--space-2);font-size:1.25rem}.station-popup h3{margin:0 0 var(--space-2);color:var(--text-primary);font-size:1rem;font-weight:600}.station-popup .line-badges{margin-bottom:var(--space-2);flex-wrap:wrap;gap:4px;display:flex}.station-popup .line-badge{color:#fff;text-shadow:0 1px 2px #00000040;border-radius:999px;align-items:center;padding:2px 8px;font-size:.75rem;font-weight:600;line-height:1.4;display:inline-flex}.station-popup .meta{gap:var(--space-2);color:var(--text-muted);margin-bottom:var(--space-2);flex-wrap:wrap;font-size:.8125rem;display:flex}.station-popup .meta .status{border-radius:4px;padding:1px 6px;font-weight:500}.station-popup .meta .status.open{background:var(--brand-xanh-tint);color:var(--brand-xanh)}.station-popup .meta .status.under-construction{background:var(--brand-vang-tint);color:#ca8a04}.station-popup .meta .status.planned{background:var(--bg-subtle);color:var(--text-muted)}.station-popup .bds-stats{padding-top:var(--space-2);border-top:1px solid var(--border);margin-top:var(--space-2);color:var(--text-primary);align-items:center;gap:var(--space-2);font-size:.875rem;display:flex}.station-popup .bds-stats .count{color:var(--brand-xanh);font-weight:700}.station-popup .bds-stats .price{color:var(--text-muted);font-size:.8125rem}.station-popup .cta{background:var(--brand-vang);color:var(--text-primary);text-align:center;padding:var(--space-2);border-radius:var(--radius);margin-top:var(--space-3);font-size:.875rem;font-weight:600;text-decoration:none;display:block}.station-popup .cta:hover{background:#eab308;text-decoration:none}.map-overlay{z-index:10;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-2);backdrop-filter:blur(8px);background:#fffffff7;position:absolute}#search-bar{top:var(--space-3);width:min(360px, calc(100vw - 2 * var(--space-3)));left:50%;transform:translate(-50%)}#search-bar input{border:1px solid var(--border);border-radius:var(--radius);width:100%;padding:var(--space-2) var(--space-3);font:inherit;outline:none;font-size:.9375rem;transition:border-color .15s}#search-bar input:focus{border-color:var(--brand-xanh)}#search-results{margin:var(--space-2) 0 0;max-height:240px;padding:0;list-style:none;overflow-y:auto}#search-results li{padding:var(--space-2) var(--space-3);border-radius:var(--radius);cursor:pointer;align-items:center;gap:var(--space-2);font-size:.875rem;display:flex}#search-results li:hover{background:var(--bg-subtle)}#search-results li .kind{text-transform:uppercase;color:var(--text-muted);background:var(--bg-subtle);border-radius:4px;padding:1px 6px;font-size:.6875rem}#search-results li .kind.district{background:var(--brand-vang-tint);color:#ca8a04}#line-toggle{top:80px;left:var(--space-3);flex-direction:column;gap:4px;max-height:calc(100vh - 200px);display:flex;overflow-y:auto}.line-pill{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2);border-radius:var(--radius);cursor:pointer;user-select:none;white-space:nowrap;background:0 0;border:1px solid #0000;font-size:.8125rem;display:flex}.line-pill:hover{background:var(--bg-subtle)}.line-pill.off{opacity:.4}.line-pill .dot{border-radius:50%;flex-shrink:0;width:10px;height:10px;box-shadow:0 0 0 1px #00000026}#map-loading{background:var(--bg-subtle);color:var(--text-muted);z-index:1;justify-content:center;align-items:center;font-size:.9375rem;display:flex;position:absolute;inset:0}#map-container.ready~#map-loading{display:none}.map-error{justify-content:center;align-items:center;gap:var(--space-3);background:var(--bg-subtle);z-index:2;text-align:center;padding:var(--space-6);flex-direction:column;display:flex;position:absolute;inset:0}.map-error .title{color:var(--text-primary);font-weight:600}.map-error .msg{color:var(--text-muted);max-width:480px}@media (width<=640px){#search-bar{top:var(--space-2)}#line-toggle{max-height:40vh;top:64px}.mapboxgl-ctrl-top-right{top:var(--space-2);right:var(--space-2)}}