/* ═══ Riêng của ứng dụng học — nằm TRÊN chung.css (chép từ trang hocai) ═══ */

/* thanh trên cùng */
.dau-trang{position:sticky;top:0;z-index:50;background:rgba(11,15,25,.92);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--vien)}
.dau-trang .bao{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px}
.logo{font-weight:800;color:var(--chu);font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.logo span{color:var(--nhan)}
.logo:hover{text-decoration:none;color:var(--chu)}
.tk-khu{display:flex;gap:8px;align-items:center;font-size:14px;min-width:0}
.tk-ten{color:var(--chu-nhat);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.nut-nho{display:inline-block;padding:8px 14px;border-radius:9px;font-weight:700;font-size:14px;
  border:1px solid var(--vien-sang);background:transparent;color:var(--chu);cursor:pointer;font-family:inherit;
  white-space:nowrap}
.nut-nho:hover{background:rgba(255,255,255,.06);text-decoration:none;color:var(--chu)}
.nut-nho.dac{background:var(--nut);border-color:var(--nut)}
.nut-nho.dac:hover{background:var(--nut-sang)}

/* thẻ khoá học */
.luoi-khoa{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:30px}
.the-khoa{background:var(--the);border:1px solid var(--vien);border-radius:16px;overflow:hidden;
  box-shadow:var(--bong);display:flex;flex-direction:column;color:var(--chu)}
.the-khoa:hover{text-decoration:none;color:var(--chu);border-color:var(--vien-sang);transform:translateY(-2px)}
.the-khoa{transition:transform .15s,border-color .15s}
.the-khoa .anh-khoa{aspect-ratio:16/9;background:#000 center/cover no-repeat;position:relative}
.the-khoa .than{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.the-khoa h3{margin:0}
.the-khoa .mo{font-size:14.5px;line-height:1.55;margin:0}
.the-khoa .chan{margin-top:auto;padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.nhan-khoa{position:absolute;left:12px;top:12px;font-size:12.5px;font-weight:800;padding:5px 10px;
  border-radius:999px;background:rgba(11,15,25,.85);border:1px solid var(--vien-sang);letter-spacing:.02em}
.nhan-khoa.mo-roi{border-color:var(--xanh-vien);color:var(--xanh)}
.nhan-khoa.mien-phi{border-color:var(--vang-vien);color:var(--vang)}
.gia-khoa{font-weight:800;font-size:18px;color:var(--nhan)}

/* hộp thoại đăng nhập */
.hop-thoai{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.66);display:none;
  align-items:flex-start;justify-content:center;padding:6vh 14px;overflow-y:auto}
.hop-thoai.hien{display:flex}
.hop-thoai .form-hop{margin:0;width:100%;max-width:440px;position:relative}
.dong-x{position:absolute;right:12px;top:10px;background:none;border:0;color:var(--chu-nhat);
  font-size:28px;cursor:pointer;line-height:1;padding:4px 8px}
.the-chon{display:flex;gap:6px;margin:0 0 22px;background:var(--nen);padding:5px;border-radius:12px}
.the-chon button{flex:1;padding:11px 8px;border:0;border-radius:9px;background:transparent;color:var(--chu-nhat);
  font-weight:800;font-size:15px;cursor:pointer;font-family:inherit}
.the-chon button.dang{background:var(--the-2);color:var(--chu)}

/* trang học */
.khung-hoc{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start;padding:22px 0 60px}
@media(max-width:960px){.khung-hoc{grid-template-columns:minmax(0,1fr)}}
.man-hinh{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:16/9;
  border:1px solid var(--vien)}
.man-hinh video{width:100%;height:100%;display:block;background:#000}
.phu-khoa{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;
  padding:20px;background:linear-gradient(rgba(11,15,25,.72),rgba(11,15,25,.92)) center/cover}
.phu-khoa.hien{display:flex}
.phu-khoa .o{max-width:460px;margin:0 auto;padding:20px 22px}
.ten-bai{margin:16px 0 4px;font-size:clamp(20px,2.6vw,26px)}
.ds-bai{background:var(--the);border:1px solid var(--vien);border-radius:14px;overflow:hidden}
.ds-bai h4{margin:0;padding:14px 16px 8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--nhan)}
.dong-bai{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:11px 16px;border:0;
  background:transparent;color:var(--chu);font-family:inherit;font-size:15px;cursor:pointer;line-height:1.45;
  border-top:1px solid var(--vien)}
.dong-bai:hover{background:rgba(255,255,255,.04)}
.dong-bai.dang{background:var(--do-nhat)}
.dong-bai .so{flex:0 0 26px;color:var(--chu-nhat);font-weight:700;font-size:13.5px;padding-top:1px}
.dong-bai .chu{flex:1;min-width:0}
.dong-bai .phut{flex:0 0 auto;color:var(--chu-nhat);font-size:13px;padding-top:2px}
.dong-bai .dau{flex:0 0 18px;text-align:center;padding-top:1px}
.dong-bai .thu{display:inline-block;font-size:11.5px;font-weight:800;color:var(--vang);border:1px solid var(--vang-vien);
  border-radius:999px;padding:0 7px;margin-left:6px;vertical-align:1px}
.ds-cuon{max-height:calc(100vh - 120px);overflow-y:auto}
@media(max-width:960px){.ds-cuon{max-height:none}}

.hop-mua{margin-top:18px}
.hop-mua .gia-to{font-size:clamp(30px,5vw,40px);font-weight:800;color:var(--nhan);margin:4px 0 2px}
.qr-nho{width:220px;max-width:100%;background:#fff;border-radius:12px;padding:8px;display:block;margin:10px auto}
.an{display:none !important}

/* ── điện thoại: thanh trên gọn lại, lớp che video không tràn khung ── */
@media(max-width:520px){
  .dau-trang .bao{padding:0 12px;min-height:54px;gap:8px}
  .logo{font-size:14px}
  .tk-khu{gap:6px}
  .nut-nho{padding:7px 10px;font-size:13px}
  .tk-ten{max-width:32vw;font-size:13px}
  .phu-khoa{padding:10px}
  .phu-khoa .o{padding:12px 14px}
  .phu-khoa h3{font-size:17px;margin-bottom:6px}
  .phu-khoa p.mo{display:none}
  .phu-khoa .nut{padding:11px 20px;font-size:15px}
  .phu-khoa p{margin-bottom:0}
}