#branch-container {
    display: flex;
    gap: 20px;
}

#branch-list {
    width: 30%;
    padding: 10px;
    list-style: none;
    max-height: 450px; /* Giới hạn chiều cao bằng map */
    overflow-y: auto;  /* Bật thanh cuộn nếu danh sách dài */
    background: #fff;
    border-radius: 8px;
}
#branch-list li p {
	pointer-events: none;
}
#branch-list h3 {
	pointer-events: none;
}
#branch-list p {
    margin-bottom: 0px;
}

.branch-item {
    cursor: pointer;
    padding: 10px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    border-radius: 8px;
	margin-left: 0 !important;
}

.branch-item.active {
    border: 2px solid blue;
    background-color: #f0f8ff; /* Màu nền nhẹ khi được chọn */
}

#branch-map {
    width: 70%;
    padding: 10px;
}

#branch-map iframe {
    width: 100% !important;
    max-width: 100%;
    height: 450px;
    border: 0;
    border-radius: 8px;
}
.remove-branch img {
    pointer-events: none;
}

@media (max-width: 768px) {
    #branch-container {
        flex-direction: column; /* Chuyển từ ngang sang dọc */
    }

    #branch-list {
        width: 100%; /* Chiếm toàn bộ chiều rộng */
        max-height: 200px; /* Giới hạn chiều cao để không chiếm quá nhiều màn hình */
        overflow-y: auto; /* Giữ thanh cuộn nếu danh sách dài */
    }

    #branch-map {
        width: 100%; /* Chiếm toàn bộ chiều rộng */
    }

    #branch-map iframe {
        height: 300px; /* Giảm chiều cao của bản đồ để phù hợp màn hình nhỏ */
    }
}