/* ══════════════════════════════════════════════════════════════
   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); }

    /* Bài ĐÃ HỌC (đã mở trang bài này trên trình duyệt này — course-ui.js đánh dấu):
       biểu tượng chuyển tông xanh + nhãn "Đã học" nối sau meta. */
    .lesson-cell.is-viewed .lesson-cell-icon { background: rgba(25, 135, 84, .12); color: #198754; }
    [data-theme="dark"] .lesson-cell.is-viewed .lesson-cell-icon { background: rgba(25, 135, 84, .22); color: #4ade80; }
    .lesson-viewed-tag { color: #198754; font-weight: 700; margin-left: 6px; white-space: nowrap; }
    [data-theme="dark"] .lesson-viewed-tag { color: #4ade80; }
    .lesson-viewed-tag i { font-size: .7rem; }

    /* ── 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); }
    }

    @media (min-width: 960px) {
      .lesson-collection[data-view="grid"] { grid-template-columns: repeat(4, 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 */

    /* Nút sáng/tối giờ sống trong .site-nav-actions (xem style.css PHẦN 9B) — không còn cần định vị riêng ở đây. */

    /* ══════════════════════════════════════════════════════════════
       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 */

    /* ══════════════════════════════════════════════════════════════
       Banner/hero (.page-cover/.page-sheet/.back-btn-overlay) giờ dùng chung
       toàn site — định nghĩa ở style.css (xem partials/hero.html). File này
       chỉ còn phần NÉN RIÊNG cho trang học liệu bên dưới.
       ══════════════════════════════════════════════════════════════ */

    /* ── 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; }

    /* ══════════════════════════════════════════════════════════════
       BIỂU ĐỒ TRONG BÀI HỌC (SVG do lesson-chart.js sinh)

       Màu khai bằng biến để một bộ mã SVG chạy đúng ở cả nền sáng lẫn nền tối —
       bộ vẽ chỉ nhắc tên var(--c-in) / var(--c-out)…, không nhúng mã màu cứng.
       ══════════════════════════════════════════════════════════════ */
    .lesson-chart-block {
      --c-in: var(--secondary-color, #15803d);
      --c-out: var(--accent-color, #b91c1c);
      --c-neutral: var(--blue-color, #2563eb);
      --c-amber: #c2810a;
      --c-violet: #7c3aed;
      --c-muted: var(--text-muted, #86868b);
      --c-grid: var(--border-color, rgba(0, 0, 0, .08));
      --c-axis: var(--text-muted, #86868b);
      --c-face: var(--container-bg, #fff);
    }
    [data-theme="dark"] .lesson-chart-block {
      --c-amber: #fbbf24;
      --c-violet: #a78bfa;
      --c-face: #16161a;
    }
    .lesson-chart-figure { margin: 0 0 26px; }
    .lesson-chart-figure:last-child { margin-bottom: 0; }
    .lesson-chart-cap {
      font-size: .9rem; font-weight: 800; color: var(--text-color);
      line-height: 1.45; margin: 0 0 2px;
    }
    .lesson-chart-unit { font-size: .74rem; color: var(--text-muted, #888); margin: 0 0 8px; }
    /* Cuộn ngang trên máy nhỏ thay vì co chữ tới mức không đọc nổi — cùng lối với bảng. */
    .lesson-chart-wrap {
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      border: 1px solid var(--border-color, rgba(0, 0, 0, .08));
      border-radius: 12px; background: var(--container-bg, #fff); padding: 10px 12px;
    }
    .lesson-chart { display: block; width: 100%; min-width: 480px; height: auto; }
    .lesson-chart text { font-family: var(--font-sans, sans-serif); }
    .tc-ch-ax { font-size: 11px; fill: var(--text-muted, #86868b); }
    .tc-ch-lbl { font-size: 11px; fill: var(--text-secondary, #515154); }
    .tc-ch-lgd { font-size: 12px; font-weight: 600; fill: var(--text-secondary, #515154); }
    .tc-ch-val { font-size: 12.5px; font-weight: 800; fill: var(--text-color); }
    .tc-ch-val2 { font-size: 12px; font-weight: 700; fill: var(--text-color); }
    .tc-ch-hero { font-size: 27px; font-weight: 800; fill: var(--text-color); }
    .tc-ch-band { font-size: 11.5px; font-weight: 700; fill: var(--c-out); }
    .lesson-chart-note {
      font-size: .82rem; color: var(--text-secondary, #515154);
      margin: 8px 0 0; line-height: 1.6;
    }
    .lesson-chart-note b { color: var(--text-color); }
    @media (max-width: 640px) {
      .lesson-chart-wrap { padding: 8px; }
      .lesson-chart-cap { font-size: .85rem; }
    }

    /* ══════════════════════════════════════════════════════════════
       BẢNG TÍNH TƯƠNG TÁC TRONG BÀI HỌC (lesson-calc.js dựng nội dung)
       ══════════════════════════════════════════════════════════════ */
    .lesson-calc { display: grid; gap: 14px; }
    .calc-form { display: grid; gap: 12px; }
    .calc-row { display: grid; gap: 5px; }
    .calc-label { font-size: .86rem; font-weight: 700; color: var(--text-color); }
    .calc-input-box {
      display: flex; align-items: center; gap: 8px;
      border: 1.5px solid var(--border-color, rgba(0, 0, 0, .1)); border-radius: 10px;
      padding: 0 12px; background: var(--container-bg, #fff);
      transition: border-color .15s ease;
    }
    .calc-input-box:focus-within { border-color: #a71924; }
    .calc-input {
      flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
      /* 16px chẵn: dưới ngưỡng này iOS tự phóng to trang khi bấm vào ô nhập. */
      font-size: 16px; font-weight: 800; font-family: inherit;
      color: var(--text-color); padding: 12px 0; font-variant-numeric: tabular-nums;
    }
    .calc-unit { flex: 0 0 auto; font-size: .82rem; font-weight: 700; color: var(--text-muted, #888); }
    .calc-hint { font-size: .76rem; line-height: 1.55; color: var(--text-muted, #888); }

    .calc-outs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
    /* Ô đầu (số ly mỗi ngày) là thứ khách cần nhất — cho chiếm trọn hàng trên điện thoại. */
    .calc-outs > :first-child { grid-column: 1 / -1; }
    .calc-out {
      background: rgba(167, 25, 36, .07); border: 1px solid rgba(167, 25, 36, .2);
      border-radius: 12px; padding: 11px 13px; min-width: 0;
    }
    .calc-out-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #a71924; }
    .calc-out-value {
      font-size: 1.05rem; font-weight: 900; color: var(--text-color); margin-top: 3px;
      font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
    }
    .calc-outs > :first-child .calc-out-value { font-size: 1.7rem; }
    .calc-out-sub { font-size: .68rem; color: var(--text-muted, #888); margin-top: 2px; line-height: 1.4; }
    /* Số âm (lỗ) tô đỏ — đây là kết quả HỢP LỆ và là điều bài học muốn khách nhìn thấy,
       nên vẫn để ô nổi bật, chỉ đổi màu chữ. */
    .calc-out-value.is-negative { color: #a71924; }
    .calc-warn {
      margin: 0; font-size: .82rem; line-height: 1.6; color: #a71924;
      background: rgba(167, 25, 36, .08); border: 1px solid rgba(167, 25, 36, .28);
      border-radius: 10px; padding: 10px 12px;
    }
    .lesson-calc.is-warn .calc-out { background: rgba(0, 0, 0, .04); border-color: var(--border-color, rgba(0, 0, 0, .1)); }
    .lesson-calc.is-warn .calc-out-label { color: var(--text-muted, #888); }
    .calc-note { margin: 0; font-size: .76rem; line-height: 1.55; color: var(--text-muted, #888); }
    [data-theme="dark"] .calc-input-box { background: rgba(255, 255, 255, .05); }

    /* Máy hẹp: hai ô phụ nằm cạnh nhau thì nhãn xuống 3 dòng và số tiền bị ngắt giữa
       chừng ("60.900." / "000đ"). Xếp dọc, nhãn trái - số phải, gọn trong một dòng. */
    @media (max-width: 430px) {
      .calc-outs { grid-template-columns: 1fr; }
      .calc-outs > :not(:first-child) {
        display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
      }
      .calc-outs > :not(:first-child) .calc-out-value { margin-top: 0; white-space: nowrap; }
    }

    /* ══════════════════════════════════════════════════════════════
       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); }