/* ══════════════════════════════════════════════════════════════
   GIAO DIỆN TRANG CHI TIẾT — dùng chung cho:
     • trang bài học   (bai-hoc.html + 225 trang prerender)
     • trang khóa học  (/courses/<khóa>)
     • trang module    (/courses/<khóa>/<chương>)
   Trước đây khối này nằm nội tuyến trong bai-hoc.html nên trang khóa học
   không có giao diện. Tách ra file để 1 nguồn duy nhất + trình duyệt cache
   được (thay vì lặp ~30 KB trong từng trang bài học).
   ══════════════════════════════════════════════════════════════ */

    .lesson-detail-card {
      background: var(--container-bg);
      border: 1px solid var(--border-color);
      border-radius: 14px;
      padding: 18px 16px;
      box-shadow: var(--shadow-md);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      margin-bottom: 10px;
    }

    .lesson-meta-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 7px;
      margin-bottom: 9px;
    }

    .lesson-chapter-tag {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--accent-color);
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .lesson-main-title {
      font-family: var(--font-sans);
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--text-primary);
      line-height: 1.35;
      margin: 0 0 11px 0;
    }

    .lesson-video-box {
      width: 100%;
      border-radius: 10px;
      overflow: hidden;
      background: #000;
      position: relative;
      margin-bottom: 12px;
      border: 1px solid var(--border-color);
      aspect-ratio: 16 / 9;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(135deg, #1c1c1e 0%, #0c0c0e 100%);
      color: #fff;
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .lesson-play-icon {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      background: var(--accent-color);
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      margin-bottom: 12px;
      box-shadow: 0 4px 20px rgba(185, 28, 28, 0.4);
      transition: transform 0.2s ease;
    }

    .lesson-video-box:hover .lesson-play-icon {
      transform: scale(1.1);
    }

    .lesson-media-list {
      display: grid;
      gap: 10px;
      margin-bottom: 12px;
    }

    .lesson-inline-video-card {
      overflow: hidden;
      border: 1px solid var(--border-color);
      border-radius: 10px;
      background: #050505;
    }

    .lesson-inline-video {
      display: block;
      width: 100%;
      max-height: min(72vh, 720px);
      background: #000;
    }

    .lesson-video-caption {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      color: #e5e7eb;
      background: #111827;
      font-size: 0.75rem;
      line-height: 1.4;
    }

    .lesson-coming-soon-box {
      width: 100%;
      border-radius: 10px;
      margin-bottom: 12px;
      border: 1px solid rgba(217, 119, 6, 0.35);
      background: linear-gradient(135deg, rgba(255, 247, 237, 0.98), rgba(254, 243, 199, 0.82));
      color: #92400e;
      text-align: center;
      padding: 24px 20px;
      box-sizing: border-box;
    }

    [data-theme="dark"] .lesson-coming-soon-box {
      border-color: rgba(251, 191, 36, 0.34);
      background: linear-gradient(135deg, rgba(120, 53, 15, 0.28), rgba(69, 26, 3, 0.4));
      color: #fcd34d;
    }

    .lesson-coming-soon-icon {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      margin: 0 auto 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(217, 119, 6, 0.12);
      font-size: 1.45rem;
    }

    .lesson-coming-soon-title {
      font-family: var(--font-sans);
      font-weight: 800;
      font-size: 1rem;
      line-height: 1.4;
    }

    .lesson-coming-soon-desc {
      margin-top: 6px;
      font-size: 0.8rem;
      line-height: 1.55;
      opacity: 0.88;
    }

    .lesson-actions-group {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 12px;
    }

    .lesson-actions-group.is-share-only .btn-action-secondary {
      flex: 1;
    }

    .lesson-actions-group .btn-action-primary,
    .lesson-actions-group .btn-action-secondary {
      min-width: min(100%, 150px);
    }

    .btn-action-primary {
      flex: 1;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--accent-color);
      color: #fff;
      padding: 12px 16px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 0.85rem;
      text-decoration: none;
      transition: background 0.2s ease, transform 0.15s ease;
      box-shadow: 0 4px 14px rgba(185, 28, 28, 0.25);
    }

    .btn-action-primary:hover {
      background: var(--accent-hover);
      transform: translateY(-1px);
    }

    .btn-action-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: rgba(0, 0, 0, 0.05);
      color: var(--text-primary);
      padding: 12px 16px;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.85rem;
      border: 1px solid var(--border-color);
      cursor: pointer;
      font-family: inherit;
      transition: background 0.15s ease;
    }

    [data-theme="dark"] .btn-action-secondary {
      background: rgba(255, 255, 255, 0.08);
    }

    .lesson-section-block {
      border-top: 1px solid var(--border-color);
      padding-top: 12px;
      margin-top: 12px;
    }

    .lesson-section-heading {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-primary);
      margin: 0 0 8px 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .lesson-body-text {
      font-size: 0.82rem;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }

    .lesson-figures {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 12px 0 4px;
    }
    .lesson-figure {
      margin: 0;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      overflow: hidden;
      background: var(--container-bg);
    }
    .lesson-figure img {
      display: block;
      width: 100%;
      height: auto;
      background: #fff;
    }
    .lesson-figure figcaption {
      font-size: 0.72rem;
      color: var(--text-secondary);
      line-height: 1.5;
      padding: 8px 12px;
      text-align: center;
      border-top: 1px solid var(--border-color);
    }

    .lesson-video-toggle { margin-bottom: 12px; }
    .lvt-tabs {
      display: flex;
      gap: 4px;
      padding: 4px;
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
      margin-bottom: 10px;
    }
    [data-theme="dark"] .lvt-tabs { background: rgba(255, 255, 255, 0.07); }
    .lvt-tab {
      flex: 1;
      border: 0;
      background: transparent;
      color: var(--text-secondary);
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 700;
      padding: 8px 10px;
      border-radius: 7px;
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .lvt-tab.is-active { background: var(--accent-color); color: #fff; }
    .lvt-panel { display: none; }
    .lvt-panel.is-active { display: block; }

    .document-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 8px;
    }

    .lesson-resource-card {
      margin-top: 8px;
      padding: 14px;
      border: 1px solid rgba(185, 28, 28, 0.22);
      border-radius: 9px;
      background: linear-gradient(145deg, rgba(254, 242, 242, 0.92), rgba(255, 255, 255, 0.96));
    }

    [data-theme="dark"] .lesson-resource-card {
      background: linear-gradient(145deg, rgba(127, 29, 29, 0.2), rgba(24, 24, 27, 0.92));
      border-color: rgba(248, 113, 113, 0.25);
    }

    .resource-card-head {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 11px;
    }

    .resource-card-icon {
      width: 38px;
      height: 38px;
      flex: 0 0 38px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #fff;
      background: #16833b;
      font-size: 1.1rem;
    }

    .resource-card-copy strong,
    .resource-card-copy small {
      display: block;
    }

    .resource-card-copy strong {
      color: var(--text-primary);
      font-size: 0.84rem;
      line-height: 1.4;
    }

    .resource-card-copy small {
      margin-top: 3px;
      color: var(--text-secondary);
      font-size: 0.72rem;
      line-height: 1.45;
    }

    .resource-form-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }

    .resource-form-fields[hidden] {
      display: none !important;
    }

    /* Form tài liệu thích ứng theo trạng thái đăng nhập */
    .rf-member-note {
      grid-column: 1 / -1;
      margin: 0;
      font-size: 0.75rem;
      line-height: 1.5;
      color: var(--text-secondary);
    }
    .rf-identity { display: contents; }
    .rf-phone { grid-column: 1 / -1; }
    /* [hidden] phải thắng display của các rule trên, nếu không phần tử "ẩn" vẫn hiện */
    .rf-identity[hidden],
    .rf-phone[hidden],
    .resource-consent[hidden],
    .rf-member-note[hidden] {
      display: none !important;
    }

    .resource-input {
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
      border: 1px solid var(--border-color);
      border-radius: 7px;
      padding: 10px 11px;
      background: var(--container-bg);
      color: var(--text-primary);
      font: inherit;
      font-size: 0.8rem;
      outline: none;
    }

    .resource-input:focus {
      border-color: var(--accent-color);
      box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
    }

    .resource-input.input-error,
    .resource-consent.consent-error {
      border-color: #dc2626;
    }

    .resource-consent {
      grid-column: 1 / -1;
      display: flex;
      align-items: flex-start;
      gap: 7px;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 4px;
      color: var(--text-secondary);
      font-size: 0.7rem;
      line-height: 1.45;
    }

    .resource-consent input {
      margin-top: 2px;
      accent-color: var(--accent-color);
    }

    .resource-consent a {
      color: var(--accent-color);
      font-weight: 700;
    }

    .resource-submit {
      grid-column: 1 / -1;
      border: 0;
      border-radius: 7px;
      padding: 11px 14px;
      background: var(--accent-color);
      color: #fff;
      font: inherit;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
    }

    .resource-submit:disabled {
      opacity: 0.68;
      cursor: wait;
    }

    .resource-form-feedback {
      display: none;
      margin-top: 8px;
      font-size: 0.76rem;
      line-height: 1.5;
    }

    .resource-form-feedback.is-success,
    .resource-form-feedback.is-error {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px;
      border-radius: 7px;
    }

    .resource-form-feedback.is-success {
      color: #166534;
      background: #dcfce7;
    }

    .resource-form-feedback.is-error {
      color: #991b1b;
      background: #fee2e2;
    }

    .resource-form-feedback small {
      display: block;
      margin-top: 2px;
      opacity: 0.82;
    }

    .lesson-consult-toggle {
      width: 100%;
      border: 0;
      border-radius: 7px;
      padding: 11px 14px;
      background: var(--accent-color);
      color: #fff;
      font: inherit;
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
    }

    .lesson-model-consult-form {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border-color);
    }

    .lesson-model-consult-form[hidden] {
      display: none;
    }

    .model-consult-fields {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 7px;
    }

    .model-consult-fields textarea,
    .model-consult-fields select,
    .model-consult-consent,
    .model-consult-fields .resource-submit {
      grid-column: 1 / -1;
    }

    .model-consult-fields textarea {
      resize: vertical;
      min-height: 78px;
    }

    .model-consult-consent {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 4px;
      color: var(--text-secondary);
      font-size: 0.7rem;
      line-height: 1.45;
    }

    .model-consult-consent input {
      margin-top: 2px;
      accent-color: var(--accent-color);
    }

    .model-consult-consent a {
      color: var(--accent-color);
      font-weight: 700;
    }

    .model-consult-input.input-error,
    .model-consult-consent.consent-error {
      border-color: #dc2626;
    }

    .model-consult-feedback {
      display: none;
      margin-top: 8px;
      font-size: 0.76rem;
      line-height: 1.5;
    }

    .model-consult-feedback.is-success,
    .model-consult-feedback.is-error {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 10px;
      border-radius: 7px;
    }

    .model-consult-feedback.is-success {
      color: #166534;
      background: #dcfce7;
    }

    .model-consult-feedback.is-error {
      color: #991b1b;
      background: #fee2e2;
    }

    .model-consult-returning-state {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      padding: 11px 12px;
      border: 1px solid rgba(22, 101, 52, 0.14);
      border-radius: 7px;
      color: #166534;
      background: #dcfce7;
      font-size: 0.76rem;
      line-height: 1.45;
    }

    .model-consult-returning-state > i {
      margin-top: 2px;
      flex: 0 0 auto;
      font-size: 1rem;
    }

    .model-consult-returning-state strong,
    .model-consult-returning-state small {
      display: block;
    }

    .model-consult-returning-state small {
      margin-top: 2px;
      color: inherit;
      opacity: 0.82;
    }

    [data-theme="dark"] .model-consult-returning-state {
      border-color: rgba(74, 222, 128, 0.2);
      color: #bbf7d0;
      background: rgba(22, 101, 52, 0.24);
    }

    @media (max-width: 520px) {
      .resource-form-fields {
        grid-template-columns: 1fr;
      }

      .resource-consent,
      .resource-submit {
        grid-column: 1;
      }

      .model-consult-fields {
        grid-template-columns: 1fr;
      }

      .model-consult-fields textarea,
      .model-consult-fields select,
      .model-consult-consent,
      .model-consult-fields .resource-submit {
        grid-column: 1;
      }
    }

    .document-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.03);
      border: 1px solid var(--border-color);
      text-decoration: none;
      color: var(--text-primary);
      transition: background 0.15s ease;
    }

    [data-theme="dark"] .document-item {
      background: rgba(255, 255, 255, 0.04);
    }

    .document-item:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    .doc-left {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .doc-icon {
      font-size: 1.2rem;
      color: var(--accent-color);
    }

    .doc-name {
      font-size: 0.78rem;
      font-weight: 600;
    }

    .doc-download {
      font-size: 0.7rem;
      font-weight: 700;
      color: var(--blue-color);
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
    }

    /* Danh sách điều quan trọng */
    .lesson-keypoints {
      margin-top: 10px;
      background: var(--accent-soft);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 12px 14px;
    }

    .keypoints-title {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.86rem;
      font-weight: 800;
      color: var(--accent-color);
      margin-bottom: 8px;
    }

    .keypoints-list {
      margin: 0;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .keypoints-list li {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.55;
    }

    .lesson-consult-card {
      display: grid;
      grid-template-columns: 40px 1fr 18px;
      align-items: center;
      gap: 8px;
      margin-top: 12px;
      padding: 12px;
      border: 1px solid rgba(185, 28, 28, 0.2);
      border-radius: 10px;
      background: linear-gradient(135deg, var(--accent-soft), rgba(185, 28, 28, 0.025));
      color: var(--text-primary);
      text-decoration: none;
      transition: border-color 0.15s ease, transform 0.15s ease;
    }

    .lesson-consult-card:hover {
      border-color: var(--accent-color);
      transform: translateY(-1px);
    }

    .lesson-consult-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: var(--accent-color);
      color: #fff;
      font-size: 1.1rem;
    }

    .lesson-consult-copy {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .lesson-consult-label {
      color: var(--accent-color);
      font-size: 0.62rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    .lesson-consult-copy strong {
      font-size: 0.86rem;
      line-height: 1.35;
      margin-top: 1px;
    }

    .lesson-consult-copy small {
      color: var(--text-secondary);
      font-size: 0.68rem;
      line-height: 1.45;
      margin-top: 2px;
    }

    .lesson-consult-arrow {
      color: var(--accent-color);
      justify-self: end;
    }

    .lesson-detail-page .biolink-container { gap: 3px; }
    .lesson-detail-page .compact-banner { border-radius: 10px; }
    .lesson-detail-page .news-categories-section { border-radius: 12px; }

    /* Tinh chỉnh cỡ chữ trên mobile cho dễ đọc */
    @media (max-width: 480px) {
      .lesson-detail-card { padding: 15px 13px; }
      .lesson-main-title { font-size: 1.12rem; line-height: 1.4; }
      .lesson-body-text { font-size: 0.92rem; line-height: 1.7; }
      .lesson-section-heading { font-size: 0.95rem; }
      .keypoints-list li { font-size: 0.9rem; }
      .btn-action-primary, .btn-action-secondary { font-size: 0.88rem; padding: 13px 14px; }

      /* Màn hình nhỏ: tài liệu chỉ hiện icon + nút tải, ẩn tên dài */
      .doc-name { display: none; }
      .document-item { justify-content: space-between; padding: 12px 16px; }
      .doc-icon { font-size: 1.5rem; }
      .doc-download { font-size: 0.82rem; }
    }

    /* ── Danh sách bài học / module trong trang khóa học ─────────────
       .course-lesson-item đã có sẵn trong style.css (khung, padding, hover).
       Ở đây CHỈ bổ sung phần còn thiếu cho trang khóa/module tĩnh:
       màu chữ (không có thì trình duyệt tô xanh link mặc định) và cụm
       tiêu đề + chương xếp dọc. */
    .course-lesson-item { color: var(--text-color); margin-bottom: 6px; }
    .course-lesson-item:last-child { margin-bottom: 0; }
    .course-lesson-item > i {
      flex: 0 0 auto;
      font-size: .85rem;
      color: var(--text-muted, #999);
    }

    .lesson-item-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;                 /* tiêu đề dài xuống dòng, không đẩy mũi tên ra ngoài */
    }
    .lesson-item-title {
      font-size: .9rem;
      font-weight: 700;
      line-height: 1.45;
      color: var(--text-color);
    }
    .lesson-item-meta {
      font-size: .74rem;
      font-weight: 500;
      line-height: 1.4;
      color: var(--text-muted, #888);
    }
    .course-lesson-item:hover .lesson-item-title { color: var(--accent-color); }

    /* ══════════════════════════════════════════════════════════════
       Ô BÀI HỌC — một markup, hai bố cục
       Khối cha mang data-view="list" | "grid"; CSS đổi bố cục, JS chỉ
       đổi thuộc tính nên chuyển chế độ không phải render lại DOM.
       ══════════════════════════════════════════════════════════════ */
    .lesson-cell {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 12px;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--card-bg, rgba(255, 255, 255, .7));
      color: var(--text-color);
      text-decoration: none;
      transition: border-color .18s ease, transform .18s ease;
    }
    .lesson-cell:hover { border-color: var(--accent-color); transform: translateY(-1px); }
    .lesson-cell:hover .lesson-cell-title { color: var(--accent-color); }

    .lesson-cell-icon {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px; height: 34px;
      border-radius: 10px;
      font-size: 1rem;
      background: rgba(155, 28, 34, .10);
      color: var(--accent-color);
    }
    /* Bài chưa phát hành: biểu tượng đồng hồ, tông xám để phân biệt ngay từ cái nhìn đầu. */
    .lesson-cell.is-pending .lesson-cell-icon { background: rgba(0, 0, 0, .06); color: var(--text-muted, #8a8a8f); }
    .lesson-cell.is-pending .lesson-cell-title { font-weight: 600; }
    [data-theme="dark"] .lesson-cell.is-pending .lesson-cell-icon { background: rgba(255, 255, 255, .08); }

    .lesson-cell-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
    .lesson-cell-title {
      font-size: .9rem; font-weight: 700; line-height: 1.45; color: var(--text-color);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .lesson-cell-meta { font-size: .73rem; font-weight: 500; color: var(--text-muted, #888); }
    .lesson-cell-arrow { flex: 0 0 auto; font-size: .8rem; color: var(--text-muted, #aaa); }

    /* ── Chế độ DANH SÁCH (mặc định) ── */
    .lesson-collection[data-view="list"] { display: flex; flex-direction: column; gap: 8px; }

    /* ── Chế độ LƯỚI: 2 cột, biểu tượng lên trên, bỏ mũi tên ── */
    .lesson-collection[data-view="grid"] { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .lesson-collection[data-view="grid"] .lesson-cell { flex-direction: column; align-items: flex-start; gap: 8px; }
    .lesson-collection[data-view="grid"] .lesson-cell-arrow { display: none; }
    .lesson-collection[data-view="grid"] .lesson-cell-title { -webkit-line-clamp: 3; }

    /* ── Nút chuyển chế độ ── */
    .view-toggle { margin-left: auto; display: inline-flex; gap: 4px; }
    .view-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 32px; height: 32px; padding: 0;
      border: 1px solid var(--border-color); border-radius: 9px;
      background: transparent; color: var(--text-muted, #888);
      font-size: .9rem; cursor: pointer;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .view-btn:hover { border-color: var(--accent-color); color: var(--accent-color); }
    .view-btn.is-active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

    /* ══════════════════════════════════════════════════════════════
       DẢI BÀI NỔI BẬT — cuộn ngang, lộ 2.5 thẻ để báo hiệu "còn nữa"
       ══════════════════════════════════════════════════════════════ */
    .lesson-rail {
      display: flex;
      gap: 10px;
      overflow-x: auto;
      scroll-snap-type: x proximity;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      padding: 2px 0 10px;
      scrollbar-width: thin;
    }
    .lesson-rail::-webkit-scrollbar { height: 5px; }
    .lesson-rail::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 999px; }
    .lesson-rail .lesson-cell {
      /* Đúng 2.5 thẻ trong khung nhìn (đã trừ 2 khoảng hở 10px giữa các thẻ),
         nên thẻ thứ 3 luôn bị cắt một nửa → mắt hiểu ngay là còn nữa, vuốt tiếp. */
      flex: 0 0 calc((100% - 20px) / 2.5);
      scroll-snap-align: start;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }
    .lesson-rail .lesson-cell-arrow { display: none; }
    .lesson-rail .lesson-cell-title { -webkit-line-clamp: 3; font-size: .85rem; }

    @media (min-width: 620px) {
      .lesson-rail .lesson-cell { flex-basis: calc((100% - 30px) / 3.5); }   /* màn rộng: lộ 3.5 thẻ */
      .lesson-collection[data-view="grid"] { grid-template-columns: repeat(3, 1fr); }
    }

    /* Tiêu đề khu vực trên trang chi tiết: biểu tượng + tên + nút chuyển chế độ
       nằm CÙNG MỘT HÀNG. (.category-header ở style.css là display:block nên
       trước đó 3 phần tử này rớt xuống 3 dòng.) Giới hạn trong .lesson-detail-page
       để không đụng tới trang chủ. */
    .lesson-detail-page .category-header {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .lesson-detail-page .category-header h2,
    .lesson-detail-page .category-header h3 { flex: 1; margin: 0; min-width: 0; }

    /* Biểu tượng đầu mục cân với cỡ chữ tiêu đề (mặc định nhỏ hơn hẳn, nhìn lệch). */
    .lesson-detail-page .category-header > i { font-size: 1.05rem; line-height: 1; }

    /* Nhãn "Tài liệu" — chỉ 17/225 bài có tài liệu tải về nên đánh dấu để khách
       biết ngay bài nào có file kèm, khỏi phải mở từng bài ra xem. */
    .lesson-cell-doc {
      display: inline-flex; align-items: center; gap: 3px;
      margin-left: 6px; padding: 1px 7px;
      border-radius: 999px;
      background: rgba(155, 28, 34, .10);
      color: var(--accent-color);
      font-size: .68rem; font-weight: 700;
    }
    [data-theme="dark"] .lesson-cell-doc { background: rgba(255, 255, 255, .10); }

    /* Link sang trang chi tiết chương, đặt cuối khối chương đã sổ ra. */
    .module-detail-link {
      display: inline-flex; align-items: center; gap: 6px;
      margin-top: 10px; padding: 8px 12px;
      border: 1px solid var(--border-color); border-radius: 10px;
      color: var(--accent-color); text-decoration: none;
      font-size: .82rem; font-weight: 700;
    }
    .module-detail-link:hover { border-color: var(--accent-color); background: rgba(155, 28, 34, .05); }

    /* Khối chương trên trang khóa học (tái dùng .course-module của trang chủ). */
    .lesson-detail-page .course-module { margin-bottom: 8px; }
    .lesson-detail-page .course-lessons-container { padding: 10px 12px 12px; }

    /* ══════════════════════════════════════════════════════════════
       COVER TRANG KHÓA / TRANG MODULE
       Nút "Quay lại" đè lên cover để không chiếm thêm một hàng riêng.
       Trên di động chỉ hiện MŨI TÊN (chữ ẩn đi) cho gọn màn hình nhỏ.
       Nền dự phòng: đỏ đô cà phê trái chín — dùng khi khóa chưa có ảnh
       hoặc ảnh tải lỗi (onerror gỡ thẻ img, để lộ nền bên dưới).
       ══════════════════════════════════════════════════════════════ */   /* trang module: dẹt hơn, vào bài nhanh hơn */

    /* NEO TRONG KHỐI HERO — không bám theo màn hình, cuộn qua là trôi theo trang.
       Đặt absolute theo .biolink-container (khung trang) chứ KHÔNG theo .page-cover:
       hero có transform (parallax) nên nút nằm bên trong sẽ bị kéo trôi theo.
       env(safe-area-inset-*) để không chui vào tai thỏ / thanh trạng thái. */
    .lesson-detail-page .biolink-container { position: relative; }

    .back-btn-overlay {
      position: absolute;
      top: calc(10px + env(safe-area-inset-top, 0px));
      left: calc(10px + env(safe-area-inset-left, 0px));
      z-index: 3;
      margin: 0;
      background: rgba(255, 255, 255, .92);
      color: #2b2b2e;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    }

    /* Nút sáng/tối neo đối xứng ở góc phải cùng hàng, cũng theo khung trang. */
    .lesson-detail-page .theme-toggle {
      position: absolute;
      top: calc(10px + env(safe-area-inset-top, 0px));
      right: calc(10px + env(safe-area-inset-right, 0px));
      z-index: 3;
    }

    [data-theme="dark"] .back-btn-overlay { background: rgba(28, 28, 30, .88); color: #f2f2f7; }

    @media (max-width: 619px) {
      /* Chỉ còn mũi tên: nút tròn 38px, không đè chữ lên ảnh. */
      .back-btn-overlay span { display: none; }
      .back-btn-overlay {
        width: 38px; height: 38px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 999px;
      }
    }

    /* ══════════════════════════════════════════════════════════════
       NÉN KHOẢNG CÁCH — ưu tiên diện tích hiển thị nội dung
       Màn điện thoại nhỏ; mỗi khoảng hở thừa đẩy bài học xuống dưới nếp gấp.
       Gom hết vào đây để chỉnh một chỗ, không rải style nội tuyến.
       ══════════════════════════════════════════════════════════════ */
    .lesson-detail-page .news-categories-section { margin-top: 10px; }
    .lesson-detail-page .category-header { margin-bottom: 6px; }
    .lesson-detail-page .category-header h2 { font-size: 1.02rem; font-weight: 800; line-height: 1.3; }
    .lesson-detail-page .lesson-detail-card { padding: 12px 12px; }
    .lesson-detail-page .lesson-main-title { margin: 4px 0 6px; }
    .lesson-detail-page .lesson-overview-text p { margin-bottom: 6px; }
    .lesson-detail-page .course-stat { margin-top: 6px; }
    .lesson-detail-page .biolink-footer { margin-top: 10px !important; }

    .lesson-cell { padding: 9px 10px; gap: 9px; }
    .lesson-cell-icon { width: 30px; height: 30px; font-size: .92rem; border-radius: 9px; }
    .lesson-cell-title { font-size: .87rem; line-height: 1.38; }
    .lesson-collection[data-view="list"] { gap: 6px; }
    .lesson-collection[data-view="grid"] { gap: 6px; }
    .lesson-rail { gap: 8px; padding: 0 0 8px; }
    .lesson-rail .lesson-cell { flex-basis: calc((100% - 16px) / 2.5); }

    .lesson-detail-page .course-module { margin-bottom: 6px; }
    .lesson-detail-page .course-lessons-container { padding: 8px 10px 10px; }
    .module-detail-link { margin-top: 8px; padding: 7px 11px; }
   /* dai nen mong, chi de dat nut quay lai */

    /* ══════════════════════════════════════════════════════════════
       LAYOUT CHUNG CHO MỌI TRANG HỌC LIỆU (khóa · chương · bài học)
       Khác nhau chỉ ở phần nội dung; khung ngoài giống hệt nhau.

       Cover: NỀN ĐỎ ĐÔ ĐẶC, chứa nút quay lại.
       Parallax: cover chạy chậm hơn (course-ui.js đặt transform theo cuộn),
       còn .page-sheet là tấm nội dung ĐỤC trượt lên đè lên cover.
       ══════════════════════════════════════════════════════════════ */
    .page-cover {
      position: relative;
      z-index: 0;
      /* TRÀN VIỀN: thoát khỏi phần đệm của .biolink-container (8px trên, 5px hai bên)
         để dải màu chạm mép màn hình, giống banner đầu trang trong ứng dụng. */
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      margin-top: -8px;
      height: 300px;
      overflow: hidden;
      background: #7A1620;              /* đỏ đô cà phê trái chín, màu đặc */
      will-change: transform, opacity;
    }
    /* Mọi trang học liệu dùng CHUNG một chiều cao hero — khác nhau chỉ ở nội dung. */
    .page-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

    /* Chỉ là lớp bọc để xếp chồng — KHÔNG nền, KHÔNG bo góc.
       Có nền thì nó thành một khối màu thừa; để trong suốt thì chính các thẻ
       nội dung trượt lên đè hero, đúng kiểu banner của ứng dụng. */
    .page-sheet {
      position: relative;
      z-index: 1;
      margin-top: -32px;
      background: transparent;
    }

    @media (prefers-reduced-motion: reduce) {
      .page-cover { transform: none !important; opacity: 1 !important; }
    }

    /* Thẻ đầu tiên trượt lên ĐÈ hero nên phải có nền ĐẶC — thẻ mặc định là
       nền trắng trong mờ (rgba .7), nằm trên nền đỏ sẽ bị ánh hồng lên. */
    .page-sheet > .lesson-detail-card { background: #ffffff; }
    [data-theme="dark"] .page-sheet > .lesson-detail-card { background: #17171c; }

    /* ── Lọc nhanh: Có sẵn / Toàn bộ ──────────────────────────────
       Ẩn/hiện bằng CSS theo data-filter của khối cha, không dựng lại DOM. */
    .filter-pills { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
    .filter-pill {
      padding: 6px 13px;
      border: 1px solid var(--border-color);
      border-radius: 999px;
      background: transparent;
      color: var(--text-muted, #777);
      font-size: .8rem; font-weight: 700; font-family: inherit;
      cursor: pointer;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    .filter-pill:hover { border-color: var(--accent-color); color: var(--accent-color); }
    .filter-pill.is-active { background: var(--accent-color); border-color: var(--accent-color); color: #fff; }

    .lesson-collection[data-filter="ready"] .lesson-cell.is-pending { display: none; }

    /* Chỉ hiện khi bộ lọc "Có sẵn" không còn bài nào — dùng :has để khỏi cần JS đếm. */
    .filter-empty { display: none; font-size: .84rem; color: var(--text-muted, #888); padding: 10px 2px; margin: 0; }
    .lesson-collection[data-filter="ready"]:not(:has(.lesson-cell:not(.is-pending))) + .filter-empty { display: block; }

    /* ── Độ khó (thang 5 sao) ─────────────────────────────────────── */
    .lesson-level {
      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
      margin: 6px 0 10px;
      font-size: .78rem;
    }
    .lesson-level-label { font-weight: 700; color: var(--text-muted, #888); }
    .lesson-level-label i { margin-right: 3px; }
    .lesson-level-stars { display: inline-flex; gap: 2px; color: var(--accent-color); font-size: .82rem; }
    .lesson-level-stars .bi-star { opacity: .3; }
    .lesson-level-text { font-weight: 700; color: var(--text-color); }

    /* ── Danh sách thuộc tính: kết quả đạt được / việc cần làm ────── */
    .lesson-attr-list { list-style: none; margin: 0; padding: 0; }
    .lesson-attr-list li {
      display: flex; align-items: flex-start; gap: 8px;
      padding: 7px 0;
      font-size: .9rem; line-height: 1.55;
      border-bottom: 1px solid var(--border-color);
    }
    .lesson-attr-list li:last-child { border-bottom: none; }
    .lesson-attr-list li > i { flex: 0 0 auto; margin-top: 3px; font-size: .85rem; }
    .lesson-outcomes .lesson-attr-list li > i { color: #198754; }
    .lesson-tasks .lesson-attr-list li > i { color: var(--accent-color); }
    .lesson-attr-list b { font-weight: 800; }

    .lesson-inline-link {
      color: var(--accent-color);
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ── Bảng / biểu mẫu trong bài học ────────────────────────────
       Bảng luôn nằm trong khung CUỘN NGANG riêng: màn hình nhỏ vuốt
       ngang được, còn trang thì không bao giờ bị tràn. */
    .lesson-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border-color);
      border-radius: 10px;
    }
    .lesson-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .84rem;
      min-width: 420px;              /* hẹp hơn mức này thì chữ dồn cục, cho cuộn ngang */
    }
    .lesson-table th,
    .lesson-table td {
      padding: 8px 10px;
      text-align: left;
      vertical-align: top;
      line-height: 1.5;
      border-bottom: 1px solid var(--border-color);
    }
    .lesson-table thead th {
      background: rgba(155, 28, 34, .07);
      color: var(--accent-color);
      font-weight: 800;
      font-size: .78rem;
      text-transform: uppercase;
      letter-spacing: .2px;
      white-space: nowrap;
    }
    [data-theme="dark"] .lesson-table thead th { background: rgba(255, 255, 255, .07); }
    .lesson-table tbody tr:last-child td { border-bottom: none; }
    .lesson-table td:first-child { font-weight: 700; }
    .lesson-table-note { font-size: .78rem; color: var(--text-muted, #888); margin: 6px 0 0; line-height: 1.5; }

    /* ══════════════════════════════════════════════════════════════
       TÌM NHANH TRONG KHÓA HỌC
       ══════════════════════════════════════════════════════════════ */
    .quick-search { position: relative; }

    .qs-box {
      position: relative;
      display: flex; align-items: center;
      border: 1px solid var(--border-color);
      border-radius: 12px;
      background: var(--card-bg, #fff);
      transition: border-color .15s ease;
    }
    .qs-box:focus-within { border-color: var(--accent-color); }
    .qs-icon { position: absolute; left: 12px; color: var(--text-muted, #999); font-size: .95rem; }
    .qs-input {
      flex: 1; min-width: 0;
      padding: 12px 38px 12px 36px;
      border: 0; background: transparent;
      font-family: inherit; color: var(--text-color);   /* co chu do luat 16px toan cuc lo (chan iOS zoom) */
      border-radius: 12px;
    }
    .qs-input:focus { outline: none; }
    .qs-input::-webkit-search-cancel-button { display: none; }
    .qs-clear {
      position: absolute; right: 8px;
      width: 26px; height: 26px; padding: 0;
      display: inline-flex; align-items: center; justify-content: center;
      border: 0; border-radius: 999px;
      background: rgba(0, 0, 0, .06); color: var(--text-muted, #777);
      font-size: .7rem; cursor: pointer;
    }
    /* Vòng xoay báo đang tải, thay chỗ kính lúp */
    .quick-search.is-loading .qs-icon::before { content: "\f130"; animation: qs-spin .8s linear infinite; }
    @keyframes qs-spin { to { transform: rotate(360deg); } }

    .qs-status { font-size: .76rem; color: var(--text-muted, #888); margin: 6px 2px 0; min-height: 1em; }

    .qs-results {
      list-style: none; margin: 6px 0 0; padding: 4px;
      border: 1px solid var(--border-color); border-radius: 12px;
      background: var(--card-bg, #fff);
      max-height: 60vh; overflow-y: auto;
      box-shadow: 0 8px 24px rgba(0, 0, 0, .10);
    }
    .qs-item a {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 9px 10px; border-radius: 9px;
      color: var(--text-color); text-decoration: none;
    }
    .qs-item.is-on a, .qs-item a:hover { background: rgba(155, 28, 34, .07); }
    .qs-item-icon {
      flex: 0 0 auto; width: 26px; height: 26px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 8px; font-size: .8rem;
      background: rgba(155, 28, 34, .10); color: var(--accent-color);
    }
    .qs-item-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .qs-item-title { font-size: .87rem; font-weight: 700; line-height: 1.4; }
    .qs-item-snip {
      font-size: .76rem; color: var(--text-muted, #888); line-height: 1.45;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .qs-item-meta { font-size: .7rem; font-weight: 600; color: var(--accent-color); }

    /* Khóa học liên quan */
    .qs-related { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
    .qs-related-label { font-size: .74rem; font-weight: 700; color: var(--text-muted, #888); text-transform: uppercase; }
    .qs-related-item {
      display: inline-flex; flex-direction: column; gap: 1px;
      padding: 6px 12px; border: 1px solid var(--border-color); border-radius: 999px;
      color: var(--text-color); text-decoration: none;
    }
    .qs-related-item:hover { border-color: var(--accent-color); }
    .qs-related-name { font-size: .8rem; font-weight: 700; }
    .qs-related-meta { font-size: .68rem; color: var(--text-muted, #999); }