@keyframes v247-qn-ring{0%{transform:rotate(0)}10%{transform:rotate(15deg)}20%{transform:rotate(-10deg)}30%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}50%{transform:rotate(5deg)}60%{transform:rotate(-5deg)}70%,100%{transform:rotate(0)}}
@keyframes v247-qn-pulse-blue{0%{box-shadow:0 0 0 0 rgba(59,130,246,.45)}70%{box-shadow:0 0 0 12px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}}
@keyframes v247-qn-pulse-green{0%{box-shadow:0 0 0 0 rgba(34,197,94,.42),0 0 0 7px rgba(187,247,208,.78)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0),0 0 0 0 rgba(187,247,208,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0),0 0 0 0 rgba(187,247,208,0)}}

:root{
	--v247-qn-zalo-icon:url('../img/zalo.svg');
	--v247-qn-phone-icon:url('../img/phone.svg');
	--v247-qn-messenger-icon:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'><rect width='48' height='48' rx='10' fill='%230084FF'/><path d='M24 9c-8.3 0-15 5.9-15 13.2 0 4 2 7.6 5.2 10v5l4.6-2.5c1.6.4 3.2.7 4.9.7 8.3 0 15-5.9 15-13.2S32.3 9 24 9zm6.5 16.1l-3.9-2.1-4.2 2.1-3.4-4.2-7.5 4.2 9.2-9.9 3.4 4.2 6.8-4.2-0.4 10z' fill='white'/></svg>");
}

.v247-quick-nav-mobile{position:fixed;right:13px;bottom:70px;z-index:999999;width:auto;background:#fff;border:1px solid #f2f2f2;border-radius:5px;padding:10px 0;display:none}
.v247-quick-nav-mobile ul{list-style:none;padding:0;margin:0}
.v247-quick-nav-mobile li{list-style:none!important;margin:0}
.v247-quick-nav-mobile a,.v247-quick-nav-mobile button{display:block;padding:3px;border:0;border-radius:5px;text-align:center;text-decoration:none;color:#515151;font-weight:700;font-size:10px;line-height:15px;max-width:72.19px;max-height:54px;background:transparent;box-shadow:none!important;cursor:pointer;font-family:inherit}
.v247-quick-nav-mobile .v247-qn-icon{display:block;width:30px;height:33px;margin:5px auto 0}
.v247-quick-nav-mobile .v247-qn-phone{background-size:32px 32px}
.v247-qn-home{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230a0a0a"><path d="M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3l9-8z"/></svg>') no-repeat center/contain}
.v247-qn-menu{background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230a0a0a"><path d="M3 6h18v2H3V6zm0 5h18v2H3v-2zm0 5h18v2H3v-2z"/></svg>') no-repeat center/contain}
.v247-qn-zalo{background-image:var(--v247-qn-zalo-icon);background-repeat:no-repeat;background-position:center;background-size:contain}
.v247-qn-phone{background-image:var(--v247-qn-phone-icon);background-repeat:no-repeat;background-position:center;background-size:contain;animation:v247-qn-ring 1.5s ease-in-out infinite;transform-origin:50% 50%;will-change:transform}
.v247-qn-messenger{background-image:var(--v247-qn-messenger-icon);background-repeat:no-repeat;background-position:center;background-size:contain}
.v247-qn-phone-label{position:relative;top:35px;font-size:10px;font-weight:700;color:#000}

@media (max-width:600px){
	.v247-quick-nav-mobile{display:block;left:0;bottom:0;width:100%;height:60px;padding:0;margin:0;line-height:50px;border-radius:0;box-shadow:0 4px 10px rgba(0,0,0,.15)}
	.v247-quick-nav-mobile ul{display:flex;width:100%;height:60px}
	.v247-quick-nav-mobile li{flex:1 1 20%;height:50px}
	.v247-quick-nav-mobile a,.v247-quick-nav-mobile button{padding:0;margin:0 auto;width:100%}
	.v247-quick-nav-mobile .v247-qn-phone-animation{display:block;position:absolute;top:-16px;left:50%;transform:translate(-50%,0);width:52px;height:52px;border-radius:100%;background:#22c55e;border:2px solid #fff;box-shadow:0 0 0 7px rgba(187,247,208,.78)}
	.v247-qn-phone-mobile{position:relative}
}

.v247-quick-nav-desktop{--v247-qn-right:24px;--v247-qn-bottom:98px;--v247-qn-gap:12px;position:fixed;right:var(--v247-qn-right);bottom:var(--v247-qn-bottom);z-index:999998;display:none;flex-direction:column;align-items:flex-end;gap:var(--v247-qn-gap)}
@media (min-width:601px){.v247-quick-nav-desktop{display:flex}}
.v247-qn-desktop-buttons{display:flex;flex-direction:column;gap:var(--v247-qn-gap)}
.v247-qn-desktop-button{width:44px;height:44px;border-radius:10px;background-color:#fff;display:flex;align-items:center;justify-content:center;border:1px solid #e6eefc;animation:v247-qn-pulse-blue 2.2s ease-out infinite;box-shadow:0 6px 15px rgba(0,0,0,.12);transition:.2s}
.v247-qn-desktop-button.v247-qn-zalo{background-size:28px}
.v247-qn-desktop-button.v247-qn-messenger{background-size:28px}
.v247-qn-callbar{display:flex;align-items:center;gap:8px;text-decoration:none}
.v247-qn-call-pill{min-width:130px;height:29px;border-radius:999px;background:#22c55e;color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 14px;box-shadow:0 6px 15px rgba(34,197,94,.25)}
.v247-qn-call-circle{width:46px;height:46px;border-radius:50%;background:#22c55e;display:flex;align-items:center;justify-content:center;border:2px solid #fff;animation:v247-qn-ring 1.5s ease-in-out infinite,v247-qn-pulse-green 2s ease-out infinite;box-shadow:0 0 0 7px rgba(187,247,208,.78),0 6px 15px rgba(34,197,94,.25)}
.v247-qn-call-circle .v247-qn-phone{display:block;width:30px;height:30px;filter:none;background-size:30px 30px}
.v247-qn-callbar:hover .v247-qn-call-pill{filter:brightness(1.05)}

.v247-qn-back-to-top{appearance:none;-webkit-appearance:none;padding:0;cursor:pointer;color:#1f5a42;background:#fff;animation:none}
.v247-qn-back-to-top svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.v247-qn-back-to-top:hover,.v247-qn-back-to-top:focus-visible{color:#087847;border-color:#bcdacb;box-shadow:0 8px 18px rgba(18,85,55,.16);outline:0}
