.flights-trend-card-wrapper {
    position: relative;
    border-radius: 8px;
    padding: 0 0 24px;
  }
  .flights-trend-title {
    color: #0f294d;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 0;
    margin-bottom: 8px;
    @media screen and (max-width: 768px) {
      olor: #0f294d;
      font-size: 18px;
      font-weight: 700;
      line-height: 24px;
      margin-bottom: 4px;
    }
  }
  .flights-trend-desc {
    color: #0f294d;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    @media screen and (max-width: 768px) {
      color: #455873;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      margin-bottom: 12px;
    }
  }
  .trenditem-percentage {
    height: 32px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 32px;
    background: #06aebd;
    border-radius: 0 8px 0 12px;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 36px 0 8px;
    box-sizing: border-box;
  }
  .trenditem-percentage .down-icon {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
  }
  .trenditem-info .info-font {
    color: #455873;
    font-size: 14px;
  }

  @media screen and (max-width: 768px) {
    .flights-trend-card-wrapper {
      padding: 0px;
      background: #fff;
    }
  }

  .dsp,
  .flights-trend-card-wrapper .title,
  .flights-trend-group-wrapper {
    z-index: 1;
    position: relative;
  }

  .flights-trend-card-wrapper .title {
    margin: 24px 24px 0;
    padding-top: 24px;
  }

  @media screen and (max-width: 768px) {
    .flights-trend-card-wrapper .title {
      margin: 0;
      padding-top: 20px;
    }
  }

  .flights-trend-card-wrapper .dsp {
    color: #051a37;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    margin: 16px 0 0;
    padding-left: 24px;
    box-sizing: border-box;
    max-width: calc(100% - 400px);
  }

  @media screen and (max-width: 768px) {
    .flights-trend-card-wrapper .dsp {
      margin: 0 0 12px;
      padding-left: 0;
      font-size: 14px;
    }
  }

  .flights-trend-card-wrapper .text-overflow-1 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    line-break: anywhere;
  }

  @media screen and (max-width: 768px) {
    .flights-trend-card-wrapper .text-overflow-1 {
      margin: 0 0 8px;
      padding: 0;
      font-size: 18px;
      line-height: 24px;
    }
  }

  .flights-trend-card-wrapper .text-overflow-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-break: anywhere;
  }

  .flights-trend-bg-wrapper {
    position: absolute;
    top: -28px;
    overflow: hidden;
    width: 100%;
    height: 100%;
    z-index: 0;
    border-radius: 8px;
    background-position: 100% 0;
    background-size: auto 360px;
    background-repeat: no-repeat;
  }

  .flights-trend-group-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0 16px;
  }

  .trend-item {
    width: calc(33.33% - 11px);
    border: 1px solid #f0f2f5;
    box-shadow: 0 4px 16px 0 rgba(15, 41, 77, 0.08);
    border-radius: 8px;
    margin: 8px 0;
    box-sizing: border-box;
    position: relative;
    padding: 0 16px 16px;
    cursor: pointer;
  }

  .trend-item:hover {
    box-shadow: 0 12px 24px 0 rgba(15, 41, 77, 0.08);
  }

  .trenditem-city {
    display: flex;
    align-items: center;
    margin-top: 32px;
  }

  @media screen and (max-width: 768px) {
    .trenditem-city {
      margin-top: 0;
    }
  }

  .trenditem-city .city-name {
    color: #0f294d;
    font-size: 18px;
    font-weight: 700;
  }

  @media screen and (max-width: 768px) {
    .trenditem-city .city-name {
      font-size: 16px;
    }
  }

  .trenditem-city-oneway {
    margin: 0 8px;
  }

  .trenditem-info {
    display: flex;
    align-items: center;
    margin-top: 8px;
  }

  .trenditem-info .info-font {
    color: #455873;
    font-size: 14px;
  }

  @media screen and (max-width: 768px) {
    .trenditem-info .info-font {
      color: #051a37;
    }
  }

  .trenditem-info-air {
    padding-right: 8px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .trenditem-info-air img {
    height: 16px;
    width: 16px;
    border-radius: 50%;
    margin-right: 4px;
  }

  .trenditem-info-oneway {
    padding: 0 8px;
    position: relative;
    white-space: nowrap;
  }

  .trenditem-info-oneway:after,
  .trenditem-info-oneway:before {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    background: #ced2d9;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .trenditem-info-oneway:after {
    right: 0;
  }

  .trenditem-info-oneway:before {
    left: 0;
  }

  .trenditem-info-economy {
    white-space: nowrap;
    padding-left: 8px;
  }

  .trenditem-dot {
    width: 100%;
    height: 60px;
    background-image: url(https://pages.trip.com/images/seo/pic_card_dot.png);
    background-size: 110% 100%;
    background-repeat: no-repeat;
    margin-top: 54px;
    position: relative;
  }

  .trenditem-dot .pic_card_left {
    position: absolute;
    left: 0;
    height: 60px;
    transform: translateX(-40%) translateY(-4px);
  }

  .trenditem-dot-round {
    width: 13px;
    height: 13px;
    background: #3264ff;
    border-radius: 50%;
    position: absolute;
    right: -6px;
    bottom: 14px;
  }

  .trenditem-dot-price {
    position: absolute;
    background: rgba(50, 100, 255, 0.08);
    bottom: 40px;
    right: 0;
    padding: 8px 30px 8px 8px;
    box-sizing: border-box;
    border-radius: 4px 4px 0 4px;
  }

  .trenditem-dot-price-date {
    color: #0f294d;
    font-size: 14px;
    font-weight: 400;
  }

  .trenditem-dot-price-num {
    color: #3264ff;
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
  }

  .trenditem-dot-price:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    right: 0;
    bottom: 0;
    transform: translateY(100%);
    z-index: 9999;
    border-color: transparent rgba(50, 100, 255, 0.08);
    border-style: solid;
    border-width: 0 9px 9px 0;
  }

  .trenditem-dot-price-arrow {
    width: 10px;
    height: 10px;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    border-right: 2px solid #3264ff;
    border-bottom: 2px solid #3264ff;
  }

  .trenditem-dot-oldprice {
    width: fit-content;
    background: #f0f2f5;
    position: absolute;
    top: -40px;
    border-radius: 4px 4px 4px 0;
    padding: 4px 8px;
    color: #0f294d;
    font-size: 14px;
    font-weight: 500;
    text-decoration: line-through;
  }

  .trenditem-dot-oldprice:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    bottom: -5px;
    border-color: transparent #f0f2f5;
    border-style: solid;
    border-width: 0 0 5px 5px;
  }

  .view-all-flights {
    text-align: center;
    margin-top: 24px;
    position: relative;
    z-index: 1;
  }

  @media screen and (max-width: 768px) {
    .view-all-flights {
      padding: 0 12px;
    }
  }

  .view-all-btn {
    color: #3264ff;
    font-size: 18px;
    display: inline-block;
    font-weight: 700;
    line-height: 24px;
    border: 1px solid #3264ff;
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    min-width: 440px;
  }

  @media screen and (max-width: 768px) {
    .view-all-btn {
      width: 100%;
      min-width: unset;
      box-sizing: border-box;
      font-size: 16px;
      padding: 12px;
      line-height: 21px;
    }
  }

  .trenditem-cheapest-priceTag {
    color: #fff;
    font-size: 10px;
    position: absolute;
    left: 0;
    top: 0;
    min-width: 50px;
    padding-left: 8px;
    padding-right: 8px;
    height: 20px;
    border-radius: 10px 0 4px 0;
    background: linear-gradient(75.17deg, #27cfd0, #06aebd);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .trendh5item,
  .trendh5item-last,
  .trendh5item-sp {
    border: 1px solid #f0f2f5;
    box-shadow: 0 4px 16px 0 rgba(15, 41, 77, 0.08);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer;
    display: block;
  }

  .trendh5item-arrow,
  .trendh5item-last-arrow,
  .trendh5item-sp-arrow {
    width: 12px;
    height: 12px;
  }

  .trendh5item-down,
  .trendh5item-last-down,
  .trendh5item-sp-down {
    width: 16px;
    height: 16px;
  }

  .trendh5item-last-title,
  .trendh5item-sp-title,
  .trendh5item-title {
    color: #0f294d;
    letter-spacing: 0;
    font-size: 12px;
    line-height: 18px;
    font-weight: 500;
    padding: 0 30px;
    text-align: center;
    min-height: 36px;
    display: flex;
    align-items: center;
  }

  .trendh5item-last-wrap,
  .trendh5item-sp-wrap,
  .trendh5item-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .trendh5item-button,
  .trendh5item-last-button,
  .trendh5item-sp-button {
    height: 28px;
    border-radius: 4px 4px 4px 4px;
    background: #3264ff;
    padding: 5px 12px;
    display: flex;
    box-sizing: border-box;
    margin-top: 7px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 18px;
    font-weight: 500;
    color: #fff;
  }

  .trendh5item-last-spcard,
  .trendh5item-sp-spcard,
  .trendh5item-spcard {
    background: #feeeeb;
    border-radius: 2px 2px 2px 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px;
    margin-top: 4px;
  }

  .trendh5item-last-spcard-text,
  .trendh5item-sp-spcard-text,
  .trendh5item-spcard-text {
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    letter-spacing: 0;
    color: #ec3c77;
  }

  .trendh5item-inner,
  .trendh5item-last-inner,
  .trendh5item-sp-inner {
    display: flex;
    justify-content: space-between;
  }

  .trendh5item-last-left-city,
  .trendh5item-left-city,
  .trendh5item-sp-left-city {
    display: flex;
    align-items: center;
    color: #0f294d;
    font-size: 16px;
    font-weight: 700;
  }

  .trendh5item-last-left-city-oneway,
  .trendh5item-left-city-oneway,
  .trendh5item-sp-left-city-oneway {
    margin: 0 4px;
  }

  .trendh5item-last-left-info,
  .trendh5item-last-left-info-sp,
  .trendh5item-left-info,
  .trendh5item-left-info-sp,
  .trendh5item-sp-left-info,
  .trendh5item-sp-left-info-sp {
    display: flex;
    align-items: center;
    margin-top: 4px;
  }

  .trendh5item-last-left-info-date,
  .trendh5item-last-left-info-sp-date,
  .trendh5item-left-info-date,
  .trendh5item-left-info-sp-date,
  .trendh5item-sp-left-info-date,
  .trendh5item-sp-left-info-sp-date {
    padding-right: 4px;
  }

  .trendh5item-last-left-info-oneway,
  .trendh5item-last-left-info-sp-oneway,
  .trendh5item-left-info-oneway,
  .trendh5item-left-info-sp-oneway,
  .trendh5item-sp-left-info-oneway,
  .trendh5item-sp-left-info-sp-oneway {
    padding: 0 4px;
    position: relative;
  }

  .trendh5item-last-left-info-oneway:after,
  .trendh5item-last-left-info-sp-oneway:after,
  .trendh5item-left-info-oneway:after,
  .trendh5item-left-info-sp-oneway:after,
  .trendh5item-sp-left-info-oneway:after,
  .trendh5item-sp-left-info-sp-oneway:after {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    background: #ced2d9;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .trendh5item-last-left-info-oneway:before,
  .trendh5item-last-left-info-sp-oneway:before,
  .trendh5item-left-info-oneway:before,
  .trendh5item-left-info-sp-oneway:before,
  .trendh5item-sp-left-info-oneway:before,
  .trendh5item-sp-left-info-sp-oneway:before {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    background: #ced2d9;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }

  .trendh5item-last-left-info-economy,
  .trendh5item-last-left-info-sp-economy,
  .trendh5item-left-info-economy,
  .trendh5item-left-info-sp-economy,
  .trendh5item-sp-left-info-economy,
  .trendh5item-sp-left-info-sp-economy {
    padding-left: 4px;
  }

  .trendh5item-last-left-info-sp,
  .trendh5item-left-info-sp,
  .trendh5item-sp-left-info-sp {
    filter: blur(2px);
  }

  .trendh5item-last-left .info-font,
  .trendh5item-left .info-font,
  .trendh5item-sp-left .info-font {
    color: #455873;
    font-size: 12px;
    font-weight: 400;
  }

  .trendh5item-last-left-air,
  .trendh5item-left-air,
  .trendh5item-sp-left-air {
    color: #455873;
    font-size: 12px;
    font-weight: 400;
    margin-top: 4px;
  }

  .trendh5item-last-left-air img,
  .trendh5item-left-air img,
  .trendh5item-sp-left-air img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 4px;
  }

  .trendh5item-last-left-air-sp,
  .trendh5item-left-air-sp,
  .trendh5item-sp-left-air-sp {
    display: none;
  }

  .trendh5item-last-right,
  .trendh5item-right,
  .trendh5item-sp-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .trendh5item-last-right-price,
  .trendh5item-last-right-price-sp,
  .trendh5item-right-price,
  .trendh5item-right-price-sp,
  .trendh5item-sp-right-price,
  .trendh5item-sp-right-price-sp {
    color: #3264ff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
  }

  .trendh5item-last-right-price-sp,
  .trendh5item-right-price-sp,
  .trendh5item-sp-right-price-sp {
    color: #ec3c77;
  }

  .trendh5item-last-right-oldprice,
  .trendh5item-right-oldprice,
  .trendh5item-sp-right-oldprice {
    color: #8592a6;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    text-decoration: line-through;
  }

  .trendh5item-last-right-percentage,
  .trendh5item-right-percentage,
  .trendh5item-sp-right-percentage {
    height: 22px;
    line-height: 22px;
    padding: 0 22px 0 4px;
    background: #06aebd;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
    position: relative;
  }

  .trendh5item-last-right-percentage img,
  .trendh5item-right-percentage img,
  .trendh5item-sp-right-percentage img {
    width: 16px;
    height: 17px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
  }

  .trendh5item-last-left-last,
  .trendh5item-last-right-last,
  .trendh5item-last-right-percentage-sp,
  .trendh5item-left-last,
  .trendh5item-right-last,
  .trendh5item-right-percentage-sp,
  .trendh5item-sp-left-last,
  .trendh5item-sp-right-last,
  .trendh5item-sp-right-percentage-sp {
    display: none;
  }

  .trendh5item-last {
    background-image: url(https://dimg04.tripcdn.com/images/1o10212000g5b8b9t1E76.png),
      url(https://dimg04.tripcdn.com/images/1o11t12000g59hs8205A7.png);
    background-position: 0 100%, 50%;
    background-size: contain, cover;
    background-repeat: no-repeat, no-repeat;
  }

  .trendh5item-last .inner {
    display: none;
  }

  .trendh5item-sp {
    border: 1px solid rgba(249, 76, 134, 0.32);
  }
  

  .trendh5emptyitem {
    background: #fff;
    border: 1px solid #f0f2f5;
    box-shadow: 0 4px 16px 0 rgba(15,41,77,.08);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
    cursor: pointer
}

.trendh5emptyitem:hover {
    border: 1px solid #3264ff
}

.trendh5emptyitem-container {
    display: flex;
    justify-content: space-between
}

.trendh5emptyitem-left {
    filter: blur(4px)
}

.trendh5emptyitem-left-city {
    display: flex;
    align-items: center;
    color: #0f294d;
    font-size: 16px;
    font-weight: 700
}

.trendh5emptyitem-left-city-oneway {
    margin: 0 4px
}

.trendh5emptyitem-left-info {
    display: flex;
    align-items: center;
    margin-top: 4px
}

.trendh5emptyitem-left-info-date {
    padding-right: 4px
}

.trendh5emptyitem-left-info-oneway {
    padding: 0 4px;
    position: relative
}

.trendh5emptyitem-left-info-oneway:after {
    right: 0
}

.trendh5emptyitem-left-info-oneway:after,.trendh5emptyitem-left-info-oneway:before {
    content: "";
    display: block;
    width: 1px;
    height: 8px;
    background: #ced2d9;
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}

.trendh5emptyitem-left-info-oneway:before {
    left: 0
}

.trendh5emptyitem-left-info-economy {
    padding-left: 4px
}

.trendh5emptyitem-left-air,.trendh5emptyitem-left .info-font {
    color: #455873;
    font-size: 12px;
    font-weight: 400
}

.trendh5emptyitem-left-air {
    margin-top: 4px
}

.trendh5emptyitem-left-air img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 4px
}

.trendh5emptyitem-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    filter: blur(4px)
}

.trendh5emptyitem-right-price {
    color: #3264ff;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px
}

.trendh5emptyitem-right-oldprice {
    color: #8592a6;
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
    text-decoration: line-through
}

.trendh5emptyitem-right-percentage {
    height: 22px;
    line-height: 22px;
    padding: 0 22px 0 4px;
    background: #06aebd;
    border-radius: 2px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-sizing: border-box;
    position: relative
}

.trendh5emptyitem-right-percentage img {
    width: 16px;
    height: 17px;
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%)
}

.trendh5emptyitem-nodata {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #3264ff;
    border-radius: 4px;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 18px;
    padding: 8px 52px;
    margin-top: 8px
}