.contact-bar {
    position: fixed;
    right: 20px;
    bottom: 30px;
    z-index: 1030;
    width: 64px;
    padding: 12px 0;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 35px;
    background: rgba(15, 23, 42, .95);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
    font-family: sans-serif;
}
.contact-bar ul { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; }
.contact-bar li { display: flex; justify-content: center; margin: 0; padding: 0; }
.contact-bar li + li { position: relative; margin-top: 10px; padding-top: 10px; }
.contact-bar li + li::before { content: ""; position: absolute; top: 0; left: 25%; width: 50%; height: 1px; background: rgba(255, 255, 255, .2); }
.contact-bar a { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 48px; color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; transition: color .2s ease; }
.contact-bar i, .contact-bar-zalo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 4px; font-size: 25px; line-height: 1; transition: transform .2s ease; }
.contact-bar-zalo { border: 2px solid currentColor; border-radius: 9px; font-size: 19px; font-weight: 800; }
.contact-bar a:hover, .contact-bar a:focus-visible { color: #00f2ff; text-shadow: 0 0 8px rgba(0, 242, 255, .6); }
.contact-bar a:focus-visible { outline: 2px solid #00f2ff; outline-offset: 2px; border-radius: 6px; }
.contact-bar a:hover i, .contact-bar a:hover .contact-bar-zalo { transform: scale(1.1); }
.contact-bar .contact-bar-call { color: #67e8f9; }
.contact-bar .contact-bar-call i { width: 30px; height: 30px; border-radius: 50%; background: #0891b2; color: #fff; font-size: 17px; box-shadow: 0 0 12px rgba(6, 182, 212, .3); }
.contact-bar .contact-bar-call:hover i, .contact-bar .contact-bar-call:focus-visible i { background: #0e7490; }
.contact-bar-spacer { display: none; }
@media (max-width: 600px) {
    .contact-bar { bottom: 0; left: 0; right: 0; width: 100%; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0; border-top: 1px solid rgba(255, 255, 255, .1); border-radius: 0; background: #0f172a; box-shadow: 0 -5px 15px rgba(0, 0, 0, .3); }
    .contact-bar ul { flex-direction: row; height: 60px; }
    .contact-bar li { flex: 1; }
    .contact-bar li + li { margin: 0; padding: 0; }
    .contact-bar li + li::before { top: 30%; left: 0; width: 1px; height: 40%; }
    .contact-bar i, .contact-bar-zalo { margin-bottom: 2px; }
    .contact-bar-spacer { display: block; height: calc(60px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
    .contact-bar a, .contact-bar i, .contact-bar-zalo { transition: none; }
}