/** Repair Center — Dịch vụ phù hợp (module 4). MOCK data — see template.php. */ .vnt39-rc-services { padding: 8px 20px 44px; background: #f7f7f8; } .vnt39-rc-services .container { padding: 0; } .vnt39-rc-services__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 20px; } /* Flatsome's base CSS forces h1-h6 to width:100% — override so this h2 * sizes to its own text instead of pushing "Xem tất cả dịch vụ" onto its * own line (same fix as booking-form's head, see that file for the full * explanation). */ .vnt39-rc-services__head h2 { width: auto; margin: 0; min-width: 0; overflow-wrap: anywhere; color: #111318; font-size: 20px; font-weight: 800; } .vnt39-rc-services__all { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; color: #a30d1b; font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; } .vnt39-rc-services__all .vnt39-rc-icon { width: 14px; height: 14px; } .vnt39-rc-services__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } /* FINAL HOTFIX+UX PACK, approved "C." — N>1 service slider. grid-column: * 1/-1 pulls it out of the 4-column split (a single slide showing one card * at a time has no reason to be squeezed into one grid track) regardless * of how many columns the breakpoint below sets. Desktop: one card visible, * max-width keeps it from stretching to the full 4-card row's width; no * autoplay, no external library — track position is a plain CSS transform * driven by script.js. */ .vnt39-rc-services__slider { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; max-width: 420px; width: 100%; margin: 0 auto; } /* HOTFIX — Prev/Next used to sit in their own row BELOW the viewport * (`.slider-controls`, still here but now holding only the counter) — that * row's ~36px height plus its 12px gap from `.slider` (flex column, see * above) was never accounted for by `.vnt39-rc-services-row`'s fixed * 260px grid track (repair-center.css), so it visually overflowed into * payment-offers' heading underneath. Buttons are now absolutely * positioned OVER the viewport's own left/right edges instead (0 extra * layout height, standard carousel treatment) — `position:relative` here * is what their `top:50%` below measures against. */ .vnt39-rc-services__slider-viewport { position: relative; overflow: hidden; touch-action: pan-y; } .vnt39-rc-services__slider-track { display: flex; transition: transform .3s ease; } .vnt39-rc-services__slide { flex: 0 0 100%; min-width: 0; } .vnt39-rc-services__slider-controls { display: flex; align-items: center; justify-content: center; } /* HOTFIX — near-invisible at rest, solid on hover. The first pass (55% * white + blur(3px)) still left a visible frosted haze sitting right on * top of the price — no backdrop-filter at all now (that blur WAS the * haze), and background alpha dropped to 12% so the price reads through * almost completely undisturbed. Border/shadow fade with it so there's no * leftover ring outlining a circle that's otherwise meant to read as * "barely there". The arrow icon itself stays fully opaque (own `color`, * not touched by this) — it's the one thing that must stay legible as a * clickable affordance even at rest. :hover flips to a fully solid circle * (same treatment as before this pass) so intent to click is unambiguous. */ /* HOTFIX — "trên mobile vị trí 2 button sai, đưa lên giữa cho cân" (áp * dụng luôn cho slider này vì cùng kiến trúc byte-identical với * case-search's related-nav, cùng bug). `top:50%` canh theo chiều cao * TOÀN BỘ card (viewport wraps cả card, không riêng ảnh) — card ở đây * cao tối thiểu 260px (`.vnt39-rc-service-card{min-height:260px}`) trong * khi `.vnt39-rc-service-card__thumb` chỉ cao 64px cố định (flex-basis * 64px, KHÔNG phụ thuộc bề rộng như ảnh card-search), nên tâm 50% của cả * card rơi tuốt xuống vùng tên/giá, cách rất xa tâm ảnh thumb thật. * Vì thumb ở đây là kích thước CỐ ĐỊNH (không đổi theo breakpoint), dùng * thẳng 1 giá trị top cố định thay vì kỹ thuật aspect-ratio-anchor như * case-search: 47px = border 1px + padding 14px của .vnt39-rc-service-card * + nửa chiều cao thumb (32px) — đo trực tiếp trên trang thật, đúng ở mọi * bề rộng vì không có kích thước nào trong công thức này phụ thuộc width. */ /* margin: -18px 0 0 (không phải margin-top riêng) — Flatsome có * `button{margin-right:1em}` áp lên MỌI button; chỉ set margin-top thôi * thì margin-right:1em kế thừa vẫn đẩy lệch riêng nút --next (định vị * bằng `right`) so với --prev (định vị bằng `left`) — cùng bug vừa phát * hiện ở hero/sidebar-banner, sửa luôn ở đây cho nhất quán dù chưa bị * báo trực tiếp (module này không phải lúc nào cũng có slider N>1 để * lộ ra). */ .vnt39-rc-services__slider-nav { display: grid; position: absolute; top: 47px; z-index: 2; min-width: 0; min-height: 0; place-items: center; width: 36px; height: 36px; margin: -18px 0 0; border: 1px solid rgba(229, 231, 235, .25); border-radius: 50%; padding: 0; background: rgba(255, 255, 255, .12); color: #a30d1b; cursor: pointer; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; } .vnt39-rc-services__slider-nav:hover, .vnt39-rc-services__slider-nav:focus-visible { background: #fff; border-color: #a30d1b; box-shadow: 0 2px 8px rgba(17, 19, 24, .18); } .vnt39-rc-services__slider-nav .vnt39-rc-icon { width: 18px; height: 18px; } /* HOTFIX — inline sits on its own text baseline by default, leaving * a few px of descender gap below it — visually that shifted the arrow * down-left inside its circle even though the wrapping `.vnt39-rc-icon` * span itself (display:block, sized 18x18) was already dead-center in the * button (confirmed via getBoundingClientRect: span centered, svg offset * +6px on Y only). display:block on the svg removes it from that baseline * flow entirely, so it now centers exactly like the span around it. */ .vnt39-rc-services__slider-nav .vnt39-rc-icon svg { display: block; } /* Arrow icon centered in the circle via the button's own `place-items: * center` above — these two just place the circle itself at the card's * left/right edge, half-overlapping it like a normal carousel. */ .vnt39-rc-services__slider-nav--prev { left: 8px; } .vnt39-rc-services__slider-nav--next { right: 8px; } .vnt39-rc-services__slider-counter { min-width: 44px; text-align: center; color: #667085; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } /* min-height (not height) — a real service's name/description can still * run longer than this and grow the card taller (h3/p below only clamp to * 2 lines each, they don't cap the WHOLE card), this just sets a floor so * the placeholder state (renderPlaceholderCard in script.js) and a real * short service don't visibly jump in height against each other — both * render the exact same markup/classes, only the floor need adding here. */ .vnt39-rc-service-card { display: flex; min-width: 0; min-height: 260px; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px; background: #fff; } /* Image LEFT + title/description RIGHT, side by side on the card's own * top row (was image-on-top/text-below, full width) — matches the mockup. */ .vnt39-rc-service-card__top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; } .vnt39-rc-service-card__thumb { flex: 0 0 64px; min-width: 0; border-radius: 6px; aspect-ratio: 1/1; background: #f0f1f3; overflow: hidden; } .vnt39-rc-service-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .vnt39-rc-service-card__intro { min-width: 0; } /* Title and description get a fixed-height reserved box (2 lines each, * clamped) instead of following natural content length — service names/ * descriptions come from admin later and will vary a lot in length; a * fixed box is what keeps every card the same shape regardless, not just * for this mock data. The CTA below still gets margin-top:auto as a second, * independent safety net (title *could* still wrap 3 lines on a very long * real name) so it always lands on the same baseline across a row even if * the clamp above isn't enough. */ .vnt39-rc-service-card h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 4px; min-width: 0; min-height: calc(1.35em * 2); overflow-wrap: anywhere; color: #111318; font-size: 13.5px; font-weight: 700; line-height: 1.35; } .vnt39-rc-service-card p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0; min-width: 0; min-height: calc(1.4em * 2); overflow-wrap: anywhere; color: #667085; font-size: 11.5px; line-height: 1.4; } .vnt39-rc-service-card__price { margin: 0 0 8px; color: #a30d1b; font-size: 18px; font-weight: 800; } /* Dịch vụ Kiểm tra & chẩn đoán (giá 0 = Miễn phí) — dòng phụ ngay dưới * giá, tránh khách hiểu nhầm "Miễn phí" là giá sửa chữa cuối cùng. Không * gắn riêng cho Model/Device nào — script.js chỉ render dòng này khi * service.price_raw === 0, áp dụng chung cho mọi dịch vụ giá 0. */ .vnt39-rc-service-card__price-note { display: block; margin: -6px 0 8px; color: #8a1620; font-size: 10.5px; font-weight: 600; line-height: 1.3; } .vnt39-rc-service-card__meta { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: #667085; font-size: 12px; } .vnt39-rc-service-card__meta .vnt39-rc-icon { flex-shrink: 0; width: 14px; height: 14px; } /* Step 2: this is now a real