/* =====================================================
   Sách Điện Tử — CSS Overrides & Custom Styles
   ===================================================== */

/* Sidebar scroll */
#sidebar {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #6366f1 #e0e7ff;
}

/* Page content images */
#page-content img {
  max-width: 100%;
  border-radius: 0.5rem;
  margin: 0.75rem 0;
}

/* YouTube embed */
.yt-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 0.75rem;
}
.yt-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* Quiz option buttons */
.quiz-option {
  transition: all 0.2s;
  cursor: pointer;
}
.quiz-option:hover { transform: translateX(4px); }
.quiz-option.correct { border-color: #10b981 !important; background: #ecfdf5 !important; }
.quiz-option.wrong   { border-color: #ef4444 !important; background: #fef2f2 !important; }
.quiz-option.disabled { pointer-events: none; }

/* Progress bar */
.progress-fill {
  transition: width 0.5s ease;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
}

/* Page nav card hover */
.page-nav-item {
  transition: all 0.15s;
}
.page-nav-item:hover { transform: translateX(3px); }
.page-nav-item.active {
  background: #e0e7ff;
  border-left: 3px solid #6366f1;
}

/* Chart.js canvas */
canvas { max-width: 100%; }

/* Table striped */
.table-row-even { background: #f8fafc; }

/* Toast */
#toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  transition: all 0.3s;
}

/* Fade in */
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Login card */
.login-gradient {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}