:root{
  --vnnd-z: 9999;
  --vnnd-opacity: 100%;
}

/* --- Base (áp cho mọi màn hình, sẽ bị breakpoints chỉnh lại width) --- */
.vnnd-wrap{
  position: fixed;
  left: max(0px, env(safe-area-inset-left));   /* tôn trọng safe-area iOS */
  bottom: max(0px, env(safe-area-inset-bottom));
  width: 300px;                                 /* default ~tablet */
  pointer-events: none;
  z-index: var(--vnnd-z);
  transform: translateZ(0);                     /* fix jitter iOS */
  will-change: transform;
}
.vnnd-corner{
  position: relative;
  width: 100%;
  margin: 0; padding: 0;
  border-radius: 0;
  overflow: visible;
}

/* GIF pháo hoa: bám đáy, auto-scale theo khung */
.vnnd-gif{
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: auto; display: block;
  pointer-events: none; user-select: none;
  image-rendering: -webkit-optimize-contrast;
  background: transparent !important;
}

/* SVG trang trí trái: auto-scale theo khung */
.vnnd-side{
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; max-width: 100%;
  opacity: var(--vnnd-opacity);
  pointer-events: none;
}
.vnnd-side img{
  width: 100%; height: auto; display: block;
  pointer-events: none; user-select: none;
}

/* Nếu không dùng JS pháo hoa nữa thì ẩn canvas; 
   nếu dùng JS thì có thể để height ~180–220px tùy gu */
.vnnd-canvas{
  display: none !important;
  /* hoặc dùng:
  position: relative; width: 100%; height: 180px; pointer-events: none;
  */
}

/* --- Mobile: ≤ 768px ~ 230px --- */
@media (max-width: 768px){
  .vnnd-wrap{ width: 180px; }
  /* Nếu muốn GIF thấp hơn xíu để đỡ che nội dung: */
  /* .vnnd-gif{ transform: translateY(2px); } */
}

/* --- Tablet: 769–1024px ~ 300px --- */
@media (min-width: 769px) and (max-width: 1024px){
  .vnnd-wrap{ width: 280px; }
}

/* --- Desktop: ≥ 1025px ~ 400px --- */
@media (min-width: 1025px){
  .vnnd-wrap{ width: 350px; }
}

/* Optional: khi site có live chat góc phải, đảm bảo không đụng nhau.
   (Chúng ta đang ở góc trái, nên đa phần OK) */