/* Khung video xem thử. Phần còn lại của trang giữ nền trắng chữ đen. */
.khung-xem-thu {
  position: relative;
  display: inline-block;
  max-width: 100%;
  background: #000;
  line-height: 0;
  overflow: hidden; /* không cho hiệu ứng làm mờ tràn ra ngoài khung */
  border-radius: var(--bo-goc);
  user-select: none;
  -webkit-user-select: none;
}
.khung-xem-thu video { display: block; width: 420px; max-width: 100%; cursor: pointer; }
.khung-xem-thu:fullscreen { width: 100vw; height: 100vh; }
.khung-xem-thu:fullscreen video { width: 100%; height: 100%; object-fit: contain; }

/* Hoa văn watermark: lưới hình thoi + chữ, lặp kín khung, trôi chậm để không cắt bỏ được */
.hoa-van {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-size: 50% auto;
  background-repeat: repeat;
  animation: troi 40s linear infinite;
}
.khung-xem-thu:fullscreen .hoa-van { background-size: 25% auto; }
@keyframes troi {
  from { background-position: 0 0; }
  to { background-position: 300px 210px; }
}

/* Thanh điều khiển riêng (thay cho thanh mặc định của trình duyệt) */
.thanh-dieu-khien {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
  line-height: 1;
}
.thanh-dieu-khien input[type="range"] { flex: 1; min-width: 40px; margin: 0; }
.thoi-gian { color: #fff; font: 12px sans-serif; white-space: nowrap; }
.nut {
  background: none;
  border: 0;
  padding: 4px;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}
.nut svg { width: 24px; height: 24px; }
.icon-dung, .icon-tat-tieng, .icon-thu-nho { display: none; }
.khung-xem-thu.dang-phat .icon-phat { display: none; }
.khung-xem-thu.dang-phat .icon-dung { display: inline; }
.khung-xem-thu.tat-tieng .icon-co-tieng { display: none; }
.khung-xem-thu.tat-tieng .icon-tat-tieng { display: inline; }
.khung-xem-thu:fullscreen .icon-mo-rong { display: none; }
.khung-xem-thu:fullscreen .icon-thu-nho { display: inline; }
.khung-xem-thu:fullscreen .nut svg { width: 32px; height: 32px; }

/* Màn che khi người xem rời khỏi tab / cửa sổ */
.man-che {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  font: 16px sans-serif;
  line-height: 1.4;
  cursor: pointer;
  z-index: 2;
}
.man-che[hidden] { display: none; }
.khung-xem-thu.bi-che video { filter: blur(24px); }

@media (prefers-reduced-motion: reduce) {
  .hoa-van { animation: none; }
}

/* =================== Trang khách hàng =================== */
.loi-dan { color: var(--chu-phu); }
.quay-lai { margin-bottom: 12px; }
.chu-thich { color: var(--chu-phu); font-size: 0.9rem; margin-top: 10px; }
.mo-ta { margin-top: 18px; }

/* Danh sách video: mỗi video là một dòng trong vở, bấm được cả dòng */
.danh-sach-video { list-style: none; margin: 24px 0 0; padding: 0; border-top: 2px solid var(--dong-ke); }
.dong-video {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "ten gia" "nut nut";
  gap: 10px 16px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 2px solid var(--dong-ke);
  text-decoration: none;
  color: var(--chu);
}
.dong-video:hover { background: var(--muc-tim-nhat); }
/* Có đoạn mẫu: khung ngang 16:9 bên trái, chữ bên phải */
.dong-video.co-mau {
  grid-template-columns: 300px 1fr auto;
  grid-template-areas: "mau ten gia" "mau nut nut";
  align-items: start;
}
.mau-video {
  grid-area: mau;
  width: 300px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  background: var(--giay-dam);
  pointer-events: none;
}
.dong-video .ten-video { grid-area: ten; font-weight: 600; font-size: 1.15rem; }
.dong-video .gia { grid-area: gia; font-size: 1.15rem; }
.dong-video .nut-chinh { grid-area: nut; justify-self: start; }

/* Trang video */
.khoi-mua {
  margin: 28px 0 32px;
  padding: 20px;
  border: 2px solid var(--dong-ke);
  border-radius: var(--bo-goc);
  background: #fff;
  max-width: 460px;
}
.dong-gia { font-size: 1.1rem; margin-bottom: 14px; }
.gia-to { font-size: 1.6rem; }
.cac-buoc { padding-left: 1.4em; margin: 0; }
.cac-buoc li { margin-bottom: 10px; padding-left: 4px; }
.cac-buoc li::marker { color: var(--muc-tim); font-weight: 700; }

/* Trang thanh toán */
.khung-qr {
  background: #fff;
  border: 3px solid var(--muc-tim);
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  max-width: 380px;
  margin: 20px 0;
}
.khung-qr img { display: block; margin: 0 auto 12px; width: 300px; height: auto; }
.cach-quet { font-size: 0.95rem; }
.khung-qr p:last-child { margin: 0; font-size: 0.9rem; }

.trang-thai-cho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 28px;
  border-radius: var(--bo-goc);
  background: var(--muc-tim-nhat);
  font-weight: 600;
  max-width: 560px;
}
.cham-nhap-nhay {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muc-tim);
  animation: nhap-nhay 1.4s ease-in-out infinite;
}
@keyframes nhap-nhay { 50% { opacity: 0.25; transform: scale(0.7); } }

.thong-tin-ck { margin: 0 0 22px; max-width: 560px; border-top: 2px solid var(--dong-ke); }
.thong-tin-ck > div {
  display: grid;
  grid-template-columns: 9.5em 1fr;
  gap: 8px;
  padding: 12px 0;
  border-bottom: 2px solid var(--dong-ke);
  align-items: center;
}
.thong-tin-ck dt { color: var(--chu-phu); }
.thong-tin-ck dd { margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-weight: 600; }
.ma-don { font-size: 1.2rem; letter-spacing: 0.04em; color: var(--muc-tim); }
.nut-phu.da-chep { background: var(--la-nhat); border-color: var(--la); color: var(--la); }

.thanh-cong { text-align: center; margin: 8px 0 24px; }
.thanh-cong .dau-tich { margin: 0 auto 14px; }
.thanh-cong h1 { color: var(--la); }
.nut-tai { font-size: 1.2rem; min-height: 64px; }
.nut-tai + .chu-thich { text-align: center; }

@media (max-width: 560px) {
  .thong-tin-ck > div { grid-template-columns: 1fr; gap: 2px; }
  .khung-qr { padding: 14px; }
  .khung-qr img { width: 100%; }
  .dong-video .nut-chinh { justify-self: stretch; }
  /* Điện thoại: khung video rộng hết màn hình ở trên, chữ ở dưới */
  .dong-video.co-mau {
    grid-template-columns: 1fr auto;
    grid-template-areas: "mau mau" "ten gia" "nut nut";
    gap: 10px 12px;
  }
  .mau-video { width: 100%; }
}

/* =================== Chọn Lớp / Môn (trang chủ) ===================
   Ý tưởng: mỗi ô lớp giống cái nhãn dán trên bìa vở ("Lớp: ...").
   Ô đang chọn được tô mực tím. Mỗi môn có một màu riêng như màu bìa vở,
   chỉ dùng làm điểm nhấn nhỏ (vạch màu), chữ vẫn đen để dễ đọc. */

.chon-lop h1 { margin-bottom: 14px; }
.luoi-lop {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.o-lop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 112px;
  padding: 10px 6px 12px;
  background: #fff;
  border: 2px solid var(--dong-ke);
  border-radius: 10px;
  /* đường viền mảnh thứ hai bên trong, giống khung nhãn vở in sẵn */
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--dong-ke);
  color: var(--chu);
  text-decoration: none;
  line-height: 1.1;
}
.o-lop:hover { border-color: var(--muc-tim); color: var(--chu); }
.chu-lop { font-size: 0.85rem; color: var(--chu-phu); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.so-lop { font-size: 2.6rem; font-weight: 700; color: var(--muc-tim); margin: 2px 0 4px; }
.o-tat-ca .so-lop { font-size: 1.35rem; margin: 6px 0 10px; }
.o-lop .dem { font-size: 0.85rem; color: var(--chu-phu); }
.o-lop.trong .so-lop { color: #9aa0b8; }
.o-lop[aria-current="page"] {
  background: var(--muc-tim);
  border-color: var(--muc-tim);
  box-shadow: inset 0 0 0 4px var(--muc-tim), inset 0 0 0 5px rgba(255, 255, 255, 0.5);
}
.o-lop[aria-current="page"] .chu-lop,
.o-lop[aria-current="page"] .so-lop,
.o-lop[aria-current="page"] .dem { color: #fff; }

/* Hàng chọn môn: các nút dài, có vạch màu bên trái */
.chon-mon { margin: 18px 0 8px; }
.hang-mon { display: flex; flex-wrap: wrap; gap: 8px; }
.nut-mon {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 16px 8px 14px;
  background: #fff;
  border: 2px solid var(--dong-ke);
  border-left: 6px solid var(--mau-mon, var(--muc-tim));
  border-radius: 10px;
  color: var(--chu);
  font-weight: 600;
  text-decoration: none;
}
.nut-mon:hover { border-color: var(--mau-mon, var(--muc-tim)); color: var(--chu); }
.nut-mon .dem {
  min-width: 1.8em;
  padding: 0 6px;
  border-radius: 6px;
  background: var(--giay-dam);
  color: var(--chu-phu);
  font-size: 0.85rem;
  text-align: center;
}
.nut-mon[aria-current="page"] {
  background: var(--mau-mon, var(--muc-tim));
  border-color: var(--mau-mon, var(--muc-tim));
  color: #fff;
}
.nut-mon[aria-current="page"] .dem { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* Tiêu đề kết quả: "Lớp 3 · Toán      4 video" */
.dau-ket-qua {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 30px;
}
.dau-ket-qua h2 { margin: 0; }
.so-ket-qua { color: var(--chu-phu); white-space: nowrap; }
.dau-ket-qua + .danh-sach-video { margin-top: 12px; }


/* Khi lớp/môn chưa có video */
.trang-trong {
  margin-top: 12px;
  padding: 24px;
  border: 2px dashed var(--dong-ke);
  border-radius: var(--bo-goc);
  background: #fff;
  text-align: center;
}
.trang-trong p:last-child { margin-bottom: 0; }

/* Đường dẫn "Tất cả › Lớp 3 › Toán" ở trang video */
nav.quay-lai { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--chu-phu); }

@media (max-width: 700px) {
  .luoi-lop { grid-template-columns: repeat(3, 1fr); }
  .o-tat-ca { grid-column: 1 / -1; min-height: 56px; flex-direction: row; gap: 12px; }
  .o-tat-ca .so-lop { margin: 0; }
}
@media (max-width: 560px) {
  .o-lop { min-height: 96px; }
  .so-lop { font-size: 2.2rem; }
  .nut-mon { flex: 1 1 calc(50% - 8px); justify-content: space-between; }
  .hang-mon .nut-mon:first-child { flex-basis: 100%; }
}