/*
    hub-detail.css — trang Hub công khai /vne-hub/{id} (Views/VneHubDetail).
    Dựng theo canvas "Trang Hub công khai" (artboard Main, BoardTab, BoardTree, Members, MembersList, EventsTab, PhotosTab, FilesTab, Mobile).
    Màu lấy từ token body.home-inter (css/home-v3/index.css) — bảng màu thiết kế trùng khớp token này
    (#2f5a72 = --brand-600, #152836 = --brand-900, #12161a = --neutral-900 …), nên KHÔNG viết mã màu rời
    trừ vài màu nhấn riêng của thiết kế (nền xanh lá trạng thái, nền cam đất của avatar/chip "Trực tiếp").
    Class tiền tố hd-; không phụ thuộc Tailwind nên không phải build lại vne-v3.min.css.
*/

body.home-inter {
    --hd-success-50: #e4f3ec;
    --hd-clay-50: #f8efe8;
    --hd-clay-600: #854c2e;
    --hd-seg-bg: #eaedf0;
    --hd-line: #d5dde3;
    --hd-shadow-sm: 0 1px 2px rgba(18, 22, 26, 0.05);
    background: var(--neutral-50);
}

.hd-page { color: var(--neutral-900); }
.hd-page a { color: var(--brand-600); text-decoration: none; }
.hd-page a:hover { color: var(--brand-700); }
.hd-page button { font-family: inherit; }
.hd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hd-shell { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.hd-page [data-lucide], .hd-page svg.lucide { flex: none; }

/* ── Nút ─────────────────────────────────────────────────────────────── */
.hd-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 44px; padding: 0 20px; box-sizing: border-box; border-radius: 8px; border: 1px solid transparent;
    font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; cursor: pointer;
}
.hd-btn svg { width: 18px; height: 18px; }
/* Hộp thoại render ngoài #hd-root (.hd-page) → màu nút khai báo thêm cho .hd-dialog. */
.hd-page .hd-btn--primary, .hd-dialog .hd-btn--primary { background: var(--brand-600); color: #fff; box-shadow: 0 1px 2px rgba(18, 22, 26, 0.12); }
.hd-page .hd-btn--primary:hover, .hd-dialog .hd-btn--primary:hover { background: var(--brand-700); color: #fff; }
.hd-page .hd-btn--secondary, .hd-dialog .hd-btn--secondary { background: #fff; border-color: var(--neutral-300); color: var(--neutral-900); }
.hd-page .hd-btn--secondary:hover, .hd-dialog .hd-btn--secondary:hover { background: var(--neutral-50); color: var(--neutral-900); }
.hd-btn--sm { height: 36px; padding: 0 12px; font-size: 14px; gap: 6px; }
.hd-btn--sm svg { width: 16px; height: 16px; }
.hd-page .hd-btn--outline-brand { background: #fff; border-color: var(--neutral-300); color: var(--brand-600); }
.hd-btn[disabled] { opacity: .6; cursor: default; }
.hd-iconbtn {
    width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--neutral-300); border-radius: 8px; background: #fff; color: var(--neutral-900); cursor: pointer;
}
.hd-iconbtn svg { width: 18px; height: 18px; }
.hd-iconbtn--ghost { width: 40px; height: 40px; border: 0; border-radius: 999px; background: transparent; color: var(--neutral-600); }
.hd-iconbtn--ghost:hover { background: var(--neutral-100); }
.hd-roundbtn {
    width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--neutral-200); border-radius: 999px; background: #fff; color: var(--brand-600); cursor: pointer;
}
.hd-roundbtn svg { width: 16px; height: 16px; }
.hd-roundbtn--plain { width: 36px; height: 36px; border: 0; background: transparent; }
.hd-roundbtn--plain:hover { background: var(--brand-50); }
.hd-page .hd-roundbtn[aria-disabled="true"] { color: var(--neutral-400); cursor: default; }
.hd-page .hd-more { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--brand-600); white-space: nowrap; }
.hd-more svg { width: 16px; height: 16px; }

/* ── Nhãn cấp tín nhiệm (Trust Verified™ / Audited™ / Registered™) ─────────── */
.hd-tier {
    display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px 0 6px; box-sizing: border-box;
    border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap;
}
.hd-tier svg { width: 12px; height: 12px; stroke-width: 2.25; }
.hd-tier--verified { background: var(--tier-navy); color: #fff; }
.hd-tier--verified svg { color: var(--tier-gold); }
.hd-tier--verified .hd-tier__gold { color: var(--tier-gold); }
.hd-tier--audited { background: var(--tier-gold); color: var(--tier-navy); }
.hd-tier--registered { border: 1px solid var(--tier-navy); background: #fff; color: var(--tier-navy); }
.hd-tier--md { height: 28px; padding: 0 12px 0 10px; gap: 6px; font-size: 12px; box-shadow: 0 2px 5px rgba(18, 22, 26, 0.12); }
.hd-tier--md svg { width: 14px; height: 14px; }
.hd-tier--lg { height: 22px; padding: 0 9px 0 7px; font-size: 10.5px; }

/* ── Avatar chữ cái / ảnh ─────────────────────────────────────────────── */
.hd-ava {
    flex: none; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
    border-radius: 999px; background: var(--brand-100); color: var(--brand-800); font-weight: 700; box-sizing: border-box;
}
.hd-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-ava--t1 { background: var(--brand-100); color: var(--brand-800); }
.hd-ava--t2 { background: var(--hd-success-50); color: var(--success-600); }
.hd-ava--t3 { background: var(--hd-clay-50); color: var(--hd-clay-600); }
.hd-ava--t4 { background: var(--neutral-100); color: var(--neutral-700); }
.hd-ava--36 { width: 36px; height: 36px; font-size: 13px; }
.hd-ava--42 { width: 42px; height: 42px; font-size: 14px; }
.hd-ava--44 { width: 44px; height: 44px; font-size: 15px; }
.hd-ava--org { border: 1px solid var(--neutral-200); background: #fff; color: var(--brand-900); font-weight: 800; letter-spacing: -0.02em; }
.hd-ava--me { background: var(--neutral-100); color: var(--neutral-400); }
.hd-ava--vacant { border: 1.5px dashed var(--brand-400); background: var(--brand-50); color: var(--brand-600); }
.hd-ava svg { width: 18px; height: 18px; }

/* ── Khối nhận diện Hub ────────────────────────────────────────────────── */
.hd-hero-wrap { padding-top: 20px; }
.hd-hero { background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; overflow: hidden; box-shadow: var(--hd-shadow-sm); }
.hd-hero__cover { height: 300px; background: var(--brand-900); }
.hd-hero__cover img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.hd-hero__body { padding: 0 32px 24px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; }
.hd-hero__id { flex: 999 1 560px; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.hd-hero__logo {
    position: relative; flex: none; width: 128px; height: 128px; margin-top: -64px; box-sizing: border-box; overflow: hidden;
    border-radius: 999px; border: 4px solid #fff; background: #fff; box-shadow: 0 0 0 1px var(--neutral-200), 0 6px 16px rgba(18, 22, 26, 0.12);
    display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; color: var(--brand-900);
}
.hd-hero__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-hero__text { flex: 1 1 380px; min-width: 0; padding-top: 18px; }
.hd-hero__name { margin: 0; font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -0.02em; color: var(--brand-900); text-wrap: balance; }
.hd-hero__meta { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; line-height: 20px; color: var(--neutral-600); }
.hd-hero__actions { flex: none; display: flex; align-items: center; gap: 10px; padding-top: 12px; }
.hd-status { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--hd-success-50); color: var(--success-600); font-size: 13px; font-weight: 600; }
.hd-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.hd-status--forming { background: var(--warning-100); color: var(--warning-600); }
.hd-status--member { height: 44px; padding: 0 14px; border-radius: 8px; font-size: 14.5px; font-weight: 700; }
.hd-status--member::before { display: none; }
.hd-status--member svg { width: 18px; height: 18px; }
/* Đang chờ duyệt: 2 dòng (nhãn + "gửi dd/MM/yyyy") trong ô cao 44px, cạnh nút Hủy yêu cầu — artboard CtaStates. */
.hd-status--pending { height: 44px; padding: 0 14px; border-radius: 8px; background: var(--warning-100); color: var(--warning-600); font-size: 14px; line-height: 18px; font-weight: 700; }
.hd-status--stack { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
.hd-status--pending::before { display: none; }
.hd-status__line { display: inline-flex; align-items: center; gap: 7px; }
.hd-status__sub { font-size: 12px; line-height: 16px; font-weight: 500; }
.hd-status--pending svg { width: 16px; height: 16px; }
.hd-faces { display: inline-flex; align-items: center; gap: 10px; }
.hd-faces__stack { display: flex; padding-left: 8px; }
.hd-faces__stack .hd-ava { margin-left: -8px; width: 28px; height: 28px; border: 2px solid #fff; font-size: 10px; font-weight: 800; }
.hd-page .hd-faces__link { color: var(--neutral-900); font-weight: 600; }
.hd-faces__link strong { font-weight: 700; }

/* Thanh tab */
.hd-tabs { border-top: 1px solid var(--neutral-100); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-tabs__list { display: flex; align-items: center; overflow-x: auto; min-width: 0; scrollbar-width: none; }
.hd-tabs__list::-webkit-scrollbar { display: none; }
.hd-page .hd-tab {
    flex: none; display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 16px; box-sizing: border-box;
    font-size: 15px; font-weight: 600; color: var(--neutral-600); border-bottom: 3px solid transparent; padding-top: 3px;
}
.hd-page .hd-tab:hover { color: var(--brand-900); }
.hd-page .hd-tab[aria-current="page"] { border-bottom-color: var(--brand-600); font-weight: 700; color: var(--brand-900); }
.hd-count { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--neutral-100); color: var(--neutral-700); font-size: 12px; font-weight: 700; }

/* ── Bố cục nội dung ──────────────────────────────────────────────────── */
.hd-body { padding-top: 24px; padding-bottom: 64px; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; }
.hd-body--full { display: block; padding-top: 28px; }
.hd-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hd-aside { flex: 1 1 368px; min-width: 0; position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
.hd-card { background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; padding: 20px; }
.hd-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hd-card__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--brand-900); }
.hd-card__note { font-size: 13px; color: var(--neutral-500); }
.hd-page .hd-card__link { font-size: 14px; font-weight: 600; color: var(--brand-600); }
.hd-page .hd-card__foot { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--neutral-100); display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand-600); }
.hd-card__foot svg { width: 16px; height: 16px; }
.hd-empty { margin: 0; padding: 32px 20px; text-align: center; font-size: 15px; line-height: 23px; color: var(--neutral-500); }
.hd-card .hd-empty { padding: 12px 0 0; text-align: left; font-size: 14px; line-height: 21px; }

/* Giới thiệu */
.hd-facts { margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hd-fact { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.hd-fact__icon { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--brand-50); color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; }
.hd-fact__icon svg { width: 18px; height: 18px; }
.hd-fact dt { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-500); }
.hd-fact dd { margin: 4px 0 0; font-size: 14.5px; line-height: 21px; font-weight: 600; color: var(--neutral-900); overflow-wrap: anywhere; }
.hd-about-text { margin: 12px 0 0; font-size: 14.5px; line-height: 22px; color: var(--neutral-700); overflow-wrap: anywhere; }

/* Sự kiện sắp tới */
.hd-events { list-style: none; margin: 8px 0 0; padding: 0; }
.hd-event { display: flex; gap: 14px; padding: 12px 0; }
.hd-event + .hd-event { border-top: 1px solid var(--neutral-100); }
.hd-event:last-child { padding-bottom: 2px; }
.hd-datebox { flex: none; width: 54px; box-sizing: border-box; padding: 6px 0 7px; border-radius: 10px; border: 1px solid var(--brand-100); background: var(--brand-50); text-align: center; }
.hd-datebox__m { font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: 0.04em; color: var(--brand-600); text-transform: uppercase; }
.hd-datebox__d { font-size: 22px; line-height: 26px; font-weight: 800; color: var(--brand-900); }
.hd-datebox__w { font-size: 11px; line-height: 14px; color: var(--neutral-500); }
.hd-page .hd-event__title { display: block; font-size: 14.5px; line-height: 20px; font-weight: 700; color: var(--neutral-900); }
.hd-page .hd-event__title:hover { color: var(--brand-600); }
.hd-event__meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13px; line-height: 18px; color: var(--neutral-600); }
.hd-event__meta > span { display: inline-flex; align-items: center; gap: 5px; }
.hd-event__meta svg { width: 14px; height: 14px; }
.hd-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.hd-chip svg { width: 13px; height: 13px; }
.hd-chip--online { background: var(--brand-100); color: var(--brand-800); }
.hd-chip--offline { background: var(--hd-clay-50); color: var(--hd-clay-600); }

/* Ban điều hành (cột phải) */
.hd-people { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.hd-person { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.hd-person + .hd-person { border-top: 1px solid var(--neutral-100); }
.hd-person:last-child { padding-bottom: 2px; }
.hd-person__body { min-width: 0; flex: 1 1 auto; }
.hd-person__name { font-size: 14.5px; line-height: 20px; font-weight: 700; color: var(--neutral-900); }
.hd-person__role { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--brand-700); }
.hd-person__org { font-size: 12.5px; line-height: 18px; color: var(--neutral-500); overflow-wrap: anywhere; }
.hd-person__actions { margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.hd-person__actions .hd-more { margin-left: auto; }

/* ── Bài viết ─────────────────────────────────────────────────────────── */
.hd-post { background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; overflow: hidden; }
.hd-post__head { padding: 20px 24px 0; }
.hd-post--pinned .hd-post__head { padding-top: 18px; }
.hd-post__pin { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--neutral-500); }
.hd-post__pin svg { width: 14px; height: 14px; }
.hd-author { display: flex; align-items: center; gap: 12px; }
.hd-author__body { flex: 1 1 auto; min-width: 0; }
.hd-author__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hd-page .hd-author__name { font-size: 15px; line-height: 20px; font-weight: 700; color: var(--neutral-900); }
.hd-author__role { font-size: 12px; line-height: 18px; font-weight: 600; color: var(--brand-700); }
.hd-author__meta { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; line-height: 18px; color: var(--neutral-500); }
.hd-page .hd-author__org { color: var(--neutral-600); font-weight: 500; }
.hd-post__menu { position: relative; flex: none; }
.hd-menu {
    position: absolute; right: 0; top: 44px; z-index: 20; min-width: 200px; padding: 6px; margin: 0; list-style: none;
    background: #fff; border: 1px solid var(--neutral-200); border-radius: 12px; box-shadow: 0 12px 28px rgba(18, 22, 26, 0.14);
}
.hd-menu button { width: 100%; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--neutral-800); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; }
.hd-menu button:hover { background: var(--neutral-50); }
.hd-menu button svg { width: 16px; height: 16px; color: var(--neutral-600); }
.hd-menu .hd-menu__danger { color: #b42318; }
.hd-menu .hd-menu__danger svg { color: #b42318; }
.hd-post__title { margin: 16px 0 0; font-size: 19px; line-height: 27px; font-weight: 700; letter-spacing: -0.01em; color: var(--neutral-900); overflow-wrap: anywhere; }
.hd-post__text { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--neutral-800); overflow-wrap: anywhere; white-space: pre-line; }
.hd-post__text strong, .hd-post__text b { font-weight: 600; color: var(--neutral-900); }
.hd-post__text.is-clamped { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.hd-linkbtn { padding: 4px 0; border: 0; background: transparent; color: var(--neutral-600); font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.hd-linkbtn:hover { color: var(--brand-600); }
.hd-linkbtn svg { width: 16px; height: 16px; }
.hd-tags { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 14px; font-weight: 600; }
.hd-media { margin-top: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; }
.hd-media img { width: 100%; height: 280px; object-fit: cover; display: block; cursor: zoom-in; background: var(--neutral-100); }
.hd-media--1 { grid-template-columns: minmax(0, 1fr); }
.hd-media--1 img { height: auto; aspect-ratio: 2 / 1; }
.hd-media--3 img:first-child { grid-row: span 2; height: 563px; }
.hd-media__more { position: relative; }
.hd-media__more span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(18, 22, 26, 0.5); color: #fff; font-size: 28px; font-weight: 700; pointer-events: none; }
.hd-post__bar { margin-top: 16px; padding: 6px 14px; border-top: 1px solid var(--neutral-100); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-media + .hd-post__bar { margin-top: 0; }
.hd-post__reacts { display: flex; align-items: center; gap: 2px; }
.hd-react { height: 36px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; color: var(--neutral-600); font-size: 14px; font-weight: 600; cursor: pointer; }
.hd-react:hover { background: var(--neutral-100); }
.hd-react svg { width: 18px; height: 18px; }
.hd-react.is-on { color: var(--brand-600); }
.hd-react.is-on svg { fill: currentColor; fill-opacity: .15; }
.hd-loadmore { align-self: center; }
.hd-loadmore svg { width: 18px; height: 18px; }
/* "Xem thêm doanh nghiệp" dưới lưới / bảng thành viên. */
.hd-loadmore-row { display: flex; justify-content: center; margin-top: 20px; }
.hd-loadmore[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* Bình luận */
.hd-comments { padding: 2px 24px 16px; }
.hd-comments__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.hd-comments__list:empty { display: none; }
.hd-comment { display: flex; gap: 10px; }
.hd-comment__body { min-width: 0; flex: 1 1 auto; }
.hd-comment__head { font-size: 14px; line-height: 20px; }
.hd-page .hd-comment__name { font-weight: 700; color: var(--neutral-900); }
.hd-comment__time { color: var(--neutral-500); }
.hd-comment__text { margin: 2px 0 0; font-size: 15px; line-height: 22px; color: var(--neutral-800); overflow-wrap: anywhere; white-space: pre-line; }
.hd-comment__actions { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
.hd-comment__actions button { padding: 4px 0; border: 0; background: transparent; color: var(--neutral-500); font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.hd-comment__actions button:hover { color: var(--brand-600); }
.hd-comment__actions svg { width: 15px; height: 15px; }
.hd-comment__replies { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.hd-comment__replies .hd-ava--36 { width: 30px; height: 30px; font-size: 11px; }
.hd-composer { margin-top: 14px; display: flex; align-items: center; gap: 10px; }
.hd-composer__field {
    flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 6px 0 16px; border-radius: 20px; background: var(--neutral-100);
    display: flex; align-items: center; gap: 8px; box-sizing: border-box;
}
.hd-composer__field textarea {
    flex: 1 1 auto; min-width: 0; height: 22px; max-height: 120px; margin: 9px 0; padding: 0; border: 0; resize: none; outline: none;
    background: transparent; color: var(--neutral-900); font: inherit; font-size: 14.5px; line-height: 22px;
}
.hd-composer__field:focus-within { box-shadow: 0 0 0 2px var(--brand-200); background: #fff; }
.hd-composer__send { flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--brand-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hd-composer__send svg { width: 18px; height: 18px; }
.hd-composer__guest {
    flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 14px 0 16px; border: 0; border-radius: 999px; background: var(--neutral-100);
    color: var(--neutral-500); font-size: 14.5px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: text; text-align: left;
}
.hd-composer__guest svg { width: 18px; height: 18px; }

/* Ô viết bài (thành viên) */
.hd-write { display: flex; align-items: center; gap: 12px; padding: 16px 20px; }
.hd-write__open { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--neutral-100); color: var(--neutral-500); font-size: 15px; text-align: left; cursor: text; }
.hd-write__open:hover { background: var(--neutral-200); }

/* ── Đầu mục các tab toàn khổ ─────────────────────────────────────────── */
.hd-head { margin: 0 0 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.hd-head__title { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--neutral-900); }
.hd-head__title span { font-weight: 500; color: var(--neutral-500); }
.hd-head__left { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.hd-head__tools { flex: 0 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; }
.hd-tiercount { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 13px; font-weight: 600; color: var(--neutral-700); }
.hd-tiercount > span { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.hd-seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--hd-seg-bg); }
.hd-page .hd-seg a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; color: var(--neutral-600); font-size: 13.5px; font-weight: 600; }
.hd-page .hd-seg a[aria-current="true"] { background: #fff; box-shadow: 0 1px 2px rgba(18, 22, 26, 0.12); color: var(--brand-900); }
.hd-seg svg { width: 16px; height: 16px; }
.hd-search { flex: 0 1 300px; min-width: 0; position: relative; }
.hd-search svg { position: absolute; left: 14px; top: 13px; width: 18px; height: 18px; color: var(--neutral-500); pointer-events: none; }
.hd-search input {
    width: 100%; height: 44px; box-sizing: border-box; padding: 0 14px 0 44px; border: 1px solid var(--neutral-300); border-radius: 8px;
    background: #fff; color: var(--neutral-900); font-family: inherit; font-size: 15px;
}
.hd-search input:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(47, 90, 114, 0.18); }

/* ── Tab Ban điều hành · Thẻ ─────────────────────────────────────────── */
.hd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; }
.hd-bcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 18px 14px; border: 1px solid var(--neutral-200); border-radius: 16px; background: #fff; min-width: 0; }
.hd-bcard .hd-ava { width: 88px; height: 88px; font-size: 26px; letter-spacing: -0.01em; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--neutral-200); }
.hd-bcard .hd-ava--vacant svg { width: 32px; height: 32px; }
.hd-bcard__name { margin-top: 16px; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--neutral-900); }
.hd-bcard__role { margin-top: 2px; min-height: 40px; font-size: 14px; line-height: 20px; color: var(--neutral-600); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-bcard__org { margin-top: 4px; width: 100%; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--brand-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-bcard__foot { margin-top: auto; padding-top: 10px; width: 100%; border-top: 1px solid var(--neutral-100); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hd-bcard__org + .hd-bcard__foot { margin-top: 14px; }
.hd-bcard__foot > div { display: flex; gap: 2px; }
.hd-bcard__foot .hd-more { font-size: 13.5px; }
.hd-bcard--vacant { border-style: dashed; border-color: #a9b3bc; background: transparent; }
.hd-bcard--vacant .hd-bcard__name { color: var(--neutral-500); }

/* ── Tab Ban điều hành · Sơ đồ ───────────────────────────────────────── */
.hd-tree { overflow-x: auto; padding: 4px 0 8px; }
.hd-tree__canvas { min-width: 1104px; display: flex; flex-direction: column; align-items: center; }
.hd-node {
    width: 232px; box-sizing: border-box; padding: 20px 14px 18px; display: flex; flex-direction: column; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--neutral-200); box-shadow: var(--hd-shadow-sm); border-radius: 18px; text-align: center;
}
.hd-node .hd-ava { width: 104px; height: 104px; font-size: 30px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--hd-line); }
.hd-node--top { width: 256px; }
.hd-node--top .hd-ava { width: 128px; height: 128px; font-size: 38px; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--brand-600); }
.hd-node__name { display: block; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--neutral-900); }
.hd-node--top .hd-node__name { font-size: 18px; line-height: 24px; }
.hd-node__role { display: block; margin-top: 4px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--brand-600); text-wrap: balance; }
.hd-node__org { margin-top: 4px; font-size: 12.5px; line-height: 17px; color: var(--neutral-500); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-node--vacant { background: transparent; border: 1px dashed #a9b3bc; box-shadow: none; }
.hd-node--vacant .hd-node__name { color: var(--neutral-500); font-weight: 600; }
.hd-node--vacant .hd-ava { box-shadow: none; }
/* Sơ đồ 4 tầng như artboard BoardTree: Chủ tịch → (Điều phối · Phó CT · Thư ký) → 2 Trưởng ban dưới Phó CT → cột chuyên viên
   dưới mỗi Trưởng ban. Đường nối vẽ bằng giả phần tử: mỗi tầng có vạch ngang phía trên, mỗi ô có vạch đứng đi lên. */
.hd-tree__stem { width: 2px; height: 36px; background: var(--hd-line); flex: none; }
.hd-tree__l2, .hd-tree__l3 { position: relative; display: grid; padding-top: 36px; align-items: stretch; }
.hd-tree__l2 { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hd-tree__l3 { width: 960px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hd-tree__l2::before, .hd-tree__l3::before { content: ""; position: absolute; top: 0; height: 2px; background: var(--hd-line); }
.hd-tree__l2::before { left: 16.667%; right: 16.667%; }
.hd-tree__l3::before { left: 25%; right: 25%; }
.hd-tree__cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.hd-tree__cell::before { content: ""; position: absolute; top: -36px; left: calc(50% - 1px); width: 2px; height: 36px; background: var(--hd-line); }
.hd-tree__l2 .hd-node { flex: 1 1 auto; }
.hd-tree__list { position: relative; align-self: flex-start; margin-left: calc(50% - 92px); margin-top: 4px; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.hd-tree__list::after { content: ""; position: absolute; top: -16px; left: 0; width: 93px; height: 8px; border-right: 2px solid var(--hd-line); border-bottom: 2px solid var(--hd-line); box-sizing: border-box; }
/* Vạch dọc: mỗi thẻ vẽ đoạn từ khe phía trên tới đáy thẻ (nối liền thẻ sau); thẻ cuối dừng ở vạch ngang. */
.hd-tree__list > .hd-staff::before { content: ""; position: absolute; left: -24px; top: -12px; bottom: 0; width: 2px; background: var(--hd-line); }
.hd-tree__list > .hd-staff:first-child::before { top: -10px; }
.hd-tree__list > .hd-staff:last-child::before { bottom: auto; height: 79px; }
.hd-tree__list > .hd-staff:first-child:last-child::before { height: 77px; }
.hd-tree__list > .hd-staff::after { content: ""; position: absolute; left: -24px; top: 66px; width: 24px; height: 2px; background: var(--hd-line); }
.hd-staff { position: relative; width: 328px; box-sizing: border-box; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--neutral-200); box-shadow: var(--hd-shadow-sm); border-radius: 16px; }
.hd-staff__role { display: block; font-size: 12.5px; line-height: 18px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--brand-600); }
.hd-staff__who { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 14px; align-items: center; margin-top: 12px; }
.hd-staff__who .hd-ava { grid-row: span 2; width: 72px; height: 72px; font-size: 22px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--hd-line); }
.hd-staff__name { align-self: end; font-size: 15px; line-height: 20px; font-weight: 700; color: var(--neutral-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-staff__org { align-self: start; margin-top: 2px; font-size: 12.5px; line-height: 17px; color: var(--neutral-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-staff--vacant { background: transparent; border: 1px dashed #a9b3bc; box-shadow: none; }
.hd-staff--vacant .hd-staff__role { color: var(--neutral-500); }
.hd-staff__empty { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--neutral-500); }
.hd-staff__empty .hd-ava { width: 72px; height: 72px; border: 1.5px dashed #a9b3bc; background: transparent; color: #7a838b; }
.hd-support { margin-top: 56px; }
.hd-support__title { display: flex; align-items: center; gap: 16px; }
.hd-support__title::before, .hd-support__title::after { content: ""; flex: 1 1 auto; height: 1px; background: #dfe3e7; }
.hd-support__title h3 { margin: 0; flex: none; font-size: 16px; line-height: 22px; font-weight: 700; color: var(--neutral-900); }
.hd-support__list { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }

/* ── Tab Thành viên · Thẻ ────────────────────────────────────────────── */
.hd-grid--members { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.hd-mcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--neutral-200); border-radius: 16px; background: #fff; min-width: 0; }
.hd-mcard__cover { position: relative; aspect-ratio: 4 / 3; background: var(--brand-100); border-bottom: 1px solid var(--neutral-100); display: flex; align-items: center; justify-content: center; color: var(--brand-500); }
.hd-mcard__cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hd-mcard__cover > svg { width: 56px; height: 56px; stroke-width: 1.25; }
.hd-mcard__tier { position: absolute; top: 12px; left: 12px; }
.hd-heart {
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 999px; background: #fff; color: var(--neutral-900);
    box-shadow: 0 6px 16px rgba(18, 22, 26, 0.12); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.hd-heart svg { width: 18px; height: 18px; }
.hd-heart.is-favorited { color: #c8102e; }
.hd-heart.is-favorited svg { fill: currentColor; }
.hd-mcard__cover .hd-heart { position: absolute; top: 12px; right: 12px; }
.hd-mcard__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.hd-mcard__id { display: flex; align-items: flex-start; gap: 12px; }
.hd-logo { flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--neutral-200); background: #fff; color: var(--brand-700); font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.hd-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hd-logo--40 { width: 40px; height: 40px; }
.hd-mcard__names { min-width: 0; min-height: 52px; }
.hd-mcard__brand { display: flex; align-items: flex-start; gap: 6px; }
.hd-mcard__brand h3 { margin: 0; min-width: 0; font-size: 14px; line-height: 18px; font-weight: 800; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-page .hd-mcard__brand a { color: var(--brand-900); }
.hd-mcard__brand svg { flex: none; width: 16px; height: 16px; color: var(--brand-600); }
.hd-mcard__legal { margin: 4px 0 0; font-size: 11px; line-height: 15px; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--neutral-500); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-score { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 20px; color: var(--success-600); }
.hd-score svg { width: 16px; height: 16px; }
.hd-score b { font-weight: 700; font-variant-numeric: tabular-nums; }
.hd-score--mid { color: var(--warning-600); }
.hd-score--low, .hd-score--none { color: var(--neutral-500); }
.hd-mcard__where { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 12px; line-height: 16px; color: var(--neutral-500); }
.hd-mcard__where > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hd-mcard__where > span:last-child { flex: none; white-space: nowrap; }
.hd-mcard__where svg { width: 14px; height: 14px; }
.hd-mcard__where b { font-weight: 600; color: var(--neutral-600); }
.hd-mcard__where .hd-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-page .hd-mcard__cta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; background: var(--tier-navy); color: #fff; font-size: 14px; font-weight: 700; }
.hd-page .hd-mcard__cta:hover { background: var(--brand-900); color: #fff; }
.hd-mcard__cta svg { width: 16px; height: 16px; }

/* ── Tab Thành viên · Danh sách ──────────────────────────────────────── */
/* position: relative — chữ ẩn cho trình đọc màn hình (.hd-sr, absolute) trong bảng phải bám khung cuộn này; khung static thì nó
   thoát ra ngoài, kéo trang rộng ~940px và điện thoại thu nhỏ cả trang (12/11, 390px dạng Danh sách). */
.hd-tablewrap { position: relative; border: 1px solid var(--neutral-200); border-radius: 16px; background: #fff; overflow-x: auto; }
.hd-table { width: 100%; border-collapse: collapse; color: var(--neutral-900); }
.hd-table th { padding: 12px 16px; text-align: left; font-size: 12.5px; line-height: 18px; font-weight: 600; color: var(--neutral-600); white-space: nowrap; border-bottom: 1px solid var(--neutral-200); background: var(--neutral-50); }
.hd-table td { padding: 14px 16px; vertical-align: middle; font-size: 14px; color: var(--neutral-700); }
.hd-table tr + tr td { border-top: 1px solid var(--neutral-100); }
.hd-table th:first-child, .hd-table td:first-child { padding-left: 20px; }
.hd-table th:last-child, .hd-table td:last-child { padding-right: 20px; text-align: right; white-space: nowrap; }
.hd-table .hd-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-table__co { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hd-table__co > div { min-width: 0; }
/* Tên thương hiệu dài (vd 97 ký tự trên STG) giữ 1 dòng thì bảng phình > khung → cắt "…" như dòng pháp danh, tên đủ ở title. */
.hd-table__brand { display: flex; align-items: center; gap: 6px; max-width: 300px; }
.hd-page .hd-table__brand a { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 18px; font-weight: 800; text-transform: uppercase; color: var(--brand-900); white-space: nowrap; }
.hd-table__brand svg { flex: none; width: 16px; height: 16px; color: var(--brand-600); }
.hd-table__legal { margin-top: 2px; max-width: 300px; font-size: 12.5px; line-height: 17px; color: var(--neutral-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-table__score b { font-size: 15px; font-weight: 700; color: var(--success-600); }
.hd-table__score span { font-size: 13px; color: var(--neutral-500); }
.hd-table__actions { display: inline-flex; align-items: center; gap: 8px; }
.hd-table__actions .hd-heart { width: 36px; height: 36px; border: 1px solid var(--neutral-200); box-shadow: none; color: var(--neutral-700); }
.hd-page .hd-table__actions .hd-btn { height: 36px; padding: 0 10px 0 12px; font-size: 13.5px; color: var(--tier-navy); gap: 4px; }

/* ── Tab Sự kiện · Ảnh · File (artboard EventsTab, PhotosTab, FilesTab) ─── */
.hd-stack { display: flex; flex-direction: column; gap: 36px; }
.hd-stack > section > .hd-head { margin-bottom: 14px; }
/* Thẻ sự kiện = _EventCard của /su-kien (.vn-card, vne-v3.min.css): bỏ màu liên kết chung của .hd-page để tên hoạt động giữ màu chữ thẻ. */
.hd-evgrid > li { display: flex; min-width: 0; }
.hd-evgrid > li > .vn-card { flex: 1 1 auto; min-width: 0; }
.hd-page .vn-card a, .hd-page .vn-card a:hover { color: inherit; }
.hd-page .hd-backlink { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--brand-600); }
.hd-backlink svg { width: 16px; height: 16px; }
/* Album */
.hd-page .hd-album { display: block; color: var(--neutral-900); }
.hd-album__cover { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--neutral-100); }
.hd-album__cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; }
.hd-album:hover .hd-album__cover img { transform: scale(1.03); }
.hd-album__title { margin-top: 10px; font-size: 15px; line-height: 21px; font-weight: 700; color: var(--neutral-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.hd-page .hd-album:hover .hd-album__title { color: var(--brand-600); }
.hd-album__meta { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--neutral-500); }
.hd-head__left > .hd-album__meta { margin-top: 0; }
/* Lưới ảnh (Ảnh gần đây, album) */
.hd-photos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 8px; }
.hd-photo { display: block; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--neutral-100); cursor: zoom-in; }
.hd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-photo:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 2px; }
/* Danh sách tệp */
.hd-files { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--neutral-200); border-radius: 16px; overflow: hidden; }
.hd-file { display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
.hd-file + .hd-file { border-top: 1px solid var(--neutral-100); }
.hd-ftype {
    flex: none; width: 44px; height: 44px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--neutral-100); color: var(--neutral-700); font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
}
.hd-ftype--pdf { background: #fae8e6; color: #b23b34; }
.hd-ftype--doc { background: var(--brand-100); color: var(--brand-600); }
.hd-ftype--xls { background: var(--hd-success-50); color: var(--success-600); }
.hd-ftype--ppt { background: var(--hd-clay-50); color: var(--hd-clay-600); }
.hd-file__body { flex: 1 1 auto; min-width: 0; }
.hd-file__name { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--neutral-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-file__meta { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--neutral-500); overflow-wrap: anywhere; }
.hd-file__actions { flex: none; display: flex; align-items: center; gap: 4px; }
.hd-locked { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 8px; background: var(--neutral-50); color: var(--neutral-600); font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.hd-locked svg { width: 15px; height: 15px; }
/* Hộp "Tải tệp lên" (Ban điều hành) */
.hd-dropzone {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 16px; box-sizing: border-box;
    border: 1.5px dashed var(--neutral-300); border-radius: 12px; background: var(--neutral-50); color: var(--neutral-700);
    font: inherit; text-align: center; cursor: pointer;
}
.hd-dropzone:hover, .hd-dropzone:focus-visible { border-color: var(--brand-500); background: var(--brand-50); }
.hd-dropzone svg { width: 24px; height: 24px; color: var(--brand-600); }
.hd-dropzone strong { font-size: 15px; font-weight: 700; color: var(--brand-900); }
.hd-dropzone small { font-size: 13px; color: var(--neutral-500); }
.hd-upload-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hd-upload-list:empty { display: none; }
.hd-upload-list li { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border: 1px solid var(--neutral-200); border-radius: 10px; font-size: 14px; color: var(--neutral-800); }
.hd-upload-list li > span { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-upload-list small { flex: none; color: var(--neutral-500); font-size: 12.5px; }
.hd-upload-list button { flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--neutral-600); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hd-upload-list button:hover { background: var(--neutral-100); }
.hd-upload-list svg { width: 16px; height: 16px; }
@media (max-width: 767px) {
    .hd-stack { gap: 28px; }
    .hd-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    /* Một thẻ / hàng thì ảnh vuông chiếm cả màn — 2 cột như lưới thẻ trang /su-kien trên điện thoại. */
    .hd-evgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .hd-files { border-radius: 14px; }
    .hd-file { padding: 12px 14px; gap: 12px; }
    .hd-ftype { width: 40px; height: 40px; font-size: 10px; }
    /* Nút "Tải về" chỉ còn biểu tượng, nhãn khoá rút gọn — chừa chỗ cho tên tệp. */
    .hd-file__dl { display: none; }
    .hd-page .hd-file__actions .hd-btn--sm { width: 36px; padding: 0; }
    .hd-locked { padding: 0 10px; font-size: 12.5px; }
}

.hd-pager { margin-top: 20px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.hd-page .hd-pager a, .hd-pager span { min-width: 40px; height: 40px; padding: 0 12px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--neutral-200); background: #fff; color: var(--neutral-700); font-size: 14px; font-weight: 600; }
.hd-page .hd-pager [aria-current="page"] { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }

/* ── Hộp thoại (viết bài, báo cáo, xem ảnh) ──────────────────────────── */
.hd-dialog-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(18, 22, 26, 0.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.hd-dialog { width: 100%; max-width: 600px; max-height: calc(100vh - 32px); overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 22px 48px rgba(18, 22, 26, 0.32); }
.hd-dialog__head { padding: 18px 16px 16px 24px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--neutral-100); }
.hd-dialog__head h2 { flex: 1 1 auto; margin: 0; font-size: 19px; line-height: 26px; font-weight: 700; color: var(--brand-900); }
.hd-dialog__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.hd-dialog__foot { padding: 14px 24px; border-top: 1px solid var(--neutral-100); display: flex; justify-content: flex-end; gap: 10px; }
/* Chọn bài ghim để thay (đủ 3 bài ghim) */
.hd-pinswap__hint { margin: 0; font-size: 15px; line-height: 23px; color: var(--neutral-700); }
.hd-pinswap { display: flex; flex-direction: column; gap: 8px; }
.hd-pinswap__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--neutral-200); border-radius: 12px; cursor: pointer; }
.hd-pinswap__item:hover { border-color: var(--brand-400); }
.hd-pinswap__item:has(input:checked) { border-color: var(--brand-600); background: var(--brand-50); }
.hd-pinswap__item input { flex: 0 0 auto; margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--brand-600); }
.hd-pinswap__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-pinswap__text strong { font-size: 15px; line-height: 21px; font-weight: 600; color: var(--brand-900); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hd-pinswap__text small { font-size: 13px; line-height: 18px; color: var(--neutral-500); }
.hd-field label, .hd-field__label { display: block; margin-bottom: 8px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--neutral-900); }
.hd-field input[type="text"], .hd-field textarea, .hd-field select {
    width: 100%; box-sizing: border-box; padding: 10px 14px; border: 1px solid var(--neutral-300); border-radius: 10px; background: #fff;
    color: var(--neutral-900); font-family: inherit; font-size: 15px; line-height: 23px;
}
.hd-field textarea { min-height: 180px; resize: vertical; }
.hd-field input:focus, .hd-field textarea:focus, .hd-field select:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(47, 90, 114, 0.18); }
.hd-field__hint { margin-top: 6px; font-size: 13px; color: var(--neutral-500); }
.hd-field__error { margin-top: 6px; font-size: 13px; color: #b42318; }
.hd-templates { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-templates button { height: 36px; padding: 0 14px; border: 1px solid var(--neutral-300); border-radius: 999px; background: #fff; color: var(--neutral-700); font-size: 14px; font-weight: 600; cursor: pointer; }
.hd-templates button[aria-pressed="true"] { border-color: var(--brand-600); background: var(--brand-50); color: var(--brand-700); }
.hd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-thumbs figure { position: relative; margin: 0; width: 88px; height: 88px; border-radius: 10px; overflow: hidden; background: var(--neutral-100); }
.hd-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-thumbs button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px; background: rgba(18, 22, 26, 0.7); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hd-thumbs button svg { width: 14px; height: 14px; }
/* Hộp viết bài: hàng nút Thêm ảnh / Thêm hashtag + chip gợi ý hashtag dưới ô nội dung. */
.hd-compose__tools { display: flex; flex-wrap: wrap; gap: 8px; }
.hd-tagsuggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hd-tagsuggest button { height: 32px; padding: 0 12px; border: 1px solid var(--brand-200, var(--neutral-300)); border-radius: 999px; background: var(--brand-50); color: var(--brand-700); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.hd-tagsuggest button:hover, .hd-tagsuggest button:focus-visible { border-color: var(--brand-600); }
.hd-reasons { display: flex; flex-direction: column; gap: 8px; }
.hd-reasons label { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--neutral-200); border-radius: 10px; font-size: 15px; cursor: pointer; }
.hd-reasons input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-600); }
.hd-lightbox { position: fixed; inset: 0; z-index: 1001; background: rgba(18, 22, 26, 0.9); display: flex; align-items: center; justify-content: center; padding: 56px 16px; }
.hd-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; }
.hd-lightbox button { position: absolute; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.hd-lightbox [data-hd-lb-close] { top: 12px; right: 12px; }
.hd-lightbox [data-hd-lb-prev] { left: 12px; top: calc(50% - 22px); }
.hd-lightbox [data-hd-lb-next] { right: 12px; top: calc(50% - 22px); }

/* ── Mobile (artboard Mobile 390) ───────────────────────────────────── */
@media (max-width: 1023px) {
    .hd-aside { position: static; }
}
@media (max-width: 767px) {
    .hd-shell { padding-left: 0; padding-right: 0; }
    .hd-hero-wrap { padding-top: 0; }
    .hd-hero { border: 0; border-radius: 0; box-shadow: none; }
    .hd-hero__cover { height: 196px; }
    .hd-hero__cover img { object-position: 42% 30%; }
    .hd-hero__body { display: block; padding: 0 16px 20px; }
    .hd-hero__id { display: block; }
    .hd-hero__logo { width: 88px; height: 88px; margin-top: -44px; font-size: 30px; }
    .hd-hero__text { padding-top: 12px; }
    .hd-hero__name { font-size: 24px; line-height: 30px; }
    .hd-hero__meta { font-size: 13.5px; gap: 8px 12px; }
    .hd-hero__actions { padding-top: 16px; }
    .hd-hero__actions > .hd-btn, .hd-hero__actions > .hd-status { flex: 1 1 auto; }
    .hd-tabs { padding: 0 4px; border-bottom: 1px solid var(--neutral-200); }
    .hd-tabs > .hd-iconbtn { display: none; }
    .hd-page .hd-tab { height: 48px; padding: 0 14px; font-size: 14.5px; gap: 6px; }
    .hd-body { padding: 12px 12px 88px; gap: 12px; flex-direction: column; align-items: stretch; }
    .hd-body--full { padding: 20px 12px 88px; }
    /* Xếp dọc thì flex-basis (368px / 560px) thành CHIỀU CAO tối thiểu → cột phải để trống ~140px dưới "Sự kiện sắp tới". */
    .hd-main, .hd-aside { flex: 0 0 auto; }
    .hd-aside { order: -1; gap: 12px; }
    .hd-aside .hd-board-mini { display: none; }
    .hd-main { gap: 12px; }
    .hd-card { border-radius: 14px; padding: 16px; }
    .hd-card__title { font-size: 16px; line-height: 22px; }
    .hd-fact__icon { width: 32px; height: 32px; border-radius: 9px; }
    .hd-fact dt { font-size: 11.5px; }
    .hd-fact dd { margin-top: 2px; font-size: 14px; line-height: 20px; }
    .hd-post { border-radius: 14px; }
    .hd-post__head { padding: 16px 16px 0; }
    .hd-post--pinned .hd-post__head { padding-top: 14px; }
    .hd-post__title { margin-top: 12px; font-size: 17px; line-height: 24px; }
    .hd-post__text { font-size: 14.5px; line-height: 22px; }
    .hd-media img { height: 180px; }
    .hd-media--3 img:first-child { height: 363px; }
    .hd-post__bar { padding: 4px 8px; }
    .hd-react { padding: 0 8px; }
    .hd-comments { padding: 2px 16px 14px; }
    .hd-head__tools { justify-content: flex-start; width: 100%; }
    .hd-search { flex: 1 1 200px; }
    .hd-tablewrap { border-radius: 14px; }
}
@media (max-width: 1100px) {
    /* Sơ đồ quá rộng → cây dọc thụt lề, bỏ đường nối. */
    .hd-tree__canvas { min-width: 0; align-items: stretch; }
    .hd-tree__stem, .hd-tree__l2::before, .hd-tree__l3::before, .hd-tree__cell::before, .hd-tree__list::after,
    .hd-tree__list > .hd-staff::before, .hd-tree__list > .hd-staff::after { display: none; }
    .hd-tree__l2, .hd-tree__l3 { width: auto; display: flex; flex-direction: column; gap: 12px; padding: 12px 0 0 16px; margin-left: 8px; border-left: 2px solid var(--hd-line); }
    .hd-tree__cell { align-items: stretch; }
    .hd-tree__list { margin: 0; padding-left: 16px; }
    .hd-node, .hd-node--top, .hd-staff { width: auto; flex-direction: row; text-align: left; align-items: center; padding: 14px 16px; gap: 14px; }
    .hd-staff { display: block; }
    .hd-node .hd-ava, .hd-node--top .hd-ava { width: 56px; height: 56px; font-size: 18px; }
    .hd-node--top .hd-ava { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brand-600); }
    .hd-node--top .hd-node__name { font-size: 16px; }
    .hd-support { margin-top: 32px; }
    .hd-support__list { flex-direction: column; align-items: stretch; gap: 12px; }
}

/* Tên trong sơ đồ có thể là liên kết hồ sơ tín nhiệm. */
.hd-page a.hd-node__name, .hd-page a.hd-staff__name { color: var(--neutral-900); }
.hd-page a.hd-node__name:hover, .hd-page a.hd-staff__name:hover { color: var(--brand-600); }
.hd-staff__who + .hd-staff__who { margin-top: 12px; }
.hd-post--focus { box-shadow: 0 0 0 3px var(--brand-200); }
.hd-table__nolink { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; line-height: 18px; font-weight: 800; text-transform: uppercase; color: var(--brand-900); white-space: nowrap; }
.hd-comment__actions button.is-on { color: var(--brand-600); }
.hd-comment__actions button.is-on svg { fill: currentColor; fill-opacity: .15; }
.hd-react[disabled], .hd-comment__actions button[disabled] { opacity: .6; cursor: default; }
[data-hd-member-results][aria-busy="true"] { opacity: .55; transition: opacity .15s; }

/* Thuộc tính hidden phải thắng display của các khối tự dựng (hộp thoại, xem ảnh, nút "Xem thêm"…). */
.hd-page [hidden], [data-hd-dialog][hidden], [data-hd-lightbox][hidden] { display: none !important; }
.hd-head__tools .hd-search { width: 300px; flex: 0 1 300px; }
@media (max-width: 767px) { .hd-head__tools .hd-search { width: auto; flex: 1 1 200px; } }
.hd-lightbox [hidden], .hd-dialog-overlay [hidden] { display: none !important; }