/* ========================================================================= Geru — learn.css KHU HỌC: bảng điều khiển học viên, trang bài học, nội dung khoá học. Nguyên tắc: - Chỉ dùng token đã khai báo ở main.css. KHÔNG có mã hex mới ở đây, nhờ vậy chế độ tối tự chạy theo, không cần khối @media riêng. - Cam --brand chỉ xuất hiện ở: nút hành động chính, thanh tiến độ, dấu bài đã hoàn thành. Không dùng làm nền lớn. - Yên tĩnh: nền phẳng, đường kẻ mảnh, không đổ bóng nặng. ========================================================================= */ /* ------------------------------------------------------------------------- 1. KHUNG CHUNG KHU HỌC ---------------------------------------------------------------------- */ .geru-learn-page { display: flex; flex-direction: column; gap: var(--sp-5); } /* Ở khu học, khoảng đệm dọc gọn hơn phần còn lại của site. ⚠️ Class cờ trên là `geru-learn-screen`, KHÔNG phải `geru-learn`. `.geru-learn` là khối lưới 2 cột của trang bài học (dòng 133). Trước đây hai thứ trùng tên nên cũng thành lưới 2 cột — toàn bộ nội dung bị dồn vào cột 320px bên phải ở màn hình rộng. Đừng đặt lại tên trùng. */ body.geru-learn-screen .site-main { padding-block: var(--sp-5); gap: var(--sp-5); } .geru-crumbs { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; font-size: 0.85rem; color: var(--ink-3); } .geru-crumbs a { color: var(--ink-3); text-decoration: none; } .geru-crumbs a:hover { color: var(--brand-ink); } .geru-crumbs__sep { color: var(--ink-4); } .geru-section-title { font-size: 0.74rem; font-weight: 760; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); } .geru-empty { color: var(--ink-3); font-size: 0.92rem; padding: var(--sp-4); } .geru-empty--sm { padding: var(--sp-2) var(--sp-4); font-size: 0.86rem; } /* Khối thông báo trung tính — dùng cho trạng thái chưa ghi danh, chưa có dữ liệu. */ .geru-notice { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-6); max-width: var(--wrap-narrow); } .geru-notice__title { font-size: 1.08rem; font-weight: 780; letter-spacing: -0.02em; color: var(--ink); } .geru-notice__text { color: var(--ink-2); font-size: 0.96rem; } /* ------------------------------------------------------------------------- 2. THANH TIẾN ĐỘ ---------------------------------------------------------------------- */ .geru-progress { display: block; width: 100%; height: 6px; border-radius: var(--r-pill); background: var(--sunken); border: 1px solid var(--line); overflow: hidden; } .geru-progress__fill { display: block; height: 100%; background: var(--brand); border-radius: var(--r-pill); transition: width var(--dur) var(--ease); } .geru-progress--slim { height: 4px; } /* ------------------------------------------------------------------------- 3. TRANG BÀI HỌC — bố cục 2 cột, cột bên thu gọn được ---------------------------------------------------------------------- */ .geru-aside-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .geru-learn { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-6); align-items: start; } /* Cột bên bị thu gọn: nội dung bài chiếm toàn bộ chiều ngang. */ .geru-aside-toggle:checked ~ .geru-learn { grid-template-columns: minmax(0, 1fr); } .geru-aside-toggle:checked ~ .geru-learn .geru-learn__aside { display: none; } .geru-learn__main { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; } .geru-learn__aside { position: sticky; top: calc(68px + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-4); max-height: calc(100vh - 68px - var(--sp-6)); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-4); } .geru-learn__aside-head { display: flex; flex-direction: column; gap: var(--sp-2); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--line); } .geru-learn__aside-course { font-size: 0.98rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); text-decoration: none; } .geru-learn__aside-course:hover { color: var(--brand-ink); } /* Nút thu gọn / mở lại cột bên */ .geru-aside-btn { display: inline-flex; align-items: center; gap: var(--sp-2); align-self: flex-start; padding: 0.35rem 0.8rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface); color: var(--ink-2); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; cursor: pointer; user-select: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .geru-aside-btn:hover { background: var(--sunken); color: var(--ink); } .geru-aside-btn__open { display: none; } .geru-aside-toggle:checked ~ .geru-learn .geru-aside-btn__open { display: inline; } .geru-aside-toggle:checked ~ .geru-learn .geru-aside-btn__close { display: none; } @media (max-width: 1000px) { .geru-learn { grid-template-columns: minmax(0, 1fr); } .geru-learn__aside { position: static; max-height: none; order: 2; } .geru-learn__main { order: 1; } } /* ------------------------------------------------------------------------- 4. KHUNG VIDEO — tỷ lệ 16:9, không phụ thuộc nhà cung cấp ---------------------------------------------------------------------- */ .geru-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .geru-video__frame, .geru-video__frame > * { width: 100%; height: 100%; } .geru-video__frame { display: block; } /* Bất kể nhà cung cấp nào nhét gì vào trong, ép nó lấp đầy khung. */ .geru-video__frame iframe, .geru-video__frame video, .geru-video__frame embed, .geru-video__frame object, .geru-video__frame .fluid-width-video-wrapper, .geru-video__frame .wp-video, .geru-video__frame .mejs-container, .geru-video__frame > div { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none; border: 0; display: block; } .geru-video__frame video { background: var(--sunken); object-fit: contain; } /* Khối dự phòng: hiện khi chưa có video, hoặc khi video báo lỗi. */ .geru-video__fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; padding: var(--sp-5); background: var(--sunken); } .geru-video.has-media .geru-video__fallback { display: none; } .geru-video.is-broken .geru-video__frame { display: none; } .geru-video.is-broken .geru-video__fallback { display: flex; } .geru-video__fallback-title { font-size: 1rem; font-weight: 780; letter-spacing: -0.02em; color: var(--ink); } .geru-video__fallback-text { font-size: 0.9rem; line-height: 1.6; color: var(--ink-3); max-width: 46ch; } /* ------------------------------------------------------------------------- 5. NỘI DUNG BÀI HỌC ---------------------------------------------------------------------- */ .geru-lesson__head { display: flex; flex-direction: column; gap: var(--sp-2); } .geru-lesson__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); font-weight: 820; letter-spacing: -0.03em; line-height: 1.2; color: var(--ink); } .geru-lesson__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; color: var(--ink-3); font-size: 0.85rem; } .geru-lesson__body { display: flex; flex-direction: column; gap: var(--sp-4); max-width: var(--wrap-narrow); color: var(--ink-2); font-size: 1.02rem; line-height: 1.72; } .geru-lesson__body > h2, .geru-lesson__body > h3, .geru-lesson__body > h4 { color: var(--ink); margin-top: var(--sp-3); } .geru-lesson__body ul, .geru-lesson__body ol { display: flex; flex-direction: column; gap: var(--sp-2); padding-left: 1.35rem; } .geru-lesson__body ul { list-style: disc; } .geru-lesson__body ol { list-style: decimal; } .geru-lesson__body li::marker { color: var(--ink-4); } .geru-lesson__body img, .geru-lesson__body figure { border-radius: var(--r-md); } /* Tài liệu đính kèm */ .geru-attachments { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); max-width: var(--wrap-narrow); } .geru-attachments ul { display: flex; flex-direction: column; gap: var(--sp-2); } .geru-attachments a { color: var(--ink-2); font-size: 0.92rem; text-decoration: none; } .geru-attachments a:hover { color: var(--brand-ink); } /* ------------------------------------------------------------------------- 6. ĐÁNH DẤU HOÀN THÀNH + ĐIỀU HƯỚNG BÀI ---------------------------------------------------------------------- */ .geru-lesson__actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-top: var(--sp-4); border-top: 1px solid var(--line); } .geru-complete-form { margin: 0; } .geru-done-flag { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 0.88rem; font-weight: 700; color: var(--brand-ink); } /* Dấu tích vẽ bằng CSS thuần — không cần file ảnh, không cần font icon. */ .geru-done-flag__mark { position: relative; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; border-radius: var(--r-pill); background: var(--brand); } .geru-done-flag__mark::after { content: ""; position: absolute; left: 0.38rem; top: 0.2rem; width: 0.28rem; height: 0.55rem; border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); } .geru-lesson__nav { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); padding-top: var(--sp-4); border-top: 1px solid var(--line); } .geru-lesson__nav a { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--ink); font-weight: 660; font-size: 0.95rem; text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .geru-lesson__nav a:hover { background: var(--sunken); border-color: var(--line-2); color: var(--ink); } .geru-lesson__nav .geru-lesson__nav-label { font-size: 0.7rem; font-weight: 720; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); } .geru-lesson__nav--next { text-align: right; align-items: flex-end; } /* ------------------------------------------------------------------------- 7. CÂY CHƯƠNG / BÀI ---------------------------------------------------------------------- */ .geru-curriculum { display: flex; flex-direction: column; gap: var(--sp-2); list-style: none; padding: 0; counter-reset: none; } .geru-topic { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); overflow: hidden; } .geru-topic__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); cursor: pointer; list-style: none; font-size: 0.92rem; color: var(--ink); transition: background var(--dur) var(--ease); } .geru-topic__head::-webkit-details-marker { display: none; } .geru-topic__head:hover { background: var(--sunken); } .geru-topic__index { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: var(--r-sm); background: var(--sunken); border: 1px solid var(--line); font-size: 0.76rem; font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink-3); } .geru-topic__title { flex: 1 1 auto; font-weight: 720; letter-spacing: -0.015em; line-height: 1.3; min-width: 0; } .geru-topic__count { flex: 0 0 auto; font-size: 0.76rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .geru-topic__items { display: flex; flex-direction: column; border-top: 1px solid var(--line); } /* Từng bài */ .geru-item { border-bottom: 1px solid var(--line); } .geru-item:last-child { border-bottom: 0; } .geru-item__link { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3); color: var(--ink-2); text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } a.geru-item__link:hover { background: var(--sunken); color: var(--ink); } .geru-item__mark { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.22rem; border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: transparent; } .geru-item__body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .geru-item__title { font-size: 0.9rem; line-height: 1.4; font-weight: 600; } .geru-item__meta { font-size: 0.74rem; color: var(--ink-3); letter-spacing: 0.01em; } /* Đã hoàn thành — chỗ duy nhất trong cây dùng màu cam. */ .geru-item.is-done .geru-item__mark { background: var(--brand); border-color: var(--brand); } .geru-item.is-done .geru-item__title { color: var(--ink-3); } /* Bài đang xem */ .geru-item.is-current > .geru-item__link { background: var(--sunken); color: var(--ink); box-shadow: inset 2px 0 0 var(--brand); } .geru-item.is-current .geru-item__title { font-weight: 760; color: var(--ink); } /* Bài bị khoá */ .geru-item.is-locked .geru-item__link { cursor: not-allowed; color: var(--ink-4); } .geru-item.is-locked .geru-item__mark { border-style: dashed; } /* ------------------------------------------------------------------------- 8. BẢNG ĐIỀU KHIỂN HỌC VIÊN ---------------------------------------------------------------------- */ .geru-dash { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-6); align-items: start; } @media (max-width: 900px) { .geru-dash { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); } } .geru-dash__aside { display: flex; flex-direction: column; gap: var(--sp-4); position: sticky; top: calc(68px + var(--sp-4)); } @media (max-width: 900px) { .geru-dash__aside { position: static; } } .geru-dash__user { display: flex; align-items: center; gap: var(--sp-3); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); } .geru-dash__avatar img { border-radius: var(--r-pill); } .geru-dash__name { font-size: 0.98rem; font-weight: 780; letter-spacing: -0.02em; line-height: 1.25; color: var(--ink); } .geru-dash__nav ul { display: flex; flex-direction: column; gap: 2px; } .geru-dash__nav a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--ink-2); font-size: 0.92rem; font-weight: 620; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .geru-dash__nav a:hover { background: var(--sunken); color: var(--ink); } .geru-dash__nav .is-active > a { background: var(--sunken); color: var(--ink); font-weight: 740; box-shadow: inset 2px 0 0 var(--brand); } @media (max-width: 900px) { .geru-dash__nav ul { flex-direction: row; flex-wrap: wrap; gap: var(--sp-1); } .geru-dash__nav .is-active > a { box-shadow: none; border: 1px solid var(--line-2); } } .geru-dash__body { display: flex; flex-direction: column; gap: var(--sp-6); min-width: 0; } .geru-dash__block { display: flex; flex-direction: column; gap: var(--sp-4); } .geru-dash__block-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; } /* Số liệu tóm tắt — không màu mè, chỉ chữ và đường kẻ. */ .geru-stats { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); } .geru-stat { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); } .geru-stat__value { font-size: 1.7rem; font-weight: 840; letter-spacing: -0.035em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; } .geru-stat__label { font-size: 0.78rem; color: var(--ink-3); } /* Danh sách khoá đang học — hàng ngang gọn, không phải thẻ to. */ .geru-course-rows { display: flex; flex-direction: column; gap: var(--sp-3); } .geru-course-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur) var(--ease); } .geru-course-row:hover { border-color: var(--line-2); } @media (max-width: 700px) { .geru-course-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .geru-course-row__thumb { max-width: 200px; } } .geru-course-row__thumb { display: block; border-radius: var(--r-sm); overflow: hidden; background: var(--sunken); aspect-ratio: 16 / 9; } .geru-course-row__thumb img { width: 100%; height: 100%; object-fit: cover; } .geru-course-row__main { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; } .geru-course-row__title { font-size: 1rem; font-weight: 760; letter-spacing: -0.02em; line-height: 1.3; } .geru-course-row__title a { color: var(--ink); text-decoration: none; } .geru-course-row__title a:hover { color: var(--brand-ink); } .geru-course-row__meta { font-size: 0.8rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .geru-course-row__action { flex: 0 0 auto; } /* ------------------------------------------------------------------------- 9. THẺ KHOÁ HỌC TRONG DANH SÁCH ---------------------------------------------------------------------- */ .card--course .card__progress { display: flex; flex-direction: column; gap: var(--sp-2); } .geru-course-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); } /* ------------------------------------------------------------------------- 10. NỘI DUNG KHOÁ HỌC CHO NGƯỜI ĐÃ GHI DANH ---------------------------------------------------------------------- */ .geru-continue { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); } .geru-continue__main { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 18rem; min-width: 0; } .geru-continue__label { font-size: 0.72rem; font-weight: 720; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); } .geru-continue__title { font-size: 1.02rem; font-weight: 760; letter-spacing: -0.02em; line-height: 1.3; color: var(--ink); } .geru-continue__stat { font-size: 0.84rem; color: var(--ink-3); font-variant-numeric: tabular-nums; } .geru-course-content { display: flex; flex-direction: column; gap: var(--sp-4); } /* ------------------------------------------------------------------------- 11. IN ---------------------------------------------------------------------- */ @media print { .geru-learn__aside, .geru-aside-btn, .geru-lesson__nav, .geru-lesson__actions, .geru-video { display: none; } .geru-learn { grid-template-columns: 1fr; } }