Một số tiện ích liên hệ đẹp để chèn vào website

<style>
.hotline-phone-ring-wrap{position:fixed;bottom:0;left:0;z-index:999999}
.hotline-phone-ring{position:relative;visibility:visible;background-color:transparent;width:110px;height:110px;cursor:pointer;z-index:11;-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);transition:visibility .5s;left:0;bottom:0;display:block}
.hotline-phone-ring-circle{width:87px;height:87px;top:10px;left:10px;position:absolute;background-color:transparent;border-radius:100%;border:2px solid #e60808;-webkit-animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;animation:phonering-alo-circle-anim 1.2s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;opacity:0.5}
.hotline-phone-ring-circle-fill{width:57px;height:57px;top:25px;left:25px;position:absolute;background-color:rgba(230,8,8,0.7);border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;animation:phonering-alo-circle-fill-anim 2.3s infinite ease-in-out;transition:all .5s;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}
.hotline-phone-ring-img-circle{background-color:#e60808;width:33px;height:33px;top:37px;left:37px;position:absolute;background-size:20px;border-radius:100%;border:2px solid transparent;-webkit-animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;animation:phonering-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;align-items:center;justify-content:center}
.hotline-phone-ring-img-circle .pps-btn-i{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
.hotline-bar{position:absolute;background:rgba(230,8,8,0.75);height:40px;width:180px;line-height:40px;border-radius:3px;padding:0 10px;background-size:100%;cursor:pointer;transition:all 0.8s;-webkit-transition:all 0.8s;z-index:9;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.1);border-radius:50px!important;/* width:175px!important;*/
  left:33px;bottom:37px}
.hotline-bar > a{color:#fff;text-decoration:none;font-size:15px;font-weight:bold;text-indent:50px;display:block;letter-spacing:1px;line-height:40px;font-family:Arial}
.hotline-bar > a:hover,.hotline-bar > a:active{color:#fff}
@-webkit-keyframes phonering-alo-circle-anim{0%{-webkit-transform:rotate(0) scale(0.5) skew(1deg);-webkit-opacity:0.1}30%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);-webkit-opacity:0.5}100%{-webkit-transform:rotate(0) scale(1) skew(1deg);-webkit-opacity:0.1}}
@-webkit-keyframes phonering-alo-circle-fill-anim{0%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}50%{-webkit-transform:rotate(0) scale(1) skew(1deg);opacity:0.6}100%{-webkit-transform:rotate(0) scale(0.7) skew(1deg);opacity:0.6}}
@-webkit-keyframes phonering-alo-circle-img-anim{0%{-webkit-transform:rotate(0) scale(1) skew(1deg)}10%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}20%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}30%{-webkit-transform:rotate(-25deg) scale(1) skew(1deg)}40%{-webkit-transform:rotate(25deg) scale(1) skew(1deg)}50%{-webkit-transform:rotate(0) scale(1) skew(1deg)}100%{-webkit-transform:rotate(0) scale(1) skew(1deg)}}
@media (max-width:768px){.hotline-bar{display:none}}
</style>

<div class='hotline-phone-ring-wrap'>
<div class='hotline-phone-ring'>
<div class='hotline-phone-ring-circle'></div>
<div class='hotline-phone-ring-circle-fill'></div>
<div class='hotline-phone-ring-img-circle'>
<a class='pps-btn-i' href='tel:0911518538'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFkkVuycSgxtVdUlgP7dwKwkb6_KjIiGYbWcq-YRJoJbGv3xK7aouHaRGQbhz9hq_91Liu-nwkvKZnqMhMBqC4Zi0i_9Cu4E0b7BkUicB1P1bkJ5obPYq0ZcrfhnJo70GQd6l-C_CWfPen/s1600/icon-call-nh.png' width='50'/></a>
</div>
</div>
<div class='hotline-bar'>
<a href='tel:0911518538'><span class='text-hotline'>0911 518 538</span></a>
</div>
</div>

<style>
.zalo-container{position:fixed;width:40px;height:40px;bottom:40px;z-index:9999999}
.zalo-container:not(.right){left:2.5rem}
.zalo-container.right{right:2.5rem}
.zalo-container a{display:block}
.zalo-container span{display:-webkit-flex;display:-moz-flex;display:-ms-flex;display:-o-flex;display:flex;-ms-align-items:center;align-items:center;width:40px;height:40px;border-radius:50%;background:#1182FC;position:relative}
@keyframes zoomIn_zalo{from{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}
.zoomIn_zalo{animation-name:zoomIn_zalo}
.animated_zalo{animation-duration:1s;animation-fill-mode:both}
.animated_zalo.infinite{animation-iteration-count:infinite}
.cmoz-alo-circle{width:50px;height:50px;top:-5px;right:-5px;position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(17,130,252,.8);opacity:.1;border-color:#1182FC;opacity:.5}
.cmoz-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all 0.2s ease-in-out;-moz-transition:all 0.2s ease-in-out;-ms-transition:all 0.2s ease-in-out;-o-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;background-color:rgba(17,130,252,0.45);opacity:.75;right:-10px}
@-webkit-keyframes pulse_zalo{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
@keyframes pulse_zalo{from{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}}
.pulse_zalo{-webkit-animation-name:pulse_zalo;animation-name:pulse_zalo}
</style>

<div class='zalo-container right'>
<a href='https://zalo.me/0911518538' id='zalo-btn' rel='noopener noreferrer nofollow' target='_blank'>
<div class='animated_zalo infinite zoomIn_zalo cmoz-alo-circle'></div>
<div class='animated_zalo infinite pulse_zalo cmoz-alo-circle-fill'></div>
<span><img alt='Contact Me on Zalo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvRpllkWsbdeS9dJZ8wI3GZGhMpABuv9jlIO0sNIpI5od-FVtydN7ysyHAjMXxTPr9ly7ud_lXG1XajJ9OwWvWV06nsP5jMi9No_fa4HhxCEOI31_Blo7_pop3QCpPtw50b8HcvXmEkNQ/s640/zalo.png'/></span>
</a>
</div>

<style>#FOLLOW-ICON{max-width:60px;position:fixed;z-index:9;left:10px;bottom:0}
#FOLLOW-ICON > li{width:100%;margin:30px 0}
.an{display:none}
.anPC{display:none}
@media (max-width:480px){.anPC{display:block}.anMB{display:none}#FOLLOW-ICON{max-width:100%}#FOLLOW-ICON > li{width:fit-content;float:right;margin:0 3px}}
:root{--phone:rgb(210,19,14);--phoneopa:rgb(210,19,14,0.5);--facebook:rgb(59,89,152);--facebookopa:rgb(59,89,152,0.5);--mail:rgb(223,75,56);--mailopa:rgb(223,75,56,0.5);--zalo:rgb(2,143,227);--zaloopa:rgb(2,143,227,0.5);--messenger:rgb(2,143,227);--messengeropa:rgb(2,143,227,0.5)}
#phone a{background:var(--phone);border:2px #fff solid}
#phone svg path{fill:#fff}
#phone .alo-circle-fill{background-color:var(--phoneopa)}
#phone .alo-circle{border-color:var(--phone)}
#phone:hover a{background:rgb(255,87,34)}
#phone:hover svg path{fill:#fff}
#phone:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#phone:hover .alo-circle{border-color:rgb(255,87,34)}
#facebook a{background:var(--facebook);border:2px #fff solid}
#facebook svg path{fill:rgb(255,255,255)}
#facebook .alo-circle-fill{background-color:var(--facebookopa)}
#facebook .alo-circle{border-color:var(--facebook)}
#facebook:hover a{background:rgb(255,87,34)}
#facebook:hover svg path{fill:#fff}
#facebook:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#facebook:hover .alo-circle{border-color:rgb(255,87,34)}
#mail a{background:var(--mail);border:2px #fff solid}
#mail svg path{fill:rgb(255,255,255)}
#mail .alo-circle-fill{background-color:var(--mailopa)}
#mail .alo-circle{border-color:var(--mail)}
#mail:hover a{background:rgb(255,87,34)}
#mail:hover svg path{fill:#fff}
#mail:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#mail:hover .alo-circle{border-color:rgb(255,87,34)}
#zalo svg{background:#fff;padding:1px}
#zalo svg path{fill:var(--zalo)}
#zalo .alo-circle-fill{background-color:var(--zaloopa)}
#zalo .alo-circle{border-color:var(--zalo)}
#zalo:hover svg{background:#fff}
#zalo:hover svg path{fill:rgb(255,87,34)}
#zalo:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#zalo:hover .alo-circle{border-color:rgb(255,87,34)}
#messenger svg{background:#fff;padding:1px}
#messenger svg path:first-child{fill:var(--messenger)}
#messenger .alo-circle-fill{background-color:var(--messengeropa)}
#messenger .alo-circle{border-color:var(--messenger)}
#messenger:hover svg{background:#fff}
#messenger:hover svg path:first-child{fill:rgb(255,87,34)}
#messenger:hover .alo-circle-fill{background-color:rgb(255,87,34,0.5)}
#messenger:hover .alo-circle{border-color:rgb(255,87,34)}
.support-online.type-01 a{display:block}
.support-online.type-02 a{display:flex;border-radius:100%;align-items:center;justify-content:center}
.support-online.type-01 svg{width:40px;height:40px;border-radius:100%}
.support-online.type-02 svg{width:25px;height:25px}
.support-online{}
.support-online a{position:relative;text-align:left;margin:10px;width:40px;height:40px}
.support-online svg{text-align:center;line-height:1.9;position:relative;z-index:9;animation:1s ease-in-out 0s normal none infinite running Icon-running}
.alo-circle-fill{width:60px;height:60px;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-ms-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .5s;-moz-transition:all .5s;-o-transition:all .5s;transition:all .5s;opacity:.75}
.alo-circle{width:50px;height:50px;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;background-color:transparent;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid rgba(30,30,30,0.4);opacity:.5}
.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}
.pulse{-webkit-animation-name:pulse;animation-name:pulse}
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}
@-moz-keyframes Grow{0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}50%{opacity:1;filter:alpha(opacity=100)}to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}}
@keyframes Grow{0%{transform:scale(.1);-ms-transform:scale(.1);-webkit-transform:scale(.1);opacity:0;filter:alpha(opacity=0)}50%{opacity:1;filter:alpha(opacity=100)}to{transform:scale(1.8);-ms-transform:scale(1.8);-webkit-transform:scale(1.8);opacity:0;filter:alpha(opacity=0)}}
@keyframes Icon-running{0%{transform:rotate(0deg) scale(1) skew(1deg)}10%{transform:rotate(-25deg) scale(1) skew(1deg)}20%{transform:rotate(25deg) scale(1) skew(1deg)}30%{transform:rotate(-25deg) scale(1) skew(1deg)}40%{transform:rotate(25deg) scale(1) skew(1deg)}50%{transform:rotate(0deg) scale(1) skew(1deg)}100%{transform:rotate(0deg) scale(1) skew(1deg)}}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:translate(-50%,-50%) scale3d(.3,.3,.3);-ms-transform:translate(-50%,-50%) scale3d(.3,.3,.3);transform:translate(-50%,-50%) scale3d(.3,.3,.3)}50%{opacity:1}}
@keyframes pulse{0%,100%{-webkit-transform:scale(1);transform:translate(-50%,-50%) scale(1);opacity:1}50%{-webkit-transform:scale(.9);transform:translate(-50%,-50%) scale(.9);opacity:.7}}
</style>

<ul id="FOLLOW-ICON">

   <li class="support-online type-02" id="phone">
      <a href="tel:0868450305" target="_blank">
         <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="phone-alt" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-phone-alt fa-w-16">
            <path fill="currentColor" d="M497.39 361.8l-112-48a24 24 0 0 0-28 6.9l-49.6 60.6A370.66 370.66 0 0 1 130.6 204.11l60.6-49.6a23.94 23.94 0 0 0 6.9-28l-48-112A24.16 24.16 0 0 0 122.6.61l-104 24A24 24 0 0 0 0 48c0 256.5 207.9 464 464 464a24 24 0 0 0 23.4-18.6l24-104a24.29 24.29 0 0 0-14.01-27.6z" class=""></path>
         </svg>
         <div class="animated infinite zoomIn alo-circle"></div>
         <div class="animated infinite pulse alo-circle-fill"></div>
      </a>
   </li>

   <li class="support-online type-01" id="zalo">
      <a href="https://zalo.me/0868450305" target="_blank">
         <svg id="svg_zalo_icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 614.501 613.667" xml:space="preserve">
            <path d="M464.721,301.399c-13.984-0.014-23.707,11.478-23.944,28.312c-0.251,17.771,9.168,29.208,24.037,29.202   c14.287-0.007,23.799-11.095,24.01-27.995C489.028,313.536,479.127,301.399,464.721,301.399z"></path>
            <path d="M291.83,301.392c-14.473-0.316-24.578,11.603-24.604,29.024c-0.02,16.959,9.294,28.259,23.496,28.502   c15.072,0.251,24.592-10.87,24.539-28.707C315.214,313.318,305.769,301.696,291.83,301.392z"></path>
            <path d="M310.518,3.158C143.102,3.158,7.375,138.884,7.375,306.3s135.727,303.142,303.143,303.142   c167.415,0,303.143-135.727,303.143-303.142S477.933,3.158,310.518,3.158z M217.858,391.083   c-33.364,0.818-66.828,1.353-100.133-0.343c-21.326-1.095-27.652-18.647-14.248-36.583c21.55-28.826,43.886-57.065,65.792-85.621   c2.546-3.305,6.214-5.996,7.15-12.705c-16.609,0-32.784,0.04-48.958-0.013c-19.195-0.066-28.278-5.805-28.14-17.652   c0.132-11.768,9.175-17.329,28.397-17.348c25.159-0.026,50.324-0.06,75.476,0.026c9.637,0.033,19.604,0.105,25.304,9.789   c6.22,10.561,0.284,19.512-5.646,27.454c-21.26,28.497-43.015,56.624-64.559,84.902c-2.599,3.41-5.119,6.88-9.453,12.725   c23.424,0,44.123-0.053,64.816,0.026c8.674,0.026,16.662,1.873,19.941,11.267C237.892,379.329,231.368,390.752,217.858,391.083z    M350.854,330.211c0,13.417-0.093,26.841,0.039,40.265c0.073,7.599-2.599,13.647-9.512,17.084   c-7.296,3.642-14.71,3.028-20.304-2.968c-3.997-4.281-6.214-3.213-10.488-0.422c-17.955,11.728-39.908,9.96-56.597-3.866   c-29.928-24.789-30.026-74.803-0.211-99.776c16.194-13.562,39.592-15.462,56.709-4.143c3.951,2.619,6.201,4.815,10.396-0.053   c5.39-6.267,13.055-6.761,20.271-3.357c7.454,3.509,9.935,10.165,9.776,18.265C350.67,304.222,350.86,317.217,350.854,330.211z    M395.617,369.579c-0.118,12.837-6.398,19.783-17.196,19.908c-10.779,0.132-17.593-6.966-17.646-19.512   c-0.179-43.352-0.185-86.696,0.007-130.041c0.059-12.256,7.302-19.921,17.896-19.222c11.425,0.752,16.992,7.448,16.992,18.833   c0,22.104,0,44.216,0,66.327C395.677,327.105,395.828,348.345,395.617,369.579z M463.981,391.868   c-34.399-0.336-59.037-26.444-58.786-62.289c0.251-35.66,25.304-60.713,60.383-60.396c34.631,0.304,59.374,26.306,58.998,61.986   C524.207,366.492,498.534,392.205,463.981,391.868z"></path>
         </svg>
         <div class="animated infinite zoomIn alo-circle"></div>
         <div class="animated infinite pulse alo-circle-fill"></div>
      </a>
   </li>

   <li class="support-online  type-01" id="messenger">
      <a href="https://www.facebook.com/mkhoi2001" target="_blank">
         <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" viewBox="0 0 614.5 613.667" enable-background="new 0 0 614.5 613.667" xml:space="preserve">
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#1E88E3" d="M307.493,3.136c164.628-0.713,305.026,133.85,302.952,307.063  C608.437,478.015,470.68,611.096,304.02,609.454C140.529,607.842,2.228,474.676,4.049,302.738  C5.839,133.767,144.104,2.26,307.493,3.136z M90.685,401.72c2.587,0.639,4.184-0.253,5.755-1.114  c13.712-7.508,27.413-15.035,41.12-22.552c37.04-20.315,74.075-40.638,111.127-60.931c7.36-4.032,8.957-3.855,13.919,1.462  c24.762,26.528,49.517,53.063,74.237,79.631c6.357,6.832,7.212,6.854,13.634,0.008c20.273-21.611,40.558-43.215,60.878-64.782  c36.646-38.893,73.324-77.756,109.977-116.643c1.105-1.173,3.13-2.661,2-4.082c-1.289-1.62-3.375-0.171-4.958,0.709  c-49.592,27.541-99.176,55.098-148.766,82.643c-6.145,3.412-7.596,3.147-12.506-1.997c-25.404-26.618-50.811-53.233-76.223-79.843  c-6.643-6.955-7.342-6.886-14.071,0.266c-50.881,54.071-101.784,108.122-152.674,162.187  C106.398,384.899,98.703,393.156,90.685,401.72z"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#FDFDFE" d="M90.685,401.72c8.019-8.564,15.714-16.821,23.449-25.039  c50.89-54.064,101.793-108.115,152.674-162.187c6.73-7.151,7.429-7.221,14.071-0.266c25.412,26.61,50.818,53.225,76.223,79.843  c4.91,5.145,6.361,5.409,12.506,1.997c49.59-27.545,99.174-55.101,148.766-82.643c1.583-0.879,3.669-2.329,4.958-0.709  c1.13,1.42-0.895,2.909-2,4.082c-36.652,38.886-73.331,77.75-109.977,116.643c-20.32,21.567-40.604,43.171-60.878,64.782  c-6.422,6.846-7.276,6.824-13.634-0.008c-24.721-26.567-49.476-53.102-74.237-79.631c-4.962-5.317-6.559-5.494-13.919-1.462  c-37.052,20.293-74.087,40.616-111.127,60.931c-13.707,7.517-27.408,15.044-41.12,22.552  C94.868,401.467,93.271,402.359,90.685,401.72z"></path>
         </svg>
         <div class="animated infinite zoomIn alo-circle"></div>
         <div class="animated infinite pulse alo-circle-fill"></div>
      </a>
   </li>

</ul>

<style>
.tempFixed .itemFixed{-webkit-transition:all .25s ease-in-out;-moz-transition:all .25s ease-in-out;-o-transition:all .25s ease-in-out;transition:all .25s ease-in-out;position:fixed;bottom:10px;right:10px;z-index:10}
.tempFixed .itemFixed *{box-sizing:border-box}
.tempFixed .itemFixed.hotLine{height:50px;width:210px;background:#424242;right:0;bottom:0}
.tempFixed .itemFixed.hotLine label{display:block;position:relative;height:50px}
.tempFixed .itemFixed.hotLine label a > span{margin:0 5px 0 -25px;display:inline-block;vertical-align:middle;width:50px;height:50px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGU6NtAjJyTNqrli_0kifJesS7TYpFa7bO700FqpXsLzsTwEbv5y5gS23k_lAID9wuE6MZWm7P2GS8cYgbzJyvHlLgHsl3BJi3etyQrmccGCV0XggSxd0d9AdqZq8nz9G9jL1NXdhx6C7I/s0/phone.webp') top left no-repeat}
.tempFixed .itemFixed.hotLine label p{display:inline-block;vertical-align:middle;color:#fff;font-size:13px;margin:0;font-weight:normal;height:50px}
.tempFixed .itemFixed.hotLine label i{z-index:1;position:absolute;top:14px;right:10px;display:inline-block;width:21px;height:21px;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFazB___0sxzBsCEN9OL2loFQbFVT2xdk5gt7na8VuIAYbFFTWEAqE3VESbt54p4qAsARPaKYmbTouqD6mQQJo4PVBJGqPBSovEjSnhWDUBAC21qK1XCq88p5UHm85B7HL_QyIF4AvYxr5/s0/close_w.webp') no-repeat;cursor:pointer}
</style>
<div class='tempFixed adr'>
<div class='itemFixed hotLine'>
  <label>
    <a href='tel:0868.450.305' title='Hotline'>
      <span></span>
      <p>Tư vấn miễn phí(24/7)<br/>
        <span>0868.450.305</span></p>
    </a>
    <i></i>
  </label>
</div>
</div>
<script>//<![CDATA[
jQuery(".tempFixed .itemFixed.hotLine label i").click(function(){$(this).parents(".hotLine").fadeOut(500)})
//]]></script>

<style>
@keyframes ani-zalo{0%{opacity:1;width:100%;height:100%;top:0;left:0}100%{opacity:0;width:calc(100% + 30px);height:calc(100% + 30px);top:-15px;left:-15px}}
#btn-zalo:before{content:"";position:absolute;z-index:-1;height:calc(100% + 30px);width:calc(100% + 30px);top:-15px;left:-15px;display:block;background:#0065be;border-radius:50%;opacity:0.8;animation-name:ani-zalo;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate}
.btn-contact{position:fixed;border-radius:50%;height:50px;width:50px;display:block;box-shadow:5px 7px 15px 0 rgba(0,0,0,0.3);right:50px}
#btn-zalo{bottom:120px;right:50px}
#btn-call-phone{bottom:180px}
#btn-sms{bottom:240px}
#btn-message{bottom:300px}
.btn-contact img{width:100%;height:100%;margin:0;border-radius:50%}
</style>
<a class='btn-contact' href='http://m.me/hoablogger/' id='btn-message' target='_blank'>
  <img alt='message' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsiXB9H9vS6Snpo0m0hGD7ZSbPsDHSAkXD4fVsjlvMCCFa9kVIX5FN2oFDbn6RebLUPYfUm6d5acXvfgpu2l-MSBPc7m7y6qK1hp_TdKtBCQda4X4987ZjwcB2HiCyH022_JSXs6USz14/s0/messenger.png' />
</a>
<a class='btn-contact' href='sms:+0971539681' id='btn-sms' target='_blank'>
  <img alt='sms' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVdPoHuJuPgb6WrkeJ-pflf1B46TeNBX590t-UMsugEQAHIr9nDouYG0qJLYhSCRxDfmiW9NrupkKmEyOVdBvldRTlxcN7go1vNF3XIpJ97-u4jEXBRoO63npFZ_8_StleDFtw16LEho/s0/sms.png' />
</a>
<a class='btn-contact' href='tel:+0971539681' id='btn-call-phone' target='_blank'>
  <img alt='phone' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgArKFjhjG1QP7qpdyuboBPCFnpmcoSYUzICzja3OrELndukN_z37Bkfh8ChTvRbMqORxnV7ZMEgRSGHx-6EDUlEYgH8QGeW3wqb_jE63lgNh0N40RVoe-raJlGC4aieKwzY2ZVb1M-6JA/s0/phone.png' />
</a>
<a class='btn-contact' href='https://zalo.me/0971539681' id='btn-zalo' target='_blank'>
  <img alt='zalo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0qhU4FEG0xhvf_nE94iORsamFB79fci9QSnM5S0bAoY4wMgdqNabHUFo3gxmfwb_y1oNF9G4AqUj3e7_icE3HTC-xzHncwS6hMUAn7itkMThQuEnjlj4IB5VqP9MduWJkNy-EvS5EVpg/s0/zalo.png' />
</a>