/** Repair Center — Tra cứu bệnh án tương tự (case-search module). Lives
* beside Matched Services' service card now — see category-sua-chua.php's
* .vnt39-rc-services-row wrapper and repair-center.css's own comment for
* the 2-column grid this sits inside. This file only styles the module's
* OWN content; the grid placement itself is page-composition CSS, kept in
* repair-center.css per this project's established convention (cross-
* module layout never lives inside either module's own stylesheet). */
/* Default padding is for standalone/mobile rendering (row wrapper carries
* no padding of its own there — see repair-center.css's own comment on
* .vnt39-rc-services-row for why); the desktop 2-column state zeroes this
* out and lets the ROW's padding take over instead, to avoid doubling up
* against matched-services' own 20px side padding sitting right next to it. */
.vnt39-rc-case-search { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 16px 20px 32px; }
/* Author `display` beats the UA default `[hidden]{display:none}` rule
* regardless of specificity (hit this exact bug on several other modules
* already) — script.js toggles the `hidden` attribute to gate the whole
* module on device+issue being picked, so this needs its own override. */
.vnt39-rc-case-search[hidden] { display: none; }
/* Search panel — soft red tint, its own visual block, distinct from the
* plain related-cases area below it (matches the spec's two-tone sketch). */
.vnt39-rc-case-search__panel { position: relative; border: 1px solid #f3c6cb; border-radius: 12px; padding: 18px 20px; background: #fdf2f2; }
.vnt39-rc-case-search__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.vnt39-rc-case-search__badge { display: grid; flex-shrink: 0; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #a30d1b; }
.vnt39-rc-case-search__badge .vnt39-rc-icon { width: 20px; height: 20px; }
/* width:auto resets Flatsome's blanket h1-h6{width:100%} — same fix every
* other module heading paired with a sibling needs (see booking-form's
* own head, matched-services' head, etc.). */
.vnt39-rc-case-search__head h2 { width: auto; margin: 0 0 2px; color: #111318; font-size: 16.5px; font-weight: 800; }
.vnt39-rc-case-search__subtitle { margin: 0; color: #8a5457; font-size: 12.5px; line-height: 1.4; }
.vnt39-rc-case-search__field { position: relative; display: flex; gap: 8px; }
/* height (not line-height) — Chrome computes a text in this plugin needs undone. */
.vnt39-rc-case-search__submit { display: flex; flex-shrink: 0; min-width: 0; min-height: 0; align-items: center; gap: 6px; height: 44px; border: 0; border-radius: 8px; padding: 0 18px; background: #a30d1b; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.3; text-transform: none; cursor: pointer; white-space: nowrap; }
.vnt39-rc-case-search__submit .vnt39-rc-icon { width: 16px; height: 16px; }
.vnt39-rc-case-search__submit:hover { background: #8f0b18; }
/* Popular chips — light green, per spec: "dùng màu xanh lá nhẹ để giảm
* lượng màu đỏ trên page". Same green/tint pairing already established
* elsewhere for a positive state (warranty-lookup's "Còn bảo hành" pill:
* #eef8f1 bg / #155209 text) — reused here for consistency, not a new
* color introduced just for this module. */
.vnt39-rc-case-search__popular { margin-top: 14px; }
.vnt39-rc-case-search__popular-label { display: block; margin-bottom: 8px; color: #667085; font-size: 12px; font-weight: 700; }
.vnt39-rc-case-search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vnt39-rc-case-search__chip { min-width: 0; min-height: 0; height: auto; border: 1px solid #cfe8d6; border-radius: 999px; padding: 6px 12px; background: #eef8f1; color: #155209; font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: none; cursor: pointer; }
.vnt39-rc-case-search__chip:hover { background: #dff2e4; }
/* Autocomplete dropdown — anchored to .field (position:relative), NOT the
* whole module, so it opens right under the input only; entirely scoped
* to this right column so it can never touch the service card's own box
* or push anything below it (position:absolute, no `display` rule here on
* purpose — the UA default [hidden] rule is what hides it, nothing to
* override since no author `display` is set on this exact selector). */
.vnt39-rc-case-search__dropdown { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; max-height: 360px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 10px; padding: 6px; background: #fff; box-shadow: 0 10px 28px rgba(17, 19, 24, .16); scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
.vnt39-rc-case-search__dropdown::-webkit-scrollbar { width: 6px; }
.vnt39-rc-case-search__dropdown::-webkit-scrollbar-track { background: transparent; }
.vnt39-rc-case-search__dropdown::-webkit-scrollbar-thumb { border-radius: 999px; background: #d0d5dd; }
.vnt39-rc-case-search__result { display: flex; gap: 10px; min-width: 0; border-radius: 8px; padding: 8px; color: inherit; text-decoration: none; }
.vnt39-rc-case-search__result:hover,
.vnt39-rc-case-search__result.is-active { background: #f7f7f8; }
.vnt39-rc-case-search__result + .vnt39-rc-case-search__result { margin-top: 2px; }
.vnt39-rc-case-search__result-thumb { flex: 0 0 44px; align-self: flex-start; border-radius: 6px; aspect-ratio: 1 / 1; background-size: cover; background-position: center; background-color: #f0f1f3; }
.vnt39-rc-case-search__result-body { min-width: 0; }
.vnt39-rc-case-search__result-title { display: block; margin: 0 0 2px; overflow-wrap: anywhere; color: #111318; font-size: 13px; font-weight: 700; line-height: 1.3; }
.vnt39-rc-case-search__result-meta { display: block; margin: 0 0 2px; color: #a30d1b; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.vnt39-rc-case-search__result-desc { display: block; margin: 0 0 3px; overflow-wrap: anywhere; color: #667085; font-size: 11.5px; line-height: 1.4; }
.vnt39-rc-case-search__result-link { display: block; color: #a30d1b; font-size: 11.5px; font-weight: 700; }
.vnt39-rc-case-search__status { padding: 16px 12px; color: #667085; font-size: 13px; text-align: center; }
.vnt39-rc-case-search__more { display: block; border-top: 1px dashed #e5e7eb; margin-top: 4px; padding: 10px 12px 4px; color: #a30d1b; font-size: 12.5px; font-weight: 700; text-align: center; text-decoration: none; }
.vnt39-rc-case-search__more:hover { text-decoration: underline; }
/* Related cases — plain area, no card chrome of its own; the header row
* mirrors matched-services' own "title + Xem tất cả" pattern for visual
* consistency without sharing code between the two modules.
*
* Title font-size/weight/line-height/color + icon size/color/gap are kept
* byte-identical to payment-offers/style.css's own h3 rule on purpose —
* these two headers need to read as one matched pair ("🎁 Ưu đãi thanh
* toán" beside "📋 Các bệnh án thực tế liên quan"), not two independently
* sized titles. If one changes, change the other the same way. */
.vnt39-rc-case-search__related-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.vnt39-rc-case-search__related-title { display: flex; align-items: center; gap: 11px; width: auto; margin: 0; min-width: 0; color: #171717; font-size: 25px; font-weight: 700; line-height: 1.2; }
.vnt39-rc-case-search__related-title span:last-child { overflow-wrap: anywhere; }
.vnt39-rc-case-search__related-icon { display: inline-flex; flex-shrink: 0; }
.vnt39-rc-case-search__related-icon .vnt39-rc-icon { width: 28px; height: 28px; color: #a30d1b; }
.vnt39-rc-case-search__related-all { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; color: #a30d1b; font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.vnt39-rc-case-search__related-all .vnt39-rc-icon { width: 13px; height: 13px; }
.vnt39-rc-case-search__related-all[hidden] { display: none; }
.vnt39-rc-case-search__related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
/* HOTFIX — auto-sliding carousel, only used once there are more related
* cases than fit in one page (script.js's own renderRelatedCards decides
* static-grid vs slider; this CSS just has to make the slider variant look
* right when it does render). Each `.related-page` reuses `.related-grid`'s
* own grid rules above (same class on both) for its OWN up-to-3 (or 1 on
* mobile) cards — only `flex:0 0 100%` here is new, to lay the pages out
* side by side in the track. `position:relative` on `-viewport` is what the
* Prev/Next buttons' `top:50%` below measures against — same structure as
* matched-services/style.css's own slider-viewport (viewport wraps
* track+buttons; overflow:hidden lives on the viewport, not the outer
* `-slider`, so a button positioned at the viewport's own edge is never
* itself clipped). */
.vnt39-rc-case-search__related-viewport { position: relative; overflow: hidden; }
.vnt39-rc-case-search__related-track { display: flex; transition: transform .4s ease; }
.vnt39-rc-case-search__related-page { flex: 0 0 100%; min-width: 0; }
/* HOTFIX, on request ("trên mobile hay desktop đều phải có button bấm sang
* trái phải... giống như cái box m mới làm xong đó") — byte-identical
* treatment to matched-services/style.css's own `.slider-nav`: near-
* invisible at rest (a card's thumbnail sits right behind these, same
* reason as that file), solid on hover/focus, arrow centered via the same
* `display:block` fix on the inline svg (baseline-gap bug, see that file's
* own comment). Kept as its own class rather than reusing `.slider-nav`
* directly since the two modules don't share a stylesheet. */
/* HOTFIX — "button trái phải sao k đưa lên giữa cho cân": đổi kỹ thuật
* canh giữa dọc từ `top:50%; margin-top:-18px` (phụ thuộc browser tính
* đúng chiều cao viewport TẠI THỜI ĐIỂM paint — dễ lệch nếu có bất kỳ
* reflow nào chưa kịp ổn định, vd đang giữa transition trượt trang) sang
* `top:0; bottom:0; margin:auto 0` — canh giữa bằng auto-margin trong 1
* khối có chiều cao cố định (height:36px), không phụ thuộc phải tính lại
* 50% của container mỗi lần, nên prev/next luôn ở đúng cùng 1 cao độ.
*
* HOTFIX 2 — "trên mobile vị trí 2 button sai, đưa lên giữa cho cân": cả
* 2 fix trên chỉ đảm bảo prev/next TRÙNG NHAU, không đảm bảo chúng nằm
* giữa ẢNH — vì cả 2 đều canh theo chiều cao TOÀN BỘ .related-viewport
* (ảnh+tiêu đề+tag+mô tả của cả "page"), trong khi mobile mỗi page chỉ có
* 1 card nên phần chữ chiếm tỉ trọng lớn, kéo tâm 50% xuống thấp hơn hẳn
* so với tâm của riêng tấm ảnh. `.related-media-anchor` (bọc quanh 2 nút,
* xem script.js) là 1 lớp overlay riêng, cha trực tiếp của 2 nút — mặc
* định (desktop) trùng khít `.related-viewport` (inset:0) nên hành vi
* không đổi; media query mobile bên dưới thu nó lại đúng bằng khung ảnh
* (top/left/right = padding thật của card + aspect-ratio 16/10 giống hệt
* `.related-thumb`), khi đó top:50% của 2 nút mới thực sự là tâm ảnh. Chỉ
* áp dụng cho mobile (1 card/page) vì ở desktop (3 card/page) viewport
* rộng gấp ~3 lần 1 card nên aspect-ratio tính theo bề rộng viewport sẽ
* sai hẳn — desktop giữ nguyên cách canh cũ (không bị phản ánh là sai). */
.vnt39-rc-case-search__related-media-anchor { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.vnt39-rc-case-search__related-nav { display: grid; position: absolute; top: 0; bottom: 0; z-index: 2; min-width: 0; min-height: 0; place-items: center; width: 36px; height: 36px; margin: auto 0; border: 1px solid rgba(229, 231, 235, .25); border-radius: 50%; padding: 0; background: rgba(255, 255, 255, .12); color: #a30d1b; cursor: pointer; pointer-events: auto; box-shadow: none; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
.vnt39-rc-case-search__related-nav:hover,
.vnt39-rc-case-search__related-nav:focus-visible { background: #fff; border-color: #a30d1b; box-shadow: 0 2px 8px rgba(17, 19, 24, .18); }
.vnt39-rc-case-search__related-nav .vnt39-rc-icon { width: 18px; height: 18px; }
.vnt39-rc-case-search__related-nav .vnt39-rc-icon svg { display: block; }
.vnt39-rc-case-search__related-nav--prev { left: 8px; }
.vnt39-rc-case-search__related-nav--next { right: 8px; }
.vnt39-rc-case-search__card { display: flex; min-width: 0; flex-direction: column; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; background: #fff; color: inherit; text-decoration: none; }
.vnt39-rc-case-search__card-thumb { border-radius: 6px; aspect-ratio: 16 / 10; margin-bottom: 10px; background-size: cover; background-position: center; background-color: #f0f1f3; }
.vnt39-rc-case-search__card-title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-bottom: 6px; min-width: 0; overflow-wrap: anywhere; color: #111318; font-size: 13px; font-weight: 700; line-height: 1.35; }
.vnt39-rc-case-search__card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
/* Same context (current model/issue) repeated on every card — see
* script.js's own comment on why, not per-post structured data. */
.vnt39-rc-case-search__tag { border-radius: 999px; padding: 2px 8px; background: #f7f7f8; color: #667085; font-size: 10px; font-weight: 700; }
.vnt39-rc-case-search__card-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 8px; min-width: 0; overflow-wrap: anywhere; color: #667085; font-size: 11.5px; line-height: 1.45; }
.vnt39-rc-case-search__card-link { margin-top: auto; color: #a30d1b; font-size: 12px; font-weight: 700; }
@media (max-width: 849px) {
.vnt39-rc-case-search__panel { padding: 16px; }
.vnt39-rc-case-search__field { flex-wrap: wrap; }
.vnt39-rc-case-search__field input { flex: 1 1 160px; }
}
/* Below ~560px the field's own width no longer leaves the input enough
* room next to the submit button (measured at 500px viewport: field
* 411px, button ~120px, input only ~270px) to show the full placeholder
* ("Ví dụ: Nóng máy, quạt kêu to, MacBook Air M3…", ~45 chars, needs
* ~330-350px) — it silently clips mid-word ("...MacBoo") with no
* ellipsis, reading as broken text. flex-basis:100% forces the submit
* button onto its own row so the input gets the field's full width
* instead of sharing it. */
@media (max-width: 560px) {
.vnt39-rc-case-search__field input { flex-basis: 100%; }
.vnt39-rc-case-search__related-grid { grid-template-columns: minmax(0, 1fr); }
/* Mirrors payment-offers/style.css's own mobile override for its h3 —
* same reasoning, kept in sync (see this rule's own comment above).
* font-size is 20px, not 21 — "Các bệnh án thực tế liên quan" only
* just overflows one line at 21px (measured: needs ~302px, only
* ~298px available next to the icon), wrapping to an orphaned last
* word ("...liên / quan"); 20px (still inside the 20-22px spec range)
* clears it with room to spare. text-wrap:balance is a safety net for
* even narrower screens where it still has to wrap — balanced lines
* beat a lone dangling word. */
.vnt39-rc-case-search__related-title { gap: 10px; font-size: 20px; }
.vnt39-rc-case-search__related-title span:last-child { text-wrap: balance; }
.vnt39-rc-case-search__related-icon .vnt39-rc-icon { width: 23px; height: 23px; }
/* Thu `.related-media-anchor` lại đúng khung ảnh: top/left/right = border
* (1px) + padding (12px) thật của `.vnt39-rc-case-search__card`,
* aspect-ratio 16/10 y hệt `.related-thumb` — 1 card/page ở mobile nên
* bề rộng anchor lúc này đúng bằng bề rộng ảnh, aspect-ratio mới tính
* đúng chiều cao. `bottom:auto` bắt buộc — còn set bottom:0 (kế thừa từ
* inset:0 mặc định) thì top+bottom cùng cố định sẽ ép chiều cao theo đó,
* aspect-ratio bị vô hiệu hoàn toàn. */
.vnt39-rc-case-search__related-media-anchor { top: 13px; right: 12px; left: 12px; bottom: auto; aspect-ratio: 16 / 10; }
/* left/right của nút giữ nguyên VỊ TRÍ TUYỆT ĐỐI so với viewport (8px,
* y hệt trước giờ) — anchor giờ đã lùi vào trong 12px so với viewport
* nên nút phải lùi ra ngoài -4px so với CHÍNH anchor để bù lại
* (12 - 4 = 8, khớp giá trị gốc). */
.vnt39-rc-case-search__related-nav--prev { left: -4px; }
.vnt39-rc-case-search__related-nav--next { right: -4px; }
}
/* ---------------------------------------------------------------------
* COMPACT SEARCH PANEL ON PHONES — tighter spacing, and "Tìm kiếm phổ biến" is its own vertical scroller (≈3 rows tall) instead of
* growing the box with every keyword. Same chips / same markup / same search; only the panel's height changes. Desktop is untouched.
* ------------------------------------------------------------------- */
@media (max-width: 560px) {
.vnt39-rc-case-search__panel { padding: 12px; }
.vnt39-rc-case-search__head { gap: 10px; margin-bottom: 10px; }
.vnt39-rc-case-search__badge { width: 34px; height: 34px; }
.vnt39-rc-case-search__badge .vnt39-rc-icon { width: 17px; height: 17px; }
.vnt39-rc-case-search__head h2 { margin-bottom: 1px; font-size: 15.5px; }
.vnt39-rc-case-search__field { gap: 8px; }
.vnt39-rc-case-search__field input { height: 40px; }
/* Flatsome gives every a bottom margin — it was the real source of the airy gaps between the field, the button and the chip rows */
.vnt39-rc-case-search__submit { height: 40px; margin: 0; }
.vnt39-rc-case-search__field input { margin: 0; }
.vnt39-rc-case-search__popular { margin-top: 10px; }
.vnt39-rc-case-search__popular-label { margin-bottom: 6px; }
/* ≈ 3 chip rows; the rest scrolls inside (touch / wheel), nothing is removed */
.vnt39-rc-case-search__chips { gap: 6px; max-height: 98px; overflow-x: hidden; overflow-y: auto; padding-right: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #9fcaa9 transparent; }
.vnt39-rc-case-search__chips::-webkit-scrollbar { width: 4px; }
.vnt39-rc-case-search__chips::-webkit-scrollbar-track { background: transparent; }
.vnt39-rc-case-search__chips::-webkit-scrollbar-thumb { border-radius: 999px; background: #9fcaa9; }
.vnt39-rc-case-search__chip { margin: 0; padding: 5px 10px; font-size: 12px; overflow-wrap: anywhere; text-align: left; }
}
/* Phones, round 2: the search input and the "Tìm kiếm" button share ONE row (input takes what the button leaves; its long placeholder ends in an ellipsis
* instead of forcing a second row). The suggestion dropdown is anchored to `.field` — the whole input + button row, not the input — so it opens below that
* row at the row's full width (left / right 0), over the chips, and scrolls inside max-height when there are many results. */
@media (max-width: 560px) {
.vnt39-rc-case-search__field { flex-wrap: nowrap; align-items: stretch; gap: 6px; }
.vnt39-rc-case-search__field input { flex: 1 1 0; flex-basis: 0; min-width: 0; padding: 0 10px; text-overflow: ellipsis; }
.vnt39-rc-case-search__submit { flex: 0 0 auto; gap: 5px; padding: 0 12px; }
.vnt39-rc-case-search__dropdown { max-height: 320px; }
}
/* ---- UX-02 — phones/tablets: 16px search field (no iOS zoom) and 44px controls; placed last so it also wins over the 40px rules above ------- */
@media (max-width: 849px) {
.vnt39-rc-case-search__field input { font-size: 16px; height: 44px; }
.vnt39-rc-case-search__submit { height: 44px; }
}