:root { --dabilux-contact-backdrop-color: #ffffff;
--dabilux-contact-icon-color-light: #ffffff; --dabilux-contact-mobile-bg: #ffffff;
--dabilux-contact-mobile-nav-bg: #ffffff;
--dabilux-contact-mobile-icon-color: #222327;
--dabilux-contact-mobile-active-icon-color: #224a54;
--dabilux-contact-mobile-text-bg: #003263; --dabilux-contact-color-map: #28a745;
--dabilux-contact-color-zalo: #0084ff; --dabilux-contact-color-phone: #FF3B30;
--dabilux-contact-color-message: #007bff;
--dabilux-contact-color-contact: #ff9500; } .dabilux-contact-mobile-view {
display: block;
}
.dabilux-contact-pc-view {
display: none;
}
.dabilux-contact-phone .dabilux-contact-text {
margin-top: 41px !important;
}
.dabilux-contact-navigation {
position: fixed;
width: 100vw;
height: 60px;
background: var(--dabilux-contact-mobile-nav-bg);
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
left: 0;
z-index: 9999;
box-shadow: 0 -5px 25px rgba(0, 25, 61, 0.12);
}
.dabilux-contact-navigation ul {
display: flex;
width: 350px;
padding: 0;
margin: 0;
list-style: none;
}
.dabilux-contact-navigation ul li {
list-style: none;
position: relative;
width: 70px;
height: 60px;
z-index: 2;
}
.dabilux-contact-navigation ul li a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 100%;
text-align: center;
text-decoration: none;
}
.dabilux-contact-icon svg, .dabilux-contact-icon img {
margin-top: -15px;
max-width: 34px;
max-height: 34px;
}
.dabilux-contact-navigation ul li a .dabilux-contact-icon {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 65px;
font-size: 1.5em;
transition: 0.5s;
color: var(--dabilux-contact-mobile-icon-color);
}
.dabilux-contact-navigation .dabilux-contact-phone a .dabilux-contact-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background-color: var(--dabilux-contact-color-phone);
color: var(--dabilux-contact-icon-color-light);
}
.dabilux-contact-navigation .dabilux-contact-phone a .dabilux-contact-icon svg,
.dabilux-contact-navigation .dabilux-contact-phone a .dabilux-contact-icon img {
margin-top: 0;
}
.dabilux-contact-navigation .dabilux-contact-phone a .dabilux-contact-icon::before {
content: '';
position: absolute;
z-index: -1;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 100%;
background-color: var(--dabilux-contact-color-phone);
animation: dabilux-contact-radiate 1.5s infinite ease-out;
}
.dabilux-contact-navigation ul li.dabilux-contact-active a .dabilux-contact-icon {
transform: translateY(-32px);
color: var(--dabilux-contact-mobile-active-icon-color);
}
.dabilux-contact-navigation ul li.dabilux-contact-phone.dabilux-contact-active a .dabilux-contact-icon {
color: var(--dabilux-contact-icon-color-light);
}
.dabilux-contact-navigation ul li a .dabilux-contact-text {
position: absolute;
color: #000;
padding: 2px 7px;
border-radius: 12px;
font-weight: 400;
font-size: 10px;
letter-spacing: 0.05em;
transition: 0.5s;
transform: translateY(15px);
margin-top: 3px;
}
.dabilux-contact-navigation ul li.dabilux-contact-active a .dabilux-contact-text {
transform: translateY(-4px);
opacity: 1;
}
.dabilux-contact-indicator {
position: absolute;
top: -35px;
width: 70px;
height: 70px;
background: var(--dabilux-contact-mobile-nav-bg);
border-radius: 50%;
z-index: 1;
transition: 0.5s;
box-shadow: 0 -10px 20px rgba(0, 25, 61, 0.12);
}
.dabilux-contact-indicator::before {
content: "";
position: absolute;
top: 5px;
left: -28px;
width: 30px;
height: 30px;
background: transparent;
border-radius: 50%;
box-shadow: 15px 18px var(--dabilux-contact-mobile-nav-bg);
}
.dabilux-contact-indicator::after {
content: "";
position: absolute;
top: 5px;
right: -28px;
width: 30px;
height: 30px;
background: transparent;
border-radius: 50%;
box-shadow: -15px 18px var(--dabilux-contact-mobile-nav-bg);
}
.dabilux-contact-navigation ul li:nth-child(1).dabilux-contact-active ~ .dabilux-contact-indicator { transform: translateX(calc(70px * 0)); }
.dabilux-contact-navigation ul li:nth-child(2).dabilux-contact-active ~ .dabilux-contact-indicator { transform: translateX(calc(70px * 1)); }
.dabilux-contact-navigation ul li:nth-child(3).dabilux-contact-active ~ .dabilux-contact-indicator { transform: translateX(calc(70px * 2)); }
.dabilux-contact-navigation ul li:nth-child(4).dabilux-contact-active ~ .dabilux-contact-indicator { transform: translateX(calc(70px * 3)); }
.dabilux-contact-navigation ul li:nth-child(5).dabilux-contact-active ~ .dabilux-contact-indicator { transform: translateX(calc(70px * 4)); } @keyframes dabilux-contact-gentle-pulse {
0%, 100% { transform: scale(.8); }
50% { transform: scale(1.1); }
}
@keyframes dabilux-contact-phone-pulse {
0%, 100% { transform: scale(.9); }
50% { transform: scale(1); }
}
@keyframes dabilux-contact-radiate {
from { transform: scale(0.7); opacity: 0.7; }
to { transform: scale(1.3); opacity: 0; }
} @media (min-width: 768px) {
.dabilux-contact-mobile-view {
display: none;
}
.dabilux-contact-pc-view {
display: block;
}
.dabilux-contact-icon-bar-wrapper {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 9999;
}
.dabilux-contact-icon-bar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.dabilux-contact-icon-bar li {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
color: var(--dabilux-contact-icon-color-light);
cursor: pointer;
border-radius: 50%;
box-shadow: 0 6px 18px rgba(0, 21, 61, 0.15);  background-color: var(--dabilux-contact-backdrop-color);
margin: 0;
} .dabilux-contact-icon-bar .dabilux-contact-map { background-color: var(--dabilux-contact-color-map); }
.dabilux-contact-icon-bar .dabilux-contact-zalo { background-color: var(--dabilux-contact-color-zalo); } .dabilux-contact-icon-bar .dabilux-contact-phone { background-color: var(--dabilux-contact-color-phone); }
.dabilux-contact-icon-bar .dabilux-contact-message { background-color: var(--dabilux-contact-color-message); }
.dabilux-contact-icon-bar .dabilux-contact-contact { background-color: var(--dabilux-contact-color-contact); }  .dabilux-contact-icon-bar li a {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none; position: relative; 
z-index: 2; }
.dabilux-contact-icon-bar li a svg, .dabilux-contact-icon-bar li a img {
max-width: 34px;
max-height: 34px;
}
.dabilux-contact-icon-bar li svg, .dabilux-contact-icon-bar li img {
animation: dabilux-contact-gentle-pulse 2s infinite cubic-bezier(.45,.05,.55,.95);
}
.dabilux-contact-icon-bar li.dabilux-contact-map svg, 
.dabilux-contact-icon-bar li.dabilux-contact-map img { animation-delay: 0s; }
.dabilux-contact-icon-bar li.dabilux-contact-zalo svg, 
.dabilux-contact-icon-bar li.dabilux-contact-zalo img { animation-delay: 0.2s; }
.dabilux-contact-icon-bar li.dabilux-contact-phone svg, 
.dabilux-contact-icon-bar li.dabilux-contact-phone img {
animation-name: dabilux-contact-phone-pulse;
animation-delay: 0.4s;
}
.dabilux-contact-icon-bar li.dabilux-contact-message svg, 
.dabilux-contact-icon-bar li.dabilux-contact-message img { animation-delay: 0.6s; }
.dabilux-contact-icon-bar li.dabilux-contact-contact svg, 
.dabilux-contact-icon-bar li.dabilux-contact-contact img { animation-delay: 0.8s; }
.dabilux-contact-icon-bar li::before {
content: '';
position: absolute;
z-index: 1; top: 0; left: 0; right: 0; bottom: 0;
border-radius: 100%;
animation: dabilux-contact-radiate 1.5s infinite ease-out;
}
.dabilux-contact-icon-bar .dabilux-contact-map::before { background-color: var(--dabilux-contact-color-map); animation-delay: 0s; }
.dabilux-contact-icon-bar .dabilux-contact-zalo::before { background-color: var(--dabilux-contact-color-zalo); animation-delay: 0.3s; }
.dabilux-contact-icon-bar .dabilux-contact-phone::before { background-color: var(--dabilux-contact-color-phone); animation-delay: 0.6s; }
.dabilux-contact-icon-bar .dabilux-contact-message::before { background-color: var(--dabilux-contact-color-message); animation-delay: 0.9s; }
.dabilux-contact-icon-bar .dabilux-contact-contact::before { background-color: var(--dabilux-contact-color-contact); animation-delay: 1.2s; }
.dabilux-contact-icon-bar li.has-custom-icon {
box-shadow: none; }
.dabilux-contact-icon-bar li.has-custom-icon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
} .dabilux-contact-icon-bar li.has-custom-icon::before {
z-index: 0; }
}
.dabilux-contact-navigation ul li.dabilux-contact-phone.dabilux-contact-active a .dabilux-contact-icon {
animation: dabilux-contact-phone-pulse 2s infinite ease-in-out;
top: -30px;
}
.dabilux-contact-navigation li {
margin-bottom: 0 !important;
}