:root{
  --ncb-bottom:24px;
  --ncb-gap:12px;
  --ncb-size:56px;
}

/* container */
.ncb-wrap{
  position: fixed;
  z-index: 9999;
  bottom: var(--ncb-bottom);
  display: flex;
  flex-direction: column;
  gap: var(--ncb-gap);
  pointer-events: none;
}
.ncb-wrap.ncb-pos-right{ right: 16px; }
.ncb-wrap.ncb-pos-left{ left: 16px; }

/* button */
.ncb-btn{
  width: var(--ncb-size);
  height: var(--ncb-size);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .2s ease;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.ncb-btn img{ width:70%; height:70%; object-fit:contain; display:block; }
.ncb-btn:hover{ transform: translateY(-2px) scale(1.03); }

/* ring (thu–tỏa) */
@keyframes ncb-pulse {
  0% { transform: scale(1); opacity:.6; }
  70% { transform: scale(1.8); opacity:0; }
  100%{ transform: scale(1.8); opacity:0; }
}
.ncb-ring::before,
.ncb-ring::after{
  content:"";
  position:absolute;
  inset:0;
  border:2px solid rgba(0,0,0,.12);
  border-radius:inherit;
  animation:ncb-pulse 1.9s ease-out infinite;
  z-index:0;
}
.ncb-ring::after{ animation-delay:.6s; }
.ncb-btn>img{ position:relative; z-index:1; }

/* nhẹ màu theo kênh */
.ncb-call{ background:#e9f7ef; }
.ncb-zalo{ background:#eef4ff; }
.ncb-facebook{ background:#edf2ff; }

@media (max-width:420px){
  .ncb-wrap{ bottom: calc(var(--ncb-bottom) - 6px); }
  .ncb-btn{ width:52px; height:52px; }
}