/* RESET BẢN LỀ VÀ CÀI ĐẶT FONT */
:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --secondary: #ec4899;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;
    --surface: rgba(255, 255, 255, 0.88);
    --surface-solid: #ffffff;
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 14px 35px rgba(79, 70, 229, 0.12);
    --radius-lg: 18px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
    background: radial-gradient(circle at 8% 0%, #eef2ff 0, transparent 28rem), linear-gradient(135deg, var(--gray-50) 0%, #faf9f7 100%);
    color: var(--gray-700);
    min-height: 100vh;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 3px solid rgba(99, 102, 241, 0.35);
    outline-offset: 3px;
}

/* ================= NAVBAR (THANH ĐIỀU HƯỚNG) ================= */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    padding: 12px clamp(18px, 4vw, 42px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(15, 23, 42, 0.025);
    position: sticky;
    top: 0;
    z-index: 100;
}

.nav-left { display: flex; align-items: center; gap: 10px; }
.nav-right { display: flex; align-items: center; gap: 15px; }

.logo {
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.1);
}

.nav-btn {
    background: none;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    color: var(--gray-600);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    display: inline-block;
}
.nav-btn i { margin-right: 5px; }
.nav-btn:hover { 
    background-color: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}
.nav-btn.active { 
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.icon-btn {
    width: 38px; height: 38px; border-radius: 10px; background: transparent; border: none; font-size: 16px; color: var(--gray-600); cursor: pointer; transition: .2s ease;
}
.icon-btn:hover { color: var(--primary); background: #eef2ff; }
.user-avatar {
    width: 36px; height: 36px; background: linear-gradient(135deg, #e0e7ff, #fce7f3); border: 1px solid #e0e7ff; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
}
.user-avatar:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(99, 102, 241, .22); }
.user-avatar img { object-fit: cover; }

/* ================= BỐ CỤC CHÍNH (LAYOUT 2 CỘT) ================= */
#main-container {
    padding: clamp(24px, 4vw, 44px) clamp(18px, 4vw, 40px);
    max-width: 1280px;
    margin: 0 auto;
}

.page-view { display: none; }
.page-view.active-view { display: block; }

.dashboard-layout {
    display: flex;
    gap: clamp(22px, 3vw, 36px);
    align-items: flex-start;
}

/* ================= CỘT TRÁI (SIDEBAR) ================= */
.sidebar-left {
    width: 330px;
    flex-shrink: 0;
}

.card {
    background: var(--surface);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--radius-lg);
    padding: 22px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: #c7d2fe;
}

.card-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.card-header h3 { font-size: 20px; font-weight: 700; color: var(--gray-900); }

.stats-row {
    display: flex; justify-content: space-around; margin-bottom: 20px; text-align: center;
}
.divider-vertical { width: 1px; background-color: #e0e0e0; }
.stat-value { font-size: 24px; font-weight: bold; margin-bottom: 5px; }
.stat-label { font-size: 12px; color: #777; }

/* Biểu đồ Dự báo SRS */
.chart-area { margin-bottom: 20px; padding-bottom: 20px; }
.chart-title { font-size: 12px; color: var(--gray-500); margin-bottom: 12px; letter-spacing: .02em; }
.bars { display: flex; justify-content: space-between; align-items: flex-end; height: 80px; }
.bar-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; height: 100%; width: 100%; }
.bar-count { font-size: 10px; color: #777; min-height: 12px; }
.bar { width: 72%; max-width: 28px; background-color: #e2e8f0; border-radius: 6px 6px 2px 2px; transition: height .45s cubic-bezier(.2,.8,.2,1); }
.bar.active { background: linear-gradient(180deg, #fb923c, #f97316); box-shadow: 0 4px 8px rgba(249,115,22,.22); }
.day-label { font-size: 10px; color: #777; border-top: 2px solid #555; padding-top: 4px; width: 90%; text-align: center; }
.bar-col.today .day-label { color: #ff6b00; border-top-color: #ff6b00; }
.bar-col.today .bar-count { color: #ff6b00; font-weight: bold; }

/* Nút bấm (Buttons) */
.btn {
    padding: 10px 15px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-size: 14px;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
    min-height: 40px;
}
.w-100 { width: 100%; }
.mb-10 { margin-bottom: 10px; }
.mt-10 { margin-top: 10px; }

.btn-black {
    background: linear-gradient(135deg, var(--gray-900) 0%, var(--gray-700) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(17, 24, 39, 0.2);
}
.btn:active, .ctrl-btn:active, .btn-srs:active, .quiz-option-btn:active { transform: translateY(1px) scale(.985); }

.btn-black:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(17, 24, 39, 0.3);
}

.btn-outline {
    background-color: #fff;
    border: 2px solid var(--gray-300);
    color: var(--gray-700);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.btn-yellow {
    background: linear-gradient(135deg, var(--warning) 0%, #fbbf24 100%);
    color: #111;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.btn-yellow:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3);
}

.btn-group { display: flex; gap: 10px; }
.btn-group .btn { flex: 1; }

/* ================= CỘT PHẢI (MAIN CONTENT) ================= */
.content-right {
    flex-grow: 1;
}

/* Tabs */
.content-tabs {
    display: flex; gap: 10px; background-color: #ebebeb; padding: 5px; border-radius: 12px; margin-bottom: 30px;
}
.tab-btn {
    flex: 1; padding: 10px; border: none; border-radius: 8px; font-weight: bold; background: none; color: #555; cursor: pointer;
}
.tab-btn.active { background-color: #fff; color: #111; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }

/* Headers */
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.section-header h3 { font-size: 24px; font-weight: 700; color: var(--gray-900); }
.see-all { color: var(--primary); text-decoration: none; font-size: 14px; font-weight: 600; }
.see-all:hover { color: var(--primary-dark); text-decoration: underline; }

/* Empty States */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--gray-500);
}

/* Chú giải ngắn cho các hành động chính trên trang chủ. */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 30; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: 260px; padding: 9px 11px; border-radius: 9px; color: #fff; background: #1f2937; box-shadow: 0 8px 18px rgba(15,23,42,.18); font-size: 12px; font-weight: 500; line-height: 1.4; opacity: 0; pointer-events: none; transform: translate(-50%, 4px); transition: opacity .18s ease, transform .18s ease; }
[data-tooltip]::before { content: ''; position: absolute; z-index: 31; bottom: calc(100% + 5px); left: 50%; border: 5px solid transparent; border-top-color: #1f2937; opacity: 0; transform: translateX(-50%); transition: opacity .18s ease; }
[data-tooltip]:hover::after, [data-tooltip]:hover::before, [data-tooltip]:focus-visible::after, [data-tooltip]:focus-visible::before { opacity: 1; transform: translate(-50%, 0); }
[data-tooltip]:hover::before, [data-tooltip]:focus-visible::before { transform: translateX(-50%); }

.empty-state i {
    font-size: 64px;
    color: var(--gray-300);
    margin-bottom: 15px;
    display: block;
}

.empty-state h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 20px;
}

/* Lưới Thẻ từ vựng (Card Grid) */
.card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 40px;
}

.study-set-card {
    background: var(--surface);
    border: 1px solid rgba(226, 232, 240, .9);
    border-radius: var(--radius-lg);
    padding: 22px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    min-height: 196px;
    display: flex;
    flex-direction: column;
}

.study-set-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.study-set-card:hover {
    border-color: var(--primary);
    box-shadow: 0 12px 30px rgba(99, 102, 241, 0.2);
    transform: translateY(-4px);
}

.study-set-card:hover::before {
    opacity: 1;
}

.set-title { font-size: 18px; font-weight: 700; margin-bottom: 15px; color: var(--gray-900); }
.set-title, .set-lang { position: relative; z-index: 1; }
.set-lang, .set-time { font-size: 13px; color: var(--gray-500); margin-bottom: 8px; display: flex; align-items: center; gap: 7px; line-height: 1.45; }

/* Thanh tiến độ */
.progress-container { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.progress-bar-bg { flex-grow: 1; height: 7px; background-color: #e9edf5; border-radius: 999px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #8b5cf6); border-radius: 999px; transition: width .55s cubic-bezier(.2,.8,.2,1); }
.progress-text { font-size: 12px; font-weight: bold; color: #111; }

.set-footer {
    display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--gray-500);
}
.author-tag i { margin-right: 5px; }


/* ================= TRANG TẠO BỘ THẺ ================= */
.create-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
}
.create-actions { display: flex; align-items: center; gap: 15px; }

/* Nút AI Magic */
.ai-magic-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: #fff;
    padding: 18px 20px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 30px;
    text-align: left;
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.ai-magic-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.4);
}

.ai-magic-btn i {
    margin-right: 10px;
}

/* Ô nhập liệu sáng màu */
.input-light {
    width: 100%; background-color: #f8fafc; border: 1px solid #e2e8f0; padding: 14px 15px; border-radius: 10px;
    font-size: 15px; outline: none; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.input-light:focus { background-color: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.12); }
.title-input { font-weight: bold; font-size: 16px; }
.desc-input { min-height: 80px; resize: vertical; }

.set-meta-info { margin-bottom: 40px; }

/* Card nhập từ vựng (1, 2, 3...) */
.vocab-input-card {
    background-color: var(--surface-solid); border: 1px solid #e8edf5; border-radius: 14px; padding: 22px; margin-bottom: 16px;
    box-shadow: var(--shadow-sm); display: flex; gap: 20px; position: relative; transition: transform .2s ease, box-shadow .2s ease;
}
.vocab-input-card:focus-within { border-color: #c7d2fe; box-shadow: var(--shadow-md); }
.card-number { font-weight: bold; font-size: 18px; color: #111; width: 20px; }
.card-fields { flex-grow: 1; }

/* Lưới input chia 2 cột */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
.field-group label { font-size: 11px; color: #777; text-transform: uppercase; font-weight: bold; margin-bottom: 5px; display: block; }
.field-input {
    width: 100%; background: none; border: none; border-bottom: 2px solid #e7eaf0; padding: 9px 0;
    font-size: 15px; outline: none; transition: border-color .2s ease;
}
.field-input:focus { border-bottom-color: #111; }

.btn-delete-card { background: none; border: none; color: #aaa; cursor: pointer; font-size: 16px; transition: 0.2s; }
.btn-delete-card:hover { color: #ff5252; }

.add-card-wrapper { text-align: center; margin: 40px 0; }
.btn-add-card {
    background-color: #fff; border: 1px solid #d0d0d0; padding: 12px 30px; border-radius: 20px;
    font-weight: bold; cursor: pointer; transition: 0.2s;
}
.btn-add-card:hover { background-color: #f8f9fa; }

/* Công tắc (Toggle Switch) */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; transition: .4s; }
input:checked + .slider { background-color: #111; }
input:checked + .slider:before { transform: translateX(20px); }
.slider.round { border-radius: 20px; }
.slider.round:before { border-radius: 50%; }




/* ================= TRANG HỌC FLASHCARD 3D ================= */
.study-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.btn-back { background: #fff; border: 1px solid #ddd; padding: 8px 15px; border-radius: 8px; cursor: pointer; text-decoration: none; color: #333; font-weight: bold; }

/* Không gian 3D chứa thẻ */
.flashcard-container {
    perspective: 1000px; /* Tạo chiều sâu 3D */
    width: 100%;
    max-width: 700px;
    height: min(440px, 58vh);
    margin: 0 auto 30px auto;
}

/* Tấm thẻ thực tế */
.flashcard {
    width: 100%; height: 100%;
    position: relative;
    transition: transform .55s cubic-bezier(.4,.05,.2,1);
    transform-style: preserve-3d; /* Giữ nguyên không gian 3D khi lật */
    cursor: pointer;
}

/* Lớp này sẽ được JS thêm vào khi lật thẻ */
.flashcard.is-flipped { transform: rotateX(180deg); } /* Lật theo trục ngang (lên/xuống) */

/* Mặt trước và mặt sau */
.card-face {
    position: absolute;
    width: 100%; height: 100%;
    backface-visibility: hidden; /* Giấu mặt sau khi thẻ đang úp */
    background: radial-gradient(circle at top right, #f5f3ff, transparent 35%), #fff;
    border: 1px solid #e6e9f2;
    border-radius: 24px;
    box-shadow: 0 18px 42px rgba(30,41,59,.10);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 30px; text-align: center;
}

/* Xoay mặt sau lật úp sẵn */
.card-back { transform: rotateX(180deg); }

/* Chữ trong thẻ */
.fc-term { font-size: 40px; font-weight: bold; color: #111; margin-bottom: 10px; }
.fc-pron { font-size: 16px; color: #777; }

.fc-def { font-size: 32px; font-weight: bold; color: #111; margin-bottom: 15px; }

.fc-syn { 
    font-size: 16px; 
    color: #555; 
    margin-bottom: 15px; 
    text-decoration: underline; 
    text-decoration-style: dashed; /* Tạo nét đứt */
    text-underline-offset: 6px;    /* Đẩy đường gạch cách xa chữ một chút */
}

.fc-ex { 
    font-size: 18px; 
    color: #555; 
    font-style: italic; 
}
/* Khu vực nút bấm điều khiển */
.study-controls { display: flex; justify-content: center; align-items: center; gap: 20px; margin-bottom: 40px; }
.ctrl-btn {
    background: #fff;
    border: 2px solid var(--gray-300);
    width: 60px;
    height: 60px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--gray-600);
    font-weight: 600;
}

.ctrl-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

.btn-fail { border-color: #fee2e2; color: var(--danger); background: #fef2f2; }
.btn-fail:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

.btn-pass { border-color: #dcfce7; color: var(--success); background: #f0fdf4; }
.btn-pass:hover { background: var(--success); color: #fff; border-color: var(--success); }

.card-counter { font-size: 14px; font-weight: bold; color: #555; min-width: 80px; text-align: center; }

/* Nút phát âm */
.btn-audio { position: absolute; bottom: 20px; right: 20px; background: var(--gray-900); color: white; border: none; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; font-size: 16px; transition: transform .2s ease, background .2s ease; }
.btn-audio:hover { background: var(--primary); transform: translateY(-2px); }

/* Danh sách từ vựng bên dưới */
.word-list-item { background: rgba(255,255,255,.86); padding: 18px 20px; border-radius: 14px; border: 1px solid #e8edf5; border-left: 4px solid #fbbc05; display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; transition: transform .2s ease, box-shadow .2s ease; }
.word-list-item:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.word-list-item.learned { border-left-color: #4caf50; opacity: 0.7; }
.word-list-item.reviewing { border-left-color: #f59e0b; }


/* ================= MODAL NHẬP DỮ LIỆU ================= */
.modal-overlay { position: fixed; inset: 0; padding: 20px; background: rgba(15,23,42,.46); backdrop-filter: blur(5px); display: flex; justify-content: center; align-items: center; z-index: 1000; animation: modalFade .2s ease; }
.modal-content { background: #fff; width: min(100%, 700px); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 18px; padding: 26px; box-shadow: 0 24px 65px rgba(15,23,42,.24); animation: modalRise .25s cubic-bezier(.2,.8,.2,1); }
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.modal-header h3 { margin: 0; font-size: 24px; }
.close-btn { background: none; border: none; font-size: 20px; cursor: pointer; color: #555; }
#import-textarea { width: 100%; height: 220px; padding: 15px; border: 2px solid #333; border-radius: 12px; font-family: monospace; font-size: 14px; resize: vertical; margin-bottom: 20px; outline: none; }
.import-options { display: flex; justify-content: space-between; margin-bottom: 30px; }
.option-group label { font-weight: bold; font-size: 14px; display: block; margin-bottom: 12px; color: #111; }
.option-group div { margin-bottom: 8px; font-size: 14px; color: #333; display: flex; align-items: center; gap: 8px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 15px; }

/* Hướng dẫn sử dụng */
.guide-modal-content { max-width: 620px; }.guide-eyebrow { margin-bottom: 2px; color: var(--primary); font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.guide-intro { margin: 8px 0 22px; color: var(--gray-600); }.guide-steps { display: grid; gap: 12px; }.guide-step { display: flex; align-items: flex-start; gap: 14px; padding: 14px; border: 1px solid #e8edf5; border-radius: 14px; background: #fafbff; }.guide-step h4 { color: var(--gray-900); font-size: 15px; }.guide-step p { margin-top: 3px; color: var(--gray-600); font-size: 13px; line-height: 1.5; }.guide-icon { display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; border-radius: 11px; }.guide-icon-purple { color: #6d28d9; background: #ede9fe; }.guide-icon-blue { color: #2563eb; background: #dbeafe; }.guide-icon-orange { color: #c2410c; background: #ffedd5; }.guide-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }.guide-footer a { text-decoration: none; }



/* ================= TRANG LẶP LẠI NGẮT QUÃNG (SRS) ================= */
.srs-controls { display: flex; flex-direction: column; align-items: center; margin-bottom: 40px; }
.btn-group-srs { display: flex; gap: 15px; }

.btn-srs {
    width: 80px; height: 60px; border-radius: 12px; border: 2px solid;
    background: #fff; cursor: pointer; font-weight: bold; font-size: 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: 0.2s;
}
.btn-srs span { font-size: 10px; font-weight: normal; margin-top: 2px; }

.btn-srs-0 { border-color: #ffcdd2; color: #f44336; } /* Quên - Đỏ */
.btn-srs-0:hover { background: #ffebee; }
.btn-srs-3 { border-color: #ffe0b2; color: #ff9800; } /* Khó - Cam */
.btn-srs-3:hover { background: #fff3e0; }
.btn-srs-4 { border-color: #c8e6c9; color: #4caf50; } /* Tốt - Xanh lá */
.btn-srs-4:hover { background: #e8f5e9; }
.btn-srs-5 { border-color: #bbdefb; color: #2196f3; } /* Dễ - Xanh dương */
.btn-srs-5:hover { background: #e3f2fd; }
.btn-srs:disabled { cursor: wait; opacity: .62; }.btn-srs.is-processing { color: #fff; background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 5px rgba(99,102,241,.14); transform: translateY(-3px) scale(1.04); animation: srsButtonPulse .7s ease-in-out infinite alternate; }.srs-feedback { min-height: 22px; margin: -25px auto 8px; color: var(--gray-500); font-size: 13px; font-weight: 600; text-align: center; opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .2s ease; }.srs-feedback.is-visible { opacity: 1; transform: none; }.flashcard-container.srs-card-advance { animation: srsCardAdvance .4s cubic-bezier(.2,.8,.2,1); }
@keyframes srsButtonPulse { from { box-shadow: 0 0 0 3px rgba(99,102,241,.12); } to { box-shadow: 0 0 0 8px rgba(99,102,241,0); } } @keyframes srsCardAdvance { 0% { opacity: .4; transform: translateX(14px) scale(.985); } 100% { opacity: 1; transform: none; } }



/* ================= TRẮC NGHIỆM (QUIZ) ================= */
.quiz-option-btn {
    background: #fff; border: 2px solid #e5e7eb; padding: 20px; border-radius: 16px;
    font-size: 18px; font-weight: bold; color: #333; cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; outline: none;
}
.quiz-option-btn:hover { border-color: var(--primary); background: #f5f3ff; color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.quiz-option-btn.correct { background: #dcfce7; border-color: #4caf50; color: #15803d; pointer-events: none; }
.quiz-option-btn.wrong { background: #fee2e2; border-color: #ef4444; color: #b91c1c; pointer-events: none; }
.quiz-option-btn.disabled { pointer-events: none; opacity: 0.7; }

/* ================= QUIZ: LUYỆN TẬP TẬP TRUNG ================= */
body[data-page="quiz"] { background: radial-gradient(circle at 50% -20%, #e0e7ff 0, transparent 38rem), #f8fafc; }
.quiz-nav { background: rgba(255,255,255,.76); }.quiz-nav-progress { position: absolute; left: 50%; width: min(300px,34vw); transform: translateX(-50%); color: var(--gray-600); font-size: 13px; font-weight: 700; text-align: center; }.quiz-progress-track { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e5e7eb; }.quiz-progress-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--primary),#a855f7); transition: width .45s cubic-bezier(.2,.8,.2,1); }.quiz-score-mini { display: flex; gap: 14px; color: var(--gray-600); font-size: 14px; }.quiz-score-mini i { color: #f59e0b; }.quiz-score-mini span:last-child i { color: var(--primary); }
.quiz-main { max-width: 850px; min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; }.quiz-play-area { width: 100%; text-align: center; }.quiz-context { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }.quiz-mode-badge { display: inline-flex; gap: 7px; align-items: center; padding: 7px 11px; border: 1px solid #ddd6fe; border-radius: 99px; color: #5b21b6; background: #f5f3ff; font-size: 12px; font-weight: 700; }.quiz-keyboard-hint { color: var(--gray-500); font-size: 12px; } kbd { padding: 2px 5px; border: 1px solid #d8dee9; border-bottom-width: 2px; border-radius: 5px; background: #fff; color: var(--gray-600); font-family: inherit; font-size: 11px; }
.quiz-question-box { position: relative; padding: clamp(36px,7vw,58px) 64px; margin-bottom: 24px; overflow: hidden; border: 1px solid #e0e7ff; border-radius: 28px; background: radial-gradient(circle at 88% 14%,#ede9fe 0,transparent 26%),#fff; box-shadow: 0 18px 45px rgba(79,70,229,.1); }.quiz-question-label { margin-bottom: 14px; color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }.quiz-question-box h1 { max-width: 620px; margin: 0 auto; color: var(--gray-900); font-size: clamp(30px,5vw,46px); line-height: 1.18; overflow-wrap: anywhere; }.quiz-question-hint { min-height: 24px; margin-top: 14px; color: var(--gray-500); font-size: 15px; font-style: italic; }.quiz-audio-btn { position: absolute; right: 20px; bottom: 20px; display: none; width: 42px; height: 42px; border: 1px solid #ddd6fe; border-radius: 12px; color: var(--primary); background: #f5f3ff; cursor: pointer; }.quiz-audio-btn.visible { display: inline-grid; place-items: center; }.quiz-audio-btn:hover { transform: translateY(-2px); background: var(--primary); color: #fff; }
.quiz-options-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }.quiz-option-btn { position: relative; min-height: 82px; padding: 18px 52px 18px 20px; border-radius: 16px; text-align: left; line-height: 1.4; }.quiz-option-key { position: absolute; top: 50%; right: 17px; display: grid; width: 27px; height: 27px; place-items: center; transform: translateY(-50%); border: 1px solid #d8dee9; border-radius: 8px; color: var(--gray-500); background: #fff; font-size: 12px; font-weight: 800; }
.quiz-action-bar { display: none; flex-direction: column; gap: 16px; margin-top: 22px; padding: 18px; border: 1px solid #e2e8f0; border-radius: 18px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); text-align: left; }.quiz-feedback { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; color: var(--gray-700); background: #f8fafc; font-size: 14px; }.quiz-feedback.is-correct { border: 1px solid #bbf7d0; background: #f0fdf4; }.quiz-feedback.is-wrong { border: 1px solid #fecaca; background: #fef2f2; }.quiz-feedback i { margin-top: 2px; font-size: 18px; }.quiz-feedback.is-correct i { color: var(--success); }.quiz-feedback.is-wrong i { color: var(--danger); }.quiz-feedback strong { color: var(--gray-900); }.quiz-action-buttons { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }.quiz-review-fail { color: #dc2626; border-color: #fecaca; }.quiz-review-pass { color: #15803d; border-color: #bbf7d0; }.quiz-next-btn { padding-left: 22px; padding-right: 22px; }
.quiz-result-area { display: none; width: 100%; padding: clamp(32px,6vw,56px); border: 1px solid #e0e7ff; border-radius: 28px; background: radial-gradient(circle at 80% 8%,#fce7f3 0,transparent 24%),#fff; box-shadow: 0 18px 45px rgba(79,70,229,.1); text-align: center; }.quiz-result-icon { display: grid; width: 68px; height: 68px; margin: 0 auto 16px; place-items: center; border-radius: 22px; background: #fffbeb; color: #f59e0b; font-size: 31px; }.quiz-result-eyebrow { color: var(--primary); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }.quiz-result-area h1 { color: var(--gray-900); font-size: 34px; }.quiz-score-ring { display: flex; flex-direction: column; justify-content: center; width: 132px; height: 132px; margin: 24px auto 17px; border: 11px solid #e0e7ff; border-top-color: var(--primary); border-right-color: #a855f7; border-radius: 50%; }.quiz-score-ring span { color: var(--gray-900); font-size: 28px; font-weight: 800; }.quiz-score-ring small { color: var(--gray-500); font-size: 12px; }.quiz-result-summary { color: var(--gray-600); }.quiz-result-summary strong { color: var(--success); }.quiz-result-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 28px 0; }.quiz-result-stats div { display: grid; gap: 4px; padding: 14px 10px; border-radius: 14px; background: #f8fafc; color: var(--gray-500); font-size: 12px; }.quiz-result-stats i { color: var(--primary); }.quiz-result-stats div:nth-child(2) i { color: var(--danger); }.quiz-result-stats div:nth-child(3) i { color: #f59e0b; }.quiz-result-stats strong { color: var(--gray-900); font-size: 19px; }.quiz-result-actions { display: flex; justify-content: center; gap: 10px; }

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalRise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}