/* ══════════════════════════════════════════════════════════════════
   DANH SÁCH VNE HUB — /vne-hub (Views/VneHub)
   ------------------------------------------------------------------
   Bảng màu, font Inter, chừa chỗ footer: dùng chung css/home-v3/index.css (nạp trước file này).
   File này chỉ giữ phần Tailwind không viết được, hoặc phải THẮNG class .vn-* của theme — theme
   nạp ngoài @layer nên luôn thắng utility, chỉnh .vn-* bằng utility là vô tác dụng.
   ══════════════════════════════════════════════════════════════════ */

/* ── Hero: ô ngành trong sơ đồ minh hoạ ── */
.vh-tile {
    min-height: 92px;
    padding: var(--space-3);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-2);
}

.vh-tile__name {
    display: block;
    font-size: 13px;
    line-height: 18px;
}

.vh-tile__state {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 16px;
}

/* ── Bộ lọc: ô chọn có icon bên trái ──
   .vn-select tự khai padding trái 16px; phải chồng thêm class cùng phần tử mới thắng được.
   Chữ 14px (bậc --text-sm): bốn ô chia đều khung 1200px, ở 16px câu "Chọn ngành nghề của bạn" bị cắt. */
.vn-select.vh-select--icon,
#vh-filter .vn-input {
    font-size: var(--text-sm);
}

.vn-select.vh-select--icon {
    padding-left: 44px;
}

/* "Ngành nghề của tôi" là ô chính của bộ lọc — viền brand, chữ đậm để tách khỏi ba ô phụ. */
.vn-select.vh-select--key {
    border: 1.5px solid var(--brand-600);
    font-weight: var(--weight-semibold);
}

.vh-select-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

/* ── Băng chuyền ⇄ lưới ("Xem tất cả") ──
   Dạng lưới không còn cuộn ngang nên ẩn cụm nút ‹ ›; ẩn ở khung bọc vì card-slider.js gán display
   inline cho từng nút. Mũi tên của nút mở xoay lên khi đang mở. */
#kham-pha-hub[data-expanded] [data-slide-nav] {
    display: none;
}

/* Lưới nằm trong khung cuộn DỌC: hub-list.js gán max-height vừa 8 Hub, nhiều hơn thì cuộn trong khung — trang không
   dài theo số Hub. Hiện lại thanh cuộn mà dạng băng chuyền ẩn bằng [scrollbar-width:none] (file này ngoài @layer nên
   thắng utility); scrollbar-gutter giữ sẵn chỗ để thanh cuộn hiện ra không làm lệch cột. */
#kham-pha-hub[data-expanded] #vh-hub-track {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--neutral-300) transparent;
    scrollbar-gutter: stable;
}

.vh-expand svg {
    transition: transform var(--duration-base) var(--ease-standard);
}

.vh-expand[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

/* ── Thẻ Hub ──
   Không dùng .vn-card--interactive: thẻ không phải một liên kết (hành động nằm ở nút "Tham gia Hub"),
   con trỏ bàn tay trên cả thẻ sẽ hứa một cú bấm không có. Nhấc + bóng cùng thông số với thẻ trang chủ. */
.vh-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

#home-root .vh-card:hover {
    transform: translateY(-2px);
    border-color: var(--brand-300);
    box-shadow: 0 2px 4px rgba(21, 40, 54, .06), 0 12px 22px -10px rgba(21, 40, 54, .26);
}

/* Vòng trắng tách logo khỏi ảnh cover + bóng nhẹ để logo "đè" lên mép cover. */
.vh-card__logo {
    box-shadow: 0 0 0 4px var(--neutral-0), 0 8px 18px -8px rgba(21, 40, 54, .35);
}

/* Bề rộng phần online lấy từ biến --vh-online do view gán theo số liệu từng Hub; trừ 1px cho khe giữa hai đoạn. */
.vh-card__online {
    width: calc(var(--vh-online) - 1px);
}

/* ── Tooltip cho chữ bị cắt "…" trong thẻ Hub (hub-list.js gắn cho phần tử [data-vh-tip]) ──
   Trang này không nạp Bootstrap JS nên tooltip tự dựng: một hộp dùng chung, nằm ngoài khung cuộn của băng chuyền nên không bị cắt.
   Chữ dính liền vẫn xuống dòng được (overflow-wrap: anywhere) và hộp không rộng quá màn hình. */
.vh-tip {
    position: fixed;
    z-index: 60;
    max-width: min(320px, calc(100vw - 24px));
    padding: 8px 12px;
    border-radius: var(--radius-md);
    background: var(--neutral-900);
    color: var(--neutral-0);
    font-size: 13px;
    line-height: 19px;
    overflow-wrap: anywhere;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
}

[data-vh-tip][tabindex]:focus-visible {
    outline: 2px solid var(--brand-600);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Nút viền màu brand (theme chỉ có viền xám) — giữ nguyên dáng .vn-btn, chỉ đổi biến màu. ── */
.vn-btn.vh-btn--outline {
    --_bd: var(--brand-300);
    --_fg: var(--brand-700);
}

.vn-btn.vh-btn--outline:hover {
    --_bg: var(--brand-50);
    --_bd: var(--brand-400);
}

/* ── Chờ server: kết quả đang tải lại (hub-list.js gán aria-busy lên [data-vh-busy-area]) ──
   Lớp mờ chặn bấm vào kết quả cũ + spinner cùng dáng .vn-btn__spinner của theme (vòng hở một góc) nhưng to và màu thương
   hiệu, đặt gần đầu khung để băng chuyền / lưới dài vẫn thấy. */
[data-vh-busy-area] {
    position: relative;
}

[data-vh-busy-area][aria-busy="true"]::before {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: 20;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .72);
    cursor: progress;
}

[data-vh-busy-area][aria-busy="true"]::after {
    content: "";
    position: absolute;
    z-index: 21;
    top: min(50%, 160px);
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid var(--neutral-200);
    border-top-color: var(--brand-600);
    border-radius: 50%;
    animation: vh-spin .7s linear infinite;
}

/* Bộ lọc khoá trong lúc chờ server (hub-list.js đặt aria-busy lên form): ô chọn disabled, ô chữ readonly, link "Xóa bộ lọc" bị chặn.
   Không để người dùng đổi tiếp khi kết quả cũ chưa về — con trỏ "đang chờ" + mờ nhẹ cho thấy là đang chờ chứ không phải hỏng. */
#vh-filter[aria-busy="true"] {
    cursor: progress;
}

#vh-filter[aria-busy="true"] :is(input, select, label) {
    cursor: progress;
}

#vh-filter[aria-busy="true"] .vn-field {
    opacity: .7;
}

#vh-filter[aria-busy="true"] a[data-vh-clear] {
    pointer-events: none;
    opacity: .6;
}

@keyframes vh-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .vh-card,
    .vh-expand svg {
        transition: none;
    }

    /* Spinner vẫn quay (là tín hiệu "đang chạy", không phải trang trí) nhưng chậm hẳn lại. */
    [data-vh-busy-area][aria-busy="true"]::after {
        animation-duration: 1.6s;
    }

    #home-root .vh-card:hover {
        transform: none;
    }
}