/* =====================================================================
   WGNC 2027 - 3 OPTION HERO (09/11/2026). Dung chung cho hero-a/b/c.html.
   Tuan thu Brand Identity/design-system/DESIGN-SYSTEM.md:
     - KHONG tu dat co chu, ho font, do dam, gian dong: chu chi dung 8 class .t-* cua tokens.css.
     - KHONG viet ma mau hay ham mau: chi var(--...) va color-mix() tren var.
     - Nen cua khoi dat bang class .surface-* / .on-photo trong HTML, khong viet o day.
     - Ten giai = 1 .t-display, 2 dong, dong 1 boc .t-hero-1. Khong co nhan nho (eyebrow) phia tren.
     - Nhan vai tro canh logo dung .t-small. Moi hero chi 1 nut.
   Yeu cau rieng cua Andrew:
     - Chu KHONG nam tren video. Khung video nho hon man hinh -> video 1080p duoc thu nho khi hien thi -> net.
     - Khong lap vo han: A chay 1 lan roi dung, B va C bam moi chay.
   ===================================================================== */

/* ---------- Dung chung ---------- */
.hx { position: relative; height: calc(100svh - var(--nav-h)); min-height: 560px; overflow: hidden; }
.hero-a .wide, .hero-b .wide { max-width: 1680px; }   /* man lon: cho video rong them */
.hx p { margin: 0; }
.hx h1 > span { display: block; }
.hx .btn { white-space: nowrap; align-self: flex-start; }
.hx a.yt { text-underline-offset: 3px; }
.hx a.yt:hover { color: var(--text-on-inverse-accent); }

/* Khung video: anh tinh phu len video, an di khi video dang chay */
.hv { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.hv video, .hv .hv-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hv .hv-still { transition: opacity .7s ease; }
.hv[data-state="playing"] .hv-still, .hv[data-state="paused"] .hv-still { opacity: 0; }

/* Nut tron lon o giua: chi la bieu tuong, khong co chu tren video */
.hv-big { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px;
  border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 10px 40px color-mix(in srgb, var(--bg-inverse-deep) 45%, transparent);
  transition: transform .2s ease, filter .2s ease; }
.hv-big:hover { transform: translate(-50%, -50%) scale(1.06); filter: brightness(1.06); }
.hv-big svg { width: 30px; height: 30px; margin-left: 5px; }
.hv[data-state="playing"] .hv-big, .hv[data-state="paused"] .hv-big, .hv[data-state="loading"] .hv-big { display: none; }

/* 2 nut nho goc duoi phai: dung/phat, bat/tat tieng (chi bieu tuong) */
.hv-ctl { position: absolute; right: 14px; bottom: 14px; display: none; gap: 8px; }
.hv[data-state="playing"] .hv-ctl, .hv[data-state="paused"] .hv-ctl { display: flex; }
.hv-ico { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: color-mix(in srgb, var(--bg-inverse-deep) 55%, transparent); color: var(--text-on-inverse);
  border: 1px solid var(--line-on-inverse); }
.hv-ico:hover { border-color: var(--accent); }
.hv-ico svg { width: 18px; height: 18px; }
.hv-ico .i-play, .hv-ico .i-on { display: none; }
.hv-ico[aria-pressed="true"] .i-pause, .hv-ico[aria-pressed="true"] .i-off { display: none; }
.hv-ico[aria-pressed="true"] .i-play, .hv-ico[aria-pressed="true"] .i-on { display: block; }

/* Logo bao chung: Don vi to chuc / Bao tro chuyen mon / San dau (nhan .t-small) */
.seal { display: flex; align-items: flex-start; gap: clamp(20px, 2.6vw, 40px); }
.seal figure { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.seal figcaption { white-space: nowrap; }
.seal .row { display: flex; align-items: center; gap: 14px; height: 44px; }   /* cung chieu cao -> 3 nhan thang hang */
.seal img { height: 32px; width: auto; }
.seal img.sq { height: 40px; }
.seal img.shores { height: 44px; }


/* =====================================================================
   OPTION A - VIDEO TRAI, THONG TIN PHAI, TEN GIAI O DAY
   Video tu chay 1 lan (tat tieng) cho khach lan dau roi dung o anh trao cup.
   ===================================================================== */
.a-in { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto; row-gap: clamp(12px, 2.4vh, 28px);
  padding-block: clamp(16px, 3.2vh, 36px) clamp(12px, 2.4vh, 28px); }
.a-in > h1 { grid-row: 2; }
.a-row { grid-row: 1; container-type: size; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(28px, 3.4vw, 56px); align-items: center; }
.a-stage { --cap: 34px; width: min(100cqw - 520px, (100cqh - var(--cap)) * 16 / 9); }
.a-cap { height: var(--cap); display: flex; align-items: flex-end; white-space: nowrap; overflow: hidden; }
.a-side { display: flex; flex-direction: column; gap: clamp(10px, 2vh, 20px); }
.a-side .seal { margin-top: clamp(4px, 1.4vh, 16px); padding-top: clamp(10px, 2vh, 18px); border-top: 1px solid var(--line-on-inverse); }


/* =====================================================================
   OPTION B - KHUNG CHIEU PHIM, DOI XUNG
   Ten giai tren cung, video trong khung vien vang o giua, 2 ben la bien logo
   va thong tin + nut. Video KHONG tu chay: bam moi chay, co tieng.
   ===================================================================== */
.b-in { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-block: clamp(14px, 3vh, 34px); }
.b-stagebox { --flank: clamp(200px, 16vw, 260px); --gap: clamp(24px, 2.8vw, 48px);
  container-type: size; flex: 1 1 auto; min-height: 0; width: 100%; margin-top: clamp(10px, 2.4vh, 28px);
  display: grid; grid-template-columns: var(--flank) auto var(--flank); justify-content: center; align-items: center;
  column-gap: var(--gap); text-align: left; }
.b-stage { --cap: 30px; width: min(100cqw - 2 * (var(--flank) + var(--gap)) - 20px, (100cqh - var(--cap) - 20px) * 16 / 9); }
.b-cap { height: var(--cap); display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; white-space: nowrap; overflow: hidden; }
.b-stage .hv { outline: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 9px; margin-top: 10px; }
.b-side { display: flex; flex-direction: column; gap: clamp(14px, 3vh, 32px); }
.b-side.l { align-items: flex-end; text-align: right; }
.b-side.l .row { justify-content: flex-end; }
.b-side .info { display: flex; flex-direction: column; gap: 4px; }


/* =====================================================================
   OPTION C - ANH TINH SANG (kieu Masters / nhip chuan cua Brand)
   Trang dung yen 100%: anh Hoiana luc chang vang + ten giai o nua duoi anh
   (.on-photo co lop phu toi). Day la logo bao chung + the video nho + 1 nut.
   ===================================================================== */
.hero-c { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.c-photo { display: flex; align-items: flex-end; min-height: 0; }
.c-photo .c-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.c-text { padding-bottom: clamp(16px, 3.4vh, 40px); display: flex; flex-direction: column; gap: 6px; }
.c-band { padding-block: clamp(12px, 2.2vh, 22px); }   /* 09/11: bo vien vang giua anh va dai logo (Andrew) */
.c-band .wide { display: flex; justify-content: space-between; align-items: center; gap: 32px; }

/* The video nho */
.c-film { display: flex; align-items: center; gap: 14px; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; text-align: left; }
.c-film .thumb { position: relative; width: clamp(140px, 11vw, 176px); aspect-ratio: 16 / 9; overflow: hidden; }
.c-film .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.c-film:hover .thumb img { transform: scale(1.05); }
.c-film .dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.c-film .dot svg { width: 14px; height: 14px; margin-left: 3px; }
.c-film .txt { display: flex; flex-direction: column; }

/* Cua so noi xem video: toi da 1280px de video 1080p van net */
.hv-dlg { width: min(1280px, 92vw, (100svh - 150px) * 16 / 9); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--text-on-inverse); }
.hv-dlg::backdrop { background: color-mix(in srgb, var(--bg-inverse-deep) 94%, transparent); }
.hv-dlg video { display: block; width: 100%; aspect-ratio: 16 / 9; }
.hv-dlg .dlg-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; }
.hv-dlg .dlg-x { padding: 8px 18px; }