/* TMN Mobile Responsive Fix - Sitewide 1.1.0 */
html, body { width:100%; max-width:100%; overflow-x:hidden !important; }
*, *::before, *::after { box-sizing:border-box; }
img, video, iframe, svg, canvas { max-width:100%; height:auto; }

/* Custom page families found in the backup. */
:is(.dlv26,.ag-tour-page,.ag-wrap,.tdmn-wrap,.tdmn-ct,.ct-page,.ct-wrap,.vl-page,.vl-wrap,.cm-page,.cm-wrap,.dn-page,.tn-page,.hcm-page,.dt-page,.ghep26,.svc26,.lh24-page,.tv-p) {
    max-width:100% !important;
    min-width:0 !important;
}

:is(.dlv26,.ag-tour-page,.ag-wrap,.tdmn-wrap,.tdmn-ct,.ct-page,.ct-wrap,.vl-page,.vl-wrap,.cm-page,.cm-wrap,.dn-page,.tn-page,.hcm-page,.dt-page,.ghep26,.svc26,.lh24-page,.tv-p) *,
#main *, .page-wrapper * { min-width:0; }

@media (max-width: 849px) {
    /* Flatsome/custom sections: never let rows be wider than the viewport. */
    #main .section,
    #main .section-content,
    #main .row,
    #main .row.row-collapse,
    #main .row.row-small,
    #main .row.row-large,
    .page-wrapper .row {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    #main .col,
    #main .col-inner,
    .page-wrapper .col,
    .page-wrapper .col-inner {
        max-width:100% !important;
        min-width:0 !important;
    }

    /* All custom grids: one readable column on phones/tablets instead of squeezed desktop columns. */
    :is(.dlv26,.ag-tour-page,.ag-wrap,.tdmn-wrap,.tdmn-ct,.ct-page,.ct-wrap,.vl-page,.vl-wrap,.cm-page,.cm-wrap,.dn-page,.tn-page,.hcm-page,.dt-page,.ghep26,.svc26,.lh24-page,.tv-p)
    :is([class*="-grid"],[class*="_grid"],[class*=" grid"],.grid,.service-grid,.location-grid) {
        grid-template-columns:minmax(0,1fr) !important;
        grid-auto-columns:minmax(0,1fr) !important;
        width:100% !important;
        max-width:100% !important;
    }

    /* Flex groups that were designed as desktop multi-column blocks. */
    :is(.dlv26,.ag-tour-page,.ag-wrap,.tdmn-wrap,.tdmn-ct,.ct-page,.ct-wrap,.vl-page,.vl-wrap,.cm-page,.cm-wrap,.dn-page,.tn-page,.hcm-page,.dt-page,.ghep26,.svc26,.lh24-page,.tv-p)
    :is([class*="-steps"],[class*="-features"],[class*="-cards"],[class*="-items"],[class*="-tabs"],[class*="-columns"],[class*="-cols"],[class*="-area"],[class*="-related"]) {
        max-width:100% !important;
        min-width:0 !important;
        flex-wrap:wrap !important;
    }

    /* Generic cards/boxes in custom templates. */
    :is(.dlv26,.ag-tour-page,.ag-wrap,.tdmn-wrap,.tdmn-ct,.ct-page,.ct-wrap,.vl-page,.vl-wrap,.cm-page,.cm-wrap,.dn-page,.tn-page,.hcm-page,.dt-page,.ghep26,.svc26,.lh24-page,.tv-p)
    :is([class*="-card"],[class*="-box"],[class*="-item"],[class*="-step"],[class*="-content"],[class*="-body"],[class*="-wrap"]) {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    /* An Giang page from screenshots. */
    .ag-tour-page .row > .col { flex-basis:100% !important; max-width:100% !important; width:100% !important; }
    .ag-experience-card,
    .ag-car-card,
    .ag-guide-card,
    .ag-faq-card,
    .ag-resource-card,
    .ag-booking-card,
    .ag-final-cta { width:100% !important; max-width:100% !important; }
    .ag-experience-card { display:block !important; }
    .ag-experience-card > * { width:100% !important; max-width:100% !important; }
    .ag-webp-gallery { grid-template-columns:minmax(0,1fr) !important; }
    .ag-final-cta { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:16px !important; }
    .ag-final-cta .ag-btn { width:100% !important; text-align:center !important; }

    /* DLV26 home/tour family. */
    .dlv26-tour-grid,
    .dlv26-services,
    .dlv26-fleet-grid,
    .dlv26-why-grid,
    .dlv26-discover-grid { grid-template-columns:minmax(0,1fr) !important; }
    .dlv26-tour,
    .dlv26-service,
    .dlv26-fleet-card,
    .dlv26-why-card,
    .dlv26-side { width:100% !important; max-width:100% !important; }

    /* Three/four step blocks such as 01-02-03. */
    :is(.ghep26-steps,.svc26-steps,.tdmn-steps,.dlv26-steps,.ag-steps,[class*="step-grid"],[class*="steps-grid"]) {
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        width:100% !important;
        max-width:100% !important;
        gap:12px !important;
    }
    :is(.ghep26-step,.svc26-step,.tdmn-step,.dlv26-step,.ag-step,[class*="-step"]) {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    /* Booking/search/form widgets. */
    :is(.tv-booking-container,.taxi-fare-plugin,.taxi-fare-plugin__container,.ttm-route-selector,.ag-booking-card,[class*="booking"],[class*="search-form"],[class*="trip-form"]) {
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }
    :is(.tv-booking-container,.taxi-fare-plugin,.ttm-route-selector,.ag-booking-card) :is(form,.form-row,.fields,.field-row,[class*="-grid"],[class*="-row"]) {
        max-width:100% !important;
        min-width:0 !important;
    }
    input, select, textarea, button {
        max-width:100% !important;
        min-width:0 !important;
    }
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea {
        width:100% !important;
    }

    /* Tables must scroll inside their own box. */
    :is(.bgtmn-table-wrap,.bgtmn-scroll,.table-responsive,.wp-block-table) {
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        -webkit-overflow-scrolling:touch;
    }
    table { max-width:100%; }

    /* Prevent huge inline widths and preserve readable text. */
    #main h1, #main h2, #main h3, #main h4, #main p, #main li, #main a, #main span, #main strong {
        overflow-wrap:anywhere;
        word-break:normal;
    }

    /* Keep floating contact buttons from covering the center of content. */
    #button-contact-vr,
    .button-contact-vr,
    [class*="button-contact-vr"],
    [id*="button-contact-vr"] {
        right:8px !important;
        left:auto !important;
        max-width:74px !important;
    }
}

@media (max-width: 549px) {
    /* Force Flatsome columns to one full-width column on real phones. */
    #main .row > .col,
    #main .row > [class*="col"],
    .page-wrapper .row > .col {
        flex:0 0 100% !important;
        flex-basis:100% !important;
        width:100% !important;
        max-width:100% !important;
    }

    #main .section { padding-left:0 !important; padding-right:0 !important; }
    #main .section-content { width:100% !important; max-width:100% !important; }
    #main .row { padding-left:10px !important; padding-right:10px !important; }

    /* Cards need enough horizontal room for normal Vietnamese text. */
    :is(.ag-experience-card,.ag-car-card,.ct-card,.cm-card,.vl-card,.dt-info-card,.tdmn-service-card,.dlv26-tour,.dlv26-service,.ghep26-box,.svc26-box) {
        padding-left:min(18px,4vw) !important;
        padding-right:min(18px,4vw) !important;
    }

    /* Floating buttons smaller on narrow devices. */
    #button-contact-vr,
    .button-contact-vr,
    [class*="button-contact-vr"],
    [id*="button-contact-vr"] { transform:scale(.82); transform-origin:right bottom; right:4px !important; }

    /* Headings should not inherit desktop fixed sizes. */
    #main h1 { font-size:clamp(28px,8vw,38px) !important; line-height:1.14 !important; }
    #main h2 { font-size:clamp(23px,6.6vw,32px) !important; line-height:1.2 !important; }
    #main h3 { font-size:clamp(19px,5.2vw,26px) !important; line-height:1.25 !important; }
}

/* v1.2.0 - hard mobile repair for custom page builders/templates */
@media (max-width: 549px) {
  /* Step/process blocks: never keep desktop 3/4 columns. */
  #main :is([class*="steps"],[class*="step-list"],[class*="process"],[class*="how-it-works"]) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important; max-width:100% !important;
  }
  #main :is([class*="steps"],[class*="step-list"],[class*="process"],[class*="how-it-works"]) > * {
    width:100% !important; max-width:100% !important; min-width:0 !important;
    writing-mode:horizontal-tb !important;
  }
  /* Cards discovered across route/province pages. */
  #main :is([class*="cards"],[class*="card-grid"],[class*="tour-grid"],[class*="route-grid"],[class*="destination-grid"],[class*="location-grid"],[class*="service-grid"],[class*="feature-grid"]) {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) !important;
    width:100% !important; max-width:100% !important;
  }
  #main :is([class*="cards"],[class*="card-grid"],[class*="tour-grid"],[class*="route-grid"],[class*="destination-grid"],[class*="location-grid"],[class*="service-grid"],[class*="feature-grid"]) > * {
    width:100% !important; max-width:100% !important; min-width:0 !important;
  }
  /* Form: leave a real gutter so controls cannot be clipped on the right. */
  #main :is(form,[class*="booking"],[class*="form-wrap"],[class*="booking-card"]) {
    width:100% !important; max-width:100% !important; min-width:0 !important;
  }
  #main :is(form,[class*="booking"],[class*="form-wrap"],[class*="booking-card"]) :is(input,select,textarea,button) {
    width:100% !important; max-width:100% !important; min-width:0 !important;
  }
  #main :is([class*="card"],[class*="box"]) p,
  #main :is([class*="card"],[class*="box"]) h2,
  #main :is([class*="card"],[class*="box"]) h3 {
    writing-mode:horizontal-tb !important;
    word-break:normal !important;
    overflow-wrap:break-word !important;
  }
}

/* v1.3.0 - booking alignment + readable fare tables */
@media (max-width: 549px) {
  /* Booking: center the whole card and preserve equal gutters. */
  #main :is(.ag-booking-card,.tv-booking-container,.taxi-fare-plugin,.taxi-fare-plugin__container,[class*="booking-card"],[class*="booking-form"],[class*="form-wrap"]) {
    display:block !important;
    width:calc(100% - 24px) !important;
    max-width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:14px !important;
    padding-right:14px !important;
    overflow:hidden !important;
  }
  #main :is(.ag-booking-card,.tv-booking-container,[class*="booking-card"],[class*="booking-form"]) form,
  #main :is(.ag-booking-card,.tv-booking-container,[class*="booking-card"],[class*="booking-form"]) :is(.field,.form-group,.form-row,[class*="field"],[class*="form-row"]) {
    width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important;
  }
  #main :is(.ag-booking-card,.tv-booking-container,[class*="booking-card"],[class*="booking-form"]) :is(input,select,textarea,button) {
    width:100% !important; max-width:100% !important; margin-left:0 !important; margin-right:0 !important;
  }
  #main :is(.ag-booking-card,.tv-booking-container,[class*="booking-card"],[class*="booking-form"]) button,
  #main :is(.ag-booking-card,.tv-booking-container,[class*="booking-card"],[class*="booking-form"]) [type="submit"] {
    white-space:normal !important; line-height:1.2 !important; height:auto !important; min-height:54px !important;
  }

  /* Fare tables: undo global anywhere-breaking that split prices into 1.83 / 7.00 / 0đ. */
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll,.wp-block-table,.table-responsive) {
    width:100% !important; max-width:100% !important;
  }
  #main :is(.bgtmn-table-wrap,.bgtmn-scroll,.wp-block-table,.table-responsive) {
    overflow-x:auto !important; overflow-y:hidden !important; -webkit-overflow-scrolling:touch;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) table {
    width:100% !important; min-width:0 !important; table-layout:fixed !important; border-collapse:collapse !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th,
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td {
    overflow-wrap:normal !important; word-break:normal !important; hyphens:none !important;
    padding:12px 7px !important; vertical-align:middle !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th:first-child,
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:first-child { width:42% !important; text-align:left !important; }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th:not(:first-child),
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child) { width:29% !important; text-align:center !important; }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child),
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child) * {
    white-space:nowrap !important; overflow-wrap:normal !important; word-break:keep-all !important;
    font-size:clamp(16px,4.4vw,20px) !important; line-height:1.25 !important; letter-spacing:-.2px !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th {
    font-size:clamp(13px,3.7vw,17px) !important; line-height:1.12 !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:first-child {
    font-size:clamp(14px,4vw,18px) !important; line-height:1.3 !important;
  }
}


/* v1.4.0 - widen booking form + compact mobile fare numbers */
@media (max-width: 549px) {
  /* Only size the OUTER booking card. Do not repeatedly shrink inner booking/form elements. */
  #main .ag-booking-card,
  #main .tv-booking-container,
  #main .taxi-fare-plugin,
  #main .taxi-fare-plugin__container {
    width: calc(100% - 8px) !important;
    max-width: calc(100% - 8px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    overflow: visible !important;
  }

  /* Inner booking structures always use the full available width. */
  #main .ag-booking-card :is(form,[class*="booking-form"],[class*="form-wrap"],.tv-booking-container),
  #main .tv-booking-container :is(form,[class*="booking-form"],[class*="form-wrap"]),
  #main .taxi-fare-plugin :is(form,[class*="booking-form"],[class*="form-wrap"]) {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #main .ag-booking-card :is(.field,.form-group,.form-row,[class*="field"],[class*="form-row"]),
  #main .tv-booking-container :is(.field,.form-group,.form-row,[class*="field"],[class*="form-row"]) {
    width: 100% !important;
    max-width: 100% !important;
  }

  #main .ag-booking-card :is(input,select,textarea,button),
  #main .tv-booking-container :is(input,select,textarea,button) {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Price table: keep full prices on one line, but use smaller type so columns do not collide. */
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) table {
    table-layout: fixed !important;
    width: 100% !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th:first-child,
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:first-child {
    width: 38% !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th:not(:first-child),
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child) {
    width: 31% !important;
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child),
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child) * {
    white-space: nowrap !important;
    font-size: 13px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.45px !important;
    font-weight: 700 !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th:not(:first-child) {
    font-size: 11px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.2px !important;
    padding-left: 3px !important;
    padding-right: 3px !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:first-child {
    font-size: 13px !important;
    line-height: 1.28 !important;
    padding-left: 8px !important;
    padding-right: 6px !important;
  }
}

@media (max-width: 380px) {
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child),
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) td:not(:first-child) * {
    font-size: 12px !important;
    letter-spacing: -0.55px !important;
  }
  #main :is(.bgtmn-wrap,.bgtmn-front,.bgtmn-table-wrap,.bgtmn-scroll) th:not(:first-child) {
    font-size: 10px !important;
  }
}