/* === GIAO_THONG START (Legend & Button) === */
.legend {
  position: absolute; bottom: 20px; right: 12px;
  background: rgba(255,255,255,.9); padding: 10px 12px; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15); font-size: 13px; line-height: 1.5;
  z-index: 650;
}
.legend h4 { margin: 0 0 6px; font-size: 13px; }
.legend .swatch {
  display: inline-block; width: 26px; height: 3px; margin-right: 8px; vertical-align: middle;
}
.swatch-national { background: #d73027; }
.swatch-provincial { background: #fc8d59; }
.swatch-district { background: #fee08b; }
.swatch-local { background: #4575b4; }
.swatch-tracks { background: #888; }

.map-btn {
  position: absolute; top: 12px; right: 12px; z-index: 660;
  background: #fff; border: 1px solid #ddd; padding: 6px 10px; border-radius: 4px; cursor: pointer;
}
.map-btn:hover { background: #f5f5f5; }
.toolbox .transport-group label{display:block;margin:4px 0}
.toolbox details summary{cursor:pointer;font-weight:600}
.transport-quick button{margin:2px 4px}
/* === Chú giải đường giao thông === */
.road-legend {
    background: rgba(255,255,255,0.95);
    border-radius: 6px;
    padding: 10px 14px;
    line-height: 1.6em;
    font-size: 13px;
    color: #222;    
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.road-legend h4 {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.road-legend div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.road-legend span {
  display: inline-block;
  width: 20px;
  height: 10px;
  border: 1px solid #555;
  border-radius: 2px;
}
/* === Giao thông Popup === */
#transportPopup {
  position: absolute;
  top: 120px;
  right: 24px;
  width: 230px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  z-index: 9999;
  font-family: sans-serif;
  user-select: none;
}
#transportPopup .popup-header {
  background: #c62828;
  color: white;
  padding: 6px 10px;
  cursor: move;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
  font-weight: bold;
}
#transportPopup .popup-content {
  padding: 10px;
  font-size: 13px;
  color: #222;
}
#transportPopup button {
  cursor: pointer;
  border: none;
  background: #efefef;
  border-radius: 4px;
  margin: 2px 3px;
  padding: 3px 8px;
  transition: 0.2s;
}
#transportPopup button:hover {
  background: #ddd;
}
#transportPopup hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 8px 0;
}
#transportPopup .checkbox-group label {
  display: block;
  margin: 2px 0;
}

/* Legend bên trong popup */
#transportPopup .road-legend {
  margin-top: 6px;
}
#closeTransportPopup {
  background: none;
  border: none;
  color: white;
  font-size: 15px;
  cursor: pointer;
}
/* Đảm bảo trật tự chồng lớp */
.leaflet-pane.leaflet-polygons-pane   { z-index: 420 !important; }
.leaflet-pane.leaflet-roads-pane      { z-index: 610 !important; }
.leaflet-pane.leaflet-labels-pane     { z-index: 650 !important; }
/* Nhãn không chặn click vào roads */
.label-xa { pointer-events: none; }

/* === GIAO_THONG END === */