/* SaoViettravel single-tour mobile UI refresh v1.3.0
 * Mobile-only overrides. Desktop remains untouched.
 */
@media (max-width: 767px) {
  html, body { overflow-x: hidden; }
  body { padding-bottom: 58px; background:#f4f7fb; }

  /* Page shell */
  .content-wrapper { background:#f4f7fb !important; }
  .content-wrapper > .container { width:100%; padding-left:14px; padding-right:14px; }
  .content-wrapper .content { overflow:visible; }
  .content-wrapper .row { margin-left:0; margin-right:0; }
  .mainContent,
  .tourDetailContainer,
  .tourDetailMainDiv { width:100% !important; float:none !important; padding-left:0 !important; padding-right:0 !important; }

  /* Breadcrumb: compact, readable, no 4-line wall of text */
  .content-header { padding:12px 0 8px; }
  .content-header .breadcrumb {
    display:flex;
    align-items:center;
    gap:0;
    margin:0;
    padding:0;
    background:transparent;
    white-space:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    font-size:12px;
    line-height:1.35;
  }
  .content-header .breadcrumb::-webkit-scrollbar { display:none; }
  .content-header .breadcrumb > li { display:inline-flex; align-items:center; flex:0 0 auto; color:#64748b; }
  .content-header .breadcrumb > li + li:before { padding:0 7px; color:#a6b0bd; content:"/"; }
  .content-header .breadcrumb > li:last-child { max-width:72vw; overflow:hidden; text-overflow:ellipsis; }
  .content-header .breadcrumb a { color:#52606d; text-decoration:none; }

  /* H1 */
  .pageTitle {
    margin:4px 0 14px !important;
    color:#0b479f !important;
    font-size:24px !important;
    font-weight:800 !important;
    line-height:1.25 !important;
    letter-spacing:-.25px;
  }

  /* Promotion badge */
  .promotion-label { width:100% !important; padding:0 !important; margin:0 0 8px; }
  .promotion-label .v-ribbon { position:static !important; display:inline-flex; width:auto; max-width:100%; }
  .promotion-label .v-ribbon span {
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-height:30px;
    padding:6px 12px !important;
    border-radius:999px !important;
    background:#e83b2e !important;
    color:#fff !important;
    box-shadow:none !important;
    font-size:13px !important;
    font-weight:700;
    line-height:1.25;
  }

  /* Hero image */
  .tourHeaderContainer { margin:0 0 12px !important; background:transparent !important; }
  .tourHeaderCover2 {
    position:relative;
    overflow:hidden;
    border-radius:14px;
    background:#eaf0f6;
    box-shadow:0 7px 24px rgba(25,55,95,.10);
  }
  .tourHeaderCover2 .img-chitettour {
    display:block;
    width:100% !important;
    height:auto !important;
    aspect-ratio:16 / 9;
    object-fit:cover;
    border-radius:14px;
  }

  /* Summary card */
  .tourHeaderContent {
    margin:10px 0 0 !important;
    padding:12px !important;
    border:1px solid #e5ebf2;
    border-radius:14px;
    background:#fff;
    box-shadow:0 6px 18px rgba(31,64,104,.06);
  }
  .tourHeaderInfo,
  .tourHeaderInfo > div,
  .tourHeaderInfo > div > div { padding-left:0 !important; padding-right:0 !important; }
  .tourHeaderInfo .row {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:0 !important;
  }
  .tourHeaderInfo .row > .item {
    float:none !important;
    width:auto !important;
    min-width:0;
    min-height:58px;
    margin:0 !important;
    padding:10px !important;
    border:1px solid #e8edf3;
    border-radius:10px;
    background:#fbfdff;
  }
  .tourHeaderInfo .row > .item:nth-child(n+5) { grid-column:1 / -1; }
  .tourHeaderInfo .item > span,
  .tourHeaderInfo .item .hint--top {
    display:flex !important;
    align-items:flex-start;
    gap:8px;
    width:100%;
    color:#263547 !important;
    font-size:13.5px !important;
    font-weight:600 !important;
    line-height:1.45 !important;
    text-align:left !important;
    white-space:normal !important;
  }
  .tourHeaderInfo .item img,
  .tourHeaderInfo .item svg {
    flex:0 0 auto;
    width:18px !important;
    height:18px !important;
    margin:1px 0 0 !important;
    object-fit:contain;
  }
  .tourHeaderInfo .item br { display:none; }

  /* Legacy mobile booking form is duplicated by the new departure UI */
  .mobile-booking-form { display:none !important; }

  /* Shared section card rhythm */
  .svt-description-section,
  .svt-departure-section,
  .svt-service-section,
  .svt-policy-section,
  #calendar-departure {
    width:100% !important;
    margin:0 0 12px !important;
    padding:0 !important;
  }
  .svt-policy-card,
  .svt-description-card,
  .svt-service-card,
  .svt-departure-shell,
  #calendar-departure > .svt-departure-wrap {
    border:1px solid #e5ebf2 !important;
    border-radius:14px !important;
    background:#fff !important;
    box-shadow:0 5px 16px rgba(31,64,104,.05) !important;
  }
  .tourDetailheadLine,
  .svt-policy-heading h2,
  .svt-section-heading h2,
  .svt-description-heading h2 {
    margin:0 !important;
    color:#0b479f !important;
    font-size:20px !important;
    font-weight:800 !important;
    line-height:1.3 !important;
    text-align:left !important;
  }
  .tourDetailheadLine { padding:14px 14px 8px !important; }
  .svt-policy-card { padding:14px !important; }
  .svt-policy-heading { gap:10px; margin-bottom:12px; }
  .svt-policy-heading p { font-size:13px !important; text-align:left !important; }
  .tourDetailContainer .tourDetailMainDiv p,
  .tourDetailContainer .tourDetailMainDiv ul,
  .tourDetailContainer .tourDetailMainDiv ol {
    font-size:15px !important;
    line-height:1.65 !important;
    text-align:left !important;
  }
  .tourDetailContainer .tourDetailMainDiv ul,
  .tourDetailContainer .tourDetailMainDiv ol { padding-left:20px; }

  /* Itinerary */
  .svt-itinerary-heading { padding:0 2px; margin-bottom:10px; }
  .svt-itinerary-heading .tourDetailheadLine { padding:0 !important; font-size:20px !important; }
  .svt-itinerary-toggle-all { min-height:34px; padding:6px 9px !important; border-radius:10px !important; font-size:12px !important; }
  .svt-tour-day { margin-bottom:9px !important; border-radius:12px !important; }
  .svt-tour-day__header { min-height:52px !important; padding:11px 12px !important; }
  .svt-tour-day__label { font-size:14px !important; }
  .svt-tour-day__title { font-size:14px !important; line-height:1.4 !important; }
  .svt-tour-day__meals { font-size:12px !important; }
  .svt-tour-day__body { padding:13px 12px !important; }
  .svt-tour-day__body img { width:100% !important; height:auto !important; border-radius:10px; }

  /* Departure UI */
  #calendar-departure { overflow:hidden; }
  .svt-departure-heading,
  .svt-departure-head,
  .svt-section-heading { padding-left:12px !important; padding-right:12px !important; }
  .svt-month-filter,
  .svt-departure-months {
    display:flex !important;
    gap:7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:4px 12px 10px !important;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .svt-month-filter::-webkit-scrollbar,
  .svt-departure-months::-webkit-scrollbar { display:none; }
  .svt-month-chip,
  .svt-departure-month-btn {
    flex:0 0 auto;
    min-width:78px;
    min-height:40px;
    border-radius:10px !important;
    font-size:12px !important;
  }
  .svt-departure-table,
  .svt-departure-list { width:100% !important; min-width:0 !important; }
  .svt-departure-item,
  .svt-departure-row {
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* Policies / services accordions */
  .svt-policy-accordion,
  .svt-service-accordion { border-radius:12px !important; overflow:hidden; }
  .svt-policy-item,
  .svt-service-item { border-color:#e8edf3 !important; }
  .svt-policy-item__head,
  .svt-service-item__head { min-height:48px; padding:12px !important; font-size:14px !important; }

  /* Related tours as a separate full-width block */
  #tourRelatedDiv {
    clear:both;
    width:100% !important;
    float:none !important;
    margin:14px 0 18px !important;
    padding:0 !important;
  }
  #tourRelatedDiv .panel-group,
  #tourRelatedDiv .panel,
  #tourRelatedDiv .panel-collapse,
  #tourRelatedDiv .panel-body { width:100% !important; margin:0 !important; }
  #tourRelatedDiv .panel {
    overflow:hidden;
    border:1px solid #e5ebf2 !important;
    border-radius:14px !important;
    background:#fff;
    box-shadow:0 5px 16px rgba(31,64,104,.05);
  }
  #tourRelatedDiv .panel-heading { padding:13px 14px !important; background:#fff !important; border:0 !important; }
  #tourRelatedDiv .panel-title a { color:#0b479f !important; font-size:17px !important; font-weight:800 !important; text-decoration:none !important; }
  #tourRelatedDiv .panel-body { padding:0 10px 12px !important; }
  #tourRelatedDiv .item-m { display:grid !important; grid-template-columns:1fr !important; gap:12px !important; margin:0 !important; }
  #tourRelatedDiv .item-m > [class*="col-"] { width:100% !important; float:none !important; padding:0 !important; }
  #tourRelatedDiv .cardItem { width:100% !important; padding:0 !important; border-radius:12px !important; overflow:hidden; }
  #tourRelatedDiv .cardItemImage figure,
  #tourRelatedDiv .cardItemImage img { width:100% !important; }
  #tourRelatedDiv .cardItemImage img { height:auto !important; aspect-ratio:3 / 2; object-fit:cover; }
  #tourRelatedDiv .cardItemTourName { font-size:16px !important; line-height:1.4 !important; }

  /* Remove duplicate legacy fixed booking bar; site mobile actionbar remains */
  .fixed-footer { display:none !important; }

  /* Floating messenger/zalo should stay above the fixed actionbar */
  .messall-icon { bottom:72px !important; right:10px !important; transform:scale(.78); transform-origin:bottom right; }
  .zaloall-icon { bottom:128px !important; right:10px !important; transform:scale(.78); transform-origin:bottom right; }
}

@media (max-width: 374px) {
  .pageTitle { font-size:22px !important; }
  .tourHeaderInfo .row { grid-template-columns:1fr; }
  .tourHeaderInfo .row > .item:nth-child(n) { grid-column:1; }
}