/* ==========================================================
   SHB Đà Nẵng FC — Demo giao diện trang chủ
   Bảng màu lấy từ logo CLB: tím indigo + cam
   ========================================================== */

:root{
  --purple:        #3c3b99;
  --purple-600:    #33328a;
  --purple-800:    #23225e;
  --purple-900:    #16153c;
  --purple-950:    #0e0d28;
  --orange:        #f58220;
  --orange-400:    #ff9d47;
  --orange-600:    #d96a0c;

  --ink:           #16153c;
  --body:          #4a4a63;
  --muted:         #7a7a91;
  --line:          #e6e6ef;
  --bg:            #ffffff;
  --bg-alt:        #f5f5fa;

  --radius:        14px;
  --radius-lg:     20px;
  --shadow-sm:     0 1px 2px rgba(22,21,60,.06), 0 4px 12px rgba(22,21,60,.05);
  --shadow-md:     0 8px 28px rgba(22,21,60,.10);
  --shadow-lg:     0 24px 60px rgba(22,21,60,.18);

  --wrap:          1200px;
  --font:          'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:88px; }

body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.65;
  color:var(--body);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{ margin:0; color:var(--ink); line-height:1.2; letter-spacing:-.02em; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 20px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--orange); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--orange); outline-offset:2px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:600 15px/1 var(--font);
  padding:14px 24px; border-radius:100px; border:2px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--sm{ padding:9px 16px; font-size:13.5px; }
.btn--block{ display:flex; width:100%; }

.btn--orange{
  background:var(--orange); color:#fff;
  box-shadow:0 6px 18px rgba(245,130,32,.35);
}
.btn--orange:hover{ background:var(--orange-600); box-shadow:0 10px 24px rgba(245,130,32,.45); }

.btn--ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.45); }
.btn--ghost:hover{ background:#fff; color:var(--purple-900); border-color:#fff; }

.btn--line{ background:transparent; color:var(--purple); border-color:var(--line); }
.btn--line:hover{ border-color:var(--purple); background:rgba(60,59,153,.05); }

.sec--dark .btn--line{ color:#fff; border-color:rgba(255,255,255,.35); }
.sec--dark .btn--line:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

.link-more{
  font-weight:600; font-size:14.5px; color:var(--purple);
  border-bottom:2px solid rgba(60,59,153,.25); padding-bottom:2px;
  transition:border-color .2s, color .2s;
}
.link-more:hover{ color:var(--orange); border-color:var(--orange); }

/* ---------- Pills / badges / tags ---------- */
.pill{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; padding:5px 12px; border-radius:100px;
  background:var(--orange); color:#fff;
}
.pill--dark{ background:var(--purple); }
.pill--light{ background:rgba(60,59,153,.10); color:var(--purple); }

.tag{
  font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:5px 11px; border-radius:6px;
}
.tag--home{ background:rgba(60,59,153,.10); color:var(--purple); }
.tag--away{ background:rgba(122,122,145,.14); color:var(--muted); }

.badge{
  justify-self:end; font-size:12px; font-weight:700;
  padding:5px 12px; border-radius:100px;
}
.badge--w{ background:rgba(22,163,74,.12); color:#15803d; }
.badge--d{ background:rgba(122,122,145,.14); color:#5b5b70; }
.badge--l{ background:rgba(220,38,38,.10); color:#b91c1c; }

/* ==========================================================
   TOP BAR
   ========================================================== */
.topbar{ background:var(--purple-950); color:rgba(255,255,255,.7); font-size:13px; }
.topbar__in{ display:flex; align-items:center; gap:16px; height:38px; }
.topbar__sep{ width:1px; height:14px; background:rgba(255,255,255,.2); }
.topbar__social{ margin-left:auto; display:flex; gap:6px; }
.topbar__social a{
  display:grid; place-items:center; width:28px; height:24px;
  font-size:10.5px; font-weight:700; letter-spacing:.03em;
  border-radius:6px; transition:background .2s, color .2s;
}
.topbar__social a:hover{ background:var(--orange); color:#fff; }
.topbar__lang{ border:1px solid rgba(255,255,255,.25); }

/* ==========================================================
   HEADER
   ========================================================== */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.header.is-stuck{ box-shadow:var(--shadow-md); }
.header__in{ display:flex; align-items:center; gap:24px; height:76px; }

.brand{ display:flex; align-items:center; gap:12px; flex:none; }
.brand__logo{ height:50px; width:auto; }
.brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.brand__txt strong{ font-size:17px; font-weight:800; color:var(--purple); letter-spacing:.01em; }
.brand__txt em{ font-style:normal; font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.04em; }

.nav{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav > a{
  position:relative; padding:10px 14px; border-radius:8px;
  font-size:14.5px; font-weight:600; color:var(--ink);
  transition:color .2s, background .2s;
}
.nav > a:not(.btn):hover{ color:var(--purple); background:rgba(60,59,153,.06); }
.nav > a:not(.btn).is-active{ color:var(--purple); }
.nav > a:not(.btn).is-active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:4px;
  height:2px; border-radius:2px; background:var(--orange);
}
.nav__cta{ margin-left:10px; }

.burger{
  display:none; margin-left:auto; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:10px;
}
.burger span{
  display:block; height:2px; border-radius:2px; background:var(--ink);
  transition:transform .25s ease, opacity .2s ease;
}
.burger span + span{ margin-top:5px; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================
   HERO
   ========================================================== */
.hero{ position:relative; overflow:hidden; color:#fff; background:var(--purple-900); }

.hero__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(60,59,153,.85), transparent 62%),
    radial-gradient(700px 500px at 92% 100%, rgba(245,130,32,.30), transparent 58%),
    linear-gradient(160deg, var(--purple-800) 0%, var(--purple-900) 48%, var(--purple-950) 100%);
}
.hero__bg::after{
  /* Kẻ sọc như mặt sân cỏ */
  content:""; position:absolute; inset:0; opacity:.5;
  background:repeating-linear-gradient(115deg,
    rgba(255,255,255,.035) 0 2px, transparent 2px 76px);
}
.hero__crest{
  position:absolute; right:-8%; top:50%; transform:translateY(-50%);
  width:640px; height:640px; opacity:.05; pointer-events:none;
  background:url("../../logo.png") center/contain no-repeat;
  filter:grayscale(1) brightness(3);
}

.hero__in{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;
  padding:76px 20px 88px;
}

.stars{ display:flex; gap:8px; margin-bottom:20px; }
.stars span{
  font-size:20px; color:var(--orange);
  animation:pop .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.stars span:nth-child(2){ animation-delay:.1s; }
.stars span:nth-child(3){ animation-delay:.2s; }
@keyframes pop{ from{ transform:scale(0) rotate(-90deg); opacity:0; } }

.hero__eyebrow{
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange-400); margin-bottom:12px;
}
.hero__title{
  font-size:clamp(40px, 6vw, 68px); font-weight:800; color:#fff;
  letter-spacing:-.03em; margin-bottom:18px;
}
.hero__title span{
  color:var(--orange);
  background:linear-gradient(180deg, transparent 68%, rgba(245,130,32,.28) 68%);
}
.hero__lead{
  max-width:52ch; font-size:17px; color:rgba(255,255,255,.78); margin-bottom:32px;
}
.hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:48px; }

.hero__stats{
  display:flex; gap:44px; flex-wrap:wrap;
  padding-top:28px; border-top:1px solid rgba(255,255,255,.14);
}
.hero__stats li{ display:flex; flex-direction:column; }
.hero__stats b{ font-size:30px; font-weight:800; color:#fff; letter-spacing:-.02em; }
.hero__stats span{ font-size:12.5px; color:rgba(255,255,255,.6); }

/* ---------- Match card ---------- */
.mcard{
  background:#fff; border-radius:var(--radius-lg); padding:26px;
  box-shadow:var(--shadow-lg); color:var(--body);
}
.mcard__top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; }
.mcard__comp{ font-size:12.5px; font-weight:600; color:var(--muted); }

.mcard__teams{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  margin-bottom:22px;
}
.mcard__team{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; }
.mcard__team b{ font-size:15px; color:var(--ink); font-weight:700; }
.mcard__team em{ font-style:normal; font-size:11.5px; color:var(--muted); }

.crest{
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
}
.crest--shb img{ width:100%; height:100%; object-fit:contain; }
.crest--away{
  background:linear-gradient(145deg, var(--bg-alt), #e9e9f2);
  border:1px solid var(--line);
  font-size:14px; font-weight:800; color:var(--muted); letter-spacing:.02em;
}
.mcard__vs span{
  display:grid; place-items:center; width:38px; height:38px; border-radius:50%;
  background:var(--purple); color:#fff; font-size:12px; font-weight:800; letter-spacing:.04em;
}

.mcard__meta{
  display:grid; gap:8px; padding:14px 16px; margin-bottom:20px;
  background:var(--bg-alt); border-radius:10px;
  font-size:13.5px; font-weight:500; color:var(--ink);
}
.mcard__meta div{ display:flex; align-items:center; gap:8px; }
.mcard__meta span{ font-size:14px; }

.countdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px; }
.cd{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 4px; border-radius:10px;
  background:linear-gradient(180deg, var(--purple), var(--purple-800));
}
.cd b{
  font-size:24px; font-weight:800; color:#fff; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.cd span{ font-size:10.5px; font-weight:600; color:rgba(255,255,255,.65); }

/* ==========================================================
   SECTIONS
   ========================================================== */
.sec{ padding:84px 0; }
.sec--tight{ padding:64px 0; }
.sec--alt{ background:var(--bg-alt); }
.sec--dark{ background:var(--purple-900); color:rgba(255,255,255,.75); }
.sec--dark h2,.sec--dark h3{ color:#fff; }

.sechead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:36px;
}
.sechead--col{ display:block; margin-bottom:24px; }
.sechead--center{ justify-content:center; text-align:center; margin-bottom:48px; }
.sechead__eyebrow{
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--orange); margin-bottom:8px;
}
.sechead__title{ font-size:clamp(27px,3.4vw,38px); font-weight:800; }
.sechead__desc{ margin-top:12px; max-width:56ch; font-size:16px; }
.sechead--center .sechead__desc{ margin-inline:auto; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
/* Grid item mặc định không co nhỏ hơn min-content: bảng BXH (min-width 420px)
   sẽ làm tràn ngang cả trang trên mobile nếu thiếu dòng này. */
.grid-2 > *{ min-width:0; }

/* ---------- Kết quả ---------- */
.form-strip{ display:flex; gap:6px; }
.fdot{
  display:grid; place-items:center; width:30px; height:30px; border-radius:8px;
  font-size:12px; font-weight:800; color:#fff;
}
.fdot--w{ background:#16a34a; }
.fdot--d{ background:#9a9ab0; }
.fdot--l{ background:#dc2626; }

.results{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.res{
  display:grid; gap:10px; padding:20px 22px;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.res:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:transparent; }
.res__comp{ font-size:12px; font-weight:600; color:var(--muted); }
.res__row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; }
.res__t{ font-size:14px; font-weight:600; color:var(--ink); }
.res__row .res__t:last-child{ text-align:right; }
.res__score{
  font-size:19px; font-weight:800; color:var(--purple);
  padding:3px 12px; border-radius:8px; background:rgba(60,59,153,.08);
  font-variant-numeric:tabular-nums;
}

/* ---------- Lịch thi đấu ---------- */
.fixtures{ display:grid; gap:12px; }
.fx{
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:20px;
  padding:18px 22px; background:#fff;
  border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.fx:hover{ transform:translateX(4px); box-shadow:var(--shadow-md); border-color:transparent; }
.fx--next{ border-color:rgba(245,130,32,.45); background:linear-gradient(90deg, rgba(245,130,32,.05), #fff 45%); }

.fx__date{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:60px; height:60px; flex:none; border-radius:12px;
  background:linear-gradient(180deg, var(--purple), var(--purple-800)); color:#fff;
}
.fx__date b{ font-size:22px; font-weight:800; line-height:1; }
.fx__date span{ font-size:10.5px; font-weight:600; color:rgba(255,255,255,.7); letter-spacing:.04em; }
.fx--next .fx__date{ background:linear-gradient(180deg, var(--orange-400), var(--orange-600)); }

.fx__match{ font-size:16.5px; font-weight:700; color:var(--ink); }
.fx__match i{ font-style:normal; font-weight:500; color:var(--muted); margin:0 4px; }
.fx__sub{ font-size:13px; color:var(--muted); margin-top:2px; }

/* ---------- Bảng xếp hạng ---------- */
.table-wrap{
  overflow-x:auto; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:18px;
}
.tbl{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:420px; }
.tbl th{
  text-align:center; padding:14px 10px; font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
  background:var(--bg-alt); border-bottom:1px solid var(--line);
}
.tbl td{
  text-align:center; padding:14px 10px; color:var(--body);
  border-bottom:1px solid var(--line); font-variant-numeric:tabular-nums;
}
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl__team{ text-align:left !important; font-weight:600; color:var(--ink); }
.tbl__crest{ display:inline-block; height:22px; width:22px; object-fit:contain; vertical-align:-6px; margin-right:4px; }
.tbl tbody tr:hover{ background:rgba(60,59,153,.03); }
.tbl .is-me{ background:rgba(60,59,153,.07); box-shadow:inset 3px 0 0 var(--orange); }
.tbl .is-me td{ color:var(--purple); font-weight:700; }
.tbl b{ color:var(--ink); }
.tbl .is-me b{ color:var(--purple); }

/* ---------- Feature news ---------- */
.feature{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.feature:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.feature__img{
  aspect-ratio:16/9; display:grid; place-items:center;
  background:linear-gradient(135deg, var(--purple), var(--purple-900));
  position:relative; overflow:hidden;
}
.feature__img::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 60px);
}
.feature__img span{ font-size:13px; font-weight:600; color:rgba(255,255,255,.4); letter-spacing:.05em; }
.feature__body{ padding:24px; }
.feature__body h3{ font-size:20px; font-weight:700; margin:14px 0 10px; }
.feature__body p{ font-size:14.5px; }
.feature__date{ display:block; margin-top:14px; font-size:12.5px; color:var(--muted); }

/* ---------- Đội hình ---------- */
.players{ display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
.pl{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:#fff; transition:transform .2s ease, box-shadow .2s ease;
}
.pl:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.pl__ph{
  aspect-ratio:3/4; display:grid; place-items:center; position:relative;
  background:linear-gradient(180deg, var(--purple) 0%, var(--purple-900) 100%);
  overflow:hidden;
}
.pl__ph::before{
  content:""; position:absolute; inset:auto -20% -30% -20%; height:60%;
  background:radial-gradient(ellipse at center top, rgba(245,130,32,.35), transparent 70%);
}
.pl__ph b{
  position:relative; font-size:56px; font-weight:800; color:rgba(255,255,255,.16);
  letter-spacing:-.04em;
}
.pl__b{ padding:16px; text-align:center; }
.pl__b span{ font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--orange); }
.pl__b h3{ font-size:16px; font-weight:700; margin-top:4px; }

/* ---------- Vé ---------- */
.tickets{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; }
.tk{
  position:relative; padding:32px 28px; border-radius:var(--radius-lg);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.14);
  transition:transform .2s ease, background .2s ease;
}
.tk:hover{ transform:translateY(-4px); background:rgba(255,255,255,.08); }
.tk h3{ font-size:18px; font-weight:700; }
.tk__price{
  margin:14px 0 20px; font-size:38px; font-weight:800; color:var(--orange-400);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums;
}
.tk__price span{ font-size:20px; margin-left:2px; }
.tk ul{ display:grid; gap:10px; margin-bottom:26px; }
.tk li{ position:relative; padding-left:24px; font-size:14.5px; }
.tk li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--orange); font-weight:800;
}
.tk--hot{
  background:rgba(255,255,255,.10); border-color:rgba(245,130,32,.55);
  box-shadow:0 20px 50px rgba(0,0,0,.30);
}
.tk__flag{
  position:absolute; top:-11px; left:28px;
  font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:var(--orange); color:#fff; padding:4px 12px; border-radius:100px;
}

/* ---------- Tin tức ---------- */
.news{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.nw{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
  cursor:pointer;
}
.nw:hover{ transform:translateY(-5px); box-shadow:var(--shadow-md); }
.nw__img{
  aspect-ratio:16/10; display:grid; place-items:center; position:relative; overflow:hidden;
  background:linear-gradient(135deg, #4a49ad, var(--purple-800));
}
.nw__img::after{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 54px);
}
.nw__img span{ font-size:12.5px; font-weight:600; color:rgba(255,255,255,.4); letter-spacing:.06em; }
.nw__b{ padding:22px; }
.nw__b h3{ font-size:17px; font-weight:700; margin:12px 0 8px; }
.nw:hover .nw__b h3{ color:var(--purple); }
.nw__b p{ font-size:14px; }
.nw__date{ display:block; margin-top:14px; font-size:12.5px; color:var(--muted); }

/* ---------- Nhà tài trợ ---------- */
.sponsors{ padding:44px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-alt); }
.sponsors__lbl{
  text-align:center; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:22px;
}
.sponsors__row{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:22px 52px;
}
.sponsors__row span{
  font-size:19px; font-weight:800; color:var(--muted); letter-spacing:-.01em;
  opacity:.55; filter:grayscale(1); transition:opacity .2s, color .2s;
}
.sponsors__row span:hover{ opacity:1; color:var(--purple); }

/* ---------- Newsletter ---------- */
.cta{ background:linear-gradient(120deg, var(--purple), var(--purple-800)); color:rgba(255,255,255,.8); }
.cta__in{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:40px;
  padding:56px 20px;
}
.cta h2{ font-size:clamp(23px,2.6vw,30px); color:#fff; margin-bottom:8px; }
.cta p{ font-size:15px; }
.cta__form{ position:relative; display:flex; gap:10px; }
.cta__form input{
  width:320px; max-width:100%; padding:14px 20px;
  border:2px solid rgba(255,255,255,.2); border-radius:100px;
  background:rgba(255,255,255,.08); color:#fff;
  font:400 15px/1 var(--font);
}
.cta__form input::placeholder{ color:rgba(255,255,255,.45); }
.cta__form input:focus{ outline:none; border-color:var(--orange); background:rgba(255,255,255,.14); }
.cta__note{
  position:absolute; top:calc(100% + 8px); left:20px;
  font-size:13px; font-weight:500; color:var(--orange-400);
}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{ background:var(--purple-950); color:rgba(255,255,255,.62); font-size:14px; }
.footer__grid{
  display:grid; grid-template-columns:1.1fr 1.3fr 1.3fr .8fr; gap:44px;
  padding-top:64px; padding-bottom:48px;
}
.footer__logo{ height:92px; width:auto; margin-bottom:18px; }
.footer__co{ font-size:13px; font-weight:700; color:#fff; line-height:1.5; letter-spacing:.01em; }
.footer__stars{ margin-top:10px; color:var(--orange); letter-spacing:.3em; font-size:13px; }

.footer__col h3{
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--orange); margin-bottom:16px;
}
.footer__col p{ margin-bottom:14px; line-height:1.6; }
.footer__col strong{ color:rgba(255,255,255,.9); font-weight:600; }
.footer__col a{ color:rgba(255,255,255,.62); border-bottom:1px solid rgba(255,255,255,.2); }
.footer__col a:hover{ color:var(--orange-400); border-color:var(--orange-400); }

.footer__links{ display:grid; gap:10px; }
.footer__links a{ border:0; transition:color .2s, padding-left .2s; }
.footer__links a:hover{ color:var(--orange-400); padding-left:5px; }

.footer__bar{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:22px; padding-bottom:28px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:12.5px; color:rgba(255,255,255,.42);
}
.footer__demo{ font-style:italic; }

/* ---------- To top ---------- */
.totop{
  position:fixed; right:24px; bottom:24px; z-index:70;
  width:46px; height:46px; border-radius:50%; border:0; cursor:pointer;
  background:var(--orange); color:#fff; font-size:19px;
  box-shadow:0 8px 24px rgba(245,130,32,.45);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .25s, transform .25s, visibility .25s, background .2s;
}
.totop.is-on{ opacity:1; visibility:visible; transform:none; }
.totop:hover{ background:var(--orange-600); }

/* ---------- Reveal on scroll ----------
   Lưu ý: transition chỉ đặt ở trạng thái .is-in.
   Nếu đặt transition ngay trên .reveal thì lúc JS gắn class, phần tử sẽ
   mờ dần từ 1 -> 0 (nhấp nháy) trước khi hiện lại. */
.reveal{ opacity:0; transform:translateY(22px); }
.reveal.is-in{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:44px; padding-top:56px; }
  .mcard{ max-width:460px; }
  .hero__crest{ display:none; }
  .players{ grid-template-columns:repeat(3,1fr); }
  .grid-2{ gap:36px; }
}

@media (max-width:900px){
  .burger{ display:block; }
  .nav{
    position:fixed; inset:114px 0 auto; z-index:55;
    flex-direction:column; align-items:stretch; gap:2px;
    padding:16px 20px 24px; margin:0;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-lg);
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav > a{ padding:14px 12px; font-size:16px; border-bottom:1px solid var(--line); border-radius:0; }
  .nav > a:not(.btn).is-active::after{ display:none; }
  .nav__cta{ margin:14px 0 0; border-bottom:0 !important; }

  .grid-2{ grid-template-columns:1fr; }
  .results{ grid-template-columns:1fr; }
  .news{ grid-template-columns:1fr; }
  .tickets{ grid-template-columns:1fr; }
  .cta__in{ grid-template-columns:1fr; gap:24px; }
  .cta__form input{ width:100%; flex:1; }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:32px; }
}

@media (max-width:680px){
  .sec{ padding:56px 0; }
  .sec--tight{ padding:48px 0; }
  .topbar__item--hide{ display:none; }
  .brand__logo{ height:42px; }
  .header__in{ height:68px; }
  .nav{ inset-block-start:106px; }

  .hero__stats{ gap:28px; }
  .hero__stats b{ font-size:24px; }
  .hero__btns .btn{ flex:1; }

  .sechead{ flex-direction:column; align-items:flex-start; gap:14px; }
  .sechead--center{ align-items:center; }

  .fx{ grid-template-columns:auto 1fr; gap:14px; row-gap:12px; }
  .fx .tag{ grid-column:1; justify-self:start; }
  .fx .btn{ grid-column:2; justify-self:end; }
  .fx:hover{ transform:none; }

  .players{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr; }
  .footer__bar{ flex-direction:column; align-items:flex-start; }
  .totop{ right:16px; bottom:16px; }
}