/* ══════════════════════════════════════════════════════════════════
   TRUSTPROFILE™ — HƯỚNG DẪN LẦN ĐẦU (product tour) cho chủ hồ sơ
   Lớp phủ tối khoét sáng ô cần sửa + bong bóng chỉ dẫn từng bước.
   Hành vi ở wwwroot/js/trustprofile-public/tp-onboarding-tour.js.
   ══════════════════════════════════════════════════════════════════ */

/* Trên modal sửa nhanh (80) và hộp thoại .tp-pop (90) — bước 3 chỉ dẫn ngay trong modal. */
.tp-tour { position: fixed; top: 0; left: 0; z-index: 95; pointer-events: none; }
.tp-tour [hidden] { display: none !important; }
.tp-tour.is-waiting > * { visibility: hidden; }

/* Lớp tối: chỉ phần có tô màu mới chặn chuột, vùng khoét để bấm xuyên tới phần tử thật. */
.tp-tour-mask { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tp-tour-mask path { fill: rgba(10, 18, 32, .68); pointer-events: auto; cursor: default; }

/* Viền sáng quanh phần tử: 2 lớp (trắng + xanh) để nổi được cả trên nền tối của hero lẫn nền trắng của modal. */
.tp-tour-ring {
    position: fixed; top: 0; left: 0;
    border-radius: 14px; pointer-events: none;
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 111, 184, .55);
    animation: tp-tour-ring 1.8s ease-out infinite;
}
/* Vòng quanh tab đang chỉ trên thanh điều hướng (bước các phần hồ sơ). */
.tp-tour-ring.is-tab { border-radius: 999px; }
@keyframes tp-tour-ring {
    0%   { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 111, 184, .55); }
    70%  { box-shadow: 0 0 0 2px #fff, 0 0 0 14px rgba(10, 111, 184, 0); }
    100% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(10, 111, 184, 0); }
}

/* Bong bóng chỉ dẫn — vị trí đặt bằng transform từ JS mỗi khung hình. */
.tp-tour-pop {
    position: fixed; top: 0; left: 0;
    width: min(340px, calc(100vw - 24px));
    padding: 18px 18px 14px;
    background: #fff; color: var(--text-primary, #101d26);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(10, 18, 32, .32), 0 2px 8px rgba(10, 18, 32, .12);
    pointer-events: auto;
}
.tp-tour-pop.is-entering { animation: tp-tour-in .22s ease; }
.tp-tour-pop.is-nudge { animation: tp-tour-nudge .36s ease; }
@keyframes tp-tour-in {
    from { opacity: 0; scale: .96; }
    to   { opacity: 1; scale: 1; }
}
@keyframes tp-tour-nudge {
    0%, 100% { translate: 0 0; }
    25% { translate: -6px 0; }
    75% { translate: 6px 0; }
}

.tp-tour-arrow {
    position: absolute; width: 12px; height: 12px;
    background: #fff; transform: rotate(45deg);
    display: none;
}
.tp-tour-pop[data-side="bottom"] .tp-tour-arrow { display: block; top: -6px; margin-left: -6px; }
.tp-tour-pop[data-side="top"] .tp-tour-arrow    { display: block; bottom: -6px; margin-left: -6px; }
.tp-tour-pop[data-side="right"] .tp-tour-arrow  { display: block; left: -6px; margin-top: -6px; }
.tp-tour-pop[data-side="left"] .tp-tour-arrow   { display: block; right: -6px; margin-top: -6px; }

.tp-tour-head { display: flex; align-items: center; gap: 10px; }
.tp-tour-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 999px;
    background: var(--brand-50, #eaf3fb); color: var(--tp-action, #0a6fb8);
}
.tp-tour-icon svg { width: 18px; height: 18px; }
.tp-tour-title { font-weight: 800; font-size: 15.5px; line-height: 1.3; }
.tp-tour-body { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary, #47555f); }

/* justify flex-end: hướng dẫn từng phần (1 bước) ẩn bộ đếm thì 2 nút vẫn nằm bên phải. */
.tp-tour-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tp-tour-foot .tp-btn { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
.tp-tour-back {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--border-subtle, #d5dde3); background: #fff; color: var(--text-secondary, #47555f);
}
.tp-tour-back:hover { background: var(--brand-50, #eaf3fb); color: var(--tp-action, #0a6fb8); }
.tp-tour-back svg { width: 16px; height: 16px; }
/* Đẩy 2 nút Bỏ qua/Tiếp sang phải. */
.tp-tour-count { margin-right: auto; font-size: 12.5px; font-weight: 700; color: var(--text-tertiary, #7a8790); font-variant-numeric: tabular-nums; }

/* Phần tử đang được chỉ: mọi bút chì sửa nhanh bên trong hiện hẳn (bình thường chỉ hiện khi rê chuột)
   để người dùng thấy chỗ sửa; riêng ô đang dạy bấm (Năm thành lập) thì bút chì đập nhẹ. */
.tp-tour-target .tp-qf-edit { opacity: 1; }
.tp-tour-target.tp-qf-cell > .tp-qf-edit { animation: tp-tour-pencil 1.2s ease-in-out infinite; }
@keyframes tp-tour-pencil {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .tp-tour-ring,
    .tp-tour-pop.is-entering,
    .tp-tour-pop.is-nudge,
    .tp-tour-target .tp-qf-edit { animation: none; }
}