/** Repair Center — sidebar banner filler (not one of the mockup's 10
 * numbered modules — added afterwards to use the leftover space beside
 * the taller booking-form column, see category-sua-chua.php). MOCK
 * slides, no real promo content/images yet. */
/* Content anchored to the BOTTOM of the box (justify-content:flex-end),
 * not vertically centered — the box's own height varies a lot between the
 * two placements (flex:1 1 auto fills whatever leftover column space each
 * spot has), so centering left uneven-looking blank space above depending
 * on how tall that leftover was. Anchoring to the bottom always reads the
 * same way regardless of that leftover height. Margin narrowed (20px →
 * 10px sides) so the box sits a little wider than before. */
.vnt39-rc-sidebanner { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; justify-content: flex-end; gap: 10px; min-height: 120px; margin: 0 10px 20px; padding: 0 0 20px; border-radius: 10px; overflow: hidden; background: linear-gradient(120deg, #8f0b18, #a30d1b 60%, #6e0812); }
/* HOTFIX — "ảnh nền vẫn còn dư khoảng đỏ phía trên": ở vị trí đặt cạnh
 * cột cao hơn (vd "sau Group kỹ thuật"), box này cao hơn HẲN so với nội
 * dung thật (đo được: box 246px nhưng .viewport cũ chỉ cao 62px, dư
 * 184px đỏ) — vì .viewport trước giờ chỉ cao bằng đúng nội dung, còn
 * .vnt39-rc-sidebanner dùng justify-content:flex-end đẩy nó xuống đáy,
 * để lại khoảng trống đỏ phía trên lộ ra ngoài `.slide-bg` (`.slide-bg`
 * chỉ phủ kín ĐÚNG bằng `.slide` của nó, không phủ được phần trống đó).
 * `position:absolute;inset:0` (thay vì position:relative + kích thước tự
 * nhiên) làm `.viewport` LUÔN phủ kín TOÀN BỘ chiều cao box ở mọi vị trí
 * đặt — nhờ vậy `.slide`/`.slide-bg` bên trong cũng cao bằng cả box, ảnh
 * nền mới thật sự "thay thế HOÀN TOÀN" màu đỏ như yêu cầu ban đầu. */
.vnt39-rc-sidebanner__viewport { position: absolute; inset: 0; overflow: hidden; }
.vnt39-rc-sidebanner__track { display: flex; height: 100%; transition: transform .5s ease; }
/* Renders as an <a> instead of a <div> when a button URL is configured
 * (template.php) — same class + layout either way, plus the small reset a
 * real link needs (color/underline/cursor; a div inherits these for free).
 * align-items đổi center → flex-end: trước đây chữ tự nằm gần đáy nhờ
 * .viewport chỉ cao bằng nội dung rồi bị đẩy xuống đáy box; giờ .viewport
 * cao bằng CẢ box nên phải tự canh chữ sát đáy bằng chính .slide, giữ
 * đúng vị trí thị giác cũ (chữ luôn gần đáy) cho MỌI slide, có ảnh hay
 * không. padding-bottom thêm 14px để chữ không dính sát mép dưới. */
.vnt39-rc-sidebanner__slide { position: relative; display: flex; flex: 0 0 100%; min-width: 0; align-items: flex-end; gap: 14px; padding: 0 22px 14px; color: inherit; text-decoration: none; }
a.vnt39-rc-sidebanner__slide { cursor: pointer; }
/* "Ảnh nền box" — layer riêng cho background-image (không phải <img>),
 * để CÓ THỂ animate riêng ảnh khi hover mà không đụng text/button/kích
 * thước box (yêu cầu rõ: "CHỈ layer ảnh background rung"). span rỗng,
 * position:absolute phủ kín slide, z-index:0 nằm dưới `.slide-text`
 * (đã nâng z-index:1 bên dưới) — nếu không nâng, theo thứ tự paint
 * chuẩn của CSS, nội dung không-positioned sẽ vẽ TRƯỚC (nằm DƯỚI) phần
 * tử positioned cùng ngữ cảnh dù z-index thấp hơn (bug đã gặp nhiều lần
 * trong session này). `.vnt39-rc-sidebanner` đã có sẵn overflow:hidden +
 * border-radius:10px (không đổi) nên phần scale hover hơi tràn ra ngoài
 * `.slide` vẫn bị cắt gọn theo đúng bo góc của box. */
.vnt39-rc-sidebanner__slide-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; background-repeat: no-repeat; transform: translate(0, 0) scale(1); }
/* Slide không chọn ảnh nền không có `.slide-bg` — giữ nguyên nền đỏ
 * gradient của `.vnt39-rc-sidebanner`, không đổi gì. */
/* "thêm lớp phủ tuỳ biến nữa" — layer riêng, nằm GIỮA ảnh (z-index:0) và
 * chữ (z-index:2, xem dưới) — tách riêng khỏi `.slide-bg` (không phải
 * ::after của nó) để KHÔNG bị rung theo hiệu ứng hover của ảnh (yêu cầu
 * gốc "chỉ layer ảnh nền rung"). Chỉ render khi admin chọn màu (xem
 * template.php) — opacity cố định, không phải toàn bộ ô trong suốt (màu
 * đặc + opacity thay vì rgba trực tiếp vì input color chỉ cho ra hex đặc). */
.vnt39-rc-sidebanner__slide-overlay { position: absolute; inset: 0; z-index: 1; opacity: .45; pointer-events: none; }
.vnt39-rc-sidebanner__slide-text { position: relative; z-index: 2; display: flex; min-width: 0; flex-direction: column; justify-content: center; gap: 4px; }
/* "tao muốn tuỳ biến màu sắc" — mỗi dòng dùng CHUNG 1 biến
 * --vnt39-sidebanner-text-color (set qua style inline trên chính
 * `.slide-text` khi admin chọn màu — xem template.php), fallback về
 * đúng màu mặc định cũ nếu admin để trống, nên không đổi gì cho banner
 * chưa từng cấu hình màu. */
.vnt39-rc-sidebanner__slide-text b { color: var(--vnt39-sidebanner-text-color, #fff); font-size: 15px; font-weight: 800; line-height: 1.35; }
.vnt39-rc-sidebanner__slide-text em { color: var(--vnt39-sidebanner-text-color, #ffd9dc); font-size: 12px; font-weight: 700; font-style: normal; }
.vnt39-rc-sidebanner__slide-text > span { max-width: 34ch; overflow-wrap: anywhere; color: var(--vnt39-sidebanner-text-color, #f6dcdd); font-size: 12.5px; line-height: 1.5; }
/* Optional per-slide button text (Repair Center → Banners) — same small
 * pill treatment as payment-offers' own optional banner CTA, for the same
 * reason (the whole slide is already the clickable area). */
.vnt39-rc-sidebanner__slide-cta { display: inline-block; width: fit-content; margin-top: 2px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px; padding: 3px 10px; font-size: 10.5px; font-weight: 700; }
/* HOTFIX — "check tất cả slider banner, card nào chưa có button tiến lùi
 * thì thêm vào" — cùng tông trắng-trên-nền-tối như hero's .art-nav (nền
 * module này luôn là gradient đỏ đậm, không phải ảnh, nhưng cùng nguyên
 * tắc tương phản). `.viewport` chỉ bọc `.track` (không bọc dots, dots là
 * sibling riêng bên ngoài viewport — xem template.php) nên top:50% của
 * viewport luôn đúng tâm slide, không lệch xuống vùng chữ như case-search
 * từng bị — vì ở ĐÂY "slide" và "viewport" là 1, không có phần chữ nào
 * nằm ngoài viewport để kéo lệch tâm cả. */
/* margin: -16px 0 0 (không phải margin-top riêng) — Flatsome có
 * `button{margin-right:1em}` áp lên MỌI button; nếu chỉ set margin-top,
 * margin-right:1em kế thừa vẫn còn đó và đẩy lệch riêng nút --next (định
 * vị bằng `right`, nên bị margin-right cộng dồn thêm) so với nút --prev
 * (định vị bằng `left`, không bị margin-right ảnh hưởng) — đúng bug vừa
 * bị báo "button không canh giữa, lệch". Set cả 0 left/right 1 lần. */
.vnt39-rc-sidebanner__nav { display: grid; position: absolute; top: 50%; z-index: 2; min-width: 0; min-height: 0; place-items: center; width: 32px; height: 32px; margin: -16px 0 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; padding: 0; background: rgba(0, 0, 0, .22); color: #fff; cursor: pointer; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.vnt39-rc-sidebanner__nav:hover,
.vnt39-rc-sidebanner__nav:focus-visible { background: rgba(0, 0, 0, .45); border-color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.vnt39-rc-sidebanner__nav .vnt39-rc-icon { width: 16px; height: 16px; }
.vnt39-rc-sidebanner__nav .vnt39-rc-icon svg { display: block; }
.vnt39-rc-sidebanner__nav--prev { left: 4px; }
.vnt39-rc-sidebanner__nav--next { right: 4px; }
/* z-index:1 — `.viewport` giờ position:absolute phủ kín cả box (xem
 * comment ở rule đó), nếu không nâng `.dots` lên thì theo thứ tự paint
 * chuẩn của CSS, `.dots` (không positioned) sẽ vẽ TRƯỚC (nằm DƯỚI)
 * `.viewport` (positioned) dù đứng sau trong DOM — bị ảnh nền che mất. */
.vnt39-rc-sidebanner__dots { position: relative; z-index: 1; display: flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 6px; }
/* Flatsome's base `button{min-width:24px;min-height:2.5em}` was winning
 * over this width/height:6px — min-width/min-height always override a
 * smaller width/height, so the dot rendered as a ~24×39px oval instead
 * of a small circle. Reset both explicitly to 0. */
.vnt39-rc-sidebanner__dot { min-width: 0; min-height: 0; width: 6px; height: 6px; border: 0; border-radius: 50%; padding: 0; background: rgba(255, 255, 255, .35); cursor: pointer; transition: background .15s ease, width .15s ease; }
.vnt39-rc-sidebanner__dot.is-active { width: 16px; border-radius: 3px; background: #fff; }

@media (max-width: 849px) {
	.vnt39-rc-sidebanner { margin: 0 8px 16px; min-height: 100px; }
}

/* =======================================================================
 * HOVER — "ảnh nền rung nhẹ" khi rê chuột vào toàn bộ box. Chỉ animate
 * `.slide-bg` (yêu cầu rõ: không rung text/button/box). `(hover:hover)
 * and (pointer:fine)` loại bỏ hẳn touch/mobile (tap không kích hoạt,
 * không bị "dính" hover sau khi chạm) — animation chỉ TỒN TẠI trong
 * media query này, không phải chỉ ẩn đi, nên thiết bị cảm ứng không tải
 * animation vô nghĩa. `prefers-reduced-motion` tắt hẳn animation, không
 * hạ cấp thành 1 transform tĩnh — đúng tinh thần "disable animation".
 * ======================================================================= */
@media (hover: hover) and (pointer: fine) {
	@keyframes vnt39-rc-sidebanner-bg-wiggle {
		0%, 100% { transform: translate(0, 0) scale(1); }
		25% { transform: translate(1px, -1px) scale(1.015); }
		50% { transform: translate(-1px, 1px) scale(1.02); }
		75% { transform: translate(1px, 1px) scale(1.01); }
	}
	.vnt39-rc-sidebanner__slide.has-image:hover .vnt39-rc-sidebanner__slide-bg {
		animation: vnt39-rc-sidebanner-bg-wiggle 3.5s ease-in-out infinite;
	}
	@media (prefers-reduced-motion: reduce) {
		.vnt39-rc-sidebanner__slide.has-image:hover .vnt39-rc-sidebanner__slide-bg { animation: none; }
	}
}