@import url('[https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap](https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap)');

/* ==============================================
   1. ADMIN CSS (TRANG CÀI ĐẶT)
============================================== */
.ai-admin-wrap { font-family: 'Inter', sans-serif; background: #f0f4f8; padding: 25px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); max-width: 1100px; border-radius: 8px; }
.ai-admin-wrap input, .ai-admin-wrap textarea, .ai-admin-wrap select, .ai-admin-wrap button { font-family: 'Inter', sans-serif; }
.ai-admin-header { display:flex; align-items:center; gap: 15px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 2px dashed #cbd5e1; }
.ai-admin-header h1 { margin: 0; color: #1e3a8a; font-weight: 800; font-size: 26px; }
.ai-admin-section { background: #fff; border: 1px solid #e2e8f0; padding: 25px; margin-bottom: 25px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); }
.ai-admin-section h2 { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid #f1f5f9; color: #0f172a; font-size: 20px; }

#module-list { margin: 0; padding: 0; }
.module-item { background: #f8fafc; border: 1px solid #cbd5e1; padding: 20px; margin-bottom: 15px; cursor: move; border-radius: 8px; position: relative; transition: all 0.2s;}
.module-item:hover { box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-color: #94a3b8;}
.module-item .drag-handle { position: absolute; right: 15px; top: 20px; font-size: 20px; color: #94a3b8; cursor: move; }
.module-item label { font-weight: 700; display: block; margin-bottom: 6px; color: #334155; font-size: 14px;}
.module-item input[type="text"], .module-item textarea { width: 100%; margin-bottom: 15px; border-radius:6px; border:1px solid #cbd5e1; padding: 10px;}
.module-item input[type="text"]:focus, .module-item textarea:focus { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb;}
.module-item textarea.kb-area { height: 70px; font-size: 13px; border-left: 4px solid #f59e0b; background: #fffbeb;}
.btn-remove-module { color: #ef4444; cursor: pointer; text-decoration: underline; font-size: 13px; font-weight: bold;}


/* ==============================================
   2. FRONTEND CSS - GIAO DIỆN HỌC VIÊN CHUNG
============================================== */
.ai-app-wrapper { font-family: 'Inter', sans-serif; max-width: 1200px; margin: 0 auto; box-sizing: border-box;}
.ai-app-wrapper * { box-sizing: border-box; }
.ai-app-wrapper input, .ai-app-wrapper textarea, .ai-app-wrapper select, .ai-app-wrapper button { font-family: 'Inter', sans-serif; }

/* Các biến CSS (Sử dụng cho Theme Mặc Định) */
.ai-theme-default {
    --ai-bg-main: transparent;
    --ai-text-main: #1e293b;
    --ai-text-muted: #64748b;
    --ai-card-bg: #fff;
    --ai-border: #e2e8f0;
    --ai-input-bg: #f8fafc;
    --ai-primary: #2563eb;
    --ai-primary-hover: #1d4ed8;
    --ai-secondary: #f1f5f9;
    --ai-header-bg: linear-gradient(135deg, #0f172a 0%, #1e3a8a 100%);
    --ai-header-text: #fff;
    --ai-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.ai-app-wrapper { color: var(--ai-text-main); background: var(--ai-bg-main); padding: 15px; border-radius: 16px;}
.ai-app-header { text-align: center; margin-bottom: 40px; padding: 30px; background: var(--ai-header-bg); border-radius: 16px; color: var(--ai-header-text);}
.ai-app-header h2 { color: var(--ai-header-text); font-weight: 800; font-size: 32px; margin: 0 0 10px 0; text-transform: uppercase; letter-spacing: 1px;}
.ai-app-header p { color: #93c5fd; font-size: 16px; margin: 0;}

.ai-card { background: var(--ai-card-bg); border-radius: 16px; box-shadow: var(--ai-shadow); padding: 40px; margin-bottom: 30px; border: 1px solid var(--ai-border); position: relative; }
.ai-subtitle { color: var(--ai-text-muted); font-size: 15px; margin-bottom: 25px; }

/* Main Navigation */
.ai-main-nav { display: flex; gap: 15px; margin-bottom: 30px; justify-content: center; flex-wrap: wrap; }
.ai-nav-btn { background: var(--ai-secondary); border: 2px solid transparent; padding: 14px 30px; border-radius: 50px; font-weight: 700; color: var(--ai-text-muted); cursor: pointer; transition: all 0.3s; font-size: 15px;}
.ai-nav-btn:hover { filter: brightness(0.95); }
.ai-nav-btn.active { background: rgba(37, 99, 235, 0.1); color: var(--ai-primary); border-color: rgba(37, 99, 235, 0.3); box-shadow: 0 4px 15px rgba(37,99,235,0.15); }

/* Form Styles */
.ai-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.ai-form-group.full { grid-column: 1 / -1; }
.ai-form-group label { display: block; font-weight: 700; margin-bottom: 10px; color: var(--ai-text-main); font-size: 15px; }
.ai-form-group input, .ai-form-group textarea, .ai-form-group select { width: 100%; padding: 16px; border: 2px solid var(--ai-border); border-radius: 10px; font-size: 15px; transition: all 0.3s; background: var(--ai-input-bg); color: var(--ai-text-main);}
.ai-form-group input:focus, .ai-form-group textarea:focus { border-color: var(--ai-primary); outline: none; box-shadow: 0 0 0 4px rgba(37,99,235,0.1); }
.ai-help-text { font-size: 13px; color: var(--ai-text-muted); margin-top: 8px; display: block; font-style: italic;}

.ai-auto-save-status { position: absolute; top: 40px; right: 40px; font-size: 14px; color: #10b981; font-weight: bold; opacity: 0; transition: opacity 0.3s; background: #d1fae5; padding: 5px 15px; border-radius: 20px;}

/* Profile Manager */
.ai-profile-manager { background: var(--ai-input-bg); border: 2px dashed var(--ai-border); padding: 20px; border-radius: 12px; margin-bottom: 25px; display: flex; align-items: flex-end; gap: 15px; flex-wrap: wrap;}
.ai-profile-manager .group { flex: 1; min-width: 250px; }
.ai-profile-manager label { font-weight: 800; font-size: 15px; color: var(--ai-text-main); display: block; margin-bottom: 8px; }
.ai-profile-manager select { width: 100%; padding: 14px; border-radius: 8px; border: 2px solid var(--ai-border); font-family: 'Inter', sans-serif; font-size: 15px; background: var(--ai-card-bg); color: var(--ai-text-main); cursor: pointer;}
.btn-profile { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; padding: 14px 20px; border-radius: 8px; font-size: 15px; cursor: pointer; border: none; color: #fff; }
.btn-profile.save { background: #10b981; }
.btn-profile.delete { background: #ef4444; }

/* CMO BANNER */
.ai-cmo-banner { grid-column: 1 / -1; background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%); padding: 30px; border-radius: 12px; text-align: center; margin: 15px 0; color: #fff;}
.ai-cmo-banner p { margin-top: 0; font-size: 16px; margin-bottom: 20px; line-height: 1.6; }
.btn-cmo-magic { background: #f59e0b; color: #fff; border: none; padding: 16px 35px; border-radius: 50px; font-weight: 800; font-size: 16px; cursor: pointer; transition: all 0.3s; display: inline-flex; align-items: center; gap: 10px; text-transform: uppercase;}
.btn-cmo-magic:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(245,158,11,0.6); }

.btn-primary { background: linear-gradient(135deg, #10b981, #059669); color: #fff; padding: 20px 30px; border: none; border-radius: 12px; font-size: 18px; font-weight: 800; cursor: pointer; width: 100%; transition: all 0.3s; margin-top: 25px; text-transform: uppercase; box-shadow: 0 10px 20px rgba(16,185,129,0.3);}
.btn-primary:hover { transform: translateY(-3px); }

/* Workspace Tabs */
#ai-workspace { display: none; }
.ai-workspace-box { background: var(--ai-input-bg); border: 2px solid var(--ai-primary); }
.ai-ws-title { color: var(--ai-primary); }
.ai-tabs-container { border: 1px solid var(--ai-border); border-radius: 12px; background: var(--ai-card-bg); overflow: hidden; }
.ai-tabs-header { display: flex; overflow-x: auto; background: var(--ai-input-bg); border-bottom: 1px solid var(--ai-border); padding: 10px; gap: 5px;}
.ai-tab-btn { background: transparent; border: none; padding: 15px 25px; font-weight: 700; color: var(--ai-text-muted); cursor: pointer; border-radius: 8px; white-space: nowrap; font-size: 14px;}
.ai-tab-btn:hover { background: var(--ai-border); color: var(--ai-text-main); }
.ai-tab-btn.active { color: #fff; background: var(--ai-primary); box-shadow: 0 4px 10px rgba(59,130,246,0.3); }

.ai-tab-content { display: none; padding: 30px; }
.ai-tab-content.active { display: block; animation: fadeIn 0.4s; }

.btn-generate { background: var(--ai-primary); color: #fff; border: none; padding: 15px 30px; border-radius: 8px; font-weight: 800; cursor: pointer; font-size: 16px; margin-bottom: 20px; display: inline-flex; align-items: center; gap: 10px;}

/* Trình soạn thảo */
.ai-result-box { background: var(--ai-card-bg); border: 1px solid var(--ai-border); border-radius: 12px; padding: 30px; margin-top: 20px; display: none;}
.ai-editor-hint { background: rgba(37, 99, 235, 0.1); color: var(--ai-primary); padding: 15px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; margin-bottom: 20px; border-left: 5px solid var(--ai-primary); }
.ai-markdown { line-height: 1.8; color: var(--ai-text-main); font-size: 16px; border: 2px dashed var(--ai-border); padding: 25px; border-radius: 10px; min-height: 200px;}
.ai-markdown:focus { outline: none; border-color: var(--ai-primary); }

/* Magic Toolbar */
.ai-magic-toolbar { background: var(--ai-input-bg); border: 1px solid var(--ai-border); border-radius: 8px; padding: 12px 20px; display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; align-items: center;}
.ai-magic-title { font-size: 14px; font-weight: 800; color: #8b5cf6; margin-right: 10px;}
.btn-magic { background: var(--ai-card-bg); border: 1px solid var(--ai-border); color: var(--ai-text-main); padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 700; cursor: pointer;}
.btn-magic:hover { border-color: var(--ai-primary); color: var(--ai-primary); }

.action-bar { display: flex; gap: 12px; margin-bottom: 20px; justify-content: flex-end; border-bottom: 1px solid var(--ai-border); padding-bottom: 20px; flex-wrap: wrap;}
.btn-action { background: transparent; border: 2px solid var(--ai-border); padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--ai-text-main); }
.btn-action:hover { background: var(--ai-input-bg); }

/* Archive List & Search */
#ai-archive-view { display: none; }
.ai-archive-header-wrapper { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--ai-border); padding-bottom: 15px; margin-bottom: 20px; flex-wrap: wrap; gap: 15px; }
.ai-archive-header-wrapper h3 { margin: 0; font-size: 22px; color: var(--ai-text-main);}
.ai-search-input { padding: 12px 15px 12px 35px; border: 2px solid var(--ai-border); border-radius: 8px; font-size: 14px; min-width: 280px; background: var(--ai-input-bg); color: var(--ai-text-main);}

.archive-card { background: var(--ai-card-bg); border: 1px solid var(--ai-border); padding: 25px; border-radius: 12px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center;}
.archive-info h4 { margin: 0 0 8px 0; color: var(--ai-text-main); font-size: 18px;}
.archive-info p { margin: 0; color: var(--ai-text-muted); font-size: 14px; }
.btn-view-archive { background: rgba(37,99,235,0.1); border: none; padding: 12px 25px; border-radius: 8px; cursor: pointer; font-weight: 700; color: var(--ai-primary);}

.ai-notice { border-left: 4px solid; padding: 15px; margin-bottom: 25px; border-radius: 6px; font-size: 15px;}
.ai-notice.warning { background: rgba(245,158,11,0.1); border-color: #f59e0b; color: #b45309; }
.ai-notice.success { background: rgba(16,185,129,0.1); border-color: #10b981; color: #047857; }

.ai-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 30px; padding-top: 25px; border-top: 1px solid var(--ai-border); flex-wrap: wrap; }
.ai-page-btn { background: var(--ai-card-bg); border: 1px solid var(--ai-border); color: var(--ai-text-main); padding: 10px 18px; border-radius: 8px; font-weight: 600; cursor: pointer;}
.ai-page-btn.active { background: var(--ai-primary); color: #fff; border-color: var(--ai-primary); pointer-events: none; }

.ai-modal-box { background: var(--ai-card-bg); width:90%; max-width:900px; max-height:85vh; border-radius:16px; display:flex; flex-direction:column; box-shadow: 0 25px 50px rgba(0,0,0,0.5); border: 1px solid var(--ai-border); }
.ai-modal-header { padding:20px 30px; border-bottom:1px solid var(--ai-border); display:flex; justify-content:space-between; align-items:center; background: var(--ai-input-bg); color: var(--ai-text-main);}
.ai-modal-close { background:none; border:none; font-size:24px; cursor:pointer; color: var(--ai-text-muted); }
.ai-modal-footer { padding:20px 30px; border-top:1px solid var(--ai-border); display:flex; gap:12px; justify-content:flex-end; background: var(--ai-input-bg);}

.loader-text { display: none; color: var(--ai-primary); font-weight: bold; margin: 15px 0; padding: 15px; background: rgba(37,99,235,0.1); border-radius: 8px; text-align: center;}


/* ==============================================
   3. THEME 2: DARK MODE (CYBERPUNK / MODERN)
============================================== */
.ai-theme-dark {
    --ai-bg-main: transparent;
    --ai-text-main: #f8fafc;
    --ai-text-muted: #94a3b8;
    --ai-card-bg: #1e293b;
    --ai-border: #334155;
    --ai-input-bg: #0f172a;
    --ai-primary: #3b82f6;
    --ai-primary-hover: #60a5fa;
    --ai-secondary: #334155;
    --ai-header-bg: linear-gradient(135deg, #020617 0%, #1e293b 100%);
    --ai-header-text: #38bdf8;
    --ai-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.ai-theme-dark .ai-cmo-banner { background: linear-gradient(135deg, #312e81 0%, #1e1b4b 100%); border: 1px solid #4338ca; }
.ai-theme-dark .ai-auto-save-status { background: rgba(16, 185, 129, 0.2); border: 1px solid #10b981; }
.ai-theme-dark .btn-magic { background: #1e293b; color: #cbd5e1; }
.ai-theme-dark .btn-magic:hover { background: #334155; }
.ai-theme-dark .btn-action { color: #f1f5f9; }
.ai-theme-dark .ai-notice.warning { color: #fcd34d; }
.ai-theme-dark .ai-notice.success { color: #6ee7b7; }
.ai-theme-dark .ai-editor-hint { color: #93c5fd; }


/* ==============================================
   4. THEME 3: MINIMAL (TỐI GIẢN / SANG TRỌNG)
============================================== */
.ai-theme-minimal {
    --ai-bg-main: transparent;
    --ai-text-main: #333333;
    --ai-text-muted: #777777;
    --ai-card-bg: #ffffff;
    --ai-border: #eeeeee;
    --ai-input-bg: #fafafa;
    --ai-primary: #111111;
    --ai-primary-hover: #444444;
    --ai-secondary: #f5f5f5;
    --ai-header-bg: #ffffff;
    --ai-header-text: #111111;
    --ai-shadow: 0 4px 15px rgba(0,0,0,0.02);
}
.ai-theme-minimal .ai-app-header { border: 1px solid var(--ai-border); }
.ai-theme-minimal .ai-cmo-banner { background: #fafafa; border: 1px solid #ddd; color: #333; box-shadow: none; }
.ai-theme-minimal .btn-cmo-magic { background: #111; border-radius: 4px;}
.ai-theme-minimal .btn-primary, .ai-theme-minimal .btn-generate { background: #111; border-radius: 4px; box-shadow: none;}
.ai-theme-minimal .ai-card, .ai-theme-minimal .ai-form-group input, .ai-theme-minimal .ai-form-group textarea, .ai-theme-minimal .ai-form-group select { border-radius: 4px; }
.ai-theme-minimal .ai-nav-btn { border-radius: 4px; }
.ai-theme-minimal .ai-workspace-box { border-color: #111; }
.ai-theme-minimal .ai-editor-hint { background: #fafafa; border-left: 5px solid #111; color: #333; }


/* ==============================================
   5. BẢO MẬT: THÔNG BÁO TỪ CHỐI TRUY CẬP
============================================== */
.ai-auth-alert { background: #f8fafc; border: 1px solid #e2e8f0; padding: 50px 20px; text-align: center; border-radius: 16px; margin: 30px auto; max-width: 600px; color: #1e293b;}
.ai-auth-alert svg { color: #3b82f6; margin-bottom: 15px; }
.ai-auth-alert h3 { font-size: 22px; margin-top: 0; font-weight: 800; color: #0f172a; }
.ai-auth-alert p { color: #64748b; font-size: 16px; margin-bottom: 25px;}
.ai-login-btn { display: inline-block; background: #2563eb; color: #fff; padding: 12px 30px; border-radius: 8px; text-decoration: none; font-weight: bold; transition: all 0.2s;}
.ai-login-btn:hover { background: #1d4ed8; color: #fff; }

.ai-auth-alert.error { border-color: #fca5a5; background: #fef2f2; }
.ai-auth-alert.error svg { color: #ef4444; }
.ai-auth-alert.error h3 { color: #991b1b; }
.ai-auth-alert.error p { color: #7f1d1d; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
#ai-toast { position: fixed; bottom: 30px; right: 30px; padding: 18px 30px; border-radius: 10px; color: #fff; font-weight: bold; font-size: 15px; display: none; z-index: 9999; box-shadow: 0 15px 30px rgba(0,0,0,0.2); }
#ai-toast.success { background: #10b981; }
#ai-toast.error { background: #ef4444; }

/* TELEPROMPTER MODAL (KHÔNG ĐỔI THEO THEME) */
#ai-teleprompter { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 999999; flex-direction: column; }
.tp-header { background: #111; padding: 15px 20px; display: flex; justify-content: center; gap: 15px; border-bottom: 1px solid #333; flex-wrap: wrap;}
.tp-btn { font-family: 'Inter', sans-serif; background: #333; color: #fff; border: 1px solid #555; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 14px;}
.tp-btn.primary { background: #10b981; border-color: #10b981; }
.tp-btn.danger { background: #ef4444; border-color: #ef4444; margin-left: auto; }
#tp-container { flex: 1; overflow: hidden; position: relative; padding: 0 10%; cursor: ns-resize;}
#tp-text { position: absolute; top: 100%; left: 10%; width: 80%; color: #fff; font-size: 55px; text-align: center; line-height: 1.5; white-space: pre-wrap; font-family: 'Inter', sans-serif; padding-bottom: 100vh; font-weight: bold;}
.tp-focus-line { position: absolute; top: 50%; left: 0; width: 100%; height: 4px; background: rgba(239, 68, 68, 0.5); pointer-events: none; z-index: 2;}
.tp-gradient { position: absolute; top: 0; left: 0; width: 100%; height: 200px; background: linear-gradient(to bottom, #000, transparent); pointer-events: none; z-index: 1;}