#contact-button-widget{position:fixed;right:20px;bottom:13%;transform:translateY(-50%);z-index:9999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}.contact-main-btn{background:linear-gradient(135deg,#0084FF 0%,#0066CC 100%);width:60px;height:60px;border-radius:50%;cursor:pointer;box-shadow:0 8px 25px rgb(0 132 255 / .4);transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;color:#fff;user-select:none;position:relative;overflow:hidden}.contact-main-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgb(255 255 255 / .2),transparent);transition:left 0.5s}.contact-main-btn:hover::before{left:100%}.contact-main-btn:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 12px 35px rgb(0 132 255 / .5)}.contact-main-btn.active{transform:scale(.95);box-shadow:0 4px 15px rgb(0 132 255 / .6)}.contact-icon-container{position:relative;width:28px;height:28px}.contact-icon{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5) rotateY(90deg);transition:all 0.6s ease}.contact-icon.active{opacity:1;transform:scale(1) rotateY(0deg)}.contact-icon svg{width:100%;height:100%;fill:#fff}.contact-main-btn:not(.clicked) .contact-icon{animation:iconRotate 4s infinite}.contact-main-btn:not(.clicked) .menu-icon{animation-delay:0s}.contact-main-btn:not(.clicked) .phone-icon{animation-delay:1.33s}.contact-main-btn:not(.clicked) .zalo-icon{animation-delay:2.66s}@keyframes iconRotate{0%,25%{opacity:1;transform:scale(1) rotateY(0deg) rotateZ(0deg)}28%,95%{opacity:0;transform:scale(.3) rotateY(180deg) rotateZ(360deg)}98%,100%{opacity:1;transform:scale(1) rotateY(0deg) rotateZ(0deg)}}.contact-options{position:absolute;bottom:70px;right:0;background:#fff;border-radius:16px;min-width:320px;max-width:350px;box-shadow:0 12px 40px rgb(0 0 0 / .15);opacity:0;visibility:hidden;transform:translateY(20px) scale(.95);transition:all 0.3s cubic-bezier(.34,1.56,.64,1);border:1px solid rgb(0 0 0 / .08);max-height:70vh;overflow:hidden;display:flex;flex-direction:column}.contact-options.show{opacity:1;visibility:visible;transform:translateY(0) scale(1)}.contact-options-header{padding:20px 20px 15px;border-bottom:1px solid #f0f0f0;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:16px 16px 0 0;flex-shrink:0}.contact-options-header h3{margin:0;font-size:16px;font-weight:600;color:#333;text-align:center}.contact-options-content{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:rgb(0 132 255 / .3) #fff0}.contact-options-content::-webkit-scrollbar{width:6px}.contact-options-content::-webkit-scrollbar-track{background:#fff0}.contact-options-content::-webkit-scrollbar-thumb{background:rgb(0 132 255 / .3);border-radius:3px}.contact-options-content::-webkit-scrollbar-thumb:hover{background:rgb(0 132 255 / .5)}.contact-person-header{display:flex;align-items:center;padding:16px 20px 12px;gap:12px;color:#333;font-weight:600;font-size:15px}.contact-person-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:14px;text-transform:uppercase;flex-shrink:0}.contact-person-options{padding:0 20px}.contact-option{display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:8px;border-radius:12px;text-decoration:none;color:#333;transition:all 0.2s ease;border:1px solid #fff0;position:relative;overflow:hidden}.contact-option::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;transition:left 0.3s ease;z-index:0}.contact-option>*{position:relative;z-index:1}.phone-option{border-color:rgb(37 211 102 / .2);background:rgb(37 211 102 / .05)}.phone-option::before{background:linear-gradient(135deg,#25D366,#128C7E)}.phone-option:hover::before{left:0}.zalo-option{border-color:rgb(0 132 255 / .2);background:rgb(0 132 255 / .05)}.zalo-option::before{background:linear-gradient(135deg,#0084FF,#0066CC)}.zalo-option:hover::before{left:0}.contact-option:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgb(0 0 0 / .1);color:#fff;text-decoration:none}.contact-option:hover .contact-option-icon svg{fill:#fff}.contact-option:hover .contact-option-content{color:#fff}.contact-option-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.phone-option .contact-option-icon{background:rgb(37 211 102 / .1)}.zalo-option .contact-option-icon{background:rgb(0 132 255 / .1)}.contact-option-icon svg{width:20px;height:20px;transition:fill 0.2s ease}.phone-option .contact-option-icon svg{fill:#25D366}.zalo-option .contact-option-icon svg{fill:#0084FF}.contact-option-content{flex:1;transition:color 0.2s ease;min-width:0}.contact-option-title{font-weight:600;font-size:14px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-option-subtitle{font-size:12px;opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-separator{height:1px;background:linear-gradient(to right,transparent,#e0e0e0,transparent);margin:16px 20px}@keyframes pulse{0%{box-shadow:0 8px 25px rgb(0 132 255 / .4),0 0 0 0 rgb(0 132 255 / .7)}50%{box-shadow:0 8px 25px rgb(0 132 255 / .6),0 0 0 10px #fff0}100%{box-shadow:0 8px 25px rgb(0 132 255 / .4),0 0 0 0 #fff0}}.contact-main-btn:not(.clicked){animation:pulse 3s infinite}@media (max-width:768px){#contact-button-widget{bottom:20px;right:15px;transform:none}.contact-main-btn{width:55px;height:55px}.contact-icon-container{width:24px;height:24px}.contact-options{min-width:280px;max-width:calc(100vw - 40px);right:-10px;max-height:60vh}.contact-person-header{padding:14px 16px 10px;font-size:14px}.contact-person-avatar{width:32px;height:32px;font-size:13px}.contact-person-options{padding:0 16px}.contact-option{padding:10px;gap:10px}.contact-option-icon{width:36px;height:36px}.contact-option-title{font-size:13px}.contact-option-subtitle{font-size:11px}.contact-separator{margin:12px 16px}}@media (max-width:480px){.contact-options{min-width:260px;max-width:calc(100vw - 30px);right:-5px;max-height:55vh}.contact-person-header{padding:12px 14px 8px}.contact-person-options{padding:0 14px}.contact-option{padding:8px}}@media (max-height:600px){#contact-button-widget{bottom:10px;right:15px}.contact-options{max-height:50vh;bottom:65px}.contact-person-header{padding:10px 16px 8px}.contact-person-options{padding:0 16px}.contact-option{padding:8px;margin-bottom:6px}.contact-separator{margin:10px 16px}}@media (max-height:480px){.contact-options{max-height:40vh;bottom:60px}.contact-person-header{padding:8px 16px 6px;font-size:13px}.contact-person-avatar{width:28px;height:28px;font-size:12px}.contact-option{padding:6px;margin-bottom:4px}.contact-option-icon{width:32px;height:32px}.contact-option-title{font-size:12px}.contact-option-subtitle{font-size:10px}.contact-separator{margin:8px 16px}}@media (min-width:769px) and (max-width:1024px) and (orientation:portrait){.contact-options{max-height:65vh}}@media (min-width:769px) and (max-width:1024px) and (orientation:landscape){.contact-options{max-height:60vh}}@media (min-width:1025px) and (max-height:700px){.contact-options{max-height:55vh}}@media (max-width:768px){.contact-options{transform:translateY(30px) scale(.9)}.contact-options.show{transform:translateY(0) scale(1)}}.contact-options-content{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}