Coppy đoạn code dưới đây và paste vào trước thẻ đóng body của footer
<!-- Contact bottom -->
<div class="contact-cs">
<div class="zalo">
<a href="https://zalo.me/0974438896" target="_blank">
<span class="tooltip-cs">Chat zalo</span>
<img src="http://nhatweb.vn/wp-content/uploads/2023/04/Zalo.svg"/>
</a>
</div>
<div class="messenger">
<a href="https://www.facebook.com/messages/t/215427065761277" target="_blank">
<span class="tooltip-cs">Chat messenger</span>
<img src="http://nhatweb.vn/wp-content/uploads/2023/04/messenger.png"/>
</a>
</div>
<div class="whatapp">
<a href="https://wa.me/+84974438896" target="_blank">
<span class="tooltip-cs">Chat whatapp</span>
<img src="http://nhatweb.vn/wp-content/uploads/2023/04/whatsapp.png"/>
</a>
</div>
<div class="call">
<a href="tel:+84974438896" target="_blank">
<span class="tooltip-cs">Liên hệ chúng tôi</span>
<img src="http://nhatweb.vn/wp-content/uploads/2023/04/call.png"/>
</a>
</div>
</div>
<style>
.contact-cs img {
width: 45px;
border-radius: 50%;
border: solid 2px #fff;
box-shadow: 0px 1px 2px rgb(0 0 0 / 8%), 0px 1px 3px rgb(0 0 0 / 5%);
margin-bottom: 10px;
background:#fff;
}
.contact-cs {
position: fixed;
z-index: 2;
display: block;
bottom: 90px;
right: 23px;
float: right !important;
}
.contact-cs a {
float: right;
display: flex;
align-items: center;
}
.contact-cs a:hover {
scale: 1.1;
}
span.tooltip-cs {
background: #000000eb;
padding: 10px 15px;
color: #fff;
font-size: 12px;
border-radius: 5px;
line-height: 12px;
margin-bottom: 10px;
position: absolute;
width: max-content;
right: 50px;
display:none;
}
span.tooltip-cs:after {
content: "";
width: 8px;
height: 8px;
background: #090701;
right: -4px;
position: absolute;
transform: rotate(45deg);
}
a:hover span.tooltip-cs {
display:inherit;
}
</style>
<!--End contact bottom-->
