/** Repair Center — Vì sao khách hàng chọn VNT39 (module 7).
 * Sits inside the page's 7/8/9/10 composite grid (theme's
 * .vnt39-rc-row-grid, see category-sua-chua.php + repair-center.css) —
 * no own section background/edge padding here, it blends into that
 * grid's background the way the mockup shows (only 8/9/10 are their own
 * bordered cards, 7 sits directly on the shared light background). */
.vnt39-rc-why { padding: 0; background: transparent; }
.vnt39-rc-why .container { padding: 0; max-width: none; }
.vnt39-rc-why h2 { margin: 0 0 20px; color: #111318; font-size: 20px; font-weight: 800; }
.vnt39-rc-why__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.vnt39-rc-why__item { display: flex; min-width: 0; flex-direction: column; gap: 10px; border: 1px solid #e5e7eb; border-radius: 10px; padding: 18px; background: #fff; }
/* margin:0 auto centers this fixed-width circle horizontally inside the
 * column without also centering the title/description text below it —
 * only the icon was asked to move to center. */
.vnt39-rc-why__icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto; border-radius: 50%; background: #fdecee; }
.vnt39-rc-why__item .vnt39-rc-icon { width: 24px; height: 24px; color: #a30d1b; }
.vnt39-rc-why__item b { min-width: 0; overflow-wrap: anywhere; color: #111318; font-size: 14.5px; font-weight: 700; }
.vnt39-rc-why__item span { min-width: 0; overflow-wrap: anywhere; color: #667085; font-size: 12.5px; line-height: 1.5; }

@media (max-width: 849px) {
	.vnt39-rc-why { padding: 26px 16px; }
	.vnt39-rc-why__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}

/* ---------------------------------------------------------------------
 * PHONES (<= 560px): ONE row of 4 cards (theme's [data-vnt39-hrow] / hscroll.js), one card per view. Cards are divs in a flex row, so they stretch
 * to the same height and each takes the carousel's full width. The arrows are the shared slider-control standard (assets/css/repair-center.css),
 * fixed to the carousel box (not to the cards in the track) so they always sit INSIDE the visible card, 8px from its left / right edge; the card's
 * own content is padded 44px left / right so the text and icon never run under them. No margin / lane / gutter outside the card.
 * Above 560px nothing changes: the scroller's trailing spacer and grab cursor are switched off so the grid stays exactly as before.
 * ------------------------------------------------------------------- */
.vnt39-rc-why__grid[data-vnt39-hrow]::after { display: none; }
.vnt39-rc-why .vnt39-hs { position: relative; display: block; }
.vnt39-rc-why .vnt39-hs__viewport { cursor: auto; }
@media (max-width: 560px) {
	.vnt39-rc-why__grid[data-vnt39-hrow] { display: flex; align-items: stretch; gap: 12px; }
	.vnt39-rc-why__grid[data-vnt39-hrow]::after { display: block; }
	.vnt39-rc-why__grid[data-vnt39-hrow] > .vnt39-rc-why__item { flex: 0 0 100%; width: 100%; max-width: none; padding: 14px 44px; }
	.vnt39-rc-why .vnt39-hs__btn { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); }
	.vnt39-rc-why .vnt39-hs__btn--prev { left: 8px; }
	.vnt39-rc-why .vnt39-hs__btn--next { right: 8px; }
}