/* ==========================================================================
   LDC FC — ui.css
   Lop giao dien moi: he font the thao, hero anh lon, the cau thu, thanh tab duoi.
   Nap sau style.css. Khong dung khung app truot ngang nua, van cuon binh thuong.
   ========================================================================== */

:root {
  --gold: #FFC217;
  --gold-d: #C89400;
  --ink: #0A0A0C;
  --paper: #F7F5F0;
  --muted-2: rgba(247, 245, 240, .64);
  --line-2: rgba(255, 194, 23, .22);
  --font-display: "Archivo", "Be Vietnam Pro", system-ui, sans-serif;
  --font-cond: "Barlow Condensed", "Be Vietnam Pro", system-ui, sans-serif;
  --tabh: 62px;
}

/* ---------- He chu ---------- */
h1, h2, h3, h4,
.brand__name, .stat__num, .pcard__name, .pcard__ovr b, .pcard__num,
.hero h1, .page-hero h1 {
  font-family: var(--font-display);
  letter-spacing: -.02em;
}
h1, h2 { font-weight: 900; }
h3, h4 { font-weight: 800; }
.eyebrow, .btn, .squad-filter button, .pcard__pos, .pcard__meta, .pcard__ovr i, .stat__label {
  font-family: var(--font-cond);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
}
.btn { letter-spacing: .09em; }

/* ---------- Hero trang chu ---------- */
.hero-screen {
  position: relative;
  min-height: 88svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 120px 0 44px;
  overflow: hidden;
  background: var(--ink);
}
.hero-screen__bg {
  position: absolute; inset: 0; z-index: 0;
  background: var(--ink) center bottom / cover no-repeat;
  background-image: url(../images/hero/hero-tall.jpg?v=2);
}
@media (min-aspect-ratio: 1/1) {
  .hero-screen__bg { background-image: url(../images/hero/hero-wide.jpg?v=2); background-position: center 28%; }
}
.hero-screen__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, .78) 0%, rgba(10, 10, 12, .12) 32%, rgba(10, 10, 12, .76) 70%, var(--ink) 100%);
}
.hero-screen__in { position: relative; z-index: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 22px; }
.hero-screen__badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 99px; margin-bottom: 16px;
  border: 1px solid var(--line-2); background: rgba(10, 10, 12, .58);
  font: 700 .68rem/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
/* Chieu cao dong phai rong hon binh thuong, khong la dau tieng Viet bi cat ngon */
.hero-screen h1 {
  margin: 0 0 14px; color: var(--paper);
  font: 900 clamp(2.1rem, 8.4vw, 4.6rem)/1.06 var(--font-display);
  letter-spacing: -.03em; text-transform: uppercase;
}
.hero-screen h1 span { display: block; }
.hero-screen h1 .accent {
  background: linear-gradient(100deg, var(--gold), #FFE08A 58%, var(--gold-d));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-screen p {
  margin: 0 0 22px; max-width: 42ch; color: rgba(247, 245, 240, .82);
  font-size: clamp(.92rem, 3.5vw, 1.05rem); line-height: 1.55;
}
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.scroll-cue {
  margin-top: 22px; display: inline-flex; align-items: center; gap: 8px;
  color: var(--muted-2); font: 700 .68rem/1 var(--font-cond); letter-spacing: .18em; text-transform: uppercase;
}
.scroll-cue svg { animation: cue 1.7s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(4px) } }

/* ---------- The cau thu trong luoi ---------- */
.squad { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (min-width: 900px) { .squad { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); } }
.pcard {
  position: relative; aspect-ratio: 3 / 4.1; overflow: hidden;
  border-radius: 18px; cursor: pointer;
  border: 1px solid var(--line-2);
  background: linear-gradient(165deg, #1A1509, #0A0A0C 62%);
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.pcard:hover { border-color: var(--gold); box-shadow: 0 14px 34px rgba(255, 194, 23, .18); transform: translateY(-3px); }
.pcard:active { transform: scale(.98); }
.pcard img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .3) 86%, transparent);
  mask-image: linear-gradient(180deg, #000 58%, rgba(0, 0, 0, .3) 86%, transparent);
}
.pcard::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 12, .34) 0%, transparent 26%, rgba(10, 10, 12, .82) 72%, var(--ink) 100%);
}
.pcard__ovr {
  position: absolute; top: 9px; left: 9px; right: auto; bottom: auto; z-index: 3;
  display: grid; justify-items: center; line-height: 1; text-align: center;
  padding: 6px 9px; border-radius: 11px;
  background: var(--gold); color: var(--ink);
  border: 0; backdrop-filter: none;
}
.pcard__ovr b { display: block; font: 900 1.15rem/1 var(--font-display); color: var(--ink); }
.pcard__ovr i {
  display: block; font: 700 .5rem/1 var(--font-cond); letter-spacing: .12em;
  font-style: normal; color: var(--ink); opacity: .72;
}
.pcard__pos {
  position: absolute; top: 11px; right: 10px; left: auto; bottom: auto; z-index: 3;
  padding: 5px 9px; border-radius: 9px;
  background: rgba(10, 10, 12, .78); border: 1px solid var(--line-2);
  color: var(--gold); font: 700 .62rem/1 var(--font-cond); letter-spacing: .1em;
}
.pcard__pos--gk { background: rgba(74, 222, 128, .92); color: #06210F; border-color: transparent; }
.pcard__num {
  position: absolute; right: 10px; bottom: 58px; top: auto; left: auto; z-index: 1;
  font: 900 2.8rem/1 var(--font-display);
  color: rgba(255, 194, 23, .26); text-shadow: none; letter-spacing: -.04em;
}
.pcard__foot { position: absolute; left: 0; right: 0; bottom: 0; top: auto; z-index: 2; padding: 12px 11px 13px; }
.pcard__name {
  font: 800 .88rem/1.3 var(--font-display); color: var(--paper);
  text-transform: uppercase;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__meta { margin-top: 3px; font-size: .62rem; color: var(--gold); letter-spacing: .1em; }

.squad-filter { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; }
.squad-filter::-webkit-scrollbar { display: none; }
.squad-filter button {
  flex: none; padding: 9px 15px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--muted-2);
  font-size: .7rem;
}
.squad-filter button.is-active { background: var(--gold); color: var(--ink); border-color: var(--gold); }

/* Hang loc doi tuyen / doi cong dong, dat tren hang loc vi tri */
.squad-filter--team { padding-bottom: 10px; }
.squad-filter--team button { font-size: .76rem; padding: 10px 19px; border-color: rgba(255,194,23,.34); color: var(--gold); }
.squad-filter--team button.is-active { background: var(--gold); color: var(--ink); }

/* ---------- Modal the cau thu ---------- */
.cardbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(4, 4, 6, .93); backdrop-filter: blur(10px);
  display: flex; align-items: flex-start; justify-content: center;
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
  padding: max(18px, env(safe-area-inset-top)) 16px 28px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.cardbox.is-open { opacity: 1; visibility: visible; }
.cardbox__close {
  position: fixed; top: max(12px, env(safe-area-inset-top)); right: 14px; z-index: 3;
  width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14); color: var(--paper);
  font-size: 1.7rem; line-height: 1; cursor: pointer;
}
.cardbox__inner { width: 100%; max-width: 440px; margin: auto; text-align: center; }
.cardbox canvas {
  width: 100%; height: auto; display: block; margin: 0 auto;
  max-height: calc(100svh - 190px);
  max-width: calc((100svh - 190px) / 1.5);
  border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  background: #0A0A0C;
}
.cardbox__load {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--gold); font: 700 .78rem/1 var(--font-cond); letter-spacing: .16em; text-transform: uppercase;
}
.cardbox__stage { position: relative; }
.cardbox__acts { display: flex; gap: 10px; margin-top: 16px; }
.cardbox__acts .btn { flex: 1; }
.cardbox__acts .btn[hidden] { display: none !important; }
.cardbox__hint { margin-top: 10px; color: var(--muted-2); font-size: .76rem; line-height: 1.5; }
body.has-modal { overflow: hidden; }

/* ---------- Thanh tab duoi (chi tren dien thoai) ---------- */
.tabbar {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  display: none; align-items: stretch;
  height: calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(10, 10, 12, .96);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: rgba(247, 245, 240, .56); text-decoration: none;
  font: 700 .58rem/1 var(--font-cond); letter-spacing: .06em; text-transform: uppercase;
  padding-top: 2px;
}
.tabbar a.is-active { color: var(--gold); }
.tabbar a.is-active svg { transform: translateY(-1px); }
.tabbar svg { display: block; }

@media (max-width: 899px) {
  .tabbar { display: flex; }
  body { padding-bottom: calc(var(--tabh) + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: 12px; }
  /* Nut trong hero phai nam tren thanh tab, khong bi che */
  .hero-screen { padding-bottom: calc(var(--tabh) + 34px); }
}

/* ==========================================================================
   HERO — chong chu de len mat nguoi
   Desktop: anh day sang phai, chu nam trong vung toi ben trai.
   Mobile/tablet: anh keo len cao, tang lop toi duoi de chu khong dam vao mat.
   ========================================================================== */

/* Lop toi duoi manh hon: mat o tren van sang, chu o duoi van doc ro */
.hero-screen__bg::after {
  background: linear-gradient(180deg,
    rgba(10, 10, 12, .70) 0%,
    rgba(10, 10, 12, .10) 26%,
    rgba(10, 10, 12, .10) 46%,
    rgba(10, 10, 12, .72) 72%,
    rgba(10, 10, 12, .94) 90%,
    var(--ink) 100%);
}

/* Duoi 1000px: giu anh full-bleed nhung day khung hinh len cao */
@media (max-width: 999px) {
  .hero-screen__bg { background-position: center 10%; }
}
@media (min-aspect-ratio: 1/1) and (max-width: 999px) {
  .hero-screen__bg { background-position: center 6%; }
}

/* Tu 1000px tro len: chu trai, hinh phai.

   Hai lan hong truoc deu vi mot ly do: kich thuoc anh phu thuoc vao ti le cua so.
   - Ban dau: khung anh rong 68% nhung cao gan het man hinh, "cover" phong anh len
     qua lon -> an mat hai nguoi ben trai.
   - Ban sua: anh trai het be ngang -> khong mat ai nua, nhung anh tran sang trai
     va de len mat thay.

   Lan nay chot cung: khung anh chi chiem 44% ben PHAI man hinh, dung "contain"
   nen ca tam anh luon nam tron trong khung — khong bao gio cat ai — va tuyet doi
   khong lan sang cot chu ben trai. Chu luon nam tren nen den, doc duoc o moi co
   cua so. Doi lai anh nho hon truoc mot chut; do la cai gia de khong bao gio hong. */
@media (min-width: 1000px) {
  /* Hero thap hon mot chut: khung anh chi cao bang be ngang cot phai chia 16:9,
     nen hero cang thap thi anh cang chiem ti le lon, nhin do trong. */
  .hero-screen { justify-content: center; min-height: 76svh; padding: 104px 0 46px; }

  .hero-screen__bg {
    left: 56%;                    /* chu dai nhat ket thuc quanh 53% be ngang */
    background-size: contain;
    background-position: right bottom;
  }
  /* Ria trai cua anh tan dan vao nen den, khong thay duong cat thang */
  .hero-screen__bg::before {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(90deg,
      var(--ink) 0%,
      rgba(10, 10, 12, .86) 9%,
      rgba(10, 10, 12, .40) 24%,
      rgba(10, 10, 12, .10) 36%,
      rgba(10, 10, 12, 0) 48%);
  }
  /* Tren desktop khong can lop toi duoi qua nang nua */
  .hero-screen__bg::after {
    background: linear-gradient(180deg,
      rgba(10, 10, 12, .58) 0%,
      rgba(10, 10, 12, 0) 24%,
      rgba(10, 10, 12, 0) 60%,
      rgba(10, 10, 12, .62) 86%,
      var(--ink) 100%);
  }

  .hero-screen__in > * { max-width: 600px; }
  .hero-screen h1 { font-size: clamp(2.4rem, 4vw, 3.4rem); }
  .hero-screen p { max-width: 500px; }
}

/* Man rong: cot chu ket thuc som hon theo ti le, nen day khung anh sang trai
   duoc mot chut cho anh to hon ma van khong cham vao chu. */
@media (min-width: 1500px) {
  .hero-screen__bg { left: 53%; }
}
@media (min-width: 1800px) {
  .hero-screen__bg { left: 51%; }
}