.lms-course-list { max-width: 100%; margin: 20px 0; }
.lms-course-item { background: #fff; border: 1px solid #ddd; border-radius: 8px; margin-bottom: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); overflow: hidden; }
.lms-course-header { padding: 20px; border-bottom: 1px solid #eee; }
.lms-course-title { margin: 0 0 10px 0; font-size: 1.5em; }
.lms-course-title a { text-decoration: none; color: #0073aa; }
.lms-course-title a:hover { color: #005a87; }
.lms-course-excerpt { color: #666; margin-bottom: 15px; line-height: 1.5; }
.lms-course-categories { margin-bottom: 15px; }
.lms-category-tag { background: #f0f0f0; padding: 4px 8px; border-radius: 4px; font-size: 0.9em; margin-right: 8px; color: #555; }
.lms-course-meta { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; font-size: 0.9em; color: #666; }
.lms-admin-badge { background: #dc3232; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.8em; }
.lms-toggle-lessons { background: #0073aa; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 0.9em; display: flex; align-items: center; gap: 8px; }
.lms-toggle-lessons:hover { background: #005a87; }
.lms-lessons-list { background: #f9f9f9; padding: 0; }
.lms-lessons-list-items { list-style: none; margin: 0; padding: 0; }
.lms-lesson-item { border-bottom: 1px solid #eee; padding: 0; }
.lms-lesson-item:last-child { border-bottom: none; }
.lms-lesson-link { display: flex; align-items: center; padding: 15px 20px; text-decoration: none; color: #333; transition: background-color 0.3s; }
.lms-lesson-item.has-access .lms-lesson-link:hover { background: #f0f0f0; }
.lms-lesson-item.no-access .lms-lesson-link { opacity: 0.6; cursor: not-allowed; }
.lms-lesson-title { flex: 1; font-weight: 500; }
.lms-lesson-excerpt { flex: 2; font-size: 0.9em; color: #666; margin-left: 15px; }
.lms-study-time { background: #4CAF50; color: white; padding: 4px 8px; border-radius: 4px; font-size: 0.8em; margin-left: 15px; }
.lms-lock-icon { margin-left: 15px; font-size: 1.2em; }
.lms-no-lessons { padding: 20px; text-align: center; color: #666; font-style: italic; }
.lms-notice { padding: 15px; border-radius: 5px; margin: 20px 0; }
.lms-notice-error { background: #ffeaea; border: 1px solid #dc3232; color: #dc3232; }
.lms-notice-info { background: #e8f4fd; border: 1px solid #0073aa; color: #0073aa; }
.lms-notice a { color: inherit; font-weight: bold; }
@media (max-width: 768px) {
    .lms-course-header { padding: 15px; }
    .lms-lesson-link { flex-direction: column; align-items: flex-start; gap: 8px; }
    .lms-lesson-excerpt, .lms-study-time, .lms-lock-icon { margin-left: 0; }
    .lms-lesson-navigation { margin-top: 50px; }
}
.lms-lesson-navigation { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; margin-bottom: 30px; overflow: hidden; }
.lms-course-info { background: linear-gradient(135deg, #0073aa 0%, #005a87 100%); color: white; padding: 20px; }
.lms-course-name { margin: 0 0 15px 0; font-size: 1.4em; }
.lms-course-name a { color: white; text-decoration: none; }
.lms-course-name a:hover { text-decoration: underline; }
.lms-course-progress { display: flex; align-items: center; gap: 15px; }
.lms-progress-text { font-weight: 500; min-width: 80px; }
.lms-progress-bar { flex: 1; height: 8px; background: rgba(255,255,255,0.3); border-radius: 4px; overflow: hidden; }
.lms-progress-fill { height: 100%; background: #4CAF50; border-radius: 4px; transition: width 0.3s ease; }
.lms-lessons-navigation { padding: 20px; }
.lms-lessons-navigation h3 { margin: 0 0 15px 0; color: #333; font-size: 1.2em; border-bottom: 2px solid #0073aa; padding-bottom: 8px; }
.lms-lessons-nav-list { list-style: none; margin: 0 0 20px 0; padding: 0; max-height: 300px; overflow-y: auto; border: 1px solid #eee; border-radius: 5px; }
.lms-lesson-nav-item { border-bottom: 1px solid #eee; }
.lms-lesson-nav-item:last-child { border-bottom: none; }
.lms-lesson-nav-item.current { background: #e3f2fd; }
.lms-lesson-nav-link { display: flex; align-items: center; padding: 12px 15px; text-decoration: none; color: #333; transition: background-color 0.3s;flex-wrap: wrap; }
.lms-lesson-nav-item.accessible .lms-lesson-nav-link:hover { background: #f5f5f5; }
.lms-lesson-nav-item.locked .lms-lesson-nav-link { opacity: 0.6; cursor: not-allowed; }
.lms-lesson-number { background: #0073aa; color: white; width: 25px; height: 25px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9em; font-weight: bold; margin-right: 12px; flex-shrink: 0; }
.lms-lesson-nav-item.current .lms-lesson-number { background: #4CAF50; }
.lms-lesson-nav-title { flex: 1; font-weight: 500; }
.lms-current-indicator { background: #4CAF50; color: white; padding: 2px 8px; border-radius: 12px; font-size: 0.8em; font-weight: bold; margin-left: 10px; }
.lms-nav-study-time { background: #ff9800; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.75em; margin-left: 8px; }
.lms-lock-indicator { margin-left: 10px; font-size: 1.1em; }
.lms-lesson-nav-actions { border-top: 1px solid #eee; padding-top: 15px; }
.lms-nav-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.lms-nav-btn { background: #0073aa; color: white; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-size: 0.9em; transition: background-color 0.3s; flex: 1; text-align: center; min-width: 200px; }
.lms-nav-btn:hover { background: #005a87; color: white; }
.lms-prev-btn { background: #666; }
.lms-prev-btn:hover { background: #555; }
@media (max-width: 768px) {
    .lms-lesson-navigation { margin-bottom: 20px; }
    .lms-course-info { padding: 15px; }
    .lms-course-name { font-size: 1.2em; }
    .lms-course-progress { flex-direction: column; align-items: stretch; gap: 10px; }
    .lms-lessons-navigation { padding: 15px; }
    .lms-lessons-nav-list { max-height: 250px; }
    .lms-lesson-nav-link { padding: 10px; flex-wrap: wrap; gap: 8px; }
    .lms-lesson-number { width: 20px; height: 20px; font-size: 0.8em; }
    .lms-nav-buttons { flex-direction: column; }
    .lms-nav-btn { min-width: auto; }
}
/* assets/frontend.css */
.lms-lesson-completion-status,
.lms-nav-completion-status {
font-size: 0.85em;
padding: 2px 6px;
border-radius: 3px;
margin-left: 8px;
font-weight: bold;
}

.lms-lesson-completion-status.completed,
.lms-nav-completion-status.completed {
background-color: #d4edda; /* Màu xanh lá cây nhạt */
color: #155724;
border: 1px solid #c3e6cb;
}

.lms-lesson-completion-status.not-completed,
.lms-nav-completion-status.not-completed {
background-color: #fff3cd; /* Màu vàng nhạt */
color: #856404;
border: 1px solid #ffeeba;
}

.lms-lesson-completion-status.unknown, /* Nếu bạn quyết định dùng trạng thái này */
.lms-nav-completion-status.unknown {
background-color: #e2e3e5; /* Màu xám nhạt */
color: #383d41;
border: 1px solid #d6d8db;
}