/* ══════════════════════════════════════════════════════════════════════════════
   TRANG CƠ HỘI HỢP TÁC — /co-hoi-hop-tac
   ------------------------------------------------------------------------------
   Chỉ chứa những thứ KHÔNG dựng được bằng utility Tailwind hoặc component .vn-* của
   theme vne-v3: ô icon theo tông, ngăn kéo bộ lọc, thanh công cụ dính, toast.
   Mọi thứ còn lại nằm trong view dưới dạng utility — xem chú thích đầu Index.cshtml.

   Bảng màu + font Inter dùng chung với trang chủ v3 (css/home-v3/index.css) — file này
   nạp SAU, chỉ thêm chứ không ghi đè bảng màu.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Vá màu chữ cho thẻ <a> ────────────────────────────────────────────────────
   `.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-chip--active { color: … }` (0,1,0).
   Không vá thì: tên doanh nghiệp trên thẻ mất màu, chip đang chọn mất màu brand.

   css/home-v3/index.css đã vá sẵn a.vn-btn / a.text-white / a.text-secondary / a.text-brand-*.
   Dưới đây CHỈ thêm những lớp trang này dùng mà bên đó chưa có. Cố ý để trong file của trang
   thay vì sửa file dùng chung — /su-kien và trang chủ không bị ảnh hưởng. */
body.home-inter a.text-primary { color: var(--text-primary); }
body.home-inter a.hover\:text-primary:hover { color: var(--text-primary); }
body.home-inter a.vn-chip { color: var(--text-primary); }
body.home-inter a.vn-chip--active { color: var(--brand-700); }

/* ── Ô icon loại nhu cầu ───────────────────────────────────────────────────────
   3 tông đúng bằng bộ đang dùng ở khối "Cơ hội hợp tác" trên hồ sơ tín nhiệm
   (Views/TrustProfilePublic/_CooperationOpportunities.cshtml) — cùng một loại nhu cầu
   phải ra cùng một ô màu ở mọi nơi, nên chép nguyên mã màu chứ không tự đặt lại. */
.coop-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
}

.coop-tile svg {
    width: 20px;
    height: 20px;
    color: var(--brand-600);
}

.coop-tile--amber { background: #fdf3e3; }
.coop-tile--amber svg { color: #b5762a; }
.coop-tile--rose { background: #fdeaee; }
.coop-tile--rose svg { color: #b83b57; }

/* ── Thanh công cụ dính ────────────────────────────────────────────────────────
   Chip + nút Bộ lọc + số kết quả bám dưới header khi cuộn. CỐ Ý không làm thanh dính
   ĐÁY màn hình: layout _LayoutLandingPage đã có BottomNav position:fixed ở dưới 768px,
   thêm một thanh cố định nữa là hai thanh chồng nhau. */
.coop-toolbar {
    position: sticky;

    /* Header (#vnh-header) cũng là sticky top-0, và cao KHÔNG cố định: nó dùng flex-wrap nên
       xuống 2 dòng ở màn hẹp (~121px) và 1 dòng ở màn rộng (~67px). Để top:0 thì hai thanh
       giành đúng một chỗ và thanh này đè hẳn lên header. js/cooperation-v3/index.js đo header
       tại chỗ rồi ghi ra --coop-header-h; chưa có JS thì 0px, tệ nhất là dính sát mép trên. */
    top: var(--coop-header-h, 0px);

    /* Kẹp giữa hai mốc, không được chạm mốc nào:
         · DƯỚI #vnh-header (z-30) — bằng nhau thì thanh đứng sau trong DOM đè lên header.
         · TRÊN mọi thứ trong thẻ nhu cầu (cao nhất là nút "Xem chi tiết", z-20). Trước đây
           thanh cũng để 20: bằng nhau, mà thẻ nằm sau trong DOM, nên khi cuộn thì hàng nút
           navy xanh chạy đè lên hàng chip đang dính.
       Thẻ KHÔNG tự tạo ngữ cảnh xếp lớp (position:relative mà z-index:auto) nên z-20 bên
       trong thẻ đọ thẳng với thanh này — đổi số ở đây là đủ, không phải sửa từng thẻ. */
    z-index: 25;

    background: var(--surface-card);
    border-bottom: 1px solid var(--border-default);
}

/* ── Hàng chip loại nhu cầu ────────────────────────────────────────────────────
   MỘT hàng duy nhất, không bao giờ xuống dòng:

       ‹  [Tất cả]  [chip][chip]…  ›

   Hai nút nằm NGOÀI CÙNG, trong luồng (không đè lên chip) và dùng component
   `.vn-iconbtn--outline --sm` giống hệt nút mũi tên của băng chuyền thẻ bên dưới.
   "Tất cả" nằm ngoài vùng cuộn nên đứng yên khi kéo. */
.coop-chipbar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.coop-chipbar__viewport {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

.coop-chipbar__track {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    overflow-x: auto;
    /* 2px chừa chỗ cho vòng focus của chip, không thì bị cắt khi tab tới. */
    padding: 2px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* KHÔNG đặt scroll-behavior:smooth ở đây: lúc tải trang script kéo chip đang chọn vào
       tầm nhìn, có smooth thì thấy dải tự trôi một nhịp như bị lỗi. Nút bấm tự truyền
       behavior:'smooth' trong scrollBy. */
}

.coop-chipbar__track::-webkit-scrollbar { display: none; }

/* Chip không được co lại — co thì chữ bị nén, và phép đo tràn thành sai. */
.coop-chipbar__track > * { flex: 0 0 auto; }

/* Dải mờ hai mép: dấu hiệu "còn nữa ở phía này". Overlay chứ không chèn padding —
   đổi padding sẽ đổi scrollWidth, kéo theo phép đo tràn chạy vòng vô tận. */
.coop-chipbar__viewport::before,
.coop-chipbar__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 160ms var(--ease-standard);
}

.coop-chipbar__viewport::before {
    left: 0;
    background: linear-gradient(to right, var(--surface-card) 25%, transparent);
}

.coop-chipbar__viewport::after {
    right: 0;
    background: linear-gradient(to left, var(--surface-card) 25%, transparent);
}

.coop-chipbar__viewport[data-fade-l]::before,
.coop-chipbar__viewport[data-fade-r]::after { opacity: 1; }



/* ══════════════════════════════════════════════════════════════════════════════
   THANH TIÊU ĐỀ Ở KHỔ HẸP — gom về MỘT hàng như trang chủ v3
   ------------------------------------------------------------------------------
   _LandingHeaderTailwind là partial DÙNG CHUNG (12 view: cơ hội hợp tác, sự kiện,
   các trang gói thành viên). Vì vậy chỉnh ở ĐÂY — file CSS chỉ nạp trên các trang
   cơ hội hợp tác — chứ không sửa thẳng partial, để không đổi giao diện trang khác
   khi chưa ai yêu cầu.

   Bệnh: khung ngoài là flex-wrap; ở 390px thì logo 192px + viên ngôn ngữ 84px +
   viên menu người dùng 74px vượt 358px chỗ trống, nên cụm phải rớt xuống dòng hai —
   thanh tiêu đề cao gấp đôi, ăn mất ~100px màn đầu.

   Thuốc: giấu nút ngôn ngữ dưới 768px, đúng như trang chủ v3 (thanh tiêu đề ở đó
   không hề có nút ngôn ngữ, chỉ logo + một nút tròn). Đổi ngôn ngữ vẫn làm được ở
   khổ từ 768px trở lên và ở chân trang.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    /* Nút ngôn ngữ GIỮ LẠI, chỉ thu gọn: bỏ quả địa cầu và mũi tên, còn đúng "VI"/"EN".
       Đo ở 390px: nguyên bản viên này rộng 84px, cộng logo 192 + menu người dùng 74 + các
       khoảng cách là vượt 358px chỗ trống nên cụm phải rớt xuống dòng hai. Bỏ hai biểu tượng
       thì viên còn ~44px, cả hàng vừa khít mà không mất tính năng đổi ngôn ngữ. */
    #vnh-header #vnh-lang-btn {
        gap: 0;
        padding-left: 10px;
        padding-right: 10px;
        min-height: 36px; /* bằng đúng nút ngôn ngữ ở khổ lớn (36px), sát nút menu 34px */
    }

    #vnh-header #vnh-lang-btn > i,
    #vnh-header #vnh-lang-btn > svg { display: none; }

    /* Cấm xuống dòng hẳn: thà để phần tử co lại còn hơn đội thanh tiêu đề lên hai hàng. */
    #vnh-header > div { flex-wrap: nowrap; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   TẤM PHỦ TÌM KIẾM (dưới 768px) — cùng cách làm với trang chủ v3
   ------------------------------------------------------------------------------
   Dưới 768px, hero KHÔNG còn thanh tìm 3 ngăn. Trang chỉ có một NÚT "Bắt đầu tìm
   kiếm" ngay dưới thanh tiêu đề; bấm nút thì chính khối .coop-sheet (đang bọc thanh
   tìm ở hero) trượt lên thành tấm phủ toàn màn hình.

   KHÔNG nhân bản DOM — vẫn là đúng cái <form class="coop-search"> cũ, nên mọi xử lý
   trong js/cooperation-v3/index.js chạy nguyên vẹn.

   Mọi thứ ở đây bám vào body.has-coop-sheet, do JS gắn. JS lỗi → không có class →
   nút ẩn, thanh tìm hiện như cũ. Không có đường nào dẫn tới ngõ cụt.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Nút mở — mặc định ẩn; chỉ hiện ở khổ hẹp KHI JS đã sẵn sàng. */
.coop-searchtrigger { display: none; }

.coop-searchtrigger > button {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
}

.coop-searchtrigger > button svg { width: 16px; height: 16px; flex: none; }
.coop-searchtrigger > button:active { background: var(--surface-scrim); }

/* Thanh đỉnh của tấm phủ — chỉ có mặt khi tấm phủ đang mở. */
.coop-sheet__bar { display: none; }

@media (max-width: 767px) {

    body.has-coop-sheet .coop-searchtrigger {
        display: block;
        /* padding-top: trước đây bằng 0 nên nút dính sát đường kẻ dưới thanh tiêu đề,
           trông như một phần của thanh chứ không phải một nút riêng. */
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid var(--border-subtle);
    }

    /* Chưa mở thì giấu hẳn khối thanh tìm ở hero. */
    body.has-coop-sheet .coop-sheet { display: none; }

    /* z-index 1040: thanh nav đáy (.vne-bottom-nav) ở 1030 nên phải trùm qua nó, nếu không
       nó vẽ đè lên và nuốt mất nút gửi ở chân tấm phủ. Thang z của theme chỉ tới 95 nên
       viết thẳng số. Nền ĐỤC để che sạch trang bên dưới, không phải lớp phủ mờ. */
    body.has-coop-sheet.coop-sheet-open .coop-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 1040;
        background: var(--surface-page);
        overflow-y: auto;
        /* Khoá hẳn trục ngang: tấm phủ không bao giờ được trượt ngang, dù nội dung bên trong
           có phần tử nào lỡ rộng quá. */
        overflow-x: hidden;
        overscroll-behavior: contain;

        /* Trạng thái đầu của chuyển động; .is-open lật sang trạng thái cuối. */
        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.has-coop-sheet.coop-sheet-open .coop-sheet.is-open {
        opacity: 1;
        transform: none;
    }

    body.coop-sheet-open { overflow: hidden; }

    .coop-sheet__bar {
        display: flex;
        align-items: center;
        gap: 12px;
        flex: none;
        padding: 10px 12px;
        background: #fff;
        border-bottom: 1px solid var(--border-subtle);
    }

    .coop-sheet__close {
        flex: none;
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 50%;
        background: var(--surface-muted);
        color: var(--text-primary);
        cursor: pointer;
    }

    .coop-sheet__close svg { width: 18px; height: 18px; }

    .coop-sheet__title {
        font-size: 15.5px;
        font-weight: 700;
        color: var(--text-primary);
    }

    /* Trong tấm phủ, hàng thanh-tìm + nút-bộ-lọc trải theo chiều dọc và có lề riêng —
       nó không còn nằm trong khung nội dung của hero nữa. */
    .coop-sheet-open .coop-sheet .coop-searchrow {
        padding: 16px;
        align-items: stretch;
    }

    /* Nút Bộ lọc trong tấm phủ thành một hàng đầy đủ có chữ, không còn là chấm tròn:
       ở đây có cả bề ngang, mà một nút tròn không nhãn thì người lần đầu không đoán ra. */
    .coop-sheet-open .coop-sheet .coop-morefilter {
        width: 100%;
        height: 48px;
        border-radius: var(--radius-pill);
    }

    /* gap: icon và chữ dính nhau nếu không khai — nút này vốn chỉ có mỗi icon nên
       chưa bao giờ cần khoảng cách. */
    .coop-sheet-open .coop-sheet .coop-morefilter { gap: 8px; }

    .coop-sheet-open .coop-sheet .coop-morefilter::after {
        content: "Bộ lọc chi tiết";
        font-size: 14px;
        font-weight: 600;
    }

    /* ── Bảng thả xuống BÊN TRONG tấm phủ ──────────────────────────────────────
       Ở khổ rộng bảng là lớp phủ tuyệt đối, toạ độ do JS đo và đặt qua biến CSS. Trong
       tấm phủ thì không cần: thanh tìm đã chiếm trọn bề ngang và xếp dọc, nên bảng chỉ
       việc nằm ngay dưới theo luồng. Đặt lại position/width/transform để mọi biến toạ độ
       kia thành vô hại, khỏi phải sửa phần đo trong JS.

       Chỉ hiện khi JS đã bật .is-open — không thì một cái khung rỗng có viền nằm chờ sẵn
       dưới thanh tìm. */
    .coop-sheet-open .coop-sheet .coop-pop { display: none; }

    .coop-sheet-open .coop-sheet .coop-pop.is-open {
        display: block;
        position: static;
        opacity: 1;
        transform: none;
        margin-top: 12px;
    }

    /* .coop-search là flex item mang flex-basis 320px và min-width:auto. Khi bảng thả xuống
       chuyển sang nằm THEO LUỒNG, nội dung bên trong nó (danh sách gợi ý, lưới lĩnh vực) trở
       thành min-content của chính .coop-search, và min-width:auto không cho co xuống — đo được
       nó phình tới 562px trong khung 358px, kéo cả tấm phủ trượt ngang.
       min-width:0 gỡ đúng chốt đó; width/max-width khoá lại cho chắc. */
    .coop-sheet-open .coop-sheet .coop-search {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .coop-sheet-open .coop-sheet .coop-pop__box {
        width: 100%;
        max-width: 100%;
        transform: none;
        border-radius: 16px;
        box-shadow: var(--shadow-sm);
        transition: none;
    }

    .coop-sheet-open .coop-sheet .coop-pop__stage,
    .coop-sheet-open .coop-sheet .coop-pane { min-width: 0; }

    /* Lưới lĩnh vực trong bảng vốn tính theo bề ngang bảng ở khổ rộng — khoá lại để một ô
       dài không kéo giãn cả bảng. */
    .coop-sheet-open .coop-sheet .coop-pane * { max-width: 100%; }

    /* Chiều cao để nội dung tự quyết: biến --coop-pop-h do JS đặt là chiều cao đo ở khổ
       rộng, áp vào đây sẽ cắt cụt hoặc chừa thừa. */
    .coop-sheet-open .coop-sheet .coop-pop__stage {
        height: auto;
        transition: none;
    }

    /* Ba bảng vốn chồng lên nhau để mờ chéo; theo luồng thì chỉ bảng đang bật được chiếm chỗ. */
    .coop-sheet-open .coop-sheet .coop-pane {
        position: static;
        display: none;
        max-height: 52vh;
    }

    .coop-sheet-open .coop-sheet .coop-pane.is-active { display: block; }

    /* ── Ngăn đang chọn: nền trắng ──────────────────────────────────────────────
       Ở khổ rộng, ngăn đang mở được một ô sáng trượt tới (.coop-search__pill) làm nền trắng.
       Ô sáng đó tính toạ độ theo thanh nằm NGANG nên ở đây phải ẩn; thay bằng cách tô nền
       thẳng vào chính ngăn đang mở — cùng hiệu quả thị giác, không cần đo toạ độ. */
    .coop-sheet-open .coop-sheet .coop-search__bar.is-open .coop-seg[aria-expanded="true"],
    .coop-sheet-open .coop-sheet .coop-search__bar.is-open .coop-seg--input:focus-within {
        background: var(--surface-card);
        box-shadow: 0 3px 12px rgba(15, 23, 42, .14);
        border-radius: 14px;
    }

    /* Nút gửi trong tấm phủ là hành động chính — phải có chữ, không thể là kính lúp trơ. */
    .coop-sheet-open .coop-sheet .coop-search__btn { gap: 8px; }

    .coop-sheet-open .coop-sheet .coop-search__btnlabel {
        display: inline;
        font-size: 14px;
        font-weight: 600;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.has-coop-sheet.coop-sheet-open .coop-sheet {
        transform: none;
        transition-duration: .12s;
    }
}

/* ── Băng chuyền thẻ: chừa chỗ cho cú nhấc khi rê chuột ────────────────────────
   overflow-x:auto BUỘC overflow-y cũng thành auto. Thẻ nhấc lên 2px khi rê chuột, nên
   đúng 2px đó — gồm cả viền trên — bị khung cắt mất, thẻ trông như mất viền.
   Đệm dọc 8px cho thẻ chỗ nhấc; margin âm cùng cỡ kéo lại nên bố cục không xê dịch. */
.coop-rail__track {
    padding-top: 8px;
    padding-bottom: 8px;
    margin-top: -8px;
    margin-bottom: -8px;
}

/* ── Chip CHỈ CÓ BIỂU TƯỢNG — dùng cho "Tất cả" ────────────────────────────────
   .vn-chip đệm ngang 16px mỗi bên cho chip có chữ; bỏ chữ đi mà giữ nguyên đệm thì ra
   một viên dẹt lệch. Ở đây ép về hình VUÔNG đúng bằng chiều cao chip (40px) nên nó đứng
   cùng hàng với các chip chữ mà không cao thấp so le. */
.vn-chip--icon {
    width: 40px;
    padding: 0;
    justify-content: center;
    gap: 0;
}

/* Dải không tràn thì bỏ hẳn hai nút — để lại hai nút khoá cứng chẳng để làm gì.
   Phải dùng display ở đây chứ KHÔNG dùng thuộc tính `hidden`: `.vn-iconbtn` khai
   display ở tầng không-layer nên thắng cả [hidden] của trình duyệt. */
.coop-chipbar:not([data-scrollable]) .coop-chipnav { display: none; }

/* Màn cảm ứng hẹp: bỏ nút, để vuốt. Trên 375px hai nút cộng "Tất cả" đã ăn gần một nửa
   chiều ngang. Bù lại kéo dải cuộn sát mép phải màn hình: chip bị cắt chạy hết ra mép
   thay vì dừng giữa khoảng trắng, nhìn là biết còn kéo được. Chip cuối vẫn cách mép
   đúng một khoảng lề khi đã cuộn hết. */
@media (max-width: 639px) {
    .coop-chipnav { display: none; }

    .coop-chipbar__viewport { margin-right: calc(-1 * var(--space-6)); }
    .coop-chipbar__track { padding-right: var(--space-6); }
    .coop-chipbar__viewport::after { width: var(--space-6); }
}

/* ── Ngăn kéo bộ lọc (từ 1024px) ───────────────────────────────────────────────
   /co-hoi-hop-tac/bo-loc là ROUTE THẬT: không có JS thì bấm "Bộ lọc" mở nguyên trang,
   vẫn dùng được. Có JS thì index.js nạp đúng trang đó rồi nhét khối #coop-filter-panel
   vào đây, kèm history.pushState để URL và nút Back vẫn đúng. */
/* Hiện/ẩn điều khiển bằng THUỘC TÍNH `hidden` (JS bật/tắt), không bằng class: trình đọc màn hình
   bỏ qua đúng lúc, và không cần rule display nào ở đây để tranh chấp với UA stylesheet. */
.coop-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
}

.coop-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    border: 0;
    padding: 0;
    width: 100%;
    cursor: pointer;
    animation: coop-fade-in 160ms ease-out;
}

.coop-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    /* 440px vừa đủ cho một cột checkbox, nhưng nay các nhóm bày thành lưới 2 cột nên
       mỗi ô chỉ còn ~190px và tên lĩnh vực vỡ 3 dòng. 520px là mức đủ rộng mà vẫn để
       thấy danh sách kết quả bên trái — ngăn kéo che hết trang thì mất ngữ cảnh. */
    width: min(520px, 100%);
    background: var(--surface-card);
    box-shadow: -8px 0 32px rgba(15, 23, 42, 0.18);
    animation: coop-slide-in 200ms cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
}

@keyframes coop-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes coop-slide-in {
    from { transform: translateX(24px); opacity: 0.4; }
    to { transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .coop-drawer__scrim,
    .coop-drawer__panel { animation: none; }
}

/* ── Khối bộ lọc — dùng chung cho cả trang đầy đủ lẫn ngăn kéo ─────────────────
   Trang đầy đủ: cao tự nhiên, cả trang cuộn, chân khối dính đáy màn hình.
   Trong ngăn kéo: cao 100%, phần thân tự cuộn, chân khối nằm đáy ngăn kéo.
   Một bộ quy tắc chạy được cả hai — không phân nhánh theo màn hình. */
.coop-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.coop-panel__body {
    flex: 1 1 auto;
    min-height: 0;
}

/* Hàng đầu và hàng cuối không cần thêm khoảng cách: .coop-fgroup đã có padding dọc. */
.coop-panel__body > .coop-fgroup:first-child { padding-top: 6px; }
.coop-panel__body > .coop-fgroup:last-child { padding-bottom: 10px; }

.coop-panel__foot {
    position: sticky;
    bottom: var(--coop-foot-offset, 0px);
    z-index: 5;
    background: var(--surface-card);
    border-top: 1px solid var(--border-default);
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

/* Bo góc khối bộ lọc ở bản TRANG ĐẦY ĐỦ (Filter.cshtml) mà KHÔNG dùng overflow:hidden.
   overflow:hidden biến khung thành ngữ cảnh cuộn, và position:sticky của .coop-panel__foot
   mất tác dụng: từ 640px trở lên phải cuộn gần 3000px xuống hết 7 nhóm mới thấy nút
   "Xem N nhu cầu". overflow:clip cắt góc y hệt nhưng KHÔNG tạo ngữ cảnh cuộn nên chân khối
   vẫn dính đáy màn hình. Trình duyệt không hiểu clip thì bỏ qua dòng này — góc vuông ló ra
   một chút, còn hơn mất nút. */
@media (min-width: 640px) {
    .coop-panel-card { overflow: clip; }
}

/* Chân khối phải nằm TRÊN thanh cố định của layout, mà thanh đó đổi theo khổ màn hình:
   dưới 768px là BottomNav (62px), từ 768px là thanh chân trang #tp-footer-tw (56px). Đặt
   trên :root chứ không đặt thẳng vào .coop-panel__foot, để js/cooperation-v3/filter.js đo
   thật rồi ghi đè bằng cách set biến này trên :root — và để dòng .coop-drawer bên dưới
   (đặt thẳng lên phần tử) vẫn thắng cả hai.
   56px chỉ là mức an toàn khi tắt JavaScript. */
:root { --coop-foot-offset: 56px; }

.coop-drawer .coop-panel { height: 100%; }
.coop-drawer .coop-panel__body { overflow-y: auto; }
/* Trong ngăn kéo không có BottomNav che nên trả offset về 0. */
.coop-drawer .coop-panel__foot { --coop-foot-offset: 0px; }

/* Khoá cuộn nền khi ngăn kéo mở. */
body.coop-drawer-open { overflow: hidden; }

/* ── Nhóm lọc ──────────────────────────────────────────────────────────────────
   Mục bị ô tìm loại bỏ, và mục nằm ngoài phần thu gọn, đều ẩn bằng thuộc tính này —
   JS chỉ bật/tắt attribute, không đụng vào style inline. */
.coop-opt[hidden] { display: none !important; }

/* Mục lọc dạng thẻ bấm (hàng gợi ý từ khoá / vai trò đối tác).
   Không dùng .vn-chip: chip của design system cao 40px, một hàng 10 thẻ trong ngăn kéo 440px sẽ
   chiếm gần nửa màn. Thẻ ở đây gọn hơn nhưng giữ đúng bảng màu và trạng thái chọn của chip. */
.coop-tagopt {
    display: inline-flex;
    cursor: pointer;
}

.coop-tagopt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.coop-tagopt > span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: 1.3;
    transition: border-color var(--duration-base) var(--ease-standard),
                background var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
}

.coop-tagopt:hover > span { border-color: var(--text-primary); }

.coop-tagopt input:checked + span {
    border-color: var(--brand-600);
    background: var(--surface-brand-subtle);
    color: var(--brand-700);
    font-weight: var(--weight-semibold);
}

.coop-tagopt input:focus-visible + span {
    outline: none;
    box-shadow: var(--ring-brand);
}

/* ── Thẻ chọn nhanh "Loại nhu cầu" trên form đăng ─────────────────────────────
   Để dạng thẻ có biểu tượng chứ không phải dropdown: form vốn đã dài, thêm một dropdown
   bắt buộc nữa thì người đang đăng dễ bỏ giữa chừng (REQ-36, mục Rủi ro). */
.coop-pick {
    display: block;
    cursor: pointer;
}

.coop-pick input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.coop-pick > span {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--text-primary);
    line-height: 1.3;
    transition: border-color var(--duration-base) var(--ease-standard),
                background var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.coop-pick > span svg { color: var(--text-tertiary); transition: color var(--duration-base) var(--ease-standard); }
.coop-pick:hover > span { border-color: var(--border-strong); }

.coop-pick input:checked + span {
    border-color: var(--brand-600);
    background: var(--surface-brand-subtle);
    color: var(--brand-700);
    font-weight: var(--weight-semibold);
    box-shadow: inset 0 0 0 1px var(--brand-600);
}

.coop-pick input:checked + span svg { color: var(--brand-600); }
.coop-pick input:focus-visible + span { outline: none; box-shadow: var(--ring-brand); }

/* Ô chọn tệp — trình duyệt tự vẽ nút "Choose file", chỉ cần khung cho khớp các ô khác. */
.coop-file {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.coop-file:hover { border-color: var(--brand-600); }
.coop-file:focus-visible { outline: none; box-shadow: var(--ring-brand); }

/* Nút tim đã lưu — tô đặc để phân biệt rõ với chưa lưu. */
[data-coop-save][aria-pressed="true"] svg {
    fill: var(--error-600);
    color: var(--error-600);
}

/* ── Toast ─────────────────────────────────────────────────────────────────────
   Câu chữ "Đã lưu vào Quan tâm — chưa gửi yêu cầu" là BẮT BUỘC theo REQ-36: đổi tên
   Yêu thích thành Quan tâm làm người dùng dễ tưởng đã liên hệ với doanh nghiệp rồi. */
.coop-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 12px);
    z-index: 1300;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: var(--radius-pill);
    background: var(--neutral-900);
    color: var(--neutral-0);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    text-align: center;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.coop-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

@media (max-width: 767px) {
    /* Trên mobile nâng toast lên khỏi BottomNav. */
    .coop-toast { bottom: 72px; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   THANH TÌM 3 NGĂN — Tìm nhu cầu · Loại hợp tác · Khu vực
   ------------------------------------------------------------------------------
   Ba con số dưới đây ĐO TỪ airbnb.com bằng getComputedStyle, không phải phỏng đoán:

     · ô sáng trượt giữa các ngăn   300ms  cubic-bezier(.2, 0, 0, 1)
     · khung bảng đổi kích thước    ~450ms linear(...) — đường cong kiểu lò xo
     · đổi nội dung bảng            175ms  tuyến tính

   Vì sao khung bảng dùng linear() chứ không phải một cubic-bezier: đường cong đó đi
   nhanh ở đoạn đầu rồi bò rất chậm về đích, nên bảng "nở" ra tức thì mà không giật ở
   cuối. cubic-bezier bậc 3 không tả được hình dạng đó.

   linear() cần Chrome 113 / Safari 17.2 trở lên. Mỗi transition vì vậy khai HAI lần:
   dòng trên là bản cubic-bezier cho trình duyệt cũ, dòng dưới ghi đè bằng linear() ở
   trình duyệt hiểu nó. KHÔNG gói linear() vào biến CSS — biến hỏng thì cả thuộc tính
   bị bỏ về giá trị khởi tạo chứ không rơi về dòng khai trước đó.
   ══════════════════════════════════════════════════════════════════════════════ */

/* Thanh tìm và nút Bộ lọc nằm cùng hàng. align-items:center canh theo THANH chứ không theo
   cả khối vì .coop-pop là absolute nên không tính vào chiều cao .coop-search. */
.coop-searchrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
}

.coop-search {
    position: relative;

    /* flex-basis phải NHỎ, không được để width:100%/auto: với flex-wrap, trình duyệt xuống
       dòng khi tổng KÍCH THƯỚC GỐC vượt khung chứ không co item lại trước. Để 100% thì ở
       khổ ~768px thanh đòi trọn 705px và nút Bộ lọc bị đẩy xuống hàng dưới. Cho gốc 320px
       rồi grow: hai thứ luôn chung hàng, thanh nở tối đa tới max-width. */
    flex: 1 1 320px;
    max-width: 760px;
    text-align: left;
}

/* ── Thanh ─────────────────────────────────────────────────────────────────── */
.coop-search__bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 6px 6px 6px 8px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-sm);
    transition: background 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard);
}

.coop-search__bar:hover { box-shadow: var(--shadow-md); }

/* Mở bảng → nền thanh chìm xuống để ô sáng trắng của ngăn đang chọn nổi lên. */
.coop-search__bar.is-open {
    background: var(--surface-muted);
    box-shadow: var(--shadow-md);
}

/* ── Ô sáng trượt ──────────────────────────────────────────────────────────────
   Nằm DƯỚI nội dung ngăn (z-index 0 so với 1). JS chỉ ghi hai biến toạ độ; mọi
   chuyển động do CSS lo, nên không có vòng lặp requestAnimationFrame nào. */
.coop-search__pill {
    position: absolute;
    top: 6px;
    left: 0;
    z-index: 0;
    height: calc(100% - 12px);
    width: var(--coop-pill-w, 0px);
    transform: translateX(var(--coop-pill-x, 0px));
    border-radius: var(--radius-pill);
    background: var(--surface-card);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .14);
    opacity: 0;
    pointer-events: none;
    transition: transform 300ms cubic-bezier(.2, 0, 0, 1),
                width     300ms cubic-bezier(.2, 0, 0, 1),
                opacity   150ms linear 100ms;
}

.coop-search__bar.is-open .coop-search__pill { opacity: 1; }

/* ── Một ngăn ──────────────────────────────────────────────────────────────── */
.coop-seg {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1 1 0;
    min-width: 0;
    padding: 8px 20px;
    border-radius: var(--radius-pill);
    cursor: pointer;
    text-decoration: none;
    background: transparent;
    transition: background 200ms var(--ease-standard);
}

.coop-seg--input { flex: 1.35 1 0; }

/* Chỉ tô nền khi CHƯA mở bảng — mở rồi thì ô sáng lo phần đó, tô thêm là hai lớp chồng. */
.coop-search__bar:not(.is-open) .coop-seg:hover { background: var(--surface-scrim); }

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

.coop-seg__label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--text-primary);
}

.coop-seg__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--brand-600);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.coop-seg__value,
.coop-seg__input {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coop-seg__value.is-filled { color: var(--text-primary); font-weight: 500; }

.coop-seg__input {
    width: 100%;
    border: 0;
    padding: 0;
    background: transparent;
}

.coop-seg__input:focus { outline: none; }
.coop-seg__input::placeholder { color: var(--text-tertiary); }

/* Vạch ngăn cách. Vạch chạm vào ngăn đang mở bị ẩn — để nguyên thì nó cắt ngang mép
   ô sáng, trông như đường kẻ thừa. */
.coop-seg__div {
    position: relative;
    z-index: 1;
    flex: none;
    width: 1px;
    height: 28px;
    background: var(--border-default);
    transition: opacity 200ms var(--ease-standard);
}

.coop-seg__div.is-mute { opacity: 0; }

/* Nút tròn 46px — giữ ĐÚNG chiều cao cũ của nút có chữ, nên bỏ chữ đi mà thanh tìm
   không thấp xuống và không kéo theo thứ gì phải chỉnh lại. */
.coop-search__btn {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    margin-left: 6px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-circle);
    cursor: pointer;
    background: var(--brand-600);
    color: #fff;
    transition: background 200ms var(--ease-standard), transform 120ms var(--ease-standard);
}

.coop-search__btn:hover { background: var(--brand-700); }
.coop-search__btn:active { transform: scale(.97); }
.coop-search__btn:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.coop-search__btn svg { width: 18px; height: 18px; }

/* Nhãn chữ của nút gửi — mặc định ẩn, chỉ bật trong tấm phủ ở khổ hẹp. */
.coop-search__btnlabel { display: none; }

/* ── Khung bảng thả xuống ──────────────────────────────────────────────────── */
.coop-pop {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 12px);
    z-index: 45;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 175ms linear, transform 220ms cubic-bezier(.2, 0, 0, 1);
}

.coop-pop.is-open { opacity: 1; transform: translateY(0); }

.coop-pop__box {
    position: relative;
    width: var(--coop-pop-w, 100%);
    transform: translateX(var(--coop-pop-x, 0px));
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 20px;
    box-shadow: 0 14px 44px rgba(15, 23, 42, .17);
    overflow: hidden;
    transition: transform 450ms cubic-bezier(.2, 0, 0, 1),
                width     450ms cubic-bezier(.2, 0, 0, 1);
    transition: transform 450ms linear(0, .1856 10%, .4653 20%, .6823 30%, .8223 40%, .905 50%, .9513 60%, .9764 70%, .9896 80%, .9965 90%, 1),
                width     450ms linear(0, .1856 10%, .4653 20%, .6823 30%, .8223 40%, .905 50%, .9513 60%, .9764 70%, .9896 80%, .9965 90%, 1);
}

/* Sân khấu: ba bảng chồng lên nhau, chiều cao do JS đo bảng đang bật rồi đặt.
   Chồng lên nhau mới mờ chéo được — xếp theo luồng thì hai bảng đẩy nhau, thấy giật. */
.coop-pop__stage {
    position: relative;
    height: var(--coop-pop-h, 0px);
    transition: height 450ms cubic-bezier(.2, 0, 0, 1);
    transition: height 450ms linear(0, .1856 10%, .4653 20%, .6823 30%, .8223 40%, .905 50%, .9513 60%, .9764 70%, .9896 80%, .9965 90%, 1);
}

.coop-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 56vh;
    overflow-y: auto;
    opacity: 0;

    /* visibility chứ không chỉ opacity: bảng mờ 0 vẫn đọc được bằng trình đọc màn hình và
       vẫn Tab vào được. Hoãn đúng bằng thời gian mờ để không cắt ngang hiệu ứng. */
    visibility: hidden;
    transition: opacity 175ms linear, visibility 0s linear 175ms;
}

.coop-pane.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 175ms linear, visibility 0s linear 0s;
}

/* Lề dưới đủ dày: bảng cuộn được nên hàng cuối phải hở ra khỏi mép, không thì trông
   như bị chân bảng cắt ngang. */
.coop-pane__pad { padding: 18px 20px; }

.coop-pane__head {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.coop-pane__pad .coop-pane__head + * + .coop-pane__head { margin-top: 18px; }

.coop-pane__empty { margin: 0 0 14px; font-size: 13px; color: var(--text-secondary); }
.coop-pane__empty a { color: var(--brand-600); text-decoration: underline; }

.coop-pop__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.coop-pop__clear {
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: underline;
}

.coop-pop__clear:hover { color: var(--brand-700); }

/* ── Bảng 1: gợi ý ─────────────────────────────────────────────────────────── */
.coop-sugg { display: flex; flex-direction: column; }

.coop-sugg__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: background 150ms var(--ease-standard);
}

.coop-sugg__row:hover { background: var(--surface-scrim); }
.coop-sugg__tile { flex: none; width: 34px; height: 34px; }
.coop-sugg__tile svg { width: 17px; height: 17px; }
.coop-sugg__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.coop-sugg__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coop-sugg__meta {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Bảng 2: lưới lĩnh vực ─────────────────────────────────────────────────── */
.coop-sector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

/* Bảng bị kẹp theo bề ngang thanh, nên ở khổ hẹp 4 cột làm mỗi ô chỉ còn ~160px và tên
   lĩnh vực xuống 3 dòng. Bớt một cột thì đọc lại được. */
@media (max-width: 900px) {
    .coop-sector { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.coop-sector__item { display: block; cursor: pointer; }
.coop-sector__cb { position: absolute; opacity: 0; width: 0; height: 0; }

.coop-sector__box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    height: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    transition: border-color 150ms var(--ease-standard), background 150ms var(--ease-standard);
}

.coop-sector__item:hover .coop-sector__box { border-color: var(--border-strong); }

.coop-sector__cb:checked + .coop-sector__box {
    border-color: var(--brand-600);
    background: var(--brand-50);
}

.coop-sector__cb:focus-visible + .coop-sector__box { box-shadow: var(--ring-brand); }

.coop-sector__icon { width: 26px; height: 26px; object-fit: contain; }

.coop-sector__icon--none {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--brand-50);
    color: var(--brand-600);
    font-weight: 700;
    font-size: 13px;
}

.coop-sector__name { font-size: 12.5px; line-height: 1.35; color: var(--text-primary); }

/* ── Bảng 3: khu vực ───────────────────────────────────────────────────────── */
.coop-kv { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.coop-kv__item { cursor: pointer; }
.coop-kv__cb { position: absolute; opacity: 0; width: 0; height: 0; }

.coop-kv__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    font-size: 12.5px;
    color: var(--text-primary);
    transition: border-color 150ms var(--ease-standard), background 150ms var(--ease-standard);
}

.coop-kv__item:hover .coop-kv__chip { border-color: var(--border-strong); }

.coop-kv__cb:checked + .coop-kv__chip {
    border-color: var(--brand-600);
    background: var(--brand-50);
    color: var(--brand-700);
    font-weight: 600;
}

.coop-kv__cb:focus-visible + .coop-kv__chip { box-shadow: var(--ring-brand); }
.coop-kv--tags .coop-kv__chip { border-style: dashed; }

/* ── Lối vào bộ lọc đầy đủ ─────────────────────────────────────────────────── */
/* Nút tròn 46px — CÙNG CỠ với nút Tìm kiếm trong thanh, để hai biểu tượng đọc thành một
   cặp. Trước đây nút này cao bằng cả thanh (58px); bỏ chữ rồi mà giữ 58px thì thành một
   khối tròn to đùng nặng hơn cả thanh tìm. */
.coop-morefilter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    padding: 0;

    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-sm);
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color 150ms var(--ease-standard), box-shadow 150ms var(--ease-standard);
}

.coop-morefilter:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.coop-morefilter:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.coop-morefilter svg { width: 18px; height: 18px; flex: none; color: var(--text-secondary); }

/* Đang lọc thì nút tự đổi sang tông thương hiệu: viên số ở góc là dấu hiệu chính, nhưng
   nút phải khác nút thường ngay từ cái liếc đầu tiên. */
.coop-morefilter:has(.coop-morefilter__count) {
    border-color: var(--brand-600);
    color: var(--brand-700);
}

.coop-morefilter:has(.coop-morefilter__count) svg { color: var(--brand-600); }

/* Viên số dán ở góc trên phải, có VIỀN TRẮNG cùng màu nền trang để tách khỏi mép nút —
   không có viền thì hai đường tròn dính vào nhau thành một hình nhoè. */
.coop-morefilter__count {
    position: absolute;
    top: -3px;
    right: -3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border: 2px solid var(--surface-card);
    border-radius: 999px;
    background: var(--brand-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ── Dưới 768px ────────────────────────────────────────────────────────────────
   Thanh xếp dọc, KHÔNG có bảng thả xuống: hai ngăn kia giữ nguyên là thẻ <a> và mở
   thẳng màn bộ lọc toàn trang — màn đó đã dựng riêng cho khổ này rồi, nhét thêm một
   bảng nổi 24 ô vào màn 375px chỉ làm khó bấm. index.js cũng chỉ chặn từ 768px. */
@media (max-width: 767px) {
    .coop-search__bar {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 6px;
        border-radius: 20px;
    }

    .coop-search__pill { display: none; }
    .coop-seg { border-radius: 14px; padding: 9px 14px; }
    .coop-seg__div { width: auto; height: 1px; margin: 0 14px; }
    /* Thanh xếp dọc thành một thẻ ba dòng thì nút gửi là hành động chính của thẻ đó —
       cho nó trải hết bề ngang, không phải một chấm tròn nhỏ nép ở đáy. */
    .coop-search__btn {
        width: 100%;
        margin: 4px 0 0;
        border-radius: var(--radius-pill);
    }
    .coop-pop { display: none; }

    /* Nút Bộ lọc xuống dòng riêng, giữ nguyên hình tròn 46px. */
    .coop-search { flex-basis: 100%; }
    .coop-morefilter { box-shadow: none; }
}

/* Người dùng tắt hiệu ứng chuyển động thì bỏ hết — chỉ đổi trạng thái, không trượt. */
@media (prefers-reduced-motion: reduce) {
    .coop-search__pill,
    .coop-pop,
    .coop-pop__box,
    .coop-pop__stage,
    .coop-pane { transition: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════
   MÀN BỘ LỌC — 7 nhóm, mỗi nhóm bày theo hình dạng dữ liệu của nó
   ------------------------------------------------------------------------------
   Bản đầu đổ cả 7 nhóm ra một cột checkbox giống hệt nhau: đúng chức năng nhưng đọc
   như trang thiết lập, không phân biệt được nhóm nào quan trọng và bỏ phí hai phần
   ba bề ngang. Kiểu bày chọn ở FilterGroup.Layout, dựng ở _FilterGroup.cshtml.

   Chip và lưới lĩnh vực DÙNG LẠI đúng lớp của thanh tìm (.coop-kv__chip,
   .coop-sector) — chọn cùng một thứ ở hai nơi thì phải trông như nhau.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Khung một nhóm ────────────────────────────────────────────────────────── */
.coop-fgroup {
    padding: 22px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.coop-fgroup:last-of-type { border-bottom: 0; }

.coop-fgroup__head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 14px;
}

/* Ô icon thay cho glyph trần: cho tiêu đề nhóm một mỏ neo thị giác, mắt lướt dọc
   danh sách bắt được ranh giới nhóm ngay mà không cần đọc chữ. */
.coop-fgroup__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--brand-50);
    color: var(--brand-600);
}

.coop-fgroup__icon svg { width: 16px; height: 16px; }

.coop-fgroup__titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.coop-fgroup__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-primary);
}

.coop-fgroup__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--brand-600);
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
}

/* filter.js bật/tắt bộ đếm bằng class .hidden của Tailwind, mà utility Tailwind nằm trong
   @layer utilities nên THUA rule không-layer ở trên — không có dòng này thì mọi nhóm hiện
   một badge "0" thường trực. Bẫy này đã ghi trong themes/vne-v3/README.md. */
.coop-fgroup__count.hidden { display: none; }

.coop-fgroup__hint { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary); }

.coop-fgroup__sub {
    margin: 16px 0 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.coop-fgroup__sub:first-of-type { margin-top: 0; }

.coop-fgroup__empty { margin: 12px 0 0; font-size: 12.5px; color: var(--text-tertiary); }

/* ── Ô tìm trong nhóm ──────────────────────────────────────────────────────── */
.coop-fsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 12px;
    margin-bottom: 12px;
    background: var(--surface-muted);
    border: 1px solid transparent;
    border-radius: 10px;
    transition: background 150ms var(--ease-standard), border-color 150ms var(--ease-standard);
}

.coop-fsearch:focus-within { background: var(--surface-card); border-color: var(--brand-600); }
.coop-fsearch svg { width: 15px; height: 15px; flex: none; color: var(--text-tertiary); }

.coop-fsearch input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 13px;
    color: var(--text-primary);
}

.coop-fsearch input:focus { outline: none; }
.coop-fsearch input::placeholder { color: var(--text-tertiary); }

/* ── Kiểu "tile" — 8 loại nhu cầu ──────────────────────────────────────────── */
.coop-ftile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.coop-ftile__item { display: block; cursor: pointer; }
.coop-ftile__item > input { position: absolute; opacity: 0; width: 0; height: 0; }

.coop-ftile__box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
    padding: 11px 12px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    transition: border-color 150ms var(--ease-standard), background 150ms var(--ease-standard);
}

.coop-ftile__item:hover .coop-ftile__box { border-color: var(--border-strong); }

.coop-ftile__item > input:checked + .coop-ftile__box {
    border-color: var(--brand-600);
    background: var(--brand-50);
}

.coop-ftile__item > input:focus-visible + .coop-ftile__box { box-shadow: var(--ring-brand); }

.coop-ftile__ico { flex: none; width: 32px; height: 32px; }
.coop-ftile__ico svg { width: 16px; height: 16px; }

.coop-ftile__name {
    font-size: 13px;
    line-height: 1.3;
    color: var(--text-primary);
    min-width: 0;
}

/* Dấu tích chỉ hiện khi đã chọn — chỗ trống của nó không được đẩy chữ, nên đặt tuyệt đối. */
.coop-ftile__tick {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 14px;
    height: 14px;
    color: var(--brand-600);
    opacity: 0;
    transition: opacity 150ms var(--ease-standard);
}

.coop-ftile__item > input:checked + .coop-ftile__box .coop-ftile__tick { opacity: 1; }

/* ── Lưới lĩnh vực trong màn lọc — hẹp hơn thanh tìm nên 2 cột ─────────────── */
.coop-sector--panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (min-width: 620px) {
    .coop-panel-card .coop-sector--panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Kiểu "trust" — 3 bậc xác minh ─────────────────────────────────────────── */
.coop-ftrust { display: flex; flex-direction: column; gap: 8px; }

.coop-ftrust__item { display: block; cursor: pointer; }
.coop-ftrust__item > input { position: absolute; opacity: 0; width: 0; height: 0; }

.coop-ftrust__box {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--border-default);
    border-radius: 12px;
    transition: border-color 150ms var(--ease-standard), background 150ms var(--ease-standard);
}

.coop-ftrust__item:hover .coop-ftrust__box { border-color: var(--border-strong); }

.coop-ftrust__item > input:checked + .coop-ftrust__box {
    border-color: var(--brand-600);
    background: var(--brand-50);
}

.coop-ftrust__item > input:focus-visible + .coop-ftrust__box { box-shadow: var(--ring-brand); }

.coop-ftrust__dot { flex: none; width: 10px; height: 10px; border-radius: 999px; }

/* Registered là hồ sơ TỰ CÔNG BỐ — cố ý để chấm rỗng viền mảnh, không dùng màu tín
   hiệu, đúng nguyên tắc của .vn-trust-ribbon--registered trên thẻ. */
.coop-ftrust__dot--registered { background: transparent; box-shadow: inset 0 0 0 2px var(--border-strong); }
.coop-ftrust__dot--verified { background: var(--accent-600); }
.coop-ftrust__dot--audited { background: var(--brand-500); }

.coop-ftrust__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.coop-ftrust__name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.coop-ftrust__hint { font-size: 12px; line-height: 1.4; color: var(--text-tertiary); }

.coop-ftrust__tick {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--brand-600);
    opacity: 0;
    transition: opacity 150ms var(--ease-standard);
}

.coop-ftrust__item > input:checked + .coop-ftrust__box .coop-ftrust__tick { opacity: 1; }

/* ── Kiểu "segment" — thời hạn phản hồi, chọn 1 ────────────────────────────── */
.coop-fseg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    background: var(--surface-muted);
    border-radius: 12px;
}

.coop-fseg__item { flex: 1 1 auto; cursor: pointer; }
.coop-fseg__item > input { position: absolute; opacity: 0; width: 0; height: 0; }

.coop-fseg__pill {
    display: block;
    padding: 8px 12px;
    border-radius: 9px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.3;
    color: var(--text-secondary);
    white-space: nowrap;
    transition: background 160ms var(--ease-standard), color 160ms var(--ease-standard),
                box-shadow 160ms var(--ease-standard);
}

.coop-fseg__item:hover .coop-fseg__pill { color: var(--text-primary); }

.coop-fseg__item > input:checked + .coop-fseg__pill {
    background: var(--surface-card);
    color: var(--brand-700);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
}

.coop-fseg__item > input:focus-visible + .coop-fseg__pill { box-shadow: var(--ring-brand); }

/* ── Nút "Xem thêm (N)" ────────────────────────────────────────────────────── */
.coop-fmore {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-600);
    transition: color 150ms var(--ease-standard);
}

.coop-fmore:hover { color: var(--brand-800); }
.coop-fmore svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════════════════
   THẺ NHU CẦU — bản rút gọn, PO chốt 11/09/2026
   ------------------------------------------------------------------------------
   Năm tầng: danh tính · loại nhu cầu · tiêu đề · mô tả ngắn · chân thẻ.
   Xem chú thích đầu Views/CooperationV3/_OpportunityCard.cshtml để biết đã bỏ những
   gì và vì sao.

   Thang chữ CỐ Ý chỉ ba bậc — 16 (tiêu đề) · 13 (tên doanh nghiệp, mô tả) · 12 (tỉnh
   thành, viên nhãn, hạn) — và ba bậc đậm 500/600/400. Bản trước có năm bậc cỡ chữ nằm
   gọn trong 3px (11,5 · 12 · 12,5 · 13 · 14,5) nên mắt không tách được tầng nào với
   tầng nào, cộng năm khối in đậm ngang sức nhau.

   Toàn bộ kiểu dáng viết ở đây chứ không phải class Tailwind trong view: vne-v3.min.css
   là sản phẩm biên dịch, class Tailwind mới chưa chạy npm run build:css thì im lặng
   không có tác dụng.
   ══════════════════════════════════════════════════════════════════════════════ */

/* .vn-card đã là flex column; thân thẻ chiếm hết phần còn lại để chân thẻ ghim được đáy. */
.coop-card__body {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

/* ── Nút Quan tâm ──────────────────────────────────────────────────────────────
   z-20 để cao hơn lớp phủ ::after của link tiêu đề (z-10). 40px cho vừa đầu ngón tay. */
.coop-card__save {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 20;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: var(--neutral-400);
    cursor: pointer;
    display: grid;
    place-content: center;
    opacity: 0;
    transition: opacity 150ms var(--ease-standard), color 150ms var(--ease-standard),
                background-color 150ms var(--ease-standard);
}

.coop-card__save svg { width: 18px; height: 18px; }
.coop-card:hover .coop-card__save,
.coop-card__save:focus-visible,
.coop-card__save[aria-pressed="true"] { opacity: 1; }
.coop-card__save:hover { background: var(--neutral-100); color: var(--neutral-600); }
.coop-card__save[aria-pressed="true"] { color: #c2483f; }
.coop-card__save[aria-pressed="true"] svg { fill: currentColor; }

/* Màn cảm ứng không có trạng thái rê chuột — giấu nút sau hover là giấu hẳn. */
@media (hover: none), (max-width: 900px) {
    .coop-card__save { opacity: 1; background: transparent; }
}

/* ── Tầng 1: danh tính ─────────────────────────────────────────────────────────
   padding-right chừa chỗ cho nút Quan tâm nằm đè góc phải, để tên doanh nghiệp dài
   cắt bằng dấu … chứ không bao giờ chui xuống dưới nút. */
.coop-card__id {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding-right: 44px;
}

/* Ô nhận diện: ô chữ cái đầu nằm SẴN bên dưới, logo phủ lên trên. Ảnh hỏng thì
   onerror gỡ thẻ <img> đi và ô chữ lộ ra — không bao giờ còn lại một ô trống. */
.coop-card__logo {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    overflow: hidden;
    display: grid;
    place-content: center;
    border: 1px solid var(--border-subtle);
}

.coop-card__initials {
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
}

/* Nền trắng + contain: logo ngang hay dọc đều lọt trọn, không cắt rìa, không bóp méo. */
.coop-card__logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 3px;
    background: #fff;
}

.coop-card__who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.coop-card__coname {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coop-card__coname--link {
    position: relative;
    z-index: 20;
    transition: color 150ms var(--ease-standard);
}

.coop-card__coname--link:hover { color: var(--brand-700); }

.coop-card__loc {
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tầng 2: loại nhu cầu ──────────────────────────────────────────────────────
   Khối riêng để viên nhãn không bị flex kéo giãn hết bề ngang. */
.coop-card__type { display: flex; }

/* ── Tầng 3: tiêu đề ───────────────────────────────────────────────────────────
   line-clamp KHÔNG có sẵn trong vne-v3.min.css nên phải viết tay ở đây.
   min-height giữ ĐÚNG 2 dòng (16 × 1.38 × 2 = 44) làm sàn: tiêu đề ngắn không để lại
   khoảng trắng lớn, tiêu đề dài vẫn được tới 3 dòng, và chân thẻ thì đã tự ghim đáy
   bằng margin-top:auto nên các thẻ cùng hàng luôn thẳng dòng cuối. */
.coop-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.38;
    letter-spacing: -0.008em;
    color: #222;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    min-height: 44px;
}

.coop-card__title a { display: block; color: inherit; }

/* ── Tầng 4: chân thẻ ──────────────────────────────────────────────────────────
   margin-top:auto ghim xuống đáy: thẻ trong cùng một hàng dài ngắn khác nhau thì dòng
   tín nhiệm và dòng hạn vẫn nằm đúng một mốc. */
.coop-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 11px;
    border-top: 1px solid var(--border-subtle);
    font-size: 12px;
    color: var(--text-tertiary);
}

.coop-card__foot .vn-badge svg { width: 12px; height: 12px; flex: none; }

.coop-card__due {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

.coop-card__due svg { width: 14px; height: 14px; flex: none; }
.coop-card__due span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Chỉ hai trạng thái này mới được tô màu — còn nhiều thời gian là mặc định, không báo. */
.coop-card__due--soon { color: var(--warning-600); font-weight: 600; }
.coop-card__due--dead { color: var(--text-disabled); }

/* ══════════════════════════════════════════════════════════════════════════════
   TRANG CHI TIẾT NHU CẦU — /co-hoi-hop-tac/{id}
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Mô tả có cấu trúc ─────────────────────────────────────────────────────────
   Số thứ tự vẽ bằng ::before của <li> chứ không để trình duyệt tự đánh: cần đặt nó
   cùng hàng với tiêu đề mục và cùng màu brand, list-style mặc định không làm được. */
.coop-brief {
    counter-reset: coop-brief;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.coop-brief > li { counter-increment: coop-brief; }

.coop-brief__title {
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.coop-brief__title::before {
    content: counter(coop-brief) ".";
    color: var(--brand-600);
    font-weight: var(--weight-bold);
    flex: none;
}

.coop-brief__points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coop-brief__points > li {
    position: relative;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Chấm đầu dòng vẽ tay: dấu • mặc định của trình duyệt canh lệch với chữ 13,5px
   và không đổi màu theo token được. */
.coop-brief__points > li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 4px;
    height: 4px;
    border-radius: 999px;
    background: var(--border-strong);
}

/* ── Quy trình kết nối — 4 bước nằm ngang ─────────────────────────────────────
   Khối này chiếm trọn bề ngang trang (ngoài lưới hai cột), nên bốn bước có chỗ đứng
   thành một hàng thật: ~270px mỗi bước ở 1280px.
   Mũi tên nối vẽ bằng ::after với SVG data-URI: không dùng ký tự "→" vì nó đổi hình
   theo phông chữ hệ thống và trình đọc màn hình sẽ đọc thành "mũi tên phải". */
.coop-flow {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.coop-flow__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 26px 14px 14px;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

/* Mũi tên đặt ở khe giữa hai bước, không nằm trong ô nào — nên ô cuối không có. */
.coop-flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -13px;
    top: 26px;
    width: 18px;
    height: 18px;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a8a39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
}

.coop-flow__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: var(--radius-circle);
    background: var(--brand-600);
    color: var(--text-on-brand);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: var(--weight-bold);
    line-height: 1;
}

.coop-flow__ico { display: inline-flex; color: var(--brand-600); }
.coop-flow__ico svg { width: 20px; height: 20px; }

.coop-flow__title {
    margin: 6px 0 0;
    font-size: 13.5px;
    font-weight: var(--weight-bold);
    line-height: 1.35;
    color: var(--text-primary);
}

.coop-flow__body {
    margin: 4px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* 960px là điểm bốn cột hết chỗ: dưới mức đó mỗi bước còn dưới ~215px, phần chữ chỉ
   còn ~140px sau khi trừ số thứ tự và lề — tiêu đề bắt đầu vỡ thành ba dòng.
   Xếp lại rồi thì mũi tên chỉ sang phải sẽ chỉ sai hướng — tắt hẳn; thứ tự vẫn đọc
   được nhờ số trong vòng tròn. */
@media (max-width: 959px) {
    .coop-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coop-flow__step { padding-right: 14px; }
    .coop-flow__step::after { display: none; }
}

@media (max-width: 559px) {
    .coop-flow { grid-template-columns: minmax(0, 1fr); }
}

/* ── Dấu tín nhiệm của bên đăng ────────────────────────────────────────────────
   Khối cuối CỘT TRÁI, xếp cùng hàng với các thẻ trắng .vn-card nên phải tự đứng được
   như một thẻ: có viền, có bóng — không phải một dải màu dán vào cột.

   Nền kem lấy từ token --warning-100 (#fbf0d9) thay cho #fffae1 của bản vẽ: cùng sắc,
   nhưng là màu đã có trong hệ. Các lớp sáng chồng lên là TRẮNG TRONG SUỐT chứ không
   phải mã màu kem pha sẵn — token vẫn là thứ duy nhất quyết định sắc nền, đổi token
   một chỗ là cả khối đổi theo.
   (Cố ý không dùng color-mix: hàm đó lồng var() thì trình duyệt cũ hỏng ở bước tính
   giá trị, mà hỏng kiểu đó KHÔNG rơi về dòng khai trước — cả nền sẽ mất trắng.) */
.coop-trustmark {
    margin: 0;
    padding: 34px 32px 30px;
    border-radius: var(--radius-lg);
    /* rgba() không nhận biến màu dạng hex nên hai sắc ấm dưới đây phải ghi thẳng số:
       182,121,31 chính là --warning-600 (#b6791f). Đổi token thì sửa kèm ở đây. */
    border: 1px solid rgba(182, 121, 31, 0.2);
    /* Ánh sáng rọi từ đỉnh xuống con dấu, đáy trầm lại một chút — để khối có chiều sâu
       thay vì là một mảng phẳng. */
    background:
        radial-gradient(118% 64% at 50% 0%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.38) 45%,
            rgba(255, 255, 255, 0) 78%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0) 52%,
            rgba(182, 121, 31, 0.07) 100%),
        var(--warning-100);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 10px 26px -18px rgba(182, 121, 31, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}

/* Ảnh gốc 1724×1092 — khoá bề rộng để không phình, height:auto giữ đúng tỉ lệ. */
.coop-trustmark img {
    width: 100%;
    max-width: 232px;
    height: auto;
    margin-bottom: 14px;
}

.coop-trustmark__lead {
    margin: 0;
    max-width: 42ch;
    /* balance chia đều độ dài các dòng; trình duyệt cũ không hiểu thì bỏ qua, chữ vẫn
       ngắt như thường chứ không hỏng gì. */
    text-wrap: balance;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: var(--weight-bold);
    line-height: 1.45;
    color: var(--brand-900);
}

/* Dòng danh tính nằm dưới một đường kẻ ngắn: đọc như chữ ký dưới con dấu, chứ không
   phải thêm một dòng chữ nữa trong khối. */
.coop-trustmark__co {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 360px;
    margin: 16px 0 14px;
    padding-top: 15px;
    border-top: 1px solid rgba(182, 121, 31, 0.18);
    font-size: 14px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

@media (max-width: 559px) {
    .coop-trustmark { padding: 26px 18px 24px; }
    .coop-trustmark img { max-width: 190px; }
    .coop-trustmark__lead { font-size: 15.5px; }

    /* Bản thiết kế ngắt câu sau "doanh nghiệp" — đúng trên máy tính, nhưng trên điện
       thoại vế sau vẫn tràn thêm một dòng và bỏ lại đúng một chữ đứng lẻ. Bỏ dấu ngắt
       cứng đi, để text-wrap: balance tự chia ba dòng đều nhau.
       (balance KHÔNG cân qua được một <br> cứng — đã đo, vẫn ra chữ mồ côi.) */
    .coop-trustmark__br { display: none; }
}

/* ── Thư viện ảnh nhu cầu ──────────────────────────────────────────────────────
   1 ảnh lớn 16:9 + hàng 4 ô vuông. Ô cuối phủ lớp "+N" khi còn ảnh chưa hiện. */
.coop-gallery {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coop-gallery__hero,
.coop-gallery__thumb {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    /* Nền xám sẵn: ảnh chưa tải xong hoặc hỏng thì ô vẫn giữ đúng khung, bố cục không nhảy. */
    background: var(--neutral-100);
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--duration-base) var(--ease-standard),
                box-shadow var(--duration-base) var(--ease-standard);
}

.coop-gallery__hero { aspect-ratio: 16 / 9; }
.coop-gallery__thumb { aspect-ratio: 4 / 3; }

.coop-gallery__hero img,
.coop-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.coop-gallery__hero:hover,
.coop-gallery__thumb:hover { border-color: var(--brand-600); }

.coop-gallery__hero:focus-visible,
.coop-gallery__thumb:focus-visible { outline: none; box-shadow: var(--ring-brand); }

.coop-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.coop-gallery__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 24, 21, 0.58);
    color: var(--neutral-0);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: var(--weight-bold);
    letter-spacing: -0.01em;
}

.coop-gallery__note {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-tertiary);
}

/* Dưới 480px, 4 ô vuông mỗi ô chỉ còn ~75px — nhỏ tới mức không nhìn ra gì. Còn 3 ô. */
@media (max-width: 479px) {
    .coop-gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .coop-gallery__thumbs > *:nth-child(4) { display: none; }
}

/* ── Khung phóng to ảnh ────────────────────────────────────────────────────────
   Hiện/ẩn bằng thuộc tính `hidden` (JS bật/tắt) nên không cần rule display nào ở đây. */
.coop-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.coop-lightbox__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0;
    border: 0;
    background: rgba(26, 24, 21, 0.88);
    cursor: zoom-out;
}

.coop-lightbox__frame {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: min(1100px, 100%);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    /* pointer-events chuyển tiếp xuống lớp phủ: bấm ra vùng trống quanh ảnh vẫn đóng được. */
    pointer-events: none;
}

.coop-lightbox__frame img {
    max-width: 100%;
    max-height: calc(100vh - 140px);
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--neutral-900);
    pointer-events: auto;
}

.coop-lightbox__frame figcaption {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    pointer-events: auto;
}

.coop-lightbox__nav,
.coop-lightbox__close {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-circle);
    background: rgba(26, 24, 21, 0.55);
    color: var(--neutral-0);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-standard);
}

.coop-lightbox__nav:hover,
.coop-lightbox__close:hover { background: rgba(26, 24, 21, 0.85); }
.coop-lightbox__nav:focus-visible,
.coop-lightbox__close:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.coop-lightbox__nav svg,
.coop-lightbox__close svg { width: 20px; height: 20px; }

.coop-lightbox__nav--prev { left: 16px; top: 50%; transform: translateY(-50%); }
.coop-lightbox__nav--next { right: 16px; top: 50%; transform: translateY(-50%); }
.coop-lightbox__close { top: 16px; right: 16px; }

/* Chỉ một ảnh thì hai nút chuyển ảnh vô nghĩa — JS gắn thuộc tính này lên khung. */
.coop-lightbox[data-single] .coop-lightbox__nav { display: none; }

@media (max-width: 639px) {
    .coop-lightbox { padding: 12px; }
    .coop-lightbox__nav { width: 38px; height: 38px; }
    .coop-lightbox__nav--prev { left: 6px; }
    .coop-lightbox__nav--next { right: 6px; }
}

body.coop-lightbox-open { overflow: hidden; }

/* ══════════════════════════════════════════════════════════════════════════════
   HỘP THOẠI GỬI ĐỀ XUẤT HỢP TÁC
   ------------------------------------------------------------------------------
   Ẩn/hiện bằng THUỘC TÍNH `hidden` như ngăn kéo và khung ảnh: vì vậy khối gốc
   .coop-modal TUYỆT ĐỐI KHÔNG được khai `display` — khai là thắng [hidden] của
   trình duyệt (cùng độ ưu tiên, luật này viết sau) và hộp thoại hiện thường trực.
   ══════════════════════════════════════════════════════════════════════════════ */
.coop-modal {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 24px;
}

/* Vì dòng trên khai `display`, phải tự tay tắt lại khi có [hidden] — [hidden] của
   Tailwind nằm trong @layer base, mà luật không-layer luôn thắng luật trong layer. */
.coop-modal[hidden] { display: none; }

.coop-modal__scrim {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    padding: 0;
    background: var(--surface-overlay);
    cursor: pointer;
    animation: coop-fade-in 160ms ease-out;
}

/* position:relative để nằm TRÊN lớp phủ (cùng ngữ cảnh xếp lớp, ai đứng sau trong
   mã nguồn thì vẽ sau). Chiều cao để nội dung tự quyết: bản xem lại ngắn hơn biểu
   mẫu nhiều, khoá cứng chiều cao thì nó chừa một mảng trống to giữa nội dung và
   chân hộp thoại. */
.coop-modal__panel {
    position: relative;
    width: min(760px, 100%);
    max-height: min(calc(100dvh - 48px), 860px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--surface-card);
    box-shadow: var(--shadow-xl);
    animation: coop-modal-pop 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

@keyframes coop-modal-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .coop-modal__scrim,
    .coop-modal__panel { animation: none; }
}

/* ── Đầu hộp thoại ── */
.coop-modal__head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: none;
    padding: 16px 18px;
    border-bottom: 1px solid var(--border-subtle);
    background: linear-gradient(180deg, var(--brand-50) 0%, var(--surface-card) 100%);
}

.coop-modal__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-md);
    background: var(--brand-600);
    color: var(--text-on-brand);
}

.coop-modal__mark svg { width: 20px; height: 20px; }

.coop-modal__heading { min-width: 0; flex: 1; }

.coop-modal__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: var(--weight-bold);
    line-height: 1.25;
    color: var(--brand-900);
}

/* Một dòng, quá thì cắt: tiêu đề nhu cầu dài tới hai dòng sẽ đẩy hộp thoại phình ra
   ngay ở chỗ ít thông tin nhất. Có title để rê chuột xem đủ. */
.coop-modal__sub {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.coop-modal__dot { color: var(--border-strong); margin: 0 2px; }
.coop-modal__state { flex: none; }

.coop-modal__close {
    width: 34px;
    height: 34px;
    flex: none;
    border: 0;
    border-radius: var(--radius-circle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--duration-fast) var(--ease-standard),
                color var(--duration-fast) var(--ease-standard);
}

.coop-modal__close:hover { background: var(--surface-scrim); color: var(--text-primary); }
.coop-modal__close:focus-visible { outline: none; box-shadow: var(--ring-brand); }
.coop-modal__close svg { width: 18px; height: 18px; }

/* ── Thân cuộn ── */
.coop-modal__form,
.coop-modal__done {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

/* BẮT BUỘC: hai khối trên khai `display` ở tầng không-layer, mà [hidden] của Tailwind
   nằm trong @layer base — không layer luôn thắng layer. Thiếu dòng này thì JS đặt
   hidden mà cả biểu mẫu lẫn bản xem lại vẫn hiện chồng lên nhau. */
.coop-modal__form[hidden],
.coop-modal__done[hidden] { display: none; }

.coop-modal__body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── Dải hạn nhận đề xuất ── */
.coop-deadline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
}

.coop-deadline__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
}

.coop-deadline__label svg { color: var(--text-tertiary); }
.coop-deadline__value { display: inline-flex; align-items: baseline; gap: 10px; }

.coop-deadline__pill {
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--success-100);
    color: var(--success-600);
    font-size: 12.5px;
    font-weight: var(--weight-semibold);
}

.coop-deadline__pill.is-soon { background: var(--warning-100); color: var(--warning-600); }

.coop-deadline__date {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--brand-900);
    font-variant-numeric: tabular-nums;
}

/* ── Một dòng của biểu mẫu: bên trái họ hỏi gì, bên phải bạn trả lời ──
   Từ 620px trở lên chia hai cột. Hẹp hơn thì xếp dọc — nhãn trên, ô nhập dưới. */
.coop-prow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--border-subtle);
}

.coop-prow:first-of-type { border-top: 0; padding-top: 4px; }

.coop-prow__side { display: flex; align-items: flex-start; gap: 10px; }

.coop-prow__ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--radius-sm);
    background: var(--surface-brand-subtle);
    color: var(--brand-600);
}

.coop-prow__ico svg { width: 16px; height: 16px; }

.coop-prow__label {
    margin: 0;
    font-size: 14px;
    font-weight: var(--weight-bold);
    line-height: 1.35;
    color: var(--text-primary);
}

.coop-prow__req { color: var(--error-600); }

/* "Họ cần: …" — mực nhạt cho chữ dẫn, mực đậm cho nội dung, để mắt bắt ngay phần
   dữ liệu thật chứ không phải hai chữ lặp lại ở mọi dòng. */
.coop-prow__ask {
    margin: 3px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-tertiary);
}

.coop-prow__ask span { color: var(--text-secondary); font-weight: var(--weight-medium); }

.coop-prow__main { min-width: 0; }
.coop-prow__chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* Viên chọn: dùng lại toàn bộ trạng thái của .coop-pick, chỉ đổi hình dáng. */
.coop-pick--chip { display: inline-block; }

.coop-pick--chip > span {
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius-pill);
    font-size: 13px;
}

/* Dấu tích chỉ hiện khi đã chọn — chưa chọn mà đã có tích thì đọc như đang bật sẵn. */
.coop-pick--chip > span svg { opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
.coop-pick--chip input:checked + span svg { opacity: 1; color: var(--brand-600); }

/* Ô đánh dấu thật bị giấu (opacity 0, 0×0) nên vòng tiêu điểm của trình duyệt không thấy
   được — phải tự vẽ lên viên chọn, không thì người dùng bàn phím đi Tab vào chỗ vô hình.
   Chỉ đặt cho biến thể --chip: không đụng vào các ô lớn ở màn Đăng nhu cầu. */
.coop-pick--chip input:focus-visible + span {
    border-color: var(--border-focus);
    box-shadow: var(--ring-brand);
}

.coop-prow__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
    min-height: 18px;
}

.coop-prow__err { margin: 0; font-size: 12.5px; color: var(--text-error); }
.coop-prow__count { margin-left: auto; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }

.coop-prow--msg .vn-textarea { min-height: 104px; }
.coop-prow.is-error .vn-textarea { border-color: var(--error-600); }
.coop-prow.is-error .vn-textarea:focus { box-shadow: var(--ring-error); }

@media (min-width: 620px) {
    .coop-prow {
        grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }
    .coop-prow__side { padding-top: 8px; }
    .coop-prow--msg .coop-prow__side { padding-top: 10px; }
}

/* ── Chân hộp thoại ── */
.coop-modal__foot {
    flex: none;
    padding: 14px 18px 16px;
    border-top: 1px solid var(--border-subtle);
    background: var(--surface-card);
}

.coop-modal__note {
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-tertiary);
    text-align: center;
}

.coop-modal__note a { color: var(--brand-600); font-weight: var(--weight-semibold); text-decoration: underline; }
.coop-modal__note a:hover { color: var(--brand-800); }

.coop-modal__actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ── Bản xem lại ── */
.coop-done__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }

.coop-done__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--radius-circle);
    background: var(--success-100);
    color: var(--success-600);
}

.coop-done__mark svg { width: 20px; height: 20px; }

.coop-done__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: var(--weight-bold);
    color: var(--brand-900);
}

.coop-done__sub { margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }

/* Nhắc "đọc lại trước khi gửi" — mực THƯƠNG HIỆU, không phải vàng cảnh báo: đây là một
   bước bình thường của việc gửi, tô vàng thì người dùng tưởng có gì sai. */
.coop-modal__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--brand-100);
    background: var(--surface-brand-subtle);
    color: var(--text-primary);
}

.coop-modal__hint svg { margin-top: 2px; color: var(--brand-600); }
.coop-modal__hint p { margin: 0; font-size: 13px; line-height: 1.5; }
.coop-modal__hint strong { color: var(--brand-900); }

.coop-review { margin: 16px 0 0; display: flex; flex-direction: column; gap: 0; }

.coop-review > div {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid var(--border-subtle);
}

.coop-review > div:first-child { border-top: 0; }
.coop-review dt { font-size: 12.5px; font-weight: var(--weight-semibold); color: var(--text-tertiary); }
.coop-review dd { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-primary); white-space: pre-line; }

@media (max-width: 619px) {
    .coop-review > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

@media (max-width: 559px) {
    .coop-modal { padding: 0; }
    .coop-modal__panel { width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .coop-modal__head { padding: 12px 14px; }
    .coop-modal__body { padding: 14px; }
    .coop-modal__foot { padding: 12px 14px 14px; }
    /* .vn-badge khai display ở tầng không-layer, cùng độ ưu tiên một-lớp — phải đủ
       hai lớp mới chắc chắn thắng, không phụ thuộc thứ tự nạp tệp. */
    .coop-modal__head .coop-modal__state { display: none; }
}

body.coop-modal-open { overflow: hidden; }

/* ── Nút đang chờ server ───────────────────────────────────────────────────────
   Dùng cho nút Quan tâm trên thẻ ở bản dữ liệu thật (/co-hoi-hop-tac): nút GHI
   thật nên phải chặn bấm lại trong lúc chờ, và phải cho thấy là máy đang làm việc —
   khoá im lặng thì người dùng tưởng bấm hụt rồi bấm tiếp.
   Cùng quy ước class với css/cooperation-v3/compose.css. */
.is-busy {
    position: relative;
    pointer-events: none;
    opacity: .75;
    cursor: progress;
}

.is-busy::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: coop-spin .6s linear infinite;
}

.is-busy > * { opacity: .35; }

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

@media (prefers-reduced-motion: reduce) {
    .is-busy::after { animation: none; }
}

/* ── Đang nạp kết quả mới (lọc không tải lại trang) ───────────────────────────
   Chỉ làm mờ và chặn bấm, KHÔNG xoá trắng nội dung cũ: thấy kết quả cũ mờ đi rồi
   được thay là hiểu ngay máy đang làm gì; xoá trắng rồi chờ thì trang chớp một cái
   và người dùng mất luôn mốc để so sánh. */
#home-root.is-loading {
    opacity: .55;
    pointer-events: none;
    transition: opacity 120ms ease-out;
}