
.Rbtn-group{
	position: fixed;
	z-index: 500;
	overflow: visible!important;
	display: block;
	right: 40px;
	bottom: 10%;
}
/* Phần text bên trái button close */
.Rbtn-group-content{
	position: relative;
	color: #fff;
	width: 110px;
	height: 20px;
	line-height: 6px;
	text-align: center;
	padding: 4px;
	border-radius: 5px;
	bottom: -30px;
	right: 50px;
}
.st-content{
	font-size: 7px;
}
.nd-content{
	font-size: 11px;
}

/* Start Button bên ngoài: icon message + text: Liên hệ siêu nhanh */
.Rbtn-default{
	overflow: visible!important;
}
.Rbtn-menu{
	background-color: #01b152;
	opacity: .9;
	float: right;
	width: 60px;
	height: 60px;
	display: inline-block;
	position: relative;
	cursor: pointer!important;
	text-decoration: none;
	border: 1px none;
	border-radius: 50%;
}
.Rbtn-over{ /* Create effect around the circle */
	transform: scale(0);
	float: right;
	animation: shakeOut 2s 5;
	-webkit-animation: shakeOut 2s 5;
	position: absolute;
	border-radius: 50px;
	display: block;
	top: -20px;
	left: -20px;
	width: 100px;
	height: 100px;
	z-index: -1;
	background-color: #01b152;
}
.Rbtn-over:nth-of-type(2n){
	animation-delay: .5s;
}
/* Create animation for myIcon */
@keyframes shakeOut {
	0%{
		transform: scale(0);
		opacity: 1;
	}
	50%{
		opacity: .5;
	}
	100%{
		transform: scale(1);
		opacity: 0;
	}
}
/* End create animation for myIcon */

.Rbtn-menu-icon{
	border: 1px none;
	position: absolute;
	border-radius: 50%;
	background: url('../images/icon-phone-png.png') center no-repeat;
	width: 54px;
	height: 54px;
	background-size: 34px;
	top: 3px;
	left: 3px;
	display: block;
}
.Ricon-close{
	border: 1px none;
	position: absolute;
	border-radius: 50%;
	background: url('../images/icon_close.png') center no-repeat;
	width: 44px;
	height: 40px;
	background-size: 32px;
	top: 9px;
	left: 9px;
	display: none;
}
.Rbtn-menu:hover{
	  box-shadow: 0 5px 10px rgba(0,0,0,.15), 0 4px 15px rgba(0,0,0,.13);
		transition: all .3s;
}
.Rbtn-df-text{
	position: relative;
	background-color: rgba(194, 44, 144, 0.7);
	display: block;
	color: #fff;
	font-size: 80%;
	font-weight: 600;
	text-align: center;
	line-height: 2;
	word-spacing: 1px;
	float: right;
	width: 120px;
	height: 35px;
	margin-top: 10px;
	margin-right: 10px;
	padding: 5px 10px;
	border-radius: 5px;
}
.Rbtn-df-text::after {
	top: 13px;
	right: -7px;
  position: absolute;
  border-top: 7px solid transparent;
  border-left: 7px solid rgba(194, 44, 144, 0.7);
	border-bottom: 7px solid transparent;
  content: '';
}
/* End Button bên ngoài: icon message + text: Liên hệ siêu nhanh */

/* Danh sách các icons */
.Rbtn-list{
	position: absolute;
	transition: .3s;
	right: 40px;
	display: none;
}

/* Mục để lại lời nhắn */
.Rbtn-contact{
	position: absolute;
	float: right;
	width: 380px;
	right: -40px;
	top: -50px;
}
.icon-contact{
	background-color: #f7a400;
}
/* Mục để lại lời nhắn */

/* Mục gọi ngay */
.Rbtn-call{
	position: absolute;
	float: right;
	width: 380px;
	right: -40px;
	top: -100px;
}
.icon-call{
	background-color: #00b151;
}
/* Mục gọi ngay */

/* Mục chat qua Messenger */
.Rbtn-message{
	position: absolute;
	float: right;
	width: 380px;
	right: -40px;
}
.icon-message{
	background-color: #007fff;
}
/* Mục chat qua Messenger */

/* Mục chat qua zalo */
.Rbtn-zalo{
	position: absolute;
	float: right;
	width: 380px;
	right: -40px;
}
.icon-zalo{
	background-color: #0068ff;
}
/* Mục chat qua zalo */

/* Mục chat qua google_map */
.Rbtn-google_map{
	position: absolute;
	float: right;
	width: 380px;
	right: -40px;
}
.icon-google_map{
	background-color: #00b8d4;
}
/* Mục chat qua google_map */

/* CSS sử dụng cho nhiều icons*/
.Rbtn-contact,
.Rbtn-call{
		opacity: 0;
		animation: fadeUp1 .3s ease-in forwards;
}
@keyframes fadeUp1 {
	from{
		opacity: 0;	}
	to{
		opacity: 1;
	}
}
.Rbtn-message{
	opacity: 0;
	animation: fadeUp2 .3s ease-in .1s forwards;

}

@keyframes fadeUp2 {
	from{
		opacity: 0;
		transform: translateY(0);
	}
	to{
		opacity: 1;
		/*transform: translateY(-150px);*/
	}
}
.Rbtn-zalo{
	opacity: 0;
	animation: fadeUp3 .3s ease-in .2s forwards;
}
@keyframes fadeUp3 {
	from{
		opacity: 0;
		transform: translateY(0);
	}
	to{
		opacity: 1;
		/*transform: translateY(-200px);*/
	}
}
.Rbtn-google_map{
	opacity: 0;
	animation: fadeUp4 .3s ease-in .3s forwards;
}
@keyframes fadeUp4 {
	from{
		opacity: 0;
		transform: translateY(0);
	}
	to{
		opacity: 1;
		/*transform: translateY(-250px);*/
	}
}

.icon-contact,
.icon-call,
.icon-message,
.icon-zalo,
.icon-google_map{
	width: 40px;
	height: 40px;
	float: right;
	display: inline-block;
	position: relative;
	cursor: pointer!important;
	text-decoration: none;
	border: 1px none;
	border-radius: 50%;
}
.icon-contact svg,
.icon-call svg,
.icon-message svg,
.icon-zalo svg,
.icon-google_map svg{
	position: absolute;
	width: 25px;
	height: 25px;
	top: 7px;
	left: 7px;
}
.icon-contact:hover,
.icon-call:hover,
.icon-message:hover,
.icon-zalo:hover,
.icon-google_map:hover{
	  box-shadow: 0 5px 10px rgba(0,0,0,.15), 0 4px 15px rgba(0,0,0,.13);
		transition: all .3s;
}
.icon-contact::after,
.icon-call::after,
.icon-message::after,
.icon-zalo::after,
.icon-google_map::after{
	top: 13px;
	right: 43px;
  position: absolute;
  border-top: 7px solid transparent;
  border-left: 7px solid rgba(194, 44, 144, 0.7);
	border-bottom: 7px solid transparent;
  content: '';
}
.text-contact,
.text-call,
.text-message,
.text-zalo,
.text-google_map{
	background-color: rgba(194, 44, 144, 0.7);
	position: relative;
	display: inline-block;
	float: right;
	color: #fff;
	font-size: 80%;
	font-weight: 600;
	text-align: center;
	line-height: 2;
	word-spacing: 1px;
	width: auto;
	height: 35px;
	margin-top: 2px;
	margin-right: 10px;
	padding: 5px 10px;
	border-radius: 5px;
}
.text-contact a,
.text-call a,
.text-message a,
.text-zalo a,
.text-google_map a{
	color:#FFF;
}
/* End CSS sử dụng cho nhiều icons*/

/*kk*/
.Rbtn-list>div:nth-child(1){
	top: -50px;
}
.Rbtn-list>div:nth-child(2){
	top: -100px;
}
.Rbtn-list>div:nth-child(3){
	top: -150px;
}
.Rbtn-list>div:nth-child(4){
	top: -200px;
}
.Rbtn-list>div:nth-child(5){
	top: -250px;
}
.Rbtn-list>div:nth-child(6){
	top: -300px;
}
.Rbtn-list>div:nth-child(7){
	top: -350px;
}
.Rbtn-list>div:nth-child(8){
	top: -400px;
}
.Rbtn-group.left{
	z-index: 99999;
	left: 40px;
	right: inherit;
}
.Rbtn-group.left .Rbtn-menu{
	float: left;
}
.Rbtn-group.left .Rbtn-df-text{
	margin-right: 0;
	margin-left: 10px;
}
.Rbtn-group.left .Rbtn-df-text::after{
	right: inherit;
	left: -7px;
	border-right: 7px solid rgba(194, 44, 144, 0.7);
	border-left: none;
}
.Rbtn-group.left .Rbtn-list>div{
	left: -40px;	
	right: inherit;
}
.Rbtn-group.left .Rbtn-list>div>a{
	float: left;
}
.Rbtn-group.left .Rbtn-list>div>a:after{
	right: -10px;
	border-right: 7px solid rgba(194, 44, 144, 0.7);
	border-left: none;
}
.Rbtn-group.left .Rbtn-list>div>div{
	float: left;
	margin-right: 0;
	margin-left: 10px;
}
.Rbtn-group.left .Rbtn-list{
	left: 50px;	
	right: inherit;
}
/*End kk*/

@media(max-width: 767px){
	.Rbtn-group.left{
		bottom:20px;
		left:30px;
	}
	.Rbtn-group.left .Rbtn-df-text{
		display: none;
	}
}