/* =========================================================
   Nhơn Nguyễn - Floating Contact v1.2.0
========================================================= */

.nn-contact-float,
.nn-contact-float *{
    box-sizing:border-box;
}

.nn-contact-float{
    position:fixed;
    top:260px;
    transform:none;
    z-index:99999;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    pointer-events:none;
}

.nn-contact-float > a{
    pointer-events:auto;
}

/* Round channel buttons */
.nn-contact-btn{
    position:relative;
    display:flex;
    align-items:center;
    text-decoration:none!important;
    filter:drop-shadow(0 7px 12px rgba(0,0,0,.13));
}

.nn-contact-circle{
    position:relative;
    width:58px;
    height:58px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:7px solid rgba(255,255,255,.20);
    border-radius:50%;
    color:#fff;
    background-clip:padding-box;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
    transition:transform .25s ease,box-shadow .25s ease,filter .25s ease;
}

.nn-contact-circle svg{
    width:25px;
    height:25px;
    fill:currentColor;
}

.nn-tiktok .nn-contact-circle{
    background:var(--nn-tiktok,#111);
    box-shadow:0 0 0 1px rgba(254,44,85,.25),0 8px 20px rgba(0,0,0,.18);
}

.nn-tiktok .nn-contact-circle:after{
    content:"";
    position:absolute;
    inset:-6px;
    border:2px solid rgba(37,244,238,.32);
    border-radius:50%;
    pointer-events:none;
}

.nn-messenger .nn-contact-circle{
    background:linear-gradient(145deg,var(--nn-messenger,#7138a3),#54247d);
}

.nn-zalo .nn-contact-circle{
    background:linear-gradient(145deg,var(--nn-zalo,#128ff0),#087ad5);
}

.nn-zalo-text{
    font-size:11px;
    line-height:1;
    font-weight:800;
    letter-spacing:-.3px;
}

/* Tooltips */
.nn-contact-tooltip{
    position:absolute;
    min-width:108px;
    padding:9px 13px;
    border-radius:7px;
    color:#fff;
    background:var(--nn-tooltip,#0b3a2c);
    font-size:12px;
    line-height:1;
    font-weight:650;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transition:opacity .22s ease,visibility .22s ease,transform .22s ease;
}

.nn-contact-float.is-left .nn-contact-tooltip{
    left:48px;
    padding-left:18px;
    border-radius:0 7px 7px 0;
    transform:translateX(-7px);
}

.nn-contact-float.is-right .nn-contact-tooltip{
    right:48px;
    padding-right:18px;
    border-radius:7px 0 0 7px;
    transform:translateX(7px);
}

.nn-contact-btn:hover .nn-contact-tooltip{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
}

.nn-contact-btn:hover .nn-contact-circle{
    transform:translateY(-3px) scale(1.055);
    box-shadow:0 13px 27px rgba(0,0,0,.22);
    filter:saturate(1.06);
}

/* Phone */
.nn-contact-phone{
    position:relative;
    min-width:225px;
    height:57px;
    display:flex;
    align-items:center;
    margin-top:7px;
    border-radius:30px;
    color:#fff!important;
    background:linear-gradient(135deg,var(--nn-phone,#e83830),#d72f28);
    box-shadow:0 9px 23px rgba(213,49,42,.25);
    text-decoration:none!important;
    transition:transform .25s ease,box-shadow .25s ease;
}

.nn-contact-float.is-left .nn-contact-phone{
    padding-left:45px;
}

.nn-contact-float.is-right .nn-contact-phone{
    padding-right:45px;
    justify-content:flex-end;
}

.nn-phone-circle{
    position:absolute;
    top:50%;
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:7px solid rgba(255,255,255,.20);
    border-radius:50%;
    color:#fff;
    background:var(--nn-phone,#e83830);
    box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.nn-contact-float.is-left .nn-phone-circle{
    left:-1px;
    transform:translate(-7px,-50%);
}

.nn-contact-float.is-right .nn-phone-circle{
    right:-1px;
    transform:translate(7px,-50%);
}

.nn-phone-circle svg{
    width:25px;
    height:25px;
    fill:currentColor;
}

.nn-phone-number{
    position:relative;
    z-index:2;
    display:block;
    color:#fff;
    font-size:19px;
    line-height:1;
    font-weight:800;
    letter-spacing:.4px;
}

.nn-contact-float.is-left .nn-phone-number{
    padding-left:30px;
    padding-right:20px;
}

.nn-contact-float.is-right .nn-phone-number{
    padding-right:30px;
    padding-left:20px;
}

.nn-contact-phone:hover{
    color:#fff!important;
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(213,49,42,.33);
}

.nn-phone-circle:after{
    content:"";
    position:absolute;
    inset:-3px;
    border:1px solid color-mix(in srgb, var(--nn-phone,#e83830) 70%, transparent);
    border-radius:50%;
    animation:nnPhonePulse 2.1s infinite;
}

@keyframes nnPhonePulse{
    0%{transform:scale(.92);opacity:.75}
    70%{transform:scale(1.35);opacity:0}
    100%{transform:scale(1.35);opacity:0}
}



/* Hotline shake - rung nhẹ theo nhịp, không rung liên tục */
.nn-contact-phone.nn-phone-shake .nn-phone-circle svg{
    transform-origin:50% 50%;
    animation:nnPhoneShake 3.6s ease-in-out infinite;
}

@keyframes nnPhoneShake{
    0%,68%,100%{transform:translateX(0) rotate(0deg)}
    72%{transform:translateX(-1px) rotate(-18deg)}
    76%{transform:translateX(1px) rotate(16deg)}
    80%{transform:translateX(-1px) rotate(-13deg)}
    84%{transform:translateX(1px) rotate(10deg)}
    88%{transform:translateX(0) rotate(-7deg)}
    92%{transform:translateX(0) rotate(4deg)}
    96%{transform:translateX(0) rotate(0deg)}
}

/* Mobile */
@media(max-width:767px){
    .nn-contact-float{
        gap:10px;
        transform:none;
    }

    .nn-contact-circle{
        width:46px;
        height:46px;
        border-width:5px;
    }

    .nn-contact-circle svg{
        width:20px;
        height:20px;
    }

    .nn-contact-tooltip{
        display:none;
    }

    .nn-contact-phone.mobile-icon-only{
        min-width:0;
        width:50px;
        height:50px;
        padding:0!important;
        border-radius:50%;
        background:transparent;
        box-shadow:none;
    }

    .nn-contact-phone.mobile-icon-only .nn-phone-circle{
        left:0!important;
        right:auto!important;
        top:0;
        width:50px;
        height:50px;
        border-width:5px;
        transform:none!important;
    }

    .nn-contact-float.is-right .nn-contact-phone.mobile-icon-only .nn-phone-circle{
        left:auto!important;
        right:0!important;
    }

    .nn-contact-phone.mobile-icon-only .nn-phone-number{
        display:none;
    }
}

@media(prefers-reduced-motion:reduce){
    .nn-phone-circle:after{animation:none}
    .nn-contact-phone.nn-phone-shake .nn-phone-circle svg{animation:none}
    .nn-contact-circle,
    .nn-contact-tooltip,
    .nn-contact-phone{transition:none!important}
}


/* Desktop thấp: tự thu gọn nhẹ để cụm nút không chiếm quá nhiều chiều cao */
@media(min-width:768px) and (max-height:820px){
    .nn-contact-float{gap:14px}
    .nn-contact-circle{
        width:54px;
        height:54px;
    }
    .nn-contact-phone{
        min-width:210px;
        height:54px;
    }
    .nn-phone-circle{
        width:60px;
        height:60px;
    }
    .nn-phone-number{
        font-size:18px;
    }
}