/* Ký Ức Maple – Homepage slider. Scope exclusively to homepage hero. */
.portal-hero-card .hbs-slider{position:relative;isolation:isolate;overflow:hidden;outline-offset:-3px}
.portal-hero-card .hbs-slides{position:relative;aspect-ratio:1710/651;background:#82baf0}
.portal-hero-card .hbs-slide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s ease,visibility .4s;z-index:0}
.portal-hero-card .hbs-slide.is-current{opacity:1;visibility:visible;pointer-events:auto;z-index:1}
.portal-hero-card .hbs-slide picture,.portal-hero-card .hbs-slide .hbs-image-link{display:block;width:100%;height:100%;line-height:0}
.portal-hero-card .hbs-slide img{display:block;width:100%;height:100%;object-fit:cover}
.portal-hero-card .hbs-arrow{position:absolute;z-index:4;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:44px;border:1px solid rgba(255,255,255,.35);border-radius:8px;background:rgba(16,45,78,.44);color:white;font-size:22px;line-height:1;cursor:pointer;transition:background .15s}
.portal-hero-card .hbs-prev{left:9px}.portal-hero-card .hbs-next{right:9px}
.portal-hero-card .hbs-arrow:hover,.portal-hero-card .hbs-arrow:focus-visible{background:rgba(16,45,78,.80)}
.portal-hero-card .hbs-dots{position:absolute;z-index:4;bottom:9px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:6px;background:rgba(16,45,78,.3);padding:6px 9px;border-radius:20px}
.portal-hero-card .hbs-dot{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.60);cursor:pointer;transition:.15s}
.portal-hero-card .hbs-dot.is-current{background:#fff1af;width:21px;border-radius:8px}
.portal-hero-card .hbs-dot:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:680px){
  .portal-hero-card .hbs-slides{aspect-ratio:16/9}
  /* Fill the mobile 16:9 frame, even for slides saved before auto-resize. */
  .portal-hero-card .hbs-slide img{object-fit:cover;object-position:center center}
  .portal-hero-card .hbs-arrow{width:29px;height:36px;font-size:18px}
  .portal-hero-card .hbs-prev{left:5px}.portal-hero-card .hbs-next{right:5px}
}
@media(prefers-reduced-motion:reduce){
  .portal-hero-card .hbs-slide{transition:none}
}