/* =====================================================================
   NÚT GỌI NỔI — đồng bộ màu với website

   Plugin VinaSite Call Button vẽ sẵn mỗi nút bằng một ảnh SVG có màu thương
   hiệu bên trong (xanh lá cho điện thoại, xanh dương cho Zalo). Không thể đổi
   màu ảnh đó bằng CSS, nên ở đây giấu ảnh đi và vẽ lại biểu tượng bằng
   `mask` — vòng tròn lấy màu nền của thẻ, nét biểu tượng lấy màu chữ.

   Đánh đổi: bỏ màu thương hiệu thì mất một phần tín hiệu nhận biết quen thuộc
   của Zalo. Muốn quay lại màu gốc thì bỏ tệp này khỏi functions.php.
   ===================================================================== */

#vinasite-call-bottom .box-support { display: grid; gap: 14px; }
#vinasite-call-bottom .box-support a.vcb-btn {
    width: 52px; height: 52px; margin: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--tdc-navy);
    box-shadow: 0 8px 22px rgba(1, 3, 54, .34);
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#vinasite-call-bottom .box-support a.vcb-btn img { display: none; }

#vinasite-call-bottom .box-support a.vcb-btn::before {
    content: ''; display: block;
    width: 25px; height: 25px;
    background: var(--tdc-gold);
    -webkit-mask: var(--vcb-glyph) center / contain no-repeat;
            mask: var(--vcb-glyph) center / contain no-repeat;
    transition: background-color .2s ease;
}

#vinasite-call-bottom .box-support a.vcb-btn:hover {
    background: var(--tdc-gold);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(1, 3, 54, .42);
}
#vinasite-call-bottom .box-support a.vcb-btn:hover::before { background: var(--tdc-foot); }
#vinasite-call-bottom .box-support a.vcb-btn:focus-visible {
    outline: 3px solid var(--tdc-gold); outline-offset: 3px;
}

/* Nút gọi là hành động chính nên đảo màu cho nổi hơn các nút còn lại */
#vinasite-call-bottom .box-support a.vcb-btn--phone { background: var(--tdc-gold); }
#vinasite-call-bottom .box-support a.vcb-btn--phone::before { background: var(--tdc-foot); }
#vinasite-call-bottom .box-support a.vcb-btn--phone:hover { background: var(--tdc-navy); }
#vinasite-call-bottom .box-support a.vcb-btn--phone:hover::before { background: var(--tdc-gold); }

/* ---------- Biểu tượng ----------
   QUAN TRỌNG: `mask` chỉ đọc kênh alpha, không đọc màu. Chi tiết bên trong
   vẽ bằng màu trắng vẫn là vùng đặc nên không hiện ra. Muốn khoét lỗ thì phải
   gộp vào CÙNG một <path> và đặt fill-rule="evenodd" — mọi hình con nằm trong
   hình mẹ sẽ thành lỗ thủng.
   --------------------------------------------------------------------- */
.vcb-btn--phone {
    --vcb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.15 6.59 6.59l2.2-2.2c.28-.28.68-.36 1.02-.25 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}
/* Bong chat có ba chấm khoét lỗ */
.vcb-btn--zalo {
    --vcb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-9.5L6 22v-4H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4 6.6a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zm4 0a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8zm4 0a1.4 1.4 0 1 0 0 2.8 1.4 1.4 0 0 0 0-2.8z'/%3E%3C/svg%3E");
}
/* Bong chat có ngôi sao khoét lỗ — kênh chính thức */
.vcb-btn--zalo-oa {
    --vcb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-9.5L6 22v-4H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm8 3.3l-1.2 2.44-2.69.39 1.95 1.9-.46 2.68L12 11.44l2.4 1.27-.46-2.68 1.95-1.9-2.69-.39z'/%3E%3C/svg%3E");
}
/* Vòng vàng mảnh để phân biệt ngay với nút Zalo thường */
#vinasite-call-bottom .box-support a.vcb-btn--zalo-oa {
    box-shadow: inset 0 0 0 2px var(--tdc-gold), 0 8px 22px rgba(1, 3, 54, .34);
}
.vcb-btn--messenger, .vcb-btn--email {
    --vcb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 2.9v1.35l8 4.76 8-4.76V6.9l-8 4.76z'/%3E%3C/svg%3E");
}
.vcb-btn--map {
    --vcb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7zm0 4.5A2.5 2.5 0 1 0 12 11.5 2.5 2.5 0 0 0 12 6.5z'/%3E%3C/svg%3E");
}
.vcb-btn--whatsapp {
    --vcb-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M4 2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-9.5L6 22v-4H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm4.6 5.2a1.3 1.3 0 1 0 0 2.6h6.8a1.3 1.3 0 1 0 0-2.6z'/%3E%3C/svg%3E");
}

/* ---------- Thanh liên hệ cố định trên mobile ----------
   Trước đó biểu tượng "Gọi ngay" dùng đỏ #C62828 và "Nhận tư vấn" dùng xanh —
   hai màu ngoài bảng màu của website. Nay nút gọi là hành động chính nên tô
   nền navy chữ trắng, nút còn lại giữ nền trắng chữ navy.
   --------------------------------------------------------------------- */
.tdc-callbar__btn--call { background: var(--tdc-navy); color: #fff; }
.tdc-callbar__btn--call svg { color: var(--tdc-gold); }
.tdc-callbar__btn--cta { color: var(--tdc-navy); }
.tdc-callbar__btn--cta svg { color: var(--tdc-navy); }

/* ---------- Chú thích khi rê chuột ---------- */
#vinasite-call-bottom .box-support .aml-tooltiptext {
    background-image: none;
    background: var(--tdc-foot);
    color: #fff;
    font-weight: 600;
    border-radius: 6px;
    padding: 9px 12px;
    right: 118%;
    box-shadow: 0 6px 18px rgba(1, 3, 54, .3);
}

@media (max-width: 600px) {
    #vinasite-call-bottom .box-support { gap: 10px; }
    #vinasite-call-bottom .box-support a.vcb-btn { width: 44px; height: 44px; }
    #vinasite-call-bottom .box-support a.vcb-btn::before { width: 21px; height: 21px; }

    /* Trên điện thoại thanh cố định dưới cùng đã có "Gọi ngay", nên nút gọi nổi
       là thừa. Bỏ nó đi vừa hết trùng hành động, vừa rút ngắn cột nút nổi để
       bớt che nội dung. */
    #vinasite-call-bottom .box-support a.vcb-btn--phone { display: none; }
}