/* Three user-approved original full-resolution banner images. */
.hero-wrap{padding:14px 0 0;background:#fffefa}
.approved-banner{min-height:0!important;height:auto!important;aspect-ratio:1916 / 821;background:#faf8ef;border-radius:18px;box-shadow:0 8px 26px #153e2514;position:relative;overflow:hidden}
.approved-banner .hero-slide{display:block!important;position:absolute;inset:0;min-height:0!important;grid-template-columns:none!important}
.approved-banner-art{display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;user-select:none}
.approved-banner .banner-hit{position:absolute;z-index:3;display:block;background:transparent;cursor:pointer;border-radius:16px}
.banner-hit:focus-visible{outline:3px solid #164c36;outline-offset:2px;background:#fff5}
.banner-one-discover{left:12.5%;top:76.7%;width:13.5%;height:10%}
.banner-one-story{left:26%;top:76.7%;width:17%;height:10%}
.banner-two-siro{left:58.5%;top:14%;width:18.5%;height:75%}
.banner-two-mut{left:77.5%;top:24%;width:21%;height:66%}
.banner-three-banh{left:56%;top:12%;width:37%;height:78%}
.approved-banner .hero-arrow{width:clamp(26px,3.2vw,44px);height:clamp(26px,3.2vw,44px);font-size:clamp(18px,2vw,26px);background:#fffdf3b3;border:1px solid #eef0e9;box-shadow:0 3px 10px #153d2512;opacity:.65}
.approved-banner .hero-arrow:hover,.approved-banner .hero-arrow:focus-visible{opacity:1;background:white}
.approved-banner .hero-dots{bottom:clamp(9px,2.2vw,22px);gap:7px}
.approved-banner .hero-dots button{width:9px;height:9px;background:#b5bea7;border:2px solid #f8f7ef}
.approved-banner .hero-dots button.active{background:#134f38;box-shadow:0 0 0 2px #fff9}
@media(max-width:720px){.hero-wrap{padding-top:8px}.approved-banner{width:min(calc(100% - 16px),1240px)!important;border-radius:10px;box-shadow:0 3px 12px #17412412}.approved-banner .hero-arrow.prev{left:4px}.approved-banner .hero-arrow.next{right:4px}.approved-banner .hero-dots{bottom:4px;gap:2px}.approved-banner .hero-dots button{width:6px;height:6px;border:1px solid #f8f7ef}}
/* On banner 1 the original artwork already contains arrows and three dots:
   keep them visually intact and let transparent HTML controls receive clicks. */
.approved-banner:has(.hero-slide:first-child.active) .hero-arrow,
.approved-banner:has(.hero-slide:first-child.active) .hero-dots{opacity:0!important}
.approved-banner .hero-dots{bottom:clamp(13px,3vw,34px);gap:9px}
.banner-one-discover{left:13.3%;top:76%;width:14.3%;height:9.1%}
.banner-one-story{left:28.7%;top:76%;width:14.5%;height:9.1%}
@media(max-width:720px){.approved-banner .hero-dots{bottom:8px;gap:4px}}