.wpca-form {
max-width: 400px;
margin: 40px auto;
padding: 30px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
position: relative;
} .wpca-header {
text-align: center;
margin-bottom: 30px;
}
.wpca-header img {
max-width: 100px;
height: auto;
margin-bottom: 10px;
}
.wpca-header h2 {
font-size: 28px;
color: #333;
margin: 0;
} .wpca-form p {
margin-bottom: 20px;
}
.wpca-form label {
display: block;
font-size: 14px;
font-weight: 600;
color: #555;
margin-bottom: 8px;
}
.wpca-form input[type="text"],
.wpca-form input[type="email"],
.wpca-form input[type="password"],
.wpca-form textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
box-sizing: border-box;
}
.wpca-form textarea {
resize: vertical;
min-height: 100px;
}
.wpca-form input[type="text"]:focus,
.wpca-form input[type="email"]:focus,
.wpca-form input[type="password"]:focus,
.wpca-form textarea:focus {
border-color: #007bff;
box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
outline: none;
} .wpca-form input[type="submit"] {
width: 100%;
padding: 12px;
background: #007bff;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background 0.3s ease;
}
.wpca-form input[type="submit"]:hover {
background: #0056b3;
}
.wpca-form input[type="submit"]:disabled {
background: #cccccc;
cursor: not-allowed;
} .wpca-form a {
color: #007bff;
text-decoration: none;
font-size: 14px;
display: inline-block;
margin-top: 10px;
}
.wpca-form a:hover {
text-decoration: underline;
} .wpca-message {
margin-top: 15px;
text-align: center;
font-size: 14px;
color: #d32f2f;
}
.wpca-message.success {
color: #28a745;
} .wpca-logged-in-message {
text-align: center;
font-size: 16px;
color: #333;
font-weight: 600;
margin: 20px 0;
} .wpca-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 24px;
height: 24px;
border: 3px solid #007bff;
border-top: 3px solid transparent;
border-radius: 50%;
animation: spin 1s linear infinite;
} @keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
} @media (max-width: 480px) {
.wpca-form {
margin: 20px;
padding: 20px;
}
.wpca-header img {
max-width: 80px;
}
.wpca-header h2 {
font-size: 24px;
}
.wpca-logged-in-message {
font-size: 14px;
}
}.quiz-box {
width: 100%; background: linear-gradient(90deg, rgba(55,239,201,1) 35%, rgba(0,212,255,1) 100%);
border-radius: 7px;
padding: 5px;
margin-bottom: 5px;
margin: 10px 0; font-family: 'Times New Roman', sans-serif;
} .question-number {
display: inline-block;
background-color: #007bff; color: #fff; padding: 5px 8px;
border-radius: 6px;
margin-right: 8px;
font-weight: bold;
font-size: 16px;
}
.question-section {
background: linear-gradient(180deg, rgba(229,211,233,1) 20%, rgba(244,238,238,1) 50%);
padding: 10px;
border-radius: 8px;
margin-bottom: 8px;
font-size: 1em;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.question-section h5 {
color: #1e56ed;
font-family: Lora, sans-serif;
margin-top: 0;
} .question-section:hover {
background-color: #f1f1f1;
}
.option {
background: rgba(255, 255, 255, 0.9);
margin: 10px 0;
padding: 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.option:hover {
background: white;
transform: translateX(5px);
}
.option input[type="radio"] {
margin-right: 10px;
}
.option label {
cursor: pointer;
font-size: 1em;
}
.check-btn {
background: #4CAF50;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
transition: background 0.3s;
}
.check-btn:hover {
background: #45a049;
}
.explanation {
border: 1px solid #0000FF;
background: #f5fbaf;
padding: 10px;
border-radius: 10px;
margin-top: 10px;
}
.explanation h5 {
color: #333;
margin-top: 0;
}
.correct {
background: #dff0d8 !important;
border-left: 5px solid #3c763d;
}
.incorrect {
background: #f2dede !important;
border-left: 5px solid #a94442;
}
.quiz-score {
background: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
padding: 10px;
border-radius: 10px;
margin: 10px 0;
text-align: center;
}
.quiz-score h3 {
margin-top: 0;
color: #333;
}
.submit-quiz, .retry-quiz {
background: #4CAF50;
color: white;
border: none;
padding: 12px 25px;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
margin: 10px 0;
transition: background 0.3s;
}
.retry-quiz {
background: #2196F3;
}
.submit-quiz:hover {
background: #45a049;
}
.retry-quiz:hover {
background: #1976D2;
} .quiz-box[data-type="true-false"] {
background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
border: 1px solid #d2b48c; border-radius: 10px;
padding: 10px;
margin-bottom: 10px;
}
.option-tf {
background: rgba(255, 255, 255, 0.9);
margin: 10px 0;
padding: 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: space-between;
align-items: center;
}
.option-tf-label:hover {
background: white;
transform: translateX(5px);
}
.option-tf-label {
cursor: pointer;
display: block;
width: 100%;
}
.tf-buttons {
display: flex;
align-items: center;
margin-top: 0px;
margin-left: 20px; }
.tf-buttons input[type="radio"] {
display: inline-block;
margin-right: 5px;
vertical-align: middle;
}
.tf-buttons label {
cursor: pointer;
font-size: 1em;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
user-select: none; display: inline-flex;
align-items: center;
vertical-align: middle;
} .tf-buttons .true-label {
background-color: #dff0d8; border-color: #3c763d; color: #3c763d; } .tf-buttons .false-label {
background-color: #f2dede; border-color: #a94442; color: #a94442; } .tf-buttons label:hover {
opacity: 0.8;
} .tf-buttons input[type="radio"]:checked + label {
background-color: #4CAF50; border-color: #4CAF50;
color: white;
}
.option-tf.correct {
border-left: 5px solid #3c763d;
}
.option-tf.incorrect {
border-left: 5px solid #a94442;
} .quiz-box[data-type="short-answer"] {
background: rgb(241,207,199);
border: 1px solid #e6a8b7; border-radius: 10px;
padding: 5px;
margin-bottom: 5px;
}
.quiz-box[data-type="short-answer"] .answer-section::before {
content: "Đáp án: "; font-weight: bold;
margin-right: 5px;
}
.quiz-box[data-type="short-answer"] .short-answer-input {
border: 1px solid red; border-radius: 5px;
padding: 5px;
color: red; font-weight: bold;
width: 100px; text-align: center;
} .quiz-student-info {
margin-bottom: 15px;
color: blue;
font-weight: bold;
}
.student-name-input {
padding: 8px;
border: 2px solid #FF5733;
border-radius: 6px;
font-size: 16px;
width: 100%; max-width: 400px; box-sizing: border-box; }
.quiz-timer {
font-size: 18px;
font-weight: bold;
color: #e74c3c; margin-bottom: 15px;
background-color: #f8d7da; border: 1px solid #f5c6cb; padding: 10px;
border-radius: 5px;
display: inline-block; }
.quiz-section-title {
margin-top: 20px;
margin-bottom: 10px;
padding-bottom: 5px;
color: #213cd1;
border-bottom: 2px solid #ffc300;
}
.student-name-display {
margin: 10px 0;
color: blue;
font-weight: bold;
}
.quiz-group {
border: 1px solid #e0e0e0;
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
border-radius: 5px;
}
.quiz-group-title {
font-weight: bold;
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px dashed #ccc;
font-size: 1.1em;
color: #00f;
} .quiz-group .quiz-box-wrapper:first-child .quiz-box {  } .quiz-parts-container {
margin-bottom: 20px; }
.quiz-part {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.quiz-part:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.quiz-section-title {
color: #005a9c; margin-bottom: 15px;
font-size: 1.2em;
} .quiz-user-results table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
.quiz-user-results th, .quiz-user-results td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
.quiz-user-results th {
background-color: #f4f4f4;
font-weight: bold;
}
.quiz-user-results td img {
max-width: 200px;
height: auto;
}
.quiz-user-results .correct {
color: green;
font-weight: bold;
}
.quiz-user-results .incorrect {
color: red;
font-weight: bold;
}
.quiz-user-results .button {
display: inline-block;
padding: 8px 16px;
background-color: #0073aa;
color: white;
text-decoration: none;
border-radius: 4px;
margin-top: 20px;
}
.quiz-user-results .button:hover {
background-color: #005177;
}
@media (max-width: 768px) {
.quiz-box { width: 100%; margin: 10px 0; } .question-section { font-size: 1em; padding: 10px; }
.option, .option-tf { padding: 10px; }
}