/* --- CSS CHO FOOTER (THEO MẪU) --- */

/* Chỉnh cỡ chữ chung cho toàn bộ Footer */
.footer {
    font-size: 1rem !important;
}

    /* Chỉnh cỡ chữ cho các tiêu đề cột (SƠ LƯỢC, LIÊN HỆ...) */
    .footer h6 {
        font-size: 1.5rem !important; /* To hơn một chút để làm nổi bật tiêu đề */
        margin-bottom: 2rem;
    }

    /* Chỉnh cỡ chữ cho các đoạn văn bản và danh sách */
    .footer p,
    .footer ul li,
    .footer .contact-list {
        font-size: 1rem; /* Đảm bảo đồng bộ 16px */
        line-height: 1.8; /* Tăng khoảng cách dòng để nhìn không bị dính chữ */
    }

    /* Chỉnh cỡ chữ cho phần bản đồ và copyright dưới cùng */
    .footer-bottom, .footer .small {
        font-size: 0.9rem !important; /* Phần này thường để nhỏ hơn một chút so với nội dung chính */
    }
/* Màu camhighlight cho địa chỉ */
.highlight-orange {
    color: #ffc107;
}

/* Danh sách thông tin liên hệ */
.contact-list p {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
}

.contact-list i {
    margin-top: 3px;
    color: rgba(255,255,255,0.8);
}

/* Danh sách chính sách */
.list-unstyled li {
    margin-bottom: 0.4rem;
}

.list-unstyled a {
    transition: 0.2s;
}

    .list-unstyled a:hover {
        opacity: 0.8;
        padding-left: 2px;
    }

/* --- NÚT HỖ TRỢ CHAT (CỐ ĐỊNH MOBIL) --- */
.btn-zalo {
    background-color: #0d6efd; /* Xanh Zalo */
    color: white;
}

.btn-facebook {
    background-color: #1a6ff2; /* Xanh FB */
    color: white;
}

.btn-hotline-footer {
    background-color: red;
    color: white;
}

    .btn-hotline-footer:hover {
        color: white;
        background-color: #b30000;
    }

/* Hover cho Icon Social */
.social-icons-footer a {
    transition: 0.3s;
}

    .social-icons-footer a:hover {
        background-color: #ffc107;
        border-color: #ffc107 !important;
        color: #1e74fd !important;
        transform: scale(1.1);
    }

/* --- CSS CHO THANH BOTTOM (PAYMENT) --- */
.footer-bottom {
    font-size: 0.8rem;
}

/* --- RESPONSIVE --- */
@media (max-width: 991px) {
    .footer {
        text-align: center;
    }

    .contact-list p {
        justify-content: center;
    }

    .mobile-fixed-buttons {
        align-items: center;
        display: flex !important;
    }

    .social-icons-footer {
        justify-content: center !important;
    }
}

.floating-contact-group {
    position: fixed;
    bottom: 20px; /* Cách đáy 20px */
    left: 20px; /* Cách trái 20px */
    z-index: 9999; /* Luôn nằm trên cùng */
    display: flex;
    flex-direction: column;
    gap: 10px; /* Khoảng cách giữa các nút */
}

.floating-btn {
    display: flex;
    align-items: center;
    text-decoration: none !important;
    color: white !important;
    padding: 8px 20px;
    border-radius: 50px; /* Bo tròn hoàn toàn */
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    width: fit-content;
}

    .floating-btn i {
        margin-right: 10px;
        font-size: 18px;
    }

/* Màu sắc cho nút Chat với nhân viên */
.btn-staff-float {
    background: #28a745; /* Màu xanh lá biểu thị sự sẵn sàng hỗ trợ */
}

    /* Hiệu ứng rung nhẹ để khách hàng chú ý vào nút nhân viên */
    .btn-staff-float i {
        animation: swing 2s infinite;
    }

@keyframes swing {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(10deg);
    }

    30% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(5deg);
    }

    70% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

/* Màu sắc theo ảnh mẫu */
.btn-zalo-float {
    background: #0084ff; /* Xanh Zalo */
}

.btn-fb-float {
    background: #1877f2; /* Xanh Facebook */
}

.btn-phone-float {
    background: #ff0000; /* Đỏ Hotline */
    animation: pulse-red 2s infinite; /* Hiệu ứng nhấp nháy cho hotline */
}

/* Hiệu ứng hover */
.floating-btn:hover {
    transform: translateX(10px); /* Nhích nhẹ ra khi di chuột vào */
    filter: brightness(1.1);
}

/* Hiệu ứng nhấp nháy cho nút Hotline để thu hút sự chú ý */
@keyframes pulse-red {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
    }
}

/* Ẩn trên màn hình quá nhỏ nếu cần hoặc chỉnh lại kích thước */
@media (max-width: 480px) {
    .floating-btn span {
        display: none; /* Mobile chỉ hiện icon cho gọn */
    }

    .floating-btn {
        padding: 10px;
        border-radius: 50%;
    }

        .floating-btn i {
            margin-right: 0;
        }
}