File: /home/dkhp464/public_html/wp-content/themes/DaKhoaHongPhat/blocks/fixed-contact.php
<?php if(lighthouse()): ?>
<div class="phone-alo-phone">
<a href="tel:<?= PHONE ?>" title="Gọi điện thoại">
<div class="phone-alo-ph-circle"></div>
<div class="phone-alo-ph-circle-fill"></div>
<div class="phone-alo-ph-img-circle"></div>
</a>
</div>
<!-- <div class="contact-zalo-phone">
<a href="https://zalo.me/<?=ZALO?>" title="Gọi điện thoại">
<div class="contact-zalo-ph-circle"></div>
<div class="contact-zalo-ph-circle-fill"></div>
<div class="contact-zalo-ph-img-circle"></div>
</a>
</div> -->
<!--<div class="contact-mess-phone">-->
<!-- <a href="<?=LIVE_CHAT?>" title="Gọi điện thoại">-->
<!-- <div class="contact-mess-ph-circle"></div>-->
<!-- <div class="contact-mess-ph-circle-fill"></div>-->
<!-- <div class="contact-mess-ph-img-circle"></div>-->
<!-- </a>-->
<!-- </div>-->
<style>
.phone-alo-phone {position: fixed;background-color: transparent;width: 70px;height: 70px;cursor: pointer;z-index: 200 !important;-webkit-backface-visibility: hidden;-webkit-transform: translateZ(0);-webkit-transition: visibility 0.5s;-moz-transition: visibility 0.5s;-o-transition: visibility 0.5s;transition: visibility 0.5s;right: 0;}.phone-alo-ph-circle {width: 100%;height: 100%;top: 0;left: 0;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);-webkit-animation: phone-alo-circle-anim 1.2s infinite ease-in-out;-moz-animation: phone-alo-circle-anim 1.2s infinite ease-in-out;-ms-animation: phone-alo-circle-anim 1.2s infinite ease-in-out;-o-animation: phone-alo-circle-anim 1.2s infinite ease-in-out;animation: phone-alo-circle-anim 1.2s infinite ease-in-out;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;border-color: #f15b5a;opacity: 0.5;}.phone-alo-ph-circle-fill {width: 70%;height: 70%;top: 15%;left: 15%;position: absolute;background-color: #000;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: phone-alo-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: phone-alo-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: phone-alo-circle-fill-anim 2.3s infinite ease-in-out;-o-animation: phone-alo-circle-fill-anim 2.3s infinite ease-in-out;animation: phone-alo-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;background-color: rgba(0, 175, 242, 0.5);background-color: #f15b5a;opacity: 0.75 !important;}.phone-alo-ph-img-circle {top: 20%;right: 20%;bottom: 20%;left: 20%;position: absolute;background: rgba(30, 30, 30, 0.1) url(<?= get_template_directory_uri() ?>/image/icon-call.png) no-repeat center center;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;opacity: 0.9;-webkit-animation: phone-alo-circle-img-anim 1s infinite ease-in-out;-moz-animation: phone-alo-circle-img-anim 1s infinite ease-in-out;-ms-animation: phone-alo-circle-img-anim 1s infinite ease-in-out;-o-animation: phone-alo-circle-img-anim 1s infinite ease-in-out;animation: phone-alo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;background-size: 70%;background-color: #ff0200;border: 1px solid #ffffff9e;}@media screen and (min-width: 991px) {.phone-alo-phone {width: 90px;height: 90px;}}@-moz-keyframes phone-alo-circle-anim {0% {-moz-transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1;-moz-opacity: 0.1;-webkit-opacity: 0.1;-o-opacity: 0.1;}30% {-moz-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5;-moz-opacity: 0.5;-webkit-opacity: 0.5;-o-opacity: 0.5;}100% {-moz-transform: rotate(0) scale(1) skew(1deg);opacity: 0.6;-moz-opacity: 0.6;-webkit-opacity: 0.6;-o-opacity: 0.1;}}@-webkit-keyframes phone-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;}}@-o-keyframes phone-alo-circle-anim {0% {-o-transform: rotate(0) scale(0.5) skew(1deg);-o-opacity: 0.1;}30% {-o-transform: rotate(0) scale(0.7) skew(1deg);-o-opacity: 0.5;}100% {-o-transform: rotate(0) scale(1) skew(1deg);-o-opacity: 0.1;}}@-webkit-keyframes phone-alo-circle-fill-anim {0% {-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2;}100% {-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}}@-o-keyframes phone-alo-circle-fill-anim {0% {-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}50% {-o-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2;}100% {-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}}@-moz-keyframes phone-alo-circle-img-anim {0% {transform: rotate(0) scale(1) skew(1deg);}10% {-moz-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-moz-transform: rotate(25deg) scale(1) skew(1deg);}30% {-moz-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-moz-transform: rotate(25deg) scale(1) skew(1deg);}50% {-moz-transform: rotate(0) scale(1) skew(1deg);}100% {-moz-transform: rotate(0) scale(1) skew(1deg);}}@-webkit-keyframes phone-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);}}@-o-keyframes phone-alo-circle-img-anim {0% {-o-transform: rotate(0) scale(1) skew(1deg);}10% {-o-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-o-transform: rotate(25deg) scale(1) skew(1deg);}30% {-o-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-o-transform: rotate(25deg) scale(1) skew(1deg);}50% {-o-transform: rotate(0) scale(1) skew(1deg);}100% {-o-transform: rotate(0) scale(1) skew(1deg);}}
.contact-mess-phone {position: fixed;background-color: transparent;width: 70px;height: 70px;cursor: pointer;z-index: 200 !important;-webkit-backface-visibility: hidden;-webkit-transform: translateZ(0);-webkit-transition: visibility 0.5s;-moz-transition: visibility 0.5s;-o-transition: visibility 0.5s;transition: visibility 0.5s;right: 0;}.contact-mess-ph-circle {width: 100%;height: 100%;top: 0;left: 0;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);-webkit-animation: contact-mess-circle-anim 1.2s infinite ease-in-out;-moz-animation: contact-mess-circle-anim 1.2s infinite ease-in-out;-ms-animation: contact-mess-circle-anim 1.2s infinite ease-in-out;-o-animation: contact-mess-circle-anim 1.2s infinite ease-in-out;animation: contact-mess-circle-anim 1.2s infinite ease-in-out;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;border-color: #FF6EC7 ;opacity: 0.5;}.contact-mess-ph-circle-fill {width: 70%;height: 70%;top: 15%;left: 15%;position: absolute;background-color: #000;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: contact-mess-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: contact-mess-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: contact-mess-circle-fill-anim 2.3s infinite ease-in-out;-o-animation: contact-mess-circle-fill-anim 2.3s infinite ease-in-out;animation: contact-mess-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;background-color: rgba(0, 175, 242, 0.5);background-color: #e3e3e3;opacity: 0.75 !important;}.contact-mess-ph-img-circle {top: 20%;right: 20%;bottom: 20%;left: 20%;position: absolute;background: rgba(30, 30, 30, 0.1) url(<?= get_template_directory_uri() ?>/image/icon_mess.png) no-repeat center center;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;opacity: 0.9;-webkit-animation: contact-mess-circle-img-anim 1s infinite ease-in-out;-moz-animation: contact-mess-circle-img-anim 1s infinite ease-in-out;-ms-animation: contact-mess-circle-img-anim 1s infinite ease-in-out;-o-animation: contact-mess-circle-img-anim 1s infinite ease-in-out;animation: contact-mess-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;background-size: 70%;background-color: #FF6EC7 ;border: 1px solid #ffffff9e;}@media screen and (min-width: 991px) {.contact-mess-phone {width: 90px;height: 90px;}}@-moz-keyframes contact-mess-circle-anim {0% {-moz-transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1;-moz-opacity: 0.1;-webkit-opacity: 0.1;-o-opacity: 0.1;}30% {-moz-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5;-moz-opacity: 0.5;-webkit-opacity: 0.5;-o-opacity: 0.5;}100% {-moz-transform: rotate(0) scale(1) skew(1deg);opacity: 0.6;-moz-opacity: 0.6;-webkit-opacity: 0.6;-o-opacity: 0.1;}}@-webkit-keyframes contact-mess-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;}}@-o-keyframes contact-mess-circle-anim {0% {-o-transform: rotate(0) scale(0.5) skew(1deg);-o-opacity: 0.1;}30% {-o-transform: rotate(0) scale(0.7) skew(1deg);-o-opacity: 0.5;}100% {-o-transform: rotate(0) scale(1) skew(1deg);-o-opacity: 0.1;}}@-webkit-keyframes contact-mess-circle-fill-anim {0% {-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2;}100% {-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}}@-o-keyframes contact-mess-circle-fill-anim {0% {-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}50% {-o-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2;}100% {-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}}@-moz-keyframes contact-mess-circle-img-anim {0% {transform: rotate(0) scale(1) skew(1deg);}10% {-moz-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-moz-transform: rotate(25deg) scale(1) skew(1deg);}30% {-moz-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-moz-transform: rotate(25deg) scale(1) skew(1deg);}50% {-moz-transform: rotate(0) scale(1) skew(1deg);}100% {-moz-transform: rotate(0) scale(1) skew(1deg);}}@-webkit-keyframes contact-mess-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);}}@-o-keyframes contact-mess-circle-img-anim {0% {-o-transform: rotate(0) scale(1) skew(1deg);}10% {-o-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-o-transform: rotate(25deg) scale(1) skew(1deg);}30% {-o-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-o-transform: rotate(25deg) scale(1) skew(1deg);}50% {-o-transform: rotate(0) scale(1) skew(1deg);}100% {-o-transform: rotate(0) scale(1) skew(1deg);}}
.contact-zalo-phone {position: fixed;background-color: transparent;width: 70px;height: 70px;cursor: pointer;z-index: 200 !important;-webkit-backface-visibility: hidden;-webkit-transform: translateZ(0);-webkit-transition: visibility 0.5s;-moz-transition: visibility 0.5s;-o-transition: visibility 0.5s;transition: visibility 0.5s;top: 40%;right: 0;}.contact-zalo-ph-circle {width: 100%;height: 100%;top: 0;left: 0;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);-webkit-animation: contact-zalo-circle-anim 1.2s infinite ease-in-out;-moz-animation: contact-zalo-circle-anim 1.2s infinite ease-in-out;-ms-animation: contact-zalo-circle-anim 1.2s infinite ease-in-out;-o-animation: contact-zalo-circle-anim 1.2s infinite ease-in-out;animation: contact-zalo-circle-anim 1.2s infinite ease-in-out;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;border-color: #0084FF;opacity: 0.5;}.contact-zalo-ph-circle-fill {width: 70%;height: 70%;top: 15%;left: 15%;position: absolute;background-color: #000;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;border: 2px solid transparent;-webkit-animation: contact-zalo-circle-fill-anim 2.3s infinite ease-in-out;-moz-animation: contact-zalo-circle-fill-anim 2.3s infinite ease-in-out;-ms-animation: contact-zalo-circle-fill-anim 2.3s infinite ease-in-out;-o-animation: contact-zalo-circle-fill-anim 2.3s infinite ease-in-out;animation: contact-zalo-circle-fill-anim 2.3s infinite ease-in-out;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;-o-transition: all 0.5s;transition: all 0.5s;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;background-color: rgba(0, 175, 242, 0.5);background-color: #e3e3e3;opacity: 0.75 !important;}.contact-zalo-ph-img-circle {top: 20%;right: 20%;bottom: 20%;left: 20%;position: absolute;background: rgba(30, 30, 30, 0.1) url(<?= get_template_directory_uri() ?>/image/icon_zalo.png) no-repeat center center;-webkit-border-radius: 100%;-moz-border-radius: 100%;border-radius: 100%;opacity: 0.9;-webkit-animation: contact-zalo-circle-img-anim 1s infinite ease-in-out;-moz-animation: contact-zalo-circle-img-anim 1s infinite ease-in-out;-ms-animation: contact-zalo-circle-img-anim 1s infinite ease-in-out;-o-animation: contact-zalo-circle-img-anim 1s infinite ease-in-out;animation: contact-zalo-circle-img-anim 1s infinite ease-in-out;-webkit-transform-origin: 50% 50%;-moz-transform-origin: 50% 50%;-ms-transform-origin: 50% 50%;-o-transform-origin: 50% 50%;transform-origin: 50% 50%;background-size: 70%;background-color: #0084FF;border: 1px solid #ffffff9e;}@media screen and (min-width: 991px) {.contact-zalo-phone {width: 90px;height: 90px;}}@-moz-keyframes contact-zalo-circle-anim {0% {-moz-transform: rotate(0) scale(0.5) skew(1deg);opacity: 0.1;-moz-opacity: 0.1;-webkit-opacity: 0.1;-o-opacity: 0.1;}30% {-moz-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.5;-moz-opacity: 0.5;-webkit-opacity: 0.5;-o-opacity: 0.5;}100% {-moz-transform: rotate(0) scale(1) skew(1deg);opacity: 0.6;-moz-opacity: 0.6;-webkit-opacity: 0.6;-o-opacity: 0.1;}}@-webkit-keyframes contact-zalo-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;}}@-o-keyframes contact-zalo-circle-anim {0% {-o-transform: rotate(0) scale(0.5) skew(1deg);-o-opacity: 0.1;}30% {-o-transform: rotate(0) scale(0.7) skew(1deg);-o-opacity: 0.5;}100% {-o-transform: rotate(0) scale(1) skew(1deg);-o-opacity: 0.1;}}@-webkit-keyframes contact-zalo-circle-fill-anim {0% {-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}50% {-webkit-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2;}100% {-webkit-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}}@-o-keyframes contact-zalo-circle-fill-anim {0% {-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}50% {-o-transform: rotate(0) scale(1) skew(1deg);opacity: 0.2;}100% {-o-transform: rotate(0) scale(0.7) skew(1deg);opacity: 0.2;}}@-moz-keyframes contact-zalo-circle-img-anim {0% {transform: rotate(0) scale(1) skew(1deg);}10% {-moz-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-moz-transform: rotate(25deg) scale(1) skew(1deg);}30% {-moz-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-moz-transform: rotate(25deg) scale(1) skew(1deg);}50% {-moz-transform: rotate(0) scale(1) skew(1deg);}100% {-moz-transform: rotate(0) scale(1) skew(1deg);}}@-webkit-keyframes contact-zalo-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);}}@-o-keyframes contact-zalo-circle-img-anim {0% {-o-transform: rotate(0) scale(1) skew(1deg);}10% {-o-transform: rotate(-25deg) scale(1) skew(1deg);}20% {-o-transform: rotate(25deg) scale(1) skew(1deg);}30% {-o-transform: rotate(-25deg) scale(1) skew(1deg);}40% {-o-transform: rotate(25deg) scale(1) skew(1deg);}50% {-o-transform: rotate(0) scale(1) skew(1deg);}100% {-o-transform: rotate(0) scale(1) skew(1deg);}}
.phone-alo-phone{
top: 250px;
}
.contact-zalo-phone{
top: 350px;
}
</style>
<?php endif;?>