/*	Contact Buttons	*/
/* Default Position Right */
#aio-widget-flyout{
	bottom:50px;
	width:50px;
	height:50px;
	border-radius:50%;
	box-shadow: 0 5px 5px rgba(0,0,0,.1);
	cursor:pointer;
	right:50px;
	font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol,noto color emoji;
}
#aio-widget-flyout.pos-right{
	
}
#aio-widget-flyout.pos-left{
	left:50px;
	right:unset;
}
#aio-widget-flyout.aio-pos-fixed {
    position: fixed;
	z-index:9999;
}
/*.aio-pinkBg {
    background-color: #ed184f;
    background-image: linear-gradient(90deg, #fd5581, #fd8b55);
}*/
#aio-widget-flyout > span .ripple{
    position:absolute;
    width:160px;
    height:160px;
    z-index:-1;
    left:50%;
    top:50%;
    opacity:0;
    margin:-80px 0 0 -80px;
    border-radius:100px;
    -webkit-animation:ripple 1.8s infinite;
    animation:ripple 1.8s infinite
}
@-webkit-keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
@keyframes ripple{
    0%{
        opacity:1;
        -webkit-transform:scale(0);
        transform:scale(0)
    }
    100%{
        opacity:0;
        -webkit-transform:scale(1);
        transform:scale(1)
    }
}
#aio-widget-flyout > span .ripple:nth-child(2){
    animation-delay:.3s;
    -webkit-animation-delay:.3s
}
#aio-widget-flyout > span .ripple:nth-child(3){
    animation-delay:.6s;
    -webkit-animation-delay:.6s
}
#aio-widget-flyout > span{
	position:relative;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	transition: .3s ease-in-out;
}
#aio-widget-flyout > span > i{
	color:#fff; font-size: 25px;
}
#aio-widget-flyout span:hover{}
#aio-widget-flyout ul{
	position:absolute;
	bottom:50px;
	background: url(../images/background.png);
	min-width:max-content;
	margin:0;
	padding: 10px 10px;
	border-radius:5px;
	opacity:0;
	visibility:hidden;
	transition:.3s;
	border: 1px solid rgb(123 123 123 / 10%);
	box-shadow: 0 0 20px 0 rgb(0 0 0 / 8%);
	right:0;
}
#aio-widget-flyout.pos-right ul{
	right:0;
}
#aio-widget-flyout.pos-left ul{
	left:0;
	right:unset;
}
#aio-widget-flyout ul.active{
	bottom:60px;
	opacity:1;
	visibility:visible;
	/*transition:.3s;*/
	animation: 0.5s ease 0s 1 normal none running FadeIn;
}
#aio-widget-flyout ul li{
	list-style:none;
	display:flex;
	justify-content: flex-start;
	align-items:center;
	padding:10px 0;
	transition:.3s;
	margin-bottom: 0;
	margin-left: 0;
}
#aio-widget-flyout ul li:hover{
	
}
#aio-widget-flyout ul li:not(:last-child){
	border-bottom: 1px dashed rgba(0,0,0,.1);
}
#aio-widget-flyout ul li .aio-icon{
	margin-right: 10px;
	width: 30px;
	min-width: 30px;
	height: 30px;
	border-radius: 50%;
	overflow: hidden;
	-webkit-justify-content: center;
	justify-content: center;
	display: flex;
	align-items: center;
}
#aio-widget-flyout ul li .aio-icon{display:inline-flex;box-shadow: 0 5px 5px rgba(0,0,0,.1);}
.icon-zalo {
    background: url("../images/icon-zalo.png") no-repeat 50% 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: 16px;
    vertical-align: middle;
    margin-right: 2px;
    position: relative;
}
#aio-widget-flyout ul li.btn-zalo > .aio-icon{
    background: #018fe5;
}
#aio-widget-flyout ul li a {text-decoration:none; color: #000;}
#aio-widget-flyout ul li.btn-zalo:hover > a .aio-text{
    color: #018fe5;
}
#aio-widget-flyout ul li.btn-facebook > .aio-icon{
    background: linear-gradient(200deg, #ff6a68 10%, #a033fe 60%, #0595ff 100%);
	color:#fff;
}
#aio-widget-flyout ul li.btn-facebook:hover > a .aio-text{
    color:#306199;
}
#aio-widget-flyout ul li.btn-phone > .aio-icon{
    background:#46CA57;
	color:#fff;
}
#aio-widget-flyout ul li.btn-phone:hover > a .aio-text{
    color:#46CA57;
}
#aio-widget-flyout ul li.btn-email > .aio-icon{
    background:#d26e4b;
	color:#fff;
}
#aio-widget-flyout ul li.btn-email:hover > a .aio-text{
    color:#d26e4b;
}

/* Bubble Message */
#aio-bubble-message {
	position: fixed;
	z-index: 9998;
	margin-bottom: 10px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	font-family: -apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,noto sans,sans-serif;
}
#aio-bubble-message.active {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#aio-bubble-message.pos-right {
	right: 120px;
}
#aio-bubble-message.pos-left {
	left: 120px;
}
.aio-bubble-content {
	background-color: #fff;
	color: #334155;
	padding: 12px 35px 12px 20px; /* Thêm padding bên phải để lấy chỗ cho nút X */
	border-radius: 20px;
	font-size: 14px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
	position: relative;
	border: 1px solid #f1f5f9;
	white-space: nowrap;
}
.pos-left .aio-bubble-content {
    padding: 12px 20px 12px 35px; /* Đổi padding nếu ở bên trái */
}
/* Bubble Tail */
.pos-right .aio-bubble-content::after {
	content: '';
	position: absolute;
	right: -8px;
	bottom: 15px;
	border-width: 8px 0 8px 8px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	display: block;
	width: 0;
}
.pos-left .aio-bubble-content::after {
	content: '';
	position: absolute;
	left: -8px;
	bottom: 15px;
	border-width: 8px 8px 8px 0;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
	display: block;
	width: 0;
}
.aio-bubble-close {
	position: absolute;
	top: 50%;
    transform: translateY(-50%);
	right: 10px;
	color: #94a3b8;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 18px;
	cursor: pointer;
	transition: 0.2s;
	font-weight: bold;
	line-height: 1;
}
.aio-bubble-close:hover {
	color: #ef4444;
}
.pos-left .aio-bubble-close {
	right: auto;
	left: 10px;
}