/* =========================================================
 *  Button Contact NT — nguyentiep.vn
 *  6 giao diện (skin) dùng chung 1 cấu trúc HTML,
 *  đổi phong cách bằng class .bcnt-skin-1 ... .bcnt-skin-6
 *  đặt trên cả .bcnt-fab-wrap (PC) và .bcnt-dock (Mobile).
 * ========================================================= */

/* =========================================================
 *  A. CẤU TRÚC DÙNG CHUNG (không mang màu sắc riêng)
 * ========================================================= */
.bcnt-fab-wrap *, .bcnt-dock * { box-sizing: border-box; }
.bcnt-fab-wrap svg, .bcnt-dock svg { width: 100%; height: 100%; display: block; }

/* ----- Vùng chứa Speed-dial (PC) ----- */
.bcnt-fab-wrap {
    position: fixed;
    bottom: var(--bcnt-bottom, 24px);
    right: var(--bcnt-right, 24px);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    font-family: inherit;
}
.bcnt-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}
.bcnt-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 46px;
    padding-left: 18px;
    border-radius: 999px;
    text-decoration: none;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px) scale(.85);
    transform-origin: right center;
    transition: opacity .28s ease, transform .32s cubic-bezier(.34, 1.56, .64, 1), filter .2s, background .2s;
}
.bcnt-chip-label { padding-top: 1px; }
.bcnt-chip-ico {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    padding: 11px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: .2s;
}

/* ----- Nút chính (FAB) ----- */
.bcnt-fab {
    position: relative;
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s, filter .2s;
}
.bcnt-fab:hover { transform: scale(1.06); }
.bcnt-fab:active { transform: scale(.96); }
.bcnt-fab-ripple { position: absolute; inset: 0; border-radius: 50%; z-index: -1; }
.bcnt-fab-ico {
    position: absolute;
    width: 26px; height: 26px;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), opacity .25s;
}
.bcnt-fab-x    { transform: rotate(-90deg) scale(.4); opacity: 0; }
.bcnt-fab-open { transform: rotate(0deg) scale(1);    opacity: 1; }
.bcnt-open .bcnt-fab-open { transform: rotate(90deg) scale(.4); opacity: 0; }
.bcnt-open .bcnt-fab-x    { transform: rotate(0deg) scale(1);   opacity: 1; }

/* ----- Trạng thái mở: hiện chip xếp tầng (skin bung được) ----- */
.bcnt-open .bcnt-actions { pointer-events: auto; }
.bcnt-open .bcnt-chip { opacity: 1; transform: translateY(0) scale(1); }
.bcnt-open .bcnt-chip:nth-child(1) { transition-delay: .04s; }
.bcnt-open .bcnt-chip:nth-child(2) { transition-delay: .09s; }
.bcnt-open .bcnt-chip:nth-child(3) { transition-delay: .14s; }
.bcnt-open .bcnt-chip:nth-child(4) { transition-delay: .19s; }

/* ----- Nút lên đầu trang ----- */
.bcnt-top {
    width: 46px; height: 46px;
    padding: 12px;
    border: 0;
    cursor: pointer;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .3s, transform .3s, visibility .3s, filter .2s;
}
.bcnt-top.bcnt-show { opacity: 1; visibility: visible; transform: translateY(0); }
.bcnt-top:hover { filter: brightness(1.15); }

@media (max-width: 850px) { .bcnt-fab-wrap { display: none !important; } }

/* ----- Dock (Mobile) ----- */
.bcnt-dock {
    position: fixed;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-width: 480px;
    z-index: 99999;
    display: none;
    align-items: flex-end;
    justify-content: space-around;
    padding: 8px 6px;
    font-family: inherit;
}
.bcnt-dock-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    border: 0;
    background: transparent;
    text-decoration: none;
    color: #334155;
    cursor: pointer;
}
.bcnt-dock-ico { width: 24px; height: 24px; }
.bcnt-dock-label { font-size: 10.5px; font-weight: 600; line-height: 1.1; white-space: nowrap; }
.bcnt-dock-call {
    position: relative;
    width: 54px; height: 54px;
    margin-top: -26px;
    padding: 15px;
    border-radius: 50%;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #fff;
}
.bcnt-dock-call-ring { position: absolute; inset: -3px; border-radius: 50%; }
@media (max-width: 850px) { .bcnt-dock { display: flex; } }

/* ----- Keyframes dùng chung ----- */
@keyframes bcnt-breathe {
    0% { transform: scale(1); opacity: .55; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
}
@keyframes bcnt-ring {
    0% { transform: scale(1); opacity: .8; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes bcnt-glow {
    0% { transform: scale(1); opacity: .8; }
    70% { transform: scale(1.55); opacity: 0; }
    100% { opacity: 0; }
}

/* =========================================================
 *  SKIN 1 — AURORA (gradient tím, bung chip)
 * ========================================================= */
.bcnt-skin-1 .bcnt-fab {
    background: linear-gradient(135deg, var(--bcnt-primary), var(--bcnt-primary2));
    box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--bcnt-primary) 65%, transparent), 0 4px 10px rgba(0, 0, 0, .18);
}
.bcnt-skin-1 .bcnt-fab-ripple {
    background: linear-gradient(135deg, var(--bcnt-primary), var(--bcnt-primary2));
    animation: bcnt-breathe 2.4s ease-out infinite;
}
.bcnt-skin-1.bcnt-open .bcnt-fab-ripple { animation: none; opacity: 0; }
.bcnt-skin-1 .bcnt-chip { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .45); }
.bcnt-skin-1 .bcnt-chip-ico { background: rgba(255, 255, 255, .22); }
.bcnt-skin-1 .bcnt-call    { background: var(--bcnt-call); }
.bcnt-skin-1 .bcnt-zalo    { background: var(--bcnt-zalo); }
.bcnt-skin-1 .bcnt-mess    { background: var(--bcnt-mess); }
.bcnt-skin-1 .bcnt-contact { background: var(--bcnt-contact); }
.bcnt-skin-1 .bcnt-chip:hover { filter: brightness(1.08); transform: translateY(0) scale(1.03); }
.bcnt-skin-1 .bcnt-top { background: var(--bcnt-top); border-radius: 14px; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
/* dock */
.bcnt-skin-1.bcnt-dock {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-radius: 22px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .28), 0 0 0 1px rgba(0, 0, 0, .04);
}
.bcnt-skin-1 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-1 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-1 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-1 .bcnt-d-top .bcnt-dock-ico     { color: var(--bcnt-top); }
.bcnt-skin-1 .bcnt-dock-call {
    background: linear-gradient(135deg, var(--bcnt-primary), var(--bcnt-call));
    box-shadow: 0 8px 18px -4px color-mix(in srgb, var(--bcnt-call) 65%, transparent);
}
.bcnt-skin-1 .bcnt-dock-call-ring { border: 2px solid var(--bcnt-call); animation: bcnt-ring 1.5s ease-out infinite; }
.bcnt-skin-1 .bcnt-d-call .bcnt-dock-label { color: var(--bcnt-call); }

/* =========================================================
 *  SKIN 2 — NEON GLASS (nền tối, viền neon)
 * ========================================================= */
.bcnt-skin-2 .bcnt-fab {
    background: rgba(17, 24, 39, .85);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(255, 255, 255, .16);
    box-shadow: 0 0 18px -2px var(--bcnt-primary), 0 8px 20px rgba(0, 0, 0, .45);
}
.bcnt-skin-2 .bcnt-fab-ripple { box-shadow: 0 0 0 2px var(--bcnt-primary); animation: bcnt-glow 2s ease-out infinite; }
.bcnt-skin-2.bcnt-open .bcnt-fab-ripple { animation: none; opacity: 0; }
.bcnt-skin-2 .bcnt-chip {
    background: rgba(17, 24, 39, .78);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, .14);
    color: #f1f5f9;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
}
.bcnt-skin-2 .bcnt-chip-ico { background: rgba(255, 255, 255, .06); }
.bcnt-skin-2 .bcnt-call .bcnt-chip-ico    { color: var(--bcnt-call); }
.bcnt-skin-2 .bcnt-zalo .bcnt-chip-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-2 .bcnt-mess .bcnt-chip-ico    { color: var(--bcnt-mess); }
.bcnt-skin-2 .bcnt-contact .bcnt-chip-ico { color: var(--bcnt-contact); }
.bcnt-skin-2 .bcnt-call    { box-shadow: 0 0 14px -3px var(--bcnt-call), 0 6px 20px rgba(0, 0, 0, .45); }
.bcnt-skin-2 .bcnt-zalo    { box-shadow: 0 0 14px -3px var(--bcnt-zalo), 0 6px 20px rgba(0, 0, 0, .45); }
.bcnt-skin-2 .bcnt-mess    { box-shadow: 0 0 14px -3px var(--bcnt-mess), 0 6px 20px rgba(0, 0, 0, .45); }
.bcnt-skin-2 .bcnt-contact { box-shadow: 0 0 14px -3px var(--bcnt-contact), 0 6px 20px rgba(0, 0, 0, .45); }
.bcnt-skin-2 .bcnt-chip:hover { filter: brightness(1.15); }
.bcnt-skin-2 .bcnt-top {
    background: rgba(17, 24, 39, .85);
    border: 1.5px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    box-shadow: 0 0 14px -3px var(--bcnt-top);
}
/* dock */
.bcnt-skin-2.bcnt-dock {
    background: rgba(11, 16, 32, .82);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 22px;
    box-shadow: 0 0 24px -6px var(--bcnt-primary), 0 12px 30px rgba(0, 0, 0, .5);
}
.bcnt-skin-2 .bcnt-dock-item { color: #cbd5e1; }
.bcnt-skin-2 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-2 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-2 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-2 .bcnt-d-top .bcnt-dock-ico     { color: #cbd5e1; }
.bcnt-skin-2 .bcnt-dock-call {
    background: rgba(17, 24, 39, .92);
    border: 2px solid var(--bcnt-call);
    color: var(--bcnt-call);
    box-shadow: 0 0 18px -2px var(--bcnt-call);
}
.bcnt-skin-2 .bcnt-dock-call svg { filter: drop-shadow(0 0 4px var(--bcnt-call)); }
.bcnt-skin-2 .bcnt-dock-call-ring { border: 2px solid var(--bcnt-call); animation: bcnt-ring 1.5s ease-out infinite; }
.bcnt-skin-2 .bcnt-d-call .bcnt-dock-label { color: var(--bcnt-call); }

/* =========================================================
 *  SKIN 3 — MINIMAL (tối giản, viền mảnh, luôn hiện)
 * ========================================================= */
.bcnt-skin-3 .bcnt-fab { display: none; }
.bcnt-skin-3 .bcnt-actions { pointer-events: auto; gap: 10px; }
.bcnt-skin-3 .bcnt-chip {
    position: relative;
    opacity: 1;
    transform: none;
    height: auto;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.bcnt-skin-3 .bcnt-chip-label {
    position: absolute;
    right: 56px;
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    opacity: 0;
    pointer-events: none;
    background: #0f172a;
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4);
    transition: .2s;
}
.bcnt-skin-3 .bcnt-chip:hover .bcnt-chip-label { opacity: 1; transform: translateY(-50%) translateX(0); }
.bcnt-skin-3 .bcnt-chip-ico {
    width: 48px; height: 48px; flex-basis: 48px;
    padding: 13px;
    background: #fff;
    border: 1.6px solid #e2e8f0;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}
.bcnt-skin-3 .bcnt-call:hover .bcnt-chip-ico    { border-color: var(--bcnt-call); color: var(--bcnt-call); }
.bcnt-skin-3 .bcnt-zalo:hover .bcnt-chip-ico    { border-color: var(--bcnt-zalo); color: var(--bcnt-zalo); }
.bcnt-skin-3 .bcnt-mess:hover .bcnt-chip-ico    { border-color: var(--bcnt-mess); color: var(--bcnt-mess); }
.bcnt-skin-3 .bcnt-contact:hover .bcnt-chip-ico { border-color: var(--bcnt-contact); color: var(--bcnt-contact); }
.bcnt-skin-3 .bcnt-top {
    background: #fff;
    border: 1.6px solid #e2e8f0;
    color: #0f172a;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}
/* dock */
.bcnt-skin-3.bcnt-dock {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .2), 0 0 0 1px #eef0f4;
}
.bcnt-skin-3 .bcnt-dock-item { color: #64748b; }
.bcnt-skin-3 .bcnt-dock-ico  { color: #475569; }
.bcnt-skin-3 .bcnt-dock-call {
    width: 46px; height: 46px;
    margin-top: -18px;
    padding: 13px;
    background: #0f172a;
    border: 2px solid #fff;
    box-shadow: 0 6px 14px rgba(15, 23, 42, .25);
}
.bcnt-skin-3 .bcnt-dock-call-ring { display: none; }

/* =========================================================
 *  SKIN 4 — NEUMORPHISM (mềm, bóng nổi pastel, bung chip)
 * ========================================================= */
.bcnt-skin-4 .bcnt-fab {
    background: #e6e9ef;
    color: var(--bcnt-primary);
    box-shadow: 6px 6px 14px #c3c9d6, -6px -6px 14px #ffffff;
}
.bcnt-skin-4 .bcnt-fab:active { box-shadow: inset 4px 4px 8px #c3c9d6, inset -4px -4px 8px #fff; }
.bcnt-skin-4 .bcnt-fab-ripple { display: none; }
.bcnt-skin-4 .bcnt-chip {
    background: #e6e9ef;
    color: #475569;
    box-shadow: 5px 5px 12px #c8cedb, -5px -5px 12px #ffffff;
}
.bcnt-skin-4 .bcnt-chip-ico { background: transparent; box-shadow: inset 2px 2px 5px #c8cedb, inset -2px -2px 5px #ffffff; }
.bcnt-skin-4 .bcnt-call .bcnt-chip-ico    { color: var(--bcnt-call); }
.bcnt-skin-4 .bcnt-zalo .bcnt-chip-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-4 .bcnt-mess .bcnt-chip-ico    { color: var(--bcnt-mess); }
.bcnt-skin-4 .bcnt-contact .bcnt-chip-ico { color: var(--bcnt-contact); }
.bcnt-skin-4 .bcnt-chip:hover { filter: brightness(1.02); }
.bcnt-skin-4 .bcnt-top {
    background: #e6e9ef;
    color: var(--bcnt-top);
    border-radius: 16px;
    box-shadow: 5px 5px 12px #c8cedb, -5px -5px 12px #ffffff;
}
/* dock */
.bcnt-skin-4.bcnt-dock {
    background: #e6e9ef;
    border-radius: 22px;
    box-shadow: 6px 6px 16px #c8cedb, -6px -6px 16px #ffffff;
}
.bcnt-skin-4 .bcnt-dock-item { color: #64748b; }
.bcnt-skin-4 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-4 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-4 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-4 .bcnt-d-top .bcnt-dock-ico     { color: var(--bcnt-top); }
.bcnt-skin-4 .bcnt-dock-call {
    background: #e6e9ef;
    color: var(--bcnt-call);
    border: 0;
    box-shadow: 5px 5px 12px #c8cedb, -5px -5px 12px #ffffff;
}
.bcnt-skin-4 .bcnt-dock-call-ring { display: none; }

/* =========================================================
 *  SKIN 5 — BOLD (chunky sticker, luôn hiện)
 * ========================================================= */
.bcnt-skin-5 .bcnt-fab { display: none; }
.bcnt-skin-5 .bcnt-actions { pointer-events: auto; gap: 14px; }
.bcnt-skin-5 .bcnt-chip {
    opacity: 1;
    transform: none;
    height: 56px;
    border-radius: 18px;
    padding-left: 20px;
    gap: 14px;
    font-size: 15px;
    font-weight: 800;
    border: 3px solid rgba(255, 255, 255, .35);
    box-shadow: 0 6px 0 rgba(0, 0, 0, .12);
}
.bcnt-skin-5 .bcnt-chip-ico { width: 44px; height: 44px; flex-basis: 44px; border-radius: 14px; background: rgba(255, 255, 255, .25); }
.bcnt-skin-5 .bcnt-call    { background: var(--bcnt-call); }
.bcnt-skin-5 .bcnt-zalo    { background: var(--bcnt-zalo); }
.bcnt-skin-5 .bcnt-mess    { background: var(--bcnt-mess); }
.bcnt-skin-5 .bcnt-contact { background: var(--bcnt-contact); }
.bcnt-skin-5 .bcnt-chip:hover { transform: translateY(-3px); box-shadow: 0 9px 0 rgba(0, 0, 0, .12); }
.bcnt-skin-5 .bcnt-top {
    background: var(--bcnt-top);
    border-radius: 16px;
    border: 3px solid rgba(255, 255, 255, .35);
    box-shadow: 0 5px 0 rgba(0, 0, 0, .15);
}
/* dock */
.bcnt-skin-5.bcnt-dock {
    background: #fff;
    border: 3px solid #f1f5f9;
    border-radius: 24px;
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, .3);
}
.bcnt-skin-5 .bcnt-dock-label { font-weight: 800; font-size: 11px; }
.bcnt-skin-5 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-5 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-5 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-5 .bcnt-d-top .bcnt-dock-ico     { color: var(--bcnt-top); }
.bcnt-skin-5 .bcnt-dock-call {
    width: 60px; height: 60px;
    margin-top: -30px;
    border-radius: 20px;
    background: var(--bcnt-call);
    border: 4px solid #fff;
    box-shadow: 0 8px 0 rgba(0, 0, 0, .12);
}
.bcnt-skin-5 .bcnt-dock-call-ring { border-radius: 20px; inset: -4px; border: 3px solid var(--bcnt-call); animation: bcnt-ring 1.6s ease-out infinite; }
.bcnt-skin-5 .bcnt-d-call .bcnt-dock-label { color: var(--bcnt-call); }

/* =========================================================
 *  SKIN 6 — CORPORATE (thẻ liên hệ doanh nghiệp, luôn hiện)
 * ========================================================= */
.bcnt-skin-6 .bcnt-fab { display: none; }
.bcnt-skin-6 .bcnt-actions {
    pointer-events: auto;
    gap: 0;
    width: 224px;
    align-items: stretch;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 14px 34px -12px rgba(2, 6, 23, .3), 0 0 0 1px rgba(2, 6, 23, .06);
}
.bcnt-skin-6 .bcnt-actions::before {
    content: "Liên hệ ngay";
    display: block;
    background: linear-gradient(135deg, var(--bcnt-primary), var(--bcnt-primary2));
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    padding: 12px 16px;
}
.bcnt-skin-6 .bcnt-chip {
    opacity: 1;
    transform: none;
    width: 100%;
    height: auto;
    border-radius: 0;
    padding: 12px 16px;
    gap: 12px;
    justify-content: flex-start;
    background: #fff;
    color: #1e293b;
    box-shadow: none;
    border-bottom: 1px solid #f1f5f9;
}
.bcnt-skin-6 .bcnt-chip:last-child { border-bottom: 0; }
.bcnt-skin-6 .bcnt-chip-ico { order: -1; width: 34px; height: 34px; flex-basis: 34px; padding: 8px; border-radius: 9px; color: #fff; }
.bcnt-skin-6 .bcnt-call .bcnt-chip-ico    { background: var(--bcnt-call); }
.bcnt-skin-6 .bcnt-zalo .bcnt-chip-ico    { background: var(--bcnt-zalo); }
.bcnt-skin-6 .bcnt-mess .bcnt-chip-ico    { background: var(--bcnt-mess); }
.bcnt-skin-6 .bcnt-contact .bcnt-chip-ico { background: var(--bcnt-contact); }
.bcnt-skin-6 .bcnt-chip:hover { background: #f8fafc; }
.bcnt-skin-6 .bcnt-top {
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    box-shadow: 0 6px 16px -6px rgba(2, 6, 23, .2);
}
/* dock: thanh full-width truyền thống */
.bcnt-skin-6.bcnt-dock {
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: 0;
    padding: 6px 4px 8px;
    background: #fff;
    border-top: 3px solid var(--bcnt-primary);
    box-shadow: 0 -4px 20px rgba(2, 6, 23, .12);
}
.bcnt-skin-6 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-6 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-6 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-6 .bcnt-d-top .bcnt-dock-ico     { color: var(--bcnt-top); }
.bcnt-skin-6 .bcnt-dock-call {
    background: linear-gradient(135deg, var(--bcnt-primary), var(--bcnt-primary2));
    box-shadow: 0 6px 16px -4px rgba(2, 6, 23, .3);
}
.bcnt-skin-6 .bcnt-dock-call-ring { border: 2px solid var(--bcnt-primary); animation: bcnt-ring 1.6s ease-out infinite; }

/* ----- Keyframes cho nhóm skin tương lai ----- */
@keyframes bcnt-holo   { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
@keyframes bcnt-aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* =========================================================
 *  SKIN 7 — HOLOGRAPHIC (ánh kim cầu vồng chuyển động)
 * ========================================================= */
.bcnt-skin-7 .bcnt-fab {
    background: linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6, #facc15, #4ade80, #22d3ee);
    background-size: 300% 100%;
    animation: bcnt-holo 6s linear infinite;
    color: #0f172a;
    box-shadow: 0 8px 26px -6px rgba(167, 139, 250, .6), 0 4px 10px rgba(0, 0, 0, .15);
}
.bcnt-skin-7 .bcnt-fab-ripple {
    background: linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6, #4ade80);
    background-size: 300% 100%;
    animation: bcnt-holo 6s linear infinite, bcnt-breathe 2.6s ease-out infinite;
}
.bcnt-skin-7.bcnt-open .bcnt-fab-ripple { animation: none; opacity: 0; }
.bcnt-skin-7 .bcnt-chip {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: #0f172a;
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: 0 8px 22px -10px rgba(80, 60, 160, .5);
}
.bcnt-skin-7 .bcnt-chip-ico {
    background: linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6, #facc15, #4ade80, #22d3ee);
    background-size: 300% 100%;
    animation: bcnt-holo 6s linear infinite;
    color: #fff;
}
.bcnt-skin-7 .bcnt-chip:hover { filter: brightness(1.03); box-shadow: 0 10px 26px -8px rgba(167, 139, 250, .6); }
.bcnt-skin-7 .bcnt-top {
    background: linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6, #4ade80);
    background-size: 300% 100%;
    animation: bcnt-holo 6s linear infinite;
    color: #0f172a; border-radius: 14px;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .3);
}
.bcnt-skin-7.bcnt-dock {
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 22px;
    box-shadow: 0 12px 30px -8px rgba(120, 80, 200, .35), 0 0 0 1px rgba(255, 255, 255, .5);
}
.bcnt-skin-7 .bcnt-dock-item { color: #475569; }
.bcnt-skin-7 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-7 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-7 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-7 .bcnt-d-top .bcnt-dock-ico     { color: #a78bfa; }
.bcnt-skin-7 .bcnt-dock-call {
    background: linear-gradient(120deg, #22d3ee, #a78bfa, #f472b6, #facc15, #4ade80, #22d3ee);
    background-size: 300% 100%;
    animation: bcnt-holo 6s linear infinite;
    color: #0f172a; border: 3px solid #fff;
    box-shadow: 0 8px 20px -4px rgba(167, 139, 250, .6);
}
.bcnt-skin-7 .bcnt-dock-call-ring { border: 2px solid #a78bfa; animation: bcnt-ring 1.6s ease-out infinite; }

/* =========================================================
 *  SKIN 8 — LIQUID GLASS (kính lỏng trong suốt, bóng nhẹ)
 * ========================================================= */
.bcnt-skin-8 .bcnt-fab {
    background: linear-gradient(135deg, color-mix(in srgb, var(--bcnt-primary) 55%, #fff), color-mix(in srgb, var(--bcnt-primary2) 45%, #fff));
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .7);
    color: #fff;
    box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--bcnt-primary) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .8), inset 0 -6px 12px rgba(255, 255, 255, .15);
}
.bcnt-skin-8 .bcnt-fab-ripple { background: color-mix(in srgb, var(--bcnt-primary) 40%, #fff); animation: bcnt-breathe 2.6s ease-out infinite; }
.bcnt-skin-8.bcnt-open .bcnt-fab-ripple { animation: none; opacity: 0; }
.bcnt-skin-8 .bcnt-chip {
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .75);
    box-shadow: 0 8px 22px -10px rgba(30, 41, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
    color: #0f172a;
}
.bcnt-skin-8 .bcnt-chip-ico { color: #fff; }
.bcnt-skin-8 .bcnt-call .bcnt-chip-ico    { background: var(--bcnt-call); }
.bcnt-skin-8 .bcnt-zalo .bcnt-chip-ico    { background: var(--bcnt-zalo); }
.bcnt-skin-8 .bcnt-mess .bcnt-chip-ico    { background: var(--bcnt-mess); }
.bcnt-skin-8 .bcnt-contact .bcnt-chip-ico { background: var(--bcnt-contact); }
.bcnt-skin-8 .bcnt-chip:hover { background: rgba(255, 255, 255, .72); }
.bcnt-skin-8 .bcnt-top {
    background: rgba(255, 255, 255, .55);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .75);
    color: #0f172a; border-radius: 16px;
    box-shadow: 0 8px 22px -10px rgba(30, 41, 59, .35), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.bcnt-skin-8.bcnt-dock {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 26px;
    box-shadow: 0 14px 34px -10px rgba(30, 41, 59, .3), inset 0 1px 0 rgba(255, 255, 255, .85);
}
.bcnt-skin-8 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-8 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-8 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-8 .bcnt-d-top .bcnt-dock-ico     { color: var(--bcnt-top); }
.bcnt-skin-8 .bcnt-dock-call {
    background: linear-gradient(135deg, var(--bcnt-primary), var(--bcnt-primary2));
    border: 3px solid rgba(255, 255, 255, .9);
    box-shadow: 0 8px 20px -4px color-mix(in srgb, var(--bcnt-primary) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.bcnt-skin-8 .bcnt-dock-call-ring { border: 2px solid rgba(255, 255, 255, .7); animation: bcnt-ring 1.8s ease-out infinite; }

/* =========================================================
 *  SKIN 9 — CYBER HUD (góc cắt, neon cyan sci-fi)
 * ========================================================= */
.bcnt-skin-9 .bcnt-fab {
    border-radius: 10px;
    background: rgba(3, 7, 18, .92);
    border: 1.5px solid #22d3ee;
    color: #22d3ee;
    box-shadow: 0 0 16px -2px #22d3ee, 0 6px 18px rgba(0, 0, 0, .5);
}
.bcnt-skin-9 .bcnt-fab::before,
.bcnt-skin-9 .bcnt-fab::after {
    content: ""; position: absolute; width: 9px; height: 9px; border: 2px solid #a3e635;
}
.bcnt-skin-9 .bcnt-fab::before { top: 5px; left: 5px; border-right: 0; border-bottom: 0; }
.bcnt-skin-9 .bcnt-fab::after  { bottom: 5px; right: 5px; border-left: 0; border-top: 0; }
.bcnt-skin-9 .bcnt-fab-ripple { border-radius: 10px; box-shadow: 0 0 0 1.5px #22d3ee; animation: bcnt-glow 2s ease-out infinite; }
.bcnt-skin-9.bcnt-open .bcnt-fab-ripple { animation: none; opacity: 0; }
.bcnt-skin-9 .bcnt-chip {
    border-radius: 8px;
    background: rgba(3, 7, 18, .86);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(34, 211, 238, .55);
    border-left: 3px solid #22d3ee;
    color: #e0f2fe;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 14px -4px #22d3ee, 0 6px 16px rgba(0, 0, 0, .5);
}
.bcnt-skin-9 .bcnt-chip-ico { border-radius: 8px; background: rgba(34, 211, 238, .12); }
.bcnt-skin-9 .bcnt-call .bcnt-chip-ico    { color: var(--bcnt-call); }
.bcnt-skin-9 .bcnt-zalo .bcnt-chip-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-9 .bcnt-mess .bcnt-chip-ico    { color: var(--bcnt-mess); }
.bcnt-skin-9 .bcnt-contact .bcnt-chip-ico { color: var(--bcnt-contact); }
.bcnt-skin-9 .bcnt-chip:hover { box-shadow: 0 0 20px -2px #22d3ee, 0 6px 16px rgba(0, 0, 0, .5); }
.bcnt-skin-9 .bcnt-top {
    border-radius: 10px;
    background: rgba(3, 7, 18, .92);
    border: 1.5px solid #22d3ee;
    color: #22d3ee;
    box-shadow: 0 0 16px -3px #22d3ee;
}
.bcnt-skin-9.bcnt-dock {
    background: rgba(3, 7, 18, .9);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(34, 211, 238, .4);
    border-top: 2px solid #22d3ee;
    border-radius: 12px;
    box-shadow: 0 0 24px -6px #22d3ee, 0 12px 30px rgba(0, 0, 0, .55);
}
.bcnt-skin-9 .bcnt-dock-item { color: #7dd3fc; }
.bcnt-skin-9 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-9 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-9 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-9 .bcnt-d-top .bcnt-dock-ico     { color: #7dd3fc; }
.bcnt-skin-9 .bcnt-dock-call {
    border-radius: 12px;
    background: rgba(3, 7, 18, .95);
    border: 2px solid #22d3ee;
    color: #22d3ee;
    box-shadow: 0 0 18px -2px #22d3ee;
}
.bcnt-skin-9 .bcnt-dock-call svg { filter: drop-shadow(0 0 4px #22d3ee); }
.bcnt-skin-9 .bcnt-dock-call-ring { border-radius: 12px; border: 2px solid #22d3ee; animation: bcnt-ring 1.6s ease-out infinite; }
.bcnt-skin-9 .bcnt-d-call .bcnt-dock-label { color: #22d3ee; }

/* =========================================================
 *  SKIN 10 — AURORA FLOW (gradient cực quang chảy động)
 * ========================================================= */
.bcnt-skin-10 .bcnt-fab {
    background: linear-gradient(120deg, #0ea5e9, #8b5cf6, #22c55e, #0ea5e9);
    background-size: 220% 220%;
    animation: bcnt-aurora 7s ease-in-out infinite;
    color: #fff;
    box-shadow: 0 8px 26px -6px rgba(139, 92, 246, .55), 0 4px 10px rgba(0, 0, 0, .18);
}
.bcnt-skin-10 .bcnt-fab-ripple {
    background: linear-gradient(120deg, #0ea5e9, #8b5cf6, #22c55e);
    background-size: 220% 220%;
    animation: bcnt-aurora 7s ease-in-out infinite, bcnt-breathe 2.6s ease-out infinite;
}
.bcnt-skin-10.bcnt-open .bcnt-fab-ripple { animation: none; opacity: 0; }
.bcnt-skin-10 .bcnt-chip {
    background: rgba(15, 23, 42, .72);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .14);
    color: #f1f5f9;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .5);
}
.bcnt-skin-10 .bcnt-chip-ico {
    background: linear-gradient(120deg, #0ea5e9, #8b5cf6, #22c55e, #0ea5e9);
    background-size: 220% 220%;
    animation: bcnt-aurora 7s ease-in-out infinite;
    color: #fff;
}
.bcnt-skin-10 .bcnt-chip:hover { filter: brightness(1.1); }
.bcnt-skin-10 .bcnt-top {
    background: linear-gradient(120deg, #0ea5e9, #8b5cf6, #22c55e, #0ea5e9);
    background-size: 220% 220%;
    animation: bcnt-aurora 7s ease-in-out infinite;
    color: #fff; border-radius: 16px;
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4);
}
.bcnt-skin-10.bcnt-dock {
    background: rgba(15, 23, 42, .8);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    box-shadow: 0 12px 30px -8px rgba(139, 92, 246, .4), 0 0 0 1px rgba(255, 255, 255, .05);
}
.bcnt-skin-10 .bcnt-dock-item { color: #cbd5e1; }
.bcnt-skin-10 .bcnt-d-zalo .bcnt-dock-ico    { color: var(--bcnt-zalo); }
.bcnt-skin-10 .bcnt-d-mess .bcnt-dock-ico    { color: var(--bcnt-mess); }
.bcnt-skin-10 .bcnt-d-contact .bcnt-dock-ico { color: var(--bcnt-contact); }
.bcnt-skin-10 .bcnt-d-top .bcnt-dock-ico     { color: #a5b4fc; }
.bcnt-skin-10 .bcnt-dock-call {
    background: linear-gradient(120deg, #0ea5e9, #8b5cf6, #22c55e, #0ea5e9);
    background-size: 220% 220%;
    animation: bcnt-aurora 7s ease-in-out infinite;
    border: 3px solid rgba(255, 255, 255, .85);
    box-shadow: 0 8px 20px -4px rgba(139, 92, 246, .55);
}
.bcnt-skin-10 .bcnt-dock-call-ring { border: 2px solid #8b5cf6; animation: bcnt-ring 1.7s ease-out infinite; }
.bcnt-skin-10 .bcnt-d-call .bcnt-dock-label { color: #a5b4fc; }

/* =========================================================
 *  B. GIẢM CHUYỂN ĐỘNG + FALLBACK
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .bcnt-fab-ripple, .bcnt-dock-call-ring { animation: none !important; }
    .bcnt-fab, .bcnt-chip-ico, .bcnt-top, .bcnt-dock-call { animation: none !important; }
    .bcnt-fab-wrap *, .bcnt-dock * { transition-duration: .01ms !important; }
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .bcnt-skin-1 .bcnt-fab       { box-shadow: 0 10px 24px -6px rgba(79, 70, 229, .5), 0 4px 10px rgba(0, 0, 0, .18); }
    .bcnt-skin-1 .bcnt-dock-call { box-shadow: 0 8px 18px -4px rgba(34, 197, 94, .5); }
    .bcnt-skin-8 .bcnt-fab       { background: linear-gradient(135deg, #a78bfa, #818cf8); box-shadow: 0 8px 24px -6px rgba(124, 58, 237, .4), inset 0 1px 0 rgba(255, 255, 255, .8); }
    .bcnt-skin-8 .bcnt-fab-ripple{ background: #c4b5fd; }
    .bcnt-skin-8 .bcnt-dock-call { box-shadow: 0 8px 20px -4px rgba(79, 70, 229, .4), inset 0 1px 0 rgba(255, 255, 255, .6); }
}