/** Repair Center — Tra cứu sửa chữa & bảo hành (module 6). Step 4: real
* lookup UI, mock Repair Order only — see script.js. Compact pass carried
* over from Step 1: cut vertical padding/margins/line-heights throughout
* instead of stretching the card to match the booking-form column's
* height (tried once already, reverted — see git history / prior notes on
* this file). */
.vnt39-rc-warranty { padding: 20px; background: #f7f7f8; }
.vnt39-rc-warranty__card { min-width: 0; border: 1px solid #e5e7eb; border-radius: 10px; padding: 22px; background: #fff; }
.vnt39-rc-warranty__card h2 { margin: 0; color: #111318; font-size: 19px; font-weight: 800; }
/* Same mobile-collapsed accordion as booking-form (module 5) — desktop
* stays exactly as before (chevron hidden, always expanded); see that
* module's style.css for the full reasoning behind each rule here. */
.vnt39-rc-warranty__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.vnt39-rc-warranty__chevron { display: none; flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; color: #a30d1b; transition: transform .2s ease; }
/* Mobile collapse is a JS-measured max-height (see script.js) — plain
* block, no special CSS needed here on desktop; body-inner (wrapping
* form+result together) 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. */
.vnt39-rc-warranty__form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; margin-bottom: 18px; }
.vnt39-rc-warranty__form label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: #344054; font-size: 13px; font-weight: 600; }
/* Same fix as booking-form's label — the label text and "*" were loose
* siblings in a flex-column label, each becoming its own flex item and
* landing on separate lines. One wrapping span keeps them on one line;
* the "*" itself is red like a normal required-field marker. */
.vnt39-rc-warranty__label-text em { color: #a30d1b; font-style: normal; }
/* don't size themselves from line-height/padding the
* same way — Chrome gives a text
* elements here also inherit the theme's line-height:2.4 by default
* (meant for Flatsome's own bigger buttons) — same underlying reason
* .vnt39-rc-device-card and .vnt39-rc-booking__submit need their own
* line-height reset too, see those files. */
.vnt39-rc-warranty__form input,
.vnt39-rc-warranty__form button { height: 42px; }
.vnt39-rc-warranty__form input { min-width: 0; border: 1px solid #d0d5dd; border-radius: 7px; padding: 0 12px; font-size: 14px; }
.vnt39-rc-warranty__form button { flex-shrink: 0; border: 0; border-radius: 7px; padding: 0 20px; background: #a30d1b; color: #fff; font-size: 14px; line-height: 1.4; font-weight: 700; cursor: pointer; white-space: nowrap; }
.vnt39-rc-warranty__form button:hover { background: #8f0b18; }
.vnt39-rc-warranty__form button:disabled { opacity: .6; cursor: not-allowed; }
/* Result area keeps its real, FULL mockup-matching height at all times —
* order info + timeline + warranty are always rendered at their actual
* size; locking only blurs/dims them, it does not clamp/shrink the layout
* (tried that once, reverted — a shrunk layout read as broken/ugly next
* to the mockup). The earlier worry that this stretches the section far
* taller than booking-form no longer applies: the row wrapper
* (.vnt39-rc-row-2col in repair-center.css) uses align-items:start now,
* so this column's own height never forces the sidebar-banner below it to
* balloon — that was a symptom of the OLD stretch behaviour, not of this
* result area being full height. */
.vnt39-rc-warranty__result { position: relative; border-top: 1px dashed #e5e7eb; padding-top: 14px; }
.vnt39-rc-warranty__result-content { transition: filter .2s ease, opacity .2s ease; }
.vnt39-rc-warranty__result.is-locked .vnt39-rc-warranty__result-content { filter: blur(5px); opacity: .4; pointer-events: none; user-select: none; }
/* Overlay sits over the full-height content via absolute positioning —
* not extra flow height — and is only visible while locked. */
.vnt39-rc-warranty__lock-overlay { display: none; }
.vnt39-rc-warranty__result.is-locked .vnt39-rc-warranty__lock-overlay { position: absolute; inset: 14px 0 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vnt39-rc-warranty__lock-card { display: flex; max-width: 320px; flex-direction: column; align-items: center; gap: 8px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px 20px; background: #fff; box-shadow: 0 8px 24px rgba(17, 19, 24, .1); text-align: center; }
.vnt39-rc-warranty__lock-card .vnt39-rc-icon { width: 20px; height: 20px; color: #a30d1b; }
.vnt39-rc-warranty__lock-card p { margin: 0; color: #344054; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.vnt39-rc-warranty__result-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.vnt39-rc-warranty__result-head span:not(.vnt39-rc-warranty__status) { display: inline-flex; align-items: center; gap: 6px; color: #667085; font-size: 12.5px; font-weight: 700; }
.vnt39-rc-warranty__result-head .vnt39-rc-icon { width: 14px; height: 14px; }
/* Compact pill, not a tall badge. */
.vnt39-rc-warranty__status { display: inline-flex; align-items: center; height: 24px; margin-left: auto; border-radius: 999px; padding: 0 10px; background: #fdecee; color: #a30d1b; font-size: 12px; font-weight: 700; }
/* Order summary — a real 3-col × 2-row grid (Mã/Thiết bị/Dịch vụ, then
* Giá đã chốt/Ngày tạo/Nguồn — the exact order the spec lists), not a
* flex-wrap of same-size pills anymore: that shape is what actually
* reads as a "summary table" instead of a loose row of tags. Label stays
* normal case — the mockup's own labels are NOT uppercase; Flatsome's
* global `dl{text-transform:uppercase}` bleeds through otherwise, same
* fix the value already needed. Mã sửa chữa gets `white-space:nowrap` on
* desktop only (spec: "Không wrap Repair ID trên desktop") — mobile still
* wraps it like everything else once the grid drops to 1 column anyway. */
.vnt39-rc-warranty__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0 0 14px; }
.vnt39-rc-warranty__info-cell { display: flex; flex-direction: column; gap: 1px; min-width: 0; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 9px; background: #fbfbfc; }
.vnt39-rc-warranty__info dt { margin: 0; color: #8a94a6; font-size: 10px; font-weight: 500; text-transform: none; }
.vnt39-rc-warranty__info dd { margin: 0; overflow-wrap: anywhere; color: #111318; font-size: 12px; font-weight: 700; text-transform: none; }
.vnt39-rc-warranty__info-cell.is-code dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Thiết bị cell — single device: dd shows just the name, same as every
* other cell (no badge markup at all, see script.js renderDeviceCell).
* Multiple devices: dd becomes a one-line flex row of the FIRST device's
* name (truncated, never wraps — this is what keeps this cell's height
* identical to its 5 siblings even with several devices) plus a small "+N"
* badge for the rest. position:relative here is the anchor for the popover
* below — it's the popover's OWN positioned ancestor, not the whole
* 3-col grid, so the popover opens right under this one cell regardless of
* which column it's in. */
.vnt39-rc-warranty__info-cell.is-service { position: relative; }
.vnt39-rc-warranty__info-cell.is-service dd { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: normal; }
.vnt39-rc-warranty__service-primary { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Reset every Flatsome global button leak (min-width/min-height/line-height/
* text-transform, same fix .vnt39-rc-warranty__form button needed) down to
* a compact pill instead of a filled button, so it doesn't compete with the
* real submit button in .vnt39-rc-warranty__form. */
.vnt39-rc-warranty__service-badge { flex-shrink: 0; min-width: 0; min-height: 0; height: 19px; border: 1px solid #f3c6cb; border-radius: 999px; padding: 0 7px; background: #fdecee; color: #a30d1b; font-size: 10.5px; font-weight: 800; line-height: 1; text-transform: none; cursor: pointer; }
.vnt39-rc-warranty__service-badge:hover { background: #fbdfe1; }
/* Dịch vụ cell's own badge — unlike .service-badge above (a small pill
* appended AFTER a separate primary-name span), this one IS the cell's
* entire value when there's more than one service (spec: "'3 dịch vụ'
* PHẢI CLICK ĐƯỢC" — the count text itself is the click target, not a
* chip next to it), so it's styled to read as the same bold cell value
* everywhere else, just with an underline + pointer affordance instead of
* pill chrome. Same Flatsome global button-leak resets as every other
* in this file (min-width/min-height/line-height/text-transform). */
.vnt39-rc-warranty__service-count-badge { min-width: 0; min-height: 0; height: auto; border: 0; padding: 0; background: transparent; color: #a30d1b; font-size: 12px; font-weight: 700; line-height: inherit; text-align: left; text-transform: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.vnt39-rc-warranty__service-count-badge:hover { color: #8f0b18; }
/* Popover — position:absolute against .is-service above, so it overlays
* whatever sits below (Timeline, warranty box) instead of pushing it down:
* it never adds to this cell's height, and the summary grid + Timeline
* keep the exact same position whether it's open or closed. No `display`
* rule on this selector on purpose — the browser's default
* `[hidden]{display:none}` UA rule is what hides it, and adding one here
* would need its own `[hidden]` override (see this module's other
* hidden-toggle elements) for no benefit. max-width caps to the viewport
* (not just this narrow cell) so it stays readable and never causes
* horizontal overflow even anchored near the left edge on mobile. */
/* text-transform:none here (not just on the child elements below) — this
* popover is a SIBLING of dd inside .info-cell, not a descendant of it, so
* it doesn't inherit dd's own text-transform:none reset; without its own
* reset it inherits Flatsome's global `dl{text-transform:uppercase}`
* straight from the ancestor dl instead (confirmed live: service names
* rendered in caps until this was added). */
.vnt39-rc-warranty__service-popover { position: absolute; top: calc(100% + 6px); left: 0; z-index: 20; width: max-content; min-width: 220px; max-width: min(300px, calc(100vw - 32px)); border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px 12px; background: #fff; text-transform: none; box-shadow: 0 10px 28px rgba(17, 19, 24, .16); }
.vnt39-rc-warranty__service-popover b { display: block; margin-bottom: 6px; color: #111318; font-size: 11.5px; font-weight: 800; }
/* Every device's group scrolls together as ONE unit — capped here instead
* of per-device — so several devices with several services each still
* caps and scrolls the popover as a whole instead of growing without
* limit or nesting a scrollbar inside a scrollbar. */
.vnt39-rc-warranty__popover-scroll { max-height: 220px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
.vnt39-rc-warranty__popover-scroll::-webkit-scrollbar { width: 6px; }
.vnt39-rc-warranty__popover-scroll::-webkit-scrollbar-track { background: transparent; }
.vnt39-rc-warranty__popover-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: #d0d5dd; }
/* Divider between device groups (not before the first one) — mirrors the
* dashed rule already used elsewhere in this file (e.g. .result before
* the form) so a multi-device popover doesn't need a new visual language. */
.vnt39-rc-warranty__popover-device + .vnt39-rc-warranty__popover-device { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e5e7eb; }
.vnt39-rc-warranty__popover-device-name { margin-bottom: 4px; color: #111318; font-size: 12px; font-weight: 800; }
/* Scoped to .popover-scroll (the shared scroll wrapper), not
* .popover-device — this bullet-list styling has to apply to BOTH the
* Thiết bị popover's per-device (nested one level deeper, inside
* .popover-device) AND the Dịch vụ popover's own flat (a direct child
* of .popover-scroll, no per-device grouping — see script.js's
* renderServiceCell). A descendant selector off .popover-scroll matches
* either depth the same way. */
.vnt39-rc-warranty__popover-scroll ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.vnt39-rc-warranty__popover-scroll li { position: relative; overflow-wrap: anywhere; padding-left: 14px; color: #344054; font-size: 12px; font-weight: 600; line-height: 1.4; }
.vnt39-rc-warranty__popover-scroll li::before { position: absolute; left: 0; color: #a30d1b; content: '•'; }
/* Giá đã chốt popover only: each carries a name + that service's own
* price on the same line (script.js's renderPriceCell) instead of just a
* bullet name — name wraps in its own column if long, price stays
* unbroken and pinned to the right so a longer service name never pushes
* the amount off-line. */
.vnt39-rc-warranty__price-popover .vnt39-rc-warranty__popover-scroll li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vnt39-rc-warranty__popover-item-name { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.vnt39-rc-warranty__popover-item-price { flex-shrink: 0; white-space: nowrap; color: #111318; font-variant-numeric: tabular-nums; }
/* Total row sits OUTSIDE .popover-scroll on purpose (see script.js) so it
* stays visible/pinned even while the device list above it scrolls —
* a dashed rule above it echoes the divider already used between device
* groups just above, same visual language. */
.vnt39-rc-warranty__popover-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; color: #111318; font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Timeline — built from a status_history array (script.js), no percentage
* math for the connecting line: each node/connector is an equal-width
* flex item, and a connector's own colour just follows the state of the
* node it leads INTO (green up to the last completed node, burgundy for
* the one connector leading into "current", grey after). */
.vnt39-rc-warranty__timeline-wrap { margin: 0 0 14px; }
.vnt39-rc-warranty__timeline { display: flex; min-width: 0; align-items: flex-start; margin: 0; padding: 0; list-style: none; overflow-x: auto; }
.vnt39-rc-warranty__node { display: flex; min-width: 52px; flex: 1 1 0; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.vnt39-rc-warranty__connector { flex: 1 1 0; align-self: flex-start; margin-top: 9px; height: 1.5px; min-width: 8px; background: #e4e7ec; }
.vnt39-rc-warranty__connector.is-completed { background: #21a453; }
.vnt39-rc-warranty__connector.is-current { background: #a30d1b; }
.vnt39-rc-warranty__dot { display: grid; flex-shrink: 0; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #e4e7ec; color: #98a2b3; }
.vnt39-rc-warranty__dot .vnt39-rc-icon { width: 10px; height: 10px; }
/* Completed = green + ✓ (the icon is already swapped to a checkmark in
* script.js regardless of the step's own icon); current = burgundy, kept
* to its own step icon so it still says WHAT is happening right now, not
* just that something is. */
.vnt39-rc-warranty__node.is-completed .vnt39-rc-warranty__dot { background: #155209; color: #fff; }
.vnt39-rc-warranty__node.is-current .vnt39-rc-warranty__dot { background: #a30d1b; color: #fff; }
.vnt39-rc-warranty__step-label { max-width: 76px; overflow-wrap: anywhere; color: #344054; font-size: 10.5px; font-weight: 700; line-height: 1.25; text-transform: none; }
.vnt39-rc-warranty__node.is-pending .vnt39-rc-warranty__step-label { color: #98a2b3; }
.vnt39-rc-warranty__node.is-current .vnt39-rc-warranty__step-label { color: #a30d1b; }
.vnt39-rc-warranty__step-date { color: #98a2b3; font-size: 9.5px; }
/* Warranty — one card PER SERVICE ITEM (spec: "theo SERVICE ITEM, không
* phải một warranty chung của order"), GROUPED BY DEVICE (see
* .device-group below — a multi-device order needs to say which device
* each card belongs to); script.js loops order.devices, then each
* device's own services into one .vnt39-rc-warranty__service per item, so
* this naturally supports 1, 2, or more devices/services without any
* further markup change. */
.vnt39-rc-warranty__box { border-radius: 8px; padding: 12px 14px; background: #f7f7f8; }
.vnt39-rc-warranty__box-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.vnt39-rc-warranty__box-head .vnt39-rc-icon { width: 14px; height: 14px; color: #344054; }
.vnt39-rc-warranty__box-head b { color: #111318; font-size: 13px; font-weight: 700; }
/* VNT39 REPAIR — STEP NEXT, section "11." — 2 new elements inside the
* SAME `.vnt39-rc-warranty__box` wrapper every other lookup box already
* uses (no new box style needed); a small badge for the status label,
* then plain label/value rows, deliberately spare — this only ever shows
* 3 numbers + a status, not another dense card grid. */
.vnt39-rc-warranty__payment-status { display: inline-block; margin-bottom: 8px; border-radius: 999px; padding: 3px 10px; background: #fff; border: 1px solid #e5e7eb; color: #111318; font-size: 11.5px; font-weight: 700; }
.vnt39-rc-warranty__payment-rows { display: flex; flex-direction: column; gap: 4px; }
.vnt39-rc-warranty__payment-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.vnt39-rc-warranty__payment-row span { color: #667085; }
.vnt39-rc-warranty__payment-row b { color: #111318; font-weight: 700; }
/* Compact list that caps itself instead of letting the whole Repair
* Lookup card grow without limit — max-height is set to fit 3 cards + 2
* gaps (measured from this card's own real rendered height ≈70px each,
* NOT counted/set by script.js) plus a real buffer on top of that exact
* number: the first version used the bare-minimum 224.8px→228px, which
* left only ~3px of slack and tipped into scrolling at exactly 3 real
* items (a slightly longer name/date wrapping, or plain sub-pixel
* rounding, was enough to push over it). 236px leaves ~11px of genuine
* headroom so 1–3 services reliably sit with no scrollbar, while a 4th
* still reliably pushes past it into scrolling — no JS branching on item
* count either way, one CSS rule covers both cases. padding-right
* reserves room for the scrollbar so it doesn't sit on top of the status
* pill/text; the scrollbar itself is thin/muted instead of the browser's
* default fat one. */
.vnt39-rc-warranty__services { display: flex; flex-direction: column; gap: 8px; max-height: 236px; overflow-y: auto; padding-right: 6px; scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
.vnt39-rc-warranty__services::-webkit-scrollbar { width: 6px; }
.vnt39-rc-warranty__services::-webkit-scrollbar-track { background: transparent; }
.vnt39-rc-warranty__services::-webkit-scrollbar-thumb { border-radius: 999px; background: #d0d5dd; }
/* One group per device, its own service cards stacked inside with the
* SAME gap as between top-level groups (nesting the same flex/gap pattern
* one level down) — a dashed divider + device name heading is the only
* thing that visually separates one device's cards from the next one's. */
.vnt39-rc-warranty__device-group { display: flex; flex-direction: column; gap: 8px; }
.vnt39-rc-warranty__device-group + .vnt39-rc-warranty__device-group { margin-top: 4px; padding-top: 12px; border-top: 1px dashed #e5e7eb; }
.vnt39-rc-warranty__device-group-name { color: #111318; font-size: 12.5px; font-weight: 800; }
.vnt39-rc-warranty__service { border: 1px solid #e5e7eb; border-radius: 8px; padding: 10px 12px; background: #fff; }
.vnt39-rc-warranty__service-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.vnt39-rc-warranty__service-head .vnt39-rc-icon { width: 13px; height: 13px; color: #667085; }
.vnt39-rc-warranty__service-head b { min-width: 0; overflow-wrap: anywhere; color: #111318; font-size: 12.5px; font-weight: 700; }
.vnt39-rc-warranty__service-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.vnt39-rc-warranty__service-meta { min-width: 0; overflow-wrap: anywhere; color: #667085; font-size: 11.5px; }
/* Compact status pill — one of 3 states per spec: Chưa kích hoạt (neutral
* grey) / Còn bảo hành (green) / Hết bảo hành (muted red) — all mock, no
* date math (see script.js's own top comment). */
.vnt39-rc-warranty__service-status { flex-shrink: 0; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; }
.vnt39-rc-warranty__service.is-active .vnt39-rc-warranty__service-status { background: #eef8f1; color: #155209; }
.vnt39-rc-warranty__service.is-expired .vnt39-rc-warranty__service-status { background: #f3e8e8; color: #8f0b18; }
.vnt39-rc-warranty__service.is-not-started .vnt39-rc-warranty__service-status { background: #eef0f3; color: #667085; }
/* STEP B7 — a real 0-month service (warranty_months_snapshot = 0) is a
* genuinely new state real data can produce that the original mock never
* exercised (every mock service had a non-zero warranty_months). Same
* muted treatment as "Chưa kích hoạt" — both read as "nothing active
* here", just for a different reason. */
.vnt39-rc-warranty__service.is-no_warranty .vnt39-rc-warranty__service-status { background: #eef0f3; color: #667085; }
@media (max-width: 849px) {
.vnt39-rc-warranty { padding: 16px; }
.vnt39-rc-warranty__form { grid-template-columns: minmax(0, 1fr); }
/* Mobile mockup: collapsed by default, same tap-to-expand pattern as
* booking-form (module 5). script.js measures scrollHeight and sets
* this max-height inline (a plain grid-template-rows 0fr↔1fr didn't
* render correctly in testing — see script.js's comment); overflow +
* transition here are the only two things CSS still owns. */
.vnt39-rc-warranty__head { cursor: pointer; margin-bottom: 0; }
.vnt39-rc-warranty__chevron { display: inline-flex; transform: rotate(90deg); }
.vnt39-rc-warranty__head[aria-expanded="true"] .vnt39-rc-warranty__chevron { transform: rotate(-90deg); }
.vnt39-rc-warranty__body { overflow: hidden; transition: max-height .3s ease; }
.vnt39-rc-warranty__head[aria-expanded="true"] + .vnt39-rc-warranty__body { margin-top: 14px; }
.vnt39-rc-warranty__info { grid-template-columns: minmax(0, 1fr); }
.vnt39-rc-warranty__info-cell.is-code dd { white-space: normal; overflow: visible; text-overflow: clip; }
/* Service cards stay a compact single row here too (was stacked into 2
* lines before) — meta+status still wrap onto their own line via the
* base rule's flex-wrap when a long value genuinely doesn't fit at
* phone width (measured: a card with a long date-range meta wraps to
* ~96px, a short one stays ~70px — card height isn't uniform here the
* way it is on desktop's wider row). max-height below is sized for 3
* WORST-CASE (wrapped, 96px) cards + 2 gaps, so 1–3 services never
* scroll even if every one of them happens to wrap; same "one CSS rule
* covers both cases, nothing counted in JS" idea as the desktop rule. */
.vnt39-rc-warranty__services { max-height: 316px; }
}
/* ---- UX-02 — phones/tablets: 16px fields (no iOS zoom) and 44px+ touch targets for the lookup form ------------------------------------------ */
.vnt39-rc-warranty { scroll-margin-top: 12px; }
@media (max-width: 849px) {
.vnt39-rc-warranty__form input,
.vnt39-rc-warranty__form button { height: 48px; font-size: 16px; }
.vnt39-rc-warranty__head { min-height: 44px; }
}