:root{
  --onp-container: 800px;
  --onp-gutter: 15px;
  --onp-card: 300px;
  --onp-thumb: 220px;
  --onp-bg: #fff;
  --onp-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.onp-slider-wrapper{
  width: 100%;
  max-width: var(--onp-container);
  margin: 0 auto;
  padding-left: var(--onp-gutter);
  padding-right: var(--onp-gutter);
  box-sizing: border-box;
}
.onp-slider{ position: relative; }
.onp-track{ display:flex; gap:16px; overflow:hidden; scroll-behavior:smooth; }
.onp-card{ flex:0 0 auto; width:var(--onp-card); background:#fff; color:#111; border-radius:14px; overflow:hidden; box-shadow:var(--onp-shadow); text-decoration:none; }
.onp-thumb{ width:100%; height:var(--onp-thumb); overflow:hidden; background:#f2f2f6; }
.onp-thumb img{ width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.onp-meta{ padding:10px 12px; text-align:center; }
.onp-title{ font-weight:700; font-size:14px; line-height:1.3; }
.onp-prev,.onp-next{ position:absolute; top:50%; transform:translateY(-50%); border:none; border-radius:50%; padding:8px 12px; background:rgba(0,40,172,.9); color:#fff; font-size:22px; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.15); }
.onp-prev:hover,.onp-next:hover{ background:rgba(254,78,18,.95); }
.onp-prev{ left:0; } .onp-next{ right:0; }
.onp-sidebar{ max-width:100%; padding-left:0; padding-right:0; }
.onp-sidebar .onp-card{ width:240px; } .onp-sidebar .onp-thumb{ height:200px; }
html, body{ overflow-x:hidden; }