/*************** ADD CUSTOM CSS HERE. ***************/
 @media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE ***************/
	.Rbtn-group{
           bottom: 80px;
           right: 20px;
         }
    
}

.Rbtn-group{
	position: fixed;
	z-index: 5000;
	overflow: visible!important;
	display: block;
	right: 20px;
	bottom: 80px;
}
/* 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;
	display: none;
}
.Rbtn-menu{
	background-color: #1296D5;
	opacity: .9;
	float: left;
	width: 50px;
	height: 50px;
	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;
	-webkit-animation: shakeOut 2s;
	animation-iteration-count: infinite;
	position: absolute;
	border-radius: 50px;
	display: block;
	top: -15px;
	left: -15px;
	width: 80px;
	height: 80px;
	z-index: -1;
	background-color: #1296D5;
}
.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 {
	position: absolute;
	background-color: #fff;
	-webkit-mask-image: url(../images/phone.svg);
	mask-image: url(../images/phone.svg);
	width: 30px;
	height: 30px;
	top: 10px;
	left: 10px;
	display: block;

	animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
	-webkit-animation: phonering-alo-circle-img-anim 1s infinite ease-in-out;
	transform-origin: 50% 50%;
	-webkit-transform-origin: 50% 50%;
}

@-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)
    }
}


.Ricon-close{
	border: 1px none;
	position: absolute;
	border-radius: 50%;
	background: url('../images/icon_close.png') center no-repeat;
	width: 21px;
	height: 21px;
	background-size: 32px;
	top: 14px;
	left: 14px;
	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: #000;
	font-size: 90%;
	font-weight: 600;
	text-align: center;
	line-height: 2;
	word-spacing: 1px;
	float: right;
	width: 120px;
	height: 35px;
	margin-top: 7px;
	margin-left: 10px;
	padding: 5px 10px;
	border-radius: 5px;
}
.Rbtn-df-text::after {
	top: 13px;
	left: -6px;
	position: absolute;
	border-top: 7px solid transparent;
	border-right: 7px solid #fcc431;
	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;
	left: 0;
}

/* Mục để lại lời nhắn */
.Rbtn-contact{
	position: absolute;
	float: right;
	width: 380px;
	right: 0;
	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: 0;
	top: -110px;
}
.icon-call{
	background-color: red;
}
/* Mục gọi ngay */

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

/* Mục chat qua zalo */
.Rbtn-zalo{
	position: absolute;
	float: right;
	width: 380px;
	right: 0;
}
.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: 0;
}
.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;
	top: -170px;
	animation: fadeUp3 .3s ease-in forwards;
}
@keyframes fadeUp3 {
	from{
		opacity: 0;
		/* transform: translateY(0); */
	}
	to{
		opacity: 1;
		/* transform: translateY(-170px); */
	}
}
.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: 55px;
	height: 55px;
	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: 35px;
	height: 35px;
	top: 10px;
	left: 10px;
}
.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;
}
/* End CSS sử dụng cho nhiều icons*/