/* HOTLINE */

@keyframes play0 {
    0% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }

    50% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }

    100% {
        transform: rotate(0deg) scale(1) skew(1deg)
    }
}
.play0 {
    animation: play0 1.5s ease infinite
}
.fix-phone {
    position: fixed;
    bottom: 0;
    top: inherit !important;
    z-index: 9;
    right: 0;
    display: flex;
    border-top-left-radius: 20px;
    justify-content: center;
    align-items: center;
    /*background-color: #223b6c;*/
    background: linear-gradient(90deg, #f3f3f3 25%, #f8f9fb 100%);
    padding: 0.3rem !important;
    padding-left: 0.3rem !important;
    padding-right: 1rem !important;
    box-shadow: 0 0 10px 0 rgb(0 0 0 / 38%);
}
@media (min-width: 992px) {
    .fix-phone:before {
        content: "";
        position: absolute;
        height: 15px;
        width: 20px;
        bottom: -1px;
        left: -20px;
        border-radius: 0 0 30px 0;
        box-shadow: 10px 0 0 0 #f3f3f3;
        pointer-events: none;
    }
}
.phone-box, .zalo-box, .fb-box {
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 30px;
    background: #663611;
    border: 2px solid #f8f9fa !important;
    position: relative;
    margin: auto;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    margin-left: 1.2rem !important;
}
    .phone-box:hover, .zalo-box:hover, .fb-box:hover {
        transform: inherit;
        align-items: center;
        justify-content: center !important;
        transform: translateY(-5px);
    }
    .phone-box img, .zalo-box img, .fb-box img {
        max-width: 25px;
    }
/* ------ End Layout 2 -----*/
/*Mobile*/
@media (max-width: 991px) {
    .mew_mobi_bar {
        top: initial !important;
        bottom: 0;
        background: #fff;
        width: 100%;
        height: 50px;
        z-index: 11;
        box-shadow: 0 3px 25px 0 rgb(31 38 67 / 50%);
        -o-box-shadow: 0 3px 25px 0 rgba(31,38,67,.5);
        -moz-box-shadow: 0 3px 25px 0 rgba(31,38,67,.5);
        -webkit-box-shadow: 0 3px 25px 0 rgb(31 38 67 / 50%);
        border-top-left-radius: 15px;
        border-top-right-radius: 15px
    }
        .mew_mobi_bar .item {
            width: 25%;
            color: #be986e;
            outline: none !important;
            text-decoration: none !important;
        }
       
            .mew_mobi_bar .item .btn-cart-indicator {
                min-width: 20px;
                height: 20px;
                top: -6px;
                right: 2px;
                padding: 3px;
                background: #f00;
                color: #fff;
                border-radius: 50%;
                line-height: 15px;
                font-size: 13px
            }

            .mew_mobi_bar .item svg {
                max-width: 20px;
                margin: 0 auto;
                fill: #be986e
            }
            .mew_mobi_bar .item .tit {
                font-size: 10px
            }

            .mew_mobi_bar .item.active svg, .mew_mobi_bar .item:hover svg, .mew_mobi_bar .item.open svg {
                fill: #663710;
            }
            .mew_mobi_bar .item.active svg, .mew_mobi_bar .item:hover svg, .mew_mobi_bar .item.open svg {
                fill: #663710;
            }
            .mew_mobi_bar .item.active .tit, .mew_mobi_bar .item:hover .tit, .mew_mobi_bar .item.open .tit {
                color: #663710;
            }

    .fix-phone {
        min-width: 165px;
        overflow: hidden;
        position: fixed;
        bottom: 55px;
        left: 50%;
        right: auto;
        transform: translate(-50%) scale(1);
        border-radius: 6px;
        background: #fff;
        padding: 10px 0;
        z-index: 9;
        top: inherit !important;
        box-shadow: 0px 0px 2px 2px rgba(45,52,58,0.1);
        opacity: 0;
        transition: 0.7s all;
        visibility: hidden
    }

        .fix-phone.fix-phone.active {
            animation-name: contact_bar;
            animation-duration: 0.7s;
            opacity: 1;
            pointer-events: auto;
            z-index: 11;
            visibility: visible
        }
}