/*
 * VivuNow - Lịch khởi hành Mobile Fix
 * Chỉ tác động màn hình <= 767px.
 * Desktop giữ nguyên.
 *
 * Cài file này SAU CSS theme.
 * !important được dùng có chủ đích vì schedule CSS hiện đang nằm
 * inline trong Templates/collection.bwt và được khai báo sau các asset CSS.
 */

@media (max-width: 767px) {

  /* 1. Mỗi lịch chuyển từ 2 cột thành 1 cột:
        Meta
        Tên tour
        Giá
     => tên tour không còn chạy xuyên vào vùng giá.
  */
  .schedule-item {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "meta"
      "name"
      "price" !important;
    min-height: auto !important;
    padding: 13px 14px !important;
    column-gap: 0 !important;
    row-gap: 6px !important;
    align-items: start !important;
  }

  /* 2. Dòng thông tin khởi hành được phép xuống dòng,
        không còn phải kéo ngang trên điện thoại. */
  .schedule-meta {
    grid-area: meta !important;
    min-width: 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
    overflow: visible !important;
    overflow-x: visible !important;
    row-gap: 2px !important;
    line-height: 1.45 !important;
  }

  .sch-date,
  .sch-duration,
  .sch-airline {
    white-space: normal !important;
  }

  .sch-date {
    font-size: 15px !important;
  }

  .sch-duration,
  .sch-airline {
    font-size: 14px !important;
  }

  /* 3. Tên tour được xuống dòng tự nhiên.
        Đây là phần sửa trực tiếp lỗi "đè chữ". */
  .sch-name {
    grid-area: name !important;
    min-width: 0 !important;
    width: 100% !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  .sch-name a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
  }

  /* 4. Giá xuống riêng một dòng, căn phải.
        Không còn chiếm 145px cố định bên cạnh tên tour. */
  .sch-price-block {
    grid-area: price !important;
    min-width: 0 !important;
    width: 100% !important;
    padding-left: 0 !important;
    margin-top: 2px !important;
    text-align: right !important;
    justify-self: stretch !important;
    align-self: end !important;
    white-space: nowrap !important;
  }

  .sch-old-price {
    display: inline-block !important;
    margin-right: 6px !important;
    margin-bottom: 0 !important;
    font-size: 13px !important;
    line-height: 1.25 !important;
  }

  .sch-price {
    display: inline-block !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  /* 5. Màn hình rất hẹp: ưu tiên không làm vỡ bố cục. */
  @media (max-width: 380px) {
    .schedule-item {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    .sch-name a {
      font-size: 14px !important;
    }

    .sch-price {
      font-size: 17px !important;
    }
  }
}