.hero-slider,
.hero-slider *{
    box-sizing:border-box;
}
.hero-slider{
    position:relative;
    width:100%;
    overflow:hidden;
}
.hero-track{
    position:relative;
    width:100%;
    height: 600px;
    overflow:hidden;
}
.hero-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity .4s ease,
        visibility 0s linear .4s;

    z-index:1;
}
.hero-slide.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity .4s ease,
        visibility 0s;

    z-index:2;
}

.hero-image{
    position:absolute;
    inset:0;
    overflow:hidden;
}
.hero-image::after{
    content:"";
    position:absolute;
    inset:0;
}
.hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    user-select:none;
    -webkit-user-drag:none;
}
.hero-content{
    position:relative;
    z-index:5;
    max-width:620px;
    margin-left:70px;

    padding-bottom:120px;

    color:#fff;
}
.hero-content h2{
    margin:0 0 20px;
    font-size:58px;
    line-height:1.1;
    font-weight:700;
}
.hero-content p{
    margin:0 0 35px;
    font-size:18px;
    line-height:1.8;
}
.hero-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:56px;
    padding:0 42px;
    border:2px solid #fff;
    color:#fff;
    text-decoration:none;
    transition:.3s;
}
.hero-button:hover{
    background:#fff;
    color:#111;
}
.hero-content>*{
    opacity:0;
    transform:translateY(35px);
    transition:
        opacity .7s ease,
        transform .7s ease;
}
.hero-slide.active h2{
    opacity:1;
    transform:none;
    transition-delay:.25s;
}
.hero-slide.active p{
    opacity:1;
    transform:none;
    transition-delay:.4s;
}
.hero-slide.active .hero-button{
    opacity:1;
    transform:none;
    transition-delay:.55s;
}
.hero-timeline{
    position:absolute;
    left:0;
    right:0;
    bottom:89px;
    height:3px;
    background:rgba(255,255,255,.25);
    z-index:11;
    overflow:hidden;
}
.hero-timeline-bar{
    display:block;
    width:0%;
    height:100%;
    background:#ffffff;
}
.hero-nav{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:10;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    height:89px;
    background:rgba(255, 255, 255, 0.07);
    backdrop-filter:blur(4px);
}
.hero-tab{
    padding:35px;
    cursor:pointer;
    border-right:1px solid #ececec;
}
.hero-tab:hover, .hero-tab.active{
    backdrop-filter:blur(9px);
}
.hero-tab:last-child{
    border-right:none;
}
.hero-tab-title{
    font-size:15px;
    text-align: center;
    color:#fff;
}

@media(max-width:1200px){

    .hero-track{
        height:460px;
    }

    .hero-content{
        margin-left:50px;
    }

    .hero-content h2{
        font-size:46px;
    }
}

@media(max-width:992px){

    .hero-track{
        height:430px;
    }

    .hero-content{
        margin:0 35px;
        max-width:500px;
    }

    .hero-content h2{
        font-size:36px;
    }

    .hero-content p{
        font-size:16px;
    }

    .hero-tab{
        padding:18px;
    }

    .hero-tab-title{
        font-size:17px;
    }
}

@media(max-width:768px){

    .hero-track{
        height:340px;
    }

    .hero-nav{
        grid-template-columns:repeat(2,1fr);
    }

    .hero-content{
        margin:0 25px;
    }

    .hero-content h2{
        font-size:28px;
    }

    .hero-content p{
        display:none;
    }

    .hero-button{
        height:46px;
        padding:0 28px;
    }
}

/*slide sản phẩm tương tự
/* =========================================================
   BIG HOUSE - RELATED PRODUCTS SLIDER
   ========================================================= */

.bh-related-products {
    width: 100%;
    margin: 30px 0;
}

.bh-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.bh-related-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.bh-related-more {
    font-size: 14px;
    color: #333;
    text-decoration: none;
}

.bh-related-more:hover {
    text-decoration: underline;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.bh-related-slider-wrap {
    width: 100%;
    overflow: hidden;
    cursor: grab;
}

.bh-related-slider-wrap.is-dragging {
    cursor: grabbing;
}


/* =========================================================
   SLIDER
   ========================================================= */

.bh-related-slider {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;

    width: max-content;

    user-select: none;
}


/* =========================================================
   ITEM DESKTOP
   ========================================================= */

.bh-related-item {
    flex: 0 0 calc(
        (100vw - 80px) / 4
    );

    max-width: 280px;

    user-select: none;
}


/* Không cho ảnh bị kéo khi drag */

.bh-related-item img {
    user-select: none;
    -webkit-user-drag: none;
}


/* =========================================================
   SALE
   ========================================================= */

.bh-related-item .iProBox__pic {
    position: relative;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .bh-related-products {
        margin: 20px 0;
    }

    .bh-related-header {
        margin-bottom: 12px;
    }

    .bh-related-title {
        font-size: 17px;
    }

    .bh-related-more {
        font-size: 13px;
    }

    .bh-related-slider-wrap {
        overflow: hidden;
    }

    .bh-related-slider {
        gap: 10px;
    }

    .bh-related-item {
        flex: 0 0 calc(
            50vw - 15px
        );

        max-width: none;
    }

}