/* ══════════════════════════════════════════════════════════════════
   TRUSTPROFILE™ — TRANG THÔNG TIN PHÁP LÝ

   Nạp CÙNG trustprofile.css (thẻ chip/nút/hộp thoại dùng lại từ đó), chỉ thêm
   những gì riêng của trang này: đầu trang, thanh tab, bảng 8 hạng mục, vòng
   phạm vi đối chiếu, khối giấy tờ / nguồn / nhật ký.

   Tiền tố .tp-lg-* để không lẫn với .tp-* của trang hồ sơ.
   ══════════════════════════════════════════════════════════════════ */

.tp-lg-wrap {
    width: 100%; max-width: 1200px; margin: 0 auto; flex: 1;
    padding: 18px 16px 32px;
    display: flex; flex-direction: column; gap: 16px;
}
@media (min-width: 640px) { .tp-lg-wrap { padding: 22px 24px 40px; } }

/* ─── Breadcrumb ─── */
.tp-lg-crumbs { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-tertiary); }
.tp-lg-crumbs a { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-700); font-weight: 600; }
.tp-lg-crumbs a:hover { text-decoration: underline; }
.tp-lg-crumbs svg { width: 14px; height: 14px; }

/* ─── Đầu trang ───
   Theo mockup 2026-08-28 (nhìn kỹ lần 2): hàng trên cùng = breadcrumb trái + 2 nút hành động góc
   phải; hàng dưới = tiêu đề + mô tả bên trái, card 3 ô trạng thái bên PHẢI (ngay dưới nút).
   Bỏ dòng tên công ty. Mobile: card rớt xuống dưới tiêu đề, full-width. */
.tp-lg-topline {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
}
.tp-lg-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.tp-lg-head-lead { min-width: 0; }
/* Desktop: 2 cột × 2 hàng — trái = tiêu đề (hàng 1) + thanh tab (hàng 2, ghim đáy), phải = card
   trạng thái span cả 2 hàng. Nhờ vậy tab nằm sát dưới mô tả thay vì bị chiều cao card đẩy xuống
   (khoảng trống chết user khoanh đỏ 2026-08-28); đáy tab thẳng hàng đáy card như mockup. */
@media (min-width: 980px) {
    .tp-lg-head { grid-template-columns: minmax(0, 1fr) 640px; grid-template-rows: auto 1fr; column-gap: 24px; row-gap: 12px; }
    .tp-lg-head > .tp-lg-status { grid-column: 2; grid-row: 1 / 3; }
    .tp-lg-head > .tp-lg-tabs { grid-column: 1; grid-row: 2; align-self: end; }
}
.tp-lg-title {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-family: var(--font-display, inherit); font-weight: 800; font-size: 22px;
    letter-spacing: .04em; text-transform: uppercase; color: var(--brand-800);
}
.tp-lg-title svg { width: 20px; height: 20px; color: var(--success-600); }
.tp-lg-sub { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary); max-width: 620px; }

.tp-lg-head-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
.tp-lg-btn {
    display: inline-flex; align-items: center; gap: 7px;
    height: 38px; padding: 0 16px; border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.tp-lg-btn svg { width: 15px; height: 15px; }
/* Chọn .tp-lg-btn.tp-lg-btn--primary (2 lớp, không chỉ 1) để chắc thắng ".vne-v3 a { color:
   inherit }" của theme (1 lớp + 1 thẻ = độ đặc thù NHỈNH HƠN 1 lớp) — thiếu vế này, chữ nút mặc
   định bị "inherit" màu chìm từ khối cha, chỉ sáng đúng màu khi có :hover (thêm 1 pseudo-class
   mới đủ đặc thù thắng). Nút này luôn là <a>/<button> chữ trắng trên nền brand, không phụ thuộc hover. */
.tp-lg-btn.tp-lg-btn--primary { background: var(--brand-700); color: #fff; }
.tp-lg-btn.tp-lg-btn--primary:hover { background: var(--brand-800); color: #fff; }
.tp-lg-btn--ghost { background: var(--surface-card); border: 1px solid var(--border-default); color: var(--text-secondary); }
.tp-lg-btn--ghost:hover { background: var(--surface-subtle); }

/* Ba ô trạng thái: cấp + phạm vi + hiệu lực — CARD TRẮNG riêng bo góc, cột ngăn nhau bằng vạch
   dọc (kẻ bằng gap 1px lộ nền --border-subtle), theo mockup 2026-08-28.
   Bề rộng do cột grid 640px của .tp-lg-head quyết định (desktop); mobile chiếm full cột đơn. */
.tp-lg-status {
    min-width: 0; align-self: start;
    display: grid; grid-template-columns: 1fr; gap: 1px;
    background: var(--border-subtle); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-card);
}
.tp-lg-status > div { background: var(--surface-card); padding: 16px 24px; }
@media (min-width: 768px) { .tp-lg-status { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tp-lg-status-label { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-tertiary); }
.tp-lg-status-value { margin-top: 4px; font-family: var(--font-display, inherit); font-weight: 800; font-size: 18px; color: var(--text-primary); }
/* Cấp tín nhiệm tô xanh lá (mockup: "REGISTERED™" xanh). */
.tp-lg-status-value--level { color: var(--success-600); }
.tp-lg-status-note { display: flex; align-items: center; gap: 5px; margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--text-tertiary); }
/* Dòng "ĐÃ CÔNG BỐ" viết hoa theo mockup — chỉ áp cho ô trạng thái, không đụng ghi chú cột khác. */
.tp-lg-status-note--pub { text-transform: uppercase; font-size: 11px; letter-spacing: .06em; margin-top: 5px; }
.tp-lg-status-note.is-live { color: var(--success-600); }
.tp-lg-status-note svg { width: 13px; height: 13px; }
/* Hàng "8/8 mục ··· 100%" (số đếm trái, % phải) + thanh tiến độ xanh bên dưới (mockup). */
.tp-lg-status-scope { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tp-lg-status-bar {
    margin-top: 9px; height: 6px; border-radius: 999px;
    background: var(--surface-muted); overflow: hidden;
}
.tp-lg-status-bar > span {
    display: block; height: 100%; border-radius: 999px;
    background: var(--success-600); transition: width .3s ease;
}
.tp-lg-status-cal { width: 17px; height: 17px; color: var(--brand-600); flex: none; align-self: center; }

/* ─── Thanh tab ───
   Đổi kiểu pill → chữ + gạch chân xanh dưới tab đang chọn (mockup 2026-08-28). Gạch chân vẽ bằng
   ::after đè lên đường kẻ đáy của cả thanh. */
.tp-lg-tabs { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--border-subtle); }
.tp-lg-tab {
    position: relative; padding: 10px 2px 12px; border: 0; border-radius: 0;
    background: transparent; color: var(--text-secondary);
    font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tp-lg-tab:hover { background: transparent; color: var(--text-primary); }
.tp-lg-tab.is-active, .tp-lg-tab.is-active:hover { background: transparent; color: var(--brand-700); font-weight: 700; }
.tp-lg-tab.is-active::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2.5px; border-radius: 2px; background: var(--brand-600);
}

/* ─── Khung nội dung ─── */
.tp-lg-panel { display: flex; flex-direction: column; gap: 16px; }
.tp-lg-panel[hidden] { display: none; }
.tp-lg-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 1024px) { .tp-lg-grid { grid-template-columns: minmax(0, 1fr) 380px; } }
.tp-lg-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.tp-lg-card {
    padding: 18px 20px;
    background: var(--surface-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-card);
}
.tp-lg-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tp-lg-card-title {
    margin: 0; font-family: var(--font-display, inherit); font-weight: 800; font-size: 13px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--brand-700);
}
.tp-lg-more {
    padding: 0; border: none; background: none; cursor: pointer;
    font-size: 12.5px; font-weight: 700; color: var(--brand-700); text-decoration: underline;
}
.tp-lg-empty { margin: 12px 0 0; font-size: 13px; color: var(--text-tertiary); }
.tp-lg-note {
    display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0;
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--brand-50); font-size: 12px; line-height: 1.55; color: var(--text-secondary);
}
.tp-lg-note svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--brand-600); }

/* ─── 8 hạng mục pháp lý ─── */
.tp-lg-items { margin-top: 12px; }
.tp-lg-item {
    display: grid; grid-template-columns: 26px 26px minmax(0, 1fr); gap: 4px 10px;
    align-items: center; padding: 12px 0;
}
.tp-lg-item + .tp-lg-item { border-top: 1px solid var(--border-subtle); }
/* Cột nhãn RỘNG CỐ ĐỊNH: mỗi dòng là một grid riêng, nếu để 1fr thì nhãn dài
   ("Người đại diện theo pháp luật") tự nới cột của chính dòng đó → giá trị các
   dòng thụt ra thụt vào. Cố định 210px thì mọi dòng thẳng một hàng dọc. */
@media (min-width: 768px) {
    .tp-lg-item { grid-template-columns: 26px 26px 210px minmax(0, 1fr) auto; }
}
.tp-lg-item-no { font-size: 11.5px; font-weight: 700; color: var(--text-disabled); }
.tp-lg-item-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--brand-600); }
.tp-lg-item-icon svg { width: 16px; height: 16px; }
.tp-lg-item-label { grid-column: 3; font-size: 12.5px; color: var(--text-tertiary); }
.tp-lg-item-value { grid-column: 3; font-size: 13.5px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.tp-lg-item-value.is-empty { font-weight: 400; color: var(--text-disabled); }
.tp-lg-item-note { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--text-tertiary); }
@media (min-width: 768px) {
    .tp-lg-item-label { grid-column: auto; }
    .tp-lg-item-value { grid-column: auto; }
}

/* ─── Chip 3 tầng trạng thái ─── */
.tp-lg-chip {
    display: inline-flex; align-items: center; gap: 5px; flex: none;
    padding: 5px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.tp-lg-chip svg { width: 13px; height: 13px; }
.tp-lg-chip.is-done { background: var(--success-100); color: var(--success-600); }
.tp-lg-chip.is-self { background: var(--warning-100); color: var(--warning-600); }
.tp-lg-chip.is-none { background: var(--surface-muted); color: var(--text-tertiary); }

/* Chip TICK ĐƯỢC (nguồn đối chiếu, người có quyền) — viền rõ ở trạng thái chưa tick để
   trông đúng là một Ô CHECKBOX bấm được, không lẫn với StateChip tròn chỉ báo trạng thái. */
.tp-lg-chip--tick.is-none { background: var(--surface-card); color: var(--text-secondary); border: 1.5px solid var(--border-default); }

/* Chip MỨC XÁC MINH của hạng mục pháp lý — màu theo mức do attr-verify.js gắn vào
   data-tp-attr-state (p = đã công bố, c = đã đối chiếu, v/o = đã xác minh, none = chưa có dữ liệu).
   Icon do attr-verify.js chèn vào nên không đặt màu chữ cho svg ở đây. */
.tp-lg-chip--attr[data-tp-attr-state="p"] { background: var(--warning-100); color: var(--warning-600); }
.tp-lg-chip--attr[data-tp-attr-state="c"] { background: var(--info-100); color: var(--info-600); }
.tp-lg-chip--attr[data-tp-attr-state="v"],
.tp-lg-chip--attr[data-tp-attr-state="o"] { background: var(--success-100); color: var(--success-600); }
.tp-lg-chip--attr[data-tp-attr-state="none"] { background: var(--surface-muted); color: var(--text-tertiary); }
/* Chip đã có gap riêng nên bỏ lề mặc định của dấu. */
.tp-lg-chip--attr .tpav-chip { margin: 0; top: 0; }
/* Người có quyền chấm mức → cả chip bấm được, không chỉ riêng icon. */
.tp-lg-chip--attr:has(.tpav-chip.is-clickable) { cursor: pointer; }

/* ─── Vòng phạm vi đối chiếu ─── */
.tp-lg-scope { display: flex; align-items: center; gap: 18px; margin-top: 14px; }
.tp-lg-donut {
    flex: none; position: relative;
    width: 92px; height: 92px; border-radius: 999px;
    background: conic-gradient(var(--success-600) var(--at), var(--surface-muted) 0);
    display: flex; align-items: center; justify-content: center;
}
/* Lỗ giữa vẽ bằng ::before nên không cần SVG. */
.tp-lg-donut::before {
    content: ""; position: absolute; inset: 11px; border-radius: 999px; background: var(--surface-card);
}
.tp-lg-donut span { position: relative; font-family: var(--font-display, inherit); font-weight: 800; font-size: 18px; color: var(--brand-800); }
.tp-lg-scope-count { font-family: var(--font-display, inherit); font-weight: 800; font-size: 16px; color: var(--text-primary); }
.tp-lg-scope-text { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); }

/* ─── Bảng nhật ký ─── */
.tp-lg-table-wrap { margin-top: 12px; overflow-x: auto; }
.tp-lg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tp-lg-table th {
    padding: 8px 10px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tertiary);
}
.tp-lg-table td { padding: 10px; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: top; }
.tp-lg-table tr:last-child td { border-bottom: none; }
/* .tp-lg-table td (element+class, 0-1-1) đè mất .tp-lg-ok/.tp-lg-fail (chỉ 1 class, 0-1-0) nếu để
   suông — phải viết kèm "td." để thắng đúng luật specificity, không phụ thuộc thứ tự khai báo. */
td.tp-lg-ok { color: var(--success-600); font-weight: 600; }
/* Đổi tên từ .tp-lg-warn (2026-08-28, theo yêu cầu user): "Bỏ đối chiếu" tô ĐỎ như một kết quả
   thất bại/gỡ bỏ, không phải màu cảnh báo vàng cam — chỉ dùng ở đúng 1 chỗ này. */
td.tp-lg-fail { color: var(--error-600); font-weight: 600; }
/* Kết quả kèm icon tròn (2026-08-28, theo mockup user) — màu ăn theo .tp-lg-ok/.tp-lg-fail của <td>. */
.tp-lg-result { display: inline-flex; align-items: center; gap: 5px; }
.tp-lg-result svg { width: 14px; height: 14px; flex: none; }
.tp-lg-role { display: block; font-size: 11.5px; color: var(--text-tertiary); }

/* ─── Giấy tờ pháp lý ─── */
.tp-lg-doc { display: flex; align-items: center; gap: 10px; padding: 11px 0; }
.tp-lg-doc + .tp-lg-doc { border-top: 1px solid var(--border-subtle); }
.tp-lg-doc-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--error-100); color: var(--error-600);
}
.tp-lg-doc-icon svg { width: 17px; height: 17px; }
.tp-lg-doc-name { font-size: 13px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.tp-lg-doc-meta { margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary); }
/* Tải về + xoá đứng chung một cụm ở mép phải, KHÔNG để mỗi nút tự margin-left:auto — có/không
   có nút xoá thì nút tải về vẫn nằm đúng một vị trí, hai dòng giấy tờ không so le nhau. */
.tp-lg-doc-actions { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.tp-lg-doc-open, .tp-lg-doc-del {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    transition: background .15s ease, color .15s ease;
}
.tp-lg-doc-open { background: var(--brand-50); color: var(--brand-700); }
.tp-lg-doc-open:hover { background: var(--brand-100); }
.tp-lg-doc-open svg, .tp-lg-doc-del svg { width: 15px; height: 15px; }
/* Xoá là thao tác phụ và KHÔNG hoàn tác được: cùng khuôn 32px với nút tải về (nhìn ra là một
   cặp) nhưng để nền xám trung tính cho khỏi tranh chỗ với nút tải về, chỉ đỏ lên khi trỏ vào —
   đủ cảnh báo mà không làm cả danh sách đỏ quạch. */
.tp-lg-doc-del { background: var(--surface-muted); color: var(--text-tertiary); cursor: pointer; }
.tp-lg-doc-del:hover { background: var(--error-100); color: var(--error-600); }
.tp-lg-doc-del:focus-visible { outline: 2px solid var(--error-600); outline-offset: 2px; }
.tp-lg-doc-del[disabled] { cursor: progress; opacity: .5; }
/* Đang gọi API xoá — khoá cả dòng để không bấm tiếp (giống .tp-lg-source.is-busy). */
.tp-lg-doc.is-busy { opacity: .55; pointer-events: none; }

/* Chọn LOẠI giấy tờ trước khi mở được ô chọn file (PO: mục này chỉ nhận giấy tờ liên quan pháp
   lý, không để nhét ảnh bất kỳ) — select + ô nhập "Khác" nằm TRÊN dropzone. */
.tp-lg-upload-category-label { display: block; margin-top: 12px; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.tp-lg-upload-category, .tp-lg-upload-category-other {
    width: 100%; margin-top: 6px; padding: 9px 10px;
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    font: inherit; font-size: 13px; color: var(--text-primary); background: var(--surface-card);
}
.tp-lg-upload-category:focus, .tp-lg-upload-category-other:focus { outline: none; border-color: var(--brand-600); }
.tp-lg-upload-category-other { margin-top: 8px; }

.tp-lg-upload {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    margin-top: 12px; padding: 16px;
    border: 1.5px dashed var(--brand-600); border-radius: var(--radius-sm);
    background: var(--brand-50); text-align: center;
}
.tp-lg-upload:hover { filter: brightness(.98); }
.tp-lg-upload svg { width: 20px; height: 20px; color: var(--brand-600); }
.tp-lg-upload span { font-size: 12.5px; font-weight: 700; color: var(--brand-700); }
.tp-lg-upload small { font-size: 11px; color: var(--text-tertiary); }
/* Ô chọn file là <label> bọc input ẩn nên con trỏ phải tự khai là bấm được. */
.tp-lg-upload { cursor: pointer; }
.tp-lg-upload.is-busy { cursor: progress; opacity: .65; pointer-events: none; }
/* Chưa chọn loại giấy tờ → khoá cả về mặt hiển thị (không chỉ input[disabled]), tránh trông như
   bấm được trong khi hộp thoại chọn file sẽ không mở. */
.tp-lg-upload.is-disabled { cursor: not-allowed; opacity: .55; border-style: solid; border-color: var(--border-default); background: var(--surface-muted); }
.tp-lg-upload.is-disabled svg { color: var(--text-tertiary); }
.tp-lg-upload.is-disabled span { color: var(--text-tertiary); }
.tp-lg-upload-error { margin: 8px 0 0; font-size: 12px; color: var(--error-600); }

/* ─── Tick nguồn đối chiếu ───
   Ô tick thật bị ẩn, người dùng bấm vào chính con chip trạng thái — vừa gọn vừa
   nói rõ bấm xong thì trạng thái thành gì. */
.tp-lg-source-tick { margin-left: auto; flex: none; cursor: pointer; }
.tp-lg-source-tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tp-lg-source-tick .tp-lg-chip { transition: filter .15s ease; }
.tp-lg-source-tick:hover .tp-lg-chip { filter: brightness(.95); }
.tp-lg-source-tick input:focus-visible + .tp-lg-chip { outline: 2px solid var(--brand-600); outline-offset: 2px; }
.tp-lg-source.is-busy { opacity: .6; pointer-events: none; }

/* ─── Nguồn đối chiếu ─── */
/* Cột phải hẹp (380px): giữ chip trạng thái NẰM CÙNG HÀNG với tên nguồn (xuống
   dòng thì đọc như thuộc nguồn kế tiếp); tên nguồn dài thì cho ngắt dòng, còn
   chữ "Xem nguồn chính thức" giữ nguyên một dòng.
   2026-08-28 (theo mockup user): mỗi nguồn thành 1 THẺ riêng bo góc có viền (thay vì
   danh sách phẳng ngăn bằng gạch ngang) — cách nhau bằng margin-top, không còn border-top. */
.tp-lg-source {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
}
.tp-lg-source-link { white-space: nowrap; }
.tp-lg-source + .tp-lg-source { margin-top: 10px; }
.tp-lg-source-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 999px;
    background: var(--brand-50); color: var(--brand-700);
}
.tp-lg-source-icon svg { width: 16px; height: 16px; }
.tp-lg-source-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); }
.tp-lg-source-meta { margin-top: 2px; font-size: 11.5px; color: var(--text-tertiary); }
.tp-lg-source-link {
    display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
    font-size: 11.5px; font-weight: 700; color: var(--brand-700);
}
.tp-lg-source-link:hover { text-decoration: underline; }
.tp-lg-source-link svg { width: 12px; height: 12px; }
.tp-lg-source .tp-lg-chip { margin-left: auto; }

/* ─── Nhắc cập nhật ở chân trang ─── */
.tp-lg-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    padding: 14px 20px; border-radius: var(--radius-lg);
    background: var(--brand-50); border: 1px solid var(--brand-100);
}
.tp-lg-foot svg { flex: none; width: 17px; height: 17px; color: var(--brand-600); }
.tp-lg-foot p { flex: 1; min-width: 220px; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); }