/*!
 * Theme newnet-v2 — Đào tạo (module Learning). Prefix: lr-
 * Views: vendor/learning/web/course/detail, vendor/learning/web/lesson/detail. Thẻ khóa học dùng .nn-post-card (theme.css).
 * Nội dung bài viết trong khóa/bài học định dạng bằng .nn-prose + .ar-content (nạp kèm css/article.css).
 * Chỉ dùng token var(--nn-*), không viết mã màu cứng.
 */

/* ==========================================================================
   1. Khung chung
   ========================================================================== */
/* Cột minmax(0, 1fr): không để dòng code dài (min-content của <pre>) kéo rộng cột → tràn ngang trên mobile */
.lr-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nn-space-12); min-width: 0; align-content: start; }

.lr-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--nn-radius-xl); background: var(--nn-surface-2); box-shadow: var(--nn-shadow-lg); }

.lr-block__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--nn-space-2) var(--nn-space-4); margin-bottom: var(--nn-space-5); }
.lr-block__title { font-size: var(--nn-text-2xl); margin: 0 0 var(--nn-space-5); }
.lr-block__head .lr-block__title { margin: 0; }

/* ==========================================================================
   2. Giáo trình (chi tiết khóa học)
   ========================================================================== */
.lr-curriculum { list-style: none; margin: 0; padding: 0; border: 1px solid var(--nn-border); border-radius: var(--nn-radius-xl); background: #fff; overflow: hidden; }
.lr-curriculum li + li { border-top: 1px solid var(--nn-border); }
.lr-curriculum__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--nn-space-4); padding: var(--nn-space-4) var(--nn-space-5); color: var(--nn-text); transition: background var(--nn-duration-fast) var(--nn-ease); }
.lr-curriculum__item:hover { background: var(--nn-surface); }
.lr-curriculum__item:focus-visible { outline: none; box-shadow: inset var(--nn-ring); }
.lr-curriculum__no { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--nn-radius-md); background: var(--nn-primary-soft); color: var(--nn-primary); font-size: var(--nn-text-sm); font-weight: var(--nn-weight-bold); font-variant-numeric: tabular-nums; }
.lr-curriculum__item:hover .lr-curriculum__no { background: var(--nn-gradient); color: #fff; }
.lr-curriculum__body { display: grid; gap: var(--nn-space-1); }
.lr-curriculum__name { color: var(--nn-ink); font-weight: var(--nn-weight-semibold); line-height: var(--nn-leading-snug); }
.lr-curriculum__item:hover .lr-curriculum__name { color: var(--nn-primary); }
.lr-curriculum__desc { font-size: var(--nn-text-sm); color: var(--nn-muted); }
.lr-curriculum__type { display: inline-flex; align-items: center; gap: var(--nn-space-1-5); font-size: var(--nn-text-xs); color: var(--nn-muted); white-space: nowrap; }
.lr-curriculum__type .nn-icon { font-size: var(--nn-icon-sm); color: var(--nn-primary); }
@media (max-width: 575.98px) {
    .lr-curriculum__item { gap: var(--nn-space-3); padding: var(--nn-space-3-5) var(--nn-space-4); }
    .lr-curriculum__no { width: 34px; height: 34px; }
    .lr-curriculum__type span { display: none; }
}

/* ==========================================================================
   3. Hộp đăng ký học (cột bên chi tiết khóa học)
   ========================================================================== */
.lr-enroll { box-shadow: var(--nn-shadow-sm); }
.lr-enroll__price { display: grid; gap: var(--nn-space-1); padding-bottom: var(--nn-space-5); margin-bottom: var(--nn-space-5); border-bottom: 1px solid var(--nn-border); }
.lr-enroll__price strong { font-size: var(--nn-text-3xl); font-weight: var(--nn-weight-extrabold); line-height: var(--nn-leading-tight); color: var(--nn-ink); }
.lr-enroll__price strong.is-free { color: var(--nn-success); }
.lr-enroll .nn-contact-info strong { opacity: 1; color: var(--nn-muted); }
.lr-enroll .nn-contact-info span:not(.nn-icon-tile) { color: var(--nn-ink); }
.lr-enroll__actions { display: grid; gap: var(--nn-space-3); }

.lr-benefits { list-style: none; margin: var(--nn-space-6) 0 0; padding: var(--nn-space-5) 0 0; border-top: 1px solid var(--nn-border); display: grid; gap: var(--nn-space-3); font-size: var(--nn-text-sm); color: var(--nn-text); }
.lr-benefits li { display: flex; align-items: flex-start; gap: var(--nn-space-2-5); }
.lr-benefits .nn-icon { flex: none; margin-top: 2px; font-size: var(--nn-icon-sm); color: var(--nn-primary); }

/* ==========================================================================
   4. Trang bài học: video, điều hướng, danh sách bài
   ========================================================================== */
.lr-player { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nn-space-10); }
@media (min-width: 1100px) { .lr-player { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--nn-space-12); align-items: start; } }

.lr-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--nn-radius-xl); overflow: hidden; background: var(--nn-deep-950); box-shadow: var(--nn-shadow-lg); }
.lr-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lr-video-link { margin: 0; }

.lr-pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--nn-space-4); padding-top: var(--nn-space-8); border-top: 1px solid var(--nn-border); }
.lr-pager__link { display: grid; gap: var(--nn-space-1-5); align-content: start; padding: var(--nn-space-4) var(--nn-space-5); border: 1px solid var(--nn-border); border-radius: var(--nn-radius-lg); background: #fff; color: var(--nn-text); transition: border-color var(--nn-duration-fast) var(--nn-ease), box-shadow var(--nn-duration-fast) var(--nn-ease); }
.lr-pager__link:hover { border-color: var(--nn-primary); box-shadow: var(--nn-shadow-sm); }
.lr-pager__link:focus-visible { outline: none; box-shadow: var(--nn-ring); }
.lr-pager__link--next { text-align: right; }
.lr-pager__label { display: inline-flex; align-items: center; gap: var(--nn-space-1-5); font-size: var(--nn-text-xs); font-weight: var(--nn-weight-semibold); color: var(--nn-primary); }
.lr-pager__link--next .lr-pager__label { justify-content: flex-end; }
.lr-pager__name { color: var(--nn-ink); font-weight: var(--nn-weight-semibold); line-height: var(--nn-leading-snug); }
@media (max-width: 575.98px) {
    .lr-pager { grid-template-columns: 1fr; }
    .lr-pager > span[aria-hidden] { display: none; }
    .lr-pager__link--next { text-align: left; }
    .lr-pager__link--next .lr-pager__label { justify-content: flex-start; }
}

.lr-outline { border: 1px solid var(--nn-border); border-radius: var(--nn-radius-xl); background: #fff; overflow: hidden; }
@media (min-width: 1100px) { .lr-outline { position: sticky; top: calc(var(--nn-header-h) + var(--nn-space-6)); } }
.lr-outline__head { display: grid; gap: var(--nn-space-1); padding: var(--nn-space-5); background: var(--nn-surface); border-bottom: 1px solid var(--nn-border); }
.lr-outline__title { font-size: var(--nn-text-base); line-height: var(--nn-leading-snug); margin: 0; }
.lr-outline__title a { color: var(--nn-ink); }
.lr-outline__title a:hover { color: var(--nn-primary); }
.lr-outline__progress { display: grid; gap: var(--nn-space-2); margin-top: var(--nn-space-3); font-size: var(--nn-text-xs); color: var(--nn-muted); }

.lr-outline__list { position: relative; list-style: none; margin: 0; padding: var(--nn-space-2); max-height: 420px; overflow-y: auto; scrollbar-width: thin; }
@media (min-width: 1100px) { .lr-outline__list { max-height: calc(100vh - var(--nn-header-h) - 220px); } }
.lr-outline__list a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: start; gap: var(--nn-space-2-5); padding: var(--nn-space-2-5) var(--nn-space-3); border-radius: var(--nn-radius-md); color: var(--nn-text); font-size: var(--nn-text-sm); line-height: var(--nn-leading-snug); }
.lr-outline__list a:hover { background: var(--nn-surface); color: var(--nn-ink); }
.lr-outline__list a:focus-visible { outline: none; box-shadow: var(--nn-ring); }
.lr-outline__list a.is-active { background: var(--nn-primary-soft); color: var(--nn-primary); font-weight: var(--nn-weight-semibold); }
.lr-outline__no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: var(--nn-radius-round); background: var(--nn-surface-2); font-size: var(--nn-text-2xs); font-weight: var(--nn-weight-bold); color: var(--nn-muted); font-variant-numeric: tabular-nums; }
.lr-outline__list a.is-active .lr-outline__no { background: var(--nn-gradient); color: #fff; }
.lr-outline__icon { color: var(--nn-muted); }
.lr-outline__icon .nn-icon { font-size: var(--nn-icon-xs); }