/* ==============================================
    Name: Motorbike page css
    Creact by: Dang Phuong Tay
    Creact at: 3/2/2024
    Update at: 5/2/2024
============================================== */

.motorbike {
    width: 100%;
    margin-top: 31px;
}

.motorbike__container--banner {
    position: relative;
    width: 100%;
    height: 330px;
    display: flex;
    align-items: end;
}

.motorbike__container--banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    filter: brightness(0.5);
}

.motorbike__container--content {
    width: 100%;
    margin: 0 auto;
    max-width: 1160px;
}

.motorbike__container--banner__btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: end;
    padding: 20px;
}

.motorbike__container--banner__box {
    width: 100%;
    margin: 0 auto;
    max-width: 1160px;
    display: flex;
    gap: 20px;
}

.motorbike__container--banner__box--item a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: var(--border-radius-size-1);
    background: var(--color-background-6);
}

.motorbike__container--banner__box--item ion-icon {
    font-size: var(--size-text-7);
}

.motorbike__container--header {
    position: relative;
    font-size: var(--size-text-7);
    padding-left: 15px;
    margin: 20px 0;
}

.motorbike__container--header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--color-background-7);
    border-radius: var(--border-radius-size-3);
}

.vehicle__pagging {
    margin-bottom: 30px;
    
}

.motorbike__fitter--price .total__filter--btn {
    background-color: var(--color-background-6);
    opacity: .8;

}
.motorbike .firstProduct__info{
    min-height: unset;
}
.motorbike__container--content .liveshow__container--body__product--list__page{
    margin-bottom: 10px;
}
.detail__tour--header__rating{
    display: flex;
    align-items: center;
}
.detail__tour--header__rating .detail__liveshow--content__left--rating__start span{
    font-size: var(--size-text-5);
}
.vehicle .detail__tour--header__info span{
    color: var(--color-background-7);
    font-weight: 500;
}
.vehicle .detail__tour--header__info{
gap: 5px;
display: flex;
color: var(--color-background-7) !important;
}
.vehicle .detail__liveshow--content__left--rating__count{
    font-size: var(--size-text-4);
    padding-bottom: 0;
}
.vehicle  .detail__tour--header__link a,
.vehicle  .detail__tour--header__link{
    font-size: var(--size-text-4);
    color: var(--color-background-2) !important;
}
.vehicle .detail__tour--header{
    padding-bottom: 20px;
}
.vehicle .detail__tour--header__title{
    padding: 0;
}
.vehicle .detailTour__services--body__list--wrap{
    margin: 15px;
    padding: 10px;
}
.vehicle .detailTour__services--body__list--wrap__item--right__body--info__left--name{
    font-weight: 500;
    color: var(--color-text-10);
}
.vehicle .detailTour__services--body__list--wrap__item--right__body--info__left--rate{
    padding: 0;
}
.archive__vehicle .firstProduct__info .firstProduct__info--top__score span{
    font-size: var(--size-text-4);
}
.archive__vehicle .firstProduct__info .firstProduct__info--top__score .firstProduct__info--top__score--review{
 padding-left: 5px;
}
.archive__vehicle .firstProduct__info--bottom{
    margin: 0;
}
.archive__vehicle .firstProduct__info--bottom__content--box{
    color: var(--color-text-7);
    font-size: var(--size-text-5);
    font-weight: 500;
    float: right;
    margin-top: 10px;
    margin-bottom: 10px;
}
.archive__vehicle .firstProduct__info--top__score span:nth-child(2),
.archive__vehicle .firstProduct__info--top__score span:nth-child(1){
    font-size: 12px;
    font-size: var(--size-text-4);
    font-weight: 500;
    color: var(--color-text-5);
}
.archive__vehicle .firstProduct__info--top__score span:nth-child(2) ion-icon{
    font-size: 12px;
}
.archive__vehicle .firstProduct__content--list__item--wrap{
    border-radius: var(--border-radius-size-1);
}
.vehicle-cat-sub{
    border: 1px solid var(--color-text-7);
    padding: 3px 15px 5px 15px;
    border-radius: 20px;
    color: var(--color-text-7) !important;
    font-size: var(--size-text-5);
}
.vehicle-cat{
    width: 100%;
    overflow-x: scroll;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    overflow: hidden;
}

@media (max-width: 1240px) {
    .motorbike__container--content {
        padding: 0 30px;
    }
   .vehicle .detailTour__services--body__list--wrap__item--left__img img{
        min-width: 400px;
    }
}
@media (max-width: 940px) {
    .vehicle .detailTour__services--body__list--wrap__item{
        gap: 5px;
    }
    .vehicle .detailTour__services--body__list--wrap__item--right__body--info__left--container{
        padding: 0;
    }
}
@media (max-width: 800px) {

    .vehicle .detail__tour--header__info {
        font-size: var(--size-text-5);
    }
    .vehicle .detailTour__services--body__list--wrap{
        margin: 10px 10px;
    }
}
@media (max-width: 740px) {
    .vehicle-cat{
        width: 100vw;
        overflow-x: scroll;
        display: flex;
        gap: 10px;
        margin-bottom: 10px;
    }
    .motorbike__container--content {
        padding: 0 15px;
    }
    .motorbike__container--content .firstProduct__content--list{
        padding: 0;
        gap: 10px
    }
    .motorbike__container--content .firstProduct__content--list__item{
        margin: 0;
        width: 48%;
    }
    .motorbike__container--content .firstProduct__info--top__title{
        font-size: var(--size-text-4);
    }
    .motorbike__container--content .motorbike__container--header{
        font-size: var(--size-text-6);
        margin: 10px 0;
    }

    .motorbike__container--banner__box a{
        font-size: 13px;
    }
    .motorbike__container--content .firstProduct__info--top__title{
        margin-bottom: 2px;
    }
    .motorbike__container--content .firstProduct__info--top__score--review{
        font-size: var(--size-text-4);
    }
    .motorbike__container--content .firstProduct__info--top__desc.text__overflow--main{
        margin-top: 5px;
    }
}

@media (max-width: 550px) {
    .vehicle .detail__tour--content{
        margin-top: 190px;
    }
    .motorbike__container--banner {

        height: 15rem;

    }
    .motorbike__container--content {
        padding: 0 10px;
    }
    .motorbike__container--banner__box--item a {
        padding: 10px;
    }

    .motorbike__container--header {
        margin: 5px 0;
    }

    .total__filter--list {
        width: 100vw !important;
        right: -20px !important;
    }

    .detail__car--container__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        padding: 10px 0;

    }

    .detail__car--container__item {
        width: 100%;
    }

    .detail__car--container__item--img {
        height: 40vw;
    }

    .checkouttour__container--right__bottom p:nth-child(1),
    p:nth-child(2) {

        font-size: var(--size-text-4) !important;
    }

    .detail__car--container__item--text__name {
        font-size: var(--size-text-4);
    }
}

@media (max-width: 400px) {
    .detail__car--container__list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        padding: 10px 0;

    }
}

@media (max-width: 300px) {
	
	.motorbike__container--content .firstProduct__content--list__item {
        margin: 0;
        width: 100%;
    }
	    .firstProduct__img img {
        height: 220px;
    }
}