/* Slide Tracking Localis – frontend */
.stl-slider {
    --stl-ratio: 2.1338;
    --stl-ratio-m: var(--stl-ratio);
    --stl-radius: 16px;
    --stl-fit: cover;
    --stl-accent: #ff5a00;
    --stl-ink: #173b2c;
    --stl-kb: 7000ms;
    position: relative;
    width: 100%;
    max-width: var(--stl-maxw, none);
    margin-inline: auto;
    -webkit-tap-highlight-color: transparent;
}

.stl-viewport {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--stl-ratio);
    border-radius: var(--stl-radius);
    background: #eceee8;
    isolation: isolate;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    transform: translateZ(0); /* giữ bo góc khi animate trên Safari */
}

@media (max-width: 767px) {
    .stl-viewport { aspect-ratio: var(--stl-ratio-m); }
}

/* ---------- slides ---------- */
.stl-slide {
    position: absolute;
    inset: 0;
    visibility: hidden;
    overflow: hidden;
    backface-visibility: hidden;
}
.stl-slide.is-active { visibility: visible; z-index: 1; }
.stl-slide.is-leaving { visibility: visible; z-index: 2; will-change: transform, opacity; }
.stl-slide.is-entering { visibility: visible; z-index: 3; will-change: transform, opacity, clip-path; }
.stl-effect-cards .stl-slide.is-leaving,
.stl-effect-zoom .stl-slide.is-leaving { z-index: 1; }

.stl-link,
.stl-media,
.stl-media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}
.stl-link { color: inherit; text-decoration: none; outline: none; }
a.stl-link { cursor: pointer; }
.stl-media img {
    object-fit: var(--stl-fit);
    object-position: center;
    max-width: none;
    margin: 0;
    border: 0;
    border-radius: 0;
    -webkit-user-drag: none;
    pointer-events: none;
}
a.stl-link:focus-visible::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: calc(var(--stl-radius) - 4px);
    box-shadow: 0 0 0 3px var(--stl-accent);
    z-index: 2;
}

.stl-slider.is-dragging .stl-viewport { cursor: grabbing; }

/* Ken Burns – zoom chậm khi slide hiển thị */
.stl-effect-kenburns .stl-slide.is-active .stl-media,
.stl-effect-kenburns .stl-slide.is-entering .stl-media,
.stl-effect-kenburns .stl-slide.is-leaving .stl-media {
    animation: stl-kb var(--stl-kb) linear both;
}
.stl-effect-kenburns .stl-slide[data-kb="1"] .stl-media { transform-origin: 20% 30%; }
.stl-effect-kenburns .stl-slide[data-kb="2"] .stl-media { transform-origin: 80% 70%; }
.stl-effect-kenburns .stl-slide[data-kb="3"] .stl-media { transform-origin: 70% 20%; }
@keyframes stl-kb {
    from { transform: scale(1); }
    to { transform: scale(1.09); }
}

/* ---------- arrows ---------- */
.stl-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: -24px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .78);
    color: var(--stl-ink);
    box-shadow: 0 6px 24px rgba(16, 32, 24, .16);
    -webkit-backdrop-filter: blur(10px) saturate(1.4);
    backdrop-filter: blur(10px) saturate(1.4);
    cursor: pointer;
    transition: opacity .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1), background-color .2s, color .2s, box-shadow .2s;
}
.stl-arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}
.stl-prev { left: 18px; }
.stl-next { right: 18px; }
.stl-arrow:hover { background: #fff; box-shadow: 0 8px 28px rgba(16, 32, 24, .22); }
.stl-prev:hover svg { transform: translateX(-2px); }
.stl-next:hover svg { transform: translateX(2px); }
.stl-arrow:active { transform: scale(.92); }
.stl-arrow:focus-visible { outline: 3px solid var(--stl-accent); outline-offset: 2px; }

.stl-arrows-square .stl-arrow { border-radius: 12px; }
.stl-arrows-minimal .stl-arrow {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: #fff;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.stl-arrows-minimal .stl-arrow svg { width: 34px; height: 34px; stroke-width: 1.8; }
.stl-arrows-minimal .stl-arrow:hover { background: transparent; box-shadow: none; }

.stl-slider.is-first .stl-prev,
.stl-slider.is-last .stl-next { opacity: .35; pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
    .stl-arrows-onhover .stl-arrow { opacity: 0; }
    .stl-arrows-onhover .stl-prev { transform: translateX(-10px); }
    .stl-arrows-onhover .stl-next { transform: translateX(10px); }
    .stl-arrows-onhover:hover .stl-arrow,
    .stl-arrows-onhover:focus-within .stl-arrow { opacity: 1; transform: none; }
    .stl-arrows-onhover:hover .stl-arrow:active { transform: scale(.92); }
    .stl-arrows-onhover.is-first:hover .stl-prev,
    .stl-arrows-onhover.is-last:hover .stl-next { opacity: .35; }
}

@media (max-width: 767px) {
    .stl-arrows-nomobile .stl-arrow { display: none; }
    .stl-arrow { width: 38px; height: 38px; margin-top: -19px; }
    .stl-arrow svg { width: 18px; height: 18px; }
    .stl-prev { left: 10px; }
    .stl-next { right: 10px; }
}

/* ---------- dots ---------- */
.stl-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    z-index: 5;
}
.stl-nav-inside .stl-dots {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(18, 30, 24, .28);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.stl-nav-outside .stl-dots { position: relative; margin-top: 16px; }

.stl-dot {
    position: relative;
    display: block;
    flex: none;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255, 255, 255, .5);
    transition: width .45s cubic-bezier(.22, 1, .36, 1), background-color .3s;
}
.stl-nav-outside .stl-dot { background: rgba(23, 59, 44, .18); }
.stl-dot::before { /* vùng bấm lớn hơn cho mobile */
    content: "";
    position: absolute;
    inset: -10px -4px;
}
.stl-dot:focus-visible { outline: 2px solid var(--stl-accent); outline-offset: 3px; }
.stl-dot-fill {
    position: absolute;
    inset: 0;
    background: var(--stl-accent);
    transform: scaleX(0);
    transform-origin: left center;
}
.stl-dot:hover { background: rgba(255, 255, 255, .8); }
.stl-nav-outside .stl-dot:hover { background: rgba(23, 59, 44, .32); }

/* bars */
.stl-dots-bars .stl-dot { width: 28px; height: 4px; border-radius: 4px; }
.stl-dots-bars .stl-dot.is-active { width: 48px; }
.stl-dots-bars .stl-dot:not(.is-active) .stl-dot-fill { transform: scaleX(0) !important; }

/* dots */
.stl-dots-dots .stl-dot { width: 9px; height: 9px; border-radius: 9px; }
.stl-dots-dots .stl-dot.is-active { width: 30px; background: rgba(255, 255, 255, .9); }
.stl-nav-outside.stl-dots-dots .stl-dot.is-active { background: rgba(23, 59, 44, .25); }
.stl-dots-dots .stl-dot:not(.is-active) .stl-dot-fill { transform: scaleX(0) !important; }

/* numbers */
.stl-fraction {
    gap: 12px;
    color: #fff;
    font: 600 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}
.stl-nav-outside .stl-fraction { color: var(--stl-ink); }
.stl-num-total { opacity: .6; }
.stl-num-bar {
    position: relative;
    width: 72px;
    height: 3px;
    border-radius: 3px;
    overflow: hidden;
    background: rgba(255, 255, 255, .35);
}
.stl-nav-outside .stl-num-bar { background: rgba(23, 59, 44, .18); }

@media (max-width: 767px) {
    .stl-nav-inside .stl-dots { bottom: 10px; padding: 6px 10px; gap: 6px; }
    .stl-dots-bars .stl-dot { width: 18px; height: 3px; }
    .stl-dots-bars .stl-dot.is-active { width: 32px; }
}

.stl-single .stl-dots,
.stl-single .stl-arrow { display: none; }

@media (prefers-reduced-motion: reduce) {
    .stl-effect-kenburns .stl-slide .stl-media { animation: none !important; }
    .stl-dot, .stl-arrow { transition: none; }
}