:root{
  --primary:#1A73E8;
  --primary-2:#7C3AED;
  --bgGlass:rgba(255,255,255,0.96);
  --darkGlass:rgba(28,28,30,0.9);
  --shadow:0 2px 10px rgba(0,0,0,0.15);
  --radius-lg:40px;
}
html,body,#map{height:100vh;width:100%;margin:0;padding:0;overflow:hidden;font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif}
body{background:#f6f6f6}

/* ===== TOP BAR ===== */
.top-bar{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:clamp(260px,60%,640px);display:flex;align-items:center;gap:8px;
  background:var(--bgGlass);backdrop-filter:blur(20px);border-radius:var(--radius-lg);
  padding:6px 10px;box-shadow:var(--shadow);z-index:1001;
}
.gm-chip{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);font-size:18px;border:none;cursor:pointer}
.gm-search-wrap{flex:1;display:flex;align-items:center;gap:8px;background:#fff;border-radius:28px;padding:6px 10px;box-shadow:0 1px 4px rgba(0,0,0,.1);position:relative}
.suggest-list{
  position:absolute; top:100%; left:0; right:0;
  background:#fff; border-radius:12px; box-shadow:0 8px 18px rgba(0,0,0,.12);
  padding:6px 0; margin-top:6px; max-height:280px; overflow-y:auto;
  z-index:2000; display:none;
}
.suggest-list.show{ display:block; }
.suggest-item{ display:flex; gap:8px; align-items:center; padding:8px 10px; cursor:pointer; font-size:14px; }
.suggest-item:hover, .suggest-item.active{ background:#f5f7ff; }
.suggest-title{ font-weight:600; }
.suggest-sub{ font-size:12px; color:#666; }
.dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; background:#bbb; }

.gm-search{flex:1;border:none;outline:none;font-size:15px;background:transparent}
.gm-right{display:flex;gap:6px}

/* ===== Floating Buttons ===== */
.fab-wrap{position:absolute;left:12px;bottom:110px;display:flex;flex-direction:column;gap:12px;z-index:1000}
.fab{width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;color:#fff;background:var(--primary);
  box-shadow:0 6px 12px rgba(26,115,232,.35);font-size:22px;display:flex;align-items:center;justify-content:center}
.fab-secondary{width:46px;height:46px;background:#fff;color:#333;box-shadow:0 4px 10px rgba(0,0,0,.2);font-size:18px}

/* ===== Bottom Sheet ===== */
.bottom-sheet{
  position:absolute;left:0;right:0;bottom:0;background:var(--bgGlass);backdrop-filter:blur(20px);
  border-radius:16px 16px 0 0;box-shadow:0 -3px 10px rgba(0,0,0,.15);
  max-height:70vh;transform:translateY(100%);transition:transform .3s ease-out;z-index:1200;touch-action:none;
  padding-bottom:calc(env(safe-area-inset-bottom,0px) + 8px);
}
.bottom-sheet.active{transform:translateY(0)}
.sheet-handle{width:40px;height:4px;background:#ccc;border-radius:4px;margin:8px auto}
#propertyList{padding:4px 0 10px}

/* Cards */
.property-card{display:flex;gap:10px;align-items:center;margin:10px 16px;padding:8px 10px;background:#fff;border-radius:12px;box-shadow:0 1px 6px rgba(0,0,0,.1);cursor:pointer;transition:.2s}
.property-card:hover{transform:translateY(-2px)}
.thumb{width:70px;height:60px;border-radius:8px;object-fit:cover;background:#eee}
.prop-body{flex:1}
.property-name{font-weight:600;font-size:15px}
.property-details{font-size:12px;color:#666;margin-top:2px}
.property-price{font-size:13px;font-weight:700;color:#34C759;margin-top:2px}

/* ===== Filter Panel ===== */
.filter-panel {
  position: absolute; left: 10px; bottom: 90px; z-index: 1100;
  background: var(--bgGlass); backdrop-filter: blur(20px);
  border-radius: 16px; padding: 12px; box-shadow: var(--shadow); max-width: 320px;
  max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
  transform: translateY(20px); opacity: 0; pointer-events: none; transition: all 0.25s ease;
}
.filter-panel.active { transform: translateY(0); opacity: 1; pointer-events: auto; }
#filterOverlay { position: fixed; inset:0; background: rgba(0,0,0,0.25); backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s ease; display: none; z-index:1000; }
#filterOverlay.active { display:block; opacity:1; }

.filter-title{font-weight:700;margin-bottom:6px;font-size:15px}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin-bottom:8px}
.filter-chip{background:#f1f1f1;padding:8px 10px;border-radius:20px;font-size:13px;cursor:pointer;text-align:center;transition:.2s}
.filter-chip.active{background:var(--primary);color:#fff}

/* ===== Stats ===== */
.stats{
  position:absolute;bottom:10px;left:10px;z-index:1000;background:var(--bgGlass);backdrop-filter:blur(20px);
  border-radius:12px;padding:10px;box-shadow:var(--shadow);display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
.stat-item{text-align:center}
.stat-value{font-weight:800;font-size:16px;color:var(--primary)}
.stat-label{font-size:11px;color:#666}

/* ===== Sidebar ===== */
.side-menu { position: fixed; top: 0; left: 0; bottom: 0; width: 82vw; max-width: 340px; background:#fff; z-index:1300; box-shadow:2px 0 12px rgba(0,0,0,0.2); transform: translateX(-100%); transition: transform .28s ease; padding-top:64px; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
.side-menu.active { transform: translateX(0); }
.menu-header{position:absolute;top:0;left:0;right:0;height:56px;display:flex;align-items:center;gap:10px;padding:0 14px;background:#fff;border-bottom:1px solid #eee}
.menu-logo { height: 32px; width: 32px; border-radius: 8px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.menu-item{display:flex;align-items:center;gap:12px;padding:12px 16px;font-size:15px;color:#333;cursor:pointer}
.menu-item:hover{background:#f7f7f7}
.menu-item .icon{width:22px;text-align:center}
.menu-section-title { font-weight: 700; font-size: 14px; color: #777; padding: 10px 16px 4px; border-top: 1px solid #eee; }

/* ===== Toast ===== */
.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--darkGlass);color:#fff;padding:10px 16px;border-radius:12px;z-index:1500;font-size:13px;backdrop-filter:blur(20px);animation:fadeInOut 2s ease}
@keyframes fadeInOut{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.8)}10%,90%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media (max-width:768px){
  .top-bar{width:calc(100% - 16px);left:8px;transform:none}
}

/* Ảnh tròn cho marker công trình tâm linh */
.spiritual-marker{
  width:56px;height:56px;border-radius:50%;background-size:cover;background-position:center;border:2px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.3);cursor:pointer;position:relative;transition:transform .2s ease, box-shadow .2s ease;
}
.spiritual-marker:hover{ transform:scale(1.08); box-shadow:0 4px 10px rgba(0,0,0,.4); }
.spiritual-marker::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); width:12px;height:12px;border-radius:50%; background:#fff;border:2px solid var(--primary); box-shadow:0 1px 3px rgba(0,0,0,.2); }

/* ===== QR Modal ===== */
#qrOverlay{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.35); backdrop-filter:blur(2px); z-index:1600; }
#qrOverlay.active{ display:flex; }
.qr-card{ position:relative; width:min(92vw,360px); background:var(--bgGlass); border-radius:16px; padding:16px; box-shadow:var(--shadow); text-align:center; }
.qr-card h3{ margin:6px 0 10px; color:var(--primary); font-size:16px }
.qr-img{ width:240px; height:240px; object-fit:contain; background:#fff; border-radius:12px; box-shadow:0 2px 8px rgba(0,0,0,.15); margin:10px auto; }
.qr-actions{ display:flex; gap:8px; justify-content:center; margin-top:8px }
.qr-actions button, .qr-actions a{ border:none; border-radius:10px; padding:8px 12px; cursor:pointer; box-shadow:var(--shadow); background:#fff; color:#333; text-decoration:none; font-size:14px; }
.qr-close{ position:absolute; top:12px; right:12px; border:none; background:rgba(0,0,0,.5); color:#fff; border-radius:12px; padding:6px 10px; cursor:pointer; }
.qr-link{ font-size:12px; color:#666; word-break:break-all; margin-top:6px }

/* ==== PROFILE PANEL ==== */
#profileOverlay{
  position:fixed; inset:0; display:none; z-index:1399;
  background: transparent !important;
  backdrop-filter: none !important;
  transition: opacity .2s ease; opacity:0;
}
#profileOverlay.active{ display:block; opacity:1; }
.profile-panel{
  position:absolute; top:calc(var(--safe-top, 10px) + 62px); right:12px;
  width:min(92vw, 360px);
  background:#E8F0FE !important;
  color:#111827 !important;
  border:1px solid #CFE0FF !important;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  padding:12px; z-index:1400;
  transform: translateY(-6px); opacity:0; pointer-events:none;
  transition: transform .2s ease, opacity .2s ease;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
.profile-panel.active{ transform:translateY(0); opacity:1; pointer-events:auto; }
.profile-head{ display:flex; gap:10px; align-items:center; }
.profile-avatar{
  width:44px; height:44px; border-radius:50%;
  background:#E0E7FF center/cover no-repeat;
  flex:0 0 44px; display:grid; place-items:center;
  font-weight:800; color:#111827;
  border:1px solid #D6E4FF;
}
.profile-name{ font-weight:800; font-size:16px; color:#0b1220 }
.profile-branch{ font-size:12px; color:#374151 }
.profile-list{ margin-top:10px; border-top:1px dashed #D6E4FF; padding-top:10px }
.profile-row{ display:flex; gap:8px; align-items:flex-start; margin:6px 0; font-size:14px; color:#111827 }
.profile-row .k{ width:76px; flex:0 0 76px; color:#374151 }
.profile-row .v{ flex:1; word-break:break-word }
.profile-actions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap }
.btn-outline{ border:1px solid #CFE0FF; background:#fff; color:#111827; padding:10px 12px; border-radius:12px; cursor:pointer; }
.btn-danger{ border:0; color:#CFE0FF; cursor:pointer; background:linear-gradient(135deg, var(--primary), var(--primary-2)); padding:10px 12px; border-radius:12px; font-weight:700; box-shadow:0 10px 20px rgba(26,115,232,.28); }
@media (prefers-color-scheme: dark){
  .profile-panel{ background:#E8F0FE !important; color:#111827 !important; border-color:#CFE0FF !important; }
  .profile-avatar{ border-color:#CFE0FF !important; color:#111827; background:#E0E7FF; }
  .profile-row .k{ color:#374151 !important; }
  .btn-outline{ background:#fff; color:#111827; border-color:#CFE0FF }
}

/* Popup card + Carousel */
.popup-card{min-width:240px;max-width:300px}
.popup-title{font-size:16px;color:var(--primary);font-weight:700}
.popup-sub{font-size:12px;color:#666}
.popup-photo{border:1px solid #eaeaea;border-radius:14px;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.06);background:#fff;margin:10px 0}
.popup-photo img{display:block;width:100%;height:180px;object-fit:cover}
.carousel{position:relative;width:100%;overflow:hidden}
.carousel-track{display:flex;transition:transform .25s ease}
.carousel-item{min-width:100%}
.nav{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,.45);color:#fff;border-radius:10px;padding:6px 9px;cursor:pointer}
.nav.prev{left:8px}.nav.next{right:8px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:6px}
.dot{width:6px;height:6px;border-radius:50%;background:#d1d5db}
.dot.active{background:var(--primary)}

.maplibregl-popup { max-width: 320px !important; }
.maplibregl-popup-content{
  padding: 10px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.maplibregl-popup-tip{
  border-top-color:#fff !important;
  border-right-color:#fff !important;
  border-bottom-color:#fff !important;
  border-left-color:#fff !important;
}

/* Google Maps paste widget */
.gmpaste-wrap{ position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.25); backdrop-filter: blur(2px); }
.gmpaste-wrap.active{ display: flex; }
.gmpaste{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(14px);border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:8px 10px 8px 14px;min-width: min(92vw,760px);}
.gmpaste input{flex:1;border:none;outline:none;background:transparent;font:500 14px/20px system-ui,-apple-system,Segoe UI,Roboto,Arial;padding:8px 2px}
.gmpaste-btn{border:0;outline:0;border-radius:999px;padding:10px 14px;font-weight:600;font-size:14px;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.gmpaste-btn--go{background:#1A73E8;color:#fff}
.gmpaste-btn--copy{background:#F2F4F7}
.ocm-pin{width:18px;height:18px;border-radius:50%;background:#1A73E8;border:3px solid #fff;box-shadow:0 8px 18px rgba(26,115,232,.5)}