/*--------------------------------------------------------------------------
|  Header
--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
|  Main
--------------------------------------------------------------------------*/
.bg-content {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem 0;
}

.bg-attachment {
    background-attachment: fixed;
}

.search-slider {
    text-align: left;
}

.title-search {
    display: inline-block;
    float: left;
    background: var(--color-highlight);
    padding: .8rem 2rem;
    color: white;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}

.search-slider input {
    height: 6rem;
    border-bottom-left-radius: .5rem;
}

.search-slider .btn-submit {
    padding: 0.85rem 2.25rem;
    border-top-right-radius: .5rem;
    border-bottom-right-radius: .5rem;
}

.search-slider .list-unstyled {
    display: flex;
    overflow-y: scroll;
    max-height: 10vw;
    flex-wrap: wrap;
}

.search-slider .list-unstyled li {
    flex: 0 0 50%;
    max-width: 50%;
}

.search-slider .list-unstyled::-webkit-scrollbar {
    width: .3em;
}

.search-slider .list-unstyled::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.search-slider .list-unstyled::-webkit-scrollbar-thumb {
    background-color: var(--color-highlight);
}

.attr-product {
    position: absolute;
    left: 0;
    bottom: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    color: white;
    z-index: 2;
    font-size: 1.5rem;
    width: 100%;
    justify-content: space-around;
    border-top: 1px solid rgb(255 255 255 / 30%);
    align-items: flex-end;
}

.attr-product .money {
    font-size: 2rem;
    font-weight: bold;
}

.product-item .inner-image .ratio-product a:before {
    content: "";
    background: transparent;
    background: -moz-linear-gradient(top, transparent 0%, #000000 130%);
    background: -webkit-linear-gradient(top, transparent 0%, #000000 130%);
    background: linear-gradient(to bottom, transparent 0%, #000000 130%);
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1;
}

.bg-wrapper {
    padding: 6vw 0;
}

.item-wrapper {
    padding: 3rem;
    background: rgba(35,77,212,0.9);
    color: white;
}

.title-wrapper {
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 1rem;
}

.item-wrapper img {
    filter: brightness(0) invert(1);
}

.bg-main {
    background: var(--color-main);
}

.item-newsletter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.item-newsletter img {
    width: 6rem;
    filter: brightness(0) invert(1);
}

.item-newsletter .h2 {
    font-size: 2.5rem;
}

.ratio-list-product {
    width: calc(100% + 1px);
    margin-left: -0.5px;
    margin-right: -0.5px;
    float: none;
    border-radius: 4px 4px 0 0;
    display: block;
    position: relative;
}

.ratio-list-product .img-parent1 {
    position: relative;
    width: calc(563 / 848* 100%);
    float: left;
}

.img-parent2 {
    width: calc(100% - 563 / 848* 100% - 2px);
    float: right;
    margin-left: 2px;
    margin-bottom: 2px;
}

.img-parent3 {
    width: calc((100% - 563 / 848* 100% - 2px) / 2 - 1px);
    margin-left: 2px;
    float: left;
}

.list-attr-product {
    display: flex;
    list-style: none;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    align-items: flex-end;
}

.list-attr-product .money {
    color: red;
    font-size: 1.8rem;
    font-weight: bold;
}

.short-product {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    list-style: none;
}

.short-product li {
    display: flex;
    flex-direction: column;
    font-size: 2.3rem;
    font-weight: bold;
}

.short-product li span {
    color: #9d9d9d;
    font-size: 1.8rem;
    font-weight: 400;
}

.short-product li.money {
    color: red;
}

.title-attributes {
    font-size: 1.8rem;
    font-weight: bold;
}

.item-attributes-product {
    padding: 1rem 0;
    border-bottom: 1px solid #dee2e6 !important;
    font-size: 1.6rem;
}

.title-page .title-section {
    font-size: 2rem;
}

.user-info {
    text-align: center;
    border: 1px solid lightgray;
    border-radius: 1rem;
    padding: 2rem;
}

.user-info .avata-user {
    width: 10rem;
    height: 10rem;
    border-radius: 100%;
    margin: 0 auto;
    overflow: hidden;
    margin-bottom: 1rem;
}

.user-info .avata-user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info .name-user {
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: bold;
}

.cate-slider {
    width: 70%;
    margin: 0 auto;
    margin-top: 3rem;
}

.cate-slider .prd-cate-title {
    color: white !important;
}

.ratio-item--cate img {
    width: 10rem !important;
    height: 10rem !important;
    object-fit: contain !important;
}

.cate-slider .ratio-item--cate img {
    filter: brightness(0) invert(1);
}

/*--------------------------------------------------------------------------
|  Footer
--------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------
|  Responsive
--------------------------------------------------------------------------*/
.is-mobile .swiper-slide--wrap {
    width: 90%;
}

.is-mobile .swiper-slide--description {
    font-size: 2rem;
}

.is-mobile .swiper-slide--tile {
    font-size: 3rem;
}

@media (max-width: 500px) {
    .is-mobile .swiper-slide--wrap {
        top: 40%;
    }
    
    .search-slider .list-unstyled {
        max-height: 30vw;
    }
    
    .is-mobile .search-slider .list-unstyled li {
        flex: 0 0 100%;
        max-width: 100%;
    }
}