:root {
  --bg: #0b1220;
  --panel: #111827;
  --line: #1f2937;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --acc: #38bdf8;
  --btn: #028afa;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.45 "Segoe UI", sans-serif; }
.bar {
  /* Cao hon pane Leaflet (tile/popup ~200–700) de khong bi OSM che */
  position: absolute; z-index: 1100; inset: 0 0 auto 0;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgba(15, 23, 42, 0.94);
  border-bottom: 1px solid var(--line);
}
.brand { font-weight: 700; color: var(--acc); white-space: nowrap; }
.search { display: flex; gap: 6px; flex: 1; min-width: 0; }
.search input {
  flex: 1; min-width: 0;
  border: 1px solid var(--line); border-radius: 8px;
  background: #0b1220; color: var(--text);
  padding: 8px 10px; font: 13px/1.3 inherit;
}
.search button, .locate {
  border: 0; border-radius: 8px; padding: 8px 12px;
  background: var(--btn); color: #fff;
  font: 600 13px inherit; cursor: pointer; white-space: nowrap;
}
.search button:hover, .locate:hover { background: #38bdf8; color: #0f172a; }
.locate.is-active { background: #f59e0b; color: #0f172a; }
/* Tao stacking context thap: pane Leaflet khong thoat ra che UI */
#map { position: absolute; inset: 52px 0 0 0; z-index: 1; }
.results {
  position: absolute; z-index: 1200; left: 12px; top: 62px;
  width: min(420px, calc(100vw - 24px));
  max-height: 42vh; overflow: auto;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
}
.results button {
  display: block; width: 100%; text-align: left;
  border: 0; border-bottom: 1px solid var(--line);
  background: transparent; color: var(--text);
  padding: 10px 12px; cursor: pointer; font: 13px/1.35 inherit;
}
.results button:hover { background: #1e293b; }
.results button:last-child { border-bottom: 0; }
.results .meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
.coord-pick-card {
  position: absolute; z-index: 1000; left: 12px; bottom: 12px;
  width: min(340px, calc(100vw - 24px));
  padding: 10px 12px;
  background: rgba(12, 20, 32, 0.94);
  border: 1px solid rgba(61, 156, 240, 0.4);
  border-radius: 10px;
  color: #e8f1fa;
}
.coord-pick-card[hidden] { display: none !important; }
.coord-pick-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 13px; font-weight: 650; margin-bottom: 8px;
}
.close-btn {
  border: 0; border-radius: 6px; width: 28px; height: 28px;
  background: #1e293b; color: #e5e7eb; cursor: pointer; font-size: 16px;
}
.coord-pick-dl { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.coord-pick-dl > div { display: grid; grid-template-columns: 72px 1fr; gap: 8px; align-items: start; }
.coord-pick-dl dt { margin: 0; font-size: 12px; color: #9eb0c2; font-weight: 600; }
.coord-pick-dl dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; word-break: break-word; }
.coord-pick-copy {
  margin-top: 10px; width: 100%;
  border: 1px solid rgba(61, 156, 240, 0.45);
  border-radius: 8px; padding: 6px 10px;
  background: rgba(18, 24, 32, 0.95); color: #e8f1fa;
  font: 600 12px inherit; cursor: pointer;
}
.coord-pick-copy:hover { background: #2f7fc4; border-color: #2f7fc4; }
.hint {
  position: absolute; z-index: 900; right: 12px; bottom: 12px;
  max-width: min(360px, calc(100vw - 24px));
  padding: 8px 10px; border-radius: 8px;
  background: rgba(15, 23, 42, 0.88); color: var(--muted);
  font-size: 12px; pointer-events: none;
}
.hint b { color: var(--acc); }