/* Reskin TutorLMS (trang khoá học đơn — single-course) theo đúng token brand Luviart.
   TutorLMS tự định nghĩa 1 bộ CSS custom property riêng (--tutor-color-*) mà toàn bộ CSS của
   plugin đọc lại — cách "update-safe" nhất để đổi màu là GHI ĐÈ ĐÚNG các biến đó bằng token của
   theme (var(--lv-*)) thay vì chọn từng class riêng lẻ: dù Tutor đổi cấu trúc HTML/class ở bản
   cập nhật sau, biến CSS này thường được giữ ổn định hơn nhiều so với tên class nội bộ. Tự động
   đúng cả dark mode vì var(--lv-primary) đã tự đổi theo html[data-theme="dark"] trong tokens.css. */
:root {
  --tutor-color-primary: var(--lv-primary);
  --tutor-color-primary-hover: var(--lv-primary-hover);
  --tutor-color-primary-rgb: 62, 92, 62;
  --tutor-border-color: var(--lv-border);
}
html[data-theme="dark"] {
  --tutor-color-primary-rgb: 134, 172, 121;
}

/* Font: .tutor-wrap đã kế thừa đúng Work Sans/Fraunces qua body/html h1-h3 của theme — khai lại
   tường minh ở đây chỉ để chốt ý định, phòng khi Tutor thêm rule font-family riêng ở bản sau. */
.tutor-wrap { font-family: var(--lv-font-body); color: var(--lv-text); }
.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3 { font-family: var(--lv-font-heading); color: var(--lv-text); }

/* Thẻ khoá học ngoài trang danh sách (archive-course, trang tài khoản...) không nằm trong
   .tutor-wrap nên không kế thừa được rule color phía trên — .tutor-course-name của Tutor
   hardcode màu chữ tối (#212327) không đọc theo token nào, làm tiêu đề khoá học gần như vô hình
   trên nền thẻ tối ở dark mode (đã xác nhận qua getComputedStyle, không phải lỗi ảnh chụp màn
   hình). Ghi đè trực tiếp bằng token text để tự đổi đúng theo light/dark. */
.tutor-course-name, .tutor-course-name a { color: var(--lv-text) !important; }

/* Bug 0037: cùng gốc lỗi với bug 0002 ngay ở trên — metadata thẻ khoá học (số bài học, thời lượng
   qua .tutor-meta-value; tên giảng viên/danh mục qua .tutor-meta a) cũng hardcode cùng màu tối
   #212327, gần như vô hình trên nền thẻ tối. */
.tutor-meta-value, .tutor-meta a { color: var(--lv-text) !important; }

/* Container: Tutor tự có .tutor-container riêng (kiểu Bootstrap, padding 12px cố định mọi màn
   hình) — không dùng chung .lv-container của theme được (Tutor tự bọc bằng JS/PHP riêng), nên
   phải nới padding ngay trên class của chính Tutor để khớp nhịp 24px/16px đang dùng toàn site. */
.tutor-container { padding-left: 24px; padding-right: 24px; }
@media (max-width: 480px) {
  .tutor-container { padding-left: 16px; padding-right: 16px; }
}

/* Nút chính (Bắt đầu học/Ghi danh...) theo đúng thẩm mỹ .lv-btn: mono viết hoa, bo góc token */
.tutor-btn-primary {
  font-family: var(--lv-font-mono) !important;
  font-weight: 500 !important;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: var(--lv-radius) !important;
}
/* Nút viền (Hoàn tất khoá...) hiện màu hồng #CC3366 mặc định của reset.css — cùng lỗi hệ thống
   "button không màu riêng bị lộ màu reset.css" đã ghi chú ở block Plyr bên dưới. */
.tutor-btn-outline-primary {
  color: var(--lv-primary) !important;
  border-color: var(--lv-primary) !important;
  border-radius: var(--lv-radius) !important;
}
.tutor-btn-outline-primary:hover, .tutor-btn-outline-primary:focus {
  background: var(--lv-primary) !important;
  color: var(--lv-bg) !important;
}

/* Tab "Giới thiệu/Đánh giá/Hỏi đáp/Thông báo": gạch chân active dùng đúng primary token (Tutor
   mặc định đang tự đọc --tutor-color-primary nên phần lớn đã đúng màu qua bước ghi đè biến ở
   trên — chỉ cần đảm bảo font nhãn tab đúng mono nhỏ, khớp .lv-eyebrow, không phải font mặc định) */
.tutor-nav-link {
  font-family: var(--lv-font-mono);
  letter-spacing: .3px;
}

/* Card sidebar (Tiến độ khoá học, Giảng viên...) — viền token thay vì shadow mặc định của Tutor,
   khớp .lv-card đang dùng khắp site. */
.tutor-sidebar-card, .tutor-card {
  border: 1px solid var(--lv-border) !important;
  box-shadow: none !important;
  background: var(--lv-card) !important;
}

/* Nút điều khiển video (thư viện Plyr, TutorLMS dùng cho video bài học) hiện màu hồng #CC3366 —
   ĐÚNG lỗi hệ thống đã gặp nhiều lần (reset.css của Hello Elementor có
   "[type=button],[type=submit],button{border:1px solid #c36;color:#c36}" thắng vì Plyr không tự
   set color/border cho <button class="plyr__control">, để lộ màu mặc định của reset.css) — áp
   dụng đúng kỹ thuật đã dùng cho các nút .lv-* trong base.css. */
:root { --plyr-color-main: var(--lv-primary); }
.plyr__control { color: var(--lv-text) !important; border-color: transparent !important; }
.plyr__control:hover, .plyr__control[aria-pressed="true"] { background: var(--lv-primary) !important; color: var(--lv-bg) !important; }
.plyr--video .plyr__control.plyr__tab-focus,
.plyr--video .plyr__control:hover,
.plyr--video .plyr__control[aria-expanded=true] { background: var(--lv-primary) !important; }
input[type=range].plyr__slider-progress, .plyr input[type=range] { color: var(--lv-primary); }

/* ---- Trang single-course tự viết (mục 13, đợt 7) — tutor/single-course.php ----
   Tái dùng .lv-gallery-yt-play/.lv-gallery-yt-label (woocommerce.css) cho nút play/nhãn góc,
   .lv-specs-, .lv-difficulty-, .lv-review-, .lv-product-layout (woocommerce.css) cho bảng thông
   số/độ khó/ghi chú học viên/bố cục 2 cột sticky — chỉ thêm CSS THẬT SỰ mới ở dưới đây.
   (Bug 0025: comment gốc dùng dấu sao ngay trước dấu gạch chéo để viết tắt "lớp bắt đầu bằng
   tiền tố này" (lặp lại 3 lần liên tiếp trên 1 dòng) — 2 ký tự đó đứng cạnh nhau VÔ TÌNH khớp
   đúng token đóng comment CSS thật, đóng sớm comment này rồi biến nội dung còn lại cộng với
   comment "display:block bắt buộc" ngay dưới thành 1 phần mở đầu rule không hợp lệ, khiến trình
   duyệt nuốt mất nguyên rule display:block của .lv-course-video — xem mục 30,
   LUVIART-DEV-REFERENCE.md. Bỏ hẳn dấu sao khỏi văn xuôi để tránh lặp lại lỗi này — kể cả trong
   comment giải thích này, không gõ lại 2 ký tự đó cạnh nhau.) */

/* display:block bắt buộc — trạng thái đã mua dùng thẻ <a> (link tới bài đang học), <a> mặc định
   là inline nên "height" sẽ bị trình duyệt bỏ qua nếu không khai display, làm khối giãn theo nội
   dung ảnh bên trong thay vì đúng 400px/220px đã set. */
.lv-course-video { display: block; position: relative; height: 400px; border: 1px solid var(--lv-border); overflow: hidden; }
.lv-course-video img, .lv-course-video iframe { width: 100%; height: 100%; object-fit: cover; display: block; border: 0; }
.lv-course-video[data-lv-yt] { cursor: pointer; }

/* Khối COMBO RẬP + KHOÁ (13.4b) */
.lv-combo-box { border: 1px solid var(--lv-brass); background: var(--lv-card); padding: 18px 20px; }
.lv-combo-old-price { font-family: var(--lv-font-mono); font-size: 12px; text-decoration: line-through; opacity: .5; }
.lv-combo-price { font-family: var(--lv-font-heading); font-weight: 600; font-size: 20px; }

/* CHƯƠNG TRÌNH HỌC (13.6) — bảng phẳng chương/bài */
.lv-curriculum { border: 1px solid var(--lv-border); }
.lv-curriculum .chaphead {
  padding: 11px 18px; background: var(--lv-bg); border-bottom: 1px solid var(--lv-border);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.lv-curriculum .chaphead + .chaphead { border-top: 1px solid var(--lv-border); }
.lv-curriculum .chaphead-title {
  font-family: var(--lv-font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--lv-primary);
}
.lv-curriculum .chaphead-meta { font-family: var(--lv-font-mono); font-size: 11px; color: var(--lv-text-secondary); }
.lv-curriculum .lesson {
  display: flex; align-items: center; gap: 16px; padding: 13px 18px;
  border-bottom: 1px solid var(--lv-border); background: var(--lv-card);
}
.lv-curriculum .lesson:last-child { border-bottom: none; }
.lv-curriculum .lesson-num { font-family: var(--lv-font-mono); font-size: 11px; color: var(--lv-text-secondary); width: 26px; flex-shrink: 0; }
.lv-curriculum .lesson-num-done { color: var(--lv-primary); }
.lv-curriculum .lesson-title { flex: 1; font-size: 14px; }
.lv-curriculum .lesson-done .lesson-title { opacity: .6; }
.lv-curriculum .lesson-current { background: var(--lv-bg); border-left: 3px solid var(--lv-brass); }
.lv-curriculum .lesson-current .lesson-title { font-weight: 600; }
.lv-curriculum .lesson-duration { font-family: var(--lv-font-mono); font-size: 11px; color: var(--lv-text-secondary); flex-shrink: 0; }
.lv-curriculum .lesson-flag {
  font-family: var(--lv-font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
  border: 1px solid var(--lv-brass); color: var(--lv-brass); padding: 2px 6px; flex-shrink: 0;
}

/* BẠN SẼ LÀM ĐƯỢC GÌ (13.7) — grid 3 cột nối đường kẻ 1px */
.lv-outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lv-border); border: 1px solid var(--lv-border); }
.lv-outcome-card { background: var(--lv-card); }
.lv-outcome-card img { width: 100%; height: 190px; object-fit: cover; display: block; }
.lv-outcome-card-body { padding: 18px 20px; border-top: 1px solid var(--lv-border); }

/* KHOÁ HỌC KHÁC (13.10) — grid 2 cột nối đường kẻ 1px, icon-frame tái dùng từ single-product.php */
.lv-other-courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--lv-border); border: 1px solid var(--lv-border); }
.lv-other-course-card { background: var(--lv-card); color: var(--lv-text); padding: 24px; display: flex; gap: 20px; align-items: center; }

/* THÀNH PHẨM CỦA HỌC VIÊN (17.2) — grid 3 cột nối đường kẻ 1px, tái dùng .lv-line-grid/.lv-line-cell
   (base.css) cho thẻ ảnh, .lv-combo-box (khối brass ở trên) cho khung nhắc gửi ảnh. */
.lv-showcase-grid { grid-template-columns: repeat(3, 1fr); }
.lv-showcase-reminder { margin-bottom: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lv-showcase-form { border: 1px solid var(--lv-border); background: var(--lv-card); padding: 18px 20px; margin-bottom: 24px; display: none; }
.lv-showcase-form.is-open { display: block; }
.lv-showcase-form textarea { width: 100%; background: var(--lv-bg); border: 1px solid var(--lv-border); color: var(--lv-text); padding: 10px 12px; font-family: var(--lv-font-body); font-size: 14px; resize: vertical; box-sizing: border-box; margin-top: 12px; }
.lv-showcase-form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }

@media (max-width: 900px) {
  .lv-course-video { height: 300px; }
  .lv-outcome-grid { grid-template-columns: repeat(2, 1fr); }
  .lv-showcase-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .lv-course-video { height: 220px; }
  .lv-outcome-grid, .lv-other-courses-grid { grid-template-columns: 1fr; }
  .lv-curriculum .lesson { gap: 10px; padding: 13px 14px; }
  .lv-curriculum .lesson-duration { display: none; }
}