/* =========================================================================
   hero.css — MAN HINH DAU TRANG
   ========================================================================= */

.hero {
  position: relative;
  /* Khoang tren: chi de tho mot chut duoi thanh nav. Phan dau trang co
     khung demo cao ben phai, de rong tay la mo trang ra thay mot mang
     trong roi moi toi noi dung. */
  padding-top: calc(var(--nav-h) + clamp(12px, 1.4vw, 20px));
  padding-bottom: clamp(56px, 7vw, 100px);
  overflow: hidden;
}

/* Nen: hai dom sang + luoi ky thuat. Ca hai o .deco nen khong chan chuot. */
.hero__blob-1 {
  width: 640px; height: 640px;
  top: -220px; right: -160px;
  background: radial-gradient(circle, var(--accent) 0%, transparent 68%);
}
.hero__blob-2 {
  width: 520px; height: 520px;
  bottom: -260px; left: -180px;
  background: radial-gradient(circle, var(--accent-3) 0%, transparent 68%);
}
/* Phan dau trang dung be ngang RONG HON phan con lai cua trang: khung ben
   phai la ban demo tuong tac, cang rong cang de xem. Cac muc duoi van giu
   --maxw 1180px cho de doc. */
.hero .container { max-width: 1320px; }


.hero__inner {
  display: grid;
  /* Cot phai rong hon cot chu: ban demo tuong tac la thu nguoi ta dung lai
     de xem, con cau gioi thieu doc mot luot la xong. 1180px container chia
     ra khoang 510px chu / 700px khung. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.36fr);
  gap: clamp(28px, 3.4vw, 48px);
  /* Can TREN chu khong can giua: khung demo bat dau ngang dinh logo, nhin
     gon mot khoi. Can giua thi cot phai bi day tut xuong vi cot chu cao
     hon, tren cung ben phai hoa ra mot mang trong. */
  align-items: start;
}

/* ── Cot chu ────────────────────────────────────────────── */
.hero h1 {
  font-size: var(--fs-display);
  margin-bottom: .38em;
}
/* Chu do mau chuyen. -webkit-background-clip van la ban duoc ho tro rong nhat. */
.hero h1 .grad {
  background: var(--gold-grad);
  /* --gold-grad + .shine: chu vang co vet sang chay qua, xem animations.css */
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Dong chu tu go — js/typer.js doi noi dung, CSS chi lo con tro nhap nhay. */
.hero__typed {
  display: inline-block;
  min-height: 1.2em;
  color: var(--accent);
  font-weight: 750;
}
.hero__typed::after {
  content: "";
  display: inline-block;
  width: 2px; height: 1em;
  margin-left: 3px;
  vertical-align: -.14em;
  background: currentColor;
  animation: mt-caret 1.1s steps(1) infinite;
}

.hero__lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: 28px;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  font-size: var(--fs-sm);
  color: var(--text-faint);
}
.hero__note b { color: var(--text-muted); font-weight: 650; }

/* ── Bo so lieu ─────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.stat__num {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 750;
  letter-spacing: -.03em;
  color: var(--text);
  line-height: 1.1;
}
.stat__num .suffix { color: var(--accent); }
.stat__label { font-size: var(--fs-xs); color: var(--text-faint); }

/* ── Cot anh ────────────────────────────────────────────── */
.hero__visual {
  position: relative;
  perspective: 1400px;
}

/* Nghieng nhe theo con tro. --rx/--ry do js/tilt.js gan.
   translateZ(0) de trinh duyet dua han len GPU. */
.hero__frame {
  transform:
    perspective(1400px)
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translateZ(0);
  transition: transform .4s var(--ease-out);
  will-change: transform;
}

.hero__badges { position: absolute; inset: 0; pointer-events: none; }
.hero__badge {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border-radius: var(--radius-pill);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
  font-size: var(--fs-xs);
  font-weight: 650;
  white-space: nowrap;
}
.hero__badge i {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--accent);
}
.hero__badge--1 { top: 8%;  left: -6%; }
.hero__badge--2 { bottom: 16%; right: -5%; }
.hero__badge--3 { bottom: -3%; left: 12%; }

/* Banh rang trang tri chay sau anh. */
.hero__gear {
  position: absolute;
  color: var(--accent);
  opacity: .14;
  pointer-events: none;
}
.hero__gear--1 { top: -46px; right: 4%; width: 130px; }
.hero__gear--2 { bottom: -40px; left: -30px; width: 92px; }

/* ── Man hinh may tinh: khung demo cao het phan con lai cua man hinh ──
   Muc dich: mo trang ra la thay tron ban demo, khong phai cuon.

   Tru dan: thanh nav, khoang tho phia tren, thanh tieu de gia cua khung,
   va mot khoang chua o day cho biet trang con noi dung phia duoi.

   Dung svh (small viewport height) chu khong phai vh: tren may tinh hai
   cai bang nhau, con tren dien thoai vh tinh ca phan bi thanh dia chi che.
   Khong ho tro svh thi da co dong vh o tren do lam ban du phong.

   Bo aspect-ratio o day: chieu cao gio do man hinh quyet dinh, giu ti le
   nua thi hai luat danh nhau. */
@media (min-width: 981px) {
  .hero__visual .shot__body {
    height: calc(100vh  - var(--nav-h) - 118px);
    height: calc(100svh - var(--nav-h) - 118px);
    min-height: 380px;
  }
  .hero__visual .shot__body > [data-domain],
  .hero__visual .shot__body iframe { height: 100%; aspect-ratio: auto; }
  .hero__visual .shot__body img { height: 100%; object-fit: cover; }
}

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__lead { max-width: none; }
  .hero__badge--1 { left: 0; }
  .hero__badge--2 { right: 0; }
  .hero__badge--3 { display: none; }
}
@media (max-width: 560px) {
  .hero__badges { display: none; }   /* dien thoai hep, de vao la de len anh */
  .stats { grid-template-columns: repeat(3, 1fr); gap: 4px; }
}

/* ── Dai chay ngang: phien ban Inventor duoc ho tro ──────── */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 18px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  /* Mo dan hai dau cho khong bi "cat cut". */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  width: max-content;
  gap: 48px;
  animation: mt-marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--text-faint);
  white-space: nowrap;
}
.marquee__item svg { color: var(--accent); opacity: .8; }

/* Logo that dat tren tieu de hero. Anh nen graphite san trong tep PNG nen o
   giao dien Sang no thanh mot o vuong toi — dung y do, giong nhu bieu tuong
   ung dung. Bo goc va do bong cho khop voi cac the khac. */
.hero__logo {
  width: clamp(120px, 16vw, 168px);
  height: auto;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: var(--sh-md);
}