carries the theme's own `field-guest` class (not a bespoke one) so main.css's existing `.field-detination, .field-guest` rules (main.css:1283-1324) supply the identical `padding: 0 20px`, `min-height: 82px`, 500/16px label and 400/14px input that the destination column uses. Nothing about the font needs overriding — using a class the theme already styles is what keeps the three columns visually identical. Width. 170px is NOT enough for this column's content. The inner `.field-guest` burns `padding: 0 20px` (40px) plus a 20px icon with `margin-right: 16px` (36px), which leaves only 94px of text space — and the "Bao nhiêu người?" placeholder alone renders 111px wide, so it was clipped mid-word ("Bao nhiêu ng…i?"). 200px restores 150px of text room: enough for the full placeholder at 14px plus a 3-digit headcount, and it also matches the ~200px of visual breathing room the destination column gets. */ .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .guests-search { flex: 0 0 200px; width: 200px; min-width: 200px; max-width: 200px; } /* Let the label + input stack fill the track. The theme sets `.st-form-dropdown-icon` with no flex/min-width, so it inherits `min-width:auto` and refuses to shrink — the same flexbox trap the destination dropdown needed `min-width:0` to escape. */ .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .guests-search .field-guest { /* The theme's `.form-extra-field` rule adds `padding-left: 30px` to this wrapper, while the destination column's icon+text block starts at 20px. That 10px offset made "Số khách" sit visibly right of "Điểm đến" and "Nhận phòng". Match 20px so all three columns share one left inset — this is the padding the column spacing is judged on, not the one on `.st-form-dropdown-icon` (which the theme already zeroes, main.css:1298). */ padding-left: 20px; padding-right: 20px; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .guests-search .st-form-dropdown-icon { flex: 1 1 auto; min-width: 0; width: auto; padding-left: 0; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .guests-search .st-form-dropdown-icon .render { width: 100%; min-width: 0; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .guests-search .st-form-dropdown-icon .render input { width: 100%; min-width: 0; display: block; /* Headcount only — strip spinner arrows so the field matches the flat look of the destination input, and keep the caret in a numeric field from looking like a number input. */ -moz-appearance: textfield; appearance: textfield; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .guests-search .st-form-dropdown-icon .render input::-webkit-outer-spin-button, .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .guests-search .st-form-dropdown-icon .render input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field { /* Fixed track, sized to CONTENT + even padding. Measured content ("Nhận phòng" block + arrow + "Trả phòng" block): 298px. With 20px on each side that's a 338px track. The old 400px carried ~100px of slack, which is exactly the "khoảng trống thừa bên phải của trả phòng" — the leftover sat between the checkout label and this column's `:after` divider, so that divider looked much further away than the others. Two growable attempts (`flex: 1 1 400px`, and `flex: 1 1 0` on the wrappers) both made it worse by dumping the slack as trailing space inside this column instead. `min-width` overrides the theme's 32% so the column can't be re-floored on narrower viewports. */ flex: 0 0 338px; width: 338px; min-width: 338px; max-width: 338px; margin-left: 0; margin-right: 0; } /* Balance the date column's trailing gap. This column is 400px wide but its content — the "Nhận phòng" block, the arrow, and the "Trả phòng" block — only adds up to ~322px, and the theme's `.date-item-wrapper.checkout { padding: 0 30px }` adds 30px of its own trailing padding. The leftover ~78px sat between the checkout label and the column's `:after` divider, so the divider looked much further from "Trả phòng" than the other dividers sit from their own labels, and the pill read lopsided. Fix WITHOUT making the two date blocks grow. `flex: 1 1 0` on `.date-item-wrapper` was tried and is wrong: it pushes the checkout block to the middle of the track, which opens a ~150px hole between "Trả phòng" and the next column while still leaving the block's own trailing padding behind. Instead keep both blocks at their content width and pull the trailing padding in, so the leftover space collects AFTER the padding (inside the column, next to its divider) and every column ends up with the same narrow gutter. */ .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field .date-item-wrapper { flex: 0 0 auto; min-width: 0; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field .date-item-wrapper.checkin { padding-right: 18px; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field .date-item-wrapper.checkout { padding-right: 18px; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .button-search-wrapper { flex: 0 0 auto; /* The theme's base rule is `margin-left: auto`, which shoves the button to the far right and opens a gap between it and the guests column — that auto margin is also what made the row look lopsided. Zero both margins: the row's `space-around` now supplies the spacing, so any margin here would double up on it and push the button off the pill again. */ margin-left: 0; margin-right: 0; } /* Below 1199px the four fixed tracks no longer fit. Rather than forcing a horizontal scrollbar, the two WIDE columns (destination, dates) shrink while the guests column and the button hold their measured widths. The guests track must NOT shrink below its content: the theme forces `display: block` on the form below 991.98px, so a shrunken track there would clip "Bao nhiêu người?" instead of stacking it. Allowing the guests track to shrink (`flex: 0 1 200px; min-width: 150px`) was tried and clipped the placeholder to 81px on the rental-search topbar at 992px — that topbar is narrower than the homepage banner, so it hits the squeeze first. */ @media (max-width: 1199px) { .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .destination-search { flex: 0 1 242px; min-width: 200px; max-width: 242px; } .st-banner-search-form.style_2 .st-search-form-el .st-search-el .search-form .form-date-field { flex: 0 1 338px; min-width: 300px; max-width: 338px; } } /* ============================================================ Homepage search banner — make "Tìm kiếm" button wider The Traveler theme ships the .btn-search with only the natural icon+label width (looks too narrow on the mega-banner). Bump horizontal padding so it reads as a proper pill button. ============================================================ */ .st-banner-search-form.style_2 .st-search-form-el .button-search-wrapper .btn-search { padding-left: 40px; padding-right: 40px; border: 0; box-shadow: none; } /* Destination dropdown — hover state for list items. The cloned Traveler theme defines layout (padding, font, color) for the dropdown items but never styles :hover, so when the panel opens the user can't tell which row they're about to click. Add a soft blue background + colored text + pointer cursor. */ .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item { cursor: pointer; border-radius: 8px; margin: 2px 6px; transition: background-color .15s ease, color .15s ease; } .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item:hover, .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item:focus, .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item.active { background-color: rgba(81, 145, 250, 0.10); outline: none; } .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item:hover span:not(.stt-icon), .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item.active span:not(.stt-icon), .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item:hover span.stt-icon, .st-banner-search-form.style_2 .destination-search .dropdown-menu li:not(.location-heading).item.active span.stt-icon { color: var(--mh-primary, #5191FA); } /* Filtered-out destination row (used by megahomestay-search.js). We toggle this class instead of removing the

so the theme's pre-bound click handler keeps firing on the surviving rows. */ .st-banner-search-form.style_2 .destination-search .dropdown-menu li.item.mh-hidden { display: none !important; } /* Destination dropdown — let the input span the available width. The cloned Traveler theme sets the input placeholder/value box to width:auto and gives it no min-width, so on mobile a long value like "Yên Bài, Sơn Tây, Hà Nội, Việt Nam" gets clipped to a narrow column instead of using the full destination-search width. The flex quirks here are: - .st-form-dropdown-icon is a flex item but has no flex/min-width, so it inherits `min-width:auto` (= intrinsic content size) and refuses to grow into the empty space left by the icon column. - the inner carries no width either, defaulting to the browser default ~200px. Fix by: - making .st-form-dropdown-icon take the remaining flex track (flex:1 1 auto; min-width:0;). min-width:0 is mandatory — without it flex items refuse to shrink below their intrinsic size, which is what causes the text to "stick" to a narrow column. - making the input fill that track (width:100%; min-width:0). */ .st-banner-search-form.style_2 .destination-search .field-detination .st-form-dropdown-icon { flex: 1 1 auto; min-width: 0; width: auto; } .st-banner-search-form.style_2 .destination-search .field-detination .st-form-dropdown-icon .render { width: 100%; min-width: 0; } .st-banner-search-form.style_2 .destination-search .field-detination .st-form-dropdown-icon .render input { width: 100%; min-width: 0; display: block; } The cloned Traveler theme sets .st-scrollbar max-height:332px but never sets overflow, so when the list exceeds 332px the dropdown silently clips instead of scrolling (users can't reach rows 5–11 like "Quy Nhơn, Gia Lai, Việt Nam"). Also: each

is display:flex with no min-width:0 on the child . Per CSS Flexbox spec, a flex item's default min-width is `auto` (= its intrinsic content size), so a long name like "Yên Bài, Sơn Tây, Hà Nội, Việt Nam" refuses to wrap and pushes the

wider than the .dropdown-menu (min-width:360px), making the text spill outside the rounded border. Fix both by: 1) enabling vertical scroll on .st-scrollbar 2) allowing the to shrink with min-width:0 3) letting long unbroken strings break with overflow-wrap:anywhere */ .st-banner-search-form.style_2 .destination-search .dropdown-menu .st-scrollbar { overflow-y: auto; overflow-x: hidden; } .st-banner-search-form.style_2 .destination-search .dropdown-menu li.item.parent_li { /* keep flex but allow the row to shrink to its container width */ min-width: 0; width: 100%; } .st-banner-search-form.style_2 .destination-search .dropdown-menu li.item.parent_li > .parent { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } /* Destination dropdown — scrollbar styling. The cloned Traveler base rule sets `max-height:332px` on .st-scrollbar` but never styles the native scrollbar, so on Windows/Linux you get the chunky grey 17px-wide scrollbar that visibly pushes the last column ("Vung Tau, ...") past the rounded border. On macOS Safari/Chrome the overlay scrollbar is invisible by default, but as soon as the user scrolls it draws on top of the last ~10px of text and clips against the rounded corner. Goal: a slim, rounded, soft-tinted scrollbar that sits *inside* the panel's rounded border (not on top of the last column of text), with enough inset so the thumb never overlaps the row's right padding. Three layers: 1) `scrollbar-width: thin` (Firefox) — ~6px instead of ~17px. 2) `scrollbar-color` tints the thumb with our primary blue and keeps the track transparent. 3) WebKit pseudo-elements style Chrome / Safari / Edge the same way: 6px-wide thumb with rounded ends, transparent track, no buttons. Plus a tiny `padding-right` on the

` rows holding long unbroken Vietnamese names ("Yên Bài, Sơn Tây, Hà Nội, Việt Nam") the panel pops wider than the column, Popper places it absolutely and the text spills past the rounded border. Bootstrap's Popper positions `.dropdown-menu` via inline `transform: translate(...)`. To stop the panel from drifting past the column edge on smaller viewports we: 1) match the panel width to the destination column (`width:100%; min-width:0; max-width:340px` — slightly wider for readability but never wider than 340px so it fits inside the 260px column with a bit of overflow margin) — actually kept at 100% of the toggle so it never spills past the column; 2) cap max-height so 13+ rows don't push the page down; 3) hide any horizontal overflow on the panel itself (defence in depth: even if a row misbehaves it can't poke out of the panel). */ .st-banner-search-form.style_2 .destination-search .dropdown-menu.mh-dest-dropdown { /* reset the theme's too-wide min-width so the panel never grows past the destination column. On desktop .destination-search is 260px wide (see custom.css lines 21-26). Bootstrap's Popper positions the panel via `transform: translate(...)` relative to the toggle, so if the panel is wider than 260px Popper will pin it to the toggle's left edge and the right side spills over the next form column. We let the panel grow up to 280px — 20px wider than the column so the Popper's "left-start" alignment still sits flush with the toggle's left edge instead of shifting the whole panel to the right. */ min-width: 0; width: max-content; max-width: 280px; /* Contain EVERYTHING inside the rounded border: the WebKit scrollbar thumb sits inside
already, but if a row text ever overflows horizontally we still want the rounded clip to mask it. Setting overflow:hidden here also guarantees the scrollbar thumb can never poke past the panel's `border-radius: 20px` corner — the inner