/* ============================================================
   TNC – Nút Liên Hệ Nổi | style.css
============================================================ */

/* ---------- Desktop: hộp nút nổi ---------- */
.tnclh-box {
    position: fixed;
    bottom: 120px;
    right: 18px; /* JS sẽ đổi sang left nếu cài đặt = left */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 99999;
}
.tnclh-box.tnclh-vi-tri-left {
    right: auto;
    left: 18px;
}

/* Nút toggle "Liên hệ" dọc */
.tnclh-toggle {
    color: #fff;
    background: var(--tnclh-toggle, #0079d3);
    padding: 12px 10px;
    border-radius: 20px;
    writing-mode: vertical-rl;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Nút tròn */
.tnclh-item {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    position: relative;
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform .25s;
    text-decoration: none;
}
.tnclh-item:hover { transform: scale(1.12); }

.tnclh-call { background: var(--tnclh-call, #fa314a); }
.tnclh-zalo { background: var(--tnclh-zalo, #0068ff); }
.tnclh-mess { background: var(--tnclh-mess, #0084ff); }
.tnclh-momo { background: #ae2070; }
.tnclh-top  { background: #555; }

.tnclh-item img { width: 28px; height: 28px; }

/* Hiệu ứng tỏa sóng */
.tnclh-item::before,
.tnclh-item::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.55);
    transform: translate(-50%,-50%) scale(1);
    opacity: .85;
    pointer-events: none;
    animation: tnclh-wave 1.6s infinite;
}
.tnclh-item::before { animation-delay: .8s; }

@keyframes tnclh-wave {
    0%   { transform: translate(-50%,-50%) scale(1);    opacity: .85; }
    70%  { transform: translate(-50%,-50%) scale(1.85); opacity: 0;   }
    100% { transform: translate(-50%,-50%) scale(1.85); opacity: 0;   }
}

/* Nút "lên đầu" ẩn ban đầu */
.tnclh-top {
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}
.tnclh-top.show {
    opacity: 1;
    visibility: visible;
}

/* Giảm chuyển động */
@media (prefers-reduced-motion: reduce) {
    .tnclh-item::before,
    .tnclh-item::after { display: none !important; animation: none !important; }
}

/* Ẩn desktop trên mobile/tablet */
@media (max-width: 850px) {
    .tnclh-box { display: none !important; }
}

/* ============================================================
   Mobile: footer bar — giữ nguyên cấu trúc gốc, đổi prefix
============================================================ */
#tnclh-footer-outer {position: fixed;width: 100%;z-index: 999999 !important;bottom: 0;display: none;}
#tnclh-footer {border-bottom: 9px solid #fff !important;display: flex;max-width: 1200px;margin: auto;position: relative;padding-top: 5px;}
#tnclh-footer > a {position: relative;display: block;flex: 1 1 0;text-align: center;padding: 11px 0 0px 0;color: #313131;text-decoration:none;}
#tnclh-footer > span {display: block;width: 30px;}
#tnclh-footer span {display: block;}
.tnclh-footer-label {padding: 0px 2px 0 2px;font-size: 11px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: bold;line-height: 1.2;}
#tnclh-footer > a img {height: 30px;width:30px;}
#tnclh-footer-center {position: relative;background: transparent !important;}
#tnclh-footer-center .tnclh-footer-label {position: absolute;left: 50%;bottom: 2px;transform: translateX(-50%);}
#tnclh-footer-center .tnclh-footer-label > span {padding: 0px 8px;background-image: linear-gradient(92.83deg, #0E68C8 0, #02A4A5 100%);border-radius: 30px;color: white;display: inline-block;}
.tnclh-center-icon {left: 50%;position: absolute;transform: translateX(-50%);background-color: #ffc436;width: 50px;height: 50px;border-radius: 50%;top: -10px !important;text-align: center;box-shadow: rgb(0 0 0 / 15%) 0 -3px 10px 0px;border: 2px solid #fff;}
.tnclh-center-icon img{max-width: 20px;height: auto !important;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.tnclh-wave {width: 50px;height: 50px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;box-shadow: 0 0 0 0 #0E68C8;border: 2px solid transparent;transition: all .5s;animation: tnclh-zoom 1.3s infinite;}
@keyframes tnclh-zoom {0% {}70% {box-shadow: 0 0 0 15px transparent}100% {box-shadow: 0 0 0 0 transparent}}
@media only screen and (max-width: 850px) {#tnclh-footer-outer {display:block;}}

/* ============================================================
   MoMo QR Popup
============================================================ */
#tnclh-momo-modal {
    position: fixed;
    inset: 0;
    z-index: 9999999;
    display: none;
    align-items: center;
    justify-content: center;
}
#tnclh-momo-modal.tnclh-open { display: flex; }

.tnclh-momo-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.65);
}
.tnclh-momo-box {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
    background: #fff;
    border-radius: 16px;
    padding: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}
.tnclh-momo-title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 10px;
    text-align: center;
}
.tnclh-momo-box img {
    display: block;
    max-width: 86vw;
    max-height: 70vh;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.tnclh-momo-close {
    position: absolute;
    top: 8px; right: 10px;
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 34px;
    background: #f3f3f3;
}