/* Bài 1 – Nâng cấp trình bày (trắng – vàng, nổi 3D, nhấn mạnh lỗi) */

:root{
  --b1-vang-nen: #FFF6D7;
  --b1-vang-nen2:#FFE9A6;
  --b1-vang-dam:#FFC928;
  --b1-vien: rgba(11,18,32,.10);
  --b1-bong: 0 18px 55px rgba(11,18,32,.12);
  --b1-bong-nhe: 0 10px 28px rgba(11,18,32,.10);
}

/* 1) Cân đối full trang: gom về một cột để không bị hở khoảng trắng */
.content .grid{
  grid-template-columns: 1fr !important;
}
.content aside{
  position: static !important;
  top: auto !important;
}

/* 2) Video: full chiều ngang, đúng tỉ lệ 16:9 */
.videoCard{width:100%;}
.video-3d{width:100%;}
.video-3d__khung{
  width:100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow:hidden;
  background:#0B1220;
  box-shadow: var(--b1-bong);
}
.video-3d__khung iframe,
.video-3d__khung video{
  width:100%;
  height:100%;
  border:0;
  display:block;
}

/* 3) Hiệu ứng nổi 3D khi rê chuột */
.videoCard,
.imageWrap,
.kpi,
.step,
.audioItem,
.tip,
.note,
.warn,
.danger,
.card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  will-change: transform;
}
.videoCard:hover,
.imageWrap:hover,
.kpi:hover,
.step:hover,
.audioItem:hover,
.tip:hover{
  transform: translateY(-3px);
  box-shadow: var(--b1-bong-nhe);
  border-color: rgba(11,18,32,.16);
}

/* 4) Xen kẽ vàng – trắng cho các khối bo tròn */
.steps .step{
  background: linear-gradient(180deg,#FFFFFF, #FBFCFF);
  border: 1px solid var(--b1-vien);
}
.steps .step:nth-child(even){
  background: linear-gradient(180deg,#FFFFFF, var(--b1-vang-nen));
}
.steps .stepHead{
  background: transparent;
}

.audioList .audioItem{
  background: linear-gradient(180deg,#FFFFFF, #FBFCFF);
  border: 1px solid var(--b1-vien);
}
.audioList .audioItem:nth-child(even){
  background: linear-gradient(180deg,#FFFFFF, var(--b1-vang-nen));
}

/* 5) Nhấn mạnh lỗi trừ 5 và lỗi loại trực tiếp */
.tru5{
  font-weight: 950;
  color: #1b1b1b;
  background: linear-gradient(180deg, #FFF7CC, var(--b1-vang-nen2));
  border: 1px solid rgba(255,201,40,.55);
  padding: 1px 9px;
  border-radius: 999px;
  display:inline-block;
  letter-spacing: .01em;
}
.loai-truc-tiep{
  font-weight: 950;
  color: #7a1010;
  text-transform: uppercase;
  background: linear-gradient(180deg, #FFECEC, #FFBDBD);
  border: 1px solid rgba(217,45,32,.35);
  padding: 1px 9px;
  border-radius: 999px;
  display:inline-block;
  letter-spacing: .02em;
}

/* 6) Nút/nhãn vàng chữ trắng (nếu có) – giữ giao diện đồng bộ */
.badge.yellow, .pill.yellow, .btn.yellow{
  background: linear-gradient(180deg, var(--b1-bong-nhe), var(--b1-vang-dam));
  color:#fff;
}

/* 7) Tinh chỉnh khoảng cách cho video để trông “đã” hơn */
.videoTitle{
  font-weight: 900;
  letter-spacing: -.02em;
}

/* 9) Nút góc phải + mũi tên qua bài 2 */
.topbar{
  gap: 12px;
}
.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.home-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  background: linear-gradient(180deg, #ffffff, #fff8dc);
  border:1px solid rgba(11,18,32,.10);
  box-shadow: 0 12px 28px rgba(11,18,32,.12);
  text-decoration:none;
  font-weight:900;
}
.home-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 40px rgba(11,18,32,.14);
}
.home-link img{
  border-radius:10px;
}
@media (max-width: 560px){
  .home-link__text{ display:none; }
}

.chip-link{
  text-decoration:none;
  cursor:pointer;
  border-color: rgba(11,18,32,.10);
  background: linear-gradient(180deg, #ffffff, #f3f8ff);
  box-shadow: 0 10px 22px rgba(11,18,32,.10);
}
.chip-link__arrow{
  font-size: 14px;
  line-height: 1;
}
.chip-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(11,18,32,.14);
}