/* Khu "Không gian" (bản 2): dải Story khung dọc 9:16 + dải ngang + lưới ảnh ngang.
   File riêng (không sửa style.css) — nạp sau style.css. Markup do khoiTaoKhongGian() trong js/effects.js dựng. */
.khong-gian{ padding: 72px 0 80px; }
.khong-gian .nhan-so{ margin-bottom: 32px; }

/* ---- 1) Dải Story: 4 khung dọc 9:16 ---- */
.kg-story{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.kg-khung{
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border-radius: 14px; background: #000;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.kg-khung video, .kg-khung img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Vạch tiến độ mép trên (như Story); chỉ khung clip có */
.kg-khung-clip::before{
  content: ""; position: absolute; inset: 0 0 auto 0; height: 64px; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45), transparent);
}
.kg-tien{
  position: absolute; z-index: 2; top: 12px; left: 12px; right: 12px; height: 3px;
  border-radius: 2px; background: rgba(255,255,255,.3); overflow: hidden;
}
.kg-tien i{ display: block; height: 100%; width: 0; background: #fff; }

/* ---- 2) Dải ngang ---- */
.kg-dai{
  position: relative; margin-top: 16px; aspect-ratio: 21 / 9; overflow: hidden;
  border-radius: 14px; background: var(--nen-noi);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.kg-dai-anh{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; display: block;
  animation: kg-troi 16s ease-in-out infinite alternate;
}
@keyframes kg-troi{ from{ transform: scale(1); } to{ transform: scale(1.07) translateX(-1.2%); } }

/* ---- 3) Lưới 3 ảnh ngang ---- */
.kg-luoi{
  margin-top: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.kg-luoi img{
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px;
}

@media (prefers-reduced-motion: reduce){
  .kg-dai-anh{ animation: none; }
}

/* ---- Điện thoại: dải Story vuốt ngang (thấy lấp ló khung kế để biết còn nữa) ---- */
@media (max-width: 800px){
  .khong-gian{ padding: 56px 0 64px; }
  .kg-story{
    display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-padding-left: 20px;
    margin: 0 -20px; padding: 0 20px 6px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .kg-story::-webkit-scrollbar{ display: none; }
  .kg-khung{ flex: 0 0 62%; max-width: 250px; scroll-snap-align: start; }
  .kg-dai{ aspect-ratio: 16 / 10; margin-top: 12px; }
  .kg-luoi{ grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
  .kg-luoi img:nth-child(3){ grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}