Tổng hợp các loại nút liên hệ đẹp cho blogspot
Cập nhật ngày
Bởi Minh Khôi
Tiện ích liên hệ trên một website là một công cụ chính giúp khách hàng liên lạc với chúng ta dễ hơn. Chắc chắn hơn 50% lượt liên hệ với bạn đều đến từ các button này. Vì vậy chúng ta cần phải làm đẹp các nút liên hệ này. Dưới đây là tổng hợp 4 button liên hệ cực xịn sò mà mình sưu tập được.
1. AR Contact Us
<script type='text/javascript'>
//<![CDATA[
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.arrayIteratorImpl=function(b){var d=0;return function(){return d<b.length?{done:!1,value:b[d++]}:{done:!0}}};$jscomp.arrayIterator=function(b){return{next:$jscomp.arrayIteratorImpl(b)}};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.SIMPLE_FROUND_POLYFILL=!1;
$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(b,d,a){b!=Array.prototype&&b!=Object.prototype&&(b[d]=a.value)};$jscomp.getGlobal=function(b){return"undefined"!=typeof window&&window===b?b:"undefined"!=typeof global&&null!=global?global:b};$jscomp.global=$jscomp.getGlobal(this);$jscomp.SYMBOL_PREFIX="jscomp_symbol_";$jscomp.initSymbol=function(){$jscomp.initSymbol=function(){};$jscomp.global.Symbol||($jscomp.global.Symbol=$jscomp.Symbol)};
$jscomp.Symbol=function(){var b=0;return function(d){return $jscomp.SYMBOL_PREFIX+(d||"")+b++}}();$jscomp.initSymbolIterator=function(){$jscomp.initSymbol();var b=$jscomp.global.Symbol.iterator;b||(b=$jscomp.global.Symbol.iterator=$jscomp.global.Symbol("iterator"));"function"!=typeof Array.prototype[b]&&$jscomp.defineProperty(Array.prototype,b,{configurable:!0,writable:!0,value:function(){return $jscomp.iteratorPrototype($jscomp.arrayIteratorImpl(this))}});$jscomp.initSymbolIterator=function(){}};
$jscomp.initSymbolAsyncIterator=function(){$jscomp.initSymbol();var b=$jscomp.global.Symbol.asyncIterator;b||(b=$jscomp.global.Symbol.asyncIterator=$jscomp.global.Symbol("asyncIterator"));$jscomp.initSymbolAsyncIterator=function(){}};$jscomp.iteratorPrototype=function(b){$jscomp.initSymbolIterator();b={next:b};b[$jscomp.global.Symbol.iterator]=function(){return this};return b};
$jscomp.iteratorFromArray=function(b,d){$jscomp.initSymbolIterator();b instanceof String&&(b+="");var a=0,c={next:function(){if(a<b.length){var e=a++;return{value:d(e,b[e]),done:!1}}c.next=function(){return{done:!0,value:void 0}};return c.next()}};c[Symbol.iterator]=function(){return c};return c};
$jscomp.polyfill=function(b,d,a,c){if(d){a=$jscomp.global;b=b.split(".");for(c=0;c<b.length-1;c++){var e=b[c];e in a||(a[e]={});a=a[e]}b=b[b.length-1];c=a[b];d=d(c);d!=c&&null!=d&&$jscomp.defineProperty(a,b,{configurable:!0,writable:!0,value:d})}};$jscomp.polyfill("Array.prototype.values",function(b){return b?b:function(){return $jscomp.iteratorFromArray(this,function(b,a){return a})}},"es8","es3");
$jscomp.findInternal=function(b,d,a){b instanceof String&&(b=String(b));for(var c=b.length,e=0;e<c;e++){var l=b[e];if(d.call(a,l,e,b))return{i:e,v:l}}return{i:-1,v:void 0}};$jscomp.polyfill("Array.prototype.find",function(b){return b?b:function(b,a){return $jscomp.findInternal(this,b,a).v}},"es6","es3");
(function(b){function d(a,c){this._initialized=!1;this.settings=null;this.popups=[];this.options=b.extend({},d.Defaults,c);this.$element=b(a);this.init();this.y=this.x=0;this._interval;this._callbackOpened=this._popupOpened=this._menuOpened=!1;this.countdown=null}d.Defaults={activated:!1,pluginVersion:"2.0.1",wordpressPluginVersion:!1,align:"right",mode:"regular",countdown:0,drag:!1,buttonText:"Contact us",buttonSize:"large",menuSize:"normal",buttonIcon:'<svg width="20" height="20" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-825 -308)"><g><path transform="translate(825 308)" fill="#FFFFFF" d="M 19 4L 17 4L 17 13L 4 13L 4 15C 4 15.55 4.45 16 5 16L 16 16L 20 20L 20 5C 20 4.45 19.55 4 19 4ZM 15 10L 15 1C 15 0.45 14.55 0 14 0L 1 0C 0.45 0 0 0.45 0 1L 0 15L 4 11L 14 11C 14.55 11 15 10.55 15 10Z"/></g></g></svg>',
ajaxUrl:"server.php",action:"callback",phonePlaceholder:"+X-XXX-XXX-XX-XX",callbackSubmitText:"Waiting for call",reCaptcha:!1,reCaptchaAction:"callbackRequest",reCaptchaKey:"",errorMessage:"Connection error. Please try again.",callProcessText:"We are calling you to phone",callSuccessText:"Thank you.<br>We are call you back soon.",showMenuHeader:!1,menuHeaderText:"How would you like to contact us?",showHeaderCloseBtn:!0,menuInAnimationClass:"show-messageners-block",menuOutAnimationClass:"",eaderCloseBtnBgColor:"#787878",
eaderCloseBtnColor:"#FFFFFF",items:[],itemsIconType:"rounded",iconsAnimationSpeed:800,iconsAnimationPause:2E3,promptPosition:"side",callbackFormFields:{name:{name:"name",enabled:!0,required:!0,type:"text",label:"Please enter your name",placeholder:"Your full name"},email:{name:"email",enabled:!0,required:!1,type:"email",label:"Enter your email address",placeholder:"Optional field. Example: email@domain.com"},time:{name:"time",enabled:!0,required:!1,type:"dropdown",label:"Please choose schedule time",
values:[{value:"asap",label:"Call me ASAP"},"00:00","01:00","02:00","03:00","04:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00","13:00","14:00","15:00","16:00","17:00","18:00","19:00","20:00","21:00","22:00","23:00"]},phone:{name:"phone",enabled:!0,required:!0,type:"tel",label:"Please enter your phone number",placeholder:"+X-XXX-XXX-XX-XX"},description:{name:"description",enabled:!0,required:!1,type:"textarea",label:"Please leave a message with your request"}},theme:"#000000",
callbackFormText:"Please enter your phone number<br>and we call you back soon",closeIcon:'<svg width="12" height="13" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g transform="translate(-4087 108)"><g><path transform="translate(4087 -108)" fill="currentColor" d="M 14 1.41L 12.59 0L 7 5.59L 1.41 0L 0 1.41L 5.59 7L 0 12.59L 1.41 14L 7 8.41L 12.59 14L 14 12.59L 8.41 7L 14 1.41Z"></path></g></g></svg>',callbackStateIcon:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>'};
d.prototype.init=function(){if(this._initialized)return!1;this.destroy();this.settings=b.extend({},this.options);this.$element.addClass("arcontactus-widget").addClass("arcontactus-message");"left"===this.settings.align?this.$element.addClass("left"):this.$element.addClass("right");this.settings.items.length?(this.$element.append("\x3c!--noindex--\x3e"),this._initCallbackBlock(),"regular"==this.settings.mode&&this._initMessengersBlock(),this.popups.length&&this._initPopups(),this._initMessageButton(),
this._initPrompt(),this._initEvents(),this.startAnimation(),this.$element.append("\x3c!--/noindex--\x3e"),this.$element.addClass("active")):console.info("jquery.contactus:no items");this._initialized=!0;this.$element.trigger("arcontactus.init")};d.prototype.destroy=function(){if(!this._initialized)return!1;this.$element.html("");this._initialized=!1;this.$element.trigger("arcontactus.destroy")};d.prototype._initCallbackBlock=function(){var a=b("<div>",{class:"callback-countdown-block",style:this._colorStyle()}),
c=b("<div>",{class:"callback-countdown-block-close",style:"background-color:"+this.settings.theme+"; color: #FFFFFF"});c.append(this.settings.closeIcon);var e=b("<div>",{class:"callback-countdown-block-phone"});e.append("<p>"+this.settings.callbackFormText+"</p>");var d=b("<form>",{id:"arcu-callback-form",action:this.settings.ajaxUrl,method:"POST"}),h=b("<div>",{class:"callback-countdown-block-form-group"}),f=b("<input>",{name:"action",type:"hidden",value:this.settings.action}),g=b("<input>",{name:"gtoken",
class:"ar-g-token",type:"hidden",value:""});h.append(f);h.append(g);this._initCallbackFormFields(h);f=b("<div>",{class:"arcu-form-group arcu-form-button"});g=b("<button>",{id:"arcontactus-message-callback-phone-submit",type:"submit",style:this._backgroundStyle()});g.text(this.settings.callbackSubmitText);f.append(g);h.append(f);f=b("<div>",{class:"callback-countdown-block-timer"});g=b("<p>"+this.settings.callProcessText+"</p>");var k=b("<div>",{class:"callback-countdown-block-timer_timer"});f.append(g);
f.append(k);g=b("<div>",{class:"callback-countdown-block-sorry"});k=b("<p>"+this.settings.callSuccessText+"</p>");g.append(k);d.append(h);e.append(d);a.append(c);a.append(e);a.append(f);a.append(g);this.$element.append(a)};d.prototype._initCallbackFormFields=function(a){var c=this;b.each(c.settings.callbackFormFields,function(e){var d=b("<div>",{class:"arcu-form-group arcu-form-group-type-"+c.settings.callbackFormFields[e].type+" arcu-form-group-"+c.settings.callbackFormFields[e].name+(c.settings.callbackFormFields[e].required?
" arcu-form-group-required":"")}),h="<input>";switch(c.settings.callbackFormFields[e].type){case "textarea":h="<textarea>";break;case "dropdown":h="<select>"}if(c.settings.callbackFormFields[e].label){var f=b("<div>",{class:"arcu-form-label"});f.html(c.settings.callbackFormFields[e].label);d.append(f)}var g=b(h,{name:c.settings.callbackFormFields[e].name,class:"arcu-form-field arcu-field-"+c.settings.callbackFormFields[e].name,required:c.settings.callbackFormFields[e].required,type:"dropdown"==c.settings.callbackFormFields[e].type?
null:c.settings.callbackFormFields[e].type,value:""});g.attr("placeholder",c.settings.callbackFormFields[e].placeholder);"undefined"!=typeof c.settings.callbackFormFields[e].maxlength&&g.attr("maxlength",c.settings.callbackFormFields[e].maxlength);"dropdown"==c.settings.callbackFormFields[e].type&&b.each(c.settings.callbackFormFields[e].values,function(a){var d=c.settings.callbackFormFields[e].values[a],l=c.settings.callbackFormFields[e].values[a];"object"==typeof c.settings.callbackFormFields[e].values[a]&&
(d=c.settings.callbackFormFields[e].values[a].value,l=c.settings.callbackFormFields[e].values[a].label);a=b("<option>",{value:d});a.text(l);g.append(a)});d.append(g);a.append(d)})};d.prototype._initPopups=function(){var a=this,c=b("<div>",{class:"popups-block arcuAnimated"}),e=b("<div>",{class:"popups-list-container"});b.each(this.popups,function(){var c=b("<div>",{class:"arcu-popup",id:"arcu-popup-"+this.id}),d=b("<div>",{class:"arcu-popup-header",style:a.settings.theme?"background-color:"+a.settings.theme:
null}),f=b("<div>",{class:"arcu-popup-close",style:a.settings.theme?"background-color:"+a.settings.theme:null}),g=b("<div>",{class:"arcu-popup-back",style:a.settings.theme?"background-color:"+a.settings.theme:null});f.append(a.settings.closeIcon);g.append('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="M231.293 473.899l19.799-19.799c4.686-4.686 4.686-12.284 0-16.971L70.393 256 251.092 74.87c4.686-4.686 4.686-12.284 0-16.971L231.293 38.1c-4.686-4.686-12.284-4.686-16.971 0L4.908 247.515c-4.686 4.686-4.686 12.284 0 16.971L214.322 473.9c4.687 4.686 12.285 4.686 16.971-.001z" class=""></path></svg>');
d.text(this.title);d.append(f);d.append(g);f=b("<div>",{class:"arcu-popup-content"});f.html(this.popupContent);c.append(d);c.append(f);e.append(c)});c.append(e);this.$element.append(c)};d.prototype._initMessengersBlock=function(){var a=b("<div>",{class:"messangers-block arcuAnimated"}),c=b("<div>",{class:"messangers-list-container"}),e=b("<ul>",{class:"messangers-list"});"normal"!==this.settings.menuSize&&"large"!==this.settings.menuSize||a.addClass("lg");"small"===this.settings.menuSize&&a.addClass("sm");
this._appendMessengerIcons(e);if(this.settings.showMenuHeader){var d=b("<div>",{class:"arcu-menu-header",style:this.settings.theme?"background-color:"+this.settings.theme:null});d.html(this.settings.menuHeaderText);if(this.settings.showHeaderCloseBtn){var h=b("<div>",{class:"arcu-header-close",style:"color:"+this.settings.headerCloseBtnColor+"; background:"+this.settings.headerCloseBtnBgColor});h.append(this.settings.closeIcon);d.append(h)}a.append(d);a.addClass("has-header")}"rounded"==this.settings.itemsIconType?
e.addClass("rounded-items"):e.addClass("not-rounded-items");c.append(e);a.append(c);this.$element.append(a)};d.prototype._appendMessengerIcons=function(a){var c=this;b.each(this.settings.items,function(e){e=b("<li>",{});if("callback"==this.href)var d=b("<div>",{class:"messanger call-back "+(this.class?this.class:"")});else if("_popup"==this.href)c.popups.push(this),d=b("<div>",{class:"messanger arcu-popup-link "+(this.class?this.class:""),"data-id":this.id?this.id:null});else if(d=b("<a>",{class:"messanger "+
(this.class?this.class:""),id:this.id?this.id:null,href:this.href}),this.onClick){var h=this;d.on("click",function(a){h.onClick(a)})}var f="rounded"==c.settings.itemsIconType?b("<span>",{style:this.color?"background-color:"+this.color:null}):b("<span>",{style:(this.color?"color:"+this.color:null)+"; background-color: transparent"});f.append(this.icon);d.append(f);f=b("<div>",{class:"arcu-item-label"});var g=b("<div>",{class:"arcu-item-title"});
g.text(this.title);f.append(g);"undefined"!=typeof this.subTitle&&this.subTitle&&(g=b("<div>",{class:"arcu-item-subtitle"}),g.text(this.subTitle),f.append(g));d.append(f);e.append(d);a.append(e)})};d.prototype._initMessageButton=function(){var a=this,c=b("<div>",{class:"arcontactus-message-button",style:this._backgroundStyle()});"large"===this.settings.buttonSize&&this.$element.addClass("lg");"huge"===this.settings.buttonSize&&this.$element.addClass("hg");"medium"===this.settings.buttonSize&&this.$element.addClass("md");
"small"===this.settings.buttonSize&&this.$element.addClass("sm");var e=b("<div>",{class:"static"});e.append(this.settings.buttonIcon);!1!==this.settings.buttonText?e.append("<p>"+this.settings.buttonText+"</p>"):c.addClass("no-text");var d=b("<div>",{class:"callback-state",style:a._colorStyle()});d.append(this.settings.callbackStateIcon);var h=b("<div>",{class:"icons hide"}),f=b("<div>",{class:"icons-line"});b.each(this.settings.items,function(c){c=b("<span>",{style:a._colorStyle()});c.append(this.icon);
f.append(c)});h.append(f);var g=b("<div>",{class:"arcontactus-close"});g.append(this.settings.closeIcon);var k=b("<div>",{class:"pulsation",style:a._backgroundStyle()}),m=b("<div>",{class:"pulsation",style:a._backgroundStyle()});c.append(e).append(d).append(h).append(g).append(k).append(m);this.$element.append(c)};d.prototype._initPrompt=function(){var a=b("<div>",{class:"arcontactus-prompt arcu-prompt-"+this.settings.promptPosition}),c=b("<div>",{class:"arcontactus-prompt-close",style:this._backgroundStyle()+
"; color: #FFFFFF"});c.append(this.settings.closeIcon);var e=b("<div>",{class:"arcontactus-prompt-inner"});a.append(c).append(e);this.$element.append(a)};d.prototype._initEvents=function(){var a=this.$element,c=this;a.find(".arcontactus-message-button").on("mousedown",function(a){c.x=a.pageX;c.y=a.pageY}).on("mouseup",function(a){if(c.settings.drag&&a.pageX===c.x&&a.pageY===c.y||!c.settings.drag)"regular"==c.settings.mode?c._menuOpened||c._popupOpened||c._callbackOpened?(c._menuOpened&&c.closeMenu(),
c._popupOpened&&c.closePopup()):c.openMenu():c.openCallbackPopup(),a.preventDefault()});this.settings.drag&&(a.draggable(),a.get(0).addEventListener("touchmove",function(c){var b=c.targetTouches[0];a.get(0).style.left=b.pageX-25+"px";a.get(0).style.top=b.pageY-25+"px";c.preventDefault()},!1));b(document).on("click",function(a){c.closeMenu();c.closePopup()});a.on("click",function(a){a.stopPropagation()});a.find(".call-back").on("click",function(){c.openCallbackPopup()});a.find(".arcu-popup-link").on("click",
function(){var a=b(this).data("id");c.openPopup(a)});a.find(".arcu-header-close").on("click",function(){c.closeMenu()});a.find(".arcu-popup-close").on("click",function(){c.closePopup()});a.find(".arcu-popup-back").on("click",function(){c.closePopup();c.openMenu()});a.find(".callback-countdown-block-close").on("click",function(){null!=c.countdown&&(clearInterval(c.countdown),c.countdown=null);c.closeCallbackPopup()});a.find(".arcontactus-prompt-close").on("click",function(){c.hidePrompt()});a.find("#arcu-callback-form").on("submit",
function(b){b.preventDefault();a.find(".callback-countdown-block-phone").addClass("ar-loading");c.settings.reCaptcha?grecaptcha.execute(c.settings.reCaptchaKey,{action:c.settings.reCaptchaAction}).then(function(b){a.find(".ar-g-token").val(b);c.sendCallbackRequest()}):c.sendCallbackRequest()});setTimeout(function(){c._processHash()},500);b(window).on("hashchange",function(a){c._processHash()})};d.prototype._processHash=function(){switch(window.location.hash){case "#callback-form":case "callback-form":this.openCallbackPopup();
break;case "#callback-form-close":case "callback-form-close":this.closeCallbackPopup();break;case "#contactus-menu":case "contactus-menu":this.openMenu();break;case "#contactus-menu-close":case "contactus-menu-close":this.closeMenu();break;case "#contactus-hide":case "contactus-hide":this.hide();break;case "#contactus-show":case "contactus-show":this.show()}};d.prototype._callBackCountDownMethod=function(){var a=this.settings.countdown,c=this.$element,b=this,d=60;c.find(".callback-countdown-block-phone, .callback-countdown-block-timer").toggleClass("display-flex");
this.countdown=setInterval(function(){--d;var e=a,f=d;10>a&&(e="0"+a);10>d&&(f="0"+d);e=e+":"+f;c.find(".callback-countdown-block-timer_timer").html(e);0===d&&0===a&&(clearInterval(b.countdown),b.countdown=null,c.find(".callback-countdown-block-sorry, .callback-countdown-block-timer").toggleClass("display-flex"));0===d&&(d=60,--a)},20)};d.prototype.sendCallbackRequest=function(){var a=this,c=a.$element;this.$element.trigger("arcontactus.beforeSendCallbackRequest");b.ajax({url:a.settings.ajaxUrl,type:"POST",
dataType:"json",data:c.find("form").serialize(),success:function(b){a.settings.countdown&&a._callBackCountDownMethod();c.find(".callback-countdown-block-phone").removeClass("ar-loading");if(b.success)a.settings.countdown||c.find(".callback-countdown-block-sorry, .callback-countdown-block-phone").toggleClass("display-flex");else if(b.errors){var d=b.errors.join("\n\r");alert(d)}else alert(a.settings.errorMessage);a.$element.trigger("arcontactus.successCallbackRequest",b)},error:function(){c.find(".callback-countdown-block-phone").removeClass("ar-loading");
alert(a.settings.errorMessage);a.$element.trigger("arcontactus.errorCallbackRequest")}})};d.prototype.show=function(){this.$element.addClass("active");this.$element.trigger("arcontactus.show")};d.prototype.hide=function(){this.$element.removeClass("active");this.$element.trigger("arcontactus.hide")};d.prototype.openPopup=function(a){this.closeMenu();var c=this.$element;c.find("#arcu-popup-"+a).addClass("show-messageners-block");c.find("#arcu-popup-"+a).hasClass("popup-opened")||(this.stopAnimation(),
c.addClass("popup-opened"),c.find("#arcu-popup-"+a).addClass(this.settings.menuInAnimationClass),c.find(".arcontactus-close").addClass("show-messageners-block"),c.find(".icons, .static").addClass("hide"),c.find(".pulsation").addClass("stop"),this._popupOpened=!0,this.$element.trigger("arcontactus.openPopup"))};d.prototype.closePopup=function(){var a=this.$element;a.find(".arcu-popup").hasClass("show-messageners-block")&&(setTimeout(function(){a.removeClass("popup-opened")},150),a.find(".arcu-popup").removeClass(this.settings.menuInAnimationClass).addClass(this.settings.menuOutAnimationClass),
setTimeout(function(){a.removeClass("popup-opened")},150),a.find(".arcontactus-close").removeClass("show-messageners-block"),a.find(".icons, .static").removeClass("hide"),a.find(".pulsation").removeClass("stop"),this.startAnimation(),this._popupOpened=!1,this.$element.trigger("arcontactus.closeMenu"))};d.prototype.openMenu=function(){if("callback"==this.settings.mode)return console.log("Widget in callback mode"),!1;var a=this.$element;a.find(".messangers-block").hasClass(this.settings.menuInAnimationClass)||
(this.stopAnimation(),a.addClass("open"),a.find(".messangers-block").addClass(this.settings.menuInAnimationClass),a.find(".arcontactus-close").addClass("show-messageners-block"),a.find(".icons, .static").addClass("hide"),a.find(".pulsation").addClass("stop"),this._menuOpened=!0,this.$element.trigger("arcontactus.openMenu"))};d.prototype.closeMenu=function(){if("callback"==this.settings.mode)return console.log("Widget in callback mode"),!1;var a=this.$element,c=this;a.find(".messangers-block").hasClass(this.settings.menuInAnimationClass)&&
(setTimeout(function(){a.removeClass("open")},150),a.find(".messangers-block").removeClass(this.settings.menuInAnimationClass).addClass(this.settings.menuOutAnimationClass),setTimeout(function(){a.find(".messangers-block").removeClass(c.settings.menuOutAnimationClass)},1E3),a.find(".arcontactus-close").removeClass("show-messageners-block"),a.find(".icons, .static").removeClass("hide"),a.find(".pulsation").removeClass("stop"),this.startAnimation(),this._menuOpened=!1,this.$element.trigger("arcontactus.closeMenu"))};
d.prototype.toggleMenu=function(){var a=this.$element;this.hidePrompt();if(a.find(".callback-countdown-block").hasClass("display-flex"))return!1;a.find(".messangers-block").hasClass(this.settings.menuInAnimationClass)?this.closeMenu():this.openMenu();this.$element.trigger("arcontactus.toggleMenu")};d.prototype.openCallbackPopup=function(){var a=this.$element;a.addClass("opened");this.closeMenu();this.stopAnimation();a.find(".icons, .static").addClass("hide");a.find(".pulsation").addClass("stop");
a.find(".callback-countdown-block").addClass("display-flex");a.find(".callback-countdown-block-phone").addClass("display-flex");a.find(".callback-state").addClass("display-flex");this._callbackOpened=!0;this.$element.trigger("arcontactus.openCallbackPopup")};d.prototype.closeCallbackPopup=function(){var a=this.$element;a.removeClass("opened");a.find(".messangers-block").removeClass(this.settings.menuInAnimationClass);a.find(".arcontactus-close").removeClass("show-messageners-block");a.find(".icons, .static").removeClass("hide");
a.find(".pulsation").removeClass("stop");a.find(".callback-countdown-block, .callback-countdown-block-phone, .callback-countdown-block-sorry, .callback-countdown-block-timer").removeClass("display-flex");a.find(".callback-state").removeClass("display-flex");this.startAnimation();this._callbackOpened=!1;this.$element.trigger("arcontactus.closeCallbackPopup")};d.prototype.startAnimation=function(){var a=this.$element,c=a.find(".icons-line"),b=a.find(".static"),d=a.find(".icons-line>span:first-child").width()+
40;if("huge"===this.settings.buttonSize)var h=2,f=0;"large"===this.settings.buttonSize&&(h=2,f=0);"medium"===this.settings.buttonSize&&(h=4,f=-2);"small"===this.settings.buttonSize&&(h=4,f=-2);var g=a.find(".icons-line>span").length,k=0;this.stopAnimation();if(0===this.settings.iconsAnimationSpeed)return!1;var m=this;this._interval=setInterval(function(){0===k&&(c.parent().removeClass("hide"),b.addClass("hide"));var a="translate("+-(d*k+h)+"px, "+f+"px)";c.css({"-webkit-transform":a,"-ms-transform":a,
transform:a});k++;if(k>g){if(k>g+1){if(m.settings.iconsAnimationPause)return m.stopAnimation(),setTimeout(function(){if(m._callbackOpened||m._menuOpened||m._popupOpened)return!1;m.startAnimation()},m.settings.iconsAnimationPause),!1;k=0}c.parent().addClass("hide");b.removeClass("hide");a="translate("+-h+"px, "+f+"px)";c.css({"-webkit-transform":a,"-ms-transform":a,transform:a})}},this.settings.iconsAnimationSpeed)};d.prototype.stopAnimation=function(){clearInterval(this._interval);var a=this.$element,
b=a.find(".icons-line");a=a.find(".static");b.parent().addClass("hide");a.removeClass("hide");b.css({"-webkit-transform":"translate(-2px, 0px)","-ms-transform":"translate(-2px, 0px)",transform:"translate(-2px, 0px)"})};d.prototype.showPrompt=function(a){var b=this.$element.find(".arcontactus-prompt");a&&a.content&&b.find(".arcontactus-prompt-inner").html(a.content);b.addClass("active");this.$element.trigger("arcontactus.showPrompt")};d.prototype.hidePrompt=function(){this.$element.find(".arcontactus-prompt").removeClass("active");
this.$element.trigger("arcontactus.hidePrompt")};d.prototype.showPromptTyping=function(){this.$element.find(".arcontactus-prompt").find(".arcontactus-prompt-inner").html("");this._insertPromptTyping();this.showPrompt({});this.$element.trigger("arcontactus.showPromptTyping")};d.prototype._insertPromptTyping=function(){var a=this.$element.find(".arcontactus-prompt-inner"),c=b("<div>",{class:"arcontactus-prompt-typing"}),d=b("<div>");c.append(d);c.append(d.clone());c.append(d.clone());a.append(c)};d.prototype.hidePromptTyping=
function(){this.$element.find(".arcontactus-prompt").removeClass("active");this.$element.trigger("arcontactus.hidePromptTyping")};d.prototype._backgroundStyle=function(){return"background-color: "+this.settings.theme};d.prototype._colorStyle=function(){return"color: "+this.settings.theme};b.fn.contactUs=function(a){var c=Array.prototype.slice.call(arguments,1);return this.each(function(){var e=b(this),l=e.data("ar.contactus");l||(l=new d(this,"object"==typeof a&&a),e.data("ar.contactus",l));"string"==
typeof a&&"_"!==a.charAt(0)&&l[a].apply(l,c)})};b.fn.contactUs.Constructor=d})(jQuery);
//]]>
</script>
<style>
.arcontactus-widget{opacity:0;transition:.2s opacity;line-height:1}
.arcontactus-widget *{box-sizing:border-box}
.arcontactus-widget.left.arcontactus-message{left:20px;right:auto}
.arcontactus-widget.left .arcontactus-message-button{right:auto;left:0}
.arcontactus-widget.left .arcontactus-prompt{left:80px;right:auto;transform-origin:0 50%}
.arcontactus-widget.left .arcontactus-prompt.arcu-prompt-top{left:0;right:auto}
.arcontactus-widget.left .arcontactus-prompt.arcu-prompt-top:before{border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none;left:25px;right:auto}
.arcontactus-widget.left .arcontactus-prompt:before{border-right:8px solid #fff;border-top:8px solid transparent;border-left:8px solid transparent;border-bottom:8px solid transparent;right:auto;left:-15px}
.arcontactus-widget.left .messangers-block{right:auto;left:0;-webkit-transform-origin:10% 105%;-ms-transform-origin:10% 105%;transform-origin:10% 105%}
.arcontactus-widget.left .callback-countdown-block{left:0;right:auto}
.arcontactus-widget.left .messangers-block::before,.arcontactus-widget.left .callback-countdown-block::before{left:25px;right:auto}
.arcontactus-widget.hg.arcontactus-message{width:100px;height:100px}
.arcontactus-widget.hg .messangers-block,.arcontactus-widget.hg .callback-countdown-block,.arcontactus-widget.hg .arcu-popup{bottom:110px}
.arcontactus-widget.hg .arcontactus-prompt{bottom:5px}
.arcontactus-widget.hg .icons-line{top:22px;left:24px}
.arcontactus-widget.hg.left .messangers-block:before,.arcontactus-widget.hg.left .callback-countdown-block:before,.arcontactus-widget.hg.left .arcu-popup:before{left:41px}
.arcontactus-widget.hg.left .arcontactus-prompt{left:110px;bottom:26px}
.arcontactus-widget.hg.right .messangers-block:before,.arcontactus-widget.hg.right .callback-countdown-block:before,.arcontactus-widget.hg.right .arcu-popup:before{right:41px}
.arcontactus-widget.hg.right .arcontactus-prompt{right:110px;bottom:26px}
.arcontactus-widget.hg .arcontactus-message-button{width:100px;height:100px}
.arcontactus-widget.hg .arcontactus-message-button .pulsation{width:114px;height:114px;border-radius:60px}
.arcontactus-widget.hg .arcontactus-message-button .icons{width:70px;height:70px;margin-top:-35px;margin-left:-35px}
.arcontactus-widget.hg .arcontactus-message-button .callback-state{width:70px;height:70px;margin-top:-35px;margin-left:-35px}
.arcontactus-widget.md.arcontactus-message{width:60px;height:60px}
.arcontactus-widget.md .messangers-block,.arcontactus-widget.md .callback-countdown-block,.arcontactus-widget.md .arcu-popup{bottom:70px}
.arcontactus-widget.md .arcontactus-prompt{bottom:5px}
.arcontactus-widget.md.left .messangers-block:before,.arcontactus-widget.md.left .callback-countdown-block:before,.arcontactus-widget.md.left .arcu-popup:before{left:21px}
.arcontactus-widget.md.left .arcontactus-prompt{left:70px}
.arcontactus-widget.md.left .arcontactus-prompt.arcu-prompt-top{bottom:70px;left:0;right:auto}
.arcontactus-widget.md.left .arcontactus-prompt.arcu-prompt-top:before{border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none;left:21px;right:auto}
.arcontactus-widget.md.right .messangers-block:before,.arcontactus-widget.md.right .callback-countdown-block:before,.arcontactus-widget.md.right .arcu-popup:before{right:21px}
.arcontactus-widget.md.right .arcontactus-prompt{right:70px}
.arcontactus-widget.md.right .arcontactus-prompt.arcu-prompt-top{right:0;bottom:70px}
.arcontactus-widget.md.right .arcontactus-prompt.arcu-prompt-top:before{right:21px}
.arcontactus-widget.md .arcontactus-message-button{width:60px;height:60px}
.arcontactus-widget.md .arcontactus-message-button .pulsation{width:74px;height:74px}
.arcontactus-widget.md .arcontactus-message-button .icons{width:40px;height:40px;margin-top:-20px;margin-left:-20px}
.arcontactus-widget.md .arcontactus-message-button .callback-state{width:40px;height:40px;margin-top:-20px;margin-left:-20px}
.arcontactus-widget.sm.arcontactus-message{width:60px;height:60px}
.arcontactus-widget.sm .messangers-block,.arcontactus-widget.sm .callback-countdown-block,.arcontactus-widget.sm .arcu-popup{bottom:60px}
.arcontactus-widget.sm .arcontactus-prompt{bottom:0}
.arcontactus-widget.sm.left .messangers-block:before,.arcontactus-widget.sm.left .callback-countdown-block:before,.arcontactus-widget.sm.left .arcu-popup:before{left:16px}
.arcontactus-widget.sm.left .arcontactus-prompt{left:60px}
.arcontactus-widget.sm.left .arcontactus-prompt.arcu-prompt-top{bottom:60px;left:0;right:auto}
.arcontactus-widget.sm.left .arcontactus-prompt.arcu-prompt-top:before{border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none;left:16px;right:auto}
.arcontactus-widget.sm.right .messangers-block:before,.arcontactus-widget.sm.right .callback-countdown-block:before,.arcontactus-widget.sm.right .arcu-popup:before{right:16px}
.arcontactus-widget.sm.right .arcontactus-prompt{right:70px;bottom:7px}
.arcontactus-widget.sm.right .arcontactus-prompt.arcu-prompt-top{right:0;bottom:60px}
.arcontactus-widget.sm.right .arcontactus-prompt.arcu-prompt-top:before{right:16px}
.arcontactus-widget.sm .arcontactus-message-button{width:60px;height:60px}
.arcontactus-widget.sm .arcontactus-message-button .pulsation{width:74px;height:74px}
.arcontactus-widget.sm .arcontactus-message-button .icons{width:40px;height:40px;margin-top:-20px;margin-left:-20px}
.arcontactus-widget.sm .arcontactus-message-button .static{margin-top:-16px}
.arcontactus-widget.sm .arcontactus-message-button .callback-state{width:40px;height:40px;margin-top:-20px;margin-left:-20px}
.arcontactus-widget.active{opacity:1}
.arcontactus-widget.arcontactus-message{z-index:1000000;right:20px;bottom:20px;position:fixed!important;height:70px;width:70px}
.arcontactus-widget .arcontactus-message-button{width:70px;position:absolute;height:70px;right:0;background-color:red;border-radius:50px;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer}
.arcontactus-widget .arcontactus-message-button p,.arcontactus-widget .arcontactus-message-button .arcu-item-label{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;color:#fff;font-weight:700;font-size:10px;line-height:11px;margin:0}
.arcontactus-widget .arcontactus-message-button .pulsation{width:84px;height:84px;background-color:red;border-radius:50px;position:absolute;left:-7px;top:-7px;z-index:-1;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation:arcontactus-pulse 2s infinite;animation:arcontactus-pulse 2s infinite}
.arcontactus-widget .arcontactus-message-button .icons{background-color:#fff;width:44px;height:44px;border-radius:50px;position:absolute;overflow:hidden;top:50%;left:50%;margin-top:-22px;margin-left:-22px}
.arcontactus-widget .arcontactus-message-button .static{position:absolute;top:50%;left:50%;margin-top:-19px;margin-left:-26px;width:52px;height:52px;text-align:center}
.arcontactus-widget .arcontactus-message-button .static img{display:inline}
.arcontactus-widget .arcontactus-message-button .static svg{width:24px;height:24px;color:#fff}
.arcontactus-widget .arcontactus-message-button.no-text .static{margin-top:-12px}
.arcontactus-widget .pulsation:nth-of-type(2n){-webkit-animation-delay:.5s;animation-delay:.5s}
.arcontactus-widget .pulsation.stop{-webkit-animation:none;animation:none}
.arcontactus-widget .icons-line{top:10px;left:12px;display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;-webkit-transition:cubic-bezier(.13,1.49,.14,-0.4);-o-transition:cubic-bezier(.13,1.49,.14,-0.4);transition:cubic-bezier(.13,1.49,.14,-0.4);-webkit-animation-delay:0s;animation-delay:0s;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px);height:24px;transition:.2s all}
.arcontactus-widget .icons-line.stop{-webkit-animation-play-state:paused;animation-play-state:paused}
.arcontactus-widget .icons-line span{display:inline-block;width:24px;height:24px;color:red}
.arcontactus-widget .icons-line span svg,.arcontactus-widget .icons-line span i{width:24px;height:24px}
.arcontactus-widget .icons-line span i{display:block;font-size:24px;line-height:24px}
.arcontactus-widget .icons-line img,.arcontactus-widget .icons-line span{margin-right:40px}
.arcontactus-widget .static{transition:.2s all}
.arcontactus-widget .static.hide{transform:scale(0);opacity:0}
.arcontactus-widget .icons{transition:.2s all}
.arcontactus-widget .icons.hide{transform:scale(0);opacity:0}
.arcontactus-widget .icons.hide .icons-line{transform:scale(0)}
.arcontactus-widget .icons .icon:first-of-type{margin-left:0}
.arcontactus-widget .arcontactus-close{color:#fff}
.arcontactus-widget .arcontactus-close svg{-webkit-transform:rotate(180deg) scale(0);-ms-transform:rotate(180deg) scale(0);transform:rotate(180deg) scale(0);-webkit-transition:ease-in .12s all;-o-transition:ease-in .12s all;transition:ease-in .12s all;display:block}
.arcontactus-widget .arcontactus-close.show-messageners-block svg{-webkit-transform:rotate(0) scale(1);-ms-transform:rotate(0) scale(1);transform:rotate(0) scale(1)}
.arcontactus-widget .arcontactus-prompt{display:-webkit-box;display:-ms-flexbox;display:flex}
.arcontactus-widget .messangers-block,.arcontactus-widget .arcontactus-prompt,.arcontactus-widget .arcu-popup{background:#fff;box-shadow:0 0 40px rgba(0,0,0,0.2);width:300px;background-repeat:no-repeat;background-position:center;position:absolute;bottom:80px;right:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;padding:10px 0;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:7px;-webkit-transform-origin:80% 105%;-ms-transform-origin:80% 105%;transform-origin:80% 105%;-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-transition:ease-out .12s all;-o-transition:ease-out .12s all;transition:ease-out .12s all;z-index:1000000}
.arcontactus-widget .messangers-block:before,.arcontactus-widget .arcontactus-prompt:before,.arcontactus-widget .arcu-popup:before{position:absolute;bottom:-7px;right:25px;left:auto;display:inline-block!important;border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;content:''}
.arcontactus-widget .messangers-block.show-messageners-block,.arcontactus-widget .arcontactus-prompt.show-messageners-block,.arcontactus-widget .arcu-popup.show-messageners-block{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.arcontactus-widget .arcu-popup{padding:0}
.arcontactus-widget .arcu-popup .arcu-popup-header{padding:18px 15px;color:#fff;background:#787878;border-radius:7px 7px 0 0;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;margin-bottom:0;font-size:17px;position:relative;line-height:1.4}
.arcontactus-widget .arcu-popup .arcu-popup-content{padding:10px;max-height:300px;overflow:auto;line-height:initial}
.arcontactus-widget .arcontactus-prompt.arcu-prompt-top{right:0;max-width:260px;bottom:80px}
.arcontactus-widget .arcontactus-prompt.arcu-prompt-top:before{bottom:-7px;right:25px;left:auto;border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;border-bottom:0 none}
.arcontactus-widget .messangers-block{display:block}
.arcontactus-widget .messangers-block.has-header{padding-top:0}
.arcontactus-widget .messangers-block .arcu-menu-header{padding:18px 15px;color:#fff;background:#787878;border-radius:7px 7px 0 0;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;margin-bottom:10px;font-size:17px;position:relative;line-height:1.4}
.arcontactus-widget .arcu-header-close,.arcontactus-widget .arcu-popup-close,.arcontactus-widget .arcu-popup-back{position:absolute;right:0;top:-30px;padding:0;margin:0;border:0 none;background:none;line-height:1;width:26px;height:26px;cursor:pointer;color:#fff;background:#787878;border-radius:50%;text-align:center}
.arcontactus-widget .arcu-header-close svg,.arcontactus-widget .arcu-popup-close svg,.arcontactus-widget .arcu-popup-back svg{height:12px;width:12px;display:block;position:absolute;left:50%;top:50%;margin:-6px 0 0 -6px}
.arcontactus-widget .arcu-popup-back{right:auto;left:0;top:50%;margin-top:-13px;display:none}
.arcontactus-widget .arcu-popup-back svg{height:16px;width:16px;margin:-8px 0 0 -8px}
.arcontactus-widget .arcontactus-prompt{color:#787878;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:18px;width:auto;bottom:10px;right:80px;white-space:nowrap;padding:14px 20px 14px}
.arcontactus-widget .arcontactus-prompt:before{border-right:8px solid transparent;border-top:8px solid transparent;border-left:8px solid #fff;border-bottom:8px solid transparent;bottom:16px;right:-15px}
.arcontactus-widget .arcontactus-prompt.active{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}
.arcontactus-widget .arcontactus-prompt:hover .arcontactus-prompt-close{opacity:1}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close{opacity:0;transition:.2s all;position:absolute;right:-10px;top:-10px;padding:0;margin:0;border:0 none;background:none;line-height:1;width:26px;height:26px;cursor:pointer;color:#fff;background:#787878;border-radius:50%;text-align:center}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close svg{height:12px;width:12px;display:block;position:absolute;left:50%;top:50%;margin:-6px 0 0 -6px}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing{border-radius:10px;display:inline-block;left:3px;padding:0 0 0 3px;position:relative;top:4px;width:50px}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div{position:relative;float:left;border-radius:50%;width:10px;height:10px;background:#ccc;margin:0 2px;-webkit-animation:arcontactus-updown 2s infinite;animation:arcontactus-updown 2s infinite}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(2){animation-delay:.1s}
.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-typing>div:nth-child(3){animation-delay:.2s}
.arcontactus-widget .messangers-block .messangers-list{list-style:none;margin:0;padding:0}
.arcontactus-widget .messangers-block .messangers-list li{margin:0;padding:0}
.arcontactus-widget .messangers-block.sm .arcu-menu-header{padding-top:12px;padding-bottom:12px}
.arcontactus-widget .messangers-block.sm .not-rounded-items .messanger{padding-left:42px}
.arcontactus-widget .messangers-block.sm .messanger{padding-left:50px;min-height:44px;padding-top:4px;padding-bottom:4px}
.arcontactus-widget .messangers-block.sm .messanger span{height:32px;width:32px;margin-top:-16px}
.arcontactus-widget .messangers-block.sm .messanger span svg,.arcontactus-widget .messangers-block.sm .messanger span i{height:20px;width:20px;line-height:20px;margin-top:-10px;margin-left:-10px;font-size:21px}
.arcontactus-widget .not-rounded-items .messanger{padding-left:48px}
.arcontactus-widget .not-rounded-items .messanger span{left:5px}
.arcontactus-widget .messanger{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin:0;cursor:pointer;width:100%;padding:8px 20px 8px 60px;position:relative;min-height:54px;text-decoration:none}
.arcontactus-widget .messanger:hover{background-color:#eee}
.arcontactus-widget .messanger:before{background-repeat:no-repeat;background-position:center}
.arcontactus-widget .messanger.facebook span{background:#0084ff}
.arcontactus-widget .messanger.viber span{background:#7c529d}
.arcontactus-widget .messanger.telegram span{background:#2ca5e0}
.arcontactus-widget .messanger.skype span{background:#31c4ed}
.arcontactus-widget .messanger.email span{background:#ff8400}
.arcontactus-widget .messanger.contact span{background:#7eb105}
.arcontactus-widget .messanger.call-back span{background:#54cd81}
.arcontactus-widget .messanger span{position:absolute;left:10px;top:50%;margin-top:-20px;display:block;width:40px;height:40px;border-radius:50%;background-color:#0084ff;margin-right:10px;color:#fff;text-align:center;vertical-align:middle}
.arcontactus-widget .messanger span svg,.arcontactus-widget .messanger span i{width:24px;height:24px;vertical-align:middle;text-align:center;display:block;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px}
.arcontactus-widget .messanger span i{font-size:24px;line-height:24px}
.arcontactus-widget .messanger p,.arcontactus-widget .messanger .arcu-item-label{margin:0;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:15px;color:rgba(0,0,0,0.87);padding:0;line-height:17px}
.arcontactus-widget .messanger p .arcu-item-subtitle,.arcontactus-widget .messanger .arcu-item-label .arcu-item-subtitle{font-size:13px;color:#787878}
.arcontactus-widget .callback-countdown-block{background:#fff;box-shadow:0 0 40px rgba(0,0,0,0.2);width:410px;background-repeat:no-repeat;background-position:center;position:absolute;bottom:80px;left:auto;right:0;align-items:center;border-radius:7px;-webkit-transform-origin:80% 105%;-ms-transform-origin:80% 105%;transform-origin:80% 105%;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);-webkit-transition:ease-out .12s all;-o-transition:ease-out .12s all;transition:ease-out .12s all;z-index:1000000;color:red;padding-top:5px;padding-left:8px;padding-right:8px;display:none}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer_timer{font-size:38px;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif}
.arcontactus-widget .callback-countdown-block.display-flex{display:block}
.arcontactus-widget .callback-countdown-block:before{position:absolute;bottom:-7px;right:25px;left:auto;display:inline-block!important;border-right:8px solid transparent;border-top:8px solid #fff;border-left:8px solid transparent;content:''}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:15px;line-height:18px;padding:0 10px 10px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;display:none;width:100%;position:relative}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone:before{transition:.2s all}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.ar-loading:before{background:rgba(255,255,255,0.8);content:' ';position:absolute;width:100%;height:100%;left:0;top:0;z-index:1}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.ar-loading:after{content:' ';position:absolute;width:30px;height:30px;z-index:2;top:50%;bottom:50%;margin-top:-15px;margin-bottom:-15px;left:50%;margin-left:-15px;background:url('../img/ring-alt.gif') no-repeat transparent scroll 0 0}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone p,.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .arcu-item-label{text-align:center;margin-bottom:10px;margin-top:3px}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group{align-items:center}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group{margin-bottom:10px}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-required .arcu-form-label:after{content:" *";color:#c7254e}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-type-checkbox{position:relative;padding-left:20px}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-group.arcu-form-group-type-checkbox input{position:absolute;top:2px;left:0;width:16px;height:16px}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-label{font-size:14px;margin-bottom:3px;color:#333}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group .arcu-form-field{display:block;width:100%;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:14px;line-height:16px;border-radius:4px;border:0;height:36px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:6px 10px 6px;border:1px solid #ddd;margin:0!important}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group textarea.arcu-form-field{height:80px;resize:vertical;max-height:140px;min-height:60px}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit]{display:block;width:100%;border-radius:4px;border:0;background-color:red;color:#fff;font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:14px;padding:7px 5px 7px;cursor:pointer;height:36px;margin:0;line-height:1}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit]:hover{opacity:.8}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry{height:140px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:none}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry p{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:18px;text-align:center;margin-bottom:5px;margin-top:7px;width:100%}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-close{position:absolute;right:9px;top:9px;padding:0;margin:0;border:0 none;background:none;line-height:1;width:26px;height:26px;cursor:pointer;color:#fff;background:#787878;border-radius:50%;z-index:1;text-align:center}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-close svg{height:12px;width:12px;display:block;position:absolute;left:50%;top:50%;margin:-6px 0 0 -6px}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:140px;display:none}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer p{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:21px;text-align:center;margin-bottom:5px;margin-top:7px}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer h1{font-family:Segoe UI,Frutiger,Frutiger Linotype,Dejavu Sans,Helvetica Neue,Arial,sans-serif;font-size:40px;line-height:46px;text-align:center;font-weight:300}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.display-flex{display:block}
.arcontactus-widget .callback-countdown-block .callback-countdown-block-timer.display-flex,.arcontactus-widget .callback-countdown-block .callback-countdown-block-sorry.display-flex{display:-webkit-box;display:-ms-flexbox;display:flex}
.arcontactus-widget .callback-state{background-color:#fff;width:44px;height:44px;border-radius:50px;position:absolute;overflow:hidden;top:50%;left:50%;margin-top:-22px;margin-left:-22px;display:none;-webkit-animation:none;animation:none;z-index:999999;transition:.2s all;transform:scale(0);color:red;display:-webkit-box;display:-ms-flexbox;display:flex}
.arcontactus-widget .callback-state.display-flex{transform:scale(1)}
.arcontactus-widget .callback-state svg{width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-12px;margin-left:-12px}
.arcontactus-widget .callback-state .callback-state-img{position:absolute;top:12px;left:12px}
.arcontactus-widget .animation-pause{-webkit-animation-play-state:paused;animation-play-state:paused}
@-webkit-keyframes arcontactus-pulse{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}50%{opacity:.5}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
@media (max-width:468px){.arcontactus-widget.arcontactus-message.opened{width:auto;right:20px;left:20px}.arcontactus-widget .callback-countdown-block{width:auto}}
@media (max-height:400px){.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close{opacity:1}}
@media (max-width:428px){.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group{display:block}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group input[type=tel],.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group button[type=submit]{display:block;width:100%;margin:0 0 5px 0}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone .callback-countdown-block-form-group input[type=tel]{margin-bottom:10px!important}.arcontactus-widget .callback-countdown-block .callback-countdown-block-phone.display-flex{display:block;width:100%}.arcontactus-widget .arcontactus-prompt .arcontactus-prompt-close{opacity:1}.arcontactus-widget.arcontactus-message .messangers-block,.arcontactus-widget.arcontactus-message .callback-countdown-block,.arcontactus-widget.arcontactus-message .arcu-popup{bottom:0;border-radius:0}.arcontactus-widget.arcontactus-message.open,.arcontactus-widget.arcontactus-message.opened,.arcontactus-widget.arcontactus-message.popup-opened{width:100%;left:0;right:0;bottom:0}.arcontactus-widget.arcontactus-message.open .messangers-block .arcu-menu-header,.arcontactus-widget.arcontactus-message.opened .messangers-block .arcu-menu-header,.arcontactus-widget.arcontactus-message.popup-opened .messangers-block .arcu-menu-header{border-radius:0;padding-right:40px}.arcontactus-widget.arcontactus-message.open .messangers-block .arcu-header-close,.arcontactus-widget.arcontactus-message.opened .messangers-block .arcu-header-close,.arcontactus-widget.arcontactus-message.popup-opened .messangers-block .arcu-header-close{right:5px;top:50%;margin-top:-13px}.arcontactus-widget.arcontactus-message.open .arcu-popup .arcu-popup-header,.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcu-popup-header,.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcu-popup-header{border-radius:0;padding-right:40px;padding-left:30px}.arcontactus-widget.arcontactus-message.open .arcu-popup .arcu-popup-back,.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcu-popup-back,.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcu-popup-back{display:block}.arcontactus-widget.arcontactus-message.open .arcu-popup .arcu-popup-close,.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcu-popup-close,.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcu-popup-close{right:5px;top:50%;margin-top:-13px}.arcontactus-widget.arcontactus-message.open .messangers-block,.arcontactus-widget.arcontactus-message.opened .messangers-block,.arcontactus-widget.arcontactus-message.popup-opened .messangers-block,.arcontactus-widget.arcontactus-message.open .callback-countdown-block,.arcontactus-widget.arcontactus-message.opened .callback-countdown-block,.arcontactus-widget.arcontactus-message.popup-opened .callback-countdown-block,.arcontactus-widget.arcontactus-message.open .arcontactus-prompt,.arcontactus-widget.arcontactus-message.opened .arcontactus-prompt,.arcontactus-widget.arcontactus-message.popup-opened .arcontactus-prompt,.arcontactus-widget.arcontactus-message.open .arcu-popup,.arcontactus-widget.arcontactus-message.opened .arcu-popup,.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup{width:100%}.arcontactus-widget.arcontactus-message.open .messangers-block .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.opened .messangers-block .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.popup-opened .messangers-block .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.open .callback-countdown-block .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.opened .callback-countdown-block .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.popup-opened .callback-countdown-block .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.open .arcontactus-prompt .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.opened .arcontactus-prompt .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.popup-opened .arcontactus-prompt .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.open .arcu-popup .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.opened .arcu-popup .arcontactus-prompt-close,.arcontactus-widget.arcontactus-message.popup-opened .arcu-popup .arcontactus-prompt-close{opacity:1}.arcontactus-widget.arcontactus-message.open .arcontactus-message-button,.arcontactus-widget.arcontactus-message.opened .arcontactus-message-button,.arcontactus-widget.arcontactus-message.popup-opened .arcontactus-message-button{display:none}}
@keyframes arcontactus-updown{0%,43%,100%{transform:translate(0,0)}25%,35%{transform:translate(0,-10px)}}
@-webkit-keyframes arcontactus-updown{0%{transform:translate(0 0)}25%{transform:translate(-10px 0)}35%{transform:translate(-10px 0)}43%{transform:translate(0 0)}100%{transform:translate(0 0)}}
@keyframes arcontactus-pulse{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}50%{opacity:.5}100%{-webkit-transform:scale(1);transform:scale(1);opacity:0}}
@-webkit-keyframes arcontactus-show-stat{0%,20%{-webkit-transform:scale(1);transform:scale(1)}21%,84%{-webkit-transform:scale(0);transform:scale(0)}85%,100%{-webkit-transform:scale(1);transform:scale(1)}}
@keyframes arcontactus-show-stat{0%,20%{-webkit-transform:scale(1);transform:scale(1)}21%,84%{-webkit-transform:scale(0);transform:scale(0)}85%,100%{-webkit-transform:scale(1);transform:scale(1)}}
@-webkit-keyframes arcontactus-show-icons{0%,20%{-webkit-transform:scale(0);transform:scale(0)}21%,84%{-webkit-transform:scale(1);transform:scale(1)}85%,100%{-webkit-transform:scale(0);transform:scale(0)}}
@keyframes arcontactus-show-icons{0%,20%{-webkit-transform:scale(0);transform:scale(0)}21%,84%{-webkit-transform:scale(1);transform:scale(1)}85%,100%{-webkit-transform:scale(0);transform:scale(0)}}
</style>
<div id='contact_us'/>
<script>//<![CDATA[
window.addEventListener('load', function () {
$('#contact_us').on('arcontactus.init', function () {
$('#contact_us').addClass('arcuAnimated').addClass('flipInY');
setTimeout(function () {
$('#contact_us').removeClass('flipInY');
}, 1000);
});
$('#contact_us').contactUs({
align: 'right',
drag: false,
reCaptcha: false,
menuSize: 'small',
buttonSize: 'small',
buttonText: 'Liên hệ',
iconsAnimationSpeed: 800,
menuHeaderText: 'Liên hệ với chúng tôi!',
itemsIconType: 'rounded',
countdown: 0,
showMenuHeader: true,
showHeaderCloseBtn: true,
headerCloseBtnColor: '#ffffff',
headerCloseBtnBgColor: '#099283',
promptPosition: 'side',
theme: '#099283',
items: [
{
title: 'Hotline',
subTitle: '0946 046 086',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M493.4 24.6l-104-24c-11.3-2.6-22.9 3.3-27.5 13.9l-48 112c-4.2 9.8-1.4 21.3 6.9 28l60.6 49.6c-36 76.7-98.9 140.5-177.2 177.2l-49.6-60.6c-6.8-8.3-18.2-11.1-28-6.9l-112 48C3.9 366.5-2 378.1.6 389.4l24 104C27.1 504.2 36.7 512 48 512c256.1 0 464-207.5 464-464 0-11.2-7.7-20.9-18.6-23.4z"></path></svg>',
href: 'tel:0946046086',
color: '#4EB625'
},
{
title: 'Email',
subTitle: 'binhminhgarden.cskh@gmail.com',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M464 64H48C21.5 64 0 85.5 0 112v288c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM48 96h416c8.8 0 16 7.2 16 16v41.4c-21.9 18.5-53.2 44-150.6 121.3-16.9 13.4-50.2 45.7-73.4 45.3-23.2.4-56.6-31.9-73.4-45.3C85.2 197.4 53.9 171.9 32 153.4V112c0-8.8 7.2-16 16-16zm416 320H48c-8.8 0-16-7.2-16-16V195c22.8 18.7 58.8 47.6 130.7 104.7 20.5 16.4 56.7 52.5 93.3 52.3 36.4.3 72.3-35.5 93.3-52.3 71.9-57.1 107.9-86 130.7-104.7v205c0 8.8-7.2 16-16 16z"></path></svg>',
href: 'test@gmail.com',
color: '#FF643A'
},
{
title: 'Messenger',
subTitle: 'm.me/BinhMinhGardenOffical',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M224 32C15.9 32-77.5 278 84.6 400.6V480l75.7-42c142.2 39.8 285.4-59.9 285.4-198.7C445.8 124.8 346.5 32 224 32zm23.4 278.1L190 250.5 79.6 311.6l121.1-128.5 57.4 59.6 110.4-61.1-121.1 128.5z"></path></svg>',
href: 'https://m.me/BinhMinhGardenOffical',
color: '#31ADFF'
},
{
title: 'Zalo chat',
subTitle: '0818 693 393',
icon: '<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 fill="currentColor" 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 path fill="currentColor" 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 fill="currentColor" 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>',
href: 'https://zalo.me/0818693393',
color: '#0165f8'
},
{
title: 'Google map cửa hàng',
subTitle: 'Xem địa chỉ cửa hàng',
icon: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="m199.03726,313.68853l11.18243,27.96403c-10.82963,4.32708 -21.63043,7.62457 -32.16787,9.82885l-6.15272,-29.48556c8.83106,-1.86142 17.9543,-4.65305 27.13816,-8.30732zm-89.68007,36.1173c11.03634,3.17723 22.66499,4.88461 34.55303,5.06052l0.47306,-30.13452c-9.24349,-0.15205 -18.21965,-1.44203 -26.69492,-3.88185l-8.33117,28.95586zm237.30565,-52.59777c8.68696,1.71235 17.16123,4.68485 25.19525,8.83205l13.84089,-26.78138c-10.59906,-5.44512 -21.75366,-9.35977 -33.20542,-11.59983l-5.83073,29.54917zm-62.86689,-24.7212l9.01193,28.7243c9.20672,-2.88505 18.30711,-4.70771 27.07257,-5.41332l-2.40703,-30.02222c-11.0105,0.88549 -22.342,3.15338 -33.67748,6.71125zm-48.382,22.66301c-3.38295,2.11981 -6.71125,4.05776 -9.97892,5.88539l14.6588,26.31727c3.67812,-2.06913 7.44468,-4.23962 11.21026,-6.59596c5.18176,-3.20904 10.24625,-6.06626 15.21832,-8.5995l-13.68784,-26.83704c-5.64786,2.88505 -11.47859,6.15173 -17.42062,9.82985zm83.2938,-187.80461c0,12.30246 -2.94965,23.95795 -8.18607,34.20222l-67.16117,131.55555c0,0 -67.69286,-132.64875 -67.95722,-133.20429c-4.74051,-9.83084 -7.38605,-20.89799 -7.38605,-32.55347c0,-41.61609 33.72717,-75.34525 75.34327,-75.34525c41.61311,0 75.34724,33.72916 75.34724,75.34525zm-30.1385,0c0,-24.95872 -20.25101,-45.20874 -45.20874,-45.20874c-24.95872,0 -45.20874,20.25002 -45.20874,45.20874c0,24.95574 20.25002,45.20576 45.20874,45.20576c24.95773,0 45.20874,-20.25002 45.20874,-45.20576zm105.48176,75.34525l-70.69121,0l-15.3992,30.13949l64.36954,0l32.52366,97.59781l-10.38936,11.47958c11.06715,9.99979 16.80445,19.21645 16.83626,19.24825l3.17723,-1.91111l28.16776,84.54999l-398.59919,0l30.19912,-90.49997c1.05941,0.73642 1.8813,1.44203 3.05897,2.17447l16.01338,-25.48743c-3.59166,-2.26789 -6.53534,-4.50398 -9.12622,-6.591l30.20012,-90.56159l64.39438,0c-6.38726,-12.48135 -11.41995,-22.33803 -15.39224,-30.13949l-70.725,0l-90.4155,271.2445l482.21101,0l-90.41351,-271.24351z"></path></svg>',
href: 'https://www.google.com/maps/place/Chung+c%C6%B0+B%C3%ACnh+Minh+Garden/@21.0674184,105.885583,15z/data=!4m2!3m1!1s0x0:0x4e7a2d2ff3267fc8?sa=X&ved=2ahUKEwjyqf7c-fz5AhWbL6YKHW35AkAQ_BJ6BAhEEAU',
color: '#d94234'
},
]
});
});
//]]>
</script>
2. Contact Button Widget
<script>//<![CDATA[
var _widget_settings = {
positions: 'bottom right',
support: {
staff: {
name: 'Uyên',
image: 'https://cdn.jsdelivr.net/gh/thietkeblogspot/images/staff.png',
messages: 'Không biết em có thể hỗ trợ gì cho anh/chị không ạ?'
}
},
buttons: {
contact: {
visible: 'true',
id: 'https://www.giaodienblog.com/p/contact.html',
messages: 'Liên hệ'
},
email: {
visible: 'true',
id: 'example@gmail.com',
messages: 'Gửi email'
},
call: {
visible: 'true',
id: '0868450305',
messages: 'Gọi điện'
},
sms: {
visible: 'true',
id: '0868450305',
messages: 'Nhắn tin'
},
viber: {
visible: 'false',
id: 'vhost.vn',
messages: 'Chat Viber'
},
telegram: {
visible: 'false',
id: 'vHostbot',
messages: 'Chat Telegram'
},
zalo: {
visible: 'true',
id: '0868450305',
messages: 'Chat Zalo'
},
facebook: {
visible: 'true',
id: 'mkhoi2001',
messages: 'Chat Facebook'
}
}
}
//]]></script>
<link href='https://cdn.jsdelivr.net/gh/minhkhoi2001/code/contact/contact-buttons-widget.min.css' rel='stylesheet'/>
<script async='async' defer='defer' src='https://cdn.jsdelivr.net/gh/minhkhoi2001/code/contact/contact-buttons-html.min.js'/>
3. WH Widget Contact
<link href='https://cdn.jsdelivr.net/gh/minhkhoi2001/code/contact/contact-buttons.css' rel='stylesheet'/>
<div class='wh-widget-send-button-desktop'>
<div class='wh-widget-send-button-wrapper wh-widget-right'>
<div class='wh-widget-hello-popup-wrapper wh-popup-right wh-hide popup-slide popup-slide-in'>
<div class='wh-widget-hello-popup'>
<div class='wh-widget-hello-popup-close'>
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/>
<path d='M0 0h24v24H0z' fill='none'/>
</svg>
</div>
</div>
</div>
<div class='wh-animation-in' id='wh-call-to-action' style='top: 29px;'>
<a href='javascript:void(0)' title=''>
<div class='wh-call-to-action-content'>Liên hệ hỗ trợ 24/7</div>
</a>
</div>
<div class='wh-widget-send-button-wrapper-list'>
<a class='wh-widget-button button-slide-out' href='https://www.facebook.com/mkhoi2001' rel='noopener nofollow' target='_blank' title=''>
<div class='wh-widget-button-icon wh-messenger-bg-facebook'>
<div>
<svg class='wh-messenger-svg-facebook wh-svg-icon' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d=' M16 6C9.925 6 5 10.56 5 16.185c0 3.205 1.6 6.065 4.1 7.932V28l3.745-2.056c1 .277 2.058.426 3.155.426 6.075 0 11-4.56 11-10.185C27 10.56 22.075 6 16 6zm1.093 13.716l-2.8-2.988-5.467 2.988 6.013-6.383 2.868 2.988 5.398-2.987-6.013 6.383z' fill-rule='evenodd'/>
</svg>
</div>
</div>
<div class='mes-us'>Facebook Messenger</div>
<div class='clear'/>
</a>
<a class='wh-widget-button button-slide-out' href='https://zalo.me/0868450305' rel='noopener nofollow' target='_blank' title=''>
<div class='wh-widget-button-icon wh-messenger-bg-zalo'>
<div>
<svg class='wh-messenger-svg-zalo wh-svg-icon' viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill-rule='evenodd'/>
<path d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill-rule='evenodd'/>
<path d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill-rule='evenodd'/>
</svg>
</div>
</div>
<div class='mes-us'>Zalo Chat</div>
<div class='clear'/>
</a>
<a class='wh-widget-button button-slide-out' href='tel:0868450305' rel='nofollow' title=''>
<div class='wh-widget-button-icon wh-messenger-bg-call'>
<div>
<svg class='wh-messenger-icon wh-messenger-bg-call' viewBox='-72 -72 704 704' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d=' M166.156,512h-41.531c-7.375-0.031-20.563-8.563-20.938-8.906C37.438,437.969,0,348.906,0,255.938 C0,162.719,37.656,73.375,104.281,8.219C104.313,8.188,117.25,0,124.625,0h41.531c15.219,0,33.25,11.125,40.063,24.781l2.906,5.844 c6.781,13.594,6.188,35.563-1.344,48.75l-27.906,48.813c-7.563,13.219-26.188,24.25-41.406,24.25H110.75 c-36.813,64-36.813,143.094-0.031,207.125h27.75c15.219,0,33.844,11.031,41.406,24.25l27.875,48.813 c7.531,13.188,8.156,35.094,1.375,48.781l-2.906,5.844C199.375,500.844,181.375,512,166.156,512z M512,128v256 c0,35.344-28.656,64-64,64H244.688c-1.25-11.219-3.969-22.156-9.156-31.25l-27.875-48.813 c-13.406-23.406-42.469-40.375-69.188-40.375h-8.156c-20.188-45.438-20.188-97.719,0-143.125h8.156 c26.719,0,55.781-16.969,69.188-40.375l27.906-48.813c5.188-9.094,7.906-20.063,9.156-31.25H448C483.344,64,512,92.656,512,128z M328,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S328,381.25,328,368z M328,304c0-13.25-10.75-24-24-24 s-24,10.75-24,24s10.75,24,24,24S328,317.25,328,304z M328,240c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24 S328,253.25,328,240z M392,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,381.25,392,368z M392,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S392,317.25,392,304z M392,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S392,253.25,392,240z M456,368c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,381.25,456,368z M456,304 c0-13.25-10.75-24-24-24s-24,10.75-24,24s10.75,24,24,24S456,317.25,456,304z M456,240c0-13.25-10.75-24-24-24s-24,10.75-24,24 s10.75,24,24,24S456,253.25,456,240z M456,144c0-8.844-7.156-16-16-16H296c-8.844,0-16,7.156-16,16v32c0,8.844,7.156,16,16,16h144 c8.844,0,16-7.156,16-16V144z' fill-rule='evenodd'/>
</svg>
</div>
</div>
<div class='mes-us'>Call now</div>
<div class='clear'/>
</a>
<a class='wh-widget-button button-slide-out' href='mailto:viminhkhoi2001@gmail.com' rel='nofollow' title='Send mail'>
<div class='wh-widget-button-icon wh-messenger-bg-email'>
<div>
<svg class='wh-messenger-icon wh-messenger-bg-email' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d=' M27 22.757c0 1.24-.988 2.243-2.19 2.243H7.19C5.98 25 5 23.994 5 22.757V13.67c0-.556.39-.773.855-.496l8.78 5.238c.782.467 1.95.467 2.73 0l8.78-5.238c.472-.28.855-.063.855.495v9.087z' fill-rule='evenodd'/>
<path d=' M27 9.243C27 8.006 26.02 7 24.81 7H7.19C5.988 7 5 8.004 5 9.243v.465c0 .554.385 1.232.857 1.514l9.61 5.733c.267.16.8.16 1.067 0l9.61-5.733c.473-.283.856-.96.856-1.514v-.465z' fill-rule='evenodd'/>
</svg>
</div>
</div>
<div class='mes-us'>Gửi Email</div>
<div class='clear'/>
</a>
<a class='wh-widget-button wh-widget-button-activator' href='javascript:void(0);'>
<div class='wh-widget-button-icon wh-messenger-bg-activator' style='background-color:#129BF4;'>
<div>
<svg class='wh-messenger-svg-close wh-svg-close' viewBox='-9 -10 41 44' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d=' M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z' fill-rule='evenodd'/>
</svg>
<svg style='padding:5px' viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'>
<path d='M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z' fill='currentColor'/> </svg>
</div>
</div>
<div class='clear'/>
</a>
</div>
<div class='clear'/>
</div>
</div>
<script>//<![CDATA[
window.addEventListener("load",function(){
$('.wh-messenger-bg-activator').on('click', function() {
$(this).parent().parent().toggleClass('wh-widget-show-get-button wh-widget-activator-as-close wh-widget-activate');
var call_to_action = $(this).parent().parent().parent().find('#wh-call-to-action');
var widget_button = $(this).parent().parent().find('.wh-widget-button');
if ($(call_to_action).hasClass('wh-animation-in')) {
$(call_to_action).removeClass('wh-animation-in').addClass('wh-animation-out wh-hide');
} else {
$(call_to_action).addClass('wh-animation-in').removeClass('wh-animation-out wh-hide');
}
if ($(widget_button).not('.wh-widget-button-activator').hasClass('button-slide-out')) {
$(widget_button).not('.wh-widget-button-activator').removeClass('button-slide-out').addClass('button-slide');
} else {
$(widget_button).not('.wh-widget-button-activator').addClass('button-slide-out').removeClass('button-slide');
}
});
})
//]]></script>
4. Support Online
<style>
.support-online{position:fixed;z-index:999;left:15px;bottom:30px;top:auto!important}
.support-online a{position:relative;margin:20px 10px;text-align:left;width:40px;height:40px}
.support-online svg{width:40px;height:40px;background:#90c908;color:#fff;border-radius:100%;font-size:20px;text-align:center;line-height:40px;position:relative;z-index:999;padding:5px}
.support-online a{display:block}
.support-online a span{border-radius:2px;text-align:center;background:#90c908;padding:9px;display:none;width:210px;margin-left:10px;position:absolute;color:#ffffff;z-index:999;top:0;left:40px;transition:all 0.2s ease-in-out 0s;-moz-animation:headerAnimation 0.7s 1;-webkit-animation:headerAnimation 0.7s 1;-o-animation:headerAnimation 0.7s 1;animation:headerAnimation 0.7s 1}
.support-online a:hover span{display:block}
.support-online a span::before{content:"";width:0;height:0;border-style:solid;border-width:10px 10px 10px 0;border-color:transparent #90c908 transparent transparent;position:absolute;left:-10px;top:10px}
.kenit-alo-circle-fill{width:60px;height:60px;top:-10px;position:absolute;-webkit-transition:all 0.1s ease-in-out;-moz-transition:all 0.1s ease-in-out;-ms-transition:all 0.1s ease-in-out;-o-transition:all 0.1s ease-in-out;transition:all 0.1s ease-in-out;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;border:2px solid transparent;-webkit-transition:all .1s;-moz-transition:all .1s;-o-transition:all .1s;transition:all .1s;background-color:rgba(144,201,8,0.5);opacity:.75;right:-10px}
.kenit-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(30,30,30,0.4);opacity:.1;border-color:#a2e209;opacity:.5}
.support-online .btn-support{cursor:pointer}
@-webkit-keyframes pulse{0%{-webkit-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);transform:scale(1.1)}}
@keyframes pulse{0%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}50%{-webkit-transform:scale(0.8);-ms-transform:scale(0.8);transform:scale(0.8)}100%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}}
.animated{animation-duration:1s;animation-fill-mode:both}
.animated.infinite{animation-iteration-count:infinite}
.animated.hinge{animation-duration:2s}
.animated.flipOutX,.animated.flipOutY,.animated.bounceIn,.animated.bounceOut{animation-duration:.75s}
@keyframes zoomIn{from{opacity:0;transform:scale3d(0.3,0.3,0.3)}50%{opacity:1}}
.zoomIn{animation-name:zoomIn}
@keyframes pulse{from{transform:scale3d(1,1,1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scale3d(1,1,1)}}
.pulse{animation-name:pulse}
@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(0.95,1.05,1)}75%{transform:scale3d(1.05,0.95,1)}to{transform:scale3d(1,1,1)}}
</style>
<div class='support-online'>
<div class='support-content' style='display: none;'>
<a class='call-now' href='tel:0123456789' rel='nofollow'>
<svg height='30' style='padding:9px' viewBox='0 0 29 30' width='29' xmlns='http://www.w3.org/2000/svg'>
<path d='M21.872 19.905c-.947-.968-2.13-.968-3.072 0-.718.737-1.256.974-1.962 1.723-.193.206-.356.25-.59.112-.466-.262-.96-.474-1.408-.76-2.082-1.356-3.827-3.098-5.372-5.058-.767-.974-1.45-2.017-1.926-3.19-.096-.238-.078-.394.11-.587.717-.718.96-.98 1.665-1.717.984-1.024.984-2.223-.006-3.253-.56-.586-1.103-1.397-1.56-2.034-.458-.636-.817-1.392-1.403-1.985C5.4 2.2 4.217 2.2 3.275 3.16 2.55 3.9 1.855 4.654 1.12 5.378.438 6.045.093 6.863.02 7.817c-.114 1.556.255 3.023.774 4.453 1.062 2.96 2.68 5.587 4.642 7.997 2.65 3.26 5.813 5.837 9.513 7.698 1.665.836 3.39 1.48 5.268 1.585 1.292.075 2.415-.262 3.314-1.304.616-.712 1.31-1.36 1.962-2.042.966-1.01.972-2.235.012-3.234-1.147-1.192-2.48-1.88-3.634-3.065zm-.49-5.36l.268-.047c.583-.103.953-.707.79-1.295-.465-1.676-1.332-3.193-2.537-4.445-1.288-1.33-2.857-2.254-4.59-2.708-.574-.15-1.148.248-1.23.855l-.038.28c-.07.522.253 1.01.747 1.142 1.326.355 2.53 1.064 3.517 2.086.926.958 1.59 2.125 1.952 3.412.14.5.624.807 1.12.72zm2.56-9.85C21.618 2.292 18.74.69 15.56.02c-.56-.117-1.1.283-1.178.868l-.038.28c-.073.537.272 1.04.786 1.15 2.74.584 5.218 1.968 7.217 4.03 1.885 1.95 3.19 4.36 3.803 7.012.122.53.617.873 1.136.78l.265-.046c.57-.1.934-.678.8-1.26-.71-3.08-2.223-5.873-4.41-8.14z' fill='#FFFFFF' fill-rule='evenodd'/>
</svg>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
<span>Gọi ngay: 0123 456 789</span>
</a>
<a class='mes' href='https://www.messenger.com/t/mkhoi2001' target='_blank'>
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M16 6C9.925 6 5 10.56 5 16.185c0 3.205 1.6 6.065 4.1 7.932V28l3.745-2.056c1 .277 2.058.426 3.155.426 6.075 0 11-4.56 11-10.185C27 10.56 22.075 6 16 6zm1.093 13.716l-2.8-2.988-5.467 2.988 6.013-6.383 2.868 2.988 5.398-2.987-6.013 6.383z' fill='#fff' fill-rule='evenodd'/>
</svg>
<span>Chat qua Messenger</span>
</a>
<a class='zalo' href='https://zalo.me/0868450305' target='_blank'>
<svg style='padding:8px' viewBox='0 0 97.4 87.2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M78.4,42c-1.4,0-2.4,0.6-3.2,1.7c-0.7,1-1,2.2-1,3.7c0,1.5,0.3,2.7,1,3.7c0.8,1.2,1.8,1.7,3.2,1.7 c1.4,0,2.5-0.6,3.2-1.7c0.7-1,1-2.2,1-3.7c0-1.4-0.3-2.6-1-3.6C80.8,42.6,79.7,42,78.4,42z' fill='#fff' fill-rule='evenodd'/>
<path d='M48.8,0C21.9,0,0,19.5,0,43.6c0,11.9,5.4,22.7,14,30.6c2.2,2-5.4,10.5-9,11.3c10.4,2.9,20.7-3.4,23.2-2.4 c6.2,2.6,13.2,4,20.5,4c26.9,0,48.7-19.5,48.7-43.6C97.5,19.5,75.7,0,48.8,0z M27.8,58.2H14.6c-3.1,0-4.6-1.1-4.6-3.3 c0-1,0.6-2.4,1.8-4l11.8-15.6h-8.5c-3.1,0-4.7-1-4.7-3c0-2,1.6-3,4.7-3h11.2c3.8,0,5.7,1.1,5.7,3.2c0,1-0.6,2.3-1.9,4L18.5,52.2 h9.3c3.1,0,4.7,1,4.7,3C32.5,57.2,30.9,58.2,27.8,58.2z M54.9,53.8c0,3.1-1.1,4.7-3.2,4.7c-1.4,0-2.4-0.7-3.1-2.2 c-1.3,1.6-3.1,2.4-5.4,2.4c-2.9,0-5.3-1.2-7.2-3.5c-1.7-2.2-2.5-4.8-2.5-7.8c0-3,0.9-5.6,2.7-7.8c1.9-2.3,4.3-3.5,7.3-3.5 c2.2,0,3.9,0.8,5.1,2.3c0.7-1.4,1.8-2,3.1-2c2.1,0,3.2,1.5,3.2,4.6V53.8z M64.7,53.8c0,3.1-1.1,4.7-3.2,4.7c-2.1,0-3.2-1.6-3.2-4.7 V31.9c0-3.1,1.1-4.7,3.2-4.7c2.1,0,3.2,1.6,3.2,4.7V53.8z M78.4,58.9c-3.2,0-5.9-1.1-7.9-3.3c-2-2.2-3-4.9-3-8.1s1-6,3-8.1 c2-2.2,4.7-3.3,7.9-3.3c3.3,0,5.9,1.1,7.9,3.3c1.9,2.1,2.9,4.9,2.9,8.1s-1,6-2.9,8.1C84.2,57.8,81.6,58.9,78.4,58.9z' fill='#fff' fill-rule='evenodd'/>
<path d='M44.4,42.2c-1.3,0-2.4,0.5-3.1,1.6c-0.7,1-1,2.1-1,3.5c0,1.4,0.3,2.6,1,3.6c0.8,1.1,1.8,1.7,3.2,1.7 c1.3,0,2.4-0.6,3.1-1.7c0.6-1,1-2.2,1-3.6c0-1.4-0.3-2.5-1-3.5C46.7,42.8,45.7,42.2,44.4,42.2z' fill='#fff' fill-rule='evenodd'/>
</svg>
<span>Zalo 0868450305</span>
</a>
<a class='mail' href='mailto:viminhkhoi2001@gmail.com' target='_blank'>
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<svg viewBox='0 0 48 48' xmlns='http://www.w3.org/2000/svg'>
<path d='M40 8H8c-2.21 0-3.98 1.79-3.98 4L4 36c0 2.21 1.79 4 4 4h32c2.21 0 4-1.79 4-4V12c0-2.21-1.79-4-4-4zm0 28H8V16l16 10 16-10v20zM24 22L8 12h32L24 22z' fill='#fff'/>
</svg>
</svg>
<span>viminhkhoi2001@gmail.com</span>
</a>
<a class='sms' href='sms:0123456789'>
<svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<path d='M21 23h4.01c1.1 0 1.99-.893 1.99-1.994V8.994C27 7.894 26.11 7 25.01 7H6.99C5.89 7 5 7.893 5 8.994v12.012C5 22.106 5.89 23 6.99 23h9.566l3.114 3.504c.73.82 1.33.602 1.33-.5V23zM10.515 12.165c.36.11.682.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.536.054-.707.16a.512.512 0 0 0-.256.46c0 .173.055.32.167.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .292-.528.618.618 0 0 0-.174-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.127-.202.38 0 .75.055 1.11.165zm7.732 5.8l-.01-4.424-1.87 3.806h-.653l-1.867-3.805v4.426h-.942V12.04h1.186l1.955 3.938 1.945-3.937h1.178v5.926h-.92zm5.728-5.8c.36.11.68.26.962.446l-.413.88a3.882 3.882 0 0 0-.915-.416 2.9 2.9 0 0 0-.82-.136c-.3 0-.537.054-.707.16a.512.512 0 0 0-.257.46c0 .173.056.32.168.437.11.12.252.214.42.285.17.072.408.152.714.24.4.12.725.236.977.35.252.117.467.29.644.518.177.228.266.526.266.892 0 .344-.095.647-.285.907-.19.26-.453.46-.79.6-.338.14-.724.212-1.16.212-.45 0-.888-.086-1.31-.255a3.673 3.673 0 0 1-1.11-.684l.434-.863c.3.276.628.49.985.64.356.15.695.224 1.017.224.35 0 .622-.063.816-.19a.598.598 0 0 0 .29-.528.618.618 0 0 0-.172-.45 1.212 1.212 0 0 0-.43-.28 9.65 9.65 0 0 0-.713-.237 7.414 7.414 0 0 1-.977-.347 1.75 1.75 0 0 1-.637-.498c-.177-.22-.266-.51-.266-.877 0-.334.09-.625.27-.874.18-.25.434-.443.76-.578.324-.135.7-.202 1.126-.202.38 0 .75.055 1.112.165z' fill='#fff' fill-rule='evenodd'/>
</svg>
<span>SMS: 0123 456 789</span>
</a>
</div>
<a class='btn-support'>
<svg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'>
<path d='M416 192c0-88.4-93.1-160-208-160S0 103.6 0 192c0 34.3 14.1 65.9 38 92-13.4 30.2-35.5 54.2-35.8 54.5-2.2 2.3-2.8 5.7-1.5 8.7S4.8 352 8 352c36.6 0 66.9-12.3 88.7-25 32.2 15.7 70.3 25 111.3 25 114.9 0 208-71.6 208-160zm122 220c23.9-26 38-57.7 38-92 0-66.9-53.5-124.2-129.3-148.1.9 6.6 1.3 13.3 1.3 20.1 0 105.9-107.7 192-240 192-10.8 0-21.3-.8-31.7-1.9C207.8 439.6 281.8 480 368 480c41 0 79.1-9.2 111.3-25 21.8 12.7 52.1 25 88.7 25 3.2 0 6.1-1.9 7.3-4.8 1.3-2.9.7-6.3-1.5-8.7-.3-.3-22.4-24.2-35.8-54.5z' fill='currentColor'/>
</svg>
<div class='animated infinite zoomIn kenit-alo-circle'/>
<div class='animated infinite pulse kenit-alo-circle-fill'/>
</a>
</div>
<script>//<![CDATA[
window.addEventListener("load",function(){$('a.btn-support').click(function(e){e.stopPropagation();$('.support-content').slideToggle()});$('.support-content').click(function(e){e.stopPropagation()});$(document).click(function(){$('.support-content').slideUp()})})
//]]></script>
Nếu gặp khó khăn hãy để lại bình luận nhé!
Đẹp và hữu ích 😃😃
Trả lờiXóahi ước gì bác ra bài chứa code như này :))
Trả lờiXóa1 chút xíu js là được à bác, bác view source là thấy
Xóakhá là ok, đã áp dụng ở một số blog khác mà ko phải là anhtrainang.com :v
Trả lờiXóaComment
Trả lờiXóaQuá xịn luôn ạ :3
Trả lờiXóaĐã ghim và sẽ triển khai.
Có loại liên hệ nào mà k gộp vào không ak
Trả lờiXóaChào admin, mình đang muốn mượn dùng code cuối mà bạn share nhưng k dùng được, b check lại giúp mình xem có lỗi k
Trả lờiXóaok để mình ktra
Xóacode 2 sao mình dán vô không được nhỉ? có lỗi hay mình dán sai chỗ cho mình hỏi dán code này vô đâu ạ?
Trả lờiXóa