/*
 * Nút liên hệ (Saleon) — nút chat nổi 6 skin + thanh liên hệ mobile 5 skin.
 * Tuỳ chỉnh qua biến CSS đặt inline trên #sln-ct / #sln-bar:
 *   --sln-x, --sln-y (cách lề/đáy), --sln-op (mờ), --sln-r (bo góc), --sln-color (nút chính), --sln-icon (nền icon),
 *   --sln-bar-accent, --sln-bar-main, --sln-bar-main-text, --sln-bar-bg, --sln-bar-chat-bg, --sln-bar-chat-text.
 * Bố cục/hiệu ứng kế thừa từ Foxtool (GPL), đổi tên lớp, gom về biến.
 */

.sln-ct, .sln-ct a, .sln-bar, .sln-bar a {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    text-decoration: none;
    box-sizing: border-box;
}
.sln-ct svg, .sln-bar svg { display: block; }

/* ── Màu kênh ─────────────────────────────────────────────────────────── */
.sln-ct__item--phone svg     { background: var(--sln-icon, #4CAF50); }
.sln-ct__item--sms svg       { background: var(--sln-icon, #e56100); }
.sln-ct__item--messenger svg { background: var(--sln-icon, #0082FF); }
.sln-ct__item--telegram svg  { background: var(--sln-icon, #29A9EB); }
.sln-ct__item--zalo svg      { background: var(--sln-icon, #0068FF); }
.sln-ct__item--whatsapp svg  { background: var(--sln-icon, #29A71A); }
.sln-ct__item--viber svg     { background: var(--sln-icon, #6f3faa); }
.sln-ct__item--skype svg     { background: var(--sln-icon, #00a9f0); }
.sln-ct__item--tiktok svg    { background: var(--sln-icon, #222222); }
.sln-ct__item--mail svg      { background: var(--sln-icon, #2196F3); }
.sln-ct__item--maps svg      { background: var(--sln-icon, #8a56cd); }
.sln-ct__item--custom svg    { background: var(--sln-icon, #555555); }
.sln-ct__item--custom svg { padding: 10px; }
.sln-ct__item--custom svg path { fill: #fff; }

/* ── Gốc nút chat ─────────────────────────────────────────────────────── */
.sln-ct {
    position: fixed;
    z-index: 10150;
    left: var(--sln-x, 10px);
    bottom: var(--sln-y, 10px);
    transition: transform .3s ease, opacity .3s ease;
}
.sln-ct.is-right { left: auto; right: var(--sln-x, 10px); }
.sln-ct.is-hidden { transform: translateX(-350%); }
.sln-ct.is-right.is-hidden { transform: translateX(350%); }
.sln-ct__item { display: block; position: relative; line-height: 0; }
.sln-ct__item i { display: block; line-height: 0; }

/* ── Skin bubble: nút tròn + bảng bung ────────────────────────────────── */
.sln-ct--bubble { text-align: left; }
.sln-ct--bubble.is-right { text-align: right; }
.sln-ct__main {
    width: 50px; height: 50px; padding: 0; margin: 0; border: 0; line-height: 0; cursor: pointer;
    border-radius: 100%; background: var(--sln-color, #4caf50); color: #fff;
    box-shadow: 0 0 0 0 var(--sln-color, #4caf50);
    animation: sln-pulse .9s infinite; transform: translate3d(0, 0, 0) scale(.9);
    display: inline-flex; align-items: center; justify-content: center; opacity: var(--sln-op, 1);
}
.sln-ct__main svg { width: 45px; height: 45px; }
.sln-ct__main svg path { fill: #fff; }
.sln-ct__main-close { display: none; }
.sln-ct__main[aria-expanded="true"] .sln-ct__main-icon { display: none; }
.sln-ct__main[aria-expanded="true"] .sln-ct__main-close { display: block; }
.sln-ct__main[aria-expanded="true"] .sln-ct__main-close svg { width: 33px; height: 33px; }
@keyframes sln-pulse { 100% { box-shadow: 0 0 0 20px rgba(0, 210, 255, 0); } }
.sln-ct__backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .41); }
.sln-ct__backdrop[hidden], .sln-ct__panel[hidden], .sln-bar__popup[hidden] { display: none; }
.sln-ct__panel {
    position: relative; background: #fff; border-radius: 10px; padding: 15px 5px; margin-bottom: 25px; min-width: 230px;
    text-align: left; animation: sln-fade .4s ease forwards; display: inline-block;
}
.sln-ct__panel::after {
    content: ''; position: absolute; left: 0; bottom: -10px; margin-left: 10px; width: 0; height: 0;
    border-top: 15px solid #fff; border-left: 15px solid transparent; border-right: 15px solid transparent;
}
.sln-ct.is-right .sln-ct__panel::after { left: auto; right: 0; margin-right: 10px; }
@keyframes sln-fade { from { opacity: .3; } to { opacity: 1; } }
.sln-ct__scroll { max-height: 300px; overflow: auto; padding: 0 10px; scrollbar-width: thin; scrollbar-color: #eee transparent; }
.sln-ct__scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.sln-ct__scroll::-webkit-scrollbar-thumb { background: #eee; border-radius: 2px; }
.sln-ct__scroll .sln-ct__item { display: flex; align-items: center; color: #444; padding: 5px; line-height: 1.3; border-radius: 7px; }
.sln-ct__scroll .sln-ct__item:hover { background: #eee; opacity: .85; }
.sln-ct__scroll .sln-ct__item + .sln-ct__item { margin-top: 5px; }
.sln-ct__scroll .sln-ct__item svg { width: 40px; height: 40px; margin-right: 15px; border-radius: var(--sln-r, 100%); }

/* ── Skin dọc chung (total/effective/leaves/floating) ─────────────────── */
.sln-ct--total, .sln-ct--effective, .sln-ct--leaves, .sln-ct--floating { width: 45px; }
.sln-ct--total .sln-ct__item span, .sln-ct--effective .sln-ct__item span, .sln-ct--leaves .sln-ct__item span, .sln-ct--floating .sln-ct__item span { display: none; }
.sln-ct--total .sln-ct__item:hover span, .sln-ct--leaves .sln-ct__item:hover span, .sln-ct--floating .sln-ct__item:hover span {
    display: flex; align-items: center; justify-content: center; position: absolute; z-index: 100; top: 0;
    left: 55px; height: 33px; margin-top: 7px; padding: 0 16px; font-size: 14px; line-height: 1; border-radius: 30px;
    color: #fff; background: rgba(17, 17, 17, .58); width: max-content; white-space: nowrap;
}
.sln-ct.is-right .sln-ct__item:hover span { left: auto; right: 55px; }
.sln-ct--total svg, .sln-ct--effective svg, .sln-ct--leaves svg, .sln-ct--floating svg { width: 45px; height: 45px; margin: auto; opacity: var(--sln-op, 1); }

.sln-ct--total .sln-ct__item + .sln-ct__item, .sln-ct--leaves .sln-ct__item + .sln-ct__item { margin-top: 15px; }
.sln-ct--total svg { border-radius: var(--sln-r, 100%); }
/* Viền màu toả ra rồi mờ dần (đúng nguyên bản Foxtool: mỗi kênh bắt đầu từ viền 0px màu
   thương hiệu, animation sln-grow phóng to đồng thời toả viền ra 10px và mờ về trong suốt). */
.sln-ct--total .sln-ct__item--phone i,     .sln-ct--leaves .sln-ct__item--phone i     { box-shadow: 0 0 0 0px #4CAF50; }
.sln-ct--total .sln-ct__item--sms i,       .sln-ct--leaves .sln-ct__item--sms i       { box-shadow: 0 0 0 0px #e56100; }
.sln-ct--total .sln-ct__item--messenger i, .sln-ct--leaves .sln-ct__item--messenger i { box-shadow: 0 0 0 0px #0082FF; }
.sln-ct--total .sln-ct__item--telegram i,  .sln-ct--leaves .sln-ct__item--telegram i  { box-shadow: 0 0 0 0px #29A9EB; }
.sln-ct--total .sln-ct__item--zalo i,      .sln-ct--leaves .sln-ct__item--zalo i      { box-shadow: 0 0 0 0px #0068FF; }
.sln-ct--total .sln-ct__item--whatsapp i,  .sln-ct--leaves .sln-ct__item--whatsapp i  { box-shadow: 0 0 0 0px #29A71A; }
.sln-ct--total .sln-ct__item--viber i,     .sln-ct--leaves .sln-ct__item--viber i     { box-shadow: 0 0 0 0px #6f3faa; }
.sln-ct--total .sln-ct__item--skype i,     .sln-ct--leaves .sln-ct__item--skype i     { box-shadow: 0 0 0 0px #00a9f0; }
.sln-ct--total .sln-ct__item--tiktok i,    .sln-ct--leaves .sln-ct__item--tiktok i    { box-shadow: 0 0 0 0px #222222; }
.sln-ct--total .sln-ct__item--mail i,      .sln-ct--leaves .sln-ct__item--mail i      { box-shadow: 0 0 0 0px #2196F3; }
.sln-ct--total .sln-ct__item--maps i,      .sln-ct--leaves .sln-ct__item--maps i      { box-shadow: 0 0 0 0px #8a56cd; }
.sln-ct--total .sln-ct__item--custom i,    .sln-ct--leaves .sln-ct__item--custom i    { box-shadow: 0 0 0 0px #555555; }
/* border-radius phải khai trực tiếp ở đây, không dùng inherit — <i> là CHA của <svg>,
   inherit sẽ lấy bo góc từ <a> (0, vuông) chứ không lấy được của <svg> (con), làm box-shadow
   toả ra thành hình vuông thay vì tròn quanh icon. */
.sln-ct--total i, .sln-ct--leaves i { animation: sln-grow .8s infinite; transform: translate3d(0, 0, 0) scale(.9); }
.sln-ct--total i { border-radius: var(--sln-r, 100%); }
.sln-ct--leaves i { border-radius: 0 var(--sln-r, 20px) 0 var(--sln-r, 20px); }
.sln-ct--total i:hover, .sln-ct--leaves i:hover, .sln-ct--floating svg:hover, .sln-ct--tap svg:hover { animation: sln-shake 1s infinite; }
@keyframes sln-grow { 100% { transform: translate3d(0, 0, 0) scale(1); box-shadow: 0 0 0 10px rgba(0, 210, 255, 0); } }
@keyframes sln-shake {
    0% { transform: rotate(0) scale(1) skew(1deg); } 10% { transform: rotate(-25deg) scale(1) skew(1deg); }
    20% { transform: rotate(25deg) scale(1) skew(1deg); } 30% { transform: rotate(-25deg) scale(1) skew(1deg); }
    40% { transform: rotate(25deg) scale(1) skew(1deg); } 50%, 100% { transform: rotate(0) scale(1) skew(1deg); }
}

.sln-ct--effective { --sln-x: 0px; }
.sln-ct--effective .sln-ct__item { margin-bottom: 2px; }
.sln-ct--effective .sln-ct__item:hover span {
    display: flex; align-items: center; justify-content: center; position: absolute; z-index: 100; top: 0; left: 45px;
    height: 45px; padding: 0 20px; font-size: 14px; color: #fff; background: #333; width: max-content; white-space: nowrap;
}
.sln-ct--effective.is-right .sln-ct__item:hover span { left: auto; right: 45px; }
.sln-ct--effective svg { border-radius: var(--sln-r, 0); }

.sln-ct--leaves svg { border-radius: 0 var(--sln-r, 20px) 0 var(--sln-r, 20px); }

.sln-ct--floating .sln-ct__item + .sln-ct__item { margin-top: 7px; }
.sln-ct--floating svg { background: none !important; border-radius: var(--sln-r, 10px); border: 2px solid currentColor; }
.sln-ct--floating .sln-ct__item--custom svg { padding: 6px; }
.sln-ct--floating .sln-ct__item--phone     { color: var(--sln-icon, #4CAF50); }
.sln-ct--floating .sln-ct__item--sms       { color: var(--sln-icon, #e56100); }
.sln-ct--floating .sln-ct__item--messenger { color: var(--sln-icon, #0082FF); }
.sln-ct--floating .sln-ct__item--telegram  { color: var(--sln-icon, #29A9EB); }
.sln-ct--floating .sln-ct__item--zalo      { color: var(--sln-icon, #0068FF); }
.sln-ct--floating .sln-ct__item--whatsapp  { color: var(--sln-icon, #29A71A); }
.sln-ct--floating .sln-ct__item--viber     { color: var(--sln-icon, #6f3faa); }
.sln-ct--floating .sln-ct__item--skype     { color: var(--sln-icon, #00a9f0); }
.sln-ct--floating .sln-ct__item--tiktok    { color: var(--sln-icon, #222222); }
.sln-ct--floating .sln-ct__item--mail      { color: var(--sln-icon, #2196F3); }
.sln-ct--floating .sln-ct__item--maps      { color: var(--sln-icon, #8a56cd); }
.sln-ct--floating .sln-ct__item--custom    { color: var(--sln-icon, #555555); }
.sln-ct--floating svg path, .sln-ct--tap svg path { fill: currentColor !important; }

/* ── Skin tap: khối trắng, tên dưới icon ──────────────────────────────── */
.sln-ct--tap {
    width: 65px; text-align: center; background: rgba(255, 255, 255, .96); border-radius: var(--sln-r, 10px);
    padding: 10px 5px 17px; box-shadow: 0 0 5px rgba(0, 0, 0, .2); opacity: var(--sln-op, 1);
}
.sln-ct--tap .sln-ct__item { color: #333; }
.sln-ct--tap .sln-ct__item span { font-size: 11px; display: block; text-align: center; margin-top: -7px; line-height: 1.2; }
.sln-ct--tap svg { width: 55px; height: 55px; margin: auto; background: none !important; }
.sln-ct--tap .sln-ct__item--phone     { color: var(--sln-icon, #4CAF50); }
.sln-ct--tap .sln-ct__item--sms       { color: var(--sln-icon, #e56100); }
.sln-ct--tap .sln-ct__item--messenger { color: var(--sln-icon, #0082FF); }
.sln-ct--tap .sln-ct__item--telegram  { color: var(--sln-icon, #29A9EB); }
.sln-ct--tap .sln-ct__item--zalo      { color: var(--sln-icon, #0068FF); }
.sln-ct--tap .sln-ct__item--whatsapp  { color: var(--sln-icon, #29A71A); }
.sln-ct--tap .sln-ct__item--viber     { color: var(--sln-icon, #6f3faa); }
.sln-ct--tap .sln-ct__item--skype     { color: var(--sln-icon, #00a9f0); }
.sln-ct--tap .sln-ct__item--tiktok    { color: var(--sln-icon, #222222); }
.sln-ct--tap .sln-ct__item--mail      { color: var(--sln-icon, #2196F3); }
.sln-ct--tap .sln-ct__item--maps      { color: var(--sln-icon, #8a56cd); }
.sln-ct--tap .sln-ct__item--custom    { color: var(--sln-icon, #555555); }
.sln-ct--tap .sln-ct__item span { color: #333; }

/* ── Thanh liên hệ mobile ─────────────────────────────────────────────── */
.sln-bar {
    --sln-bar-accent: #ff4444; --sln-bar-main: #ffffff; --sln-bar-main-text: #333333; --sln-bar-bg: #ffffff;
    --sln-bar-chat-bg: rgba(255, 255, 255, .84); --sln-bar-chat-text: #333333; --sln-bar-text: #333333;
    display: none;
}
.sln-bar__box {
    position: fixed; z-index: 10150; left: 0; right: 0; bottom: 0; height: 65px; padding: 10px 10px 20px;
    background: var(--sln-bar-bg); box-shadow: 0 -1px 7px rgba(0, 0, 0, .19); line-height: 1.2; transition: transform .3s ease;
}
.sln-bar.is-hidden .sln-bar__box { transform: translateY(200%); }
.sln-bar__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; color: var(--sln-bar-text); }
.sln-bar__row > div { text-align: center; position: relative; }
.sln-bar__row a { color: var(--sln-bar-text); display: block; cursor: pointer; }
.sln-bar__row svg { width: 100%; height: 25px; max-width: 25px; margin: auto; }
.sln-bar__row svg path { fill: var(--sln-bar-text); }
.sln-bar__label { position: absolute; bottom: -15px; left: 0; right: 0; font-size: 11px; font-weight: bold; display: block; }
.sln-bar__main { position: absolute; bottom: -20px; left: 50%; transform: translate(-50%, 0); width: 100%; }
.sln-bar__main i { display: inline-block; border-radius: 100%; line-height: 0; animation: sln-bar-pulse 1s infinite; }
.sln-bar__main svg { max-width: 35px; height: 35px; padding: 10px; box-sizing: content-box; border-radius: 100%; background: var(--sln-bar-accent); border: 1px solid rgba(0, 0, 0, .17); }
.sln-bar__main svg path { fill: var(--sln-bar-main); }
.sln-bar__main-label { display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: bold; color: var(--sln-bar-main-text); background: var(--sln-bar-bg); }
@keyframes sln-bar-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 var(--sln-bar-accent); }
    33% { transform: scale(.9); } 66%, 100% { transform: scale(1); box-shadow: 0 0 0 10px rgba(0, 210, 255, 0); }
}
.sln-bar__popup {
    position: fixed; z-index: 10150; left: 0; right: 0; bottom: 64px; padding: 20px 10px; background: var(--sln-bar-chat-bg);
    box-shadow: 0 -1px 7px rgba(0, 0, 0, .19); max-height: 70vh; overflow: auto;
}
.sln-bar__popup a { display: flex; align-items: center; padding: 5px; font-weight: bold; font-size: 16px; color: var(--sln-bar-chat-text); }
.sln-bar__popup .sln-ct__scroll { max-height: none; padding: 0; }
.sln-bar__popup svg { width: 40px; height: 40px; margin-right: 15px; border-radius: 100%; }
.sln-bar__menu a { padding: 8px 5px; }

.sln-bar--simple .sln-bar__center { border-top: 4px solid var(--sln-bar-accent); padding-top: 10px; margin-top: -10px; }
.sln-bar--docky .sln-bar__box { left: 10px; right: 10px; bottom: 10px; border-radius: 10px; }
.sln-bar--docky .sln-bar__popup { left: 10px; right: 10px; bottom: 85px; border-radius: 10px; }

.sln-bar--momo .sln-bar__main svg, .sln-bar--lom .sln-bar__main svg { max-width: 25px; height: 25px; }
.sln-bar--momo .sln-bar__main-label, .sln-bar--lom .sln-bar__main-label { background: transparent; color: var(--sln-bar-main-text); }
.sln-bar__notch {
    position: absolute; bottom: 99%; left: 50%; transform: translateX(-50%); width: 7em; height: 1.4em; z-index: -1;
    background: var(--sln-bar-bg); clip-path: url(#sln-bar-notch); will-change: transform;
}
.sln-bar__clip { position: absolute; width: 0; height: 0; }

.sln-bar--lom .sln-bar__box { background: none; box-shadow: none; padding: 13px 10px 10px; }
.sln-bar--lom .sln-bar__main-label { margin-top: 10px; }
.sln-bar__wave svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.sln-bar__wave svg path { fill: var(--sln-bar-bg); }
.sln-bar--lom .sln-bar__popup { padding-bottom: 65px; bottom: 23px; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
.sln-ct.is-mobile-only { display: none; }
@media (max-width: 700px) {
    .sln-ct.is-mobile-only { display: block; }
    .sln-ct.has-bar { display: none; }
    .sln-bar { display: block; }
}