/* Trạm Vé responsive layout: shared public pages, 320px to wide desktop. */
*,*::before,*::after{box-sizing:border-box}
@media(max-width:1024px){
 .esim-product-layout{grid-template-columns:minmax(0,1fr) 280px!important}
 .site-nav,.topbar,.esim-header{gap:20px!important}
 .content-grid{grid-template-columns:210px minmax(0,1fr)}
 .room-group{grid-template-columns:200px minmax(0,1fr)}
}
@media(max-width:760px){
 html{scrollbar-gutter:auto!important}
 body{min-width:0;margin:0}
 .site-nav,.topbar,.esim-header,body:has(.hotel-detail)>header,body:has(#hotel-list)>header{height:auto!important;min-height:64px!important;display:flex!important;flex-wrap:wrap!important;justify-content:space-between!important;gap:0 12px!important;padding:8px 16px!important}
 .site-nav .nav-links,.topbar nav,.esim-header nav,body:has(#hotel-list)>header nav{order:3!important;flex:0 0 100%!important;width:100%!important;display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:24px!important;white-space:nowrap!important;padding:8px 0 4px!important;margin:0!important;scrollbar-width:none}
 .site-nav .nav-links a,.topbar nav a,.esim-header nav a,body:has(#hotel-list)>header nav a{display:inline-flex!important;flex-shrink:0;align-items:center;min-height:36px;font-size:13px!important;line-height:20px!important}
 img.tramve-logo{width:132px!important;height:48px!important;max-width:100%!important;object-fit:contain!important}
 .hero,.esim-catalog-hero{width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;border-radius:0!important}
 .hero-inner{padding-left:12px!important;padding-right:12px!important}
 .hero h1,.esim-catalog-hero h1{font-size:30px!important;line-height:1.2!important;letter-spacing:-.7px!important}
 .hero-heading p,.esim-catalog-hero p{font-size:14px!important;line-height:1.6!important}
 .esim-main{padding:24px 16px!important}
 .esim-product-layout{grid-template-columns:minmax(0,1fr)!important;gap:24px!important}
 .esim-summary,.co-summary{position:static!important;top:auto!important}
 .esim-toolbar,.esim-package-heading,.esim-title-row{flex-wrap:wrap;gap:12px}
 .esim-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .esim-plan{min-width:0;padding:16px 12px!important;flex-wrap:wrap;gap:8px!important}
 .esim-plan-price{font-size:16px!important;white-space:nowrap}
 .esim-destination-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
 .esim-destination{padding:16px 12px!important;gap:10px!important;min-width:0}
 .esim-destination h3{font-size:17px!important;line-height:1.3}
 .esim-destination img{width:34px!important;height:34px!important;flex-shrink:0}
 .esim-search{width:100%!important;max-width:100%!important;margin-left:auto!important;margin-right:auto!important}
 .esim-info-banner{padding:24px!important;flex-wrap:wrap;gap:16px}
 .esim-footer-columns{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .shell{padding:16px 12px!important;width:100%!important}
 .content-grid{grid-template-columns:minmax(0,1fr)!important;gap:16px}
 .filters{position:static!important;width:100%!important;max-height:none!important}
 .filter-box{margin-bottom:12px}
 .seat-content{gap:16px;min-width:0}
 .seat-summary{width:100%!important;max-width:none!important;min-width:0!important;position:static!important;margin:0!important}
 .floors{max-width:100%;overflow-x:auto}
 .trip-benefits,.trip-bottom,.trip-actions{flex-wrap:wrap;gap:10px}
 .bus-detail-tabs{overflow-x:auto;flex-wrap:nowrap;white-space:nowrap}
 .bus-detail-tabs button{flex-shrink:0;min-height:44px}
 .booking-points{grid-template-columns:minmax(0,1fr)!important}
 .point-options{min-height:120px;max-height:310px}
 .point-picker-head{flex-wrap:nowrap!important}
 .point-search{min-width:0!important}
 #checkout .co-top{height:auto!important;flex-wrap:wrap!important;padding:10px 16px!important;gap:12px!important}
 #checkout .co-steps{order:3;flex:0 0 100%;font-size:12px;line-height:1.6;text-align:center}
 #checkout .co-wrap{padding:24px 16px!important;width:100%!important}
 #checkout .co-grid{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
 #checkout .co-panel{padding:20px 16px!important}
 #checkout .co-person .co-fields,#checkout .co-fields{grid-template-columns:minmax(0,1fr)!important}
 #checkout .co-lead h1{font-size:28px!important}
 body:has(#hotel-list) .booking{margin:0 12px!important;padding:16px!important;width:auto!important}
 body:has(#hotel-list) .booking form{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 body:has(#hotel-list) .booking form .place,body:has(#hotel-list) .booking form>.primary{grid-column:1/-1!important}
 body:has(#hotel-list) .services{overflow-x:auto;justify-content:flex-start;gap:4px}
 body:has(#hotel-list) .services a{flex-shrink:0;min-width:72px;font-size:12px}
 .hotel-card{grid-template-columns:110px minmax(0,1fr)!important}
 .hotel-body{min-width:0;padding:14px!important}
 .hotel-bottom,.hotel-heading{flex-wrap:wrap;gap:10px}
 .room-group,.rate-option{grid-template-columns:minmax(0,1fr)!important}
 .gallery{grid-template-rows:150px 100px!important}
 .gallery.photos-1,.gallery.photos-2{grid-template-rows:230px!important}
 .amenity-groups{grid-template-columns:minmax(0,1fr)!important}
 dialog{max-width:calc(100vw - 24px)!important;max-height:calc(100dvh - 24px)!important;overflow:auto}
 input:not([type=radio]):not([type=checkbox]),select,textarea{font-size:16px!important;max-width:100%;min-width:0}
 button,a{touch-action:manipulation}
}
@media(max-width:420px){
 .esim-destination{flex-wrap:wrap!important}
 .esim-segments{display:flex;max-width:100%;overflow-x:auto}
 .esim-segments button{white-space:nowrap;font-size:12px!important;padding:10px 12px!important}
 .points-stage>.seat-summary{gap:10px}
 .points-stage>.seat-summary .selection-total{flex:0 0 100%;font-size:20px}
 .points-stage>.seat-summary .checkout-next{width:100%}
 .featured-grid,.destinations{grid-template-columns:minmax(0,1fr)!important}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media(max-width:760px){
 .esim-catalog-hero{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important}
 body:has(#hotel-list) .services,.transport-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;width:100%!important;gap:0!important;overflow:visible!important}
 body:has(#hotel-list) .services a,.transport-tab{min-width:0!important;width:auto!important;padding:12px 2px!important;gap:8px!important;font-size:11px!important;white-space:normal!important;text-align:center!important}
 body:has(#hotel-list) .services svg,.transport-tab svg{width:24px!important;height:24px!important}
}
/* Full-bleed eSIM hero follows the available page width, including scrollbars. */
.esim-page{container-type:inline-size}
.esim-catalog-hero{width:100cqw!important;max-width:none!important;margin-left:calc(50% - 50cqw)!important;margin-right:calc(50% - 50cqw)!important}
@media(min-width:761px) and (max-width:1024px){
 .site-nav,.topbar{gap:16px!important;padding-left:20px!important;padding-right:20px!important}
 .site-nav .nav-links,.topbar nav{gap:16px!important;min-width:0}
 .site-nav .nav-links a,.topbar nav a{font-size:12px!important}
 .tv-language{margin-left:auto!important}
 .tv-language>button>span:not(.tv-chevron){display:none}
}
@media(max-width:760px){
 .content-grid>.filters{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible!important;gap:12px;min-width:0}
 .filters .filter-box{width:auto!important;min-width:0!important;flex-basis:auto!important;margin:0}
 .filters select{width:100%}
 .trip-main{grid-template-columns:88px minmax(0,1fr)!important}
 .trip-main .trip-price{grid-column:1/-1;min-width:0}
}
@media(max-width:420px){.content-grid>.filters{grid-template-columns:1fr}}

/* Mobile booking actions remain reachable while choosing seats and stops. */
@media(max-width:760px){
 body:has(.seat-content){padding-bottom:180px}
 .seat-content>.seat-summary,.seat-content.points-stage>.seat-summary{position:fixed!important;inset:auto 0 0!important;z-index:1000;width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;border:0!important;border-top:1px solid #e3e7ed!important;border-radius:16px 16px 0 0!important;background:#fff!important;box-shadow:0 -5px 24px #172b4d14;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(155px,1.2fr);gap:8px 14px!important;align-items:center!important}
 .seat-content>.seat-summary>h3,.seat-content>.seat-summary>.seat-breakdown,.seat-content>.seat-summary>.seat-quantity{display:none!important}
 .seat-content>.seat-summary>.selection-total{grid-column:1;grid-row:1;margin:0!important;padding:0!important;border:0!important;font-size:16px!important;font-weight:750;line-height:24px;color:#151a21;white-space:normal!important}
 .seat-content>.seat-summary>.selection-total:before{content:'Tạm tính';display:block;font-size:12px;line-height:18px;font-weight:500;color:#525a65}
 .seat-content>.seat-summary>.checkout-next{grid-column:2;grid-row:1;width:100%!important;min-width:0!important;margin:0!important;min-height:48px!important;padding:10px!important;font-size:14px!important;line-height:20px!important;border-radius:9px;background:#ffd62d;color:#101820}
 .seat-content>.seat-summary>p:not(.sandbox-note):not(.seat-quantity){grid-column:1/-1;margin:0!important;font-size:12px!important;line-height:18px;text-align:center;color:#596372}
 .seat-content>.seat-summary>.points-back{grid-column:1/-1;justify-self:start;margin:0;padding:4px 0!important;min-height:28px!important;border:0;background:transparent;font-size:12px!important;line-height:20px!important;color:#1769e8}
 .seat-content>.seat-summary>.sandbox-note{grid-column:1/-1;margin:0;font-size:12px;line-height:18px;max-height:72px;overflow:auto;color:#a13b20}
 .seat-content>.seat-summary>.sandbox-note:empty{display:none}
 .seat-content{padding-bottom:20px}
}
/* Stable navigation and keyboard-safe mobile forms. */
body>header:has(.site-nav){position:sticky!important;top:0;z-index:100;background:#fff}
@media(max-width:760px){
body>header:has(.site-nav){box-shadow:0 1px 8px #10233e0a;backdrop-filter:none!important}
.site-nav .nav-links{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.site-nav .nav-links::-webkit-scrollbar{display:none}
input,select,textarea,.point-address,.point-search{font-size:16px!important}
.m-booking .point-address{scroll-margin:140px 0 210px}
.m-booking:has(input:focus) .seat-summary{position:static!important;inset:auto!important;margin-top:24px;box-shadow:none!important}
.m-booking:has(input:focus){padding-bottom:32px!important;scroll-padding-bottom:40px}
.m-booking{scroll-behavior:auto!important;overscroll-behavior-y:contain}
.co-contact label:has(input[name=contactEmail]){grid-column:1/-1}
button,a,input{-webkit-tap-highlight-color:transparent}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important}}

#bus-search label:nth-child(-n+2):before{content:""!important;width:20px;height:24px;top:16px!important;background:currentColor;color:#2474ed;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='1.8' d='M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.7' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") center/contain no-repeat}
#bus-search label:nth-child(2):before{color:#ef555d}
#bus-search .bus-route-swap{position:absolute!important;right:-17px;top:11px;z-index:5;width:32px!important;min-width:32px!important;height:32px!important;padding:7px!important;margin:0!important;background:#f3f5f8!important;border:1px solid #e0e6ee!important;border-radius:50%!important;color:#25364b!important;box-shadow:0 2px 5px #1020300a!important;cursor:pointer}
.bus-route-swap svg{width:16px;height:16px;display:block}
@media(max-width:800px){#bus-search .bus-route-swap{right:-22px;top:12px}}

/* Persistent page navigation */
body>header,.esim-header,.co-top{position:sticky!important;top:0!important;z-index:100;background:#fff}