/* --- PHẦN CSS (GIAO DIỆN) --- */ :root { --primary-color: #4a90e2; --success-color: #2ecc71; --error-color: #e74c3c; --bg-color: #f4f7f6; --card-bg: #ffffff; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-color); margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; color: #333; } /* Container chính */ .app-container { background-color: var(--card-bg); width: 100%; max-width: 700px; border-radius: 15px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); overflow: hidden; padding: 30px; margin: 20px; position: relative; } /* Tiêu đề */ h1, h2 { text-align: center; color: #2c3e50; margin-top: 0; } /* Các màn hình (Screens) */ .screen { display: none; animation: fadeIn 0.4s ease-in-out; } .screen.active { display: block; } /* Màn hình Đăng nhập */ .input-group { margin-bottom: 20px; } .input-group label { display: block; margin-bottom: 8px; font-weight: 600; } .input-group input { width: 100%; padding: 12px; border: 2px solid #e0e0e0; border-radius: 8px; font-size: 16px; box-sizing: border-box; transition: border-color 0.3s; } .input-group input:focus { border-color: var(--primary-color); outline: none; } /* Nút bấm chung */ .btn { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background 0.3s, transform 0.1s; color: white; margin-bottom: 10px; } .btn:active { transform: scale(0.98); } .btn-primary { background-color: var(--primary-color); } .btn-success { background-color: var(--success-color); } .btn-warning { background-color: #f39c12; } .btn-danger { background-color: var(--error-color); } /* Màn hình Câu hỏi */ .info-bar { background: #ecf0f1; padding: 10px 15px; border-radius: 8px; margin-bottom: 20px; display: flex; justify-content: space-between; font-weight: 600; color: #555; font-size: 0.9em; } .question-box { font-size: 1.25em; font-weight: bold; margin-bottom: 25px; line-height: 1.5; color: #2c3e50; } .options-list { display: grid; gap: 12px; } .option-btn { background: #f8f9fa; border: 2px solid #e9ecef; padding: 15px; text-align: left; border-radius: 10px; cursor: pointer; font-size: 1em; color: #333; transition: all 0.2s; position: relative; } .option-btn:hover { background-color: #e2e6ea; border-color: #cbd3da; } /* Trạng thái Đúng/Sai */ .option-btn.correct { background-color: #d4edda !important; border-color: #28a745 !important; color: #155724; } .option-btn.correct::after { content: "✔"; position: absolute; right: 15px; font-weight: bold; } .option-btn.wrong { background-color: #f8d7da !important; border-color: #dc3545 !important; color: #721c24; } .option-btn.wrong::after { content: "✖"; position: absolute; right: 15px; font-weight: bold; } /* Màn hình Kết quả & Xem lại */ .score-circle { width: 120px; height: 120px; background: var(--primary-color); color: white; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; font-size: 2em; font-weight: bold; box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4); } .review-area { max-height: 300px; overflow-y: auto; margin: 20px 0; border: 1px solid #eee; padding: 10px; border-radius: 8px; display: none; } .review-item { border-bottom: 1px solid #eee; padding: 10px 0; font-size: 0.9em; } .review-q { font-weight: bold; margin-bottom: 5px; } .review-user-ans { display: block; } .txt-green { color: var(--success-color); font-weight: bold; } .txt-red { color: var(--error-color); text-decoration: line-through; } /* Hiệu ứng rung khi sai */ @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } .shake { animation: shake 0.3s; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }