/* Giao diện "map hub" cho các màn bản đồ public (_LayoutMap: map/sos|support|disaster|safe, need-support/map,
   map-garbage-station) — mô phỏng màn MapHub của app mobile (ExpoClientNew): bản đồ tràn màn, thanh công cụ nổi,
   cột nút tròn bên phải, bảng lọc (panel phải ≥768 / bottom sheet <768), card thông tin điểm, card chạy chữ đáy
   nền đặc theo loại bản đồ. Chỉ đổi TRÌNH BÀY: giữ mọi id/class mà JS dữ liệu dùng. Mọi rule scope dưới
   body.map-page. JS đi kèm: Content/js/map-modern.js (dropdown loại bản đồ, đo thanh, marquee, card điểm).
   Mốc: 576 / 768 / 992. */

body.map-page {
    /* theme web "Mẫu A" */
    --mt-surface: #f7faf9;
    --mt-surface-2: #edf3f2;
    --mt-border: #d8e2e0;
    --mt-text: #1b2733;
    --mt-muted: #64748b;
    --mt-accent: #0f766e;
    --mt-accent-hover: #0b5c55;
    --mt-accent-soft: #dcefec;
    --mt-accent-ink: #0b5c55;
    --mm-navy: #10245c;
    --mm-shadow: 0 1px 2px rgba(16, 36, 92, .08), 0 4px 14px rgba(16, 36, 92, .10);
    --mm-shadow-lg: 0 8px 28px rgba(16, 36, 92, .18);
    /* màu loại bản đồ — lấy đúng token mobile (DesignSystem.js UTILITY_COLORS / mapFooterSos / *Strong) */
    --mm-type: var(--mt-accent);
    --mm-type-soft: var(--mt-accent-soft);
    --mm-type-ink: var(--mt-accent-ink);
    --mm-footer-bg: var(--mt-accent);
    --mm-footer-ink: #fff;
    --mm-type-rgb: 15, 118, 110;  /* = --mm-type dạng r,g,b để pha alpha (viền/bóng/tint thanh nổi) */
    --mm-field-bg: #f1f6f5;       /* nền ô nhập trong thanh nổi: xám-xanh rất nhạt, trung tính cho mọi loại */
    /* hình học */
    --mm-gap: 8px;
    --mm-hit: 40px;
    --mm-fab: 40px;
    --mm-bar-b: 64px;             /* đáy thanh công cụ nổi (JS đo lại, đây là giá trị dự phòng) */
    --mm-col-top: calc(var(--mm-bar-b) + 12px);
    --mm-foot-b: 26px;            /* chừa logo + điều khoản của Google Maps ở mép dưới */
    --mm-foot-h: 40px;
    --mm-foot-top: calc(var(--mm-foot-b) + var(--mm-foot-h));
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mt-text);
    background: var(--mt-surface);
    overflow: hidden;
}

body.map-page.mm-t-sos,
body.map-page.mm-t-need {
    --mm-type: #fd293a;
    --mm-type-soft: #fed9dd;
    --mm-type-ink: #e01528;
    --mm-footer-bg: #d63341;
    --mm-footer-ink: #fff;
    --mm-type-rgb: 253, 41, 58;
}

body.map-page.mm-t-support,
body.map-page.mm-t-safe {
    --mm-type: #03b56b;
    --mm-type-soft: #cbf3e0;
    --mm-type-ink: #017040;
    --mm-footer-bg: #047857;      /* chữ trắng 5.48:1 (#03b56b chỉ 2.68:1) */
    --mm-footer-ink: #fff;
    --mm-type-rgb: 3, 181, 107;
}

body.map-page.mm-t-disaster {
    --mm-type: #fe8308;
    --mm-type-soft: #fef0c3;
    --mm-type-ink: #c25e00;
    --mm-footer-bg: #c2410c;      /* chữ trắng 5.18:1 (#fe8308 chỉ 2.48:1) */
    --mm-footer-ink: #fff;
    --mm-type-rgb: 254, 131, 8;
}

body.map-page.mm-t-garbage {
    --mm-foot-b: 8px;
}

/* ================= Khung: bản đồ tràn màn, mọi thứ nổi trên ================= */
body.map-page .map-area {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    padding: 0 !important;
    margin: 0;
    overflow: hidden;
    background: #e5ece9;
}

body.map-page .map-area > #map {
    position: absolute !important;
    inset: 0;
    width: auto !important;
    height: auto !important;
}

/* ================= Thanh công cụ nổi (top bar) ================= */
body.map-page .top-bar {
    position: absolute;
    top: var(--mm-gap);
    left: var(--mm-gap);
    right: auto;
    z-index: 20;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: auto;
    max-width: calc(100% - 2 * var(--mm-gap));
    height: auto;
    min-height: 0;
    padding: 6px;
    /* card nổi: nền trắng trung tính; màu loại bản đồ chỉ ở vạch trên + viền rất nhạt (dropdown là điểm nhấn) */
    background: #fff;
    border: 1px solid rgba(var(--mm-type-rgb), .18);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 36, 92, .08), 0 8px 24px -8px rgba(16, 36, 92, .24);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body.map-page .top-bar {
        background: rgba(255, 255, 255, .90);
        -webkit-backdrop-filter: blur(10px) saturate(1.4);
        backdrop-filter: blur(10px) saturate(1.4);
    }
}

/* đã bỏ vạch nhấn màu loại bản đồ ở mép trên card — màu loại chỉ còn ở dropdown + viền nhạt — 2026/09/28 ツー */

body.map-page .top-bar > * {
    flex: 0 0 auto;
    min-width: 0;
}

body.map-page .top-bar .home-icon-box,
body.map-page .top-bar .district-box {
    position: static !important;
    top: auto !important;
    height: auto;
    display: flex;
    align-items: center;
}

body.map-page #btn_home_page .icon-wrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: var(--mm-hit) !important;
    height: var(--mm-hit) !important;
    border-radius: 50% !important;
    border: 1px solid var(--mt-border) !important;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .15s ease;
}

body.map-page #btn_home_page .icon-wrapper:hover {
    box-shadow: 0 0 0 3px var(--mm-type-soft) !important;
}

body.map-page #btn_home_page .icon-wrapper img {
    height: 32px !important;
    width: 32px;
}

/* logo app mobile (icon.png) dạng tròn: viền ngoài xanh thương hiệu 2px + viền trắng mảnh bên trong, giữ 40px */
body.map-page #btn_home_page .icon-wrapper.mm-logo-link {
    box-sizing: border-box;
    padding: 3px; /* khe nhẹ giữa logo và viền, giống logo-ring.css — 2026/09/26 ツー */
    border: 2px solid var(--mm-type) !important; /* viền đậm theo màu loại bản đồ (SOS đỏ, hỗ trợ/an toàn xanh lá, nguy hiểm cam) — 2026/09/26 ツー */
    border-radius: 50% !important;
    background: #fff;
    box-shadow: 0 1px 4px rgba(16, 36, 92, .22) !important;
}

body.map-page #btn_home_page .icon-wrapper.mm-logo-link:hover,
body.map-page #btn_home_page .icon-wrapper.mm-logo-link:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--mm-type-rgb), .55), 0 2px 6px rgba(16, 36, 92, .22) !important;
}

body.map-page #btn_home_page .icon-wrapper.mm-logo-link picture {
    display: block;
    width: 100%;
    height: 100%;
}

body.map-page #btn_home_page .icon-wrapper.mm-logo-link img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
}

/* --- dropdown loại bản đồ (dựng bởi map-modern.js) --- */
body.map-page .mm-type {
    position: relative;
    width: 232px;
}

body.map-page .mm-type-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: var(--mm-hit);
    padding: 0 10px 0 8px;
    border: 1px solid var(--mm-type);
    border-radius: 10px;
    background: var(--mm-type-soft);
    color: var(--mm-navy);
    font: 700 14px/1.2 inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

body.map-page .mm-type-btn:hover {
    box-shadow: 0 0 0 3px rgba(var(--mm-type-rgb), .16);
}

body.map-page .mm-type-btn .mm-type-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.map-page .mm-type-btn .mm-chev {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--mm-navy);
    transition: transform .2s ease;
}

body.map-page .mm-type.is-open .mm-type-btn .mm-chev {
    transform: rotate(180deg);
}

body.map-page .mm-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid var(--c, var(--mm-type));
    background: #fff;
    color: var(--ci, var(--mm-type-ink));
    font-size: 13px;
    line-height: 1;
}

/* glyph bootstrap-icons có vertical-align:-.125em nên lệch lên ~1px trong vòng tròn → căn bằng flex (2026/09/26 ツー) */
body.map-page .mm-ico > i { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; line-height: 1; }
body.map-page .mm-ico > i::before { display: block; line-height: 1; vertical-align: 0 !important; }

body.map-page .mm-type-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: max(100%, 264px);
    max-width: calc(100vw - 2 * var(--mm-gap) - 12px);
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 12px;
    box-shadow: var(--mm-shadow-lg);
    display: none;
    transform-origin: top left;
}

body.map-page .mm-type.is-open .mm-type-menu {
    display: block;
    animation: mm-pop .16s ease-out;
}

body.map-page .mm-type-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: 8px;
    color: var(--mm-navy);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

body.map-page .mm-type-menu a:hover,
body.map-page .mm-type-menu a:focus-visible {
    background: var(--mt-surface-2);
}

body.map-page .mm-type-menu a[aria-current="page"] {
    background: var(--s, var(--mm-type-soft));
}

body.map-page .mm-type-menu a .mm-txt {
    flex: 1 1 auto;
    min-width: 0;
}

body.map-page .mm-type-menu a .mm-check {
    flex: 0 0 18px;
    color: #03b56b;
    font-size: 16px;
    visibility: hidden;
}

body.map-page .mm-type-menu a[aria-current="page"] .mm-check {
    visibility: visible;
}

/* --- chọn địa điểm + tìm SĐT --- */
body.map-page .top-bar .district-box {
    width: 212px;
}

body.map-page #districtSelect {
    width: 100% !important;
    max-width: none !important;
    height: var(--mm-hit) !important;
    padding: 0 30px 0 34px !important;
    border: 1px solid var(--mt-border) !important;
    border-radius: 10px !important;
    background-color: var(--mm-field-bg) !important;
    background-position: 9px center, right 10px center !important;
    color: var(--mt-text);
    font-size: 14px;
    box-shadow: none;
    text-overflow: ellipsis;
}

body.map-page #phoneSearchForm {
    width: 200px;
    margin: 0;
}

body.map-page .search-phone-box {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: none;
    height: var(--mm-hit);
    padding: 0 2px 0 12px;
    background: var(--mm-field-bg);
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    box-shadow: none;
}

body.map-page #phoneSearch {
    flex: 1 1 auto;
    width: 100% !important;
    min-width: 0;
    height: 100% !important;
    padding: 0;
    background: transparent;
    font-size: 14px;
    color: var(--mt-text);
}

body.map-page #phoneSearchBtn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.map-page #phoneSearchBtn:hover {
    background: #fff;
}

body.map-page #phoneSearchBtn i {
    color: var(--mt-muted);
}

/* iOS Safari tự phóng to trang khi focus ô < 16px */
@media (max-width: 767.98px), (pointer: coarse) {
    body.map-page #districtSelect,
    body.map-page #phoneSearch {
        font-size: 16px;
    }
}

body.map-page .search-phone-box:focus-within,
body.map-page #districtSelect:focus {
    border-color: var(--mm-type) !important;
    box-shadow: 0 0 0 3px rgba(var(--mm-type-rgb), .18) !important;
    background-color: #fff !important;
}

/* tiêu đề (trang ごみステーション không có dropdown) */
body.map-page .mm-title {
    padding: 0 10px 0 4px;
    font-weight: 700;
    font-size: 15px;
    color: var(--mm-navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* điện thoại dọc: 2 hàng — [logo][loại bản đồ] / [địa điểm][SĐT] (như MapHub + topBar của mobile) */
@media (max-width: 767.98px) and (min-height: 501px) {
    body.map-page {
        --mm-bar-b: 106px;
    }

    body.map-page .top-bar {
        right: var(--mm-gap);
        flex-wrap: wrap;
    }

    body.map-page .top-bar .mm-type {
        flex: 1 1 calc(100% - 46px);
        width: auto;
    }

    body.map-page .top-bar .district-box {
        flex: 3 1 0;
        width: auto;
    }

    body.map-page #phoneSearchForm {
        flex: 2 1 0;
        width: auto;
    }

    body.map-page .top-bar .mm-title {
        flex: 1 1 0;
    }
}

/* điện thoại ngang (thấp): 1 hàng, co các ô */
@media (max-width: 767.98px) and (max-height: 500px) {
    body.map-page .top-bar {
        right: calc(var(--mm-gap) + var(--mm-fab) + 12px);
    }

    body.map-page .top-bar .mm-type {
        flex: 1.3 1 0;
        width: auto;
    }

    body.map-page .top-bar .district-box {
        flex: 1.2 1 0;
        width: auto;
    }

    body.map-page #phoneSearchForm {
        flex: 1 1 0;
        width: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    body.map-page .top-bar {
        right: calc(var(--mm-gap) + var(--mm-fab) + 12px);
    }

    body.map-page .top-bar .mm-type {
        flex: 1.3 1 232px;
    }

    body.map-page .top-bar .district-box {
        flex: 1.2 1 212px;
    }

    body.map-page #phoneSearchForm {
        flex: 1 1 200px;
    }
}

/* ================= Cột nút tròn bên phải (FAB) ================= */
body.map-page #btn_focus_location,
body.map-page #btnSatellite,
body.map-page #btn_search_location,
body.map-page #btn_search_by_time,
body.map-page #btn_search_by_special_cases,
body.map-page .mm-zoom button {
    position: absolute !important;
    right: 12px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 15 !important;
    width: var(--mm-fab) !important;
    height: var(--mm-fab) !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mt-border) !important;
    border-radius: 50% !important;
    background-color: #fff !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 20px 20px !important;
    box-shadow: var(--mm-shadow) !important;
    color: #475569 !important;
    font-size: 0 !important;
    line-height: 0;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, border-color .15s ease;
}

body.map-page #btn_focus_location:hover,
body.map-page #btnSatellite:hover,
body.map-page #btn_search_location:hover,
body.map-page #btn_search_by_time:hover,
body.map-page #btn_search_by_special_cases:hover,
body.map-page .mm-zoom button:hover {
    border-color: var(--mt-accent) !important;
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .14), var(--mm-shadow) !important;
}

body.map-page #btn_focus_location:active,
body.map-page #btnSatellite:active,
body.map-page .mm-zoom button:active {
    background-color: var(--mt-surface-2) !important;
}

body.map-page #btn_focus_location img {
    display: none;
}

/* thứ tự như mobile: [vị trí, vệ tinh] rồi cách 16 là [lọc loại, lọc thời gian, đối tượng đặc biệt] */
body.map-page #btn_focus_location {
    top: var(--mm-col-top) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='6.5'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%230f766e' stroke='none'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3C/svg%3E") !important;
}

body.map-page #btnSatellite {
    top: calc(var(--mm-col-top) + 48px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3 2.5 8 12 13l9.5-5z'/%3E%3Cpath d='m2.5 12.5 9.5 5 9.5-5M2.5 16.5l9.5 5 9.5-5' opacity='.55'/%3E%3C/svg%3E") !important;
}

body.map-page #btnSatellite.is-active {
    background-color: var(--mt-accent-soft) !important;
    border-color: var(--mt-accent) !important;
}

body.map-page #btn_search_location {
    top: calc(var(--mm-col-top) + 104px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M3 5h18l-7 8.2V19l-4 2v-7.8z'/%3E%3C/svg%3E") !important;
}

body.map-page #btn_search_by_time {
    top: calc(var(--mm-col-top) + 152px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E") !important;
}

body.map-page #btn_search_by_special_cases {
    top: calc(var(--mm-col-top) + 200px) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23334155' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='4.5' r='2'/%3E%3Cpath d='M5 8.5c2.3.8 4.6 1.2 7 1.2s4.7-.4 7-1.2M12 9.7V14m0 0-3 7m3-7 3 7'/%3E%3C/svg%3E") !important;
}

/* màn thấp (điện thoại ngang): 2 cột — [vị trí, vệ tinh] đứng trái cụm lọc, cột không chạm card đáy */
@media (max-height: 500px) {
    body.map-page #btn_focus_location,
    body.map-page #btnSatellite {
        right: calc(12px + var(--mm-fab) + 8px) !important;
    }

    body.map-page #btnSatellite {
        top: calc(var(--mm-col-top) + 48px) !important;
    }

    body.map-page #btn_search_location {
        top: var(--mm-col-top) !important;
    }

    body.map-page #btn_search_by_time {
        top: calc(var(--mm-col-top) + 48px) !important;
    }

    body.map-page #btn_search_by_special_cases {
        top: calc(var(--mm-col-top) + 96px) !important;
    }
}

/* trang ごみステーション: chỉ có [vị trí] + [lọc] */
body.map-page.mm-t-garbage #btn_search_location {
    top: calc(var(--mm-col-top) + 48px) !important;
}

@media (max-height: 500px) {
    body.map-page.mm-t-garbage #btn_search_location {
        top: var(--mm-col-top) !important;
    }
}

/* nút lọc đang mở panel → tô màu loại bản đồ (như ctrlBtnActive mobile) */
body.map-page #btn_search_location.mm-panel-open,
body.map-page #btn_search_by_time.mm-panel-open,
body.map-page #btn_search_by_special_cases.mm-panel-open {
    z-index: 32 !important;
    border-color: var(--mm-type) !important;
    box-shadow: 0 0 0 3px var(--mm-type-soft), var(--mm-shadow) !important;
}

body.map-page .filter-badge {
    top: -5px;
    right: -5px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border: 1.5px solid #fff;
    border-radius: 9px;
    background: #fd293a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
}

/* zoom +/− (dựng bởi map-modern.js; ≥768 và màn đủ cao — điện thoại dùng 2 ngón) */
body.map-page .mm-zoom {
    display: none;
}

body.map-page .mm-zoom button {
    color: #334155 !important;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 1;
}

@media (min-width: 768px) and (min-height: 560px) { /* 501 → 560: zoom không đè nút chính dưới cụm lọc — 2026/09/28 ツー */
    body.map-page .mm-zoom {
        display: block;
    }

    body.map-page .mm-zoom .mm-zoom-in {
        top: auto !important;
        bottom: calc(var(--mm-foot-top) + 12px + 48px) !important;
    }

    body.map-page .mm-zoom .mm-zoom-out {
        top: auto !important;
        bottom: calc(var(--mm-foot-top) + 12px) !important;
    }

}

/* ================= Nút hành động chính (SOS / thêm điểm / cảnh báo) =================
   Nằm ngay dưới cụm nút lọc góc trên phải, lõi 40 = cỡ nút cột (--mm-fab), khung 48 chừa quầng — 2026/09/28 ツー.
   --mm-fab-top: đỉnh LÕI; màn có nút đối tượng đặc biệt (SOS, cần hỗ trợ) thì thêm một nấc 48. */
body.map-page {
    --mm-fab-top: calc(var(--mm-col-top) + 200px);
}

body.map-page:has(#btn_search_by_special_cases) {
    --mm-fab-top: calc(var(--mm-col-top) + 248px);
}

body.map-page #button-contact-vr {
    position: fixed !important;
    top: calc(var(--mm-fab-top) - 4px) !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 14;
}

body.map-page #button-contact-vr .button-contact {
    margin: 0;
}

body.map-page #button-contact-vr .button-contact .phone-vr {
    width: 48px;
    height: 48px;
    transform: none;
    -webkit-transform: none;
}

body.map-page .phone-vr-circle-fill,
body.map-page .phone-vr-circle-fill.support,
body.map-page .phone-vr-circle-fill.safeinfo,
body.map-page .phone-vr-circle-fill.disaster {
    top: 2px !important;
    left: 2px !important;
    width: 44px !important;
    height: 44px !important;
    border: 0 !important;
    background-color: var(--mm-fab-c, #fd293a) !important;
    opacity: .5; /* quầng đậm hơn (.28 → .5) — 2026/09/28 ツー */
    box-shadow: none !important;
    animation: mm-halo 1.8s ease-out infinite !important;
}

body.map-page .phone-vr-img-circle,
body.map-page .phone-vr-img-circle.support,
body.map-page .phone-vr-img-circle.safeinfo,
body.map-page .phone-vr-img-circle.disaster {
    top: 4px !important;
    left: 4px !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 1;
    align-items: center;
    border: 2px solid #fff;
    background-color: var(--mm-fab-c, #fd293a) !important;
    box-shadow: 0 4px 14px rgba(16, 36, 92, .28);
    /* rung nhẹ (rotate riêng, không đè transform hover) + vòng sáng lan ra từ viền — 2026/09/28 ツー */
    animation: mm-fab-shake 2.4s ease-in-out infinite, mm-fab-ring 1.8s ease-out infinite !important;
    transition: transform .15s ease;
}

body.map-page .phone-vr:hover .phone-vr-img-circle {
    transform: scale(1.06);
}

body.map-page .phone-vr:active .phone-vr-img-circle {
    transform: scale(.94);
}

body.map-page .phone-vr-img-circle .sos-text {
    position: absolute; /* phủ kín lõi, căn tâm tuyệt đối — 2026/09/28 ツー */
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .3px;
}

body.map-page .phone-vr-img-circle .sos-text i {
    display: block;
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1;
}

/* SOS / cảnh báo: đỏ danger mobile; thêm điểm hỗ trợ / đánh dấu an toàn: xanh lá đậm (chữ trắng đủ tương phản) */
body.map-page #button-contact-vr {
    --mm-fab-c: #fd293a;
}

body.map-page #button-support,
body.map-page #button-safe-info {
    --mm-fab-c: #017040;
}

body.map-page #button-disaster {
    --mm-fab-c: #fd293a;
}

/* điện thoại ngang (thấp): cột trái [vị trí, vệ tinh] rồi tới nút chính, không chạm card đáy */
@media (max-height: 500px) {
    body.map-page #button-contact-vr {
        top: calc(var(--mm-col-top) + 96px - 4px) !important;
        right: calc(12px + var(--mm-fab) + 8px - 4px) !important;
    }
}

body.map-page.mm-card-open #button-contact-vr {
    display: none !important;
}

/* ================= Card chạy chữ đáy (mapInfoFooter) ================= */
body.map-page .map-info {
    position: absolute !important;
    left: var(--mm-gap);
    right: var(--mm-gap);
    bottom: var(--mm-foot-b);
    z-index: 12;
    width: auto;
    height: var(--mm-foot-h);
    display: flex;
    align-items: center;
    padding: 0 12px 0 40px;
    border: 0;
    border-radius: 14px;
    background: var(--mm-footer-bg);
    color: var(--mm-footer-ink);
    box-shadow: var(--mm-shadow-lg);
    overflow: hidden;
    white-space: nowrap;
    line-height: var(--mm-foot-h);
    font-size: 16px;
    font-weight: 600;
}

/* ô icon loa: nền đặc che phần chữ đang chạy qua bên dưới */
body.map-page .map-info::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 40px;
    background: var(--mm-footer-bg);
}

body.map-page .map-info::before {
    content: "";
    position: absolute;
    z-index: 2;
    left: 12px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4c0 .6.4 1 1 1h2l4.5 4.2c.6.6 1.5.1 1.5-.7V5.5c0-.8-.9-1.3-1.5-.7L6 9H4c-.6 0-1 .4-1 1zm13.5 2A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 10v4c0 .6.4 1 1 1h2l4.5 4.2c.6.6 1.5.1 1.5-.7V5.5c0-.8-.9-1.3-1.5-.7L6 9H4c-.6 0-1 .4-1 1zm13.5 2A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* vùng chạy chữ: cắt mềm 2 đầu */
body.map-page .map-info .marquee-text {
    display: inline-block;
    padding-left: 4px;
    will-change: transform;
    animation: none !important; /* bỏ marquee 30s của slide.css: chữ vừa khung thì đứng yên */
}

body.map-page .map-info.mm-marquee .marquee-text {
    animation: mm-marquee var(--mm-mq-dur, 30s) linear infinite !important;
}

/* chữ + icon cùng một màu footerInk (mobile) — bỏ màu tại chỗ xanh/xám/vàng của bản cũ */
body.map-page .map-info .text-action,
body.map-page .map-info strong,
body.map-page .map-info i {
    color: inherit !important;
}

/* slide.css đặt .text-action 12px bold → 16px, nhẹ hơn (500; số liệu 600) — 2026/09/28 ツー */
body.map-page .map-info .text-action {
    font-size: 16px;
    font-weight: 500;
}

body.map-page .map-info strong {
    font-weight: 600;
}

body.map-page .map-info i.fa {
    margin: 0 4px;
}

body.map-page .map-info .mm-empty-hl {
    display: none;
}

/* ================= Bảng lọc ================= */
body.map-page .panel_sort {
    width: 320px !important;
    margin: 0 !important;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff !important;
    border: 1px solid var(--mt-border) !important;
    border-radius: 16px;
    box-shadow: var(--mm-shadow-lg);
    color: var(--mt-text);
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    cursor: default;
    z-index: 5 !important;
}

body.map-page .panel_sort > .arrow {
    display: none;
}

body.map-page .panel_sort > div {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
}

body.map-page .panel_sort div[style*="inline-block"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    border: 0 !important;
    padding: 0 !important;
}

/* tiêu đề nhóm (bản cũ nền vàng gold) → nhãn nền nhạt màu loại bản đồ, như panelHeader mobile */
body.map-page .panel_sort > div[style*="gold"],
body.map-page .panel_sort div[style*="background-color: gold"] {
    background: var(--mm-type-soft) !important;
    border-radius: 10px;
    padding: 8px 10px !important;
    margin-bottom: 8px;
    text-align: center;
}

body.map-page .panel_sort .lbl-center label {
    margin: 0;
}

body.map-page .panel_sort .lbl-center .lbl {
    color: var(--mm-navy);
    font-weight: 700 !important;
    font-size: 14px;
}

/* dòng "Tất cả" + các dòng loại */
body.map-page .panel_sort .lbl-left,
body.map-page .panel_sort .chk-right {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

body.map-page .panel_sort > div[style*="27px"],
body.map-page .panel_sort .item-support {
    display: flex !important;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 4px 8px !important;
    margin: 0 0 4px;
    border: 0 !important;
    border-radius: 10px;
    background: transparent;
}

body.map-page .panel_sort .item-support:hover,
body.map-page .panel_sort > div[style*="27px"]:hover {
    background: var(--mt-surface-2);
}

body.map-page .panel_sort .item-support:has(input:checked) {
    background: var(--mm-type-soft);
}

body.map-page .panel_sort .item-support > .lbl-left.item,
body.map-page .panel_sort > div[style*="27px"] > .lbl-left {
    flex: 1 1 auto;
    min-width: 0;
    background-color: transparent !important;
    border-radius: 0;
}

body.map-page .panel_sort .lbl-left label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

body.map-page .panel_sort .lbl-left img {
    flex: 0 0 auto;
    width: 24px !important;
    height: 24px !important;
    object-fit: contain;
}

body.map-page .panel_sort .lbl-left.item span {
    margin-left: 0;
}

body.map-page .panel_sort .lbl {
    color: var(--mt-text);
    font-size: 14px;
    overflow-wrap: anywhere;
}

body.map-page .panel_sort .item-support:has(input:checked) .lbl {
    font-weight: 600;
    color: var(--mm-navy);
}

body.map-page .panel_sort .chk-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

body.map-page .panel_sort .chk-right label {
    margin: 0;
    display: flex;
}

body.map-page .panel_sort .check_choose,
body.map-page .panel_sort .check_choose_special_cases {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--mt-accent);
    cursor: pointer;
}

/* lọc thời gian */
body.map-page .panel_sort .forecast-group {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    width: 100%;
    padding: 4px 0 0 !important;
}

body.map-page .panel_sort .forecast-btn {
    width: auto;
    min-height: 40px;
    padding: 6px 4px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    font-size: 13px;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}

body.map-page .panel_sort .forecast-btn:hover {
    border-color: var(--mt-accent);
}

body.map-page .panel_sort .forecast-btn.active {
    background: var(--mm-type-soft);
    border-color: var(--mm-type);
    color: var(--mm-navy);
    font-weight: 700;
}

/* ≥768: panel phải cạnh cột nút, cao theo nội dung, trượt vào 200ms */
@media (min-width: 768px) {
    body.map-page .panel_sort {
        position: fixed !important;
        top: var(--mm-col-top) !important;
        right: calc(12px + var(--mm-fab) + 10px) !important;
        left: auto !important;
        bottom: auto !important;
        max-height: calc(100vh - var(--mm-col-top) - var(--mm-foot-top) - 12px);
        max-height: calc(100dvh - var(--mm-col-top) - var(--mm-foot-top) - 12px);
    }

    body.map-page .panel_sort[style*="block"] {
        animation: mm-slide-l .2s ease-out;
    }
}

/* <768: bottom sheet có tay nắm, tối đa 70dvh, cuộn trong */
@media (max-width: 767.98px) {
    body.map-page .panel_sort {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-height: 70vh;
        max-height: 70dvh;
        padding: 22px 14px calc(14px + env(safe-area-inset-bottom, 0px));
        border-radius: 18px 18px 0 0;
        border-width: 1px 0 0 !important;
        box-shadow: 0 -8px 28px rgba(16, 36, 92, .22);
    }

    body.map-page .panel_sort::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 44px;
        height: 5px;
        margin-left: -22px;
        border-radius: 3px;
        background: #cbd5d3;
    }

    body.map-page .panel_sort[style*="block"] {
        animation: mm-slide-up .2s ease-out;
    }
}

/* nền mờ sau sheet (dựng bởi map-modern.js; bấm = đóng như bấm vào bản đồ) */
body.map-page .mm-scrim {
    display: none;
}

@media (max-width: 767.98px) {
    body.map-page.mm-sheet-open .mm-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 16; /* trên cột nút (15) + nút chính (14), dưới nút lọc đang mở (32) chứa sheet */
        background: rgba(16, 36, 92, .28);
        animation: mm-fade .2s ease-out;
    }
}

/* nút CSV trong lọc ごみステーション */
body.map-page .panel_sort #btn-gomi-bunbetsu-CSV {
    min-height: 40px;
    margin-top: 8px;
    border-radius: 10px;
}

/* ================= Thông tin điểm ================= */
/* nội dung info-window (dùng chung cho InfoWindow desktop và card đáy mobile) */
body.map-page .info-window {
    max-width: 360px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--mt-text);
}

body.map-page .info-window .info-title {
    margin: 0 0 10px !important;
    padding: 8px 12px !important;
    min-width: 0 !important;
    width: auto !important;
    background: var(--mm-type-soft) !important;
    color: var(--mm-navy) !important;
    border-radius: 10px !important;
    font-size: 15px;
    font-weight: 700;
    text-align: center !important; /* căn giữa tiêu đề card điểm — 2026/09/28 ツー */
}

body.map-page .info-window .info-row {
    display: grid;
    grid-template-columns: minmax(84px, 34%) minmax(0, 1fr);
    column-gap: 10px;
    align-items: baseline;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px dashed var(--mt-border);
}

body.map-page .info-window .info-row .label {
    display: block;
    margin: 0;
    color: var(--mt-muted);
    font-size: 13px;
    font-weight: 600;
}

body.map-page .info-window .info-row .value {
    display: block;
    min-width: 0;
    color: var(--mt-text);
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.map-page .info-window .info-row > button {
    grid-column: 2;
    justify-self: start;
    margin: 6px 0 0 !important;
}

body.map-page .info-window .btn_call,
body.map-page .info-window .btn_map,
body.map-page .info-window .btn-location {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 32px;
    margin: 6px 0 0;
    padding: 4px 14px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

body.map-page .info-window .btn_call {
    background: #017040;
}

body.map-page .info-window .btn_map,
body.map-page .info-window .btn-location {
    background: var(--mt-accent);
}

body.map-page .info-window .btn_map:hover,
body.map-page .info-window .btn-location:hover {
    background: var(--mt-accent-hover);
    color: #fff;
}

body.map-page .info-window .wrap_btn {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

body.map-page .info-window .wrap_btn > button {
    display: inline-flex; /* chữ nút căn giữa cả 2 chiều — 2026/09/28 ツー */
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.2;
    flex: 1 1 0;
    min-width: 110px;
    min-height: 40px;
    margin: 0 !important;
    padding: 6px 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    font-weight: 700;
}

body.map-page .info-window .btn_support {
    background: #017040;
    color: #fff;
}

body.map-page .info-window .btn_support:hover {
    background: #015a33;
    color: #fff;
}

body.map-page .info-window .btn_close_info_window {
    background: var(--mt-surface-2);
    border-color: var(--mt-border);
    color: var(--mt-text);
}

body.map-page .lbl_supported {
    color: #017040;
    /* Đã hỗ trợ: nền xanh lá nhạt cho nổi, #017040 trên #cbf3e0 = 5,14:1 (2026/10/03 ツー, đồng bộ app) */
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #cbf3e0;
    font-weight: 700;
}

body.map-page .lbl_notyet_supported {
    color: #e01528;
}

/* InfoWindow Google (≥768): card bo 14, bóng mềm */
body.map-page .gm-style .gm-style-iw-c {
    padding: 14px !important;
    border-radius: 14px !important;
    box-shadow: var(--mm-shadow-lg) !important;
}

body.map-page .gm-style .gm-style-iw-d {
    overflow: auto !important;
    padding: 0 !important;
}

body.map-page .gm-style .gm-style-iw-chr {
    display: none;
}

/* card đáy (<768, dựng bởi map-modern.js thay cho InfoWindow chật) */
body.map-page .mm-card {
    position: absolute;
    left: var(--mm-gap);
    right: calc(12px + var(--mm-fab) + 8px);
    bottom: calc(var(--mm-foot-top) + 8px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--mm-bar-b) - var(--mm-foot-top) - 20px);
    max-height: calc(100dvh - var(--mm-bar-b) - var(--mm-foot-top) - 20px);
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    box-shadow: var(--mm-shadow-lg);
    animation: mm-slide-up .2s ease-out;
}

body.map-page .mm-card:focus {
    outline: none;
}

body.map-page .mm-card[hidden] {
    display: none;
}

body.map-page .mm-card-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mt-muted);
    font-size: 24px; /* 22 -> 24, đồng bộ nút X popup app (2026/10/03 ツー) */
    line-height: 1;
}

body.map-page .mm-card-close:hover {
    background: var(--mt-surface-2);
}

body.map-page .mm-card-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 12px 12px;
}

body.map-page .mm-card .info-window {
    max-width: none;
}

body.map-page .mm-card .info-window .info-title {
    margin-right: 40px !important;
}

/* ================= Trạng thái tải / rỗng ================= */
body.map-page .mm-loading,
body.map-page .mm-empty {
    position: absolute;
    left: 50%;
    z-index: 11;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100% - 2 * var(--mm-fab) - 48px);
    padding: 10px 16px;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--mt-border);
    border-radius: 999px;
    box-shadow: var(--mm-shadow);
    color: var(--mt-text);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

body.map-page .mm-loading {
    top: 45%;
}

body.map-page .mm-empty {
    top: calc(var(--mm-bar-b) + 12px);
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
}

body.map-page .mm-empty span {
    overflow: hidden;
    text-overflow: ellipsis;
}

body.map-page .mm-loading[hidden],
body.map-page .mm-empty[hidden] {
    display: none;
}

body.map-page .mm-spin {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border: 2.5px solid var(--mt-accent-soft);
    border-top-color: var(--mt-accent);
    border-radius: 50%;
    animation: mm-spin .8s linear infinite;
}

/* ================= OpenLayers (ごみステーション) ================= */
body.map-page .ol-zoom {
    top: auto;
    left: auto;
    right: 12px;
    bottom: calc(var(--mm-foot-b) + 20px);
    padding: 0;
    background: transparent;
}

body.map-page .ol-zoom .ol-zoom-in,
body.map-page .ol-zoom .ol-zoom-out {
    width: var(--mm-fab);
    height: var(--mm-fab);
    margin: 0 0 8px;
    border: 1px solid var(--mt-border);
    border-radius: 50% !important;
    background: #fff;
    color: #334155;
    font-size: 22px;
    box-shadow: var(--mm-shadow);
}

body.map-page .ol-attribution {
    bottom: 4px;
    right: 64px;
}

body.map-page .ol-popup {
    border-radius: 12px;
}

/* ================= Modal ================= */
body.map-page .modal-dialog.map-modal-sm {
    max-width: min(500px, calc(100vw - 24px));
}

body.map-page .modal-dialog.map-modal-sm .modal-content {
    max-height: calc(100vh - 3.5rem);
    max-height: calc(100dvh - 3.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.map-page .modal-content {
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    box-shadow: var(--mm-shadow-lg);
    overflow: hidden;
}

body.map-page .modal-header {
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    color: var(--mm-navy);
    border-bottom: 1px solid #e5e7eb;
    box-shadow: inset 4px 0 0 var(--mm-type);
}

body.map-page .modal-header .modal-title {
    font-family: inherit;
    font-weight: 700 !important;
    font-size: 18px;
    color: var(--mm-navy);
}

body.map-page .modal-footer .btn-cancel,
body.map-page .modal-footer .btn-light {
    background: var(--mt-surface-2);
    border-color: var(--mt-border);
    color: var(--mt-text);
    box-shadow: none;
}

body.map-page .modal-footer .btn-cancel:hover,
body.map-page .modal-footer .btn-light:hover {
    background: #e2ebe9;
    border-color: var(--mt-border);
}

body.map-page .modal-body {
    overscroll-behavior: contain;
}

body.map-page .modal-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: var(--mt-surface);
    border-top: 1px solid var(--mt-border);
}

body.map-page .modal-footer > .btn {
    margin: 0;
}

body.map-page .modal-footer .btn-cancel {
    margin-right: auto;
}

body.map-page .modal .btn {
    display: inline-flex; /* chữ nút form căn giữa cả 2 chiều — 2026/09/28 ツー */
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 38px;
    border-radius: 10px;
    font-weight: 600;
}

body.map-page .modal .btn-primary {
    background-color: var(--mt-accent);
    border-color: var(--mt-accent);
    color: #fff;
    filter: none;
}

body.map-page .modal .btn-primary:hover,
body.map-page .modal .btn-primary:focus {
    background-color: var(--mt-accent-hover);
    border-color: var(--mt-accent-hover);
}

body.map-page .modal .btn-primary:disabled {
    opacity: .55;
}

body.map-page .modal .btn-outline-primary {
    color: var(--mt-accent);
    border-color: var(--mt-accent);
}

body.map-page .modal .btn-outline-primary:hover {
    background-color: var(--mt-accent);
    color: #fff;
}

body.map-page .modal .form-label,
body.map-page .modal label.form-label {
    font-weight: 600;
    color: var(--mt-text);
}

body.map-page .modal .form-control,
body.map-page .modal .form-select {
    min-height: 40px;
    border-color: var(--mt-border);
    border-radius: 10px;
}

body.map-page .modal textarea.form-control {
    min-height: 88px;
}

body.map-page .modal .form-control:focus,
body.map-page .modal .form-select:focus {
    border-color: var(--mt-accent);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, .2);
}

body.map-page .modal .form-check-input:checked {
    background-color: var(--mt-accent);
    border-color: var(--mt-accent);
}

body.map-page .modal .alert {
    border-radius: 10px;
}

/* modal chi tiết điểm (không có header): nhãn vàng cũ → nhãn nền nhạt màu loại */
body.map-page #modal-content-map-disaster-detail .lbl-center[style*="gold"] {
    background: var(--mm-type-soft) !important;
    border-radius: 10px !important;
    padding: 6px 10px;
}

body.map-page #modal-content-map-disaster-detail .lbl-center .lbl {
    font-size: 18px !important;
    color: var(--mm-navy) !important;
}

body.map-page #modal-content-map-disaster-detail .btn-location {
    min-height: 40px;
    margin: 0 8px 0 0;
    padding: 6px 20px;
    border: 1px solid var(--mt-accent);
    border-radius: 10px;
    background: var(--mt-accent);
    color: #fff;
    font-weight: 600;
}

body.map-page #modal-content-map-disaster-detail .btn-location:hover {
    background: var(--mt-accent-hover);
    color: #fff;
}

/* ảnh trong popup chi tiết: bấm để phóng to (main.js) */
#disasterCarousel .carousel-item img {
    cursor: zoom-in;
}

.mm-img-zoom {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 16px 16px;
    background: rgba(18, 22, 28, .92);
    cursor: zoom-out;
}

.mm-img-zoom img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    cursor: default;
}

.mm-img-zoom__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d63341;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
}

body.map-page #btn_close_image {
    min-height: 40px;
    padding: 6px 24px;
    border: 1px solid var(--mt-border);
    border-radius: 10px;
    background: var(--mt-surface-2);
    color: var(--mt-text);
    font-weight: 600;
}

/* modal chọn vị trí toàn màn hình: giữ full màn, bo góc 0, nút nổi cùng kiểu */
body.map-page #modalMapSelectFullScreen .modal-dialog {
    max-width: 100%;
}

body.map-page #modalMapSelectFullScreen .modal-content {
    border: 0;
    border-radius: 0;
}

body.map-page #modalMapSelectFullScreen .focus-location-button,
body.map-page #modalMapSelectFullScreen .satellite-fullscreen {
    width: var(--mm-fab);
    height: var(--mm-fab);
    border: 1px solid var(--mt-border);
    border-radius: 50% !important;
    box-shadow: var(--mm-shadow);
}

body.map-page #modalMapSelectFullScreen .district-fullscreen {
    border-radius: 10px;
    box-shadow: var(--mm-shadow);
}

body.map-page #districtSelectFullscreen {
    height: var(--mm-hit);
    border: 1px solid var(--mt-border) !important;
    border-radius: 10px !important;
}

body.map-page :focus-visible {
    outline: 2px solid var(--mt-accent);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    body.map-page .modal .btn,
    body.map-page .info-window .btn_call,
    body.map-page .info-window .btn_map,
    body.map-page .info-window .btn-location {
        min-height: var(--mm-hit);
    }

    body.map-page .modal .btn-close {
        width: var(--mm-hit);
        height: var(--mm-hit);
        padding: 0;
        margin: -8px -8px -8px auto;
    }
}

@media (max-width: 575.98px) {
    /* gần full màn: chừa 12px mỗi phía, body cuộn trong, header/footer luôn thấy */
    body.map-page .modal-dialog:not(.modal-fullscreen-md-down) {
        margin: 12px auto;
        width: calc(100vw - 24px);
        max-width: calc(100vw - 24px);
    }

    body.map-page .modal-dialog.modal-dialog-scrollable {
        height: calc(100vh - 24px);
        height: calc(100dvh - 24px);
        max-height: none;
    }

    body.map-page .modal-dialog.modal-dialog-scrollable .modal-content {
        height: 100%;
        max-height: 100%;
    }

    body.map-page .modal-dialog.map-modal-sm .modal-content {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }

    body.map-page .modal-footer > .btn {
        flex: 1 1 0;
        min-height: var(--mm-hit);
    }

    body.map-page .modal-footer .btn-cancel {
        margin-right: 0;
        min-width: 0;
    }
}

/* ================= Chuyển động ================= */
@keyframes mm-marquee {
    0%, 8% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(var(--mm-mq-to, -100%));
    }
}

@keyframes mm-fab-shake {
    0%, 60%, 100% { rotate: 0deg; }
    64% { rotate: -14deg; }
    68% { rotate: 12deg; }
    72% { rotate: -10deg; }
    76% { rotate: 8deg; }
    80% { rotate: -4deg; }
    84% { rotate: 0deg; }
}

@keyframes mm-fab-ring {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mm-fab-c, #fd293a) 65%, transparent), 0 4px 14px rgba(16, 36, 92, .28); }
    100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--mm-fab-c, #fd293a) 0%, transparent), 0 4px 14px rgba(16, 36, 92, .28); }
}

@keyframes mm-halo {
    0% {
        transform: scale(.86);
        opacity: .45;
    }

    100% {
        transform: scale(1.28);
        opacity: 0;
    }
}

@keyframes mm-slide-up {
    from {
        transform: translateY(24px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes mm-slide-l {
    from {
        transform: translateX(16px);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes mm-pop {
    from {
        transform: translateY(-4px) scale(.98);
        opacity: 0;
    }

    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes mm-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes mm-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.map-page *,
    body.map-page *::before,
    body.map-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    body.map-page .map-info.mm-marquee .marquee-text {
        animation: none !important;
    }

    /* không chạy chữ: cho phép cuộn ngang tay để đọc hết */
    body.map-page .map-info {
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.map-page #button-contact-vr .phone-vr-circle-fill,
    body.map-page .phone-vr-img-circle {
        animation: none !important;
    }

    body.map-page #button-contact-vr .phone-vr-circle-fill {
        opacity: .2;
    }
}