/* TRG02 – Taxi Rạch Giá UI/UX Foundation
   Scope: frontend only. Goal: one 1280px visual rail, predictable gutters,
   stable header/footer/cards and safe responsive behavior after Hybrid migration. */
:root{--taxi-container:1280px;--shell:1280px}

/* 1. Canonical 1280 content rail. Do not use width:1280px; keep fluid gutters below viewport. */
.txs-shell,
.w11-pro-container,.container-main,.front-container,
.wt-container,.wt-market-container,.wt-detail-container,.wt-page-container,
.w2-commerce-container,.w2-container,.gx-container,.site-container,.page-container,
.ctcat-container,.ct5-container,.ct5-wide-related,
.posts-container,.footer-merge-container,
main.w11-pro-main>.container,main.w11-pro-main .container:not(.container-fluid){
  width:min(var(--taxi-container),calc(100% - 32px))!important;
  max-width:var(--taxi-container)!important;
  margin-left:auto!important;margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Generic Bootstrap container is normalized only inside known frontend roots. */
.taxi-service-site main .container:not(.container-fluid),
.taxi-service-site footer .container:not(.container-fluid),
.taxi-service-site header .container:not(.container-fluid){
  width:min(var(--taxi-container),calc(100% - 32px))!important;
  max-width:var(--taxi-container)!important;
  margin-left:auto!important;margin-right:auto!important;
}

/* Home uses the same rail as inner pages. */
.txm-home .txs-shell{width:min(var(--taxi-container),calc(100% - 32px))!important;max-width:var(--taxi-container)!important}
.txm-hero-media{width:min(var(--taxi-container),calc(100% - 32px))!important;max-width:var(--taxi-container)!important}

/* 2. Header: same brand/navigation rail on Home and inner pages. */
.txs-vf-shell{min-height:72px;gap:18px}
.txs-vf-left{min-width:0;gap:28px}
.txs-vf-desktop-menu{min-width:0}
.txs-vf-desktop-menu ul{gap:20px}
.txs-vf-menu-item>a{white-space:nowrap}
.txs-vf-right{flex:0 0 auto}
.txs-vf-hotline{white-space:nowrap;text-decoration:none}

/* 3. Shared rhythm: remove legacy width/padding drift after Hybrid merge. */
.wt-shop-container{padding-left:0!important;padding-right:0!important}
.txs-page-intro>.txs-shell{width:min(var(--taxi-container),calc(100% - 32px))!important;max-width:var(--taxi-container)!important;padding-left:0!important;padding-right:0!important}
.taxi-service-main{min-width:0;overflow:clip}
.taxi-service-main img{max-width:100%;height:auto}

/* Prevent cards / forms / tables from creating horizontal overflow. */
.taxi-service-main :where(.card,article,section,form,table,iframe,video){max-width:100%}
.taxi-service-main :where(input,select,textarea,button){max-width:100%}
.taxi-service-main :where(.wt-detail-description,.wt-shop-description,.txs-content,.post-content){overflow-wrap:anywhere}

/* 4. Homepage alignment + readable desktop proportions. */
.txm-section{scroll-margin-top:92px}
.txm-section-head{max-width:100%}
.txm-service-grid,.txm-route-grid,.txm-news-grid,.txm-benefits,.txm-book-grid{min-width:0}
.txm-service-card,.txm-route-card,.txm-news-card,.txm-activity-card{min-width:0}
.txm-service-card h3,.txm-route-card h3,.txm-news-card h3{overflow-wrap:anywhere}

/* 5. Footer follows the exact content rail. */
.txf-footer .txs-shell{width:min(var(--taxi-container),calc(100% - 32px))!important;max-width:var(--taxi-container)!important}

@media (max-width:1180px){
  .txs-vf-desktop-menu{display:none!important}
  .txs-vf-menu-toggle{display:inline-flex!important}
  .txs-vf-left{flex:1 1 auto}
}

@media (max-width:991.98px){
  .txs-shell,
  .w11-pro-container,.container-main,.front-container,
  .wt-container,.wt-market-container,.wt-detail-container,.wt-page-container,
  .w2-commerce-container,.w2-container,.gx-container,.site-container,.page-container,
  .ctcat-container,.ct5-container,.ct5-wide-related,.posts-container,.footer-merge-container,
  main.w11-pro-main>.container,main.w11-pro-main .container:not(.container-fluid),
  .taxi-service-site main .container:not(.container-fluid),
  .taxi-service-site footer .container:not(.container-fluid),
  .taxi-service-site header .container:not(.container-fluid),
  .txm-home .txs-shell,.txm-hero-media,.txf-footer .txs-shell{
    width:calc(100% - 24px)!important;max-width:none!important;
    margin-left:auto!important;margin-right:auto!important;
  }
  .txs-page-intro>.txs-shell{width:calc(100% - 24px)!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
}

@media (max-width:700px){
  .txs-vf-shell{width:calc(100% - 20px)!important;min-height:64px;gap:8px}
  .txs-vf-brand{min-width:0;flex:1 1 auto}
  .txs-vf-logo-box{max-width:112px}
  .txs-vf-logo-img{max-width:108px!important;max-height:40px!important}
  .txs-vf-logo-text{display:block;max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .txs-vf-right{gap:6px}
  .txs-vf-hotline{min-height:40px;padding:0 10px!important}
  .txs-vf-hotline-desktop-text{display:none!important}
  .txs-vf-hotline-mobile-text{display:inline!important;font-size:12px}
  .txs-vf-menu-toggle{width:40px!important;height:40px!important;min-width:40px!important}
  .txm-home .txs-shell,.txm-hero-media,.txf-footer .txs-shell{width:calc(100% - 24px)!important}
}

@media (max-width:560px){
  .txm-section{padding:34px 0!important}
  .txm-title{font-size:28px;line-height:1.12;letter-spacing:-.6px}
  .txm-subtitle,.txm-section-head>p{font-size:14px}
  .txm-service-card,.txm-route-card,.txm-news-card,.txm-activity-card{border-radius:14px}
}