/* ITC Floating Contact - CSS độc lập, không phụ thuộc theme (có fallback màu) */
.fab{position:fixed;right:20px;bottom:20px;z-index:700;width:60px;height:60px;--fab-red:var(--red,#EE200F);--fab-navy:var(--blue-2,#153D8B);--fab-ease:var(--ease,ease)}
.fab.fab--left{right:auto;left:20px}
.fab__list{position:absolute;right:5px;bottom:5px;list-style:none;margin:0;padding:0;width:50px;height:50px}
.fab--left .fab__list{right:auto;left:5px}
.fab__item{position:absolute;right:0;bottom:0;width:50px;height:50px;
  opacity:0;visibility:hidden;transform:translate(0,0) scale(.2);
  transition:opacity .3s var(--fab-ease),transform .5s cubic-bezier(.34,1.56,.64,1),visibility .3s;
  transition-delay:calc((3 - var(--i)) * .04s)}
.fab--left .fab__item{right:auto;left:0}
.fab[data-open="true"] .fab__item{opacity:1;visibility:visible;
  transform:translate(var(--x),var(--y)) scale(1);
  transition-delay:calc(var(--i) * .06s)}
.fab[data-open="true"] .fab__item:hover{transform:translate(var(--x),var(--y)) scale(1.12)}
.fab__btn{position:absolute;inset:0;display:grid;place-items:center;width:50px;height:50px;border-radius:50%;color:#fff;
  text-decoration:none;font-weight:800;font-size:.95rem;letter-spacing:.2px;
  box-shadow:0 8px 22px rgba(20,44,107,.26)}
.fab__btn--phone{background:var(--fab-red)}
.fab__btn--zalo{background:#0068FF}
.fab__btn--mess{background:#0084FF}
.fab__btn--mess svg{display:block}
.fab__label{position:absolute;right:60px;top:50%;padding:7px 13px;border-radius:999px;background:#234CA8;color:#fff;
  font-size:.82rem;font-weight:600;white-space:nowrap;box-shadow:0 6px 16px rgba(20,44,107,.22);
  opacity:0;transform:translateY(-50%) translateX(8px);pointer-events:none;
  transition:opacity .22s var(--fab-ease),transform .22s var(--fab-ease)}
.fab--left .fab__label{right:auto;left:60px;transform:translateY(-50%) translateX(-8px)}
.fab__label::after{content:"";position:absolute;right:-5px;top:50%;width:9px;height:9px;background:#234CA8;
  transform:translateY(-50%) rotate(45deg);border-radius:1px}
.fab--left .fab__label::after{right:auto;left:-5px}
.fab__item:hover .fab__label{opacity:1;transform:translateY(-50%) translateX(0)}
.fab__toggle{position:absolute;right:0;bottom:0;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;
  background:var(--fab-red);color:#fff;display:grid;place-items:center;padding:0;
  box-shadow:0 12px 30px rgba(238,32,15,.36);transition:transform .3s var(--fab-ease),box-shadow .3s var(--fab-ease),background .3s var(--fab-ease)}
.fab--left .fab__toggle{right:auto;left:0}
.fab__toggle::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fab-red);z-index:-1;
  animation:fab-halo 2.6s var(--fab-ease) infinite;transition:background .3s var(--fab-ease)}
.fab__toggle:hover{transform:scale(1.05);box-shadow:0 14px 34px rgba(238,32,15,.46)}
.fab__ic{position:absolute;display:grid;place-items:center;transition:opacity .25s var(--fab-ease),transform .35s var(--fab-ease)}
.fab__ic--open{opacity:1;transform:rotate(0) scale(1)}
.fab__ic--close{opacity:0;transform:rotate(-90deg) scale(.4)}
.fab[data-open="true"] .fab__toggle{transform:rotate(0)}
.fab[data-open="true"] .fab__toggle::before{animation:none;opacity:0}
.fab[data-open="true"] .fab__ic--open{opacity:0;transform:rotate(90deg) scale(.4)}
.fab[data-open="true"] .fab__ic--close{opacity:1;transform:rotate(0) scale(1)}
.fab__dot{position:absolute;top:9px;right:9px;width:11px;height:11px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 2px var(--fab-red);animation:fab-blink 1.8s ease-in-out infinite}
.fab--left .fab__dot{right:auto;left:9px}
.fab[data-open="true"] .fab__dot{opacity:0}
@keyframes fab-halo{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.7);opacity:0}}
.fab--onred .fab__toggle{background:var(--fab-navy);box-shadow:0 12px 30px rgba(21,61,139,.42)}
.fab--onred .fab__toggle::before{background:var(--fab-navy)}
.fab--onred .fab__toggle:hover{box-shadow:0 14px 34px rgba(21,61,139,.5)}
.fab--onred .fab__dot{box-shadow:0 0 0 2px var(--fab-navy)}
@keyframes fab-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media(max-width:640px){
  .fab{right:14px;bottom:14px}
  .fab.fab--left{right:auto;left:14px}
  .fab__toggle{width:54px;height:54px}
  .fab__btn{width:46px;height:46px}
}
@media(prefers-reduced-motion:reduce){
  .fab__item,.fab__btn,.fab__ic,.fab__label{transition-duration:.01ms}
  .fab__toggle::before,.fab__dot{animation:none}
}
