/* Landing pages — MOBILE ONLY (≤768px). Desktop uses index.css + original table layout. */

@media (max-width: 768px) {
  #page {
    margin: 0 !important;
    padding: 0 6px 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #top-header {
    display: none !important;
  }

  #page table,
  table#t1,
  table.t1,
  table[width="1680"],
  table[width="1680PX"],
  table[width="1680px"] {
    width: 100% !important;
    max-width: 100% !important;
  }

  #page table:has(> tr#GroupTour),
  #page table:has(> tr#Customize),
  #page table:has(> tr#FixDeparture) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #PageTitle td,
  #PageTitle1 td,
  #PageTitle4 td,
  tr#PageTitle td,
  tr#PageTitle4 td,
  tr#PageTitle1 td {
    position: static !important;
    font-size: clamp(13px, 3.6vw, 16px) !important;
    padding: 8px 6px !important;
    text-align: center !important;
  }

  tr#GroupTour,
  tr#Customize,
  tr#FixDeparture {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    width: 100% !important;
    padding: 4px 0 10px !important;
  }

  tr#GroupTour > th,
  tr#Customize > th,
  tr#FixDeparture > th {
    display: block !important;
    flex: 0 0 calc(50% - 6px);
    width: calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    min-width: 0;
    padding: 0 2px 8px !important;
    box-sizing: border-box;
  }

  tr#GroupTour > th[width="10px"],
  tr#GroupTour > th[width="12"],
  tr#Customize > th[width="10px"],
  tr#Customize > th[width="12"],
  tr#FixDeparture > th[width="10px"],
  tr#GroupTour > th:empty,
  tr#Customize > th:empty,
  tr#FixDeparture > th:empty {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
  }

  #GroupTour article,
  #Customize article,
  #FixDeparture article {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(15, 35, 70, 0.08) !important;
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  }

  #GroupTour article a,
  #Customize article a,
  #FixDeparture article a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
  }

  #GroupTour .img,
  #Customize .img,
  #FixDeparture .img {
    width: 100% !important;
    height: 76px !important;
    max-height: 76px !important;
    min-height: 76px;
    object-fit: cover;
  }

  #GroupTour center,
  #Customize center,
  #FixDeparture center {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    padding: 6px 8px 8px;
    text-align: left;
    line-height: 1.3;
  }

  #GroupTour hr,
  #Customize hr,
  #FixDeparture hr,
  #GroupTour center br,
  #FixDeparture center br,
  #Customize center br {
    display: none !important;
  }

  #GroupTour .Space1px,
  #GroupTour .Space4px,
  #GroupTour .Space13px,
  #GroupTour .SubTitile,
  #GroupTour .Destination,
  #FixDeparture .Space1px,
  #FixDeparture .Space4px,
  #FixDeparture .SubTitile,
  #FixDeparture .Destination,
  #Customize .price-small7,
  #Customize .price-small9 {
    display: none !important;
  }

  #GroupTour .DayNight,
  #FixDeparture .DayNight {
    display: inline-block;
    width: fit-content;
    padding: 2px 6px;
    border-radius: 4px;
    background: #0b1f3a;
    color: #fff !important;
    font-size: 9.5px !important;
    font-weight: 700;
  }

  #GroupTour .TourTitile,
  #FixDeparture .TourTitile,
  #Customize .TourHeading {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #1a4d8c !important;
    font-size: 11px !important;
    font-weight: 700;
    line-height: 1.25;
  }

  #GroupTour .SpecialNote,
  #FixDeparture .SpecialNote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #444 !important;
    font-size: 9.5px !important;
    line-height: 1.35;
  }

  #GroupTour .Night,
  #FixDeparture .Night {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    color: #5a4a2f !important;
    font-size: 9.5px !important;
    font-weight: 600;
    line-height: 1.35;
  }

  #GroupTour .price,
  #FixDeparture .price,
  #Customize .price-small2 {
    color: #0b1f3a !important;
    font-size: 10px !important;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2px;
  }

  #GroupTour .Food,
  #GroupTour .Hotels,
  #FixDeparture .Food,
  #FixDeparture .Hotels,
  #Customize .price-small1,
  #Customize .price-small3 {
    display: none !important;
  }

  #GroupTour .Departure,
  #FixDeparture .Departure {
    display: none !important;
  }

  #GroupTour .Date,
  #FixDeparture .Date {
    display: block;
    margin-top: auto;
    padding-top: 4px;
    border-top: 1px solid #eef2f6;
    color: #1a4d8c !important;
    font-size: 9px !important;
    font-weight: 600;
  }

  #fbplikebox,
  #fbplikebox2 {
    display: none !important;
  }

  .float,
  a.float {
    position: fixed !important;
    left: 10px !important;
    bottom: 14px !important;
    z-index: 9998;
  }
}

/* Wider phones: 3 compact cards per row */
@media (min-width: 520px) and (max-width: 768px) {
  tr#GroupTour > th,
  tr#Customize > th,
  tr#FixDeparture > th {
    flex: 0 0 calc(33.333% - 8px);
    width: calc(33.333% - 8px) !important;
    max-width: calc(33.333% - 8px) !important;
  }

  #GroupTour .img,
  #Customize .img,
  #FixDeparture .img {
    height: 70px !important;
    max-height: 70px !important;
    min-height: 70px;
  }
}

@media (max-width: 359px) {
  tr#GroupTour > th,
  tr#Customize > th,
  tr#FixDeparture > th {
    flex: 0 0 100%;
    width: 100% !important;
    max-width: 280px !important;
  }

  #GroupTour .img,
  #Customize .img,
  #FixDeparture .img {
    height: 90px !important;
    max-height: 90px !important;
    min-height: 90px;
  }
}