/* P07 – Final UI/UX QA, Taxi Cai Lậy */
html,body{max-width:100%;overflow-x:hidden}
body.transport-native{min-width:0}
body.transport-native *,body.transport-native *::before,body.transport-native *::after{box-sizing:border-box}
body.transport-native main{min-width:0;overflow:clip}
body.transport-native img,body.transport-native svg,body.transport-native video{max-width:100%;height:auto}
body.transport-native h1,body.transport-native h2,body.transport-native h3,body.transport-native p,body.transport-native a,body.transport-native span{overflow-wrap:break-word}
body.transport-native a[href^="tel:"],body.transport-native a[href^="sms:"]{white-space:nowrap}
body.transport-native .tr-skip:focus{left:12px!important;top:12px!important;width:auto!important;height:auto!important;overflow:visible!important;z-index:99999;padding:10px 14px;background:#fff;color:#111;border-radius:8px;box-shadow:0 6px 24px rgba(0,0,0,.18)}

/* Header/chrome safety */
.tr-header-row,.tr-nav,.tr-header-actions,.tr-servicebar-inner{min-width:0}
.tr-nav a,.tr-nav button,.tr-servicebar a{white-space:nowrap}
.txng-contact-sheet__list small{font-variant-numeric:tabular-nums}

/* Footer: stable columns + verified contact block */
.trf61 .trf61-grid{grid-template-columns:minmax(280px,1.55fr) minmax(150px,.8fr) minmax(150px,.8fr) minmax(150px,.8fr)!important;gap:34px!important}
.trf61 .trf61-company,.trf61 .trf61-nav{min-width:0!important}
.trf61 .trf61-info,.trf61 .trf61-info a{max-width:100%;word-break:normal;overflow-wrap:anywhere}
.trf61 .trf61-list a span{word-break:normal!important;overflow-wrap:normal!important}
.trf-p07-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.trf-p07-social a{display:inline-flex;align-items:center;min-height:36px;padding:7px 11px;border:1px solid rgba(255,255,255,.18);border-radius:9px;text-decoration:none;color:inherit;font-size:13px;font-weight:700}
.trf-p07-social a:hover{background:rgba(255,255,255,.08)}

/* About/contact final contact links */
.p07-social-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.p07-social-links a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;border-radius:10px;border:1px solid rgba(15,23,42,.14);font-weight:700;text-decoration:none}
.transport-contact-p75 .p75-contact-side{min-width:0}
.transport-contact-p75 .p75-contact-method{min-width:0}
.transport-contact-p75 .p75-contact-method span{overflow-wrap:anywhere}

@media(max-width:980px){
  .trf61 .trf61-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)!important;gap:28px!important}
}
@media(max-width:720px){
  body.transport-native main{width:100%}
  .trf61 .trf61-grid{grid-template-columns:1fr!important;gap:24px!important}
  .trf61 .trf61-company{max-width:none!important}
  .trf-p07-social,.p07-social-links{gap:7px}
  .trf-p07-social a,.p07-social-links a{flex:0 0 auto}
  .p75-shell,.tr-shell{min-width:0}
  .p75-hero-grid,.p75-contact-grid,.p75-two,.p75-card-grid,.p75-service-grid,.p75-link-grid{min-width:0}
}

/* P08 – Sitewide 1280px container consolidation
 * Keep section backgrounds full-bleed; normalize only inner content axes.
 * Loaded last by layouts.transport, so it safely overrides P01/P04/P05/P06 legacy caps.
 */
:root{
  --tcl01-shell:1280px!important;
  --tcl-shell:1280px!important;
  --p02-shell:1280px!important;
  --p04-shell:1280px!important;
  --n74-shell:1280px!important;
  --p41-shell:1280px!important;
}

@media(min-width:992px){
  body.transport-native :is(
    .tr-shell,
    .tx37-shell,
    .tm29-shell,
    .tm72-shell,
    .p75-shell,
    .p77h-shell
  ),
  body.transport-native .trn74 .tr-shell,
  body.transport-native .tr-header-p47 .tr-header-row,
  body.transport-native .tm49-utility-inner,
  body.transport-native .tr-servicebar-p47 .tr-servicebar-inner,
  body.transport-native .trf61-inner{
    width:min(1280px,calc(100% - 40px))!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /* Header/footer use the same visual axis as page content. */
  body.transport-native .tr-header-p47 .tr-header-row,
  body.transport-native .tm49-utility-inner,
  body.transport-native .trf61-inner{
    width:min(1280px,calc(100% - 32px))!important;
  }

  /* Service navigation may keep zero inner gutter while respecting 1280 ceiling. */
  body.transport-native .tr-servicebar-p47 .tr-servicebar-inner{
    width:min(1280px,100%)!important;
  }
}

@media(max-width:991.98px){
  body.transport-native :is(.tr-shell,.tx37-shell,.tm29-shell,.tm72-shell,.p75-shell,.p77h-shell),
  body.transport-native .trn74 .tr-shell{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media(max-width:620px){
  body.transport-native :is(.tr-shell,.tx37-shell,.tm29-shell,.tm72-shell,.p75-shell,.p77h-shell),
  body.transport-native .trn74 .tr-shell{
    width:calc(100% - 24px)!important;
  }
}
/* P08 FIX1 — TAXI CAI LAY / SITEWIDE 1280 CONTAINER FINAL LOCK
 * Scope: all public pages rendered by layouts.transport.
 * Goal: one desktop content axis at 1280px while preserving full-bleed section backgrounds.
 */
:root{--taxicailay-shell-final:1280px;--taxicailay-gutter-desktop:40px}

/* Header / utility / service nav / footer: same axis as page content. */
body.transport-native :is(
  .tr-header-p47 .tr-header-row,
  .tm49-utility-inner,
  .tr-servicebar-p47 .tr-servicebar-inner,
  .trf61-inner
){
  width:min(var(--taxicailay-shell-final),calc(100% - var(--taxicailay-gutter-desktop)))!important;
  max-width:var(--taxicailay-shell-final)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Generic transport shells used by homepage, category, video, supporting and legacy child pages. */
body.transport-native :is(
  .tr-shell,
  .tx37-shell,
  .tr71-shell,
  .p77h-shell,
  .p75-shell,
  .tm72-shell
){
  width:min(var(--taxicailay-shell-final),calc(100% - var(--taxicailay-gutter-desktop)))!important;
  max-width:var(--taxicailay-shell-final)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Explicit page families — kept separate so future CSS cannot silently re-narrow them. */
body.transport-home-p01 .tr-shell,
body.transport-money-p72 .tm72-shell,
body.taxicailay-price-p04 .p75-shell,
body.taxicailay-p05-news-index .p77h-shell,
body.taxicailay-p05-news-detail .trn74 .tr-shell,
body.transport-about-p75 .p75-shell,
body.transport-contact-p75 .p75-shell,
body.transport-news-category-p35 .tr-shell,
body.transport-video-index-p37 .tx37-shell,
body.trsp73-page .trsp73 .tr-shell{
  width:min(var(--taxicailay-shell-final),calc(100% - var(--taxicailay-gutter-desktop)))!important;
  max-width:var(--taxicailay-shell-final)!important;
  margin-inline:auto!important;
  box-sizing:border-box!important;
}

/* Bootstrap containers if a child transport page uses them. */
body.transport-native main :is(.container,.container-sm,.container-md,.container-lg,.container-xl,.container-xxl){
  max-width:var(--taxicailay-shell-final)!important;
}

/* Tablet/mobile: never force desktop width; preserve safe edge gutters. */
@media(max-width:991.98px){
  :root{--taxicailay-gutter-desktop:28px}
}
@media(max-width:575.98px){
  :root{--taxicailay-gutter-desktop:24px}
}
/* P13 — Pricing + Booking Conversion Engine. Presentation only; price data stays Admin-owned. */
.taxicailay-price-p04 .p75-table td:not(:first-child){font-variant-numeric:tabular-nums;font-weight:800;color:#0c355d}
.taxicailay-price-p04 .p75-table td a{font-weight:900}
.taxicailay-price-p04 .p75-table tr:hover{background:#f7fbfe}
.transport-money-v2 .tm72-price{font-variant-numeric:tabular-nums}
.transport-money-v2 [data-p13-vehicle]{display:inline-flex;align-items:center;gap:6px}
.transport-money-v2 .tm72-book-card:target{outline:3px solid rgba(8,120,191,.12);outline-offset:4px}
@media(max-width:760px){.taxicailay-price-p04 .p75-table td:not(:first-child){display:flex;justify-content:space-between;gap:12px}.taxicailay-price-p04 .p75-table td:not(:first-child)::before{font-weight:700;color:#6a8192}}
/* P16 — media stability/performance contract */
.tcl-hero-visual picture,.tcl-hero-visual picture img{display:block;width:100%;height:100%}
.tcl-hero-visual picture img{object-fit:cover}
.p77h-feature-media img,.p77h-media img,.trn74-cover img,.tm72-media-card img{display:block;max-width:100%;object-fit:cover}
.p77h-feature-media img,.p77h-media img{aspect-ratio:16/9;width:100%;height:auto}
.trn74-cover img{aspect-ratio:40/21;width:100%;height:auto}
.tm72-media-card img{aspect-ratio:16/9;width:100%;height:auto}
@media (prefers-reduced-data:reduce){.p77h-media img,.tm72-media-card img{content-visibility:auto}}

/* P17 Core Web Vitals final layer: defer off-screen rendering without changing layout. */
@supports (content-visibility:auto){
  body.transport-home-p01 .tcl-home>section:nth-of-type(n+3),
  body.transport-money-v2 .tm72-page>section:nth-of-type(n+3),
  body.taxicailay-news-p77 .p77h-page>section:nth-of-type(n+3),
  body.transport-native .tr-footer{
    content-visibility:auto;
    contain-intrinsic-size:auto 760px;
  }
}
/* Preserve stable boxes while media decodes. */
body.transport-native img{height:auto}
body.transport-native img[width][height]{aspect-ratio:attr(width number)/attr(height number)}
/* Avoid expensive paint outside viewport while keeping sticky/fixed UI unaffected. */
body.transport-native .tm72-supporting-hub,
body.transport-native .trn74-related,
body.transport-native .trn74-links{contain:layout style paint}
@media (prefers-reduced-motion:reduce){
  body.transport-native *,body.transport-native *::before,body.transport-native *::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}