/**
 * tooltip.css — viên "i" tròn + popup giải thích, click để hiện/ẩn (desktop lẫn mobile).
 *
 *   - .info-tip  : viên "i" sau nhãn
 *   - .tip-popup : popup khi bấm (kèm .tip-close, .tip-content)
 *   - @keyframes tipFadeIn
 *
 * [2026-08-02] ĐÃ CẮT 584 dòng MÃ CHẾT: .help-panel / .help-card* / .step-card* /
 * .catalog-* / .library-* / .project-modal* / .tab-* / .btn-* — 46/48 selector của file này
 * KHÔNG được index.html hay js/ nào dùng. Dự án đã có tiền lệ mã chết gây hậu quả THẬT
 * (.toast vô hình nhiều tháng) nên không để lại.
 */

/* Tooltip với info icon - CLICK để hiện/ẩn (mobile-friendly) */
.info-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    min-width: 14px;
    /* [2026-08-02] #94a3b8 -> --info: chữ TRẮNG trên nền cũ chỉ tương phản 2,56 (chuẩn AA cần 4,5),
       mà đây là chữ "i" cỡ 9,5px — cỡ nhỏ nhất trong app. Dùng --info được 6,52 và về đúng hệ màu.
       Không lấy --accent (9,84) vì viên này nằm CẠNH nhan đề dùng --accent, cùng màu thì nó tranh
       chỗ với nhan đề thay vì đứng làm phụ chú. */
    background: var(--info, #185fa5);
    color: #fff;
    border-radius: 50%;
    font-size: 9.5px;
    font-weight: 700;
    font-style: italic;
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1;
    margin-left: 5px;
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(100,116,139,0.25);
    flex-shrink: 0;
    border: none;
    padding: 0;
    vertical-align: middle;
    text-align: center;
}

.info-tip:hover { background: #1a5f8e; transform: scale(1.1); }
/* [2026-09-23, rà giao diện DD-4, DD-7] viên "i" nay là NÚT; vùng chạm vô hình 28×28 px quanh viên 14 px */
button.info-tip { font-size: 9.5px; font-style: italic; font-family: Georgia, 'Times New Roman', serif; }
.info-tip::after { content: ''; position: absolute; left: -7px; top: -7px; right: -7px; bottom: -7px; }

.info-tip.active { background: #d97706; box-shadow: 0 2px 8px rgba(217,119,6,0.5); transform: scale(1.15); }

/* Popup hiển thị khi click */
.tip-popup { position: fixed; background: #1a2332; color: white; padding: 12px 16px 12px 16px; border-radius: 8px; font-size: 13px; line-height: 1.6; font-weight: 400; max-width: 320px; min-width: 220px; z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,0.35); animation: tipFadeIn 0.15s ease-out;
  max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }   /* [DD-7] lời giải thích dài: cuộn bên trong, không đẩy ra ngoài màn hình */
.tip-popup.tren::before { top: auto; bottom: -6px; }   /* [DD-7] khung lật lên trên viên: mũi chỉ xuống */

.tip-popup::before { content: ''; position: absolute; top: -6px; left: 20px; width: 12px; height: 12px; background: #1a2332; transform: rotate(45deg); }

.tip-popup .tip-close { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; background: rgba(255,255,255,0.15); color: white; border: none; border-radius: 50%; font-size: 16px; cursor: pointer; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center; }

.tip-popup .tip-close:hover { background: rgba(255,255,255,0.3); }

.tip-popup .tip-content { padding-right: 22px; white-space: pre-wrap; }

@keyframes tipFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }