.floating-btn-contact a:hover,
.floating-btn-contact a:focus,
.floating-btn-contact button:hover,
.floating-btn-contact button:focus {
    text-decoration: none;
    outline: none;
    box-shadow: none;
}

.floating-btn-contact {position: fixed;bottom: 50px;left:20px;z-index: 100; display: flex}
.floating-btn-contact a {display: flex;width: 170px;margin-right: 12px;}
.floating-btn-contact i, .floating-btn-contact span {align-self: center}
.floating-btn-contact i, .floating-btn-contact span {display: inline-block;}
.floating-btn-contact i {font-style: normal;background: #fff;height: 47px;border-radius: 50%;text-align: center;line-height: 44px;border: 2px solid #7f4c9b;position: relative;flex: 0 0 48px;}
.floating-btn-contact span {background:#a52a2a !important;border-radius: 10px !important;border-radius: 0 30px 30px 0;margin-left: -12px;color: #fff;font-family: 'Oswald', sans-serif;font-size: 16px;width: 100%;padding: 8px 0 8px 6px;text-align: center; display: block; position: relative;}

.floating-btn-contact span::before {
    content: "\f095";
    font-family: FontAwesome;
    position: absolute;
    font-size: 18px;
    line-height: 26px;
    left: 15px;
   
    -webkit-animation: ring 4s 0.7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s 0.7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s 0.7s ease-in-out infinite;
    transform-origin: 50% 4px;
}

.floating-btn-contact i {
    -webkit-animation: spread 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: spread 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: spread 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
    display: block;
}

.floating-btn-contact i img {
    -webkit-animation: ring 4s .7s ease-in-out infinite;
    -webkit-transform-origin: 50% 4px;
    -moz-animation: ring 4s .7s ease-in-out infinite;
    -moz-transform-origin: 50% 4px;
    animation: ring 4s .7s ease-in-out infinite;
    transform-origin: 50% 4px;
    display: block;
    margin-top: 8px;
    margin-left: 8px;
}

@keyframes spread {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,1); }
  1% { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
  3% { box-shadow: 0 0 0 4px rgba(255,255,255,.8); }
  5% { box-shadow: 0 0 0 6px rgba(255,255,255,.7); }
  7% { box-shadow: 0 0 0 8px rgba(255,255,255,.6); }
  9% { box-shadow: 0 0 0 10px rgba(255,255,255,.5), 0 0 0 0 rgba(255,255,255,0); }
  11% { box-shadow: 0 0 0 12px rgba(255,255,255,.4), 0 0 0 4px rgba(255,255,255,.2); }
  13% { box-shadow: 0 0 0 14px rgba(255,255,255,.3), 0 0 0 6px rgba(255,255,255,.2);}
  15% { box-shadow: 0 0 0 16px rgba(255,255,255,.2), 0 0 0 8px rgba(255,255,255,.2);; }
  17% { box-shadow: 0 0 0 18px rgba(255,255,255,.1), 0 0 0 10px rgba(255,255,255,.2);; }
  19% { box-shadow: 0 0 0 20px rgba(255,255,255,0), 0 0 0 18px rgba(255,255,255,0);; }

  21% { box-shadow: 0 0 0 0 rgba(255,255,255,1); }
  23% { box-shadow: 0 0 0 2px rgba(255,255,255,.9); }
  25% { box-shadow: 0 0 0 4px rgba(255,255,255,.8); }
  27% { box-shadow: 0 0 0 6px rgba(255,255,255,.7); }
  29% { box-shadow: 0 0 0 8px rgba(255,255,255,.6); }
  31% { box-shadow: 0 0 0 10px rgba(255,255,255,.5), 0 0 0 0 rgba(255,255,255,0); }
  33% { box-shadow: 0 0 0 12px rgba(255,255,255,.4), 0 0 0 4px rgba(255,255,255,.2); }
  35% { box-shadow: 0 0 0 14px rgba(255,255,255,.3), 0 0 0 6px rgba(255,255,255,.2);}
  37% { box-shadow: 0 0 0 16px rgba(255,255,255,.2), 0 0 0 8px rgba(255,255,255,.2);; }
  39% { box-shadow: 0 0 0 18px rgba(255,255,255,.1), 0 0 0 10px rgba(255,255,255,.2);; }
  41% { box-shadow: 0 0 0 20px rgba(255,255,255,0), 0 0 0 18px rgba(255,255,255,0);; }

  43% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

@keyframes ring {
  0% { transform: rotate(0); }
  1% { transform: rotate(30deg); }
  3% { transform: rotate(-28deg); }
  5% { transform: rotate(34deg); }
  7% { transform: rotate(-32deg); }
  9% { transform: rotate(30deg); }
  11% { transform: rotate(-28deg); }
  13% { transform: rotate(26deg); }
  15% { transform: rotate(-24deg); }
  17% { transform: rotate(22deg); }
  19% { transform: rotate(-20deg); }
  21% { transform: rotate(18deg); }
  23% { transform: rotate(-16deg); }
  25% { transform: rotate(14deg); }
  27% { transform: rotate(-12deg); }
  29% { transform: rotate(10deg); }
  31% { transform: rotate(-8deg); }
  33% { transform: rotate(6deg); }
  35% { transform: rotate(-4deg); }
  37% { transform: rotate(2deg); }
  39% { transform: rotate(-1deg); }
  41% { transform: rotate(1deg); }
  43% { transform: rotate(0); }
  100% { transform: rotate(0); }
}



.support-hotline {
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 22;
    pointer-events: auto;
    cursor: pointer
}
.support-hotline .div_title a:hover span.icon {
    border-radius: 0;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}
.support-hotline .div_title span.icon {
    width: 45px;
    height: 45px;
    position: relative;
    display: block;
    color: #fff;
    border-radius: 100%;
    text-align: center;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}
.support-hotline .div_title span.icon i {
    font-size: 18px;
    line-height: 38px
}
.support-hotline .div_title span.icon span {
    font-size: 10px;
    display: block
}
.support-hotline ul.desktopFx  li {
    margin-bottom: 10px
}
.support-hotline ul.desktopFx  li:last-child {
    margin-bottom: 0;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear
}


.support-hotline ul.desktopFx li>a {
    width: 45px;
    height: 45px;
    border-radius: 100%;
    color: #ffff;
    display: block;
    text-align: center;
    -webkit-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
    position: relative
}
.support-hotline ul.desktopFx li>a i, .support-hotline ul.desktopFx li>a span {
    line-height: 45px;
    font-size: 16px
}

.support-hotline ul.desktopFx > li >  a > span {
     display: block;
      height: 45px;
    width: 45px;
     
}

.support-hotline  ul.desktopFx li.phoneFx > a > span  {   
    background: url('../images/support-phone.png') no-repeat  ;
    background-size: contain;   
   
}

.support-hotline  ul.desktopFx li.facebookFx > a > span  {   
    background: url('../images/support-messenger.png') no-repeat  ;
    background-size: contain;   
   
}
.support-hotline  ul.desktopFx li.zaloFx > a > span  {   
    background: url('../images/support-zalo.png') no-repeat  ;
    background-size: contain;   
   
}

.support-hotline ul.desktopFx li.gotopFx a {
    background-color: #0f75bc;
}

.support-hotline  ul.desktopFx li>a i {
    width: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
    -webkit-animation: bouncez 1.2s .5s infinite;
    -o-animation: bouncez 1.2s .5s infinite;
    animation: bouncez 1.2s .5s infinite
}
@keyframes bouncez {
    0%, 100%, 20%, 50%, 80% {
        transform: translate(-50%, -50%)
    }
    40% {
        transform: translate(-50%, -70%)
    }
    60% {
        transform: translate(-50%, -60%)
    }
}
@-webkit-keyframes bouncez {
    0%, 100%, 20%, 50%, 80% {
        -webkit-transform: translate(-50%, -50%)
    }
    40% {
        -webkit-transform: translate(-50%, -70%)
    }
    60% {
        -webkit-transform: translate(-50%, -60%)
    }
}
@-moz-keyframes bouncez {
    0%, 100%, 20%, 50%, 80% {
        -moz-transform: translate(-50%, -50%)
    }
    40% {
        -moz-transform: translate(-50%, -70%)
    }
    60% {
        -moz-transform: translate(-50%, -60%)
    }
}
@-o-keyframes bouncez {
    0%, 100%, 20%, 50%, 80% {
        -o-transform: translate(-50%, -50%)
    }
    40% {
        -o-transform: translate(-50%, -70%)
    }
    60% {
        -o-transform: translate(-50%, -60%)
    }
}


@media all and (max-width:991px) {
    .support-hotline {
        top: initial;
        bottom: 0;
        left: 0;
        right: 0;
        transform: initial
    }


    .support-hotline ul.mobileFx {
        display: flex;
        align-items: center;
        align-content: center ;

        
        background: #ddd;
        border-top: 1px solid #eee;
        bottom: 0;
        box-shadow: 0 -1px 2px 0 rgb(60 64 67 / 30%), 0 -2px 6px 2px rgb(60 64 67 / 15%);
        height: 50px;
         width: 100%;
 
       

    }
    .support-hotline ul.mobileFx li {
        color: #333;
        display: block;

        font-size: 12px;
        line-height: 1;
        padding: 5px 2px;
        text-align: center;
        width: 25%;
        z-index: 7;
    }

    .support-hotline ul.mobileFx li + li {
        border-left: 1px solid #cacaca;
    }

    .support-hotline ul.mobileFx li a {
        position: relative;
        display: block;
    }

       .support-hotline ul.mobileFx li> a img {
          height: 25px;
        width: 25px;
         vertical-align: middle;
    }

    .support-hotline ul.mobileFx li a svg {
        height: 25px;
        width: 25px;
        vertical-align: middle;
    }
    .support-hotline ul.mobileFx li a svg path {
        fill: #1e88e5;
    }

    .support-hotline ul.mobileFx li> a i {
          height: 25px;
        width: 25px;
        font-size: 18px;
        line-height: 25px;
    }

    .support-hotline ul.mobileFx li a span {
        display: block;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: normal;
    }

}