/* Go365 Common Styles — V2 baseline (Fraunces serif + warm cream) */ /* Font nạp qua /css/fonts.css (tự host) trong App.razor, TRƯỚC file này — bỏ @import cross-origin cũ vì nó nối chuỗi chặn render: legacy.css phải tải xong mới biết cần font. */ /* Metric-matched fallback fonts — kích thước khớp với web font thật (đo từ file font, vs Arial/Times) để khi font web nạp xong (display=optional) gần như KHÔNG còn giật layout (CLS). Đừng đổi số nếu không đo lại. */ @font-face{font-family:'Be Vietnam Pro Fallback';src:local('Arial');size-adjust:110.28%;ascent-override:90.68%;descent-override:24.03%;line-gap-override:0%} @font-face{font-family:'Spline Sans Mono Fallback';src:local('Arial');size-adjust:135.90%;ascent-override:70.90%;descent-override:17.40%;line-gap-override:0%} @font-face{font-family:'Fraunces Fallback';src:local('Times New Roman');size-adjust:107.77%;ascent-override:90.75%;descent-override:23.66%;line-gap-override:0%} /* brand tokens -> /css/brand-tokens.css (nguồn duy nhất) */ *{margin:0;padding:0;box-sizing:border-box} body{font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;color:var(--tx);font-size:14px;display:flex;flex-direction:column;min-height:100vh;background:var(--cr);overflow-x:hidden;-webkit-font-smoothing:antialiased} main{flex:1} a{text-decoration:none;color:inherit} .btn{display:inline-flex;align-items:center;gap:6px;padding:10px 18px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;border:none;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;transition:all .2s;white-space:nowrap;letter-spacing:.2px} .p{background:var(--or);color:#fff;box-shadow:0 4px 14px rgba(249,93,0,.28)} .p:hover{background:#d34d00;transform:translateY(-1px);box-shadow:0 6px 18px rgba(249,93,0,.36)} .tl{background:var(--t);color:var(--cr)}.tl:hover{background:var(--t-deep)} .ol{background:transparent;border:1.5px solid var(--t);color:var(--t)}.ol:hover{background:var(--t);color:var(--cr)} .ow{background:transparent;border:1.5px solid rgba(255,248,229,.7);color:#fff}.ow:hover{border-color:#fff} .sm{padding:7px 14px;font-size:11px} .card{background:var(--w);border-radius:18px;border:1px solid var(--line);box-shadow:0 1px 0 rgba(13,26,26,.04)} #pageInfo{display:none} #toursContainer,#esimContainer,#dmcContainer,#blogContainer{align-items:stretch} #toursContainer>a,#esimContainer>a,#dmcContainer>a,#blogContainer>a{display:flex;height:100%} #toursContainer>a>.card,#esimContainer>a>.card,#dmcContainer>a>.card,#blogContainer>a>.card{display:flex;flex-direction:column;width:100%;height:100%} #toursContainer>a>.card>div:last-child,#esimContainer>a>.card>div:last-child,#dmcContainer>a>.card>div:last-child,#blogContainer>a>.card>div:last-child{flex:1;display:flex;flex-direction:column} #toursContainer>a>.card>div:last-child>div:last-child,#esimContainer>a>.card>div:last-child>div:last-child,#dmcContainer>a>.card>div:last-child>div:last-child,#blogContainer>a>.card>div:last-child>div:last-child{margin-top:auto} .bd{display:inline-flex;align-items:center;gap:3px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700} .bt{background:var(--t4);color:var(--t-deep)}.bo{background:var(--terra-bg);color:var(--or-text)}.bgn{background:var(--gl);color:var(--gn)}.bpu{background:var(--pll);color:#8a5a00}.bgy{background:var(--sand);color:var(--gt)}.bdk{background:var(--t-deep);color:var(--cr)} .inp{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;font-size:13px;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;outline:none;width:100%;color:var(--ink);background:var(--w);transition:all .2s} .inp:focus{border-color:var(--t);box-shadow:0 0 0 4px rgba(1,89,89,.1)} .inp::placeholder{color:#b5a87a} .lbl{font-size:10px;font-weight:800;color:var(--t);text-transform:uppercase;letter-spacing:.8px;display:block;margin-bottom:6px} .stl{font-family:'Fraunces','Fraunces Fallback',serif;font-size:32px;font-weight:800;color:var(--t-deep);letter-spacing:-.5px;line-height:1.15} .stl span{color:var(--or-text);font-style:italic;font-weight:700} .sub{font-size:13px;color:var(--gt);margin-top:6px} .g4c{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .g2c{display:grid;grid-template-columns:1fr 1fr;gap:14px} table{width:100%;border-collapse:collapse} table th{text-align:left;padding:9px 12px;font-size:11px;font-weight:700;color:var(--gt);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--line);background:var(--sand)} table td{padding:9px 12px;border-bottom:1px solid var(--line);font-size:13px;vertical-align:middle} table tr:hover td{background:var(--sand)} /* Navigation */ nav{background:var(--t-deep);position:sticky;top:0;z-index:100;box-shadow:0 1px 0 rgba(236,220,181,.15)} .ni{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 28px;height:68px} .logo{display:flex;align-items:center;gap:11px} .lm{width:40px;height:40px;background:var(--cr);border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;color:var(--t-deep);font-family:'Fraunces','Fraunces Fallback',serif;flex-shrink:0} .lt{color:var(--cr);font-weight:800;font-size:18px;letter-spacing:.5px;font-family:'Fraunces','Fraunces Fallback',serif} .ls{color:var(--gd);font-size:9px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;display:block;line-height:1} .nl{display:flex;align-items:center;gap:2px} .nl a{color:rgba(255,248,229,.78);font-size:13px;font-weight:600;padding:8px 13px;border-radius:999px;transition:all .2s} .nl a:hover,.nl a.ac{background:rgba(255,248,229,.1);color:var(--cr)} .lsw{display:flex;gap:4px;background:rgba(255,248,229,.1);border-radius:999px;padding:4px} .lbtn{background:transparent;border:none;color:rgba(255,248,229,.65);font-size:11px;font-weight:700;padding:4px 8px;border-radius:999px;cursor:pointer;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;transition:all .2s} .lbtn.ac{background:var(--gd);color:var(--t-deep)} .mob-btn{display:none;background:transparent;border:none;cursor:pointer;padding:4px} .hdr-pill{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 13px;border-radius:999px;font-family:'Be Vietnam Pro','Be Vietnam Pro Fallback',sans-serif;font-size:12.5px;font-weight:700;color:#fff;text-decoration:none;white-space:nowrap;flex-shrink:0;transition:background .18s ease,border-color .18s ease,transform .18s ease;line-height:1} .hdr-pill-ghost{background:rgba(255,255,255,.08);border:1px solid transparent} .hdr-pill-ghost:hover{background:rgba(255,255,255,.14)} .hdr-pill-outline{background:transparent;border:1px solid rgba(255,255,255,.38);color:rgba(255,255,255,.92)} .hdr-pill-outline:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.6);color:#fff} .hdr-pill-primary{background:var(--or);border:1px solid var(--or);color:#fff;box-shadow:0 4px 12px rgba(249,93,0,.28)} .hdr-pill-primary:hover{background:#d34d00;border-color:#d34d00;transform:translateY(-1px)} @media(max-width:960px){.hdr-hide-md{display:none!important}} @media(max-width:600px){.hdr-hide-sm{display:none!important}} .mob-menu{display:none;position:absolute;top:68px;left:0;right:0;background:var(--t-deep);box-shadow:0 8px 24px rgba(0,60,60,.18);z-index:99;max-height:calc(100vh - 68px);overflow-y:auto} .mob-menu a,.mob-menu button{display:block;padding:13px 20px;border-bottom:1px solid rgba(255,248,229,.08);color:rgba(255,248,229,.85);font-size:14px;font-weight:600;text-decoration:none} .mob-menu a:hover,.mob-menu button:hover{background:rgba(255,255,255,.06);color:var(--cr)} /* Footer */ footer{background:var(--t-deep);padding:48px 24px 22px;margin-top:auto;color:var(--cr)} .fi{max-width:1240px;margin:0 auto} .fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:28px} .fd2{font-size:13px;color:rgba(255,248,229,.6);line-height:1.7;margin:10px 0} .fco{font-size:12px;color:rgba(255,248,229,.7);margin:5px 0} /* Owner chot 07/08: so dien thoai chan trang dung font may danh chu cho khop header. */ .fco strong{color:var(--gd);font-weight:700} /* Chi so dien thoai moi mono — .fco strong con boc ca dia chi (co chu Viet co dau). */ .fco a[href^="tel:"] strong{font-family:"Spline Sans Mono","Spline Sans Mono Fallback",monospace} .fc .fch{color:var(--cr);font-size:14.5px;font-weight:900;margin-bottom:12px;letter-spacing:0;font-family:'Fraunces','Fraunces Fallback',serif} .fc a{display:block;color:rgba(255,248,229,.55);font-size:12px;padding:4px 0;margin-bottom:3px;transition:color .2s}.fc a:hover{color:var(--gd)} .fb{border-top:1.5px dashed rgba(236,220,181,.22);padding-top:16px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .fcp{font-size:11px;color:rgba(255,248,229,.4);font-family:'Spline Sans Mono','Spline Sans Mono Fallback',ui-monospace,monospace} .cert{background:rgba(255,248,229,.06);border:1px solid rgba(236,220,181,.15);border-radius:999px;padding:5px 12px;font-size:10px;color:rgba(255,248,229,.55);display:inline-flex;align-items:center;gap:5px;margin-left:6px;font-family:'Spline Sans Mono','Spline Sans Mono Fallback',ui-monospace,monospace;letter-spacing:.01em} .hd-ic{width:15px;height:15px;flex:none} .ft-ic{width:13px;height:13px;flex:none} .mm-ic{width:17px;height:17px;vertical-align:-4px;margin-right:9px;flex:none} .fco .ft-ic{vertical-align:-2px;margin-right:5px} .cookie-mgr{appearance:none;-webkit-appearance:none;font:inherit;font-size:10.5px;font-weight:600;cursor:pointer;margin-left:0;line-height:1;letter-spacing:.2px} .cookie-mgr:hover{background:rgba(255,248,229,.12);color:rgba(255,248,229,.85);border-color:rgba(236,220,181,.3)} /* Tags */ .tag-hot{background:var(--or);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px} .tag-sale{background:var(--gd);color:var(--ink);font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px} .tag-rec{background:var(--t);color:var(--cr);font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px} .tag-inst{background:var(--gn);color:#fff;font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px} .tag-new{background:var(--gd);color:var(--ink);font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px} @media(max-width:900px){ .nl{display:none!important} .mob-btn{display:flex!important} .ni{padding:0 18px} .search-form-2,.search-form-3,.search-form-5{grid-template-columns:1fr} .swap-btn{align-self:flex-start} .featured-grid{grid-template-columns:repeat(2,1fr)} .why-us-grid{grid-template-columns:repeat(2,1fr)} .stats-inner{grid-template-columns:repeat(2,1fr)} .dmc-inner{flex-direction:column;text-align:center} .dmc-content{text-align:center} .dmc-buttons{justify-content:center} footer{padding:32px 18px 18px!important} .fg{grid-template-columns:1fr 1fr!important;gap:22px!important;margin-bottom:22px!important} .fg>div:first-child{grid-column:1 / -1} .fc .fch{margin-bottom:8px!important} .fc a{margin-bottom:6px!important;line-height:1.45} .fb{flex-direction:column;align-items:flex-start!important;gap:10px!important} .fb>div{display:flex;flex-wrap:wrap;gap:6px} .cert{margin-left:0!important} .fsoc{flex-wrap:wrap} } @media(max-width:600px){ body footer .fg{grid-template-columns:1fr 1fr!important;gap:22px 14px!important;margin-bottom:18px!important} body footer .fg > div:first-child{grid-column:1 / -1!important;margin-bottom:4px!important} body footer .fc .fch{font-size:12px!important;margin-bottom:8px!important;letter-spacing:.3px!important} body footer .fc a{font-size:11.5px!important;padding:4px 0!important;margin-bottom:1px!important;line-height:1.4!important} } @media(max-width:340px){ body footer .fg{grid-template-columns:1fr!important;gap:18px!important} } /* Policy table on /bus-results — DESKTOP only: scroll ngang, không bóp cột vertical. Mobile (≤640px) Razor đã convert table → card layout, nên KHÔNG cần min-width; nếu giữ min-width:560px sẽ tràn viewport + cắt chữ ở cột nội dung. */ @media(min-width:641px){ .policy-block table{min-width:560px} } @media(max-width:640px){ .policy-block table{min-width:0!important;width:100%!important} .pol-tbl-wrap{overflow-x:visible!important} } /* === Admin sidebar — V2 teal-deep === */ .sidebar{width:var(--sw);background:var(--t-deep);min-height:100vh;position:fixed;top:0;left:0;height:100vh;overflow-y:auto;z-index:50;display:flex;flex-direction:column} .sbl{padding:18px 18px 14px;border-bottom:1px solid rgba(236,220,181,.12);display:flex;align-items:center;gap:9px} .sbm{width:34px;height:34px;background:var(--cr);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:var(--t-deep);flex-shrink:0;font-family:'Fraunces','Fraunces Fallback',serif} .sbn{color:var(--cr);font-weight:800;font-size:16px;line-height:1} .sbs{color:rgba(255,248,229,.45);font-size:9px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-top:2px} .ssc{padding:14px 12px 3px;font-size:9px;font-weight:700;color:rgba(255,248,229,.3);text-transform:uppercase;letter-spacing:1.5px} .ssc-head{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none} .ssc-head.collapsed{color:rgba(255,248,229,.2)} .ssc-arrow{font-size:10px;transition:transform .2s} .ssc-group.hidden{display:none} .sb-sec .ssc:hover{color:rgba(255,248,229,.55)} .sb-sec.collapsed .sb-sec-items{display:none} .sb-sec.collapsed .ssc-arrow{transform:rotate(-90deg);opacity:.7} .sb-sec.collapsed .ssc{color:rgba(255,248,229,.45)} .si2{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:9px;margin:2px 7px;cursor:pointer;color:rgba(255,248,229,.6);font-size:12px;font-weight:600;transition:all .2s;text-decoration:none} .si2:hover{background:rgba(255,248,229,.1);color:var(--cr)} .si2.ac{background:rgba(41,179,182,.28);color:var(--cr)} .sic{font-size:15px;width:18px;text-align:center;flex-shrink:0} .sbdg{margin-left:auto;background:var(--or);color:#fff;font-size:10px;font-weight:800;padding:1px 6px;border-radius:9px} .sbdg.gd{background:var(--gd);color:var(--t-deep)} .sbdg.pu{background:var(--pu);color:var(--ink)} .sft{margin-top:auto;padding:12px;border-top:1px solid rgba(236,220,181,.12)} .su{display:flex;align-items:center;gap:9px;padding:7px 5px;border-radius:8px;cursor:pointer} .sav{width:32px;height:32px;border-radius:50%;background:var(--or);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0} .sun{color:var(--cr);font-size:12px;font-weight:700} .sur{color:rgba(255,248,229,.4);font-size:10px} .main{margin-left:var(--sw);flex:1;display:flex;flex-direction:column;min-width:0} @media(max-width:900px){ .sidebar{transform:translateX(-100%);transition:transform .3s ease;box-shadow:0 0 30px rgba(0,0,0,.3)} .sidebar.open{transform:translateX(0)} .main{margin-left:0!important} .tb{padding:0 14px!important} .tbt{font-size:14px!important} .con{padding:14px!important} .g2c,.g3c,.g4c{grid-template-columns:1fr!important} .mob-toggle{display:inline-flex!important;background:var(--t-deep);color:var(--cr);border:none;width:36px;height:36px;border-radius:8px;font-size:18px;cursor:pointer;align-items:center;justify-content:center;margin-right:8px} .sb-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:49} .sb-backdrop.show{display:block} .con table{min-width:640px} .con>div:has(table){overflow-x:auto} body{font-size:13px} .detail-panel{width:100%!important} } .mob-toggle{display:none} html, body { overflow-x: hidden; } /* Buyer tour-detail info cards (Danh mục / Điểm đến / Ngôn ngữ / Xác nhận) Mobile: 2×2 compact grid thay vì stack 1 cột chiếm hết màn hình. Override common.css :131 (.g4c → 1fr) + Razor inline @media(max-width:600px). */ @media(max-width:900px){ #infoCards.g4c{grid-template-columns:repeat(2,1fr)!important;gap:10px!important} #infoCards.g4c > .card{padding:10px 8px!important;text-align:center} #infoCards.g4c > .card > div:first-child{font-size:18px!important;margin-bottom:3px!important} #infoCards.g4c > .card > div:nth-child(2){font-size:9px!important;letter-spacing:.3px} #infoCards.g4c > .card > div:nth-child(3){font-size:12px!important;line-height:1.25;margin-top:2px!important} } /* Homepage search tabs — mobile: bigger icon + visible label (override SSR inline) */ @media(max-width:600px){ html[data-nav-active="home"] .search-container .tab-nav{ gap:5px!important;padding:7px!important;border-radius:16px 16px 0 0!important; } html[data-nav-active="home"] .search-container .tab-btn{ flex:1!important;display:flex!important;flex-direction:column!important; align-items:center!important;justify-content:center!important; gap:3px!important;padding:9px 4px!important; font-size:22px!important;line-height:1!important;border-radius:11px!important; min-height:58px; } html[data-nav-active="home"] .search-container .tab-btn span{ display:block!important;font-size:10.5px!important;font-weight:800!important; line-height:1.15!important;letter-spacing:.2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%; } html[data-nav-active="home"] .search-container .tab-btn:not(.active){ background:rgba(255,255,255,.55)!important; } html[data-nav-active="home"] .search-container .tab-btn.active{ transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(8,80,72,.55)!important; } } /* Homepage eSIM featured: chỉ hiện 4 thẻ (Razor đang slice(0,6); gỡ rule này sau khi build DLL slice(0,4)) */ #featuredEsimGrid > a:nth-child(n+5){display:none!important} /* 2026-05-16 — Homepage autocomplete dropdown bị form-group z-index:1 đè trên mobile. Nâng z-index của form-group đang focus/có dropdown mở để dropdown lên trên sibling sau. */ .search-container .form-group{z-index:1} .search-container .form-group:focus-within{z-index:50!important} .search-container .form-group:has(.autocomplete-list[style*="display:block"]), .search-container .form-group:has(.autocomplete-list[style*="display: block"]){z-index:60!important} .search-container .autocomplete-list{z-index:1000!important} /* 2026-05-16 — Mobile fix: ô input/date tràn màn hình homepage. Root cause: input[type=date] iOS render theo locale vi-VN "ngày 16 thg 5, 2026" → native min-content width có thể vượt parent dù width:100%. + .autocomplete-list width:calc(100%+20px) escape 20px. */ .search-container{overflow:hidden} .search-container .form-group{min-width:0} .search-container .form-group .inp, .search-container .form-group input[type="date"], .search-container .form-group input[type="text"], .search-container .form-group input{ width:100%!important;box-sizing:border-box!important; min-width:0!important;max-width:100%!important;flex:1 1 0%; } /* iOS Safari đặc biệt cho input[type=date]: force shrink + reset native styling */ .search-container .form-group input[type="date"]{ -webkit-appearance:none;appearance:none; -webkit-text-size-adjust:100%; } @media(max-width:600px){ .search-container .autocomplete-list{width:100%!important;left:0!important} .search-container .tab-content{padding:14px 10px!important} /* Giảm padding + dùng font 14px để rút gọn min-content width của native date picker */ .search-container .form-group input[type="date"]{ font-size:14px!important;padding:10px 10px!important; width:100%!important;min-width:0!important;max-width:100%!important; } .search-container .form-group .inp{padding:10px 12px!important} } /* 2026-05-16 — Bỏ nút FAB cam #hpV2-fab homepage (trùng chức năng với Zalo widget chính thức). User chốt: toàn web chỉ giữ Zalo plugin làm kênh hỗ trợ. */ #hpV2-fab, html[data-nav-active="home"] #hpV2-fab{display:none!important} /* 2026-05-16 — /bus-results compact mode (mobile): trang dài 4.6 screens + rời rạc do nhiều "đảo nền" (gradient header / date strip / section banner / vehicle row bg riêng / policy bg). Strategy: tight padding + thu hẹp header + thumb nhỏ + bỏ gradient header cảm giác đảo. */ @media(max-width:600px){ /* Card outer — bỏ border-radius outer + margin-bottom nhỏ → flatter feel */ #results-container .card{margin-bottom:10px!important;border-radius:10px!important} /* Route header — bỏ gradient sặc sỡ, padding rất chặt, ẩn deco circle */ #results-container .card > div:first-child[style*="gradient"]{ padding:10px 12px!important; background:var(--t)!important; background-image:none!important; } /* Ẩn deco circle absolute */ #results-container .card > div:first-child[style*="gradient"] > div[style*="position:absolute"]{display:none!important} /* Title div (first child of flex content wrapper) — font + margin */ #results-container .card > div:first-child[style*="gradient"] > div[style*="flex:1"] > div:first-child{ font-size:14px!important;margin-bottom:3px!important;line-height:1.3!important; } /* Review summary row — hide loading placeholder noise + tighten */ #results-container .card > div:first-child[style*="gradient"] > div[style*="flex:1"] > div[id^="review-summary-"]{ margin-bottom:4px!important;font-size:10.5px!important; } /* Duration/distance chip strip — ẩn trên mobile (đã có thông tin chuyến ở vehicle row) */ #results-container .card > div:first-child[style*="gradient"] > div[style*="flex:1"] > div[style*="display:flex"][style*="gap:6px"]{display:none!important} /* Price block in header */ #results-container .card > div:first-child[style*="gradient"] > div:last-child > div:nth-child(2){ font-size:18px!important;line-height:1.4!important; } #results-container .card > div:first-child[style*="gradient"] > div:last-child > div:first-child, #results-container .card > div:first-child[style*="gradient"] > div:last-child > div:last-child{font-size:9.5px!important} /* Date strip — padding nhỏ, day cards gọn */ #results-container .card > div[style*="border-top"][style*="background:var(--g1)"]{ padding:8px 10px!important; } /* Section banner (Xe ghép / Xe riêng) — rất gọn */ #results-container .card > div[style*="var(--t4)"][style*="border-top"], #results-container .card > div[style*="#fff0e8"][style*="border-top"]{ padding:5px 12px 2px!important; } /* Vehicle row container padding */ #results-container .card > div[style*="padding:12px 16px 6px"]{ padding:6px 8px 2px!important; } /* Vehicle row — tighter */ #results-container .card > div[style*="padding:12px 16px 6px"] > div{ padding:8px 8px!important; margin-bottom:6px!important; border-radius:8px!important; } /* Thumb 78→52 trên mobile */ #results-container .card img[alt][style*="width:78px"]{ width:52px!important;height:52px!important; } /* Operator tag font smaller */ #results-container .card span[style*="Vận hành"]{font-size:9.5px!important;padding:1px 6px!important} /* Amenity & seat badge nhỏ hơn */ #results-container .card span[style*="amen"], #results-container .card .amen-badge{font-size:10px!important;padding:1px 6px!important} /* Time-chip ngắn */ #results-container .card .time-chip{padding:4px 10px!important;font-size:11px!important} /* Schedule label "Giờ xuất phát:" ẩn icon thừa */ #results-container .card > div[style*="padding:12px 16px 6px"] > div > div[style*="margin-top:8px"]{gap:4px!important;margin-top:6px!important} /* Photo chip "📷 Xem N ảnh xe" – font nhỏ */ #results-container .card button[onclick*="openVehicleGallery"]{font-size:9.5px!important;padding:1px 7px!important} /* Vehicle name */ #results-container .card span[style*="font-size:13.5px"][style*="font-weight:800"]{font-size:12.5px!important} /* Policy block tighter */ .policy-block{padding:7px 10px!important;margin-top:8px!important} .pol-tbl-wrap{margin-top:6px!important} .pol-tbl td{padding:7px 8px!important} .pol-tbl td.pol-q{font-size:11.5px!important} .pol-tbl td.pol-n{font-size:11px!important;line-height:1.4!important} /* FAQ block tighter */ #results-container details[style*="border-top"]{padding:6px 0!important} /* Consultation box gọn */ .si > div[style*="background:var(--t4)"][style*="margin-top:18px"]{ padding:10px 12px!important;margin-top:10px!important; } } /* Desktop: giảm card margin-bottom nhẹ, không can thiệp gradient */ @media(min-width:601px){ #results-container .card{margin-bottom:14px} } /* 2026-05-16 — Social-proof toast (#hpV2-toast) ở bottom-left tràn rộng đè lên nút Zalo ở bottom-right trên mobile. Giữ toast ở bottom nhưng hẹp lại, chừa ~92px phải cho Zalo button. */ @media(max-width:600px){ html[data-nav-active="home"] #hpV2-toast{ bottom:14px!important; left:10px!important; right:auto!important; max-width:calc(100% - 96px)!important; /* leave 96px on right for Zalo */ padding:9px 12px 9px 9px!important; font-size:12px!important; } html[data-nav-active="home"] #hpV2-toast .av{width:32px!important;height:32px!important;font-size:13px!important} html[data-nav-active="home"] #hpV2-toast .tx{font-size:11.5px!important;line-height:1.35!important} html[data-nav-active="home"] #hpV2-toast .tx small{font-size:10px!important} } /* === 2026-05-15: autocomplete dropdown contrast boost ============== */ /* Override so dropdown trên homepage (busFrom/To/Tour/eSIM/DMC) đè rõ hơn field NGÀY ĐI ngay bên dưới — tránh cảm giác overlap nhoà. */ .autocomplete-list { background: #ffffff !important; border: 2px solid #015959 !important; box-shadow: 0 12px 36px rgba(0,0,0,.28), 0 0 0 1px rgba(1,89,89,.18), 0 2px 6px rgba(0,0,0,.12) !important; backdrop-filter: none !important; opacity: 1 !important; } .autocomplete-item { background: #ffffff !important; } .autocomplete-item:hover { background: #cdebec !important; } /* === Section header inside dropdown (split: 📍 Khu vực vs 🎯 Sản phẩm) === */ .autocomplete-list .ac-section{ display:block;font-size:11px;font-weight:700;letter-spacing:.04em; text-transform:uppercase;color:#015959;background:#f3fafa; padding:6px 12px;border-bottom:1px solid #d5ebec; } /* === Product suggestion row (thumb + name/dest + price) === */ .autocomplete-list .ac-product{ display:flex;align-items:center;gap:10px;padding:8px 10px; text-decoration:none;color:#1a2330; } .autocomplete-list .ac-product:hover{background:#cdebec !important} .autocomplete-list .ac-thumb{ width:48px;height:48px;border-radius:8px;object-fit:cover;flex:0 0 48px; background:#eef4f5;display:inline-flex;align-items:center;justify-content:center;font-size:20px; } .autocomplete-list .ac-thumb-ph{font-size:22px} .autocomplete-list .ac-prod-meta{flex:1;min-width:0} .autocomplete-list .ac-prod-name{ font-size:13px;font-weight:600;color:#0e1f2a; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3; } .autocomplete-list .ac-prod-dest{ font-size:11px;color:#5a6b75;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .autocomplete-list .ac-prod-price{ font-size:13px;font-weight:700;color:var(--or-text);flex:0 0 auto;white-space:nowrap; } .autocomplete-list .ac-pin{margin-right:4px} .autocomplete-list .ac-flag{width:18px;height:18px;border-radius:50%;margin-right:4px;vertical-align:middle} .autocomplete-list .ac-alt{color:#94a3b8;font-size:11px;margin-left:6px} /* === Tour card (.tl-*) — nguồn DUY NHẤT nằm trong