/* 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); }

/* 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);
}

/* ══════════════════════════════════════════════════════════════════
   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;
}

/* 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;
}