/* Trang chủ dùng Inter thay VNE Cereal. Ghi đè ở token nên mọi thứ ăn theo — kể cả
   class .vn-* của theme — không phải gắn font-family rải rác từng chỗ. */
body.home-inter {
    --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}
/* ── BẢNG MÀU (phạm vi TRANG NÀY) ─────────────────────────────────────
   Nguyên tắc: NỀN TRUNG TÍNH — trắng và xám rất nhạt, KHÔNG nhuộm xanh. Màu
   thương hiệu chỉ xuất hiện ở nút, liên kết và hai dải nhấn, nên trang đọc "sang"
   chứ không rực. Brand giữ tông navy-teal SÂU, độ tươi thấp (bản sáng #2c6f8e
   trước đó bị chói khi trải trên diện rộng).
   Đã kiểm tương phản WCAG AA: chữ trắng/brand-600 7.4:1 · secondary/trắng 7.5:1
   · tertiary/trắng 5.3:1 · trắng/brand-900 15:1.
   Muốn áp cho TOÀN hệ thống thì bê nguyên khối này vào tokens/colors.css. */
body.home-inter {
    --brand-50:  #f4f7f9;
    --brand-100: #e6edf2;
    --brand-200: #cbdae3;
    --brand-300: #a3bccb;
    --brand-400: #7295aa;
    --brand-500: #4b7189;
    --brand-600: #2f5a72;   /* màu chính: nút, liên kết */
    --brand-700: #26495d;
    --brand-800: #1d3849;
    --brand-900: #152836;   /* tiêu đề + hai dải nhấn */

    --neutral-50:  #f7f8f9;  /* nền section xen kẽ — xám trung tính, không ám xanh */
    --neutral-100: #eff1f3;
    --neutral-200: #e2e5e8;
    --neutral-300: #cbd0d5;
    --neutral-400: #a6adb4;
    --neutral-500: #656d75;  /* text-tertiary */
    --neutral-600: #4e565e;  /* text-secondary */
    --neutral-700: #3a4148;
    --neutral-800: #252a30;
    --neutral-900: #12161a;  /* text-primary */

    /* Hai màu nhãn cấp tín nhiệm lấy TRỰC TIẾP từ bản thiết kế (navy đậm + vàng nghệ).
       Cặp này chỉ dùng cho nhãn Trust Verified™ / Audited™ / Registered™, không dùng
       cho nền hay chữ chạy. Tương phản: vàng trên navy 9.1:1 · navy trên vàng 8.4:1. */
    --tier-navy: #0e3d5e;
    --tier-gold: #f5b731;

    /* Vàng của chữ "ĐANG TÌM" — bản gốc #b6791f chỉ đạt 3.2:1 trên nền trắng ở cỡ
       chữ 12px, nên đậm lại một bậc → 5.2:1. */
    --warning-600: #8a5a13;
    --warning-100: #fbf1dc;
    --success-600: #167a5b;  /* "Tín nhiệm cao" — tín hiệu tốt, 5.3:1 trên nền trắng */

    /* BẮT BUỘC khai lại nhóm token ngữ nghĩa: colors.css viết
       `--text-tertiary: var(--neutral-500)` ở :root nên nó đã được giải trị NGAY TẠI
       :root bằng bảng màu cũ. Ghi đè --neutral-* ở dưới KHÔNG làm nó tính lại —
       body chỉ thừa kế giá trị đã chốt. Khai lại tại đây thì chúng bám bảng màu mới. */
    --text-primary:    var(--neutral-900);
    --text-secondary:  var(--neutral-600);
    --text-tertiary:   var(--neutral-500);
    --text-disabled:   var(--neutral-400);
    --text-brand:      var(--brand-600);
    --text-link:       var(--brand-600);
    --text-link-hover: var(--brand-700);
    --surface-subtle:       var(--neutral-50);
    --surface-muted:        var(--neutral-100);
    --surface-brand:        var(--brand-600);
    --surface-brand-hover:  var(--brand-700);
    --surface-brand-subtle: var(--brand-50);
    --surface-scrim:        rgba(18, 22, 26, 0.04);
    --surface-overlay:      rgba(18, 22, 26, 0.48);
    --border-subtle:  var(--neutral-100);
    --border-default: var(--neutral-200);
    --border-strong:  var(--neutral-300);
    --border-brand:   var(--brand-600);
    --border-focus:   var(--brand-500);
    --info-600: var(--brand-600);
    --info-100: var(--brand-100);
    --ring-brand: 0 0 0 3px rgba(47, 90, 114, 0.30);
}

/* Chừa chỗ cho _FooterTailwind (position:fixed) để dải CTA cuối trang không bị che. */
#home-root { padding-bottom: 56px; }

/* Tim yêu thích trên thẻ DN — đỏ + tô đặc khi đã yêu thích. Toggle bằng JS
   (wwwroot/js/home-v3/favorite.js), không phải hover. */
.btn-favorite.is-favorited { color: var(--error-600); }
.btn-favorite.is-favorited svg { fill: currentColor; }

/* Tim ♡ đã thích trên thẻ Sự kiện (_EventCard.cshtml, _DetailSummary.cshtml) — CÙNG lý do
   phải dùng CSS thường thay vì utility Tailwind (text-error-600/text-secondary): .vn-iconbtn
   (components.css) set màu qua @import KHÔNG-layer nên luôn thắng utility Tailwind trong
   @layer utilities, bất kể specificity/thứ tự — utility đổi màu coi như vô tác dụng. Toggle
   bằng JS (event-interactions.js applyLikeState). */
.vn-iconbtn.is-liked { color: var(--error-600); }
.vn-iconbtn.is-liked svg { fill: currentColor; }

/* 2026-09-08: ĐÃ BỎ luật `.vn-card__media--contain img { object-fit: contain }`.
   Lý do: contain để ảnh nằm lọt trong khung nên tỉ lệ nào lệch khung cũng lòi ra hai vệt
   nền XÁM (--neutral-100 của .vn-card__media) — user báo "hover vào thấy nền xám, xấu".
   Nay khung ảnh là hình VUÔNG (aspect-square trong _CompanyCard.cshtml) và ảnh phủ kín
   theo object-fit:cover mặc định của theme, nên không còn vệt xám nào. */

/* `.vne-v3 a { color: inherit }` của theme là rule KHÔNG-layer, specificity (0,1,1) —
   thắng cả utility Tailwind (nằm trong @layer utilities) lẫn `.vn-btn { color: … }`
   (0,1,0). Hệ quả nếu không vá: nút nền trắng ra chữ trắng, nút nền brand ra chữ đen.
   Trả lại màu đúng cho THẺ <a>, cũng ở tầng KHÔNG-layer, phạm vi trong trang này. */
body.home-inter a.vn-btn { color: var(--_fg); }
body.home-inter a.text-white { color: var(--neutral-0); }
body.home-inter a.text-secondary { color: var(--text-secondary); }
body.home-inter a.text-brand-600 { color: var(--brand-600); }
body.home-inter a.text-brand-700 { color: var(--brand-700); }
body.home-inter a.text-brand-800 { color: var(--brand-800); }
body.home-inter a.hover\:text-brand-600:hover { color: var(--brand-600); }
body.home-inter a.hover\:text-brand-700:hover { color: var(--brand-700); }
body.home-inter a.hover\:text-brand-800:hover { color: var(--brand-800); }
/* Cùng lý do với khối màu ở trên: `.vne-v3 a { text-decoration: none }` (base.css, KHÔNG-layer, viết
   dạng shorthand nên xoá luôn line/thickness/color) thắng utility `underline decoration-2
   decoration-brand-600` của Tailwind — tab đang xem trên nav header (Khám phá / Sự kiện / Nhu cầu)
   nên mất gạch chân. Trả lại đúng 3 thuộc tính đó; underline-offset không nằm trong shorthand nên
   utility `underline-offset-[10px]` vẫn ăn. */
body.home-inter a.underline {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--brand-600);
}

/* ══════════════════════════════════════════════════════════════════
   THANH TRA CỨU Ở HERO — MỘT DÒNG (Views/HomeV3/_SearchBox.cshtml)
   ------------------------------------------------------------------
   Theme dựng .vn-search__seg thành CỘT 2 dòng (nhãn đậm + ô nhập), cả thanh cao ~70px. User yêu
   cầu 2026-10-02 "thu hẹp, 1 dòng cho đỡ tốn diện tích": bỏ dòng nhãn, xếp ô thành HÀNG icon + ô
   nhập cao 44px, nút tìm là nút TRÒN 44px chỉ có kính lúp → cả thanh 54px. Khoanh trong
   [data-search-desktop] để thanh .vn-search ở trang khác (Landing, Sự kiện) giữ nguyên.
   ══════════════════════════════════════════════════════════════════ */
[data-search-desktop] .vn-search {
    padding: 4px;
}

[data-search-desktop] .vn-search__seg {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    height: 44px;
    padding: 18px;
}

/* Thu gọn (user 2026-10-05): ô không còn flex-1 kéo hết khung 720px của hero mà rộng VỪA ĐÚNG chữ
   gợi ý. Không chốt số px nữa (thử 340/230 rồi 370/200, lần nào cũng ô cụt "…" ô thừa chỗ — độ rộng
   chữ đổi theo font/máy) → đo bằng chính chữ: .vn-search__fit là lưới 1 ô, bản sao chữ gợi ý ẩn và
   <input size="1"> chồng cùng ô, ô rộng bằng chữ gợi ý. max-width giữ thanh không tràn ở md hẹp. */
[data-search-desktop] .vn-search {
    max-width: 100%;
}

[data-search-desktop] .vn-search__seg {
    flex: 0 1 auto;
}

[data-search-desktop] .vn-search__fit {
    display: grid;
    grid-template-columns: minmax(0, max-content);
    min-width: 0;
}

[data-search-desktop] .vn-search__fit > * {
    grid-area: 1 / 1;
}

/* Bản sao chữ gợi ý: không hiện, không chiếm chiều cao. Cỡ chữ đặt bằng class text-sm ở markup —
   CÙNG class với <input> để đo đúng. +2px bù phần làm tròn khi đo, tránh "…" sát mép ở chữ cuối. */
[data-search-desktop] .vn-search__fit > span {
    visibility: hidden;
    height: 0;
    overflow: hidden;
    white-space: pre;
    padding-right: 2px;
}

[data-search-desktop] .vn-search__divider {
    height: 24px;
}

/* Biến thể --icononly của theme cho sẵn padding 0 + canh giữa, nhưng nút 48px — hạ về 44px cho vừa
   chiều cao ô nhập, nút vẫn tròn đều. */
[data-search-desktop] .vn-search__btn {
    width: 44px;
    height: 44px;
}

/* Khung chờ tải cho 5 dải lazy trên trang Sự kiện (0809, xem event-lazy-sections.js) — mỗi dải
   tải AJAX độc lập nên hiện khung nhấp nháy trước, KHÔNG có tiêu đề (chưa biết dải có dữ liệu
   hay không — dải rỗng bị gỡ hẳn, không phải chỉ ẩn thẻ). Đặt riêng ở đây (không mượn
   .tp-skeleton của trustprofile-public.css) để trang Sự kiện không phụ thuộc chéo sang tính
   năng khác không liên quan, giống nguyên tắc đã áp dụng cho _DetailRegistrationModal.cshtml. */
.ev-skeleton {
    background: linear-gradient(90deg, #f0f2f5 25%, #e8eaef 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: ev-shimmer 1.4s infinite;
    border-radius: 8px;
}
@keyframes ev-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.ev-skeleton--title { width: 220px; height: 26px; }
.ev-skeleton--card { width: 280px; height: 260px; }

/* Toast cục bộ cho events-v3 (0809, xem _DetailRegistrationModal.cshtml/event-registration.js) —
   góc TRÊN bên phải (sửa theo phản hồi — trước đó đặt nhầm góc dưới, dễ bị bỏ lỡ), tự ẩn sau vài
   giây. Toạ độ khớp .tp-toast của trustprofile-public-edit.css (top/right: 24px) cho đồng bộ vị
   trí giữa 2 trang, nhưng KHÔNG mượn class — cùng nguyên tắc tránh phụ thuộc chéo đã áp dụng cho
   .ev-skeleton phía trên. */
.ev-toast {
    position: fixed;
    right: 24px;
    top: 24px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--brand-900, #1a2b3c);
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.ev-toast[hidden] { display: none; }
.ev-toast--error { background: var(--error-600, #dc2626); }
.ev-toast__icon { display: inline-flex; flex: none; }
.ev-toast__icon svg { width: 16px; height: 16px; }

/* ══════════════════════════════════════════════════════════════════
   RÊ CHUỘT LÊN THẺ DOANH NGHIỆP
   ------------------------------------------------------------------
   Theme dùng --shadow-lg (0 12px 28px, đen 14%). Trên nền xám rất nhạt của trang, một
   bóng nhoè 28px trải rộng hơn cả khe 24px giữa hai thẻ → khe bị lấp kín thành một
   DẢI XÁM ĐẶC có mép cứng, nhìn như thẻ bị dán nền xám chứ không phải đổ bóng
   (user báo 2026-09-08: "hover bị lỗi shadow với background màu xám").

   Thay bằng bóng BÁM SÁT thẻ: bán kính nhoè nhỏ, thêm spread ÂM để bóng co lại trong
   phạm vi thẻ, và nhuộm theo màu thương hiệu thay vì đen trung tính. Kèm viền đổi sang
   brand-300 để vẫn thấy rõ "thẻ đang được trỏ tới" mà không cần bóng to.
   ══════════════════════════════════════════════════════════════════ */
/* Bo góc thẻ: 16px của theme quá tròn cho một thẻ dữ liệu dày đặc thông tin
   (user báo 2026-09-08). Hạ về 12px — vẫn mềm, và vẫn lớn hơn bo góc 8px của các khối
   con bên trong thẻ (ô logo, hộp gợi ý Trust Match) nên thứ bậc trong–ngoài còn đúng. */
body.home-inter .vn-card {
    border-radius: 12px;
}

body.home-inter .vn-card--interactive {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

body.home-inter .vn-card--interactive:hover {
    transform: translateY(-2px);
    border-color: var(--brand-300);
    box-shadow: 0 1px 2px rgba(21, 40, 54, .05), 0 6px 14px -6px rgba(21, 40, 54, .20);
}

body.home-inter .vn-card--interactive:active {
    transform: translateY(-1px);
}

/* BÓNG NGHỈ cho thẻ trang chủ (user 2026-10-02: "thêm bóng nhẹ cho các card cho nó nổi nổi 1 tí").
   Trước đó thẻ chỉ có viền 1px, nằm phẳng trên nền. Hai lớp: lớp sát viền giữ mép sắc, lớp dưới nhoè
   10px nhưng spread ÂM nên bóng dồn xuống đáy thẻ, không loang sang hai bên — vẫn giữ đúng bài học ở
   khối trên (bóng loang lấp kín khe 24px giữa hai thẻ thành một dải xám).
   Khoanh trong #home-root (chỉ trang chủ có): file này còn được trang Sự kiện / Cơ hội hợp tác nạp với
   cùng body.home-inter. Selector có id nên thắng rule hover ở trên → phải khai lại bóng hover ở đây. */
#home-root .vn-card--bordered {
    box-shadow: 0 1px 2px rgba(21, 40, 54, .05), 0 4px 10px -4px rgba(21, 40, 54, .12);
}

#home-root .vn-card--interactive:hover {
    box-shadow: 0 2px 4px rgba(21, 40, 54, .06), 0 12px 22px -10px rgba(21, 40, 54, .26);
}

/* Thẻ hành động chính của trang chi tiết (thẻ "Tham gia" ở /su-kien/{slug}, thẻ nhu cầu cột phải
   ở /co-hoi-hop-tac/{id}) — nổi hẳn lên khỏi nền để mắt tìm ra ngay chỗ bấm. Bóng XẾP 3 LỚP thay
   cho một lớp nhoè to: lớp sát viền giữ mép thẻ sắc nét, lớp giữa tạo khối, lớp ngoài cùng rộng
   nhưng spread ÂM nên không loang ra khe giữa các khối — cùng lý do đã ghi ở khối trên. Viền
   nhạt đi vì bóng đã đủ tách thẻ khỏi nền, giữ viền đậm là thành hai đường bao chồng nhau. */
body.home-inter .vn-card--elevated {
    border-color: rgba(21, 40, 54, .07);
    box-shadow:
        0 1px 2px rgba(21, 40, 54, .04),
        0 4px 10px -2px rgba(21, 40, 54, .06),
        0 18px 36px -10px rgba(21, 40, 54, .16);
}

/* ══════════════════════════════════════════════════════════════════
   CHIP LỌC NGÀNH — dùng chung cho "Khám phá Trust Verified™" và "Đối tác phù hợp"
   ------------------------------------------------------------------
   Yêu cầu user 2026-09-11: trả về đúng hình VIÊN THUỐC của design system (.vn-chip)
   — bỏ ô vuông rộng cố định 178px, bỏ khối số vuông nền navy dán mép. Bản ô vuông gợn
   ở hai chỗ: ô ngắn chữ ("Công nghệ và khoa học") vẫn chiếm trọn 178px nên thừa một
   mảng trống, còn ô dài thì chữ xuống 2–3 dòng — cả dải nhấp nhô không đều. Viên thuốc
   ôm sát chữ, mọi ô cùng cao 40px nên hàng luôn thẳng, và đó cũng là hình dáng chip
   dùng ở các trang khác (lọc hợp tác, sự kiện) nên toàn site đồng bộ.

   Chữ KHÔNG xuống dòng: tên ngành dài thì viên thuốc dài ra và dải trượt ngang (đã có
   nút ‹ › bên "Khám phá" và thanh cuộn bên "Đối tác phù hợp"). Ở màn hình nhỏ hai khu
   này đã chuyển sang thả xuống / <details> nên không bị kẹt chữ.
   ══════════════════════════════════════════════════════════════════ */
.kp-chip {
    /* Không co lại trong hộp flex của dải — co lại thì chữ bị bóp, mà ở đây chữ không
       được phép xuống dòng nên sẽ tràn ra ngoài viền. */
    flex: 0 0 auto;
    height: 40px;
    /* Chừa 6px bên phải cho badge số đứng cân trong viên thuốc */
    padding: 0 6px 0 16px;
    border-radius: var(--radius-pill);
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    white-space: nowrap;
}

/* Ô lọc KHÔNG có badge số (dùng ở "Đối tác phù hợp") — đệm đều hai bên */
.kp-chip--plain {
    padding: 0 16px;
}

/* Giữ .kp-chip__label là phần tử thật (không để chữ trần) — markup hai khu đang dùng vậy,
   và có thẻ riêng thì canh giữa theo chiều dọc chắc chắn đúng ở mọi trình duyệt. */
.kp-chip__label {
    display: block;
    min-width: 0;
}

/* Badge số: viên thuốc nhỏ nền navy chữ trắng, nhỉnh hơn badge mặc định của theme một chút
   cho dễ đọc. Giữ màu navy đã duyệt, chỉ đổi hình vuông → viên thuốc.

   PHẢI tự khai display:inline-flex + canh giữa hai chiều tại ĐÂY, không trông vào .vn-chip__count
   của theme: markup chỉ gắn class .kp-chip__count (xem _Discover.cshtml), KHÔNG gắn kèm
   .vn-chip__count, nên rule của theme không hề chạm tới badge này. Thiếu display:flex thì con số
   nằm theo đường cơ chữ của một ô inline — trông như bị treo lên sát mép trên badge. */
.kp-chip__count {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    margin: 0;
    border-radius: var(--radius-pill);
    background: var(--tier-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════
   DANH SÁCH THẢ XUỐNG THAY DẢI TRƯỢT NGANG (chỉ mobile)
   ------------------------------------------------------------------
   Dựng tay chứ KHÔNG dùng <select> gốc: bảng bung ra của <select> do hệ điều hành vẽ,
   bề rộng bám mục dài nhất nên tràn hẳn ra ngoài màn hình với tên ngành 40 ký tự.
   Bản này neo left:0/right:0 nên luôn đúng bằng bề rộng ô, chữ dài thì xuống dòng,
   danh sách dài thì tự cuộn trong chính nó.
   ══════════════════════════════════════════════════════════════════ */
.kp-dd {
    position: relative;
}

.kp-dd__btn {
    width: 100%;
    min-height: 46px;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}

.kp-dd__btn:focus-visible {
    outline: none;
    box-shadow: var(--ring-brand);
}

.kp-dd__value {
    flex: 1 1 auto;
    min-width: 0;
}

.kp-dd__caret {
    flex: none;
    color: var(--text-tertiary);
    transition: transform .18s ease;
}

.kp-dd__btn[aria-expanded="true"] .kp-dd__caret {
    transform: rotate(180deg);
}

.kp-dd__list {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    max-height: 58vh;
    overflow-y: auto;
    background: var(--neutral-0, #fff);
    border: 1px solid var(--border-default);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
}

.kp-dd__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--text-primary);
    cursor: pointer;
}

.kp-dd__opt:hover {
    background: var(--surface-scrim);
}

.kp-dd__opt.is-selected {
    background: var(--surface-brand-subtle);
    color: var(--brand-700);
    font-weight: 600;
}

.kp-dd__opt-label {
    flex: 1 1 auto;
    min-width: 0;
}

.kp-dd__opt-count {
    flex: none;
    min-width: 30px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--tier-navy);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

/* Khối tiêu chí thả xuống ở "Đối tác phù hợp" */
.kp-summary {
    cursor: pointer;
    list-style: none;
}

.kp-summary::-webkit-details-marker {
    display: none;
}

details[open] > .kp-summary .kp-summary__caret {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════════════════════════════════
   MŨI TÊN ‹ › TRONG NÚT TRÒN CỦA BĂNG CHUYỀN
   ------------------------------------------------------------------
   Theme để .vn-iconbtn svg dùng width: 1.25em, mà .vn-iconbtn--sm có font-size 15px
   → icon ra 18.75px trong nút 34px, tức mỗi bên dư 7.625px. Lẻ NỬA PIXEL nên nét vẽ
   rơi giữa hai pixel màn hình, trình duyệt khử răng cưa lệch một bên và mắt đọc ra
   "mũi tên không nằm giữa" (user báo 2026-09-08) — dù đo hộp SVG thì lệch đúng 0px.
   Chốt 16px: mỗi bên dư đúng 9px, nét vẽ rơi trọn vào pixel.
   Phải khai ở file này (nạp SAU theme, cùng tầng KHÔNG-layer) vì class .w-4 của Tailwind
   nằm trong @layer utilities nên luôn thua rule không-layer của theme, bất kể specificity.
   ══════════════════════════════════════════════════════════════════ */
body.home-inter [data-slide] svg {
    width: 16px;
    height: 16px;
}


/* ══════════════════════════════════════════════════════════════════
   TẤM PHỦ TÌM KIẾM MOBILE (Views/HomeV3/_SearchSheet.cshtml)
   ------------------------------------------------------------------
   Bản cũ bật/tắt bằng class "hidden" (display:none) nên hiện ra/biến mất tức thì, không có
   quãng chuyển — đó là cảm giác "giật cục" user báo. display KHÔNG chuyển động được, nên
   thêm một class trạng thái .is-open để mờ dần + trượt lên; search-box.js lo việc gỡ
   "hidden" trước rồi mới gắn .is-open (và ngược lại khi đóng).
   ══════════════════════════════════════════════════════════════════ */
body.home-inter [data-sheet] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .28s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform .28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

body.home-inter [data-sheet].is-open {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    body.home-inter [data-sheet] {
        transform: none;
        transition-duration: .12s;
    }
}


/* ══════════════════════════════════════════════════════════════════
   CANH DÒNG GIỮA CÁC THẺ DOANH NGHIỆP (.dn3-*)
   ------------------------------------------------------------------
   Bốn khối dn3-chips / dn3-match / dn3-trust / dn3-loc trong _CompanyCard.cshtml LUÔN được
   dựng, kể cả khi rỗng. Ở đây chốt CHIỀU CAO DỰ TRỮ cho từng khối, khoanh theo TỪNG KHU —
   nhờ vậy các thẻ trên cùng một hàng có chung một khung dọc, dòng "Tín nhiệm" và dòng vị trí
   của thẻ nào cũng nằm đúng một mốc (user báo 2026-09-09: "cái cao cái thấp").

   Từ 2026-09-16 ba khu dùng CHUNG một kiểu thẻ: chip ngành và ô gợi ý khớp bị ẩn ở mọi khu,
   nên chỉ còn dn3-trust và dn3-loc cần dự trữ, cùng một mức cho cả ba. Danh sách selector vẫn
   liệt kê đủ ba id thay vì đặt rule trần — giữ lối "khoanh theo khu" để sau này muốn bật lại
   một khối ở riêng một khu thì không phải dựng lại kiến trúc này.
   ══════════════════════════════════════════════════════════════════ */

/* Chip nhu cầu: tràn hết bề ngang, cao CỐ ĐỊNH 32px, tên dài thì cắt bằng dấu ba chấm.
   Phải chốt cứng 1 dòng: để chữ xuống dòng thì chip nào có tên dài sẽ cao 48px, khối chip
   vượt mức dự trữ và đẩy lệch mọi dòng bên dưới đúng 11px — chính là lỗi user báo.
   Tên đầy đủ vẫn đọc được qua thuộc tính title khi rê chuột. */
.dn3-chip {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 30px;
}

/* BA KHU DÙNG CHUNG MỘT KIỂU THẺ (user chốt 2026-09-16): không chip ngành, không ô gợi ý khớp.
   Trước đó mỗi khu hiện một tập khối khác nhau — "Khám phá" không có cả hai, "Hồ sơ mới cập nhật"
   có chip, "Đối tác phù hợp" có cả hai — nên ba khu nhìn ra ba kiểu thẻ khác nhau.
   Ẩn hẳn để hai khối rỗng không ăn thêm nhịp gap của thân thẻ.

   ĐÁNH ĐỔI ĐÃ BIẾT: "Đối tác phù hợp" mất câu giải thích VÌ SAO doanh nghiệp đó khớp nhu cầu
   người xem. Dữ liệu MatchSuggestion/Chips vẫn được tầng dịch vụ sinh như cũ — muốn bật lại khối
   nào thì bỏ selector tương ứng khỏi danh sách này, không phải sửa gì ở C#. */
.dn3-chips,
.dn3-match {
    display: none;
}

/* BẬT LẠI ô "Phù hợp vì: …" (PO 2026-09-29) — RIÊNG lưới "Đối tác phù hợp" khi nó đang cá nhân hoá
   (_Match.cshtml gắn data-personalized="true"). Mọi thẻ trong lưới đó đều có lý do khớp nên ô luôn có chữ.
   Khách xem lưới ngẫu nhiên thì không có lý do nào → giữ ẩn, không chừa khoảng trống.
   PHẢI so đúng giá trị ="true", không dùng [data-personalized] trần: Razor luôn render thuộc tính data-*
   (kể cả khi null) nên selector trần khớp cả khách — chính là lỗi "chừa khoảng trống" user báo 2026-10-02.
   Chữ 14px, line-height snug (1.375) → 19.25px/dòng; câu dài nhất vắt 3 dòng ở khổ thẻ hẹp nhất →
   3 × 19.25 + 2 × 10px (py-2.5) = 78px. Cố định chiều cao để các thẻ cùng hàng thẳng dòng. */
#trust-match[data-personalized="true"] .dn3-match {
    display: block;
    height: 78px;
}

#trust-match[data-personalized="true"] .dn3-match__text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Bỏ hàng chấm / bộ đếm "1 / 47" dưới lưới (PO 2026-09-29): con số đó là số NẤC CUỘN (số thẻ − số
   thẻ mỗi màn + 1), không phải số đối tác — người xem đọc thành số liệu. Chỉ ẩn ở khu này; JS băng
   chuyền vẫn dựng như cũ cho các khu khác. */
#trust-match [data-slide-dots] {
    display: none;
}

/* Dòng tín nhiệm (14px) và dòng vị trí (12px) — dự trữ đúng một dòng cho mọi thẻ,
   kể cả thẻ chưa có điểm tín nhiệm hoặc chưa xác định được tỉnh.
   Từ 2026-09-16 có thêm #kham-pha: khối "ĐANG TÌM" (dán đáy bằng mt-auto) đã bị bỏ nên dòng vị
   trí trở thành khối CUỐI của thân thẻ — thẻ nào thiếu tỉnh/năm sẽ hụt mất một dòng ở mép dưới
   nếu không dự trữ. Trước đó khoảng hụt này bị khối ĐANG TÌM che nên không lộ. */
#kham-pha .dn3-trust,
#trust-match .dn3-trust,
#trustprofile-live .dn3-trust {
    min-height: 21px;
}

#kham-pha .dn3-loc,
#trust-match .dn3-loc,
#trustprofile-live .dn3-loc {
    min-height: 18px;
}

/* "Vừa bắt đầu với Registered™" (#new-on-vne) — khi mở rộng thành lưới bằng nút góc phải (_NewOnVne.cshtml),
   băng chuyền không còn cuộn nên ẩn cụm nút ‹ ›. Ẩn ở KHUNG BỌC [data-slide-nav]: card-slider.js chỉ gán
   display inline cho từng nút bên trong, không đụng tới khung bọc nên rule thường là đủ thắng `xl:block`.
   Section này không còn hàng chấm (bỏ 2026-10-02, xem view). */
#new-on-vne[data-expanded] [data-slide-nav] {
    display: none;
}