@import "../../../../app/assets/less/variables";
.block_top_tour {
  .block-tour-item {
    width: 100%;
    border: @border-gray;
    border-radius: @border-radius-base;
    overflow: hidden;
    margin-bottom: 30px;
    min-height: 414px;
    @media (min-width: 992px) and (max-width: 1199.98px) {
      min-height: 436px;
    }
    .content-top {
      width: 100%;
      height: 204px;
      position: relative;
      overflow: hidden;
      &:hover {
        .block-img {
          transform: scale(1.2);
        }
      }
      .block-img {
        width: 100%;
        height: 100%;
        transition: all 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
        div {
          width: 100%;
          height: 100%;
          padding-bottom: calc(100% * 204 / 277);
          position: relative;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
            &.lazy {
              background-image: url("../images/giphy.gif");
              background-repeat: no-repeat;
              background-position: 50% 50%;
            }
          }
        }
      }
      .block-feature {
        position: absolute;
        top: 30px;
        left: 0;
        z-index: 10;
        width: 100%;
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        .label-feature {
          width: 80px;
          text-align: center;
          padding: 6px 10px;
          background-color: #19A1E5;
          visibility: hidden;
          &.visible {
            visibility: visible;
          }
          span {
            color: #ffffff;
            font-size: @font-size-base;
            font-weight: @font-weight-semibold;
          }
        }
        i {
          display: inline-block;
          font-size: @font-size-large;
          color: @text-color-4;
          margin-right: 30px;
        }
      }
      span.box-sale {
        position: absolute;
        width: 80px;
        height: 48px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        right: -30px;
        top: -13px;
        line-height: 65px;
        text-align: center;
        color: #fff;
        font-size: 15px;
        z-index: 8;
        background-color: #cc0033;
      }
    }
    .content-bottom {
      padding: 15px;
      min-height: 186px;
      .place-tour {
        font-size: @font-size-base;
        color: #5e6d77;
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        i {
          font-size: @font-size-base;
          display: inline-block;
          margin-right: 10px;
        }
      }
      h4.name-tour {
        font-size: @font-size-h4;
        font-weight: @font-weight-semibold;
        margin-bottom: 10px;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        height: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        a {
          color: @text-color-1;
        }
      }
      .block-rating {
        display: flex;
        flex-flow: row wrap;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        ul.list-rating-star {
          list-style: none;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin: 0 20px 0 0;
          .item-star {
            margin: 0;
            &+.item-star {
              margin-left: 5px;
            }
            i {
              font-size: @font-size-base;
              &.fas {
                color: #FFDC00;;
              }
              &.far {
                color: #D7DBE3;
              }
            }
          }
        }
        .rating-review {
          span {
            color: #768092;
          }
        }
      }
      .block-price-sale {
        width: 100%;
        text-align: right;
        min-height: 20px;
        span {
          font-size: @font-size-base;
          color: #cc0033;
          text-decoration: line-through;
        }
      }
      .block-trip-price {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        align-items: center;
        .time-trip {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          span {
            font-size: @font-size-base;
            color: #768092;
            display: inline-block;
            margin-left: 10px;
          }
          i {
            font-size: @font-size-base;
            color: #768092;
          }
        }
        .price-tour {
          & > span {
            &:first-child {
              font-size: @font-size-base;
              color:  #768092;
              display: inline-block;
              margin-right: 10px;
              i {
                color: #FA5636;
              }
              span {
                display: inline-block;
                margin-left: 5px;
              }
            }
            &:last-child {
              font-size: @font-size-medium;
              font-weight: @font-weight-bold;
              color: @text-color-1;
            }
          }
        }
      }
    }
  }
}