.menu-item{ overflow:hidden;  border-radius: 100%;width: 68px; height: 68px; margin-top:1px;  margin-left: -34px; position: absolute; color: white; text-align: center; line-height: 70px;-webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);-webkit-transition: -webkit-transform ease-out 200ms;transition: -webkit-transform ease-out 200ms; transition: transform ease-out 200ms;transition: transform ease-out 200ms, -webkit-transform ease-out 200ms;}
.menu-item:before{content:''; position:absolute; border-color:#3e9dd7;}
.menu-item span{width:100%; text-align:center; color:#fff; position:absolute; bottom:7px; left:0; font-size:8px; line-height:normal; letter-spacing:1px;}
.menu-open-button { background:#006fb4 url(../images/phonepro/chat-smartphones.svg) no-repeat center; background-size: 34px auto;  border-radius: 100%;width: 70px; height: 70px;  margin-left: -35px; position: absolute; color: white; text-align: center; line-height: 70px; transition:.2s; cursor:pointer; }
.menu-item.viber-item{background:#3e9dd7 url(../images/phonepro/viber.png) no-repeat center; background-size:100% auto; }
.menu-item.viber-item:before{border-right:7px solid #3e9dd7; border-top:7px solid transparent; border-bottom:7px solid transparent; left:-6px; top:50%; margin-top:-7px;}
.menu-item.skype-item{background:url(../images/phonepro/skype.png) no-repeat center; background-size:100% auto; }
.menu-item.skype-item:before{border-top:7px solid #3e9dd7; border-left:7px solid transparent; border-right:7px solid transparent; bottom:-6px; left:50%; margin-left:-7px;}
.menu-item.zalo-item{background:url(../images/phonepro/zalo.png) no-repeat center; background-size:100% auto; }
.menu-item.zalo-item:before{border-left:7px solid #3e9dd7; border-top:7px solid transparent; border-bottom:7px solid transparent; right:-6px; top:50%; margin-top:-7px;}
.menu-open {display: none;}
.wrap-menu-support{width:100%; position:relative; float:left; }
.menu-support { transition:.3s; bottom:-200px; opacity:0; visibility:hidden; z-index:100; position: absolute; left: 50%;margin-left: -190px; padding-top: 20px; padding-left: 190px; width: 380px; height: 250px; box-sizing: border-box; font-size: 20px; text-align: left;}
.menu-item:hover {color: #e91e63;}
.menu-support.show{position:fixed; top:initial;  bottom:-145px; opacity:1; visibility:initial; }
.menu-item:nth-child(3) {-webkit-transition-duration: 180ms; transition-duration: 180ms;}
.menu-item:nth-child(4) {-webkit-transition-duration: 180ms; transition-duration: 180ms;}
.menu-item:nth-child(5) { -webkit-transition-duration: 180ms;  transition-duration: 180ms;}
.menu-open-button { z-index: 5; -webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);-webkit-transition-duration: 400ms; transition-duration: 400ms;  cursor: pointer;}
.menu-open-button:hover { -webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0); transform: scale(1.2, 1.2) translate3d(0, 0, 0);}
.menu-open:checked + .menu-open-button {width:50px; height:50px; margin:10px 0 0 -25px; background:#006fb4 url(../images/phonepro/close.svg) no-repeat center; background-size: 17px auto}
.menu-open:checked ~ .menu-item { opacity:1; z-index:3; overflow:initial;  box-shadow: 0 2px 5px rgba(0,0,0,.2);-webkit-transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);transition-timing-function: cubic-bezier(0.935, 0, 0.34, 1.33);}
.menu-open:checked ~ .menu-item:nth-child(3) {-webkit-transition-duration: 180ms;transition-duration: 180ms;-webkit-transform: translate3d(-85px, 2px, 0);transform: translate3d(-85px, 2px, 0);}
.menu-open:checked ~ .menu-item:nth-child(4) {-webkit-transition-duration: 280ms;transition-duration: 280ms;-webkit-transform: translate3d(0.08361px, -82px, 0);transform: translate3d(0.08361px, -82px, 0);}
.menu-open:checked ~ .menu-item:nth-child(5) {-webkit-transition-duration: 380ms;transition-duration: 380ms;-webkit-transform: translate3d(85px, 2px, 0);transform: translate3d(85px, 2px, 0);}
.panel-is-open .menu-item,.panel-is-open .menu-open-button{opacity:0; visibility:hidden;}
.close-panel-support{ background:#006fb4 url(close.svg) no-repeat center; background-size: 17px auto; width:50px; height:50px; border-radius:50%; position:absolute; top:30px; left:50%; margin-left:-25px; z-index:5; display:block; transition:.3s; opacity:0; visibility:hidden;}
.close-panel-support:hover{-webkit-transform: scale(1.2, 1.2) translate3d(0, 0, 0);transform: scale(1.2, 1.2) translate3d(0, 0, 0);}
.panel-is-open .close-panel-support{opacity:1; visibility:initial;}
.panel-support{width: 48px; height:48px; padding:15px; margin-left:-24px; position:absolute; top:31px; left:50%; background:#3e9cd6; z-index:2; border-radius:50%; transition:.3s; line-height:normal; overflow:hidden;}
.panel-support .wrap-img{width:100%; float:left; margin:10px 0; border:5px solid #fff;}
.panel-support .wrap-img img.qr{width:100%; float:left;}
.panel-support .wrap-img .slider-note{width:270px; height:493px; position:absolute; right:-270px; bottom:-90px; padding:2px 5px; visibility:hidden; opacity:0; transition:.3s; }
.panel-support .wrap-img .slider-note.zalo{left:-270px;}
.panel-support .wrap-img:hover .slider-note{right:-300px; visibility:initial; opacity:1;}
.panel-support .wrap-img:hover .slider-note.zalo{left:-300px;}
.panel-support .wrap-img .slider-note:after{content:''; width:100%; height:100%; border-radius:40px; z-index:1; box-shadow: 10px 10px 40px rgba(0,0,0,.2); display:block; }
.panel-support .wrap-img .slider-note:before{content:''; width:100%; height:100%; background:url(flat-wireframes-mobile.png) no-repeat 0 0; background-size:100% auto; position:absolute; top:0; left:0; z-index:2;}
.panel-support .wrap-img .slider-note img{width:240px; height:377px; position:absolute; top:50px; left:15px; z-index:5; border:1px solid rgba(0,0,0,.07) }
.panel-support span{color:#fff; font-size:12px; text-align:center; line-height:normal; display:block;}
.panel-support span b{font-size:15px; letter-spacing:1px; display:block;}
.panel-support.show{width: 180px; height:270px; margin-left:-90px; top:-265px; left:50%; border-radius:8px;  box-shadow: 0 1px 15px rgba(0,0,0,.25); overflow:initial; }
.panel-support.show:before{content:''; border-top:10px solid #3e9cd6; border-left:10px solid transparent; border-right:10px solid transparent; position:absolute; bottom:-10px; left:50%; margin-left:-10px;}
.circle-shadow {background:none; width: 70px; height: 70px; border-radius: 50%; animation: ripple 0.7s linear infinite; z-index:1; position:absolute; top:20px; left:50%; margin-left:-35px; transition:.2s; }
.circle-shadow.selected,.panel-is-open .circle-shadow{width:50px; height:50px; margin:10px 0 0 -25px;}
@keyframes ripple {0% {box-shadow: 0 0 0 0 rgba(0, 111, 180, 0.1),0 0 0 1em rgba(0, 111, 180, 0.1),0 0 0 3em rgba(0, 111, 180, 0.1),0 0 0 5em rgba(0, 111, 180, 0.1);}100% {box-shadow: 0 0 0 1em rgba(0, 111, 180, 0.1),0 0 0 3em rgba(0, 111, 180, 0.1),0 0 0 5em rgba(0, 111, 180, 0.1),0 0 0 8em rgba(0, 111, 180, 0);}}
@media (max-width:767px) {
    .panel-support .wrap-img .slider-note{display:none!important;}
}

.menu-support input[type="checkbox"], input[type="radio"] {
    border: none;
    display: none;
}

 

	.hotline-phone-ring-circle{width:85px;height:85px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:0px solid #e60808;-webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;opacity:.5}
.hotline-phone-ring-circle-fill {
    width: 50px;
    height: 50px;
    top: 24px;
    left: 28px;
    position: absolute;
    background-color: #ff00004a;
    border-radius: 100%;
    border: 2px solid transparent;
    -webkit-animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    animation: phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;
    transition: all .5s;
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}
.hotline-phone-ring-img-circle{background-color:#e4212a;width:40px;height:40px;top:29px;left:34px;position:absolute;background-size:20px;border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}
.hotline-phone-ring-img-circle .pps-btn-img{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.hotline-phone-ring-img-circle .pps-btn-img img{width:20px;height:20px}

.hotline-bar{position:absolute;background:#e88a25;background:-webkit-linear-gradient(left,#e88a25,#d40000);background:-o-linear-gradient(right,#e88a25,#d40000);background:-moz-linear-gradient(right,#e88a25,#d40000);background:linear-gradient(to right,#e88a25,#e4212a);height:40px;width:200px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all .8s;-webkit-transition:all .8s;z-index:9;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.1);border-radius:50px !important;border:2px solid #fff;left:33px;bottom:56px}.hotline-bar>a{color:#fff;text-decoration:none;font-size:18px;font-weight:900;text-indent:50px;display:block;letter-spacing:1px;line-height:38px;font-family:Arial}.hotline-bar>a:hover,.hotline-bar>a:active{color:#fff}@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(.5) skew(1deg);-webkit-opacity:.1}30%{-webkit-transform:rotate(0) scale(.7) skew(1deg);-webkit-opacity:.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:.1}}@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.6}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:.6}100%{-webkit-transform:rotate(0) scale(.7) skew(1deg);opacity:.6}}@-webkit-keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}@media (max-width:768px){.hotline-bar{display:none}}

.hotline-phone-ring-img-circle .pps-btn-img img {
    width: 20px;
    height: 20px;
}
img {
    border: none;
}


.hotline-phone-ring-wrap {
    position: fixed !important;
    bottom: 80px;
    right: 0;
    z-index: 1000;
}

.hotline-phone-ring {
    position: relative;
    visibility: visible;
    background-color: transparent;
    width: 110px;
    height: 110px;
    cursor: pointer;
    z-index: 11;
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transition: visibility .5s;
    right: 0;
    bottom: 14px;
    display: block;
}


.float-icon-hotline {
    display: block;
    width: 40px;
    position: fixed;
    bottom: 180px;
    right: 33px;
    z-index: 1000;
}
	

.float-icon-hotline ul {
    display: block;
    width: 100%;
    padding-left: 0;
    margin-bottom: 0;
}
.float-icon-hotline ul li {
    display: block;
    width: 100%;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
}
.float-icon-hotline ul li a#messengerButton {
    padding: 0px !important;
    background: transparent !important;
    border: 0px !important;
}
@media only screen and (min-width: 960px)
{
	.float-icon-hotline ul li .fa {
		background-size: contain !important;
	}
}
.float-icon-hotline ul li .fa-phone {
    background-color: #ed1c24;
}
.float-icon-hotline ul li .fa {
    background-color: #ed1c24;
    display: block;
    width: 40px;
    height: 40px;
    text-align: center;
    line-height: 36px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    position: relative;
    z-index: 2;
    border: 2px solid #fff;
}
.animated.infinite {
    animation-iteration-count: infinite;
}
.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}
.tada {
    animation-name: tada;
}
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.float-icon-hotline ul li span {
    display: inline-block;
    padding: 0;
    background-color: #ff6a00;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 20px;
    height: 40px;
    line-height: 36px;
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 0;
    width: 0;
    overflow: hidden;
    -webkit-transition: all 1s;
    transition: all 1s;
    background-color: #ff6a00;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    font-weight: 400;
    white-space: nowrap;
    opacity: 0;
}

ul.left-icon.hotline {
    margin-left: 0px !important;
}


.float-icon-hotline ul li .fa-zalo {
    background: url(/uploads/zalo.png) center center no-repeat;
}
.float-icon-hotline ul li .fa-zalo:hover {
    background: #ef0303 url(/uploads/zalo.png) center center no-repeat;opacity:.5;
}
.float-icon-hotline ul li .fa-messenger {
    background:  url(/uploads/messenger.png) center center no-repeat;
}
.float-icon-hotline ul li .fa-messenger:hover {
    background: #168efb url(/uploads/messenger.png) center center no-repeat;opacity:.5;
}