#acb-contact-box-container {
position: fixed;
bottom: 80px;
z-index: 9999;
} #acb-contact-box-container.position-right {
right: 25px;
}
#acb-contact-box-container.position-left {
left: 25px;
}
.acb-contact-list {
display: flex;
flex-direction: column;
margin-bottom: 10px;
display: none; }
#acb-contact-box-container.position-right .acb-contact-list {
align-items: flex-end;
}
#acb-contact-box-container.position-left .acb-contact-list {
align-items: flex-start;
} #acb-contact-box-container.active .acb-contact-list {
display: flex;
}
.acb-contact-item {
display: flex;
align-items: center;
text-decoration: none;
color: #333;
margin-bottom: 10px;
transition: all 0.3s ease;
min-width: 170px;
}
.acb-contact-item:hover {
transform: scale(1.05);
}
.acb-icon-wrapper {
width: 45px;
height: 45px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
animation: pulse 2s infinite;	
}
.acb-icon-wrapper svg {
width: 24px;
height: 24px;
}
.acb-text {
background-color: #fff;
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
white-space: nowrap;
min-width : 110px;
}
#acb-contact-box-container.position-right .acb-text {
margin-right: 10px;
}
#acb-contact-box-container.position-left .acb-text {
margin-left: 10px;
order: 1; }
#acb-contact-box-container.position-left .acb-icon-wrapper {
order: 2;
} .acb-phone .acb-icon-wrapper { background-color: #dd5449; }
.acb-zalo .acb-icon-wrapper { background-color: #0068ff; }
.acb-messenger .acb-icon-wrapper { background-color: #0084ff; }
.acb-maps .acb-icon-wrapper { background-color: #4285F4; }
.acb-contact-page .acb-icon-wrapper { background-color: #f0ad4e; }
.acb-contact-item .acb-icon-wrapper svg {
fill: #fff;
} #acb-main-icon {
width: 55px;
height: 55px;
border-radius: 50%;
background-color: #e04332;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
animation: pulse 2s infinite;
transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55); }
#acb-contact-box-container.position-right #acb-main-icon {
margin-left: auto;
}
#acb-main-icon svg {
width: 28px;
height: 28px;
fill: #fff;
animation: pulse 2s infinite;
transition: transform 0.3s ease;
} #acb-contact-box-container.active #acb-main-icon {
transform: rotate(135deg);
} @keyframes pulse {
0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 67, 50, 0.7); }
70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(224, 67, 50, 0); }
100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 67, 50, 0); }
} @media (max-width: 768px) {
#acb-contact-box-container {
bottom: 0;
right: 0;
left: 0;
width: 100%;
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0,0,0,0.08);
padding: 5px 0;
}
#acb-main-icon {
display: none;
}
.acb-contact-list {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 100%;
margin-bottom: 0;
}
.acb-contact-item {
width: var(--acb-mobile-item-width, 25%);
margin-bottom: 0;
flex-direction: column;
justify-content: center;
align-items: center;
min-width : unset !important;
}
.acb-contact-item:hover {
transform: none;
background-color: #f5f5f5;
border-radius: 8px;
}
.acb-icon-wrapper {
width: 40px;
height: 40px;
margin: 0 0 5px 0;
box-shadow: none;
}
.acb-text {
padding: 0;
background-color: transparent;
box-shadow: none;
font-size: 11px;
font-weight: normal;
min-width : unset !important;
order: 2 !important;
}
#acb-contact-box-container.position-left .acb-text {
margin-left: 0;
}
#acb-contact-box-container.position-left {
left: 0 !important;
}
.acb-icon-wrapper {
order: 1 !important;
animation: pulse 2s infinite;
transition: transform 0.3s ease;	
} 
}