/** Repair Center — Đăng ký sửa chữa online (module 5). PLACEHOLDER form — see template.php. */ .vnt39-rc-booking { padding: 20px; background: #f7f7f8; } .vnt39-rc-booking .container { padding: 0; } /* Solid — dashed border is this design's language for an EMPTY/placeholder * state (e.g. matched-services' "chưa chọn gì" box above this one on the * page). This card is a real, filled form, not a placeholder, so it stays * solid like every other real card (.vnt39-rc-warranty__card, etc.) — * dashed here would visually mislabel it as an empty state. (Was changed * to dashed for a round of "match the two side-by-side cards' border" * requests, then rolled back once the dashed-as-placeholder convention * became clear — see repair-center.css for the two-column layout these * sit in.) */ .vnt39-rc-booking__card { min-width: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: 22px; background: #fff; } .vnt39-rc-booking__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; } /* Flatsome's base CSS sets a blanket `h1,h2,h3,h4,h5,h6{width:100%}` — * that alone was pushing the tag beside this h2 onto its own line * despite flex-wrap having plenty of room. width:auto lets the h2 size * to its own text again, the way a normal flex item would. */ .vnt39-rc-booking__head h2 { width: auto; margin: 0; color: #111318; font-size: 19px; font-weight: 800; } .vnt39-rc-booking__head-text { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; } .vnt39-rc-booking__tag { border-radius: 999px; padding: 5px 11px; background: #f0faf3; color: #155209; font-size: 11px; font-weight: 700; letter-spacing: .02em; } /* Desktop: no accordion — chevron hidden, header not clickable-looking, * form always shown. The collapse/expand behaviour below is mobile-only * (see media query), matching the mockup: only the mobile view collapses * this module by default. */ .vnt39-rc-booking__chevron { display: none; flex-shrink: 0; width: 20px; height: 20px; color: #a30d1b; transition: transform .2s ease; } /* Mobile collapse is a JS-measured max-height (see script.js) — plain * block on desktop, nothing special needed here; body-inner (wrapping the * form+success panel together, see template.php) is a leftover from an * earlier grid-template-rows 0fr↔1fr attempt that turned out not to * render correctly in testing (see script.js's comment) and is harmless * to leave in place. */ /* Tighter rhythm than before — gap between rows and label-to-input gap * were both wider than they needed to be, stretching the whole section * taller than the mockup for no real reason. */ .vnt39-rc-booking__form { display: grid; gap: 7px; } .vnt39-rc-booking__form[hidden] { display: none; } .vnt39-rc-booking__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } /* HOTFIX — FIELD LABEL + REQUIRED/ERROR UX, section 8 audit turned up a * pre-existing bug: same author-style-beats-UA-default gotcha as the Brand * field's `label[hidden]` override a few lines down, just never applied to * `.row` — WITHOUT this, the return address row's `hidden` attribute * (template.php's `data-vnt39-return-wrap hidden`) did nothing at all, so * it rendered `display:grid` and stayed VISIBLE even while "Giống địa chỉ * trên" was checked (confirmed via computed style: `display:grid` with * `hidden` still true). Not something this hotfix's own field-heading/ * error-placement changes introduced — caught only because section 8 * explicitly required testing the checked/unchecked toggle end to end. */ .vnt39-rc-booking__row[hidden] { display: none; } /* Thiết bị/Model/Lỗi sit in one row in the mockup, not paired 2+2 with * "Lỗi" dropped to its own full-width row. Step 3 adds a 4th field * (Brand) that only exists for some devices — auto-fit instead of a * hardcoded repeat(3/4, …) means this row reflows correctly whether * Brand's