/* ============================================================
   omnireel-band.css — dải OmniReel "Hơn 100 mẫu video có sẵn" + tường video mẫu tự cuộn.
   Markup: server/omnireel-band.ts. Dùng ở trang chủ và /san-pham (05/11/2026 tách khỏi home.css).
   Nạp SAU /assets/aios/styles.css. Video phát theo tầm nhìn do /home.js lo.
   ============================================================ */
/* ============================================================ OmniReel — tường video mẫu
   Nhận diện riêng của OmniReel (night #0C0B10, volt #D4FF3A). Bố cục theo ảnh mẫu Đức gửi
   26/10: "Hơn 100 / mẫu video có sẵn" + tường thẻ dọc nghiêng, tràn mép, cột trượt so le. */
.omni {
  --night: #0c0b10; --volt: #d4ff3a; --paper: #f3f4ec;
  --tw: 116px;  /* bề ngang một thẻ video */
  --g: 10px;    /* khe giữa các thẻ */
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(52px, 7vw, 104px);
  background: var(--night); color: var(--paper);
}
.omni::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(640px circle at 8% 0%, rgba(212, 255, 58, .1), transparent 62%);
}
.omni__head, .omni__foot { position: relative; z-index: 2; }
.omni__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.omni__logo { display: inline-flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: var(--paper); }
.omni__logo img { width: 34px; height: 34px; }
.omni__kicker { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 244, 236, .6); }
.omni h2 { color: var(--paper); font-size: clamp(2.2rem, 4.6vw, 3.7rem); line-height: 1.02; letter-spacing: -.03em; margin: 22px 0 16px; }
.omni__big { display: block; color: var(--volt); font-size: 1.5em; line-height: .95; letter-spacing: -.04em; }
.omni__lead { margin: 0; max-width: 40ch; font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.55; color: rgba(243, 244, 236, .84); }
.omni__lead strong { color: var(--paper); }
.omni__feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.omni__feats li { display: flex; gap: 11px; align-items: flex-start; font-size: .98rem; line-height: 1.45; color: rgba(243, 244, 236, .9); }
.omni__feats li::before {
  content: ""; width: 19px; height: 19px; flex: none; margin-top: 1px; border-radius: 50%;
  background: var(--volt) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0b10' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.omni__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }
.omni__btn { background: var(--volt); color: var(--night); border-color: var(--volt); box-shadow: 0 14px 32px -14px rgba(212, 255, 58, .75); }
.omni__btn:hover { background: #e2ff70; color: var(--night); transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(212, 255, 58, .95); }
.omni__note { margin: 18px 0 0; max-width: 48ch; font-size: .8rem; line-height: 1.5; color: rgba(243, 244, 236, .5); }

/* Tường: khung cắt → lớp nghiêng → cột → track (cuộn dọc). Track được JS nhân đôi rồi trượt
   đúng -50% nên vòng lặp liền mạch: mỗi thẻ có margin-bottom (KHÔNG dùng gap) để nửa track
   bằng đúng N × (thẻ + khe). */
.omni__wall { position: relative; z-index: 1; height: 430px; margin: 30px 0; overflow: hidden; }
.omni__wall::before, .omni__wall::after {
  content: ""; position: absolute; left: 0; right: 0; height: 64px; z-index: 2; pointer-events: none;
}
.omni__wall::before { top: 0; background: linear-gradient(var(--night), transparent); }
.omni__wall::after { bottom: 0; background: linear-gradient(transparent, var(--night)); }
.omni__tilt {
  position: absolute; left: 50%; top: calc(var(--tw) * -1.1);
  display: flex; gap: var(--g);
  translate: -50% 0; rotate: -9deg; transform-origin: 50% 420px;
}
.omni__col { flex: none; width: var(--tw); }
/* Lệch cột ban đầu — để cả khi đứng yên (không JS / giảm chuyển động) tường vẫn so le. */
.omni__col:nth-child(2) { margin-top: calc(var(--tw) * -1.05); }
.omni__col:nth-child(3) { margin-top: calc(var(--tw) * -.45); }
.omni__col:nth-child(4) { margin-top: calc(var(--tw) * -1.4); }
.omni__col:nth-child(5) { margin-top: calc(var(--tw) * -.7); }
.omni__track { display: flex; flex-direction: column; }
.omni-tile {
  position: relative; width: var(--tw); aspect-ratio: 9 / 16; margin: 0 0 var(--g);
  border-radius: calc(var(--tw) * .09); overflow: hidden; background: #1b1a22;
  box-shadow: 0 0 0 1px rgba(243, 244, 236, .09), 0 18px 40px -20px rgba(0, 0, 0, .9);
}
.omni-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.omni-tile figcaption {
  position: absolute; left: 7%; bottom: 5%; max-width: 86%;
  padding: 3px 7px; border-radius: 6px; background: rgba(12, 11, 16, .74);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.omni__wall.is-rolling .omni__track { animation: omni-roll var(--dur, 52s) linear infinite; }
.omni__col:nth-child(even) .omni__track { animation-direction: reverse; }
@keyframes omni-roll { to { translate: 0 -50%; } }

/* Điện thoại: 4 cột là đủ phủ khung (cột 5 tắt hẳn → video của nó không bao giờ được tải). */
@media (max-width: 600px) {
  .omni__col:nth-child(5) { display: none; }
}
@media (min-width: 601px) {
  .omni { --tw: 148px; --g: 14px; }
  .omni__wall { height: 520px; }
  .omni-tile figcaption { font-size: 10px; }
}
/* Desktop: chữ cột trái, tường chiếm phần phải và tràn hết mép section. */
@media (min-width: 1024px) {
  .omni { --tw: clamp(160px, 12.5vw, 214px); --g: 16px; min-height: 660px; display: flex; flex-direction: column; justify-content: center; }
  .omni__head > *, .omni__foot > * { max-width: 450px; }
  .omni__foot { margin-top: 30px; }
  .omni__wall {
    position: absolute; z-index: 0; margin: 0; height: auto;
    top: 0; bottom: 0; right: 0; left: calc(max(20px, (100% - 1140px) / 2) + 490px);
  }
  .omni__wall::before { top: 0; bottom: 0; right: auto; width: 22%; height: auto; background: linear-gradient(90deg, var(--night), transparent); }
  .omni__wall::after { display: none; }
  .omni__tilt { left: 54%; transform-origin: 50% 520px; }
}