/* 🌟 KHÓA CHẾT MÀN HÌNH, CHỐNG TRƯỢT GIAO DIỆN TRÊN MOBILE */
body, html { 
    margin: 0; padding: 0; 
    height: 100%; width: 100%; 
    font-family: Arial, sans-serif; 
    background-color: #f4f6f9; 
    overflow: hidden; 
    position: fixed; /* Khóa cuộn trang tuyệt đối, chống mất Avatar */
}

/* 🌟 ĐÓNG ĐINH THANH MENU VÀ AVATAR LÊN TRÊN CÙNG */
.navbar { 
    position: fixed !important; 
    top: 0; left: 0; width: 100%; 
    z-index: 1001; 
}

/* Chống bị bóp méo Avatar khi tiêu đề dài */
.navbar img.rounded-circle {
    flex-shrink: 0;
}

#map { 
    margin-top: 60px; /* Bù lại khoảng trống của Navbar */
    height: calc(100vh - 60px); 
    height: calc(100dvh - 60px); /* 🌟 FIX LỖI 3: Dùng dvh cho trình duyệt di động mới */
    width: 100%; 
    z-index: 1; 
    background-color: #e5e3df; /* Giảm hiện tượng trắng màn hình khi lướt */
}

.leaflet-popup-content { width: 250px !important; }
.form-container { display: flex; flex-direction: column; gap: 8px; }
.form-input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; width: 100%; }
.btn-submit { padding: 10px; background: #28a745; color: white; border: none; cursor: pointer; border-radius: 4px; font-weight: bold; transition: 0.3s; }

.map-filter { position: absolute; top: 70px; right: 10px; z-index: 1000; background: rgba(255, 255, 255, 0.95); padding: 12px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); display: flex; flex-direction: column; gap: 8px; }
.filter-group { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.leaflet-routing-container { max-height: 250px; overflow-y: auto; background: rgba(255, 255, 255, 0.95) !important; border-radius: 8px; font-size: 13px; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; }
.leaflet-control-layers { border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.3); font-weight: bold; font-size: 13px; }

/* CSS cho nút Micro thu âm */
.leaflet-control-voice-search { background-color: #fff; width: 34px; height: 34px; display: flex !important; justify-content: center; align-items: center; border-radius: 4px; box-shadow: 0 1px 5px rgba(0,0,0,0.6); cursor: pointer; font-size: 16px; transition: 0.3s; text-decoration: none; color: #333;}
.leaflet-control-voice-search:hover { background-color: #f4f4f4; text-decoration: none; color: #007bff;}
.mic-listening { animation: pulse 1s infinite; background-color: #ffe6e6 !important; color: #dc3545 !important;}
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(220, 53, 69, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(220, 53, 69, 0); } }

/* 🌟 GIAO DIỆN ICON GPS MỚI (TỎA SÓNG RADAR XANH) */
.user-gps-marker {
    background-color: #007bff;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.8);
    animation: pulse-gps 1.5s infinite;
}
@keyframes pulse-gps {
    0% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(0, 123, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 123, 255, 0); }
}


/* NÚT TRÊN PC */
.btn-location { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.3); transition: 0.3s;}
.toggle-avoid { position: absolute; bottom: 20px; right: 10px; z-index: 1000; background: white; padding: 8px 12px; border-radius: 50px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); display: flex; align-items: center; gap: 8px; font-weight: bold; font-size: 14px; cursor: pointer; border: 2px solid #ffc107; transition: 0.3s;}
.toggle-avoid input { cursor: pointer; width: 18px; height: 18px; accent-color: #dc3545; }
.btn-stop-route { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); padding: 10px 20px; background: #dc3545; color: white; border: none; border-radius: 50px; cursor: pointer; font-weight: bold; z-index: 1000; box-shadow: 0 4px 6px rgba(0,0,0,0.3); display: none; transition: 0.3s;}

/* NÚT ĐỊA ĐIỂM ĐÃ LƯU (TRÊN PC) */
.btn-saved-loc {
    position: absolute; 
    bottom: 130px; 
    right: 10px; 
    z-index: 1000; 
    background: white; 
    color: #28a745; 
    border: 2px solid #28a745; 
    border-radius: 50%; 
    width: 48px; 
    height: 48px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 20px; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); 
    transition: 0.3s;
}
.btn-saved-loc:hover { background: #28a745; color: white; }

/* 📱 GIAO DIỆN DI ĐỘNG (MOBILE-FIRST UI) - TỐI ƯU NHƯ APP NATIVE */
@media (max-width: 576px) {
    /* Nút Địa điểm đã lưu -> Xếp thứ 3 từ dưới lên */
    .btn-saved-loc {
        bottom: 135px; /* Nằm ngay trên nút Né sự cố */
        right: 15px;
        width: 44px;
        height: 44px;
        font-size: 18px;
    }
    /* Thu nhỏ Header để tiết kiệm không gian */
    .navbar { height: 50px !important; }
    
    /* Bản đồ thụt xuống nhường chỗ cho Navbar Mobile */
    #map { 
        margin-top: 50px; 
        height: calc(100vh - 50px); 
        height: calc(100dvh - 50px); /* 🌟 FIX LỖI 3 */
    }
    
    .navbar-brand { font-size: 1rem !important; }
    .badge.fs-6 { font-size: 0.6rem !important; padding: 3px 5px !important;}
    .hide-mobile-text { display: none !important; }
    
    /* 🌟 BẢNG LỌC (MAP FILTER) - CHUYỂN THÀNH THANH TOOLBAR GỌN GÀNG */
    .map-filter { 
        top: 55px; 
        right: 10px; 
        left: 10px; /* Dàn đều 2 bên mép */
        width: auto; 
        padding: 8px; 
        display: grid; 
        grid-template-columns: 1fr 1fr; /* Chia 2 cột đều nhau */
        gap: 6px;
        background: rgba(255, 255, 255, 0.85); /* Hiệu ứng kính */
        backdrop-filter: blur(8px);
        border-radius: 12px;
    }
    .filter-group { margin: 0; width: 100%;}
    .map-filter label { display: none; } /* Giấu nhãn chữ để tiết kiệm chỗ */
    .map-filter select { 
        font-size: 12px; 
        padding: 5px; 
        width: 100%; 
        border-radius: 6px;
        text-align: center;
    }
    .map-filter hr { display: none; } /* Xóa đường kẻ ngang */
    
    /* Dàn ngang 3 nút AI / Heatmap */
    .map-filter .d-flex { 
        grid-column: span 2; /* Chiếm cả 2 cột */
        flex-direction: row !important; /* Dàn hàng ngang */
        gap: 5px !important;
        margin-top: 2px !important;
    }
    .map-filter .d-flex button {
        flex: 1;
        font-size: 10px;
        padding: 6px 2px;
        border-radius: 8px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 🌟 NÚT NỔI (FAB) - CHUẨN UX MOBILE */
    /* Vị trí của tôi -> Góc dưới Phải */
    .btn-location { 
        bottom: 25px; 
        right: 15px; 
        left: auto !important; /* Xóa căn trái để nhường chỗ cho nút Lớp bản đồ */
        transform: none; 
        width: 44px; height: 44px; padding: 0; 
        display: flex; align-items: center; justify-content: center; 
        font-size: 18px; border-radius: 50%; 
        box-shadow: 0 4px 10px rgba(0,123,255,0.4);
    }
    /* AI Né sự cố -> Nằm ngay phía trên nút Vị trí của tôi */
    .toggle-avoid { 
        bottom: 80px; /* Đẩy lên cao hơn để không đè nhau */
        right: 15px; 
        width: 44px; height: 44px; padding: 0; 
        display: flex; align-items: center; justify-content: center; 
        border-radius: 50%; font-size: 18px; 
        box-shadow: 0 4px 10px rgba(255,193,7,0.4);
    }
    .toggle-avoid input { position: absolute; opacity: 0; width: 0; height: 0; }
    
    /* Nút Dừng chỉ đường -> Nằm giữa dưới đáy */
    .btn-stop-route { 
        bottom: 25px; left: 50%; 
        transform: translateX(-50%); 
        width: auto; font-size: 13px; 
        padding: 8px 18px; white-space: nowrap; 
        border-radius: 20px;
    }

    /* 🌟 POPUP VÀ BẢNG CHỈ ĐƯỜNG CỦA LEAFLET */
    .leaflet-popup-content { 
        width: 220px !important; /* Bóp nhỏ popup để không tràn */
        margin: 10px 10px 10px 15px; 
    }
    .leaflet-routing-container { 
        /* 🌟 FIX LỖI 2: Dời bảng chỉ đường sang sát trái, nhường cánh phải cho các nút FAB */
        width: calc(100% - 90px) !important;  
        max-width: 260px;
        max-height: 140px;
        bottom: 80px; 
        left: 12px !important;      
        transform: none;
        font-size: 12px; 
    }
    .leaflet-top.leaflet-left { top: 120px; /* Đẩy nút Zoom xuống tránh đụng Menu */ }
}
/* 🌟 Ẩn hộp Geocoder mặc định của Leaflet Routing Machine vì nó hiện chữ "undefined" */
.leaflet-routing-geocoders { 
    display: none !important; 
}