/* ============================================================
   home.css — CHỈ trang chủ (public/index.html). Nạp SAU styles.css.
   26/10/2026: hero hai cột có "phòng lab" minh họa, dải OmniReel (tường video mẫu tự cuộn) thay
   video CEO AI OS, và một lượt dọn cho điện thoại: dải nổi bật thành hàng vuốt ngang, thẻ gọn hơn.
   Video phát theo tầm nhìn do /home.js lo; không có JS thì tường đứng yên với ảnh poster.
   ============================================================ */

/* ============================================================ Hero */
.hero--home {
  padding-block: clamp(32px, 5vw, 80px) clamp(44px, 6vw, 96px);
  isolation: isolate;
}
/* Quầng cam ấm sau cột hình — cho hero chiều sâu mà không cần ảnh nền. */
.hero--home::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: min(900px, 90vw); aspect-ratio: 1; right: -18vw; top: -30%;
  background: radial-gradient(circle, rgba(244, 124, 48, .2), rgba(244, 184, 46, .08) 42%, transparent 66%);
}
.hero-home {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
}
/* H1 giữ NGUYÊN câu cũ (SEO, docs/seo) — chỉ tách thành dòng chính + dòng phụ cho mắt bắt nhanh. */
.hero-home__title { font-size: clamp(2.1rem, 4.4vw, 3.55rem); line-height: 1.04; max-width: 16ch; margin-bottom: .5em; }
.hero-home__main { display: block; }
.hero-home__main em { font-style: normal; color: var(--orange-600); }
.hero-home__sub {
  display: block; margin-top: .4em; max-width: 30ch;
  font-size: max(1.15rem, .5em); line-height: 1.3; font-weight: 700; letter-spacing: -.01em; color: var(--ink-soft);
}
.hero-home__sub mark { background: linear-gradient(180deg, transparent 55%, rgba(244, 124, 48, .38) 55%); }
.hero-home .lead { max-width: 46ch; margin: 0; }
.hero-home .btn-row { margin-top: 28px; }
.hero-home .hero__badges { margin-top: 24px; }
.hero-home .badge { font-size: .82rem; }

/* ---- "Phòng lab": minh họa bằng HTML/CSS. Cỡ chữ + khoảng cách theo cqw nên co giãn theo
   bề ngang khung; clamp giữ chữ không nhỏ hơn 11px trên điện thoại. aria-hidden vì chỉ để nhìn. */
.hero-lab {
  position: relative; width: 100%; max-width: 560px; margin-inline: auto;
  aspect-ratio: 1 / 1; container-type: inline-size;
}
.hero-lab__sun {
  position: absolute; width: 54%; aspect-ratio: 1; right: -1%; top: 36%; border-radius: 50%;
  background: var(--orange); border: 1.5px solid var(--ink); box-shadow: var(--stamp);
}
.hero-lab__dot {
  position: absolute; width: 15%; aspect-ratio: 1; left: 4%; bottom: 31%; border-radius: 50%;
  background: var(--green); border: 1.5px solid var(--ink); box-shadow: var(--stamp-sm);
}
.hero-lab__ring {
  position: absolute; inset: 4% 2% 2% 6%; border-radius: 50%;
  border: 1.5px dashed rgba(31, 41, 55, .2);
}
.hl-card {
  position: absolute; background: var(--cream-card); color: var(--ink-700);
  border: 1.5px solid var(--ink); border-radius: 18px; box-shadow: var(--stamp);
}
.hl-chat {
  left: 0; top: 16%; width: 63%; z-index: 3; rotate: -2.5deg;
  padding: 3cqw 3cqw 3.2cqw; font-size: clamp(11px, 2.45cqw, 13.5px); line-height: 1.45;
}
.hl-chat__head {
  display: flex; align-items: center; gap: 2cqw;
  padding-bottom: 2cqw; margin-bottom: 2.4cqw; border-bottom: 1px solid var(--line);
}
.hl-chat__head img { width: 6.4cqw; min-width: 24px; height: auto; flex: none; }
.hl-chat__head strong { display: block; color: var(--ink); font-size: 1.05em; line-height: 1.25; }
.hl-chat__head span { display: block; color: var(--green-700); font-size: .86em; font-weight: 600; }
.hl-bubble { width: fit-content; max-width: 92%; margin: 0 0 2cqw; padding: 1.7cqw 2.4cqw; border-radius: 14px; color: var(--ink); }
.hl-bubble b { display: block; font-size: .8em; margin-bottom: 1px; }
.hl-bubble--q { background: var(--cream-200); border-bottom-left-radius: 4px; }
.hl-bubble--q b { color: var(--ink-soft); }
.hl-bubble--a { background: var(--green-100); border-bottom-right-radius: 4px; margin: 0 0 0 auto; }
.hl-bubble--a b { color: var(--green-700); }

.hl-video {
  right: 2%; top: 3%; width: 34%; aspect-ratio: 9 / 16; z-index: 2; rotate: 5deg;
  overflow: hidden; border-radius: 16px; background: var(--dark);
}
.hl-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl-video__tag {
  position: absolute; left: 7%; bottom: 5%;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(9, 9, 9, .74); color: #fff; font-size: clamp(10px, 2cqw, 11.5px); font-weight: 700;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hl-video__tag svg { width: 1.1em; height: 1.1em; }

.hl-course {
  left: 9%; bottom: 3%; width: 57%; z-index: 3; rotate: 1.8deg;
  padding: 2.8cqw 3.2cqw 3.2cqw; font-size: clamp(11px, 2.35cqw, 13px); line-height: 1.4;
}
.hl-course__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 800; color: var(--ink); }
.hl-course__top span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.hl-course__top svg { width: 1.2em; height: 1.2em; color: var(--orange-600); }
.hl-bar { height: 7px; margin: 1.6cqw 0 2.2cqw; border-radius: var(--r-pill); background: var(--cream-200); overflow: hidden; }
.hl-bar i { display: block; width: 64%; height: 100%; border-radius: inherit; background: var(--orange); }
.hl-course ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3cqw; }
.hl-course li { display: flex; align-items: center; gap: 8px; color: var(--ink-soft); }
.hl-course li::before {
  content: ""; width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--cream-300); background: #fff center / 10px no-repeat;
}
.hl-course li.is-done::before {
  border-color: var(--green-600); background-color: var(--green-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fbf8ee' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.hl-course li.is-now { color: var(--ink); font-weight: 700; }
.hl-course li.is-now::before { border-color: var(--orange); background-color: var(--orange-100); box-shadow: inset 0 0 0 3px #fff; }

.hl-pill {
  position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px;
  padding: 1.7cqw 3.2cqw; border-radius: var(--r-pill); border: 1.5px solid var(--ink); box-shadow: var(--stamp-sm);
  font-size: clamp(11px, 2.4cqw, 13.5px); font-weight: 700; color: var(--ink); white-space: nowrap;
}
.hl-pill svg { width: 1.15em; height: 1.15em; }
.hl-live { left: 5%; top: 3%; background: #fff; }
.hl-live i { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #e5484d; animation: hl-pulse 1.8s ease-out infinite; }
.hl-one { right: 0; bottom: 17%; background: var(--yellow); }

/* Nhấp nhô nhẹ: dùng thuộc tính `translate` riêng nên không đè `rotate` của từng thẻ. */
.hl-chat { animation: hl-bob 7s ease-in-out infinite; }
.hl-video { animation: hl-bob 8s ease-in-out -2.5s infinite; }
.hl-course { animation: hl-bob 7.5s ease-in-out -4s infinite; }
.hl-live, .hl-one { animation: hl-bob 6s ease-in-out -1s infinite; }
@keyframes hl-bob { 50% { translate: 0 -7px; } }
@keyframes hl-pulse {
  0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); }
  100% { box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); }
}

@media (max-width: 920px) {
  .hero-home { grid-template-columns: 1fr; }
  .hero-home__title { max-width: 18ch; font-size: clamp(2.1rem, 6vw, 3rem); }
  .hero-lab { max-width: 470px; margin-top: 6px; }
}
@media (max-width: 520px) {
  .hero-home .eyebrow { font-size: .7rem; letter-spacing: .08em; }
  .hero-home__title { font-size: clamp(1.95rem, 8.6vw, 2.3rem); }
  .hero-home__sub { font-size: max(1.15rem, .6em); }
  .hero-home .lead { font-size: 1.04rem; }
  .hero-home .btn-row .btn { width: 100%; }
  .hero-home .hero__badges { gap: 8px; margin-top: 20px; }
  .hero-home .badge { font-size: .8rem; padding: 6px 12px; }
  /* Khung cao hơn để thẻ hỏi–đáp (chữ tối thiểu 11px) không chui xuống dưới thẻ lộ trình. */
  .hero-lab { aspect-ratio: 1 / 1.24; }
  .hl-chat { width: 75%; top: 11%; padding: 12px 12px 13px; }
  .hl-video { width: 37%; top: 1%; }
  .hl-course { width: 66%; left: 3%; bottom: 2%; padding: 11px 13px 13px; }
  .hero-lab__sun { width: 58%; top: 44%; }
  .hero-lab__dot { bottom: 36%; left: 0; }
  .hl-live { top: 1%; left: 3%; }
  .hl-one { bottom: 25%; }
}

/* ============================================================ 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; }
}

/* Khối CTA tối nằm sát footer cũng tối: đệm dưới đầy đủ + đệm trên của footer thành một khoảng
   trống tối ~140px giữa hai khối. Cắt bớt phía CTA. */
.cta-strip { padding-bottom: clamp(16px, 2.5vw, 32px); }

/* ============================================================ Điện thoại: phần còn lại của trang */
/* Dải nổi bật (khóa học / sản phẩm / sự kiện — home-page.ts gắn .ev-grid--rail): trên điện
   thoại thành hàng vuốt ngang, thẻ sau ló ra một phần để gợi ý vuốt. Trước đây mỗi thẻ một
   hàng, bìa 1:1 → 15 thẻ dài ~6.500px. */
@media (max-width: 680px) {
  .ev-grid--rail {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px;
    margin-inline: -20px; padding: 4px 20px 14px; scrollbar-width: none;
  }
  .ev-grid--rail::-webkit-scrollbar { display: none; }
  .ev-grid--rail > .ev-card { flex: 0 0 min(76%, 290px); scroll-snap-align: start; }
  .ev-grid--rail + .fmore { margin-top: 16px; }

  /* "Về AI Native Lab": icon trái, chữ phải — ba thẻ gọn lại còn khoảng một nửa. */
  #gioi-thieu .card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding: 20px; }
  #gioi-thieu .card .icon-dot { grid-row: span 2; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  #gioi-thieu .card h3 { margin: 2px 0 .3em; }
  #gioi-thieu .card p { grid-column: 2; font-size: .95rem; }

  /* Thẻ gói: "Nhận theo đơn đăng ký" ở cỡ giá 1.85rem gãy thành hai dòng to. */
  #san-pham .tier, #hoi-vien .tier { padding: 22px; }
  #san-pham .tier__price { font-size: 1.35rem; }
}
@media (max-width: 520px) {
  /* Kênh: hai cột, bỏ dòng mô tả phụ — 11 hàng cao còn khoảng 6. */
  #cong-dong .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #cong-dong .social-item { padding: 13px 14px; gap: 8px; font-size: .95rem; line-height: 1.3; }
  #cong-dong .social-item__meta { display: none; }
  #cong-dong .social-item__arrow { margin-left: auto; }
  .cta-strip .btn-row .btn { width: 100%; }
}