/* Bản đồ gọn nhẹ (shared/map.js) */
.mmap { position: relative; overflow: hidden; background: #e8ecf2; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 14px; isolation: isolate; }
.mmap:active { cursor: grabbing; }
.mm-tiles, .mm-pins { position: absolute; inset: 0; }
.mm-tile { position: absolute; left: 0; top: 0; width: 256px; height: 256px; max-width: none; pointer-events: none; }
.mm-tile.miss { visibility: hidden; }
.mm-svg { position: absolute; inset: 0; pointer-events: none; }
.mm-pin { position: absolute; left: 0; top: 0; --pin: #1f6fe0; width: 30px; height: 30px; margin: -30px 0 0 -15px; border: 0; padding: 0; background: none; cursor: pointer; font: inherit; }
.mm-pin::before { content: ""; position: absolute; inset: 0; background: var(--pin); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgb(0 0 0 / .35); border: 2px solid #fff; }
.mm-pin span { position: relative; display: grid; place-items: center; height: 26px; color: #fff; font-weight: 800; font-size: 12px; }
.mm-pin.car, .mm-pin.me, .mm-pin.depot, .mm-pin.home { width: auto; height: auto; margin: 0; transform-origin: 0 0; }
.mm-pin.car::before, .mm-pin.me::before, .mm-pin.depot::before, .mm-pin.home::before { display: none; }
.mm-pin.car span { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); height: auto; min-width: 22px; padding: 4px 8px 4px 24px; border-radius: 99px; background: var(--pin); border: 2px solid #fff; box-shadow: 0 3px 10px rgb(0 0 0 / .35); white-space: nowrap; font-size: 12px; }
.mm-pin.car span::before { content: "🚚"; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); font-size: 13px; }
.mm-pin.car span:empty { padding: 4px 6px 4px 22px; }
.mm-pin.me span { position: absolute; transform: translate(-50%, -50%); width: 18px; height: 18px; border-radius: 50%; background: #1f6fe0; border: 3px solid #fff; box-shadow: 0 0 0 8px rgb(31 111 224 / .22); }
.mm-pin.depot span, .mm-pin.home span { position: absolute; transform: translate(-50%, -100%); width: 34px; height: 34px; border-radius: 10px; background: #0b2a5e; border: 2px solid #fff; box-shadow: 0 3px 10px rgb(0 0 0 / .35); font-size: 17px; }
.mm-pin.depot span::before { content: "🏭"; }
.mm-pin.home span { background: #d6232a; }
.mm-pin.home span::before { content: "🏠"; }
.mm-ctl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 8px rgb(0 0 0 / .2); z-index: 2; }
.mm-ctl button { width: 38px; height: 38px; border: 0; background: #fff; color: #17202b; font-size: 20px; font-weight: 700; cursor: pointer; }
.mm-ctl button + button { border-top: 1px solid #dde1ea; }
.mm-att { position: absolute; right: 0; bottom: 0; background: rgb(255 255 255 / .8); color: #333; font-size: 10.5px; padding: 1px 6px; border-top-left-radius: 6px; z-index: 2; }
.map-box { height: 340px; width: 100%; }
.map-box.tall { height: min(70vh, 560px); }
.map-box.xl { height: min(72vh, 640px); }