body {
   background-color: #f8f9fa;
 }

 .mcq-card {
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   padding: 20px;
 }

 .option {
   padding: 12px 15px;
   border: 1px solid #ccc;
   /* ash border */
   border-radius: 8px;
   margin-bottom: 10px;
   cursor: pointer;
   transition: all 0.3s;
   user-select: none;
   flex: 1;
 }

 .option:hover {
   background-color: #f1f1f1;
 }

 .option.selected {
   border: 2px solid #28a745;
   /* green border */
   background-color: #d4edda;
   /* light green background */
 }

 .option-row {
   display: flex;
   gap: 20px;
   flex-wrap: wrap;
 }

 @media (max-width: 768px) {
   .option-row {
     flex-direction: column;
     gap: 10px;
   }
 }


 /* start exam */

 .result-card {
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   padding: 20px;
   background-color: #fff;
 }

 .trophy {
   font-size: 60px;
   color: #ffc107;
 }

 .highlight {
   color: #28a745;
   font-weight: 600;
 }

 .alert-orange {
   background-color: #ffe6e0;
   color: #ff6600;
 }

 .stat-card {
   border-radius: 12px;
   background-color: #f8f9fa;
   padding: 15px;
   text-align: center;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }

 .stat-card h5 {
   margin-bottom: 0;
   font-size: 14px;
   color: #6c757d;
 }

 .stat-card h3 {
   font-size: 24px;
   font-weight: 600;
 }


 .container-custom {
   background: #fff;
   max-width: 720px;
   width: 100%;
   border-radius: 12px;
   padding: 30px 40px;
   box-shadow: rgba(50, 50, 93, .1) 0 2px 5px -1px, rgba(0, 0, 0, .07) 0 1px 1px -1px;
   text-align: center;
 }

 .trophy {
   font-size: 70px;
   margin-bottom: 12px;
 }

 .title {
   font-size: 26px;
   font-weight: 700;
   color: #0b8043;
   margin-bottom: 20px;
 }

 .date {
   font-size: 14px;
   color: #444;
   margin-bottom: 5px;
 }

 .quiz-title {
   font-weight: 700;
   font-size: 17px;
   margin-bottom: 25px;
 }

 .results {
   background: #f9fafe;
   padding: 18px 20px;
   border-radius: 8px;
   margin-bottom: 30px;
 }

 .item {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
 }

 .icon {
   margin-right: 8px;
   font-size: 17px;
 }

 .label {
   flex-grow: 1;
   color: #444;
 }

 .value {
   font-weight: 700;
 }

 .value.blue {
   color: #236bdc;
 }

 .value.red {
   color: #f15c41;
 }

 .value.green {
   color: #26a653;
 }

 .btn.review svg {
   margin-left: 8px;
   stroke: white;
   stroke-width: 3;
 }