/* ══════════════════════════════════════════════════════════════════
   TRUNG TÂM TRỢ GIÚP — vne-v3 (Views/TrungTamTroGiup/*), giao diện Y NHƯ bản Bootstrap cũ (dựng lại 12–13/10/2026)
   ------------------------------------------------------------------
   PO thấy bản v3 đợt 08/10 (thẻ, chip, màu brand) đổi quá nhiều → trả về giao diện cũ nhưng vẫn viết bằng Tailwind.
   Số đo lấy từ CSS cũ còn trong repo: Bootstrap 5.0.2 (themes/vne) + css/common/layout.css + css/trung-tam-tro-giup/*.css.
   Nạp SAU css/home-v3/index.css (header dùng chung vẫn chạy body.home-inter).
   Khung trang viết bằng utility ngay trên markup; file này CHỈ chứa thứ utility không làm được: font + màu link chung
   của trang, chữ của nội dung HTML lấy từ DB, dấu tích (ảnh nền SVG) của ô chọn khảo sát, trình xem tệp do JS dựng.
   ══════════════════════════════════════════════════════════════════ */

/* Theme khai VNE Cereal với weight 400–800, nhưng file font thật tới 900 và bản cũ dùng hết: chữ đậm lồng trong tiêu đề
   h1 (600 → "bolder" = 900) đậm hơn một bậc. Khai thêm mặt chữ CÙNG file, phủ tới 900 — trình duyệt chỉ chọn mặt này khi
   cần weight > 800, không tải thêm gì. */
@font-face {
    font-family: "VNE Cereal VF";
    src: url("/fonts/cereal-variable/VNECerealVF_W_Wght.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

/* = <body> của layout cũ: font VNE Cereal (header dùng chung vẫn là Inter qua body.home-inter), dòng 1.43, chữ #222.
   Cỡ chữ gốc đặt bằng utility ở gốc từng trang: 14px (layout cũ), riêng trang bài viết 16px (bai-viet.css cũ).
   .tg-viewer (trình xem tệp đính kèm của trang bài viết) được JS gắn thẳng vào <body>, nằm ngoài gốc trang → khai cùng chỗ. */
.help-classic,
.tg-viewer {
    font-family: "VNE Cereal VF", Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    line-height: 1.43;
    color: #222;
}
.tg-viewer { font-size: 16px; }

/* Theme ép `.vne-v3 a { color: inherit; text-decoration: none }` (ngoài @layer nên thắng mọi utility) → trả quyền quyết định
   màu/gạch chân của link trong trang về cho utility trên markup (text-[#333], hover:text-[#0a58ca]…). */
.help-classic a {
    color: revert-layer;
    text-decoration: revert-layer;
}

/* Dấu tích của ô chọn khảo sát (.form-check-input:checked của Bootstrap) — ảnh nền SVG, utility không viết gọn được. */
.help-survey-check:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

/* ══════════════════════════════════════════════════════════════════
   CHỮ CỦA NỘI DUNG HTML LẤY TỪ DB (.help-rich) — Bootstrap reboot + layout.css của bản cũ
   ------------------------------------------------------------------
   HTML soạn bằng Summernote, phần lớn DÁN TỪ WORD (p.MsoNormal + style inline). Preflight của Tailwind xoá
   margin/cỡ tiêu đề/list-style… → khai lại đúng như bản cũ. Style inline của bài vẫn thắng — người soạn chỉnh
   tay chỗ nào thì giữ chỗ đó. Dùng cho: tóm tắt bài ở trang chủ đề, tóm tắt + nội dung ở trang bài viết
   (trang bài viết thêm .help-prose bên dưới).
   KHÔNG đặt overflow khác visible lên .help-rich: nó thành khối định dạng riêng (BFC), margin của tiêu đề đầu
   bài không còn gộp với dòng "Nội dung chính" như bản cũ → khoảng cách lệch.
   ══════════════════════════════════════════════════════════════════ */
.help-rich { overflow-wrap: break-word; }

/* Word dán vào kèm width cố định (vd. <hr width="1440" style="width:1080pt">) — giới hạn theo khung bài cho khỏi tràn
   ngang cả trang (bản cũ dính lỗi này ở bài "Bản ghi nhận thỏa thuận dịch vụ"). Phần tử vừa khung thì không đổi gì. */
.help-rich :where(hr, table, img, iframe, video, pre, blockquote, div, p, ul, ol) { max-width: 100%; }

.help-rich p { margin: 0 0 1rem; }

.help-rich h1,
.help-rich h2,
.help-rich h3,
.help-rich h4,
.help-rich h5,
.help-rich h6 {
    margin: 0 0 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    /* Bấm mục lục: tiêu đề không chui dưới header dính (61px). */
    scroll-margin-top: 88px;
}
/* h1 chốt cứng ở layout.css cũ; h2–h4 co theo bề ngang màn hình như Bootstrap, chốt cỡ từ 1200px. */
.help-rich h1 { font-size: 32px; font-weight: 600; color: #484848; }
.help-rich h2 { font-size: calc(1.325rem + 0.9vw); }
.help-rich h3 { font-size: calc(1.3rem + 0.6vw); }
.help-rich h4 { font-size: calc(1.275rem + 0.3vw); }
.help-rich h5 { font-size: 1.25rem; }
.help-rich h6 { font-size: 1rem; }
@media (min-width: 1200px) {
    .help-rich h2 { font-size: 2rem; }
    .help-rich h3 { font-size: 1.75rem; }
    .help-rich h4 { font-size: 1.5rem; }
}

.help-rich ul,
.help-rich ol { margin: 0 0 1rem; padding-left: 2rem; }
/* layout.css cũ ép MỌI <ul> sát lề trái (ol giữ 2rem của Bootstrap); trang bài viết đè lại 40px ở .help-prose. */
.help-rich ul { padding-left: 0; }
.help-rich :is(ul, ol) :is(ul, ol) { margin-bottom: 0; }
.help-rich ul { list-style-type: disc; }
.help-rich ol { list-style-type: decimal; }
.help-rich :is(ul, ol) ul { list-style-type: circle; }
.help-rich :is(ul, ol) :is(ul, ol) ul { list-style-type: square; }
/* Thuộc tính type="a"/"I"… của Word: preflight xoá mất kiểu số đầu dòng mà trình duyệt vẫn tự hiểu ở bản cũ. */
.help-rich ol[type="1"] { list-style-type: decimal; }
.help-rich ol[type="a" s] { list-style-type: lower-alpha; }
.help-rich ol[type="A" s] { list-style-type: upper-alpha; }
.help-rich ol[type="i" s] { list-style-type: lower-roman; }
.help-rich ol[type="I" s] { list-style-type: upper-roman; }
.help-rich ul[type="disc" i] { list-style-type: disc; }
.help-rich ul[type="circle" i] { list-style-type: circle; }
.help-rich ul[type="square" i] { list-style-type: square; }

/* Link trong bài như bản cũ: cùng màu chữ, không gạch chân, rê chuột thành xanh. Cùng độ ưu tiên với `.vne-v3 a`/`.help-classic a`
   — thắng nhờ đứng sau. */
.help-rich a { color: #333; text-decoration: none; }
.help-rich a:hover { color: #0a58ca; }
/* Thẻ <a> không có href (Word để lại quanh email…) không phải link — giữ màu chữ như Bootstrap. */
.help-rich a:not([href]):not([class]),
.help-rich a:not([href]):not([class]):hover { color: inherit; text-decoration: none; }

/* Theme dựng mọi <img> thành khối (display:block) — ảnh trong bài phải nằm cùng dòng chữ như bản cũ. */
.help-rich img,
.help-rich svg { display: inline; vertical-align: middle; }
.help-rich iframe,
.help-rich video,
.help-rich canvas,
.help-rich audio,
.help-rich embed,
.help-rich object { display: inline; vertical-align: baseline; }

.help-rich blockquote { margin: 0 0 1rem; }

.help-rich hr {
    margin: 1rem 0;
    border: 0;
    background-color: #bdc1ca;
    opacity: 0.25;
}
/* <hr size="…"> của Word: Bootstrap chỉ cho dày 1px khi KHÔNG có size — có size thì đường kẻ cao 0, tức là vô hình. */
.help-rich hr:not([size]) { height: 1px; }

/* Bảng dán từ Word tự mang viền/đệm ô bằng style inline; ở đây chỉ trả lại mặc định của trình duyệt + Bootstrap mà
   preflight đã xoá (viền ô nét liền dày 0, màu xám kế thừa từ bảng, đệm ô 1px). */
.help-rich table { caption-side: bottom; border-collapse: collapse; border-color: gray; }
.help-rich thead,
.help-rich tbody,
.help-rich tfoot,
.help-rich tr,
.help-rich td,
.help-rich th { border: 0 solid; border-color: inherit; }
.help-rich td,
.help-rich th { padding: 1px; }
.help-rich th { font-weight: bold; text-align: inherit; text-align: -webkit-match-parent; }

.help-rich small { font-size: 0.875em; }
.help-rich figure { margin: 0 0 1rem; }
/* Class Bootstrap duy nhất còn gặp trong nội dung bài (chữ đỏ cảnh báo). */
.help-rich .text-danger { color: #dc3545 !important; }

.help-rich pre,
.help-rich code,
.help-rich kbd,
.help-rich samp { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.help-rich pre { margin: 0 0 1rem; overflow: auto; font-size: 0.875em; }
.help-rich code { font-size: 0.875em; color: #d63384; overflow-wrap: break-word; }
.help-rich pre code,
.help-rich a > code { font-size: inherit; color: inherit; }

/* Nút "Tải thỏa thuận dịch vụ VNEtrust" — controller chèn thẳng vào nội dung bài thỏa thuận dịch vụ (class Bootstrap
   btn btn-primary, không còn CSS nào hiểu) khi người xem có hợp đồng. Vẽ lại đúng nút .btn-primary của bản cũ. */
.help-rich #btnDownloadServiceAgreement {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    border: 1px solid #1c395f;
    border-radius: 0.25rem;
    background-color: #1c395f;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.help-rich #btnDownloadServiceAgreement:hover,
.help-rich #btnDownloadServiceAgreement:focus { background-color: #0b5ed7; border-color: #0a58ca; }
.help-rich #btnDownloadServiceAgreement:focus { outline: 0; box-shadow: 0 0 0 0.25rem rgba(49, 132, 253, 0.5); }

/* ── Riêng trang bài viết (.help-prose, đi kèm .help-rich) = css/trung-tam-tro-giup/bai-viet.css cũ ──────────
   Đứng SAU .help-rich để đè. Danh sách lồng nhau cũng ăn margin 16px như bản cũ (bai-viet.css thắng luật
   "ul ul margin 0" của Bootstrap) → selector lồng nhau khai kèm cho đủ độ ưu tiên. */
.help-prose h1,
.help-prose h2 { margin: 32px 0 16px; }
.help-prose h2 { font-size: 22px; }
.help-prose h3 { margin: 32px 0 8px; }
.help-prose h4 { margin: 32px 0 4px; }
/* !important của bản cũ: cỡ chữ danh sách luôn 16px dù Word gắn font-size inline lên <ul>/<ol>. */
.help-prose ul,
.help-prose ol,
.help-prose :is(ul, ol) :is(ul, ol) { margin: 16px 0; padding-left: 40px; font-size: 16px !important; }
.help-prose li { margin-bottom: 16px; }
.help-prose blockquote {
    margin: 32px 0;
    padding-left: 32px;
    border-left: 5px solid #ebebeb;
    line-height: 1.667;
}

/* ══════════════════════════════════════════════════════════════════
   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), giữ cả màu nền tối gốc.
   ══════════════════════════════════════════════════════════════════ */
.tg-viewer {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    background: rgba(17, 17, 17, 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; }
}