:root{
  /* max width phần nội dung trung tâm nếu site bạn có container cố định */
  --container-max: 1200px;      /* đổi theo site */
  --gap-from-content: 68px;     /* khoảng cách từ nội dung tới banner */
  --banner-w: 200px;            /* rộng banner dọc */
}

.side-banner{
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;
  width: var(--banner-w);
  line-height: 0;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.25));
}

.side-banner img{
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #fff;            /* nếu ảnh có nền trong suốt */
}

/* Tính toán để banner né phần nội dung giữa (centered layout) */
.side-banner.left{
  left: max(
    8px,
    calc((100vw - var(--container-max))/2 - var(--banner-w) - var(--gap-from-content))
  );
}
.side-banner.right{
  right: max(
    8px,
    calc((100vw - var(--container-max))/2 - var(--banner-w) - var(--gap-from-content))
  );
}

/* Nút đóng */
.sb-close{
  position:absolute;
  top:-10px; right:-10px;
  width:28px; height:28px;
  border:none; border-radius:50%;
  background:#222; color:#fff; cursor:pointer;
  font-weight:700; line-height:28px;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* Ẩn trên màn hình nhỏ để không che UI (có thể chỉnh breakpoint) */
@media (max-width: 1024px){
  .side-banner{ display:none; }
}