/* Bản đồ động – dùng chung. Mỗi trang đổi màu bằng biến: --map-accent, --map-card, --map-ink, --map-ink2, --map-line */
.mmap{--map-dir:#8C5443; --map-accent:#2F4A3A; --map-card:#FFFFFF; --map-ink:#1C2A21; --map-ink2:#5A655E; --map-line:rgba(0,0,0,.12); --map-gold:#DDB983;
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--map-line); background:var(--map-card); isolation:isolate}
.mmap-view{position:relative; height:320px; overflow:hidden; background:#efe9de}
.mmap-img,.mmap-svg{position:absolute; inset:0; width:100%; height:100%; display:block; max-width:none}
.mmap-img{object-fit:cover; object-position:50% 50%; transform:scale(1.08); transition:transform 2.4s cubic-bezier(.2,.7,.2,1)}
.mmap.in .mmap-img{transform:scale(1)}
.mmap-view::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 40%, rgba(20,30,24,.25) 100%)}
.mmap-svg{z-index:1; pointer-events:none}
.mmap-svg .r-bg{fill:none; stroke:#fff; stroke-width:14; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.mmap-svg .r{fill:none; stroke:var(--map-accent); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:420; stroke-dashoffset:420}
.mmap.in .r{animation:mmap-draw 1.8s .5s ease-out forwards}
.mmap-svg .walker{fill:var(--map-gold); stroke:#fff; stroke-width:3; opacity:0}
.mmap.in .walker{opacity:1; transition:opacity .3s 2.3s}
.mmap-svg .st{fill:#fff; stroke:var(--map-accent); stroke-width:4}
.mmap-svg .lm rect{fill:var(--map-accent); opacity:.94}
.mmap-svg .lm text{fill:#fff; font:600 15px system-ui,sans-serif}
.mmap-svg .lm-long{display:none}
@keyframes mmap-draw{to{stroke-dashoffset:0}}
.mmap-svg .dir{fill:none; stroke:var(--map-dir); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:2 9; opacity:0}
.mmap.in .dir{opacity:.95; transition:opacity .5s 1.4s}
.mmap-svg .lm-dir rect{fill:var(--map-dir)}
.mmap-svg .lm-dir,.mmap-svg .lm-lc{opacity:0}
.mmap.in .lm-dir,.mmap.in .lm-lc{opacity:1; transition:opacity .5s 1.5s}
.mmap-svg .lm-lc rect{fill:#fff; stroke:#1F5FAD; stroke-width:2; opacity:1}
.mmap-svg .lm-lc text{fill:#1F5FAD}
.mmap-svg .lc-dot{fill:#1F5FAD; stroke:#fff; stroke-width:3}
.mmap-svg .lc-line{stroke:#1F5FAD; stroke-width:2}
.mmap-pin{position:absolute; left:50%; top:50%; z-index:2; width:0; height:0}
.mmap-dot{position:absolute; left:-21px; top:-50px; width:42px; height:42px; border-radius:50% 50% 50% 0; background:var(--map-accent); border:3px solid #fff; box-shadow:0 10px 22px -8px rgba(0,0,0,.6); opacity:0; transform:translateY(-40px) rotate(-45deg)}
.mmap-dot::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:var(--map-gold)}
.mmap.in .mmap-dot{animation:mmap-drop .7s .2s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes mmap-drop{to{opacity:1; transform:translateY(0) rotate(-45deg)}}
.mmap-pulse{position:absolute; left:-9px; top:-5px; width:18px; height:10px; border-radius:50%; background:rgba(0,0,0,.25)}
.mmap-pulse::before,.mmap-pulse::after{content:""; position:absolute; left:50%; top:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:2px solid var(--map-accent); opacity:0}
.mmap.in .mmap-pulse::before{animation:mmap-ring 2.2s 1.2s ease-out infinite}
.mmap.in .mmap-pulse::after{animation:mmap-ring 2.2s 2.3s ease-out infinite}
@keyframes mmap-ring{0%{transform:scale(.6); opacity:.9} 100%{transform:scale(5.5); opacity:0}}
.mmap-card{position:absolute; left:0; bottom:66px; translate:-50% 0; width:max-content; max-width:min(330px, calc(100vw - 56px)); display:flex; align-items:center; background:#fff; color:#1C2A21; border-radius:12px; padding:8px 12px; box-shadow:0 14px 30px -14px rgba(0,0,0,.6); opacity:0; transform:translateY(8px); transition:opacity .4s .9s, transform .4s .9s; font-size:.78rem; line-height:1.35}
.mmap-card b{display:block; font-size:.95rem}
.mmap.in .mmap-card{opacity:1; transform:none}
.mmap-photo{width:0; height:72px; border-radius:8px; object-fit:cover; opacity:0; margin-left:-12px; transform:scale(.6); transition:width .45s 2.4s, margin .45s 2.4s, opacity .35s 2.5s, transform .45s 2.4s cubic-bezier(.3,1.5,.5,1)}
.mmap.in .mmap-photo{width:96px; margin:0 12px 0 -4px; opacity:1; transform:none}
.mmap-attr{position:absolute; right:8px; top:6px; z-index:3; font-size:.62rem; color:rgba(28,42,33,.65); background:rgba(255,255,255,.75); padding:1px 6px; border-radius:4px}
.mmap-bar{position:relative; z-index:3; padding:14px; display:grid; gap:12px; background:var(--map-card); color:var(--map-ink)}
.mmap-bar p{margin:0; font-size:.88rem; line-height:1.55; color:var(--map-ink2)}
.mmap-bar p b{color:var(--map-ink); font-weight:600}
.mmap-btns{display:grid; grid-template-columns:1fr 1fr; gap:8px}
@media (min-width:1000px){
  .mmap-bar{position:absolute; left:16px; right:auto; bottom:16px; width:360px; padding:16px; border-radius:14px; box-shadow:0 18px 36px -18px rgba(0,0,0,.6)}
}
@media (min-width:760px){
  .mmap-view{height:420px}
  .mmap-card{left:auto; right:30px; bottom:22px; translate:none}
  .mmap-svg .lm-long{display:inline}
  .mmap-svg .lm-short{display:none}
}
@media (prefers-reduced-motion:reduce){
  .mmap-img{transform:none; transition:none}
  .mmap-photo{transition:none}
  .mmap .r{stroke-dashoffset:0; animation:none}
  .mmap-dot{opacity:1; transform:rotate(-45deg); animation:none!important}
  .mmap-card{opacity:1; transform:none; transition:none}
  .mmap .mmap-pulse::before,.mmap .mmap-pulse::after{animation:none}
}