/* Token alias — markup/CSS port từ theme 2025 (LMS, pricing inline, signup…) */
:root {
  --primary: var(--blue);
  --primary-dark: var(--navy);
  --primary-mid: var(--navy-2);
  --primary-light: var(--blue-light);
  --primary-pale: var(--blue-50);
  --primary-pale-2: #eef3ff;
  --accent: var(--gold);
  --text-dark: var(--navy);
  --text-body: var(--ink);
  --text-muted: var(--slate);
  --text-on-primary: var(--white);
  --bg-white: var(--white);
  --bg-section-alt: var(--mist);
  --bg-card: var(--white);
  --border: var(--line);
  --border-strong: var(--line-2);
  --radius: var(--r);
  --radius-lg: var(--r-lg);
  --shadow-xs: var(--shadow);
  --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow-lg);
}

/* Nút class cũ (btn-primary / btn-secondary) — bổ sung cho .btn trong main.css */
.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: transparent;
}
.btn-primary:hover {
  background: var(--blue-600);
  color: var(--white);
}
.btn-secondary {
  background: var(--white);
  color: var(--navy);
  border: 1px solid var(--line-2);
}
.btn-secondary:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.btn-accent {
  background: var(--gold);
  color: var(--navy);
  font-weight: 800;
}
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 17px; border-radius: var(--r-lg); }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
.section-alt { background: var(--mist); }

.edu-discuss-trigger:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale-2); }
.edu-discuss-login {
    display: block; text-align: center; padding: .75rem; font-size: .84rem; font-weight: 600;
    color: var(--primary); text-decoration: none; background: var(--primary-pale-2); border-radius: 10px; margin-bottom: .85rem;
}
.edu-discuss-form { display: none; margin-bottom: .85rem; }
.edu-discuss-form.is-open { display: block; }
.edu-discuss-form textarea {
    width: 100%; border: 1.5px solid var(--border); border-radius: 10px; padding: .65rem .85rem;
    font-size: .84rem; resize: vertical; min-height: 72px; margin-bottom: .5rem;
}
.edu-discuss-form-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.edu-discuss-list {
    list-style: none; padding: 0; margin: 0; max-height: 420px; overflow-y: auto;
}
.edu-discuss-list:empty::after {
    content: 'Chưa có bình luận. Hãy là người đầu tiên!';
    display: block; text-align: center; color: var(--text-muted); font-size: .82rem; padding: 1.5rem .5rem;
}

.edu-cta-btn { width: 100%; justify-content: center; margin-bottom: .65rem; }

/* ── LMS Video Player Page ── */
.lms-video-page {
    background: var(--bg-section-alt);
    padding-top: 32px;
    padding-bottom: 2rem;
    min-height: 60vh;
}
.lms-body { padding-top: .25rem; }

.lms-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 1.5rem;
    align-items: start;
}
@media (max-width: 1100px) { .lms-grid { grid-template-columns: 1fr; } }

/* Player stage */
.lms-player-stage {
    position: relative;
    background: #0b0f0d;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0,0,0,.18);
    margin-bottom: 1.25rem;
}
.lms-player-stage--shorts {
    display: flex; flex-direction: column; align-items: center;
    background: linear-gradient(180deg, #0a0a0a 0%, #111 100%);
    padding: 1rem 0 0;
}
.lms-player-stage--shorts .lms-ratio--youtube {
    width: 100%; max-width: 400px;
    padding-bottom: 177.78%;
}
.lms-ratio {
    position: relative; width: 100%; height: 0; overflow: hidden; background: #000;
}
.lms-ratio--youtube { padding-bottom: 56.25%; }
.lms-ratio--native { padding-bottom: 56.25%; }
.lms-ratio iframe,
.lms-ratio .video-js,
.lms-ratio video {
    position: absolute; inset: 0; width: 100%; height: 100%; border: none;
}
.lms-ratio .video-js { padding-top: 0 !important; height: 100% !important; }
.lms-ratio .video-js .vjs-tech { object-fit: contain; }
.lms-ratio .video-js .vjs-control-bar {
    background: linear-gradient(to top, rgba(0,0,0,.88), transparent);
    height: 46px;
}
.lms-ratio .video-js .vjs-play-progress,
.lms-ratio .video-js .vjs-volume-level { background: var(--primary); }
.lms-ratio .video-js .vjs-big-play-button {
    border: none; border-radius: 50%; width: 68px; height: 68px; line-height: 68px;
    top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;
    background: rgba(0,0,0,.65); transition: transform .2s;
}
.lms-ratio .video-js:hover .vjs-big-play-button { transform: translate(-50%, -50%) scale(1.06); }

.lms-source-badge {
    display: flex; align-items: center; gap: .4rem;
    padding: .55rem 1rem; font-size: .72rem; font-weight: 700;
    color: rgba(255,255,255,.8); background: rgba(0,0,0,.55);
    letter-spacing: .02em;
}
.lms-player-stage--shorts .lms-source-badge { width: 100%; max-width: 400px; }

.lms-native-player { background: #000; }
.lms-quality-bar {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 10px 14px; background: rgba(0,0,0,.92);
    border-top: 1px solid rgba(255,255,255,.08);
}
.lms-quality-label {
    font-size: .75rem; color: rgba(255,255,255,.65); font-weight: 700;
    margin-right: 4px; letter-spacing: .02em;
}
.lms-q-btn {
    padding: 4px 14px; font-size: .72rem; font-weight: 700;
    border: 1.5px solid rgba(255,255,255,.22); border-radius: 20px;
    background: transparent; color: rgba(255,255,255,.85);
    cursor: pointer; transition: .15s;
}
.lms-q-btn:hover { border-color: var(--primary); color: var(--primary-light, #86efac); }
.lms-q-btn.active {
    background: var(--primary); border-color: var(--primary); color: #fff;
}

.lms-text-stage { background: var(--bg-white); padding: 2rem; min-height: 200px; }
.lms-text-stage-inner { max-width: 760px; margin: 0 auto; }
.lms-empty-stage {
    min-height: 280px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .75rem;
    color: rgba(255,255,255,.55); padding: 2.5rem;
}
.lms-empty-stage i { font-size: 2.5rem; opacity: .5; }

/* Lesson info — cột trái */
.lms-lesson-info-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: 14px; padding: 1rem 1.15rem; margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.lms-course-back {
    display: inline-block; font-size: .84rem; font-weight: 600; color: var(--primary);
    text-decoration: none; margin-bottom: .5rem; line-height: 1.4;
}
.lms-course-back::before { content: '← '; opacity: .75; }
.lms-course-back:hover { color: var(--primary-dark); text-decoration: underline; }

.lms-lesson-title {
    font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 800;
    color: var(--text-dark); margin: 0 0 .5rem; line-height: 1.35;
}
.lms-lesson-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .75rem; }
.lms-lesson-progress { margin-bottom: .75rem; padding-top: .15rem; }
.lms-lesson-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    margin-bottom: .65rem;
}
.lms-lesson-actions { margin-top: .25rem; }

.lms-chip {
    display: inline-flex; align-items: center; gap: 4px;
    height: 24px; padding: 0 10px; border-radius: 4px;
    font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap;
    box-sizing: border-box; text-decoration: none;
}
.lms-chip i { font-size: 11px; }
.lms-chip--muted { background: #f1f3f5; color: #7e8299; }
.lms-chip--open { background: #e8fff3; color: #0bb783; }
.lms-chip--locked { background: #ffe2e5; color: #f1416c; }
.lms-chip--trial { background: #e8fff3; color: #0bb783; }
.lms-chip--course { background: var(--primary-pale-2); color: var(--primary); }
.lms-chip--course:hover { background: var(--primary); color: #fff; }
.lms-chip--text { background: #e8fff3; color: #0bb783; }
.lms-chip--doc { background: #fff8dd; color: #b45309; }

/* Bài đọc / tài liệu — không dùng khung video đen */
.lms-text-card {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: 14px; padding: 1.5rem 1.75rem; margin-bottom: 1rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.lms-text-card-body { font-size: .92rem; line-height: 1.75; color: var(--text-body); }
.lms-text-card--doc, .lms-text-card--empty {
    text-align: center; padding: 2.5rem 1.5rem;
}
.lms-text-card-doc-icon {
    width: 56px; height: 56px; border-radius: 12px; margin: 0 auto 1rem;
    background: #fff8dd; color: #b45309;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.lms-text-card--doc h2 { font-size: 1.1rem; margin: 0 0 .5rem; color: var(--text-dark); }
.lms-text-card--doc p { margin: 0; color: var(--text-muted); font-size: .88rem; }
.lms-text-card--empty i { font-size: 2rem; color: var(--text-muted); opacity: .5; margin-bottom: .75rem; }
.lms-text-card--empty p { color: var(--text-muted); margin-bottom: 1rem; }
.lms-text-card--below-video { margin-top: 1rem; border-top: 1px solid var(--border); }

.lms-action-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem .85rem; border-radius: 8px; font-size: .82rem; font-weight: 600;
    border: 1px solid var(--border); background: var(--bg-white); color: var(--text-dark);
    text-decoration: none; transition: .15s;
}
.lms-action-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-pale-2); text-decoration: none; }
.lms-action-btn--primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.lms-action-btn--primary:hover { background: var(--primary-dark); color: #fff; }

/* Sidebar — cột phải 4 */
.lms-sidebar-panel {
    background: var(--bg-white); border: 1px solid var(--border);
    border-radius: 14px; overflow: hidden;
    position: sticky; top: 92px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 108px);
}
.lms-sidebar-top { flex-shrink: 0; }
.lms-sidebar-panel.is-top-collapsed .lms-sidebar-top { display: none; }
.lms-sidebar-panel.is-top-collapsed .lms-sidebar-curriculum { max-height: 38vh; }
.lms-sidebar-panel.is-top-collapsed .lms-sidebar-discuss {
    flex: 1; max-height: none; min-height: 200px;
}

.lms-sidebar-toggle {
    width: 100%; display: flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .45rem; border: none; border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border); background: #fafbfc;
    font-size: .72rem; font-weight: 600; color: var(--text-muted); cursor: pointer;
    transition: .15s; flex-shrink: 0;
}
.lms-sidebar-toggle:hover { background: var(--primary-pale-2); color: var(--primary); }

.lms-sidebar-head {
    padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.lms-sidebar-head h4 {
    font-size: .92rem; font-weight: 800; color: var(--text-dark);
    margin: 0 0 .45rem; line-height: 1.35;
}
.lms-sidebar-meta { display: flex; flex-wrap: wrap; gap: 5px; }

.lms-sidebar-progress {
    padding: .85rem 1.1rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.lms-progress-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .75rem; margin-bottom: .4rem;
}
.lms-progress-label { color: var(--text-muted); font-weight: 600; }
.lms-progress-count { color: var(--primary); font-weight: 700; }
.lms-progress-track {
    height: 5px; background: #eef1f4; border-radius: 99px; overflow: hidden;
}
.lms-progress-fill {
    height: 100%; background: linear-gradient(90deg, var(--primary), var(--primary-mid, #34d399));
    border-radius: 99px; transition: width .3s;
}

.lms-sidebar-nav {
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    padding: .75rem 1.1rem; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.lms-nav-link {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px;
    text-decoration: none; transition: .15s; background: #fafbfc;
}
.lms-nav-link:hover { border-color: var(--primary); background: var(--primary-pale-2); text-decoration: none; }
.lms-nav-dir { font-size: .68rem; font-weight: 700; color: var(--primary); letter-spacing: .02em; }
.lms-nav-name { font-size: .78rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; }
.lms-nav-link--prev .lms-nav-dir::before { content: '← '; }
.lms-nav-link--next { text-align: right; }
.lms-nav-link--next .lms-nav-dir::after { content: ' →'; }

.lms-sidebar-curriculum-head {
    padding: .85rem 1rem; font-size: .88rem; font-weight: 700; color: var(--text-dark);
    border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.lms-sidebar-curriculum {
    flex: 1; overflow-y: auto; min-height: 0;
    padding: .65rem; border-bottom: 1px solid var(--border);
    max-height: 52vh;
}

/* Danh sách bài sidebar — style admin */
.lms-ch-block {
    background: #f8fafb; border: 1px solid #ebedf2; border-radius: 8px;
    margin-bottom: .5rem; overflow: hidden;
}
.lms-ch-toggle {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    padding: .55rem .65rem; border: none; background: transparent; cursor: pointer; text-align: left;
}
.lms-ch-left { display: flex; align-items: center; gap: .45rem; min-width: 0; flex: 1; }
.lms-ch-chevron { font-size: .58rem; color: var(--text-muted); transition: transform .2s; }
.lms-ch-block.open .lms-ch-chevron { transform: rotate(0deg); }
.lms-ch-block:not(.open) .lms-ch-chevron { transform: rotate(-90deg); }
.lms-ch-num {
    width: 20px; height: 20px; border-radius: 5px; background: var(--primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 800; flex-shrink: 0;
}
.lms-ch-title {
    font-size: .78rem; font-weight: 700; color: var(--text-dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lms-ch-lessons { display: none; padding: 0 .45rem .45rem; flex-direction: column; gap: .35rem; }
.lms-ch-block.open .lms-ch-lessons { display: flex; }

.lms-s-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .5rem; background: #fff; border: 1px solid #ebedf2;
    border-radius: 8px; text-decoration: none; color: inherit; transition: .12s;
}
a.lms-s-item:hover { border-color: var(--primary-light, #a7f3d0); box-shadow: 0 1px 8px rgba(15,118,110,.06); text-decoration: none; color: inherit; }
.lms-s-item.is-active { border-color: var(--primary); background: var(--primary-pale-2); }
.lms-s-item.is-locked { opacity: .68; cursor: not-allowed; }

.lms-s-thumb {
    position: relative; width: 64px; height: 36px; border-radius: 5px;
    overflow: hidden; flex-shrink: 0; background: linear-gradient(135deg, #1e293b, #334155);
}
.lms-s-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lms-s-thumb-icon {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.88); font-size: .75rem;
}
.lms-s-dur {
    position: absolute; right: 2px; bottom: 2px;
    background: rgba(0,0,0,.72); color: #fff; font-size: 8px; font-weight: 700;
    padding: 1px 4px; border-radius: 3px; line-height: 1.3;
}
.lms-s-lock {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(15,23,42,.42); color: #fff; font-size: .65rem;
}
.lms-s-body { flex: 1; min-width: 0; }
.lms-s-name {
    display: block; font-size: .76rem; font-weight: 600; color: var(--text-dark);
    line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lms-s-item.is-active .lms-s-name { color: var(--primary); }
.lms-s-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }

.lms-sidebar-discuss {
    flex-shrink: 0; padding: .85rem 1rem 1rem;
    overflow-y: auto; flex: 1; min-height: 180px;
}
.lms-discuss-head { margin-bottom: .65rem; }
.lms-discuss-head h5 {
    margin: 0; font-size: .88rem; font-weight: 700; color: var(--text-dark);
    display: flex; align-items: center; gap: .4rem;
}
.lms-discuss-head h5 i { color: var(--primary); }

.lms-comment-box { margin-bottom: .65rem; }
.lms-comment-trigger {
    width: 100%; padding: .55rem .85rem; border: none; border-radius: 8px;
    background: var(--primary); color: #fff; font-size: .82rem; font-weight: 600;
    cursor: pointer; transition: .15s;
}
.lms-comment-trigger:hover { background: var(--primary-dark); }
.lms-comment-login {
    display: block; text-align: center; padding: .55rem; font-size: .82rem; font-weight: 600;
    color: var(--primary); text-decoration: none; background: var(--primary-pale-2); border-radius: 8px;
}
.lms-comment-form { display: none; margin-top: .5rem; }
.lms-comment-form.show { display: block; }
.lms-comment-form textarea {
    width: 100%; border: 1px solid var(--border); border-radius: 8px;
    padding: .55rem .75rem; font-size: .82rem; resize: vertical;
    min-height: 64px; margin-bottom: .45rem; box-sizing: border-box;
}
.lms-comment-form textarea:focus { outline: none; border-color: var(--primary); }
.lms-comment-actions { display: flex; justify-content: flex-end; gap: .4rem; }
.lms-comment-actions .btn-cancel {
    padding: .35rem .75rem; border: 1px solid var(--border); background: #fff;
    border-radius: 6px; font-size: .78rem; cursor: pointer; color: var(--text-muted);
}
.lms-comment-actions .btn-submit {
    padding: .35rem .85rem; border: none; background: var(--primary); color: #fff;
    border-radius: 6px; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.lms-comment-actions .btn-submit:hover { background: var(--primary-dark); }
.lms-comment-list { list-style: none; padding: 0; margin: 0; }
.lms-comment-list:empty::after {
    content: 'Chưa có bình luận';
    display: block; text-align: center; color: var(--text-muted);
    font-size: .78rem; padding: .75rem 0;
}

/* Attachment */
.lms-attachment-card {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: var(--bg-white); border: 1.5px solid var(--border);
    border-radius: 14px; padding: 1.15rem 1.35rem; margin-bottom: 1.25rem;
}
.lms-attachment-icon {
    width: 44px; height: 44px; border-radius: 10px;
    background: var(--primary-pale-2); color: var(--primary);
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
}
.lms-attachment-body { flex: 1; min-width: 160px; }
.lms-attachment-body strong { display: block; font-size: .92rem; color: var(--text-dark); margin-bottom: .15rem; }
.lms-attachment-body p { margin: 0; font-size: .8rem; color: var(--text-muted); }

/* Legacy player classes (detail page compat) */
.edu-player-page { padding-top: 1rem; }
.vp-youtube { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
.vp-youtube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }
.vp-outer--shorts .vp-youtube { padding-bottom: 177.78%; max-width: 420px; margin: 0 auto; }
.vp-wrap { position: relative; background: #000; }
.vp-wrap .video-js { width: 100% !important; height: auto !important; padding-top: 56.25%; }
.vp-wrap .video-js .vjs-tech { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.vp-wrap .video-js .vjs-play-progress, .vp-wrap .video-js .vjs-volume-level { background: var(--primary); }

/* ── Edu checkout / thank you (đăng ký khóa học) ── */
.edu-pay-wrap {
    background: var(--bg-section-alt);
    padding: 2rem 0 3.5rem;
    min-height: 50vh;
}
.edu-pay-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.edu-pay-step {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    color: var(--text-muted);
    background: #fff;
    border: 1px solid var(--border);
}
.edu-pay-step.is-active {
    color: var(--primary);
    border-color: rgba(26, 92, 56, .25);
    background: rgba(26, 92, 56, .06);
}
.edu-pay-step__num {
    width: 20px; height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 800;
    background: var(--border);
    color: var(--text-muted);
}
.edu-pay-step.is-active .edu-pay-step__num {
    background: var(--primary);
    color: #fff;
}
.edu-pay-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.25rem;
    align-items: start;
    max-width: 980px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .edu-pay-layout { grid-template-columns: 1fr; }
}
.edu-pay-panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.edu-pay-panel__head {
    padding: .9rem 1.15rem;
    border-bottom: 1px solid var(--border);
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.edu-pay-panel__head i { color: var(--primary); opacity: .9; }
.edu-pay-panel__body { padding: 1.15rem 1.25rem 1.25rem; }
.edu-pay-course-hero {
    display: grid;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
@media (max-width: 560px) {
    .edu-pay-course-hero { grid-template-columns: 1fr; }
}
.edu-pay-course-hero__img {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/10;
    background: var(--bg-section-alt);
    border: 1px solid var(--border);
}
.edu-pay-course-hero__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.edu-pay-course-hero__title {
    margin: 0 0 .45rem;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.35;
    color: var(--text-dark);
}
.edu-pay-course-hero__desc {
    margin: 0 0 .65rem;
    font-size: .84rem;
    color: var(--text-muted);
    line-height: 1.55;
}
.edu-pay-course-hero__link {
    font-size: .78rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}
.edu-pay-course-hero__link:hover { text-decoration: underline; }
.edu-pay-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .85rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--border);
}
.edu-pay-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .28rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--bg-section-alt);
    color: var(--text-body);
    border: 1px solid var(--border);
}
.edu-pay-chip i { color: var(--primary); font-size: .75rem; }
.edu-pay-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: .25rem;
}
@media (max-width: 560px) { .edu-pay-methods { grid-template-columns: 1fr; } }
.edu-pay-method {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .85rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
    background: #fff;
}
.edu-pay-method input { position: absolute; opacity: 0; pointer-events: none; }
.edu-pay-method.is-active {
    border-color: var(--primary);
    background: rgba(26, 92, 56, .04);
    box-shadow: 0 2px 10px rgba(26, 92, 56, .1);
}
.edu-pay-method__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-section-alt);
    flex-shrink: 0;
}
.edu-pay-method__icon img { max-height: 24px; max-width: 100%; }
.edu-pay-method__text strong {
    display: block;
    font-size: .82rem;
    color: var(--text-dark);
    margin-bottom: .1rem;
}
.edu-pay-method__text span {
    font-size: .72rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.edu-pay-aside { position: sticky; top: 90px; }
.edu-pay-sum-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem 0;
    font-size: .86rem;
    color: var(--text-body);
    border-bottom: 1px dashed var(--border);
}
.edu-pay-sum-row:last-of-type { border-bottom: none; }
.edu-pay-sum-due {
    margin-top: .75rem;
    padding: .85rem .9rem;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(26, 92, 56, .08), rgba(245, 166, 35, .08));
    border: 1px solid rgba(26, 92, 56, .15);
}
.edu-pay-sum-due span {
    display: block;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: .2rem;
}
.edu-pay-sum-due strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.02em;
}
.edu-pay-note {
    margin: .85rem 0 0;
    padding: .7rem .85rem;
    border-radius: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    font-size: .78rem;
    color: #166534;
    line-height: 1.5;
}
.edu-pay-submit {
    width: 100%;
    margin-top: 1rem;
    justify-content: center;
    gap: .5rem;
    min-height: 48px;
    font-weight: 700;
}
.edu-pay-hero {
    text-align: center;
    max-width: 560px;
    margin: 0 auto 1.5rem;
}
.edu-pay-hero__icon {
    width: 72px; height: 72px;
    margin: 0 auto .85rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background: linear-gradient(135deg, #ecfdf5, #d1fae5);
    color: #059669;
    box-shadow: 0 4px 16px rgba(5, 150, 105, .15);
}
.edu-pay-hero h1 {
    margin: 0 0 .35rem;
    font-size: clamp(1.2rem, 2.5vw, 1.45rem);
    font-weight: 800;
    color: var(--text-dark);
}
.edu-pay-hero p { margin: 0; font-size: .86rem; color: var(--text-muted); }
.edu-pay-hero__uid {
    display: inline-block;
    margin-top: .35rem;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: var(--bg-section-alt);
    font-weight: 700;
    color: var(--text-dark);
    font-size: .82rem;
}
.edu-pay-info-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto 1rem;
}
@media (max-width: 700px) { .edu-pay-info-row { grid-template-columns: 1fr; } }
.edu-pay-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .65rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
}
.edu-pay-status--ok { background: #ecfdf5; color: #059669; }
.edu-pay-status--wait { background: #fffbeb; color: #d97706; }
.edu-pay-qr-card {
    max-width: 980px;
    margin: 0 auto 1rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.edu-pay-qr-card__body { padding: 1.25rem 1.35rem 1.35rem; }
.edu-pay-qr-title {
    text-align: center;
    margin: 0 0 .35rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-dark);
}
.edu-pay-qr-lead {
    text-align: center;
    margin: 0 0 1.1rem;
    font-size: .82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.edu-pay-qr-grid {
    display: grid;
    grid-template-columns: minmax(150px, 190px) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    max-width: 720px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .edu-pay-qr-grid { grid-template-columns: 1fr; justify-items: center; }
}
.edu-pay-qr-img-wrap {
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #fff;
    text-align: center;
}
.edu-pay-qr-img { display: block; width: 150px; height: auto; max-width: 100%; }
.edu-pay-qr-dl {
    display: inline-block;
    margin-top: .65rem;
    padding: .4rem .85rem;
    border-radius: 8px;
    font-size: .78rem;
    font-weight: 600;
    color: #fff !important;
    background: var(--primary);
    text-decoration: none;
}
.edu-pay-qr-dl:hover { opacity: .92; color: #fff !important; }
.edu-pay-qr-list { list-style: none; margin: 0; padding: 0; width: 100%; }
.edu-pay-qr-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: .75rem;
    padding: .55rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: .84rem;
}
.edu-pay-qr-row:last-child { border-bottom: none; }
.edu-pay-qr-k { color: var(--text-muted); font-weight: 600; min-width: 100px; flex-shrink: 0; }
.edu-pay-qr-v { color: var(--text-dark); font-weight: 600; text-align: right; word-break: break-all; }
.edu-pay-qr-v--amount { color: var(--primary); font-size: .95rem; }
.edu-pay-qr-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.edu-pay-copy {
    margin-left: .35rem;
    cursor: pointer;
    color: var(--primary);
    opacity: .75;
    transition: opacity .15s;
}
.edu-pay-copy:hover { opacity: 1; }
.edu-pay-qr-note {
    margin: 1rem 0 0;
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.edu-pay-online {
    max-width: 980px;
    margin: 0 auto;
    padding: 1rem 1.25rem 1.25rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    text-align: center;
}
.edu-pay-online__title {
    margin: 0 0 .75rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-dark);
}
.edu-pay-online-methods {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    margin-bottom: .85rem;
}
.edu-pay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    justify-content: center;
    margin-top: 1.25rem;
}

.lessons a.lesson { text-decoration: none; color: inherit; display: flex; }