/* ══════════════════════════════════════════════════════════════════
   TRUSTPROFILE™ — TRANG HỒ SƠ TÍN NHIỆM CÔNG KHAI (mọi người xem)
   Bố cục: Business Passport → dải tóm tắt → thanh tab → 6 dải nhóm nội dung → liên hệ.
   Phần dành riêng cho chủ hồ sơ (bút chì + modal sửa nhanh) nằm ở
   trustprofile-edit.css, chỉ nạp khi người xem có quyền sửa.

   Nạp SAU vne-v3.min.css (section "pageCss" của _LayoutLandingPage) và
   KHÔNG nằm trong @layer nào, nên luôn thắng utility Tailwind cùng mức
   important — vì vậy hầu như không cần !important ở đây.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Nền trang & chỗ trống cho thanh chân trang cố định ─── */
/* Cả trang dùng MỘT font Inter (kể cả các chỗ đang gọi var(--font-display)):
   VNE Cereal VF dựng chữ hoa/thường không đều nên tên doanh nghiệp, nhãn in hoa
   và phần chữ thường đọc lệch nhau. Ghi đè ở body nên mọi utility Tailwind
   (.font-display/.font-body) và mọi file css con của trang đều ăn theo. */
body.tp-body {
    --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: var(--font-display);

    /* ══ BẢNG MÀU TRANG HỒ SƠ ══
       Khai báo ở body.tp-body chứ không sửa tokens/colors.css: bảng token kia
       dùng chung cho mọi trang landing (trang chủ v3, các trang giới thiệu),
       đổi ở đó là đổi cả app. Mọi biến dưới đây chỉ sống trong trang này.

       Ba vai màu, không trộn vào nhau:
         --tp-action  xanh lam — thứ BẤM ĐƯỢC (link, tab, nút, số liệu)
         --tp-rank    son thẫm — HUY HIỆU (cấp tín nhiệm, thứ để hãnh diện)
         --tp-honor   vàng kim — chỉ làm NÉT (vành, viền, con dấu)

       Màu thương hiệu #2f5368 giữ nguyên, chuyển vai thành mực và kết cấu:
       tiêu đề nhóm, icon nhóm, panel tối. Nó ở tầng sáng 30% nên không bao giờ
       "bật" được — đừng bắt nó vừa nhận diện vừa làm điểm nhấn. */

    /* Xanh lam — 5,3:1 trên trắng, đạt AA cho chữ thường */
    --tp-action:       #0a6fb8;
    --tp-action-hover: #095c99;
    --tp-action-tint:  #e8f2fa;
    --tp-action-line:  #b9d9f0;

    /* Son thẫm — 8,5:1 trên trắng. Chỉ dành cho huy hiệu cấp tín nhiệm.
       KHÔNG dùng cho trạng thái lỗi (đã có --error-600) và không dùng cho
       "đã đối chiếu" (đã có --success-600 màu xanh lá). */
    --tp-rank:         #8e2635;
    --tp-rank-tint:    #fbf0f1;
    --tp-rank-line:    #e8c9cd;

    /* Vàng kim — trên nền trắng chỉ đạt 2,3:1 nên KHÔNG BAO GIỜ làm chữ.
       Chữ vàng phải dùng --tp-honor-ink (5,1:1). */
    --tp-honor:        #c9a227;
    --tp-honor-ink:    #8a6a17;

    /* Navy + vàng kim — RIÊNG cho huy hiệu cấp tín nhiệm trên card Business
       Passport (design 2026-08-23, thay son thẫm --tp-rank cũ). Chỉ dùng ở
       .tp-passport-level-pill — --tp-rank vẫn giữ nguyên cho dải tóm tắt (.tp-sum-level). */
    --tp-passport-badge-bg:  #003959;
    --tp-passport-badge-ink: #ffad3b;

    /* Nền 2 nút "Xem phạm vi kiểm tra" / "Tìm hiểu {cấp}" — xanh mint đậm hơn --success-100 (đo từ
       design 2026-08-23), CHỈ dùng cho 2 nút này, không đụng --success-100 dùng chung nơi khác. */
    --tp-passport-link-bg:   #c1f9d7;

    /* ══ HÌNH KHỐI CARD — LẤY ĐÚNG TỪ BẢNG ĐIỀU KHIỂN ══
       Trang /ket-noi-cua-toi dùng _Dashboardv2Layout + theme getfit. Bốn giá trị
       dưới đây chép nguyên từ đó chứ không đoán, để hai trang đứng cạnh nhau
       là cùng một hệ:
         nền trang   css/dashboard/site.css → --neutral-color-150  #f8f9fa
         viền card   getfit → --bs-card-border-color               #dde2ee
         bo góc      getfit → --bs-card-border-radius  0.5rem       8px
         bóng card   getfit → .card{box-shadow}                     0 2px 6px rgba(40,90,185,.1)

       Bóng của bảng điều khiển có SẮC XANH và tán rất gọn (6px). Bản cũ ở đây
       dùng --shadow-card sắc nâu ấm tán 20px nên card trông nhòe chứ không nổi.
       Nền cũ #f8f7f5 là xám ẤM, đứng cạnh brand LẠNH (hue 202°) thì ra bạc màu. */
    --surface-subtle:  #f8f9fa;
    --surface-muted:   #eef1f5;
    --border-subtle:   #dde2ee;

    /* Mọi card về 8px. --radius-md cũng hạ theo vì các khối con (.tp-cap-block,
       .tp-cap-col, .tp-fin…) nằm TRONG card — để 12px thì khối con bo tròn hơn
       cái card bọc nó, nhìn ra lệch hệ. --radius-sm/xs (nút, chip) giữ nguyên. */
    --radius-xl:       8px;
    --radius-lg:       8px;
    --radius-md:       8px;

    --shadow-card:     0 2px 6px rgba(40, 90, 185, .1);
    /* Hover của card sản phẩm — cùng sắc xanh, chỉ đậm và tán xa hơn một nhịp. */
    --shadow-md:       0 4px 12px rgba(40, 90, 185, .16);

    /* Các mục con dùng utility Tailwind (shadow-lg, shadow-sm…). Utility đó trỏ
       var(--shadow-*) nên chỉ cần ghi đè token là mọi chỗ ăn theo — không phải
       sửa từng class trong markup, cũng không phải rebuild vne-v3.min.css.
       Giữ nguyên hình học (offset/blur) của vne-v3, chỉ đổi sắc nâu ấm sang lạnh. */
    --shadow-xs:       0 1px 2px rgba(40, 90, 185, .1);
    --shadow-sm:       0 2px 5px rgba(40, 90, 185, .12);
    --shadow-lg:       0 12px 28px rgba(40, 90, 185, .16);
    --shadow-xl:       0 22px 48px rgba(18, 41, 58, .22);

    /* #7d776d cũ chỉ đạt ~4,1:1 mà lại là token dùng nhiều nhất trong file */
    --text-tertiary:   #5f7280;

    /* Chữ và đường kẻ phải lạnh theo nền. Bảng xám ấm của theme
       (--neutral-600 #5c574f nâu xám, --neutral-200 #e3e0da) đứng trên nền
       trắng-lạnh sẽ ra đục — đúng cái cảm giác "bụi" ở bản cũ. */
    --text-primary:    #101d26;
    --text-secondary:  #47555f;

    /* Đường kẻ đi cùng họ với viền card của bảng điều khiển (#dde2ee, hue 224).
       Trước đó dùng #dbe4ea hue 200 — lệch tông, đứng cạnh viền card thành hai
       màu xám gần giống nhau mà không bằng nhau. Khối con dùng CHUNG một màu
       viền với card, đúng như bảng điều khiển chỉ có một màu viền duy nhất. */
    --border-default:  #dde2ee;
    --border-strong:   #c2cbe0;

    /* #167a5b cũ ở tầng sáng 28% — quá tối cho một dấu tích */
    --success-600:     #0c7f58;
    --success-100:     #e6f5ee;

    background: var(--surface-subtle);
}
#tp-top { padding-bottom: 56px; }

/* Widget Google Translate (nút "Dịch" ở phần Giới thiệu): ẩn thanh công cụ
   mặc định của Google và không cho nó đẩy trang xuống. */
.skiptranslate { display: none !important; }
body.tp-body { top: 0 !important; }

/* Nhiều popup của trang (tp-edit-modal.js, tp-pop.js, tp-gallery.js, ...) khoá cuộn nền bằng
   body.style.overflow='hidden' lúc mở — thanh cuộn dọc biến mất khiến nội dung giãn rộng thêm
   đúng bề rộng thanh cuộn (ở máy dùng thanh cuộn có bề rộng cố định, không phải kiểu overlay
   mảnh), trang bị "giật" sang ngang lúc mở/đóng popup (báo 2026-08-23). Giữ sẵn chỗ cho thanh
   cuộn dù đang ẩn hay hiện để bề rộng nội dung không đổi nữa — không cần sửa từng file JS. */
html:has(body.tp-body) { scrollbar-gutter: stable; }

/* ══════════════════════════════════════════════════════════════════
   BUSINESS PASSPORT — KHỐI NHẬN DIỆN ĐẦU TRANG
   Trả lời trong một màn hình: đây là ai, đang ở cấp tín nhiệm nào, đã
   được đối chiếu tới đâu, liên hệ bằng cách nào.
   Trái = nhận diện doanh nghiệp trên ảnh bìa. Phải = thẻ trạng thái tín
   nhiệm nền trắng (đọc như một chứng thư) kèm TrustMark + QR kiểm chứng.

   Viết tay thay vì dùng utility Tailwind: vne-v3.min.css là bản build sẵn
   (repo không có package.json) nên class chưa từng dùng ở đâu sẽ không có
   trong file build và không ăn.
   ══════════════════════════════════════════════════════════════════ */
/* Không overflow:hidden — ảnh bìa/blur/scrim đều inset:0 nên tự nằm gọn trong khối,
   không cần cắt; cắt sẽ khiến .tp-passport-share-menu (mở xuống, xem bên dưới) bị
   chặn ngay tại mép dưới card, giống bug "dropdown bị che bởi layout dưới". */
.tp-passport { position: relative; isolation: isolate; }
.tp-passport-cover { position: absolute; inset: 0; z-index: -20; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Ảnh bìa mờ dần từ trái sang phải: chỗ đặt chữ thì mờ cho dễ đọc, phía
   phải để rõ nét khoe ảnh. 3 lớp blur giảm dần nên không thấy đường cắt. */
.tp-passport-blur { position: absolute; inset: 0; z-index: -10; -webkit-mask-image: var(--m); mask-image: var(--m); backdrop-filter: blur(var(--b)); -webkit-backdrop-filter: blur(var(--b)); }
.tp-passport-blur--1 { --b: 12px; --m: linear-gradient(to bottom, #000 0%, #000 14%, transparent 46%); }
.tp-passport-blur--2 { --b: 7px;  --m: linear-gradient(to bottom, #000 0%, #000 28%, transparent 64%); }
.tp-passport-blur--3 { --b: 3px;  --m: linear-gradient(to bottom, #000 0%, #000 42%, transparent 82%); }
/* Trước đây phủ tới .95 nên ảnh bìa gần như biến mất — đây là mảng tối lớn
   nhất trang. Hạ xuống .84 và để mép trên gần như trong suốt. Chữ trắng vẫn
   đọc được nhờ 3 lớp blur ở trên + text-shadow ở .tp-passport-left, nên không phụ
   thuộc vào việc doanh nghiệp tải lên ảnh sáng hay tối. */
.tp-passport-scrim { position: absolute; inset: 0; z-index: -10; background: linear-gradient(to top, rgba(18,41,58,.84), rgba(18,41,58,.52) 46%, rgba(18,41,58,.12)); }

@media (min-width: 768px) {
    .tp-passport-blur--1 { --m: linear-gradient(to right, #000 0%, #000 20%, transparent 46%); }
    .tp-passport-blur--2 { --m: linear-gradient(to right, #000 0%, #000 34%, transparent 64%); }
    .tp-passport-blur--3 { --m: linear-gradient(to right, #000 0%, #000 48%, transparent 80%); }
    /* Chéo 105° thay vì ngang: góc trên phải sáng hẳn nên ảnh bìa lộ ra rõ,
       trong khi cột chữ bên trái vẫn có nền tối. */
    .tp-passport-scrim { background: linear-gradient(105deg, rgba(18,41,58,.74) 0%, rgba(18,41,58,.44) 54%, rgba(18,41,58,.06) 100%); }
}

.tp-passport-inner { position: relative; max-width: 1200px; margin: 0 auto; padding: 28px 16px 32px; }
.tp-passport-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
/* Sàn tương phản cho toàn bộ chữ trắng trên ảnh bìa. Scrim đã nhẹ đi nhiều
   nên cần lớp bảo hiểm này: ảnh bìa là do doanh nghiệp tự tải lên, không đoán
   trước được sáng tối. */
.tp-passport-left { color: #fff; min-width: 0; text-shadow: 0 1px 14px rgba(9, 20, 29, .55); }

@media (min-width: 640px) { .tp-passport-inner { padding: 36px 24px 40px; } }
@media (min-width: 1024px) { .tp-passport-grid { grid-template-columns: minmax(0, 1fr) 356px; gap: 40px; } }

/* Nền kính mờ cho mọi thứ đặt trên ảnh bìa — đọc được dù doanh nghiệp tải
   lên ảnh sáng hay tối. */
.tp-passport-glass {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background .15s ease;
}
.tp-passport-glass:hover { background: rgba(255, 255, 255, .26); }

/* ─── Pill nhận diện trang ─── */
.tp-passport-badge {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 20px 10px 16px; border-radius: 999px;
    font-family: var(--font-display, inherit); font-weight: 800; font-size: 17px;
    letter-spacing: -.01em; color: #fff;
}
.tp-passport-badge svg { width: 20px; height: 20px; flex: none; }

/* ─── Logo + tên doanh nghiệp ─── */
.tp-passport-id { display: flex; align-items: flex-start; gap: 20px; margin-top: 24px; }
/* Wrapper ngoài — KHÔNG overflow:hidden, chỉ để làm mốc position:relative cho dấu tích
   ghim ra ngoài khung (.tp-passport-logo-check) mà không bị .tp-passport-logo cắt mất. */
.tp-passport-logo-frame { position: relative; flex: none; }
.tp-passport-logo {
    position: relative;
    width: 96px; height: 96px; padding: 4px;
    background: #fff; border-radius: var(--radius-md);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .28);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* Cùng logic ô logo trustprofile V3 (Landing/TrustProfile/_BusinessPassport.cshtml):
   width:100% (không phải max-width/max-height) để ảnh LUÔN phủ đầy chiều ngang khung —
   ảnh không vuông thì phần dư tràn dọc bị overflow:hidden của .tp-passport-logo cắt bớt,
   thay vì co lại canh giữa và để lộ khoảng trắng 2 bên như trước. */
.tp-passport-logo img { position: relative; z-index: 1; width: 100%; height: auto; display: block; object-fit: contain; background: #fff; }
.tp-passport-logo-initials {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display, inherit); font-weight: 800; font-size: 26px; color: var(--brand-600);
}
/* Dấu tích doanh nghiệp đã đối chiếu — ghim góc trên-phải ô logo, offset = nửa đường
   kính (13px) nên tâm dấu tích rơi đúng lên góc khung: dính sát cạnh khung, quá nửa
   thân nhô ra ngoài, không bay xa rời khung. */
.tp-passport-logo-check {
    position: absolute; top: 0; right: -2px; z-index: 10;
    width: 18px; height: 18px; border-radius: 999px;
    background: var(--success-600); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.tp-passport-logo-check svg { width: 14px; height: 14px; }
/* display:inline-flex ở trên thắng [hidden]{display:none} của trình duyệt — phải khai lại, nếu
   không dấu tích vẫn hiện khi CN02 chưa được chấm. */
.tp-passport-logo-check[hidden] { display: none; }
/* Màu chạy theo MỨC xác minh của CN02, GIỮ ĐÚNG 2 mã màu attr-verify.js dùng cho dấu tròn
   (STATUS_BLUE / STATUS_GREEN) để logo và dấu ở card nhãn hiệu không lệch tông:
   c = Đã đối chiếu (xanh dương) · v/o = Đã xác minh (xanh lá). Sửa màu thì sửa CẢ 2 nơi. */
.tp-passport-logo-check[data-tp-attr-state="c"] { background: #2f80ed; }
.tp-passport-logo-check[data-tp-attr-state="v"],
.tp-passport-logo-check[data-tp-attr-state="o"] { background: #22c55e; }

.tp-passport-name { font-family: var(--font-display, inherit); font-weight: 800; font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin: 0; overflow-wrap: anywhere; }
.tp-passport-legal { margin: 6px 0 0; font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
/* Mỗi thông tin nhận diện một dòng; dòng dài quá bề ngang thì xuống dòng chứ
   không cắt chữ. */
.tp-passport-meta {
    display: flex; flex-direction: column; gap: 3px;
    margin: 12px 0 0; max-width: 620px;
    font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .88);
}
.tp-passport-meta-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; margin: 0; }
.tp-passport-meta b { font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.tp-passport-meta-label { color: rgba(255, 255, 255, .72); }
.tp-passport-meta-dot { color: rgba(255, 255, 255, .5); }

@media (min-width: 640px) {
    .tp-passport-name { font-size: 40px; }
    .tp-passport-logo { width: 112px; height: 112px; padding: 4px; }
}

/* ─── Cấp tín nhiệm ─── */
.tp-passport-level { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
/* Huy hiệu cấp tín nhiệm — navy + vàng kim, dựng theo lối huy hiệu thật
   (design 2026-08-23). Đây là thứ doanh nghiệp muốn khoe, nên nó phải là vật
   thể duy nhất trên card có màu riêng. Chữ vàng trên navy đạt tương phản cao. */
.tp-passport-level-pill {
    display: inline-flex; align-items: center;
    background: var(--tp-passport-badge-bg); color: var(--tp-passport-badge-ink);
    border-radius: 999px; padding: 8px 18px;
    box-shadow: 0 6px 16px rgba(0, 20, 35, .34);
    font-size: 13px; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase;
    text-shadow: none;
}
.tp-passport-published { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.tp-passport-note {
    display: flex; align-items: center; gap: 6px; margin: 12px 0 0;
    padding: 0; border: none; background: none; cursor: pointer; text-align: left;
    font-size: 13.5px; font-weight: 600; color: rgba(255, 255, 255, .82);
}
.tp-passport-note:hover { text-decoration: underline; }
.tp-passport-note svg { width: 14px; height: 14px; flex: none; color: rgba(255, 255, 255, .6); }

/* ─── Hàng chỉ số ───
   4 ô ngang ngăn nhau bằng vạch dọc mảnh, không bọc khung — nhẹ mắt hơn
   thẻ nền mờ và để ảnh bìa lộ ra. Xuống 2 cột ở màn hẹp. */
.tp-passport-facts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 26px; padding: 22px 0; max-width: 620px;
    border-top: 1px solid rgba(255, 255, 255, .22);
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.tp-passport-fact { position: relative; padding: 6px 14px; text-align: center; }
.tp-passport-fact + .tp-passport-fact { border-left: 1px solid rgba(255, 255, 255, .18); }
/* Icon trong khoanh tròn nền trắng (design) thay vì icon trắng mảnh trôi trực
   tiếp trên ảnh bìa — dễ nhận diện hơn trên ảnh bìa sáng lẫn tối. */
.tp-passport-fact-icon-badge {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin: 0 auto;
    border-radius: 999px; background: #fff;
}
.tp-passport-fact-icon { width: 20px; height: 20px; color: var(--brand-700); }
/* Dấu mức xác minh (attr-verify.js) ghim CỐ ĐỊNH ở góc icon-badge — đè margin/position mặc định
   của .tpav-chip (nội dòng cạnh chữ) để cả 4 ô luôn thẳng hàng như nhau, không lệch theo độ dài
   giá trị (VD "2000" ngắn vs "11+ quốc gia" dài) — 2026-08-28, theo yêu cầu user, đặt giống mockup. */
.tp-passport-fact-icon-badge .tpav-chip {
    position: absolute; top: -3px; right: -3px; margin: 0;
    width: 16px; height: 16px; background: #fff; border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.tp-passport-fact-icon-badge .tpav-chip svg { width: 14px; height: 14px; }
.tp-passport-fact-value { font-family: var(--font-display, inherit); font-weight: 800; font-size: 19px; line-height: 1.25; margin-top: 8px; color: #fff; overflow-wrap: anywhere; }
.tp-passport-fact-caption { font-size: 11px; line-height: 1.35; margin-top: 4px; color: rgba(255, 255, 255, .62); }

@media (min-width: 640px) {
    .tp-passport-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Ở 2 cột, ô thứ 3 mở đầu hàng dưới nên bỏ vạch dọc bên trái. */
@media (max-width: 639px) {
    .tp-passport-fact:nth-child(3) { border-left: 0; }
    .tp-passport-fact:nth-child(n+3) { margin-top: 18px; }
}

/* Huy hiệu tích xanh ở góc mỗi ô đã BỎ (2026-08-24): nó chỉ nói "có dữ liệu" nhưng người xem đọc
   thành "đã xác minh", trong khi ô lại mang sẵn dấu mức xác minh thật của Bộ chuẩn ([data-tp-attr])
   → một ô hai chỉ báo, mâu thuẫn nhau. Nay mỗi ô chỉ còn một dấu duy nhất, nói đúng mức đã chấm.
   Bút chì sửa nhanh về lại góc trên phải vì không còn huy hiệu nào chiếm chỗ. */
.tp-passport-fact > .tp-qf-edit { top: -4px; right: 4px; width: 24px; height: 24px; }

.tp-passport-tagline { max-width: 620px; margin: 26px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .9); overflow-wrap: anywhere; }
/* Bút chì mặc định (.tp-qf-edit) neo top:10px — hợp với các ô cao (logo, fact box)
   nhưng dòng giới thiệu chỉ cao đúng 1 dòng chữ nên bút chì bị lệch xuống dưới
   chữ. Canh giữa theo chiều dọc với dòng chữ thay vì neo theo top cố định. */
.tp-passport-tagline > .tp-qf-edit { top: 50%; transform: translateY(-50%); }
.tp-passport-tagline > .tp-qf-edit:hover { transform: translateY(-50%) scale(1.08); }

/* ─── Nút hành động ─── */
.tp-passport-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.tp-passport-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; color: #fff; cursor: pointer;
    /* Nut nam trong .tp-passport-left nen thua huong text-shadow cua khoi do —
       tren nen dac thi khong can, tat di cho chu sac net. */
    text-shadow: none;
}
.tp-passport-btn svg { width: 17px; height: 17px; }
.tp-passport-btn--primary { background: var(--tp-action); border: 1px solid var(--tp-action); transition: background .15s ease; }
.tp-passport-btn--primary:hover { background: var(--tp-action-hover); }

/* Nút "Gửi yêu cầu hợp tác" — 2 bản chữ, chỉ đổi ở màn hẹp (xem media query bên dưới); desktop
   luôn hiện bản đầy đủ. Mặc định ẩn bản rút gọn. */
.tp-passport-btn-text-short { display: none; }

/* Màn hẹp: khi có 2 nút (nâng cấp/hợp tác + chia sẻ), ép cùng 1 hàng và chia đều
   bề ngang — trước đây flex-wrap:wrap cho phép cả nút bị đẩy xuống hàng 2 khi text
   dài (VD "Gửi yêu cầu hợp tác") không đủ chỗ, thay vì tự co lại. Chỉ 1 nút (chủ hồ
   sơ đã ở cấp cao nhất, hoặc KSV trưởng sửa hộ) thì giữ nguyên kích thước tự nhiên.
   Đổi sang câu rút gọn "Yêu cầu hợp tác" (bỏ "Gửi") CHỈ ở màn hẹp này — theo yêu cầu
   user 2026-09-03, desktop vẫn giữ nguyên "Gửi yêu cầu hợp tác". */
@media (max-width: 639px) {
    .tp-passport-actions { flex-wrap: nowrap; gap: 10px; }
    .tp-passport-actions > *:not(:only-child) { flex: 1 1 0; min-width: 0; }
    .tp-passport-actions > .tp-passport-share:not(:only-child) .tp-passport-btn { width: 100%; }
    .tp-passport-actions .tp-passport-btn { padding-left: 14px; padding-right: 14px; white-space: normal; line-height: 1.25; }
    .tp-passport-btn-text-full { display: none; }
    .tp-passport-btn-text-short { display: inline; }
    /* Thử bỏ icon ổ khoá (khách chưa đăng nhập) chỉ ở màn hẹp — bản rút gọn tiếng Anh
       "Cooperation request" (20 ký tự, dài hơn bản tiếng Việt "Yêu cầu hợp tác") vẫn tràn
       xuống 2 dòng dù đã rút gọn chữ; bớt icon (13px + gap 8px = 21px) để nhường chỗ cho chữ
       (theo yêu cầu user 2026-09-03: "bỏ thử icon ổ khoá xem có hết broken layout không").
       Desktop vẫn giữ icon — không phải màn hẹp, không có ràng buộc bề ngang này. */
    .tp-passport-btn-lock { display: none; }
}

/* Nút "Đổi ảnh nền" — position:absolute, neo vào <section class="tp-passport">
   (full-bleed, không bị .tp-passport-inner giới hạn max-width:1200px) nên bám
   ĐÚNG GÓC PHẢI THẬT của ảnh bìa, không dừng ở mép nội dung. 2026-08-23 từng
   đặt bên trong .tp-passport-inner — mép đó trùng luôn mép phải của thẻ trạng
   thái (cột phải 356px của .tp-passport-grid) nên nút đè lên góc bo tròn của
   thẻ. Neo ra ngoài .tp-passport-inner thì trên các màn rộng hơn 1200px +
   padding, nút nổi trên phần ảnh bìa ngoài rìa nội dung — tách hẳn khỏi thẻ. */
.tp-passport-cover-edit {
    position: absolute; z-index: 20; top: 28px; right: 16px;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: #fff; cursor: pointer;
    background: rgba(15, 23, 42, .62);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    transition: background .15s ease;
}
.tp-passport-cover-edit:hover { background: rgba(15, 23, 42, .8); }
.tp-passport-cover-edit svg { width: 14px; height: 14px; }
@media (min-width: 640px) { .tp-passport-cover-edit { top: 36px; right: 24px; } }

/* ══ CỘT PHẢI — THẺ TRẠNG THÁI TÍN NHIỆM + LỐI BÁO CÁO HỒ SƠ ══ */
/* Lối báo cáo bám mép phải của thẻ, ngay dưới thẻ. */
.tp-passport-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; min-width: 0; }

.tp-passport-status {
    width: 100%; padding: 22px;
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 22px 48px rgba(18, 41, 58, .3);
}
.tp-passport-status-title { font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text-tertiary); text-align: center; }

/* Hộp cấp tín nhiệm — nền xanh lá nhạt khi hồ sơ đã công bố, xám khi chưa. */
.tp-passport-status-box { margin-top: 14px; padding: 16px 14px; border-radius: var(--radius-md); text-align: center; background: var(--surface-muted); }
/* Đã công bố → nền xanh lá nhạt (design 2026-08-23: cấp tín nhiệm đã công bố
   đọc như một trạng thái ĐẠT, dùng cùng vai màu --success với dấu tích/thanh
   phạm vi bên dưới cho nhất quán). Trạng thái công bố do dòng
   .tp-passport-status-state phía dưới nói. */
.tp-passport-status-box--live { background: var(--success-100); }
.tp-passport-status-level { font-family: var(--font-display, inherit); font-weight: 800; font-size: 22px; line-height: 1.1; text-transform: uppercase; color: var(--text-secondary); }
.tp-passport-status-box--live .tp-passport-status-level { color: var(--success-600); }
.tp-passport-status-state { margin-top: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-primary); }
/* Đã công bố → cùng màu xanh với cấp tín nhiệm (Registered) phía trên, thay vì màu chữ thường. */
.tp-passport-status-box--live .tp-passport-status-state { color: var(--success-600); }
.tp-passport-status-desc { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }

.tp-passport-divider { height: 1px; margin: 18px 0; background: var(--border-subtle); }

/* Card-trong-card: gói phạm vi kiểm tra + mốc đối chiếu + TrustID/TrustMark +
   2 lối tìm hiểu thêm, tách khỏi hộp trạng thái phía trên bằng viền + nền
   riêng (design 2026-08-23). */
.tp-passport-scope-panel {
    margin-top: 14px; padding: 16px 14px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

/* ─── Phạm vi kiểm tra ─── */
.tp-passport-scope-title { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-primary); }
.tp-passport-scope-title svg { width: 13px; height: 13px; color: var(--text-tertiary); }
/* Hồ sơ đã công bố → cùng màu xanh với "Registered"/"Đã công bố" phía trên (2 khối là anh em
   cùng cấp trong .tp-passport-status nên dùng tổ hợp anh em ~ thay vì sửa markup thêm class). */
.tp-passport-status-box--live ~ .tp-passport-scope-panel .tp-passport-scope-title { color: var(--success-600); }
.tp-passport-scope-value { margin: 8px 0 0; font-size: 12.5px; color: var(--text-secondary); }
.tp-passport-scope-bar { position: relative; height: 5px; margin-top: 8px; border-radius: 999px; background: var(--surface-muted); }
.tp-passport-scope-fill { position: absolute; inset-block: 0; left: 0; border-radius: 999px; background: var(--success-600); }
/* Núm tròn ở mốc hiện tại — cho thấy đây là hành trình còn đi tiếp, không phải một con số chết. */
.tp-passport-scope-knob {
    position: absolute; top: 50%; width: 11px; height: 11px;
    /* Giữ núm nằm trọn trong thanh khi ở mốc 0% hoặc 100%. */
    left: clamp(5.5px, var(--at), calc(100% - 5.5px)); transform: translate(-50%, -50%);
    border-radius: 999px; background: #fff; border: 2px solid var(--success-600);
}

/* ─── Mốc thời gian đối chiếu ─── */
.tp-passport-dates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tp-passport-dates > div + div { padding-left: 12px; border-left: 1px solid var(--border-subtle); }
.tp-passport-date-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--success-600); }
.tp-passport-date-value { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--text-primary); }

/* ─── TrustID + con dấu TrustMark ─── */
.tp-passport-mark { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tp-passport-mark-label { font-size: 11.5px; font-weight: 700; color: var(--success-600); }
.tp-passport-mark-id { margin-top: 3px; font-size: 13px; font-weight: 800; color: var(--brand-800); white-space: nowrap; }
/* Con dấu TrustMark™ — dựng đúng bản in: viền chuyển màu xanh lá → vàng đồng,
   ruột nền trắng để quét QR được trên mọi ảnh bìa. Viền gradient làm bằng 2 lớp
   background (padding-box đè border-box) vì border không nhận gradient. */
.tp-passport-mark-box {
    flex: none; display: flex; align-items: center; gap: 9px;
    padding: 7px 9px; border-radius: 11px;
    border: 2.5px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(155deg, #2fae63 0%, #1f9a56 38%, #8a6b1c 72%, #b28a1e 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
}
.tp-passport-mark-seal { text-align: center; color: var(--brand-800); }
.tp-passport-mark-emblem { display: block; width: 66px; height: auto; margin: 0 auto; }
.tp-passport-mark-word { margin-top: 2px; font-family: var(--font-display, inherit); font-size: 11.5px; font-weight: 800; letter-spacing: .1em; line-height: 1; color: var(--brand-800); }
.tp-passport-mark-tid { margin-top: 3px; font-size: 7.5px; line-height: 1.2; color: var(--brand-700); white-space: nowrap; }
.tp-passport-mark-tid b { font-weight: 700; }
/* Khung QR mảnh + dòng "Scan to Verify" nằm TRONG khung, giống con dấu in. Padding
   nới 3px→6/7px (2026-08-31, user báo QR 54px quá nhỏ để quét): đây là "quiet zone"
   quanh mã QR, mỏng quá khiến máy quét khó định vị biên mã dù không đổi cỡ mã. */
.tp-passport-mark-qrbox { flex: none; padding: 7px 7px 5px; border: 1px solid var(--neutral-800); border-radius: 2px; text-align: center; }
/* Bấm để phóng to (data-tp-pop-open="tp-qr-pop", xem _BusinessPassport.cshtml) — reset
   style mặc định của <button> để giữ nguyên hình thức "con dấu in" như div cũ. */
button.tp-passport-mark-qrbox { position: relative; display: block; background: none; font: inherit; margin: 0; cursor: pointer; }
button.tp-passport-mark-qrbox:hover { border-color: var(--brand-600); }
/* Tooltip "Bấm để phóng to" — CSS thuần (không dùng title mặc định của trình duyệt vì
   hiện chậm ~1s), chỉ hiện khi hover/focus bằng chuột/bàn phím (không hiện trên chạm). */
button.tp-passport-mark-qrbox::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--neutral-900, #201d19); color: #fff;
    font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap;
    padding: 5px 9px; border-radius: 5px;
    opacity: 0; visibility: hidden; transition: opacity .15s ease;
    pointer-events: none; z-index: 5;
}
button.tp-passport-mark-qrbox:hover::after, button.tp-passport-mark-qrbox:focus-visible::after {
    opacity: 1; visibility: visible;
}
.tp-passport-mark-scan { display: block; margin-top: 2px; font-size: 6px; font-style: italic; line-height: 1; color: var(--neutral-600); }
.tp-passport-qr { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.tp-passport-qr canvas, .tp-passport-qr > img:not(.tp-passport-qr-logo) { width: 100% !important; height: 100% !important; }
/* Logo VNE giữa mã QR (design) — correctLevel QR đã nâng lên H (quét được dù ~30% ô mã bị che) để
   phủ logo lên mà máy quét vẫn đọc được, xem trustprofile-page.js tpInitPassportQr(). Không viền
   trắng quanh logo (2026-08-31, theo yêu cầu user) — logo nằm sát các ô mã liền kề. */
.tp-passport-qr-logo {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) !important;
    width: 30% !important; height: 30% !important; border-radius: 50%;
    pointer-events: none;
}
/* Bản phóng to trong popup (tp-qr-pop) — cùng cơ chế vẽ (tpInitPassportQr) với kích
   thước cố định lớn hơn nhiều để camera điện thoại lấy nét/quét được dễ dàng. */
.tp-passport-qr--lg { width: 220px; height: 220px; }
.tp-qr-pop-body { text-align: center; }
.tp-qr-pop-box { display: inline-flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto; padding: 16px; border: 1px solid var(--neutral-800); border-radius: 6px; }
.tp-qr-pop-tid { font-size: 13.5px; font-weight: 600; color: var(--brand-800); }
.tp-qr-pop-tid b { font-weight: 800; }

/* ─── Liên kết tìm hiểu thêm — pill xanh lá, cùng vai màu với hộp trạng thái
   đã công bố phía trên (design 2026-08-23, thay xanh lam --tp-action cũ). LUÔN
   trên 1 hàng theo design — không wrap xuống dòng; scroll ngang chỉ là lưới an
   toàn cho màn cực hẹp. Cỡ chữ/padding/icon hạ nhẹ lần 2 (2026-08-29) — lần hạ
   đầu (2026-08-23, xuống 11.5px/6px-10px rồi 10.5px/5px-9px) đủ cho cặp nhãn
   ngắn "Xem phạm vi kiểm tra"/"Tìm hiểu Verified™" nhưng cặp dài nhất
   "Xem phạm vi xác minh"/"Tìm hiểu Trust Solution™" (cấp Audited™) vẫn vượt
   282px bề rộng thật (356px card - 44px padding status - 28px padding
   scope-panel), thanh scroll vẫn hiện. Đo lại bằng trình duyệt thật ở đúng
   cặp nhãn dài nhất này rồi mới chốt số — không suy từ lý thuyết. */
.tp-passport-links { display: flex; flex-wrap: nowrap; gap: 4px; margin-top: 14px; overflow-x: auto; }
/* .vne-v3 prefix bắt buộc: nút "Tìm hiểu {cấp}" là thẻ <a>, mà base.css có
   ".vne-v3 a { color: inherit }" đặc hiệu hơn 1 class đơn — không prefix thì
   riêng thẻ <a> mất màu xanh, còn nút "Xem phạm vi..." (button) vẫn đúng màu. */
.vne-v3 .tp-passport-link {
    display: inline-flex; align-items: center; gap: 2px; flex: none; white-space: nowrap;
    padding: 4px 6px; border-radius: 999px;
    background: var(--tp-passport-link-bg); color: var(--success-600);
    font-size: 9px; font-weight: 700; border: none; cursor: pointer;
    transition: filter .15s ease;
}
.vne-v3 .tp-passport-link:hover { filter: brightness(.96); }
.vne-v3 .tp-passport-link svg { width: 11px; height: 11px; flex: none; }

.tp-passport-print {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin-top: 16px; padding: 11px 16px;
    border: none; border-radius: var(--radius-sm); cursor: pointer;
    /* Màu thương hiệu (--brand-600, #2f5368), không phải xanh lam --tp-action — theo design. */
    background: var(--brand-600); color: #fff;
    font-size: 13px; font-weight: 700;
    transition: background .15s ease;
}
.tp-passport-print:hover { background: var(--brand-700); }
.tp-passport-print svg { width: 15px; height: 15px; }

/* Lối đi tiếp khi hồ sơ chưa công bố — cùng khuôn nút in nhưng nhạt hơn để
   không tranh chỗ với hành động chính. */
.tp-passport-print--ghost { background: var(--tp-action-tint); color: var(--tp-action); }
.tp-passport-print--ghost:hover { background: var(--tp-action-line); }

/* ─── Chưa công bố: hộp vàng + dòng nói rõ đang vướng bước nào ─── */
.tp-passport-status-box--pending { background: var(--warning-100); }
.tp-passport-status-box--pending .tp-passport-status-level { color: var(--brand-800); }
.tp-passport-status-hint {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    padding: 0; border: none; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--warning-600);
}
.tp-passport-status-hint svg { width: 14px; height: 14px; }
.tp-passport-status-hint:hover { text-decoration: underline; }

/* ─── Hạn hiệu lực sắp hết / đã hết ─── */
.tp-passport-date-value.is-expiring { color: var(--warning-600); }
.tp-passport-date-value.is-expired { color: var(--error-600); }
.tp-passport-date-note { display: block; font-size: 11.5px; font-weight: 700; }

.tp-passport-private {
    display: flex; align-items: flex-start; gap: 6px; margin: 12px 0 0;
    font-size: 12px; line-height: 1.5; color: var(--text-secondary);
}
.tp-passport-private svg { flex: none; width: 14px; height: 14px; margin-top: 2px; }

/* Tiêu đề phạm vi bấm được (mở popup danh sách hạng mục) — vẫn là một dòng
   nhãn, chỉ thêm con trỏ và gạch chân khi rê vào. */
button.tp-passport-scope-title { padding: 0; border: none; background: none; cursor: pointer; }
button.tp-passport-scope-title:hover { text-decoration: underline; }

/* ─── Nút chia sẻ có menu ─── */
.tp-passport-share { position: relative; }
.tp-passport-btn-chev { width: 14px; height: 14px; }
.tp-passport-btn-lock { width: 13px; height: 13px; opacity: .8; }
/* z-index 70 (từng nâng từ 25 vì bị header/tab/chân trang đè) không đủ: .tp-passport có
   isolation:isolate (giữ ảnh bìa z-index âm không lộ ra ngoài) nên toàn bộ card bị tính
   như MỘT khối z-index:auto khi so với phần tử NGOÀI card — menu bên trong dù z-index cao
   cỡ nào cũng vẫn thua footer/thanh cố định bên ngoài (báo 2026-08-23, xem tp-passport.js
   initShareMenu: JS dời hẳn menu ra <body> lúc mở để thoát khỏi ranh giới cô lập đó). */
.tp-passport-share-menu {
    position: absolute; z-index: 70; top: calc(100% + 6px); left: 0; min-width: 190px;
    padding: 6px; border-radius: var(--radius-md);
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    box-shadow: 0 14px 34px rgba(40, 90, 185, .2);
}
.tp-passport-share-menu[hidden] { display: none; }
.tp-passport-share-menu button {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 9px 10px; border: none; border-radius: var(--radius-sm);
    background: none; text-align: left; cursor: pointer;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.tp-passport-share-menu button:hover { background: var(--surface-subtle); }
.tp-passport-share-menu svg { width: 16px; height: 16px; color: var(--text-tertiary); }

/* Kênh chỉ dùng được sau khi đăng nhập (gửi email do VNE® gửi hộ) — vẫn hiện
   để người xem biết có kênh đó, kèm chữ nhắc đăng nhập. */
.tp-passport-share-locked {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 10px; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 600; color: var(--text-tertiary);
}
.tp-passport-share-locked:hover { background: var(--surface-subtle); }
.tp-passport-share-locked span { margin-left: auto; font-size: 11px; font-weight: 700; }

/* ─── Xem trước email chia sẻ hồ sơ ─── */
.tp-share-mail-input { min-height: 44px; }
.tp-mail-preview {
    margin-top: 10px; padding: 14px;
    background: var(--surface-subtle); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}
.tp-mail-preview-subject { font-size: 13px; font-weight: 800; color: var(--brand-800); }
.tp-mail-preview-text { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }
.tp-mail-preview-facts { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); }
.tp-mail-preview-cta {
    display: inline-block; margin-top: 12px; padding: 8px 16px; border-radius: 4px;
    background: var(--tp-action); color: #fff; font-size: 12.5px; font-weight: 700;
}
.tp-mail-preview-note { margin: 12px 0 0; font-size: 11.5px; font-style: italic; color: var(--text-tertiary); }

/* Báo cáo hồ sơ — hành động phụ NGOÀI thẻ trạng thái, nền trên ảnh bìa nên cần
   đục (không glass như badge đầu card) để luôn đọc được dù ảnh sáng/tối; canh
   giữa bề ngang cột phải theo design (không bám mép phải như .tp-passport-right
   mặc định — align-items:flex-end chỉ áp lên thẻ trạng thái). */
.tp-passport-report {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: center;
    padding: 7px 14px; border-radius: 999px; cursor: pointer;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
    transition: background .15s ease, color .15s ease;
}
.tp-passport-report:hover { background: var(--surface-subtle); color: var(--text-primary); }
.tp-passport-report svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════════════════════════════
   HỘP THOẠI CHO MỌI NGƯỜI XEM (phạm vi kiểm tra, hướng dẫn, báo cáo hồ sơ)
   Khác #tp-edit-modal ở trustprofile-edit.css: file đó chỉ nạp cho người có
   quyền sửa, còn mấy hộp này khách xem hồ sơ cũng phải mở được.
   ══════════════════════════════════════════════════════════════════ */
.tp-pop { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 16px; }
.tp-pop[hidden] { display: none; }
.tp-pop-backdrop { position: absolute; inset: 0; background: rgba(26, 24, 21, .55); }
.tp-pop-card {
    position: relative; display: flex; flex-direction: column;
    width: 100%; max-width: 620px; max-height: min(86vh, 760px);
    background: var(--surface-card); border-radius: var(--radius-lg);
    box-shadow: 0 26px 60px rgba(18, 41, 58, .34);
}
.tp-pop-card--sm { max-width: 480px; }
.tp-pop-head { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--border-subtle); }
.tp-pop-title { font-family: var(--font-display, inherit); font-weight: 800; font-size: 16.5px; color: var(--text-primary); }
.tp-pop-sub { margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-tertiary); }
.tp-pop-x {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin-left: auto; border: none; border-radius: 999px;
    background: var(--surface-subtle); color: var(--text-secondary); cursor: pointer;
}
.tp-pop-x:hover { background: var(--surface-muted); }
.tp-pop-x svg { width: 17px; height: 17px; }
.tp-pop-body { padding: 16px 20px; overflow-y: auto; }
.tp-pop-body[hidden] { display: none; }
.tp-pop-label { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--text-tertiary); }
.tp-pop-text { margin: 10px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.tp-pop-text--tight { margin-top: 6px; font-size: 13px; }
.tp-pop-text--hint { display: flex; align-items: flex-start; gap: 7px; font-weight: 600; color: var(--tp-action); }
.tp-pop-text--hint svg { flex: none; width: 15px; height: 15px; margin-top: 3px; }
.tp-pop-error {
    margin: 0 20px; padding: 9px 12px; border-radius: 8px;
    background: var(--error-100); border: 1px solid var(--error-600); color: var(--error-600);
    font-size: 12.5px; font-weight: 600;
}
.tp-pop-error[hidden] { display: none; }
.tp-pop-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--border-subtle); }

/* Nút dùng chung của các hộp thoại (chuyển từ trustprofile-edit.css sang đây). */
.tp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 40px; padding: 0 18px; border: none; border-radius: 8px;
    font-size: 13.5px; font-weight: 700; cursor: pointer;
    transition: background .12s ease, opacity .12s ease, transform .08s ease;
}
.tp-btn[hidden] { display: none; }
.tp-btn:disabled { opacity: .55; cursor: not-allowed; }
.tp-btn:active:not(:disabled) { transform: scale(.96); }
.tp-btn-ghost { background: transparent; color: var(--text-secondary); border: 1.5px solid var(--border-subtle); }
.tp-btn-ghost:hover { background: var(--surface-subtle); }
.tp-btn-primary { background: var(--tp-action); color: #fff; }
.tp-btn-primary:hover { filter: brightness(1.07); }

/* ─── Danh sách hạng mục trong phạm vi kiểm tra/xác minh ─── */
.tp-scope-group + .tp-scope-group { margin-top: 18px; }
.tp-scope-group-name { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-700); }
.tp-scope-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    margin-top: 4px; padding: 9px 8px; border: none; border-radius: var(--radius-sm);
    background: none; text-align: left; cursor: pointer;
}
.tp-scope-item:hover { background: var(--surface-subtle); }
/* Hạng mục chưa có card trên hồ sơ: vẫn liệt kê nhưng không bấm được. */
.tp-scope-item.is-static { cursor: default; }
.tp-scope-item.is-static:hover { background: none; }
.tp-scope-item-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); }
.tp-scope-item-state { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; }
.tp-scope-item-state svg { width: 14px; height: 14px; }
/* 3 tầng hiển thị: đã đối chiếu/xác minh (xanh) → doanh nghiệp tự công bố (nâu
   nhạt, chưa được VNE® kiểm tra) → chưa có dữ liệu (xám). Hạng mục chưa xong vẫn
   bấm được để xem nó nằm đâu trên hồ sơ, nhưng không được trông như đã xong. */
.tp-scope-item.is-done .tp-scope-item-state { color: var(--success-600); }
.tp-scope-item.is-self .tp-scope-item-state { color: var(--warning-600); }
.tp-scope-item.is-none .tp-scope-item-state { color: var(--text-tertiary); }
.tp-scope-item.is-none .tp-scope-item-name { color: var(--text-secondary); }

/* ─── Báo cáo hồ sơ ─── */
.tp-report-reasons { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; }
.tp-report-reason {
    display: flex; align-items: center; gap: 10px; padding: 10px;
    border-radius: var(--radius-sm); cursor: pointer;
    font-size: 13.5px; color: var(--text-primary);
}
.tp-report-reason:hover { background: var(--surface-subtle); }
.tp-report-reason input { flex: none; width: 16px; height: 16px; accent-color: var(--tp-action); }
.tp-report-desc {
    width: 100%; margin-top: 10px; padding: 11px 12px; resize: vertical;
    border: 1.5px solid var(--border-subtle); border-radius: var(--radius-sm);
    background: var(--surface-card); font: inherit; font-size: 13.5px; color: var(--text-primary);
}
.tp-report-desc:focus { outline: none; border-color: var(--tp-action); }
.tp-report-count { margin-top: 6px; text-align: right; font-size: 11.5px; color: var(--text-tertiary); }

@media (max-width: 640px) {
    .tp-pop { padding: 0; align-items: flex-end; }
    .tp-pop-card { max-width: none; max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .tp-pop-foot .tp-btn { flex: 1 1 0; }
}

/* ══ THANH TAB ══
   Tab đang xem được tô nền brand. Đặt màu chữ ở đây (không dùng utility
   !text-*) để utility Tailwind không đè mất màu trắng của tab active. */
.tp .tp-tab { color: var(--text-secondary); }
.tp .tp-tab:hover { color: var(--text-primary); }
.tp .tp-tab.is-active,
.tp .tp-tab.is-active:hover {
    background: var(--tp-action);
    color: #fff;
    font-weight: 700;
}

/* ══ KHỐI "THÔNG TIN PHÁP LÝ" TRONG CARD TỔNG QUAN ══
   Danh sách nhãn : giá trị đặt cạnh video, giá trị in đậm để quét mắt nhanh;
   hạng mục đã đối chiếu có thêm "· Đã đối chiếu" màu xanh ngay sau giá trị. */
.tp-intro-legal-head {
    font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: var(--brand-700);
}
.tp-intro-legal-head--intro { margin-top: 18px; margin-bottom: 4px; }
.tp-intro-legal-list {
    display: grid; grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 12px; margin-top: 8px;
    font-size: 13px; line-height: 1.5;
}
.tp-intro-legal-label { color: var(--text-tertiary); }
.tp-intro-legal-value { font-weight: 700; color: var(--text-primary); overflow-wrap: anywhere; }
.tp-intro-legal-value.is-empty { font-weight: 400; color: var(--text-disabled); }
/* Cùng style với "Xem thêm" ở ô Năng lực cung cấp (.tp-cap-more): xám nhạt, weight 600, không
   gạch chân, chỉ đổi sang màu brand khi hover — đồng bộ mọi lối "Xem thêm/chi tiết" trong card. */
.tp-intro-legal-link {
    display: flex; align-items: center; justify-content: flex-end; gap: 3px; margin-top: 10px;
    font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); text-decoration: none;
}
.tp-intro-legal-link:hover { color: var(--tp-action); }
.tp-intro-legal-link svg { width: 14px; height: 14px; }

/* Màn hẹp: nhãn dài (VD "Người đại diện theo pháp luật") ăn hết cột → xếp dọc. */
@media (max-width: 640px) {
    .tp-intro-legal-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .tp-intro-legal-label { margin-top: 8px; }
}

/* ══ NHÓM NỘI DUNG ══
   Mỗi nhóm là MỘT card: tiêu đề nhóm ở đầu, các mục nằm gọn bên trong và
   ngăn nhau bằng một đường kẻ mảnh chạy hết bề ngang. Trước đây mỗi mục còn
   là một card trắng riêng đặt trong dải nền xanh của nhóm — card lồng card,
   hai lớp viền chồng nhau nhìn rối.
   Padding đặt ở đầu nhóm và ở từng mục (không đặt ở .tp-group) để đường kẻ
   ngăn giữa các mục chạy trọn bề ngang card. */
.tp-group {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
.tp-group-head { padding: 20px 24px 0; }
.tp-group-body { display: flex; flex-direction: column; }

/* Mục con bỏ hết nền/viền/bóng/bán kính của card cũ, chỉ giữ lại nội dung.
   Nhắm đúng phần tử gốc của từng mục (section, card brochure, khung chờ) —
   không nhắm mọi con của [data-lazy-section] vì trong đó còn có lightbox và
   khung xem ảnh dạng fixed, xoá nền của chúng là mất luôn lớp nền tối. */
.tp-group-body > [data-lazy-section] > :is(section, [data-tp-brochure], [data-tp-skeleton]) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 20px 24px;
}

/* Kẻ ngăn chỉ đặt giữa hai mục liền nhau — mục đầu đã có tiêu đề nhóm ở trên. */
.tp-group-body > [data-lazy-section] + [data-lazy-section] > :is(section, [data-tp-brochure], [data-tp-skeleton]) {
    border-top: 1px solid var(--border-subtle);
}

@media (max-width: 640px) {
    .tp-group { border-radius: var(--radius-lg); }
    .tp-group-head { padding: 16px 16px 0; }
    .tp-group-body > [data-lazy-section] > :is(section, [data-tp-brochure], [data-tp-skeleton]) { padding: 16px; }
}

/* Nhóm chỉ có một mục và mục đó đã mang sẵn tiêu đề trùng tên nhóm
   (Hoạt động thực tế / Cơ hội hợp tác / Liên hệ) → ẩn tiêu đề bên trong,
   giữ lại nút "Xem tất cả" ở cùng hàng. */
.tp-group-solo section > div:has(> h2),
.tp-group-solo section > div > div:has(> h2) { display: none; }
.tp-group-solo section > div:has(> div > h2) { justify-content: flex-end; }

/* "HOẠT ĐỘNG THỰC TẾ": tiêu đề nhóm nằm ở .tp-group-head (nạp ngay), còn "Xem tất cả" +
   bút chì sửa thuộc mục con (_Gallery.cshtml) nạp AJAX sau nên luôn rớt xuống dưới dòng mô
   tả thay vì chung hàng với tiêu đề. Đưa 2 nút lên ngang hàng tiêu đề bằng absolute, neo vào
   #g-hoat-dong thay vì section con (bỏ position:relative của .tp-qf-cell ở khối này) vì 2 bên
   không cùng cấp DOM. Tiêu đề "Hoạt động thực tế" cố định, ngắn nên không lo bị che.
   Chỉ áp dụng riêng #g-hoat-dong — không đụng "Cơ hội hợp tác"/"Liên hệ" (2 nhóm solo còn lại). */
#g-hoat-dong { position: relative; }
#g-hoat-dong #hinh-anh.tp-qf-cell { position: static; }
#g-hoat-dong section > div:has(> div > h2) { position: absolute; top: 20px; right: 62px; margin: 0; z-index: 3; }
@media (max-width: 640px) {
    #g-hoat-dong section > div:has(> div > h2) { top: 16px; right: 54px; }
}

/* Tiêu đề mục con là cấp phụ của tiêu đề nhóm nên phải nhỏ hơn. */
.tp-group-body > [data-lazy-section] > section > div > h2,
.tp-group-body > [data-lazy-section] > section > div > div > h2 {
    font-size: 16.5px;
}

/* ══ DẢI TÓM TẮT TÍN NHIỆM (ngay dưới Business Passport) ══
   Redesign 2026-08-31: 2 hàng chip/icon căn TRÁI (không còn text-thuần-ngăn-bởi-"·" căn giữa) —
   hàng 1 = nhận diện (tên + cấp + trạng thái + "Xem như khách" đẩy phải), hàng 2 = phạm vi + hiệu
   lực + lối đi tiếp. Mọi màu/dáng chip đều lấy lại từ card Business Passport ngay phía trên
   (--tp-rank cho cấp, pill mint --tp-passport-link-bg cho lối đi tiếp) để 2 card đứng cạnh nhau
   đọc như MỘT hệ, không phải 2 kiểu khác nhau. */
.tp-sum {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px 18px;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
.tp-sum-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px 10px;
    font-size: 13px; line-height: 1.4; color: var(--text-secondary);
}
.tp-sum-row i { width: 13px; height: 13px; flex: none; }

/* ─── Hàng 1 · nhận diện ─── */
/* min-width:0 bắt buộc để con dùng text-overflow:ellipsis được trong flex row (mặc định flex-item
   không co dưới nội dung của nó). max-width co giãn theo màn hình — tên vẫn đọc được trên mobile
   mà không đẩy vỡ các chip cấp/trạng thái đứng cạnh. */
.tp-sum-name {
    min-width: 0; max-width: clamp(120px, 46vw, 380px);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 800; font-size: 15px; color: var(--text-primary);
}
.tp-sum-level {
    flex: none; padding: 3px 10px; border-radius: 999px;
    background: var(--tp-rank-tint); border: 1px solid var(--tp-rank-line); color: var(--tp-rank);
    font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.tp-sum-state {
    flex: none; display: inline-flex; align-items: center; gap: 4px;
    font-size: 12.5px; font-weight: 700; color: var(--text-tertiary); white-space: nowrap;
}
.tp-sum-state--live { color: var(--success-600); }
.tp-sum-guestlink {
    flex: none; margin-left: auto;
    font-size: 12px; font-weight: 600; color: var(--tp-action); text-decoration: underline; white-space: nowrap;
}
.tp-sum-guestlink:hover { color: var(--tp-action-hover); }

/* ─── Hàng 2 · phạm vi + hiệu lực + lối đi tiếp ─── */
.tp-sum-row--meta { font-size: 12.5px; color: var(--text-secondary); border-top: 1px solid var(--border-subtle); padding-top: 10px; }
.tp-sum-scope, .tp-sum-valid { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.tp-sum-scope i { color: var(--success-600); }
.tp-sum-valid i { color: var(--text-tertiary); }
.tp-sum-row--meta b { color: var(--text-primary); }
.tp-sum-expired { color: var(--error-600); font-weight: 600; }
.tp-sum-expired i { color: var(--error-600); }

/* Lối đi tiếp: pill mint — cùng dáng ".tp-passport-link" (nút "Tìm hiểu {cấp}") ở card phía trên,
   đẩy về mép phải hàng 2 để luôn là điểm nhìn cuối cùng. */
.tp-sum-cta {
    flex: none; margin-left: auto;
    display: inline-flex; align-items: center; gap: 3px;
    padding: 6px 12px; border: none; border-radius: 999px; cursor: pointer;
    background: var(--tp-passport-link-bg); color: var(--success-600);
    font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap;
    transition: filter .15s ease;
}
.tp-sum-cta:hover { filter: brightness(.96); }
.tp-sum-cta i { width: 12px; height: 12px; }

@media (max-width: 480px) {
    /* Màn rất hẹp: tên xuống hết cỡ trước khi ellipsis, nhường chỗ cho 2 chip cấp/trạng thái luôn đọc trọn vẹn. */
    .tp-sum-name { max-width: 60vw; }
}

/* ─── Nét đứt nối các bước "Hành trình tín nhiệm" ─── */
.tp-dash { height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 12px); }

/* ══ KHUNG CHỜ TẢI ══ Mỗi mục tải riêng nên hiện khung nhấp nháy trước,
   giữ đúng chiều cao để trang không giật khi nội dung thật thay thế. */
.tp-skeleton {
    background: linear-gradient(90deg, #f0f2f5 25%, #e8eaef 50%, #f0f2f5 75%);
    background-size: 200% 100%;
    animation: tp-shimmer 1.4s infinite;
    border-radius: 6px;
    display: inline-block;
}
@keyframes tp-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hộp đỏ khi một mục tải lỗi hoặc không có dữ liệu — để nội bộ soát được
   mục nào chưa có nguồn, thay vì im lặng ẩn đi. */
.tp-chip-red {
    display: inline-flex; align-items: center; gap: 4px;
    background: #dc2626; color: #fff;
    font-size: 10px; font-weight: 700; letter-spacing: .06em;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.tp-empty {
    border: 1.5px dashed #dc2626; border-radius: 8px;
    padding: 18px; margin-top: 18px;
    color: #dc2626; font-size: 13px; font-weight: 600; text-align: center;
}

/* ══ GIỚI THIỆU DOANH NGHIỆP ══
   Lưới ảnh/video – nội dung: 1 cột ở mobile, 4/8 từ 1024px.
   Viết CSS tay vì vne-v3.min.css là bản build sẵn, class Tailwind tuỳ biến
   chưa compile sẽ không có tác dụng. */
.tp-intro-grid { display: grid; grid-template-columns: 1fr; }
/* min-width:0 để cột chữ chứa từ dài không dấu cách không bóp méo cột ảnh. */
.tp-intro-grid > * { min-width: 0; }
@media (min-width: 1024px) {
    .tp-intro-grid { grid-template-columns: 4fr 8fr; }
}

/* Mô tả dài cắt còn 3 dòng, bấm "Xem thêm" để mở hết. */
.tp-intro-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.tp-intro-clamp.is-expanded { display: block; overflow: visible; }
/* Cùng style với "Xem thêm" ở ô Năng lực cung cấp (.tp-cap-more) — xem ghi chú tại đó. */
.tp-intro-toggle {
    display: none; align-items: center; justify-content: flex-end; gap: 4px;
    font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); text-decoration: none;
}
.tp-intro-toggle.is-visible { display: flex; }
.tp-intro-toggle:hover { color: var(--tp-action); }

/* Phạm vi tín nhiệm: chip xuống quá 2 hàng thì cắt (verify.js đo và set
   max-height), dùng chung nút "Xem thêm" với mô tả ở trên. */
.tpv3-scope-clamp { overflow: hidden; }
.tpv3-scope-clamp.is-expanded { max-height: none !important; overflow: visible; }

/* Ô "Lĩnh vực": tên ngành dài mới co chữ lại (JS đo tràn rồi gắn
   .is-compact), tên ngắn giữ cùng cỡ với các ô khác cho đồng bộ. */
.tp-quickfact-industry {
    font-size: 19px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tp-quickfact-industry.is-compact {
    font-size: 19px;
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

/* ══ THỊ TRƯỜNG XUẤT KHẨU ══
   Ô chỉ hiện vài nước tiêu biểu + badge "+N", bấm mở panel liệt kê đủ.
   Đây là chức năng XEM nên mọi khách đều dùng được, không cần quyền sửa. */
/* Gốc định vị cho panel bên dưới và cho bút chì sửa nhanh (nếu có quyền). */
.tp-qf-cell { position: relative; }
.tp-qf-market-more {
    display: inline-flex; align-items: center; justify-content: center;
    flex: none; height: 18px; padding: 0 6px; border-radius: 999px;
    background: var(--tp-action-tint); color: var(--tp-action);
    font-size: 11px; font-weight: 800; line-height: 1; border: none; cursor: pointer;
}
.tp-qf-market-more:hover { background: var(--tp-action-line); }
/* Neo mép phải ô (ô này luôn ở cột cuối, canh giữa sẽ tràn ra ngoài card).
   z-index vượt header/tab/chân trang để panel không bị che, vẫn dưới modal. */
.tp-qf-market-panel {
    position: absolute; z-index: 70; top: calc(100% - 8px); right: 8px;
    width: max-content; min-width: 160px; max-width: 240px; max-height: 220px; overflow-y: auto;
    background: #fff; border: 1px solid var(--border-subtle); border-radius: 8px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .16); padding: 10px 12px; text-align: left;
}
.tp-qf-market-panel[hidden] { display: none; }
.tp-qf-market-panel-title { font-size: 11.5px; font-weight: 700; color: var(--text-tertiary); margin-bottom: 6px; }
.tp-qf-market-panel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tp-qf-market-panel li { font-size: 13px; color: var(--text-secondary); }

/* Card đã xác minh được verify.js gắn ruy-băng chéo ở góc trên phải —
   chừa chỗ để ruy-băng không đè lên link "Xem tất cả". */
[data-tpv3-point]:has(> .tpv3-marker.tpv3-ribbon) .tp-section-viewall { margin-right: 60px; }

/* ══════════════════════════════════════════════════════════════════
   NĂNG LỰC DOANH NGHIỆP (V5) — một card gộp bốn phần:
   hoạt động kinh doanh chính → câu "Phù hợp nếu bạn đang tìm" →
   4 ô năng lực → sản phẩm & dịch vụ chính.
   Xem V5/_Capacity.cshtml. Ô nào doanh nghiệp chưa khai thì view không
   render, nên ở đây không có trạng thái rỗng.
   ══════════════════════════════════════════════════════════════════ */
.tp-cap { position: relative; }
.tp-cap > * + * { margin-top: 16px; }

.tp-cap-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-800); }
.tp-cap-sub { display: block; margin-top: 11px; font-size: 13px; font-weight: 700; color: var(--text-primary); }
/* Dòng nội dung của 4 ô — bản thiết kế dùng dòng chữ, KHÔNG dùng chip. */
.tp-cap-lines { list-style: none; margin: 11px 0 0; padding: 0; }
.tp-cap-lines li { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 7px; font-size: 13px; color: var(--text-secondary); }
.tp-cap-lines li:first-child { margin-top: 0; }
.tp-cap-line { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-secondary); overflow-wrap: anywhere; }
.tp-cap-line b { font-weight: 800; color: var(--text-primary); }
.tp-cap-main { flex: none; padding: 2px 8px; border-radius: 5px; background: var(--surface-muted); font-size: 11px; font-weight: 700; color: var(--text-secondary); }
/* Dải logo dự án tiêu biểu (ô "Kinh nghiệm thực tế") — trượt ngang khi nhiều hơn khung hiện,
   scroll-snap để dừng đúng từng logo thay vì lơ lửng giữa chừng lúc buông tay/trackpad. */
.tp-cap-logos {
    display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 12px;
    overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding-bottom: 2px;
}
.tp-cap-logos::-webkit-scrollbar { height: 4px; }
.tp-cap-logos::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 999px; }
.tp-cap-logos span {
    flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
    background: var(--surface-muted); color: var(--text-tertiary);
}
.tp-cap-logos span img { width: 100%; height: 100%; object-fit: cover; }
.tp-cap-logos svg { width: 15px; height: 15px; }
/* Lối "Xem tất cả / Xem thêm" nằm cuối ô, canh phải như thiết kế.
   "Xem kinh nghiệm thực tế" dùng thẻ <a> (2 lối kia là <button>) — theme dùng chung có
   ".vne-v3 a { color: inherit }" đặc hiệu hơn ".tp-cap-more" đơn lẻ nên ăn màu đen kế thừa;
   scope thêm ".tp-cap-col" để thắng specificity, giữ đúng màu/weight/size như 2 nút kia. */
.tp-cap-col .tp-cap-more {
    display: inline-flex; align-items: center; gap: 4px; align-self: flex-end;
    margin-top: auto; padding: 10px 0 0; border: none; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 600; color: var(--text-tertiary); text-decoration: none;
}
.tp-cap-col .tp-cap-more:hover { color: var(--tp-action); }
.tp-cap-more--muted { cursor: default; }
.tp-cap-more--muted:hover { color: var(--text-tertiary); }
.tp-cap-more svg { width: 14px; height: 14px; }
.tp-cap-empty { margin: 14px 0 0; font-size: 14px; color: var(--text-tertiary); }

.tp-cap-block { position: relative; }
.tp-cap-block-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
/* Bút chì sửa của khối này — neo lại top/right (khác mặc định 10px/10px của .tp-qf-edit) vì sau khi
   bỏ padding/border ở trên, bút chì rớt lệch xuống dưới card. Scope .tp-cap-block > : chỉ dùng
   đúng 1 nơi nên không ảnh hưởng .tp-qf-edit ở chỗ khác. */
.tp-cap-block > .tp-qf-edit { top: -5px; right: 5px; }

@media (min-width: 1280px) {
    .tp-slide-arrowpad { padding-left: 16px; padding-right: 16px; }
    .tp-slide-arrowpad [data-tp-slide="prev"] { left: -20px; }
    .tp-slide-arrowpad [data-tp-slide="next"] { right: -20px; }
}

.tp-cap-link {
    display: inline-flex; align-items: center; gap: 4px; flex: none;
    padding: 0; border: none; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--tp-action); white-space: nowrap;
}
.tp-cap-link:hover { color: var(--tp-action-hover); }
.tp-cap-link svg { width: 15px; height: 15px; }

/* Mobile: bỏ nút "Xem tất cả (N)" ở tiêu đề "Hoạt động kinh doanh chính" (card Năng lực doanh
   nghiệp) — băng trượt ngang bên dưới đã đủ để duyệt hết, giữ nút chỉ thừa chỗ trên màn hẹp
   (theo yêu cầu user 2026-09-03). Scope vào .tp-cap-block-head (chỉ header này) chứ không ẩn
   .tp-cap-link nói chung — class đó còn dùng lại cho nút "Bổ sung ngay" ở cảnh báo thiếu doanh
   thu (_FinancialInfo.cshtml, .tp-fin-warn .tp-cap-link), nút đó vẫn cần hiện trên mobile. */
@media (max-width: 767px) {
    .tp-cap-block-head .tp-cap-link { display: none; }
}

/* ─── Nhóm sản phẩm / dịch vụ tiêu biểu ─── */
.tp-cap-prod {
    display: flex; flex-direction: column; text-align: left; padding: 0; cursor: pointer;
    border: 1px solid var(--border-default); border-radius: var(--radius-md);
    background: var(--surface-card); overflow: hidden;
    transition: box-shadow .2s cubic-bezier(.2, 0, .2, 1);
}
.tp-cap-prod:hover { box-shadow: var(--shadow-md); }
.tp-cap-prod-media { display: block; position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--neutral-100); }
.tp-cap-prod-media img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; display: block; }
.tp-cap-prod-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; }
.tp-cap-prod-play svg { width: 18px; height: 18px; color: #fff; background: rgba(26, 24, 21, .55); border-radius: 999px; padding: 11px; box-sizing: content-box; }
.tp-cap-prod-body { display: block; padding: 13px 15px; }
.tp-cap-prod-body b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.tp-cap-prod-body span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--text-tertiary); }

/* ─── Câu tóm tắt ghép từ dữ liệu đã khai ─── */
.tp-cap-match {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
}
.tp-cap-match-ico {
    flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm);
    background: var(--tp-action-tint); color: var(--tp-action);
    display: inline-flex; align-items: center; justify-content: center;
}
.tp-cap-match-ico svg { width: 15px; height: 15px; }
.tp-cap-match b { display: block; font-size: 13px; font-weight: 700; }
.tp-cap-match p { margin: 3px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }

/* ─── 4 ô năng lực ─── */
.tp-cap-cols { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
.tp-cap-col { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); }
.tp-cap-col-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 26px; }
/* Mỗi ô nhỏ có bút chì sửa riêng (2026-08-26) neo top-right của .tp-cap-col (.tp-qf-edit mặc định
   top:10px/right:10px) — ô "Phạm vi phục vụ" còn có badge số quốc gia cũng nằm góc phải cùng hàng
   tiêu đề, dành chỗ bằng padding-right trên chính hàng tiêu đề để 2 thứ không đè lên nhau. */
.tp-cap-col:has(> .tp-qf-edit) > .tp-cap-col-head { padding-right: 34px; }
.tp-cap-badge {
    flex: none; padding: 5px 11px; border-radius: 7px;
    background: var(--brand-800); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
}
/* "Phạm vi phục vụ": tiêu đề + badge số quốc gia phải giữ cùng 1 hàng, không rớt dòng —
   thu nhỏ chữ 1 chút cho vừa hàng khi ô hẹp (mobile). */
.tp-cap-col-head:has(.tp-cap-badge) .tp-cap-label { white-space: nowrap; font-size: 11px; }
.tp-cap-col-head:has(.tp-cap-badge) .tp-cap-badge { font-size: 11px; padding: 4px 9px; }
.tp-cap-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tp-cap-chip {
    padding: 3px 11px; border-radius: 999px;
    background: var(--surface-subtle); border: 1px solid var(--border-subtle);
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.tp-cap-chip--brand { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.tp-cap-num { display: flex; align-items: baseline; gap: 6px; margin-top: 10px; }
.tp-cap-num b { font-family: var(--font-display, inherit); font-size: 19px; font-weight: 800; }
.tp-cap-num span { font-size: 12.5px; color: var(--text-tertiary); }
.tp-cap-offer { margin: 8px 0 0; font-size: 13px; line-height: 1.6; color: var(--text-secondary); overflow-wrap: anywhere; }

@media (min-width: 640px) { .tp-cap-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tp-cap-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ══════════════════════════════════════════════════════════════════
   QUY MÔ & TÀI CHÍNH (V5) — xem V5/_FinancialInfo.cshtml.
   Doanh thu chỉ hiện THEO KHOẢNG; năm doanh nghiệp giữ bí mật không
   render nên khối doanh thu có thể vắng mặt (lưới tự co còn 2 cột).
   ══════════════════════════════════════════════════════════════════ */
/* Khối con trong card Năng lực doanh nghiệp — cùng khuôn với .tp-cap-block. */
.tp-fin { position: relative; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); }

.tp-fin-warn {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    margin-top: 14px; padding: 12px 16px;
    border: 1px solid #eddcb4; border-radius: var(--radius-md);
    background: var(--warning-100); color: #8a5c17;
    font-size: 13px; font-weight: 600;
}
.tp-fin-warn svg { width: 16px; height: 16px; flex: none; }
.tp-fin-warn .tp-cap-link { margin-left: auto; color: #8a5c17; }

/* Flex chứ không grid cố định cột: khối nào doanh nghiệp chưa khai thì view không
   render, nên số khối chạy từ 1 đến 3 — flex tự chia lại, không chừa cột trống. */
.tp-fin-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; align-items: stretch; }

.tp-fin-rev { flex: 2 1 300px; display: flex; flex-direction: column; padding: 18px; border-radius: var(--radius-md); background: var(--brand-800); color: #fff; }
.tp-fin-rev-head { display: flex; align-items: center; gap: 10px; }
.tp-fin-rev-ico {
    flex: none; width: 32px; height: 32px; border-radius: 999px; background: rgba(255, 255, 255, .1);
    display: inline-flex; align-items: center; justify-content: center; color: var(--brand-300);
}
.tp-fin-rev-ico svg { width: 17px; height: 17px; }
.tp-fin-rev-label { font-size: 12.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-300); }
.tp-fin-rev-value { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.tp-fin-rev-value b { font-family: var(--font-display, inherit); font-size: 26px; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.tp-fin-chip { padding: 4px 10px; border-radius: var(--radius-xs); background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .8); font-size: 11.5px; font-weight: 600; }

/* Grid dùng CHUNG cho cả .tp-fin-years (không đặt grid-template-columns riêng từng .tp-fin-yearbar) —
   để cột "band" (auto) và cột "bar" (1fr) có cùng độ rộng ở MỌI dòng năm. Nếu để mỗi dòng tự làm
   grid riêng, dòng nào có chữ khoảng doanh thu dài hơn ("1.000 – 5.000 tỷ đồng") sẽ bị co bar ngắn
   lại so với dòng chữ ngắn ("Dưới 1 tỷ đồng") dù số tiền lớn hơn nhiều — thanh so sánh thành sai lệch. */
.tp-fin-years { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 10px; margin-top: 20px; }
.tp-fin-yearbar { display: contents; }
.tp-fin-row-year { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8); }
.tp-fin-row-band { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.tp-fin-bar { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .16); overflow: hidden; }
.tp-fin-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--brand-300); }

.tp-fin-rev-foot { margin: auto 0 0; padding-top: 18px; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .68); }

.tp-fin-cell { flex: 1 1 200px; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--brand-50); }
.tp-fin-label { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700); }
.tp-fin-big { margin-top: 12px; font-family: var(--font-display, inherit); font-size: 26px; font-weight: 800; line-height: 1.25; color: var(--tp-action); overflow-wrap: anywhere; }
.tp-fin-report { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; }
.tp-fin-report svg { flex: none; width: 22px; height: 22px; color: var(--brand-700); }
.tp-fin-report b { font-family: var(--font-display, inherit); font-size: 17px; font-weight: 800; line-height: 1.3; color: var(--brand-800); }
/* Huy hiệu trạng thái trong 2 ô phải (đối chiếu / doanh nghiệp công bố). */
.tp-fin-pill {
    display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
    margin-top: 12px; padding: 5px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700;
}
.tp-fin-pill svg { width: 15px; height: 15px; }
.tp-fin-pill--ok { background: var(--success-100); color: var(--success-600); }
.tp-fin-pill--brand { background: var(--brand-100); color: var(--brand-700); }
.tp-fin-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-tertiary); }
.tp-fin-note--last { margin-top: auto; padding-top: 10px; }
.tp-fin-src { display: flex; align-items: flex-start; gap: 9px; margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--border-subtle); font-size: 12px; line-height: 1.45; color: var(--text-tertiary); }
.tp-fin-src svg { flex: none; width: 22px; height: 22px; color: var(--tp-action); }
.tp-fin-src b { font-weight: 600; }

/* Chấm trang dùng chung cho MỌI băng trượt ngang mobile "1 thẻ/lần" trên trang V5 (Quy mô tài
   chính, Đánh giá & nhận xét, Cơ hội hợp tác, TrustInsight) — cùng cơ chế data-tp-slider/
   tp-card-slider.js với băng "Nhu cầu & dự án đang mở" sẵn có. Ẩn mặc định (desktop không tràn
   nên JS tự dựng đúng 1 chấm — vô hại nhưng không cần thấy); từng khối tự bật lại trong media
   query mobile của nó (xem .tp-fin-grid dưới đây và các <style> trong _Reviews.cshtml/
   _CooperationOpportunities.cshtml/_TrustInsights.cshtml) — theo yêu cầu user 2026-09-03. */
.tp-mslide-dots { display: none; }

/* Mobile: 3 ô (doanh thu / vốn điều lệ / báo cáo tài chính) trượt ngang TỪNG Ô 1 (kèm chấm
   trang, giống "Nhu cầu & dự án đang mở") thay vì xuống dòng — theo yêu cầu user 2026-09-03.
   Desktop/tablet (>767px) giữ nguyên flex-wrap như cũ. */
@media (max-width: 767px) {
    .tp-mslide-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
    .tp-fin-grid {
        flex-wrap: nowrap; gap: 12px;
        overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tp-fin-grid::-webkit-scrollbar { display: none; }
    .tp-fin-grid > .tp-fin-rev,
    .tp-fin-grid > .tp-fin-cell {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
}

/* ══════════════════════════════════════════════════════════════════
   BẢN IN / LƯU PDF — "Lưu hồ sơ PDF" phải ra đúng giao diện màu gốc,
   chỉ bỏ những gì không bấm được trên giấy (menu, nút, modal).
   ══════════════════════════════════════════════════════════════════ */
@media print {
    #tp-header, #tp-tabs, #tp-footer-tw, .tp-qf-edit, .tp-modal, .tp-toast { display: none !important; }

    /* MỖI .tp-group (1 nhóm = 1 "card" theo đúng thiết kế V5, xem ghi chú
       "Mỗi nhóm là MỘT card" ở CSS .tp-group phía trên) LUÔN bắt đầu ở TRANG
       MỚI khi in (2026-08-29, theo yêu cầu user: "mỗi card mỗi page").
       Trước đây để trình duyệt tự gói nhiều group vào chung 1 trang khi còn
       chỗ trống — phải tính đúng "còn bao nhiêu chỗ trống" mới không vỡ
       (tiêu đề mồ côi, ảnh cao bất thường kéo lệch cả khối...), rất dễ vỡ
       theo từng trường hợp dữ liệu khác nhau. Ép ngắt trang TRƯỚC mỗi group
       bỏ hẳn bài toán đó: group sau không bao giờ phải "vừa vặn" với phần
       trang còn lại của group trước — chỉ còn lo group tự vỡ bên trong nó
       (đã xử lý ở các quy tắc break-inside bên dưới). group ĐẦU TIÊN không
       cần quy tắc này vì đã tự nhiên đứng đầu trang. */
    .tp-group {
        break-before: page;
        page-break-before: always;
    }
    /* #g-tong-quan luôn là group ĐẦU TIÊN (Index.cshtml) — trừ quy tắc trên
       để khỏi tự chèn 1 trang trắng ngay sau Business Passport/dải tóm tắt. */
    #g-tong-quan {
        break-before: auto;
        page-break-before: auto;
    }

    /* Thẻ "TRẠNG THÁI TÍN NHIỆM" (.tp-passport-status — cột phải Business
       Passport) trước đây nằm chung dòng chảy với cột trái (thông tin nhận
       diện DN); DN nào cột trái dài (nhiều dòng meta, ảnh bìa cao) đẩy thẻ
       trạng thái tràn quá mép trang, bị cắt ngay giữa PHẠM VI KIỂM TRA (báo
       lỗi 2026-08-29, theo yêu cầu user "cho trạng thái tín nhiệm nằm riêng ở
       1 page"). .tp-passport-right là display:flex — cùng nhóm lỗi ngắt
       trang với các flex/grid container khác đã sửa ở trên nên chuyển sang
       block (an toàn: .tp-passport-status tự có width:100%, không phụ thuộc
       align-items:flex-end của cha). Ép nguyên cột phải bắt đầu TRANG MỚI và
       không tự vỡ bên trong. */
    .tp-passport-right {
        display: block;
        break-before: page;
        page-break-before: always;
    }
    .tp-passport-status {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .tp-passport-grid {
        display: block;
    }

    /* Popup thư viện/lightbox toàn màn hình (Chứng nhận, Hình ảnh, Sản phẩm,
       Đánh giá) — position:fixed nên nếu lỡ đang mở lúc bấm in sẽ che kín cả
       trang; luôn ẩn hẳn khi in bất kể đang .is-open hay không. */
    .tp-crt-viewer, .tp-crt-lightbox,
    .tp-gal-viewer, .tp-gal-lightbox,
    .tp-pd-viewer, .tp-pd-lightbox,
    .tp-rvw-modal, .tp-rvw-toast,
    .tp-pop {
        display: none !important;
    }

    /* Gửi yêu cầu hợp tác là thao tác tương tác, không phải nội dung hồ sơ. */
    [data-tp-coop-request] { display: none !important; }

    /* Băng trượt ngang (khách xem hồ sơ — Hoạt động kinh doanh chính, Chứng
       nhận): overflow-x:auto chỉ hiện đúng khung nhìn màn hình, phần còn lại
       nằm ngoài overflow bị CẮT MẤT hoàn toàn khi in (không cuộn được trên
       giấy) — trải thành lưới tĩnh xuống dòng để không mất thẻ nào. Nút
       trượt/chấm trang chỉ có tác dụng tương tác nên ẩn theo. */
    [data-tp-slide-track] {
        overflow: visible !important;
        flex-wrap: wrap !important;
    }
    [data-tp-slide], [data-tp-slide-dots] { display: none !important; }

    /* Khổ giấy hẹp hơn màn hình nhiều: xếp 4 bước "Hành trình tín nhiệm"
       theo chiều dọc để bước cuối không bị cắt mất. */
    .tp-journey-steps { flex-direction: column !important; align-items: flex-start !important; }
    .tp-journey-steps .tp-dash { display: none !important; }
    .tp-journey-title-br { display: none !important; }
    .tp-journey-title { white-space: nowrap !important; }

    /* Trình duyệt mặc định không in nền/gradient → nút chữ trắng thành
       trắng-trên-trắng, icon và đường nối biến mất. Ép in đủ màu. */
    * { print-color-adjust: exact !important; -webkit-print-color-adjust: exact !important; }

    @page { margin: 14mm 12mm; }

    /* Không ngắt trang giữa một card, một ô hay một tấm ảnh. .tp-coop-card/
       .tp-coop-stat (thẻ nhu cầu & dự án, ô chỉ số — Cơ hội hợp tác) và
       .tp-rvw-card (thẻ đánh giá) trước đây KHÔNG có bảo vệ riêng, chỉ trông
       cậy vào break-inside:avoid của <section> cha — khi section cha quá cao
       không vừa 1 trang buộc phải ngắt bên trong, trình duyệt ngắt ngay giữa
       thẻ vì thẻ con không tự bảo vệ (báo lỗi 2026-08-28: thẻ "Tìm đơn vị
       sản xuất" bị cắt đôi giữa 2 trang). */
    .rounded-xl.shadow-card,
    .rounded-xl.shadow-lg,
    .tp-qf-cell,
    .tp-gal-tile,
    .tp-pd-card,
    .tp-cap-match,
    .tp-coop-card,
    .tp-coop-stat,
    .tp-coop-boxes,
    .tp-coop-stats,
    .tp-rvw-card,
    .tp-crt-group,
    .tp-intro-legal {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* .tp-cap (Năng lực doanh nghiệp), #hop-tac (Cơ hội hợp tác), #chung-nhan
       (Bằng chứng tín nhiệm — chỉ chủ hồ sơ/KSV mới thấy đủ 6 mục .tp-crt-group,
       khách xem chỉ 1 băng trượt ngắn) và #gioi-thieu (Tổng quan — ảnh/video +
       khối pháp lý + đoạn giới thiệu dài) mỗi cái gộp nhiều khối vốn từng là
       card riêng vào một <section> — break-inside:avoid ở trên (khớp
       .rounded-xl.shadow-card) do đó ép NGUYÊN section thành 1 khối không thể
       chia. Không vừa phần trang còn lại thì bị đẩy nguyên khối sang trang
       mới, để lại khoảng trắng rất lớn ở cuối trang trước; nếu bản thân nó
       còn cao hơn 1 trang (đoạn giới thiệu dài) thì Chrome buộc phải tự chọn
       chỗ ngắt bất kỳ, có thể để lại khoảng trắng ở giữa khối luôn (báo lỗi
       2026-08-29: khoảng trắng gần hết 1 trang sau card Business Passport,
       trước khi "TỔNG QUAN DOANH NGHIỆP" bắt đầu lại từ đầu trang sau). Mở
       lại cho phép ngắt TỰ DO giữa các khối con — từng khối con đã tự bảo vệ
       riêng bằng các class ở trên (hoặc là đoạn văn dài, vốn ngắt trang bình
       thường được) nên vẫn không vỡ nội dung bên trong. */
    .tp-cap,
    #hop-tac,
    #chung-nhan,
    #gioi-thieu {
        break-inside: auto;
        page-break-inside: auto;
    }

    /* Tiêu đề nhóm (.tp-group-head) đứng riêng ngoài .tp-group-body — nếu
       không ép, ngắt trang có thể rơi ngay sau tiêu đề: tiêu đề trơ trọi ở
       cuối trang, nội dung mới bắt đầu ở trang sau. Ép tiêu đề đi cùng
       trang với nội dung theo ngay sau nó. */
    .tp-group-head {
        break-after: avoid;
        page-break-after: avoid;
    }

    /* .tp-group-body là display:flex (flex-direction:column) — Chrome hỗ trợ
       ngắt trang cho flex container không đầy đủ như block thường: break-
       after/break-inside đặt trên các item con (section, .tp-group-head ở
       trên) không được tôn trọng đúng cách, có lúc đẩy cả khối bị bỏ trắng
       gần hết 1 trang trước khi bắt đầu lại (báo lỗi 2026-08-29). Chỉ xếp
       các mục theo chiều dọc, không dùng thuộc tính flex nào khác (align-
       items/justify-content) nên chuyển sang block khi in — nhìn giống hệt
       ngoài màn hình, nhưng dùng đúng thuật toán ngắt trang cho nội dung
       khối, vốn được hỗ trợ đầy đủ hơn. */
    .tp-group-body {
        display: block;
    }

    /* .tp-intro-grid (Giới thiệu doanh nghiệp — ảnh/video + khối pháp lý +
       đoạn giới thiệu) cũng là display:grid, 1 cột dưới 1024px (đúng khổ in)
       nên nhìn ngoài màn hình đã xếp dọc sẵn — nhưng vẫn là grid container,
       cùng nhóm lỗi ngắt trang với flex ở trên. Chuyển sang block khi in. */
    .tp-intro-grid {
        display: block;
    }

    /* .tp-intro-media: ảnh bìa "Giới thiệu doanh nghiệp" cao h-full trong ô
       grid không có chiều cao cố định (chỉ min-h-[220px]) — bình thường
       .tp-intro-grid stretch 2 cột bằng nhau nên ảnh "mượn" chiều cao cột chữ
       bên cạnh; ảnh hưởng bởi cách Chrome tính layout khi in khiến ô ảnh
       giãn ra rất cao (gần bằng cả khối pháp lý + đoạn giới thiệu dài),
       chiếm gần hết 1 trang bằng ảnh nền nhạt màu — nhìn như khoảng trắng
       (báo lỗi 2026-08-29). Ép về đúng chiều cao vừa phải khi in. */
    .tp-intro-media {
        height: 260px !important;
        min-height: 0 !important;
    }

    /* .tp-page-body (Index.cshtml — khung bọc mọi .tp-group + dải tóm tắt +
       tab) CŨNG là display:flex (flex-direction:column), nên mỗi .tp-group
       lại là 1 flex item của MỘT flex container khác — cùng lý do với
       .tp-group-body ở trên, đây mới là nơi thực sự gây khoảng trắng gần hết
       trang trước "TỔNG QUAN DOANH NGHIỆP" (báo lỗi 2026-08-29): sửa riêng
       .tp-group-body không đủ vì .tp-group tự nó vẫn nằm trong flex container
       NGOÀI này. Chuyển sang block + bù lại khoảng cách gap-5 (20px) bằng
       margin-top vì display:block không chắc mọi bản Chrome đều giữ `gap`. */
    .tp-page-body {
        display: block;
    }
    .tp-page-body > * + * {
        margin-top: 20px;
    }

    /* Không bấm "Xem thêm" được trên giấy → mở sẵn mọi nội dung bị cắt. */
    .tp-intro-clamp {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }
    .tpv3-scope-clamp { max-height: none !important; overflow: visible !important; }
    .tp-intro-toggle { display: none !important; }

    /* Trích dẫn đánh giá + tiêu đề dự án hợp tác cũng cắt 2 dòng kiểu
       -webkit-line-clamp — không bấm "Xem thêm" được trên giấy nên phải mở
       hết, cùng cách xử lý với .tp-intro-clamp ở trên. */
    .tp-rvw-quote, .tp-coop-card-title {
        display: block !important;
        -webkit-line-clamp: unset !important;
        overflow: visible !important;
    }

    .tp-quickfact-industry {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset !important;
        display: block !important;
    }
    /* Danh sách thị trường xuất khẩu: bỏ badge "+N", trải panel thành khối
       tĩnh xuôi theo trang (JS gỡ [hidden] trước khi in). */
    .tp-qf-market-more { display: none !important; }
    .tp-qf-market-panel {
        position: static !important;
        box-shadow: none !important;
        border: none !important;
        padding: 6px 0 0 !important;
        max-width: none !important;
        width: auto !important;
        max-height: none !important;
        overflow: visible !important;
        text-align: left;
        margin-top: 6px;
    }

    /* Hàng "Xem phạm vi" / "Tìm hiểu cấp X" trong thẻ trạng thái — cùng lý do
       với các băng trượt ở trên: overflow-x:auto không cuộn được trên giấy. */
    .tp-passport-links { overflow: visible !important; flex-wrap: wrap !important; }
}