/* ══════════════════════════════════════════════════════════════════
   TRUNG TÂM TRỢ GIÚP — vne-v3 (Views/TrungTamTroGiup/*)
   ------------------------------------------------------------------
   Nạp SAU css/home-v3/index.css (bảng màu, font Inter, vá màu thẻ <a>, bóng thẻ dùng chung).
   File này CHỈ chứa thứ utility Tailwind không làm được — mọi thứ khác viết bằng class
   ngay trên markup. Các trang con (Phase 02) nạp lại đúng file này.
   Chuẩn giao diện: requirement/update-ui/trung-tam-tro-giup-style-guide.md
   ══════════════════════════════════════════════════════════════════ */

/* Khung chờ khi AJAX đang tải bài viết. Đặt riêng (không mượn .ev-skeleton của trang Sự kiện)
   để hai tính năng không phụ thuộc chéo nhau.
   KHÔNG khai border-radius ở đây: rule ngoài @layer luôn thắng utility Tailwind, khai ở đây thì
   rounded-xs / sm:rounded-none trên markup mất tác dụng. Bo góc đặt bằng utility. */
.help-skeleton {
    background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-50) 50%, var(--neutral-100) 75%);
    background-size: 200% 100%;
    animation: help-shimmer 1.4s ease-in-out infinite;
}

@keyframes help-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .help-skeleton { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════
   NỘI DUNG BÀI VIẾT (.help-prose) — DetailArticle.cshtml
   ------------------------------------------------------------------
   Nội dung là HTML soạn bằng Summernote, phần lớn DÁN TỪ WORD (p.MsoNormal + style inline font-size/margin).
   Preflight của Tailwind đã xoá margin, cỡ tiêu đề, list-style… nên phải dựng lại ở đây. Style inline của
   bài vẫn thắng các rule này — đúng ý: người soạn chỉnh tay chỗ nào thì giữ chỗ đó.
   ══════════════════════════════════════════════════════════════════ */
.help-prose {
    color: var(--text-primary);
    font-size: var(--text-base);
    line-height: 1.7;
    overflow-wrap: anywhere;
    /* Bảng/khối có width cố định dán từ Word: cuộn ngang TRONG bài, không đẩy cả trang tràn ngang. */
    overflow-x: auto;
}

.help-prose > :first-child { margin-top: 0; }
.help-prose > :last-child { margin-bottom: 0; }

/* Word dán vào kèm width cố định (vd. <hr width="1440" style="width:1080pt">) — max-width thắng width kể cả khi width nằm inline,
   nên không cần !important. Không có dòng này, bài "Bản ghi nhận thỏa thuận dịch vụ" cuộn ngang cả trên máy tính. */
.help-prose :where(hr, table, img, iframe, video, pre, blockquote, div, p, ul, ol) { max-width: 100%; }

.help-prose p { margin: 0 0 1em; }

.help-prose h1,
.help-prose h2,
.help-prose h3,
.help-prose h4,
.help-prose h5,
.help-prose h6 {
    margin: 1.75em 0 0.6em;
    color: var(--brand-900);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
    /* Bấm mục lục: tiêu đề không chui dưới header dính (61px). */
    scroll-margin-top: 88px;
}

.help-prose h1 { font-size: var(--text-2xl); }
.help-prose h2 { font-size: var(--text-xl); }
.help-prose h3 { font-size: var(--text-lg); }
.help-prose h4 { font-size: var(--text-md); }
.help-prose h5,
.help-prose h6 { font-size: var(--text-base); }

.help-prose ul,
.help-prose ol { margin: 0 0 1em; padding-left: 1.5em; }
.help-prose ul { list-style: disc; }
.help-prose ol { list-style: decimal; }
.help-prose li { margin: 0.35em 0; }
.help-prose li::marker { color: var(--brand-500); }

/* Thắng `.vne-v3 a { color: inherit; text-decoration: none }` của theme: cùng độ ưu tiên, file này nạp sau. */
.help-prose a {
    color: var(--brand-600);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.help-prose a:hover { color: var(--brand-800); }

.help-prose strong,
.help-prose b { font-weight: 700; }

.help-prose img {
    height: auto;
    border-radius: 12px;
}

.help-prose blockquote {
    margin: 1.5em 0;
    padding: 0.25em 0 0.25em 1.25em;
    border-left: 4px solid var(--brand-200);
    color: var(--text-secondary);
}

.help-prose hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--border-default);
}

.help-prose table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    /* !important là CÓ CHỦ Ý: Word thụt bảng bằng style inline (margin-left: 30.35pt) — cộng với width 100% là bảng tràn
       khung ~40px, cuộn ngang trong bài trên điện thoại. Style inline chỉ thua được !important. */
    margin: 1.25em 0 !important;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.help-prose th,
.help-prose td {
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    text-align: left;
    vertical-align: top;
}
.help-prose th { background: var(--neutral-50); font-weight: 600; }

.help-prose iframe,
.help-prose video { max-width: 100%; border-radius: 12px; }

.help-prose pre {
    overflow-x: auto;
    padding: 1em;
    border-radius: 8px;
    background: var(--neutral-50);
    font-size: var(--text-sm);
}
.help-prose code { font-family: var(--font-mono); font-size: 0.9em; }

/* Nút "Tải thỏa thuận dịch vụ VNEtrust" — controller chèn thẳng vào nội dung bài (class Bootstrap btn btn-primary,
   không còn CSS nào hiểu) cho bài thỏa thuận dịch vụ khi người xem có hợp đồng. Vẽ lại = .vn-btn--primary --md. */
.help-prose #btnDownloadServiceAgreement {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 1em 0;
    padding: 0 20px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--brand-600);
    color: #fff;
    font: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.help-prose #btnDownloadServiceAgreement:hover { background: var(--brand-700); }
.help-prose #btnDownloadServiceAgreement:focus-visible { outline: none; box-shadow: var(--ring-brand); }

/* ══════════════════════════════════════════════════════════════════
   TRÌNH XEM TỆP ĐÍNH KÈM (.tg-viewer) — DOM do js/trung-tam-tro-giup/tep-dinh-kem.js dựng lúc chạy nên phải là CSS.
   Chuyển nguyên từ css/trung-tam-tro-giup/bai-viet.css (bản Bootstrap), đổi màu nền sang navy của bảng màu.
   ══════════════════════════════════════════════════════════════════ */
.tg-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: rgba(12, 22, 30, 0.96);
}
.tg-viewer[hidden] { display: none; }

.tg-viewer__bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    color: #fff;
}

.tg-viewer__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-viewer__count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.tg-viewer__close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}
.tg-viewer__close:hover { background: rgba(255, 255, 255, 0.24); }

.tg-viewer__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 64px 16px;
}
.tg-viewer__stage img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
}
.tg-viewer__stage iframe {
    width: 100%;
    max-width: 1100px;
    height: 100%;
    border: 0;
    border-radius: 4px;
    background: #fff;
}

.tg-viewer__fallback {
    color: #fff;
    text-align: center;
}
.tg-viewer__fallback p { margin: 0 0 16px; }

.tg-viewer__nav {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transform: translateY(-50%);
}
.tg-viewer__nav:hover { background: rgba(255, 255, 255, 0.3); }
.tg-viewer__nav--prev { left: 12px; }
.tg-viewer__nav--next { right: 12px; }

@media (max-width: 767.98px) {
    .tg-viewer__stage { padding: 0 8px 12px; }
    .tg-viewer__nav { top: auto; bottom: 20px; transform: none; }
}