/* ==========================================
   TN600 Extras — Progress, Bookmarks, Stats
   ========================================== */

/* --- Toolbar extras (trên danh sách câu) --- */
.tn600-extras-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.tn600-extras-toolbar .tn600-ext-btn {
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #374151;
}
.tn600-extras-toolbar .tn600-ext-btn:hover {
    background: #eff6ff;
    border-color: #93c5fd;
    color: #1d4ed8;
}
.tn600-extras-toolbar .tn600-ext-btn.active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}
.tn600-extras-toolbar .tn600-ext-btn.danger {
    border-color: #fca5a5;
    color: #dc2626;
}
.tn600-extras-toolbar .tn600-ext-btn.danger:hover {
    background: #fee2e2;
}
.tn600-ext-spacer { flex: 1; }

/* --- Progress bar tổng --- */
.tn600-progress-wrap {
    margin-bottom: 14px;
}
.tn600-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: #6b7280;
}
.tn600-progress-bar-bg {
    flex: 1;
    height: 6px;
    background: #e5e7eb;
    border-radius: 20px;
    overflow: hidden;
}
.tn600-progress-bar-fill {
    height: 100%;
    border-radius: 20px;
    transition: width .4s ease;
}
.tn600-progress-bar-fill.correct  { background: #22c55e; }
.tn600-progress-bar-fill.answered { background: #3b82f6; }
.tn600-progress-bar-fill.wrong    { background: #ef4444; }

.tn600-progress-label {
    font-size: 11px;
    min-width: 34px;
    text-align: right;
    font-weight: 600;
}

/* --- Bookmark (heart) icon trên câu hỏi --- */
.tn600-bookmark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all .15s;
    float: right;
    margin-left: 8px;
    flex-shrink: 0;
}
.tn600-bookmark-btn:hover { border-color: #f87171; background: #fff1f2; }
.tn600-bookmark-btn.bookmarked {
    border-color: #f87171;
    background: #fff1f2;
    color: #ef4444;
}

/* --- Stats panel --- */
.tn600-stats-panel {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px;
    margin-top: 12px;
    display: none;
    width: 100%;
    box-sizing: border-box;
}
.tn600-stats-panel.visible { display: block; }
.tn600-stats-title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tn600-stats-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tn600-stats-card {
    flex: 1 1 80px;
    border-radius: 8px;
    padding: 10px 12px;
    text-align: center;
}
.tn600-stats-card.c-total  { background: #eff6ff; }
.tn600-stats-card.c-done   { background: #f0fdf4; }
.tn600-stats-card.c-right  { background: #dcfce7; }
.tn600-stats-card.c-wrong  { background: #fee2e2; }
.tn600-stats-card .num {
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    display: block;
}
.tn600-stats-card.c-total .num  { color: #1d4ed8; }
.tn600-stats-card.c-done  .num  { color: #15803d; }
.tn600-stats-card.c-right .num  { color: #16a34a; }
.tn600-stats-card.c-wrong .num  { color: #dc2626; }
.tn600-stats-card .lbl {
    font-size: 11px;
    color: #6b7280;
    margin-top: 3px;
    display: block;
}
.tn600-wrong-list {
    font-size: 12px;
    color: #374151;
    max-height: 140px;
    overflow-y: auto;
    border-top: 1px solid #f3f4f6;
    padding-top: 10px;
}
.tn600-wrong-item {
    padding: 5px 0;
    border-bottom: 1px solid #f9fafb;
    display: flex;
    gap: 6px;
}
.tn600-wrong-item .qnum {
    background: #fef2f2;
    color: #dc2626;
    font-weight: 700;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* --- Session timer (per question) --- */
.tn600-q-timer {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #6b7280;
    margin-left: auto;
}
.tn600-q-timer.slow  { color: #f59e0b; }
.tn600-q-timer.fast  { color: #ef4444; }

/* --- Share result --- */
.tn600-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #1d4ed8;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    margin-top: 8px;
    transition: background .15s;
}
.tn600-share-btn:hover { background: #1e40af; }
.tn600-share-btn.copied { background: #16a34a; }

/* --- Badge điểm liệt --- */
.tn600-badge-diemliet {
    display: inline-block;
    background: #fef2f2;
    color: #dc2626;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 20px;
    border: 1px solid #fca5a5;
    margin-left: 6px;
    vertical-align: middle;
}


/* ==========================================
   ✨ v1.2 — Exam History & PDF Export
   ========================================== */

/* --- Nút PDF (xanh lá) --- */
.tn600-pdf-btn {
    background: #059669 !important;
    border-color: #059669 !important;
}
.tn600-pdf-btn:hover { background: #047857 !important; }

/* --- Khối nút sau khi thi xong --- */
.tn600-exam-result-btns {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0 4px;
    padding: 0 2px;
}

/* --- Overlay modal lịch sử thi --- */
.tn600-hist-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.tn600-hist-overlay.visible {
    display: flex;
}

/* Dialog bên trong */
.tn600-hist-dialog {
    background: #fff;
    border-radius: 14px;
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
    overflow: hidden;
}

/* Header */
.tn600-hist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #e5e7eb;
    background: #f8fafc;
}
.tn600-hist-title {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}
.tn600-hist-close {
    background: none;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    color: #6b7280;
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.tn600-hist-close:hover { background: #fee2e2; border-color: #fca5a5; color: #dc2626; }

/* Body (scrollable) */
.tn600-hist-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

/* Footer */
.tn600-hist-footer {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

/* Empty state */
.tn600-hist-empty {
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    padding: 32px 0;
    line-height: 1.8;
}

/* Summary cards */
.tn600-hist-summary {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.tn600-hist-sumcard {
    flex: 1 1 80px;
    text-align: center;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 8px;
}
.tn600-hist-sumcard b {
    display: block;
    font-size: 22px;
    font-weight: 700;
    color: #1d4ed8;
    line-height: 1.1;
}
.tn600-hist-sumcard small { font-size: 11px; color: #6b7280; }
.tn600-hist-sumcard.pass b { color: #16a34a; }
.tn600-hist-sumcard.fail b { color: #dc2626; }
.tn600-hist-sumcard.avg  b { color: #7c3aed; }

/* Danh sách bài thi */
.tn600-hist-list { display: flex; flex-direction: column; gap: 8px; }

.tn600-hist-item {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 14px;
    border-left-width: 4px;
}
.tn600-hist-item.pass { border-left-color: #16a34a; }
.tn600-hist-item.fail { border-left-color: #dc2626; }

.tn600-hist-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 5px;
}
.tn600-hist-num { font-size: 11px; color: #9ca3af; min-width: 26px; }
.tn600-hist-cat { font-weight: 700; color: #1d4ed8; font-size: 13px; flex: 1; }
.tn600-hist-score { font-weight: 600; color: #374151; font-size: 13px; }
.tn600-hist-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
    white-space: nowrap;
}
.tn600-hist-badge.pass { background: #dcfce7; color: #16a34a; }
.tn600-hist-badge.fail { background: #fee2e2; color: #dc2626; }

.tn600-hist-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 11px;
    color: #6b7280;
}