/** Repair Center — Chọn thiết bị (module 2). */
.vnt39-rc-devices { padding: 40px 20px; background: #fff; }
.vnt39-rc-devices .container { padding: 0; }
.vnt39-rc-devices h2 { margin: 0 0 6px; color: #111318; font-size: 22px; font-weight: 800; }
/* max-width:62ch was wrapping this onto 2 lines even with plenty of
 * spare width in the container — the line-length limit made sense for
 * long body text, not a one-sentence subtitle. */
.vnt39-rc-devices__sub { margin: 0 0 22px; color: #667085; font-size: 14.5px; }
/* auto-fit, not a fixed repeat(4, …) — the mock data array is a plain
 * foreach already (adding a 5th device needs no template change), so the
 * grid itself must not assume exactly 4 columns either: this wraps a 5th+
 * card onto its own row at the same card width instead of squeezing a
 * 5-column row or leaving a hardcoded 4th column empty. */
.vnt39-rc-devices__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
/* line-height:1.2 resets the theme's default line-height:2.4 on real
 * <button> elements — harmless here since min-height + flex centering
 * already fix the visible size, but left inherited it silently doubles
 * the box's true content height, which bites the next thing that reuses
 * this pattern without also fixing it up (see warranty-lookup/style.css).
 *
 * HOTFIX — text-transform:uppercase added EXPLICITLY here for the first
 * time. It was never actually declared by this rule; every card read
 * as uppercase ("IPHONE", "MACBOOK", …) only because they're all real
 * <button> elements and Flatsome's own base CSS applies uppercase to
 * every button on the site (same leak line-height above already calls
 * out) — plain inherited styling, not something this file ever owned.
 * That silently broke the instant a card got a link_url and switched
 * tag to <a> (see template.php — a card WITH a link renders as a real
 * <a>, not a <button>): Flatsome's leak only ever targets `button`, so
 * that one card alone fell back to its label's own natural case ("PC
 * Gaming" vs every sibling's "PC GAMING"). Declaring it here, on the
 * class both tags share, makes every card look the same regardless of
 * which tag it ends up being.
 *
 * HOTFIX — width/height:100% added EXPLICITLY too, same root cause as the
 * text-transform note above but hitting layout instead of typography:
 * Chrome does not stretch a real `<button>` to fill its CSS Grid cell the
 * way it stretches a plain `<a>`/`<div>` (a long-standing browser quirk —
 * form controls opt out of grid/flex `stretch` alignment even under
 * `display:flex`, an `<a>` never had that exemption). With 5 cards now
 * sharing one grid row (see .vnt39-rc-devices__grid above), the 4
 * `<button>` cards were rendering narrower AND shorter than their own
 * grid cell while the one `<a>` card (whichever one currently has a
 * link_url — see template.php) filled its cell normally, so it visibly
 * looked like a different size from its siblings even though every
 * column/row in the grid is sized identically. Forcing 100% here makes
 * every card actually fill its cell regardless of which tag it is. */
.vnt39-rc-device-card { position: relative; display: flex; width: 100%; height: 100%; min-width: 0; align-items: center; gap: 12px; min-height: 76px; border: 1.5px solid #e5e7eb; border-radius: 10px; padding: 10px 16px 10px 0; background: #fff; color: #111318; font-size: 15px; line-height: 1.2; font-weight: 700; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: border-color .15s ease, background .15s ease; }
/* Reserved for the real device photo (mockup bleeds it slightly past the
 * card's own top/bottom edge) — plain placeholder block until a photo is
 * supplied, see the same note on .vnt39-rc-hero__art. background:none on
 * request — the gray gradient placeholder was reading as a background
 * BEHIND the icon (they sit right next to each other), not as its own
 * separate "photo coming later" block; still reserves the same layout
 * space, just no visible fill until a real photo is wired in. */
.vnt39-rc-device-card__thumb { flex: 0 0 64px; align-self: stretch; margin: -10.5px 0; border-radius: 8px 0 0 8px; background: none; overflow: hidden; }
/* HOTFIX — real device photo, on request ("sau này tao sẽ thêm hình icon").
 * The reserved thumb box above already existed empty for exactly this;
 * only the <img> itself is new — fills that same box, cropped to it. */
.vnt39-rc-device-card__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vnt39-rc-device-card__info { display: flex; min-width: 0; align-items: center; gap: 8px; }
.vnt39-rc-device-card .vnt39-rc-icon { flex-shrink: 0; width: 22px; height: 22px; color: #a30d1b; }
.vnt39-rc-device-card__info b { min-width: 0; overflow-wrap: anywhere; }
.vnt39-rc-device-card:hover { border-color: #a30d1b; background: #fbeae9; }
.vnt39-rc-device-card.is-selected { border-color: #a30d1b; background: #fbeae9; }

@media (max-width: 849px) {
	.vnt39-rc-devices { padding: 28px 16px; }
	/* HOTFIX — floor bumped 72px → 84px: with real photos now in the thumb
	 * (see .vnt39-rc-device-card__thumb below), 72px-wide cards squeezed
	 * the thumb into an unusably short strip (see that rule's own comment);
	 * still auto-fit, not a fixed column count, so a 5th device (or more)
	 * keeps wrapping onto its own row at this same card width instead of
	 * either assumption breaking. */
	.vnt39-rc-devices__grid { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; }
	/* Photo stacks ABOVE the label on mobile (matches mockup) instead of
	 * sitting beside it — mobile card is just too narrow for the desktop
	 * side-by-side layout. */
	.vnt39-rc-device-card { flex-direction: column; gap: 8px; min-height: 88px; padding: 10px 6px 12px; font-size: 12px; text-align: center; overflow: visible; }
	/* HOTFIX — root cause of "ảnh iPhone bị che lấp trên mobile": this box
	 * used to be a fixed 44px TALL, full-width (~80px+) strip — a squat
	 * landscape shape. Real device photos (uploaded via the admin's own
	 * "Ảnh thiết bị" field) come out close to SQUARE (a live example:
	 * 280×300px), so object-fit:cover on that mismatched aspect ratio had
	 * to crop away most of the photo's height to fill a short wide box,
	 * leaving only a thin unrecognizable horizontal sliver visible — not a
	 * z-index/stacking bug, a wrong-shaped box. aspect-ratio:1/1 (height
	 * now follows the box's own real width instead of a fixed px) fixes
	 * that at any card width, including the narrower ones auto-fit can
	 * produce once a 5th device card is in the row. */
	.vnt39-rc-device-card__thumb { flex: 0 0 auto; align-self: stretch; width: 100%; aspect-ratio: 1 / 1; margin: -10.5px 0 0; border-radius: 8px; }
	.vnt39-rc-device-card__info { flex-direction: column; gap: 6px; }
	.vnt39-rc-device-card .vnt39-rc-icon { display: none; }
}
@media (max-width: 549px) {
	.vnt39-rc-device-card .vnt39-rc-icon { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------------
 * ONE-ROW CAROUSEL — the list is a single non-wrapping row (theme's [data-vnt39-hrow] / hscroll.js adds arrows, swipe, auto-advance, pauses).
 * A one-row GRID (grid-auto-flow: column), not a flex row: real <button> cards do not stretch in a flex row (the <a> ones do), so mixed cards
 * came out 76px / 91px tall; in a grid every card fills its cell (height:100% from the base rule) and the row is as tall as the tallest card.
 * Columns: one fixed-width track per device (--vnt39-n is the device count, printed by template.php, so a device added in the admin needs no CSS
 * change) + one auto track at the end for hscroll.js's trailing spacer (::after). The photo / label / border / selected state / click are untouched.
 * ------------------------------------------------------------------- */
.vnt39-rc-devices__grid[data-vnt39-hrow] { --vnt39-card-w: 210px; display: grid; grid-template-columns: repeat(var(--vnt39-n, 7), var(--vnt39-card-w)) auto; grid-auto-flow: column; align-items: stretch; gap: 16px; }
.vnt39-rc-devices__grid[data-vnt39-hrow] > .vnt39-rc-device-card { max-width: none; }
.vnt39-rc-devices__grid[data-vnt39-hrow]::after { width: var(--hs-end, 0px); }
@media (max-width: 849px) {
	/* ~2.5 cards fit beside the two arrows at 390px, so the next card is visibly cut off at the right edge */
	.vnt39-rc-devices__grid[data-vnt39-hrow] { --vnt39-card-w: 108px; gap: 10px; }
}

/* ---------------------------------------------------------------------
 * ARROWS INSIDE THE CAROUSEL — hscroll.js wraps the row as [‹] row [›] (a flex row with the arrows as siblings). For this section only, the
 * wrapper becomes a positioned box and the two arrows are overlaid on its left / right edge, so the track uses the full section width and no
 * column is reserved for them. Size / colours / opacity / hover come from the shared slider-control standard (assets/css/repair-center.css).
 * ------------------------------------------------------------------- */
.vnt39-rc-devices .vnt39-hs { position: relative; display: block; }
.vnt39-rc-devices .vnt39-hs__btn { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); }
.vnt39-rc-devices .vnt39-hs__btn--prev { left: 8px; }
.vnt39-rc-devices .vnt39-hs__btn--next { right: 8px; }