/* -------hotline----------- */

.floating-contact {
    position: fixed;
    left: 15px;
    bottom: 15px;

    z-index: 999;

    /* chống giật/trượt */
    transform: translateZ(0);
    will-change: transform;

    /* tránh bị ảnh hưởng bởi parent */
    isolation: isolate;
}

/* ===== Zalo ===== */

.floating-zalo {
    display: inline-flex;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
	right:-15px;
}

.floating-zalo img {
    width: 56px;
    height: 56px;
    display: block;

    border-radius: 50%;
    background: #0068ff;

    transform: translateZ(0);

    box-shadow:
        0 0 0 8px rgba(0, 68, 170, .22),
        0 12px 28px rgba(0, 68, 170, .45);

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    animation: zalo-pulse 2s infinite;
}
.floating-zalo:hover img {
    transform: scale(1.08);

    box-shadow:
        0 0 0 10px rgba(0, 68, 170, .18),
        0 14px 34px rgba(0, 68, 170, .55);
}
/* ===== Hotline ===== */

.hotline-wrap {
    position: relative;
    width: 230px;
    height: 95px;
}

.hotline-ring {
    position: relative;

    width: 95px;
    height: 95px;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 3;

    transform: translateZ(0);
}

/* Circle */

.hotline-circle,
.hotline-circle-fill {
    position: absolute;
    inset: 0;

    border-radius: 50%;

    will-change: transform, opacity;
}

.hotline-circle {
    border: 2px solid #ff3b30;

    animation: hotline-circle 1.5s infinite ease-in-out;
}


.hotline-circle-fill {
    inset: 8px;
    background: rgba(21, 100, 167, 0.7);
    animation: hotline-fill 2s infinite ease-in-out;
}

.hotline-icon {
    position: relative;

    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #ff4d4f, #d70015);

    box-shadow:
        0 0 0 8px rgba(255, 59, 48, .15),
        0 10px 28px rgba(215, 0, 21, .4);

    will-change: transform;

    animation:
        hotline-shake 1s infinite,
        hotline-pulse 2s infinite;
}

.hotline-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;
}

.hotline-bar {
    position: absolute;

    left: 45px;
    bottom: 24px;

    height: 48px;
    padding: 0 22px 0 40px;

    display: inline-flex;
    align-items: center;

    border-radius: 999px;

    background: linear-gradient(90deg, #ff4d4f, #d70015);

    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .5px;
    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0 10px 30px rgba(215, 0, 21, .28);

    z-index: 1;
}

/* ===== Mobile ===== */

@media (max-width: 768px) {

    .floating-contact {
        left: 10px;      
    }

    .floating-zalo img {
        width: 50px;
        height: 50px;
    }

    .hotline-wrap {
        width: 90px;
    }

    .hotline-bar {
        display: none;
    }

    .hotline-ring {
        width: 85px;
        height: 85px;
    }    
}

/* ===== Animation ===== */

@keyframes hotline-circle {
    0% {
        transform: scale(.5);
        opacity: .2;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes hotline-fill {
    0%,
    100% {
        transform: scale(.8);
    }

    50% {
        transform: scale(1);
    }
}

@keyframes hotline-shake {
    0%,
    100% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(-15deg);
    }

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

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

@keyframes hotline-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(255, 59, 48, .25),
            0 10px 28px rgba(215, 0, 21, .4);
    }

    50% {
        box-shadow:
            0 0 0 12px rgba(255, 59, 48, 0),
            0 10px 28px rgba(215, 0, 21, .4);
    }
}

@keyframes zalo-pulse {
    0%,
    100% {
        box-shadow:
            0 0 0 0 rgba(0, 104, 255, .25),
            0 10px 25px rgba(0, 104, 255, .35);
    }

    50% {
        box-shadow:
            0 0 0 12px rgba(0, 104, 255, 0),
            0 10px 25px rgba(0, 104, 255, .35);
    }
}

/*------------------------------------------------*/

.hotline-footer {
    font-weight: 700;
    animation: hotlinef .7s infinite alternate;
    will-change: color;
}

@keyframes hotlinef {
    from {
        color: #ffc000;
        text-decoration-color: transparent;
    }
    to {
        color: #ff0000;
        text-decoration-color: currentColor;
    }
}