/* Public styles (complete) */
.baner-anh-component{max-width:980px;margin:18px auto;padding:8px}
.baner-title{font-weight:700;margin-bottom:8px;font-size:18px;color:#222}
.baner-viewport{position:relative;overflow:hidden;border-radius:16px;border:1px solid #e0e0e0;background:#fbfcfd;padding:12px}
.baner-stack{position:relative;height:360px;min-height:180px}
.baner-stack .stack-item{position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;visibility:hidden;pointer-events:none;border-radius:12px;overflow:hidden;transform-origin:center center;transition: transform 700ms cubic-bezier(.2,.9,.2,1), opacity 700ms cubic-bezier(.2,.9,.2,1), filter 700ms cubic-bezier(.2,.9,.2,1);box-shadow:0 6px 22px rgba(10,10,10,0.04)}
.baner-stack .stack-item img{width:100%;height:100%;object-fit:cover;display:block}
.baner-stack .stack-item.visible{opacity:1;visibility:visible;pointer-events:auto;z-index:5}
/* effects */
.stack-item.effect1{ transform: scale(1.06); filter:brightness(.98); }
.stack-item.effect1.visible{ transform: scale(1); filter:none; }
.stack-item.effect2{ transform: translateX(12%); }
.stack-item.effect2.visible{ transform: translateX(0); }
.stack-item.effect3{ transform: scale(1.18); }
.stack-item.effect3.visible{ transform: scale(1); }
.stack-item.effect4{ transform: rotateY(40deg) scale(.98); backface-visibility:hidden; }
.stack-item.effect4.visible{ transform: rotateY(0deg) scale(1); }
.stack-item.effect5{ filter: blur(8px) saturate(.9) contrast(.98) scale(1.04); }
.stack-item.effect5.visible{ filter:none; transform: scale(1); }
/* new effects */
.stack-item.effect6{ transform: rotate(6deg) scale(.98) translateY(4%); }
.stack-item.effect6.visible{ transform: rotate(0deg) scale(1) translateY(0); }
.stack-item.effect7{ transform: skewX(8deg) scale(1.02); }
.stack-item.effect7.visible{ transform: skewX(0deg) scale(1); }

.baner-controls{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px;z-index:6}
.baner-controls .num{width:44px;height:44px;border-radius:50%;background:linear-gradient(180deg,#00aaff,#0077aa);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.12);transition:transform 450ms cubic-bezier(.2,.9,.2,1)}
.baner-controls .num.active{transform:rotateY(180deg);box-shadow:0 8px 24px rgba(0,0,0,0.18)}
.baner-prev, .baner-next{position:absolute;top:50%;transform:translateY(-50%);background:transparent;border:0;font-size:36px;line-height:1;cursor:pointer;z-index:7;opacity:0.9;padding:6px;border-radius:8px}
.baner-prev{left:12px}
.baner-next{right:84px}
@media (max-width:768px){
  .baner-stack{height:220px}
  .baner-controls{right:8px}
  .baner-next{right:56px}
}