/* Kiểu 4 · Banner SalePro (layout_style="slider-salepro") for the project-hero-slider shortcode.
   Mirrors the project-detail header slider on salepro.com: edge-to-edge photo, 10px radius,
   36px translucent round arrows, numbered round pagination with an amber active bullet. */
.sx-shortcode .sx-hero-slider-salepro {
    --hss-accent: #feb938;
    --hss-accent-ink: #1a1405;
    --hss-radius: 0.625rem;
    --hss-arrow-size: 36px;
    --hss-arrow-bg: rgba(0, 0, 0, 0.3);
    --hss-arrow-bg-hover: rgba(0, 0, 0, 0.55);
    --hss-bullet-size: 24px;
    --hss-bullet-bg: rgba(225, 225, 225, 0.5);
    --hss-bullet-ink: #000;
    --hss-edge: 10px;
    --hss-ease: 200ms ease-in-out;
    --hss-max: 1200px; /* same boxed width as .sx-shortcode .sx-container */
    position: relative;
    box-sizing: border-box;
    width: min(var(--hss-max), calc(100% - 2rem));
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--hss-radius);
}
.sx-shortcode .sx-hero-slider-salepro--full { width: 100%; --hss-radius: 0; }
.sx-shortcode .sx-hero-slider-salepro *,
.sx-shortcode .sx-hero-slider-salepro *::before,
.sx-shortcode .sx-hero-slider-salepro *::after { box-sizing: border-box; }

/* Slides: only the active one is rendered (JS toggles [hidden]); fade replaces Swiper's translate. */
.sx-shortcode .sx-hero-slider-salepro__viewport { position: relative; }
.sx-shortcode .sx-hero-slider-salepro__slide { position: relative; height: var(--sx-slider-image-height, 520px); }
.sx-shortcode .sx-hero-slider-salepro__slide[hidden] { display: none !important; }
.sx-shortcode .sx-hero-slider-salepro__slide.is-active { animation: sx-hss-fade 0.5s ease both; }
@keyframes sx-hss-fade { from { opacity: 0; } to { opacity: 1; } }
.sx-shortcode .sx-hero-slider-salepro__image {
    display: block;
    width: 100%;
    height: var(--sx-slider-image-height, 520px);
    object-fit: cover;
    border-radius: var(--hss-radius);
}
@media (max-width: 767.98px) {
    .sx-shortcode .sx-hero-slider-salepro__slide,
    .sx-shortcode .sx-hero-slider-salepro__image { height: var(--sx-slider-image-height, 280px); }
}

/* Ảnh gốc độ phân giải thấp: không phóng to quá kích thước thật (tránh mờ/vỡ);
   hiển thị ảnh rõ ở giữa, phần trống phủ bằng chính ảnh đó làm nền mờ. */
.sx-shortcode .sx-hero-slider-salepro__slide.is-lowres { overflow: hidden; border-radius: var(--hss-radius); background: #111; }
.sx-shortcode .sx-hero-slider-salepro__backdrop {
    position: absolute;
    inset: -24px;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    object-fit: cover;
    filter: blur(24px) brightness(0.75);
    pointer-events: none;
}
.sx-shortcode .sx-hero-slider-salepro__slide.is-lowres .sx-hero-slider-salepro__image {
    position: relative;
    width: auto;
    max-width: 100%;
    margin-inline: auto;
    object-fit: contain;
    border-radius: 0;
}

/* Optional caption: only rendered when the slide has a title, description or CTA. */
.sx-shortcode .sx-hero-slider-salepro__caption {
    position: absolute;
    inset: auto 0 0 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 4rem clamp(1rem, 4vw, 3rem) 3.5rem;
    border-radius: 0 0 var(--hss-radius) var(--hss-radius);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    color: #fff;
}
.sx-shortcode .sx-hero-slider-salepro .sx-hero-slider-salepro__title {
    margin: 0;
    color: var(--sx-hs-title-color, #fff);
    font-family: inherit;
    font-weight: var(--sx-hs-title-weight, 700);
    font-size: min(var(--sx-hs-title-size, clamp(1.25rem, 3vw, 2.25rem)), max(1.25rem, 8vw));
    line-height: 1.25;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.sx-shortcode .sx-hero-slider-salepro .sx-hero-slider-salepro__description {
    margin: 0;
    max-width: 60ch;
    color: var(--sx-hs-description-color, rgba(255, 255, 255, 0.92));
    font-weight: var(--sx-hs-description-weight, 400);
    font-size: min(var(--sx-hs-description-size, clamp(0.875rem, 1.4vw, 1rem)), max(0.875rem, 8vw));
    line-height: 1.6;
    overflow-wrap: anywhere;
}
.sx-shortcode .sx-hero-slider-salepro__cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 0.25rem;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 999px;
    background: var(--hss-accent);
    color: var(--hss-accent-ink);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--hss-ease), color var(--hss-ease);
}
.sx-shortcode .sx-hero-slider-salepro__cta:hover { background: #fff; color: var(--hss-accent-ink); }
.sx-shortcode .sx-hero-slider-salepro__cta[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Arrows: 36px round, 30% black, vertically centred on the photo edges. */
.sx-shortcode .sx-hero-slider-salepro__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hss-arrow-size);
    height: var(--hss-arrow-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hss-arrow-bg);
    color: #fff;
    transform: translateY(-50%);
    cursor: pointer;
    transition: background-color var(--hss-ease);
}
.sx-shortcode .sx-hero-slider-salepro__arrow::after { content: ""; position: absolute; inset: -4px; }
.sx-shortcode .sx-hero-slider-salepro__arrow--prev { left: var(--hss-edge); }
.sx-shortcode .sx-hero-slider-salepro__arrow--next { right: var(--hss-edge); }
.sx-shortcode .sx-hero-slider-salepro__arrow:hover { background: var(--hss-arrow-bg-hover); }
@media (pointer: coarse) {
    .sx-shortcode .sx-hero-slider-salepro { --hss-arrow-size: 44px; }
}

/* Numbered pagination: 24px bullets, translucent white, amber + 1.2x when active. */
.sx-shortcode .sx-hero-slider-salepro__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    padding-inline: calc(var(--hss-arrow-size) + var(--hss-edge) * 2);
    pointer-events: none;
}
.sx-shortcode .sx-hero-slider-salepro__dot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--hss-bullet-size);
    height: var(--hss-bullet-size);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--hss-bullet-bg);
    color: var(--hss-bullet-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    transition: background-color var(--hss-ease), transform var(--hss-ease);
}
.sx-shortcode .sx-hero-slider-salepro__dot::after { content: ""; position: absolute; inset: -10px -4px; }
.sx-shortcode .sx-hero-slider-salepro__dot:hover { background: rgba(255, 255, 255, 0.85); }
.sx-shortcode .sx-hero-slider-salepro__dot[aria-pressed="true"] { background: var(--hss-accent); transform: scale(1.2); }

.sx-shortcode .sx-hero-slider-salepro__pause {
    position: absolute;
    right: calc(var(--hss-arrow-size) + var(--hss-edge) * 2);
    bottom: 18px;
    z-index: 3;
    min-height: var(--hss-bullet-size);
    padding: 0 0.75rem;
    border: 0;
    border-radius: 999px;
    background: var(--hss-arrow-bg);
    color: #fff;
    font: inherit;
    font-size: 0.75rem;
    line-height: var(--hss-bullet-size);
    cursor: pointer;
    transition: background-color var(--hss-ease);
}
.sx-shortcode .sx-hero-slider-salepro__pause::after { content: ""; position: absolute; inset: -10px -4px; }
.sx-shortcode .sx-hero-slider-salepro__pause:hover { background: var(--hss-arrow-bg-hover); }
.sx-shortcode .sx-hero-slider-salepro__pause[hidden] { display: none; }

.sx-shortcode .sx-hero-slider-salepro :is(a, button):focus-visible { outline: 2px solid var(--hss-accent); outline-offset: 2px; }
.sx-shortcode .sx-hero-slider-salepro__hint {
    margin: 0;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--hss-accent);
    border-radius: var(--hss-radius);
    text-align: center;
}

@media (max-width: 575.98px) {
    /* Narrow screens keep the caption and controls below the fixed-height photo. */
    .sx-shortcode .sx-hero-slider-salepro:not(.sx-hero-slider-salepro--empty) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        background: #15171c;
    }
    .sx-shortcode .sx-hero-slider-salepro__viewport { grid-column: 1 / -1; }
    .sx-shortcode .sx-hero-slider-salepro__slide { height: auto; }
    .sx-shortcode .sx-hero-slider-salepro__image { border-radius: 0; }
    .sx-shortcode .sx-hero-slider-salepro__caption {
        position: static;
        padding: 1rem var(--hss-edge) 0.25rem;
        border-radius: 0;
        background: none;
    }
    .sx-shortcode .sx-hero-slider-salepro__arrow {
        position: static;
        grid-row: 2;
        margin: 0.5rem var(--hss-edge);
        transform: none;
        background: rgba(255, 255, 255, 0.16);
    }
    .sx-shortcode .sx-hero-slider-salepro__arrow--prev { grid-column: 1; }
    .sx-shortcode .sx-hero-slider-salepro__arrow--next { grid-column: 3; }
    .sx-shortcode .sx-hero-slider-salepro__dots { position: static; grid-column: 2; grid-row: 2; padding: 0; }
    .sx-shortcode .sx-hero-slider-salepro__pause { position: static; grid-column: 1 / -1; grid-row: 3; justify-self: end; margin: 0 var(--hss-edge) 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sx-shortcode .sx-hero-slider-salepro *,
    .sx-shortcode .sx-hero-slider-salepro *::after { animation: none !important; transition: none !important; }
}