.callback-btnmain {
width: 70px;
position: fixed;
height: 70px;
background-color: #0084FF;
border-radius: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
bottom: 20px;
right: 20px;
z-index: 999;
}
.callback-btnmain .static {
position: absolute;
top: 50%;
left: 50%;
margin-top: -19px;
margin-left: -26px;
width: 52px;
height: 52px;
text-align: center;
}
.callback-btnmain .static svg {
width: 24px;
height: 24px;
color: #fff;
}
.callback-btnmain .static p {
color: #fff;
font-weight: 700;
font-size: 10px;
line-height: 11px;
margin: 0;
}
.callback-btnmain .static.hide {
transform: scale(0);
opacity: 0;
}
.callback-btnmain .icons {
background-color: #fff;
width: 44px;
height: 44px;
border-radius: 50px;
position: absolute;
overflow: hidden; top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
}
.callback-btnmain .icons {
transition: 0.2s all;
}
.callback-btnmain .icons-line {
top: 10px;
left: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute; -webkit-transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
-o-transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
transition: cubic-bezier(0.13, 1.49, 0.14, -0.4);
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
height: 24px;
transition: 0.2s all;
}
.callback-btnmain .icons-line.stop {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.callback-btnmain .icons-line span {
display: inline-block;
width: 24px;
height: 24px;
color: red;
}
.callback-btnmain .icons-line span svg {
width: 24px;
height: 24px;
}
.callback-btnmain .icons-line img,
.callback-btnmain .icons-line span {
margin-right: 40px;
}
.callback-btnmain .icons.hide {
transform: scale(0);
opacity: 0;
}
.callback-btnmain .icons.hide .icons-line {
transform: scale(0);
}
.callback-btnmain .icons .icon:first-of-type {
margin-left: 0;
}
.callback-btnmain .pulsation {
width: 84px;
height: 84px;
background-color: red;
border-radius: 50px;
position: absolute;
left: -7px;
top: -7px;
z-index: -1;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-animation: tdcall-pulse 2s infinite;
animation: tdcall-pulse 2s infinite;
}
@-webkit-keyframes tdcall-pulse {
0% {
-webkit-transform: scale(0);
transform: scale(0);
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 0;
}
}
.callback-btnmain .btn-close-temp  svg {
-webkit-transform: rotate(180deg) scale(0);
-ms-transform: rotate(180deg) scale(0);
transform: rotate(180deg) scale(0);
-webkit-transition: ease-in 0.12s all;
-o-transition: ease-in 0.12s all;
transition: ease-in 0.12s all;
display: block;
}
.callback-btnmain .btn-close-temp.show-block svg {
-webkit-transform: rotate(0) scale(1);
-ms-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
}
.callback-countdown {
width: 360px;
box-shadow: 0 0 30px rgba(0,0,0,.2);
background: #fff;
background-repeat: no-repeat;
background-position: center;
position: fixed;
bottom: 100px;
left: auto;
right: 20px;
align-items: center;
border-radius: 7px;
-webkit-transform-origin: 80% 105%;
-ms-transform-origin: 80% 105%;
transform-origin: 80% 105%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: ease-out .12s all;
-o-transition: ease-out .12s all;
transition: ease-out .12s all;
z-index: 1000000;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 18px;
padding-right: 18px;
display: none;
}
.callback-countdown:before {
position: absolute;
bottom: -7px;
right: 25px;
left: auto;
display: inline-block!important;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
content: '';
}
.callback-countdown input {
display: block;
width: 100%;
font-size: 14px !important;
line-height: 16px;
border-radius: 4px !important;
border: 0;
height: 36px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 6px 10px 6px;
border: 1px solid #ddd;
margin: 0 0 10px 0;
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
transition: color .3s,border .3s,background .3s,opacity .3s;
}
.callback-countdown button {
display: block;
width: 100%;
border-radius: 4px;
border: 0;
background-color: #0084FF;
color: #fff;
font-size: 14px;
padding: 7px 5px 7px;
cursor: pointer;
height: 36px;
margin: 0;
line-height: 1;
}
.callback-countdown p {
text-align: center;
margin-bottom: 10px;
margin-top: 3px;
color: #0084ff;
font-size: 15px;
line-height: 18px;
}
.callback-countdown p.label {
font-size: 14px;
margin-bottom: 3px;
color: #333;
text-align: left;
}
.callback-countdown .btn-close {
position: absolute;
right: 9px;
top: 9px;
padding: 0;
margin: 0;
border: 0 none;
line-height: 1;
width: 26px;
height: 26px;
cursor: pointer;
color: #fff;
background: #787878;
border-radius: 50%;
z-index: 1;
text-align: center;
background-color: #0084FF;
}
.callback-countdown .btn-close svg {
height: 12px;
width: 12px;
display: block;
position: absolute;
left: 50%;
top: 50%;
margin: -6px 0 0 -6px;
}
.arcuAnimated {
animation-duration: 0.2s;
animation-fill-mode: both
}
.in-form .msg_form {
font-size: 14px;
padding: 0 0 10px;
color: #333;
}
.out-form {
display: flex;
height: 140px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
color: #0084FF;
}
.callback-list {
display: block;
width: 300px;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
background-color: #FFFFFF;
background-repeat: no-repeat;
background-position: center;
position: fixed;
bottom: 100px;
right: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
padding: 10px 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 7px;
-webkit-transform-origin: 80% 105%;
-ms-transform-origin: 80% 105%;
transform-origin: 80% 105%;
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: ease-out .12s all;
-o-transition: ease-out .12s all;
transition: ease-out .12s all;
z-index: 1000000;
}
.callback-list.callback-block:before {
position: absolute;
bottom: -7px;
right: 25px;
left: auto;
display: inline-block !important;
border-right: 8px solid transparent;
border-top: 8px solid #fff;
border-left: 8px solid transparent;
content: '';
}
.callback-list.callback-block {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.callback-list ul, .callback-list .callback-item {
list-style: none;
margin-bottom: 0;
}
.callback-list .callback-item a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 0;
cursor: pointer;
width: 100%;
padding: 8px 20px 8px 60px;
position: relative;
min-height: 54px;
text-decoration: none;
}
.callback-list .callback-item a:hover {
background-color: #F0F0F0;
}
.callback-list .callback-item a span {
position: absolute;
left: 10px;
top: 50%;
margin-top: -20px;
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #0084ff;
margin-right: 10px;
color: #fff;
text-align: center;
vertical-align: middle;
}
.callback-list .callback-item a span svg {
width: 24px;
height: 24px;
vertical-align: middle;
text-align: center;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -12px;
margin-left: -12px;
}
.callback-list .callback-item a .label {
margin: 0;
font-size: 15px;
color: rgba(0,0,0,.87);
padding: 0;
line-height: 17px;
}
.callback-list .callback-item .title {
display: block;
font-size: 15px;
}
.callback-list .callback-item .subtitle {
display: block;
font-size: 13px;
color: #787878;
}
#td-zalo-chat-widget{
display: none
}
#td-zalo-chat-widget.active{
display: block
}
.fb-customerchat > span > iframe{
right: 10px !important;
left: auto !important;
}
.fb-customerchat > span > iframe.fb_customer_chat_bounce_in_v2_mobile_chat_started{
right: 0 !important;
}
#td-fb-chat{
display: none;
}
#td-fb-chat.active{
display: block;
}
@media only screen and (max-device-width: 480px) { .callback-countdown, .callback-list {
width: 100%;
left: 0;
right: 0;
bottom: 0;
z-index: 999999;
}
}