/*============ STYLE 1 ================*/

.ppocta-ft-fix {

	position: fixed;

	bottom: 5px;

	left: 10px;

	min-width: 120px;

	text-align: center;

	z-index: 99999;

}

#messengerButton {

	display: inline-block;

	margin-right: 10px;

	width: 50px;

	height: 50px;

	background: #4267B2;

	border-radius: 50%;

	box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

}

#messengerButton>a>i {

	background: url(../images/messenger.png) center center no-repeat;

	background-size: 57%;

	width: 50px;

	height: 50px;

	display: inline-block;

}

#zaloButton {

	display: inline-block;

	margin-right: 10px;

	width: 50px;

	height: 50px;

	background: #5AC5EF;

	border-radius: 50%;

	box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

}

#zaloButton>a>i {

	background: url(../images/zalo.png) center center no-repeat;

	background-size: 57%;

	width: 50px;

	height: 50px;

	display: inline-block;

}

#registerNowButton {

	display: inline-block;

	color: #fff;

	height: 50px;

	width: 50px;

	border-radius: 50%;

	margin-right: 10px;

	background: url(../images/regbutton.png) center center no-repeat #ff0000;

	box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

	text-decoration: none;

}

#callNowButton {

	display: inline-block;

	position: relative;

	border-radius: 50%;

	color: #fff;

	width: 50px;

	height: 50px;

	line-height: 50px;

	box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.7);

}

#callNowButton a {

	display: block;

	text-decoration: none;

	outline: none;

	color: #fff;

	text-align: center;

}

#callNowButton i {

	border-radius: 50%;

	display: inline-block;

	width: 50px;

	height: 50px;

	background: url(../images/callbutton.png) center center no-repeat #009900;

}

#callNowButton a.txt {

	position: absolute;

	top: -40px;

	left: calc(50% - 60px);

	background: #009900;

	width: 120px;

	max-width: 120px;

	line-height: 2;

	text-transform: uppercase;

	border-radius: 5px;

	font-size: 15px;

}



#callNowButton a.txt:after {

	position: absolute;

	bottom: -8px;

	left: 50px;

	content: "";

	width: 0;

	height: 0;

	border-top: 8px solid #009900;

	border-left: 10px solid transparent;

	border-right: 10px solid transparent;

}

@media (max-width: 991px) {

	.ppocta-ft-fix {

		display: block;

	}

}





/*============ STYLE 2 ================*/

.box-style-2 {

	position:fixed;

	display:none;

	bottom:0;

	left:0;

	width:100%;

	z-index:999;

	background: #0066FF;

	overflow:hidden;

}



@media(max-width:668px) {

	.box-style-2 { display:block;}

}



.box-style-2 .box_item {

	float:left;

	text-align:center;

	width:30%;

	padding:10px 0;

}

.box-style-2 .box_item img {

	width: 30%;

	max-width: 35px !important;

	vertical-align: middle;

	margin-right:10px;

}

.box-style-2 .box_item a {

	display:inline-block;

	color:#fff;

	font-size:15px;;

}

.blink_me {

	-webkit-animation-name: blinker;

	-webkit-animation-duration: 1s;

	-webkit-animation-timing-function: linear;

	-webkit-animation-iteration-count: infinite;

	-moz-animation-name: blinker;

	-moz-animation-duration: 1s;

	-moz-animation-timing-function: linear;

	-moz-animation-iteration-count: infinite;

	animation-name: blinker;

	animation-duration: 1s;

	animation-timing-function: linear;

	animation-iteration-count: infinite;

}

@-moz-keyframes blinker {  

	0% { opacity: 1.0; }

	50% { opacity: 0.0; }

	100% { opacity: 1.0; }

}



@-webkit-keyframes blinker {  

	0% { opacity: 1.0; }

	50% { opacity: 0.0; }

	100% { opacity: 1.0; }

}



@keyframes blinker {  

	0% { opacity: 1.0; }

	50% { opacity: 0.0; }

	100% { opacity: 1.0; }

}



/*============================= STYLE 3 ==============================*/

.cmi-box-style-3 {

	position: fixed;

    bottom: 210px;

    z-index:999;

}



.cmi-box-style-3.phone-left { left:0px; }

.cmi-box-style-3.phone-right { right:225px; }

.quick-alo-phone .quick-alo-show {

    visibility: visible;

}

.quick-alo-phone {

    position: fixed;

    visibility: hidden;

    background-color: transparent;

    height: 200px;

    width: 82px;

    height: 64px;

    right: 150px;

    bottom: 60%;

    cursor: pointer;

    z-index: 200000 !important;

    -webkit-backface-visibility: hidden;

    -webkit-transform: translateZ(0);

    transition: visibility .5s;

}

.quick-alo-phone .quick-alo-green .quick-alo-ph-circle {

    border-color: #00A1FF;

    opacity: 0.5;

}

.quick-alo-ph-circle {

    position: absolute;

    width: 160px;

    height: 160px;

    top: 50px;

    left: 50px;

    border: 2px solid #00A1FF;

    background-color: transparent;

    border-radius: 100%;

    opacity: .1;

    animation: quick-alo-circle-anim 1.2s infinite ease-in-out;

    transition: all .5s;

    transform-origin: 50% 50%;

}

.quick-alo-phone .quick-alo-green .quick-alo-ph-circle-fill {

    background-color: rgb(246, 202, 98);

    opacity: .75 !important;

}

.quick-alo-ph-circle-fill {

    position: absolute;

    width: 100px;

    height: 100px;

    top: 80px;

    left: 80px;

    background-color: rgba(0, 161, 255, 0.5);

    border-radius: 100%;

    border: 2px solid transparent;

    opacity: .1;

    animation: quick-alo-circle-fill-anim 2.3s infinite ease-in-out;

    transition: all .5s;

    transform-origin: 50% 50%;

}

.quick-alo-phone.quick-alo-green .quick-alo-ph-img-circle {

    background-color: #00A1FF;

}

.quick-alo-ph-img-circle {

    position: absolute;

    width: 60px;

    height: 60px;

    top: 100px;

    left: 100px;

    background: #00A1FF url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABrklEQVRYR82XjTEEQRCFX0dABlwEiAARkAEyIAJEoERACETARUAIJwIyeOqptfbm5qeP3lpTdVVXVzPd3/R0v+4zTLxsYv/4XwAkrwDsV6JyZmaLyKj1ESB5AOCpYfzazAQZttYFuDWz8zDvwE8OkNwF8NIwvjCz2SgAMkqSDuOzyDxYqgKSrwB2GhBKxHsHqGtLCiDDJ42Tj2Z27LLu2JQCnAK4a5x7M7Nth23XlhRgE8B74+SemempQtaKEpKsPUPo++sGOYCSIIU7zwJ05ficSLLkV6H/CIn7wEi2GRVkOVwFixEoREE/hz9DsR2TVKkp2zeSsI9bBUNnJNV4bhIA5cFhVCk2B5JCWVYhSEopjwAob6qa4QGQOKkqcj1iJSdIpmoqWEHIhr7Ph1BNgC4haxAPAC7UITPOc1UrCOXR12TlAnBAyKhAdHvPUg4pIn6AAYQc1ebG8QC+LXfD66XHU2HP7yKQlKhGODWu1gCTY/g7wCAaendNyltrRCQOIAERjCc/ejV1V4H3dp2ES4jU1vVJpXxpogoHSEE7oOEIp9G+/3c1OkArcpMDfAIqL6EhVS6JOAAAAABJRU5ErkJggg==") no-repeat center center;

    border-radius: 100%;

    border: 2px solid transparent;

    opacity: .99;

    animation: quick-alo-circle-img-anim 1s infinite ease-in-out;

    transform-origin: 50% 50%;

}

.quick-alo-phone .quick-alo-green .quick-alo-hover .quick-alo-ph-img-circle,

.quick-alo-phone.quick-alo-green:hover .quick-alo-ph-img-circle {

    background-color: #ff0101;

}



@-moz-keyframes quick-alo-circle-anim {

    0% {

        -moz-transform: rotate(0) scale(.5) skew(1deg);

        opacity: .1;

        -moz-opacity: .1;

        -webkit-opacity: .1;

        -o-opacity: .1

    }

    30% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .5;

        -moz-opacity: .5;

        -webkit-opacity: .5;

        -o-opacity: .5

    }

    100% {

        -moz-transform: rotate(0) scale(1) skew(1deg);

        opacity: .6;

        -moz-opacity: .6;

        -webkit-opacity: .6;

        -o-opacity: .1

    }

}

@-webkit-keyframes quick-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

    }

}

@-o-keyframes quick-alo-circle-anim {

    0% {

        -o-transform: rotate(0) kscale(.5) skew(1deg);

        -o-opacity: .1

    }

    30% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        -o-opacity: .5

    }

    100% {

        -o-transform: rotate(0) scale(1) skew(1deg);

        -o-opacity: .1

    }

}

@-moz-keyframes quick-alo-circle-fill-anim {

    0% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

    50% {

        -moz-transform: rotate(0) -moz-scale(1) skew(1deg);

        opacity: .2

    }

    100% {

        -moz-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

}

@-webkit-keyframes quick-alo-circle-fill-anim {

    0% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

    50% {

        -webkit-transform: rotate(0) scale(1) skew(1deg);

        opacity: .2

    }

    100% {

        -webkit-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

}

@-o-keyframes quick-alo-circle-fill-anim {

    0% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

    50% {

        -o-transform: rotate(0) scale(1) skew(1deg);

        opacity: .2

    }

    100% {

        -o-transform: rotate(0) scale(.7) skew(1deg);

        opacity: .2

    }

}

@-moz-keyframes quick-alo-circle-img-anim {

    0% {

        transform: rotate(0) scale(1) skew(1deg)

    }

    10% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    20% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg)

    }

    30% {

        -moz-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    40% {

        -moz-transform: rotate(25deg) scale(1) skew(1deg)

    }

    50% {

        -moz-transform: rotate(0) scale(1) skew(1deg)

    }

    100% {

        -moz-transform: rotate(0) scale(1) skew(1deg)

    }

}

@-webkit-keyframes quick-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)

    }

}

@-o-keyframes quick-alo-circle-img-anim {

    0% {

        -o-transform: rotate(0) scale(1) skew(1deg)

    }

    10% {

        -o-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    20% {

        -o-transform: rotate(25deg) scale(1) skew(1deg)

    }

    30% {

        -o-transform: rotate(-25deg) scale(1) skew(1deg)

    }

    40% {

        -o-transform: rotate(25deg) scale(1) skew(1deg)

    }

    50% {

        -o-transform: rotate(0) scale(1) skew(1deg)

    }

    100% {

        -o-transform: rotate(0) scale(1) skew(1deg)

    }

}

@-moz-keyframes fadeInRight {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0);

        -ms-transform: translate3d(100%, 0, 0);

        transform: translate3d(100%, 0, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}

@-webkit-keyframes fadeInRight {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0);

        -ms-transform: translate3d(100%, 0, 0);

        transform: translate3d(100%, 0, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}

@-o-keyframes fadeInRight {

    0% {

        opacity: 0;

        -webkit-transform: translate3d(100%, 0, 0);

        -ms-transform: translate3d(100%, 0, 0);

        transform: translate3d(100%, 0, 0)

    }

    100% {

        opacity: 1;

        -webkit-transform: none;

        -ms-transform: none;

        transform: none

    }

}



/*============================= STYLE 3 ==============================*/

.cmi-box-style-4 {

    position: fixed;

    bottom: 210px;

    z-index:999;

}



.cmi-box-style-4.phone-left { left:10px; }



.cmi-box-style-4.phone-right { right:10px; }



.cmi-box-style-4 ul { list-style: none; }