/* Mobile Styles - Style 2 (Floating Rounded) - Screen < 768px */
@media only screen and (max-width: 768px) {
    .hvd-contact-wrapper {
        position: fixed !important;
        bottom: 5px !important;
        left: 50% !important;
        transform: translateX(-50%);
        right: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 5px;
        /* cac muc cach nhau 5px */
        background: #ffffff;
        /* Nen trang */
        padding: 8px 10px;
        box-sizing: border-box;
        z-index: 9999999;
        border-radius: 30px;
        /* Bo goc */
/*         box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
		box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px !important;
        width: max-content;
        /* Chieu rong bang voi tat ca icon */
        max-width: 95%;
    }

    .hvd-contact-wrapper>div {
        flex: 0 0 auto;
        padding: 0;
        box-shadow: none;
        min-width: unset;
        text-align: center;
        position: relative;
        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
    }

    /* Icon bo tròn */
    .hvd-contact-wrapper>div a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
    }

    /* Use the same background colors as Style 1 but apply to the anchor/container radius */
    .phone-chinh-container a {
        background: #C43B3B;
    }

    .phone-phu-container a {
        background: #00b894;
    }

    .zalo-container a {
        background: #43A0F5;
    }

    .whatsapp-container a {
        background: #25D366;
    }

    .messenger-container a {
        background: #4969FF;
    }

    .telegram-container a {
        background: #0088cc;
    }

    .wechat-container a {
        background: #09B83E;
    }

    .google_map-container a {
        background: #F3B603;
    }

    .custom-contact-container a {
        background: #e1306c;
    }

    .hvd-contact-wrapper>div img {
        width: 24px;
        height: 24px;
        position: relative;
        z-index: 2;
    }

    /* Hide items not selected for mobile display */
    .hvd-contact-wrapper>div.hide-on-mobile {
        display: none;
    }

    /* Mobile effects logic */
    .hvd-contact-wrapper.mobile-effects .cmoz-alo-circle-fill {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background-color: rgba(17, 130, 252, 0.3);
        animation: pulse_zalo_mobile 1.5s infinite;
        z-index: -1;
    }

    @keyframes pulse_zalo_mobile {
        0% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.8;
        }

        100% {
            transform: translate(-50%, -50%) scale(1.5);
            opacity: 0;
        }
    }


    /* Mobile Ordering */
    .hvd-contact-wrapper>div {
        order: 1;
    }

    .hvd-contact-wrapper>div.mobile-pos-first {
        order: 0;
    }

    .hvd-contact-wrapper>div.mobile-pos-last {
        order: 2;
    }

    /* Popup for Style 2 - Floating above the rounded bar */
    .custom-contact-popup {
        display: none;
        position: fixed;
        bottom: 80px;
        left: 10px;
        right: 10px;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
        z-index: 10000;
        max-height: 70vh;
        overflow-y: auto;
        animation: slideUp 0.3s ease-out;
    }

    @keyframes slideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .custom-contact-popup-header {
        position: sticky;
        top: 0;
        background: #fff;
        padding: 10px;
        border-bottom: 1px solid #eee;
        text-align: right;
    }

    .close-popup {
        font-size: 24px;
        padding: 0 10px;
        cursor: pointer;
    }

    .custom-contact-popup-content {
        padding: 15px;
    }
}