:root {
  --primary:#2563eb;
  --danger:#dc2626;
  --bg:#f4f6f9;
}
*{box-sizing:border-box}
body{
  font-family:'Segoe UI', Arial, sans-serif;
  margin:0; background:var(--bg);
}

/* Header */
.site-header{
  position:sticky; top:0; z-index:1001;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:linear-gradient(90deg,#dc2626,#fb923c);
  color:#fff; box-shadow:0 8px 24px rgba(0,0,0,.2);
}
.site-header .logo{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;font-size:22px;
  background:rgba(255,255,255,.15);
  box-shadow:inset 0 0 12px rgba(255,255,255,.25);
}
.site-header .title{line-height:1.15}
.site-header .title .big{
  font-weight:900;text-transform:uppercase;
  letter-spacing:.3px;font-size:18px
}
.site-header .right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;font-weight:700;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.25);
}
.badge a{color:#fff;text-decoration:none}

/* Map */
#map{width:100%;height:60vh}

/* Bottom sheet */
.sheet-backdrop{
  position:fixed;inset:0;z-index:1000;display:none;
  background:rgba(0,0,0,.35);
}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:1001;
  transform:translateY(100%); transition:transform .35s ease;
  background:#fff;border-radius:16px 16px 0 0;
  box-shadow:0 -20px 40px rgba(0,0,0,.18);
  max-height:75vh; overflow:auto;
}
.sheet.open{ transform:translateY(0) }
.sheet-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid #eee;
}
.sheet-title{font-weight:800}
.sheet-close{
  border:none;background:transparent;font-size:20px;cursor:pointer;line-height:1;
}
.container{padding:16px}
h2{margin:0 0 8px 0;text-align:center;color:#333}
form{display:flex;flex-direction:column;gap:12px;margin-top:6px}
form input, form textarea{
  padding:10px;border-radius:8px;border:1px solid #d1d5db;font-size:16px;width:100%;
  background:#fff;
}
form input[type="file"]{border:none;padding:0}
form button{
  padding:12px;border:none;border-radius:10px;background:var(--primary);
  color:#fff;font-size:17px;cursor:pointer;transition:.25s;font-weight:700;
}
form button:hover{filter:brightness(.95)}
#message{text-align:center;margin-top:6px;font-weight:bold;color:green}

/* Popup trên bản đồ */
.popup-box{font-size:14px;line-height:1.5;max-width:240px}
.popup-item{margin:5px 0;display:flex;align-items:center}
.popup-item span{margin-left:6px;font-weight:500}
.popup-box img{width:100%;border-radius:8px;margin-top:5px}

/* Bottom info cards */
.bottom-panel{position:relative;z-index:900;padding:16px 12px 28px}
.bottom-grid{
  max-width:1200px;margin:0 auto;display:grid;gap:12px;
  grid-template-columns:repeat(12,1fr);
}
.card{
  grid-column:span 12;background:#fff;border-radius:16px;padding:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
@media(min-width:640px){.card{grid-column:span 6}}
@media(min-width:1024px){.card{grid-column:span 3}}
.card h3{margin:0 0 8px;font-size:16px}
.card p,.card li{font-size:14px}
.quick-links{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.quick-links a{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 12px;border-radius:12px;background:#111827;color:#fff;
  text-decoration:none;font-weight:600;box-shadow:0 6px 18px rgba(17,24,39,.22);
}

/* Floating hint */
.hint{
  position:absolute;z-index:900;background:#fff;padding:8px 12px;border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.12);left:12px;top:12px;font-size:14px;font-weight:600;
}

/* 📍 Nút zoom về vị trí người dùng */
#myLocationBtn {
  position: absolute;
  bottom: 100px;
  right: 20px;
  z-index: 1000;
  background: white;
  color: #2563eb;
  border: none;
  padding: 10px 12px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#myLocationBtn:hover {
  background: #2563eb;
  color: white;
  transform: scale(1.05);
}
#myLocationBtn svg {
  width: 22px;
  height: 22px;
}

/* 📞 Floating contact buttons */
.contact-buttons {
  position: fixed;
  right: 20px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1100;
}
.contact-btn {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.25s ease;
}
.contact-btn img {
  width: 28px;
  height: 28px;
}
.contact-zalo { background: #0068ff; }
.contact-mess { background: #0084ff; }
.contact-btn:hover {
  transform: scale(1.1);
}

/* 📰 Tin thời tiết */
#rss-news {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: #f9fafb;
  border-radius: 10px;
  transition: background 0.3s;
}
.news-item:hover {
  background: #e0f2fe;
}
.news-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}
.news-item a {
  font-weight: 600;
  text-decoration: none;
  color: #1e3a8a;
  flex: 1;
}
.news-item.hot a {
  color: #dc2626;
  font-weight: 800;
}
.news-item.hot img {
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.6);
}

/* Responsive tin thời tiết */
.weather-card, 
.summary-card {
  grid-column: span 12;
}
@media (min-width: 768px) {
  .weather-card, 
  .summary-card {
    grid-column: span 6;
  }
}

/* Footer */
footer {
  text-align:center;
  padding:16px;
  background:#111827;
  color:white;
  margin-top:40px;
  font-size:14px;
}

/* Hiệu ứng ripple user marker */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4);
  }
  70% {
    box-shadow: 0 0 0 25px rgba(37, 99, 235, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
  }
}