/* Lane C — Video bài giảng và Bài giảng tương tác trong khung v2. Chỉ dùng token --v2-* của shell-v2.css.
   File này cũng được nạp ở trang ngoài khung v2 (trình soạn bài giảng, trang học sinh) cho trình phát video, nên mỗi
   màu là một biến --lc-* trỏ về token v2 (có giá trị dự phòng). Nền tối: token v2 tự đổi theo data-ui-theme="dark";
   các màu không có token (lớp phủ trên ảnh, nền trình phát) giống nhau ở cả hai nền. Mã màu chỉ nằm trong khối này. */
:root {
  --lc-card: var(--v2-card, #ffffff); --lc-card-2: var(--v2-card-2, #f4f7fc);
  --lc-line: var(--v2-line, #dfe6f1); --lc-line-2: var(--v2-line-2, #cbd5e3);
  --lc-fg: var(--v2-fg, #16213a); --lc-fg-2: var(--v2-fg-2, #3d4a5c);
  --lc-accent: var(--v2-accent, #2f5fe0); --lc-accent-soft: var(--v2-accent-soft, #e3ebfd);
  --lc-ok: var(--v2-ok, #138a4f); --lc-ok-soft: var(--v2-ok-soft, #e3f6ec);
  --lc-warn: var(--v2-warn, #9a6200); --lc-warn-soft: var(--v2-warn-soft, #fdf1d8);
  --lc-bad: var(--v2-bad, #c62f2f); --lc-bad-soft: var(--v2-bad-soft, #fde6e6);
  --lc-ai: var(--v2-ai, #6a4bd8); --lc-ai-soft: var(--v2-ai-soft, #efeaff);
  --lc-font: var(--v2-font, system-ui, sans-serif);
  --lc-info-fg: var(--v2-accent, #2f5fe0);
  --lc-overlay: rgba(4, 8, 18, 0.55); --lc-overlay-strong: rgba(4, 8, 18, 0.72); --lc-on-overlay: #ffffff; --lc-player-bg: #000000;
}
html[data-ui="v2"] .lc-chip--ai { background: var(--v2-ai-soft); color: var(--v2-ai); }
/* Chữ xanh trên nền xanh nhạt: ở nền tối token --v2-accent chưa đủ tương phản (3,2:1) nên dùng tông sáng hơn. */
html[data-ui="v2"][data-ui-theme="dark"] { --lc-info-fg: #a9c1ff; }
html[data-ui="v2"] .lc-chip--info { background: var(--v2-accent-soft); color: var(--lc-info-fg); }

/* Thanh dung lượng */
html[data-ui="v2"] .lc-quota { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-end; justify-content: space-between; margin-bottom: 16px; }
html[data-ui="v2"] .lc-meter { flex: 1 1 260px; max-width: 460px; font-size: 14px; }
html[data-ui="v2"] .lc-bar--ok > span { background: var(--v2-accent); }
html[data-ui="v2"] .lc-bar--warn > span { background: var(--v2-warn); }
html[data-ui="v2"] .lc-bar--bad > span { background: var(--v2-bad); }

/* Thẻ video */
html[data-ui="v2"] .lc-vgrid { align-items: stretch; }
html[data-ui="v2"] .lc-vcard { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-width: 0; }
html[data-ui="v2"] .lc-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--v2-card-2); display: grid; place-items: center; overflow: hidden; }
html[data-ui="v2"] .lc-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html[data-ui="v2"] .lc-thumb--blank { background: linear-gradient(135deg, var(--v2-accent-soft), var(--v2-card-2)); }
html[data-ui="v2"] .lc-play { position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--lc-overlay); color: var(--lc-on-overlay); }
html[data-ui="v2"] .lc-play .v2-ic { fill: currentColor; stroke: none; }
html[data-ui="v2"] .lc-dur { position: absolute; right: 8px; bottom: 8px; padding: 2px 7px; border-radius: 6px; background: var(--lc-overlay-strong); color: var(--lc-on-overlay); font-size: 12.5px; }
html[data-ui="v2"] .lc-thumb-state { position: relative; padding: 4px 12px; border-radius: 99px; background: var(--v2-warn-soft); color: var(--v2-warn); font-size: 13.5px; font-weight: 600; }
html[data-ui="v2"] .lc-thumb-state--bad { background: var(--v2-bad-soft); color: var(--v2-bad); }
html[data-ui="v2"] .lc-vbody { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 10px; flex: 1; min-width: 0; }
html[data-ui="v2"] .lc-vbody h3 { overflow-wrap: anywhere; }
html[data-ui="v2"] .lc-vbody p { margin: 0; }
html[data-ui="v2"] .lc-fail { font-size: 13.5px; color: var(--v2-bad); }
html[data-ui="v2"] .lc-vfoot { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
html[data-ui="v2"] .lc-skel > div { height: 240px; }

/* Ngăn kéo tải lên / YouTube */
.lc-field { display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; font-weight: 500; }
.lc-input { min-height: 42px; padding: 9px 12px; border: 1px solid var(--lc-line-2); border-radius: 10px; background: var(--lc-card); color: var(--lc-fg); font: 400 15px/1.3 var(--lc-font); width: 100%; box-sizing: border-box; }
.lc-input:focus-visible { outline: 2px solid var(--lc-accent); outline-offset: 1px; }
.lc-drop { position: relative; overflow-wrap: anywhere; }
.lc-drop.is-over, .lc-drop:focus-within { border-color: var(--lc-accent); background: var(--lc-accent-soft); }
.lc-drop .v2-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lc-upload-progress { display: flex; flex-direction: column; gap: 4px; }
.lc-upload-progress p { margin: 0; }
.lc-upload-progress .v2-kv span { overflow-wrap: anywhere; }
.v2-drawer .v2-bar { height: 8px; border-radius: 99px; background: var(--lc-line); overflow: hidden; }
.v2-drawer .v2-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--lc-accent); }

/* Trình phát */
.v2-drawer.lc-drawer--wide { width: min(880px, 100%); }
.lc-player { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--lc-player-bg); border-radius: 10px; overflow: hidden; display: grid; place-items: center; }
.lc-player video, .lc-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lc-player--loading, .lc-player--error { background: var(--lc-card-2); color: var(--lc-fg-2); padding: 16px; text-align: center; }
.lc-player--error { color: var(--lc-bad); }

/* Chia sẻ, giao video, báo cáo */
.lc-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lc-fieldset legend { font-weight: 600; font-size: 14.5px; margin-bottom: 6px; padding: 0; }
.lc-pick { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--lc-line); border-radius: 10px; cursor: pointer; }
.lc-pick > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-pick .v2-ic { margin-top: 1px; color: var(--lc-fg-2); }
.lc-pick input { margin-top: 3px; }
.lc-pick.is-on { border-color: var(--lc-accent); background: var(--lc-accent-soft); }
.lc-pick.is-locked { cursor: not-allowed; opacity: 0.7; background: var(--lc-card-2); }
.lc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.lc-check input { margin-top: 3px; flex: none; }
.lc-summary { padding: 12px 14px; border-radius: 10px; background: var(--lc-accent-soft); font-size: 14px; }
.lc-note { margin: 0; padding: 8px 12px; border-radius: 10px; font-size: 14px; }
.lc-note--ai { background: var(--lc-ai-soft); color: var(--lc-ai); }
.lc-note--ok { background: var(--lc-ok-soft); color: var(--lc-ok); }
.lc-note--bad { background: var(--lc-bad-soft); color: var(--lc-bad); }
.lc-grants p { margin: 0 0 6px; }
.lc-grant-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--lc-line); border-radius: 10px; }
.lc-grant-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 12px; border-top: 1px solid var(--lc-line); }
.lc-grant-list li:first-child { border-top: 0; }
.lc-grant-email { flex: 1 1 160px; overflow-wrap: anywhere; font-size: 14px; }
.v2-drawer .v2-btn--sm { min-height: 34px; padding: 5px 10px; font-size: 14px; }
.lc-report-title { margin: 0; font-size: 16px; }
.lc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lc-stats > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--lc-card-2); }
.lc-stats strong { font-size: 20px; }
.v2-drawer .v2-skel div { height: 48px; border-radius: 10px; background: var(--lc-card-2); margin-bottom: 10px; }

/* Bài giảng tương tác */
html[data-ui="v2"] .lc-lcard { display: flex; flex-direction: column; padding: 0; min-width: 0; }
html[data-ui="v2"] .lc-lcard .lc-vbody { padding-top: 16px; }
html[data-ui="v2"] .lc-lock-note { color: var(--v2-fg-2); }
html[data-ui="v2"] .lc-skel--short > div { height: 160px; }
html[data-ui="v2"] .lc-vfoot .v2-btn .v2-ic { width: 16px; height: 16px; }
.lc-note--warn { background: var(--lc-warn-soft); color: var(--lc-warn); }
.lc-note ul { margin: 6px 0 0; padding-left: 18px; }
.lc-outline { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.lc-outline li > span { display: block; }

/* Trang lớp › Video đã giao */
html[data-ui="v2"] .lc-class-videos { margin-top: 4px; }
html[data-ui="v2"] .lc-class-videos .v2-kv strong { overflow-wrap: anywhere; }
html[data-ui="v2"] .lc-late { color: var(--lc-bad); font-weight: 600; }
html[data-ui="v2"] .lc-inline-confirm { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--lc-bad-soft); font-size: 14px; }
html[data-ui="v2"] .lc-inline-confirm span { flex: 1 1 220px; }

/* Kết nối chéo (X1): trang Bài giảng / Video mở từ trang lớp — dải báo lớp chọn sẵn. */
.lc-target { margin: 0 0 12px; }