/* ══════════════════════════════════════════════════════════════════
   TRUSTPROFILE™ — SỬA NHANH TẠI CHỖ (chủ hồ sơ / KSV trưởng / Trust Leader)
   Doanh nghiệp sửa hồ sơ ngay trên trang xem: rê vào ô → hiện bút chì →
   mở modal → lưu → toast báo xong. Người xem thường không nạp file này.
   Hành vi ở wwwroot/js/trustprofile/tp-edit-modal.js + edit-*.js.
   ══════════════════════════════════════════════════════════════════ */

/* ══ BÚT CHÌ SỬA NHANH ══ Chỉ hiện khi trang bật cờ .tp-can-edit. */
.tp-qf-edit {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    display: none; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 999px;
    border: 1px solid var(--border-subtle); background: #fff; color: var(--text-secondary);
    cursor: pointer; opacity: 0;
    box-shadow: 0 1px 4px rgba(40, 90, 185, .18);
    transition: opacity .15s ease, transform .15s ease, background .15s ease;
}
.tp-can-edit .tp-qf-edit { display: inline-flex; }
.tp-can-edit .tp-qf-cell:hover .tp-qf-edit,
.tp-can-edit .tp-qf-edit:focus-visible { opacity: 1; }
.tp-qf-edit:hover { transform: scale(1.08); background: var(--brand-600); color: #fff; border-color: var(--tp-action); }

/* Thiết bị cảm ứng không có hover → bút chì luôn hiện mờ. */
@media (hover: none) {
    .tp-can-edit .tp-qf-edit { opacity: .55; }
}

/* Ô vừa có huy hiệu xác minh vừa có bút chì (cùng góc trên phải) → đẩy bút
   chì sang trái theo bề rộng của từng loại huy hiệu để không chồng nhau. */
.tp-qf-cell:has(> .tpv3-marker) > .tp-qf-edit { right: 120px; }
.tp-qf-cell:has(> .tpv3-marker.is-nodata) > .tp-qf-edit { right: 160px; }
.tp-qf-cell:has(> .tpv3-marker.tpv3-ribbon) > .tp-qf-edit { right: 150px; }

/* #g-hoat-dong ("Hoạt động thực tế"): bút chì đứng cùng hàng với tiêu đề nhóm ngoài thay vì
   góc của card con — xem ghi chú tương ứng ở trustprofile-public.css (.tp-group-solo). */
#g-hoat-dong .tp-qf-edit { top: 20px; right: 24px; }
@media (max-width: 640px) {
    #g-hoat-dong .tp-qf-edit { top: 16px; right: 16px; }
}

/* Ô trống "bổ sung thêm chứng nhận" — chỉ bấm được khi có quyền sửa. */
.tp-cert-add { cursor: default; font: inherit; }
.tp-can-edit .tp-cert-add { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.tp-can-edit .tp-cert-add:hover { border-color: var(--tp-action); background: var(--brand-50); }

/* ══════════════════════════════════════════════════════════════════
   MODAL SỬA NHANH — một khung dùng chung, phần thân đổi theo mục đang sửa.
   ══════════════════════════════════════════════════════════════════ */
.tp-modal { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tp-modal[hidden] { display: none; }
.tp-modal-backdrop { position: absolute; inset: 0; background: rgba(16, 24, 40, .55); backdrop-filter: blur(2px); }
.tp-modal-card {
    position: relative; width: 100%; max-width: 440px;
    /* Chặn theo chiều cao màn hình để form dài (vd nhiều kênh theo dõi)
       không đẩy hàng nút Lưu/Huỷ ra ngoài tầm nhìn. */
    max-height: calc(100vh - 40px);
    background: #fff; border-radius: 8px;
    box-shadow: 0 24px 60px rgba(18, 41, 58, .28);
    display: flex; flex-direction: column;
    overflow: hidden;
    animation: tp-modal-in .18s ease;
}
/* Mục có trình soạn thảo (Giới thiệu doanh nghiệp) cần khung rộng hơn. */
.tp-modal-card.tp-modal-wide { max-width: 760px; }
@keyframes tp-modal-in {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.tp-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 20px 0; }
.tp-modal-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 999px; background: var(--brand-50); color: var(--brand-600);
}
.tp-modal-icon svg { width: 20px; height: 20px; }
.tp-modal-title { font-weight: 800; font-size: 17px; line-height: 1.3; }
.tp-modal-sub { font-size: 12.5px; color: var(--text-tertiary); margin-top: 2px; }
.tp-modal-x {
    margin-left: auto; flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 999px; border: none; background: transparent;
    color: var(--text-tertiary); cursor: pointer;
}
.tp-modal-x:hover { background: var(--surface-subtle); }
.tp-modal-x svg { width: 18px; height: 18px; }
/* Chỉ phần thân cuộn, hàng tiêu đề và hàng nút luôn nằm trong tầm nhìn.
   min-height:0 là điều kiện để flex item chịu co lại cho overflow có tác dụng. */
.tp-modal-body {
    padding: 18px 20px 4px; display: flex; flex-direction: column; gap: 14px;
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
}

/* ─── Ô nhập ─── */
.tp-field { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tp-field-label { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
/* Bộ đếm "· Đã chọn X/5" ngay sau nhãn field (checklist có giới hạn số lượng chọn). */
.tp-field-count { font-weight: 600; color: var(--text-tertiary); }
.tp-field-row { display: flex; gap: 12px; }
.tp-input {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1.5px solid var(--border-subtle); border-radius: 8px;
    font-size: 14px; color: inherit; background: #fff; outline: none;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.tp-input:focus { border-color: var(--tp-action); box-shadow: 0 0 0 3px rgba(10, 111, 184, .18); }
select.tp-input { appearance: auto; }
/* Ô hệ thống tự tính (vd khoảng doanh thu suy ra từ 2 kỳ): nền xám để
   doanh nghiệp thấy ngay là không nhập tay được. */
.tp-input[readonly] { background: var(--surface-subtle); color: var(--text-secondary); cursor: default; }
.tp-input[readonly]:focus { border-color: var(--border-subtle); box-shadow: none; }
/* Khoanh đỏ đúng ô sai để không phải dò cả form. */
.tp-input-error { border-color: #dc2626 !important; }
.tp-input-error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, .14); }
/* Trình soạn thảo dự phòng khi Summernote không nạp được. */
textarea.tp-input { height: auto; min-height: 160px; padding: 10px 12px; resize: vertical; line-height: 1.55; font-family: inherit; }
.tp-req { color: #dc2626; }
.tp-input-file { height: auto; padding: 9px 12px; }
.tp-field-hint { font-size: 12px; color: var(--text-tertiary); }
/* Nhắc doanh nghiệp phải tự chọn lại (vd địa chỉ cũ chưa có Xã/Phường theo
   đơn vị hành chính mới) — khác tông với hint thường. */
.tp-field-hint-warn { display: block; margin-top: 6px; font-size: 12px; color: #b45309; }

/* Gợi ý đầu modal (vd nhắc nhập Pháp lý đúng như Giấy chứng nhận ĐKKD). */
.tp-modal-hint {
    display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 8px;
    background: var(--brand-50); color: var(--text-secondary);
    font-size: 12.5px; line-height: 1.5;
}
.tp-modal-hint::before {
    content: ''; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%;
    background: var(--brand-600); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / 70% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='16' x2='12' y2='12'/%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* ─── Ô chọn có tìm kiếm (Lĩnh vực, Tỉnh/Thành, Xã/Phường) ───
   Danh sách quá dài để xổ hết nên gõ lọc rồi chọn từ gợi ý.
   Tách 2 lớp: khung ngoài lo viền/bo góc và cắt gọn mọi thứ bên trong,
   lớp trong mới thật sự cuộn — nhờ vậy thanh cuộn không đâm ra ngoài góc bo
   dù trình duyệt render scrollbar kiểu gì. */
.tp-combo { position: relative; }
.tp-combo-input[disabled] { background: var(--surface-subtle); cursor: not-allowed; }
.tp-combo-list {
    position: absolute; z-index: 10; left: 0; right: 0; top: calc(100% + 4px);
    background: #fff; overflow: hidden;
    border: 1.5px solid var(--border-subtle); border-radius: 8px;
    box-shadow: 0 12px 28px rgba(40, 90, 185, .18);
}
.tp-combo-list-scroll {
    max-height: 240px; overflow-y: auto; padding: 4px;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.tp-combo-list-scroll::-webkit-scrollbar { width: 8px; }
.tp-combo-list-scroll::-webkit-scrollbar-track { background: transparent; }
.tp-combo-list-scroll::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: 999px; }
.tp-combo-list-scroll::-webkit-scrollbar-thumb:hover { background-color: var(--text-tertiary); }
.tp-combo-option { padding: 9px 10px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.tp-combo-option:hover { background: var(--brand-50); }
.tp-combo-option.is-selected { background: var(--brand-50); color: var(--brand-700); font-weight: 700; }
.tp-combo-empty { padding: 9px 10px; font-size: 13px; color: var(--text-tertiary); }

/* ─── Chọn nhiều (Thị trường xuất khẩu) ─── */
.tp-check-list {
    max-height: 260px; overflow-y: auto; border: 1.5px solid var(--border-subtle);
    border-radius: 8px; padding: 6px;
}
.tp-check-item { display: flex; align-items: center; gap: 9px; padding: 8px 8px; border-radius: 7px; font-size: 14px; cursor: pointer; }
.tp-check-item:hover { background: var(--surface-subtle); }
.tp-check-item input { width: 16px; height: 16px; accent-color: var(--brand-600); flex: none; }
.tp-check-empty { padding: 9px 10px; font-size: 13px; color: var(--text-tertiary); }

/* ─── "Đối tác phù hợp" (2026-08-26) — tìm-rồi-thêm ngành/lĩnh vực + gợi ý từ khoá theo ngành ───
   Chip xoá/gợi ý dùng <button> (không phải <span> như .vn-badge được thiết kế cho) nên cần tự
   reset viền/nền mặc định của trình duyệt — .vn-badge không lo phần này. */
.tp-chip-remove { line-height: 1; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
.tp-chip-suggest-btn { border: 0; cursor: pointer; }
/* Tiêu đề phụ trong field (VD "Gợi ý theo ngành" / "Đã chọn") — không dùng .tp-field-label vì đó
   là nhãn CHÍNH của field (đi kèm bộ đếm), còn đây là tiêu đề phụ giữa 2 khối con. */
.tp-field-hint-heading { display: block; margin: 10px 0 6px; }
.tp-field-hint-heading:first-child { margin-top: 0; }
/* Danh sách gợi ý ngành/lĩnh vực NẰM TRONG LUỒNG trang (không position:fixed/absolute như
   .tp-combo-list 1-chọn) — tránh phải lo che/cắt trong thân modal cuộn (xem edit-ideal-partner.js). */
.tp-inline-suggest { margin-top: 6px; border: 1.5px solid var(--border-subtle); border-radius: 8px; }

/* ─── Vai trò kinh doanh (REQ-34 §5-1, 2026-08-26) — check-list CÓ NHÓM + chọn 1 vai trò chính ───
   21 mục/5 nhóm dài hơn hẳn các check-list khác dùng chung .tp-check-list (max-height 260px) nên
   cần khung cao hơn riêng — không đổi .tp-check-list gốc để khỏi ảnh hưởng 6 modal check-list khác. */
.tp-role-list { max-height: 420px; }
.tp-role-group-head {
    padding: 8px 8px 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-tertiary);
}
.tp-role-group-head:first-child { padding-top: 2px; }
.tp-role-item { justify-content: space-between; }
.tp-role-text { flex: 1; min-width: 0; }
.tp-role-main { display: flex; align-items: center; gap: 5px; flex: none; }
.tp-role-main-radio { width: 14px; height: 14px; accent-color: var(--brand-600); }
.tp-role-main-radio:disabled { opacity: .35; cursor: not-allowed; }
.tp-role-main-label { font-size: 11.5px; font-weight: 600; color: var(--text-tertiary); }

/* ─── Trình soạn thảo Summernote: bo góc + focus đồng bộ với .tp-input ─── */
.tp-modal-body .note-editor.note-frame { border: 1.5px solid var(--border-subtle); border-radius: 8px; }
.tp-modal-body .note-editor.note-frame.focused { border-color: var(--tp-action); box-shadow: 0 0 0 3px rgba(10, 111, 184, .18); }
.tp-modal-body .note-editor .note-editing-area .note-editable { font-size: 14px; line-height: 1.6; }

/* ─── Thông báo lỗi chung của form ─── */
.tp-modal-error {
    margin: 10px 20px 0; padding: 9px 12px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
    font-size: 12.5px; font-weight: 600;
}

/* ─── Hàng nút ─── */
.tp-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 20px 20px; }
/* .tp-btn / .tp-btn-ghost / .tp-btn-primary chuyển sang trustprofile.css — các
   hộp thoại của người xem thường (phạm vi kiểm tra, báo cáo hồ sơ) cũng dùng,
   mà file này chỉ nạp cho người có quyền sửa. */
.tp-btn-danger { background: #fef2f2; color: #b91c1c; border: 1.5px solid #fecaca; align-self: flex-start; }
.tp-btn-danger:hover { background: #fee2e2; }
/* Nút "thêm một mục nữa" — viền đứt nét cho thấy rõ là bấm được. */
.tp-btn-add { background: var(--brand-50); color: var(--brand-600); border: 1.5px dashed var(--brand-600); }
.tp-btn-add:hover { filter: brightness(.96); border-style: solid; }

/* ─── Đang lưu: che cả modal, chặn double-submit và sửa dở dang ─── */
.tp-modal-loading {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(255, 255, 255, .72); border-radius: 8px;
}
.tp-modal-loading[hidden] { display: none; }
.tp-modal-spinner {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid var(--border-subtle); border-top-color: var(--brand-600);
    animation: tp-modal-spin .7s linear infinite;
}
.tp-modal-loading-text { font-size: 12.5px; font-weight: 700; color: var(--text-secondary); }
@keyframes tp-modal-spin { to { transform: rotate(360deg); } }

/* ─── Thông tin tài chính: 2 dòng năm cố định (năm trước và năm trước nữa) ─── */
.tp-fin-rows { display: flex; flex-direction: column; gap: 10px; }
.tp-fin-row { border: 1.5px solid var(--border-subtle); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tp-fin-band-preview { font-size: 12.5px; color: var(--text-secondary); }
.tp-fin-band-preview .tp-fin-band-value { color: var(--brand-600); font-weight: 700; }
.tp-fin-capital-unit { display: flex; align-items: center; flex: none; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.tp-fin-conf { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-secondary); cursor: pointer; }
.tp-fin-conf input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--brand-600); flex: none; }

/* ─── Kênh theo dõi: mỗi dòng là một nền tảng + đường dẫn ─── */
.tp-social-rows { max-height: 420px; overflow-y: auto; padding-right: 4px; }
.tp-social-row { margin-bottom: 8px; padding: 10px; border: 1.5px solid var(--border-subtle); border-radius: 8px; }
.tp-social-row__main { display: flex; gap: 8px; align-items: center; }
.tp-social-row__platform { flex: 0 0 128px; }
.tp-social-row__url { flex: 1; min-width: 0; }
.tp-social-row__remove { flex: 0 0 auto; }
.tp-social-row__label { width: 100%; margin-top: 8px; }
.tp-social-add { width: 100%; margin-top: 8px; }

/* ─── Trụ sở & địa điểm hoạt động: mỗi dòng là 1 địa điểm (loại + tên + địa chỉ) ─── */
.tp-loc-rows { max-height: 360px; overflow-y: auto; padding-right: 4px; }
.tp-loc-row { margin-bottom: 8px; padding: 10px; border: 1.5px solid var(--border-subtle); border-radius: 8px; display: flex; flex-direction: column; gap: 8px; }
.tp-loc-row__head { display: flex; gap: 8px; align-items: center; }
.tp-loc-row__kind { flex: 0 0 128px; }
.tp-loc-row__remove { flex: 0 0 auto; margin-left: auto; }
.tp-loc-add { width: 100%; margin-top: 8px; }

/* ─── Chứng nhận: ảnh hiện tại kèm form ─── */
.tp-cert-imgrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tp-cert-thumb { width: 56px; height: 42px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-subtle); }

/* ══ TOAST BÁO LƯU XONG ══ */
.tp-toast {
    position: fixed; top: 24px; right: 24px; transform: translateX(16px);
    z-index: 90; display: flex; align-items: center; gap: 10px;
    padding: 12px 18px; border-radius: 8px;
    background: #fff; border: 1px solid var(--border-subtle);
    box-shadow: 0 12px 32px rgba(18, 41, 58, .22);
    font-size: 13.5px; font-weight: 700; color: var(--text-secondary);
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.tp-toast.is-visible { opacity: 1; transform: translateX(0); }
.tp-toast-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 999px; background: #ecfdf5; color: #059669;
}
.tp-toast-icon svg { width: 15px; height: 15px; }

/* ══ MÀN HÌNH HẸP ══ Modal chiếm gần hết màn, nút Huỷ/Lưu giãn đều
   full-width cho dễ bấm bằng ngón tay. */
@media (max-width: 640px) {
    .tp-modal { padding: 12px; }
    .tp-modal-card { max-height: calc(100vh - 24px); }
    .tp-modal-head { padding: 16px 16px 0; }
    .tp-modal-body { padding: 14px 16px 4px; }
    .tp-modal-error { margin: 10px 16px 0; }
    .tp-modal-foot { padding: 14px 16px 16px; flex-wrap: wrap; }
    .tp-modal-foot .tp-btn { flex: 1 1 0; }
    .tp-field-row { flex-direction: column; }
    /* Đường dẫn xuống dòng riêng, không chen giữa ô chọn nền tảng và nút xoá. */
    .tp-social-rows { max-height: 300px; }
    .tp-social-row__main { flex-wrap: wrap; }
    .tp-social-row__platform { order: 1; flex: 1 1 auto; }
    .tp-social-row__remove { order: 2; }
    .tp-social-row__url { order: 3; flex: 1 1 100%; }
}