#map {
    display: none;
    z-index: 0;
}
.team-container {
    background-image: url(/images/login.webp); /* Thay bằng URL ảnh nền */
    background-size: cover; /* Phủ kín main */
    background-position: center; /* Căn giữa */
}

.team-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Kế thừa ảnh nền */
    backdrop-filter: blur(5px); /* Làm mờ ảnh nền, điều chỉnh px nếu cần */
    z-index: -1; /* Đặt sau các thành phần con */
}

.header-wrapper,
.content-wrapper,
.nav-wrapper {
    position: relative; /* Đảm bảo các div con nằm trên ảnh nền mờ */
    background-color: rgba(255, 255, 255, 0.3); /* Nền hơi trong để rõ nội dung, điều chỉnh nếu cần */
}
.modal-backdrop {
    z-index: auto
}
.fa-spin {
    animation: fa-spin 1s linear infinite !important;
}
.room-section {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    z-index: 2;
}
.card-room {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(275deg, hsl(36deg 100% 50% / 50%), hsl(4deg 90% 58% / 80%));
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    position: relative;
    padding: 10px;
    max-height: 150px;
    width: 70%;
}
.card-room-dragon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    border-radius: 10px;
    background: linear-gradient(275deg, hsl(211deg 100% 50% / 50%), hsl(263deg 90% 51% / 80%));
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
    position: relative;
    padding: 10px;
    max-height: 150px;
    width: 70%;
}
@media (max-width: 768px) {
    .card-room, .card-room-dragon {
        width: 100%;
    }
}
.card-room-icon, .card-room-icon-dragon {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: 200px;
}
.card-room-icon img {
    background: linear-gradient(45deg, #795548, #007bff);
    border-radius: 50%;
    padding: 1px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 20px;
}
.card-room-icon-dragon img {
    background: linear-gradient(45deg, #795548, #FF9800);
    border-radius: 50%;
    padding: 1px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    width: 20px;
}

.card-room-content, .card-room-content-dragon {
    display: flex;
    flex-direction: center;
    align-items: center;
    gap: 10px;
}
.card-room-info {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(36deg, hsl(263deg 90% 51% / 70%), hsl(0deg 0% 100% / 80%));
    border-radius: 10px;
    width: 130px;
    height: 130px;
    position: relative;
}
.card-room-info-dragon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(36deg, hsl(45deg 100% 51% / 70%), hsl(0deg 0% 100% / 80%));
    border-radius: 10px;
    width: 130px;
    height: 130px;
    position: relative;
}
.card-room-info img, .card-room-info-dragon img {
    width: 100px;
}
.card-room-info-text {
    background: linear-gradient(45deg, var(--white), var(--swal2-validation-message-background));
    width: inherit;
    text-align: center;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: var(--red);
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px var(--swal2-close-button-color);
}
.card-room-info-text-dragon {
    background: linear-gradient(45deg, var(--white), var(--swal2-validation-message-background));
    width: inherit;
    text-align: center;
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    color: var(--red);
    font-weight: bold;
    font-size: 14px;
    text-shadow: 1px 1px var(--swal2-close-button-color);
}
.card-room-hot, .card-room-hot-dragon {
    position: absolute;
    left: -5px;
    top: 10px;
    padding: 5px;
    background: red;
    border-radius: 0 10px 10px 0;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.card-room-hot span,.card-room-hot-dragon span {
    font-size: 16px;
    color: #fff;
    font-weight: 900;
}
.room-wait {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    height: auto;
}
.room-wait img {
    width: 70%;
}

#room-list-section {
    gap: 10px;
}

#room-list-section.hidden {
    display: none; /* Ẩn hoàn toàn khi có class hidden */
}

#room-list {
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.users-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); /* Sử dụng auto-fill để tạo cột linh hoạt, tối thiểu 150px */
    gap: 5px; /* Khoảng cách giữa các ô là 1rem */
    margin-bottom: 1rem; /* Khoảng cách dưới cùng 1rem */
    min-width: 0; /* Ngăn lưới bị tràn trong container nhỏ */
}

/* Định dạng cho từng thẻ người dùng với hiệu ứng chuyển đổi mượt mà */
.user-card {
    transition: all 0.3s ease; /* Hiệu ứng chuyển đổi mượt mà trong 0.3 giây */
    box-sizing: border-box; /* Đảm bảo padding không gây tràn */
}

/* Định dạng thông báo lỗi cho hiển thị rõ ràng */
.error {
    color: #dc2626; /* Màu đỏ cho lỗi */
    text-align: center; /* Căn giữa văn bản */
    margin-bottom: 1rem; /* Khoảng cách dưới 1rem */
    font-size: 0.875rem; /* Kích thước chữ nhỏ hơn chút để phân cấp tốt hơn */
}



/* Định dạng thẻ phòng với flex để căn chỉnh */
.room-card {
    padding: 0.5rem; /* Đệm bên trong 0.5rem */
    border: 1px solid #d1d5db; /* Viền xám nhạt */
    border-radius: 0.25rem; /* Bo góc 0.25rem */
    display: flex; /* Sử dụng flex để căn chỉnh */
    justify-content: space-between; /* Căn đều hai bên */
    align-items: center; /* Căn giữa theo chiều dọc */
    background-color: #f9fafb; /* Màu nền xám nhạt */
    box-sizing: border-box; /* Ngăn padding gây tràn */
}

/* Hiệu ứng xoay cho nút làm mới */
#list-rooms-btn .fa-spin {
    animation: fa-spin 1s linear infinite; /* Xoay liên tục trong 1 giây, tuyến tính */
}

/* Khung hoạt hình cho hiệu ứng xoay */
@keyframes fa-spin {
    from {
        transform: rotate(0deg); /* Bắt đầu từ 0 độ */
    }
    to {
        transform: rotate(360deg); /* Kết thúc ở 360 độ */
    }
}

/* Định dạng chỉ báo sẵn sàng, cố định ở dưới cùng */
.ready-indicator {
    height: 100%;
    flex-direction: column;
    width: 100%;
    border-radius: inherit;
}

/* Lớp tiện ích để ẩn phần tử */
.hidden {
    display: none; /* Ẩn hoàn toàn */
}

/* Định dạng nhóm nhập liệu với khoảng cách đồng đều */
.input-group {
    padding-bottom: 10px; /* Đệm dưới 10px */
    display: flex; /* Sử dụng flex cho bố cục */
    flex-wrap: wrap; /* Cho phép xuống dòng để đáp ứng tốt hơn */
}

.leaflet-control-locate.leaflet-bar {
    margin-top: 0 !important;
}

.leaflet-bottom {
    height: 100vh;
    
}

/* Đảm bảo input trong Swal rộng 100% và không overflow */
.swal2-popup .swal2-input {
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0.5em 0 !important;
    padding: 0.5em !important;
    max-width: 100% !important; /* Ngăn overflow */
}

/* Đảm bảo container của input không bị giới hạn chiều rộng */
.swal2-popup .swal2-content {
    width: 100% !important;
    padding: 0 1em !important;
}

/* Điều chỉnh khoảng cách giữa các input */
.swal2-popup .swal2-input:not(:last-child) {
    margin-bottom: 0.5em !important;
}
.treasure-count {
    position: absolute;
    top: -10px;
    right: 0;
    background: red;
    border-radius: 5px;
    padding: 2px;
    color: white;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.guide-container {
    position: absolute;
    right: 5px;
    top: 0;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.guide-icon {
    width: 26px;
    height: 26px;
    transition: transform 0.5s ease;
    filter: grayscale(0.5);
}

.guide-text {
    position: absolute;
    right: 12px;
    background: linear-gradient(309deg, #9c27b087, #ff980082);
    color: #fff;
    padding: 2px;
    border-radius: 5px;
    font-size: 14px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.guide-container.show-text .guide-text {
    opacity: 1;
    transform: translateX(0);
}

.guide-container:hover .guide-icon {
    transform: scale(1.1);
}
#guideModal .nav-tabs {
    border-bottom: 1px solid #ddd;
}

#guideModal .nav-link {
    padding: 8px 12px;
    font-size: 14px;
    color: #333;
    border: none;
    border-radius: 5px 5px 0 0;
}

#guideModal .nav-link i {
    margin-right: 5px;
}

#guideModal .tab-pane {
    padding: 10px;
}

#guideModal .tab-pane h6 {
    margin-bottom: 10px;
    font-weight: bold;
}

#guideModal .tab-pane ul {
    padding-left: 20px;
    font-size: 14px;
}

#guideModal .tab-pane li {
    margin-bottom: 8px;
}
.tab-content {
    text-align: justify;
}
.no-data-swal {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 20px;
    padding-bottom: 20px;
}
.no-data-pet-radar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 5px;
    padding: 10px;
}
.no-data-pet img, .no-data-radar img {
    width: 80px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background: #cccccc4a;
}

.no-data-pet, .no-data-radar {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100px;
}
.button-gift {
    width: 180px;
}
a.no-focus,
a.no-focus:hover,
a.no-focus:focus,
a.no-focus:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important; /* Loại bỏ gạch chân nếu có */
}